feat: tooltips, two-column timer, font selector, tray behavior, icons, readme

- Custom tooltip directive (WCAG AAA) on every button in the app
- Two-column timer layout with sticky hero and recent entries sidebar
- Timer font selector with 16 monospace Google Fonts and live preview
- UI font selector with 15+ Google Fonts
- Close-to-tray and minimize-to-tray settings
- New app icons (no-glow variants), platform icon set
- Mini timer pop-out window
- Favorites strip with drag-reorder and inline actions
- Comprehensive README with feature documentation
- Remove tracked files that belong in gitignore

src/components/AppDiscardDialog.vue

@@ -1,33 +1,49 @@
 <script setup lang="ts">
-defineProps<{ show: boolean }>()
-defineEmits<{
+import { watch, ref } from 'vue'
+import { useFocusTrap } from '../utils/focusTrap'
+
+const props = defineProps<{ show: boolean }>()
+const emit = defineEmits<{
   cancel: []
   discard: []
 }>()
+
+const { activate, deactivate } = useFocusTrap()
+const dialogRef = ref<HTMLElement | null>(null)
+
+watch(() => props.show, (val) => {
+  if (val) {
+    setTimeout(() => {
+      if (dialogRef.value) activate(dialogRef.value, { onDeactivate: () => emit('cancel') })
+    }, 50)
+  } else {
+    deactivate()
+  }
+})
 </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]"
+    class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
     @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">
+    <div ref="dialogRef" role="alertdialog" aria-modal="true" aria-labelledby="discard-title" aria-describedby="discard-desc" 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 id="discard-title" class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Unsaved Changes</h2>
+      <p id="discard-desc" 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"
+          class="px-4 py-2 text-[0.8125rem] 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"
+          class="px-4 py-2 text-[0.8125rem] border border-status-error text-status-error font-medium rounded-lg hover:bg-status-error/10 transition-colors duration-150"
         >
           Discard
         </button>