feat: add search to header

Author: oae

src/components/header.tsx

@@ -1,8 +1,7 @@
-import { Center, Container, createStyles, Group, Header, Menu, Title, UnstyledButton } from '@mantine/core';
-import { NextLink } from '@mantine/next';
+import { Box, Container, createStyles, Group, Header, Title, UnstyledButton } from '@mantine/core';
 import Image from 'next/image';
 import Link from 'next/link';
-import { AiOutlineDown } from 'react-icons/ai';
+import { SearchControl } from './headerSearch';
 
 const useStyles = createStyles((theme) => ({
   header: {
@@ -25,66 +24,15 @@ const useStyles = createStyles((theme) => ({
     marginTop: '10px',
     color: theme.colors.gray[0],
   },
-
-  links: {},
-
-  link: {
-    display: 'block',
-    lineHeight: 1,
-    padding: '8px 12px',
-    borderRadius: theme.radius.sm,
-    textDecoration: 'none',
-    color: theme.white,
-    fontSize: theme.fontSizes.sm,
-    fontWeight: 500,
-
-    '&:hover': {
-      backgroundColor: theme.fn.lighten(theme.colors.red[8], 0.2),
-    },
-  },
-
-  linkLabel: {
-    marginRight: 5,
-  },
 }));
 
-interface HeaderSearchProps {
-  links: { link: string; label: string; links?: { link: string; label: string }[] }[];
-}
-
-export function KaizokuHeader({ links }: HeaderSearchProps) {
+export function KaizokuHeader() {
   const { classes } = useStyles();
 
-  const items = links.map((link) => {
-    const menuItems = link.links?.map((item) => <Menu.Item key={item.link}>{item.label}</Menu.Item>);
-
-    if (menuItems) {
-      return (
-        <Menu key={link.label} trigger="hover" exitTransitionDuration={0}>
-          <Menu.Target>
-            <a href={link.link} className={classes.link} onClick={(event) => event.preventDefault()}>
-              <Center>
-                <span className={classes.linkLabel}>{link.label}</span>
-                <AiOutlineDown size={12} strokeWidth={1.5} />
-              </Center>
-            </a>
-          </Menu.Target>
-          <Menu.Dropdown>{menuItems}</Menu.Dropdown>
-        </Menu>
-      );
-    }
-
-    return (
-      <NextLink target="_blank" key={link.label} href={link.link} className={classes.link}>
-        {link.label}
-      </NextLink>
-    );
-  });
-
   return (
     <Header height={56} className={classes.header} mb={120}>
       <Container fluid>
-        <div className={classes.inner}>
+        <Box className={classes.inner}>
           <Link href="/">
             <UnstyledButton component="a">
               <Group spacing={10}>
@@ -95,22 +43,12 @@ export function KaizokuHeader({ links }: HeaderSearchProps) {
               </Group>
             </UnstyledButton>
           </Link>
-          <Group spacing={5} className={classes.links}>
-            {items}
+
+          <Group spacing={5}>
+            <SearchControl />
           </Group>
-        </div>
+        </Box>
       </Container>
     </Header>
   );
 }
-
-export const KaizokuLinks = [
-  {
-    link: '/admin/queues/queue/downloadQueue?status=completed',
-    label: 'Downloads',
-  },
-  {
-    link: '/',
-    label: 'Settings',
-  },
-];

src/components/headerSearch.tsx

@@ -0,0 +1,81 @@
+import { createStyles, Grid, Group, Image, Kbd, Text, UnstyledButton } from '@mantine/core';
+import { openSpotlight, SpotlightAction, SpotlightProvider } from '@mantine/spotlight';
+import { IconSearch } from '@tabler/icons';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { trpc } from '../utils/trpc';
+
+const useStyles = createStyles((theme, { disabled }: { disabled: boolean }) => ({
+  root: {
+    height: 34,
+    width: 250,
+    paddingLeft: theme.spacing.sm,
+    paddingRight: 10,
+    borderRadius: theme.radius.sm,
+    color: theme.colors.gray[5],
+    backgroundColor: disabled ? theme.colors.gray[3] : theme.white,
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    outline: '0 !important',
+  },
+}));
+
+export function SearchControl() {
+  const [actions, setActions] = useState<SpotlightAction[]>([]);
+  const router = useRouter();
+  const mangaQuery = trpc.manga.query.useQuery();
+  const isDisabled = !mangaQuery.data || mangaQuery.data.length === 0;
+  const { classes, cx } = useStyles({ disabled: isDisabled });
+
+  useEffect(() => {
+    if (mangaQuery.data) {
+      setActions(
+        mangaQuery.data.map((m) => ({
+          title: m.title,
+          description: m.title,
+          group: m.source,
+          icon: (
+            <Image
+              withPlaceholder
+              placeholder={<Image src="/cover-not-found.jpg" alt={m.title} width={63} height={96} />}
+              src={m.cover}
+              width={42}
+              height={64}
+            />
+          ),
+          closeOnTrigger: true,
+          onTrigger: () => router.push(`/manga/${m.id}`),
+        })),
+      );
+    }
+  }, [mangaQuery.data, router]);
+
+  return (
+    <SpotlightProvider
+      actions={actions}
+      searchIcon={<IconSearch size={18} />}
+      highlightQuery
+      disabled={isDisabled}
+      searchPlaceholder="Search..."
+      shortcut="ctrl + p"
+      nothingFoundMessage="Nothing found..."
+    >
+      <UnstyledButton className={cx(classes.root)} onClick={() => openSpotlight()} disabled={isDisabled}>
+        <Grid gutter={5}>
+          <Grid.Col span="content" style={{ display: 'flex', alignItems: 'center' }}>
+            <IconSearch size={14} stroke={1.5} />
+          </Grid.Col>
+          <Grid.Col span="auto" style={{ display: 'flex', alignItems: 'center' }}>
+            <Text size="sm" color="dimmed">
+              Search
+            </Text>
+          </Grid.Col>
+          <Grid.Col span="content">
+            <Group spacing={5}>
+              <Kbd py={0}>Ctrl</Kbd>+<Kbd py={0}>P</Kbd>
+            </Group>
+          </Grid.Col>
+        </Grid>
+      </UnstyledButton>
+    </SpotlightProvider>
+  );
+}

src/pages/_app.tsx

@@ -3,7 +3,7 @@ import { ModalsProvider } from '@mantine/modals';
 import { NotificationsProvider } from '@mantine/notifications';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
-import { KaizokuHeader, KaizokuLinks } from '../components/header';
+import { KaizokuHeader } from '../components/header';
 import { KaizokuNavbar } from '../components/navbar';
 import '../styles/globals.css';
 import { trpc } from '../utils/trpc';
@@ -29,7 +29,7 @@ function MyApp({ Component, pageProps }: AppProps) {
             <AppShell
               padding="md"
               navbar={<KaizokuNavbar />}
-              header={<KaizokuHeader links={KaizokuLinks} />}
+              header={<KaizokuHeader />}
               styles={(theme) => ({
                 main: { backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0] },
               })}

src/pages/index.tsx

@@ -13,17 +13,7 @@ export default function IndexPage() {
   const mangaRemove = trpc.manga.remove.useMutation();
   const router = useRouter();
 
-  const libraryId = libraryQuery.data?.id;
-
-  const mangaQuery = trpc.manga.query.useQuery(
-    {
-      library: libraryId!,
-    },
-    {
-      staleTime: Infinity,
-      enabled: libraryId !== undefined,
-    },
-  );
+  const mangaQuery = trpc.manga.query.useQuery();
 
   if (mangaQuery.isLoading || libraryQuery.isLoading) {
     return (

src/server/trpc/router/manga.ts

@@ -8,19 +8,9 @@ import { getAvailableSources, getMangaDetail, removeManga, search } from '../../
 import { t } from '../trpc';
 
 export const mangaRouter = t.router({
-  query: t.procedure
-    .input(
-      z.object({
-        library: z.number(),
-      }),
-    )
-    .query(async ({ input, ctx }) => {
-      return ctx.prisma.manga.findMany({
-        where: {
-          libraryId: input.library,
-        },
-      });
-    }),
+  query: t.procedure.query(async ({ ctx }) => {
+    return ctx.prisma.manga.findMany();
+  }),
   sources: t.procedure.query(async () => {
     return getAvailableSources();
   }),