ui update and some backend functionality adding in accordance with research on adhd and ux design

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

@@ -1,8 +1,9 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
 import { useAuth } from '@/components/auth/AuthProvider';
+import api from '@/lib/api';
 import { 
   HomeIcon, 
   ListIcon, 
@@ -34,12 +35,23 @@ export default function DashboardLayout({
   const router = useRouter();
   const pathname = usePathname();
 
+  const tzSynced = useRef(false);
+
   useEffect(() => {
     if (!isLoading && !isAuthenticated) {
       router.push('/login');
     }
   }, [isAuthenticated, isLoading, router]);
 
+  // Sync timezone offset to backend once per session
+  useEffect(() => {
+    if (isAuthenticated && !tzSynced.current) {
+      tzSynced.current = true;
+      const offset = new Date().getTimezoneOffset();
+      api.preferences.update({ timezone_offset: offset }).catch(() => {});
+    }
+  }, [isAuthenticated]);
+
   if (isLoading) {
     return (
       <div className="min-h-screen flex items-center justify-center">
@@ -55,6 +67,13 @@ export default function DashboardLayout({
     return null;
   }
 
+  // Hide chrome during active session run
+  const isRunMode = pathname.includes('/run');
+
+  if (isRunMode) {
+    return <>{children}</>;
+  }
+
   return (
     <div className="min-h-screen bg-gray-50">
       <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
@@ -65,12 +84,17 @@ export default function DashboardLayout({
             </div>
             <span className="font-bold text-gray-900">Synculous</span>
           </div>
-          <button
-            onClick={logout}
-            className="p-2 text-gray-500 hover:text-gray-700"
-          >
-            <LogOutIcon size={20} />
-          </button>
+          <div className="flex items-center gap-2">
+            <Link href="/dashboard/settings" className="p-2 text-gray-500 hover:text-gray-700">
+              <SettingsIcon size={20} />
+            </Link>
+            <button
+              onClick={logout}
+              className="p-2 text-gray-500 hover:text-gray-700"
+            >
+              <LogOutIcon size={20} />
+            </button>
+          </div>
         </div>
       </header>
 
@@ -81,15 +105,15 @@ export default function DashboardLayout({
       <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 safe-area-bottom">
         <div className="flex justify-around py-2">
           {navItems.map((item) => {
-            const isActive = pathname === item.href || 
+            const isActive = pathname === item.href ||
               (item.href !== '/dashboard' && pathname.startsWith(item.href));
             return (
               <Link
                 key={item.href}
                 href={item.href}
                 className={`flex flex-col items-center gap-1 px-3 py-2 rounded-lg transition-colors ${
-                  isActive 
-                    ? 'text-indigo-600' 
+                  isActive
+                    ? 'text-indigo-600'
                     : 'text-gray-500 hover:text-gray-700'
                 }`}
               >