Display description and joining date in mentioned user popover

Author: Alejandro Celaya

package.json

@@ -14,7 +14,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.16.7",
     "@hypothesis/frontend-build": "^3.0.0",
-    "@hypothesis/frontend-shared": "^9.0.0",
+    "@hypothesis/frontend-shared": "^9.1.0",
     "@hypothesis/frontend-testing": "^1.3.1",
     "@npmcli/arborist": "^9.0.0",
     "@octokit/rest": "^21.0.0",

src/sidebar/components/MarkdownView.tsx

@@ -164,7 +164,7 @@ export default function MarkdownView(props: MarkdownViewProps) {
             open={!!popoverContent}
             onClose={() => setPopoverContentAfterDelay(null)}
             anchorElementRef={mentionsPopoverAnchorRef}
-            classes="px-3 py-2"
+            classes="px-3 py-2 !max-w-[75%]"
           >
             {popoverContent !== null && (
               <MentionPopoverContent content={popoverContent} />

src/sidebar/components/mentions/MentionPopoverContent.tsx

@@ -1,3 +1,5 @@
+import { formatDateTime } from '@hypothesis/frontend-shared';
+
 import type { Mention } from '../../../types/api';
 import type { InvalidUsername } from '../../helpers/mentions';
 
@@ -21,15 +23,25 @@ export default function MentionPopoverContent({
   }
 
   return (
-    <div className="flex flex-col gap-y-1.5">
-      <div data-testid="username" className="text-md font-bold">
-        @{content.username}
+    <div className="flex flex-col gap-y-4">
+      <div className="flex flex-col gap-y-1.5">
+        <div data-testid="username" className="text-md font-bold">
+          @{content.username}
+        </div>
+        {content.display_name && (
+          <div data-testid="display-name" className="text-color-text-light">
+            {content.display_name}
+          </div>
+        )}
       </div>
-      {content.display_name && (
-        <div data-testid="display-name" className="text-color-text-light">
-          {content.display_name}
+      {content.description && (
+        <div data-testid="description" className="line-clamp-2">
+          {content.description}
         </div>
       )}
+      <div data-testid="created" className="text-color-text-light">
+        Joined <b>{formatDateTime(content.joined, { includeTime: false })}</b>
+      </div>
     </div>
   );
 }

src/sidebar/components/mentions/test/MentionPopoverContent-test.js

@@ -1,4 +1,5 @@
-import { mount } from '@hypothesis/frontend-testing';
+import { formatDateTime } from '@hypothesis/frontend-shared';
+import { checkAccessibility, mount } from '@hypothesis/frontend-testing';
 
 import MentionPopoverContent from '../MentionPopoverContent';
 
@@ -15,14 +16,15 @@ describe('MentionPopoverContent', () => {
     assert.isFalse(wrapper.exists('[data-testid="display-name"]'));
   });
 
-  it('renders username when valid mention without display name is provided', () => {
+  it('renders no display name nor description when not provided', () => {
     const wrapper = createComponent({ username: 'janedoe' });
 
     assert.equal(wrapper.find('[data-testid="username"]').text(), '@janedoe');
     assert.isFalse(wrapper.exists('[data-testid="display-name"]'));
+    assert.isFalse(wrapper.exists('[data-testid="description"]'));
   });
 
-  it('renders username and display name when valid mention with display name is provided', () => {
+  it('renders display name when provided', () => {
     const wrapper = createComponent({
       username: 'janedoe',
       display_name: 'Jane Doe',
@@ -33,5 +35,72 @@ describe('MentionPopoverContent', () => {
       wrapper.find('[data-testid="display-name"]').text(),
       'Jane Doe',
     );
+    assert.isFalse(wrapper.exists('[data-testid="description"]'));
   });
+
+  it('renders description when provided', () => {
+    const wrapper = createComponent({
+      username: 'janedoe',
+      description: 'This is my bio',
+    });
+
+    assert.equal(wrapper.find('[data-testid="username"]').text(), '@janedoe');
+    assert.isFalse(wrapper.exists('[data-testid="display-name"]'));
+    assert.equal(
+      wrapper.find('[data-testid="description"]').text(),
+      'This is my bio',
+    );
+  });
+
+  it('renders both display name and description when provided', () => {
+    const wrapper = createComponent({
+      username: 'janedoe',
+      display_name: 'Jane Doe',
+      description: 'This is my bio',
+    });
+
+    assert.equal(wrapper.find('[data-testid="username"]').text(), '@janedoe');
+    assert.equal(
+      wrapper.find('[data-testid="display-name"]').text(),
+      'Jane Doe',
+    );
+    assert.equal(
+      wrapper.find('[data-testid="description"]').text(),
+      'This is my bio',
+    );
+  });
+
+  [
+    '2025-01-23T15:36:52.100817+00:00',
+    '2022-08-16T00:00:00.000000+00:00',
+    '2008-02-29T13:00:00.000000+00:00',
+  ].forEach(joined => {
+    it('formats created date', () => {
+      const wrapper = createComponent({ username: 'janedoe', joined });
+      assert.equal(
+        wrapper.find('[data-testid="created"]').text(),
+        `Joined ${formatDateTime(joined, { includeTime: false })}`,
+      );
+    });
+  });
+
+  it(
+    'should pass a11y checks',
+    checkAccessibility([
+      {
+        name: 'Invalid mention',
+        content: () => createComponent('invalid'),
+      },
+      {
+        name: 'Valid mention',
+        content: () =>
+          createComponent({
+            username: 'janedoe',
+            display_name: 'Jane Doe',
+            description: 'This is my bio',
+            created: '2025-01-23T15:36:52.100817+00:00',
+          }),
+      },
+    ]),
+  );
 });

src/types/api.ts

@@ -37,6 +37,9 @@ export type IndexResponse = {
  */
 export type LinksResponse = Record<string, string>;
 
+/** A date and time in ISO format (eg. "2024-12-09T07:17:52+00:00") */
+export type ISODateTime = string;
+
 /**
  * Selector which indicates the time range within a video or audio file that
  * an annotation refers to.
@@ -167,6 +170,10 @@ export type Mention = {
   display_name: string | null;
   /** Link to the user profile, if applicable */
   link: string | null;
+  /** The user description/bio */
+  description: string | null;
+  /** The date when the user joined, in ISO format */
+  joined: ISODateTime;
 
   /**
    * The userid at the moment the mention was created.

yarn.lock

@@ -2359,15 +2359,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hypothesis/frontend-shared@npm:^9.0.0":
-  version: 9.0.0
-  resolution: "@hypothesis/frontend-shared@npm:9.0.0"
+"@hypothesis/frontend-shared@npm:^9.1.0":
+  version: 9.1.0
+  resolution: "@hypothesis/frontend-shared@npm:9.1.0"
   dependencies:
     highlight.js: ^11.6.0
     wouter-preact: ^3.0.0
   peerDependencies:
     preact: ^10.25.1
-  checksum: 203f8562d9d0dd5fc6e26cd2e56d0264ea3129ed8e54673d13a15646f501221139f12c9a092b82e15a0c60f476821937617a7db9c9e5715b03aeebe082b0f986
+  checksum: 97a8590c9fa1aa7df63711a49c7b50563a65a3dfa2aa5f50ed3b7f9c33167734146afb2ad49fe7da216a4030f7a9bdb3b036059cc2258a13c74a73fc6ca9d8d3
   languageName: node
   linkType: hard
 
@@ -8906,7 +8906,7 @@ __metadata:
     "@babel/preset-react": ^7.0.0
     "@babel/preset-typescript": ^7.16.7
     "@hypothesis/frontend-build": ^3.0.0
-    "@hypothesis/frontend-shared": ^9.0.0
+    "@hypothesis/frontend-shared": ^9.1.0
     "@hypothesis/frontend-testing": ^1.3.1
     "@npmcli/arborist": ^9.0.0
     "@octokit/rest": ^21.0.0