feat: add toast notification system

src/App.vue

@@ -1,38 +1,18 @@
 <script setup lang="ts">
-// Main App component - layout placeholder
+import TitleBar from './components/TitleBar.vue'
+import NavRail from './components/NavRail.vue'
+import ToastNotification from './components/ToastNotification.vue'
 </script>
 
 <template>
-  <div class="h-full w-full flex flex-col bg-background">
-    <!-- TitleBar placeholder -->
-    <header class="h-10 flex items-center justify-between px-4 bg-surface border-b border-border" data-tauri-drag-region>
-      <div class="flex items-center gap-2">
-        <span class="text-amber font-semibold">ZeroClock</span>
-      </div>
-      <div class="flex items-center gap-2">
-        <!-- Window controls would go here -->
-      </div>
-    </header>
-
-    <!-- TimerBar placeholder -->
-    <div class="h-16 flex items-center justify-center bg-surface border-b border-border">
-      <span class="text-text-secondary">Timer Bar Placeholder</span>
-    </div>
-
-    <!-- Main content area -->
+  <div class="h-full w-full flex flex-col bg-bg-base">
+    <TitleBar />
     <div class="flex-1 flex overflow-hidden">
-      <!-- Sidebar placeholder -->
-      <aside class="w-16 flex flex-col items-center py-4 bg-surface border-r border-border">
-        <div class="text-text-secondary text-sm">Sidebar</div>
-      </aside>
-
-      <!-- Main content -->
-      <main class="flex-1 p-6 overflow-auto">
+      <NavRail />
+      <main class="flex-1 overflow-auto">
         <router-view />
       </main>
     </div>
   </div>
+  <ToastNotification />
 </template>
-
-<style scoped>
-</style>