add search

src/components/Chats.tsx

@@ -2,21 +2,30 @@ import { ActionIcon, Flex, Menu } from "@mantine/core";
 import { IconDotsVertical, IconMessages } from "@tabler/icons-react";
 import { Link } from "@tanstack/react-location";
 import { useLiveQuery } from "dexie-react-hooks";
+import { useMemo } from "react";
 import { db } from "../db";
 import { useChatId } from "../hooks/useChatId";
 import { DeleteChatModal } from "./DeleteChatModal";
 import { EditChatModal } from "./EditChatModal";
 import { MainLink } from "./MainLink";
 
-export function Chats() {
+export function Chats({ search }: { search: string }) {
   const chatId = useChatId();
   const chats = useLiveQuery(() =>
     db.chats.orderBy("createdAt").reverse().toArray()
   );
+  const filteredChats = useMemo(
+    () =>
+      (chats ?? []).filter((chat) => {
+        if (!search) return true;
+        return chat.description.toLowerCase().includes(search);
+      }),
+    [chats, search]
+  );
 
   return (
     <>
-      {chats?.map((chat) => (
+      {filteredChats.map((chat) => (
         <Flex
           key={chat.id}
           className={chatId === chat.id ? "active" : undefined}

src/components/Layout.tsx

@@ -11,6 +11,7 @@ import {
   rem,
   ScrollArea,
   SegmentedControl,
+  TextInput,
   Tooltip,
   useMantineColorScheme,
   useMantineTheme,
@@ -22,8 +23,10 @@ import {
   IconMessage,
   IconMoonStars,
   IconPlus,
+  IconSearch,
   IconSettings,
   IconSunHigh,
+  IconX,
 } from "@tabler/icons-react";
 import { Link, Outlet, useNavigate, useRouter } from "@tanstack/react-location";
 import { useLiveQuery } from "dexie-react-hooks";
@@ -52,6 +55,7 @@ export function Layout() {
   const navigate = useNavigate();
   const router = useRouter();
 
+  const [search, setSearch] = useState("");
   const chatId = useChatId();
   const chat = useLiveQuery(async () => {
     if (!chatId) return null;
@@ -145,9 +149,40 @@ export function Layout() {
               {tab === "Prompts" && <CreatePromptModal />}
             </Box>
           </Navbar.Section>
+          <Navbar.Section
+            sx={(theme) => ({
+              padding: rem(4),
+              background:
+                theme.colorScheme === "dark"
+                  ? theme.colors.dark[7]
+                  : theme.white,
+              borderBottom: border,
+            })}
+          >
+            <TextInput
+              variant="unstyled"
+              radius={0}
+              placeholder="Search"
+              value={search}
+              onChange={(event) =>
+                setSearch(event.currentTarget.value.toLowerCase())
+              }
+              sx={{ paddingInline: 4 }}
+              icon={<IconSearch opacity={0.8} size={20} />}
+              rightSection={
+                !!search && (
+                  <ActionIcon onClick={() => setSearch("")}>
+                    <IconX opacity={0.5} size={20} />{" "}
+                  </ActionIcon>
+                )
+              }
+            />
+          </Navbar.Section>
           <Navbar.Section grow component={ScrollArea}>
-            {tab === "Chats" && <Chats />}
-            {tab === "Prompts" && <Prompts onPlay={() => setTab("Chats")} />}
+            {tab === "Chats" && <Chats search={search} />}
+            {tab === "Prompts" && (
+              <Prompts search={search} onPlay={() => setTab("Chats")} />
+            )}
           </Navbar.Section>
           <Navbar.Section sx={{ borderTop: border }} p="xs">
             <Center>

src/components/Prompts.tsx

@@ -3,23 +3,41 @@ import { IconPlayerPlay } from "@tabler/icons-react";
 import { useNavigate } from "@tanstack/react-location";
 import { useLiveQuery } from "dexie-react-hooks";
 import { nanoid } from "nanoid";
+import { useMemo } from "react";
 import { db } from "../db";
 import { createChatCompletion } from "../utils/openai";
 import { DeletePromptModal } from "./DeletePromptModal";
 import { EditPromptModal } from "./EditPromptModal";
 
-export function Prompts({ onPlay }: { onPlay: () => void }) {
+export function Prompts({
+  onPlay,
+  search,
+}: {
+  onPlay: () => void;
+  search: string;
+}) {
   const navigate = useNavigate();
   const prompts = useLiveQuery(() =>
     db.prompts.orderBy("createdAt").reverse().toArray()
   );
+  const filteredPrompts = useMemo(
+    () =>
+      (prompts ?? []).filter((prompt) => {
+        if (!search) return true;
+        return (
+          prompt.title.toLowerCase().includes(search) ||
+          prompt.content.toLowerCase().includes(search)
+        );
+      }),
+    [prompts, search]
+  );
   const apiKey = useLiveQuery(async () => {
     return (await db.settings.where({ id: "general" }).first())?.openAiApiKey;
   });
 
   return (
     <>
-      {prompts?.map((prompt) => (
+      {filteredPrompts.map((prompt) => (
         <Flex
           key={prompt.id}
           sx={(theme) => ({