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
2025-12-31 18:13:31 +00:00 · 2023-02-07 22:47:23 -08:00 · 2023-02-07 22:47:23 -08:00 · 9f2e873366
commit 9f2e873366
parent d2c0d4c11f
80 changed files with 1427 additions and 1101 deletions
--- a/src/renderer/components/dropdown-menu/index.tsx
+++ b/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}
--- a/src/renderer/components/page-header/index.tsx
+++ b/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%;
 `;
--- a/src/renderer/components/query-builder/index.tsx
+++ b/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
--- a/src/renderer/components/query-builder/query-builder-option.tsx
+++ b/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}
        />
      )}
--- a/src/renderer/components/scroll-area/index.tsx
+++ b/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);
--- a/src/renderer/components/search-input/index.tsx
+++ b/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',
--- a/src/renderer/components/toast/index.tsx
+++ b/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,
--- a/src/renderer/components/virtual-grid/virtual-infinite-grid.tsx
+++ b/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) => {
-  if (width < 1920) {
-    return width;
-  }
+// const constrainWidth = (width: number) => {
+//   if (width < 1920) {
+//     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(
-        (constrainWidth(Number(width)) - itemGap + 3) / (itemSize! + itemGap + 2),
-      );
+      const itemsPerRow = Math.floor((Number(width) - itemGap + 3) / (itemSize! + itemGap + 2));

      return {
        columnCount: itemsPerRow,
--- a/src/renderer/components/virtual-table/cells/favorite-cell.tsx
+++ b/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 {
-  useCurrentServer,
-  useSetAlbumListItemDataById,
-  useSetQueueFavorite,
-} from '/@/renderer/store';
+import { useCurrentServer, useSetAlbumListItemDataById } 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 });
          },
        },
--- a/src/renderer/components/virtual-table/cells/rating-cell.tsx
+++ b/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({
-      _serverId: value?.serverId,
-      query: {
-        item: [value],
-        rating,
+    updateRatingMutation.mutate(
+      {
+        _serverId: value?.serverId,
+        query: {
+          item: [value],
+          rating,
+        },
      },
-    });
-
-    setRatingValue(rating);
+      {
+        onSuccess: () => {
+          node.setData({ ...node.data, userRating: rating });
+        },
+      },
+    );
  };

  const handleClearRating = (e: MouseEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
-    updateRatingMutation.mutate({
-      _serverId: value?.serverId,
-      query: {
-        item: [value],
-        rating: 0,
+    updateRatingMutation.mutate(
+      {
+        _serverId: value?.serverId,
+        query: {
+          item: [value],
+          rating: 0,
+        },
      },
-    });
-
-    setRatingValue(0);
+      {
+        onSuccess: () => {
+          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}
      />
--- a/src/renderer/components/virtual-table/index.tsx
+++ b/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