Add editing role name / colour.

Animate avatars on message hover.
Switch to 24-hour time format by default.

src/pages/settings/server/Panes.module.scss

@@ -39,7 +39,8 @@
         flex-direction: row;
         background: var(--secondary-background);
 
-        code, span {
+        code,
+        span {
             flex: 1;
         }
 
@@ -69,7 +70,7 @@
         color: var(--secondary-foreground);
         font-weight: 700;
     }
-    
+
     .member {
         gap: 8px;
         padding: 10px;
@@ -95,10 +96,6 @@
         flex-grow: 1;
         padding: 0 8px;
         overflow-y: scroll;
-        
-        section {
-            margin-bottom: 1em;
-        }
     }
 
     .title {
@@ -107,7 +104,8 @@
         margin-bottom: 1em;
         align-items: center;
 
-        h1, h2 {
+        h1,
+        h2 {
             margin: 0;
             min-width: 0;
             flex-grow: 1;
@@ -126,4 +124,4 @@
         display: flex;
         padding: 8px 0;
     }
-}
+}

src/pages/settings/server/Roles.tsx

@@ -15,6 +15,7 @@ import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
 import Button from "../../../components/ui/Button";
 import Checkbox from "../../../components/ui/Checkbox";
+import ColourSwatches from "../../../components/ui/ColourSwatches";
 import IconButton from "../../../components/ui/IconButton";
 import InputBox from "../../../components/ui/InputBox";
 import Overline from "../../../components/ui/Overline";
@@ -40,21 +41,46 @@ export function Roles({ server }: Props) {
         return null;
     }
 
-    const v = (id: string) =>
-        I32ToU32(
+    function getPermissions(id: string) {
+        return I32ToU32(
             id === "default"
                 ? server.default_permissions
                 : roles[id].permissions,
         );
-    const [perm, setPerm] = useState(v(role));
-    useEffect(() => setPerm(v(role)), [role, roles[role]?.permissions]);
+    }
+
+    const { name: roleName, colour: roleColour } = roles[role] ?? {};
+
+    const [perm, setPerm] = useState(getPermissions(role));
+    const [name, setName] = useState(roleName);
+    const [colour, setColour] = useState(roleColour);
+
+    useEffect(
+        () => setPerm(getPermissions(role)),
+        [role, roles[role]?.permissions],
+    );
+
+    useEffect(() => setName(roleName), [role, roleName]);
+    useEffect(() => setColour(roleColour), [role, roleColour]);
+
+    const modified =
+        !isEqual(perm, getPermissions(role)) ||
+        !isEqual(name, roleName) ||
+        !isEqual(colour, roleColour);
+
+    const save = () => {
+        if (!isEqual(perm, getPermissions(role))) {
+            client.servers.setPermissions(server._id, role, {
+                server: perm[0],
+                channel: perm[1],
+            });
+        }
+
+        if (!isEqual(name, roleName) || !isEqual(colour, roleColour)) {
+            client.servers.editRole(server._id, role, { name, colour });
+        }
+    };
 
-    const modified = !isEqual(perm, v(role));
-    const save = () =>
-        client.servers.setPermissions(server._id, role, {
-            server: perm[0],
-            channel: perm[1],
-        });
     const deleteRole = () => {
         setRole("default");
         client.servers.deleteRole(server._id, role);
@@ -92,7 +118,8 @@ export function Roles({ server }: Props) {
                     return (
                         <ButtonItem
                             active={role === id}
-                            onClick={() => setRole(id)}>
+                            onClick={() => setRole(id)}
+                            style={{ color: roles[id].colour }}>
                             {roles[id].name}
                         </ButtonItem>
                     );
@@ -111,6 +138,31 @@ export function Roles({ server }: Props) {
                         Save
                     </Button>
                 </div>
+                {role !== "default" && (
+                    <>
+                        <section>
+                            <Overline type="subtle">Role Name</Overline>
+                            <p>
+                                <InputBox
+                                    value={name}
+                                    onChange={(e) =>
+                                        setName(e.currentTarget.value)
+                                    }
+                                    contrast
+                                />
+                            </p>
+                        </section>
+                        <section>
+                            <Overline type="subtle">Role Colour</Overline>
+                            <p>
+                                <ColourSwatches
+                                    value={colour ?? "gray"}
+                                    onChange={(value) => setColour(value)}
+                                />
+                            </p>
+                        </section>
+                    </>
+                )}
                 <section>
                     <Overline type="subtle">
                         <Text id="app.settings.permissions.server" />