feat(timer): add subtle pomodoro timer to header

- Added PomodoroTimer component with work/break modes
- Timer appears as icon in header, expands to full widget on click
- Supports 25m work, 5m short break, 15m long break cycles
- Shows progress bar, cycle dots, and mode switcher
- Plays sound when timer completes
- Can be minimized while running (shows pulsing indicator)

synculous-client/src/app/dashboard/layout.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
 import { useAuth } from '@/components/auth/AuthProvider';
 import { useTheme } from '@/components/theme/ThemeProvider';
 import api from '@/lib/api';
+import PomodoroTimer from '@/components/timer/PomodoroTimer';
 import {
   HomeIcon,
   ListIcon,
@@ -38,6 +39,7 @@ export default function DashboardLayout({
   const { isDark, toggleDark } = useTheme();
   const router = useRouter();
   const pathname = usePathname();
+  const [isTimerOpen, setIsTimerOpen] = useState(false);
 
   const tzSynced = useRef(false);
 
@@ -89,6 +91,12 @@ export default function DashboardLayout({
             <span className="font-bold text-gray-900 dark:text-gray-100">Synculous</span>
           </div>
           <div className="flex items-center gap-2">
+            <div className="relative">
+              <PomodoroTimer 
+                isExpanded={isTimerOpen} 
+                onToggle={() => setIsTimerOpen(!isTimerOpen)} 
+              />
+            </div>
             <button
               onClick={toggleDark}
               className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"