add transitions and micro-interactions across all views

- Page transitions with slide-up/fade on route changes (App.vue)
- NavRail sliding active indicator with spring-like easing
- List enter/leave/move animations on Entries, Projects, Clients, Timer
- Modal enter/leave transitions with scale+fade on all dialogs
- Dropdown transitions with overshoot on all select/picker components
- Button feedback (scale on hover/active), card hover lift effects
- Timer pulse on start, glow on stop, floating empty state icons
- Content fade-in on Dashboard, Reports, Calendar, Timesheet
- Tag chip enter/leave animations in AppTagInput
- Progress bar smooth width transitions
- Implementation plan document

src/views/Dashboard.vue

@@ -2,7 +2,7 @@
   <div class="p-6">
     <!-- Empty state -->
     <div v-if="isEmpty" class="flex flex-col items-center justify-center py-16">
-      <Clock class="w-12 h-12 text-text-tertiary" :stroke-width="1.5" />
+      <Clock class="w-12 h-12 text-text-tertiary animate-float" :stroke-width="1.5" />
       <p class="text-sm text-text-secondary mt-4">Start tracking your time</p>
       <p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Your dashboard will come alive with stats, charts, and recent activity once you start logging hours.</p>
       <router-link to="/timer" class="mt-4 px-4 py-2 bg-accent text-bg-base text-xs font-medium rounded-lg hover:bg-accent-hover transition-colors">
@@ -11,7 +11,8 @@
     </div>
 
     <!-- Main content -->
-    <template v-else>
+    <Transition name="fade" appear>
+    <div v-if="!isEmpty">
       <!-- Greeting header -->
       <div class="mb-8">
         <p class="text-xl font-[family-name:var(--font-heading)] text-text-secondary">{{ greeting }}</p>
@@ -49,7 +50,7 @@
             </div>
             <div class="w-full bg-bg-elevated rounded-full h-1.5">
               <div
-                class="h-1.5 rounded-full bg-accent transition-all"
+                class="h-1.5 rounded-full bg-accent progress-bar"
                 :style="{ width: Math.min(dailyPct, 100) + '%' }"
               />
             </div>
@@ -61,7 +62,7 @@
             </div>
             <div class="w-full bg-bg-elevated rounded-full h-1.5">
               <div
-                class="h-1.5 rounded-full bg-accent transition-all"
+                class="h-1.5 rounded-full bg-accent progress-bar"
                 :style="{ width: Math.min(weeklyPct, 100) + '%' }"
               />
             </div>
@@ -130,7 +131,8 @@
           </div>
         </div>
       </div>
-    </template>
+    </div>
+    </Transition>
   </div>
 </template>