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

@@ -70,11 +70,12 @@
             <th class="px-4 py-3 w-20"></th>
           </tr>
         </thead>
-        <tbody>
+        <TransitionGroup name="list" tag="tbody">
           <tr
-            v-for="entry in filteredEntries"
+            v-for="(entry, index) in filteredEntries"
             :key="entry.id"
             class="group border-b border-border-subtle hover:bg-bg-elevated transition-colors duration-150"
+            :style="{ transitionDelay: `${index * 30}ms` }"
           >
             <td class="px-4 py-3 text-[0.75rem] text-text-primary">
               {{ formatDate(entry.start_time) }}
@@ -138,12 +139,12 @@
               </div>
             </td>
           </tr>
-        </tbody>
+        </TransitionGroup>
       </table>
     </div>
 
     <div v-else class="flex flex-col items-center justify-center py-16">
-      <ListIcon class="w-12 h-12 text-text-tertiary" :stroke-width="1.5" />
+      <ListIcon class="w-12 h-12 text-text-tertiary animate-float" :stroke-width="1.5" />
       <p class="text-sm text-text-secondary mt-4">No entries found</p>
       <p class="text-xs text-text-tertiary mt-2 max-w-xs text-center">Time entries will appear here as you track your work. Try adjusting the date range if you have existing entries.</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">
@@ -152,12 +153,13 @@
     </div>
 
     <!-- Edit Dialog -->
+    <Transition name="modal">
     <div
       v-if="showEditDialog"
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="tryCloseEditDialog"
     >
-      <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-md p-6 animate-modal-enter max-h-[calc(100vh-2rem)] overflow-y-auto">
+      <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-md p-6 max-h-[calc(100vh-2rem)] overflow-y-auto">
         <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">Edit Entry</h2>
 
         <form @submit.prevent="handleEdit" class="space-y-4">
@@ -232,14 +234,16 @@
         </form>
       </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="cancelDelete"
     >
-      <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 Entry</h2>
         <p class="text-[0.75rem] text-text-secondary mb-6">
           Are you sure you want to delete this time entry? This action cannot be undone.
@@ -260,6 +264,7 @@
         </div>
       </div>
     </div>
+    </Transition>
 
     <AppDiscardDialog :show="showDiscardDialog" @cancel="cancelDiscard" @discard="confirmDiscard" />
   </div>