Implement the user profile edit modal & new account header

frontend/locales/en.json

@@ -2,8 +2,10 @@
   "action": {
     "back": "Back",
     "cancel": "Cancel",
+    "clear": "Clear",
     "close": "Close",
     "continue": "Continue",
+    "edit": "Edit",
     "save": "Save"
   },
   "branding": {
@@ -17,12 +19,20 @@
     }
   },
   "common": {
-    "error": "Error",
     "loading": "Loading…",
     "next": "Next",
     "previous": "Previous"
   },
   "frontend": {
+    "account": {
+      "edit_profile": {
+        "display_name_help": "This is what others will see wherever you’re signed in.",
+        "display_name_label": "Display name",
+        "title": "Edit profile",
+        "username_label": "Username"
+      },
+      "title": "Your account"
+    },
     "add_email_form": {
       "email_denied_alert": {
         "text": "The entered email is not allowed by the server policy.",
@@ -76,8 +86,8 @@
       "inactive_90_days": "Inactive for 90+ days"
     },
     "nav": {
-      "profile": "Profile",
-      "sessions": "Sessions"
+      "devices": "Devices",
+      "settings": "Settings"
     },
     "not_found_alert_title": "Not found.",
     "not_logged_in_alert": "You're not logged in.",
@@ -155,12 +165,8 @@
       "retry_button": "Resend code"
     },
     "user_email_list": {
-      "heading": "Emails",
       "no_primary_email_alert": "No primary email address"
     },
-    "user_name": {
-      "display_name_field_label": "Display Name"
-    },
     "user_sessions_overview": {
       "active_sessions:one": "{{count}} active session",
       "active_sessions:other": "{{count}} active sessions",

frontend/package.json

@@ -29,7 +29,7 @@
     "@urql/exchange-refocus": "^1.0.2",
     "@urql/exchange-request-policy": "^1.0.2",
     "@vector-im/compound-design-tokens": "1.1.1",
-    "@vector-im/compound-web": "^3.1.2",
+    "@vector-im/compound-web": "^3.1.3",
     "classnames": "^2.5.1",
     "date-fns": "^3.3.1",
     "graphql": "^16.8.1",

frontend/src/components/UnverifiedEmailAlert/UnverifiedEmailAlert.tsx

@@ -22,7 +22,7 @@ import { Link } from "../Link";
 import styles from "./UnverifiedEmailAlert.module.css";
 
 export const UNVERIFIED_EMAILS_FRAGMENT = graphql(/* GraphQL */ `
-  fragment UnverifiedEmailAlert on User {
+  fragment UnverifiedEmailAlert_user on User {
     id
     unverifiedEmails: emails(first: 0, state: PENDING) {
       totalCount

frontend/src/components/UserGreeting.module.css → frontend/src/components/UserGreeting/UserGreeting.module.css

@@ -13,14 +13,44 @@
  * limitations under the License.
  */
 
-.header {
+.user {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: center;
     gap: var(--cpd-space-4x);
-    text-align: center;
+    outline: 1px solid var(--cpd-color-gray-400);
+    outline-offset: -1px;
+    border-radius: var(--cpd-space-3x);
+    padding: var(--cpd-space-4x)
+}
+
+.meta {
+    flex: 1 1;
+
+    /* Make sure the text properly truncates */
+    min-width: 0;
+
+    & p {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
+
+.edit-button {
+    align-self: flex-start;
 }
 
 .mxid {
     color: var(--cpd-color-text-secondary);
-}
+}
+
+.dialog-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cpd-space-4x);
+    align-self: center;
+    max-width: 378px;
+    width: 100%;
+    margin-block-end: var(--cpd-space-9x);
+}

frontend/src/components/UserGreeting/UserGreeting.stories.tsx

@@ -0,0 +1,93 @@
+// Copyright 2024 The Matrix.org Foundation C.I.C.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { Provider } from "urql";
+import { fromValue, delay, pipe } from "wonka";
+
+import { makeFragmentData } from "../../gql";
+import {
+  SetDisplayNameMutation,
+  SetDisplayNameStatus,
+} from "../../gql/graphql";
+
+import UserGreeting, { FRAGMENT } from "./UserGreeting";
+
+const Template: React.FC<{
+  displayName?: string;
+  mxid: string;
+}> = ({ displayName, mxid }) => {
+  const userId = "user id";
+
+  const mockClient = {
+    /* This will resolve after a small delay */
+    executeMutation: () =>
+      pipe(
+        fromValue({
+          data: {
+            setDisplayName: {
+              status: SetDisplayNameStatus.Set,
+              user: { id: userId, matrix: { displayName } },
+            },
+          },
+        } satisfies { data: SetDisplayNameMutation }),
+        delay(300),
+      ),
+  };
+
+  const user = makeFragmentData(
+    {
+      id: "user id",
+      matrix: {
+        mxid,
+        displayName,
+      },
+    },
+    FRAGMENT,
+  );
+
+  return (
+    <Provider value={mockClient}>
+      <UserGreeting user={user} />
+    </Provider>
+  );
+};
+
+const meta = {
+  title: "UI/User Greeting",
+  component: Template,
+  args: {
+    displayName: "Kilgore Trout",
+    mxid: "@kilgore:matrix.org",
+  },
+  argTypes: {
+    displayName: {
+      control: "text",
+    },
+    mxid: {
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof Template>;
+
+export default meta;
+type Story = StoryObj<typeof Template>;
+
+export const Basic: Story = {};
+
+export const NoDisplayName: Story = {
+  args: {
+    displayName: undefined,
+  },
+};