mirror of
https://github.com/NanmiCoder/cc-haha
synced 2026-07-26 15:03:34 +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 { Sidebar } from './Sidebar'
|
||||||
import { ContentRouter } from './ContentRouter'
|
import { ContentRouter } from './ContentRouter'
|
||||||
import { ToastContainer } from '../shared/Toast'
|
import { ToastContainer } from '../shared/Toast'
|
||||||
@ -9,13 +9,10 @@ import { TabBar } from './TabBar'
|
|||||||
import { useTabStore } from '../../stores/tabStore'
|
import { useTabStore } from '../../stores/tabStore'
|
||||||
import { useChatStore } from '../../stores/chatStore'
|
import { useChatStore } from '../../stores/chatStore'
|
||||||
|
|
||||||
const isTauri = typeof window !== 'undefined' && ('__TAURI_INTERNALS__' in window || '__TAURI__' in window)
|
|
||||||
|
|
||||||
export function AppShell() {
|
export function AppShell() {
|
||||||
const fetchSettings = useSettingsStore((s) => s.fetchAll)
|
const fetchSettings = useSettingsStore((s) => s.fetchAll)
|
||||||
const [ready, setReady] = useState(false)
|
const [ready, setReady] = useState(false)
|
||||||
const [startupError, setStartupError] = useState<string | null>(null)
|
const [startupError, setStartupError] = useState<string | null>(null)
|
||||||
const startDraggingRef = useRef<(() => Promise<void>) | null>(null)
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let cancelled = false
|
let cancelled = false
|
||||||
@ -48,22 +45,6 @@ export function AppShell() {
|
|||||||
}
|
}
|
||||||
}, [fetchSettings])
|
}, [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()
|
useKeyboardShortcuts()
|
||||||
|
|
||||||
if (startupError) {
|
if (startupError) {
|
||||||
@ -90,17 +71,9 @@ export function AppShell() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-screen flex overflow-hidden relative">
|
<div className="h-screen flex overflow-hidden">
|
||||||
{/* 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]"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<Sidebar />
|
<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 />
|
<TabBar />
|
||||||
<ContentRouter />
|
<ContentRouter />
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@ -4,7 +4,6 @@ import { useChatStore } from '../../stores/chatStore'
|
|||||||
import { useTranslation } from '../../i18n'
|
import { useTranslation } from '../../i18n'
|
||||||
|
|
||||||
const TAB_WIDTH = 180
|
const TAB_WIDTH = 180
|
||||||
const isTauri = typeof window !== 'undefined' && ('__TAURI_INTERNALS__' in window || '__TAURI__' in window)
|
|
||||||
|
|
||||||
export function TabBar() {
|
export function TabBar() {
|
||||||
const tabs = useTabStore((s) => s.tabs)
|
const tabs = useTabStore((s) => s.tabs)
|
||||||
@ -97,13 +96,10 @@ export function TabBar() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (tabs.length === 0) {
|
if (tabs.length === 0) return null
|
||||||
// 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
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
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 && (
|
{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)]">
|
<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>
|
<span className="material-symbols-outlined text-[16px]">chevron_left</span>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user