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/titlebar/components/app-menu.tsx

@@ -1,15 +1,8 @@
 import { Group } from '@mantine/core';
 import { openModal, closeAllModals } from '@mantine/modals';
-import {
-  RiSearch2Line,
-  RiSettings2Fill,
-  RiSettings2Line,
-  RiEdit2Line,
-  RiLockLine,
-  RiMenuFill,
-} from 'react-icons/ri';
+import { RiLockLine, RiServerFill, RiEdit2Fill, RiSettings3Fill } 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
-      withinPortal
-      position="bottom"
-    >
-      <DropdownMenu.Target>
-        <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;
+    <>
+      <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 (
-            <DropdownMenu.Item
-              key={`server-${s.id}`}
-              $isActive={s.id === currentServer?.id}
-              icon={
-                isSessionExpired && (
-                  <RiLockLine
-                    color="var(--danger-color)"
-                    size={12}
-                  />
-                )
-              }
-              onClick={() => {
-                if (!isSessionExpired) return handleSetCurrentServer(s);
-                return handleCredentialsModal(s);
-              }}
-            >
-              <Group>{s.name}</Group>
-            </DropdownMenu.Item>
-          );
-        })}
-        <DropdownMenu.Divider />
-        <DropdownMenu.Item
-          disabled
-          rightSection={<RiSearch2Line />}
-        >
-          Search
-        </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>
+        return (
+          <DropdownMenu.Item
+            key={`server-${s.id}`}
+            $isActive={s.id === currentServer?.id}
+            icon={isSessionExpired ? <RiLockLine color="var(--danger-color)" /> : <RiServerFill />}
+            onClick={() => {
+              if (!isSessionExpired) return handleSetCurrentServer(s);
+              return handleCredentialsModal(s);
+            }}
+          >
+            <Group>{s.name}</Group>
+          </DropdownMenu.Item>
+        );
+      })}
+      <DropdownMenu.Divider />
+      <DropdownMenu.Item
+        icon={<RiEdit2Fill />}
+        onClick={handleManageServersModal}
+      >
+        Manage servers
+      </DropdownMenu.Item>
+      <DropdownMenu.Item
+        icon={<RiSettings3Fill />}
+        onClick={handleSettingsModal}
+      >
+        Settings
+      </DropdownMenu.Item>
+    </>
   );
 };

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>