From 9f79309ada657a7423aae785a47f30b3b7bcae4d Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 17 Feb 2026 21:25:08 +0200
Subject: [PATCH] feat: amber wordmark and NavRail active indicator

---
 src/components/NavRail.vue  |  74 ++++++++++++++++++++++
 src/components/TitleBar.vue | 119 ++++++++++++++++++++++++++++++++++++
 2 files changed, 193 insertions(+)
 create mode 100644 src/components/NavRail.vue
 create mode 100644 src/components/TitleBar.vue

diff --git a/src/components/NavRail.vue b/src/components/NavRail.vue
new file mode 100644
index 0000000..5f588b3
--- /dev/null
+++ b/src/components/NavRail.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useTimerStore } from '../stores/timer'
+import {
+  LayoutDashboard,
+  Clock,
+  FolderKanban,
+  List,
+  BarChart3,
+  FileText,
+  Settings
+} from 'lucide-vue-next'
+
+const route = useRoute()
+const router = useRouter()
+const timerStore = useTimerStore()
+
+const navItems = [
+  { name: 'Dashboard', path: '/', icon: LayoutDashboard },
+  { name: 'Timer', path: '/timer', icon: Clock },
+  { name: 'Projects', path: '/projects', icon: FolderKanban },
+  { name: 'Entries', path: '/entries', icon: List },
+  { name: 'Reports', path: '/reports', icon: BarChart3 },
+  { name: 'Invoices', path: '/invoices', icon: FileText },
+  { name: 'Settings', path: '/settings', icon: Settings }
+]
+
+const currentPath = computed(() => route.path)
+
+function navigate(path: string) {
+  router.push(path)
+}
+</script>
+
+<template>
+  <nav class="w-12 flex flex-col items-center bg-bg-surface border-r border-border-subtle shrink-0">
+    <!-- Navigation icons -->
+    <div class="flex-1 flex flex-col items-center pt-2 gap-1">
+      <button
+        v-for="item in navItems"
+        :key="item.path"
+        @click="navigate(item.path)"
+        class="relative w-12 h-12 flex items-center justify-center transition-colors duration-150 group"
+        :class="currentPath === item.path
+          ? 'text-text-primary'
+          : 'text-text-tertiary hover:text-text-secondary'"
+        :title="item.name"
+      >
+        <!-- Active indicator (left border) -->
+        <div
+          v-if="currentPath === item.path"
+          class="absolute left-0 top-2 bottom-2 w-[2px] bg-accent"
+        />
+
+        <component :is="item.icon" class="w-[18px] h-[18px]" :stroke-width="1.5" />
+
+        <!-- Tooltip -->
+        <div class="absolute left-full ml-2 px-2 py-1 bg-bg-elevated border border-border-subtle rounded text-[0.6875rem] text-text-primary whitespace-nowrap opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity duration-150 z-50">
+          <div class="absolute -left-1 top-1/2 -translate-y-1/2 w-0 h-0 border-y-4 border-y-transparent border-r-4" style="border-right-color: var(--color-bg-elevated)"></div>
+          {{ item.name }}
+        </div>
+      </button>
+    </div>
+
+    <!-- Timer running indicator (bottom) -->
+    <div class="pb-4">
+      <div
+        v-if="timerStore.isRunning"
+        class="w-2 h-2 rounded-full bg-status-running animate-pulse-dot"
+      />
+    </div>
+  </nav>
+</template>
diff --git a/src/components/TitleBar.vue b/src/components/TitleBar.vue
new file mode 100644
index 0000000..2589b9c
--- /dev/null
+++ b/src/components/TitleBar.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { getCurrentWindow } from '@tauri-apps/api/window'
+import { ref, onMounted } from 'vue'
+import { useTimerStore } from '../stores/timer'
+import { useProjectsStore } from '../stores/projects'
+
+const appWindow = getCurrentWindow()
+const isMaximized = ref(false)
+const timerStore = useTimerStore()
+const projectsStore = useProjectsStore()
+
+onMounted(async () => {
+  isMaximized.value = await appWindow.isMaximized()
+})
+
+function getProjectName(projectId: number | null): string {
+  if (!projectId) return ''
+  const project = projectsStore.projects.find(p => p.id === projectId)
+  return project?.name || ''
+}
+
+async function minimize() {
+  await appWindow.minimize()
+}
+
+async function toggleMaximize() {
+  await appWindow.toggleMaximize()
+  isMaximized.value = await appWindow.isMaximized()
+}
+
+async function close() {
+  await appWindow.close()
+}
+</script>
+
+<template>
+  <header
+    class="h-10 flex items-center justify-between px-4 bg-bg-surface border-b border-border-subtle select-none shrink-0"
+    data-tauri-drag-region
+  >
+    <!-- Left: App name -->
+    <div class="flex items-center" data-tauri-drag-region>
+      <span
+        class="text-accent-text text-[0.6875rem] font-medium tracking-[0.1em] uppercase"
+        data-tauri-drag-region
+      >
+        ZeroClock
+      </span>
+    </div>
+
+    <!-- Center: Running timer status -->
+    <div
+      class="flex items-center gap-3 transition-opacity duration-150"
+      :class="timerStore.isRunning ? 'opacity-100' : 'opacity-0 pointer-events-none'"
+      data-tauri-drag-region
+    >
+      <!-- Pulsing green dot -->
+      <div class="w-2 h-2 rounded-full bg-status-running animate-pulse-dot" />
+
+      <!-- Project name -->
+      <span class="text-[0.6875rem] text-text-secondary">
+        {{ getProjectName(timerStore.selectedProjectId) }}
+      </span>
+
+      <!-- Elapsed time -->
+      <span class="text-[0.75rem] font-mono text-text-primary tracking-wider">
+        {{ timerStore.formattedTime }}
+      </span>
+
+      <!-- Stop button -->
+      <button
+        @click="timerStore.stop()"
+        class="w-5 h-5 flex items-center justify-center text-text-tertiary hover:text-status-error transition-colors duration-150"
+        title="Stop timer"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-3 h-3">
+          <rect x="3" y="3" width="10" height="10" rx="1" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Right: Window controls -->
+    <div class="flex items-center">
+      <button
+        @click="minimize"
+        class="w-10 h-10 flex items-center justify-center text-text-tertiary hover:text-text-secondary transition-colors duration-150"
+        title="Minimize"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" class="w-3.5 h-3.5">
+          <path d="M5 12h14" stroke="currentColor" stroke-width="2" />
+        </svg>
+      </button>
+
+      <button
+        @click="toggleMaximize"
+        class="w-10 h-10 flex items-center justify-center text-text-tertiary hover:text-text-secondary transition-colors duration-150"
+        :title="isMaximized ? 'Restore' : 'Maximize'"
+      >
+        <svg v-if="!isMaximized" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-3 h-3">
+          <rect x="4" y="4" width="16" height="16" rx="1" />
+        </svg>
+        <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-3 h-3">
+          <rect x="3" y="7" width="14" height="14" rx="1" />
+          <path d="M7 7V5a1 1 0 011-1h12a1 1 0 011 1v12a1 1 0 01-1 1h-2" />
+        </svg>
+      </button>
+
+      <button
+        @click="close"
+        class="w-10 h-10 flex items-center justify-center text-text-tertiary hover:text-status-error transition-colors duration-150"
+        title="Close"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3.5 h-3.5">
+          <path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z" clip-rule="evenodd" />
+        </svg>
+      </button>
+    </div>
+  </header>
+</template>