feat(settings): edit profile page

packages/client/components/app/interface/settings/user/profile/EditProfile.tsx

@@ -0,0 +1,106 @@
+import { For } from "solid-js";
+
+import { useClient } from "@revolt/client";
+import { createOwnProfileResource } from "@revolt/client/resources";
+import { modalController } from "@revolt/modal";
+import {
+  Avatar,
+  CategoryButton,
+  CategoryButtonGroup,
+  CategoryCollapse,
+  Column,
+  iconSize,
+} from "@revolt/ui";
+
+import MdBadge from "@material-design-icons/svg/outlined/badge.svg?component-solid";
+import MdCrop169 from "@material-design-icons/svg/outlined/crop_16_9.svg?component-solid";
+import MdEditNote from "@material-design-icons/svg/outlined/edit_note.svg?component-solid";
+import MdGroups from "@material-design-icons/svg/outlined/groups.svg?component-solid";
+import MdImage from "@material-design-icons/svg/outlined/image.svg?component-solid";
+
+import { UserSummary } from "../account";
+
+/**
+ * Edit profile
+ */
+export function EditProfile() {
+  const client = useClient();
+  const profile = createOwnProfileResource();
+
+  return (
+    <Column gap="lg">
+      <UserSummary
+        user={client().user!}
+        bannerUrl={profile.data?.animatedBannerURL}
+      />
+
+      <CategoryButtonGroup>
+        <CategoryButton
+          description="Change your name without having to change your username"
+          icon={<MdBadge {...iconSize(22)} />}
+          action="chevron"
+          onClick={() =>
+            modalController.push({
+              type: "edit_display_name",
+              user: client().user!,
+            })
+          }
+        >
+          Display Name
+        </CategoryButton>
+        <CategoryButton
+          description="Set a picture to show next to your messages and various other places"
+          icon={<MdImage {...iconSize(22)} />}
+          action="chevron"
+        >
+          Avatar
+        </CategoryButton>
+        <CategoryButton
+          description="Set a banner to show in your profile"
+          icon={<MdCrop169 {...iconSize(22)} />}
+          action="chevron"
+        >
+          Banner
+        </CategoryButton>
+        <CategoryButton
+          description="Set a description to show in your profile"
+          icon={<MdEditNote {...iconSize(22)} />}
+          action="chevron"
+        >
+          Bio
+        </CategoryButton>
+      </CategoryButtonGroup>
+
+      <CategoryButtonGroup>
+        <CategoryCollapse
+          icon={<MdGroups {...iconSize(22)} />}
+          title="Server Identities"
+          description="Change your profile per-server"
+          scrollable
+        >
+          <For each={client().servers.toList()}>
+            {(server) => (
+              <CategoryButton
+                icon={
+                  <Avatar
+                    src={server.animatedIconURL}
+                    size={24}
+                    fallback={server.name}
+                  />
+                }
+                onClick={() =>
+                  modalController.push({
+                    type: "server_identity",
+                    member: server.member!,
+                  })
+                }
+              >
+                {server.name}
+              </CategoryButton>
+            )}
+          </For>
+        </CategoryCollapse>
+      </CategoryButtonGroup>
+    </Column>
+  );
+}

packages/client/components/app/interface/settings/user/profile/index.ts

@@ -0,0 +1 @@
+export * from "./EditProfile";

packages/client/components/modal/modals/EditDisplayName.tsx

@@ -0,0 +1,54 @@
+import { useTranslation } from "@revolt/i18n";
+
+import { createFormModal } from "../form";
+import { PropGenerator } from "../types";
+
+/**
+ * Modal for editing display name
+ */
+const EditDisplayName: PropGenerator<"edit_display_name"> = (props) => {
+  const t = useTranslation();
+
+  async function applyName(display_name?: string) {
+    if (display_name && display_name !== props.user.username) {
+      await props.user.edit({ display_name });
+    } else {
+      await props.user.edit({
+        // @ts-expect-error missing in types
+        remove: ["DisplayName"],
+      });
+    }
+  }
+
+  return createFormModal({
+    modalProps: {
+      title: t("app.special.modals.account.change.display_name"),
+    },
+    schema: {
+      display_name: "text",
+    },
+    data: {
+      display_name: {
+        field: "Display Name",
+        placeholder: "Choose a display name",
+      },
+    },
+    callback: ({ display_name }) => applyName(display_name),
+    submit: {
+      children: t("app.special.modals.actions.update"),
+    },
+    actions: [
+      {
+        type: "button",
+        variant: "plain",
+        children: "Clear",
+        async onClick() {
+          await applyName();
+          return true;
+        },
+      },
+    ],
+  });
+};
+
+export default EditDisplayName;

packages/client/components/modal/modals/index.tsx

@@ -23,6 +23,7 @@ import delete_bot from "./DeleteBot";
 import delete_channel from "./DeleteChannel";
 import delete_message from "./DeleteMessage";
 import delete_server from "./DeleteServer";
+import edit_display_name from "./EditDisplayName";
 import edit_email from "./EditEmail";
 import edit_keybind from "./EditKeybind";
 import edit_password from "./EditPassword";
@@ -63,6 +64,7 @@ const Modals: Record<AllModals["type"], PropGenerator<any>> = {
   delete_channel,
   delete_message,
   delete_server,
+  edit_display_name,
   edit_email,
   edit_password,
   edit_username,

packages/client/components/modal/types.ts

@@ -35,6 +35,10 @@ export type Modals =
         | "edit_password";
       client: Client;
     }
+  | {
+      type: "edit_display_name";
+      user: User;
+    }
   | {
       type: "rename_session";
       session: Session;