feat: session sidebar component with create, select, logout

2026-05-26 19:20:37 +00:00
parent 77fe2bafd4
commit c24fd11f03
2 changed files with 338 additions and 0 deletions
@@ -0,0 +1,78 @@
+import { IconPlus, IconLogout } from '@tabler/icons-react'
+import type { Session } from '../lib/types'
+
+interface SessionSidebarProps {
+  sessions: Session[]
+  activeSessionId: string | null
+  onSelect: (id: string) => void
+  onCreate: () => void
+  onLogout: () => void
+}
+
+export function SessionSidebar({
+  sessions,
+  activeSessionId,
+  onSelect,
+  onCreate,
+  onLogout,
+}: SessionSidebarProps) {
+  return (
+    <div className='sidebar'>
+      <div className='sidebar-header'>
+        <h3>Sessions</h3>
+        <div style={{ display: 'flex' }}>
+          <button
+            title='New session'
+            onClick={onCreate}
+            style={{
+              border: 'none',
+              background: 'transparent',
+              cursor: 'pointer',
+              padding: '4px',
+            }}
+          >
+            <IconPlus size={18} color='#7aa2f7' />
+          </button>
+          <button
+            title='Log out'
+            onClick={onLogout}
+            style={{
+              border: 'none',
+              background: 'transparent',
+              cursor: 'pointer',
+              padding: '4px',
+            }}
+          >
+            <IconLogout size={18} color='#8888aa' />
+          </button>
+        </div>
+      </div>
+      <div className='session-list'>
+        {sessions.length === 0 ? (
+          <div
+            style={{
+              color: '#6a6a8a',
+              fontSize: '0.85rem',
+              padding: '1rem',
+            }}
+          >
+            No sessions yet. Click + to start researching.
+          </div>
+        ) : (
+          sessions.map(s => (
+            <div
+              key={s.session_id}
+              className={`session-item ${s.session_id === activeSessionId ? 'active' : ''}`}
+              onClick={() => onSelect(s.session_id)}
+            >
+              {s.session_id.slice(0, 12)}...
+              <div className='session-meta'>
+                {s.total_messages ?? 0} msgs · {s.status}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}