[STYLE] Document picker UI improvements (#1700)

* rework document picker ui

* refactor tooltips to use react-tooltip lib with custom elements

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>

frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx

@@ -1,26 +1,13 @@
-import { useState } from "react";
+import React from "react";
 import {
   formatDate,
   getFileExtension,
   middleTruncate,
 } from "@/utils/directories";
 import { File } from "@phosphor-icons/react";
-import debounce from "lodash.debounce";
+import { Tooltip } from "react-tooltip";
 
 export default function FileRow({ item, selected, toggleSelection }) {
-  const [showTooltip, setShowTooltip] = useState(false);
-
-  const handleShowTooltip = () => {
-    setShowTooltip(true);
-  };
-
-  const handleHideTooltip = () => {
-    setShowTooltip(false);
-  };
-
-  const handleMouseEnter = debounce(handleShowTooltip, 500);
-  const handleMouseLeave = debounce(handleHideTooltip, 500);
-
   return (
     <tr
       onClick={() => toggleSelection(item)}
@@ -28,7 +15,10 @@ export default function FileRow({ item, selected, toggleSelection }) {
         selected ? "selected" : ""
       }`}
     >
-      <div className="pl-2 col-span-6 flex gap-x-[4px] items-center">
+      <div
+        data-tooltip-id={`directory-item-${item.url}`}
+        className="col-span-10 w-fit flex gap-x-[4px] items-center relative"
+      >
         <div
           className="shrink-0 w-3 h-3 rounded border-[1px] border-white flex justify-center items-center cursor-pointer"
           role="checkbox"
@@ -41,34 +31,35 @@ export default function FileRow({ item, selected, toggleSelection }) {
           className="shrink-0 text-base font-bold w-4 h-4 mr-[3px]"
           weight="fill"
         />
-        <div
-          className="relative"
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-        >
-          <p className="whitespace-nowrap overflow-hidden max-w-[165px] text-ellipsis">
-            {middleTruncate(item.title, 17)}
-          </p>
-          {showTooltip && (
-            <div className="absolute left-0 bg-white text-black p-1.5 rounded shadow-lg whitespace-nowrap">
-              {item.title}
-            </div>
-          )}
-        </div>
+        <p className="whitespace-nowrap overflow-hidden text-ellipsis">
+          {middleTruncate(item.title, 60)}
+        </p>
       </div>
-      <p className="col-span-3 pl-3.5 whitespace-nowrap">
-        {formatDate(item?.published)}
-      </p>
-      <p className="col-span-2 pl-2 uppercase overflow-x-hidden">
-        {getFileExtension(item.url)}
-      </p>
-      <div className="-col-span-2 flex justify-end items-center">
+      <div className="col-span-2 flex justify-end items-center">
         {item?.cached && (
           <div className="bg-white/10 rounded-3xl">
             <p className="text-xs px-2 py-0.5">Cached</p>
           </div>
         )}
       </div>
+      <Tooltip
+        id={`directory-item-${item.url}`}
+        place="bottom"
+        delayShow={800}
+        className="tooltip invert z-99"
+      >
+        <div className="text-xs ">
+          <p className="text-white">{item.title}</p>
+          <div className="flex mt-1 gap-x-2">
+            <p className="">
+              Date: <b>{formatDate(item?.published)}</b>
+            </p>
+            <p className="">
+              Type: <b>{getFileExtension(item.url).toUpperCase()}</b>
+            </p>
+          </div>
+        </div>
+      </Tooltip>
     </tr>
   );
 }

frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx

@@ -203,8 +203,6 @@ function Directory({
         <div className="relative w-[560px] h-[310px] bg-zinc-900 rounded-2xl overflow-hidden">
           <div className="absolute top-0 left-0 right-0 z-10 rounded-t-2xl text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 shadow-lg bg-zinc-900">
             <p className="col-span-6">Name</p>
-            <p className="col-span-3">Date</p>
-            <p className="col-span-2">Kind</p>
           </div>
 
           <div className="overflow-y-auto h-full pt-8">

frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx

@@ -6,9 +6,8 @@ import {
 } from "@/utils/directories";
 import { ArrowUUpLeft, File, PushPin } from "@phosphor-icons/react";
 import Workspace from "@/models/workspace";
-import debounce from "lodash.debounce";
-import { Tooltip } from "react-tooltip";
 import showToast from "@/utils/toast";
+import { Tooltip } from "react-tooltip";
 
 export default function WorkspaceFileRow({
   item,
@@ -20,8 +19,6 @@ export default function WorkspaceFileRow({
   hasChanges,
   movedItems,
 }) {
-  const [showTooltip, setShowTooltip] = useState(false);
-
   const onRemoveClick = async () => {
     setLoading(true);
 
@@ -40,62 +37,57 @@ export default function WorkspaceFileRow({
     setLoading(false);
   };
 
-  const handleShowTooltip = () => {
-    setShowTooltip(true);
-  };
-
-  const handleHideTooltip = () => {
-    setShowTooltip(false);
-  };
-
   const isMovedItem = movedItems?.some((movedItem) => movedItem.id === item.id);
-  const handleMouseEnter = debounce(handleShowTooltip, 500);
-  const handleMouseLeave = debounce(handleHideTooltip, 500);
   return (
     <div
-      className={`items-center text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer
-          ${isMovedItem ? "bg-green-800/40" : "file-row"}`}
+      className={`items-center text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer ${
+        isMovedItem ? "bg-green-800/40" : "file-row"
+      }`}
     >
-      <div className="col-span-5 flex gap-x-[4px] items-center">
+      <div
+        data-tooltip-id={`directory-item-${item.url}`}
+        className="col-span-10 w-fit flex gap-x-[4px] items-center relative"
+      >
         <File
-          className="text-base font-bold w-4 h-4 ml-3 mr-[3px]"
+          className="shrink-0 text-base font-bold w-4 h-4 mr-[3px] ml-3"
           weight="fill"
         />
-        <div
-          className="relative"
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-        >
-          <p className="whitespace-nowrap overflow-hidden max-w-[165px] text-ellipsis">
-            {middleTruncate(item.title, 17)}
-          </p>
-          {showTooltip && (
-            <div className="absolute left-0 bg-white text-black p-1.5 rounded shadow-lg whitespace-nowrap">
-              {item.title}
-            </div>
-          )}
-        </div>
+        <p className="whitespace-nowrap overflow-hidden text-ellipsis">
+          {middleTruncate(item.title, 60)}
+        </p>
       </div>
-      <p className="col-span-3 pl-3.5 whitespace-nowrap">
-        {formatDate(item?.published)}
-      </p>
-      <p className="col-span-2 pl-2 uppercase overflow-x-hidden">
-        {getFileExtension(item.url)}
-      </p>
-      <div className="col-span-2 flex justify-center items-center">
+      <div className="col-span-2 flex justify-end items-center">
         {hasChanges ? (
           <div className="w-4 h-4 ml-2 flex-shrink-0" />
         ) : (
           <div className="flex gap-x-2 items-center">
             <PinItemToWorkspace
               workspace={workspace}
-              docPath={`${folderName}/${item.name}`} // how to find documents during pin/unpin
+              docPath={`${folderName}/${item.name}`}
               item={item}
             />
             <RemoveItemFromWorkspace item={item} onClick={onRemoveClick} />
           </div>
         )}
       </div>
+      <Tooltip
+        id={`directory-item-${item.url}`}
+        place="bottom"
+        delayShow={800}
+        className="tooltip invert z-99"
+      >
+        <div className="text-xs ">
+          <p className="text-white">{item.title}</p>
+          <div className="flex mt-1 gap-x-2">
+            <p className="">
+              Date: <b>{formatDate(item?.published)}</b>
+            </p>
+            <p className="">
+              Type: <b>{getFileExtension(item.url).toUpperCase()}</b>
+            </p>
+          </div>
+        </div>
+      </Tooltip>
     </div>
   );
 }

frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx

@@ -31,8 +31,6 @@ function WorkspaceDirectory({
         <div className="relative w-[560px] h-[445px] bg-zinc-900 rounded-2xl mt-5">
           <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-8">
             <p className="col-span-5">Name</p>
-            <p className="col-span-3">Date</p>
-            <p className="col-span-2">Kind</p>
             <p className="col-span-2" />
           </div>
           <div className="w-full h-full flex items-center justify-center flex-col gap-y-5">
@@ -61,8 +59,6 @@ function WorkspaceDirectory({
         >
           <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 bg-zinc-900 sticky top-0 z-10">
             <p className="col-span-5">Name</p>
-            <p className="col-span-3">Date</p>
-            <p className="col-span-2">Kind</p>
             <p className="col-span-2" />
           </div>
           <div className="w-full h-full flex flex-col z-0">