Christoph Brandau
735acd2551
This commit introduces a comprehensive overhaul of the application's UI, focusing on modernizing the global workspace status bar and improving overall theming consistency. Several components were refactored to simplify prop handling and improve separation of concerns, particularly within the TitleBar and RepoToolbar. The CSS includes extensive new variables and styles for better visual fidelity across light and dark themes. - Overhauled the main application footer to display version, branch status, and sync metrics. - Added global CSS variables and component styling for a modern look. - Simplified repository state management by removing redundant props from TitleBar.
101 lines
3.1 KiB
Svelte
101 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import { onDestroy, onMount } from "svelte";
|
|
import { getCurrentWindow } from "@tauri-apps/api/window";
|
|
import { CircleHelp, Minus, Settings, X } from "@lucide/svelte";
|
|
import iconUrl from "../../src-tauri/icons/icon.png";
|
|
|
|
export let onOpenHelp: () => void = () => {};
|
|
export let onOpenSettings: () => void = () => {};
|
|
export let language: "en" | "de" = "en";
|
|
|
|
let win: ReturnType<typeof getCurrentWindow> | null = null;
|
|
let isMaximized = false;
|
|
let unlisten: (() => void) | undefined;
|
|
|
|
onMount(async () => {
|
|
try {
|
|
win = getCurrentWindow();
|
|
isMaximized = await win.isMaximized();
|
|
unlisten = await win.onResized(async () => {
|
|
isMaximized = await win?.isMaximized() ?? false;
|
|
});
|
|
} catch {
|
|
win = null;
|
|
}
|
|
});
|
|
|
|
onDestroy(() => {
|
|
unlisten?.();
|
|
});
|
|
|
|
function minimizeWindow() {
|
|
void win?.minimize();
|
|
}
|
|
|
|
function toggleMaximizeWindow() {
|
|
void win?.toggleMaximize();
|
|
}
|
|
|
|
function closeWindow() {
|
|
void win?.close();
|
|
}
|
|
</script>
|
|
|
|
<header class="titlebar" data-tauri-drag-region>
|
|
<!-- Brand -->
|
|
<div class="titlebar-brand" data-tauri-drag-region>
|
|
<span class="titlebar-brand-icon" data-tauri-drag-region>
|
|
<img src={iconUrl} alt="" data-tauri-drag-region />
|
|
</span>
|
|
<span data-tauri-drag-region>Gitty</span>
|
|
</div>
|
|
|
|
<div class="titlebar-drag" data-tauri-drag-region aria-hidden="true"></div>
|
|
|
|
<!-- Right: app-global actions + window controls -->
|
|
<div class="titlebar-globals">
|
|
<button
|
|
class="tb-action"
|
|
onclick={onOpenHelp}
|
|
title={language === "de" ? "Hilfe (Ctrl+/)" : "Help (Ctrl+/)"}
|
|
aria-label={language === "de" ? "Hilfe öffnen" : "Open help"}
|
|
>
|
|
<CircleHelp size={14} aria-hidden="true" />
|
|
</button>
|
|
<button
|
|
class="tb-action"
|
|
onclick={onOpenSettings}
|
|
title={language === "de" ? "Einstellungen" : "Settings"}
|
|
aria-label={language === "de" ? "Einstellungen" : "Settings"}
|
|
>
|
|
<Settings size={14} aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="titlebar-controls">
|
|
<button class="tb-btn" onclick={minimizeWindow} title="Minimize" aria-label="Minimize">
|
|
<Minus size={12} aria-hidden="true" />
|
|
</button>
|
|
<button
|
|
class="tb-btn"
|
|
onclick={toggleMaximizeWindow}
|
|
title={isMaximized ? "Restore" : "Maximize"}
|
|
aria-label={isMaximized ? "Restore" : "Maximize"}
|
|
>
|
|
{#if isMaximized}
|
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
|
<rect x="3" y="1" width="8" height="8" rx="1" stroke="currentColor" stroke-width="1.5" />
|
|
<path d="M1 3v7a1 1 0 0 0 1 1h7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
</svg>
|
|
{:else}
|
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
|
<rect x="1" y="1" width="10" height="10" rx="1" stroke="currentColor" stroke-width="1.5" />
|
|
</svg>
|
|
{/if}
|
|
</button>
|
|
<button class="tb-btn close" onclick={closeWindow} title="Close" aria-label="Close">
|
|
<X size={12} aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
</header>
|