mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-02 10:53:33 +00:00
Lint all files
This commit is contained in:
jeffvli
parent
22af76b4d6
commit
30e52ebb54
334 changed files with 76519 additions and 75932 deletions
|
|
@ -18,249 +18,261 @@ import { LibraryItem } from '/@/renderer/api/types';
|
|||
import { usePlayQueueAdd } from '/@/renderer/features/player';
|
||||
|
||||
interface CommandPaletteProps {
|
||||
modalProps: typeof useDisclosure['arguments'];
|
||||
modalProps: typeof useDisclosure['arguments'];
|
||||
}
|
||||
|
||||
const CustomModal = styled(Modal)`
|
||||
& .mantine-Modal-header {
|
||||
display: none;
|
||||
}
|
||||
& .mantine-Modal-header {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
|
||||
const navigate = useNavigate();
|
||||
const server = useCurrentServer();
|
||||
const [value, setValue] = useState('');
|
||||
const [query, setQuery] = useState('');
|
||||
const [debouncedQuery] = useDebouncedValue(query, 400);
|
||||
const [pages, setPages] = useState<CommandPalettePages[]>([CommandPalettePages.HOME]);
|
||||
const activePage = pages[pages.length - 1];
|
||||
const isHome = activePage === CommandPalettePages.HOME;
|
||||
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||
const navigate = useNavigate();
|
||||
const server = useCurrentServer();
|
||||
const [value, setValue] = useState('');
|
||||
const [query, setQuery] = useState('');
|
||||
const [debouncedQuery] = useDebouncedValue(query, 400);
|
||||
const [pages, setPages] = useState<CommandPalettePages[]>([CommandPalettePages.HOME]);
|
||||
const activePage = pages[pages.length - 1];
|
||||
const isHome = activePage === CommandPalettePages.HOME;
|
||||
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const popPage = useCallback(() => {
|
||||
setPages((pages) => {
|
||||
const x = [...pages];
|
||||
x.splice(-1, 1);
|
||||
return x;
|
||||
const popPage = useCallback(() => {
|
||||
setPages((pages) => {
|
||||
const x = [...pages];
|
||||
x.splice(-1, 1);
|
||||
return x;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const { data, isLoading } = useSearch({
|
||||
options: { enabled: isHome && debouncedQuery !== '' && query !== '' },
|
||||
query: {
|
||||
albumArtistLimit: 4,
|
||||
albumArtistStartIndex: 0,
|
||||
albumLimit: 4,
|
||||
albumStartIndex: 0,
|
||||
query: debouncedQuery,
|
||||
songLimit: 4,
|
||||
songStartIndex: 0,
|
||||
},
|
||||
serverId: server?.id,
|
||||
});
|
||||
}, []);
|
||||
|
||||
const { data, isLoading } = useSearch({
|
||||
options: { enabled: isHome && debouncedQuery !== '' && query !== '' },
|
||||
query: {
|
||||
albumArtistLimit: 4,
|
||||
albumArtistStartIndex: 0,
|
||||
albumLimit: 4,
|
||||
albumStartIndex: 0,
|
||||
query: debouncedQuery,
|
||||
songLimit: 4,
|
||||
songStartIndex: 0,
|
||||
},
|
||||
serverId: server?.id,
|
||||
});
|
||||
const showAlbumGroup = isHome && Boolean(query && data && data?.albums?.length > 0);
|
||||
const showArtistGroup = isHome && Boolean(query && data && data?.albumArtists?.length > 0);
|
||||
const showTrackGroup = isHome && Boolean(query && data && data?.songs?.length > 0);
|
||||
|
||||
const showAlbumGroup = isHome && Boolean(query && data && data?.albums?.length > 0);
|
||||
const showArtistGroup = isHome && Boolean(query && data && data?.albumArtists?.length > 0);
|
||||
const showTrackGroup = isHome && Boolean(query && data && data?.songs?.length > 0);
|
||||
const handlePlayQueueAdd = usePlayQueueAdd();
|
||||
|
||||
const handlePlayQueueAdd = usePlayQueueAdd();
|
||||
|
||||
return (
|
||||
<CustomModal
|
||||
{...modalProps}
|
||||
centered
|
||||
handlers={{
|
||||
...modalProps.handlers,
|
||||
close: () => {
|
||||
if (isHome) {
|
||||
modalProps.handlers.close();
|
||||
setQuery('');
|
||||
} else {
|
||||
popPage();
|
||||
}
|
||||
},
|
||||
toggle: () => {
|
||||
if (isHome) {
|
||||
modalProps.handlers.toggle();
|
||||
setQuery('');
|
||||
} else {
|
||||
popPage();
|
||||
}
|
||||
},
|
||||
}}
|
||||
scrollAreaComponent={ScrollArea.Autosize}
|
||||
size="lg"
|
||||
>
|
||||
<Group
|
||||
mb="1rem"
|
||||
spacing="sm"
|
||||
>
|
||||
{pages.map((page, index) => (
|
||||
<Fragment key={page}>
|
||||
{index > 0 && ' > '}
|
||||
<Button
|
||||
compact
|
||||
disabled
|
||||
variant="default"
|
||||
>
|
||||
{page?.toLocaleUpperCase()}
|
||||
</Button>
|
||||
</Fragment>
|
||||
))}
|
||||
</Group>
|
||||
<Command
|
||||
filter={(value, search) => {
|
||||
if (value.includes(search)) return 1;
|
||||
if (value.includes('search')) return 1;
|
||||
return 0;
|
||||
}}
|
||||
label="Global Command Menu"
|
||||
value={value}
|
||||
onValueChange={setValue}
|
||||
>
|
||||
<TextInput
|
||||
ref={searchInputRef}
|
||||
data-autofocus
|
||||
icon={<RiSearchLine />}
|
||||
rightSection={
|
||||
<ActionIcon
|
||||
onClick={() => {
|
||||
setQuery('');
|
||||
searchInputRef.current?.focus();
|
||||
}}
|
||||
>
|
||||
<RiCloseFill />
|
||||
</ActionIcon>
|
||||
}
|
||||
size="lg"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.currentTarget.value)}
|
||||
/>
|
||||
<Command.Separator />
|
||||
<Command.List>
|
||||
<Command.Empty>No results found.</Command.Empty>
|
||||
{showAlbumGroup && (
|
||||
<Command.Group heading="Albums">
|
||||
{data?.albums?.map((album) => (
|
||||
<Command.Item
|
||||
key={`search-album-${album.id}`}
|
||||
value={`search-${album.id}`}
|
||||
onSelect={() => {
|
||||
navigate(generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId: album.id }));
|
||||
modalProps.handlers.close();
|
||||
setQuery('');
|
||||
}}
|
||||
>
|
||||
<LibraryCommandItem
|
||||
handlePlayQueueAdd={handlePlayQueueAdd}
|
||||
id={album.id}
|
||||
imageUrl={album.imageUrl}
|
||||
itemType={LibraryItem.ALBUM}
|
||||
subtitle={album.albumArtists.map((artist) => artist.name).join(', ')}
|
||||
title={album.name}
|
||||
/>
|
||||
</Command.Item>
|
||||
))}
|
||||
</Command.Group>
|
||||
)}
|
||||
{showArtistGroup && (
|
||||
<Command.Group heading="Artists">
|
||||
{data?.albumArtists.map((artist) => (
|
||||
<Command.Item
|
||||
key={`artist-${artist.id}`}
|
||||
value={`search-${artist.id}`}
|
||||
onSelect={() => {
|
||||
navigate(
|
||||
generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
|
||||
albumArtistId: artist.id,
|
||||
}),
|
||||
);
|
||||
modalProps.handlers.close();
|
||||
setQuery('');
|
||||
}}
|
||||
>
|
||||
<LibraryCommandItem
|
||||
handlePlayQueueAdd={handlePlayQueueAdd}
|
||||
id={artist.id}
|
||||
imageUrl={artist.imageUrl}
|
||||
itemType={LibraryItem.ALBUM_ARTIST}
|
||||
subtitle={
|
||||
(artist?.albumCount || 0) > 0 ? `${artist.albumCount} albums` : undefined
|
||||
return (
|
||||
<CustomModal
|
||||
{...modalProps}
|
||||
centered
|
||||
handlers={{
|
||||
...modalProps.handlers,
|
||||
close: () => {
|
||||
if (isHome) {
|
||||
modalProps.handlers.close();
|
||||
setQuery('');
|
||||
} else {
|
||||
popPage();
|
||||
}
|
||||
title={artist.name}
|
||||
/>
|
||||
</Command.Item>
|
||||
))}
|
||||
</Command.Group>
|
||||
)}
|
||||
{showTrackGroup && (
|
||||
<Command.Group heading="Tracks">
|
||||
{data?.songs.map((song) => (
|
||||
<Command.Item
|
||||
key={`artist-${song.id}`}
|
||||
value={`search-${song.id}`}
|
||||
onSelect={() => {
|
||||
navigate(
|
||||
generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
|
||||
albumId: song.albumId,
|
||||
}),
|
||||
);
|
||||
modalProps.handlers.close();
|
||||
setQuery('');
|
||||
}}
|
||||
>
|
||||
<LibraryCommandItem
|
||||
handlePlayQueueAdd={handlePlayQueueAdd}
|
||||
id={song.id}
|
||||
imageUrl={song.imageUrl}
|
||||
itemType={LibraryItem.SONG}
|
||||
subtitle={song.artists.map((artist) => artist.name).join(', ')}
|
||||
title={song.name}
|
||||
/>
|
||||
</Command.Item>
|
||||
))}
|
||||
</Command.Group>
|
||||
)}
|
||||
{activePage === CommandPalettePages.HOME && (
|
||||
<HomeCommands
|
||||
handleClose={modalProps.handlers.close}
|
||||
pages={pages}
|
||||
query={query}
|
||||
setPages={setPages}
|
||||
setQuery={setQuery}
|
||||
/>
|
||||
)}
|
||||
{activePage === CommandPalettePages.GO_TO && (
|
||||
<GoToCommands
|
||||
handleClose={modalProps.handlers.close}
|
||||
setPages={setPages}
|
||||
setQuery={setQuery}
|
||||
/>
|
||||
)}
|
||||
{activePage === CommandPalettePages.MANAGE_SERVERS && (
|
||||
<ServerCommands
|
||||
handleClose={modalProps.handlers.close}
|
||||
setPages={setPages}
|
||||
setQuery={setQuery}
|
||||
/>
|
||||
)}
|
||||
</Command.List>
|
||||
</Command>
|
||||
<Paper
|
||||
mt="0.5rem"
|
||||
p="0.5rem"
|
||||
>
|
||||
<Group position="apart">
|
||||
<Command.Loading>{isHome && isLoading && query !== '' && <Spinner />}</Command.Loading>
|
||||
<Group spacing="sm">
|
||||
<Kbd size="md">ESC</Kbd>
|
||||
<Kbd size="md">↑</Kbd>
|
||||
<Kbd size="md">↓</Kbd>
|
||||
<Kbd size="md">⏎</Kbd>
|
||||
</Group>
|
||||
</Group>
|
||||
</Paper>
|
||||
</CustomModal>
|
||||
);
|
||||
},
|
||||
toggle: () => {
|
||||
if (isHome) {
|
||||
modalProps.handlers.toggle();
|
||||
setQuery('');
|
||||
} else {
|
||||
popPage();
|
||||
}
|
||||
},
|
||||
}}
|
||||
scrollAreaComponent={ScrollArea.Autosize}
|
||||
size="lg"
|
||||
>
|
||||
<Group
|
||||
mb="1rem"
|
||||
spacing="sm"
|
||||
>
|
||||
{pages.map((page, index) => (
|
||||
<Fragment key={page}>
|
||||
{index > 0 && ' > '}
|
||||
<Button
|
||||
compact
|
||||
disabled
|
||||
variant="default"
|
||||
>
|
||||
{page?.toLocaleUpperCase()}
|
||||
</Button>
|
||||
</Fragment>
|
||||
))}
|
||||
</Group>
|
||||
<Command
|
||||
filter={(value, search) => {
|
||||
if (value.includes(search)) return 1;
|
||||
if (value.includes('search')) return 1;
|
||||
return 0;
|
||||
}}
|
||||
label="Global Command Menu"
|
||||
value={value}
|
||||
onValueChange={setValue}
|
||||
>
|
||||
<TextInput
|
||||
ref={searchInputRef}
|
||||
data-autofocus
|
||||
icon={<RiSearchLine />}
|
||||
rightSection={
|
||||
<ActionIcon
|
||||
onClick={() => {
|
||||
setQuery('');
|
||||
searchInputRef.current?.focus();
|
||||
}}
|
||||
>
|
||||
<RiCloseFill />
|
||||
</ActionIcon>
|
||||
}
|
||||
size="lg"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.currentTarget.value)}
|
||||
/>
|
||||
<Command.Separator />
|
||||
<Command.List>
|
||||
<Command.Empty>No results found.</Command.Empty>
|
||||
{showAlbumGroup && (
|
||||
<Command.Group heading="Albums">
|
||||
{data?.albums?.map((album) => (
|
||||
<Command.Item
|
||||
key={`search-album-${album.id}`}
|
||||
value={`search-${album.id}`}
|
||||
onSelect={() => {
|
||||
navigate(
|
||||
generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
|
||||
albumId: album.id,
|
||||
}),
|
||||
);
|
||||
modalProps.handlers.close();
|
||||
setQuery('');
|
||||
}}
|
||||
>
|
||||
<LibraryCommandItem
|
||||
handlePlayQueueAdd={handlePlayQueueAdd}
|
||||
id={album.id}
|
||||
imageUrl={album.imageUrl}
|
||||
itemType={LibraryItem.ALBUM}
|
||||
subtitle={album.albumArtists
|
||||
.map((artist) => artist.name)
|
||||
.join(', ')}
|
||||
title={album.name}
|
||||
/>
|
||||
</Command.Item>
|
||||
))}
|
||||
</Command.Group>
|
||||
)}
|
||||
{showArtistGroup && (
|
||||
<Command.Group heading="Artists">
|
||||
{data?.albumArtists.map((artist) => (
|
||||
<Command.Item
|
||||
key={`artist-${artist.id}`}
|
||||
value={`search-${artist.id}`}
|
||||
onSelect={() => {
|
||||
navigate(
|
||||
generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
|
||||
albumArtistId: artist.id,
|
||||
}),
|
||||
);
|
||||
modalProps.handlers.close();
|
||||
setQuery('');
|
||||
}}
|
||||
>
|
||||
<LibraryCommandItem
|
||||
handlePlayQueueAdd={handlePlayQueueAdd}
|
||||
id={artist.id}
|
||||
imageUrl={artist.imageUrl}
|
||||
itemType={LibraryItem.ALBUM_ARTIST}
|
||||
subtitle={
|
||||
(artist?.albumCount || 0) > 0
|
||||
? `${artist.albumCount} albums`
|
||||
: undefined
|
||||
}
|
||||
title={artist.name}
|
||||
/>
|
||||
</Command.Item>
|
||||
))}
|
||||
</Command.Group>
|
||||
)}
|
||||
{showTrackGroup && (
|
||||
<Command.Group heading="Tracks">
|
||||
{data?.songs.map((song) => (
|
||||
<Command.Item
|
||||
key={`artist-${song.id}`}
|
||||
value={`search-${song.id}`}
|
||||
onSelect={() => {
|
||||
navigate(
|
||||
generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
|
||||
albumId: song.albumId,
|
||||
}),
|
||||
);
|
||||
modalProps.handlers.close();
|
||||
setQuery('');
|
||||
}}
|
||||
>
|
||||
<LibraryCommandItem
|
||||
handlePlayQueueAdd={handlePlayQueueAdd}
|
||||
id={song.id}
|
||||
imageUrl={song.imageUrl}
|
||||
itemType={LibraryItem.SONG}
|
||||
subtitle={song.artists
|
||||
.map((artist) => artist.name)
|
||||
.join(', ')}
|
||||
title={song.name}
|
||||
/>
|
||||
</Command.Item>
|
||||
))}
|
||||
</Command.Group>
|
||||
)}
|
||||
{activePage === CommandPalettePages.HOME && (
|
||||
<HomeCommands
|
||||
handleClose={modalProps.handlers.close}
|
||||
pages={pages}
|
||||
query={query}
|
||||
setPages={setPages}
|
||||
setQuery={setQuery}
|
||||
/>
|
||||
)}
|
||||
{activePage === CommandPalettePages.GO_TO && (
|
||||
<GoToCommands
|
||||
handleClose={modalProps.handlers.close}
|
||||
setPages={setPages}
|
||||
setQuery={setQuery}
|
||||
/>
|
||||
)}
|
||||
{activePage === CommandPalettePages.MANAGE_SERVERS && (
|
||||
<ServerCommands
|
||||
handleClose={modalProps.handlers.close}
|
||||
setPages={setPages}
|
||||
setQuery={setQuery}
|
||||
/>
|
||||
)}
|
||||
</Command.List>
|
||||
</Command>
|
||||
<Paper
|
||||
mt="0.5rem"
|
||||
p="0.5rem"
|
||||
>
|
||||
<Group position="apart">
|
||||
<Command.Loading>
|
||||
{isHome && isLoading && query !== '' && <Spinner />}
|
||||
</Command.Loading>
|
||||
<Group spacing="sm">
|
||||
<Kbd size="md">ESC</Kbd>
|
||||
<Kbd size="md">↑</Kbd>
|
||||
<Kbd size="md">↓</Kbd>
|
||||
<Kbd size="md">⏎</Kbd>
|
||||
</Group>
|
||||
</Group>
|
||||
</Paper>
|
||||
</CustomModal>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue