antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-03 19:21:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Migrate to Mantine v8 and Design Changes (#961)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

62
src/renderer/features/search/components/command-palette.tsx
View file

@ -1,12 +1,8 @@
import { ActionIcon, Group, Kbd, ScrollArea } from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { Fragment, useCallback, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { RiCloseFill, RiSearchLine } from 'react-icons/ri';
import { generatePath, useNavigate } from 'react-router';
import styled from 'styled-components';
import { Button, Modal, Paper, Spinner, TextInput } from '/@/renderer/components';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command';
import { GoToCommands } from '/@/renderer/features/search/components/go-to-commands';
@ -16,18 +12,21 @@ import { ServerCommands } from '/@/renderer/features/search/components/server-co
import { useSearch } from '/@/renderer/features/search/queries/search-query';
import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer } from '/@/renderer/store';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Box } from '/@/shared/components/box/box';
import { Button } from '/@/shared/components/button/button';
import { Group } from '/@/shared/components/group/group';
import { Icon } from '/@/shared/components/icon/icon';
import { Kbd } from '/@/shared/components/kbd/kbd';
import { Modal } from '/@/shared/components/modal/modal';
import { Spinner } from '/@/shared/components/spinner/spinner';
import { TextInput } from '/@/shared/components/text-input/text-input';
import { LibraryItem } from '/@/shared/types/domain-types';
interface CommandPaletteProps {
modalProps: (typeof useDisclosure)['arguments'];
}
const CustomModal = styled(Modal)`
& .mantine-Modal-header {
display: none;
}
`;
export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
const navigate = useNavigate();
const server = useCurrentServer();
@ -69,7 +68,7 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
const handlePlayQueueAdd = usePlayQueueAdd();
return (
<CustomModal
<Modal
{...modalProps}
centered
handlers={{
@ -91,19 +90,21 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
}
},
}}
scrollAreaComponent={ScrollArea.Autosize}
size="lg"
styles={{
header: { display: 'none' },
}}
>
<Group
gap="sm"
mb="1rem"
spacing="sm"
>
{pages.map((page, index) => (
<Fragment key={page}>
{index > 0 && ' > '}
<Button
compact
disabled
size="compact-md"
variant="default"
>
{page?.toLocaleUpperCase()}
@ -123,20 +124,23 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
>
<TextInput
data-autofocus
icon={<RiSearchLine />}
leftSection={<Icon icon="search" />}
onChange={(e) => setQuery(e.currentTarget.value)}
ref={searchInputRef}
rightSection={
<ActionIcon
onClick={() => {
setQuery('');
searchInputRef.current?.focus();
}}
>
<RiCloseFill />
</ActionIcon>
query && (
<ActionIcon
onClick={() => {
setQuery('');
searchInputRef.current?.focus();
}}
variant="transparent"
>
<Icon icon="x" />
</ActionIcon>
)
}
size="lg"
size="sm"
value={query}
/>
<Command.Separator />
@ -263,22 +267,22 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
)}
</Command.List>
</Command>
<Paper
<Box
mt="0.5rem"
p="0.5rem"
>
<Group position="apart">
<Group justify="space-between">
<Command.Loading>
{isHome && isLoading && query !== '' && <Spinner />}
</Command.Loading>
<Group spacing="sm">
<Group gap="sm">
<Kbd size="md">ESC</Kbd>
<Kbd size="md">↑</Kbd>
<Kbd size="md">↓</Kbd>
<Kbd size="md">⏎</Kbd>
</Group>
</Group>
</Paper>
</CustomModal>
</Box>
</Modal>
);
};