(FEAT): Mobile friendly and code cleanup!

Cleaned the formatting with Nvim and created mobile friendly styles.

backend/src/server.ts

@@ -20,8 +20,8 @@ import Multer from "multer";
 const PORT = 5000;
 const APP: Express = express();
 // TODO: BACK TO NORMAL PATH
-const ROOT: string = "/media/vault";
+// const ROOT: string = "/media/vault";
-// const ROOT: string = "/home/azpect";
+const ROOT: string = "/home/azpect";
 
 /**
  * Configure the .env file, this is for testing only, should be ignored in production.

frontend/src/components/ChildrenLoading.jsx

@@ -6,12 +6,12 @@ import "../index.css"
  * @constructor
  */
 export default function ChildrenLoading() {
-    return (
+  return <>
     <div className="size-full flex items-center justify-center">
       <div
         className="animate-spin rounded-full border-blue-500 border-3 border-t-transparent size-6 mx-2 ">
       </div>
       <p className="text-lg text-black opacity-90">Content loading...</p>
     </div>
-    );
+  </>
 };

frontend/src/components/ContentLoading.jsx

@@ -6,7 +6,7 @@ import "../index.css"
  * @constructor
  */
 export default function ContentLoading() {
-    return (
+  return <>
     <div className="h-9/10 w-full flex flex-col items-center justify-center">
       <div className="flex">
         <div
@@ -16,5 +16,5 @@ export default function ContentLoading() {
       </div>
       <p className="text-xs text-gray-500 my-2">For large files, this may take a while.</p>
     </div>
-    );
+  </>
 };

frontend/src/components/CreateDirectory.jsx

@@ -7,24 +7,23 @@ import {useState} from "react";
 export default function CreateDirectory({close, create}) {
   const [dirName, setDirName] = useState("");
 
-    const createDirectory = () => {
+  const createDirectory = () => create(dirName);
-        create(dirName);
+  const updateDirName = (e) => setDirName(e.target.value);
-    }
-
-    const updateDirName = (e) => {
-        setDirName(e.target.value);
-    }
 
   const closeWithoutSaving = () => {
     setDirName("");
     close();
   }
 
-    return (
+  return <>
     <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Blured backdrop */}
       <div className="fixed -inset-10 bg-black opacity-50 blur-lg"></div>
-            <div className="relative z-50 bg-white p-8 rounded-lg shadow-lg w-2/5 border-1 border-gray-400">
+
-                <h2 className="text-2xl font-semibold mb-2 text-blue-400">Create a Directory</h2>
+      <div className="relative z-50 bg-white p-8 rounded-lg shadow-lg w-9/10 lg:w-2/5 border-1 border-gray-400">
+        <h2 className="text-2xl font-semibold mb-2 text-blue-400">
+          Create a Directory
+        </h2>
         <p className="text-sm">
           Create a file or directory in the current directory. To create a directory, include a <span
             className="font-mono text-black bg-gray-300 p-1 rounded-md">/</span> at the end of the name.
@@ -51,5 +50,5 @@ export default function CreateDirectory({close, create}) {
         </div>
       </div>
     </div>
-    );
+  </>
 }

frontend/src/components/Directory.jsx

@@ -1,22 +1,26 @@
 import "../index.css"
-import {useState} from "react";
+import { useState } from "react";
 
 function FileIcon() {
-    return <svg className="text-black h-5 mx-2" stroke="currentColor" viewBox="0 0 24 24" fill="none"
+  return <>
+    <svg className="text-black h-5 mx-2" stroke="currentColor" viewBox="0 0 24 24" fill="none"
       xmlns="http://www.w3.org/2000/svg">
       <path
         d="M19 9V17.8C19 18.9201 19 19.4802 18.782 19.908C18.5903 20.2843 18.2843 20.5903 17.908 20.782C17.4802 21 16.9201 21 15.8 21H8.2C7.07989 21 6.51984 21 6.09202 20.782C5.71569 20.5903 5.40973 20.2843 5.21799 19.908C5 19.4802 5 18.9201 5 17.8V6.2C5 5.07989 5 4.51984 5.21799 4.09202C5.40973 3.71569 5.71569 3.40973 6.09202 3.21799C6.51984 3 7.0799 3 8.2 3H13M19 9L13 3M19 9H14C13.4477 9 13 8.55228 13 8V3"
-            strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
+  </>
 }
 
 function DirectoryIcon() {
-    return <svg className="text-black h-5 mx-2" stroke="currentColor" viewBox="0 0 24 24" fill="none"
+  return <>
+    <svg className="text-black h-5 mx-2" stroke="currentColor" viewBox="0 0 24 24" fill="none"
       xmlns="http://www.w3.org/2000/svg">
       <path
         d="M3 8.2C3 7.07989 3 6.51984 3.21799 6.09202C3.40973 5.71569 3.71569 5.40973 4.09202 5.21799C4.51984 5 5.0799 5 6.2 5H9.67452C10.1637 5 10.4083 5 10.6385 5.05526C10.8425 5.10425 11.0376 5.18506 11.2166 5.29472C11.4184 5.4184 11.5914 5.59135 11.9373 5.93726L12.0627 6.06274C12.4086 6.40865 12.5816 6.5816 12.7834 6.70528C12.9624 6.81494 13.1575 6.89575 13.3615 6.94474C13.5917 7 13.8363 7 14.3255 7H17.8C18.9201 7 19.4802 7 19.908 7.21799C20.2843 7.40973 20.5903 7.71569 20.782 8.09202C21 8.51984 21 9.0799 21 10.2V15.8C21 16.9201 21 17.4802 20.782 17.908C20.5903 18.2843 20.2843 18.5903 19.908 18.782C19.4802 19 18.9201 19 17.8 19H6.2C5.07989 19 4.51984 19 4.09202 18.782C3.71569 18.5903 3.40973 18.2843 3.21799 17.908C3 17.4802 3 16.9201 3 15.8V8.2Z"
-            strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
+  </>
 }
 
 /**
@@ -28,7 +32,7 @@ function DirectoryIcon() {
  * @returns {{}}
  * @constructor
  */
-export default function Directory({entry, showHidden, appendPath, toggleSelected, toggleEditing}) {
+export default function Directory({ entry, showHidden, appendPath, toggleSelected, toggleEditing }) {
   const [selected, setSelected] = useState(false);
 
   const handleClick = () => {
@@ -51,17 +55,20 @@ export default function Directory({entry, showHidden, appendPath, toggleSelected
     return <></>;
   }
 
-    return (
+  return <>
     <label className={`w-full hover:bg-gray-300 flex ${selected ? "bg-blue-300" : "bg-gray-100"}`}>
-            <input className="mx-2 peer checked:bg-blue-300" type="checkbox" checked={selected}
+      <input
-                   onChange={handleCheck}/>
+        className="mx-2 peer checked:bg-blue-300"
+        type="checkbox"
+        checked={selected}
+        onChange={handleCheck} />
       <div className="w-full flex bg-gray-100 peer-checked:bg-blue-300 hover:bg-gray-300 peer-hover:bg-gray-300">
         <button className="flex items-center" onClick={handleClick}>
-                    {entry.directory ? <DirectoryIcon/> : <FileIcon/>}
+          {entry.directory ? <DirectoryIcon /> : <FileIcon />}
           <p className="p-2 hover:underline hover:text-blue-400">{entry.name}{entry.directory ? "/" : ""}</p>
         </button>
       </div>
 
     </label>
-    );
+  </>
 }

frontend/src/components/DirectoryList.jsx

@@ -8,13 +8,16 @@ import Directory from "./Directory.jsx";
  * @param toggleSelected {function(string)} Function to toggle selection status.
  * @constructor
  */
-export default function DirectoryList({dirs, showHidden, appendPath, toggleSelected, toggleEditing}) {
+export default function DirectoryList({ dirs, showHidden, appendPath, toggleSelected, toggleEditing }) {
-    return (
+  return <>
-        <>
+    {dirs.map((dir, idx) =>
-            {dirs.map((dir, idx) => <Directory key={idx} entry={dir} showHidden={showHidden} appendPath={appendPath}
+      <Directory
-                                               toggleSelected={toggleSelected} toggleEditing={toggleEditing}/>)}
+        key={idx}
+        entry={dir}
+        showHidden={showHidden}
+        appendPath={appendPath}
+        toggleSelected={toggleSelected}
+        toggleEditing={toggleEditing} />
+    )}
   </>
-    )
-
-
 }

frontend/src/components/DownloadLoading.jsx

@@ -6,7 +6,7 @@ import "../index.css"
  * @constructor
  */
 export default function DownloadLoading() {
-    return (
+  return <>
     <div className="absolute size-full flex items-center justify-center">
       <div className="fixed inset-0 bg-black opacity-25 blur-lg"></div>
       <div
@@ -14,5 +14,5 @@ export default function DownloadLoading() {
       </div>
       <p className="text-lg text-black opacity-90">Preparing files...</p>
     </div>
-    );
+  </>
 };

frontend/src/components/Editor.jsx

@@ -1,7 +1,7 @@
-import {useEffect, useRef, useState} from "react";
+import { useEffect, useRef, useState } from "react";
 import ContentLoading from "./ContentLoading.jsx";
 
-export default function Editor({content, path, exit, saveExit, loading}) {
+export default function Editor({ content, path, exit, saveExit, loading }) {
   const [text, setText] = useState("");
   /**
      * Store a reference to the text area object
@@ -9,9 +9,7 @@ export default function Editor({content, path, exit, saveExit, loading}) {
      */
   const textareaRef = useRef(null);
 
-    const updateText = (event) => {
+  const updateText = (event) => setText(event.target.value);
-        setText(event.target.value);
-    };
 
   useEffect(() => {
     setText(content);
@@ -37,7 +35,7 @@ export default function Editor({content, path, exit, saveExit, loading}) {
       textarea.selectionStart = textarea.selectionEnd = start + 2; // Move the cursor after the tab
 
       // Trigger a change event so React knows the value changed.
-            textarea.dispatchEvent(new Event('input', {bubbles: true}));
+      textarea.dispatchEvent(new Event('input', { bubbles: true }));
     }
   };
 
@@ -45,17 +43,20 @@ export default function Editor({content, path, exit, saveExit, loading}) {
      * Call the parent function with the new content which is
      * stored in the text state.
      */
-    const saveAndExit = () => {
+  const saveAndExit = () => saveExit(text);
-        saveExit(text);
-    };
 
-    return (
+  return <>
     <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Blured backdrop */}
       <div className="fixed inset-0 bg-black opacity-50 blur-lg"></div>
-            <div className="relative z-10 bg-white p-8 rounded-lg shadow-lg w-3/4 h-5/6 border-1 border-gray-400">
+
-                <h2 className="text-lg font-semibold mb-4 text-blue-400">Editing File: <span
+      <div className="w-9/10 lg:w-3/4 h-5/6 relative z-10 bg-white p-4 lg:p-8 rounded-lg shadow-lg border-1 border-gray-400 flex flex-col">
-                    className="font-mono text-black bg-gray-300 p-1 rounded-md">{path}</span></h2>
+        <h2 className="text-lg font-semibold mb-4 text-blue-400">
-                {loading && <ContentLoading/>}
+          Editing File: <span className="font-mono text-black bg-gray-300 p-1 rounded-md">
+            {path}
+          </span>
+        </h2>
+        {loading && <ContentLoading />}
         {loading ||
           <textarea
             onKeyDown={handleKeyPress}
@@ -63,10 +64,10 @@ export default function Editor({content, path, exit, saveExit, loading}) {
             ref={textareaRef}
             onInput={updateText}
             value={text}
-                        className="border-1 border-gray-300 rounded-md w-full h-9/10 p-1 resize-none text-sm font-mono">
+            className="border-1 border-gray-300 rounded-md w-full flex-grow p-1 resize-none text-sm font-mono">
           </textarea>
         }
-                <div className="flex justify-end">
+        <div className="flex justify-end mt-4">
           <button
             title="Exit without saving"
             onClick={exit}
@@ -82,5 +83,5 @@ export default function Editor({content, path, exit, saveExit, loading}) {
         </div>
       </div>
     </div>
-    );
+  </>
 }

frontend/src/components/Error.jsx

@@ -8,7 +8,7 @@ import "../index.css";
  * @constructor
  */
 export default function Error({error, clear}) {
-    return (
+  return <>
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div className="fixed inset-0 bg-black opacity-50 blur-lg"></div>
       <div className="relative z-50 bg-white p-8 rounded-lg shadow-lg w-96 border-1 border-gray-400">
@@ -24,5 +24,5 @@ export default function Error({error, clear}) {
         </div>
       </div>
     </div>
-    );
+  </>
 }

frontend/src/components/LoginForm.jsx

@@ -1,8 +1,8 @@
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import UserInput from "./UserInput.jsx";
 import PasswordInput from "./PasswordInput.jsx";
 import RememberMe from "./RememberMe.jsx";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 
 export default function LoginForm() {
@@ -68,7 +68,7 @@ export default function LoginForm() {
         headers: {
           "Content-Type": "application/json",
         },
-                body: JSON.stringify({username, password}),
+        body: JSON.stringify({ username, password }),
       });
       if (!resp.ok) {
         const data = await resp.json();
@@ -80,7 +80,7 @@ export default function LoginForm() {
     };
 
     sendAuthReq(username, password).then((data) => {
-            const {code, token} = data;
+      const { code, token } = data;
 
       // Should always be 200, but just make sure it is
       if (code === 200) {
@@ -112,10 +112,11 @@ export default function LoginForm() {
   }, [loading]);
 
 
-    return <form onSubmit={handleSubmit} className="w-full flex flex-col items-center justify-center">
+  return <>
-        <UserInput onChange={updateUsername}/>
+    <form onSubmit={handleSubmit} className="w-full flex flex-col items-center justify-center">
-        <PasswordInput onChange={updatePassword}/>
+      <UserInput onChange={updateUsername} />
-        <RememberMe onChange={updateRemember}/>
+      <PasswordInput onChange={updatePassword} />
+      <RememberMe onChange={updateRemember} />
 
       {error && <p className="w-full text-red-500 text-sm my-2">{error}</p>}
 
@@ -129,4 +130,5 @@ export default function LoginForm() {
         If you do not have an account, you're in the wrong place!
       </p>
     </form>
+  </>
 };

frontend/src/components/Navbar.jsx

@@ -1,6 +1,6 @@
 import "../index.css"
-import {useState} from "react";
+import { useState } from "react";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 /**
  * Main navbar icon
@@ -9,11 +9,13 @@ import {useNavigate} from "react-router-dom";
  * @constructor
  */
 function MainIcon() {
-    return <svg className="h-10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  return <>
+    <svg className="h-8 lg:h-10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M12 9.5V15.5M12 9.5L10 11.5M12 9.5L14 11.5M8.4 19C5.41766 19 3 16.6044 3 13.6493C3 11.2001 4.8 8.9375 7.5 8.5C8.34694 6.48637 10.3514 5 12.6893 5C15.684 5 18.1317 7.32251 18.3 10.25C19.8893 10.9449 21 12.6503 21 14.4969C21 16.9839 18.9853 19 16.5 19L8.4 19Z"
-            stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
+  </>
 }
 
 /**
@@ -22,19 +24,19 @@ function MainIcon() {
  * @returns {JSX.Element}
  * @constructor
  */
-function DownloadButton({downloadFiles}) {
+function DownloadButton({ downloadFiles }) {
-    return (
+  return <>
     <button className="text-black" title="Download files" onClick={downloadFiles}>
       <svg className="hover:bg-gray-300 mx-1 transition-colors duration-200 p-1.5 rounded-full h-8"
         viewBox="0 0 24 24" fill="currentColor"
         xmlns="http://www.w3.org/2000/svg">
         <path
-                    d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z"/>
+          d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z" />
         <path
-                    d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z"/>
+          d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z" />
       </svg>
     </button>
-    )
+  </>
 }
 
 /**
@@ -43,19 +45,19 @@ function DownloadButton({downloadFiles}) {
  * @returns {JSX.Element}
  * @constructor
  */
-function UploadButton({uploadFiles}) {
+function UploadButton({ uploadFiles }) {
-    return (
+  return <>
     <button className="text-black" title="Upload files" onClick={uploadFiles}>
       <svg className="hover:bg-gray-300 mx-1 transition-colors duration-200 p-1.5 rounded-full font-semibold h-8"
         viewBox="0 0 24 24" fill="currentColor"
         xmlns="http://www.w3.org/2000/svg">
         <path
-                    d="M12.5535 2.49392C12.4114 2.33852 12.2106 2.25 12 2.25C11.7894 2.25 11.5886 2.33852 11.4465 2.49392L7.44648 6.86892C7.16698 7.17462 7.18822 7.64902 7.49392 7.92852C7.79963 8.20802 8.27402 8.18678 8.55352 7.88108L11.25 4.9318V16C11.25 16.4142 11.5858 16.75 12 16.75C12.4142 16.75 12.75 16.4142 12.75 16V4.9318L15.4465 7.88108C15.726 8.18678 16.2004 8.20802 16.5061 7.92852C16.8118 7.64902 16.833 7.17462 16.5535 6.86892L12.5535 2.49392Z"/>
+          d="M12.5535 2.49392C12.4114 2.33852 12.2106 2.25 12 2.25C11.7894 2.25 11.5886 2.33852 11.4465 2.49392L7.44648 6.86892C7.16698 7.17462 7.18822 7.64902 7.49392 7.92852C7.79963 8.20802 8.27402 8.18678 8.55352 7.88108L11.25 4.9318V16C11.25 16.4142 11.5858 16.75 12 16.75C12.4142 16.75 12.75 16.4142 12.75 16V4.9318L15.4465 7.88108C15.726 8.18678 16.2004 8.20802 16.5061 7.92852C16.8118 7.64902 16.833 7.17462 16.5535 6.86892L12.5535 2.49392Z" />
         <path
-                    d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z"/>
+          d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z" />
       </svg>
     </button>
-    )
+  </>
 }
 
 /**
@@ -64,19 +66,19 @@ function UploadButton({uploadFiles}) {
     * @constructor
     */
 function InfoButton() {
-    return (
+  return <>
     <button className="text-black" title="Filesystem information">
       <svg className="hover:bg-gray-300 mx-1 transition-colors duration-200 p-1.5 rounded-full font-semibold h-8"
         viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
         <path
-                    d="M12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V11C12.75 10.5858 12.4142 10.25 12 10.25C11.5858 10.25 11.25 10.5858 11.25 11V17C11.25 17.4142 11.5858 17.75 12 17.75Z"/>
+          d="M12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V11C12.75 10.5858 12.4142 10.25 12 10.25C11.5858 10.25 11.25 10.5858 11.25 11V17C11.25 17.4142 11.5858 17.75 12 17.75Z" />
         <path
-                    d="M12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z"/>
+          d="M12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z" />
         <path fillRule="evenodd" clipRule="evenodd"
-                      d="M1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75Z"/>
+          d="M1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75Z" />
       </svg>
     </button>
-    )
+  </>
 }
 
 
@@ -100,17 +102,17 @@ function LogoutButton() {
     navigate("/login");
   };
 
-    return (
+  return <>
     <button className="text-red-500" title="Logout" onClick={handleClick}>
       <svg
         className="text-red-500 hover:bg-red-200 mx-1 transition-colors duration-200 p-1.5 rounded-full font-semibold h-8"
         viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M15 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H15M8 8L4 12M4 12L8 16M4 12L16 12"
-                    strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+          strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
       </svg>
     </button>
-    )
+  </>
 }
 
 /**
@@ -125,34 +127,35 @@ function SearchBar() {
      * Update the controlled state.
      * @param event {InputEvent}
     */
-    const updateSearch = (event) => {
+  const updateSearch = (event) => setSearch(event.target.value);
-        setSearch(event.target.value);
-    };
 
   return (
-        <div className="mx-4 w-1/4">
+    <div className="mx-4 w-1/2 lg:w-1/4">
       <input
         className="px-2 py-1 w-full text-sm focus:outline-none focus:shadow-sm shadow-blue-300 transition-shadow duration-200 rounded-sm border-1 border-gray-400"
         type="search"
         value={search}
         onInput={updateSearch}
-                placeholder="Search filesystem"/>
+        placeholder="Search filesystem" />
     </div>
   )
 }
 
-export default function Navbar({downloadFiles, uploadFiles}) {
+export default function Navbar({ downloadFiles, uploadFiles }) {
-    return <nav className="absolute w-full p-2 flex items-center border-b-1 border-gray-400 bg-gray-100">
+  return <>
-        <MainIcon/>
+    <nav className="absolute w-full p-2 flex items-center border-b-1 border-gray-400 bg-gray-100">
+      <MainIcon />
 
-        <h3 className="text-xl font-mono px-3">file.gophernest.net</h3>
+      <h3 className="hidden lg:block text-xl font-mono px-3">file.gophernest.net</h3>
-        <SearchBar/>
+
+      <SearchBar />
 
       <div className="min-h-fit ml-auto flex">
-            <DownloadButton downloadFiles={downloadFiles}/>
+        <DownloadButton downloadFiles={downloadFiles} />
-            <UploadButton uploadFiles={uploadFiles}/>
+        <UploadButton uploadFiles={uploadFiles} />
-            <InfoButton/>
+        <InfoButton />
-            <LogoutButton/>
+        <LogoutButton />
       </div>
     </nav>
+  </>;
 }

frontend/src/components/PasswordInput.jsx

@@ -18,9 +18,7 @@ export default function PasswordInput({onChange}) {
   /**
      * Toggle the hidden state which will determine the type of the input.
      */
-    const toggleHidden = () => {
+  const toggleHidden = () => setHidden(!hidden);
-        setHidden(!hidden);
-    }
 
   /**
      * Update the password

frontend/src/components/PathDisplay.jsx

@@ -7,7 +7,7 @@
  * @constructor
  */
 function HomeButton({onClick, enabled}) {
-    return (
+  return <>
     <button
       onClick={onClick}
       disabled={!enabled}
@@ -19,11 +19,11 @@ function HomeButton({onClick, enabled}) {
         <path d="M1 6V15H6V11C6 9.89543 6.89543 9 8 9C9.10457 9 10 9.89543 10 11V15H15V6L8 0L1 6Z"/>
       </svg>
     </button>
-    )
+  </>
 }
 
 function BackButton({onClick, enabled}) {
-    return (
+  return <>
     <button onClick={onClick}
       disabled={!enabled}
       className="hover:bg-gray-200 p-1.5 mr-1 rounded-full transition-colors duration-150 disabled:text-gray-500 disabled:hover:bg-red-300 disabled:cursor-not-allowed text-black">
@@ -32,12 +32,12 @@ function BackButton({onClick, enabled}) {
           d="M4 10L3.29289 10.7071L2.58579 10L3.29289 9.29289L4 10ZM21 18C21 18.5523 20.5523 19 20 19C19.4477 19 19 18.5523 19 18L21 18ZM8.29289 15.7071L3.29289 10.7071L4.70711 9.29289L9.70711 14.2929L8.29289 15.7071ZM3.29289 9.29289L8.29289 4.29289L9.70711 5.70711L4.70711 10.7071L3.29289 9.29289ZM4 9L14 9L14 11L4 11L4 9ZM21 16L21 18L19 18L19 16L21 16ZM14 9C17.866 9 21 12.134 21 16L19 16C19 13.2386 16.7614 11 14 11L14 9Z"/>
       </svg>
     </button>
-    )
+  </>
 }
 
 
 function CreateButton({onClick}) {
-    return (
+  return <>
     <button onClick={onClick}
       title="Create a file/directory"
       className="hover:bg-gray-200 p-1.5 mr-1 rounded-full transition-colors duration-150 disabled:text-gray-500 disabled:hover:bg-red-300 disabled:cursor-not-allowed text-black">
@@ -48,11 +48,11 @@ function CreateButton({onClick}) {
           stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
       </svg>
     </button>
-    )
+  </>
 }
 
 function DeleteButton({onClick, enabled}) {
-    return (
+  return <>
     <button onClick={onClick}
       disabled={!enabled}
       title="Delete selected files/directories"
@@ -63,7 +63,7 @@ function DeleteButton({onClick, enabled}) {
           stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
       </svg>
     </button>
-    );
+  </>
 }
 
 /**
@@ -75,10 +75,14 @@ function DeleteButton({onClick, enabled}) {
  * @constructor
  */
 function PathElement({name, index, onClick}) {
-    const handleClick = () => {
+  const handleClick = () => onClick(index);
-        onClick(index);
+  return <>
-    };
+    <button onClick={handleClick}>
-    return <button onClick={handleClick}>/<span className="hover:underline cursor-pointer">{name}</span></button>
+      /<span className="hover:underline cursor-pointer">
+        {name}
+      </span>
+    </button>
+  </>
 }
 
 /**
@@ -95,9 +99,8 @@ function PathElement({name, index, onClick}) {
  * @constructor
  */
 export default function PathDisplay({path, updatePath, backHome, backArrow, enabled, create, remove, removeEnable}) {
-    return (
+  return <>
-        <div
+    <div className="w-9/10 lg:w-2/3 mt-8 border-b-1 border-gray-400 bg-white flex items-center truncate">
-            className="w-2/3 mt-8 border-b-1 border-gray-400 bg-white flex items-center truncate">
       <HomeButton onClick={backHome} enabled={enabled}/>
       <BackButton onClick={backArrow} enabled={enabled}/>
       {path.map((seg, idx) => <PathElement name={seg} key={idx} index={idx} onClick={updatePath}/>)}
@@ -108,5 +111,5 @@ export default function PathDisplay({path, updatePath, backHome, backArrow, enab
         <CreateButton onClick={create}/>
       </div>
     </div>
-    )
+  </>
 }

frontend/src/components/RememberMe.jsx

@@ -20,8 +20,10 @@ export default function RememberMe({onChange}) {
     setRemember(!remember);
   };
 
-    return <div className="w-full flex items-center my-2" onClick={toggleRemember}>
+  return <>
+    <div className="w-full flex items-center my-2" onClick={toggleRemember}>
       <input name={rememberMeId} checked={remember} type="checkbox" className="mx-1"/>
       <label htmlFor={rememberMeId} className="text-sm select-none cursor-pointer">Remember me for 30 days</label>
     </div>
+  </>
 }

frontend/src/components/Uploader.jsx

@@ -46,9 +46,7 @@ export default function Uploader({close, upload}) {
      * Prevent the default drag behavior.
      * @param e {object} Event object from the div wrapper.
      */
-    const dragOver = (e) => {
+  const dragOver = (e) => e.preventDefault();
-        e.preventDefault();
-    };
 
   /**
      * When files are dropped into the div, this will be called, to append the files.
@@ -64,26 +62,20 @@ export default function Uploader({close, upload}) {
      * Click event for the input element.
      * Uses the ref hook to access the element.
      */
-    const click = () => {
+  const click = () => inputElement.current.click();
-        inputElement.current.click();
-    };
 
   /**
      * When the input changes, append the new files.
      * @param e {object} Event object from the input.
      */
-    const inputChange = (e) => {
+  const inputChange = (e) => setFiles([...files, ...e.target.files]);
-        setFiles([...files, ...e.target.files]);
-    };
 
-    const uploadFiles = () => {
+  const uploadFiles = () => upload(files);
-        upload(files);
-    };
 
-    return (
+  return <>
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div className="fixed -inset-10 bg-black opacity-50 blur-lg"></div>
-            <div className="relative z-50 bg-white p-8 rounded-lg shadow-lg w-2/5 border-1 border-gray-400">
+      <div className="relative z-50 bg-white p-8 rounded-lg shadow-lg w-9/10 lg:w-2/5 border-1 border-gray-400">
         <h2 className="text-2xl font-semibold mb-2 text-blue-400">Upload Files</h2>
         <p className="text-sm">
           Files uploaded will be added to the current directory. Currently, directory
@@ -94,7 +86,13 @@ export default function Uploader({close, upload}) {
           className="my-5 border-2 border-dashed p-8 rounded-md text-center cursor-pointer border-gray-400 hover:bg-blue-100 hover:border-blue-500 transition-all duration-100"
           onDragEnter={dragEnter} onDragLeave={dragLeave} onDragOver={dragOver} onDrop={drop} onClick={click}
         >
-                    <input multiple type="file" className="hidden" ref={inputElement} onChange={inputChange}/>
+          <input
+            multiple
+            type="file"
+            className="hidden"
+            ref={inputElement}
+            onChange={inputChange}
+          />
           <p className="italic">Drag and drop files here or click to select</p>
         </div>
         <FileList files={files}/>
@@ -114,5 +112,5 @@ export default function Uploader({close, upload}) {
         </div>
       </div>
     </div>
-    );
+  </>
 }

frontend/src/pages/Dashboard.jsx

@@ -13,8 +13,8 @@ import CreateDirectory from "../components/CreateDirectory.jsx";
 export default function Dashboard() {
   // Store the default path
   // TODO: BACK TO NORMAL PATH
-  const defaultPath = ["media", "vault"];
+  // const defaultPath = ["media", "vault"];
-  // const defaultPath = ["home", "azpect"];
+  const defaultPath = ["home", "azpect"];
 
   /**
    * URL To the backend web server.
@@ -442,25 +442,46 @@ export default function Dashboard() {
     <div className="w-full min-h-screen h-screen pb-8">
       <Navbar downloadFiles={downloadFiles} uploadFiles={toggleUploading} />
       <div className="h-full w-full flex flex-col items-center justify-center pb-8">
+
         {downloadLoading && <DownloadLoading />}
         {creating && <CreateDirectory close={closeCreate} create={createDirectory} />}
         {uploading && <Uploader close={toggleUploading} upload={upload} />}
 
         {error && <Error error={error} clear={clearError} />}
-        {(editing !== "" && !error) &&
+        {
-          <Editor content={editingFileContent} path={editing} exit={exitFile} saveExit={exitAndSaveFile}
+          (editing !== "" && !error) &&
-            loading={contentLoading} />}
+            <Editor
+              content={editingFileContent}
+              path={editing}
+              exit={exitFile}
+              saveExit={exitAndSaveFile}
+              loading={contentLoading}
+            />
+        }
 
-        <PathDisplay path={path} updatePath={updatePath} backHome={backHome} backArrow={backArrow}
+        <PathDisplay
-          enabled={path.length > defaultPath.length} create={createDir} remove={removeSelected}
+          path={path}
-          removeEnable={selected.length > 0} />
+          updatePath={updatePath}
-        <div className="w-2/3 h-5/6 overflow-y-auto border-1 border-gray-300">
+          backHome={backHome}
+          backArrow={backArrow}
+          enabled={path.length > defaultPath.length}
+          create={createDir}
+          remove={removeSelected}
+          removeEnable={selected.length > 0}
+        />
+
+        <div className="w-9/10 lg:w-2/3 h-5/6 overflow-y-auto border-1 border-gray-300">
           {childrenLoading && <ChildrenLoading />}
-          <DirectoryList dirs={files} showHidden={showHidden} appendPath={appendPath}
+          <DirectoryList
-            // TODO: Rework the toggleSelected functionality
+            dirs={files}
-            toggleSelected={toggleSelected} toggleEditing={toggleEditing} />
+            showHidden={showHidden}
+            appendPath={appendPath}
+            toggleSelected={toggleSelected} // TODO: Rework the toggleSelected functionality
+            toggleEditing={toggleEditing}
+          />
         </div>
-        <div className="w-2/3 flex justify-end items-center">
+
+        <div className="w-9/10 lg:w-2/3 flex justify-end items-center">
           <label className="text-sm mx-2" htmlFor="showHiddenItems">Show Hidden Items</label>
           <input
             className="p-2"

frontend/src/pages/Login.jsx

@@ -11,10 +11,11 @@ function Login() {
   return <>
     <div className="min-h-screen h-screen w-full bg-gray-200 flex items-center justify-center">
       <h2 className="absolute top-0 left-0 font-[550] font-mono italic text-xl m-6">{domain}</h2>
-            <div className="w-2/7 h-fit bg-white border-1 rounded-sm border-gray-300 p-12">
+
+      <div className="w-9/10 lg:w-2/7 h-fit bg-white border rounded-sm border-gray-300 p-12">
         <p className="text-gray-400">Please enter your details</p>
         <h1 className="text-3xl font-semibold mt-2 mb-12"> Welcome Back </h1>
-                <LoginForm/>
+        <LoginForm />
       </div>
     </div>
   </>