Major UI improvements

app/components/sidebar/HistoryItem.tsx

@@ -24,47 +24,45 @@ export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: History
       syncWithGlobalStore: isActiveChat,
     });
 
-  const renderDescriptionForm = (
-    <form onSubmit={handleSubmit} className="flex-1 flex items-center">
-      <input
-        type="text"
-        className="flex-1 bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 mr-2"
-        autoFocus
-        value={currentDescription}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        onKeyDown={handleKeyDown}
-      />
-      <button
-        type="submit"
-        className="i-ph:check scale-110 hover:text-bolt-elements-item-contentAccent"
-        onMouseDown={handleSubmit}
-      />
-    </form>
-  );
-
   return (
     <div
       className={classNames(
-        'group rounded-md text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 overflow-hidden flex justify-between items-center px-2 py-1',
-        { '[&&]:text-bolt-elements-textPrimary bg-bolt-elements-background-depth-3': isActiveChat },
+        'group rounded-lg text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50/80 dark:hover:bg-gray-800/30 overflow-hidden flex justify-between items-center px-3 py-2 transition-colors',
+        { 'text-gray-900 dark:text-white bg-gray-50/80 dark:bg-gray-800/30': isActiveChat },
       )}
     >
       {editing ? (
-        renderDescriptionForm
+        <form onSubmit={handleSubmit} className="flex-1 flex items-center gap-2">
+          <input
+            type="text"
+            className="flex-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white rounded-md px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-800 focus:outline-none focus:ring-1 focus:ring-purple-500/50"
+            autoFocus
+            value={currentDescription}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            onKeyDown={handleKeyDown}
+          />
+          <button
+            type="submit"
+            className="i-ph:check h-4 w-4 text-gray-500 hover:text-purple-500 transition-colors"
+            onMouseDown={handleSubmit}
+          />
+        </form>
       ) : (
         <a href={`/chat/${item.urlId}`} className="flex w-full relative truncate block">
-          {currentDescription}
+          <WithTooltip tooltip={currentDescription}>
+            <span className="truncate pr-24">{currentDescription}</span>
+          </WithTooltip>
           <div
             className={classNames(
-              'absolute right-0 z-1 top-0 bottom-0 bg-gradient-to-l from-bolt-elements-background-depth-2 group-hover:from-bolt-elements-background-depth-3 box-content pl-3 to-transparent w-10 flex justify-end group-hover:w-22 group-hover:from-99%',
-              { 'from-bolt-elements-background-depth-3 w-10 ': isActiveChat },
+              'absolute right-0 top-0 bottom-0 flex items-center bg-white dark:bg-gray-950 group-hover:bg-gray-50/80 dark:group-hover:bg-gray-800/30 px-2',
+              { 'bg-gray-50/80 dark:bg-gray-800/30': isActiveChat },
             )}
           >
-            <div className="flex items-center p-1 text-bolt-elements-textSecondary opacity-0 group-hover:opacity-100 transition-opacity">
+            <div className="flex items-center gap-2.5 text-gray-400 dark:text-gray-500 opacity-0 group-hover:opacity-100 transition-opacity">
               <ChatActionButton
-                toolTipContent="Export chat"
-                icon="i-ph:download-simple"
+                toolTipContent="Export"
+                icon="i-ph:download-simple h-4 w-4"
                 onClick={(event) => {
                   event.preventDefault();
                   exportChat(item.id);
@@ -72,14 +70,14 @@ export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: History
               />
               {onDuplicate && (
                 <ChatActionButton
-                  toolTipContent="Duplicate chat"
-                  icon="i-ph:copy"
+                  toolTipContent="Duplicate"
+                  icon="i-ph:copy h-4 w-4"
                   onClick={() => onDuplicate?.(item.id)}
                 />
               )}
               <ChatActionButton
-                toolTipContent="Rename chat"
-                icon="i-ph:pencil-fill"
+                toolTipContent="Rename"
+                icon="i-ph:pencil-fill h-4 w-4"
                 onClick={(event) => {
                   event.preventDefault();
                   toggleEditMode();
@@ -87,9 +85,9 @@ export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: History
               />
               <Dialog.Trigger asChild>
                 <ChatActionButton
-                  toolTipContent="Delete chat"
-                  icon="i-ph:trash"
-                  className="[&&]:hover:text-bolt-elements-button-danger-text"
+                  toolTipContent="Delete"
+                  icon="i-ph:trash h-4 w-4"
+                  className="hover:text-red-500"
                   onClick={(event) => {
                     event.preventDefault();
                     onDelete?.(event);
@@ -121,11 +119,11 @@ const ChatActionButton = forwardRef(
     ref: ForwardedRef<HTMLButtonElement>,
   ) => {
     return (
-      <WithTooltip tooltip={toolTipContent}>
+      <WithTooltip tooltip={toolTipContent} position="bottom" sideOffset={4}>
         <button
           ref={ref}
           type="button"
-          className={`scale-110 mr-2 hover:text-bolt-elements-item-contentAccent ${icon} ${className ? className : ''}`}
+          className={`text-gray-400 dark:text-gray-500 hover:text-purple-500 dark:hover:text-purple-400 transition-colors ${icon} ${className ? className : ''}`}
           onClick={onClick}
         />
       </WithTooltip>