Update App.tsx

App.tsx

@@ -167,6 +167,7 @@ const MAX_HISTORY_ITEMS = 10;
 // --- MAIN COMPONENT ---
 
 const App: React.FC = () => {
+    const { user, logout } = useAuth();
     const [history, setHistory] = useLocalStorage<JobHistoryItem[]>('ace-copywriting-history', []);
     const [preferences, setPreferences] = useUserPreferences();
     const [view, setView] = useState<ViewState>(() => history.length > 0 ? { type: 'new_job' } : { type: 'welcome' });
@@ -710,35 +711,37 @@ const App: React.FC = () => {
         if (!storageInfo) return null;
         
         return (
-            <div className="bg-gray-700 rounded-lg p-4 mb-4">
+            <div className="bg-gray-700/80 backdrop-blur-sm rounded-lg p-3 border border-gray-600">
                 <div className="flex items-center justify-between mb-2">
-                    <h3 className="text-sm font-semibold text-gray-200">Storage Status</h3>
+                    <h3 className="text-xs font-semibold text-gray-200">Storage</h3>
                     <button
                         onClick={clearAllData}
-                        className="text-xs px-2 py-1 bg-red-600 hover:bg-red-700 text-white rounded"
+                        className="text-xs px-2 py-1 bg-red-600 hover:bg-red-700 text-white rounded transition-colors"
+                        title="Clear all stored data"
                     >
-                        Clear All Data
+                        Clear
                     </button>
                 </div>
-                <div className="grid grid-cols-2 gap-4 text-xs">
+                <div className="grid grid-cols-2 gap-3 text-xs">
                     <div>
-                        <div className="text-gray-400">Storage Used</div>
-                        <div className="text-white">{storageInfo.usedSpace}KB / {storageInfo.totalSpace}KB</div>
+                        <div className="text-gray-400 text-xs">Used</div>
+                        <div className="text-white font-medium">{storageInfo.usedSpace}KB</div>
                         <div className="w-full bg-gray-600 rounded-full h-1 mt-1">
                             <div 
-                                className={`h-1 rounded-full ${storageInfo.usedPercentage > 80 ? 'bg-red-500' : storageInfo.usedPercentage > 60 ? 'bg-yellow-500' : 'bg-green-500'}`}
+                                className={`h-1 rounded-full transition-all ${storageInfo.usedPercentage > 80 ? 'bg-red-500' : storageInfo.usedPercentage > 60 ? 'bg-yellow-500' : 'bg-green-500'}`}
                                 style={{ width: `${Math.min(storageInfo.usedPercentage, 100)}%` }}
                             ></div>
                         </div>
                     </div>
                     <div>
-                        <div className="text-gray-400">Job History</div>
-                        <div className="text-white">{storageInfo.historyCount} / {storageInfo.maxHistoryItems}</div>
+                        <div className="text-gray-400 text-xs">History</div>
+                        <div className="text-white font-medium">{storageInfo.historyCount}/{storageInfo.maxHistoryItems}</div>
                     </div>
                 </div>
                 {storageInfo.usedPercentage > 80 && (
-                    <div className="text-xs text-yellow-400 mt-2">
-                        ⚠️ Storage is getting full. Consider clearing old jobs.
+                    <div className="text-xs text-yellow-400 mt-2 flex items-center gap-1">
+                        <span>⚠️</span>
+                        <span>Storage full</span>
                     </div>
                 )}
             </div>
@@ -747,11 +750,29 @@ const App: React.FC = () => {
 
     return (
         <div className="flex h-screen bg-gray-900 text-gray-100">
+            {/* --- FIXED HEADER --- */}
+            <div className="fixed top-0 left-0 right-0 z-40 bg-gray-800/95 backdrop-blur-sm border-b border-gray-700 px-6 py-3">
+                <div className="flex justify-between items-center">
+                    <div className="flex items-center gap-4">
+                        <h1 className="text-xl font-bold text-white">ACE Pipeline</h1>
+                        <div className="text-sm text-gray-400">
+                            {user?.name && `Welcome, ${user.name}`}
+                        </div>
+                    </div>
+                    <div className="flex items-center gap-4">
+                        <StorageInfoComponent />
+                        <button
+                            onClick={() => logout()}
+                            className="bg-red-600 hover:bg-red-700 text-white px-3 py-1.5 rounded text-sm font-medium transition-colors"
+                        >
+                            Sign Out
+                        </button>
+                    </div>
+                </div>
+            </div>
+
             {/* --- SIDEBAR --- */}
-            <aside className="w-80 bg-gray-800/50 p-4 flex flex-col flex-shrink-0 border-r border-gray-700 overflow-hidden">
-                <header className="px-2 mb-6">
-                     <h1 className="text-2xl font-bold text-white tracking-tight">ACE Pipeline</h1>
-                </header>
+            <aside className="w-80 bg-gray-800/50 p-4 flex flex-col flex-shrink-0 border-r border-gray-700 overflow-hidden" style={{ marginTop: '60px' }}>
                 <button
                     onClick={handleStartNewJob}
                     className={`w-full flex items-center gap-3 p-3 rounded-lg text-left font-semibold mb-4 transition-colors min-w-0 ${getActiveJobId() === jobId && view.type === 'new_job' ? 'bg-blue-600 text-white' : 'bg-gray-700 hover:bg-gray-600 text-gray-200'}`}
@@ -809,9 +830,9 @@ const App: React.FC = () => {
             </aside>
             
             {/* --- MAIN CONTENT --- */}
-            <main className="flex-grow p-8 flex items-center justify-center overflow-auto">
+            <main className="flex-grow p-8 flex items-center justify-center overflow-auto" style={{ marginTop: '60px' }}>
                 {error && view.type === 'new_job' && (
-                    <div className="fixed top-4 right-4 max-w-sm text-left text-red-200 bg-red-900/70 p-4 rounded-lg shadow-lg border border-red-700">
+                    <div className="fixed top-20 right-4 max-w-sm text-left text-red-200 bg-red-900/70 p-4 rounded-lg shadow-lg border border-red-700 z-50">
                         <div className="flex items-start justify-between gap-3">
                             <div>
                                 <div className="font-semibold">Issues detected during processing</div>
@@ -834,7 +855,6 @@ const App: React.FC = () => {
                     </div>
                 )}
                 {renderMainContent()}
-                <StorageInfoComponent />
             </main>
             
             {/* --- DELETE CONFIRMATION DIALOG --- */}