0
+ ? 'bg-orange-50 border-orange-400'
+ : 'bg-gray-50 border-gray-300'
+ }`}>
+
+ {/* Header */}
+
0 ? 'hover:bg-orange-100' : 'hover:bg-gray-100'
+ }`}
+ onClick={() => setIsExpanded(!isExpanded)}
+ >
+
+ ๐
+ Clipboard Activity
+
+
+
+ {events.length > 0 && (
+
+ {events.length}
+
+ )}
+ {isExpanded ? 'โผ' : 'โถ'}
+
+
+
+ {/* Expanded Content */}
+ {isExpanded && (
+
+ {events.length > 0 && (
+
+ โ ๏ธ Clipboard Warning: Copied data is accessible to other apps,
+ browser tabs, and extensions. Clear clipboard after use.
+
+ )}
+
+ {events.length > 0 ? (
+ <>
+
+ {events.map((event, idx) => (
+
+
+
+ {event.field}
+
+
+ {event.timestamp.toLocaleTimeString()}
+
+
+
+ Copied {event.length} character{event.length !== 1 ? 's' : ''}
+
+
+ ))}
+
+
+
+ >
+ ) : (
+
+
โ
+
No clipboard activity detected
+
+ )}
+
+ )}
+