From b2a0de7ca9d742502283da0fce615c31c7b9851d Mon Sep 17 00:00:00 2001
From: ghaddaditw <40211818-ghaddaditw@users.noreply.replit.com>
Date: Sun, 8 Jun 2025 15:23:15 +0000
Subject: [PATCH] Improve visual structure and navigation on various pages

Refactors page titles/descriptions into reusable PageHeader component in AIPage, AnalyticsPage, ChatPage, FinancesPage, FocusPage, SettingsPage, ThemePage, and VoicePage.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7e7c4e8-20cb-41c4-9d0e-79f48938fede
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/9777c70b-fc38-4831-8d6b-78dfffe041b0/259ea43b-b9fd-4bd0-b9f3-f4898fd6e25c.jpg
---
 client/src/pages/AIPage.tsx        | 10 ++++------
 client/src/pages/AnalyticsPage.tsx |  8 ++++----
 client/src/pages/ChatPage.tsx      |  1 +
 client/src/pages/FinancesPage.tsx  | 15 ++++++++-------
 client/src/pages/FocusPage.tsx     |  9 +++++----
 client/src/pages/SettingsPage.tsx  | 11 +++++------
 client/src/pages/ThemePage.tsx     | 13 +++++--------
 client/src/pages/VoicePage.tsx     | 10 ++++------
 8 files changed, 36 insertions(+), 41 deletions(-)

diff --git a/client/src/pages/AIPage.tsx b/client/src/pages/AIPage.tsx
index 437c53d..1da7931 100644
--- a/client/src/pages/AIPage.tsx
+++ b/client/src/pages/AIPage.tsx
@@ -102,12 +102,10 @@ export default function AIPage() {
       <Sidebar className="w-64 border-r" />
       <div className="flex-1 overflow-auto">
         <div className="p-6">
-          <div className="mb-6">
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">AI Assistant</h1>
-            <p className="text-gray-600 dark:text-gray-300">
-              Chat with your AI assistant and get personalized insights
-            </p>
-          </div>
+          <PageHeader
+            title="AI Assistant"
+            description="Chat with your AI assistant and get personalized insights"
+          />
 
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
             {/* Chat Interface */}
diff --git a/client/src/pages/AnalyticsPage.tsx b/client/src/pages/AnalyticsPage.tsx
index d321df7..6047236 100644
--- a/client/src/pages/AnalyticsPage.tsx
+++ b/client/src/pages/AnalyticsPage.tsx
@@ -91,10 +91,10 @@ export default function AnalyticsPage() {
       <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">Analytics Dashboard</h1>
-            <p className="text-gray-600 dark:text-gray-400">Comprehensive insights and performance metrics</p>
-          </div>
+          <PageHeader
+            title="Analytics Dashboard"
+            description="Comprehensive insights and performance metrics"
+          />
 
           <Tabs defaultValue="realtime" className="space-y-6">
             <TabsList className="grid w-full grid-cols-3">
diff --git a/client/src/pages/ChatPage.tsx b/client/src/pages/ChatPage.tsx
index 616ce25..ed360cd 100644
--- a/client/src/pages/ChatPage.tsx
+++ b/client/src/pages/ChatPage.tsx
@@ -8,6 +8,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
+import { PageHeader } from '@/components/ui/page-header';
 import { 
   MessageCircle, 
   Search, 
diff --git a/client/src/pages/FinancesPage.tsx b/client/src/pages/FinancesPage.tsx
index af18ead..d9b7abd 100644
--- a/client/src/pages/FinancesPage.tsx
+++ b/client/src/pages/FinancesPage.tsx
@@ -112,13 +112,10 @@ export default function FinancesPage() {
       <Sidebar className="w-64 border-r" />
       <div className="flex-1 overflow-auto">
         <div className="p-6">
-          <div className="flex justify-between items-center mb-6">
-            <div>
-              <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Finances</h1>
-              <p className="text-gray-600 dark:text-gray-300">
-                Track your income, expenses, and financial goals
-              </p>
-            </div>
+          <PageHeader
+            title="Finances"
+            description="Track your income, expenses, and financial goals"
+          >
             <Dialog open={open} onOpenChange={setOpen}>
               <DialogTrigger asChild>
                 <Button>
@@ -126,6 +123,10 @@ export default function FinancesPage() {
                   Add Record
                 </Button>
               </DialogTrigger>
+            </Dialog>
+          </PageHeader>
+
+          <Dialog open={open} onOpenChange={setOpen}>
               <DialogContent>
                 <DialogHeader>
                   <DialogTitle>Add Financial Record</DialogTitle>
diff --git a/client/src/pages/FocusPage.tsx b/client/src/pages/FocusPage.tsx
index ae0b562..9b27357 100644
--- a/client/src/pages/FocusPage.tsx
+++ b/client/src/pages/FocusPage.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import { PageHeader } from "@/components/ui/page-header";
 import { useTranslation } from "react-i18next";
 import { Timer, Brain, Volume2, Shield, Target, Coffee, Zap } from "lucide-react";
 import Header from "@/components/layout/Header";
@@ -17,10 +18,10 @@ export default function FocusPage() {
       <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>
+          <PageHeader
+            title="Focus Zone"
+            description="Maximize your productivity with focused work sessions"
+          />
 
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
             <Card>
diff --git a/client/src/pages/SettingsPage.tsx b/client/src/pages/SettingsPage.tsx
index e527d56..9062b9e 100644
--- a/client/src/pages/SettingsPage.tsx
+++ b/client/src/pages/SettingsPage.tsx
@@ -11,6 +11,7 @@ import { Separator } from "@/components/ui/separator";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { LanguageSwitcher } from "@/components/LanguageSwitcher";
+import { PageHeader } from "@/components/ui/page-header";
 import { useToast } from "@/hooks/use-toast";
 import Sidebar from "@/components/layout/Sidebar";
 import { User, Bell, Shield, Palette, Moon, Sun, Globe, Download, Trash2 } from "lucide-react";
@@ -58,12 +59,10 @@ export default function SettingsPage() {
       <Sidebar className="w-64 border-r" />
       <div className="flex-1 overflow-auto">
         <div className="p-6">
-          <div className="mb-6">
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Settings</h1>
-            <p className="text-gray-600 dark:text-gray-300">
-              Manage your account settings and preferences
-            </p>
-          </div>
+          <PageHeader
+            title="Settings"
+            description="Manage your account settings and preferences"
+          />
 
           <Tabs defaultValue="profile" className="space-y-6">
             <TabsList>
diff --git a/client/src/pages/ThemePage.tsx b/client/src/pages/ThemePage.tsx
index d0096d8..57b7e92 100644
--- a/client/src/pages/ThemePage.tsx
+++ b/client/src/pages/ThemePage.tsx
@@ -1,5 +1,6 @@
 import { ThemeControlPanel } from "@/components/ThemeControlPanel";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { PageHeader } from "@/components/ui/page-header";
 import { useTranslation } from "react-i18next";
 import { Palette, Sparkles, Clock, Brain } from "lucide-react";
 
@@ -8,14 +9,10 @@ export default function ThemePage() {
 
   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('theme.title', 'Adaptive Theme System')}
-        </h1>
-        <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
-          {t('theme.description', 'Experience a dynamic interface that adapts to your mood, activity patterns, and time of day for optimal productivity and comfort.')}
-        </p>
-      </div>
+      <PageHeader
+        title={t('theme.title', 'Adaptive Theme System')}
+        description={t('theme.description', 'Experience a dynamic interface that adapts to your mood, activity patterns, and time of day for optimal productivity and comfort.')}
+      />
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
         <Card>
diff --git a/client/src/pages/VoicePage.tsx b/client/src/pages/VoicePage.tsx
index 6e9ffa4..67ef1ad 100644
--- a/client/src/pages/VoicePage.tsx
+++ b/client/src/pages/VoicePage.tsx
@@ -58,12 +58,10 @@ export default function VoicePage() {
       <Sidebar className="w-64 border-r" />
       <div className="flex-1 overflow-auto">
         <div className="p-6">
-          <div className="mb-6">
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Voice Commands</h1>
-            <p className="text-gray-600 dark:text-gray-300">
-              Control your application using voice commands
-            </p>
-          </div>
+          <PageHeader
+            title="Voice Commands"
+            description="Control your application using voice commands"
+          />
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
             {/* Voice Control */}