feat: Add Focus Tools (ADHD-friendly productivity features)

- Add Focus Tools dashboard with collapsible help section
- Implement Quick Wins page for tasks under 15 minutes
- Add Single Task Focus mode to reduce overwhelm
- Create Body Doubling page for virtual co-working
- Add visual timer, break reminders, and energy tracking
- Implement hyperfocus protection alerts
- Add ADHD settings panel with customizable options
- Include full English and German translations
- Fix larger touch targets CSS to not break button layouts
- Add Playwright tests for Focus Tools features

client/src/App.tsx

@@ -16,6 +16,17 @@ import {
 
 import { Switch, Route, useLocation } from "wouter";
 
+// ADHD Mode Components
+import {
+  ADHDModeProvider,
+  useADHDMode,
+  BreakReminderProvider,
+  BreakReminderOverlay,
+  EnergyCheckIn,
+  HyperfocusGuard,
+  EncouragementToast
+} from '@/components/adhd';
+
 // Components
 import TaskCreationModal from './components/TaskCreationModal';
 import TaskDetailsModal from './components/TaskDetailsModal';
@@ -61,11 +72,19 @@ import { Loader2 } from "lucide-react";
 
 import TimeTrackingPage from './pages/TimeTrackingPage';
 
-function App() {
+// ADHD Pages
+import QuickWinsPage from './pages/QuickWinsPage';
+import SingleTaskPage from './pages/SingleTaskPage';
+import BodyDoublingPage from './pages/BodyDoublingPage';
+import ADHDDashboardPage from './pages/ADHDDashboardPage';
+
+// Inner App component that uses ADHD hooks
+function AppContent() {
   const { t } = useTranslation();
   const { toast } = useToast();
   const [, setLocation] = useLocation();
   const isBlocked = useRoutineBlocker();
+  const { isEnabled: adhdEnabled, settings: adhdSettings } = useADHDMode();
 
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [isTaskDetailsOpen, setIsTaskDetailsOpen] = useState(false);
@@ -317,7 +336,7 @@ function App() {
       <SidebarProvider>
         <AppSidebar user={user} />
         <SidebarInset>
-          <div className="min-h-screen bg-background flex flex-col">
+          <div className={`min-h-screen bg-background flex flex-col ${adhdEnabled ? 'adhd-mode' : ''} ${adhdEnabled && adhdSettings.reducedAnimations ? 'reduced-motion' : ''} ${adhdEnabled && adhdSettings.largerTargets ? 'larger-targets' : ''}`}>
             <main className="flex-1 p-4 md:p-6 max-w-screen-2xl mx-auto w-full relative">
               <Switch>
                 <Route path="/">
@@ -407,6 +426,9 @@ function App() {
                 <Route path="/notifications">
                   <NotificationsPage />
                 </Route>
+                <Route path="/time-tracking">
+                  <TimeTrackingPage />
+                </Route>
                 <Route path="/settings">
                   <Settings onNavigateToTemplates={() => setLocation('/templates')} />
                 </Route>
@@ -420,6 +442,13 @@ function App() {
                 )}
 
                 <Route path="/focus/routine/:type" component={FocusRoutinePage} />
+
+                {/* ADHD Mode Routes */}
+                <Route path="/adhd" component={ADHDDashboardPage} />
+                <Route path="/adhd/quick-wins" component={QuickWinsPage} />
+                <Route path="/adhd/single-task" component={SingleTaskPage} />
+                <Route path="/adhd/body-doubling" component={BodyDoublingPage} />
+
                 <Route component={NotFound} />
               </Switch>
             </main>
@@ -450,6 +479,11 @@ function App() {
 
             <Toaster />
 
+            {/* ADHD Mode Overlays */}
+            {adhdEnabled && <BreakReminderOverlay />}
+            {adhdEnabled && adhdSettings.hyperfocusProtection && <HyperfocusGuard maxMinutes={adhdSettings.hyperfocusMaxMinutes} />}
+            {adhdEnabled && adhdSettings.positiveMessagingLevel !== 'off' && <EncouragementToast />}
+
             <TaskCreationModal
               isOpen={isCreateModalOpen}
               onClose={() => setIsCreateModalOpen(false)}
@@ -499,5 +533,16 @@ function App() {
 
 }
 
+// Main App wrapper with ADHD providers
+function App() {
+  return (
+    <ADHDModeProvider>
+      <BreakReminderProvider>
+        <AppContent />
+      </BreakReminderProvider>
+    </ADHDModeProvider>
+  );
+}
+
 export default App;