kccleoc/seedpgp-web
0
0
Fork 0
mirror of https://github.com/kccleoc/seedpgp-web.git synced 2026-03-07 09:57:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement 'Lock/Edit' mode with blur and confirmation dialog

Browse Source
This commit is contained in:
LC mac
2026-01-31 01:25:27 +08:00
parent 7564ddc7c9
commit 2a7ac1cce0
10 changed files with 158 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Header.tsx
View File

@@ -3,6 +3,7 @@ import { Shield, Lock } from 'lucide-react';
import SecurityBadge from './badges/SecurityBadge';
import StorageBadge from './badges/StorageBadge';
import ClipboardBadge from './badges/ClipboardBadge';
import EditLockBadge from './badges/EditLockBadge';
interface StorageItem {
key: string;
@@ -29,6 +30,8 @@ interface HeaderProps {
encryptedMnemonicCache: any;
handleLockAndClear: () => void;
appVersion: string;
isLocked: boolean;
onToggleLock: () => void;
}
const Header: React.FC<HeaderProps> = ({
@@ -42,7 +45,9 @@ const Header: React.FC<HeaderProps> = ({
setActiveTab,
encryptedMnemonicCache,
handleLockAndClear,
appVersion
appVersion,
isLocked,
onToggleLock
}) => {
return (
<header className="sticky top-0 z-50 bg-slate-900 border-b border-slate-800 backdrop-blur-sm">
@@ -50,12 +55,12 @@ const Header: React.FC<HeaderProps> = ({
<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">
<div className="w-10 h-10 bg-teal-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">v{appVersion}</span>
SeedPGP <span className="text-teal-400">v{appVersion}</span>
</h1>
<p className="text-xs text-slate-400">OpenPGP-secured BIP39 backup</p>
</div>
@@ -70,6 +75,7 @@ const Header: React.FC<HeaderProps> = ({
<div onClick={onOpenClipboardModal} className="cursor-pointer">
<ClipboardBadge events={events} onOpenClipboardModal={onOpenClipboardModal} />
</div>
<EditLockBadge isLocked={isLocked} onToggle={onToggleLock} />
</div>
{/* Right: Action Buttons */}
@@ -84,13 +90,13 @@ const Header: React.FC<HeaderProps> = ({
</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'}`}
className={`px-4 py-2 rounded-lg ${activeTab === 'backup' ? 'bg-teal-500 hover:bg-teal-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'}`}
className={`px-4 py-2 rounded-lg ${activeTab === 'restore' ? 'bg-teal-500 hover:bg-teal-600' : 'bg-slate-700 hover:bg-slate-600'}`}
onClick={() => setActiveTab('restore')}
>
Restore
@@ -107,6 +113,7 @@ const Header: React.FC<HeaderProps> = ({
<div onClick={onOpenClipboardModal} className="cursor-pointer">
<ClipboardBadge events={events} onOpenClipboardModal={onOpenClipboardModal} />
</div>
<EditLockBadge isLocked={isLocked} onToggle={onToggleLock} />
</div>
</div>
</header>