feat: Add role re-ordering

Doesn't currently update order in UI

src/pages/settings/server/Roles.tsx

@@ -1,4 +1,8 @@
-import { HelpCircle } from "@styled-icons/boxicons-solid";
+import {
+    HelpCircle,
+    ChevronUp,
+    ChevronDown,
+} from "@styled-icons/boxicons-solid";
 import isEqual from "lodash.isequal";
 import { observer } from "mobx-react-lite";
 import { Server } from "revolt.js";
@@ -21,12 +25,191 @@ import {
 import Tooltip from "../../../components/common/Tooltip";
 import { PermissionList } from "../../../components/settings/roles/PermissionList";
 import { RoleOrDefault } from "../../../components/settings/roles/RoleSelection";
+import { useSession } from "../../../controllers/client/ClientController";
 import { modalController } from "../../../controllers/modals/ModalController";
 
 interface Props {
     server: Server;
 }
 
+const RoleReorderContainer = styled.div`
+    margin: 16px 0;
+`;
+
+const RoleItem = styled.div`
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    margin: 12px 0;
+    background: var(--secondary-background);
+    border-radius: var(--border-radius);
+`;
+
+const RoleInfo = styled.div`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+`;
+
+const RoleName = styled.div`
+    font-weight: 600;
+    color: var(--foreground);
+`;
+
+const RoleRank = styled.div`
+    font-size: 12px;
+    color: var(--secondary-foreground);
+`;
+
+const RoleControls = styled.div`
+    display: flex;
+    gap: 4px;
+`;
+
+const MoveButton = styled(Button)`
+    padding: 4px 8px;
+    min-width: auto;
+`;
+
+/**
+ * Hook to memo-ize role information with proper ordering
+ * @param server Target server
+ * @returns Role array with default at bottom
+ */
+export function useRolesForReorder(server: Server) {
+    return useMemo(() => {
+        const roles = [...server.orderedRoles] as RoleOrDefault[];
+
+        roles.push({
+            id: "default",
+            name: "Default",
+            permissions: server.default_permissions,
+        });
+
+        return roles;
+    }, [server.roles, server.default_permissions]);
+}
+
+/**
+ * Role reordering component
+ */
+const RoleReorderPanel = observer(({ server }: Props) => {
+    const initialRoles = useRolesForReorder(server);
+    const [roles, setRoles] = useState(initialRoles);
+    const [isReordering, setIsReordering] = useState(false);
+
+    // Update local state when server roles change
+    useMemo(() => {
+        setRoles(useRolesForReorder(server));
+    }, [server.roles, server.default_permissions]);
+
+    const moveRoleUp = (index: number) => {
+        if (index === 0 || roles[index].id === "default") return;
+
+        const newRoles = [...roles];
+        [newRoles[index - 1], newRoles[index]] = [
+            newRoles[index],
+            newRoles[index - 1],
+        ];
+        setRoles(newRoles);
+    };
+
+    const moveRoleDown = (index: number) => {
+        // Can't move down if it's the last non-default role or if it's default
+        if (index >= roles.length - 2 || roles[index].id === "default") return;
+
+        const newRoles = [...roles];
+        [newRoles[index], newRoles[index + 1]] = [
+            newRoles[index + 1],
+            newRoles[index],
+        ];
+        setRoles(newRoles);
+    };
+
+    const saveReorder = async () => {
+        setIsReordering(true);
+        try {
+            const nonDefaultRoles = roles.filter(
+                (role) => role.id !== "default",
+            );
+            const roleIds = nonDefaultRoles.map((role) => role.id);
+
+            const session = useSession()!;
+            const client = session.client!;
+
+            // Make direct API request since it's not in r.js as of writing
+            await client.api.patch(`/servers/${server._id}/roles/ranks`, {
+                ranks: roleIds,
+            });
+
+            console.log("Roles reordered successfully");
+        } catch (error) {
+            console.error("Failed to reorder roles:", error);
+            setRoles(initialRoles);
+        } finally {
+            setIsReordering(false);
+        }
+    };
+
+    const hasChanges = !isEqual(
+        roles.filter((r) => r.id !== "default").map((r) => r.id),
+        initialRoles.filter((r) => r.id !== "default").map((r) => r.id),
+    );
+
+    return (
+        <div>
+            <SpaceBetween>
+                <H1>
+                    <Text id="app.settings.permissions.role_ranking" />
+                </H1>
+                <Button
+                    palette="secondary"
+                    disabled={!hasChanges || isReordering}
+                    onClick={saveReorder}>
+                    <Text id="app.special.modals.actions.save" />
+                </Button>
+            </SpaceBetween>
+
+            <RoleReorderContainer>
+                {roles.map((role, index) => (
+                    <RoleItem key={role.id}>
+                        <RoleInfo>
+                            <RoleName>{role.name}</RoleName>
+                            <RoleRank>
+                                {role.id === "default" ? (
+                                    <Text id="app.settings.permissions.default_desc" />
+                                ) : (
+                                    <>
+                                        <Text id="app.settings.permissions.role_ranking" />{" "}
+                                        {index}
+                                    </>
+                                )}
+                            </RoleRank>
+                        </RoleInfo>
+
+                        {role.id !== "default" && (
+                            <RoleControls>
+                                <MoveButton
+                                    palette="secondary"
+                                    disabled={index === 0}
+                                    onClick={() => moveRoleUp(index)}>
+                                    <ChevronUp size={16} />
+                                </MoveButton>
+                                <MoveButton
+                                    palette="secondary"
+                                    disabled={index >= roles.length - 2}
+                                    onClick={() => moveRoleDown(index)}>
+                                    <ChevronDown size={16} />
+                                </MoveButton>
+                            </RoleControls>
+                        )}
+                    </RoleItem>
+                ))}
+            </RoleReorderContainer>
+        </div>
+    );
+});
+
 /**
  * Hook to memo-ize role information.
  * @param server Target server
@@ -50,9 +233,11 @@ export function useRoles(server: Server) {
 }
 
 /**
- * Roles settings menu
+ * Updated Roles settings menu with reordering panel
  */
 export const Roles = observer(({ server }: Props) => {
+    const [showReorderPanel, setShowReorderPanel] = useState(false);
+
     // Consolidate all permissions that we can change right now.
     const currentRoles = useRoles(server);
 
@@ -74,7 +259,31 @@ export const Roles = observer(({ server }: Props) => {
         margin: 16px 0;
     `;
 
+    const ReorderButton = styled(Button)`
+        margin: 0 0 16px 0;
+    `;
+
+    if (showReorderPanel) {
         return (
+            <div>
+                <RoleReorderPanel server={server} />
+                <Button
+                    palette="secondary"
+                    onClick={() => setShowReorderPanel(false)}
+                    style={{ marginBottom: "16px" }}>
+                    <Text id="app.special.modals.actions.back" />
+                </Button>
+            </div>
+        );
+    }
+
+    return (
+        <div>
+            <ReorderButton
+                palette="secondary"
+                onClick={() => setShowReorderPanel(true)}>
+                <Text id="app.settings.permissions.role_ranking" />
+            </ReorderButton>
             <PermissionsLayout
                 server={server}
                 rank={server.member?.ranking ?? Infinity}
@@ -92,15 +301,12 @@ export const Roles = observer(({ server }: Props) => {
 
                     if (!currentRole) return null;
 
-                // Keep track of whatever role we're editing right now.
+                    const [value, setValue] = useState<Partial<RoleOrDefault>>(
-                const [value, setValue] = useState<Partial<RoleOrDefault>>({});
+                        {},
+                    );
 
                     const currentRoleValue = { ...currentRole, ...value };
 
-                // Calculate permissions we have access to on this server.
-                const current = server.permission;
-
-                // Upload new role information to server.
                     function save() {
                         const { permissions: permsCurrent, ...current } =
                             currentRole;
@@ -124,7 +330,6 @@ export const Roles = observer(({ server }: Props) => {
                         }
                     }
 
-                // Delete the role from this server.
                     function deleteRole() {
                         server.deleteRole(selected);
                     }
@@ -161,7 +366,8 @@ export const Roles = observer(({ server }: Props) => {
                                                 onChange={(e) =>
                                                     setValue({
                                                         ...value,
-                                                    name: e.currentTarget.value,
+                                                        name: e.currentTarget
+                                                            .value,
                                                     })
                                                 }
                                                 palette="secondary"
@@ -203,7 +409,10 @@ export const Roles = observer(({ server }: Props) => {
                                                     "gray"
                                                 }
                                                 onChange={(colour) =>
-                                                setValue({ ...value, colour })
+                                                    setValue({
+                                                        ...value,
+                                                        colour,
+                                                    })
                                                 }
                                             />
                                         </p>
@@ -215,10 +424,14 @@ export const Roles = observer(({ server }: Props) => {
                                         <p>
                                             <Checkbox
                                                 value={
-                                                currentRoleValue.hoist ?? false
+                                                    currentRoleValue.hoist ??
+                                                    false
                                                 }
                                                 onChange={(hoist) =>
-                                                setValue({ ...value, hoist })
+                                                    setValue({
+                                                        ...value,
+                                                        hoist,
+                                                    })
                                                 }
                                                 title={
                                                     <Text id="app.settings.permissions.hoist_role" />
@@ -262,5 +475,6 @@ export const Roles = observer(({ server }: Props) => {
                     );
                 }}
             />
+        </div>
     );
 });