Add PluralKit import, PMP backup/restore/wipe functionality

.changeset/add_pluralkit_import_pmp_backuprestorewipe_functionality.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+# Add PluralKit import, PMP backup/restore/wipe functionality

src/app/features/room/persona-picker/PersonaPicker.test.tsx

@@ -14,6 +14,12 @@ const mocked = vi.hoisted(() => ({
   setAccount: vi.fn<(...args: unknown[]) => Promise<void>>(),
 }));
 
+const grabPersonaButton = (name: string) => {
+  const btn = screen.getByText(name).parentElement!.parentElement!;
+  if (btn.tagName !== 'BUTTON') throw new Error('Not a button, DOM layout changed!');
+  return btn;
+};
+
 vi.mock('$app/persona/catalog', () => ({
   ProfileCatalog: class {
     constructor(private readonly mx: MatrixClient) {}
@@ -100,6 +106,7 @@ vi.mock('folds', async () => {
     Scroll: TestContainer,
     Text: TestContainer,
     config: { space: { S200: 0 } },
+    color: { Surface: { OnContainer: '#000000' } },
     toRem: (value: number) => `${value}rem`,
   };
 });
@@ -187,10 +194,7 @@ describe('PersonaPicker async flows', () => {
     renderPicker();
 
     await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'First' })).toHaveAttribute(
-        'aria-selected',
-        'true'
-      );
+      expect(grabPersonaButton('First')).toHaveAttribute('aria-selected', 'true');
     });
 
     roomSync.reject(new Error('room sync failed'));
@@ -204,17 +208,14 @@ describe('PersonaPicker async flows', () => {
     renderPicker();
     await screen.findByText('First');
 
-    fireEvent.click(screen.getByRole('button', { name: 'First' }));
-    fireEvent.click(screen.getByRole('button', { name: 'Second' }));
+    fireEvent.click(grabPersonaButton('First'));
+    fireEvent.click(grabPersonaButton('Second'));
 
     firstWrite.reject(new Error('first write failed'));
     secondWrite.resolve();
 
     await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'Second' })).toHaveAttribute(
-        'aria-selected',
-        'true'
-      );
+      expect(grabPersonaButton('Second')).toHaveAttribute('aria-selected', 'true');
     });
   });
 
@@ -227,7 +228,7 @@ describe('PersonaPicker async flows', () => {
     const view = renderPicker(mx);
     await screen.findByText('First');
 
-    fireEvent.click(screen.getByRole('button', { name: 'First' }));
+    fireEvent.click(grabPersonaButton('First'));
     view.rerender(
       <TemporaryPersonaPicker
         tab={PersonaPickerTab.PerRoom}
@@ -238,16 +239,13 @@ describe('PersonaPicker async flows', () => {
         latchedPersona={undefined}
       />
     );
-    fireEvent.click(screen.getByRole('button', { name: 'Second' }));
+    fireEvent.click(grabPersonaButton('Second'));
 
     globalWrite.reject(new Error('global write failed'));
     roomWrite.resolve();
 
     await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'Second' })).toHaveAttribute(
-        'aria-selected',
-        'true'
-      );
+      expect(grabPersonaButton('Second')).toHaveAttribute('aria-selected', 'true');
     });
 
     view.rerender(
@@ -260,24 +258,18 @@ describe('PersonaPicker async flows', () => {
         latchedPersona={undefined}
       />
     );
-    expect(screen.getByRole('button', { name: 'First' })).not.toHaveAttribute(
-      'aria-selected',
-      'true'
-    );
+    expect(grabPersonaButton('First')).not.toHaveAttribute('aria-selected', 'true');
   });
 
   it('reconciles an optimistic selection when its write is rejected', async () => {
     mocked.setAccount.mockRejectedValueOnce(new Error('write failed'));
     renderPicker();
     await screen.findByText('First');
 
-    fireEvent.click(screen.getByRole('button', { name: 'First' }));
+    fireEvent.click(grabPersonaButton('First'));
 
     await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'First' })).not.toHaveAttribute(
-        'aria-selected',
-        'true'
-      );
+      expect(grabPersonaButton('First')).not.toHaveAttribute('aria-selected', 'true');
     });
   });
 });

src/app/features/room/persona-picker/PersonaPicker.tsx

@@ -25,6 +25,7 @@ import {
   Text,
   toRem,
   Badge,
+  color,
 } from 'folds';
 import type { MatrixClient } from 'matrix-js-sdk';
 import {
@@ -361,12 +362,24 @@ function PersonaPickerMenu({
                       </Avatar>
                     }
                   >
-                    <Text
-                      truncate
-                      style={{ color: nameColor(profile) ?? undefined, maxWidth: toRem(150) }}
-                    >
-                      {profile.displayname}
-                    </Text>
+                    <Box direction="Column">
+                      <Text
+                        truncate
+                        style={{ color: nameColor(profile) ?? undefined, maxWidth: toRem(150) }}
+                      >
+                        {profile.displayname}
+                      </Text>
+                      <Text
+                        truncate
+                        size="T200"
+                        style={{
+                          color: `color-mix(${color.Surface.OnContainer}, transparent 20%)`,
+                          maxWidth: toRem(150),
+                        }}
+                      >
+                        {profile.id}
+                      </Text>
+                    </Box>
                   </MenuItem>
                 ))}
               </Scroll>