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

src/components/badges/EditLockBadge.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Lock, Unlock } from 'lucide-react';
+
+interface EditLockBadgeProps {
+  isLocked: boolean;
+  onToggle: () => void;
+}
+
+const EditLockBadge: React.FC<EditLockBadgeProps> = ({ isLocked, onToggle }) => {
+  return (
+    <button
+      onClick={onToggle}
+      className={`flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-all hover:scale-105 ${
+        isLocked
+          ? 'text-amber-500 bg-amber-500/10 border-amber-500/30 font-semibold'
+          : 'text-green-500 bg-green-500/10 border-green-500/30'
+      }`}
+      title={isLocked ? 'Click to unlock and edit' : 'Click to lock and blur sensitive data'}
+    >
+      {isLocked ? <Lock className="w-3.5 h-3.5" /> : <Unlock className="w-3.5 h-3.5" />}
+      <span className="text-xs font-medium">
+        {isLocked ? 'Locked' : 'Edit'}
+      </span>
+    </button>
+  );
+};
+
+export default EditLockBadge;

src/components/badges/StorageBadge.tsx

@@ -20,7 +20,7 @@ const StorageBadge: React.FC<StorageBadgeProps> = ({ localItems, sessionItems })
   const status = sensitiveCount > 0 ? 'Warning' : totalItems > 0 ? 'Active' : 'Empty';
   const colorClass = 
     status === 'Warning' ? 'text-amber-500/80' : 
-    status === 'Active' ? 'text-blue-500/80' : 
+    status === 'Active' ? 'text-teal-500/80' : 
     'text-green-500/80';
 
   return (