feishin/src/renderer/features/search/components/command-palette.tsx

/* eslint-disable react/no-unknown-property */
import { useCallback, useState, Fragment, useRef } from 'react';
import { ActionIcon, Group, Kbd, ScrollArea } from '@mantine/core';
import { useDisclosure, useDebouncedValue } from '@mantine/hooks';
import { RiSearchLine, RiCloseFill } from 'react-icons/ri';
import { generatePath, useNavigate } from 'react-router';
import styled from 'styled-components';
import { GoToCommands } from './go-to-commands';
import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command';
import { Button, Modal, Paper, Spinner, TextInput } from '/@/renderer/components';
import { HomeCommands } from './home-commands';
import { ServerCommands } from '/@/renderer/features/search/components/server-commands';
import { useSearch } from '/@/renderer/features/search/queries/search-query';
import { useCurrentServer } from '/@/renderer/store';
import { AppRoute } from '/@/renderer/router/routes';
import { LibraryCommandItem } from '/@/renderer/features/search/components/library-command-item';
import { LibraryItem } from '/@/renderer/api/types';
import { usePlayQueueAdd } from '/@/renderer/features/player';

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();
  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 { 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 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
                    }
                    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>
  );
};