Section 6 COmpleted

frontend/src/pages/account/ContentSettingsPage.tsx

@@ -5,6 +5,7 @@
  */
 
 import { useState, useEffect, useCallback } from 'react';
+import { useLocation } from 'react-router-dom';
 import { 
   Save, Loader2, Image as ImageIcon, FileText, Send, Settings
 } from 'lucide-react';
@@ -83,9 +84,17 @@ const getImageSizes = (provider: string, model: string) => {
   return [{ value: '1024x1024', label: '1024×1024 pixels' }];
 };
 
+// Get tab from URL path
+function getTabFromPath(pathname: string): TabType {
+  if (pathname.includes('/publishing')) return 'publishing';
+  if (pathname.includes('/images')) return 'images';
+  return 'content';
+}
+
 export default function ContentSettingsPage() {
   const toast = useToast();
-  const [activeTab, setActiveTab] = useState<TabType>('content');
+  const location = useLocation();
+  const activeTab = getTabFromPath(location.pathname);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   
@@ -293,11 +302,11 @@ export default function ContentSettingsPage() {
     }
   };
 
-  const tabs = [
-    { id: 'content' as TabType, label: 'Content Generation', icon: <FileText className="w-4 h-4" /> },
-    { id: 'publishing' as TabType, label: 'Publishing', icon: <Send className="w-4 h-4" /> },
-    { id: 'images' as TabType, label: 'Image Settings', icon: <ImageIcon className="w-4 h-4" /> },
-  ];
+  const tabTitles: Record<TabType, string> = {
+    content: 'Content Generation',
+    publishing: 'Publishing',
+    images: 'Image Settings',
+  };
 
   if (loading) {
     return (
@@ -319,35 +328,17 @@ export default function ContentSettingsPage() {
       
       {/* Page Header */}
       <div className="mb-6">
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Content Settings</h1>
+        <div className="text-sm text-gray-500 dark:text-gray-400 mb-1">
+          Content Settings / {tabTitles[activeTab]}
+        </div>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">{tabTitles[activeTab]}</h1>
         <p className="text-gray-600 dark:text-gray-400 mt-1">
-          Configure how your content and images are generated
+          {activeTab === 'content' && 'Customize how your articles are written'}
+          {activeTab === 'publishing' && 'Configure automatic publishing settings'}
+          {activeTab === 'images' && 'Set up AI image generation preferences'}
         </p>
       </div>
 
-      {/* Tabs */}
-      <div className="mb-6 border-b border-gray-200 dark:border-gray-700">
-        <nav className="-mb-px flex space-x-8">
-          {tabs.map((tab) => (
-            <button
-              type="button"
-              key={tab.id}
-              onClick={() => setActiveTab(tab.id)}
-              className={`
-                flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm
-                ${activeTab === tab.id
-                  ? 'border-[var(--color-brand-500)] text-[var(--color-brand-600)] dark:text-[var(--color-brand-400)]'
-                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
-                }
-              `}
-            >
-              {tab.icon}
-              {tab.label}
-            </button>
-          ))}
-        </nav>
-      </div>
-
       {/* Tab Content */}
       <div className="mt-6">
         {/* Content Generation Tab */}