Merge pull request #422 from SujalXplores/feat/improve-sidebar

Feat/improve sidebar

app/components/sidebar/HistoryItem.tsx

@@ -1,5 +1,4 @@
 import * as Dialog from '@radix-ui/react-dialog';
-import { useEffect, useRef, useState } from 'react';
 import { type ChatHistoryItem } from '~/lib/persistence';
 import WithTooltip from '~/components/ui/Tooltip';
 
@@ -11,78 +10,46 @@ interface HistoryItemProps {
 }
 
 export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: HistoryItemProps) {
-  const [hovering, setHovering] = useState(false);
-  const hoverRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    let timeout: NodeJS.Timeout | undefined;
-
-    function mouseEnter() {
-      setHovering(true);
-
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-    }
-
-    function mouseLeave() {
-      setHovering(false);
-    }
-
-    hoverRef.current?.addEventListener('mouseenter', mouseEnter);
-    hoverRef.current?.addEventListener('mouseleave', mouseLeave);
-
-    return () => {
-      hoverRef.current?.removeEventListener('mouseenter', mouseEnter);
-      hoverRef.current?.removeEventListener('mouseleave', mouseLeave);
-    };
-  }, []);
-
   return (
-    <div
-      ref={hoverRef}
-      className="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"
-    >
+    <div className="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">
       <a href={`/chat/${item.urlId}`} className="flex w-full relative truncate block">
         {item.description}
         <div className="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-15 group-hover:from-99%">
-          {hovering && (
-            <div className="flex items-center p-1 text-bolt-elements-textSecondary">
-              <WithTooltip tooltip="Export chat">
+          <div className="flex items-center p-1 text-bolt-elements-textSecondary opacity-0 group-hover:opacity-100 transition-opacity">
+            <WithTooltip tooltip="Export chat">
+              <button
+                type="button"
+                className="i-ph:download-simple scale-110 mr-2 hover:text-bolt-elements-item-contentAccent"
+                onClick={(event) => {
+                  event.preventDefault();
+                  exportChat(item.id);
+                }}
+                title="Export chat"
+              />
+            </WithTooltip>
+            {onDuplicate && (
+              <WithTooltip tooltip="Duplicate chat">
                 <button
-                  className="i-ph:download-simple scale-110 mr-2"
-                  onClick={(event) => {
-                    event.preventDefault();
-                    exportChat(item.id);
-
-                    //exportChat(item.messages, item.description);
-                  }}
-                  title="Export chat"
+                  type="button"
+                  className="i-ph:copy scale-110 mr-2 hover:text-bolt-elements-item-contentAccent"
+                  onClick={() => onDuplicate?.(item.id)}
+                  title="Duplicate chat"
                 />
               </WithTooltip>
-              {onDuplicate && (
-                <WithTooltip tooltip="Duplicate chat">
-                  <button
-                    className="i-ph:copy scale-110 mr-2"
-                    onClick={() => onDuplicate?.(item.id)}
-                    title="Duplicate chat"
-                  />
-                </WithTooltip>
-              )}
-              <Dialog.Trigger asChild>
-                <WithTooltip tooltip="Delete chat">
-                  <button
-                    className="i-ph:trash scale-110"
-                    onClick={(event) => {
-                      // we prevent the default so we don't trigger the anchor above
-                      event.preventDefault();
-                      onDelete?.(event);
-                    }}
-                  />
-                </WithTooltip>
-              </Dialog.Trigger>
-            </div>
-          )}
+            )}
+            <Dialog.Trigger asChild>
+              <WithTooltip tooltip="Delete chat">
+                <button
+                  type="button"
+                  className="i-ph:trash scale-110 hover:text-bolt-elements-button-danger-text"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    onDelete?.(event);
+                  }}
+                />
+              </WithTooltip>
+            </Dialog.Trigger>
+          </div>
         </div>
       </a>
     </div>

app/components/sidebar/Menu.client.tsx

@@ -129,7 +129,7 @@ export function Menu() {
           </a>
         </div>
         <div className="text-bolt-elements-textPrimary font-medium pl-6 pr-5 my-2">Your Chats</div>
-        <div className="flex-1 overflow-scroll pl-4 pr-5 pb-5">
+        <div className="flex-1 overflow-auto pl-4 pr-5 pb-5">
           {list.length === 0 && <div className="pl-2 text-bolt-elements-textTertiary">No previous conversations</div>}
           <DialogRoot open={dialogContent !== null}>
             {binDates(list).map(({ category, items }) => (

app/components/ui/Tooltip.tsx

@@ -1,14 +1,15 @@
-import React from 'react';
 import * as Tooltip from '@radix-ui/react-tooltip';
-import type { ReactNode } from 'react';
 
-interface ToolTipProps {
-  tooltip: string;
-  children: ReactNode | ReactNode[];
+interface TooltipProps {
+  tooltip: React.ReactNode;
+  children: React.ReactNode;
   sideOffset?: number;
   className?: string;
   arrowClassName?: string;
-  tooltipStyle?: any; //TODO better type
+  tooltipStyle?: React.CSSProperties;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  maxWidth?: number;
+  delay?: number;
 }
 
 const WithTooltip = ({
@@ -18,18 +19,51 @@ const WithTooltip = ({
   className = '',
   arrowClassName = '',
   tooltipStyle = {},
-}: ToolTipProps) => {
+  position = 'top',
+  maxWidth = 250,
+  delay = 0,
+}: TooltipProps) => {
   return (
-    <Tooltip.Root>
+    <Tooltip.Root delayDuration={delay}>
       <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Content
-          className={`bg-bolt-elements-tooltip-background text-bolt-elements-textPrimary px-3 py-2 rounded-lg text-sm shadow-lg ${className}`}
+          side={position}
+          className={`
+            z-[2000]
+            px-2.5
+            py-1.5
+            max-h-[300px]
+            select-none
+            rounded-md
+            bg-bolt-elements-background-depth-3
+            text-bolt-elements-textPrimary
+            text-sm
+            leading-tight
+            shadow-lg
+            animate-in
+            fade-in-0
+            zoom-in-95
+            data-[state=closed]:animate-out
+            data-[state=closed]:fade-out-0
+            data-[state=closed]:zoom-out-95
+            ${className}
+          `}
           sideOffset={sideOffset}
-          style={{ zIndex: 2000, backgroundColor: 'white', ...tooltipStyle }}
+          style={{
+            maxWidth,
+            ...tooltipStyle,
+          }}
         >
-          {tooltip}
-          <Tooltip.Arrow className={`fill-bolt-elements-tooltip-background ${arrowClassName}`} />
+          <div className="break-words">{tooltip}</div>
+          <Tooltip.Arrow
+            className={`
+              fill-bolt-elements-background-depth-3
+              ${arrowClassName}
+            `}
+            width={12}
+            height={6}
+          />
         </Tooltip.Content>
       </Tooltip.Portal>
     </Tooltip.Root>