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

@@ -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">
+          <PageHeader
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">AI Assistant</h1>
+            title="AI Assistant"
-            <p className="text-gray-600 dark:text-gray-300">
+            description="Chat with your AI assistant and get personalized insights"
-              Chat with your AI assistant and get personalized insights
+          />
-            </p>
-          </div>
 
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
             {/* Chat Interface */}

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">
+          <PageHeader
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Analytics Dashboard</h1>
+            title="Analytics Dashboard"
-            <p className="text-gray-600 dark:text-gray-400">Comprehensive insights and performance metrics</p>
+            description="Comprehensive insights and performance metrics"
-          </div>
+          />
 
           <Tabs defaultValue="realtime" className="space-y-6">
             <TabsList className="grid w-full grid-cols-3">

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, 

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">
+          <PageHeader
-            <div>
+            title="Finances"
-              <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Finances</h1>
+            description="Track your income, expenses, and financial goals"
-              <p className="text-gray-600 dark:text-gray-300">
+          >
-                Track your income, expenses, and financial goals
-              </p>
-            </div>
             <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>

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">
+          <PageHeader
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Focus Zone</h1>
+            title="Focus Zone"
-            <p className="text-gray-600 dark:text-gray-400">Maximize your productivity with focused work sessions</p>
+            description="Maximize your productivity with focused work sessions"
-          </div>
+          />
 
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
             <Card>

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">
+          <PageHeader
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Settings</h1>
+            title="Settings"
-            <p className="text-gray-600 dark:text-gray-300">
+            description="Manage your account settings and preferences"
-              Manage your account settings and preferences
+          />
-            </p>
-          </div>
 
           <Tabs defaultValue="profile" className="space-y-6">
             <TabsList>

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">
+      <PageHeader
-        <h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+        title={t('theme.title', 'Adaptive Theme System')}
-          {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.')}
-        </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>
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
         <Card>

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">
+          <PageHeader
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Voice Commands</h1>
+            title="Voice Commands"
-            <p className="text-gray-600 dark:text-gray-300">
+            description="Control your application using voice commands"
-              Control your application using voice commands
+          />
-            </p>
-          </div>
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
             {/* Voice Control */}