refactor: useSidebarConversationNavigation across navigation components

Author: chenyme

frontend/features/layouts/components/navigation/nav-projects.tsx

@@ -86,7 +86,7 @@ import { DeleteFilesOption } from "@/shared/components/delete-files-option"
 import { useDialogSnapshot } from "@/shared/hooks/use-dialog-snapshot"
 import { useSettingsChatPreferences } from "@/features/settings/hooks/use-settings-chat-preferences"
 import { useLayoutActiveConversation } from "@/features/layouts/hooks/use-layout-active-conversation"
-import { useMobileSidebarNavigation } from "@/features/layouts/hooks/use-mobile-sidebar-navigation"
+import { useSidebarConversationNavigation } from "@/features/layouts/hooks/use-sidebar-conversation-navigation"
 import { SidebarConversationItem } from "@/features/layouts/components/navigation/sidebar-conversation-item"
 import type {
   SidebarConversationDeleteTarget,
@@ -593,7 +593,7 @@ export function NavProjects() {
   const resolveErrorMessage = useLocalizedErrorMessage()
   const { isMobile, setOpenMobile } = useSidebar()
   const router = useRouter()
-  const onNavigate = useMobileSidebarNavigation()
+  const onNavigate = useSidebarConversationNavigation()
   const pathname = usePathname()
   const searchParams = useSearchParams()
   const activeRecentProjectID = searchParams.get("project") ?? ""

frontend/features/layouts/components/navigation/nav-recents.tsx

@@ -39,7 +39,7 @@ import { useDialogSnapshot } from "@/shared/hooks/use-dialog-snapshot"
 import { useSettingsChatPreferences } from "@/features/settings/hooks/use-settings-chat-preferences"
 import { useLayoutActiveConversation } from "@/features/layouts/hooks/use-layout-active-conversation"
 import { useLayoutSidebarListFlip } from "@/features/layouts/hooks/use-layout-sidebar-list-flip"
-import { useMobileSidebarNavigation } from "@/features/layouts/hooks/use-mobile-sidebar-navigation"
+import { useSidebarConversationNavigation } from "@/features/layouts/hooks/use-sidebar-conversation-navigation"
 import type {
   SidebarConversationDeleteTarget,
   SidebarConversationRenameTarget,
@@ -55,7 +55,7 @@ const RECENTS_OPEN_STORAGE_KEY = "deeix.sidebar.recents.open"
 
 export function NavRecents() {
   const t = useTranslations("recent")
-  const onNavigate = useMobileSidebarNavigation()
+  const onNavigate = useSidebarConversationNavigation()
   const router = useRouter()
   const activeConversationID = useLayoutActiveConversation()
   const { deleteFilesByDefault } = useSettingsChatPreferences()

frontend/features/layouts/components/navigation/nav-starred.tsx

@@ -42,7 +42,7 @@ import { useDialogSnapshot } from "@/shared/hooks/use-dialog-snapshot"
 import { useSettingsChatPreferences } from "@/features/settings/hooks/use-settings-chat-preferences"
 import { useLayoutActiveConversation } from "@/features/layouts/hooks/use-layout-active-conversation"
 import { useLayoutSidebarListFlip } from "@/features/layouts/hooks/use-layout-sidebar-list-flip"
-import { useMobileSidebarNavigation } from "@/features/layouts/hooks/use-mobile-sidebar-navigation"
+import { useSidebarConversationNavigation } from "@/features/layouts/hooks/use-sidebar-conversation-navigation"
 import { SIDEBAR_OVERFLOW_ROW_TRANSITION } from "@/features/layouts/model/sidebar-motion"
 import type {
   SidebarConversationDeleteTarget,
@@ -72,7 +72,7 @@ export function NavStarred() {
   const t = useTranslations("recent")
   const { isMobile, setOpenMobile } = useSidebar()
   const router = useRouter()
-  const onNavigate = useMobileSidebarNavigation()
+  const onNavigate = useSidebarConversationNavigation()
   const activeConversationID = useLayoutActiveConversation()
   const { deleteFilesByDefault } = useSettingsChatPreferences()
 

frontend/features/layouts/hooks/use-mobile-sidebar-navigation.ts

@@ -0,0 +1,34 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+
+import { useSidebar } from "@/components/ui/sidebar"
+
+function shouldUseNativeNavigation(event: React.MouseEvent<HTMLAnchorElement>) {
+  const target = event.currentTarget.getAttribute("target")
+  return event.defaultPrevented ||
+    event.button !== 0 ||
+    event.metaKey ||
+    event.ctrlKey ||
+    event.shiftKey ||
+    event.altKey ||
+    Boolean(target && target !== "_self")
+}
+
+export function useSidebarConversationNavigation() {
+  const router = useRouter()
+  const { isMobile, setOpenMobile } = useSidebar()
+
+  return React.useCallback((href: string, event: React.MouseEvent<HTMLAnchorElement>) => {
+    if (shouldUseNativeNavigation(event)) {
+      return
+    }
+
+    event.preventDefault()
+    router.push(href)
+    if (isMobile) {
+      setOpenMobile(false)
+    }
+  }, [isMobile, router, setOpenMobile])
+}