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/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>