chore: clean up thread buttons

jedwards1230 · Apr 23, 2024 · 2706a03 · 2706a03
1 parent d758ad8
commit 2706a03
Show file tree

Hide file tree

Showing 14 changed files with 327 additions and 386 deletions.
diff --git a/client/bun.lockb b/client/bun.lockb
diff --git a/client/src/components/ThreadDrawer/AgentsButton.tsx b/client/src/components/ThreadDrawer/AgentsButton.tsx
@@ -8,13 +8,8 @@ export function AgentsButton() {
     const path = usePathname();
     return (
         <LinkButton active={path === "/agents"} href={{ pathname: "/(app)/agents" }}>
-            <Icon
-                type="Ionicons"
-                name="grid-outline"
-                size={20}
-                className="text-secondary-foreground"
-            />
-            <Text className="font-medium" numberOfLines={1} ellipsizeMode="tail">
+            <Icon type="Ionicons" name="grid-outline" />
+            <Text className="font-medium" ellipsizeMode="tail">
                 Agents
             </Text>
         </LinkButton>

diff --git a/client/src/components/ThreadDrawer/LinkButton.tsx b/client/src/components/ThreadDrawer/LinkButton.tsx
@@ -1,8 +1,9 @@
-import { Link, type Href } from "expo-router";
+import { Link, useRouter, type Href } from "expo-router";
 import { Pressable } from "react-native";
 
 import { cn } from "@/lib/utils";
 import { TextClassContext } from "../ui/Text";
+import { useHoverHelper } from "@/hooks/useHoverHelper";
 
 type PathNameProps = { pathname: string };
 
@@ -19,21 +20,31 @@ export default function LinkButton<T extends PathNameProps>({
     className,
     active,
 }: LinkButtonProps<T>) {
+    const router = useRouter();
+    const { isHover, ...helpers } = useHoverHelper();
     return (
-        <TextClassContext.Provider
-            value={
-                "web:whitespace-nowrap text-sm native:text-base group-aria-selected:text-background text-foreground transition-colors text-secondary-foreground"
-            }
-        >
-            <Link asChild href={href} className={cn("w-full", className)}>
-                <Pressable
-                    role="tab"
-                    aria-selected={active}
-                    className="flex flex-row items-center justify-between w-full h-10 gap-2 p-2 transition-colors rounded-md group web:ring-offset-background aria-selected:bg-primary web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 bg-secondary hover:bg-secondary-foreground/10 dark:hover:bg-secondary-foreground/50 active:opacity-90 web:justify-start"
+        <Link href={href} asChild>
+            <Pressable
+                {...helpers}
+                onPress={() => router.push(href)}
+                role="tab"
+                aria-selected={active}
+                className={cn(
+                    "flex flex-row items-center justify-between w-full gap-2 p-2 transition-colors rounded group web:ring-offset-background aria-selected:bg-primary web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 active:opacity-90 web:justify-start",
+                    isHover
+                        ? "bg-secondary-foreground/10 dark:bg-secondary-foreground/50"
+                        : "bg-secondary",
+                    className
+                )}
+            >
+                <TextClassContext.Provider
+                    value={
+                        "web:whitespace-nowrap text-sm native:text-base group-aria-selected:text-background text-foreground transition-colors text-secondary-foreground"
+                    }
                 >
                     {children}
-                </Pressable>
-            </Link>
-        </TextClassContext.Provider>
+                </TextClassContext.Provider>
+            </Pressable>
+        </Link>
     );
 }
diff --git a/client/src/components/ThreadDrawer/SettingsButton.tsx b/client/src/components/ThreadDrawer/SettingsButton.tsx
@@ -8,12 +8,7 @@ export function SettingsButton() {
     const path = usePathname();
     return (
         <LinkButton active={path === "/settings"} href={{ pathname: "/(app)/settings" }}>
-            <Icon
-                type="MaterialIcons"
-                name="settings"
-                size={20}
-                className="text-secondary-foreground"
-            />
+            <Icon type="MaterialIcons" name="settings" />
             <Text className="font-medium">Settings</Text>
         </LinkButton>
     );

diff --git a/client/src/components/ThreadDrawer/ThreadButton/ThreadButton.tsx b/client/src/components/ThreadDrawer/ThreadButton/ThreadButton.tsx
@@ -1,13 +1,17 @@
-import { ContextMenuView, type MenuConfig } from "react-native-ios-context-menu";
-import { Pressable, View } from "react-native";
+import {
+    ContextMenuView,
+    OnPressMenuItemEvent,
+    type MenuConfig,
+} from "react-native-ios-context-menu";
+import { View } from "react-native";
 import { useRouter } from "expo-router";
 
 import type { Thread } from "@/types";
 import { Text } from "@/components/ui/Text";
 import ChatHistory from "@/components/ChatHistory";
-import { useHoverHelper } from "@/hooks/useHoverHelper";
-import { cn } from "@/lib/utils";
 import { useDeleteActiveThread } from "@/hooks/actions";
+import LinkButton from "../LinkButton";
+import { useConfigStore } from "@/hooks/stores/configStore";
 
 const menuConfig: MenuConfig = {
     menuTitle: "",
@@ -20,46 +24,34 @@ const menuConfig: MenuConfig = {
 };
 
 export function ThreadButton({ thread }: { thread: Thread }) {
-    const { isHover, ...helpers } = useHoverHelper();
+    const threadId = useConfigStore.use.threadId();
     const deleteThread = useDeleteActiveThread();
     const router = useRouter();
 
-    const goToThread = () =>
-        router.push({ pathname: `/(app)/`, params: { c: thread.id } });
+    const href = { pathname: `/(app)/`, params: { c: thread.id } } as const;
 
-    const onMenuAction = (actionKey: string) => {
-        switch (actionKey) {
+    const onPressMenuItem: OnPressMenuItemEvent = ({ nativeEvent }) => {
+        switch (nativeEvent.actionKey) {
             case "delete":
                 deleteThread.action(thread.id);
                 break;
         }
     };
 
     return (
-        <Pressable
-            {...helpers}
-            className={cn(
-                "flex flex-row items-center justify-start w-full h-10 gap-2 p-2 rounded-md active:bg-primary group active:opacity-90",
-                !isHover
-                    ? "bg-secondary"
-                    : "bg-secondary-foreground/10 dark:bg-secondary-foreground/50"
-            )}
-            onPress={goToThread}
-            onLongPress={() => null}
-            delayLongPress={125}
-        >
+        <LinkButton active={thread.id === threadId} href={href}>
             <ContextMenuView
                 menuConfig={menuConfig}
-                onPressMenuItem={({ nativeEvent }) => onMenuAction(nativeEvent.actionKey)}
-                onPressMenuPreview={goToThread}
+                onPressMenuItem={onPressMenuItem}
+                onPressMenuPreview={() => router.push(href)}
                 previewConfig={{ previewType: "CUSTOM" }}
                 renderPreview={() => <ThreadPreview thread={thread} />}
             >
                 <Text className="text-foreground" numberOfLines={1} ellipsizeMode="tail">
                     {thread.title || "New chat"}
                 </Text>
             </ContextMenuView>
-        </Pressable>
+        </LinkButton>
     );
 }
 

diff --git a/client/src/components/ThreadDrawer/ThreadButton/ThreadButton.web.tsx b/client/src/components/ThreadDrawer/ThreadButton/ThreadButton.web.tsx
@@ -11,10 +11,10 @@ import { useConfigStore } from "@/hooks/stores/configStore";
 export function ThreadButton({ thread }: { thread: Thread }) {
     const threadId = useConfigStore.use.threadId();
     return (
-        <View className="relative flex flex-row items-center w-full group">
+        <View className="relative flex flex-row items-center w-full group/thread">
             <LinkButton
                 active={thread.id === threadId}
-                className="pr-8"
+                className="w-full pr-4 group-hover/thread:pr-8"
                 href={{ pathname: `/(app)/`, params: { c: thread.id } }}
             >
                 <Text numberOfLines={1} ellipsizeMode="tail">

diff --git a/client/src/components/ThreadDrawer/ThreadButton/ThreadButtonPopover.tsx b/client/src/components/ThreadDrawer/ThreadButton/ThreadButtonPopover.tsx
@@ -34,7 +34,7 @@ export function ThreadButtonPopover({ thread }: { thread: Thread }) {
     ];
 
     return (
-        <Popover className="hidden group-hover:flex">
+        <Popover className="hidden group-hover/thread:flex">
             <PopoverTrigger className="absolute top-0 bottom-0 self-center right-1 group">
                 <Icon
                     type="AntDesign"

diff --git a/client/src/components/ThreadDrawer/ThreadGroups.tsx b/client/src/components/ThreadDrawer/ThreadGroups.tsx
@@ -12,7 +12,10 @@ type ThreadGroup = {
 
 export const ThreadGroup = ({ group: { label, threads } }: { group: ThreadGroup }) => (
     <View>
-        <Label className="pl-1 mb-1 text-foreground/75" id={"group-label-" + label}>
+        <Label
+            className="pl-1 mb-1 text-sm text-foreground/75"
+            id={"group-label-" + label}
+        >
             {label}
         </Label>
         {threads.map((thread) => (