feat(workspace): add logseq outliner engine, global todo rollup, task list sharing avatars and admin toggle

frontend/src/features/triage/TasksView.tsx

@@ -14,10 +14,20 @@ import {
   X,
   Layers,
   Share2,
+  Users,
 } from 'lucide-react';
 import { TaskList, Thought, Space } from '../../lib/types';
 import { api, triggerHaptic } from '../../lib/api';
 
+const getInitials = (name?: string): string => {
+  if (!name) return '?';
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return (parts[0][0] + parts[1][0]).toUpperCase();
+  }
+  return name.slice(0, 2).toUpperCase();
+};
+
 interface TasksViewProps {
   onRefreshStats: () => void;
   onOpenDocument: (docId: string) => void;
@@ -48,6 +58,11 @@ export const TasksView: React.FC<TasksViewProps> = ({
   const [newListIcon, setNewListIcon] = useState('📋');
   const [newListSpaceId, setNewListSpaceId] = useState('');
 
+  // Share TaskList modal state
+  const [showShareListModal, setShowShareListModal] = useState(false);
+  const [sharingTaskList, setSharingTaskList] = useState<TaskList | null>(null);
+  const [shareTargetSpaceId, setShareTargetSpaceId] = useState('');
+
   // Active notes inline edit ID
   const [activeNotesTaskId, setActiveNotesTaskId] = useState<string | null>(null);
   const [notesDraft, setNotesDraft] = useState('');
@@ -195,6 +210,30 @@ export const TasksView: React.FC<TasksViewProps> = ({
     }
   };
 
+  const handleOpenShareModal = (tl: TaskList) => {
+    setSharingTaskList(tl);
+    setShareTargetSpaceId(tl.spaceId || '');
+    setShowShareListModal(true);
+  };
+
+  const handleSaveShareList = async () => {
+    if (!sharingTaskList) return;
+    triggerHaptic(15);
+    try {
+      const updated = await api.updateTaskList(sharingTaskList.id, {
+        spaceId: shareTargetSpaceId,
+      });
+      setTaskLists((prev) =>
+        prev.map((l) => (l.id === updated.id ? { ...l, ...updated } : l))
+      );
+      setShowShareListModal(false);
+      setSharingTaskList(null);
+      await loadData();
+    } catch (err: any) {
+      alert(err.message || 'Fehler beim Speichern der Freigabe');
+    }
+  };
+
   const safeTasks = Array.isArray(tasks) ? tasks : [];
   const safeTaskLists = Array.isArray(taskLists) ? taskLists : [];
   const safeSpaces = Array.isArray(spaces) ? spaces : [];
@@ -245,11 +284,19 @@ export const TasksView: React.FC<TasksViewProps> = ({
                 {tl.tasksCount !== undefined && tl.tasksCount > 0 && (
                   <span className="ml-1 badge-neutral">{tl.tasksCount}</span>
                 )}
-                {tl.spaceId && (
+                {tl.members && tl.members.length > 0 ? (
+                  <div className="flex items-center -space-x-1 ml-0.5" title={`Geteilt (${tl.members.length} Mitglieder)`}>
+                    {tl.members.slice(0, 2).map((m) => (
+                      <span key={m.userId} className="w-3.5 h-3.5 rounded-pill bg-accent/20 border border-panel text-[8px] font-bold text-accent flex items-center justify-center">
+                        {getInitials(m.displayName || m.email)[0]}
+                      </span>
+                    ))}
+                  </div>
+                ) : tl.spaceId ? (
                   <span title="Geteilt mit Team/Space">
                     <Share2 className="w-2.5 h-2.5 text-accent ml-0.5" />
                   </span>
-                )}
+                ) : null}
               </button>
               {selectedListId === tl.id && (
                 <button
@@ -273,8 +320,57 @@ export const TasksView: React.FC<TasksViewProps> = ({
           </button>
         </div>
 
-        {/* View Switcher: List vs Kanban */}
-        <div className="flex items-center gap-1">
+        {/* Right Header Section: Sharing, Avatar Stack & View Switcher */}
+        <div className="flex items-center gap-2">
+          {currentSelectedList && (
+            <div className="flex items-center gap-1.5">
+              <button
+                type="button"
+                onClick={() => handleOpenShareModal(currentSelectedList)}
+                className="btn-action h-8 px-2.5 flex items-center gap-1.5 text-xs"
+                title={`Liste '${currentSelectedList.title}' mit Team oder Nutzern teilen`}
+              >
+                <Users className="w-3.5 h-3.5 text-accent" />
+                <span>Teilen</span>
+              </button>
+
+              {/* Avatar Stack in the corner */}
+              {currentSelectedList.members && currentSelectedList.members.length > 0 ? (
+                <div
+                  onClick={() => handleOpenShareModal(currentSelectedList)}
+                  className="flex items-center -space-x-1.5 cursor-pointer hover:opacity-90 transition-opacity pl-0.5"
+                  title={`Geteilt mit ${currentSelectedList.members.length} Mitgliedern (${currentSelectedList.spaceName || 'Team'}). Klick zum Verwalten.`}
+                >
+                  {currentSelectedList.members.slice(0, 3).map((m) => (
+                    <div
+                      key={m.userId}
+                      className="w-7 h-7 rounded-pill border-2 border-panel bg-accent/20 text-accent flex items-center justify-center text-[10px] font-bold shadow-sm"
+                      title={`${m.displayName || m.email} (${m.role})`}
+                    >
+                      {getInitials(m.displayName || m.email)}
+                    </div>
+                  ))}
+                  {currentSelectedList.members.length > 3 && (
+                    <div className="w-7 h-7 rounded-pill border-2 border-panel bg-accent text-on-accent flex items-center justify-center text-[10px] font-bold shadow-sm">
+                      +{currentSelectedList.members.length - 3}
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <div
+                  onClick={() => handleOpenShareModal(currentSelectedList)}
+                  className="flex items-center cursor-pointer pl-0.5"
+                  title="Privat (nur du). Klick zum Teilen."
+                >
+                  <div className="w-7 h-7 rounded-pill border border-dashed border-border bg-canvas text-muted hover:text-accent hover:border-accent flex items-center justify-center text-[11px] font-bold transition-colors">
+                    🔒
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* View Switcher: List vs Kanban */}
           <div className="flex border border-border rounded-btn bg-canvas overflow-hidden">
             <button
               onClick={() => setViewMode('list')}
@@ -415,6 +511,119 @@ export const TasksView: React.FC<TasksViewProps> = ({
         </div>
       )}
 
+      {/* SHARE LIST MODAL */}
+      {showShareListModal && sharingTaskList && (
+        <div className="fixed inset-0 modal-overlay z-50 flex items-center justify-center p-4">
+          <div className="w-full max-w-md panel-surface shadow-panel p-4 space-y-4">
+            <div className="flex items-center justify-between border-b border-border pb-2">
+              <h3 className="text-sm font-semibold text-main flex items-center gap-1.5">
+                <Users className="w-4 h-4 text-accent" />
+                <span>Liste teilen: {sharingTaskList.title}</span>
+              </h3>
+              <button
+                type="button"
+                onClick={() => {
+                  setShowShareListModal(false);
+                  setSharingTaskList(null);
+                }}
+                className="text-muted hover:text-main"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+
+            <div className="space-y-3">
+              <div>
+                <label className="block text-xs text-muted mb-1 font-medium">
+                  Freigeben für Bereich / Team:
+                </label>
+                <select
+                  value={shareTargetSpaceId}
+                  onChange={(e) => setShareTargetSpaceId(e.target.value)}
+                  className="w-full h-8 px-2.5 input-field text-xs bg-panel"
+                >
+                  <option value="">🔒 Privat (Nicht geteilt - nur für mich)</option>
+                  {safeSpaces.map((s) => (
+                    <option key={s.id} value={s.id}>
+                      {s.icon} {s.name} ({s.members?.length || 1} Mitglieder)
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {/* Members preview */}
+              {(() => {
+                const selectedSpace = safeSpaces.find((s) => s.id === shareTargetSpaceId);
+                const members = selectedSpace?.members || [];
+                if (members.length > 0) {
+                  return (
+                    <div className="space-y-2 pt-2 border-t border-border">
+                      <p className="text-xs font-semibold text-main">
+                        Personen mit Zugriff ({members.length}):
+                      </p>
+                      <div className="max-h-48 overflow-y-auto space-y-1.5 pr-1">
+                        {members.map((m) => (
+                          <div
+                            key={m.userId}
+                            className="p-2 bg-canvas border border-border rounded-card flex items-center justify-between text-xs"
+                          >
+                            <div className="flex items-center gap-2">
+                              <div className="w-6 h-6 rounded-pill bg-accent/20 text-accent font-bold text-[10px] flex items-center justify-center">
+                                {getInitials(m.displayName || m.email)}
+                              </div>
+                              <div>
+                                <p className="font-semibold text-main">{m.displayName || m.email}</p>
+                                <p className="text-[10px] text-muted">{m.email}</p>
+                              </div>
+                            </div>
+                            <span className="badge-neutral text-[10px]">
+                              {m.role === 'owner' ? 'Eigentümer' : m.role === 'editor' ? 'Bearbeiter' : 'Mitglied'}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  );
+                } else if (shareTargetSpaceId) {
+                  return (
+                    <p className="text-xs text-muted italic">Keine Mitglieder in diesem Bereich.</p>
+                  );
+                } else {
+                  return (
+                    <div className="p-3 bg-canvas border border-border rounded-card text-xs text-muted space-y-1">
+                      <p className="font-medium text-main">Diese Aufgabenliste ist privat.</p>
+                      <p className="text-[11px] text-faint">
+                        Wähle oben einen Familien- oder Team-Space aus, um die Liste und alle enthaltenen Aufgaben automatisch mit den Mitgliedern zu teilen.
+                      </p>
+                    </div>
+                  );
+                }
+              })()}
+            </div>
+
+            <div className="flex justify-end gap-2 pt-2 border-t border-border">
+              <button
+                type="button"
+                onClick={() => {
+                  setShowShareListModal(false);
+                  setSharingTaskList(null);
+                }}
+                className="btn-action text-xs"
+              >
+                Abbrechen
+              </button>
+              <button
+                type="button"
+                onClick={handleSaveShareList}
+                className="btn-primary text-xs"
+              >
+                Freigabe speichern
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* VIEW MODES: LIST OR KANBAN */}
       {viewMode === 'kanban' ? (
         /* KANBAN BOARD (3 COLUMNS) */