WebShell Sidebar — Guide de personnalisation

import { WebShellWithProviders } from '@qwen-code/web-shell';
 
<WebShellWithProviders
  baseUrl="http://localhost:4170"
  sidebar={true} // activation simple
  // ou avec des options fines :
  // sidebar={{ enabled: true, defaultCollapsed: false, ... }}
/>;

┌─────────────────────────────────────┐
│ ① Branding (topRow)                 │  ✅ personnalisable
├─────────────────────────────────────┤
│ ② Navigation principale             │  ✅ personnalisable
│    [＋ Nouvelle tâche] [🧩 Plugins] │
│    [📅 Planifiées] [🎯 Objectifs]   │
│    [rendu personnalisé...]           │
├─────────────────────────────────────┤
│ ③ En-tête de projet                 │  ✅ afficher/masquer
│    📁 Projects ▼ [🔍] [＋]          │
│    Entrées de la liste de sessions...│
│    📦 Sessions archivées            │
├─────────────────────────────────────┤
│ ④ Barre d'actions du footer         │  ✅ personnalisable
│    [⚙ Paramètres] v0.19 [☀] [▦] [◧]│
├─────────────────────────────────────┤
│ ⑤ Poignée de redimensionnement      │  ❌ non personnalisable
└─────────────────────────────────────┘

interface WebShellSidebarBranding {
  render?: () => ReactNode; // remplacer toute la ligne de branding
  hideWhenCompact?: boolean; // masquer quand la sidebar est réduite (par défaut : true)
}

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

type WebShellSidebarPrimaryNavItem =
  | 'newTask' // ✏️ Bouton Nouvelle tâche
  | 'plugins' // 🧩 Bouton Plugins
  | 'scheduledTasks' // 📅 Bouton Tâches planifiées
  | 'goals'; // 🎯 Bouton Objectifs
 
interface WebShellSidebarPrimaryNavOptions {
  items?: readonly WebShellSidebarPrimaryNavItem[]; // quels boutons intégrés afficher (par défaut : tous)
  render?: () => ReactNode; // contenu personnalisé supplémentaire après les boutons intégrés
}

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

type WebShellSidebarFooterItem =
  | 'settings' // ⚙ Panneau Paramètres
  | 'version' // étiquette de version (par ex. "v0.19.10")
  | 'theme' // ☀/🌙 bascule clair/sombre
  | 'sessionsOverview' // ▦ panneau de vue d'ensemble des sessions
  | 'splitView' // ◧ vue partagée (grands écrans uniquement)
  | 'daemonStatus' // 📊 panneau de statut du démon
  | 'collapse'; // ◁/▷ bascule réduire/développer
 
interface WebShellSidebarFooterOptions {
  items?: readonly WebShellSidebarFooterItem[]; // quels éléments intégrés afficher (par défaut : tous)
  render?: () => ReactNode; // contenu personnalisé rendu à gauche, avant les éléments intégrés
}

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

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

interface WebShellSidebarOptions {
  enabled?: boolean; // afficher/masquer la sidebar (par défaut : true quand passé)
  defaultCollapsed?: boolean; // état réduit initial (persisté dans localStorage)
  showCompactToggle?: boolean; // afficher le bouton de réduction dans la zone de chat (par défaut : true)
  showSessionSourceSwitch?: boolean; // afficher le commutateur Tasks/Channels (par défaut : true)
  showLive?: boolean; // afficher les conversations Live appartenant au démon (par défaut : false)
  branding?: false | WebShellSidebarBranding;
  primaryNav?: WebShellSidebarPrimaryNavOptions;
  hideProjectHeader?: boolean; // masquer la ligne d'en-tête "Projects" (par défaut : false = affiché)
  sessionActions?: WebShellSidebarSessionActionsOptions;
  footer?: false | WebShellSidebarFooterOptions;
}

sidebar={{
  showSessionSourceSwitch: false,
}}

sidebar={{
  showLive: true,
}}

sidebar={{
  hideProjectHeader: true,  // masquer la ligne "Projects ▼ [🔍] [＋]"
}}

type WebShellSidebarSessionActionItem =
  | 'details' // 📝 Détails (sous-menu déroulant)
  | 'rename' // ✏️ Renommer (menu déroulant)
  | 'group' // 📁 Grouper/Déplacer vers un dossier (menu déroulant)
  | 'export' // 📤 Exporter l'historique du chat (menu déroulant)
  | 'delete' // 🗑 Supprimer la session (menu déroulant)
  | 'pin' // 📌 Épingler/Désépingler (bouton inline)
  | 'archive'; // 📦 Archiver (menu déroulant)
 
/** Subset with working inline (hover-button) handlers. */
type WebShellSidebarSessionInlineActionItem =
  | 'pin'
  | 'rename'
  | 'export'
  | 'delete';
 
interface WebShellSidebarSessionActionsOptions {
  items?: readonly WebShellSidebarSessionActionItem[]; // quelles actions afficher (par défaut : toutes)
  inlineItems?: readonly WebShellSidebarSessionInlineActionItem[]; // quels éléments apparaissent comme boutons inline (par défaut : ['pin'])
}

sidebar={{
  sessionActions: {
    items: ['details', 'rename', 'export', 'delete', 'pin'],  // quelles actions afficher (contrôle principal)
    inlineItems: ['pin', 'delete'],  // pin + delete comme boutons inline
  },
}}