mirror of
https://github.com/NanmiCoder/cc-haha
synced 2026-07-18 13:23:33 +08:00
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>
This commit is contained in:
parent
ed7b0b2629
commit
e249c7ab76
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user