@@ -98,11 +98,13 @@ function SessionRow({
9898interface ChatHistorySidebarProps {
9999 onLoadSession : ( sessionId : string ) => void ;
100100 onClose ?: ( ) => void ;
101+ isCollapsed ?: boolean ;
101102}
102103
103104export default function ChatHistorySidebar ( {
104105 onLoadSession,
105106 onClose,
107+ isCollapsed = false ,
106108} : ChatHistorySidebarProps ) {
107109 const {
108110 pinnedSessions,
@@ -187,11 +189,11 @@ export default function ChatHistorySidebar({
187189 } ;
188190
189191 return (
190- < div className = " theme-surface h-full flex flex-col transition-colors duration-300" >
191- < div className = " theme-border p-4 border-b transition-colors duration-300" >
192- < div className = " flex items-center justify-between mb-4" >
193- < h2 className = "theme-text-primary text-lg font-semibold" > Activity</ h2 >
194- < div className = " flex items-center gap-1" >
192+ < div className = { ` theme-surface h-full flex flex-col transition-all duration-300 border-r ${ isCollapsed ? 'w-20' : 'w-full' } transition- colors duration-300` } >
193+ < div className = { ` theme-border border-b transition-colors duration-300 ${ isCollapsed ? 'p-4 flex flex-col items-center' : 'p-4' } ` } >
194+ < div className = { ` flex items-center justify-between mb-4 w-full ${ isCollapsed ? 'flex-col gap-4' : '' } ` } >
195+ { ! isCollapsed && < h2 className = "theme-text-primary text-lg font-semibold" > Activity</ h2 > }
196+ < div className = { ` flex items-center gap-1 ${ isCollapsed ? 'flex-col' : '' } ` } >
195197 < button
196198 onClick = { clearAllHistory }
197199 className = "theme-text-muted hover:bg-[var(--color-danger-soft)] p-2 rounded-lg transition-all duration-200 hover:scale-110"
@@ -202,7 +204,7 @@ export default function ChatHistorySidebar({
202204 { onClose && (
203205 < button
204206 onClick = { onClose }
205- className = "theme-text-muted hover:bg-[var(--color-surface-muted)] p-2 rounded-lg transition-all duration-200 hover:scale-110"
207+ className = "theme-text-muted hover:bg-[var(--color-surface-muted)] p-2 rounded-lg transition-all duration-200 hover:scale-110 sm:hidden "
206208 title = "Close"
207209 aria-label = "Close chat history"
208210 >
@@ -212,24 +214,26 @@ export default function ChatHistorySidebar({
212214 </ div >
213215 </ div >
214216
215- < div className = "relative" >
216- < Search className = "theme-text-muted absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4" />
217- < input
218- type = "text"
219- placeholder = "Search conversations..."
220- value = { searchQuery }
221- onChange = { ( e ) => setSearchQuery ( e . target . value ) }
222- className = "theme-input w-full pl-10 pr-4 py-2 rounded-lg text-sm border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
223- />
224- { searchQuery && (
225- < button
226- onClick = { ( ) => setSearchQuery ( '' ) }
227- className = "theme-text-muted hover:theme-text-primary absolute right-3 top-1/2 transform -translate-y-1/2 transition-colors"
228- >
229- < X className = "w-4 h-4" />
230- </ button >
231- ) }
232- </ div >
217+ { ! isCollapsed && (
218+ < div className = "relative" >
219+ < Search className = "theme-text-muted absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4" />
220+ < input
221+ type = "text"
222+ placeholder = "Search conversations..."
223+ value = { searchQuery }
224+ onChange = { ( e ) => setSearchQuery ( e . target . value ) }
225+ className = "theme-input w-full pl-10 pr-4 py-2 rounded-lg text-sm border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
226+ />
227+ { searchQuery && (
228+ < button
229+ onClick = { ( ) => setSearchQuery ( '' ) }
230+ className = "theme-text-muted hover:theme-text-primary absolute right-3 top-1/2 transform -translate-y-1/2 transition-colors"
231+ >
232+ < X className = "w-4 h-4" />
233+ </ button >
234+ ) }
235+ </ div >
236+ ) }
233237 </ div >
234238
235239 < div className = "flex-1 overflow-y-auto" >
@@ -250,12 +254,14 @@ export default function ChatHistorySidebar({
250254 cta = { { label : 'Clear search' , onClick : ( ) => setSearchQuery ( '' ) } }
251255 />
252256 ) : (
253- < div className = " p-2" >
257+ < div className = { ` p-2 ${ isCollapsed ? 'flex flex-col items-center' : '' } ` } >
254258 { filteredPinned . length > 0 && (
255259 < >
256- < p className = "theme-text-muted text-xs font-semibold uppercase tracking-wider px-1 py-1 mt-1" >
257- Pinned
258- </ p >
260+ { ! isCollapsed && (
261+ < p className = "theme-text-muted text-xs font-semibold uppercase tracking-wider px-1 py-1 mt-1" >
262+ Pinned
263+ </ p >
264+ ) }
259265 { filteredPinned . map ( ( session ) => (
260266 < SessionRow
261267 key = { session . id }
@@ -268,7 +274,7 @@ export default function ChatHistorySidebar({
268274 formatDate = { formatDate }
269275 />
270276 ) ) }
271- { filteredUnpinned . length > 0 && (
277+ { ! isCollapsed && filteredUnpinned . length > 0 && (
272278 < p className = "theme-text-muted text-xs font-semibold uppercase tracking-wider px-1 py-1 mt-3" >
273279 Recent
274280 </ p >
@@ -291,35 +297,45 @@ export default function ChatHistorySidebar({
291297 ) }
292298 </ div >
293299
294- < div className = " theme-border border-t p-4" >
295- < div className = " flex items-center justify-between mb-3" >
300+ < div className = { ` theme-border border-t p-4 ${ isCollapsed ? 'flex flex-col items-center' : '' } ` } >
301+ < div className = { ` flex items-center justify-between mb-3 w-full ${ isCollapsed ? 'flex-col gap-3' : '' } ` } >
296302 < div className = "flex items-center gap-2" >
297303 < Coins className = "w-4 h-4 text-[var(--color-primary)]" />
298- < h3 className = "theme-text-primary text-sm font-semibold" >
299- Transaction History
300- </ h3 >
301- </ div >
302- < div className = "flex items-center gap-1" >
303- < button
304- type = "button"
305- onClick = { handleExportTransactions }
306- className = "theme-text-muted hover:bg-[var(--color-surface-muted)] p-1.5 rounded-md transition-colors"
307- title = "Export transaction history"
308- >
309- < Download className = "w-3.5 h-3.5" />
310- </ button >
311- < button
312- type = "button"
313- onClick = { clearEntries }
314- className = "theme-text-muted hover:bg-[var(--color-danger-soft)] p-1.5 rounded-md transition-colors"
315- title = "Clear transaction history"
316- >
317- < Trash2 className = "w-3.5 h-3.5" />
318- </ button >
304+ { ! isCollapsed && (
305+ < h3 className = "theme-text-primary text-sm font-semibold" >
306+ Transaction History
307+ </ h3 >
308+ ) }
319309 </ div >
310+ { ! isCollapsed && (
311+ < div className = "flex items-center gap-1" >
312+ < button
313+ type = "button"
314+ onClick = { handleExportTransactions }
315+ className = "theme-text-muted hover:bg-[var(--color-surface-muted)] p-1.5 rounded-md transition-colors"
316+ title = "Export transaction history"
317+ >
318+ < Download className = "w-3.5 h-3.5" />
319+ </ button >
320+ < button
321+ type = "button"
322+ onClick = { clearEntries }
323+ className = "theme-text-muted hover:bg-[var(--color-danger-soft)] p-1.5 rounded-md transition-colors"
324+ title = "Clear transaction history"
325+ >
326+ < Trash2 className = "w-3.5 h-3.5" />
327+ </ button >
328+ </ div >
329+ ) }
320330 </ div >
321331
322- { entries . length === 0 ? (
332+ { isCollapsed ? (
333+ < div className = "flex justify-center" >
334+ < div className = "w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-xs" >
335+ { entries . length }
336+ </ div >
337+ </ div >
338+ ) : entries . length === 0 ? (
323339 < EmptyState
324340 icon = { Coins }
325341 title = "No transactions yet"
@@ -401,15 +417,16 @@ export default function ChatHistorySidebar({
401417 < div className = "theme-border p-4 border-t transition-colors duration-300" >
402418 < button
403419 onClick = { ( ) => window . location . reload ( ) }
404- className = "theme-primary-button w-full flex items-center justify-center px-4 py-3 rounded-lg transition-all duration-200 font-medium hover:scale-[1.02]"
420+ className = { `theme-primary-button w-full flex items-center justify-center rounded-lg transition-all duration-200 font-medium hover:scale-[1.02] ${ isCollapsed ? 'p-2' : 'px-4 py-3' } ` }
421+ title = "New Conversation"
405422 >
406- < Plus className = " w-4 h-4 mr-2" />
407- New Conversation
423+ < Plus className = { ` w-4 h-4 ${ isCollapsed ? '' : ' mr-2' } ` } />
424+ { ! isCollapsed && " New Conversation" }
408425 </ button >
409426 </ div >
410427
411428 { showDeleteConfirm && (
412- < div className = "theme-overlay fixed inset-0 flex items-center justify-center z-50 backdrop-blur-sm" >
429+ < div className = "theme-overlay fixed inset-0 flex items-center justify-center z-[100] backdrop-blur-sm" >
413430 < div className = "theme-surface theme-border rounded-lg p-6 max-w-sm mx-4 shadow-2xl border" >
414431 < h3 className = "theme-text-primary text-lg font-semibold mb-2" >
415432 Delete Conversation
@@ -426,7 +443,7 @@ export default function ChatHistorySidebar({
426443 Cancel
427444 </ button >
428445 < button
429- onClick = { ( ) => handleDeleteSession ( showDeleteConfirm ) }
446+ onClick = { ( ) => showDeleteConfirm && handleDeleteSession ( showDeleteConfirm ) }
430447 className = "flex-1 px-4 py-2 text-white bg-red-600 hover:bg-red-700 rounded-lg transition-all duration-200 font-medium"
431448 >
432449 Delete
0 commit comments