From b3d2453e7fbc9a6bdc13a2611fb5be75db9f654d Mon Sep 17 00:00:00 2001
From: Mathew Pareles <mathewpareles@gmail.com>
Date: Sun, 12 Jan 2025 19:02:26 -0800
Subject: [PATCH] history style

---
 .../react/src/sidebar-tsx/SidebarChat.tsx     |   1 -
 .../src/sidebar-tsx/SidebarThreadSelector.tsx | 109 ++++++++++--------
 2 files changed, 64 insertions(+), 46 deletions(-)

diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
index f1c6f391..db450b95 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
@@ -51,7 +51,6 @@ export const IconX = ({ size, className = '', ...props }: { size: number, classN
 	);
 };
 
-
 const IconArrowUp = ({ size, className = '' }: { size: number, className?: string }) => {
 	return (
 		<svg
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarThreadSelector.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarThreadSelector.tsx
index 0526178c..10372fa6 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarThreadSelector.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarThreadSelector.tsx
@@ -7,6 +7,7 @@ import React from "react";
 import { useAccessor, useThreadsState } from '../util/services.js';
 import { IThreadHistoryService } from '../../../threadHistoryService.js';
 import { ISidebarStateService } from '../../../sidebarStateService.js';
+import { IconX } from './SidebarChat.js';
 
 
 const truncate = (s: string) => {
@@ -31,61 +32,79 @@ export const SidebarThreadSelector = () => {
 	const sortedThreadIds = Object.keys(allThreads ?? {}).sort((threadId1, threadId2) => allThreads![threadId1].lastModified > allThreads![threadId2].lastModified ? -1 : 1)
 
 	return (
-		<div className="flex flex-col gap-y-1 max-h-[400px] overflow-y-auto">
+		<div className="flex p-2 flex-col  gap-y-1 max-h-[400px] overflow-y-auto">
 
-			{/* X button at top right */}
-			<div className="text-right">
-				<button className="btn btn-sm" onClick={() => sidebarStateService.setState({ isHistoryOpen: false })}>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-						className="size-4"
-					>
-						<path
-							strokeLinecap="round"
-							strokeLinejoin="round"
-							d="M6 18 18 6M6 6l12 12"
-						/>
-					</svg>
+			<div className="w-full relative flex justify-center items-center">
+				{/* title */}
+				<h2 className='font-bold text-lg'>{`History`}</h2>
+				{/* X button at top right */}
+				<button
+					type='button'
+					className='absolute top-0 right-0'
+					onClick={() => sidebarStateService.setState({ isHistoryOpen: false })}
+				>
+					<IconX
+						size={16}
+						className="p-[1px] stroke-[2] opacity-80 text-void-fg-3 hover:brightness-95"
+					/>
 				</button>
 			</div>
 
 			{/* a list of all the past threads */}
-			<div className='px-1'><div className='flex flex-col gap-y-1 overflow-y-auto'>
-				{sortedThreadIds.map((threadId) => {
-					if (!allThreads)
-						return <>Error: Threads not found.</>
-					const pastThread = allThreads[threadId]
 
-					let firstMsg: string | null = null
-					let secondMsg: string | null = null
+			<div className="px-1">
+				<ul className="flex flex-col gap-y-1 overflow-y-auto list-disc pl-4">
+					{sortedThreadIds.map((threadId) => {
+						if (!allThreads) {
+							return <li key="error" className="text-void-warning">{`No history found.`}</li>;
+						}
 
-					const firstMsgIdx = allThreads[threadId].messages.findIndex(msg => msg.role !== 'system' && !!msg.displayContent) ?? ''
-					if (firstMsgIdx !== -1)
-						firstMsg = truncate(allThreads[threadId].messages[firstMsgIdx].displayContent ?? '')
-					else
-						firstMsg = '""'
+						const pastThread = allThreads[threadId];
+						let firstMsg = null;
+						let secondMsg = null;
 
-					const secondMsgIdx = allThreads[threadId].messages.findIndex((msg, i) => msg.role !== 'system' && !!msg.displayContent && i > firstMsgIdx) ?? ''
-					if (secondMsgIdx !== -1)
-						secondMsg = truncate(allThreads[threadId].messages[secondMsgIdx].displayContent ?? '')
+						const firstMsgIdx = pastThread.messages.findIndex(
+							(msg) => msg.role !== 'system' && !!msg.displayContent
+						);
 
-					const numMessages = allThreads[threadId].messages.filter((msg, i) => msg.role !== 'system').length
+						if (firstMsgIdx !== -1) {
+							firstMsg = truncate(pastThread.messages[firstMsgIdx].displayContent ?? '');
+						} else {
+							firstMsg = '""';
+						}
 
-					return (
-						<button
-							key={pastThread.id}
-							className={`rounded-sm`}
-							onClick={() => threadsStateService.switchToThread(pastThread.id)}
-							title={new Date(pastThread.createdAt).toLocaleString()}
-						>
-							{`${firstMsg} (${numMessages})`}
-						</button>
-					)
-				})}
-			</div></div>
+						const secondMsgIdx = pastThread.messages.findIndex(
+							(msg, i) => msg.role !== 'system' && !!msg.displayContent && i > firstMsgIdx
+						);
+
+						if (secondMsgIdx !== -1) {
+							secondMsg = truncate(pastThread.messages[secondMsgIdx].displayContent ?? '');
+						}
+
+						const numMessages = pastThread.messages.filter(
+							(msg) => msg.role !== 'system'
+						).length;
+
+						return (
+							<li key={pastThread.id}>
+								<button
+									className={`
+										hover:bg-void-bg-1
+										${threadsState._currentThreadId === pastThread.id ? 'bg-void-bg-1' : ''}
+										rounded-sm px-2 py-1
+										w-full
+										text-left
+									`}
+									onClick={() => threadsStateService.switchToThread(pastThread.id)}
+									title={new Date(pastThread.createdAt).toLocaleString()}
+								>
+									{`${firstMsg} (${numMessages})`}
+								</button>
+							</li>
+						);
+					})}
+				</ul>
+			</div>
 
 		</div>
 	)