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/AppNumberInput.vue

@@ -10,6 +10,8 @@ interface Props {
   precision?: number
   prefix?: string
   suffix?: string
+  label?: string
+  compact?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -19,6 +21,8 @@ const props = withDefaults(defineProps<Props>(), {
   precision: 0,
   prefix: '',
   suffix: '',
+  label: 'Number input',
+  compact: false,
 })
 
 const emit = defineEmits<{
@@ -84,24 +88,39 @@ function cancelEdit() {
 </script>
 
 <template>
-  <div class="flex items-center gap-2">
+  <div
+    class="flex items-center"
+    :class="compact ? 'gap-1' : 'gap-2'"
+    role="group"
+    :aria-label="label"
+  >
     <button
       type="button"
+      aria-label="Decrease value"
+      v-tooltip="'Decrease'"
       @mousedown.prevent="startHold(decrement)"
       @mouseup="stopHold"
       @mouseleave="stopHold"
       @touchstart.prevent="startHold(decrement)"
       @touchend="stopHold"
-      class="w-8 h-8 flex items-center justify-center border border-border-visible rounded-lg text-text-secondary hover:text-text-primary hover:bg-bg-elevated transition-colors disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
+      class="flex items-center justify-center border border-border-visible rounded-lg text-text-secondary hover:text-text-primary hover:bg-bg-elevated transition-colors disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
+      :class="compact ? 'w-6 h-6' : 'w-8 h-8'"
       :disabled="modelValue <= min"
     >
-      <Minus class="w-3.5 h-3.5" :stroke-width="2" />
+      <Minus :class="compact ? 'w-3 h-3' : 'w-3.5 h-3.5'" aria-hidden="true" :stroke-width="2" />
     </button>
 
     <div
       v-if="!isEditing"
       @click="startEdit"
-      class="min-w-[4rem] text-center text-[0.8125rem] font-mono text-text-primary cursor-text select-none"
+      @keydown.enter="startEdit"
+      @keydown.space.prevent="startEdit"
+      tabindex="0"
+      role="button"
+      :aria-label="'Edit value: ' + displayValue"
+      class="text-center font-mono text-text-primary cursor-text select-none"
+      :class="compact ? 'min-w-[2.5rem] text-[0.75rem]' : 'min-w-[4rem] text-[0.8125rem]'"
+      aria-live="polite"
     >
       <span v-if="prefix" class="text-text-tertiary">{{ prefix }}</span>
       {{ displayValue }}
@@ -113,7 +132,9 @@ function cancelEdit() {
       v-model="editValue"
       type="text"
       inputmode="decimal"
-      class="w-20 text-center px-1 py-0.5 bg-bg-inset border border-accent rounded-lg text-[0.8125rem] font-mono text-text-primary focus:outline-none"
+      :aria-label="label"
+      class="text-center px-1 py-0.5 bg-bg-inset border border-accent rounded-lg font-mono text-text-primary focus:outline-none"
+      :class="compact ? 'w-16 text-[0.75rem]' : 'w-20 text-[0.8125rem]'"
       @blur="commitEdit"
       @keydown.enter="commitEdit"
       @keydown.escape="cancelEdit"
@@ -121,15 +142,18 @@ function cancelEdit() {
 
     <button
       type="button"
+      aria-label="Increase value"
+      v-tooltip="'Increase'"
       @mousedown.prevent="startHold(increment)"
       @mouseup="stopHold"
       @mouseleave="stopHold"
       @touchstart.prevent="startHold(increment)"
       @touchend="stopHold"
-      class="w-8 h-8 flex items-center justify-center border border-border-visible rounded-lg text-text-secondary hover:text-text-primary hover:bg-bg-elevated transition-colors disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
+      class="flex items-center justify-center border border-border-visible rounded-lg text-text-secondary hover:text-text-primary hover:bg-bg-elevated transition-colors disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
+      :class="compact ? 'w-6 h-6' : 'w-8 h-8'"
       :disabled="modelValue >= max"
     >
-      <Plus class="w-3.5 h-3.5" :stroke-width="2" />
+      <Plus :class="compact ? 'w-3 h-3' : 'w-3.5 h-3.5'" aria-hidden="true" :stroke-width="2" />
     </button>
   </div>
 </template>