diff --git a/frontend/src/components/HelpPanel.tsx b/frontend/src/components/HelpPanel.tsx index 3101275..a619b8a 100644 --- a/frontend/src/components/HelpPanel.tsx +++ b/frontend/src/components/HelpPanel.tsx @@ -27,8 +27,12 @@ const quickStart: { step: number; text: string }[] = [ const HelpPanel: React.FC = ({ open, onClose }) => { if (!open) return null; + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Escape') onClose(); + }; + return ( -
+
e.stopPropagation()}>

Hilfe

diff --git a/frontend/src/components/NotificationPanel.tsx b/frontend/src/components/NotificationPanel.tsx index 2a1d3bc..156cab5 100644 --- a/frontend/src/components/NotificationPanel.tsx +++ b/frontend/src/components/NotificationPanel.tsx @@ -6,17 +6,17 @@ interface Notification { icon: string; title: string; timestamp: string; + read: boolean; } const initialNotifications: Notification[] = [ - { id: 'n1', icon: '💾', title: 'Projekt automatisch gespeichert', timestamp: 'vor 2 Min.' }, - { id: 'n2', icon: '🔄', title: 'Neue Version verfügbar', timestamp: 'vor 15 Min.' }, - { id: 'n3', icon: '👤', title: 'Benutzer ist beigetreten', timestamp: 'vor 1 Std.' }, + { id: 'n1', icon: '💾', title: 'Projekt automatisch gespeichert', timestamp: 'vor 2 Min.', read: false }, + { id: 'n2', icon: '🔄', title: 'Neue Version verfügbar', timestamp: 'vor 15 Min.', read: false }, + { id: 'n3', icon: '👤', title: 'Benutzer ist beigetreten', timestamp: 'vor 1 Std.', read: false }, ]; const NotificationPanel: React.FC = ({ open, onClose }) => { const [notifications, setNotifications] = useState(initialNotifications); - const [allRead, setAllRead] = useState(false); const ref = useRef(null); useEffect(() => { @@ -26,8 +26,15 @@ const NotificationPanel: React.FC = ({ open, onClose }) onClose(); } }; + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === 'Escape') onClose(); + }; document.addEventListener('mousedown', handleClickOutside); - return () => document.removeEventListener('mousedown', handleClickOutside); + document.addEventListener('keydown', handleKeyDown); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + document.removeEventListener('keydown', handleKeyDown); + }; }, [open, onClose]); if (!open) return null; @@ -37,7 +44,7 @@ const NotificationPanel: React.FC = ({ open, onClose }) }; const handleMarkAllRead = () => { - setAllRead(true); + setNotifications((prev) => prev.map((n) => ({ ...n, read: true }))); }; return ( @@ -53,7 +60,7 @@ const NotificationPanel: React.FC = ({ open, onClose })

Keine Benachrichtigungen

) : ( notifications.map((n) => ( -
+
{n.icon}
{n.title} diff --git a/frontend/src/components/ShareDialog.tsx b/frontend/src/components/ShareDialog.tsx index 7966904..e550c2d 100644 --- a/frontend/src/components/ShareDialog.tsx +++ b/frontend/src/components/ShareDialog.tsx @@ -14,9 +14,15 @@ const ShareDialog: React.FC = ({ open, onClose, projectName }) navigator.clipboard.writeText(shareLink).then(() => { setCopied(true); setTimeout(() => setCopied(false), 2000); + }).catch(() => { + setCopied(false); }); }; + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Escape') onClose(); + }; + const handleInvite = () => { if (email.trim()) { setInvited(true); @@ -26,7 +32,7 @@ const ShareDialog: React.FC = ({ open, onClose, projectName }) }; return ( -
+
e.stopPropagation()}>

Projekt teilen