🎨 style: bookmarks UI update (#3479)

* style: bookmarks update; style(Files): minor update

* style: update conversation bookmarks

* style: fix w TableCell

client/src/components/SidePanel/Bookmarks/BookmarkTableRow.tsx

@@ -1,64 +1,22 @@
-import { useRef } from 'react';
+import React, { useState } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
-import type { FC } from 'react';
-import type { Identifier, XYCoord } from 'dnd-core';
 import type { TConversationTag } from 'librechat-data-provider';
 import { DeleteBookmarkButton, EditBookmarkButton } from '~/components/Bookmarks';
-import { useConversationTagMutation } from '~/data-provider';
-import { NotificationSeverity } from '~/common';
-import { useToastContext } from '~/Providers';
-import { useLocalize } from '~/hooks';
-import { cn } from '~/utils';
+import { TableRow, TableCell } from '~/components/ui';
 
-export const ItemTypes = {
-  CARD: 'card',
-};
-
-export interface BookmarkItemProps {
-  position: number;
-  moveRow: (dragIndex: number, hoverIndex: number) => void;
+interface BookmarkTableRowProps {
   row: TConversationTag;
+  moveRow: (dragIndex: number, hoverIndex: number) => void;
+  position: number;
 }
 
-interface DragItem {
-  index: number;
-  id: string;
-  type: string;
-}
+const BookmarkTableRow: React.FC<BookmarkTableRowProps> = ({ row, moveRow, position }) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const ref = React.useRef<HTMLTableRowElement>(null);
 
-const BookmarkTableRow: FC<BookmarkItemProps> = ({ position, moveRow, row, ...rest }) => {
-  const ref = useRef<HTMLTableRowElement>(null);
-
-  const mutation = useConversationTagMutation(row.tag);
-  const localize = useLocalize();
-  const { showToast } = useToastContext();
-
-  const handleDrop = (item: DragItem) => {
-    const data = {
-      ...row,
-      position: item.index,
-    };
-    mutation.mutate(data, {
-      onError: () => {
-        showToast({
-          message: localize('com_endpoint_preset_save_error'),
-          severity: NotificationSeverity.ERROR,
-        });
-      },
-    });
-  };
-
-  const [{ handlerId }, drop] = useDrop<DragItem, void, { handlerId: Identifier | null }>({
-    accept: ItemTypes.CARD,
-    collect(monitor) {
-      return {
-        handlerId: monitor.getHandlerId(),
-      };
-    },
-    drop(item: DragItem, monitor) {
-      handleDrop(item);
-    },
-    hover(item: DragItem, monitor) {
+  const [, drop] = useDrop({
+    accept: 'bookmark',
+    hover(item: { index: number }) {
       if (!ref.current) {
         return;
       }
@@ -67,68 +25,60 @@ const BookmarkTableRow: FC<BookmarkItemProps> = ({ position, moveRow, row, ...re
       if (dragIndex === hoverIndex) {
         return;
       }
-
-      const hoverBoundingRect = ref.current?.getBoundingClientRect();
-
-      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-
-      const clientOffset = monitor.getClientOffset();
-
-      const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
-
-      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
-        return;
-      }
-      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-        return;
-      }
-
       moveRow(dragIndex, hoverIndex);
-
       item.index = hoverIndex;
     },
   });
 
   const [{ isDragging }, drag] = useDrag({
-    type: ItemTypes.CARD,
-    item: () => {
-      return { id: row.tag, index: position };
-    },
+    type: 'bookmark',
+    item: { index: position },
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
   });
 
-  if (position > 0) {
-    drag(drop(ref));
-  }
+  drag(drop(ref));
 
   return (
-    <tr
-      className={cn(
-        'group cursor-pointer gap-2 rounded text-sm hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5',
-        isDragging ? 'opacity-0' : 'opacity-100',
-      )}
-      key={row.tag}
+    <TableRow
       ref={ref}
-      data-handler-id={handlerId}
-      role="menuitem"
-      tabIndex={-1}
-      {...rest}
+      className="cursor-move hover:bg-gray-100 dark:hover:bg-gray-800"
+      style={{ opacity: isDragging ? 0.5 : 1 }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
-      <td className="w-96 py-2 pl-6 pr-3">{row.tag}</td>
-      <td className={cn('w-28 py-2 pl-4 pr-3 sm:pl-6')}>
-        <span className="py-1">{row.count}</span>
-      </td>
-      <td className="flex-grow py-2 pl-4 pr-4 sm:pl-6">
-        {position > 0 && (
-          <div className="flex w-full items-center justify-end gap-2 py-1 text-gray-400">
-            <EditBookmarkButton bookmark={row} />
-            <DeleteBookmarkButton bookmark={row.tag} />
+      <TableCell className="w-full px-3 py-3.5 pl-6">
+        <div className="truncate">{row.tag}</div>
+      </TableCell>
+      <TableCell className="w-full px-3 py-3.5 sm:pl-6">
+        <div className="flex items-center justify-between py-1">
+          <div>{row.count}</div>
+          <div
+            className="flex items-center gap-2"
+            style={{
+              opacity: isHovered ? 1 : 0,
+              transition: 'opacity 0.1s ease-in-out',
+            }}
+            onFocus={() => setIsHovered(true)}
+            onBlur={() => setIsHovered(false)}
+          >
+            <EditBookmarkButton
+              bookmark={row}
+              tabIndex={0}
+              onFocus={() => setIsHovered(true)}
+              onBlur={() => setIsHovered(false)}
+            />
+            <DeleteBookmarkButton
+              bookmark={row.tag}
+              tabIndex={0}
+              onFocus={() => setIsHovered(true)}
+              onBlur={() => setIsHovered(false)}
+            />
           </div>
-        )}
-      </td>
-    </tr>
+        </div>
+      </TableCell>
+    </TableRow>
   );
 };