Introduce focus mode to help users concentrate on tasks at hand

Implements FocusMode component with ambient sounds, distraction blocking and adds FocusPage.

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/5abfa1d7-294e-4d88-a0a7-e2cbc6cee435.jpg

client/src/components/focus/FocusMode.tsx

@@ -93,7 +93,7 @@ export default function FocusMode({ isOpen, onClose }: FocusModeProps) {
 
   useEffect(() => {
     if (ambientSound && audioRef.current) {
-      audioRef.current.volume = ambientVolume[0] / 100;
+      audioRef.current.volume = (ambientVolume?.[0] ?? 50) / 100;
       if (isActive) {
         audioRef.current.play().catch(console.error);
       } else {
@@ -450,25 +450,7 @@ export default function FocusMode({ isOpen, onClose }: FocusModeProps) {
         />
       )}
 
-      {/* Focus Mode Styles */}
-      <style jsx global>{`
-        .focus-mode-active {
-          --blur-intensity: 0;
-        }
 
-        .focus-mode-active .floating-voice-control,
-        .focus-mode-active .notification-toast,
-        .focus-mode-active .sidebar-distractions {
-          opacity: 0.3;
-          pointer-events: none;
-          transition: opacity 0.3s ease;
-        }
-        
-        .focus-mode-active .main-content {
-          filter: blur(var(--blur-intensity, 0px));
-          transition: filter 0.3s ease;
-        }
-      `}</style>
     </div>
   );
 }

client/src/components/layout/Header.tsx

@@ -13,6 +13,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { LanguageSwitcher } from "@/components/LanguageSwitcher";
+import FocusButton from "@/components/focus/FocusButton";
 import { 
   Moon, 
   Sun, 
@@ -82,6 +83,9 @@ export default function Header() {
           {/* Language Switcher */}
           <LanguageSwitcher />
 
+          {/* Focus Mode */}
+          {user && <FocusButton variant="ghost" size="sm" />}
+
           {/* Theme Toggle */}
           <Button
             variant="ghost"

client/src/pages/FocusPage.tsx

@@ -0,0 +1,75 @@
+import FocusMode from "@/components/focus/FocusMode";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { useTranslation } from "react-i18next";
+import { Timer, Brain, Volume2, Shield } from "lucide-react";
+
+export default function FocusPage() {
+  const { t } = useTranslation();
+
+  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>
+
+      <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>
+    </div>
+  );
+}