chore: refactor breadcrumbs

app/components/BreadCrumbs/index.tsx

@@ -10,7 +10,11 @@ interface Props {
 const BreadCrumbs = ({ children }: Props) => {
   const { serverid, path } = useParams();
 
-  return <div>{children}</div>;
+  return (
+    <div className="breadcrumbs text-sm">
+      <ul>{children}</ul>
+    </div>
+  );
 };
 
 export default BreadCrumbs;

app/components/FilesEditor/BreadCrumbs/index.tsx

@@ -50,6 +50,7 @@ const index = ({ serverId, path, changeDirectory }: Props) => {
               </li>
             );
           })}
+
           <li>
             <span className="inline-flex items-center gap-2">
               <svg

app/components/FilesEditor/index.tsx

@@ -4,11 +4,12 @@ import { formatDistanceToNow } from "date-fns";
 import React, { useEffect, useState, useCallback } from "react";
 import DocumentIcon from "@/components/Icons/Document";
 import FolderIcon from "@/components/Icons/Folder";
+import ServerIcon from "@/components/Icons/Server";
 import MenuIcon from "@/components/Icons/Menu";
 import ContextMenuContainer from "./ContextMenu/container";
 import RenamePopup from "./ContextMenu/rename";
 import Pterodactyl from "@/components/Pterodactyl";
-import BreadCrumbs from "./BreadCrumbs";
+import BreadCrumbs from "@/components/BreadCrumbs";
 import { useSearchParams } from "next/navigation";
 import Link from "next/link";
 
@@ -118,11 +119,10 @@ const Index = () => {
       await setCredentials();
       if (apiKey && serverId) {
         const pteroInstance = new Pterodactyl(serverId, apiKey);
-        if (!pathParam) {
-          pteroInstance.helpers.setWorkingDirectory(path);
-        } else {
-          pteroInstance.helpers.setWorkingDirectory(pathParam);
+        if (pathParam) {
+          setPath(pathParam);
         }
+        pteroInstance.helpers.setWorkingDirectory(path);
         setPtero(pteroInstance);
         await fetchFiles(pteroInstance);
       }
@@ -153,15 +153,64 @@ const Index = () => {
 
       {serverId && (
         <div className="flex p-4 gap-4">
-          <BreadCrumbs
-            serverId={serverId}
-            path={path}
-            changeDirectory={changeDirectory}
-          />
+          <BreadCrumbs>
+            <li>
+              <div className="mr-2">
+                <ServerIcon />
+              </div>
+              {serverId}
+            </li>
+            <li>
+              <a href={`/files?serverid=${serverId}&path=/`}>
+                <div className="mr-2">
+                  <FolderIcon />
+                </div>
+                <span>/</span>
+              </a>
+            </li>
+            {path
+              .split("/")
+              .filter((p) => p !== "")
+              .map((element, index) => {
+                const tmp_path = path
+                  .split("/")
+                  .slice(0, index + 2)
+                  .join("/");
+                return (
+                  <li key={index}>
+                    <a href={`/files?serverid=${serverId}&path=${tmp_path}`}>
+                      <div className="mr-2">
+                        <FolderIcon />
+                      </div>
+                      <span>{element}</span>
+                    </a>
+                  </li>
+                );
+              })}
+            <li>
+              <span className="inline-flex items-center gap-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  className="h-4 w-4 stroke-current"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                  ></path>
+                </svg>
+                Add Document
+              </span>
+            </li>
+          </BreadCrumbs>
         </div>
       )}
 
       {serverId &&
+        fileList &&
         fileList.map((file: FileProps) => (
           <div
             className="flex justify-between gap-4 bg-content mb-1 hover:bg-neutral-content pl-4 pr-4 pt-1 pb-1 rounded-md"
@@ -172,14 +221,16 @@ const Index = () => {
             </div>
             <div className="w-64 text-left">
               {file.attributes.is_file ? (
-                <Link href={`/files/edit?serverid=${serverId}&path=${path}`}>
+                <a
+                  href={`/files/edit?serverid=${serverId}&path=${path}/${file.attributes.name}`}
+                >
                   {file.attributes.name}
-                </Link>
+                </a>
               ) : (
                 <a
-                  onClick={() =>
-                    changeDirectory(`${path}/${file.attributes.name}`)
-                  }
+                  href={`/files?serverid=${serverId}&path=${
+                    path != "/" ? path : ""
+                  }/${file.attributes.name}`}
                 >
                   {file.attributes.name}
                 </a>