Sidebar.tsx

src/components/Sidebar.tsx

1. import type { ConversationSummary } from '../ipc/gen/ConversationSummary'
2. import { NANO, relativeDay, usd } from '../lib/format'
3. import { mod } from '../lib/theme'
4. import { useStore } from '../state/store'
6. function groups(list: ConversationSummary[]) {
7. const out: [string, ConversationSummary[]][] = []
8. const pinned = list.filter((c) => c.pinned)
9. if (pinned.length) out.push(['Pinned', pinned])
10. for (const c of list.filter((c) => !c.pinned)) {
11. const label = relativeDay(c.updated_at)
12. const g = out.find(([l]) => l === label)
13. if (g) g[1].push(c)
14. else out.push([label, [c]])
15. }
16. return out
17. }
19. export function SpendMeter() {
20. const spend = useStore((s) => s.spend)
21. const setPanel = useStore((s) => s.setPanel)
22. if (!spend) return null
23. const budget = spend.budget_usd
24. const pct = budget ? Math.min(100, (spend.month_nanousd / NANO / budget) * 100) : 0
25. return (
26. <button className={`spend level-${spend.budget_level}`} onClick={() => setPanel('usage')} data-testid="spend-meter">
27. <span className="spend-row">
28. <span>This month</span>
29. <strong>
30. {usd(spend.month_nanousd)}
31. {spend.month_estimated ? '*' : ''}
32. </strong>
33. </span>
34. {budget != null && budget > 0 && (
35. <>
36. <span
37. className="bar"
38. role="meter"
39. aria-valuemin={0}
40. aria-valuemax={100}
41. aria-valuenow={Math.round(pct)}
42. aria-label="Share of monthly budget"
43. >
44. <span style={{ width: `${pct}%` }} />
45. </span>
46. <span className="spend-sub">of ${budget.toFixed(2)} budget</span>
47. </>
48. )}
49. </button>
50. )
51. }
53. export function Sidebar() {
54. const conversations = useStore((s) => s.conversations)
55. const activeId = useStore((s) => s.view?.conversation.id)
56. const open = useStore((s) => s.open)
57. const newChat = useStore((s) => s.newChat)
58. const setPanel = useStore((s) => s.setPanel)
59. const info = useStore((s) => s.info)
60. return (
61. <aside className="sidebar glass" aria-label="Conversations">
62. <div className={`sidebar-top ${info?.platform === 'macos' ? 'traffic' : ''}`} data-tauri-drag-region>
63. <button className="primary new-chat" onClick={newChat} title={`New chat (${mod}N)`}>
64. New chat
65. </button>
66. <button className="search-trigger" onClick={() => setPanel('search')} title={`Search (${mod}K)`}>
67. <svg viewBox="0 0 20 20" width="14" height="14" aria-hidden>
68. <circle cx="8.5" cy="8.5" r="5.5" fill="none" stroke="currentColor" strokeWidth="1.7" />
69. <path d="M13 13l4 4" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
70. </svg>
71. <span>Search</span>
72. <kbd>{mod}K</kbd>
73. </button>
74. </div>
75. <nav className="conv-list">
76. {groups(conversations).map(([label, list]) => (
77. <section key={label}>
78. <h2>{label}</h2>
79. <ul>
80. {list.map((c) => (
81. <li key={c.id}>
82. <button
83. className={`conv ${c.id === activeId ? 'active' : ''}`}
84. onClick={() => void open(c.id)}
85. aria-current={c.id === activeId}
86. >
87. <span className="conv-title">{c.title}</span>
88. <span className="conv-cost">
89. {c.cost_nanousd > 0 ? usd(c.cost_nanousd) : c.has_usage ? 'free' : ''}
90. {c.cost_estimated ? '*' : ''}
91. </span>
92. </button>
93. </li>
94. ))}
95. </ul>
96. </section>
97. ))}
98. {conversations.length === 0 && <p className="muted small pad">No chats yet.</p>}
99. </nav>
100. <div className="sidebar-foot">
101. <SpendMeter />
102. <div className="row">
103. <button className="ghost small" onClick={() => setPanel('usage')}>
104. Usage
105. </button>
106. <button className="ghost small" onClick={() => setPanel('settings')}>
107. Settings
108. </button>
109. </div>
110. </div>
111. </aside>
112. )
113. }