update badges, cosmetic things and UI change

src/components/badges/ClipboardBadge.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Clipboard } from 'lucide-react';
+
+interface ClipboardEvent {
+    timestamp: Date;
+    field: string;
+    length: number;
+}
+
+interface ClipboardBadgeProps {
+  events: ClipboardEvent[];
+  onOpenClipboardModal: () => void; // New prop
+}
+
+const ClipboardBadge: React.FC<ClipboardBadgeProps> = ({ events, onOpenClipboardModal }) => {
+  const count = events.length;
+
+  // Determine badge style based on clipboard count
+  const badgeStyle = 
+    count === 0 
+      ? "text-green-500 bg-green-500/10 border-green-500/20" // Safe
+      : count < 5
+      ? "text-amber-500 bg-amber-500/10 border-amber-500/30 font-semibold" // Warning
+      : "text-red-500 bg-red-500/10 border-red-500/30 font-bold animate-pulse"; // Danger
+
+  return (
+    <button
+      onClick={onOpenClipboardModal}
+      className={`flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-all hover:scale-105 ${badgeStyle}`}
+    >
+      <Clipboard className="w-3.5 h-3.5" />
+      <span className="text-xs">
+        {count === 0 ? "Empty" : `${count} item${count > 1 ? 's' : ''}`}
+      </span>
+    </button>
+  );
+};
+
+export default ClipboardBadge;

src/components/badges/SecurityBadge.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { AlertTriangle } from 'lucide-react';
+
+interface SecurityBadgeProps {
+  onClick: () => void;
+}
+
+const SecurityBadge: React.FC<SecurityBadgeProps> = ({ onClick }) => {
+  return (
+    <button
+      className="flex items-center gap-2 text-amber-500/80 hover:text-amber-500 transition-colors"
+      onClick={onClick}
+    >
+      <AlertTriangle className="w-4 h-4" />
+      <span className="text-xs font-medium">Security Info</span>
+    </button>
+  );
+};
+
+export default SecurityBadge;

src/components/badges/StorageBadge.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { HardDrive } from 'lucide-react';
+
+interface StorageItem {
+    key: string;
+    value: string;
+    size: number;
+    isSensitive: boolean;
+}
+
+interface StorageBadgeProps {
+  localItems: StorageItem[];
+  sessionItems: StorageItem[];
+}
+
+const StorageBadge: React.FC<StorageBadgeProps> = ({ localItems, sessionItems }) => {
+  const totalItems = localItems.length + sessionItems.length;
+  const sensitiveCount = [...localItems, ...sessionItems].filter(i => i.isSensitive).length;
+
+  const status = sensitiveCount > 0 ? 'Warning' : totalItems > 0 ? 'Active' : 'Empty';
+  const colorClass = 
+    status === 'Warning' ? 'text-amber-500/80' : 
+    status === 'Active' ? 'text-blue-500/80' : 
+    'text-green-500/80';
+
+  return (
+    <div className={`flex items-center gap-2 ${colorClass}`}>
+      <HardDrive className="w-4 h-4" />
+      <span className="text-xs font-medium">{status}</span>
+    </div>
+  );
+};
+
+export default StorageBadge;