Add custom title bar

It's about 4px narrower than the original one, so we gained some space and got more control over that content area.

Author: vdavid

apps/desktop/src-tauri/capabilities/default.json

@@ -7,6 +7,7 @@
     ],
     "permissions": [
         "core:default",
+        "core:window:allow-start-dragging",
         "opener:default",
         {
             "identifier": "opener:allow-open-path",

apps/desktop/src-tauri/tauri.conf.json

@@ -18,7 +18,10 @@
         "height": 720,
         "minWidth": 950,
         "minHeight": 550,
-        "visible": false
+        "visible": false,
+        "titleBarStyle": "Overlay",
+        "trafficLightPosition": { "x": 9, "y": 17 },
+        "hiddenTitle": true
       }
     ],
     "security": {

apps/desktop/src/app.css

@@ -325,9 +325,9 @@ body {
     font-size: var(--font-size-base);
 }
 
-#app {
-    width: 100%;
-    height: 100%;
+body {
+    display: flex;
+    flex-direction: column;
 }
 
 /* Disable scroll bounce on all scrollable elements */

apps/desktop/src/lib/file-explorer/VolumeBreadcrumb.svelte

@@ -336,7 +336,7 @@
         cursor: default;
         font-weight: 500;
         color: var(--color-text-primary);
-        padding: 1px 4px;
+        padding: 2px 4px;
         border-radius: 4px;
         display: inline-flex;
         align-items: center;

apps/desktop/src/routes/+layout.svelte

@@ -16,4 +16,15 @@
 </script>
 
 <UpdateNotification />
-<slot />
+<div class="page-wrapper">
+    <slot />
+</div>
+
+<style>
+    .page-wrapper {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+    }
+</style>

apps/desktop/src/routes/+page.svelte

@@ -17,6 +17,7 @@
         getInfo,
         toggleHiddenFiles,
         setViewMode,
+        getWindowTitle,
     } from '$lib/tauri-commands'
     import { loadSettings, saveSettings } from '$lib/settings-store'
     import { hideExpirationModal, loadLicenseStatus, triggerValidationIfNeeded } from '$lib/licensing-store.svelte'
@@ -48,6 +49,7 @@
     let showAboutWindow = $state(false)
     let showCommandPalette = $state(false)
     let explorerRef: ExplorerAPI | undefined = $state()
+    let windowTitle = $state('Cmdr')
 
     // Event handlers stored for cleanup
     let handleKeyDown: ((e: KeyboardEvent) => void) | undefined
@@ -56,6 +58,19 @@
     let unlistenCommandPalette: UnlistenFn | undefined
     let unlistenSwitchPane: UnlistenFn | undefined
 
+    /** Start window drag when title bar is clicked */
+    async function handleTitleBarMouseDown(e: MouseEvent) {
+        if (e.buttons === 1) {
+            // Left mouse button
+            try {
+                const { getCurrentWindow } = await import('@tauri-apps/api/window')
+                await getCurrentWindow().startDragging()
+            } catch {
+                // Not in Tauri environment
+            }
+        }
+    }
+
     onMount(async () => {
         // Hide loading screen
         const loadingScreen = document.getElementById('loading-screen')
@@ -79,6 +94,9 @@
                 expiredOrgName = licenseStatus.organizationName
                 expiredAt = licenseStatus.expiredAt
             }
+
+            // Load window title based on license status
+            windowTitle = await getWindowTitle()
         } catch {
             // License check failed (expected in E2E tests without Tauri backend)
             // App continues without license features
@@ -476,20 +494,62 @@
     }
 </script>
 
-{#if showAboutWindow}
-    <AboutWindow onClose={handleAboutClose} />
-{/if}
+<div class="page-container">
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="title-bar" onmousedown={handleTitleBarMouseDown}>
+        <span class="title-text">{windowTitle}</span>
+    </div>
+
+    <div class="main-content">
+        {#if showAboutWindow}
+            <AboutWindow onClose={handleAboutClose} />
+        {/if}
+
+        {#if showCommandPalette}
+            <CommandPalette onExecute={handleCommandExecute} onClose={handleCommandPaletteClose} />
+        {/if}
+
+        {#if showExpiredModal}
+            <ExpirationModal organizationName={expiredOrgName} {expiredAt} onClose={handleExpirationModalClose} />
+        {/if}
+
+        {#if showFdaPrompt}
+            <FullDiskAccessPrompt onComplete={handleFdaComplete} wasRevoked={fdaWasRevoked} />
+        {:else if showApp}
+            <DualPaneExplorer bind:this={explorerRef} />
+        {/if}
+    </div>
+</div>
+
+<style>
+    .page-container {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+    }
 
-{#if showCommandPalette}
-    <CommandPalette onExecute={handleCommandExecute} onClose={handleCommandPaletteClose} />
-{/if}
+    .title-bar {
+        height: 27px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-top: 2px;
+        background-color: var(--color-bg-secondary);
+        flex-shrink: 0;
+    }
 
-{#if showExpiredModal}
-    <ExpirationModal organizationName={expiredOrgName} {expiredAt} onClose={handleExpirationModalClose} />
-{/if}
+    .title-text {
+        font-size: var(--font-size-xs);
+        color: var(--color-text-secondary);
+        font-weight: 500;
+    }
 
-{#if showFdaPrompt}
-    <FullDiskAccessPrompt onComplete={handleFdaComplete} wasRevoked={fdaWasRevoked} />
-{:else if showApp}
-    <DualPaneExplorer bind:this={explorerRef} />
-{/if}
+    .main-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        min-height: 0;
+    }
+</style>