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/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`}>
-      <Group>
+    <Stack
+      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