Redesign sidebar / header and other misc. improvements (#24)

* Remove 1920px max width

* Fix position of list controls menu

* Match size and color of search input

* Adjust library header sizing

* Move app menu to sidebar

* Increase row buffer on play queue list

* Fix query builder styles

* Fix playerbar slider track bg

* Adjust titlebar styles

* Fix invalid modal prop

* Various adjustments to detail pages

* Fix sidebar height calculation

* Fix list null indicators, add filter indicator

* Adjust playqueue styles

* Fix jellyfin releaseYear normalization

* Suppress browser context menu on ag-grid

* Add radius to drawer queue -- normalize layout

* Add modal styles to provider theme

* Fix playlist song list pagination

* Add disc number to albums with more than one disc

* Fix query builder boolean values

* Adjust input placeholder color

* Properly handle rating/favorite from context menu on table

* Conform dropdown menu styles to context menu

* Increase sort type select width

* Fix drawer queue radius

* Change primary color

* Prevent volume wheel from invalid values

* Add icons to query builder dropdowns

* Update notification styles

* Update scrollbar thumb styles

* Remove "add to playlist" on smart playlists

* Fix "add to playlist" from context menu

src/renderer/api/jellyfin.api.ts

@@ -848,7 +848,7 @@ const normalizeAlbum = (item: JFAlbum, server: ServerListItem, imageSize?: numbe
     name: item.Name,
     playCount: item.UserData?.PlayCount || 0,
     releaseDate: item.PremiereDate?.split('T')[0] || null,
-    releaseYear: item.ProductionYear,
+    releaseYear: item.ProductionYear || null,
     serverId: server.id,
     serverType: ServerType.JELLYFIN,
     size: null,

src/renderer/app.tsx

@@ -7,7 +7,6 @@ import { ModalsProvider } from '@mantine/modals';
 import { initSimpleImg } from 'react-simple-img';
 import { BaseContextModal } from './components';
 import { useTheme } from './hooks';
-import { Notifications } from '@mantine/notifications';
 import { AppRouter } from './router/app-router';
 import { useSettingsStore } from './store/settings.store';
 import './styles/global.scss';
@@ -38,7 +37,21 @@ export const App = () => {
       withNormalizeCSS
       theme={{
         colorScheme: theme as 'light' | 'dark',
-        components: { Modal: { styles: { body: { padding: '.5rem' } } } },
+        components: {
+          Modal: {
+            styles: {
+              body: { background: 'var(--modal-bg)', padding: '1rem !important' },
+              close: { marginRight: '0.5rem' },
+              content: { borderRadius: '10px' },
+              header: {
+                background: 'var(--modal-bg)',
+                borderBottom: '1px solid var(--generic-border-color)',
+                paddingBottom: '1rem',
+              },
+              title: { fontSize: 'medium', fontWeight: 'bold' },
+            },
+          },
+        },
         defaultRadius: 'xs',
         dir: 'ltr',
         focusRing: 'auto',
@@ -85,8 +98,8 @@ export const App = () => {
       <ModalsProvider
         modalProps={{
           centered: true,
-          transitionDuration: 300,
           transitionProps: {
+            duration: 300,
             exitDuration: 300,
             transition: 'slide-down',
           },
@@ -95,7 +108,6 @@ export const App = () => {
       >
         <PlayQueueHandlerContext.Provider value={{ handlePlayQueueAdd }}>
           <ContextMenuProvider>
-            <Notifications />
             <AppRouter />
           </ContextMenuProvider>
         </PlayQueueHandlerContext.Provider>

src/renderer/components/dropdown-menu/index.tsx

@@ -6,7 +6,6 @@ import type {
   MenuDropdownProps as MantineMenuDropdownProps,
 } from '@mantine/core';
 import { Menu as MantineMenu, createPolymorphicComponent } from '@mantine/core';
-import { RiArrowLeftSFill } from 'react-icons/ri';
 import styled from 'styled-components';
 
 type MenuProps = MantineMenuProps;
@@ -56,18 +55,10 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
     background-color: var(--dropdown-menu-bg-hover);
   }
 
-  & .mantine-Menu-itemIcon {
-    margin-right: 1rem;
-  }
-
   & .mantine-Menu-itemLabel {
+    margin-right: 2rem;
+    margin-left: 1rem;
     color: ${(props) => (props.$danger ? 'var(--danger-color)' : 'var(--dropdown-menu-fg)')};
-    font-weight: 500;
-  }
-
-  & .mantine-Menu-itemRightSection {
-    display: flex;
-    margin-left: 2rem !important;
   }
 
   cursor: default;
@@ -110,7 +101,7 @@ const pMenuItem = ({ $isActive, $danger, children, ...props }: MenuItemProps) =>
     <StyledMenuItem
       $danger={$danger}
       $isActive={$isActive}
-      rightSection={$isActive && <RiArrowLeftSFill size={20} />}
+      // rightSection={$isActive && <RiArrowLeftSFill size={20} />}
       {...props}
     >
       {children}

src/renderer/components/page-header/index.tsx

@@ -12,6 +12,7 @@ const Container = styled(motion(Flex))<{
   z-index: 2000;
   width: 100%;
   height: ${(props) => props.height || '65px'};
+  background: var(--titlebar-bg);
 `;
 
 const Header = styled(motion.div)<{ $isHidden?: boolean; $padRight?: boolean }>`
@@ -19,7 +20,7 @@ const Header = styled(motion.div)<{ $isHidden?: boolean; $padRight?: boolean }>`
   z-index: 15;
   width: 100%;
   height: 100%;
-  margin-right: ${(props) => props.$padRight && '170px'};
+  margin-right: ${(props) => (props.$padRight ? '140px' : '1rem')};
   user-select: ${(props) => (props.$isHidden ? 'none' : 'auto')};
   pointer-events: ${(props) => (props.$isHidden ? 'none' : 'auto')};
   -webkit-app-region: drag;
@@ -66,6 +67,7 @@ export interface PageHeaderProps
 
 const TitleWrapper = styled(motion.div)`
   position: absolute;
+  display: flex;
   width: 100%;
   height: 100%;
 `;

src/renderer/components/query-builder/index.tsx

@@ -1,7 +1,7 @@
 import { Group, Stack } from '@mantine/core';
 import { Select } from '/@/renderer/components/select';
 import { AnimatePresence, motion } from 'framer-motion';
-import { RiAddLine, RiMore2Line } from 'react-icons/ri';
+import { RiAddFill, RiAddLine, RiDeleteBinFill, RiMore2Line, RiRestartLine } from 'react-icons/ri';
 import { Button } from '/@/renderer/components/button';
 import { DropdownMenu } from '/@/renderer/components/dropdown-menu';
 import { QueryBuilderOption } from '/@/renderer/components/query-builder/query-builder-option';
@@ -87,8 +87,11 @@ export const QueryBuilder = ({
   };
 
   return (
-    <Stack ml={`${level * 10}px`}>
+    <Stack
-      <Group>
+      ml={`${level * 10}px`}
+      spacing="sm"
+    >
+      <Group spacing="sm">
         <Select
           data={FILTER_GROUP_OPTIONS_DATA}
           maxWidth={175}
@@ -117,10 +120,18 @@ export const QueryBuilder = ({
             </Button>
           </DropdownMenu.Target>
           <DropdownMenu.Dropdown>
-            <DropdownMenu.Item onClick={handleAddRuleGroup}>Add rule group</DropdownMenu.Item>
+            <DropdownMenu.Item
+              icon={<RiAddFill />}
+              onClick={handleAddRuleGroup}
+            >
+              Add rule group
+            </DropdownMenu.Item>
 
             {level > 0 && (
-              <DropdownMenu.Item onClick={handleDeleteRuleGroup}>
+              <DropdownMenu.Item
+                icon={<RiDeleteBinFill />}
+                onClick={handleDeleteRuleGroup}
+              >
                 Remove rule group
               </DropdownMenu.Item>
             )}
@@ -129,12 +140,14 @@ export const QueryBuilder = ({
                 <DropdownMenu.Divider />
                 <DropdownMenu.Item
                   $danger
+                  icon={<RiRestartLine color="var(--danger-color)" />}
                   onClick={onResetFilters}
                 >
                   Reset to default
                 </DropdownMenu.Item>
                 <DropdownMenu.Item
                   $danger
+                  icon={<RiDeleteBinFill color="var(--danger-color)" />}
                   onClick={onClearFilters}
                 >
                   Clear filters

src/renderer/components/query-builder/query-builder-option.tsx

@@ -91,7 +91,11 @@ const QueryValueInput = ({ onChange, type, ...props }: any) => {
     case 'boolean':
       return (
         <Select
-          data={[]}
+          data={[
+            { label: 'true', value: 'true' },
+            { label: 'false', value: 'false' },
+          ]}
+          onChange={onChange}
           {...props}
         />
       );
@@ -178,14 +182,17 @@ export const QueryBuilderOption = ({
   const ml = (level + 1) * 10;
 
   return (
-    <Group ml={ml}>
+    <Group
+      ml={ml}
+      spacing="sm"
+    >
       <Select
         searchable
         data={filters}
         maxWidth={170}
         size="sm"
         value={field}
-        width="20%"
+        width="25%"
         onChange={handleChangeField}
       />
       <Select
@@ -195,7 +202,7 @@ export const QueryBuilderOption = ({
         maxWidth={170}
         size="sm"
         value={operator}
-        width="20%"
+        width="25%"
         onChange={handleChangeOperator}
       />
       {field ? (
@@ -204,7 +211,7 @@ export const QueryBuilderOption = ({
           maxWidth={170}
           size="sm"
           type={operator === 'inTheRange' ? 'dateRange' : fieldType}
-          width="20%"
+          width="25%"
           onChange={handleChangeValue}
         />
       ) : (
@@ -213,7 +220,7 @@ export const QueryBuilderOption = ({
           defaultValue={value}
           maxWidth={170}
           size="sm"
-          width="20%"
+          width="25%"
           onChange={handleChangeValue}
         />
       )}

src/renderer/components/scroll-area/index.tsx

@@ -31,11 +31,11 @@ const StyledNativeScrollArea = styled.div<{ scrollBarOffset?: string }>`
   overflow-y: overlay !important;
 
   &::-webkit-scrollbar-track {
-    margin-top: ${(props) => props.scrollBarOffset || '35px'};
+    margin-top: ${(props) => props.scrollBarOffset || '65px'};
   }
 
   &::-webkit-scrollbar-thumb {
-    margin-top: ${(props) => props.scrollBarOffset || '35px'};
+    margin-top: ${(props) => props.scrollBarOffset || '65px'};
   }
 `;
 
@@ -78,7 +78,7 @@ export const NativeScrollArea = forwardRef(
     const [hideHeader, setHideHeader] = useState(true);
     const { start, clear } = useTimeout(
       () => setHideScrollbar(true),
-      scrollHideDelay !== undefined ? scrollHideDelay * 1000 : 1000,
+      scrollHideDelay !== undefined ? scrollHideDelay * 1000 : 0,
     );
 
     const containerRef = useRef(null);

src/renderer/components/search-input/index.tsx

@@ -43,10 +43,10 @@ export const SearchInput = ({
     <TextInput
       ref={mergedRef}
       {...props}
-      icon={showIcon && <RiSearchLine size={15} />}
+      icon={showIcon && <RiSearchLine />}
       size="md"
       styles={{
-        icon: { svg: { fill: 'var(--btn-default-fg)' } },
+        icon: { svg: { fill: 'var(--titlebar-fg)' } },
         input: {
           backgroundColor: isOpened ? 'inherit' : 'transparent !important',
           border: 'none !important',

src/renderer/components/toast/index.tsx

@@ -30,15 +30,19 @@ const showToast = ({ type, ...props }: NotificationProps) => {
       ? 'Error'
       : 'Info';
 
-  const defaultDuration = type === 'error' ? 3500 : 2000;
+  const defaultDuration = type === 'error' ? 4000 : 2000;
 
   return showNotification({
     autoClose: defaultDuration,
     styles: () => ({
-      closeButton: {},
+      closeButton: {
+        '&:hover': {
+          background: 'transparent',
+        },
+      },
       description: {
         color: 'var(--toast-description-fg)',
-        fontSize: '.9em',
+        fontSize: '1rem',
       },
       loader: {
         margin: '1rem',
@@ -46,10 +50,12 @@ const showToast = ({ type, ...props }: NotificationProps) => {
       root: {
         '&::before': { backgroundColor: color },
         background: 'var(--toast-bg)',
+        border: '2px solid var(--generic-border-color)',
+        bottom: '90px',
       },
       title: {
         color: 'var(--toast-title-fg)',
-        fontSize: '1em',
+        fontSize: '1.3rem',
       },
     }),
     title: defaultTitle,

src/renderer/components/virtual-grid/virtual-infinite-grid.tsx

@@ -29,13 +29,13 @@ interface VirtualGridProps extends Omit<FixedSizeListProps, 'children' | 'itemSi
   setItemData: (data: any[]) => void;
 }
 
-const constrainWidth = (width: number) => {
+// const constrainWidth = (width: number) => {
-  if (width < 1920) {
+//   if (width < 1920) {
-    return width;
+//     return width;
-  }
+//   }
 
-  return 1920;
+//   return 1920;
-};
+// };
 
 export const VirtualInfiniteGrid = forwardRef(
   (
@@ -65,9 +65,7 @@ export const VirtualInfiniteGrid = forwardRef(
     const loader = useRef<InfiniteLoader>(null);
 
     const { itemHeight, rowCount, columnCount } = useMemo(() => {
-      const itemsPerRow = Math.floor(
+      const itemsPerRow = Math.floor((Number(width) - itemGap + 3) / (itemSize! + itemGap + 2));
-        (constrainWidth(Number(width)) - itemGap + 3) / (itemSize! + itemGap + 2),
-      );
 
       return {
         columnCount: itemsPerRow,

src/renderer/components/virtual-table/cells/favorite-cell.tsx

@@ -6,11 +6,7 @@ import { useMutation } from '@tanstack/react-query';
 import { HTTPError } from 'ky';
 import { api } from '/@/renderer/api';
 import { RawFavoriteResponse, FavoriteArgs, LibraryItem } from '/@/renderer/api/types';
-import {
+import { useCurrentServer, useSetAlbumListItemDataById } from '/@/renderer/store';
-  useCurrentServer,
-  useSetAlbumListItemDataById,
-  useSetQueueFavorite,
-} from '/@/renderer/store';
 
 const useCreateFavorite = () => {
   const server = useCurrentServer();
@@ -50,9 +46,6 @@ export const FavoriteCell = ({ value, data, node }: ICellRendererParams) => {
   const createMutation = useCreateFavorite();
   const deleteMutation = useDeleteFavorite();
 
-  // Since the queue is using client-side state, we need to update it manually
-  const setFavorite = useSetQueueFavorite();
-
   const handleToggleFavorite = () => {
     const newFavoriteValue = !value;
 
@@ -66,10 +59,6 @@ export const FavoriteCell = ({ value, data, node }: ICellRendererParams) => {
         },
         {
           onSuccess: () => {
-            if (data.itemType === LibraryItem.SONG) {
-              setFavorite([data.id], newFavoriteValue);
-            }
-
             node.setData({ ...data, userFavorite: newFavoriteValue });
           },
         },
@@ -84,10 +73,6 @@ export const FavoriteCell = ({ value, data, node }: ICellRendererParams) => {
         },
         {
           onSuccess: () => {
-            if (data.itemType === LibraryItem.SONG) {
-              setFavorite([data.id], newFavoriteValue);
-            }
-
             node.setData({ ...data, userFavorite: newFavoriteValue });
           },
         },

src/renderer/components/virtual-table/cells/rating-cell.tsx

@@ -1,47 +1,55 @@
-import { MouseEvent, useState } from 'react';
+import { MouseEvent } from 'react';
 import type { ICellRendererParams } from '@ag-grid-community/core';
 import { Rating } from '/@/renderer/components/rating';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 import { useUpdateRating } from '/@/renderer/components/virtual-table/hooks/use-rating';
 
-export const RatingCell = ({ value }: ICellRendererParams) => {
+export const RatingCell = ({ value, node }: ICellRendererParams) => {
   const updateRatingMutation = useUpdateRating();
-  const [ratingValue, setRatingValue] = useState(value?.userRating);
 
   const handleUpdateRating = (rating: number) => {
     if (!value) return;
 
-    updateRatingMutation.mutate({
+    updateRatingMutation.mutate(
-      _serverId: value?.serverId,
+      {
-      query: {
+        _serverId: value?.serverId,
-        item: [value],
+        query: {
-        rating,
+          item: [value],
+          rating,
+        },
       },
-    });
+      {
-
+        onSuccess: () => {
-    setRatingValue(rating);
+          node.setData({ ...node.data, userRating: rating });
+        },
+      },
+    );
   };
 
   const handleClearRating = (e: MouseEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    updateRatingMutation.mutate({
+    updateRatingMutation.mutate(
-      _serverId: value?.serverId,
+      {
-      query: {
+        _serverId: value?.serverId,
-        item: [value],
+        query: {
-        rating: 0,
+          item: [value],
+          rating: 0,
+        },
       },
-    });
+      {
-
+        onSuccess: () => {
-    setRatingValue(0);
+          node.setData({ ...node.data, userRating: 0 });
+        },
+      },
+    );
   };
 
   return (
     <CellContainer position="center">
       <Rating
-        defaultValue={value?.userRating || 0}
         size="xs"
-        value={ratingValue}
+        value={value?.userRating}
         onChange={handleUpdateRating}
         onClick={handleClearRating}
       />

src/renderer/components/virtual-table/index.tsx

@@ -254,6 +254,7 @@ const tableColumns: { [key: string]: ColDef } = {
     colId: TableColumn.TITLE_COMBINED,
     headerName: 'Title',
     initialWidth: 500,
+    minWidth: 150,
     valueGetter: (params: ValueGetterParams) =>
       params.data
         ? {
@@ -292,7 +293,7 @@ const tableColumns: { [key: string]: ColDef } = {
     width: 50,
   },
   userRating: {
-    cellClass: (params) => (params.value ? 'visible ag-cell-rating' : 'ag-cell-rating'),
+    cellClass: (params) => (params.value.userRating ? 'visible ag-cell-rating' : 'ag-cell-rating'),
     cellRenderer: RatingCell,
     colId: TableColumn.USER_RATING,
     field: 'userRating',
@@ -427,6 +428,7 @@ export const VirtualTable = forwardRef(
           ref={mergedRef}
           animateRows
           maintainColumnOrder
+          suppressAsyncEvents
           suppressContextMenu
           suppressCopyRowsToClipboard
           suppressMoveWhenRowDragging

src/renderer/features/action-required/components/server-required.tsx

@@ -1,10 +1,24 @@
-import { Text } from '/@/renderer/components';
+import { RiMenuFill } from 'react-icons/ri';
+import { Button, DropdownMenu, Text } from '/@/renderer/components';
+import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
 
 export const ServerRequired = () => {
   return (
     <>
       <Text>No server selected.</Text>
-      <Text>Add or select a server in the file menu.</Text>
+      <DropdownMenu>
+        <DropdownMenu.Target>
+          <Button
+            leftIcon={<RiMenuFill />}
+            variant="filled"
+          >
+            Open menu
+          </Button>
+        </DropdownMenu.Target>
+        <DropdownMenu.Dropdown>
+          <AppMenu />
+        </DropdownMenu.Dropdown>
+      </DropdownMenu>
     </>
   );
 };

src/renderer/features/albums/components/album-detail-content.tsx

@@ -3,28 +3,28 @@ import {
   Button,
   getColumnDefs,
   GridCarousel,
+  Text,
   TextTitle,
   useFixedTableHeader,
   VirtualTable,
 } from '/@/renderer/components';
-import { ColDef, RowDoubleClickedEvent } from '@ag-grid-community/core';
+import { ColDef, RowDoubleClickedEvent, RowHeightParams, RowNode } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { Box, Group, Stack } from '@mantine/core';
 import { useSetState } from '@mantine/hooks';
-import { RiHeartFill, RiHeartLine, RiMoreFill } from 'react-icons/ri';
+import { RiDiscFill, RiHeartFill, RiHeartLine, RiMoreFill } from 'react-icons/ri';
 import { generatePath, useParams } from 'react-router';
 import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
-import { useSongListStore } from '/@/renderer/store';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useContainerQuery } from '/@/renderer/hooks';
-import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
+import { PersistedTableColumn, usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import {
   useHandleGeneralContextMenu,
   useHandleTableContextMenu,
 } from '/@/renderer/features/context-menu';
-import { Play } from '/@/renderer/types';
+import { Play, ServerType, TableColumn } from '/@/renderer/types';
 import {
   ALBUM_CONTEXT_MENU_ITEMS,
   SONG_CONTEXT_MENU_ITEMS,
@@ -34,11 +34,14 @@ import { useAlbumList } from '/@/renderer/features/albums/queries/album-list-que
 import { AlbumListSort, LibraryItem, QueueSong, SortOrder } from '/@/renderer/api/types';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
 
+const isFullWidthRow = (node: RowNode) => {
+  return node.id?.includes('disc-');
+};
+
 const ContentContainer = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
-  max-width: 1920px;
   padding: 1rem 2rem 5rem;
   overflow: hidden;
 
@@ -61,13 +64,82 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
   const cq = useContainerQuery();
   const handlePlayQueueAdd = usePlayQueueAdd();
 
-  const page = useSongListStore();
+  // TODO: Make this customizable
+  const columnDefs: ColDef[] = useMemo(() => {
+    const userRatingColumn =
+      detailQuery?.data?.serverType !== ServerType.JELLYFIN
+        ? [
+            {
+              column: TableColumn.USER_RATING,
+              width: 0,
+            },
+          ]
+        : [];
 
-  const columnDefs: ColDef[] = useMemo(
+    const cols: PersistedTableColumn[] = [
-    () =>
+      {
-      getColumnDefs(page.table.columns).filter((c) => c.colId !== 'album' && c.colId !== 'artist'),
+        column: TableColumn.TRACK_NUMBER,
-    [page.table.columns],
+        width: 0,
-  );
+      },
+      {
+        column: TableColumn.TITLE_COMBINED,
+        width: 0,
+      },
+
+      {
+        column: TableColumn.DURATION,
+        width: 0,
+      },
+      {
+        column: TableColumn.BIT_RATE,
+        width: 0,
+      },
+      {
+        column: TableColumn.PLAY_COUNT,
+        width: 0,
+      },
+      {
+        column: TableColumn.LAST_PLAYED,
+        width: 0,
+      },
+      ...userRatingColumn,
+      {
+        column: TableColumn.USER_FAVORITE,
+        width: 0,
+      },
+    ];
+    return getColumnDefs(cols).filter((c) => c.colId !== 'album' && c.colId !== 'artist');
+  }, [detailQuery?.data?.serverType]);
+
+  const getRowHeight = useCallback((params: RowHeightParams) => {
+    if (isFullWidthRow(params.node)) {
+      return 45;
+    }
+
+    return 60;
+  }, []);
+
+  const songsRowData = useMemo(() => {
+    if (!detailQuery.data?.songs) {
+      return [];
+    }
+
+    const uniqueDiscNumbers = new Set(detailQuery.data?.songs.map((s) => s.discNumber));
+
+    if (uniqueDiscNumbers.size === 1) {
+      return detailQuery.data?.songs;
+    }
+
+    const rowData: (QueueSong | { id: string; name: string })[] = [];
+
+    for (const discNumber of uniqueDiscNumbers.values()) {
+      const songsByDiscNumber = detailQuery.data?.songs.filter((s) => s.discNumber === discNumber);
+      rowData.push({ id: `disc-${discNumber}`, name: `DISC ${discNumber}` });
+      rowData.push(...songsByDiscNumber);
+    }
+
+    return rowData;
+  }, [detailQuery.data?.songs]);
 
   const [pagination, setPagination] = useSetState({
     artist: 0,
@@ -261,9 +333,29 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
           suppressRowDrag
           columnDefs={columnDefs}
           enableCellChangeFlash={false}
+          fullWidthCellRenderer={(data: any) => {
+            if (!data.data) return null;
+            return (
+              <Group
+                align="center"
+                h="100%"
+                spacing="sm"
+              >
+                <RiDiscFill />
+                <Text>{data.data.name}</Text>
+              </Group>
+            );
+          }}
+          getRowHeight={getRowHeight}
           getRowId={(data) => data.data.id}
-          rowData={detailQuery.data?.songs}
+          isFullWidthRow={(data) => {
-          rowHeight={60}
+            return isFullWidthRow(data.rowNode) || false;
+          }}
+          isRowSelectable={(data) => {
+            if (isFullWidthRow(data.data)) return false;
+            return true;
+          }}
+          rowData={songsRowData}
           rowSelection="multiple"
           onCellContextMenu={handleContextMenu}
           onRowDoubleClicked={handleRowDoubleClick}

src/renderer/features/albums/components/album-list-content.tsx

@@ -114,7 +114,7 @@ export const AlbumListContent = ({
           );
 
           const albums = api.normalize.albumList(albumsRes, server);
-          params.successCallback(albums?.items || [], albumsRes?.totalRecordCount || undefined);
+          params.successCallback(albums?.items || [], albumsRes?.totalRecordCount || 0);
         },
         rowCount: undefined,
       };
@@ -341,7 +341,7 @@ export const AlbumListContent = ({
                   itemGap={20}
                   itemSize={150 + page.grid?.size}
                   itemType={LibraryItem.ALBUM}
-                  loading={!itemCount}
+                  loading={itemCount === undefined || itemCount === null}
                   minimumBatchSize={40}
                   route={{
                     route: AppRoute.LIBRARY_ALBUMS_DETAIL,
@@ -366,7 +366,7 @@ export const AlbumListContent = ({
             blockLoadDebounceMillis={200}
             columnDefs={columnDefs}
             getRowId={(data) => data.data.id}
-            infiniteInitialRowCount={itemCount || 1}
+            infiniteInitialRowCount={itemCount || 100}
             pagination={isPaginationEnabled}
             paginationAutoPageSize={isPaginationEnabled}
             paginationPageSize={page.table.pagination.itemsPerPage || 100}

src/renderer/features/albums/components/album-list-header-filters.tsx

@@ -1,4 +1,4 @@
-import { MutableRefObject, useCallback, MouseEvent, ChangeEvent } from 'react';
+import { MutableRefObject, useCallback, MouseEvent, ChangeEvent, useMemo } from 'react';
 import { IDatasource } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { Flex, Group, Stack } from '@mantine/core';
@@ -8,13 +8,13 @@ import {
   RiSortAsc,
   RiSortDesc,
   RiFolder2Line,
-  RiFilter3Line,
   RiMoreFill,
   RiAddBoxFill,
   RiPlayFill,
   RiAddCircleFill,
   RiRefreshLine,
   RiSettings3Fill,
+  RiFilterFill,
 } from 'react-icons/ri';
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
@@ -189,7 +189,7 @@ export const AlbumListHeaderFilters = ({
             );
 
             const albums = api.normalize.albumList(albumsRes, server);
-            params.successCallback(albums?.items || [], albumsRes?.totalRecordCount || undefined);
+            params.successCallback(albums?.items || [], albumsRes?.totalRecordCount || 0);
           },
           rowCount: undefined,
         };
@@ -371,6 +371,20 @@ export const AlbumListHeaderFilters = ({
     }
   };
 
+  const isFilterApplied = useMemo(() => {
+    const isNavidromeFilterApplied =
+      server?.type === ServerType.NAVIDROME &&
+      page.filter.ndParams &&
+      Object.values(page.filter.ndParams).some((value) => value !== undefined);
+
+    const isJellyfinFilterApplied =
+      server?.type === ServerType.JELLYFIN &&
+      page.filter.jfParams &&
+      Object.values(page.filter.jfParams).some((value) => value !== undefined);
+
+    return isNavidromeFilterApplied || isJellyfinFilterApplied;
+  }, [page.filter.jfParams, page.filter.ndParams, server?.type]);
+
   return (
     <Flex justify="space-between">
       <Group
@@ -447,15 +461,6 @@ export const AlbumListHeaderFilters = ({
             </DropdownMenu.Dropdown>
           </DropdownMenu>
         )}
-        <Button
-          compact
-          fw={600}
-          size="md"
-          variant="subtle"
-          onClick={handleOpenFiltersModal}
-        >
-          {cq.isSm ? 'Filters' : <RiFilter3Line size="1.3rem" />}
-        </Button>
         <DropdownMenu position="bottom-start">
           <DropdownMenu.Target>
             <Button
@@ -495,12 +500,26 @@ export const AlbumListHeaderFilters = ({
           </DropdownMenu.Dropdown>
         </DropdownMenu>
       </Group>
-      <Group>
+      <Group
-        <DropdownMenu position="bottom-start">
+        noWrap
+        spacing="sm"
+      >
+        <Button
+          compact
+          size="md"
+          sx={{ svg: { fill: isFilterApplied ? 'var(--primary-color) !important' : undefined } }}
+          tooltip={{ label: 'Filters' }}
+          variant="subtle"
+          onClick={handleOpenFiltersModal}
+        >
+          <RiFilterFill size="1.3rem" />
+        </Button>
+        <DropdownMenu position="bottom-end">
           <DropdownMenu.Target>
             <Button
               compact
               size="md"
+              tooltip={{ label: 'Configure' }}
               variant="subtle"
             >
               <RiSettings3Fill size="1.3rem" />

src/renderer/features/albums/components/album-list-header.tsx

@@ -129,7 +129,7 @@ export const AlbumListHeader = ({
             );
 
             const albums = api.normalize.albumList(albumsRes, server);
-            params.successCallback(albums?.items || [], albumsRes?.totalRecordCount || undefined);
+            params.successCallback(albums?.items || [], albumsRes?.totalRecordCount || 0);
           },
           rowCount: undefined,
         };
@@ -209,13 +209,11 @@ export const AlbumListHeader = ({
       <PageHeader backgroundColor="var(--titlebar-bg)">
         <Flex
           justify="space-between"
-          py="1rem"
+          w="100%"
         >
           <LibraryHeaderBar>
-            <Group noWrap>
+            <LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
-              <LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
+            <LibraryHeaderBar.Title>{title || 'Albums'}</LibraryHeaderBar.Title>
-              <LibraryHeaderBar.Title>{title || 'Albums'}</LibraryHeaderBar.Title>
-            </Group>
             <Paper
               fw="600"
               px="1rem"

src/renderer/features/albums/components/jellyfin-album-filters.tsx

@@ -4,7 +4,6 @@ import { MultiSelect, NumberInput, SpinnerIcon, Switch, Text } from '/@/renderer
 import { AlbumListFilter, useAlbumListStore, useSetAlbumFilters } from '/@/renderer/store';
 import debounce from 'lodash/debounce';
 import { useGenreList } from '/@/renderer/features/genres';
-import { useDebouncedValue } from '@mantine/hooks';
 import { AlbumArtistListSort, SortOrder } from '/@/renderer/api/types';
 import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query';
 
@@ -48,30 +47,30 @@ export const JellyfinAlbumFilters = ({
     },
   ];
 
-  const handleMinYearFilter = debounce((e: number | undefined) => {
+  const handleMinYearFilter = debounce((e: number | string) => {
-    if (e && (e < 1700 || e > 2300)) return;
+    if (typeof e === 'number' && (e < 1700 || e > 2300)) return;
     const updatedFilters = setFilters({
       jfParams: {
         ...filter.jfParams,
-        minYear: e,
+        minYear: e === '' ? undefined : (e as number),
       },
     });
     handleFilterChange(updatedFilters);
   }, 500);
 
-  const handleMaxYearFilter = debounce((e: number | undefined) => {
+  const handleMaxYearFilter = debounce((e: number | string) => {
-    if (e && (e < 1700 || e > 2300)) return;
+    if (typeof e === 'number' && (e < 1700 || e > 2300)) return;
     const updatedFilters = setFilters({
       jfParams: {
         ...filter.jfParams,
-        maxYear: e,
+        maxYear: e === '' ? undefined : (e as number),
       },
     });
     handleFilterChange(updatedFilters);
   }, 500);
 
   const handleGenresFilter = debounce((e: string[] | undefined) => {
-    const genreFilterString = e?.join(',');
+    const genreFilterString = e?.length ? e.join(',') : undefined;
     const updatedFilters = setFilters({
       jfParams: {
         ...filter.jfParams,
@@ -82,18 +81,16 @@ export const JellyfinAlbumFilters = ({
   }, 250);
 
   const [albumArtistSearchTerm, setAlbumArtistSearchTerm] = useState<string>('');
-  const [debouncedSearchTerm] = useDebouncedValue(albumArtistSearchTerm, 200);
 
   const albumArtistListQuery = useAlbumArtistList(
     {
-      limit: 300,
-      searchTerm: debouncedSearchTerm,
       sortBy: AlbumArtistListSort.NAME,
       sortOrder: SortOrder.ASC,
       startIndex: 0,
     },
     {
-      enabled: debouncedSearchTerm ? debouncedSearchTerm !== '' : false,
+      cacheTime: 1000 * 60 * 2,
+      staleTime: 1000 * 60 * 1,
     },
   );
 
@@ -106,6 +103,17 @@ export const JellyfinAlbumFilters = ({
     }));
   }, [albumArtistListQuery?.data?.items]);
 
+  const handleAlbumArtistFilter = (e: string[] | null) => {
+    const albumArtistFilterString = e?.length ? e.join(',') : undefined;
+    const updatedFilters = setFilters({
+      jfParams: {
+        ...filter.jfParams,
+        albumArtistIds: albumArtistFilterString,
+      },
+    });
+    handleFilterChange(updatedFilters);
+  };
+
   return (
     <Stack p="0.8rem">
       {toggleFilters.map((filter) => (
@@ -124,22 +132,22 @@ export const JellyfinAlbumFilters = ({
       <Divider my="0.5rem" />
       <Group grow>
         <NumberInput
+          defaultValue={filter.jfParams?.minYear}
           hideControls={false}
           label="From year"
           max={2300}
           min={1700}
           required={!!filter.jfParams?.maxYear}
-          value={filter.jfParams?.minYear}
+          onChange={(e) => handleMinYearFilter(e)}
-          onChange={handleMinYearFilter}
         />
         <NumberInput
+          defaultValue={filter.jfParams?.maxYear}
           hideControls={false}
           label="To year"
           max={2300}
           min={1700}
           required={!!filter.jfParams?.minYear}
-          value={filter.jfParams?.maxYear}
+          onChange={(e) => handleMaxYearFilter(e)}
-          onChange={handleMaxYearFilter}
         />
       </Group>
       <Group grow>
@@ -158,12 +166,14 @@ export const JellyfinAlbumFilters = ({
           clearable
           searchable
           data={selectableAlbumArtists}
+          defaultValue={filter.jfParams?.albumArtistIds?.split(',')}
           disabled={disableArtistFilter}
           label="Artist"
           limit={300}
           placeholder="Type to search for an artist"
           rightSection={albumArtistListQuery.isFetching ? <SpinnerIcon /> : undefined}
           searchValue={albumArtistSearchTerm}
+          onChange={handleAlbumArtistFilter}
           onSearchChange={setAlbumArtistSearchTerm}
         />
       </Group>

src/renderer/features/albums/components/navidrome-album-filters.tsx

@@ -2,7 +2,6 @@ import { ChangeEvent, useMemo, useState } from 'react';
 import { Divider, Group, Stack } from '@mantine/core';
 import { NumberInput, Switch, Text, Select, SpinnerIcon } from '/@/renderer/components';
 import { AlbumListFilter, useAlbumListStore, useSetAlbumFilters } from '/@/renderer/store';
-import { useDebouncedValue } from '@mantine/hooks';
 import debounce from 'lodash/debounce';
 import { useGenreList } from '/@/renderer/features/genres';
 import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query';
@@ -86,29 +85,28 @@ export const NavidromeAlbumFilters = ({
     },
   ];
 
-  const handleYearFilter = debounce((e: number | undefined) => {
+  const handleYearFilter = debounce((e: number | string) => {
     const updatedFilters = setFilters({
       ndParams: {
         ...filter.ndParams,
-        year: e,
+        year: e === '' ? undefined : (e as number),
       },
     });
     handleFilterChange(updatedFilters);
   }, 500);
 
   const [albumArtistSearchTerm, setAlbumArtistSearchTerm] = useState<string>('');
-  const [debouncedSearchTerm] = useDebouncedValue(albumArtistSearchTerm, 200);
 
   const albumArtistListQuery = useAlbumArtistList(
     {
-      limit: 300,
+      // searchTerm: debouncedSearchTerm,
-      searchTerm: debouncedSearchTerm,
       sortBy: AlbumArtistListSort.NAME,
       sortOrder: SortOrder.ASC,
       startIndex: 0,
     },
     {
-      enabled: debouncedSearchTerm ? debouncedSearchTerm !== '' : false,
+      cacheTime: 1000 * 60 * 2,
+      staleTime: 1000 * 60 * 1,
     },
   );
 
@@ -121,6 +119,16 @@ export const NavidromeAlbumFilters = ({
     }));
   }, [albumArtistListQuery?.data?.items]);
 
+  const handleAlbumArtistFilter = (e: string | null) => {
+    const updatedFilters = setFilters({
+      ndParams: {
+        ...filter.ndParams,
+        artist_id: e || undefined,
+      },
+    });
+    handleFilterChange(updatedFilters);
+  };
+
   return (
     <Stack p="0.8rem">
       {toggleFilters.map((filter) => (
@@ -138,12 +146,12 @@ export const NavidromeAlbumFilters = ({
       <Divider my="0.5rem" />
       <Group grow>
         <NumberInput
+          defaultValue={filter.ndParams?.year}
           hideControls={false}
           label="Year"
           max={5000}
           min={0}
-          value={filter.ndParams?.year}
+          onChange={(e) => handleYearFilter(e)}
-          onChange={handleYearFilter}
         />
         <Select
           clearable
@@ -159,12 +167,14 @@ export const NavidromeAlbumFilters = ({
           clearable
           searchable
           data={selectableAlbumArtists}
+          defaultValue={filter.ndParams?.artist_id}
           disabled={disableArtistFilter}
           label="Artist"
           limit={300}
           placeholder="Type to search for an artist"
           rightSection={albumArtistListQuery.isFetching ? <SpinnerIcon /> : undefined}
           searchValue={albumArtistSearchTerm}
+          onChange={handleAlbumArtistFilter}
           onSearchChange={setAlbumArtistSearchTerm}
         />
       </Group>

src/renderer/features/artists/components/album-artist-detail-content.tsx

@@ -44,7 +44,6 @@ const ContentContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 3rem;
-  max-width: 1920px;
   padding: 1rem 2rem 5rem;
   overflow: hidden;
 

src/renderer/features/artists/components/album-artist-detail-discography-header.tsx

@@ -143,7 +143,7 @@ export const AlbumArtistDiscographyHeader = ({ itemCount, tableRef }: SongListHe
           );
 
           const songs = api.normalize.songList(songsRes, server);
-          params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
+          params.successCallback(songs?.items || [], songsRes?.totalRecordCount || 0);
         },
         rowCount: undefined,
       };

src/renderer/features/artists/components/album-artist-detail-header.tsx

@@ -54,8 +54,6 @@ export const AlbumArtistDetailHeader = forwardRef(
     const handleClearRating = (_e: MouseEvent<HTMLDivElement>, rating?: number) => {
       if (!detailQuery?.data || !detailQuery?.data.userRating) return;
 
-      console.log(rating, detailQuery.data.userRating);
-
       const isSameRatingAsPrevious = rating === detailQuery.data.userRating;
       if (!isSameRatingAsPrevious) return;
 

src/renderer/features/artists/components/album-artist-detail-song-list-content.tsx

@@ -94,7 +94,7 @@ export const AlbumArtistDetailSongListContent = ({
           );
 
           const songs = api.normalize.songList(songsRes, server);
-          params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
+          params.successCallback(songs?.items || [], songsRes?.totalRecordCount || 0);
         },
         rowCount: undefined,
       };

src/renderer/features/artists/components/album-artist-detail-song-list-header.tsx

@@ -143,7 +143,7 @@ export const AlbumArtistDetailSongListHeader = ({
           );
 
           const songs = api.normalize.songList(songsRes, server);
-          params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
+          params.successCallback(songs?.items || [], songsRes?.totalRecordCount || 0);
         },
         rowCount: undefined,
       };

src/renderer/features/artists/components/album-artist-detail-top-songs-list-header.tsx

@@ -1,16 +1,9 @@
-import { Flex, Group } from '@mantine/core';
+import { RiAddBoxFill, RiAddCircleFill, RiMoreFill, RiPlayFill } from 'react-icons/ri';
-import { RiMoreFill } from 'react-icons/ri';
 import { QueueSong } from '/@/renderer/api/types';
-import {
+import { Button, DropdownMenu, PageHeader, SpinnerIcon, Paper } from '/@/renderer/components';
-  Button,
-  DropdownMenu,
-  PageHeader,
-  TextTitle,
-  Badge,
-  SpinnerIcon,
-} from '/@/renderer/components';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
-import { useContainerQuery } from '/@/renderer/hooks';
+import { LibraryHeaderBar } from '/@/renderer/features/shared';
+import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { Play } from '/@/renderer/types';
 
 interface AlbumArtistDetailTopSongsListHeaderProps {
@@ -25,7 +18,7 @@ export const AlbumArtistDetailTopSongsListHeader = ({
   data,
 }: AlbumArtistDetailTopSongsListHeaderProps) => {
   const handlePlayQueueAdd = usePlayQueueAdd();
-  const cq = useContainerQuery();
+  const playButtonBehavior = usePlayButtonBehavior();
 
   const handlePlay = async (play: Play) => {
     handlePlayQueueAdd?.({
@@ -36,61 +29,49 @@ export const AlbumArtistDetailTopSongsListHeader = ({
 
   return (
     <PageHeader p="1rem">
-      <Flex
+      <LibraryHeaderBar>
-        ref={cq.ref}
+        <LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
-        direction="row"
+        <LibraryHeaderBar.Title>Top songs from {title}</LibraryHeaderBar.Title>
-        justify="space-between"
+        <Paper
-      >
+          fw="600"
-        <Flex
+          px="1rem"
-          align="center"
+          py="0.3rem"
-          gap="md"
+          radius="sm"
-          justify="center"
         >
-          <Button
+          {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
-            compact
+        </Paper>
-            size="xl"
+        <DropdownMenu position="bottom-start">
-            sx={{ paddingLeft: 0, paddingRight: 0 }}
+          <DropdownMenu.Target>
-            variant="subtle"
+            <Button
-          >
+              compact
-            <Group noWrap>
+              fw="600"
-              <TextTitle
+              variant="subtle"
-                maw="20vw"
+            >
-                order={2}
+              <RiMoreFill size={15} />
-                overflow="hidden"
+            </Button>
-                weight={700}
+          </DropdownMenu.Target>
-              >
+          <DropdownMenu.Dropdown>
-                {title}
+            <DropdownMenu.Item
-              </TextTitle>
+              icon={<RiPlayFill />}
-              <Badge
+              onClick={() => handlePlay(Play.NOW)}
-                radius="xl"
+            >
-                size="lg"
+              Play
-              >
+            </DropdownMenu.Item>
-                {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
+            <DropdownMenu.Item
-              </Badge>
+              icon={<RiAddBoxFill />}
-            </Group>
+              onClick={() => handlePlay(Play.LAST)}
-          </Button>
+            >
-          <DropdownMenu position="bottom-start">
+              Add to queue
-            <DropdownMenu.Target>
+            </DropdownMenu.Item>
-              <Button
+            <DropdownMenu.Item
-                compact
+              icon={<RiAddCircleFill />}
-                fw="600"
+              onClick={() => handlePlay(Play.NEXT)}
-                variant="subtle"
+            >
-              >
+              Add to queue next
-                <RiMoreFill size={15} />
+            </DropdownMenu.Item>
-              </Button>
+          </DropdownMenu.Dropdown>
-            </DropdownMenu.Target>
+        </DropdownMenu>
-            <DropdownMenu.Dropdown>
+      </LibraryHeaderBar>
-              <DropdownMenu.Item onClick={() => handlePlay(Play.NOW)}>Play</DropdownMenu.Item>
-              <DropdownMenu.Item onClick={() => handlePlay(Play.LAST)}>
-                Add to queue
-              </DropdownMenu.Item>
-              <DropdownMenu.Item onClick={() => handlePlay(Play.NEXT)}>
-                Add to queue next
-              </DropdownMenu.Item>
-            </DropdownMenu.Dropdown>
-          </DropdownMenu>
-        </Flex>
-      </Flex>
     </PageHeader>
   );
 };

src/renderer/features/artists/components/album-artist-list-content.tsx

@@ -109,10 +109,7 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
           );
 
           const albums = api.normalize.albumArtistList(albumArtistsRes, server);
-          params.successCallback(
+          params.successCallback(albums?.items || [], albumArtistsRes?.totalRecordCount || 0);
-            albums?.items || [],
-            albumArtistsRes?.totalRecordCount || undefined,
-          );
         },
         rowCount: undefined,
       };

src/renderer/features/artists/components/album-artist-list-header-filters.tsx

@@ -8,8 +8,8 @@ import {
   RiSortDesc,
   RiFolder2Line,
   RiMoreFill,
-  RiSettings2Fill,
   RiRefreshLine,
+  RiSettings3Fill,
 } from 'react-icons/ri';
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
@@ -168,7 +168,7 @@ export const AlbumArtistListHeaderFilters = ({
             const albumArtists = api.normalize.albumArtistList(albumArtistsRes, server);
             params.successCallback(
               albumArtists?.items || [],
-              albumArtistsRes?.totalRecordCount || undefined,
+              albumArtistsRes?.totalRecordCount || 0,
             );
           },
           rowCount: undefined,
@@ -379,14 +379,14 @@ export const AlbumArtistListHeaderFilters = ({
         </DropdownMenu>
       </Group>
       <Group>
-        <DropdownMenu position="bottom-start">
+        <DropdownMenu position="bottom-end">
           <DropdownMenu.Target>
             <Button
               compact
               size="md"
               variant="subtle"
             >
-              <RiSettings2Fill size="1.3rem" />
+              <RiSettings3Fill size="1.3rem" />
             </Button>
           </DropdownMenu.Target>
           <DropdownMenu.Dropdown>

src/renderer/features/artists/components/album-artist-list-header.tsx

@@ -108,7 +108,7 @@ export const AlbumArtistListHeader = ({
             const albumArtists = api.normalize.albumArtistList(albumArtistsRes, server);
             params.successCallback(
               albumArtists?.items || [],
-              albumArtistsRes?.totalRecordCount || undefined,
+              albumArtistsRes?.totalRecordCount || 0,
             );
           },
           rowCount: undefined,
@@ -151,12 +151,10 @@ export const AlbumArtistListHeader = ({
       <PageHeader backgroundColor="var(--titlebar-bg)">
         <Flex
           justify="space-between"
-          py="1rem"
+          w="100%"
         >
           <LibraryHeaderBar>
-            <Group noWrap>
+            <LibraryHeaderBar.Title>Album Artists</LibraryHeaderBar.Title>
-              <LibraryHeaderBar.Title>Album Artists</LibraryHeaderBar.Title>
-            </Group>
             <Paper
               fw="600"
               px="1rem"

src/renderer/features/context-menu/context-menu-items.tsx

@@ -21,6 +21,16 @@ export const PLAYLIST_SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
   { children: true, disabled: false, id: 'setRating' },
 ];
 
+export const SMART_PLAYLIST_SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
+  { id: 'play' },
+  { id: 'playLast' },
+  { divider: true, id: 'playNext' },
+  { divider: true, id: 'addToPlaylist' },
+  { id: 'addToFavorites' },
+  { divider: true, id: 'removeFromFavorites' },
+  { children: true, disabled: false, id: 'setRating' },
+];
+
 export const ALBUM_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
   { id: 'play' },
   { id: 'playLast' },

src/renderer/features/context-menu/context-menu-provider.tsx

@@ -40,7 +40,7 @@ import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { useDeletePlaylist } from '/@/renderer/features/playlists';
 import { useRemoveFromPlaylist } from '/@/renderer/features/playlists/mutations/remove-from-playlist-mutation';
 import { useCreateFavorite, useDeleteFavorite, useUpdateRating } from '/@/renderer/features/shared';
-import { useCurrentServer } from '/@/renderer/store';
+import { useAuthStore, useCurrentServer } from '/@/renderer/store';
 import { Play } from '/@/renderer/types';
 
 type ContextMenuContextProps = {
@@ -65,6 +65,10 @@ const ContextMenuContext = createContext<ContextMenuContextProps>({
   },
 });
 
+const JELLYFIN_IGNORED_MENU_ITEMS: ContextMenuItemType[] = ['setRating'];
+// const NAVIDROME_IGNORED_MENU_ITEMS: ContextMenuItemType[] = [];
+// const SUBSONIC_IGNORED_MENU_ITEMS: ContextMenuItemType[] = [];
+
 export interface ContextMenuProviderProps {
   children: React.ReactNode;
 }
@@ -92,6 +96,13 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
   const openContextMenu = (args: OpenContextMenuProps) => {
     const { xPos, yPos, menuItems, data, type, tableRef, dataNodes, context } = args;
 
+    const serverType = data[0]?.serverType || useAuthStore.getState().currentServer?.type;
+    let validMenuItems = menuItems;
+
+    if (serverType === ServerType.JELLYFIN) {
+      validMenuItems = menuItems.filter((item) => !JELLYFIN_IGNORED_MENU_ITEMS.includes(item.id));
+    }
+
     // If the context menu dimension can't be automatically calculated, calculate it manually
     // This is a hacky way since resize observer may not automatically recalculate when not rendered
     const menuHeight = menuRect.height || (menuItems.length + 1) * 50;
@@ -107,7 +118,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
       context,
       data,
       dataNodes,
-      menuItems,
+      menuItems: validMenuItems,
       tableRef,
       type,
       xPos: calculatedXPos,
@@ -187,8 +198,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
           },
           onSuccess: () => {
             toast.success({
-              message: `${item.name} was successfully deleted`,
+              message: `Playlist has been deleted`,
-              title: 'Playlist deleted',
             });
           },
         },
@@ -269,9 +279,9 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
     let nodesToUnfavorite: RowNode<any>[] = [];
 
     if (ctx.dataNodes) {
-      nodesToUnfavorite = ctx.dataNodes.filter((item) => !item.data.userFavorite);
+      nodesToUnfavorite = ctx.dataNodes.filter((item) => item.data.userFavorite);
     } else {
-      itemsToUnfavorite = ctx.data.filter((item) => !item.userFavorite);
+      itemsToUnfavorite = ctx.data.filter((item) => item.userFavorite);
     }
 
     const idsToUnfavorite = nodesToUnfavorite
@@ -304,7 +314,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
 
     if (ctx.dataNodes) {
       for (const node of ctx.dataNodes) {
-        switch (node.data.type) {
+        switch (node.data.itemType) {
           case LibraryItem.ALBUM:
             albumId.push(node.data.id);
             break;
@@ -318,7 +328,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
       }
     } else {
       for (const item of ctx.data) {
-        switch (item.type) {
+        switch (item.itemType) {
           case LibraryItem.ALBUM:
             albumId.push(item.id);
             break;
@@ -370,7 +380,6 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
           onSuccess: () => {
             toast.success({
               message: `${songId.length} song(s) were removed from the playlist`,
-              title: 'Song(s) removed from playlist',
             });
             ctx.context?.tableRef?.current?.api?.refreshInfiniteCache();
             closeAllModals();
@@ -432,13 +441,24 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
           items = ctx.data.filter((item) => item.serverId === serverId);
         }
 
-        updateRatingMutation.mutate({
+        updateRatingMutation.mutate(
-          _serverId: serverId,
+          {
-          query: {
+            _serverId: serverId,
-            item: items,
+            query: {
-            rating,
+              item: items,
+              rating,
+            },
           },
-        });
+          {
+            onSuccess: () => {
+              if (ctx.dataNodes) {
+                for (const node of ctx.dataNodes) {
+                  node.setData({ ...node.data, userRating: rating });
+                }
+              }
+            },
+          },
+        );
       }
     },
     [ctx.data, ctx.dataNodes, updateRatingMutation],
@@ -625,17 +645,15 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
                             <HoverCard.Dropdown>
                               <Stack spacing={0}>
                                 {contextMenuItems[item.id].children?.map((child) => (
-                                  <>
+                                  <ContextMenuButton
-                                    <ContextMenuButton
+                                    key={`sub-${child.id}`}
-                                      key={`sub-${child.id}`}
+                                    disabled={child.disabled}
-                                      disabled={child.disabled}
+                                    leftIcon={child.leftIcon}
-                                      leftIcon={child.leftIcon}
+                                    rightIcon={child.rightIcon}
-                                      rightIcon={child.rightIcon}
+                                    onClick={child.onClick}
-                                      onClick={child.onClick}
+                                  >
-                                    >
+                                    {child.label}
-                                      {child.label}
+                                  </ContextMenuButton>
-                                    </ContextMenuButton>
-                                  </>
                                 ))}
                               </Stack>
                             </HoverCard.Dropdown>

src/renderer/features/home/routes/home-route.tsx

@@ -210,7 +210,6 @@ const HomeRoute = () => {
           px="2rem"
           sx={{
             height: '100%',
-            maxWidth: '1920px',
             width: '100%',
           }}
         >

src/renderer/features/now-playing/components/drawer-play-queue.tsx

@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { Stack } from '@mantine/core';
+import { Box, Flex } from '@mantine/core';
 import { PlayQueueListControls } from './play-queue-list-controls';
 import { Song } from '/@/renderer/api/types';
 import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
@@ -9,18 +9,29 @@ export const DrawerPlayQueue = () => {
   const queueRef = useRef<{ grid: AgGridReactType<Song> } | null>(null);
 
   return (
-    <Stack
+    <Flex
+      direction="column"
       h="100%"
-      spacing={0}
+      sx={{
+        borderTopLeftRadius: '5px',
+        borderTopRightRadius: '5px',
+      }}
     >
-      <PlayQueue
+      <Box
-        ref={queueRef}
+        bg="var(--main-bg)"
-        type="sideQueue"
+        sx={{ borderTopLeftRadius: '5px', borderTopRightRadius: '5px' }}
-      />
+      >
-      <PlayQueueListControls
+        <PlayQueueListControls
-        tableRef={queueRef}
+          tableRef={queueRef}
-        type="sideQueue"
+          type="sideQueue"
-      />
+        />
-    </Stack>
+      </Box>
+      <Flex h="100%">
+        <PlayQueue
+          ref={queueRef}
+          type="sideQueue"
+        />
+      </Flex>
+    </Flex>
   );
 };

src/renderer/features/now-playing/components/now-playing-header.tsx

@@ -1,20 +1,15 @@
-import { Group } from '@mantine/core';
+import { PageHeader } from '/@/renderer/components';
-import { PageHeader, TextTitle } from '/@/renderer/components';
+import { LibraryHeaderBar } from '/@/renderer/features/shared';
 
 export const NowPlayingHeader = () => {
   // const currentSong = useCurrentSong();
   // const theme = useTheme();
 
   return (
-    <PageHeader>
+    <PageHeader backgroundColor="var(--titlebar-bg)">
-      <Group p="1rem">
+      <LibraryHeaderBar>
-        <TextTitle
+        <LibraryHeaderBar.Title>Queue</LibraryHeaderBar.Title>
-          order={2}
+      </LibraryHeaderBar>
-          weight={700}
-        >
-          Queue
-        </TextTitle>
-      </Group>
     </PageHeader>
   );
 };

src/renderer/features/now-playing/components/play-queue-list-controls.tsx

@@ -138,13 +138,16 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
         </Button>
       </Group>
       <Group>
-        <Popover transition="fade">
+        <Popover
+          position="top-end"
+          transition="fade"
+        >
           <Popover.Target>
             <Button
               compact
               size="md"
               tooltip={{ label: 'Configure' }}
-              variant="default"
+              variant="subtle"
             >
               <RiListSettingsLine size="1.1rem" />
             </Button>

src/renderer/features/now-playing/components/play-queue.tsx

@@ -8,11 +8,7 @@ import type {
 } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import '@ag-grid-community/styles/ag-theme-alpine.css';
-import {
+import { VirtualGridAutoSizerContainer, getColumnDefs } from '/@/renderer/components';
-  VirtualGridAutoSizerContainer,
-  VirtualGridContainer,
-  getColumnDefs,
-} from '/@/renderer/components';
 import {
   useAppStoreActions,
   useCurrentSong,
@@ -190,29 +186,28 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
 
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
-      <VirtualGridContainer>
+      <VirtualGridAutoSizerContainer>
-        <VirtualGridAutoSizerContainer>
+        <VirtualTable
-          <VirtualTable
+          ref={mergedRef}
-            ref={mergedRef}
+          alwaysShowHorizontalScroll
-            alwaysShowHorizontalScroll
+          rowDragEntireRow
-            rowDragEntireRow
+          rowDragMultiRow
-            rowDragMultiRow
+          autoFitColumns={tableConfig.autoFit}
-            autoFitColumns={tableConfig.autoFit}
+          columnDefs={columnDefs}
-            columnDefs={columnDefs}
+          getRowId={(data) => data.data.uniqueId}
-            getRowId={(data) => data.data.uniqueId}
+          rowBuffer={50}
-            rowClassRules={rowClassRules}
+          rowClassRules={rowClassRules}
-            rowData={queue}
+          rowData={queue}
-            rowHeight={tableConfig.rowHeight || 40}
+          rowHeight={tableConfig.rowHeight || 40}
-            onCellDoubleClicked={handleDoubleClick}
+          onCellDoubleClicked={handleDoubleClick}
-            onColumnMoved={handleColumnChange}
+          onColumnMoved={handleColumnChange}
-            onColumnResized={debouncedColumnChange}
+          onColumnResized={debouncedColumnChange}
-            onDragStarted={handleDragStart}
+          onDragStarted={handleDragStart}
-            onGridReady={handleGridReady}
+          onGridReady={handleGridReady}
-            onGridSizeChanged={handleGridSizeChange}
+          onGridSizeChanged={handleGridSizeChange}
-            onRowDragEnd={handleDragEnd}
+          onRowDragEnd={handleDragEnd}
-          />
+        />
-        </VirtualGridAutoSizerContainer>
+      </VirtualGridAutoSizerContainer>
-      </VirtualGridContainer>
     </ErrorBoundary>
   );
 });

src/renderer/features/now-playing/components/sidebar-play-queue.tsx

@@ -1,58 +1,29 @@
 import { useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { Flex } from '@mantine/core';
+import { Stack } from '@mantine/core';
 import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
-import styled from 'styled-components';
 import { PlayQueueListControls } from './play-queue-list-controls';
 import { Song } from '/@/renderer/api/types';
-
+import { PageHeader, Paper, VirtualGridContainer } from '/@/renderer/components';
-const BackgroundImageOverlay = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 30%), var(--background-noise);
-`;
 
 export const SidebarPlayQueue = () => {
   const queueRef = useRef<{ grid: AgGridReactType<Song> } | null>(null);
 
   return (
-    <>
+    <VirtualGridContainer>
-      <Flex
+      <Stack>
-        bg="var(--titlebar-bg)"
+        <PageHeader backgroundColor="var(--titlebar-bg)" />
-        h="65px"
+      </Stack>
-        sx={{ position: 'relative' }}
+      <Paper>
-        w="100%"
-      >
-        <BackgroundImageOverlay />
-        <Flex
-          h="100%"
-          mr="160px"
-          sx={{
-            WebkitAppRegion: 'drag',
-            background: 'var(--titlebar-bg)',
-          }}
-          w="100%"
-        />
-      </Flex>
-      <Flex
-        direction="column"
-        h="calc(100% - 65px)"
-        sx={{ borderLeft: '2px solid var(--generic-border-color)' }}
-        w="100%"
-      >
-        <PlayQueue
-          ref={queueRef}
-          type="sideQueue"
-        />
         <PlayQueueListControls
           tableRef={queueRef}
           type="sideQueue"
         />
-      </Flex>
+      </Paper>
-    </>
+      <PlayQueue
+        ref={queueRef}
+        type="sideQueue"
+      />
+    </VirtualGridContainer>
   );
 };

src/renderer/features/now-playing/routes/now-playing-route.tsx

@@ -1,33 +1,30 @@
 import { useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { Flex, Stack } from '@mantine/core';
 import { NowPlayingHeader } from '/@/renderer/features/now-playing/components/now-playing-header';
 import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
-import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
 import type { Song } from '/@/renderer/api/types';
 import { AnimatedPage } from '/@/renderer/features/shared';
+import { Paper, VirtualGridContainer } from '/@/renderer/components';
+import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
 
 const NowPlayingRoute = () => {
   const queueRef = useRef<{ grid: AgGridReactType<Song> } | null>(null);
 
   return (
     <AnimatedPage>
-      <Stack
+      <VirtualGridContainer>
-        h="100%"
-        spacing={0}
-      >
         <NowPlayingHeader />
-        <PlayQueue
+        <Paper sx={{ borderTop: '1px solid var(--generic-border-color)' }}>
-          ref={queueRef}
-          type="nowPlaying"
-        />
-        <Flex sx={{ borderTop: '1px solid var(--generic-border-color)' }}>
           <PlayQueueListControls
             tableRef={queueRef}
             type="nowPlaying"
           />
-        </Flex>
+        </Paper>
-      </Stack>
+        <PlayQueue
+          ref={queueRef}
+          type="nowPlaying"
+        />
+      </VirtualGridContainer>
     </AnimatedPage>
   );
 };

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

@@ -227,7 +227,6 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
             onChangeEnd={(e) => {
               handleSeekSlider(e);
               setIsSeeking(false);
-              console.log('end');
             }}
           />
         </SliderWrapper>

src/renderer/features/player/components/playerbar-slider.tsx

@@ -33,6 +33,11 @@ export const PlayerbarSlider = ({ ...props }: SliderProps) => {
           opacity: 0,
           width: '1rem',
         },
+        track: {
+          '&::before': {
+            backgroundColor: 'var(--playerbar-slider-track-bg)',
+          },
+        },
       }}
       {...props}
     />

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

@@ -13,7 +13,6 @@ import {
   useCurrentServer,
   useCurrentSong,
   useMuted,
-  useSetQueueFavorite,
   useSidebarStore,
   useVolume,
 } from '/@/renderer/store';
@@ -36,24 +35,16 @@ export const RightControls = () => {
   const updateRatingMutation = useUpdateRating();
   const addToFavoritesMutation = useCreateFavorite();
   const removeFromFavoritesMutation = useDeleteFavorite();
-  const setFavorite = useSetQueueFavorite();
 
   const handleAddToFavorites = () => {
     if (!currentSong) return;
 
-    addToFavoritesMutation.mutate(
+    addToFavoritesMutation.mutate({
-      {
+      query: {
-        query: {
+        id: [currentSong.id],
-          id: [currentSong.id],
+        type: LibraryItem.SONG,
-          type: LibraryItem.SONG,
-        },
       },
-      {
+    });
-        onSuccess: () => {
-          setFavorite([currentSong.id], true);
-        },
-      },
-    );
   };
 
   const handleUpdateRating = (rating: number) => {
@@ -83,19 +74,12 @@ export const RightControls = () => {
   const handleRemoveFromFavorites = () => {
     if (!currentSong) return;
 
-    removeFromFavoritesMutation.mutate(
+    removeFromFavoritesMutation.mutate({
-      {
+      query: {
-        query: {
+        id: [currentSong.id],
-          id: [currentSong.id],
+        type: LibraryItem.SONG,
-          type: LibraryItem.SONG,
-        },
       },
-      {
+    });
-        onSuccess: () => {
-          setFavorite([currentSong.id], false);
-        },
-      },
-    );
   };
 
   const handleToggleFavorite = () => {

src/renderer/features/player/hooks/use-right-controls.ts

@@ -34,15 +34,25 @@ export const useRightControls = () => {
   };
 
   const handleVolumeWheel = (e: WheelEvent<HTMLDivElement>) => {
-    let newVolume;
+    let volumeToSet;
     if (e.deltaY > 0) {
-      newVolume = volume - volumeWheelStep;
+      const newVolumeLessThanZero = volume - volumeWheelStep < 0;
+      if (newVolumeLessThanZero) {
+        volumeToSet = 0;
+      } else {
+        volumeToSet = volume - volumeWheelStep;
+      }
     } else {
-      newVolume = volume + volumeWheelStep;
+      const newVolumeGreaterThanHundred = volume + volumeWheelStep > 100;
+      if (newVolumeGreaterThanHundred) {
+        volumeToSet = 100;
+      } else {
+        volumeToSet = volume + volumeWheelStep;
+      }
     }
 
-    mpvPlayer.volume(newVolume);
+    mpvPlayer.volume(volumeToSet);
-    setVolume(newVolume);
+    setVolume(volumeToSet);
   };
 
   const handleMute = () => {

src/renderer/features/playlists/components/create-playlist-form.tsx

@@ -63,7 +63,7 @@ export const CreatePlaylistForm = ({ onCancel }: CreatePlaylistFormProps) => {
           toast.error({ message: err.message, title: 'Error creating playlist' });
         },
         onSuccess: () => {
-          toast.success({ message: 'Playlist created successfully' });
+          toast.success({ message: `Playlist has been created` });
           onCancel();
         },
       },

src/renderer/features/playlists/components/playlist-detail-content.tsx

@@ -28,7 +28,10 @@ import {
   VirtualTable,
 } from '/@/renderer/components';
 import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
-import { PLAYLIST_SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
+import {
+  PLAYLIST_SONG_CONTEXT_MENU_ITEMS,
+  SMART_PLAYLIST_SONG_CONTEXT_MENU_ITEMS,
+} from '/@/renderer/features/context-menu/context-menu-items';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { UpdatePlaylistForm } from '/@/renderer/features/playlists/components/update-playlist-form';
 import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation';
@@ -44,7 +47,6 @@ const ContentContainer = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
-  max-width: 1920px;
   padding: 1rem 2rem 5rem;
   overflow: hidden;
 
@@ -90,11 +92,17 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
     [page.table.columns],
   );
 
-  const handleContextMenu = useHandleTableContextMenu(
+  const contextMenuItems = useMemo(() => {
-    LibraryItem.SONG,
+    if (detailQuery?.data?.rules) {
-    PLAYLIST_SONG_CONTEXT_MENU_ITEMS,
+      return SMART_PLAYLIST_SONG_CONTEXT_MENU_ITEMS;
-    { playlistId },
+    }
-  );
+
+    return PLAYLIST_SONG_CONTEXT_MENU_ITEMS;
+  }, [detailQuery?.data?.rules]);
+
+  const handleContextMenu = useHandleTableContextMenu(LibraryItem.SONG, contextMenuItems, {
+    playlistId,
+  });
 
   const playlistSongData = useMemo(
     () => playlistSongsQueryInfinite.data?.pages.flatMap((p) => p.items),
@@ -117,8 +125,7 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
         },
         onSuccess: () => {
           toast.success({
-            message: `${detailQuery?.data?.name} was successfully deleted`,
+            message: `Playlist has been deleted`,
-            title: 'Playlist deleted',
           });
           closeAllModals();
           navigate(AppRoute.PLAYLISTS);
@@ -203,7 +210,6 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
     <ContentContainer>
       <Group
         ref={intersectRef}
-        maw="1920px"
         p="1rem"
         position="apart"
       >

src/renderer/features/playlists/components/playlist-detail-header.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, Fragment, Ref } from 'react';
 import { Group, Stack } from '@mantine/core';
 import { useParams } from 'react-router';
-import { Text } from '/@/renderer/components';
+import { Badge, Text } from '/@/renderer/components';
 import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
 import { LibraryHeader } from '/@/renderer/features/shared';
 import { AppRoute } from '/@/renderer/router/routes';
@@ -35,6 +35,8 @@ export const PlaylistDetailHeader = forwardRef(
       },
     ];
 
+    const isSmartPlaylist = detailQuery?.data?.rules;
+
     return (
       <Stack>
         <LibraryHeader
@@ -46,13 +48,24 @@ export const PlaylistDetailHeader = forwardRef(
           title={detailQuery?.data?.name || ''}
         >
           <Stack>
-            <Group>
+            <Group spacing="sm">
               {metadataItems.map((item, index) => (
                 <Fragment key={`item-${item.id}-${index}`}>
                   {index > 0 && <Text $noSelect>•</Text>}
                   <Text $secondary={item.secondary}>{item.value}</Text>
                 </Fragment>
               ))}
+              {isSmartPlaylist && (
+                <>
+                  <Text $noSelect>•</Text>
+                  <Badge
+                    radius="sm"
+                    size="md"
+                  >
+                    Smart Playlist
+                  </Badge>
+                </>
+              )}
             </Group>
             <Text lineClamp={3}>{detailQuery?.data?.description}</Text>
           </Stack>

src/renderer/features/playlists/components/playlist-detail-song-list-content.tsx

@@ -26,7 +26,10 @@ import { useQueryClient } from '@tanstack/react-query';
 import { AnimatePresence } from 'framer-motion';
 import debounce from 'lodash/debounce';
 import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
-import { PLAYLIST_SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
+import {
+  PLAYLIST_SONG_CONTEXT_MENU_ITEMS,
+  SMART_PLAYLIST_SONG_CONTEXT_MENU_ITEMS,
+} from '/@/renderer/features/context-menu/context-menu-items';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import {
   LibraryItem,
@@ -40,6 +43,7 @@ import { useParams } from 'react-router';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
+import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
 
 interface PlaylistDetailContentProps {
   tableRef: MutableRefObject<AgGridReactType | null>;
@@ -57,6 +61,8 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
     };
   }, [page?.table.id, playlistId]);
 
+  const detailQuery = usePlaylistDetail({ id: playlistId });
+
   const p = usePlaylistDetailTablePagination(playlistId);
   const pagination = {
     currentPage: p?.currentPage || 0,
@@ -115,12 +121,12 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
           );
 
           const songs = api.normalize.songList(songsRes, server);
-          params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
+          params.successCallback(songs?.items || [], songsRes?.totalRecordCount || 0);
         },
         rowCount: undefined,
       };
       params.api.setDatasource(dataSource);
-      params.api.ensureIndexVisible(pagination.scrollOffset, 'top');
+      params.api?.ensureIndexVisible(pagination.scrollOffset, 'top');
     },
     [filters, pagination.scrollOffset, playlistId, queryClient, server],
   );
@@ -135,9 +141,13 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
     (event: PaginationChangedEvent) => {
       if (!isPaginationEnabled || !event.api) return;
 
-      // Scroll to top of page on pagination change
+      try {
-      const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
+        // Scroll to top of page on pagination change
-      event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
+        const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
+        event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
+      } catch (err) {
+        console.log(err);
+      }
 
       setPagination(playlistId, {
         itemsPerPage: event.api.paginationGetPageSize(),
@@ -185,11 +195,18 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
     setPagination(playlistId, { scrollOffset });
   };
 
-  const handleContextMenu = useHandleTableContextMenu(
+  const contextMenuItems = useMemo(() => {
-    LibraryItem.SONG,
+    if (detailQuery?.data?.rules) {
-    PLAYLIST_SONG_CONTEXT_MENU_ITEMS,
+      return SMART_PLAYLIST_SONG_CONTEXT_MENU_ITEMS;
-    { playlistId, tableRef },
+    }
-  );
+
+    return PLAYLIST_SONG_CONTEXT_MENU_ITEMS;
+  }, [detailQuery?.data?.rules]);
+
+  const handleContextMenu = useHandleTableContextMenu(LibraryItem.SONG, contextMenuItems, {
+    playlistId,
+    tableRef,
+  });
 
   const handleRowDoubleClick = (e: RowDoubleClickedEvent<QueueSong>) => {
     if (!e.data) return;
@@ -200,45 +217,49 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
   };
 
   return (
-    <VirtualGridAutoSizerContainer>
+    <>
-      <VirtualTable
+      <VirtualGridAutoSizerContainer>
-        // https://github.com/ag-grid/ag-grid/issues/5284
+        <VirtualTable
-        // Key is used to force remount of table when display, rowHeight, or server changes
+          // https://github.com/ag-grid/ag-grid/issues/5284
-        key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
+          // Key is used to force remount of table when display, rowHeight, or server changes
-        ref={tableRef}
+          key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
-        alwaysShowHorizontalScroll
+          ref={tableRef}
-        autoFitColumns={page.table.autoFit}
+          alwaysShowHorizontalScroll
-        columnDefs={columnDefs}
+          autoFitColumns={page.table.autoFit}
-        getRowId={(data) => data.data.uniqueId}
+          columnDefs={columnDefs}
-        infiniteInitialRowCount={checkPlaylistList.data?.totalRecordCount || 1}
+          getRowId={(data) => data.data.uniqueId}
-        pagination={isPaginationEnabled}
+          infiniteInitialRowCount={checkPlaylistList.data?.totalRecordCount || 100}
-        paginationAutoPageSize={isPaginationEnabled}
+          pagination={isPaginationEnabled}
-        paginationPageSize={pagination.itemsPerPage || 100}
+          paginationAutoPageSize={isPaginationEnabled}
-        rowHeight={page.table.rowHeight || 40}
+          paginationPageSize={pagination.itemsPerPage || 100}
-        rowModelType="infinite"
+          rowHeight={page.table.rowHeight || 40}
-        onBodyScrollEnd={handleScroll}
+          rowModelType="infinite"
-        onCellContextMenu={handleContextMenu}
+          onBodyScrollEnd={handleScroll}
-        onColumnMoved={handleColumnChange}
+          onCellContextMenu={handleContextMenu}
-        onColumnResized={debouncedColumnChange}
+          onColumnMoved={handleColumnChange}
-        onGridReady={onGridReady}
+          onColumnResized={debouncedColumnChange}
-        onGridSizeChanged={handleGridSizeChange}
+          onGridReady={onGridReady}
-        onPaginationChanged={onPaginationChanged}
+          onGridSizeChanged={handleGridSizeChange}
-        onRowDoubleClicked={handleRowDoubleClick}
+          onPaginationChanged={onPaginationChanged}
-      />
+          onRowDoubleClicked={handleRowDoubleClick}
-      <AnimatePresence
+        />
-        presenceAffectsLayout
+      </VirtualGridAutoSizerContainer>
-        initial={false}
+      {isPaginationEnabled && (
-        mode="wait"
+        <AnimatePresence
-      >
+          presenceAffectsLayout
-        {page.display === ListDisplayType.TABLE_PAGINATED && (
+          initial={false}
-          <TablePagination
+          mode="wait"
-            id={playlistId}
+        >
-            pagination={pagination}
+          {page.display === ListDisplayType.TABLE_PAGINATED && (
-            setIdPagination={setPagination}
+            <TablePagination
-            tableRef={tableRef}
+              id={playlistId}
-          />
+              pagination={pagination}
-        )}
+              setIdPagination={setPagination}
-      </AnimatePresence>
+              tableRef={tableRef}
-    </VirtualGridAutoSizerContainer>
+            />
+          )}
+        </AnimatePresence>
+      )}
+    </>
   );
 };

src/renderer/features/playlists/components/playlist-detail-song-list-header-filters.tsx

@@ -0,0 +1,434 @@
+import { useCallback, ChangeEvent, MutableRefObject, MouseEvent } from 'react';
+import { IDatasource } from '@ag-grid-community/core';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import { Flex, Group, Stack } from '@mantine/core';
+import { useQueryClient } from '@tanstack/react-query';
+import {
+  RiSortAsc,
+  RiSortDesc,
+  RiMoreFill,
+  RiSettings3Fill,
+  RiPlayFill,
+  RiAddCircleFill,
+  RiAddBoxFill,
+  RiEditFill,
+  RiDeleteBinFill,
+  RiRefreshLine,
+} from 'react-icons/ri';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { LibraryItem, PlaylistSongListQuery, SongListSort, SortOrder } from '/@/renderer/api/types';
+import {
+  DropdownMenu,
+  SONG_TABLE_COLUMNS,
+  Button,
+  Slider,
+  MultiSelect,
+  Switch,
+  Text,
+} from '/@/renderer/components';
+import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { useContainerQuery } from '/@/renderer/hooks';
+import {
+  useCurrentServer,
+  SongListFilter,
+  usePlaylistDetailStore,
+  useSetPlaylistDetailFilters,
+  useSetPlaylistDetailTable,
+  useSetPlaylistStore,
+  useSetPlaylistTablePagination,
+} from '/@/renderer/store';
+import { ListDisplayType, ServerType, Play, TableColumn } from '/@/renderer/types';
+import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
+import { useParams } from 'react-router';
+
+const FILTERS = {
+  jellyfin: [
+    { defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
+    { defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
+    { defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
+    { defaultOrder: SortOrder.ASC, name: 'Duration', value: SongListSort.DURATION },
+    { defaultOrder: SortOrder.ASC, name: 'Most Played', value: SongListSort.PLAY_COUNT },
+    { defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
+    { defaultOrder: SortOrder.ASC, name: 'Random', value: SongListSort.RANDOM },
+    { defaultOrder: SortOrder.ASC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
+    { defaultOrder: SortOrder.ASC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
+    { defaultOrder: SortOrder.ASC, name: 'Release Date', value: SongListSort.RELEASE_DATE },
+  ],
+  navidrome: [
+    { defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
+    { defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
+    { defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
+    { defaultOrder: SortOrder.DESC, name: 'BPM', value: SongListSort.BPM },
+    { defaultOrder: SortOrder.ASC, name: 'Channels', value: SongListSort.CHANNELS },
+    { defaultOrder: SortOrder.ASC, name: 'Comment', value: SongListSort.COMMENT },
+    { defaultOrder: SortOrder.DESC, name: 'Duration', value: SongListSort.DURATION },
+    { defaultOrder: SortOrder.DESC, name: 'Favorited', value: SongListSort.FAVORITED },
+    { defaultOrder: SortOrder.ASC, name: 'Genre', value: SongListSort.GENRE },
+    { defaultOrder: SortOrder.ASC, name: 'Id', value: SongListSort.ID },
+    { defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
+    { defaultOrder: SortOrder.DESC, name: 'Play Count', value: SongListSort.PLAY_COUNT },
+    { defaultOrder: SortOrder.DESC, name: 'Rating', value: SongListSort.RATING },
+    { defaultOrder: SortOrder.DESC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
+    { defaultOrder: SortOrder.DESC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
+    { defaultOrder: SortOrder.DESC, name: 'Year', value: SongListSort.YEAR },
+  ],
+};
+
+const ORDER = [
+  { name: 'Ascending', value: SortOrder.ASC },
+  { name: 'Descending', value: SortOrder.DESC },
+];
+
+interface PlaylistDetailSongListHeaderFiltersProps {
+  handleToggleShowQueryBuilder: () => void;
+  tableRef: MutableRefObject<AgGridReactType | null>;
+}
+
+export const PlaylistDetailSongListHeaderFilters = ({
+  tableRef,
+  handleToggleShowQueryBuilder,
+}: PlaylistDetailSongListHeaderFiltersProps) => {
+  const { playlistId } = useParams() as { playlistId: string };
+  const queryClient = useQueryClient();
+  const server = useCurrentServer();
+  const setPage = useSetPlaylistStore();
+  const setFilter = useSetPlaylistDetailFilters();
+  const page = usePlaylistDetailStore();
+  const filters: Partial<PlaylistSongListQuery> = {
+    sortBy: page?.table.id[playlistId]?.filter?.sortBy || SongListSort.ID,
+    sortOrder: page?.table.id[playlistId]?.filter?.sortOrder || SortOrder.ASC,
+  };
+
+  const detailQuery = usePlaylistDetail({ id: playlistId });
+  const isSmartPlaylist = detailQuery.data?.rules;
+
+  const handlePlayQueueAdd = usePlayQueueAdd();
+
+  const cq = useContainerQuery();
+
+  const setPagination = useSetPlaylistTablePagination();
+  const setTable = useSetPlaylistDetailTable();
+
+  const sortByLabel =
+    (server?.type &&
+      FILTERS[server.type as keyof typeof FILTERS].find((f) => f.value === filters.sortBy)?.name) ||
+    'Unknown';
+
+  const sortOrderLabel = ORDER.find((o) => o.value === filters.sortOrder)?.name || 'Unknown';
+
+  const handleItemSize = (e: number) => {
+    setTable({ rowHeight: e });
+  };
+
+  const handleFilterChange = useCallback(
+    async (filters: SongListFilter) => {
+      const dataSource: IDatasource = {
+        getRows: async (params) => {
+          const limit = params.endRow - params.startRow;
+          const startIndex = params.startRow;
+
+          const queryKey = queryKeys.playlists.songList(server?.id || '', playlistId, {
+            id: playlistId,
+            limit,
+            startIndex,
+            ...filters,
+          });
+
+          const songsRes = await queryClient.fetchQuery(
+            queryKey,
+            async ({ signal }) =>
+              api.controller.getPlaylistSongList({
+                query: {
+                  id: playlistId,
+                  limit,
+                  startIndex,
+                  ...filters,
+                },
+                server,
+                signal,
+              }),
+            { cacheTime: 1000 * 60 * 1 },
+          );
+
+          const songs = api.normalize.songList(songsRes, server);
+          params.successCallback(songs?.items || [], songsRes?.totalRecordCount || 0);
+        },
+        rowCount: undefined,
+      };
+      tableRef.current?.api.setDatasource(dataSource);
+      tableRef.current?.api.purgeInfiniteCache();
+      tableRef.current?.api.ensureIndexVisible(0, 'top');
+
+      if (page.display === ListDisplayType.TABLE_PAGINATED) {
+        setPagination({ currentPage: 0 });
+      }
+    },
+    [tableRef, page.display, server, playlistId, queryClient, setPagination],
+  );
+
+  const handleRefresh = () => {
+    queryClient.invalidateQueries(queryKeys.albums.list(server?.id || ''));
+    handleFilterChange({ ...page?.table.id[playlistId].filter, ...filters });
+  };
+
+  const handleSetSortBy = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      if (!e.currentTarget?.value || !server?.type) return;
+
+      const sortOrder = FILTERS[server.type as keyof typeof FILTERS].find(
+        (f) => f.value === e.currentTarget.value,
+      )?.defaultOrder;
+
+      const updatedFilters = setFilter(playlistId, {
+        sortBy: e.currentTarget.value as SongListSort,
+        sortOrder: sortOrder || SortOrder.ASC,
+      });
+
+      handleFilterChange(updatedFilters);
+    },
+    [handleFilterChange, playlistId, server?.type, setFilter],
+  );
+
+  const handleToggleSortOrder = useCallback(() => {
+    const newSortOrder = filters.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
+    const updatedFilters = setFilter(playlistId, { sortOrder: newSortOrder });
+    handleFilterChange(updatedFilters);
+  }, [filters.sortOrder, handleFilterChange, playlistId, setFilter]);
+
+  const handleSetViewType = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      if (!e.currentTarget?.value) return;
+      setPage({ detail: { ...page, display: e.currentTarget.value as ListDisplayType } });
+    },
+    [page, setPage],
+  );
+
+  const handleTableColumns = (values: TableColumn[]) => {
+    const existingColumns = page.table.columns;
+
+    if (values.length === 0) {
+      return setTable({
+        columns: [],
+      });
+    }
+
+    // If adding a column
+    if (values.length > existingColumns.length) {
+      const newColumn = { column: values[values.length - 1], width: 100 };
+
+      setTable({ columns: [...existingColumns, newColumn] });
+    } else {
+      // If removing a column
+      const removed = existingColumns.filter((column) => !values.includes(column.column));
+      const newColumns = existingColumns.filter((column) => !removed.includes(column));
+
+      setTable({ columns: newColumns });
+    }
+
+    return tableRef.current?.api.sizeColumnsToFit();
+  };
+
+  const handleAutoFitColumns = (e: ChangeEvent<HTMLInputElement>) => {
+    setTable({ autoFit: e.currentTarget.checked });
+
+    if (e.currentTarget.checked) {
+      tableRef.current?.api.sizeColumnsToFit();
+    }
+  };
+
+  const handlePlay = async (playType: Play) => {
+    handlePlayQueueAdd?.({
+      byItemType: { id: [playlistId], type: LibraryItem.PLAYLIST },
+      play: playType,
+    });
+  };
+
+  return (
+    <Flex justify="space-between">
+      <Group
+        ref={cq.ref}
+        spacing="sm"
+        w="100%"
+      >
+        <DropdownMenu position="bottom-start">
+          <DropdownMenu.Target>
+            <Button
+              compact
+              fw="600"
+              size="md"
+              variant="subtle"
+            >
+              {sortByLabel}
+            </Button>
+          </DropdownMenu.Target>
+          <DropdownMenu.Dropdown>
+            {FILTERS[server?.type as keyof typeof FILTERS].map((filter) => (
+              <DropdownMenu.Item
+                key={`filter-${filter.name}`}
+                $isActive={filter.value === filters.sortBy}
+                value={filter.value}
+                onClick={handleSetSortBy}
+              >
+                {filter.name}
+              </DropdownMenu.Item>
+            ))}
+          </DropdownMenu.Dropdown>
+        </DropdownMenu>
+        <Button
+          compact
+          fw="600"
+          size="md"
+          variant="subtle"
+          onClick={handleToggleSortOrder}
+        >
+          {cq.isSm ? (
+            sortOrderLabel
+          ) : (
+            <>
+              {filters.sortOrder === SortOrder.ASC ? (
+                <RiSortAsc size="1.3rem" />
+              ) : (
+                <RiSortDesc size="1.3rem" />
+              )}
+            </>
+          )}
+        </Button>
+        <DropdownMenu position="bottom-start">
+          <DropdownMenu.Target>
+            <Button
+              compact
+              fw="600"
+              size="md"
+              variant="subtle"
+            >
+              <RiMoreFill size="1.3rem" />
+            </Button>
+          </DropdownMenu.Target>
+          <DropdownMenu.Dropdown>
+            <DropdownMenu.Item
+              icon={<RiPlayFill />}
+              onClick={() => handlePlay(Play.NOW)}
+            >
+              Play
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              icon={<RiAddBoxFill />}
+              onClick={() => handlePlay(Play.LAST)}
+            >
+              Add to queue
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              icon={<RiAddCircleFill />}
+              onClick={() => handlePlay(Play.NEXT)}
+            >
+              Add to queue next
+            </DropdownMenu.Item>
+            <DropdownMenu.Divider />
+            <DropdownMenu.Item
+              disabled
+              icon={<RiEditFill />}
+              onClick={() => handlePlay(Play.LAST)}
+            >
+              Edit playlist
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              disabled
+              icon={<RiDeleteBinFill />}
+              onClick={() => handlePlay(Play.LAST)}
+            >
+              Delete playlist
+            </DropdownMenu.Item>
+            <DropdownMenu.Divider />
+            <DropdownMenu.Item
+              icon={<RiRefreshLine />}
+              onClick={handleRefresh}
+            >
+              Refresh
+            </DropdownMenu.Item>
+            {server?.type === ServerType.NAVIDROME && !isSmartPlaylist && (
+              <>
+                <DropdownMenu.Divider />
+                <DropdownMenu.Item
+                  $danger
+                  onClick={handleToggleShowQueryBuilder}
+                >
+                  Toggle smart playlist editor
+                </DropdownMenu.Item>
+              </>
+            )}
+          </DropdownMenu.Dropdown>
+        </DropdownMenu>
+      </Group>
+      <Group>
+        <DropdownMenu position="bottom-end">
+          <DropdownMenu.Target>
+            <Button
+              compact
+              size="md"
+              variant="subtle"
+            >
+              <RiSettings3Fill size="1.3rem" />
+            </Button>
+          </DropdownMenu.Target>
+          <DropdownMenu.Dropdown>
+            <DropdownMenu.Label>Display type</DropdownMenu.Label>
+            <DropdownMenu.Item
+              $isActive={page.display === ListDisplayType.TABLE}
+              value={ListDisplayType.TABLE}
+              onClick={handleSetViewType}
+            >
+              Table
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              $isActive={page.display === ListDisplayType.TABLE_PAGINATED}
+              value={ListDisplayType.TABLE_PAGINATED}
+              onClick={handleSetViewType}
+            >
+              Table (paginated)
+            </DropdownMenu.Item>
+            <DropdownMenu.Divider />
+            <DropdownMenu.Label>Item size</DropdownMenu.Label>
+            <DropdownMenu.Item closeMenuOnClick={false}>
+              <Slider
+                defaultValue={page.table.rowHeight}
+                label={null}
+                max={100}
+                min={25}
+                onChangeEnd={handleItemSize}
+              />
+            </DropdownMenu.Item>
+            {(page.display === ListDisplayType.TABLE ||
+              page.display === ListDisplayType.TABLE_PAGINATED) && (
+              <>
+                <DropdownMenu.Label>Table Columns</DropdownMenu.Label>
+                <DropdownMenu.Item
+                  closeMenuOnClick={false}
+                  component="div"
+                  sx={{ cursor: 'default' }}
+                >
+                  <Stack>
+                    <MultiSelect
+                      clearable
+                      data={SONG_TABLE_COLUMNS}
+                      defaultValue={page.table?.columns.map((column) => column.column)}
+                      width={300}
+                      onChange={handleTableColumns}
+                    />
+                    <Group position="apart">
+                      <Text>Auto Fit Columns</Text>
+                      <Switch
+                        defaultChecked={page.table.autoFit}
+                        onChange={handleAutoFitColumns}
+                      />
+                    </Group>
+                  </Stack>
+                </DropdownMenu.Item>
+              </>
+            )}
+          </DropdownMenu.Dropdown>
+        </DropdownMenu>
+      </Group>
+    </Flex>
+  );
+};

src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx

@@ -1,240 +1,31 @@
-import { IDatasource } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { Flex, Group, Stack } from '@mantine/core';
+import { Stack } from '@mantine/core';
-import { useQueryClient } from '@tanstack/react-query';
+import { MutableRefObject } from 'react';
-import { ChangeEvent, MutableRefObject, useCallback, MouseEvent } from 'react';
-import { RiArrowDownSLine, RiMoreFill, RiSortAsc, RiSortDesc } from 'react-icons/ri';
 import { useParams } from 'react-router';
-import styled from 'styled-components';
+import { LibraryItem } from '/@/renderer/api/types';
-import { api } from '/@/renderer/api';
+import { Badge, PageHeader, Paper, SpinnerIcon } from '/@/renderer/components';
-import { queryKeys } from '/@/renderer/api/query-keys';
-import {
-  LibraryItem,
-  PlaylistSongListQuery,
-  ServerType,
-  SongListSort,
-  SortOrder,
-} from '/@/renderer/api/types';
-import {
-  Button,
-  DropdownMenu,
-  MultiSelect,
-  PageHeader,
-  Slider,
-  SONG_TABLE_COLUMNS,
-  Switch,
-  Text,
-  TextTitle,
-} from '/@/renderer/components';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { PlaylistDetailSongListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-detail-song-list-header-filters';
 import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
-import { useContainerQuery } from '/@/renderer/hooks';
+import { LibraryHeaderBar } from '/@/renderer/features/shared';
-import {
+import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
-  useCurrentServer,
+import { Play } from '/@/renderer/types';
-  usePlaylistDetailStore,
-  useSetPlaylistTablePagination,
-  useSetPlaylistDetailTable,
-  SongListFilter,
-  useSetPlaylistDetailFilters,
-  useSetPlaylistStore,
-} from '/@/renderer/store';
-import { ListDisplayType, Play, TableColumn } from '/@/renderer/types';
-
-const FILTERS = {
-  jellyfin: [
-    { defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
-    { defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
-    { defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
-    { defaultOrder: SortOrder.ASC, name: 'Duration', value: SongListSort.DURATION },
-    { defaultOrder: SortOrder.ASC, name: 'Most Played', value: SongListSort.PLAY_COUNT },
-    { defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
-    { defaultOrder: SortOrder.ASC, name: 'Random', value: SongListSort.RANDOM },
-    { defaultOrder: SortOrder.ASC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
-    { defaultOrder: SortOrder.ASC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
-    { defaultOrder: SortOrder.ASC, name: 'Release Date', value: SongListSort.RELEASE_DATE },
-  ],
-  navidrome: [
-    { defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
-    { defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
-    { defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
-    { defaultOrder: SortOrder.DESC, name: 'BPM', value: SongListSort.BPM },
-    { defaultOrder: SortOrder.ASC, name: 'Channels', value: SongListSort.CHANNELS },
-    { defaultOrder: SortOrder.ASC, name: 'Comment', value: SongListSort.COMMENT },
-    { defaultOrder: SortOrder.DESC, name: 'Duration', value: SongListSort.DURATION },
-    { defaultOrder: SortOrder.DESC, name: 'Favorited', value: SongListSort.FAVORITED },
-    { defaultOrder: SortOrder.ASC, name: 'Genre', value: SongListSort.GENRE },
-    { defaultOrder: SortOrder.ASC, name: 'Id', value: SongListSort.ID },
-    { defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
-    { defaultOrder: SortOrder.DESC, name: 'Play Count', value: SongListSort.PLAY_COUNT },
-    { defaultOrder: SortOrder.DESC, name: 'Rating', value: SongListSort.RATING },
-    { defaultOrder: SortOrder.DESC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
-    { defaultOrder: SortOrder.DESC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
-    { defaultOrder: SortOrder.DESC, name: 'Year', value: SongListSort.YEAR },
-  ],
-};
-
-const ORDER = [
-  { name: 'Ascending', value: SortOrder.ASC },
-  { name: 'Descending', value: SortOrder.DESC },
-];
-
-const HeaderItems = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-`;
 
 interface PlaylistDetailHeaderProps {
   handleToggleShowQueryBuilder: () => void;
+  itemCount?: number;
   tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
 export const PlaylistDetailSongListHeader = ({
   tableRef,
+  itemCount,
   handleToggleShowQueryBuilder,
 }: PlaylistDetailHeaderProps) => {
   const { playlistId } = useParams() as { playlistId: string };
-
-  const queryClient = useQueryClient();
-  const server = useCurrentServer();
-  const setPage = useSetPlaylistStore();
-  const setFilter = useSetPlaylistDetailFilters();
-  const page = usePlaylistDetailStore();
-  const filters: Partial<PlaylistSongListQuery> = {
-    sortBy: page?.table.id[playlistId]?.filter?.sortBy || SongListSort.ID,
-    sortOrder: page?.table.id[playlistId]?.filter?.sortOrder || SortOrder.ASC,
-  };
-
   const detailQuery = usePlaylistDetail({ id: playlistId });
   const handlePlayQueueAdd = usePlayQueueAdd();
 
-  const cq = useContainerQuery();
-
-  const setPagination = useSetPlaylistTablePagination();
-  const setTable = useSetPlaylistDetailTable();
-
-  const sortByLabel =
-    (server?.type &&
-      FILTERS[server.type as keyof typeof FILTERS].find((f) => f.value === filters.sortBy)?.name) ||
-    'Unknown';
-
-  const sortOrderLabel = ORDER.find((o) => o.value === filters.sortOrder)?.name || 'Unknown';
-
-  const handleItemSize = (e: number) => {
-    setTable({ rowHeight: e });
-  };
-
-  const handleFilterChange = useCallback(
-    async (filters: SongListFilter) => {
-      const dataSource: IDatasource = {
-        getRows: async (params) => {
-          const limit = params.endRow - params.startRow;
-          const startIndex = params.startRow;
-
-          const queryKey = queryKeys.playlists.songList(server?.id || '', playlistId, {
-            id: playlistId,
-            limit,
-            startIndex,
-            ...filters,
-          });
-
-          const songsRes = await queryClient.fetchQuery(
-            queryKey,
-            async ({ signal }) =>
-              api.controller.getPlaylistSongList({
-                query: {
-                  id: playlistId,
-                  limit,
-                  startIndex,
-                  ...filters,
-                },
-                server,
-                signal,
-              }),
-            { cacheTime: 1000 * 60 * 1 },
-          );
-
-          const songs = api.normalize.songList(songsRes, server);
-          params.successCallback(songs?.items || [], songsRes?.totalRecordCount || undefined);
-        },
-        rowCount: undefined,
-      };
-      tableRef.current?.api.setDatasource(dataSource);
-      tableRef.current?.api.purgeInfiniteCache();
-      tableRef.current?.api.ensureIndexVisible(0, 'top');
-
-      if (page.display === ListDisplayType.TABLE_PAGINATED) {
-        setPagination({ currentPage: 0 });
-      }
-    },
-    [tableRef, page.display, server, playlistId, queryClient, setPagination],
-  );
-
-  const handleSetSortBy = useCallback(
-    (e: MouseEvent<HTMLButtonElement>) => {
-      if (!e.currentTarget?.value || !server?.type) return;
-
-      const sortOrder = FILTERS[server.type as keyof typeof FILTERS].find(
-        (f) => f.value === e.currentTarget.value,
-      )?.defaultOrder;
-
-      const updatedFilters = setFilter(playlistId, {
-        sortBy: e.currentTarget.value as SongListSort,
-        sortOrder: sortOrder || SortOrder.ASC,
-      });
-
-      handleFilterChange(updatedFilters);
-    },
-    [handleFilterChange, playlistId, server?.type, setFilter],
-  );
-
-  const handleToggleSortOrder = useCallback(() => {
-    const newSortOrder = filters.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
-    const updatedFilters = setFilter(playlistId, { sortOrder: newSortOrder });
-    handleFilterChange(updatedFilters);
-  }, [filters.sortOrder, handleFilterChange, playlistId, setFilter]);
-
-  const handleSetViewType = useCallback(
-    (e: MouseEvent<HTMLButtonElement>) => {
-      if (!e.currentTarget?.value) return;
-      setPage({ detail: { ...page, display: e.currentTarget.value as ListDisplayType } });
-    },
-    [page, setPage],
-  );
-
-  const handleTableColumns = (values: TableColumn[]) => {
-    const existingColumns = page.table.columns;
-
-    if (values.length === 0) {
-      return setTable({
-        columns: [],
-      });
-    }
-
-    // If adding a column
-    if (values.length > existingColumns.length) {
-      const newColumn = { column: values[values.length - 1], width: 100 };
-
-      setTable({ columns: [...existingColumns, newColumn] });
-    } else {
-      // If removing a column
-      const removed = existingColumns.filter((column) => !values.includes(column.column));
-      const newColumns = existingColumns.filter((column) => !removed.includes(column));
-
-      setTable({ columns: newColumns });
-    }
-
-    return tableRef.current?.api.sizeColumnsToFit();
-  };
-
-  const handleAutoFitColumns = (e: ChangeEvent<HTMLInputElement>) => {
-    setTable({ autoFit: e.currentTarget.checked });
-
-    if (e.currentTarget.checked) {
-      tableRef.current?.api.sizeColumnsToFit();
-    }
-  };
-
   const handlePlay = async (playType: Play) => {
     handlePlayQueueAdd?.({
       byItemType: { id: [playlistId], type: LibraryItem.PLAYLIST },
@@ -242,176 +33,34 @@ export const PlaylistDetailSongListHeader = ({
     });
   };
 
+  const playButtonBehavior = usePlayButtonBehavior();
+
   if (detailQuery.isLoading) return null;
+  const isSmartPlaylist = detailQuery?.data?.rules;
 
   return (
-    <PageHeader p="1rem">
+    <Stack spacing={0}>
-      <HeaderItems ref={cq.ref}>
+      <PageHeader backgroundColor="var(--titlebar-bg)">
-        <Flex
+        <LibraryHeaderBar>
-          align="center"
+          <LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
-          gap="md"
+          <LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
-          justify="center"
+          <Paper
-        >
-          <DropdownMenu position="bottom-start">
-            <DropdownMenu.Target>
-              <Button
-                compact
-                px={0}
-                rightIcon={<RiArrowDownSLine size={15} />}
-                size="xl"
-                variant="subtle"
-              >
-                <TextTitle
-                  order={2}
-                  weight={700}
-                >
-                  {detailQuery?.data?.name}
-                </TextTitle>
-              </Button>
-            </DropdownMenu.Target>
-            <DropdownMenu.Dropdown>
-              <DropdownMenu.Label>Display type</DropdownMenu.Label>
-              <DropdownMenu.Item
-                $isActive={page.display === ListDisplayType.TABLE}
-                value={ListDisplayType.TABLE}
-                onClick={handleSetViewType}
-              >
-                Table
-              </DropdownMenu.Item>
-              <DropdownMenu.Item
-                $isActive={page.display === ListDisplayType.TABLE_PAGINATED}
-                value={ListDisplayType.TABLE_PAGINATED}
-                onClick={handleSetViewType}
-              >
-                Table (paginated)
-              </DropdownMenu.Item>
-              <DropdownMenu.Divider />
-              <DropdownMenu.Label>Item size</DropdownMenu.Label>
-              <DropdownMenu.Item closeMenuOnClick={false}>
-                <Slider
-                  defaultValue={page.table.rowHeight}
-                  label={null}
-                  max={100}
-                  min={25}
-                  onChangeEnd={handleItemSize}
-                />
-              </DropdownMenu.Item>
-              {(page.display === ListDisplayType.TABLE ||
-                page.display === ListDisplayType.TABLE_PAGINATED) && (
-                <>
-                  <DropdownMenu.Label>Table Columns</DropdownMenu.Label>
-                  <DropdownMenu.Item
-                    closeMenuOnClick={false}
-                    component="div"
-                    sx={{ cursor: 'default' }}
-                  >
-                    <Stack>
-                      <MultiSelect
-                        clearable
-                        data={SONG_TABLE_COLUMNS}
-                        defaultValue={page.table?.columns.map((column) => column.column)}
-                        width={300}
-                        onChange={handleTableColumns}
-                      />
-                      <Group position="apart">
-                        <Text>Auto Fit Columns</Text>
-                        <Switch
-                          defaultChecked={page.table.autoFit}
-                          onChange={handleAutoFitColumns}
-                        />
-                      </Group>
-                    </Stack>
-                  </DropdownMenu.Item>
-                </>
-              )}
-            </DropdownMenu.Dropdown>
-          </DropdownMenu>
-          <DropdownMenu position="bottom-start">
-            <DropdownMenu.Target>
-              <Button
-                compact
-                fw="600"
-                variant="subtle"
-              >
-                {sortByLabel}
-              </Button>
-            </DropdownMenu.Target>
-            <DropdownMenu.Dropdown>
-              {FILTERS[server?.type as keyof typeof FILTERS].map((filter) => (
-                <DropdownMenu.Item
-                  key={`filter-${filter.name}`}
-                  $isActive={filter.value === filters.sortBy}
-                  value={filter.value}
-                  onClick={handleSetSortBy}
-                >
-                  {filter.name}
-                </DropdownMenu.Item>
-              ))}
-            </DropdownMenu.Dropdown>
-          </DropdownMenu>
-          <Button
-            compact
             fw="600"
-            variant="subtle"
+            px="1rem"
-            onClick={handleToggleSortOrder}
+            py="0.3rem"
+            radius="sm"
           >
-            {cq.isMd ? (
+            {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
-              sortOrderLabel
+          </Paper>
-            ) : (
+          {isSmartPlaylist && <Badge size="lg">Smart playlist</Badge>}
-              <>
+        </LibraryHeaderBar>
-                {filters.sortOrder === SortOrder.ASC ? (
+      </PageHeader>
-                  <RiSortAsc size={15} />
+      <Paper p="1rem">
-                ) : (
+        <PlaylistDetailSongListHeaderFilters
-                  <RiSortDesc size={15} />
+          handleToggleShowQueryBuilder={handleToggleShowQueryBuilder}
-                )}
+          tableRef={tableRef}
-              </>
+        />
-            )}
+      </Paper>
-          </Button>
+    </Stack>
-          <DropdownMenu position="bottom-start">
-            <DropdownMenu.Target>
-              <Button
-                compact
-                variant="subtle"
-              >
-                <RiMoreFill size={15} />
-              </Button>
-            </DropdownMenu.Target>
-            <DropdownMenu.Dropdown>
-              <DropdownMenu.Item onClick={() => handlePlay(Play.NOW)}>Play</DropdownMenu.Item>
-              <DropdownMenu.Item onClick={() => handlePlay(Play.LAST)}>
-                Add to queue
-              </DropdownMenu.Item>
-              <DropdownMenu.Item onClick={() => handlePlay(Play.NEXT)}>
-                Add to queue next
-              </DropdownMenu.Item>
-              <DropdownMenu.Divider />
-              <DropdownMenu.Item
-                disabled
-                onClick={() => handlePlay(Play.LAST)}
-              >
-                Edit playlist
-              </DropdownMenu.Item>
-              <DropdownMenu.Item
-                disabled
-                onClick={() => handlePlay(Play.LAST)}
-              >
-                Delete playlist
-              </DropdownMenu.Item>
-              {server?.type === ServerType.NAVIDROME && !detailQuery?.data?.rules && (
-                <>
-                  <DropdownMenu.Divider />
-                  <DropdownMenu.Item
-                    $danger
-                    onClick={handleToggleShowQueryBuilder}
-                  >
-                    Toggle smart playlist editor
-                  </DropdownMenu.Item>
-                </>
-              )}
-            </DropdownMenu.Dropdown>
-          </DropdownMenu>
-        </Flex>
-      </HeaderItems>
-    </PageHeader>
   );
 };

src/renderer/features/playlists/components/playlist-list-content.tsx

@@ -93,7 +93,7 @@ export const PlaylistListContent = ({ tableRef, itemCount }: PlaylistListContent
           );
 
           const playlists = api.normalize.playlistList(playlistsRes, server);
-          params.successCallback(playlists?.items || [], playlistsRes?.totalRecordCount);
+          params.successCallback(playlists?.items || [], playlistsRes?.totalRecordCount || 0);
         },
         rowCount: undefined,
       };

src/renderer/features/playlists/components/playlist-list-header-filters.tsx

@@ -103,7 +103,7 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
           );
 
           const playlists = api.normalize.playlistList(playlistsRes, server);
-          params.successCallback(playlists?.items || [], playlistsRes?.totalRecordCount);
+          params.successCallback(playlists?.items || [], playlistsRes?.totalRecordCount || 0);
         },
         rowCount: undefined,
       };
@@ -257,7 +257,7 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
         </DropdownMenu>
       </Group>
       <Group>
-        <DropdownMenu position="bottom-start">
+        <DropdownMenu position="bottom-end">
           <DropdownMenu.Target>
             <Button
               compact

src/renderer/features/playlists/components/playlist-list-header.tsx

@@ -1,5 +1,5 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { Flex, Group, Stack } from '@mantine/core';
+import { Flex, Stack } from '@mantine/core';
 import { MutableRefObject } from 'react';
 import { PageHeader, SpinnerIcon, Paper } from '/@/renderer/components';
 import { PlaylistListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-list-header-filters';
@@ -20,14 +20,9 @@ export const PlaylistListHeader = ({ itemCount, tableRef }: PlaylistListHeaderPr
       spacing={0}
     >
       <PageHeader backgroundColor="var(--titlebar-bg)">
-        <Flex
+        <Flex justify="space-between">
-          justify="space-between"
-          py="1rem"
-        >
           <LibraryHeaderBar>
-            <Group>
+            <LibraryHeaderBar.Title>Playlists</LibraryHeaderBar.Title>
-              <LibraryHeaderBar.Title>Playlists</LibraryHeaderBar.Title>
-            </Group>
             <Paper
               fw="600"
               px="1rem"

src/renderer/features/playlists/components/playlist-query-builder.tsx

@@ -359,7 +359,7 @@ export const PlaylistQueryBuilder = forwardRef(
     return (
       <MotionFlex
         direction="column"
-        h="calc(100% - 3rem)"
+        h="calc(100% - 2.5rem)"
         justify="space-between"
       >
         <ScrollArea
@@ -393,11 +393,12 @@ export const PlaylistQueryBuilder = forwardRef(
         <Group
           noWrap
           align="flex-end"
-          p="1rem"
+          m="1rem"
           position="apart"
         >
           <Group
             noWrap
+            spacing="sm"
             w="100%"
           >
             <Select
@@ -405,7 +406,7 @@ export const PlaylistQueryBuilder = forwardRef(
               data={sortOptions}
               label="Sort"
               maxWidth="20%"
-              width={125}
+              width={150}
               {...extraFiltersForm.getInputProps('sortBy')}
             />
             <Select
@@ -432,7 +433,10 @@ export const PlaylistQueryBuilder = forwardRef(
             />
           </Group>
           {onSave && onSaveAs && (
-            <Group noWrap>
+            <Group
+              noWrap
+              spacing="sm"
+            >
               <Button
                 loading={isSaving}
                 variant="filled"
@@ -453,12 +457,7 @@ export const PlaylistQueryBuilder = forwardRef(
                 <DropdownMenu.Dropdown>
                   <DropdownMenu.Item
                     $danger
-                    rightSection={
+                    icon={<RiSaveLine color="var(--danger-color)" />}
-                      <RiSaveLine
-                        color="var(--danger-color)"
-                        size={15}
-                      />
-                    }
                     onClick={handleSave}
                   >
                     Save and replace

src/renderer/features/playlists/components/save-as-playlist-form.tsx

@@ -35,7 +35,7 @@ export const SaveAsPlaylistForm = ({ body, onSuccess, onCancel }: SaveAsPlaylist
           toast.error({ message: err.message, title: 'Error creating playlist' });
         },
         onSuccess: (data) => {
-          toast.success({ message: 'Playlist created successfully' });
+          toast.success({ message: `Playlist has been created` });
           onSuccess(data);
           onCancel();
         },

src/renderer/features/playlists/components/update-playlist-form.tsx

@@ -43,7 +43,7 @@ export const UpdatePlaylistForm = ({ users, query, body, onCancel }: UpdatePlayl
           toast.error({ message: err.message, title: 'Error updating playlist' });
         },
         onSuccess: () => {
-          toast.success({ message: 'Playlist updated successfully' });
+          toast.success({ message: `Playlist has been saved` });
           onCancel();
         },
       },

src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx

@@ -15,8 +15,9 @@ import { AppRoute } from '/@/renderer/router/routes';
 import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation';
 import { Button, Paper, Text, toast, VirtualGridContainer } from '/@/renderer/components';
 import { SaveAsPlaylistForm } from '/@/renderer/features/playlists/components/save-as-playlist-form';
-import { useCurrentServer } from '/@/renderer/store';
+import { useCurrentServer, usePlaylistDetailStore } from '/@/renderer/store';
-import { ServerType, SongListSort } from '/@/renderer/api/types';
+import { PlaylistSongListQuery, ServerType, SongListSort, SortOrder } from '/@/renderer/api/types';
+import { usePlaylistSongList } from '/@/renderer/features/playlists/queries/playlist-song-list-query';
 
 const PlaylistDetailSongListRoute = () => {
   const navigate = useNavigate();
@@ -57,7 +58,7 @@ const PlaylistDetailSongListRoute = () => {
       },
       {
         onSuccess: (data) => {
-          toast.success({ message: 'Smart playlist saved' });
+          toast.success({ message: 'Playlist has been saved' });
           navigate(generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId: data?.id || '' }), {
             replace: true,
           });
@@ -135,11 +136,36 @@ const PlaylistDetailSongListRoute = () => {
     setIsQueryBuilderExpanded(true);
   };
 
+  const page = usePlaylistDetailStore();
+  const filters: Partial<PlaylistSongListQuery> = {
+    sortBy: page?.table.id[playlistId]?.filter?.sortBy || SongListSort.ID,
+    sortOrder: page?.table.id[playlistId]?.filter?.sortOrder || SortOrder.ASC,
+  };
+
+  const itemCountCheck = usePlaylistSongList(
+    {
+      id: playlistId,
+      limit: 1,
+      startIndex: 0,
+      ...filters,
+    },
+    {
+      cacheTime: 1000 * 60 * 60 * 2,
+      staleTime: 1000 * 60 * 60 * 2,
+    },
+  );
+
+  const itemCount =
+    itemCountCheck.data?.totalRecordCount === null
+      ? undefined
+      : itemCountCheck.data?.totalRecordCount;
+
   return (
     <AnimatedPage key={`playlist-detail-songList-${playlistId}`}>
       <VirtualGridContainer>
         <PlaylistDetailSongListHeader
           handleToggleShowQueryBuilder={handleToggleShowQueryBuilder}
+          itemCount={itemCount}
           tableRef={tableRef}
         />
         <AnimatePresence

src/renderer/features/playlists/utils.ts

@@ -1,4 +1,5 @@
 import { nanoid } from 'nanoid/non-secure';
+import { NDSongQueryFields } from '/@/renderer/api/navidrome.types';
 import { QueryBuilderGroup } from '/@/renderer/types';
 
 export const parseQueryBuilderChildren = (groups: QueryBuilderGroup[], data: any[]) => {
@@ -53,15 +54,24 @@ export const convertQueryGroupToNDQuery = (filter: QueryBuilderGroup) => {
 
   for (const rule of filter.rules) {
     if (rule.field && rule.operator) {
-      const [table] = rule.field.split('.');
+      const [field] = rule.field.split('.');
       const operator = rule.operator;
-      const value = rule.value;
+      let value = rule.value;
 
-      switch (table) {
+      const booleanFields = NDSongQueryFields.filter(
+        (queryField) => queryField.type === 'boolean',
+      ).map((field) => field.value);
+
+      // Convert string values to boolean
+      if (booleanFields.includes(field)) {
+        value = value === 'true';
+      }
+
+      switch (field) {
         default:
           rootQuery[rootQueryType].push({
             [operator]: {
-              [table]: value,
+              [field]: value,
             },
           });
           break;
@@ -94,7 +104,16 @@ export const convertNDQueryToQueryGroup = (query: Record<string, any>) => {
     } else {
       const operator = Object.keys(rule)[0];
       const field = Object.keys(rule[operator])[0];
-      const value = rule[operator][field];
+      let value = rule[operator][field];
+
+      const booleanFields = NDSongQueryFields.filter(
+        (queryField) => queryField.type === 'boolean',
+      ).map((field) => field.value);
+
+      // Convert boolean values to string
+      if (booleanFields.includes(field)) {
+        value = value.toString();
+      }
 
       rootGroup.rules.push({
         field,

src/renderer/features/servers/components/add-server-form.tsx

@@ -79,10 +79,10 @@ export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
       closeAllModals();
 
       if (serverList.length === 0) {
-        toast.success({ message: 'Server added, reloading...' });
+        toast.success({ message: 'Server has been added, reloading...' });
         setTimeout(() => window.location.reload(), 2000);
       } else {
-        toast.success({ message: 'Server added' });
+        toast.success({ message: 'Server has been added' });
       }
     } catch (err: any) {
       setIsLoading(false);

src/renderer/features/servers/components/edit-server-form.tsx

@@ -73,7 +73,7 @@ export const EditServerForm = ({ isUpdate, server, onCancel }: EditServerFormPro
       updateServer(server.id, serverItem);
       setCurrentServer(serverItem);
 
-      toast.success({ message: 'Server updated' });
+      toast.success({ message: 'Server has been updated' });
     } catch (err: any) {
       setIsLoading(false);
       return toast.error({ message: err?.message });

src/renderer/features/shared/components/library-header-bar.tsx

@@ -15,6 +15,7 @@ export const LibraryHeaderBar = ({ children }: LibraryHeaderBarProps) => {
       h="100%"
       px="1rem"
       spacing="md"
+      w="100%"
     >
       {children}
     </Group>

src/renderer/features/shared/components/library-header.tsx

@@ -90,12 +90,12 @@ export const LibraryHeader = forwardRef(
       : cq.isLg
       ? '5.5rem'
       : cq.isMd
-      ? '4.5rem'
+      ? '5rem'
       : cq.isSm
-      ? '3.5rem'
+      ? '4.5rem'
-      : '2rem';
+      : '3rem';
 
-    const imageSize = cq.isLg ? 225 : cq.isMd ? 200 : cq.isSm ? 175 : 150;
+    const imageSize = cq.isLg ? 250 : cq.isMd ? 225 : cq.isSm ? 200 : 175;
 
     return (
       <HeaderContainer
@@ -142,10 +142,10 @@ export const LibraryHeader = forwardRef(
             </Text>
           </Group>
           <TextTitle
-            lh="5.1rem"
+            lh={1.15}
             lineClamp={2}
-            mb="1rem"
             overflow="hidden"
+            pb={cq.isXs ? '0' : cq.isSm ? '0.2rem' : '0.36rem'}
             sx={{ fontSize: titleSize, overflow: 'hidden' }}
             weight={900}
           >

src/renderer/features/shared/mutations/create-favorite-mutation.ts

@@ -7,12 +7,17 @@ import { queryKeys } from '/@/renderer/api/query-keys';
 import { SSAlbumArtistDetail, SSAlbumDetail } from '/@/renderer/api/subsonic.types';
 import { FavoriteArgs, LibraryItem, RawFavoriteResponse, ServerType } from '/@/renderer/api/types';
 import { MutationOptions } from '/@/renderer/lib/react-query';
-import { useCurrentServer, useSetAlbumListItemDataById } from '/@/renderer/store';
+import {
+  useCurrentServer,
+  useSetAlbumListItemDataById,
+  useSetQueueFavorite,
+} from '/@/renderer/store';
 
 export const useCreateFavorite = (options?: MutationOptions) => {
   const queryClient = useQueryClient();
   const server = useCurrentServer();
   const setAlbumListData = useSetAlbumListItemDataById();
+  const setQueueFavorite = useSetQueueFavorite();
 
   return useMutation<RawFavoriteResponse, HTTPError, Omit<FavoriteArgs, 'server'>, null>({
     mutationFn: (args) => api.controller.createFavorite({ ...args, server }),
@@ -24,6 +29,10 @@ export const useCreateFavorite = (options?: MutationOptions) => {
         }
       }
 
+      if (variables.query.type === LibraryItem.SONG) {
+        setQueueFavorite(variables.query.id, true);
+      }
+
       // We only need to set if we're already on the album detail page
       if (variables.query.type === LibraryItem.ALBUM && variables.query.id.length === 1) {
         const queryKey = queryKeys.albums.detail(server?.id || '', { id: variables.query.id[0] });

src/renderer/features/shared/mutations/delete-favorite-mutation.ts

@@ -7,12 +7,17 @@ import { queryKeys } from '/@/renderer/api/query-keys';
 import { SSAlbumArtistDetail, SSAlbumDetail } from '/@/renderer/api/subsonic.types';
 import { FavoriteArgs, LibraryItem, RawFavoriteResponse, ServerType } from '/@/renderer/api/types';
 import { MutationOptions } from '/@/renderer/lib/react-query';
-import { useCurrentServer, useSetAlbumListItemDataById } from '/@/renderer/store';
+import {
+  useCurrentServer,
+  useSetAlbumListItemDataById,
+  useSetQueueFavorite,
+} from '/@/renderer/store';
 
 export const useDeleteFavorite = (options?: MutationOptions) => {
   const queryClient = useQueryClient();
   const server = useCurrentServer();
   const setAlbumListData = useSetAlbumListItemDataById();
+  const setQueueFavorite = useSetQueueFavorite();
 
   return useMutation<RawFavoriteResponse, HTTPError, Omit<FavoriteArgs, 'server'>, null>({
     mutationFn: (args) => api.controller.deleteFavorite({ ...args, server }),
@@ -24,6 +29,10 @@ export const useDeleteFavorite = (options?: MutationOptions) => {
         }
       }
 
+      if (variables.query.type === LibraryItem.SONG) {
+        setQueueFavorite(variables.query.id, false);
+      }
+
       // We only need to set if we're already on the album detail page
       if (variables.query.type === LibraryItem.ALBUM && variables.query.id.length === 1) {
         const queryKey = queryKeys.albums.detail(server?.id || '', { id: variables.query.id[0] });

src/renderer/features/sidebar/components/sidebar-playlist-list.tsx

@@ -42,9 +42,10 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
   return (
     <NativeScrollArea
       ref={scrollAreaRef}
+      noHeader
       scrollBarOffset="0px"
       scrollHideDelay={0}
-      style={{ margin: '0.5rem 0', padding: '0 1rem' }}
+      style={{ margin: '0.5rem 0', padding: '0 1.5rem' }}
     >
       <div
         style={{
@@ -68,7 +69,6 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
             <Group
               noWrap
               className="sidebar-playlist-item"
-              pl="1rem"
               pos="relative"
               position="apart"
               sx={{

src/renderer/features/sidebar/components/sidebar.tsx

@@ -2,7 +2,7 @@ import { MouseEvent } from 'react';
 import { Stack, Grid, Accordion, Center, Group, Divider, Box } from '@mantine/core';
 import { closeAllModals, openModal } from '@mantine/modals';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Button, MotionStack, Spinner, TextInput } from '/@/renderer/components';
+import { Button, DropdownMenu, MotionStack, Spinner, TextInput } from '/@/renderer/components';
 import {
   RiAddFill,
   RiAlbumFill,
@@ -18,6 +18,7 @@ import {
   RiHome5Fill,
   RiHome5Line,
   RiListUnordered,
+  RiMenuFill,
   RiMusic2Fill,
   RiMusic2Line,
   RiSearchLine,
@@ -38,10 +39,12 @@ import { fadeIn } from '/@/renderer/styles';
 import { CreatePlaylistForm, usePlaylistList } from '/@/renderer/features/playlists';
 import { PlaylistListSort, ServerType, SortOrder } from '/@/renderer/api/types';
 import { SidebarPlaylistList } from '/@/renderer/features/sidebar/components/sidebar-playlist-list';
+import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
+import { useContainerQuery } from '/@/renderer/hooks';
 
 const SidebarContainer = styled.div`
   height: 100%;
-  max-height: calc(100vh - 85px); // Account for playerbar
+  max-height: calc(100vh - 149px); // Playerbar (90px), titlebar (65px)
   user-select: none;
 `;
 
@@ -69,7 +72,13 @@ const SidebarImage = styled.img`
 `;
 
 const ActionsContainer = styled(Grid)`
+  height: 65px;
+  padding: 1rem;
   -webkit-app-region: drag;
+
+  input {
+    -webkit-app-region: no-drag;
+  }
 `;
 
 export const Sidebar = () => {
@@ -103,8 +112,59 @@ export const Sidebar = () => {
     startIndex: 0,
   });
 
+  const cq = useContainerQuery({ sm: 300 });
+
   return (
-    <SidebarContainer>
+    <SidebarContainer ref={cq.ref}>
+      <ActionsContainer gutter="sm">
+        <Grid.Col span={cq.isSm ? 7 : 5}>
+          <TextInput
+            disabled
+            readOnly
+            icon={<RiSearchLine />}
+            placeholder="Search"
+            size="md"
+          />
+        </Grid.Col>
+        <Grid.Col span={cq.isSm ? 5 : 7}>
+          <Group
+            grow
+            noWrap
+            spacing="sm"
+          >
+            <DropdownMenu position="bottom-start">
+              <DropdownMenu.Target>
+                <Button
+                  p="0.5rem"
+                  size="md"
+                  variant="default"
+                >
+                  <RiMenuFill size="1rem" />
+                </Button>
+              </DropdownMenu.Target>
+              <DropdownMenu.Dropdown>
+                <AppMenu />
+              </DropdownMenu.Dropdown>
+            </DropdownMenu>
+            <Button
+              p="0.5rem"
+              size="md"
+              variant="default"
+              onClick={() => navigate(-1)}
+            >
+              <RiArrowLeftSLine size="1.5rem" />
+            </Button>
+            <Button
+              p="0.5rem"
+              size="md"
+              variant="default"
+              onClick={() => navigate(1)}
+            >
+              <RiArrowRightSLine size="1.5rem" />
+            </Button>
+          </Group>
+        </Grid.Col>
+      </ActionsContainer>
       <Stack
         h="100%"
         justify="space-between"
@@ -115,47 +175,6 @@ export const Sidebar = () => {
           spacing={0}
           sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
         >
-          <ActionsContainer
-            gutter="sm"
-            p={10}
-          >
-            <Grid.Col span={8}>
-              <TextInput
-                disabled
-                readOnly
-                icon={<RiSearchLine />}
-                placeholder="Search"
-                rightSectionWidth={90}
-                size="md"
-              />
-            </Grid.Col>
-            <Grid.Col span={4}>
-              <Group
-                grow
-                spacing="sm"
-              >
-                <Button
-                  px={5}
-                  size="md"
-                  sx={{ color: 'var(--titlebar-fg)' }}
-                  variant="default"
-                  onClick={() => navigate(-1)}
-                >
-                  <RiArrowLeftSLine size={20} />
-                </Button>
-                <Button
-                  px={5}
-                  size="md"
-                  sx={{ color: 'var(--titlebar-fg)' }}
-                  variant="default"
-                  onClick={() => navigate(1)}
-                >
-                  <RiArrowRightSLine size={20} />
-                </Button>
-              </Group>
-            </Grid.Col>
-          </ActionsContainer>
-
           <Stack spacing={0}>
             <SidebarItem
               px="1rem"
@@ -253,11 +272,14 @@ export const Sidebar = () => {
               </Accordion.Item>
             </Accordion>
           </Stack>
-          <Divider my="0.5rem" />
+          <Divider
+            mx="1rem"
+            my="0.5rem"
+          />
           <Group
             position="apart"
             pt="1rem"
-            px="1rem"
+            px="1.5rem"
           >
             <Group>
               <Box

src/renderer/features/songs/components/jellyfin-song-filters.tsx

@@ -45,25 +45,25 @@ export const JellyfinSongFilters = ({ handleFilterChange }: JellyfinSongFiltersP
     },
   ];
 
-  const handleMinYearFilter = debounce((e: number | undefined) => {
+  const handleMinYearFilter = debounce((e: number | string) => {
-    if (e && (e < 1700 || e > 2300)) return;
+    if (typeof e === 'number' && (e < 1700 || e > 2300)) return;
     const updatedFilters = setFilters({
       jfParams: {
         ...filter.jfParams,
         includeItemTypes: 'Audio',
-        minYear: e,
+        minYear: e === '' ? undefined : (e as number),
       },
     });
     handleFilterChange(updatedFilters);
   }, 500);
 
-  const handleMaxYearFilter = debounce((e: number | undefined) => {
+  const handleMaxYearFilter = debounce((e: number | string) => {
-    if (e && (e < 1700 || e > 2300)) return;
+    if (typeof e === 'number' && (e < 1700 || e > 2300)) return;
     const updatedFilters = setFilters({
       jfParams: {
         ...filter.jfParams,
         includeItemTypes: 'Audio',
-        maxYear: e,
+        maxYear: e === '' ? undefined : (e as number),
       },
     });
     handleFilterChange(updatedFilters);
@@ -99,17 +99,17 @@ export const JellyfinSongFilters = ({ handleFilterChange }: JellyfinSongFiltersP
       <Group grow>
         <NumberInput
           required
+          defaultValue={filter.jfParams?.minYear}
           label="From year"
           max={2300}
           min={1700}
-          value={filter.jfParams?.minYear}
           onChange={handleMinYearFilter}
         />
         <NumberInput
+          defaultValue={filter.jfParams?.maxYear}
           label="To year"
           max={2300}
           min={1700}
-          value={filter.jfParams?.maxYear}
           onChange={handleMaxYearFilter}
         />
       </Group>

src/renderer/features/songs/components/navidrome-song-filters.tsx

@@ -46,11 +46,11 @@ export const NavidromeSongFilters = ({ handleFilterChange }: NavidromeSongFilter
     },
   ];
 
-  const handleYearFilter = debounce((e: number | undefined) => {
+  const handleYearFilter = debounce((e: number | string) => {
     const updatedFilters = setFilters({
       ndParams: {
         ...filter.ndParams,
-        year: e,
+        year: e === '' ? undefined : (e as number),
       },
     });
 
@@ -80,7 +80,7 @@ export const NavidromeSongFilters = ({ handleFilterChange }: NavidromeSongFilter
           min={0}
           value={filter.ndParams?.year}
           width={50}
-          onChange={handleYearFilter}
+          onChange={(e) => handleYearFilter(e)}
         />
         <Select
           clearable

src/renderer/features/songs/components/song-list-content.tsx

@@ -87,7 +87,7 @@ export const SongListContent = ({ customFilters, itemCount, tableRef }: SongList
           );
 
           const songs = api.normalize.songList(songsRes, server);
-          params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
+          params.successCallback(songs?.items || [], songsRes?.totalRecordCount || 0);
         },
         rowCount: undefined,
       };

src/renderer/features/songs/components/song-list-header-filters.tsx

@@ -1,4 +1,4 @@
-import { useCallback, ChangeEvent, MutableRefObject, MouseEvent } from 'react';
+import { useCallback, useMemo, ChangeEvent, MutableRefObject, MouseEvent } from 'react';
 import { IDatasource } from '@ag-grid-community/core';
 import { Flex, Group, Stack } from '@mantine/core';
 import { openModal } from '@mantine/modals';
@@ -6,9 +6,13 @@ import {
   RiSortAsc,
   RiSortDesc,
   RiFolder2Line,
-  RiFilter3Line,
   RiMoreFill,
   RiSettings3Fill,
+  RiPlayFill,
+  RiAddBoxFill,
+  RiAddCircleFill,
+  RiRefreshLine,
+  RiFilterFill,
 } from 'react-icons/ri';
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
@@ -138,7 +142,7 @@ export const SongListHeaderFilters = ({
           );
 
           const songs = api.normalize.songList(songsRes, server);
-          params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
+          params.successCallback(songs?.items || [], songsRes?.totalRecordCount || 0);
         },
         rowCount: undefined,
       };
@@ -274,6 +278,22 @@ export const SongListHeaderFilters = ({
     });
   };
 
+  const isFilterApplied = useMemo(() => {
+    const isNavidromeFilterApplied =
+      server?.type === ServerType.NAVIDROME &&
+      page.filter.ndParams &&
+      Object.values(page.filter.ndParams).some((value) => value !== undefined);
+
+    const isJellyfinFilterApplied =
+      server?.type === ServerType.JELLYFIN &&
+      page.filter.jfParams &&
+      Object.values(page.filter.jfParams)
+        .filter((value) => value !== 'Audio') // Don't account for includeItemTypes: Audio
+        .some((value) => value !== undefined);
+
+    return isNavidromeFilterApplied || isJellyfinFilterApplied;
+  }, [page.filter.jfParams, page.filter.ndParams, server?.type]);
+
   return (
     <Flex justify="space-between">
       <Group
@@ -350,15 +370,6 @@ export const SongListHeaderFilters = ({
             </DropdownMenu.Dropdown>
           </DropdownMenu>
         )}
-        <Button
-          compact
-          fw="600"
-          size="md"
-          variant="subtle"
-          onClick={handleOpenFiltersModal}
-        >
-          {cq.isSm ? 'Filters' : <RiFilter3Line size="1.3rem" />}
-        </Button>
         <DropdownMenu position="bottom-start">
           <DropdownMenu.Target>
             <Button
@@ -371,20 +382,49 @@ export const SongListHeaderFilters = ({
             </Button>
           </DropdownMenu.Target>
           <DropdownMenu.Dropdown>
-            <DropdownMenu.Item onClick={() => handlePlay(Play.NOW)}>Play</DropdownMenu.Item>
+            <DropdownMenu.Item
-            <DropdownMenu.Item onClick={() => handlePlay(Play.LAST)}>
+              icon={<RiPlayFill />}
+              onClick={() => handlePlay(Play.NOW)}
+            >
+              Play
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              icon={<RiAddBoxFill />}
+              onClick={() => handlePlay(Play.LAST)}
+            >
               Add to queue
             </DropdownMenu.Item>
-            <DropdownMenu.Item onClick={() => handlePlay(Play.NEXT)}>
+            <DropdownMenu.Item
+              icon={<RiAddCircleFill />}
+              onClick={() => handlePlay(Play.NEXT)}
+            >
               Add to queue next
             </DropdownMenu.Item>
             <DropdownMenu.Divider />
-            <DropdownMenu.Item onClick={handleRefresh}>Refresh</DropdownMenu.Item>
+            <DropdownMenu.Item
+              icon={<RiRefreshLine />}
+              onClick={handleRefresh}
+            >
+              Refresh
+            </DropdownMenu.Item>
           </DropdownMenu.Dropdown>
         </DropdownMenu>
       </Group>
-      <Group>
+      <Group
-        <DropdownMenu position="bottom-start">
+        noWrap
+        spacing="sm"
+      >
+        <Button
+          compact
+          size="md"
+          sx={{ svg: { fill: isFilterApplied ? 'var(--primary-color) !important' : undefined } }}
+          tooltip={{ label: 'Filters' }}
+          variant="subtle"
+          onClick={handleOpenFiltersModal}
+        >
+          <RiFilterFill size="1.3rem" />
+        </Button>
+        <DropdownMenu position="bottom-end">
           <DropdownMenu.Target>
             <Button
               compact

src/renderer/features/songs/components/song-list-header.tsx

@@ -72,7 +72,7 @@ export const SongListHeader = ({
           );
 
           const songs = api.normalize.songList(songsRes, server);
-          params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
+          params.successCallback(songs?.items || [], songsRes?.totalRecordCount || 0);
         },
         rowCount: undefined,
       };
@@ -114,13 +114,11 @@ export const SongListHeader = ({
       <PageHeader backgroundColor="var(--titlebar-bg)">
         <Flex
           justify="space-between"
-          py="1rem"
+          w="100%"
         >
           <LibraryHeaderBar>
-            <Group>
+            <LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
-              <LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
+            <LibraryHeaderBar.Title>{title || 'Tracks'}</LibraryHeaderBar.Title>
-              <LibraryHeaderBar.Title>{title || 'Tracks'}</LibraryHeaderBar.Title>
-            </Group>
             <Paper
               fw="600"
               px="1rem"

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

@@ -1,15 +1,8 @@
 import { Group } from '@mantine/core';
 import { openModal, closeAllModals } from '@mantine/modals';
-import {
+import { RiLockLine, RiServerFill, RiEdit2Fill, RiSettings3Fill } from 'react-icons/ri';
-  RiSearch2Line,
-  RiSettings2Fill,
-  RiSettings2Line,
-  RiEdit2Line,
-  RiLockLine,
-  RiMenuFill,
-} from 'react-icons/ri';
 import { useNavigate } from 'react-router';
-import { DropdownMenu, Text, Button } from '/@/renderer/components';
+import { DropdownMenu, Text } from '/@/renderer/components';
 import { ServerList } from '/@/renderer/features/servers';
 import { EditServerForm } from '/@/renderer/features/servers/components/edit-server-form';
 import { Settings } from '/@/renderer/features/settings';
@@ -55,7 +48,7 @@ export const AppMenu = () => {
       size: 'xl',
       title: (
         <Group position="center">
-          <RiSettings2Fill size={20} />
+          <RiSettings3Fill size={20} />
           <Text>Settings</Text>
         </Group>
       ),
@@ -63,72 +56,40 @@ export const AppMenu = () => {
   };
 
   return (
-    <DropdownMenu
+    <>
-      withArrow
+      <DropdownMenu.Label>Select a server</DropdownMenu.Label>
-      withinPortal
+      {serverList.map((s) => {
-      position="bottom"
+        const isNavidromeExpired = s.type === ServerType.NAVIDROME && !s.ndCredential;
-    >
+        const isJellyfinExpired = false;
-      <DropdownMenu.Target>
+        const isSessionExpired = isNavidromeExpired || isJellyfinExpired;
-        <Button
-          px={5}
-          size="xs"
-          variant="subtle"
-        >
-          <RiMenuFill
-            color="var(--titlebar-fg)"
-            size={15}
-          />
-        </Button>
-      </DropdownMenu.Target>
-      <DropdownMenu.Dropdown>
-        <DropdownMenu.Label>Select a server</DropdownMenu.Label>
-        {serverList.map((s) => {
-          const isNavidromeExpired = s.type === ServerType.NAVIDROME && !s.ndCredential;
-          const isJellyfinExpired = false;
-          const isSessionExpired = isNavidromeExpired || isJellyfinExpired;
 
-          return (
+        return (
-            <DropdownMenu.Item
+          <DropdownMenu.Item
-              key={`server-${s.id}`}
+            key={`server-${s.id}`}
-              $isActive={s.id === currentServer?.id}
+            $isActive={s.id === currentServer?.id}
-              icon={
+            icon={isSessionExpired ? <RiLockLine color="var(--danger-color)" /> : <RiServerFill />}
-                isSessionExpired && (
+            onClick={() => {
-                  <RiLockLine
+              if (!isSessionExpired) return handleSetCurrentServer(s);
-                    color="var(--danger-color)"
+              return handleCredentialsModal(s);
-                    size={12}
+            }}
-                  />
+          >
-                )
+            <Group>{s.name}</Group>
-              }
+          </DropdownMenu.Item>
-              onClick={() => {
+        );
-                if (!isSessionExpired) return handleSetCurrentServer(s);
+      })}
-                return handleCredentialsModal(s);
+      <DropdownMenu.Divider />
-              }}
+      <DropdownMenu.Item
-            >
+        icon={<RiEdit2Fill />}
-              <Group>{s.name}</Group>
+        onClick={handleManageServersModal}
-            </DropdownMenu.Item>
+      >
-          );
+        Manage servers
-        })}
+      </DropdownMenu.Item>
-        <DropdownMenu.Divider />
+      <DropdownMenu.Item
-        <DropdownMenu.Item
+        icon={<RiSettings3Fill />}
-          disabled
+        onClick={handleSettingsModal}
-          rightSection={<RiSearch2Line />}
+      >
-        >
+        Settings
-          Search
+      </DropdownMenu.Item>
-        </DropdownMenu.Item>
+    </>
-        <DropdownMenu.Item
-          rightSection={<RiSettings2Line />}
-          onClick={handleSettingsModal}
-        >
-          Settings
-        </DropdownMenu.Item>
-        <DropdownMenu.Divider />
-        <DropdownMenu.Item
-          rightSection={<RiEdit2Line />}
-          onClick={handleManageServersModal}
-        >
-          Manage servers
-        </DropdownMenu.Item>
-      </DropdownMenu.Dropdown>
-    </DropdownMenu>
   );
 };

src/renderer/features/titlebar/components/titlebar.tsx

@@ -2,7 +2,6 @@ import type { ReactNode } from 'react';
 import { Group } from '@mantine/core';
 import styled from 'styled-components';
 import { WindowControls } from '../../window-controls';
-import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
 
 interface TitlebarProps {
   children?: ReactNode;
@@ -51,10 +50,6 @@ export const Titlebar = ({ children }: TitlebarProps) => {
         <Right>
           {children}
           <Group spacing="xs">
-            <>
-              {/* <ActivityMenu /> */}
-              <AppMenu />
-            </>
             <WindowControls />
           </Group>
         </Right>

src/renderer/features/window-controls/components/window-controls.tsx

@@ -23,7 +23,7 @@ export const WindowsButton = styled.div<{ $exit?: boolean }>`
   justify-content: center;
   -webkit-app-region: no-drag;
   width: 50px;
-  height: 30px;
+  height: 65px;
 
   img {
     width: 35%;

src/renderer/hooks/use-should-pad-titlebar.tsx

@@ -1,9 +1,15 @@
+import { useLocation } from 'react-router';
+import { AppRoute } from '/@/renderer/router/routes';
 import { useSidebarRightExpanded } from '/@/renderer/store';
 import { useGeneralSettings } from '/@/renderer/store/settings.store';
 
 export const useShouldPadTitlebar = () => {
+  const location = useLocation();
   const isSidebarExpanded = useSidebarRightExpanded();
+  const isQueuePage = location.pathname === AppRoute.NOW_PLAYING;
   const { sideQueueType } = useGeneralSettings();
 
-  return !(isSidebarExpanded && sideQueueType === 'sideQueue');
+  // If the sidebar is expanded, the sidebar queue is enabled, and the user is not on the queue page
+
+  return !(isSidebarExpanded && sideQueueType === 'sideQueue' && !isQueuePage);
 };

src/renderer/index.tsx

@@ -1,3 +1,4 @@
+import { Notifications } from '@mantine/notifications';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { createRoot } from 'react-dom/client';
 import { App } from './app';
@@ -8,6 +9,10 @@ const root = createRoot(container);
 
 root.render(
   <QueryClientProvider client={queryClient}>
+    <Notifications
+      containerWidth="300px"
+      position="bottom-center"
+    />
     <App />
   </QueryClientProvider>,
 );

src/renderer/layouts/default-layout.tsx

@@ -30,7 +30,7 @@ const Layout = styled.div`
   grid-template-areas:
     'main-content'
     'player';
-  grid-template-rows: calc(100vh - 85px) 85px;
+  grid-template-rows: calc(100vh - 90px) 90px;
   grid-template-columns: 1fr;
   gap: 0;
   height: 100%;
@@ -97,8 +97,9 @@ const ResizeHandle = styled.div<{
 `;
 
 const QueueDrawer = styled(motion.div)`
-  background: var(--sidebar-bg);
+  background: transparent;
-  border-left: var(--sidebar-border);
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
 `;
 
 const QueueDrawerArea = styled(motion.div)`
@@ -162,7 +163,7 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
 
   const queueDrawerVariants: Variants = {
     closed: {
-      height: 'calc(100vh - 170px)',
+      height: 'calc(100vh - 190px)',
       position: 'absolute',
       right: 0,
       top: '75px',
@@ -174,12 +175,11 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
       x: '50vw',
     },
     open: {
-      boxShadow: '1px 1px 10px 5px rgba(0, 0, 0, 0.3)',
+      boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.8)',
-      height: 'calc(100vh - 170px)',
+      height: 'calc(100vh - 190px)',
       position: 'absolute',
       right: '20px',
       top: '75px',
-
       transition: {
         damping: 10,
         delay: 0,

src/renderer/router/titlebar-outlet.tsx

@@ -7,7 +7,7 @@ const TitlebarContainer = styled.header`
   top: 0;
   right: 0;
   z-index: 5000;
-  height: 30px;
+  height: 65px;
   background: var(--titlebar-controls-bg);
   -webkit-app-region: drag;
 `;

src/renderer/styles/global.scss

@@ -64,7 +64,7 @@ html {
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgb(136, 136, 136);
+  background: var(--scrollbar-thumb-bg-hover);
 }
 
 a {

src/renderer/themes/default.scss

@@ -2,7 +2,7 @@
   --root-font-size: 13px;
   --icon-color: rgb(255, 255, 255);
 
-  --primary-color: rgb(34, 104, 255);
+  --primary-color: rgb(53, 116, 252);
   --secondary-color: rgb(255, 120, 120);
   --success-color: green;
   --warning-color: orange;
@@ -14,7 +14,7 @@
   --main-fg-secondary: rgb(150, 150, 150);
 
   --titlebar-fg: rgb(255, 255, 255);
-  --titlebar-bg: rgb(7, 7, 7);
+  --titlebar-bg: rgb(24, 24, 24);
   --titlebar-controls-bg: rgba(0, 0, 0, 0);
 
   --sidebar-bg: rgb(0, 0, 0);
@@ -40,10 +40,11 @@
   --tooltip-fg: #000000;
 
   --scrollbar-track-bg: transparent;
-  --scrollbar-thumb-bg: rgba(90, 90, 90, 0.5);
+  --scrollbar-thumb-bg: rgba(160, 160, 160, 0.3);
+  --scrollbar-thumb-bg-hover: rgba(160, 160, 160, 0.6);
 
   --btn-primary-bg: var(--primary-color);
-  --btn-primary-bg-hover: rgb(0, 71, 252);
+  --btn-primary-bg-hover: rgb(34, 96, 255);
   --btn-primary-fg: #ffffff;
   --btn-primary-fg-hover: #ffffff;
 
@@ -59,7 +60,7 @@
 
   --input-bg: rgb(35, 35, 35);
   --input-fg: rgb(193, 193, 193);
-  --input-placeholder-fg: rgb(119, 126, 139);
+  --input-placeholder-fg: rgb(107, 108, 109);
   --input-active-fg: rgb(193, 193, 193);
   --input-active-bg: rgba(255, 255, 255, 0.1);
 
@@ -84,12 +85,12 @@
   --toast-description-fg: rgb(193, 194, 197);
   --toast-bg: rgb(16, 16, 16);
 
-  --modal-bg: rgb(26, 26, 26);
+  --modal-bg: var(--main-bg);
 
   --badge-bg: rgb(0, 0, 0);
   --badge-fg: rgb(255, 255, 255);
 
-  --paper-bg: rgb(30, 30, 30);
+  --paper-bg: rgb(20, 20, 20);
 
   --placeholder-bg: rgba(53, 53, 53, 0.5);
   --placeholder-fg: rgba(126, 126, 126);
@@ -180,25 +181,4 @@
   .current-song {
     background: rgba(96, 144, 240, 0.3) !important;
   }
-
-  .mantine-Modal-modal {
-    background: var(--modal-bg);
-    border-radius: 10px;
-    backdrop-filter: blur(8px);
-  }
-
-  .mantine-Modal-header {
-    padding-bottom: 1rem;
-    margin-right: 0.5rem;
-    border-bottom: 1px solid var(--generic-border-color);
-  }
-
-  .mantine-Modal-title {
-    font-weight: bold;
-    font-size: medium;
-  }
-
-  .mantine-Modal-body {
-    padding: 1rem;
-  }
 }

src/renderer/themes/light.scss

@@ -7,7 +7,7 @@ body[data-theme='defaultLight'] {
 
   --titlebar-fg: rgb(25, 25, 25);
   --titlebar-bg: rgb(240, 241, 242);
-  --titlebar-controls-bg: rgba(240, 240, 240, 0.2);
+  --titlebar-controls-bg: rgba(0, 0, 0, 0);
 
   --sidebar-bg: rgb(240, 241, 242);
   --sidebar-fg: rgb(0, 0, 0);
@@ -35,7 +35,8 @@ body[data-theme='defaultLight'] {
   --tooltip-fg: rgb(0, 0, 0);
 
   --scrollbar-track-bg: transparent;
-  --scrollbar-thumb-bg: rgb(140, 140, 140);
+  --scrollbar-thumb-bg: rgba(140, 140, 140, 0.3);
+  --scrollbar-thumb-bg: rgba(140, 140, 140, 0.6);
 
   --btn-primary-bg: var(--primary-color);
   --btn-primary-fg: #ffffff;
@@ -78,7 +79,7 @@ body[data-theme='defaultLight'] {
 
   --modal-bg: rgb(255, 255, 255);
 
-  --paper-bg: rgb(240, 240, 240);
+  --paper-bg: rgb(235, 235, 235);
 
   --placeholder-bg: rgba(204, 204, 204, 0.5);
   --placeholder-fg: rgb(126, 126, 126);

src/renderer/utils/constrain-sidebar-width.ts

@@ -1,6 +1,6 @@
 export const constrainSidebarWidth = (num: number) => {
-  if (num < 225) {
+  if (num < 260) {
-    return 225;
+    return 260;
   }
 
   if (num > 400) {