diff --git a/src/App.svelte b/src/App.svelte index a68be1b..7505982 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -6,6 +6,7 @@ import { AlertCircle, BookOpen, Cherry, Download, FolderOpen, GitBranch, GitMerge, LoaderCircle, Plus, Search, Star, X } from "@lucide/svelte"; import TitleBar from "./lib/TitleBar.svelte"; + import RepoToolbar from "./lib/RepoToolbar.svelte"; import AiSettingsDialog from "./lib/components/AiSettingsDialog.svelte"; import AnalyticsNoticeDialog from "./lib/components/AnalyticsNoticeDialog.svelte"; import AppSettingsDialog from "./lib/components/AppSettingsDialog.svelte"; @@ -3529,20 +3530,6 @@ behind={status?.behind ?? 0} repoName={activeRepoPath ? (activeRepoPath.split(/[\\/]/).filter(Boolean).slice(-1)[0] ?? "") : ""} hasRepository={workspaceActive} - {isBusy} - {operation} - {autoRefreshEnabled} - {autoRefreshInFlight} - onFetch={fetchRepo} - onPull={pullRepo} - onPush={pushRepo} - onRefresh={refreshRepo} - onSearch={openGlobalSearchDialog} - onCompare={openCompareSelect} - onInteractiveRebase={openInteractiveRebase} - onReflog={openReflog} - onOpenInExplorer={openActiveRepoInExplorer} - onToggleAutoRefresh={toggleAutoRefresh} onOpenSettings={() => { appSettingsOpen = true; }} onOpenHelp={openHelp} language={appLanguage} @@ -3610,6 +3597,28 @@ + + {#if workspaceActive} + + {/if} + {#if repoTabContextMenu} {@const menu = repoTabContextMenu} {@const contextTab = repoTabs.find((tab) => sameRepoPath(tab.path, menu.path))} diff --git a/src/app.css b/src/app.css index a68ecd2..aee954a 100644 --- a/src/app.css +++ b/src/app.css @@ -541,6 +541,7 @@ .shell { --app-titlebar-height: 42px; + --app-toolbar-height: 34px; display: flex; flex-direction: column; height: 100%; @@ -562,7 +563,7 @@ position: relative; z-index: 500; display: grid; - grid-template-columns: auto 1fr auto; + grid-template-columns: auto 1fr auto auto; align-items: center; height: var(--app-titlebar-height); background: @@ -639,8 +640,30 @@ .tb-no-repo { color: var(--color-bar-muted); font-size: 12px; font-style: italic; } - .titlebar-right { display: flex; align-items: stretch; height: 100%; border-left: 1px solid rgba(255,255,255,0.06); } - .titlebar-actions { display: flex; align-items: stretch; } + /* App-global actions (help, settings) that must stay reachable in every view, + including Repository Management where the repo toolbar is hidden. */ + .titlebar-globals { + display: flex; + align-items: stretch; + height: 100%; + } + + /* Repo action toolbar: its own row under the repo tab bar (hidden in Repository + Management). Its own row means a narrow window can never push the window + controls out of the titlebar; overflow-x is the last-resort safety net. */ + .repo-toolbar { + display: flex; + align-items: stretch; + height: var(--app-toolbar-height); + border: 1px solid var(--color-border-subtle); + border-radius: 10px; + background: rgba(16, 17, 29, 0.9); + flex-shrink: 0; + overflow-x: auto; + scrollbar-width: none; + user-select: none; + } + .repo-toolbar::-webkit-scrollbar { display: none; } .tb-action { display: flex; @@ -655,6 +678,7 @@ color: var(--color-bar-muted); font-size: 12px; cursor: pointer; + flex-shrink: 0; transition: background 120ms ease, color 120ms ease; -webkit-app-region: no-drag; } @@ -664,9 +688,9 @@ .tb-action.auto-toggle.active:hover:not(:disabled) { color: #6ee090; background: rgba(78,202,118,0.1); } .tb-action-label { font-size: 12px; font-weight: 600; } - .titlebar-divider { width: 1px; margin: 8px 0; background: rgba(255,255,255,0.08); flex-shrink: 0; } + .titlebar-divider { width: 1px; margin: 8px 6px; background: rgba(255,255,255,0.08); flex-shrink: 0; } - .titlebar-controls { display: flex; align-items: stretch; height: 100%; } + .titlebar-controls { display: flex; align-items: stretch; height: 100%; border-left: 1px solid rgba(255,255,255,0.06); } .tb-btn { display: flex; @@ -4720,10 +4744,15 @@ } :root[data-theme="light"] .titlebar-brand, -:root[data-theme="light"] .titlebar-right { +:root[data-theme="light"] .titlebar-controls { border-color: rgba(34,49,78,0.1); } +:root[data-theme="light"] .repo-toolbar { + border-color: var(--color-border); + background: rgba(255,255,255,0.78); +} + :root[data-theme="light"] .titlebar-brand-icon img { filter: drop-shadow(0 1px 2px rgba(28,44,74,0.18)); } @@ -5198,8 +5227,7 @@ body { overflow: auto; } .shell-body { min-height: 100%; gap: 6px; } .titlebar-info { padding: 0 8px; } - .titlebar-actions .tb-action:not(.auto-toggle):not(:last-child) { display: none; } - .tb-action { width: 36px; padding: 0 8px; } + .tb-action { padding: 0 9px; } .tb-btn { width: 34px; } .workspace { grid-template-columns: 1fr; gap: 6px; } .left-sidebar-resize-handle { display: none; } diff --git a/src/lib/RepoToolbar.svelte b/src/lib/RepoToolbar.svelte new file mode 100644 index 0000000..0b68148 --- /dev/null +++ b/src/lib/RepoToolbar.svelte @@ -0,0 +1,156 @@ + + + diff --git a/src/lib/TitleBar.svelte b/src/lib/TitleBar.svelte index 2d32cf0..537bc0a 100644 --- a/src/lib/TitleBar.svelte +++ b/src/lib/TitleBar.svelte @@ -2,7 +2,7 @@ import { onDestroy, onMount } from "svelte"; import { getVersion } from "@tauri-apps/api/app"; import { getCurrentWindow } from "@tauri-apps/api/window"; - import { CircleHelp, CloudDownload, Download, FolderOpen, GitBranch, GitCompare, History, ListRestart, LoaderCircle, Minus, RefreshCw, Search, Settings, Upload, X } from "@lucide/svelte"; + import { CircleHelp, GitBranch, Minus, Settings, X } from "@lucide/svelte"; import iconUrl from "../../src-tauri/icons/icon.png"; export let branch: string = ""; @@ -10,20 +10,6 @@ export let behind: number = 0; export let repoName: string = ""; export let hasRepository: boolean = false; - export let isBusy: boolean = false; - export let operation: string = ""; - export let autoRefreshEnabled: boolean = true; - export let autoRefreshInFlight: boolean = false; - export let onFetch: () => void = () => {}; - export let onPull: () => void = () => {}; - export let onPush: () => void = () => {}; - export let onRefresh: () => void = () => {}; - export let onSearch: () => void = () => {}; - export let onCompare: () => void = () => {}; - export let onInteractiveRebase: () => void = () => {}; - export let onReflog: () => void = () => {}; - export let onOpenInExplorer: () => void = () => {}; - export let onToggleAutoRefresh: () => void = () => {}; export let onOpenHelp: () => void = () => {}; export let onOpenSettings: () => void = () => {}; export let language: "en" | "de" = "en"; @@ -106,187 +92,49 @@ {/if} - -
- - - - -
- - - -
+
+ + +