feat: real backend for notifications + project shares — no more mocks

backend/src/database/DatabaseInterface.ts

@@ -79,6 +79,27 @@ export interface DBSession {
   created_at: string;
 }
 
+export interface DBNotification {
+  id: string;
+  user_id: string;
+  project_id: string | null;
+  type: string;
+  title: string;
+  message: string | null;
+  read: number;
+  created_at: string;
+}
+
+export interface DBProjectShare {
+  id: string;
+  project_id: string;
+  shared_by_user_id: string;
+  shared_with_email: string;
+  token: string;
+  accepted: number;
+  created_at: string;
+}
+
 export interface DatabaseInterface {
   init(): Promise<void>;
   close(): void;
@@ -132,4 +153,18 @@ export interface DatabaseInterface {
   getSession(token: string): DBSession | null;
   deleteSession(token: string): boolean;
   deleteExpiredSessions(): void;
+
+  // Notifications
+  listNotifications(userId: string): DBNotification[];
+  createNotification(data: Partial<DBNotification>): DBNotification;
+  markNotificationRead(id: string): boolean;
+  markAllNotificationsRead(userId: string): boolean;
+  deleteNotification(id: string): boolean;
+
+  // Project Shares
+  createProjectShare(data: Partial<DBProjectShare>): DBProjectShare;
+  listProjectShares(projectId: string): DBProjectShare[];
+  getProjectShareByToken(token: string): DBProjectShare | null;
+  acceptProjectShare(token: string): boolean;
+  deleteProjectShare(id: string): boolean;
 }

backend/src/database/SqliteAdapter.ts

@@ -9,6 +9,7 @@ import { randomUUID } from 'crypto';
 import type {
   DatabaseInterface, DBProject, DBDrawing, DBLayer,
   DBElement, DBBlock, DBSetting, DBUser, DBSession,
+  DBNotification, DBProjectShare,
 } from './DatabaseInterface.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -265,4 +266,55 @@ export class SqliteAdapter implements DatabaseInterface {
   deleteExpiredSessions(): void {
     this.db.prepare('DELETE FROM sessions WHERE expires_at < ?').run(Date.now());
   }
+
+  // ─── Notifications ───────────────────────────────────
+  listNotifications(userId: string): DBNotification[] {
+    return this.db.prepare('SELECT * FROM notifications WHERE user_id = ? ORDER BY created_at DESC').all(userId) as DBNotification[];
+  }
+
+  createNotification(data: Partial<DBNotification>): DBNotification {
+    const id = data.id ?? `notif-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+    this.db.prepare(
+      'INSERT INTO notifications (id, user_id, project_id, type, title, message, read) VALUES (?, ?, ?, ?, ?, ?, 0)',
+    ).run(id, data.user_id!, data.project_id ?? null, data.type ?? 'info', data.title!, data.message ?? null);
+    return this.db.prepare('SELECT * FROM notifications WHERE id = ?').get(id) as DBNotification;
+  }
+
+  markNotificationRead(id: string): boolean {
+    return this.db.prepare('UPDATE notifications SET read = 1 WHERE id = ?').run(id).changes > 0;
+  }
+
+  markAllNotificationsRead(userId: string): boolean {
+    return this.db.prepare('UPDATE notifications SET read = 1 WHERE user_id = ?').run(userId).changes > 0;
+  }
+
+  deleteNotification(id: string): boolean {
+    return this.db.prepare('DELETE FROM notifications WHERE id = ?').run(id).changes > 0;
+  }
+
+  // ─── Project Shares ──────────────────────────────────
+  createProjectShare(data: Partial<DBProjectShare>): DBProjectShare {
+    const id = data.id ?? `share-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+    const token = data.token ?? randomUUID();
+    this.db.prepare(
+      'INSERT INTO project_shares (id, project_id, shared_by_user_id, shared_with_email, token, accepted) VALUES (?, ?, ?, ?, ?, 0)',
+    ).run(id, data.project_id!, data.shared_by_user_id!, data.shared_with_email!, token);
+    return this.db.prepare('SELECT * FROM project_shares WHERE id = ?').get(id) as DBProjectShare;
+  }
+
+  listProjectShares(projectId: string): DBProjectShare[] {
+    return this.db.prepare('SELECT * FROM project_shares WHERE project_id = ? ORDER BY created_at DESC').all(projectId) as DBProjectShare[];
+  }
+
+  getProjectShareByToken(token: string): DBProjectShare | null {
+    return (this.db.prepare('SELECT * FROM project_shares WHERE token = ?').get(token) as DBProjectShare) ?? null;
+  }
+
+  acceptProjectShare(token: string): boolean {
+    return this.db.prepare('UPDATE project_shares SET accepted = 1 WHERE token = ?').run(token).changes > 0;
+  }
+
+  deleteProjectShare(id: string): boolean {
+    return this.db.prepare('DELETE FROM project_shares WHERE id = ?').run(id).changes > 0;
+  }
 }

backend/src/database/schema.sql

@@ -99,6 +99,33 @@ CREATE TABLE IF NOT EXISTS settings (
   updated_at TEXT NOT NULL DEFAULT (datetime('now'))
 );
 
+-- ─── Notifications ───────────────────────────────────
+CREATE TABLE IF NOT EXISTS notifications (
+  id TEXT PRIMARY KEY,
+  user_id TEXT NOT NULL,
+  project_id TEXT,
+  type TEXT NOT NULL DEFAULT 'info',
+  title TEXT NOT NULL,
+  message TEXT,
+  read INTEGER NOT NULL DEFAULT 0,
+  created_at TEXT NOT NULL DEFAULT (datetime('now')),
+  FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
+  FOREIGN KEY (project_id) REFERENCES projects(id) ON DELETE CASCADE
+);
+
+-- ─── Project Shares ──────────────────────────────────
+CREATE TABLE IF NOT EXISTS project_shares (
+  id TEXT PRIMARY KEY,
+  project_id TEXT NOT NULL,
+  shared_by_user_id TEXT NOT NULL,
+  shared_with_email TEXT NOT NULL,
+  token TEXT NOT NULL UNIQUE,
+  accepted INTEGER NOT NULL DEFAULT 0,
+  created_at TEXT NOT NULL DEFAULT (datetime('now')),
+  FOREIGN KEY (project_id) REFERENCES projects(id) ON DELETE CASCADE,
+  FOREIGN KEY (shared_by_user_id) REFERENCES users(id) ON DELETE CASCADE
+);
+
 -- ─── Indexes ────────────────────────────────────────
 CREATE INDEX IF NOT EXISTS idx_drawings_project ON drawings(project_id);
 CREATE INDEX IF NOT EXISTS idx_layers_drawing ON layers(drawing_id);

backend/src/routes/notifications.ts

@@ -0,0 +1,59 @@
+/**
+ * Notification Routes – user notifications
+ */
+import type { FastifyInstance } from 'fastify';
+import type { DatabaseInterface } from '../database/DatabaseInterface.js';
+import { requireAuth } from '../auth/authMiddleware.js';
+import type { AuthService } from '../auth/AuthService.js';
+
+export function registerNotificationRoutes(fastify: FastifyInstance, db: DatabaseInterface, authService: AuthService) {
+  // List notifications for current user
+  fastify.get('/api/notifications', async (request, reply) => {
+    const user = requireAuth(request, reply, authService);
+    if (!user) return;
+    return db.listNotifications(user.id);
+  });
+
+  // Create a notification
+  fastify.post('/api/notifications', async (request, reply) => {
+    const user = requireAuth(request, reply, authService);
+    if (!user) return;
+    const body = request.body as { type?: string; title: string; message?: string; project_id?: string };
+    if (!body.title) return reply.code(400).send({ error: 'Title is required' });
+    return db.createNotification({
+      user_id: user.id,
+      project_id: body.project_id ?? null,
+      type: body.type ?? 'info',
+      title: body.title,
+      message: body.message ?? null,
+    });
+  });
+
+  // Mark single notification as read
+  fastify.put('/api/notifications/:id/read', async (request, reply) => {
+    const user = requireAuth(request, reply, authService);
+    if (!user) return;
+    const { id } = request.params as { id: string };
+    const ok = db.markNotificationRead(id);
+    if (!ok) return reply.code(404).send({ error: 'Notification not found' });
+    return { success: true };
+  });
+
+  // Mark all notifications as read
+  fastify.put('/api/notifications/read-all', async (request, reply) => {
+    const user = requireAuth(request, reply, authService);
+    if (!user) return;
+    db.markAllNotificationsRead(user.id);
+    return { success: true };
+  });
+
+  // Delete a notification
+  fastify.delete('/api/notifications/:id', async (request, reply) => {
+    const user = requireAuth(request, reply, authService);
+    if (!user) return;
+    const { id } = request.params as { id: string };
+    const ok = db.deleteNotification(id);
+    if (!ok) return reply.code(404).send({ error: 'Notification not found' });
+    return { success: true };
+  });
+}

backend/src/routes/shares.ts

@@ -0,0 +1,71 @@
+/**
+ * Project Share Routes – invite users to projects
+ */
+import type { FastifyInstance } from 'fastify';
+import type { DatabaseInterface } from '../database/DatabaseInterface.js';
+import { requireAuth } from '../auth/authMiddleware.js';
+import type { AuthService } from '../auth/AuthService.js';
+
+export function registerShareRoutes(fastify: FastifyInstance, db: DatabaseInterface, authService: AuthService) {
+  // List shares for a project
+  fastify.get('/api/projects/:projectId/shares', async (request, reply) => {
+    const user = requireAuth(request, reply, authService);
+    if (!user) return;
+    const { projectId } = request.params as { projectId: string };
+    return db.listProjectShares(projectId);
+  });
+
+  // Create a share / invite by email
+  fastify.post('/api/projects/:projectId/shares', async (request, reply) => {
+    const user = requireAuth(request, reply, authService);
+    if (!user) return;
+    const { projectId } = request.params as { projectId: string };
+    const body = request.body as { email: string };
+    if (!body.email) return reply.code(400).send({ error: 'Email is required' });
+    const share = db.createProjectShare({
+      project_id: projectId,
+      shared_by_user_id: user.id,
+      shared_with_email: body.email,
+    });
+    // Create a notification for the invited user if they exist
+    const invitedUser = db.getUserByEmail(body.email);
+    if (invitedUser) {
+      db.createNotification({
+        user_id: invitedUser.id,
+        project_id: projectId,
+        type: 'share',
+        title: 'Projekt-Einladung',
+        message: `${user.name} hat Sie zum Projekt eingeladen`,
+      });
+    }
+    return share;
+  });
+
+  // Get share by token (public, no auth required)
+  fastify.get('/api/shares/:token', async (request, reply) => {
+    const { token } = request.params as { token: string };
+    const share = db.getProjectShareByToken(token);
+    if (!share) return reply.code(404).send({ error: 'Share not found' });
+    return share;
+  });
+
+  // Accept a share by token
+  fastify.put('/api/shares/:token/accept', async (request, reply) => {
+    const user = requireAuth(request, reply, authService);
+    if (!user) return;
+    const { token } = request.params as { token: string };
+    const ok = db.acceptProjectShare(token);
+    if (!ok) return reply.code(404).send({ error: 'Share not found' });
+    return { success: true };
+  });
+
+  // Revoke a share
+  fastify.delete('/api/shares/:id', async (request, reply) => {
+    const user = requireAuth(request, reply, authService);
+    if (!user) return;
+    const { id } = request.params as { id: string };
+    const ok = db.deleteProjectShare(id);
+    if (!ok) return reply.code(404).send({ error: 'Share not found' });
+    return { success: true };
+  });
+}

backend/src/server.ts

@@ -57,6 +57,8 @@ export async function createServer(opts: ServerOptions) {
   const { registerAuthRoutes } = await import('./routes/auth.js');
   const { registerUserRoutes } = await import('./routes/users.js');
   const { registerAIRoutes } = await import('./routes/ai.js');
+  const { registerNotificationRoutes } = await import('./routes/notifications.js');
+  const { registerShareRoutes } = await import('./routes/shares.js');
 
   const authService = new AuthService(opts.db);
 
@@ -69,6 +71,8 @@ export async function createServer(opts: ServerOptions) {
   registerSettingsRoutes(fastify, opts.db, authService);
   registerUserRoutes(fastify, opts.db, authService);
   registerAIRoutes(fastify, authService);
+  registerNotificationRoutes(fastify, opts.db, authService);
+  registerShareRoutes(fastify, opts.db, authService);
 
   // Yjs collaboration WebSocket
   registerYjsWebSocket(fastify);

frontend/src/App.tsx

@@ -1134,6 +1134,8 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
         open={shareOpen}
         onClose={() => setShareOpen(false)}
         projectName={projectName}
+        projectId={projectId}
+        token={token}
       />
       <HelpPanel
         open={helpOpen}
@@ -1142,6 +1144,7 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
       <NotificationPanel
         open={notifOpen}
         onClose={() => setNotifOpen(false)}
+        token={token}
       />
     </div>
   );

frontend/src/components/NotificationPanel.tsx

@@ -1,24 +1,23 @@
 import React, { useState, useEffect, useRef } from 'react';
 import type { NotificationPanelProps } from '../types/ui.types';
+import { getNotifications, markNotificationRead, markAllNotificationsRead, deleteNotification, type NotificationItem } from '../services/api';
 
-interface Notification {
-  id: string;
-  icon: string;
-  title: string;
-  timestamp: string;
-  read: boolean;
-}
-
-const initialNotifications: Notification[] = [
-  { 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<NotificationPanelProps> = ({ open, onClose }) => {
-  const [notifications, setNotifications] = useState<Notification[]>(initialNotifications);
+const NotificationPanel: React.FC<NotificationPanelProps> = ({ open, onClose, token }) => {
+  const [notifications, setNotifications] = useState<NotificationItem[]>([]);
+  const [loading, setLoading] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    if (!open) return;
+    setLoading(true);
+    getNotifications(token).then((data) => {
+      setNotifications(data);
+      setLoading(false);
+    }).catch(() => {
+      setLoading(false);
+    });
+  }, [open, token]);
+
   useEffect(() => {
     if (!open) return;
     const handleClickOutside = (e: MouseEvent) => {
@@ -39,12 +38,39 @@ const NotificationPanel: React.FC<NotificationPanelProps> = ({ open, onClose })
 
   if (!open) return null;
 
-  const handleDismiss = (id: string) => {
+  const handleDismiss = async (id: string) => {
     setNotifications((prev) => prev.filter((n) => n.id !== id));
+    try { await deleteNotification(token, id); } catch { /* ignore */ }
   };
 
-  const handleMarkAllRead = () => {
-    setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
+  const handleMarkAllRead = async () => {
+    setNotifications((prev) => prev.map((n) => ({ ...n, read: 1 })));
+    try { await markAllNotificationsRead(token); } catch { /* ignore */ }
+  };
+
+  const handleItemClick = async (id: string) => {
+    setNotifications((prev) => prev.map((n) => n.id === id ? { ...n, read: 1 } : n));
+    try { await markNotificationRead(token, id); } catch { /* ignore */ }
+  };
+
+  const formatTime = (iso: string) => {
+    const d = new Date(iso);
+    const now = new Date();
+    const diff = Math.floor((now.getTime() - d.getTime()) / 1000);
+    if (diff < 60) return 'vor wenigen Sekunden';
+    if (diff < 3600) return `vor ${Math.floor(diff / 60)} Min.`;
+    if (diff < 86400) return `vor ${Math.floor(diff / 3600)} Std.`;
+    return d.toLocaleDateString('de-DE');
+  };
+
+  const iconForType = (type: string) => {
+    switch (type) {
+      case 'share': return '👥';
+      case 'save': return '💾';
+      case 'version': return '🔄';
+      case 'warning': return '⚠️';
+      default: return 'ℹ️';
+    }
   };
 
   return (
@@ -56,17 +82,24 @@ const NotificationPanel: React.FC<NotificationPanelProps> = ({ open, onClose })
         </button>
       </div>
       <div className="notif-list">
-        {notifications.length === 0 ? (
+        {loading ? (
+          <p className="notif-empty">Laden...</p>
+        ) : notifications.length === 0 ? (
           <p className="notif-empty">Keine Benachrichtigungen</p>
         ) : (
           notifications.map((n) => (
-            <div key={n.id} className={`notif-item ${n.read ? 'read' : ''}`}>
-              <span className="notif-icon">{n.icon}</span>
+            <div
+              key={n.id}
+              className={`notif-item ${n.read ? 'read' : ''}`}
+              onClick={() => !n.read && handleItemClick(n.id)}
+            >
+              <span className="notif-icon">{iconForType(n.type)}</span>
               <div className="notif-content">
                 <span className="notif-title">{n.title}</span>
-                <span className="notif-time">{n.timestamp}</span>
+                {n.message && <span className="notif-message">{n.message}</span>}
+                <span className="notif-time">{formatTime(n.created_at)}</span>
               </div>
-              <button className="notif-dismiss" aria-label="Entfernen" onClick={() => handleDismiss(n.id)}>
+              <button className="notif-dismiss" aria-label="Entfernen" onClick={(e) => { e.stopPropagation(); handleDismiss(n.id); }}>
                 <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
               </button>
             </div>

frontend/src/components/ShareDialog.tsx

@@ -1,15 +1,25 @@
 import React, { useState } from 'react';
 import type { ShareDialogProps } from '../types/ui.types';
+import { createProjectShare, getProjectShares, type ProjectShare } from '../services/api';
 
-const ShareDialog: React.FC<ShareDialogProps> = ({ open, onClose, projectName }) => {
+const ShareDialog: React.FC<ShareDialogProps> = ({ open, onClose, projectName, projectId, token }) => {
   const [email, setEmail] = useState('');
   const [copied, setCopied] = useState(false);
   const [invited, setInvited] = useState(false);
+  const [error, setError] = useState('');
+  const [shares, setShares] = useState<ProjectShare[]>([]);
+
+  const shareLink = `${window.location.origin}/?project=${encodeURIComponent(projectId)}`;
+
+  React.useEffect(() => {
+    if (open) {
+      getProjectShares(token, projectId).then(setShares).catch(() => {});
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
 
   if (!open) return null;
 
-  const shareLink = `${window.location.origin}/?project=${encodeURIComponent(projectName)}`;
-
   const handleCopyLink = () => {
     navigator.clipboard.writeText(shareLink).then(() => {
       setCopied(true);
@@ -23,11 +33,18 @@ const ShareDialog: React.FC<ShareDialogProps> = ({ open, onClose, projectName })
     if (e.key === 'Escape') onClose();
   };
 
-  const handleInvite = () => {
-    if (email.trim()) {
+  const handleInvite = async () => {
+    if (!email.trim()) return;
+    setError('');
+    setInvited(false);
+    try {
+      const share = await createProjectShare(token, projectId, email.trim());
+      setShares((prev) => [...prev, share]);
       setInvited(true);
       setEmail('');
       setTimeout(() => setInvited(false), 3000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Einladung fehlgeschlagen');
     }
   };
 
@@ -67,7 +84,23 @@ const ShareDialog: React.FC<ShareDialogProps> = ({ open, onClose, projectName })
               </button>
             </div>
             {invited && <p className="share-invited-msg">Einladung gesendet!</p>}
+            {error && <p className="share-error-msg">{error}</p>}
           </div>
+          {shares.length > 0 && (
+            <div className="share-section">
+              <label className="share-label">Geteilt mit</label>
+              <ul className="share-list">
+                {shares.map((s) => (
+                  <li key={s.id} className="share-list-item">
+                    <span className="share-list-email">{s.shared_with_email}</span>
+                    <span className={`share-list-status ${s.accepted ? 'accepted' : 'pending'}`}>
+                      {s.accepted ? 'Angenommen' : 'Ausstehend'}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
         </div>
       </div>
     </div>

frontend/src/services/api.ts

@@ -418,3 +418,63 @@ export async function aiChat(
   }
   return res.json();
 }
+
+// ─── Notifications ──────────────────────────────────────
+export interface NotificationItem {
+  id: string;
+  user_id: string;
+  project_id: string | null;
+  type: string;
+  title: string;
+  message: string | null;
+  read: number;
+  created_at: string;
+}
+
+export async function getNotifications(token: string): Promise<NotificationItem[]> {
+  const res = await fetch(`${API_BASE}/api/notifications`, { headers: authHeaders(token) });
+  if (!res.ok) throw new Error('Failed to load notifications');
+  return res.json();
+}
+
+export async function markNotificationRead(token: string, id: string): Promise<void> {
+  await fetch(`${API_BASE}/api/notifications/${id}/read`, { method: 'PUT', headers: authHeaders(token) });
+}
+
+export async function markAllNotificationsRead(token: string): Promise<void> {
+  await fetch(`${API_BASE}/api/notifications/read-all`, { method: 'PUT', headers: authHeaders(token) });
+}
+
+export async function deleteNotification(token: string, id: string): Promise<void> {
+  await fetch(`${API_BASE}/api/notifications/${id}`, { method: 'DELETE', headers: authHeaders(token) });
+}
+
+// ─── Project Shares ─────────────────────────────────────
+export interface ProjectShare {
+  id: string;
+  project_id: string;
+  shared_by_user_id: string;
+  shared_with_email: string;
+  token: string;
+  accepted: number;
+  created_at: string;
+}
+
+export async function getProjectShares(token: string, projectId: string): Promise<ProjectShare[]> {
+  const res = await fetch(`${API_BASE}/api/projects/${projectId}/shares`, { headers: authHeaders(token) });
+  if (!res.ok) throw new Error('Failed to load shares');
+  return res.json();
+}
+
+export async function createProjectShare(token: string, projectId: string, email: string): Promise<ProjectShare> {
+  const res = await fetch(`${API_BASE}/api/projects/${projectId}/shares`, {
+    method: 'POST',
+    headers: authHeaders(token),
+    body: JSON.stringify({ email }),
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: 'Failed to create share' }));
+    throw new Error(err.error || 'Failed to create share');
+  }
+  return res.json();
+}

frontend/src/styles.css

@@ -2311,3 +2311,54 @@ body.drawer-open { overflow: hidden; }
     width: auto;
   }
 }
+
+/* ─── Share list + error ──────────────────────────────── */
+.share-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.share-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--color-border);
+}
+.share-list-email {
+  font-size: 13px;
+  color: var(--color-text);
+}
+.share-list-status {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 3px 8px;
+  border-radius: 4px;
+}
+.share-list-status.accepted {
+  color: #16a34a;
+  background: rgba(22, 163, 74, 0.1);
+}
+.share-list-status.pending {
+  color: var(--color-text-muted);
+  background: var(--color-surface-2);
+}
+.share-error-msg {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #dc2626;
+  font-weight: 500;
+}
+
+/* ─── Notification message ────────────────────────────── */
+.notif-message {
+  font-size: 12px;
+  color: var(--color-text-muted);
+  margin-top: 2px;
+}
+.notif-item {
+  cursor: pointer;
+}
+.notif-item.read {
+  cursor: default;
+}

frontend/src/types/ui.types.ts

@@ -77,6 +77,8 @@ export interface ShareDialogProps {
   open: boolean;
   onClose: () => void;
   projectName: string;
+  projectId: string;
+  token: string;
 }
 
 export interface HelpPanelProps {
@@ -87,6 +89,7 @@ export interface HelpPanelProps {
 export interface NotificationPanelProps {
   open: boolean;
   onClose: () => void;
+  token: string;
 }
 
 export interface SettingsModalProps {