WebShell Sidebar — Anpassungsleitfaden

import { WebShellWithProviders } from '@qwen-code/web-shell';
 
<WebShellWithProviders
  baseUrl="http://localhost:4170"
  sidebar={true} // einfaches Aktivieren
  // oder mit fein abgestimmten Optionen:
  // sidebar={{ enabled: true, defaultCollapsed: false, ... }}
/>;

┌─────────────────────────────────────┐
│ ① Branding (topRow)                 │  ✅ anpassbar
├─────────────────────────────────────┤
│ ② Primäre Navigation                │  ✅ anpassbar
│    [＋ Neue Aufgabe] [🧩 Plugins]   │
│    [📅 Geplant]   [🎯 Ziele]        │
│    [benutzerdefiniertes Rendering…] │
├─────────────────────────────────────┤
│ ③ Projekt-Header                    │  ✅ ein-/ausblendbar
│    📁 Projekte ▼ [🔍] [＋]          │
│    Session-Listeneinträge…          │
│    📦 Archivierte Sessions          │
├─────────────────────────────────────┤
│ ④ Footer-Action-Leiste              │  ✅ anpassbar
│    [⚙ Einstellungen] v0.19 [☀] [▦] [◧] │
├─────────────────────────────────────┤
│ ⑤ Resize-Handle                     │  ❌ nicht anpassbar
└─────────────────────────────────────┘

interface WebShellSidebarBranding {
  render?: () => ReactNode; // ersetzt die gesamte Branding-Zeile
  hideWhenCompact?: boolean; // ausblenden wenn die Sidebar eingeklappt ist (Standard: true)
}

sidebar={{
  branding: {
    render: () => (
      <div style={{ display: 'flex', gap: 8 }}>
        <img src="/my-logo.svg" alt="" width={24} />
        <span>Meine App</span>
      </div>
    ),
  },
}}

type WebShellSidebarPrimaryNavItem =
  | 'newTask' // ✏️ Neue-Aufgabe-Button
  | 'plugins' // 🧩 Plugins-Button
  | 'scheduledTasks' // 📅 Geplante-Tasks-Button
  | 'goals'; // 🎯 Ziele-Button
 
interface WebShellSidebarPrimaryNavOptions {
  items?: readonly WebShellSidebarPrimaryNavItem[]; // welche eingebauten Buttons angezeigt werden (Standard: alle)
  render?: () => ReactNode; // zusätzlicher benutzerdefinierter Inhalt nach den eingebauten Buttons
}

sidebar={{
  primaryNav: {
    items: ['plugins', 'scheduledTasks'],  // newTask und goals ausblenden
    render: () => (
      <button onClick={() => console.log('custom action')}>
        🔗 Data Sync
      </button>
    ),
  },
}}

type WebShellSidebarFooterItem =
  | 'settings' // ⚙ Einstellungsbereich
  | 'version' // Versionsbezeichnung (z. B. "v0.19.10")
  | 'theme' // ☀/🌙 Hell/Dunkel-Umschalter
  | 'sessionsOverview' // ▦ Session-Übersichtsbereich (nur große Screens)
  | 'splitView' // ◧ Split-View (nur große Screens)
  | 'daemonStatus' // 📊 Daemon-Statusbereich
  | 'collapse'; // ◁/▷ Umschalter zum Ein-/Ausklappen
 
interface WebShellSidebarFooterOptions {
  items?: readonly WebShellSidebarFooterItem[]; // welche eingebauten Elemente angezeigt werden (Standard: alle)
  render?: () => ReactNode; // benutzerdefinierter Inhalt, der auf der linken Seite vor den eingebauten Elementen gerendert wird
}

sidebar={{
  footer: { items: ['theme', 'collapse'] },  // minimaler Footer
}}

sidebar={{
  footer: {
    items: ['collapse'],
    render: () => (
      <button onClick={() => openHelpCenter()}>
        ❓ Hilfe
      </button>
    ),
  },
}}

interface WebShellSidebarOptions {
  enabled?: boolean; // Sidebar ein-/ausblenden (Standard: true wenn übergeben)
  defaultCollapsed?: boolean; // initialer eingeklappter Zustand (in localStorage persistiert)
  showCompactToggle?: boolean; // den Einklapp-Button im Chatbereich anzeigen (Standard: true)
  branding?: false | WebShellSidebarBranding;
  primaryNav?: WebShellSidebarPrimaryNavOptions;
  hideProjectHeader?: boolean; // "Projekte"-Header-Zeile ausblenden (Standard: false = angezeigt)
  sessionActions?: WebShellSidebarSessionActionsOptions;
  footer?: false | WebShellSidebarFooterOptions;
}

sidebar={{
  hideProjectHeader: true,  // die "Projekte ▼ [🔍] [＋]"-Zeile ausblenden
}}

type WebShellSidebarSessionActionItem =
  | 'details' // 📝 Details (Dropdown-Untermenü)
  | 'rename' // ✏️ Umbenennen (Dropdown-Menü)
  | 'group' // 📁 Gruppieren/In Ordner verschieben (Dropdown-Menü)
  | 'export' // 📤 Chat-Verlauf exportieren (Dropdown-Menü)
  | 'delete' // 🗑 Session löschen (Dropdown-Menü)
  | 'pin' // 📌 Anheften/Lösen (Inline-Button)
  | 'archive'; // 📦 Archivieren (Inline-Button)
 
/** Teilmenge mit funktionierenden Inline-(Hover-Button-)Handlern. */
type WebShellSidebarSessionInlineActionItem =
  | 'pin'
  | 'archive'
  | 'rename'
  | 'export'
  | 'delete';
 
interface WebShellSidebarSessionActionsOptions {
  items?: readonly WebShellSidebarSessionActionItem[]; // welche Aktionen angezeigt werden (Standard: alle)
  inlineItems?: readonly WebShellSidebarSessionInlineActionItem[]; // welche Elemente als Inline-Buttons erscheinen (Standard: ['pin', 'archive'])
}

sidebar={{
  sessionActions: {
    items: ['details', 'rename', 'export', 'delete', 'pin'],  // welche Aktionen angezeigt werden (Hauptsteuerung)
    inlineItems: ['pin', 'delete'],  // Pin + Delete als Inline-Buttons
  },
}}