Folder clarity (#3180)

* folder clarity

* k

web/src/app/chat/folders/FolderList.tsx

@@ -23,16 +23,22 @@ import { useRouter } from "next/navigation";
 import { CHAT_SESSION_ID_KEY } from "@/lib/drag/constants";
 import Cookies from "js-cookie";
 import { Popover } from "@/components/popover/Popover";
+import { ChatSession } from "../interfaces";
 const FolderItem = ({
   folder,
   currentChatId,
   isInitiallyExpanded,
   initiallySelected,
+  showShareModal,
+  showDeleteModal,
 }: {
   folder: Folder;
   currentChatId?: string;
   isInitiallyExpanded: boolean;
   initiallySelected: boolean;
+
+  showShareModal: ((chatSession: ChatSession) => void) | undefined;
+  showDeleteModal: ((chatSession: ChatSession) => void) | undefined;
 }) => {
   const [isExpanded, setIsExpanded] = useState<boolean>(isInitiallyExpanded);
   const [isEditing, setIsEditing] = useState<boolean>(initiallySelected);
@@ -161,6 +167,9 @@ const FolderItem = ({
     return a.time_created.localeCompare(b.time_created);
   });
 
+  // Determine whether to show the trash can icon
+  const showTrashIcon = (isHovering && !isEditing) || showDeleteConfirm;
+
   return (
     <div
       key={folder.folder_id}
@@ -206,55 +215,60 @@ const FolderItem = ({
                   {editedFolderName || folder.folder_name}
                 </div>
               )}
-              {isHovering && !isEditing && (
+
-                <div className="flex ml-auto my-auto">
+              <div className="flex ml-auto my-auto">
-                  <div
+                <div
-                    onClick={handleEditFolderName}
+                  onClick={handleEditFolderName}
-                    className="hover:bg-black/10 p-1 -m-1 rounded"
+                  className={`hover:bg-black/10 p-1 -m-1 rounded ${
-                  >
+                    isHovering && !isEditing
-                    <FiEdit2 size={16} />
+                      ? ""
-                  </div>
+                      : "opacity-0 pointer-events-none"
-                  <div className="relative">
+                  }`}
-                    <Popover
+                >
-                      open={showDeleteConfirm}
+                  <FiEdit2 size={16} />
-                      onOpenChange={setShowDeleteConfirm}
-                      content={
-                        <div
-                          onClick={handleDeleteClick}
-                          className="hover:bg-black/10 p-1 -m-1 rounded ml-2"
-                        >
-                          <FiTrash size={16} />
-                        </div>
-                      }
-                      popover={
-                        <div className="p-2 w-[225px] bg-background-100 rounded shadow-lg">
-                          <p className="text-sm mb-2">
-                            Are you sure you want to delete{" "}
-                            <i>{folder.folder_name}</i>? All the content inside
-                            this folder will also be deleted.
-                          </p>
-                          <div className="flex justify-end">
-                            <button
-                              onClick={confirmDelete}
-                              className="bg-red-500 hover:bg-red-600 text-white px-2 py-1 rounded text-xs mr-2"
-                            >
-                              Yes
-                            </button>
-                            <button
-                              onClick={cancelDelete}
-                              className="bg-gray-300 hover:bg-gray-200 px-2 py-1 rounded text-xs"
-                            >
-                              No
-                            </button>
-                          </div>
-                        </div>
-                      }
-                      side="top"
-                      align="center"
-                    />
-                  </div>
                 </div>
-              )}
+
+                <div className="relative">
+                  <Popover
+                    open={showDeleteConfirm}
+                    onOpenChange={setShowDeleteConfirm}
+                    content={
+                      <div
+                        onClick={handleDeleteClick}
+                        className={`hover:bg-black/10 p-1 -m-1 rounded ml-2 ${
+                          showTrashIcon ? "" : "opacity-0 pointer-events-none"
+                        }`}
+                      >
+                        <FiTrash size={16} />
+                      </div>
+                    }
+                    popover={
+                      <div className="p-2 w-[225px] bg-background-100 rounded shadow-lg">
+                        <p className="text-sm mb-2">
+                          Are you sure you want to delete folder{" "}
+                          <i>{folder.folder_name}</i>?
+                        </p>
+                        <div className="flex justify-end">
+                          <button
+                            onClick={confirmDelete}
+                            className="bg-red-500 hover:bg-red-600 text-white px-2 py-1 rounded text-xs mr-2"
+                          >
+                            Yes
+                          </button>
+                          <button
+                            onClick={cancelDelete}
+                            className="bg-gray-300 hover:bg-gray-200 px-2 py-1 rounded text-xs"
+                          >
+                            No
+                          </button>
+                        </div>
+                      </div>
+                    }
+                    side="top"
+                    align="center"
+                  />
+                </div>
+              </div>
 
               {isEditing && (
                 <div className="flex ml-auto my-auto">
@@ -276,6 +290,8 @@ const FolderItem = ({
           </div>
         </div>
       </BasicSelectable>
+
+      {/* Expanded Folder Content */}
       {isExpanded && folders && (
         <div className={"ml-2 pl-2 border-l border-border"}>
           {folders.map((chatSession) => (
@@ -284,6 +300,8 @@ const FolderItem = ({
               chatSession={chatSession}
               isSelected={chatSession.id === currentChatId}
               skipGradient={isDragOver}
+              showShareModal={showShareModal}
+              showDeleteModal={showDeleteModal}
             />
           ))}
         </div>
@@ -297,11 +315,15 @@ export const FolderList = ({
   currentChatId,
   openedFolders,
   newFolderId,
+  showShareModal,
+  showDeleteModal,
 }: {
   folders: Folder[];
   currentChatId?: string;
   openedFolders?: { [key: number]: boolean };
   newFolderId: number | null;
+  showShareModal: ((chatSession: ChatSession) => void) | undefined;
+  showDeleteModal: ((chatSession: ChatSession) => void) | undefined;
 }) => {
   if (folders.length === 0) {
     return null;
@@ -318,6 +340,8 @@ export const FolderList = ({
           isInitiallyExpanded={
             openedFolders ? openedFolders[folder.folder_id] || false : false
           }
+          showShareModal={showShareModal}
+          showDeleteModal={showDeleteModal}
         />
       ))}
       {folders.length == 1 && folders[0].chat_sessions.length == 0 && (

web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx

@@ -191,7 +191,6 @@ export function ChatSessionDisplay({
                         </div>
                       </CustomTooltip>
                     )}
-
                     <div>
                       {search ? (
                         showDeleteModal && (

web/src/app/chat/sessionSidebar/PagesTab.tsx

@@ -74,6 +74,8 @@ export function PagesTab({
             folders={folders}
             currentChatId={currentChatId}
             openedFolders={openedFolders}
+            showShareModal={showShareModal}
+            showDeleteModal={showDeleteModal}
           />
         </div>
       )}