feat: Finish crappy role ranking implementation that works but is full of sin

src/pages/settings/server/Roles.tsx

@@ -93,7 +93,11 @@ export function useRolesForReorder(server: Server) {
 /**
  * Role reordering component
  */
-const RoleReorderPanel = observer(({ server }: Props) => {
+const RoleReorderPanel = observer(
+    ({
+        server,
+        onRolesReordered,
+    }: Props & { onRolesReordered: () => void }) => {
         const initialRoles = useRolesForReorder(server);
         const [roles, setRoles] = useState(initialRoles);
         const [isReordering, setIsReordering] = useState(false);
@@ -116,7 +120,8 @@ const RoleReorderPanel = observer(({ server }: Props) => {
 
         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;
+            if (index >= roles.length - 2 || roles[index].id === "default")
+                return;
 
             const newRoles = [...roles];
             [newRoles[index], newRoles[index + 1]] = [
@@ -143,6 +148,7 @@ const RoleReorderPanel = observer(({ server }: Props) => {
                 });
 
                 console.log("Roles reordered successfully");
+                onRolesReordered();
             } catch (error) {
                 console.error("Failed to reorder roles:", error);
                 setRoles(initialRoles);
@@ -208,7 +214,8 @@ const RoleReorderPanel = observer(({ server }: Props) => {
                 </RoleReorderContainer>
             </div>
         );
-});
+    },
+);
 
 /**
  * Hook to memo-ize role information.
@@ -237,6 +244,7 @@ export function useRoles(server: Server) {
  */
 export const Roles = observer(({ server }: Props) => {
     const [showReorderPanel, setShowReorderPanel] = useState(false);
+    const [rolesWereReordered, setRolesWereReordered] = useState(false);
 
     // Consolidate all permissions that we can change right now.
     const currentRoles = useRoles(server);
@@ -260,16 +268,26 @@ export const Roles = observer(({ server }: Props) => {
     `;
 
     const ReorderButton = styled(Button)`
-        margin: 0 0 16px 0;
+        margin-inline: auto 8px;
     `;
 
+    const handleBackFromReorder = () => {
+        setShowReorderPanel(false);
+        if (rolesWereReordered) {
+            window.location.reload(); // Refresh because I don't actually care anymore.
+        }
+    };
+
     if (showReorderPanel) {
         return (
             <div>
-                <RoleReorderPanel server={server} />
+                <RoleReorderPanel
+                    server={server}
+                    onRolesReordered={() => setRolesWereReordered(true)}
+                />
                 <Button
                     palette="secondary"
-                    onClick={() => setShowReorderPanel(false)}
+                    onClick={handleBackFromReorder}
                     style={{ marginBottom: "16px" }}>
                     <Text id="app.special.modals.actions.back" />
                 </Button>
@@ -279,11 +297,6 @@ export const Roles = observer(({ server }: Props) => {
 
     return (
         <div>
-            <ReorderButton
-                palette="secondary"
-                onClick={() => setShowReorderPanel(true)}>
-                <Text id="app.settings.permissions.role_ranking" />
-            </ReorderButton>
             <PermissionsLayout
                 server={server}
                 rank={server.member?.ranking ?? Infinity}
@@ -343,6 +356,11 @@ export const Roles = observer(({ server }: Props) => {
                                         fields={{ name: currentRole.name }}
                                     />
                                 </H1>
+                                <ReorderButton
+                                    palette="secondary"
+                                    onClick={() => setShowReorderPanel(true)}>
+                                    <Text id="app.settings.permissions.role_ranking" />
+                                </ReorderButton>
                                 <Button
                                     palette="secondary"
                                     disabled={isEqual(