added trash features

2024-06-29 01:13:23 -04:00
parent 9f0821253d
commit 576d92f724
26 changed files with 624 additions and 173 deletions
@@ -401,10 +401,12 @@ class FileController {
    try {
      const userID = req.user._id;
      let searchQuery = req.query.search || "";
+      const trashMode = req.query.trashMode === "true";

      const { fileList, folderList } = await fileService.getSuggestedList(
        userID,
-        searchQuery
+        searchQuery,
+        trashMode
      );

      return res.send({ folderList, fileList });
@@ -133,10 +133,15 @@ class DbUtil {
    return user;
  };

-  getFileSearchList = async (userID: string, searchQuery: RegExp) => {
+  getFileSearchList = async (
+    userID: string,
+    searchQuery: RegExp,
+    trashMode: boolean
+  ) => {
    let query: any = {
      "metadata.owner": userID,
      filename: searchQuery,
+      "metadata.trashed": trashMode ? true : null,
    };

    const fileList = (await conn.db
@@ -4,8 +4,16 @@ import { ObjectId } from "mongodb";
 class DbUtil {
  constructor() {}

-  getFolderSearchList = async (userID: string, searchQuery: RegExp) => {
-    let query: any = { owner: userID, name: searchQuery };
+  getFolderSearchList = async (
+    userID: string,
+    searchQuery: RegExp,
+    trashMode: boolean
+  ) => {
+    let query: any = {
+      owner: userID,
+      name: searchQuery,
+      trashed: trashMode ? true : null,
+    };

    const folderList = (await Folder.find(query).limit(
      10
@@ -75,7 +83,8 @@ class DbUtil {
    storageType: string,
    folderSearch: boolean,
    itemType: string,
-    s3Enabled: boolean
+    s3Enabled: boolean,
+    trashMode: boolean
  ) => {
    let query: any = { name: searchQuery, owner: userID };

@@ -105,6 +114,12 @@ class DbUtil {
        query = { ...query, personalFolder: null };
    }

+    if (trashMode) {
+      query = { ...query, trashed: true };
+    } else {
+      query = { ...query, trashed: null };
+    }
+
    const folderList = (await Folder.find(query).sort(
      sortBy
    )) as FolderInterface[];
@@ -203,13 +203,22 @@ class MongoFileService {
    await removedTokenUser.save();
  };

-  getSuggestedList = async (userID: string, searchQuery: any) => {
+  getSuggestedList = async (
+    userID: string,
+    searchQuery: any,
+    trashMode: boolean
+  ) => {
    searchQuery = new RegExp(searchQuery, "i");

-    const fileList = await dbUtilsFile.getFileSearchList(userID, searchQuery);
+    const fileList = await dbUtilsFile.getFileSearchList(
+      userID,
+      searchQuery,
+      trashMode
+    );
    const folderList = await dbUtilsFolder.getFolderSearchList(
      userID,
-      searchQuery
+      searchQuery,
+      trashMode
    );

    if (!fileList || !folderList)
@@ -153,7 +153,8 @@ class FolderService {
        storageType,
        folderSearch,
        itemType,
-        s3Enabled
+        s3Enabled,
+        trashMode
      );

      if (!folderList) throw new NotFoundError("Folder List Not Found Error");
@@ -1,10 +1,10 @@
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="Group 11">
-<path id="Fill 1" fill-rule="evenodd" clip-rule="evenodd" d="M17.0572 1.12116C17.0572 0.502903 16.5534 0 15.9351 0H1.123C0.503825 0 0 0.502903 0 1.12116V4.37211C0 4.99036 0.502904 5.49327 1.123 5.49327H15.9351C16.5534 5.49327 17.0572 4.99036 17.0572 4.37211V1.12116ZM15.8466 1.21067V4.28256H1.21253L1.21161 1.21067H15.8466Z" fill="#3c85ee"/>
-<path id="Fill 2" fill-rule="evenodd" clip-rule="evenodd" d="M12.22 2.97864H14.5297C14.7271 2.97864 14.8859 2.81901 14.8859 2.62246V2.18138C14.8859 1.98391 14.7271 1.8252 14.5297 1.8252H12.2209C12.0235 1.8252 11.8648 1.98391 11.8648 2.18138V2.62246C11.8638 2.81993 12.0225 2.97864 12.22 2.97864Z" fill="#3c85ee"/>
-<path id="Fill 3" fill-rule="evenodd" clip-rule="evenodd" d="M15.9361 6.2417H1.123C0.503825 6.2417 0 6.74552 0 7.36286L0.000923647 10.6129C0.000923647 11.2302 0.503827 11.734 1.12392 11.734H15.9361C16.5543 11.734 17.0581 11.2302 17.0581 10.6129L17.0572 7.36286C17.0572 6.74552 16.5543 6.2417 15.9361 6.2417H15.9361ZM15.8466 7.45328V10.5223H1.21255L1.21163 7.45328H15.8466Z" fill="#3c85ee"/>
-<path id="Fill 4" fill-rule="evenodd" clip-rule="evenodd" d="M12.22 9.21845H14.5297C14.7271 9.21845 14.8859 9.05973 14.8859 8.86226V8.4221C14.8859 8.22647 14.7271 8.06592 14.5297 8.06592H12.2209C12.0235 8.06592 11.8648 8.22648 11.8648 8.4221V8.86226C11.8638 9.05973 12.0225 9.21845 12.22 9.21845Z" fill="#3c85ee"/>
-<path id="Fill 5" fill-rule="evenodd" clip-rule="evenodd" d="M1.123 17.9754H15.9351C16.5534 17.9754 17.0572 17.4716 17.0572 16.8542V13.6033C17.0572 12.985 16.5534 12.4821 15.9351 12.4821L1.123 12.4812C0.503825 12.4812 0 12.9841 0 13.6024V16.8533C0.000923647 17.4716 0.503825 17.9754 1.123 17.9754V17.9754ZM1.21158 16.7647V13.6919H15.8456V16.7647H1.21158Z" fill="#3c85ee"/>
-<path id="Fill 6" fill-rule="evenodd" clip-rule="evenodd" d="M14.5299 14.3074H12.2212C12.0237 14.3074 11.865 14.467 11.865 14.6636V15.1046C11.865 15.3021 12.0237 15.4599 12.2212 15.4599H14.5299C14.7274 15.4599 14.8861 15.3012 14.8861 15.1046V14.6636C14.8852 14.4661 14.7274 14.3074 14.5299 14.3074Z" fill="#3c85ee"/>
+<path id="Fill 1" fill-rule="evenodd" clip-rule="evenodd" d="M17.0572 1.12116C17.0572 0.502903 16.5534 0 15.9351 0H1.123C0.503825 0 0 0.502903 0 1.12116V4.37211C0 4.99036 0.502904 5.49327 1.123 5.49327H15.9351C16.5534 5.49327 17.0572 4.99036 17.0572 4.37211V1.12116ZM15.8466 1.21067V4.28256H1.21253L1.21161 1.21067H15.8466Z" fill="currentColor"/>
+<path id="Fill 2" fill-rule="evenodd" clip-rule="evenodd" d="M12.22 2.97864H14.5297C14.7271 2.97864 14.8859 2.81901 14.8859 2.62246V2.18138C14.8859 1.98391 14.7271 1.8252 14.5297 1.8252H12.2209C12.0235 1.8252 11.8648 1.98391 11.8648 2.18138V2.62246C11.8638 2.81993 12.0225 2.97864 12.22 2.97864Z" fill="currentColor"/>
+<path id="Fill 3" fill-rule="evenodd" clip-rule="evenodd" d="M15.9361 6.2417H1.123C0.503825 6.2417 0 6.74552 0 7.36286L0.000923647 10.6129C0.000923647 11.2302 0.503827 11.734 1.12392 11.734H15.9361C16.5543 11.734 17.0581 11.2302 17.0581 10.6129L17.0572 7.36286C17.0572 6.74552 16.5543 6.2417 15.9361 6.2417H15.9361ZM15.8466 7.45328V10.5223H1.21255L1.21163 7.45328H15.8466Z" fill="currentColor"/>
+<path id="Fill 4" fill-rule="evenodd" clip-rule="evenodd" d="M12.22 9.21845H14.5297C14.7271 9.21845 14.8859 9.05973 14.8859 8.86226V8.4221C14.8859 8.22647 14.7271 8.06592 14.5297 8.06592H12.2209C12.0235 8.06592 11.8648 8.22648 11.8648 8.4221V8.86226C11.8638 9.05973 12.0225 9.21845 12.22 9.21845Z" fill="currentColor"/>
+<path id="Fill 5" fill-rule="evenodd" clip-rule="evenodd" d="M1.123 17.9754H15.9351C16.5534 17.9754 17.0572 17.4716 17.0572 16.8542V13.6033C17.0572 12.985 16.5534 12.4821 15.9351 12.4821L1.123 12.4812C0.503825 12.4812 0 12.9841 0 13.6024V16.8533C0.000923647 17.4716 0.503825 17.9754 1.123 17.9754V17.9754ZM1.21158 16.7647V13.6919H15.8456V16.7647H1.21158Z" fill="currentColor"/>
+<path id="Fill 6" fill-rule="evenodd" clip-rule="evenodd" d="M14.5299 14.3074H12.2212C12.0237 14.3074 11.865 14.467 11.865 14.6636V15.1046C11.865 15.3021 12.0237 15.4599 12.2212 15.4599H14.5299C14.7274 15.4599 14.8861 15.3012 14.8861 15.1046V14.6636C14.8852 14.4661 14.7274 14.3074 14.5299 14.3074Z" fill="currentColor"/>
 </g>
 </svg>
@@ -84,11 +84,14 @@ export const getFileThumbnailAPI = async (thumbnailID: string) => {

 export const getSuggestedListAPI = async ({
  queryKey,
-}: QueryFunctionContext<[string, { searchText: string }]>) => {
-  const [_key, { searchText }] = queryKey;
+}: QueryFunctionContext<
+  [string, { searchText: string; trashMode: boolean }]
+>) => {
+  const [_key, { searchText, trashMode }] = queryKey;
  const response = await axios.get(`/file-service/suggested-list`, {
    params: {
      search: searchText,
+      trashMode,
    },
  });
  return response.data;
@@ -17,15 +17,23 @@ import {
  renameFolder,
  trashFolderAPI,
 } from "../../api/foldersAPI";
-import { useClickOutOfBounds } from "../../hooks/utils";
+import { useClickOutOfBounds, useUtils } from "../../hooks/utils";
 import { useAppDispatch } from "../../hooks/store";
 import { setMultiSelectMode } from "../../reducers/selected";
+import TrashIcon from "../../icons/TrashIcon";
+import MultiSelectIcon from "../../icons/MultiSelectIcon";
+import RenameIcon from "../../icons/RenameIcon";
+import ShareIcon from "../../icons/ShareIcon";
+import DownloadIcon from "../../icons/DownloadIcon";
+import MoveIcon from "../../icons/MoveIcon";
+import RestoreIcon from "../../icons/RestoreIcon";

 const ContextMenu = (props) => {
  const { invalidateFilesCache } = useFilesClient();
  const { invalidateFoldersCache } = useFoldersClient();
  const { invalidateQuickFilesCache } = useQuickFilesClient();
  const { wrapperRef } = useClickOutOfBounds(props.closeContext);
+  const { isTrash } = useUtils();
  const dispatch = useAppDispatch();
  const liClassname =
    "flex w-full px-[20px] py-[12px] items-center font-normal text-[#637381] justify-start no-underline transition-all duration-400 ease-in-out text- hover:bg-[#f6f5fd] hover:text-[#3c85ee] hover:font-medium";
@@ -70,7 +78,7 @@ const ContextMenu = (props) => {
    }
  };

-  const deleteItem = async () => {
+  const trashItem = async () => {
    props.closeContext();
    if (!props.folderMode) {
      const result = await Swal.fire({
@@ -105,6 +113,41 @@ const ContextMenu = (props) => {
    }
  };

+  const deleteItem = async () => {
+    props.closeContext();
+    if (!props.folderMode) {
+      const result = await Swal.fire({
+        title: "Delete file?",
+        text: "You will not be able to recover this file.",
+        icon: "warning",
+        showCancelButton: true,
+        confirmButtonColor: "#3085d6",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "Yes",
+      });
+
+      if (result.value) {
+        await deleteFileAPI(props.file._id);
+        invalidateFilesCache();
+        invalidateQuickFilesCache();
+      }
+    } else {
+      const result = await Swal.fire({
+        title: "Delete folder?",
+        text: "You will not be able to recover this folder.",
+        icon: "warning",
+        showCancelButton: true,
+        confirmButtonColor: "#3085d6",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "Yes",
+      });
+      if (result.value) {
+        await deleteFolder(props.folder._id);
+        invalidateFoldersCache();
+      }
+    }
+  };
+
  const openMoveItemModal = async () => {
    props.closeContext();
    if (!props.folderMode) {
@@ -169,62 +212,84 @@ const ContextMenu = (props) => {
        <li onClick={selectItemMultiSelect} className={liClassname}>
          <a className="flex">
            <span className={spanClassname}>
-              <img
-                src="/assets/checkbox-multiple-outline.svg"
-                alt="multiselect"
-                className="w-[19px] h-[20px]"
-              />
+              <MultiSelectIcon className="w-[19px] h-[20px]" />
            </span>
            Multi select
          </a>
        </li>
-        <li onClick={renameItem} className={liClassname}>
-          <a className="flex">
-            <span className={spanClassname}>
-              <img src="/assets/filesetting1.svg" alt="setting" />
-            </span>
-            Rename
-          </a>
-        </li>
-        {!props.folderMode ? (
+        {!isTrash && (
+          <li onClick={renameItem} className={liClassname}>
+            <a className="flex">
+              <span className={spanClassname}>
+                <RenameIcon />
+              </span>
+              Rename
+            </a>
+          </li>
+        )}
+        {!props.folderMode && !isTrash ? (
          <li onClick={openShareItemModal} className={liClassname}>
            <a className="flex" data-modal="share__modal">
-              <span
-                className="inline-flex mr-[18px]
-"
-              >
-                <img src="/assets/filesetting2.svg" alt="setting" />
+              <span className="inline-flex mr-[18px]">
+                <ShareIcon />
              </span>
              Share
            </a>
          </li>
        ) : undefined}
-        {!props.folderMode ? (
+        {!props.folderMode && !isTrash ? (
          <li onClick={downloadItem} className={liClassname}>
            <a className="flex">
              <span className={spanClassname}>
-                <img src="/assets/filesetting3.svg" alt="setting" />
+                <DownloadIcon />
              </span>
              Download
            </a>
          </li>
        ) : undefined}
-        <li onClick={openMoveItemModal} className={liClassname}>
-          <a className="flex" data-modal="destination__modal">
-            <span className={spanClassname}>
-              <img src="/assets/filesetting4.svg" alt="setting" />
-            </span>{" "}
-            Move
-          </a>
-        </li>
-        <li onClick={deleteItem} className={liClassname}>
-          <a className="flex">
-            <span className={spanClassname}>
-              <img src="/assets/filesetting5.svg" alt="setting" />
-            </span>
-            Trash
-          </a>
-        </li>
+        {!isTrash && (
+          <li onClick={openMoveItemModal} className={liClassname}>
+            <a className="flex" data-modal="destination__modal">
+              <span className={spanClassname}>
+                <MoveIcon />
+              </span>{" "}
+              Move
+            </a>
+          </li>
+        )}
+        {!isTrash && (
+          <li onClick={trashItem} className={liClassname}>
+            <a className="flex">
+              <span className={spanClassname}>
+                <TrashIcon />
+              </span>
+              Trash
+            </a>
+          </li>
+        )}
+        {isTrash && (
+          <li onClick={deleteItem} className={liClassname}>
+            <a className="flex">
+              <span className={spanClassname}>
+                <RestoreIcon className="w-[19px] h-[20px]" />
+              </span>
+              Restore
+            </a>
+          </li>
+        )}
+        {isTrash && (
+          <li
+            onClick={deleteItem}
+            className={classNames(liClassname, "hover:text-red-500")}
+          >
+            <a className="flex">
+              <span className={spanClassname}>
+                <TrashIcon />
+              </span>
+              Delete
+            </a>
+          </li>
+        )}
      </ul>
    </div>
  );
@@ -9,6 +9,7 @@ import mobilecheck from "../../utils/mobileCheck";
 import moment from "moment";
 import { useAppDispatch, useAppSelector } from "../../hooks/store";
 import { setMainSelect, setMultiSelectMode } from "../../reducers/selected";
+import { useUtils } from "../../hooks/utils";

 const FolderItem = React.memo((props) => {
  const { folder } = props;
@@ -23,6 +24,7 @@ const FolderItem = React.memo((props) => {
  const multiSelectMode = useAppSelector(
    (state) => state.selected.multiSelectMode
  );
+  const { isTrash } = useUtils();
  const lastSelected = useRef(0);
  const navigate = useNavigate();
  const dispatch = useAppDispatch();
@@ -66,7 +68,11 @@ const FolderItem = React.memo((props) => {
    const isMobile = mobilecheck();

    if (isMobile || currentDate - lastSelected.current < 1500) {
-      navigate(`/folder/${folder._id}`);
+      if (isTrash) {
+        navigate(`/folder-trash/${folder._id}`);
+      } else {
+        navigate(`/folder/${folder._id}`);
+      }
    }

    lastSelected.current = Date.now();
@@ -1,13 +1,18 @@
 import React, { useCallback, useRef, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { createFolderAPI } from "../../api/foldersAPI";
 import { useFoldersClient } from "../../hooks/folders";
 import { showCreateFolderPopup } from "../../popups/folder";
-import { useClickOutOfBounds } from "../../hooks/utils";
+import { useClickOutOfBounds, useUtils } from "../../hooks/utils";
 import AddNewDropdown from "../AddNewDropdown";
+import HomeListIcon from "../../icons/HomeListIcon";
+import TrashIcon from "../../icons/TrashIcon";
+import classNames from "classnames";

 const LeftSection = (props) => {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const { isHome, isTrash } = useUtils();
+  const navigate = useNavigate();
  const addNewDisabled = useRef(false);

  const openDropdown = useCallback(() => {
@@ -22,6 +27,14 @@ const LeftSection = (props) => {
    setTimeout(() => (addNewDisabled.current = false), 300);
  }, []);

+  const goHome = () => {
+    navigate("/home");
+  };
+
+  const goTrash = () => {
+    navigate("/trash");
+  };
+
  return (
    <div
      className="menu__block p-6 hidden mobileMode:block border-r w-[270px] min-w-[270px]"
@@ -34,44 +47,57 @@ const LeftSection = (props) => {
          : { left: "-290px" }
      }
    >
-      <div className="navigation__block">
-        <div className="add__new">
-          <a onClick={openDropdown}>
-            <p>ADD NEW</p>
-            <span>
-              <img src="/assets/dropselect.svg" alt="dropselect" />
-            </span>
-          </a>
-          {/* TODO: Remove this props */}
-          {isDropdownOpen && (
-            <AddNewDropdown closeDropdown={closeDropdown} {...props} />
-          )}
+      <div className="navigation__block flex flex-col h-full">
+        <div>
+          <div className="add__new">
+            <a onClick={openDropdown}>
+              <p>ADD NEW</p>
+              <span>
+                <img src="/assets/dropselect.svg" alt="dropselect" />
+              </span>
+            </a>
+            {/* TODO: Remove this props */}
+            {isDropdownOpen && (
+              <AddNewDropdown closeDropdown={closeDropdown} {...props} />
+            )}
+          </div>
+          <div className="pr-[20px] pb-4">
+            <ul className="m-0 list-none p-0 cursor-pointer">
+              <li>
+                <a
+                  onClick={goHome}
+                  className={classNames(
+                    "flex items-center text-[#3c85ee] font-medium no-underline animate",
+                    isHome ? "text-[#3c85ee]" : "text-[#637381]"
+                  )}
+                >
+                  <span>
+                    <HomeListIcon />
+                  </span>
+                  <p className="ml-3">Home</p>
+                </a>
+              </li>
+            </ul>
+          </div>
        </div>
-        <div className="page__navigation">
-          <ul>
-            <li className="active__page">
-              <a onClick={props.goHome}>
+        <div className="border-t border-[#E8EEF2] pr-[20px] pt-4">
+          <ul className="m-0 list-none p-0 cursor-pointer">
+            <li>
+              <a
+                onClick={goTrash}
+                className={classNames(
+                  "flex items-center text-[#3c85ee] font-medium no-underline animate",
+                  isTrash ? "text-[#3c85ee]" : "text-[#637381]"
+                )}
+              >
                <span>
-                  <img src="/assets/homea.svg" alt="homeactive" />
+                  <TrashIcon />
                </span>
-                Home
+                <p className="ml-3">Trash</p>
              </a>
            </li>
          </ul>
        </div>
-        <div
-          className={
-            props.state.hideFolderTree
-              ? "utility__buttons utility__buttons_no_border"
-              : "utility__buttons"
-          }
-        >
-          <ul>
-            {/* <li><a href="#"><span><img src="/assets/utility1.svg" alt="utility"/></span> Shared with me</a></li>
-            <li><a href="#"><span><img src="/assets/utility2.svg" alt="utility"/></span> Recent Files</a></li>
-            <li><a href="#"><span><img src="/assets/utility3.svg" alt="utility"/></span> Trash</a></li> */}
-          </ul>
-        </div>
      </div>
    </div>
  );
@@ -49,68 +49,70 @@ const MultiSelectBar = () => {
  if (!multiSelectMode) return <div></div>;

  return (
-    <div className="border border-[#ebe9f9] bg-[#ebe9f9] rounded-full p-2 px-5 text-black text-sm mb-4">
-      <div className="flex flex-row items-center justify-between">
-        <div className="flex flex-row items-center">
-          <img
-            className="w-[22px] h-[22px] cursor-pointer"
-            src="/images/close_icon.png"
-            onClick={closeMultiSelect}
-          />
-          <p className="ml-4">{multiSelectCount} selected</p>
-        </div>
+    <div className="flex justify-center items-center">
+      <div className="border border-[#ebe9f9] bg-[#ebe9f9] rounded-full p-2 px-5 text-black text-sm mb-4 max-w-[600px] w-full mt-4">
+        <div className="flex flex-row items-center justify-between">
+          <div className="flex flex-row items-center">
+            <img
+              className="w-[22px] h-[22px] cursor-pointer"
+              src="/images/close_icon.png"
+              onClick={closeMultiSelect}
+            />
+            <p className="ml-4">{multiSelectCount} selected</p>
+          </div>

-        <div className="flex flex-row items-center">
-          <svg
-            width="17"
-            height="18"
-            viewBox="0 0 17 18"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            className="ml-4 cursor-pointer"
-            onClick={deleteItems}
-          >
-            <g id="trash">
+          <div className="flex flex-row items-center">
+            <svg
+              width="17"
+              height="18"
+              viewBox="0 0 17 18"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="ml-4 cursor-pointer"
+              onClick={deleteItems}
+            >
+              <g id="trash">
+                <path
+                  id="Shape"
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M16.0694 2.57072H11.5707V1.92803C11.5707 0.863209 10.7075 0 9.64265 0H7.07192C6.0071 0 5.14389 0.863209 5.14389 1.92803V2.57072H0.645132C0.290178 2.57072 0.00244141 2.85846 0.00244141 3.21341C0.00244141 3.56837 0.290215 3.85607 0.645132 3.85607H1.34371L2.57317 17.4108C2.60348 17.7427 2.88255 17.9963 3.21586 17.995H13.4987C13.832 17.9964 14.1111 17.7427 14.1414 17.4108L15.3708 3.85607H16.0694C16.4244 3.85607 16.7121 3.56833 16.7121 3.21338C16.7121 2.85842 16.4244 2.57072 16.0694 2.57072ZM6.42923 1.92803C6.42923 1.57308 6.71697 1.28534 7.07192 1.28534H9.64265C9.9976 1.28534 10.2853 1.57308 10.2853 1.92803V2.57072H6.42927V1.92803H6.42923ZM3.80263 16.7096H12.9119L14.0803 3.85607H5.78658H2.63745L3.80263 16.7096Z"
+                  fill="currentColor"
+                />
+                <path
+                  id="Path"
+                  d="M6.42938 14.7385C6.4293 14.7376 6.42926 14.7367 6.42919 14.7358L5.7865 5.73834C5.76131 5.38339 5.45312 5.1161 5.09821 5.14129C4.74325 5.16649 4.47596 5.47467 4.50116 5.82959L5.14385 14.8271C5.16783 15.1641 5.44868 15.425 5.78654 15.4241H5.83282C6.1869 15.3995 6.45401 15.0925 6.42938 14.7385Z"
+                  fill="currentColor"
+                />
+                <path
+                  id="Path_2"
+                  d="M8.35729 5.1416C8.00234 5.1416 7.7146 5.42934 7.7146 5.78429V14.7818C7.7146 15.1367 8.00234 15.4245 8.35729 15.4245C8.71224 15.4245 8.99998 15.1367 8.99998 14.7818V5.78429C8.99998 5.42934 8.71224 5.1416 8.35729 5.1416Z"
+                  fill="currentColor"
+                />
+                <path
+                  id="Path_3"
+                  d="M11.6164 5.14129C11.2615 5.1161 10.9533 5.38339 10.9281 5.73834L10.2854 14.7358C10.2594 15.0898 10.5253 15.3979 10.8793 15.4239C10.8804 15.424 10.8814 15.424 10.8825 15.4241H10.9281C11.266 15.425 11.5468 15.1641 11.5708 14.8271L12.2135 5.82959C12.2387 5.47467 11.9714 5.16652 11.6164 5.14129Z"
+                  fill="currentColor"
+                />
+              </g>
+            </svg>
+            <svg
+              width="19"
+              height="16"
+              viewBox="0 0 19 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="ml-4 cursor-pointer"
+            >
              <path
-                id="Shape"
+                id="Combined Shape"
                fill-rule="evenodd"
                clip-rule="evenodd"
-                d="M16.0694 2.57072H11.5707V1.92803C11.5707 0.863209 10.7075 0 9.64265 0H7.07192C6.0071 0 5.14389 0.863209 5.14389 1.92803V2.57072H0.645132C0.290178 2.57072 0.00244141 2.85846 0.00244141 3.21341C0.00244141 3.56837 0.290215 3.85607 0.645132 3.85607H1.34371L2.57317 17.4108C2.60348 17.7427 2.88255 17.9963 3.21586 17.995H13.4987C13.832 17.9964 14.1111 17.7427 14.1414 17.4108L15.3708 3.85607H16.0694C16.4244 3.85607 16.7121 3.56833 16.7121 3.21338C16.7121 2.85842 16.4244 2.57072 16.0694 2.57072ZM6.42923 1.92803C6.42923 1.57308 6.71697 1.28534 7.07192 1.28534H9.64265C9.9976 1.28534 10.2853 1.57308 10.2853 1.92803V2.57072H6.42927V1.92803H6.42923ZM3.80263 16.7096H12.9119L14.0803 3.85607H5.78658H2.63745L3.80263 16.7096Z"
+                d="M7.63107 0C7.83994 0 8.03661 0.0983374 8.16193 0.265429L9.95357 2.65429H17.9164C18.2829 2.65429 18.58 2.95138 18.58 3.31786V15.2621C18.58 15.6286 18.2829 15.9257 17.9164 15.9257H0.663571C0.297091 15.9257 0 15.6286 0 15.2621V0.663571C0 0.297091 0.297091 0 0.663571 0H7.63107ZM7.212 1.5H1.5V14.425H17.08V4.154L9.20357 4.15429L7.212 1.5ZM9.96369 9.51348C10.0439 9.43969 10.0892 9.33783 10.0892 9.23078C10.0892 9.12373 10.0439 9.02188 9.96369 8.9486L7.2712 6.4802C7.15381 6.37263 6.98149 6.34301 6.8334 6.40433C6.68532 6.46565 6.58893 6.60648 6.58893 6.76238V7.93162H4.30032C3.92929 7.93162 3.62719 8.22315 3.62719 8.5812V9.88036C3.62719 10.2384 3.92929 10.5299 4.30032 10.5299H6.58893V11.6992C6.58893 11.8551 6.68478 11.9964 6.8334 12.0577C6.98203 12.1191 7.15435 12.0889 7.2712 11.9819L9.96369 9.51348Z"
                fill="currentColor"
              />
-              <path
-                id="Path"
-                d="M6.42938 14.7385C6.4293 14.7376 6.42926 14.7367 6.42919 14.7358L5.7865 5.73834C5.76131 5.38339 5.45312 5.1161 5.09821 5.14129C4.74325 5.16649 4.47596 5.47467 4.50116 5.82959L5.14385 14.8271C5.16783 15.1641 5.44868 15.425 5.78654 15.4241H5.83282C6.1869 15.3995 6.45401 15.0925 6.42938 14.7385Z"
-                fill="currentColor"
-              />
-              <path
-                id="Path_2"
-                d="M8.35729 5.1416C8.00234 5.1416 7.7146 5.42934 7.7146 5.78429V14.7818C7.7146 15.1367 8.00234 15.4245 8.35729 15.4245C8.71224 15.4245 8.99998 15.1367 8.99998 14.7818V5.78429C8.99998 5.42934 8.71224 5.1416 8.35729 5.1416Z"
-                fill="currentColor"
-              />
-              <path
-                id="Path_3"
-                d="M11.6164 5.14129C11.2615 5.1161 10.9533 5.38339 10.9281 5.73834L10.2854 14.7358C10.2594 15.0898 10.5253 15.3979 10.8793 15.4239C10.8804 15.424 10.8814 15.424 10.8825 15.4241H10.9281C11.266 15.425 11.5468 15.1641 11.5708 14.8271L12.2135 5.82959C12.2387 5.47467 11.9714 5.16652 11.6164 5.14129Z"
-                fill="currentColor"
-              />
-            </g>
-          </svg>
-          <svg
-            width="19"
-            height="16"
-            viewBox="0 0 19 16"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            className="ml-4 cursor-pointer"
-          >
-            <path
-              id="Combined Shape"
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M7.63107 0C7.83994 0 8.03661 0.0983374 8.16193 0.265429L9.95357 2.65429H17.9164C18.2829 2.65429 18.58 2.95138 18.58 3.31786V15.2621C18.58 15.6286 18.2829 15.9257 17.9164 15.9257H0.663571C0.297091 15.9257 0 15.6286 0 15.2621V0.663571C0 0.297091 0.297091 0 0.663571 0H7.63107ZM7.212 1.5H1.5V14.425H17.08V4.154L9.20357 4.15429L7.212 1.5ZM9.96369 9.51348C10.0439 9.43969 10.0892 9.33783 10.0892 9.23078C10.0892 9.12373 10.0439 9.02188 9.96369 8.9486L7.2712 6.4802C7.15381 6.37263 6.98149 6.34301 6.8334 6.40433C6.68532 6.46565 6.58893 6.60648 6.58893 6.76238V7.93162H4.30032C3.92929 7.93162 3.62719 8.22315 3.62719 8.5812V9.88036C3.62719 10.2384 3.92929 10.5299 4.30032 10.5299H6.58893V11.6992C6.58893 11.8551 6.68478 11.9964 6.8334 12.0577C6.98203 12.1191 7.15435 12.0889 7.2712 11.9819L9.96369 9.51348Z"
-              fill="currentColor"
-            />
-          </svg>
+            </svg>
+          </div>
        </div>
      </div>
    </div>
@@ -8,14 +8,18 @@ const ParentBar = memo(() => {
  const { data: folder, isLoading } = useFolder();
  console.log("folder", folder);
  const navigate = useNavigate();
-  const { isHome } = useUtils();
+  const { isHome, isTrash } = useUtils();

  if (isHome || !folder) {
    return <div></div>;
  }

-  const goHome = () => {
-    navigate("/home");
+  const goHomeOrTrash = () => {
+    if (!isTrash) {
+      navigate("/home");
+    } else {
+      navigate("/trash");
+    }
  };

  const goToFolder = () => {
@@ -34,9 +38,9 @@ const ParentBar = memo(() => {
      <div className="flex items-center">
        <a
          className="text-[#637381] text-[18px] leading-[21px] font-medium m-0 no-underline animate cursor-pointer"
-          onClick={goHome}
+          onClick={goHomeOrTrash}
        >
-          Home
+          {!isTrash ? "Home" : "Trash"}
        </a>
        <span className="inline-flex m-[0px_10px]">
          <img src="/assets/spacer.svg" alt="spacer" />
@@ -11,9 +11,11 @@ import { setPopupFile } from "../../actions/popupFile";
 import { useNavigate } from "react-router-dom";
 import { useAppSelector } from "../../hooks/store";
 import { resetSelected } from "../../reducers/selected";
+import { useUtils } from "../../hooks/utils";

 const RightSection = memo(() => {
  const selectedItem = useAppSelector((state) => state.selected.mainSection);
+  const { isTrash } = useUtils();
  const navigate = useNavigate();
  const dispatch = useDispatch();

@@ -71,8 +73,10 @@ const RightSection = memo(() => {
  const openItem = () => {
    if (selectedItem.file) {
      dispatch(setPopupFile({ showPopup: true, ...selectedItem.file }));
-    } else {
+    } else if (!isTrash) {
      navigate(`/folder/${selectedItem.id}`);
+    } else {
+      navigate(`/folder-trash/${selectedItem.id}`);
    }
  };
  return (
@@ -3,7 +3,7 @@ import { useAppDispatch } from "../../hooks/store";
 import { useSearchSuggestions } from "../../hooks/files";
 import debounce from "lodash/debounce";
 import { useNavigate } from "react-router-dom";
-import { useClickOutOfBounds } from "../../hooks/utils";
+import { useClickOutOfBounds, useUtils } from "../../hooks/utils";
 import SearchBarItem from "../SearchBarItem";
 import { FolderInterface } from "../../types/folders";
 import { FileInterface } from "../../types/file";
@@ -18,6 +18,7 @@ const SearchBar = memo(() => {
  const { data: searchSuggestions, isLoading: isLoadingSearchSuggestions } =
    useSearchSuggestions(debouncedSearchText);
  const navigate = useNavigate();
+  const { isTrash } = useUtils();

  const debouncedSetSearchText = useMemo(
    () => debounce(setDebouncedSearchText, 500),
@@ -43,10 +44,18 @@ const SearchBar = memo(() => {
    e.preventDefault();
    setSearchText("");
    setDebouncedSearchText("");
-    if (searchText.length) {
-      navigate(`/search/${searchText}`);
+    if (!isTrash) {
+      if (searchText.length) {
+        navigate(`/search/${searchText}`);
+      } else {
+        navigate("/home");
+      }
    } else {
-      navigate("/home");
+      if (searchText.length) {
+        navigate(`/search-trash/${searchText}`);
+      } else {
+        navigate("/trash");
+      }
    }
  };

@@ -60,7 +69,12 @@ const SearchBar = memo(() => {
  };

  const folderClick = (folder: FolderInterface) => {
-    navigate(`/folder/${folder?._id}`);
+    if (!isTrash) {
+      navigate(`/folder/${folder?._id}`);
+    } else {
+      navigate(`/folder-trash/${folder?._id}`);
+    }
+
    resetState();
  };

@@ -88,7 +102,7 @@ const SearchBar = memo(() => {
        type="text"
        onChange={onChangeSearch}
        value={searchText}
-        placeholder="Search"
+        placeholder={!isTrash ? "Search" : "Search Trash"}
        className="w-full min-h-[42px] border border-[#BEC9D3] pl-[45px] pr-[15px] text-[16px] text-black rounded-[5px]"
      />
      <div
@@ -20,7 +20,7 @@ export const useFiles = () => {
  const params = useParams();
  // TODO: Remove any
  const sortBy = useSelector((state: any) => state.filter.sortBy);
-  const trashMode = false;
+  const { isTrash } = useUtils();
  const filesReactQuery = useInfiniteQuery(
    [
      "files",
@@ -29,7 +29,7 @@ export const useFiles = () => {
        search: params.query || "",
        sortBy,
        limit: undefined,
-        trashMode,
+        trashMode: isTrash,
      },
    ],
    getFilesListAPI,
@@ -57,7 +57,7 @@ export const useFilesClient = () => {
  // TODO: Remove any
  const sortBy = useSelector((state: any) => state.filter.sortBy);
  const filesReactClientQuery = useQueryClient();
-  const trashMode = false;
+  const { isTrash } = useUtils();

  const invalidateFilesCache = () => {
    filesReactClientQuery.invalidateQueries({
@@ -65,10 +65,10 @@ export const useFilesClient = () => {
        "files",
        {
          parent: params.id || "/",
-          search: "",
+          search: params.query || "",
          sortBy,
          limit: undefined,
-          trashMode,
+          trashMode: isTrash,
        },
      ],
    });
@@ -153,11 +153,13 @@ export const useThumbnail = (
 };

 export const useSearchSuggestions = (searchText: string) => {
+  const { isTrash } = useUtils();
  const searchQuery = useQuery(
    [
      "search",
      {
        searchText,
+        trashMode: isTrash,
      },
    ],
    getSuggestedListAPI,
@@ -2,11 +2,12 @@ import { useQuery, useQueryClient } from "react-query";
 import { useParams } from "react-router-dom";
 import { getFolderInfoAPI, getFoldersListAPI } from "../api/foldersAPI";
 import { useSelector } from "react-redux";
+import { useUtils } from "./utils";

 export const useFolders = () => {
  const params = useParams();
  const sortBy = useSelector((state: any) => state.filter.sortBy);
-  const trashMode = false;
+  const { isTrash } = useUtils();
  const foldersReactQuery = useQuery(
    [
      "folders",
@@ -15,7 +16,7 @@ export const useFolders = () => {
        search: params.query || "",
        sortBy,
        limit: undefined,
-        trashMode,
+        trashMode: isTrash,
      },
    ],
    getFoldersListAPI
@@ -28,7 +29,7 @@ export const useFoldersClient = () => {
  const params = useParams();
  const sortBy = useSelector((state: any) => state.filter.sortBy);
  const foldersReactClientQuery = useQueryClient();
-  const trashMode = false;
+  const { isTrash } = useUtils();

  const invalidateFoldersCache = () => {
    foldersReactClientQuery.invalidateQueries({
@@ -36,10 +37,10 @@ export const useFoldersClient = () => {
        "folders",
        {
          parent: params.id || "/",
-          search: "",
+          search: params.query || "",
          sortBy,
          limit: undefined,
-          trashMode,
+          trashMode: isTrash,
        },
      ],
    });
@@ -1,14 +1,23 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";

 export const useUtils = () => {
-  const params = useParams();
+  const location = useLocation();

  const isHome = useMemo(() => {
-    return !params.id && !params.query;
-  }, [params.id, params.query]);
+    return location.pathname === "/home";
+  }, [location.pathname]);

-  return { isHome };
+  const isTrash = useMemo(() => {
+    console.log("location", location.pathname);
+    return (
+      location.pathname === "/trash" ||
+      location.pathname.includes("/folder-trash") ||
+      location.pathname.includes("/search-trash")
+    );
+  }, [location.pathname]);
+
+  return { isHome, isTrash };
 };

 export const useClickOutOfBounds = (outOfBoundsCallback: () => any) => {
@@ -0,0 +1,28 @@
+interface DownloadIconProps {
+  className?: string;
+}
+
+const DownloadIcon = (props: DownloadIconProps) => {
+  return (
+    <svg
+      width="19"
+      height="18"
+      viewBox="0 0 19 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={props.className}
+    >
+      <g id="cloud-computing">
+        <path
+          id="Combined Shape"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M3.11653 12.3601C3.15829 12.3694 3.19928 12.3733 3.24104 12.3733C3.50784 12.3733 3.74835 12.1872 3.80712 11.9139C3.87595 11.5985 3.6772 11.2871 3.36477 11.2185C2.06635 10.9335 1.16 9.81067 1.16 8.48769C1.16 6.94199 2.42595 5.68441 4.04453 5.68441C4.33376 5.68441 4.57813 5.47027 4.61912 5.18294C4.94392 2.8936 6.94685 1.16803 9.28 1.16803C11.1058 1.16803 12.7793 2.22549 13.5418 3.86073C13.6331 4.0554 13.8233 4.18388 14.036 4.19556C15.9229 4.29601 17.4 5.8495 17.4 7.73158C17.4 9.22432 16.455 10.5644 15.0483 11.0667C14.7467 11.1749 14.5882 11.5082 14.6957 11.8127C14.8031 12.1171 15.1349 12.2768 15.4365 12.1685C17.3049 11.5012 18.56 9.71879 18.56 7.73236C18.56 5.34413 16.7759 3.3538 14.4389 3.06024C13.4274 1.19061 11.4391 0 9.28 0C6.53853 0 4.16053 1.91946 3.55965 4.53897C1.56213 4.74999 0 6.44052 0 8.48769C0 10.3643 1.28141 11.9567 3.11653 12.3601ZM8.86635 16.9206C8.9744 17.0381 9.12354 17.1043 9.28029 17.1043C9.43704 17.1043 9.58618 17.0381 9.69347 16.9206L13.3078 12.9781C13.4654 12.8062 13.5087 12.5539 13.4189 12.3371C13.3291 12.1202 13.1229 11.9791 12.8947 11.9791H11.1826V8.62797C11.1826 8.0847 10.7557 7.64235 10.2314 7.64235H8.32914C7.80487 7.64235 7.37799 8.0847 7.37799 8.62797V11.9791H5.66592C5.43765 11.9791 5.23068 12.1194 5.14089 12.3371C5.0511 12.5547 5.09523 12.807 5.25198 12.9781L8.86635 16.9206Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default DownloadIcon;
@@ -0,0 +1,63 @@
+export interface HomeListIconProps {
+  className?: string;
+}
+
+const HomeListIcon = (props: HomeListIconProps) => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={props.className}
+    >
+      <g id="Group 11">
+        <path
+          id="Fill 1"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M17.0572 1.12116C17.0572 0.502903 16.5534 0 15.9351 0H1.123C0.503825 0 0 0.502903 0 1.12116V4.37211C0 4.99036 0.502904 5.49327 1.123 5.49327H15.9351C16.5534 5.49327 17.0572 4.99036 17.0572 4.37211V1.12116ZM15.8466 1.21067V4.28256H1.21253L1.21161 1.21067H15.8466Z"
+          fill="currentColor"
+        />
+        <path
+          id="Fill 2"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M12.22 2.97864H14.5297C14.7271 2.97864 14.8859 2.81901 14.8859 2.62246V2.18138C14.8859 1.98391 14.7271 1.8252 14.5297 1.8252H12.2209C12.0235 1.8252 11.8648 1.98391 11.8648 2.18138V2.62246C11.8638 2.81993 12.0225 2.97864 12.22 2.97864Z"
+          fill="currentColor"
+        />
+        <path
+          id="Fill 3"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M15.9361 6.2417H1.123C0.503825 6.2417 0 6.74552 0 7.36286L0.000923647 10.6129C0.000923647 11.2302 0.503827 11.734 1.12392 11.734H15.9361C16.5543 11.734 17.0581 11.2302 17.0581 10.6129L17.0572 7.36286C17.0572 6.74552 16.5543 6.2417 15.9361 6.2417H15.9361ZM15.8466 7.45328V10.5223H1.21255L1.21163 7.45328H15.8466Z"
+          fill="currentColor"
+        />
+        <path
+          id="Fill 4"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M12.22 9.21845H14.5297C14.7271 9.21845 14.8859 9.05973 14.8859 8.86226V8.4221C14.8859 8.22647 14.7271 8.06592 14.5297 8.06592H12.2209C12.0235 8.06592 11.8648 8.22648 11.8648 8.4221V8.86226C11.8638 9.05973 12.0225 9.21845 12.22 9.21845Z"
+          fill="currentColor"
+        />
+        <path
+          id="Fill 5"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M1.123 17.9754H15.9351C16.5534 17.9754 17.0572 17.4716 17.0572 16.8542V13.6033C17.0572 12.985 16.5534 12.4821 15.9351 12.4821L1.123 12.4812C0.503825 12.4812 0 12.9841 0 13.6024V16.8533C0.000923647 17.4716 0.503825 17.9754 1.123 17.9754V17.9754ZM1.21158 16.7647V13.6919H15.8456V16.7647H1.21158Z"
+          fill="currentColor"
+        />
+        <path
+          id="Fill 6"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M14.5299 14.3074H12.2212C12.0237 14.3074 11.865 14.467 11.865 14.6636V15.1046C11.865 15.3021 12.0237 15.4599 12.2212 15.4599H14.5299C14.7274 15.4599 14.8861 15.3012 14.8861 15.1046V14.6636C14.8852 14.4661 14.7274 14.3074 14.5299 14.3074Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default HomeListIcon;
@@ -0,0 +1,26 @@
+interface MoveiconProps {
+  className?: string;
+}
+
+const Moveicon = (props: MoveiconProps) => {
+  return (
+    <svg
+      width="19"
+      height="16"
+      viewBox="0 0 19 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={props.className}
+    >
+      <path
+        id="Combined Shape"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M7.63107 0C7.83994 0 8.03661 0.0983374 8.16193 0.265429L9.95357 2.65429H17.9164C18.2829 2.65429 18.58 2.95138 18.58 3.31786V15.2621C18.58 15.6286 18.2829 15.9257 17.9164 15.9257H0.663571C0.297091 15.9257 0 15.6286 0 15.2621V0.663571C0 0.297091 0.297091 0 0.663571 0H7.63107ZM7.212 1.5H1.5V14.425H17.08V4.154L9.20357 4.15429L7.212 1.5ZM9.96369 9.51348C10.0439 9.43969 10.0892 9.33783 10.0892 9.23078C10.0892 9.12373 10.0439 9.02188 9.96369 8.9486L7.2712 6.4802C7.15381 6.37263 6.98149 6.34301 6.8334 6.40433C6.68532 6.46565 6.58893 6.60648 6.58893 6.76238V7.93162H4.30032C3.92929 7.93162 3.62719 8.22315 3.62719 8.5812V9.88036C3.62719 10.2384 3.92929 10.5299 4.30032 10.5299H6.58893V11.6992C6.58893 11.8551 6.68478 11.9964 6.8334 12.0577C6.98203 12.1191 7.15435 12.0889 7.2712 11.9819L9.96369 9.51348Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default Moveicon;
@@ -0,0 +1,21 @@
+interface MultiSelectIconProps {
+  className?: string;
+}
+
+const MultiSelectIcon = (props: MultiSelectIconProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      className={props.className}
+    >
+      <path
+        d="M19,19H5V5H15V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V11H19M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default MultiSelectIcon;
@@ -0,0 +1,26 @@
+interface RenameIconProps {
+  className?: string;
+}
+
+const RenameIcon = (props: RenameIconProps) => {
+  return (
+    <svg
+      width="19"
+      height="18"
+      viewBox="0 0 19 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={props.className}
+    >
+      <path
+        id="Combined Shape"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M8.90955 17.1859C8.90955 17.6355 9.27402 18 9.72362 18H16.598L16.622 17.9997C17.0605 17.987 17.4121 17.6275 17.4121 17.1859C17.4121 16.7363 17.0476 16.3719 16.598 16.3719H13.9749V13.2513H17.3668C18.0163 13.2513 18.5427 12.7248 18.5427 12.0754V5.74372C18.5427 5.0943 18.0163 4.56784 17.3668 4.56784H13.9749V1.62814H16.598L16.622 1.62779C17.0605 1.6151 17.4121 1.25564 17.4121 0.81407C17.4121 0.364472 17.0476 0 16.598 0H9.72362L9.69962 0.000347075C9.26112 0.013044 8.90955 0.3725 8.90955 0.81407C8.90955 1.26367 9.27402 1.62814 9.72362 1.62814H12.3467V16.3719H9.72362L9.69962 16.3722C9.26112 16.3849 8.90955 16.7444 8.90955 17.1859ZM13.9749 5.83417V11.9849H17.2764V5.83417H13.9749ZM10.7638 4.56784H1.17588C0.526459 4.56784 0 5.0943 0 5.74372V12.0754C0 12.7248 0.526459 13.2513 1.17588 13.2513H10.7638V11.9849H1.26633V5.83417H10.7638V4.56784ZM2.80402 7.46231H9.31658V10.2663H2.80402V7.46231Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default RenameIcon;
@@ -0,0 +1,21 @@
+interface RestoreIconProps {
+  className?: string;
+}
+
+const RestoreIcon = (props: any) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      className={props.className}
+    >
+      <title>restore</title>
+      <path
+        d="M13,3A9,9 0 0,0 4,12H1L4.89,15.89L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default RestoreIcon;
@@ -0,0 +1,28 @@
+interface ShareIconProps {
+  className?: string;
+}
+
+const ShareIcon = (props: ShareIconProps) => {
+  return (
+    <svg
+      width="17"
+      height="18"
+      viewBox="0 0 17 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={props.className}
+    >
+      <g id="share-3">
+        <path
+          id="Combined Shape"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M13.2546 6.00005C12.3997 6.00005 11.6288 5.62737 11.0903 5.03311L5.76359 8.12607C5.84641 8.40267 5.89097 8.69612 5.89097 9C5.89097 9.30373 5.84645 9.59704 5.76371 9.87353L11.0906 12.9666C11.6291 12.3725 12.3998 12 13.2546 12C14.879 12 16.2 13.3455 16.2 15C16.2 16.6544 14.879 18 13.2546 18C11.6301 18 10.3092 16.6544 10.3092 15C10.3092 14.7549 10.3382 14.5165 10.3929 14.2883L4.99428 11.1536C4.46378 11.6773 3.74098 12 2.94542 12C1.32109 12 0 10.6545 0 9C0 7.34546 1.32109 6.00005 2.94542 6.00005C3.74085 6.00005 4.46355 6.32263 4.99402 6.84614L10.3928 3.71131C10.3381 3.48321 10.3092 3.24497 10.3092 2.99995C10.3092 1.34555 11.6301 0 13.2546 0C14.879 0 16.2 1.34555 16.2 2.99995C16.2 4.6545 14.879 6.00005 13.2546 6.00005Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default ShareIcon;
@@ -0,0 +1,43 @@
+interface TrashIconProps {
+  className?: string;
+}
+
+const TrashIcon = (props: TrashIconProps) => {
+  return (
+    <svg
+      width="17"
+      height="18"
+      viewBox="0 0 17 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={props.className}
+    >
+      <g id="trash">
+        <path
+          id="Shape"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M16.0694 2.57072H11.5707V1.92803C11.5707 0.863209 10.7075 0 9.64265 0H7.07192C6.0071 0 5.14389 0.863209 5.14389 1.92803V2.57072H0.645132C0.290178 2.57072 0.00244141 2.85846 0.00244141 3.21341C0.00244141 3.56837 0.290215 3.85607 0.645132 3.85607H1.34371L2.57317 17.4108C2.60348 17.7427 2.88255 17.9963 3.21586 17.995H13.4987C13.832 17.9964 14.1111 17.7427 14.1414 17.4108L15.3708 3.85607H16.0694C16.4244 3.85607 16.7121 3.56833 16.7121 3.21338C16.7121 2.85842 16.4244 2.57072 16.0694 2.57072ZM6.42923 1.92803C6.42923 1.57308 6.71697 1.28534 7.07192 1.28534H9.64265C9.9976 1.28534 10.2853 1.57308 10.2853 1.92803V2.57072H6.42927V1.92803H6.42923ZM3.80263 16.7096H12.9119L14.0803 3.85607H5.78658H2.63745L3.80263 16.7096Z"
+          fill="currentColor"
+        />
+        <path
+          id="Path"
+          d="M6.42938 14.7385C6.4293 14.7376 6.42926 14.7367 6.42919 14.7358L5.7865 5.73834C5.76131 5.38339 5.45312 5.1161 5.09821 5.14129C4.74325 5.16649 4.47596 5.47467 4.50116 5.82959L5.14385 14.8271C5.16783 15.1641 5.44868 15.425 5.78654 15.4241H5.83282C6.1869 15.3995 6.45401 15.0925 6.42938 14.7385Z"
+          fill="currentColor"
+        />
+        <path
+          id="Path_2"
+          d="M8.35729 5.1416C8.00234 5.1416 7.7146 5.42934 7.7146 5.78429V14.7818C7.7146 15.1367 8.00234 15.4245 8.35729 15.4245C8.71224 15.4245 8.99998 15.1367 8.99998 14.7818V5.78429C8.99998 5.42934 8.71224 5.1416 8.35729 5.1416Z"
+          fill="currentColor"
+        />
+        <path
+          id="Path_3"
+          d="M11.6164 5.14129C11.2615 5.1161 10.9533 5.38339 10.9281 5.73834L10.2854 14.7358C10.2594 15.0898 10.5253 15.3979 10.8793 15.4239C10.8804 15.424 10.8814 15.424 10.8825 15.4241H10.9281C11.266 15.425 11.5468 15.1641 11.5708 14.8271L12.2135 5.82959C12.2387 5.47467 11.9714 5.16652 11.6164 5.14129Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default TrashIcon;
@@ -57,6 +57,33 @@ const AppRouter = () => {
            </PrivateRoute>
          }
        />
+        <Route
+          key={1}
+          path="/search-trash/:query"
+          element={
+            <PrivateRoute>
+              <Homepage2 />
+            </PrivateRoute>
+          }
+        />
+        <Route
+          key={1}
+          path="/trash"
+          element={
+            <PrivateRoute>
+              <Homepage2 />
+            </PrivateRoute>
+          }
+        />
+        <Route
+          key={1}
+          path="/folder-trash/:id"
+          element={
+            <PrivateRoute>
+              <Homepage2 />
+            </PrivateRoute>
+          }
+        />
        <Route path="/verify-email/:id" element={<VerifyEmailPage />} />
        <Route path="/reset-password/:id" element={<ResetPasswordPage />} />
        <Route path="/settings" element={<SettingsPage />} />