fix window controls not responding to clicks

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zeroclock",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Time tracking desktop application",
   "type": "module",
   "scripts": {

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "ZeroClock",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "identifier": "com.localtimetracker.app",
   "build": {
     "beforeDevCommand": "npm run dev",

src/components/TitleBar.vue

@@ -14,6 +14,9 @@ const settingsStore = useSettingsStore()
 
 onMounted(async () => {
   isMaximized.value = await appWindow.isMaximized()
+  appWindow.onResized(async () => {
+    isMaximized.value = await appWindow.isMaximized()
+  })
 })
 
 function getProjectName(projectId: number | null): string {
@@ -43,20 +46,12 @@ async function close() {
   }
 }
 
-async function startDrag() {
-  await appWindow.startDragging()
-}
-
-async function handleDoubleClick() {
-  await toggleMaximize()
-}
 </script>
 
 <template>
   <header
     class="h-11 flex items-center justify-between px-4 bg-bg-surface border-b border-border-subtle select-none shrink-0"
-    @mousedown.left="startDrag"
-    @dblclick="handleDoubleClick"
+    style="-webkit-app-region: drag"
   >
     <!-- Left: App name -->
     <div class="flex items-center">
@@ -71,6 +66,7 @@ async function handleDoubleClick() {
     <div
       role="status"
       aria-live="off"
+      style="-webkit-app-region: no-drag"
       class="flex items-center gap-3 transition-opacity duration-150"
       :class="timerStore.isRunning || timerStore.isPaused ? 'opacity-100' : 'opacity-0 pointer-events-none'"
     >
@@ -97,7 +93,6 @@ async function handleDoubleClick() {
         v-if="timerStore.isRunning"
         v-tooltip.bottom="'Pause timer'"
         @click="timerStore.pauseManual()"
-        @mousedown.stop
         class="w-11 h-11 flex items-center justify-center text-text-tertiary hover:text-status-warning transition-colors duration-150"
         aria-label="Pause timer"
       >
@@ -110,7 +105,6 @@ async function handleDoubleClick() {
         v-else-if="timerStore.timerState === 'PAUSED_MANUAL'"
         v-tooltip.bottom="'Resume timer'"
         @click="timerStore.resumeFromPause()"
-        @mousedown.stop
         class="w-11 h-11 flex items-center justify-center text-text-tertiary hover:text-accent-text transition-colors duration-150"
         aria-label="Resume timer"
       >
@@ -123,7 +117,6 @@ async function handleDoubleClick() {
       <button
         v-tooltip.bottom="'Stop timer'"
         @click="timerStore.stop()"
-        @mousedown.stop
         class="w-11 h-11 flex items-center justify-center text-text-tertiary hover:text-status-error transition-colors duration-150"
         aria-label="Stop timer"
       >
@@ -134,7 +127,7 @@ async function handleDoubleClick() {
     </div>
 
     <!-- Right: Window controls -->
-    <div class="flex items-center" @mousedown.stop>
+    <div class="flex items-center" style="-webkit-app-region: no-drag">
       <button
         v-tooltip.bottom="'Minimize'"
         @click="minimize"