From d26857072f52e17e21bb49926e92dbe802f05f3f Mon Sep 17 00:00:00 2001
From: ghaddaditw <40211818-ghaddaditw@users.noreply.replit.com>
Date: Sun, 8 Jun 2025 08:45:04 +0000
Subject: [PATCH] Revamp focus page to provide a dedicated, distraction-free
 workspace

Implements a new layout for FocusPage.tsx with sidebar, header, and pomodoro timer functionality.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c5f0c281-8dd8-4846-b452-4a07bcd21062
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/9777c70b-fc38-4831-8d6b-78dfffe041b0/bb69c78d-355e-48a2-a39e-d4d02b9c057b.jpg
---
 client/src/pages/FocusPage.tsx | 248 ++++++++++++++++++++++++---------
 1 file changed, 185 insertions(+), 63 deletions(-)

diff --git a/client/src/pages/FocusPage.tsx b/client/src/pages/FocusPage.tsx
index 9e7fe46..ae0b562 100644
--- a/client/src/pages/FocusPage.tsx
+++ b/client/src/pages/FocusPage.tsx
@@ -1,75 +1,197 @@
-import FocusMode from "@/components/focus/FocusMode";
+import { useState } from "react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
 import { useTranslation } from "react-i18next";
-import { Timer, Brain, Volume2, Shield } from "lucide-react";
+import { Timer, Brain, Volume2, Shield, Target, Coffee, Zap } from "lucide-react";
+import Header from "@/components/layout/Header";
+import Sidebar from "@/components/layout/Sidebar";
+import FocusMode from "@/components/focus/FocusMode";
 
 export default function FocusPage() {
   const { t } = useTranslation();
+  const [isFocusModeOpen, setIsFocusModeOpen] = useState(false);
 
   return (
-    <div className="container mx-auto py-8 space-y-8">
-      <div className="text-center space-y-4">
-        <h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
-          {t('focus.title', 'Focus Mode')}
-        </h1>
-        <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
-          {t('focus.description', 'Minimize distractions and maximize your productivity with our advanced focus tools.')}
-        </p>
+    <div className="flex h-screen bg-gray-50 dark:bg-gray-900">
+      <Sidebar className="w-64 border-r" />
+      <div className="flex-1 flex flex-col">
+        <Header />
+        <div className="flex-1 p-6 overflow-auto">
+          <div className="mb-6">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Focus Zone</h1>
+            <p className="text-gray-600 dark:text-gray-400">Maximize your productivity with focused work sessions</p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+            <Card>
+              <CardHeader className="text-center">
+                <Timer className="w-8 h-8 mx-auto mb-2 text-blue-600" />
+                <CardTitle className="text-lg">Pomodoro Timer</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <CardDescription className="text-center mb-4">
+                  Work in focused 25-minute intervals with built-in breaks
+                </CardDescription>
+                <Button 
+                  onClick={() => setIsFocusModeOpen(true)} 
+                  className="w-full"
+                  variant="outline"
+                >
+                  Start Pomodoro
+                </Button>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader className="text-center">
+                <Brain className="w-8 h-8 mx-auto mb-2 text-purple-600" />
+                <CardTitle className="text-lg">Deep Work Sessions</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <CardDescription className="text-center mb-4">
+                  Extended 90-minute sessions for complex tasks and deep thinking
+                </CardDescription>
+                <Button 
+                  onClick={() => setIsFocusModeOpen(true)} 
+                  className="w-full"
+                  variant="outline"
+                >
+                  Start Deep Work
+                </Button>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader className="text-center">
+                <Coffee className="w-8 h-8 mx-auto mb-2 text-orange-600" />
+                <CardTitle className="text-lg">Custom Sessions</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <CardDescription className="text-center mb-4">
+                  Create personalized focus sessions tailored to your workflow
+                </CardDescription>
+                <Button 
+                  onClick={() => setIsFocusModeOpen(true)} 
+                  className="w-full"
+                  variant="outline"
+                >
+                  Customize Session
+                </Button>
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Volume2 className="w-5 h-5 text-green-600" />
+                  Ambient Sounds
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <CardDescription className="mb-4">
+                  Enhance concentration with nature sounds, white noise, or instrumental music
+                </CardDescription>
+                <div className="space-y-2">
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm">Rain Sounds</span>
+                    <Button size="sm" variant="ghost">Play</Button>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm">Forest Ambience</span>
+                    <Button size="sm" variant="ghost">Play</Button>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm">Ocean Waves</span>
+                    <Button size="sm" variant="ghost">Play</Button>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm">Brown Noise</span>
+                    <Button size="sm" variant="ghost">Play</Button>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Shield className="w-5 h-5 text-red-600" />
+                  Distraction Blocking
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <CardDescription className="mb-4">
+                  Minimize interruptions by hiding notifications and non-essential UI elements
+                </CardDescription>
+                <div className="space-y-3">
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm">Block Notifications</span>
+                    <div className="w-2 h-2 rounded-full bg-green-500"></div>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm">Hide Social Media</span>
+                    <div className="w-2 h-2 rounded-full bg-green-500"></div>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm">Minimize UI Elements</span>
+                    <div className="w-2 h-2 rounded-full bg-green-500"></div>
+                  </div>
+                  <Button size="sm" className="w-full mt-3">
+                    Configure Blocking
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Zap className="w-5 h-5 text-yellow-600" />
+                Focus Statistics
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-blue-600">12</div>
+                  <div className="text-sm text-gray-600 dark:text-gray-400">Sessions Today</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-green-600">6h 30m</div>
+                  <div className="text-sm text-gray-600 dark:text-gray-400">Total Focus Time</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-purple-600">85%</div>
+                  <div className="text-sm text-gray-600 dark:text-gray-400">Completion Rate</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-orange-600">7</div>
+                  <div className="text-sm text-gray-600 dark:text-gray-400">Day Streak</div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <div className="mt-8 text-center">
+            <Button 
+              onClick={() => setIsFocusModeOpen(true)} 
+              size="lg"
+              className="gap-2"
+            >
+              <Target className="w-5 h-5" />
+              Enter Focus Mode
+            </Button>
+          </div>
+        </div>
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-        <Card>
-          <CardHeader className="text-center">
-            <Timer className="w-8 h-8 mx-auto mb-2 text-primary" />
-            <CardTitle className="text-lg">{t('focus.features.timer', 'Pomodoro Timer')}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <CardDescription className="text-center">
-              {t('focus.features.timerDesc', 'Work in focused intervals with built-in breaks')}
-            </CardDescription>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="text-center">
-            <Volume2 className="w-8 h-8 mx-auto mb-2 text-primary" />
-            <CardTitle className="text-lg">{t('focus.features.ambient', 'Ambient Sounds')}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <CardDescription className="text-center">
-              {t('focus.features.ambientDesc', 'Choose from nature sounds to enhance concentration')}
-            </CardDescription>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="text-center">
-            <Shield className="w-8 h-8 mx-auto mb-2 text-primary" />
-            <CardTitle className="text-lg">{t('focus.features.blocking', 'Distraction Blocking')}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <CardDescription className="text-center">
-              {t('focus.features.blockingDesc', 'Block notifications and visual distractions')}
-            </CardDescription>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="text-center">
-            <Brain className="w-8 h-8 mx-auto mb-2 text-primary" />
-            <CardTitle className="text-lg">{t('focus.features.tracking', 'Session Tracking')}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <CardDescription className="text-center">
-              {t('focus.features.trackingDesc', 'Monitor your focus patterns and productivity')}
-            </CardDescription>
-          </CardContent>
-        </Card>
-      </div>
-
-      <div className="max-w-4xl mx-auto">
-        <FocusMode isOpen={true} onClose={() => {}} />
-      </div>
+      <FocusMode 
+        isOpen={isFocusModeOpen} 
+        onClose={() => setIsFocusModeOpen(false)} 
+      />
     </div>
   );
 }
\ No newline at end of file