update badges, cosmetic things and UI change

src/components/Header.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { Shield, Lock } from 'lucide-react';
+import SecurityBadge from './badges/SecurityBadge';
+import StorageBadge from './badges/StorageBadge';
+import ClipboardBadge from './badges/ClipboardBadge';
+
+interface StorageItem {
+    key: string;
+    value: string;
+    size: number;
+    isSensitive: boolean;
+}
+
+interface ClipboardEvent {
+    timestamp: Date;
+    field: string;
+    length: number;
+}
+
+interface HeaderProps {
+  onOpenSecurityModal: () => void;
+  onOpenStorageModal: () => void;
+  localItems: StorageItem[];
+  sessionItems: StorageItem[];
+  events: ClipboardEvent[];
+  onOpenClipboardModal: () => void;
+  activeTab: 'backup' | 'restore';
+  setActiveTab: (tab: 'backup' | 'restore') => void;
+  encryptedMnemonicCache: any;
+  handleLockAndClear: () => void;
+}
+
+const Header: React.FC<HeaderProps> = ({ 
+    onOpenSecurityModal, 
+    onOpenStorageModal, 
+    localItems, 
+    sessionItems, 
+    events, 
+    onOpenClipboardModal,
+    activeTab,
+    setActiveTab,
+    encryptedMnemonicCache,
+    handleLockAndClear 
+}) => {
+  return (
+    <header className="sticky top-0 z-50 bg-slate-900 border-b border-slate-800 backdrop-blur-sm">
+      <div className="max-w-7xl mx-auto px-6 py-4">
+        <div className="flex items-center justify-between">
+          {/* Left: Logo & Title */}
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
+              <Shield className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <h1 className="text-lg font-semibold text-white">
+                SeedPGP <span className="text-blue-400">v1.4.2</span>
+              </h1>
+              <p className="text-xs text-slate-400">OpenPGP-secured BIP39 backup</p>
+            </div>
+          </div>
+
+          {/* Center: Monitoring Badges */}
+          <div className="hidden md:flex items-center gap-3">
+            <SecurityBadge onClick={onOpenSecurityModal} />
+            <div onClick={onOpenStorageModal} className="cursor-pointer">
+              <StorageBadge localItems={localItems} sessionItems={sessionItems} />
+            </div>
+            <div onClick={onOpenClipboardModal} className="cursor-pointer">
+              <ClipboardBadge events={events} onOpenClipboardModal={onOpenClipboardModal} />
+            </div>
+          </div>
+
+          {/* Right: Action Buttons */}
+          <div className="flex items-center gap-3">
+            {encryptedMnemonicCache && (
+                <button
+                    onClick={handleLockAndClear}
+                    className="flex items-center gap-2 text-sm text-red-400 bg-slate-800/50 px-3 py-1.5 rounded-lg hover:bg-red-900/50 transition-colors"
+                >
+                    <Lock size={16} />
+                    <span>Lock/Clear</span>
+                </button>
+            )}
+            <button 
+              className={`px-4 py-2 rounded-lg ${activeTab === 'backup' ? 'bg-blue-500 hover:bg-blue-600' : 'bg-slate-700 hover:bg-slate-600'}`}
+              onClick={() => setActiveTab('backup')}
+            >
+              Backup
+            </button>
+            <button 
+              className={`px-4 py-2 rounded-lg ${activeTab === 'restore' ? 'bg-blue-500 hover:bg-blue-600' : 'bg-slate-700 hover:bg-slate-600'}`}
+              onClick={() => setActiveTab('restore')}
+            >
+              Restore
+            </button>
+          </div>
+        </div>
+
+        {/* Mobile: Stack monitoring badges */}
+        <div className="md:hidden flex items-center gap-3 mt-3 pt-3 border-t border-slate-800">
+          <SecurityBadge onClick={onOpenSecurityModal} />
+          <div onClick={onOpenStorageModal} className="cursor-pointer">
+            <StorageBadge localItems={localItems} sessionItems={sessionItems} />
+          </div>
+          <div onClick={onOpenClipboardModal} className="cursor-pointer">
+            <ClipboardBadge events={events} onOpenClipboardModal={onOpenClipboardModal} />
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;