Add swipe-to-close and repo display to MoreDrawer

Author: chriswritescode-dev

frontend/src/components/navigation/MoreDrawer.tsx

@@ -1,5 +1,5 @@
 import { useNavigate, useLocation, useParams } from 'react-router-dom'
-import { useState } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import { ChevronDown, ChevronRight, Command as CommandIcon, FileText, X, GitBranch } from 'lucide-react'
 import { useAuth } from '@/hooks/useAuth'
 import { useServerHealth } from '@/hooks/useServerHealth'
@@ -12,6 +12,8 @@ import { OPENCODE_API_ENDPOINT } from '@/config'
 import { SideDrawer, SideDrawerContent } from '@/components/ui/side-drawer'
 import { FileBrowserSheet } from '@/components/file-browser/FileBrowserSheet'
 import { buildMoreItems } from './moreDrawerItems'
+import { useSwipeBack } from '@/hooks/useMobile'
+import { getRepoDisplayName } from '@/lib/utils'
 import type { components } from '@/api/opencode-types'
 
 type CommandType = components['schemas']['Command']
@@ -28,6 +30,8 @@ export function MoreDrawer({ isOpen, onClose }: MoreDrawerProps) {
   const repoId = id ? Number(id) : null
   const [commandsOpen, setCommandsOpen] = useState(false)
   const [mentionFileBrowserOpen, setMentionFileBrowserOpen] = useState(false)
+  const swipeRef = useRef<HTMLDivElement>(null)
+  const { bind } = useSwipeBack(onClose, { enabled: true, suspendsRouteSwipe: false })
   const { logout } = useAuth()
   const { data: health } = useServerHealth()
   const { memoryPluginEnabled } = useMemoryPluginStatus()
@@ -37,6 +41,13 @@ export function MoreDrawer({ isOpen, onClose }: MoreDrawerProps) {
   const selectPromptCommand = useUIState((state) => state.selectPromptCommand)
   const selectPromptFile = useUIState((state) => state.selectPromptFile)
 
+  useEffect(() => {
+    if (isOpen && swipeRef.current) {
+      const cleanup = bind(swipeRef.current)
+      return cleanup
+    }
+  }, [isOpen, bind])
+
   const { data: repo } = useQuery({
     queryKey: ['repo', repoId],
     queryFn: () => repoId ? getRepo(repoId) : null,
@@ -107,7 +118,7 @@ export function MoreDrawer({ isOpen, onClose }: MoreDrawerProps) {
 
   return (
     <SideDrawer isOpen={isOpen} onClose={onClose} side="right" ariaLabel="More" widthClass="w-screen sm:w-[min(90vw,420px)]">
-      <div className="flex flex-col flex-shrink-0 border-b border-border bg-background px-4 py-1.5">
+      <div ref={swipeRef} className="flex flex-col flex-shrink-0 border-b border-border bg-background px-4 py-1.5">
         <div className="flex items-center justify-between gap-3 mb-2">
           {versionLabel && (
             <span className="truncate text-xs leading-tight text-muted-foreground">{versionLabel}</span>
@@ -121,10 +132,20 @@ export function MoreDrawer({ isOpen, onClose }: MoreDrawerProps) {
             <X className="h-5 w-5" />
           </button>
         </div>
-        {currentBranch && (
+        {(repo || currentBranch) && (
           <div className="flex items-center gap-2 text-xs text-muted-foreground">
-            <GitBranch className="h-3.5 w-3.5" />
-            <span>{currentBranch}</span>
+            {repo && (
+              <span className="font-medium text-foreground">{getRepoDisplayName(repo.repoUrl, repo.localPath, repo.sourcePath)}</span>
+            )}
+            {repo && currentBranch && (
+              <span className="text-muted-foreground">·</span>
+            )}
+            {currentBranch && (
+              <>
+                <GitBranch className="h-3.5 w-3.5" />
+                <span>{currentBranch}</span>
+              </>
+            )}
           </div>
         )}
       </div>