↕️ Allow Folder/Server Sorting

client/package.json

@@ -17,6 +17,8 @@
     "guacamole-common-js": "^1.5.0",
     "qrcode.react": "^4.1.0",
     "react": "^18.3.1",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.0.1",
     "react-use-websocket": "^4.11.1",

client/src/common/contexts/ServerContext.jsx

@@ -70,6 +70,21 @@ export const ServerProvider = ({ children }) => {
         return null;
     }
 
+    const getServerListInFolder = (folderId, entries) => {
+        if (!entries) entries = servers;
+        for (const entry of entries) {
+            if (entry.id === parseInt(folderId) && entry.type === "folder") {
+                return entry.entries;
+            } else if (entry.type === "folder") {
+                const result = getServerListInFolder(folderId, entry.entries);
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        return null;
+    }
+
     useEffect(() => {
         if (user) {
             loadServers();
@@ -85,7 +100,7 @@ export const ServerProvider = ({ children }) => {
     }, [user]);
 
     return (
-        <ServerContext.Provider value={{servers, loadServers, getServerById, getPVEServerById, getPVEContainerById, retrieveServerById}}>
+        <ServerContext.Provider value={{servers, loadServers, getServerById, getPVEServerById, getPVEContainerById, retrieveServerById,getServerListInFolder}}>
             {children}
         </ServerContext.Provider>
     )

client/src/common/layouts/Root.jsx

@@ -3,18 +3,22 @@ import Sidebar from "@/common/components/Sidebar";
 import { UserProvider } from "@/common/contexts/UserContext.jsx";
 import { ServerProvider } from "@/common/contexts/ServerContext.jsx";
 import { IdentityProvider } from "@/common/contexts/IdentityContext.jsx";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
 
 export default () => {
     return (
-        <UserProvider>
-            <ServerProvider>
-                <IdentityProvider>
-                    <div className="content-wrapper">
-                        <Sidebar />
-                        <Outlet />
-                    </div>
-                </IdentityProvider>
-            </ServerProvider>
-        </UserProvider>
-    )
+        <DndProvider backend={HTML5Backend}>
+            <UserProvider>
+                <ServerProvider>
+                    <IdentityProvider>
+                        <div className="content-wrapper">
+                            <Sidebar />
+                            <Outlet />
+                        </div>
+                    </IdentityProvider>
+                </ServerProvider>
+            </UserProvider>
+        </DndProvider>
+    );
 }

client/src/pages/Servers/components/ServerList/components/CollapsibleFolder.jsx

@@ -11,7 +11,7 @@ const CollapsibleFolder = ({ id, name, entries, nestedLevel, renameState, setRen
             <FolderObject id={id} name={name} nestedLevel={nestedLevel} onClick={toggleFolder}
                 isOpen={isOpen} renameState={renameState} setRenameStateId={setRenameStateId} />
             {isOpen && (
-                <ServerEntries entries={entries} nestedLevel={nestedLevel + 1} setRenameStateId={setRenameStateId}
+                <ServerEntries entries={entries} nestedLevel={nestedLevel + 1} setRenameStateId={setRenameStateId} folderId={id}
                     connectToServer={connectToServer} connectToPVEServer={connectToPVEServer} sshOnly={sshOnly} />
             )}
         </>

client/src/pages/Servers/components/ServerList/components/FolderObject/FolderObject.jsx

@@ -4,23 +4,57 @@ import "./styles.sass";
 import { useContext, useEffect, useRef, useState } from "react";
 import { patchRequest } from "@/common/utils/RequestUtil.js";
 import { ServerContext } from "@/common/contexts/ServerContext.jsx";
+import { useDrag, useDrop } from "react-dnd";
 
-export const FolderObject = ({ id, name, nestedLevel, onClick, isOpen, renameState, setRenameStateId }) => {
+export const FolderObject = ({ id, name, nestedLevel, position, onClick, isOpen, renameState, setRenameStateId }) => {
     const inputRef = useRef();
 
-    const {loadServers} = useContext(ServerContext);
+    const { loadServers } = useContext(ServerContext);
     const [nameState, setNameState] = useState(name || "");
 
+    const [{ opacity }, dragRef] = useDrag({
+        item: { type: "folder", id, position },
+        type: "folder",
+        collect: monitor => ({
+            opacity: monitor.isDragging() ? 0.5 : 1,
+        }),
+    });
+
+    const [{ isOver }, dropRef] = useDrop({
+        accept: ["server", "folder"],
+        drop: async (item) => {
+            if (item.id === id) return;
+            try {
+                if (item.type === "server") {
+                    await patchRequest("servers/" + item.id, { folderId: id });
+                    loadServers();
+                    return { id };
+                }
+
+                await patchRequest(`folders/${item.id}`, { parentId: item.id !== id ? id : undefined });
+            } catch (error) {
+                console.error("Failed to drop item", error.message);
+            }
+
+            loadServers();
+
+            return { id };
+        },
+        collect: (monitor) => ({
+            isOver: monitor.isOver(),
+        }),
+    });
+
     const changeName = () => {
         setNameState(name => {
-            patchRequest("folders/" + id + "/rename", { name }).then(() => {
+            patchRequest("folders/" + id, { name }).then(() => {
                 loadServers();
                 setRenameStateId(null);
             });
 
             return name;
         });
-    }
+    };
 
     useEffect(() => {
         if (renameState) {
@@ -29,15 +63,16 @@ export const FolderObject = ({ id, name, nestedLevel, onClick, isOpen, renameSta
 
             const handleEnter = (e) => {
                 if (e.key === "Enter") changeName();
-            }
+            };
 
             document.addEventListener("keydown", handleEnter);
             return () => document.removeEventListener("keydown", handleEnter);
         }
     }, [renameState]);
     return (
-        <div className="folder-object" style={{ paddingLeft: `${10 + (nestedLevel * 15)}px` }} data-id={id}
-             onClick={renameState ? (e) => e.stopPropagation() : onClick}>
+        <div className={"folder-object" + (isOver ? " folder-is-over" : "")} data-id={id}
+             ref={(node) => dragRef(dropRef(node))} onClick={renameState ? (e) => e.stopPropagation() : onClick}
+             style={{ paddingLeft: `${10 + (nestedLevel * 15)}px`, opacity }}>
             <Icon path={isOpen ? mdiFolderOpenOutline : mdiFolderOutline} />
             {!renameState && <p>{nameState}</p>}
             {renameState && <input type="text" ref={inputRef} value={nameState} onBlur={changeName}

client/src/pages/Servers/components/ServerList/components/FolderObject/styles.sass

@@ -30,4 +30,9 @@
     border-radius: 0.7rem
     font-size: 12pt
     width: 100%
-    outline: none
+    outline: none
+
+.folder-is-over
+  background-color: colors.$dark-gray
+  border: 1px solid colors.$gray
+  border-radius: 0.3rem

client/src/pages/Servers/components/ServerList/components/ServerEntries.jsx

@@ -2,7 +2,7 @@ import ServerObject from "@/pages/Servers/components/ServerList/components/Serve
 import CollapsibleFolder from "./CollapsibleFolder.jsx";
 import PVEObject from "@/pages/Servers/components/ServerList/components/PVEObject";
 
-const ServerEntries = ({ entries, nestedLevel, setRenameStateId, connectToServer, connectToPVEServer, sshOnly = false }) => {
+const ServerEntries = ({ entries, nestedLevel, setRenameStateId, connectToServer, connectToPVEServer, sshOnly = false, folderId }) => {
     return (
         <>
             {entries.map(entry => {
@@ -26,6 +26,8 @@ const ServerEntries = ({ entries, nestedLevel, setRenameStateId, connectToServer
                         <ServerObject
                             id={entry.id}
                             key={"s"+entry.id}
+                            position={entry.position}
+                            folderId={folderId}
                             name={entry.name}
                             nestedLevel={nestedLevel}
                             icon={entry.icon}

client/src/pages/Servers/components/ServerList/components/ServerObject/ServerObject.jsx

@@ -3,6 +3,8 @@ import { mdiDebian, mdiLinux, mdiMicrosoftWindows, mdiServerOutline } from "@mdi
 import "./styles.sass";
 import { ServerContext } from "@/common/contexts/ServerContext.jsx";
 import { useContext } from "react";
+import { useDrag, useDrop } from "react-dnd";
+import { patchRequest } from "@/common/utils/RequestUtil.js";
 
 export const loadIcon = (icon) => {
     switch (icon) {
@@ -17,7 +19,45 @@ export const loadIcon = (icon) => {
     }
 };
 
-export const ServerObject = ({ id, name, nestedLevel, icon, connectToServer, isPVE, status, sshOnly }) => {
+export const ServerObject = ({ id, name, position, folderId, nestedLevel, icon, connectToServer, isPVE, status, sshOnly }) => {
+    const { loadServers, getServerListInFolder } = useContext(ServerContext);
+
+    const [{ opacity }, dragRef] = useDrag({
+        item: { type: "server", id, folderId, position },
+        type: "server",
+        collect: monitor => ({
+            opacity: monitor.isDragging() ? 0.5 : 1,
+        }),
+    });
+
+    const [{ isOver }, dropRef] = useDrop({
+        accept: "server",
+        drop: async (item) => {
+            const servers = getServerListInFolder(folderId);
+
+            const targetIndex = servers.findIndex(server => server.id === id);
+            const draggedIndex = servers.findIndex(server => server.id === item.id);
+
+            let newPosition;
+            if (targetIndex > draggedIndex) {
+                newPosition = (servers[targetIndex].position + (servers[targetIndex + 1]?.position || servers[targetIndex].position + 1)) / 2;
+            } else {
+                newPosition = (servers[targetIndex].position + (servers[targetIndex - 1]?.position || servers[targetIndex].position - 1)) / 2;
+            }
+
+            await patchRequest(`servers/${item.id}`, {
+                folderId: item.folderId !== folderId ? folderId : undefined,
+                position: Math.max(newPosition, 0),
+            });
+
+            loadServers();
+
+            return { id };
+        },
+        collect: (monitor) => ({
+            isOver: monitor.isOver(),
+        }),
+    });
 
     const { getServerById } = useContext(ServerContext);
 
@@ -30,16 +70,18 @@ export const ServerObject = ({ id, name, nestedLevel, icon, connectToServer, isP
         }
 
         connectToServer(server.id, server.identities[0]);
-    }
+    };
 
     if (sshOnly && server.protocol !== "ssh") {
         return null;
     }
 
     return (
-        <div className={(isPVE ? "pve-entry " : "") + "server-object"} style={{ paddingLeft: `${15 + (nestedLevel * 15)}px` }} data-id={id}
+        <div className={(isPVE ? "pve-entry " : "") + "server-object" + (isOver ? " server-is-over" : "")}
+             style={{ paddingLeft: `${15 + (nestedLevel * 15)}px`, opacity }} data-id={id}
+             ref={!isPVE ? (node) => dragRef(dropRef(node)) : () => {}}
              onDoubleClick={sshOnly ? null : connect} onClick={sshOnly ? connect : null}>
-            <div className={"system-icon " + (isPVE ? (status !== "running" ? " pve-icon-offline" : " pve-icon")  : "")}>
+            <div className={"system-icon " + (isPVE ? (status !== "running" ? " pve-icon-offline" : " pve-icon") : "")}>
                 <Icon path={isPVE ? icon : loadIcon(icon)} />
             </div>
             <p>{name}</p>

client/src/pages/Servers/components/ServerList/components/ServerObject/styles.sass

@@ -35,4 +35,9 @@
     color: colors.$white
     background-color: colors.$dark-gray
     border: 1px solid colors.$gray
-    border-radius: 0.3rem
+    border-radius: 0.3rem
+
+.server-is-over
+  background-color: colors.$dark-gray
+  border: 1px solid colors.$gray
+  border-radius: 0.3rem

client/src/pages/Settings/pages/Sessions/Sessions.jsx

@@ -2,7 +2,7 @@ import "./styles.sass";
 import { useContext, useEffect, useState } from "react";
 import { UserContext } from "@/common/contexts/UserContext.jsx";
 import { deleteRequest, getRequest } from "@/common/utils/RequestUtil.js";
-import UAParser from "ua-parser-js";
+import { UAParser } from "ua-parser-js";
 import Icon from "@mdi/react";
 import { mdiCellphone, mdiMonitor, mdiTablet } from "@mdi/js";