From e249c7ab761b51503ca39555603f34e8f6104373 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E9=98=BF=E6=B1=9F=28Relakkes?=
 =?UTF-8?q?=29?= <relakkes@gmail.com>
Date: Thu, 9 Apr 2026 09:21:45 +0800
Subject: [PATCH] fix: eliminate top gap by removing global drag overlay

The 38px absolute drag overlay was blocking tab clicks, requiring
padding that created a visible gap. Sidebar already handles its own
drag region, and TabBar uses data-tauri-drag-region directly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 desktop/src/components/layout/AppShell.tsx | 33 ++--------------------
 desktop/src/components/layout/TabBar.tsx   |  8 ++----
 2 files changed, 5 insertions(+), 36 deletions(-)

diff --git a/desktop/src/components/layout/AppShell.tsx b/desktop/src/components/layout/AppShell.tsx
index 6556da51..ab05542f 100644
--- a/desktop/src/components/layout/AppShell.tsx
+++ b/desktop/src/components/layout/AppShell.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback, useRef } from 'react'
+import { useEffect, useState } from 'react'
 import { Sidebar } from './Sidebar'
 import { ContentRouter } from './ContentRouter'
 import { ToastContainer } from '../shared/Toast'
@@ -9,13 +9,10 @@ import { TabBar } from './TabBar'
 import { useTabStore } from '../../stores/tabStore'
 import { useChatStore } from '../../stores/chatStore'
 
-const isTauri = typeof window !== 'undefined' && ('__TAURI_INTERNALS__' in window || '__TAURI__' in window)
-
 export function AppShell() {
   const fetchSettings = useSettingsStore((s) => s.fetchAll)
   const [ready, setReady] = useState(false)
   const [startupError, setStartupError] = useState<string | null>(null)
-  const startDraggingRef = useRef<(() => Promise<void>) | null>(null)
 
   useEffect(() => {
     let cancelled = false
@@ -48,22 +45,6 @@ export function AppShell() {
     }
   }, [fetchSettings])
 
-  // Pre-cache Tauri window drag function
-  useEffect(() => {
-    if (!isTauri) return
-    import(/* @vite-ignore */ '@tauri-apps/api/window')
-      .then(({ getCurrentWindow }) => {
-        const win = getCurrentWindow()
-        startDraggingRef.current = () => win.startDragging()
-      })
-      .catch(() => {})
-  }, [])
-
-  const handleDragMouseDown = useCallback((e: React.MouseEvent) => {
-    if ((e.target as HTMLElement).closest('button, input, textarea, select, a, [role="button"]')) return
-    startDraggingRef.current?.()
-  }, [])
-
   useKeyboardShortcuts()
 
   if (startupError) {
@@ -90,17 +71,9 @@ export function AppShell() {
   }
 
   return (
-    <div className="h-screen flex overflow-hidden relative">
-      {/* Drag region for macOS Overlay title bar — full width strip at the top */}
-      {isTauri && (
-        <div
-          data-tauri-drag-region
-          onMouseDown={handleDragMouseDown}
-          className="absolute top-0 left-0 right-0 h-[38px] z-[9999]"
-        />
-      )}
+    <div className="h-screen flex overflow-hidden">
       <Sidebar />
-      <main id="content-area" className="flex-1 flex flex-col overflow-hidden relative">
+      <main id="content-area" className="flex-1 flex flex-col overflow-hidden">
         <TabBar />
         <ContentRouter />
       </main>
diff --git a/desktop/src/components/layout/TabBar.tsx b/desktop/src/components/layout/TabBar.tsx
index 66363b6b..788677e5 100644
--- a/desktop/src/components/layout/TabBar.tsx
+++ b/desktop/src/components/layout/TabBar.tsx
@@ -4,7 +4,6 @@ import { useChatStore } from '../../stores/chatStore'
 import { useTranslation } from '../../i18n'
 
 const TAB_WIDTH = 180
-const isTauri = typeof window !== 'undefined' && ('__TAURI_INTERNALS__' in window || '__TAURI__' in window)
 
 export function TabBar() {
   const tabs = useTabStore((s) => s.tabs)
@@ -97,13 +96,10 @@ export function TabBar() {
     }
   }
 
-  if (tabs.length === 0) {
-    // Still need drag region space in Tauri even with no tabs
-    return isTauri ? <div className="h-[38px] flex-shrink-0" data-tauri-drag-region /> : null
-  }
+  if (tabs.length === 0) return null
 
   return (
-    <div className={`flex items-center border-b border-[var(--color-border)] bg-[var(--color-surface)] min-h-[36px] select-none ${isTauri ? 'pt-[38px]' : ''}`} data-tauri-drag-region>
+    <div className="flex items-center border-b border-[var(--color-border)] bg-[var(--color-surface)] min-h-[36px] select-none" data-tauri-drag-region>
       {canScrollLeft && (
         <button onClick={() => scroll('left')} className="flex-shrink-0 w-7 h-full flex items-center justify-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]">
           <span className="material-symbols-outlined text-[16px]">chevron_left</span>