fix: add hover state on folder button when moving flow to it (#4999)

* ✨ (index.tsx): Refactor SideBarFoldersButtonsComponent to improve code readability and maintainability. Add new functionalities such as drag and drop, folder hovering effects, and folder actions like upload, download, add, update, and delete. Update folder state management and handle loading states for various folder operations.

* ✨ (add-folder-button.tsx): Add a new component for adding folders to the sidebar
✨ (folder-select-item.tsx): Add a new component for displaying folder select items in the sidebar
✨ (header-buttons.tsx): Add a new component for displaying header buttons in the sidebar
✨ (input-edit-folder-name.tsx): Add a new component for editing folder names in the sidebar
✨ (select-options.tsx): Add a new component for displaying select options in the sidebar
✨ (upload-folder-button.tsx): Add a new component for uploading folders to the sidebar
✨ (handle-select-change.ts): Add a new helper function for handling select changes in the sidebar
🔧 (index.tsx): Refactor sidebar folder buttons component to use new components and helpers for better organization and functionality

* ✨ (use-on-file-drop.tsx): add support for fetching and using flows specific to the current folder in the file drop functionality
📝 (use-get-folder.ts): update the get folder query to set and use flows specific to the current folder
📝 (foldersStore.tsx): add state management for storing and setting flows specific to the current folder in the store
📝 (index.ts): add FlowType import for flows specific to the current folder in the store types

* ✨ (flows.py): Add description field to the returned flow object in read_flows function for better data representation
♻️ (use-on-file-drop.tsx): Refactor code to use new centralized store for flows instead of accessing flowsFromCurrentFolder directly
🔧 (use-get-folder.ts): Remove setFlowsFromCurrentFolder function and directly update flows in the store within getFolderFn
🔧 (foldersStore.tsx): Remove flowsFromCurrentFolder state and setFlowsFromCurrentFolder function from the store as they are no longer needed

src/backend/base/langflow/api/v1/flows.py

@@ -222,7 +222,13 @@ async def read_flows(
                 flows = [flow for flow in flows if flow.folder_id != starter_folder_id]
             if header_flows:
                 return [
-                    {"id": flow.id, "name": flow.name, "folder_id": flow.folder_id, "is_component": flow.is_component}
+                    {
+                        "id": flow.id,
+                        "name": flow.name,
+                        "folder_id": flow.folder_id,
+                        "is_component": flow.is_component,
+                        "description": flow.description,
+                    }
                     for flow in flows
                 ]
             return flows

src/frontend/src/components/core/folderSidebarComponent/hooks/use-on-file-drop.tsx

@@ -17,8 +17,9 @@ const useFileDrop = (folderId: string) => {
 
   const myCollectionId = useFolderStore((state) => state.myCollectionId);
   const setErrorData = useAlertStore((state) => state.setErrorData);
-  const flows = useFlowsManagerStore((state) => state.flows);
   const saveFlow = useSaveFlow();
+  const flows = useFlowsManagerStore((state) => state.flows);
+
   const { mutate: uploadFlowToFolder } = usePostUploadFlowToFolder();
   const handleFileDrop = async (e, folderId) => {
     if (e.dataTransfer.types.some((type) => type === "Files")) {

src/frontend/src/types/zustand/folders/index.ts

@@ -1,3 +1,4 @@
+import { FlowType } from "@/types/flow";
 import { FolderType } from "../../../pages/MainPage/entities";
 
 export type FoldersStoreType = {