WebShell 사이드바 — 커스터마이징 가이드

import { WebShellWithProviders } from '@qwen-code/web-shell';
 
<WebShellWithProviders
  baseUrl="http://localhost:4170"
  sidebar={true} // 간단한 활성화
  // 또는 세분화된 옵션 사용:
  // sidebar={{ enabled: true, defaultCollapsed: false, ... }}
/>;

┌─────────────────────────────────────┐
│ ① 브랜딩 (topRow)                   │  ✅ 커스터마이징 가능
├─────────────────────────────────────┤
│ ② 기본 네비게이션                    │  ✅ 커스터마이징 가능
│    [＋ New task]  [🧩 Plugins]      │
│    [📅 Scheduled] [🎯 Goals]        │
│    [custom render...]               │
├─────────────────────────────────────┤
│ ③ 프로젝트 헤더                     │  ✅ 표시/숨김
│    📁 Projects ▼ [🔍] [＋]          │
│    Session list entries...          │
│    📦 Archived sessions             │
├─────────────────────────────────────┤
│ ④ 푸터 액션 바                     │  ✅ 커스터마이징 가능
│    [⚙ Settings] v0.19 [☀] [▦] [◧] │
├─────────────────────────────────────┤
│ ⑤ 리사이즈 핸들                     │  ❌ 커스터마이징 불가
└─────────────────────────────────────┘

interface WebShellSidebarBranding {
  render?: () => ReactNode; // 전체 브랜딩 행을 교체
  hideWhenCompact?: boolean; // 사이드바가 접혔을 때 숨김 (기본값: 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' // ✏️ New Task 버튼
  | 'plugins' // 🧩 Plugins 버튼
  | 'scheduledTasks' // 📅 Scheduled Tasks 버튼
  | 'goals'; // 🎯 Goals 버튼
 
interface WebShellSidebarPrimaryNavOptions {
  items?: readonly WebShellSidebarPrimaryNavItem[]; // 표시할 내장 버튼 (기본값: 모두)
  render?: () => ReactNode; // 내장 버튼 뒤에 추가할 커스텀 콘텐츠
}

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

type WebShellSidebarFooterItem =
  | 'settings' // ⚙ 설정 패널
  | 'version' // 버전 라벨 (예: "v0.19.10")
  | 'theme' // ☀/🌙 라이트/다크 토글
  | 'sessionsOverview' // ▦ 세션 개요 패널 (큰 화면만)
  | 'splitView' // ◧ 분할 보기 (큰 화면만)
  | 'daemonStatus' // 📊 데몬 상태 패널
  | 'collapse'; // ◁/▷ 접기/펼치기 토글
 
interface WebShellSidebarFooterOptions {
  items?: readonly WebShellSidebarFooterItem[]; // 표시할 내장 항목 (기본값: 모두)
  render?: () => ReactNode; // 내장 항목 앞에 왼쪽에 렌더링할 커스텀 콘텐츠
}

sidebar={{
  footer: { items: ['theme', 'collapse'] },  // 최소화된 푸터
}}

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

interface WebShellSidebarOptions {
  enabled?: boolean; // 사이드바 표시/숨김 (기본값: 전달 시 true)
  defaultCollapsed?: boolean; // 초기 접힌 상태 (localStorage에 저장)
  showCompactToggle?: boolean; // 채팅 영역에 접기 버튼 표시 (기본값: true)
  branding?: false | WebShellSidebarBranding;
  primaryNav?: WebShellSidebarPrimaryNavOptions;
  hideProjectHeader?: boolean; // "Projects" 헤더 행 숨김 (기본값: false = 표시)
  sessionActions?: WebShellSidebarSessionActionsOptions;
  footer?: false | WebShellSidebarFooterOptions;
}

sidebar={{
  hideProjectHeader: true,  // "项目 ▼ [🔍] [＋]" 행 숨김
}}

type WebShellSidebarSessionActionItem =
  | 'details' // 📝 Details (드롭다운 하위 메뉴)
  | 'rename' // ✏️ Rename (드롭다운 메뉴)
  | 'group' // 📁 Group/폴더로 이동 (드롭다운 메뉴)
  | 'export' // 📤 채팅 내보내기 (드롭다운 메뉴)
  | 'delete' // 🗑 세션 삭제 (드롭다운 메뉴)
  | 'pin' // 📌 Pin/Unpin (인라인 버튼)
  | 'archive'; // 📦 Archive (인라인 버튼)
 
/** 작동하는 인라인(호버 버튼) 핸들러가 있는 서브셋. */
type WebShellSidebarSessionInlineActionItem =
  | 'pin'
  | 'archive'
  | 'rename'
  | 'export'
  | 'delete';
 
interface WebShellSidebarSessionActionsOptions {
  items?: readonly WebShellSidebarSessionActionItem[]; // 표시할 액션 (기본값: 모두)
  inlineItems?: readonly WebShellSidebarSessionInlineActionItem[]; // 인라인 버튼으로 표시할 항목 (기본값: ['pin', 'archive'])
}

sidebar={{
  sessionActions: {
    items: ['details', 'rename', 'export', 'delete', 'pin'],  // 표시할 액션 (마스터 제어)
    inlineItems: ['pin', 'delete'],  // pin + delete를 인라인 버튼으로
  },
}}