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
2026-01-15 21:20:04 +01:00
parent 74ffef48d3
commit 7ce4f7efdc
31 changed files with 5651 additions and 11 deletions
@@ -0,0 +1,55 @@
+import { useTranslation } from 'react-i18next';
+import { useQuery } from '@tanstack/react-query';
+import { BodyDoublingLobby } from '@/components/adhd';
+import { User } from '@shared/schema';
+import { Users, ArrowLeft } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useLocation } from 'wouter';
+
+export default function BodyDoublingPage() {
+  const { t } = useTranslation();
+  const [, setLocation] = useLocation();
+
+  const { data: user } = useQuery<User>({
+    queryKey: ['/api/user'],
+  });
+
+  if (!user) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <p className="text-muted-foreground">{t('common.loading', 'Loading...')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-6">
+      <div className="flex items-center gap-4 mb-6">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setLocation('/')}
+        >
+          <ArrowLeft className="h-5 w-5" />
+        </Button>
+        <div className="flex items-center gap-3">
+          <div className="p-3 rounded-xl bg-gradient-to-br from-green-400 to-teal-500 text-white">
+            <Users className="h-6 w-6" />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold">{t('adhd.bodyDoubling.title')}</h1>
+            <p className="text-muted-foreground">{t('adhd.bodyDoubling.description')}</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-gradient-to-br from-green-50 to-teal-50 dark:from-green-950/20 dark:to-teal-950/20 rounded-2xl p-6 border border-green-200 dark:border-green-800">
+        <p className="text-sm text-muted-foreground mb-4">
+          {t('adhd.bodyDoubling.tip', 'Working alongside others helps maintain focus. Join or create a session to stay accountable.')}
+        </p>
+
+        <BodyDoublingLobby currentUserId={user.id} />
+      </div>
+    </div>
+  );
+}