feat: update display name

apps/web/src/views/settings/components/Avatar.tsx

@@ -20,6 +20,11 @@ export default function Avatar({
 
   const updateUser = api.user.update.useMutation({
     onSuccess: async () => {
+      showPopup({
+        header: "Profile image updated",
+        message: "Your profile image has been updated.",
+        icon: "success",
+      });
       try {
         await utils.user.getUser.refetch();
       } catch (e) {

apps/web/src/views/settings/components/DeleteWorkspaceConfirmation.tsx

@@ -18,6 +18,11 @@ export function DeleteWorkspaceConfirmation() {
   const deleteWorkspaceMutation = api.workspace.delete.useMutation({
     onSuccess: () => {
       closeModal();
+      showPopup({
+        header: "Workspace deleted",
+        message: "Your workspace has been deleted.",
+        icon: "success",
+      });
       const filteredWorkspaces = availableWorkspaces.filter(
         (ws) => ws.publicId !== workspace.publicId,
       );

apps/web/src/views/settings/components/UpdateDisplayNameForm.tsx

@@ -0,0 +1,83 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import Button from "~/components/Button";
+import Input from "~/components/Input";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+
+const schema = z.object({
+  name: z
+    .string()
+    .min(3, {
+      message: "Display namemust be at least 3 characters long",
+    })
+    .max(280, {
+      message: "Display name cannot exceed 280 characters",
+    }),
+});
+
+type FormValues = z.infer<typeof schema>;
+
+const UpdateDisplayNameForm = ({ displayName }: { displayName: string }) => {
+  const utils = api.useUtils();
+  const { showPopup } = usePopup();
+  const {
+    register,
+    handleSubmit,
+    formState: { isDirty, errors },
+  } = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    values: {
+      name: displayName,
+    },
+  });
+
+  const updateDisplayName = api.user.update.useMutation({
+    onSuccess: async () => {
+      showPopup({
+        header: "Display name updated",
+        message: "Your display name has been updated.",
+        icon: "success",
+      });
+      try {
+        await utils.user.getUser.refetch();
+      } catch (e) {
+        console.error(e);
+        throw e;
+      }
+    },
+    onError: () => {
+      showPopup({
+        header: "Error updating display name",
+        message: "Please try again later, or contact customer support.",
+        icon: "error",
+      });
+    },
+  });
+
+  const onSubmit = (data: FormValues) => {
+    updateDisplayName.mutate({
+      name: data.name,
+    });
+  };
+
+  return (
+    <>
+      <div className="mb-4 flex max-w-[350px] items-center gap-2">
+        <Input {...register("name")} errorMessage={errors.name?.message} />
+      </div>
+      <Button
+        onClick={handleSubmit(onSubmit)}
+        variant="primary"
+        disabled={!isDirty || updateDisplayName.isPending}
+        isLoading={updateDisplayName.isPending}
+      >
+        Update
+      </Button>
+    </>
+  );
+};
+
+export default UpdateDisplayNameForm;

apps/web/src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx

@@ -42,6 +42,11 @@ const UpdateWorkspaceDescriptionForm = ({
 
   const updateWorkspaceDescription = api.workspace.update.useMutation({
     onSuccess: async () => {
+      showPopup({
+        header: "Workspace description updated",
+        message: "Your workspace description has been updated.",
+        icon: "success",
+      });
       try {
         await utils.workspace.all.refetch();
       } catch (e) {

apps/web/src/views/settings/components/UpdateWorkspaceNameForm.tsx

@@ -38,6 +38,11 @@ const UpdateWorkspaceNameForm = ({
 
   const updateWorkspaceName = api.workspace.update.useMutation({
     onSuccess: async () => {
+      showPopup({
+        header: "Workspace name updated",
+        message: "Your workspace name has been updated.",
+        icon: "success",
+      });
       try {
         await utils.workspace.all.refetch();
       } catch (e) {

apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx

@@ -53,6 +53,11 @@ const UpdateWorkspaceUrlForm = ({
 
   const updateWorkspaceSlug = api.workspace.update.useMutation({
     onSuccess: async () => {
+      showPopup({
+        header: "Workspace slug updated",
+        message: "Your workspace slug has been updated.",
+        icon: "success",
+      });
       try {
         await utils.workspace.all.refetch();
       } catch (e) {

apps/web/src/views/settings/index.tsx

@@ -10,6 +10,7 @@ import { api } from "~/utils/api";
 import Avatar from "./components/Avatar";
 import { CustomURLConfirmation } from "./components/CustomURLConfirmation";
 import { DeleteWorkspaceConfirmation } from "./components/DeleteWorkspaceConfirmation";
+import UpdateDisplayNameForm from "./components/UpdateDisplayNameForm";
 import UpdateWorkspaceDescriptionForm from "./components/UpdateWorkspaceDescriptionForm";
 import UpdateWorkspaceNameForm from "./components/UpdateWorkspaceNameForm";
 import UpdateWorkspaceUrlForm from "./components/UpdateWorkspaceUrlForm";
@@ -56,6 +57,11 @@ export default function SettingsPage() {
                 Profile picture
               </h2>
               <Avatar userId={data?.id} userImage={data?.image} />
+
+              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                Display name
+              </h2>
+              <UpdateDisplayNameForm displayName={data?.name ?? ""} />
             </div>
 
             <div className="mb-8 border-t border-light-300 dark:border-dark-300">

packages/api/src/routers/user.ts

@@ -62,11 +62,13 @@ export const userRouter = createTRPCRouter({
     })
     .input(
       z.object({
-        image: z.string(),
+        name: z.string().optional(),
+        image: z.string().optional(),
       }),
     )
     .output(
       z.object({
+        name: z.string().nullable(),
         image: z.string().nullable(),
       }),
     )

packages/db/src/repository/user.repo.ts

@@ -48,13 +48,13 @@ export const create = async (
 export const update = async (
   db: SupabaseClient<Database>,
   userId: string,
-  updates: { image: string | null },
+  updates: { image?: string; name?: string },
 ) => {
   const { data } = await db
     .from("user")
-    .update({ image: updates.image })
+    .update({ image: updates.image, name: updates.name })
     .eq("id", userId)
-    .select(`image`)
+    .select(`image, name`)
     .single();
 
   return data;