Refactor file loading and code retrieval logic

This commit refactors the code in the `Page` component to improve the file loading and code retrieval logic. It removes the hardcoded initial code value and replaces it with an empty string. It also updates the `useEffect` hook to properly handle the startup of the application and retrieve the code content using the `Pterodactyl` API. Additionally, it updates the rendering of the breadcrumbs and adds a save button to the file editor.

Refactor file directory change functionality

This commit refactors the `changeDirectory` function in the `Index` component of the `FilesEditor` module. The function is removed as it is no longer used and has been replaced with a more efficient approach to handle directory changes.

app/app/files/edit/page.tsx

@@ -13,61 +13,67 @@ function Page() {
   const searchParams = useSearchParams();
   const serverId = searchParams.get("serverid") || "";
   const path = searchParams.get("path") || "";
-  const [code, setCode] = useState("dupa");
+  const [code, setCode] = useState("");
-  const pterodactyl = new Pterodactyl();
 
-  useEffect(() => {
+  useEffect(
-    const startupApp = async () => {
+    function () {
-      const panelApp = new Panel();
+      async function startupApp() {
+        const panelApp = new Panel();
+        const pterodactyl = new Pterodactyl();
 
-      const credentials = await panelApp.getCredentials();
+        const credentials = await panelApp.getCredentials();
-      pterodactyl.setApiKey(credentials.api_key);
+        pterodactyl.setApiKey(credentials.api_key);
-      pterodactyl.setServerId(serverId);
+        pterodactyl.setServerId(serverId);
-      setCode(await pterodactyl.files.getContent(path));
+        setCode(await pterodactyl.files.getContent(path));
-    };
+      }
 
-    if (serverId && path) {
+      if (serverId && path) {
-      startupApp();
+        startupApp();
-    }
+      }
-  }, [serverId, path]);
+    },
+    [serverId, path]
+  );
 
   return (
     <>
-      <BreadCrumbs>
+      <div className="flex mb-4">
-        <li>
+        <BreadCrumbs>
-          <div className="mr-2">
+          <li>
-            <ServerIcon />
-          </div>
-          {serverId}
-        </li>
-        <li>
-          <a href={`/files?serverid=${serverId}&path=/`}>
             <div className="mr-2">
-              <FolderIcon />
+              <ServerIcon />
             </div>
-            <span>/</span>
+            {serverId}
-          </a>
+          </li>
-        </li>
+          <li>
-        {path
+            <a href={`/files?serverid=${serverId}&path=/`}>
-          .split("/")
+              <div className="mr-2">
-          .filter((p) => p !== "")
+                <FolderIcon />
-          .map((element, index) => {
+              </div>
-            const tmp_path = path
+              <span>/</span>
-              .split("/")
+            </a>
-              .slice(0, index + 2)
+          </li>
-              .join("/");
+          {path
-            return (
+            .split("/")
-              <li key={index}>
+            .filter((p) => p !== "")
-                <a href={`/files?serverid=${serverId}&path=${tmp_path}`}>
+            .map((element, index) => {
-                  <div className="mr-2">
+              const tmp_path = path
-                    <FolderIcon />
+                .split("/")
-                  </div>
+                .slice(0, index + 2)
-                  <span>{element}</span>
+                .join("/");
-                </a>
+              return (
-              </li>
+                <li key={index}>
-            );
+                  <a href={`/files?serverid=${serverId}&path=${tmp_path}`}>
-          })}
+                    <div className="mr-2">
-      </BreadCrumbs>
+                      <FolderIcon />
+                    </div>
+                    <span>{element}</span>
+                  </a>
+                </li>
+              );
+            })}
+        </BreadCrumbs>
+        <button className="ml-auto btn btn-accent">Save</button>
+      </div>
       <TextEditor code={code} />
     </>
   );

app/components/FilesEditor/index.tsx

@@ -100,17 +100,6 @@ const Index = () => {
     setContextMenu(initialContextMenuState);
   }, []);
 
-  const changeDirectory = useCallback(
-    (newPath: string) => {
-      if (pterodactyl) {
-        pterodactyl.helpers.setWorkingDirectory(newPath);
-        fetchFiles();
-        // setPath(newPath);
-      }
-    },
-    [pterodactyl, fetchFiles]
-  );
-
   useEffect(() => {
     if (!apiKey || !serverId) return; // Upewniamy się, że mamy apiKey i serverId
 
@@ -142,7 +131,7 @@ const Index = () => {
       )}
 
       {serverId && (
-        <div className="flex p-4 gap-4">
+        <div className="flex gap-4">
           <BreadCrumbs>
             <li>
               <div className="mr-2">