From 291429e1b88d712cd127a065bd4b3b02afaec3b4 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Wed, 18 Feb 2026 11:36:35 +0200
Subject: [PATCH] refactor: migrate remaining dialogs to Vue Transition, remove
 old keyframes

Convert Settings, Invoices, IdlePrompt, AppTrackingPrompt, and
AppDiscard dialogs from animate-modal-enter CSS class to proper
<Transition name="modal"> wrappers for enter/leave animations.
Remove unused animate-modal-enter and animate-dropdown-enter keyframes.
---
 src/components/AppDiscardDialog.vue        | 38 ++++++++++++++
 src/components/AppTrackingPromptDialog.vue | 42 +++++++++++++++
 src/components/IdlePromptDialog.vue        | 61 ++++++++++++++++++++++
 src/styles/main.css                        | 32 ------------
 src/views/Invoices.vue                     |  8 ++-
 src/views/Settings.vue                     |  4 +-
 6 files changed, 150 insertions(+), 35 deletions(-)
 create mode 100644 src/components/AppDiscardDialog.vue
 create mode 100644 src/components/AppTrackingPromptDialog.vue
 create mode 100644 src/components/IdlePromptDialog.vue

diff --git a/src/components/AppDiscardDialog.vue b/src/components/AppDiscardDialog.vue
new file mode 100644
index 0000000..f0a173d
--- /dev/null
+++ b/src/components/AppDiscardDialog.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+defineProps<{ show: boolean }>()
+defineEmits<{
+  cancel: []
+  discard: []
+}>()
+</script>
+
+<template>
+  <Transition name="modal">
+  <div
+    v-if="show"
+    class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-[60]"
+    @click.self="$emit('cancel')"
+  >
+    <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-xs p-6">
+      <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Unsaved Changes</h2>
+      <p class="text-[0.75rem] text-text-secondary mb-6">
+        You have unsaved changes. Do you want to discard them?
+      </p>
+      <div class="flex justify-end gap-3">
+        <button
+          @click="$emit('cancel')"
+          class="px-4 py-2 border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors duration-150"
+        >
+          Keep Editing
+        </button>
+        <button
+          @click="$emit('discard')"
+          class="px-4 py-2 border border-status-error text-status-error font-medium rounded-lg hover:bg-status-error/10 transition-colors duration-150"
+        >
+          Discard
+        </button>
+      </div>
+    </div>
+  </div>
+  </Transition>
+</template>
diff --git a/src/components/AppTrackingPromptDialog.vue b/src/components/AppTrackingPromptDialog.vue
new file mode 100644
index 0000000..c042ad0
--- /dev/null
+++ b/src/components/AppTrackingPromptDialog.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+interface Props {
+  show: boolean
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  continueTimer: []
+  stopTimer: []
+}>()
+</script>
+
+<template>
+  <Transition name="modal">
+  <div
+    v-if="show"
+    class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
+  >
+    <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6">
+      <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Tracked app not visible</h2>
+      <p class="text-[0.75rem] text-text-secondary mb-6">
+        None of your tracked apps are currently visible on screen. The timer has been paused.
+      </p>
+      <div class="flex flex-col gap-2.5">
+        <button
+          @click="emit('continueTimer')"
+          class="w-full px-4 py-2.5 bg-accent text-bg-base text-[0.8125rem] font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
+        >
+          Continue Timer
+        </button>
+        <button
+          @click="emit('stopTimer')"
+          class="w-full px-4 py-2.5 border border-status-error text-status-error text-[0.8125rem] font-medium rounded-lg hover:bg-status-error/10 transition-colors duration-150"
+        >
+          Stop &amp; Save
+        </button>
+      </div>
+    </div>
+  </div>
+  </Transition>
+</template>
diff --git a/src/components/IdlePromptDialog.vue b/src/components/IdlePromptDialog.vue
new file mode 100644
index 0000000..3c94576
--- /dev/null
+++ b/src/components/IdlePromptDialog.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  show: boolean
+  idleSeconds: number
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  continueKeep: []
+  continueSubtract: []
+  stopTimer: []
+}>()
+
+const idleFormatted = computed(() => {
+  const mins = Math.floor(props.idleSeconds / 60)
+  const secs = props.idleSeconds % 60
+  if (mins > 0) {
+    return `${mins}m ${secs}s`
+  }
+  return `${secs}s`
+})
+</script>
+
+<template>
+  <Transition name="modal">
+  <div
+    v-if="show"
+    class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
+  >
+    <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6">
+      <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">You've been idle</h2>
+      <p class="text-[0.75rem] text-text-secondary mb-6">
+        No keyboard or mouse input detected for <span class="font-mono font-medium text-text-primary">{{ idleFormatted }}</span>.
+      </p>
+      <div class="flex flex-col gap-2.5">
+        <button
+          @click="emit('continueKeep')"
+          class="w-full px-4 py-2.5 bg-accent text-bg-base text-[0.8125rem] font-medium rounded-lg hover:bg-accent-hover transition-colors duration-150"
+        >
+          Continue (keep time)
+        </button>
+        <button
+          @click="emit('continueSubtract')"
+          class="w-full px-4 py-2.5 border border-border-visible text-text-primary text-[0.8125rem] rounded-lg hover:bg-bg-elevated transition-colors duration-150"
+        >
+          Continue (subtract {{ idleFormatted }})
+        </button>
+        <button
+          @click="emit('stopTimer')"
+          class="w-full px-4 py-2.5 border border-status-error text-status-error text-[0.8125rem] font-medium rounded-lg hover:bg-status-error/10 transition-colors duration-150"
+        >
+          Stop &amp; Save
+        </button>
+      </div>
+    </div>
+  </div>
+  </Transition>
+</template>
diff --git a/src/styles/main.css b/src/styles/main.css
index 66bd000..946ca4d 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -160,38 +160,6 @@
   animation: pulse-seconds 1s ease-in-out infinite;
 }
 
-/* Modal animations */
-@keyframes modal-enter {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.animate-modal-enter {
-  animation: modal-enter 200ms ease-out;
-}
-
-/* Dropdown animations */
-@keyframes dropdown-enter {
-  from {
-    opacity: 0;
-    transform: translateY(-4px) scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-.animate-dropdown-enter {
-  animation: dropdown-enter 150ms ease-out;
-}
-
 /* Toast animations */
 @keyframes toast-enter {
   from {
diff --git a/src/views/Invoices.vue b/src/views/Invoices.vue
index 1336ae4..f85bd0a 100644
--- a/src/views/Invoices.vue
+++ b/src/views/Invoices.vue
@@ -230,12 +230,13 @@
     </div>
 
     <!-- Invoice Detail Dialog -->
+    <Transition name="modal">
     <div
       v-if="showDetailDialog"
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="showDetailDialog = false"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-2xl p-6 max-h-[calc(100vh-2rem)] overflow-y-auto animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-2xl p-6 max-h-[calc(100vh-2rem)] overflow-y-auto">
         <div class="flex items-start justify-between mb-6">
           <div>
             <h2 class="text-[1.75rem] font-bold font-[family-name:var(--font-heading)] tracking-tight text-text-primary">{{ selectedInvoice?.invoice_number }}</h2>
@@ -298,14 +299,16 @@
         </div>
       </div>
     </div>
+    </Transition>
 
     <!-- Delete Confirmation Dialog -->
+    <Transition name="modal">
     <div
       v-if="showDeleteDialog"
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="showDeleteDialog = false"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6 animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6">
         <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Delete Invoice</h2>
         <p class="text-[0.75rem] text-text-secondary mb-6">
           Are you sure you want to delete invoice "{{ invoiceToDelete?.invoice_number }}"? This action cannot be undone.
@@ -326,6 +329,7 @@
         </div>
       </div>
     </div>
+    </Transition>
   </div>
 </template>
 
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index a2b8b12..0c41038 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -471,12 +471,13 @@
     </div>
 
     <!-- Clear Data Confirmation Dialog -->
+    <Transition name="modal">
     <div
       v-if="showClearDataDialog"
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="showClearDataDialog = false"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6 animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6">
         <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Clear All Data</h2>
         <p class="text-[0.75rem] text-text-secondary mb-4">
           Are you sure? This action cannot be undone.
@@ -500,6 +501,7 @@
         </div>
       </div>
     </div>
+    </Transition>
   </div>
 </template>