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

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