Various updates

src/renderer/app.tsx

@@ -39,13 +39,13 @@ export const App = () => {
         defaultRadius: 'xs',
         dir: 'ltr',
         focusRing: 'never',
-        fontFamily: 'Poppins, sans-serif',
+        fontFamily: 'Sora, sans-serif',
         fontSizes: {
           lg: 16,
           md: 14,
-          sm: 12,
+          sm: 13,
           xl: 18,
-          xs: 10,
+          xs: 12,
         },
         other: {},
         spacing: {

src/renderer/features/player/components/center-controls.tsx

@@ -2,9 +2,8 @@ import { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import format from 'format-duration';
 import isElectron from 'is-electron';
-import { useTranslation } from 'react-i18next';
+import { IoIosPause } from 'react-icons/io';
 import {
-  RiPauseLine,
   RiPlayFill,
   RiRepeat2Fill,
   RiShuffleFill,
@@ -55,7 +54,6 @@ const SliderWrapper = styled.div`
 `;
 
 export const CenterControls = ({ playersRef }: CenterControlsProps) => {
-  const { t } = useTranslation();
   const [isSeeking, setIsSeeking] = useState(false);
   const playerData = usePlayerStore((state) => state.getPlayerData());
   const player1 = playersRef?.current?.player1?.player;
@@ -94,17 +92,17 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
 
   return (
     <>
-      <ControlsContainer onScroll={(e) => console.log(e)}>
+      <ControlsContainer>
         <ButtonsContainer>
           <PlayerButton
             icon={<RiShuffleFill size={15} />}
-            tooltip={{ label: `${t('player.shuffle')}` }}
+            tooltip={{ label: `Shuffle`, openDelay: 500 }}
             variant="secondary"
             onClick={handlePrevTrack}
           />
           <PlayerButton
             icon={<RiSkipBackFill size={15} />}
-            tooltip={{ label: `${t('player.previous')}` }}
+            tooltip={{ label: `Previous track`, openDelay: 500 }}
             variant="secondary"
             onClick={handlePrevTrack}
           />
@@ -113,27 +111,25 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
               status === PlayerStatus.PAUSED ? (
                 <RiPlayFill size={20} />
               ) : (
-                <RiPauseLine size={20} stroke="20px" />
+                <IoIosPause size={20} />
               )
             }
             tooltip={{
-              label:
-                status === PlayerStatus.PAUSED
-                  ? `${t('player.play')}`
-                  : `${t('player.pause')}`,
+              label: status === PlayerStatus.PAUSED ? 'Play' : 'Pause',
+              openDelay: 500,
             }}
             variant="main"
             onClick={handlePlayPause}
           />
           <PlayerButton
             icon={<RiSkipForwardFill size={15} />}
-            tooltip={{ label: `${t('player.next')}` }}
+            tooltip={{ label: 'Next track', openDelay: 500 }}
             variant="secondary"
             onClick={handleNextTrack}
           />
           <PlayerButton
             icon={<RiRepeat2Fill size={15} />}
-            tooltip={{ label: `${t('player.repeat')}` }}
+            tooltip={{ label: 'Repeat', openDelay: 500 }}
             variant="secondary"
             onClick={handleNextTrack}
           />

src/renderer/features/player/components/player-button.tsx

@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -7,7 +8,7 @@ import {
   UnstyledButtonProps,
 } from '@mantine/core';
 import { motion } from 'framer-motion';
-import { Tooltip } from '../../../components';
+import { Tooltip } from '@/renderer/components';
 
 type MantineButtonProps = UnstyledButtonProps &
   ComponentPropsWithoutRef<'button'>;
@@ -33,15 +34,24 @@ const MotionWrapper = styled(motion.div)<MotionWrapperProps>`
 
 const ButtonMainVariant = css`
   padding: 0.5rem;
-  border: 2px solid var(--playerbar-btn-color);
+  background-color: var(--playerbar-btn-bg);
   border-radius: 50%;
 
   svg {
     display: flex;
+    fill: var(--playerbar-btn-fg);
   }
 
   &:focus-visible {
-    background: var(--playerbar-btn-color-hover);
+    background: var(--playerbar-btn-bg-hover);
+  }
+
+  &:hover {
+    background: var(--playerbar-btn-bg-hover);
+
+    svg {
+      fill: var(--playerbar-btn-fg-hover);
+    }
   }
 `;
 
@@ -50,21 +60,21 @@ const ButtonSecondaryVariant = css`
 
   svg {
     display: flex;
-    fill: var(--playerbar-btn-color);
-    stroke: var(--playerbar-btn-color);
+    fill: var(--playerbar-btn-bg);
+    stroke: var(--playerbar-btn-bg);
   }
 
   &:hover {
     svg {
-      fill: var(--playerbar-btn-color-hover);
-      stroke: var(--playerbar-btn-color-hover);
+      fill: var(--playerbar-btn-bg-hover);
+      stroke: var(--playerbar-btn-bg-hover);
     }
   }
 
   &:focus-visible {
     svg {
-      fill: var(--playerbar-btn-color-hover);
-      stroke: var(--playerbar-btn-color-hover);
+      fill: var(--playerbar-btn-bg-hover);
+      stroke: var(--playerbar-btn-bg-hover);
     }
   }
 `;

src/renderer/features/player/components/right-controls.tsx

@@ -48,7 +48,7 @@ export const RightControls = () => {
       <Group>
         <PlayerButton
           icon={<RiPlayListFill size={15} />}
-          tooltip={{ label: 'View queue' }}
+          tooltip={{ label: 'View queue', openDelay: 500 }}
           variant="secondary"
           onClick={() => setSidebar({ rightExpanded: !isQueueExpanded })}
         />
@@ -63,7 +63,7 @@ export const RightControls = () => {
                 <RiVolumeUpFill size={15} />
               )
             }
-            tooltip={{ label: muted ? 'Muted' : volume }}
+            tooltip={{ label: muted ? 'Muted' : volume, openDelay: 500 }}
             variant="secondary"
             onClick={handleMute}
           />

src/renderer/features/titlebar/components/activity-menu.tsx

@@ -1,11 +1,14 @@
 import { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { Group } from '@mantine/core';
+import { useQueryClient } from '@tanstack/react-query';
 import { FiActivity } from 'react-icons/fi';
 import { RiRefreshLine } from 'react-icons/ri';
 import { socket } from '@/renderer/api';
+import { queryKeys } from '@/renderer/api/query-keys';
 import { Button, Popover, Text } from '@/renderer/components';
 import { useTaskList } from '@/renderer/features/tasks';
+import { useAuthStore } from '@/renderer/store';
 import { rotating } from '@/renderer/styles';
 
 const StyledActivitySvg = styled(RiRefreshLine)`
@@ -14,10 +17,13 @@ const StyledActivitySvg = styled(RiRefreshLine)`
 `;
 
 export const ActivityMenu = () => {
+  const queryClient = useQueryClient();
+  const serverId = useAuthStore((state) => state.currentServer?.id) || '';
   const [isTaskRunning, setIsTaskRunning] = useState(false);
   const { data: tasks, refetch } = useTaskList({
     onSuccess: (data) => {
       if (data.data.length === 0) {
+        queryClient.invalidateQueries(queryKeys.server.root(serverId));
         return setIsTaskRunning(false);
       }
 
@@ -63,14 +69,9 @@ export const ActivityMenu = () => {
     <>
       <Popover withArrow withinPortal>
         <Popover.Target>
-          <Button
-            px={5}
-            size="xs"
-            sx={{ color: 'var(--titlebar-fg)' }}
-            variant="subtle"
-          >
+          <Button px={5} size="xs" variant="subtle">
             {isTaskRunning ? (
-              <StyledActivitySvg size={15} />
+              <StyledActivitySvg color="var(--primary-color)" size={15} />
             ) : (
               <FiActivity size={15} />
             )}

src/renderer/features/titlebar/components/app-menu.tsx

@@ -1,12 +1,9 @@
 import { Group } from '@mantine/core';
 import { openModal, closeAllModals } from '@mantine/modals';
-import {
-  RiArrowLeftLine,
-  RiLock2Line,
-  RiLogoutBoxLine,
-  RiMenu3Fill,
-} from 'react-icons/ri';
+import { useQueryClient } from '@tanstack/react-query';
+import { RiLock2Line, RiLogoutBoxLine, RiMenu3Fill } from 'react-icons/ri';
 import { useNavigate } from 'react-router';
+import { queryKeys } from '@/renderer/api/query-keys';
 import { Button, DropdownMenu } from '@/renderer/components';
 import {
   AddServerForm,
@@ -17,6 +14,7 @@ import { usePermissions } from '@/renderer/features/shared';
 import { useAuthStore } from '@/renderer/store';
 
 export const AppMenu = () => {
+  const queryClient = useQueryClient();
   const navigate = useNavigate();
   const logout = useAuthStore((state) => state.logout);
   const currentServer = useAuthStore((state) => state.currentServer);
@@ -57,6 +55,7 @@ export const AppMenu = () => {
     const server = servers?.data.find((s) => s.id === serverId);
     if (!server) return;
     setCurrentServer(server);
+    queryClient.invalidateQueries(queryKeys.server.root(serverId));
   };
 
   return (
@@ -82,15 +81,7 @@ export const AppMenu = () => {
             <DropdownMenu.Item
               key={`server-${s.id}`}
               disabled={requiresCredential}
-              rightSection={
-                s.id === currentServer?.id ? <RiArrowLeftLine /> : undefined
-              }
-              sx={{
-                color:
-                  s.id === currentServer?.id
-                    ? 'var(--primary-color)'
-                    : undefined,
-              }}
+              isActive={s.id === currentServer?.id}
               onClick={() => handleSetCurrentServer(s.id)}
             >
               <Group>

src/renderer/index.tsx

@@ -1,4 +1,5 @@
 import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { createRoot } from 'react-dom/client';
 import { I18nextProvider } from 'react-i18next';
 import { queryClient } from '@/renderer/lib/react-query';
@@ -12,6 +13,7 @@ root.render(
   <I18nextProvider i18n={i18n}>
     <QueryClientProvider client={queryClient}>
       <App />
+      <ReactQueryDevtools position="bottom-left" />
     </QueryClientProvider>
   </I18nextProvider>
 );

src/renderer/layouts/default-layout.tsx

@@ -61,6 +61,7 @@ const PlayerbarContainer = styled.footer`
   z-index: 50;
   grid-area: player;
   background: var(--playerbar-bg);
+  filter: drop-shadow(0 -3px 4mm rgba(0, 0, 0, 50%));
 `;
 
 const ResizeHandle = styled.div<{
@@ -108,7 +109,7 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
   }, []);
 
   const resize = useCallback(
-    (mouseMoveEvent) => {
+    (mouseMoveEvent: any) => {
       if (isResizing) {
         const width = `${constrainSidebarWidth(mouseMoveEvent.clientX)}px`;
         setSidebar({ leftWidth: width });

src/renderer/router/routes.ts

@@ -33,7 +33,10 @@ type TArgs =
   | { path: AppRoute.LIBRARY_ARTISTS }
   | { path: AppRoute.LIBRARY_ARTISTS_DETAIL }
   | { path: AppRoute.LIBRARY_ALBUMARTISTS }
-  | { path: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL }
+  | {
+      params: { albumArtistId: string };
+      path: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL;
+    }
   | { path: AppRoute.LIBRARY_ALBUMS }
   | { path: AppRoute.LIBRARY_FOLDERS }
   | { path: AppRoute.LIBRARY_SONGS }