Michelle/redlight
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 11 Wiki Activity

feat(notifications): add delete functionality for individual and all notifications
All checks were successful
Build & Push Docker Image / build (push) Successful in 6m26s
Details

Browse Source 
feat(guest-join): support access code in guest join URL
This commit is contained in:
Michelle
2026-03-02 18:17:13 +01:00
parent 272c5dc2cc
commit dc7a78badb
7 changed files with 99 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/NotificationBell.jsx
View File

@@ -1,5 +1,5 @@
import { useRef, useState, useEffect } from 'react';
import { Bell, BellOff, CheckCheck, ExternalLink } from 'lucide-react';
import { Bell, BellOff, CheckCheck, ExternalLink, Trash2, X } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { useNotifications } from '../contexts/NotificationContext';
import { useLanguage } from '../contexts/LanguageContext';
@@ -48,7 +48,7 @@ function notificationSubtitle(n, t, lang) {
}
export default function NotificationBell() {
const { notifications, unreadCount, markRead, markAllRead } = useNotifications();
const { notifications, unreadCount, markRead, markAllRead, deleteNotification, clearAll } = useNotifications();
const { t, language } = useLanguage();
const navigate = useNavigate();
const [open, setOpen] = useState(false);
@@ -70,6 +70,11 @@ export default function NotificationBell() {
setOpen(false);
};
const handleDelete = async (e, id) => {
e.stopPropagation();
await deleteNotification(id);
};
const recent = notifications.slice(0, 20);
return (
@@ -102,16 +107,28 @@ export default function NotificationBell() {
</span>
)}
</div>
{unreadCount > 0 && (
<button
onClick={markAllRead}
className="flex items-center gap-1 text-xs text-th-text-s hover:text-th-accent transition-colors"
title={t('notifications.markAllRead')}
>
<CheckCheck size={14} />
{t('notifications.markAllRead')}
</button>
)}
<div className="flex items-center gap-2">
{unreadCount > 0 && (
<button
onClick={markAllRead}
className="flex items-center gap-1 text-xs text-th-text-s hover:text-th-accent transition-colors"
title={t('notifications.markAllRead')}
>
<CheckCheck size={14} />
{t('notifications.markAllRead')}
</button>
)}
{notifications.length > 0 && (
<button
onClick={clearAll}
className="flex items-center gap-1 text-xs text-th-text-s hover:text-th-error transition-colors"
title={t('notifications.clearAll')}
>
<Trash2 size={13} />
{t('notifications.clearAll')}
</button>
)}
</div>
</div>
{/* List */}
@@ -127,7 +144,7 @@ export default function NotificationBell() {
<li
key={n.id}
onClick={() => handleNotificationClick(n)}
className={`flex items-start gap-3 px-4 py-3 cursor-pointer transition-colors border-b border-th-border/50 last:border-0
className={`group flex items-start gap-3 px-4 py-3 cursor-pointer transition-colors border-b border-th-border/50 last:border-0
${n.read ? 'hover:bg-th-hover' : 'bg-th-accent/5 hover:bg-th-accent/10'}`}
>
{/* Icon */}
@@ -146,7 +163,7 @@ export default function NotificationBell() {
</p>
</div>
{/* Unread dot + link indicator */}
{/* Right side: unread dot, link icon, delete button */}
<div className="flex flex-col items-end gap-1 flex-shrink-0">
{!n.read && (
<span className="w-2 h-2 rounded-full bg-th-accent mt-1" />
@@ -154,6 +171,13 @@ export default function NotificationBell() {
{n.link && (
<ExternalLink size={12} className="text-th-text-s/50" />
)}
<button
onClick={(e) => handleDelete(e, n.id)}
className="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:text-th-error transition-all text-th-text-s/50"
title={t('notifications.delete')}
>
<X size={13} />
</button>
</div>
</li>
))}