jake/Lumotia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

agent: titlebar — restyle with brand tokens, add compact variant

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
jake
2026-03-21 10:44:49 +00:00
parent c5164c292f
commit f1a9fe8383
1 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/lib/components/Titlebar.svelte
View File

@@ -2,6 +2,8 @@
import { getCurrentWindow } from "@tauri-apps/api/window"; import { getCurrentWindow } from "@tauri-apps/api/window";
import { settings } from "$lib/stores/page.svelte.js"; import { settings } from "$lib/stores/page.svelte.js";
let { compact = false } = $props();
let maximised = $state(false); let maximised = $state(false);
async function handleMinimise() { async function handleMinimise() {
@@ -34,15 +36,19 @@
</script> </script>
<div <div
class="flex items-center h-[32px] select-none bg-sidebar border-b border-border-subtle" class="flex items-center select-none bg-sidebar border-b border-border-subtle
{compact ? 'h-[28px]' : 'h-[32px]'}"
onmousedown={handleDragStart} onmousedown={handleDragStart}
data-tauri-drag-region data-tauri-drag-region
> >
{#if !compact}
<!-- Left spacer: aligns with sidebar width --> <!-- Left spacer: aligns with sidebar width -->
<div <div
class="transition-all duration-200 {settings.sidebarCollapsed ? 'w-[48px] min-w-[48px]' : 'w-[210px] min-w-[210px]'}" class="transition-all {settings.sidebarCollapsed ? 'w-[48px] min-w-[48px]' : 'w-[210px] min-w-[210px]'}"
style="transition-duration: var(--duration-ui)"
data-tauri-drag-region data-tauri-drag-region
></div> ></div>
{/if}
<!-- Centre: drag area --> <!-- Centre: drag area -->
<div class="flex-1" data-tauri-drag-region></div> <div class="flex-1" data-tauri-drag-region></div>
@@ -50,23 +56,23 @@
<!-- Window controls --> <!-- Window controls -->
<div class="flex items-center h-full"> <div class="flex items-center h-full">
<button class="titlebar-btn hover:bg-hover" onclick={handleMinimise} aria-label="Minimise"> <button class="titlebar-btn hover:bg-hover" onclick={handleMinimise} aria-label="Minimise">
<svg class="w-3 h-3" viewBox="0 0 12 12"> <svg class="w-3 h-3" viewBox="0 0 12 12" aria-hidden="true">
<rect y="5" width="12" height="1.5" rx="0.5" fill="currentColor" /> <rect y="5" width="12" height="1.5" rx="0.5" fill="currentColor" />
</svg> </svg>
</button> </button>
<button class="titlebar-btn hover:bg-hover" onclick={handleMaximise} aria-label="Maximise"> <button class="titlebar-btn hover:bg-hover" onclick={handleMaximise} aria-label="Maximise">
{#if maximised} {#if maximised}
<svg class="w-3 h-3" viewBox="0 0 12 12"> <svg class="w-3 h-3" viewBox="0 0 12 12" aria-hidden="true">
<path d="M3 1h8v8h-2v2H1V3h2V1zm1 1v1h5v5h1V2H4zm-2 2v6h6V4H2z" fill="currentColor" /> <path d="M3 1h8v8h-2v2H1V3h2V1zm1 1v1h5v5h1V2H4zm-2 2v6h6V4H2z" fill="currentColor" />
</svg> </svg>
{:else} {:else}
<svg class="w-3 h-3" viewBox="0 0 12 12"> <svg class="w-3 h-3" viewBox="0 0 12 12" aria-hidden="true">
<rect x="1" y="1" width="10" height="10" rx="1" fill="none" stroke="currentColor" stroke-width="1.5" /> <rect x="1" y="1" width="10" height="10" rx="1" fill="none" stroke="currentColor" stroke-width="1.5" />
</svg> </svg>
{/if} {/if}
</button> </button>
<button class="titlebar-btn hover:bg-danger/20 hover:text-danger" onclick={handleClose} aria-label="Close"> <button class="titlebar-btn hover:bg-danger/20 hover:text-danger" onclick={handleClose} aria-label="Close">
<svg class="w-3 h-3" viewBox="0 0 12 12"> <svg class="w-3 h-3" viewBox="0 0 12 12" aria-hidden="true">
<path d="M1 1l10 10M11 1L1 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" /> <path d="M1 1l10 10M11 1L1 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg> </svg>
</button> </button>