x

app/app/files/edit/page.tsx

@@ -1,14 +1,30 @@
 "use client";
 
-import React from "react";
+import React, { useCallback } from "react";
 
 import { useSearchParams } from "next/navigation";
+import TextEditor from "@/components/TextEditor";
+import BreadCrumbs from "@/components/FilesEditor/BreadCrumbs";
 
 function Page() {
   const searchParams = useSearchParams();
-  const serverId = searchParams.get("serverid");
+  const serverId = searchParams.get("serverid") || "";
+  const path = searchParams.get("path") || "";
 
-  return <div>{serverId}</div>;
+  const changeDirectory = useCallback((path: string) => {
+    console.log("changeDirectory", path);
+  }, []);
+
+  return (
+    <>
+      <BreadCrumbs
+        changeDirectory={changeDirectory}
+        serverId={serverId}
+        path={path}
+      />
+      <TextEditor />;
+    </>
+  );
 }
 
 export default Page;

app/app/files/page.tsx

@@ -3,9 +3,7 @@ import FilesEdit from "@/components/FilesEditor";
 export default function Files() {
   return (
     <>
-      <section className="container mx-auto">
-        <FilesEdit />
-      </section>
+      <FilesEdit />
     </>
   );
 }

app/app/layout.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import { Console } from "console";
 import ConsoleNavigation from "@/components/ConsoleNavigation";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -24,7 +23,9 @@ export default function RootLayout({
         </header>
         <div id="container">
           <ConsoleNavigation />
-          {children}
+          <section id="content" className="container mx-auto gap-4">
+            {children}
+          </section>
         </div>
       </body>
     </html>

app/components/BreadCrumbs/index.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import React, { Children } from "react";
+import { useParams } from "next/navigation";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const BreadCrumbs = ({ children }: Props) => {
+  const { serverid, path } = useParams();
+
+  return <div>{children}</div>;
+};
+
+export default BreadCrumbs;

app/components/FilesEditor/index.tsx

@@ -10,6 +10,7 @@ import RenamePopup from "./ContextMenu/rename";
 import Pterodactyl from "@/components/Pterodactyl";
 import BreadCrumbs from "./BreadCrumbs";
 import { useSearchParams } from "next/navigation";
+import Link from "next/link";
 
 interface FileAttributes {
   name: string;
@@ -58,6 +59,7 @@ const Index = () => {
   const [path, setPath] = useState<string>("/");
   const urlParams = useSearchParams();
   const serverId = urlParams.get("serverid");
+  const pathParam = urlParams.get("path");
 
   const setCredentials = useCallback(() => {
     setApiKey("ptlc_N77A2hEczFmSwGXm4cEXh4Gw3ZP0Ygr5NaBkGlE7pjU");
@@ -116,7 +118,11 @@ const Index = () => {
       await setCredentials();
       if (apiKey && serverId) {
         const pteroInstance = new Pterodactyl(serverId, apiKey);
-        pteroInstance.helpers.setWorkingDirectory(path);
+        if (!pathParam) {
+          pteroInstance.helpers.setWorkingDirectory(path);
+        } else {
+          pteroInstance.helpers.setWorkingDirectory(pathParam);
+        }
         setPtero(pteroInstance);
         await fetchFiles(pteroInstance);
       }
@@ -166,7 +172,9 @@ const Index = () => {
             </div>
             <div className="w-64 text-left">
               {file.attributes.is_file ? (
-                <a href="#">{file.attributes.name}</a>
+                <Link href={`/files/edit?serverid=${serverId}&path=${path}`}>
+                  {file.attributes.name}
+                </Link>
               ) : (
                 <a
                   onClick={() =>

app/components/WebConsole/index.tsx

@@ -156,54 +156,52 @@ const Console = () => {
 
   return (
     <>
-      <section className="container mx-auto">
-        <div className="flex flex-col gap-4">
-          <div className="flex gap-4">
-            <div className="w-4/5 flex justify-self-auto justify-between items-center">
-              <ServerName serverName="asdf " />
-              <ServerStatus serverStatus={serverStatus} />
-            </div>
-            <div className="w-1/5 flex justify-between">
-              <ServerControl websocketRef={websocketRef} />
-            </div>
+      <div className="flex flex-col gap-4">
+        <div className="flex gap-4">
+          <div className="w-4/5 flex justify-self-auto justify-between items-center">
+            <ServerName serverName="asdf " />
+            <ServerStatus serverStatus={serverStatus} />
           </div>
+          <div className="w-1/5 flex justify-between">
+            <ServerControl websocketRef={websocketRef} />
+          </div>
+        </div>
 
-          <div className="flex gap-4">
-            <div className="w-4/5">
-              <div>
-                <textarea
-                  className="textarea textarea-bordered text-yellow-200 w-full"
-                  ref={textareaRef}
-                  cols={110}
-                  rows={20}
-                  value={output.join("\n")}
-                  readOnly
-                />
-              </div>
-              <div>
-                <input
-                  className="input input-bordered w-full text-yellow-200"
-                  type="text"
-                  value={input}
-                  onChange={(e) => setInput(e.target.value)}
-                  onKeyPress={handleKeyPress}
-                />
-              </div>
+        <div className="flex gap-4">
+          <div className="w-4/5">
+            <div>
+              <textarea
+                className="textarea textarea-bordered text-yellow-200 w-full"
+                ref={textareaRef}
+                cols={110}
+                rows={20}
+                value={output.join("\n")}
+                readOnly
+              />
             </div>
-            <div className="w-1/5">
-              <Stats
-                cpu={cpuStat}
-                ramUsage={ramStat}
-                ramTotal={ramTotal}
-                diskUsage={diskUsage}
-                diskTotal={diskTotal}
-                network={network}
-                uptime={uptime}
+            <div>
+              <input
+                className="input input-bordered w-full text-yellow-200"
+                type="text"
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyPress={handleKeyPress}
               />
             </div>
           </div>
+          <div className="w-1/5">
+            <Stats
+              cpu={cpuStat}
+              ramUsage={ramStat}
+              ramTotal={ramTotal}
+              diskUsage={diskUsage}
+              diskTotal={diskTotal}
+              network={network}
+              uptime={uptime}
+            />
+          </div>
         </div>
-      </section>
+      </div>
     </>
   );
 };