Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements
This commit is contained in:
Jeff 2025-06-24 00:04:36 -07:00 committed by GitHub
parent bea55d48a8
commit c1330d92b2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
473 changed files with 12469 additions and 11607 deletions

View file

@ -1,26 +1,18 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import type { MutableRefObject } from 'react';
import { Group } from '@mantine/core';
import isElectron from 'is-electron';
import { useTranslation } from 'react-i18next';
import {
RiArrowDownLine,
RiArrowGoForwardLine,
RiArrowUpLine,
RiDeleteBinLine,
RiEraserLine,
RiListSettingsLine,
RiShuffleLine,
} from 'react-icons/ri';
import { Button, Popover } from '/@/renderer/components';
import { TableConfigDropdown } from '/@/renderer/components/virtual-table';
import { updateSong } from '/@/renderer/features/player/update-remote-song';
import { usePlayerControls, useQueueControls } from '/@/renderer/store';
import { usePlayerStore, useSetCurrentTime } from '/@/renderer/store/player.store';
import { usePlaybackType } from '/@/renderer/store/settings.store';
import { setQueue, setQueueNext } from '/@/renderer/utils/set-transcoded-queue-data';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Group } from '/@/shared/components/group/group';
import { Popover } from '/@/shared/components/popover/popover';
import { Song } from '/@/shared/types/domain-types';
import { PlaybackType, TableType } from '/@/shared/types/types';
@ -129,69 +121,57 @@ export const PlayQueueListControls = ({ tableRef, type }: PlayQueueListOptionsPr
return (
<Group
position="apart"
justify="space-between"
px="1rem"
py="1rem"
sx={{ alignItems: 'center' }}
style={{ alignItems: 'center' }}
w="100%"
>
<Group spacing="sm">
<Button
compact
<Group gap="sm">
<ActionIcon
icon="mediaShuffle"
iconProps={{ size: 'lg' }}
onClick={handleShuffleQueue}
size="md"
tooltip={{ label: t('player.shuffle', { postProcess: 'sentenceCase' }) }}
variant="default"
>
<RiShuffleLine size="1.1rem" />
</Button>
<Button
compact
variant="subtle"
/>
<ActionIcon
icon="mediaPlayNext"
iconProps={{ size: 'lg' }}
onClick={handleMoveToNext}
size="md"
tooltip={{ label: t('action.moveToNext', { postProcess: 'sentenceCase' }) }}
variant="default"
>
<RiArrowGoForwardLine size="1.1rem" />
</Button>
<Button
compact
variant="subtle"
/>
<ActionIcon
icon="arrowDownToLine"
iconProps={{ size: 'lg' }}
onClick={handleMoveToBottom}
size="md"
tooltip={{ label: t('action.moveToBottom', { postProcess: 'sentenceCase' }) }}
variant="default"
>
<RiArrowDownLine size="1.1rem" />
</Button>
<Button
compact
variant="subtle"
/>
<ActionIcon
icon="arrowUpToLine"
iconProps={{ size: 'lg' }}
onClick={handleMoveToTop}
size="md"
tooltip={{ label: t('action.moveToTop', { postProcess: 'sentenceCase' }) }}
variant="default"
>
<RiArrowUpLine size="1.1rem" />
</Button>
<Button
compact
variant="subtle"
/>
<ActionIcon
icon="delete"
iconProps={{ size: 'lg' }}
onClick={handleRemoveSelected}
size="md"
tooltip={{
label: t('action.removeFromQueue', { postProcess: 'sentenceCase' }),
}}
variant="default"
>
<RiEraserLine size="1.1rem" />
</Button>
<Button
compact
variant="subtle"
/>
<ActionIcon
icon="x"
iconProps={{ size: 'lg' }}
onClick={handleClearQueue}
size="md"
tooltip={{ label: t('action.clearQueue', { postProcess: 'sentenceCase' }) }}
variant="default"
>
<RiDeleteBinLine size="1.1rem" />
</Button>
variant="subtle"
/>
</Group>
<Group>
<Popover
@ -199,16 +179,14 @@ export const PlayQueueListControls = ({ tableRef, type }: PlayQueueListOptionsPr
transitionProps={{ transition: 'fade' }}
>
<Popover.Target>
<Button
compact
size="md"
<ActionIcon
icon="settings"
iconProps={{ size: 'lg' }}
tooltip={{
label: t('common.configure', { postProcess: 'sentenceCase' }),
}}
variant="subtle"
>
<RiListSettingsLine size="1.1rem" />
</Button>
/>
</Popover.Target>
<Popover.Dropdown>
<TableConfigDropdown type={type} />