PMP User Heroes, Fix+Refactor Persona Picker

.changeset/pmp_user_heroes_fixrefactor_persona_picker.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+# PMP User Heroes, Fix+Refactor Persona Picker

src/app/components/UserRoomProfileRenderer.tsx

@@ -9,7 +9,7 @@ import { UserRoomProfile } from './user-profile';
 import { ResponsiveMenu } from './ResponsiveMenu';
 
 function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState }) {
-  const { roomId, spaceId, userId, cords, position, initialProfile } = state;
+  const { roomId, spaceId, userId, pmp, cords, position, initialProfile } = state;
   const allJoinedRooms = useAllJoinedRoomsSet();
   const getRoom = useGetRoom(allJoinedRooms);
   const room = getRoom(roomId);
@@ -37,6 +37,7 @@ function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState })
                 userId={userId}
                 initialProfile={initialProfile}
                 onSurfaceColorChange={setSurfaceColor}
+                pmp={pmp}
               />
             </RoomProvider>
           </SpaceProvider>

src/app/components/event-history/EventHistory.tsx

@@ -253,6 +253,7 @@ export const EventHistory = as<'div', EventHistoryProps>(
                 room.roomId,
                 space?.roomId,
                 readerId,
+                undefined,
                 getMouseEventCords(event.nativeEvent),
                 'Bottom'
               );

src/app/components/event-readers/EventReaders.tsx

@@ -93,6 +93,7 @@ export const EventReaders = as<'div', EventReadersProps>(
                         room.roomId,
                         space?.roomId,
                         readerId,
+                        undefined,
                         getMouseEventCords(event.nativeEvent),
                         'Bottom'
                       );

src/app/components/message-preview/MessagePreview.tsx

@@ -451,10 +451,11 @@ export function MessagePreview({
         room.roomId,
         undefined,
         sender,
+        perMessageProfile,
         evt.currentTarget.getBoundingClientRect()
       );
     },
-    [openUserRoomProfile, room.roomId, sender]
+    [openUserRoomProfile, room.roomId, perMessageProfile, sender]
   );
 
   return (

src/app/components/message/modals/Options.tsx

@@ -430,7 +430,6 @@ function OptionsReproxyPersonaPicker({
     <>
       <TemporaryPersonaPicker
         mx={mx}
-        hideTabs={true}
         onPersonaSelect={reproxyMessage}
         requestClose={closeMenu}
         anchor={anchor}

src/app/components/overlay-stack/OverlayStack.tsx

@@ -31,7 +31,7 @@ export function OverlayStackProvider({ children }: { children: ReactNode }) {
         setClaims((prev) =>
           prev.some((claim) => claim.id === id)
             ? prev
-            : [...prev, { id, seq }].sort((a, b) => a.seq - b.seq)
+            : [...prev, { id, seq }].toSorted((a, b) => a.seq - b.seq)
         ),
       release: (id) => setClaims((prev) => prev.filter((claim) => claim.id !== id)),
     }),

src/app/components/user-profile/UserHero.tsx

@@ -43,6 +43,9 @@ import { useTimeoutToggle } from '$hooks/useTimeoutToggle';
 import { CopyIcon, CrossIcon } from '@phosphor-icons/react';
 import { useOpenSettings } from '$features/settings';
 import { ModalOverlay } from '$components/modal-overlay/ModalOverlay';
+import type { Persona } from '$app/persona';
+import type { MatrixClient } from 'matrix-js-sdk';
+import { usePersonaCosmetics } from '$hooks/usePerMessageProfile';
 
 type UserHeroProps = {
   userId: string;
@@ -258,10 +261,13 @@ export function UserHero({
 }
 
 type UserHeroNameProps = {
+  mx?: MatrixClient;
   displayName?: string;
   userId: string;
   server?: string;
   customHeroCards?: boolean;
+  pmp?: Persona;
+  clearPmp?: () => void;
 };
 
 type UserHeroNameInnerProps = {
@@ -272,6 +278,8 @@ type UserHeroNameInnerProps = {
   color?: string;
   font?: string;
   customHeroCards?: boolean;
+  isPmp?: boolean;
+  clearPmp?: () => void;
 };
 
 function UserHeroNameInner({
@@ -281,6 +289,8 @@ function UserHeroNameInner({
   server,
   color,
   font,
+  isPmp,
+  clearPmp,
 }: UserHeroNameInnerProps) {
   const [copied, setCopied] = useTimeoutToggle();
   const [isHovered, setIsHovered] = useState(false);
@@ -332,26 +342,61 @@ function UserHeroNameInner({
             )
           }
         />
+        {isPmp && (
+          <>
+            {' - '}
+            <Chip
+              onClick={(evt) => {
+                evt.stopPropagation();
+                clearPmp?.();
+              }}
+              style={{ backgroundColor: 'transparent', color: 'inherit', padding: '0' }}
+              before={
+                <Text
+                  size="T200"
+                  className={classNames(BreakWord, LineClamp3, css.LinkUnderline)}
+                  truncate
+                >
+                  View account profile
+                </Text>
+              }
+            />
+          </>
+        )}
       </Box>
     </Box>
   );
 }
 
-export function UserHeroName({ displayName, userId, server, customHeroCards }: UserHeroNameProps) {
+export function UserHeroName({
+  mx,
+  displayName,
+  userId,
+  server,
+  customHeroCards,
+  pmp,
+  clearPmp,
+}: UserHeroNameProps) {
   const username = getMxIdLocalPart(userId);
   const nick = useNickname(userId);
 
+  // personas
+  const { nameColor: getPmpNameColor } = usePersonaCosmetics(mx);
+  const pmpNameColor = pmp?.['eu.she-a.color'] ? getPmpNameColor?.(pmp) : null;
+
   // Sable username color and fonts
   const { color, font } = useSableCosmetics(userId, useRoom(), customHeroCards);
-  const shownName = nick ?? displayName ?? username ?? userId;
+  const shownName = pmp?.displayname ?? nick ?? displayName ?? username ?? userId;
 
   return (
     <UserHeroNameInner
       username={username}
+      isPmp={!!pmp}
       server={server}
       shownName={shownName}
-      color={color}
+      color={pmpNameColor ?? color}
       font={font}
+      clearPmp={clearPmp}
     />
   );
 }

src/app/components/user-profile/UserRoomProfile.tsx

@@ -62,6 +62,8 @@ import { KnownMembership } from '$types/matrix-sdk';
 import { useRoomMemberHydration } from '$hooks/useRoomMemberHydration';
 import * as css from './styles.css';
 import * as prefix from '$unstable/prefixes';
+import type { Persona } from '$app/persona';
+import { usePersonaCosmetics } from '$hooks/usePerMessageProfile';
 
 const KNOWN_KEYS = new Set([
   prefix.MATRIX_SABLE_UNSTABLE_PROFILE_BIOGRAPHY_PROPERTY_NAME,
@@ -80,6 +82,7 @@ const KNOWN_KEYS = new Set([
 
 type UserExtendedSectionProps = {
   profile: UserProfile;
+  pmp?: Persona;
   htmlReactParserOptions: HTMLReactParserOptions;
   linkifyOpts: LinkifyOpts;
   innerColor?: string;
@@ -96,6 +99,7 @@ const renderValue = (val: unknown) => {
 
 function UserExtendedSection({
   profile,
+  pmp,
   htmlReactParserOptions,
   linkifyOpts,
   innerColor,
@@ -127,7 +131,7 @@ function UserExtendedSection({
   const languagesToFilterFor = getSettings().filterPronounsLanguages ?? ['en'];
 
   const pronouns = filterPronounsByLanguage(
-    profile.pronouns,
+    pmp?.['io.fsky.nyx.pronouns'] ?? profile.pronouns,
     languageFilterEnabled,
     languagesToFilterFor
   )
@@ -403,11 +407,13 @@ function UserExtendedSection({
 
 type UserRoomProfileProps = {
   userId: string;
+  pmp?: Persona;
   initialProfile?: Partial<UserProfile>;
   onSurfaceColorChange?: (color: string) => void;
 };
 export function UserRoomProfile({
   userId,
+  pmp: initialPmp,
   initialProfile,
   onSurfaceColorChange,
 }: Readonly<UserRoomProfileProps>) {
@@ -456,8 +462,17 @@ export function UserRoomProfile({
 
   useRoomMemberHydration(room, userId);
 
+  const [pmp, setPmp] = useState(initialPmp);
+  const { avatarUrl: getPmpAvatarUrl } = usePersonaCosmetics(mx, false);
+  const pmpAvatarUrl = pmp?.avatar_url ? getPmpAvatarUrl?.(pmp) : null;
+
+  const handleClearPmp = () => {
+    setPmp(undefined);
+  };
+
   const avatarMxc = getMemberAvatarMxc(room, userId) ?? extendedProfile.avatarUrl;
-  const avatarUrl = (avatarMxc && mxcUrlToHttp(mx, avatarMxc, useAuthentication)) ?? undefined;
+  const avatarUrl =
+    pmpAvatarUrl ?? (avatarMxc && mxcUrlToHttp(mx, avatarMxc, useAuthentication)) ?? undefined;
 
   const parsedBanner =
     typeof extendedProfile.bannerUrl === 'string'
@@ -607,10 +622,13 @@ export function UserRoomProfile({
         >
           <Box gap="200" alignItems="Center" wrap="Wrap" style={{ color: textColor }}>
             <UserHeroName
-              displayName={displayName}
+              mx={mx}
+              displayName={pmp?.displayname ?? displayName}
               userId={userId}
               customHeroCards={showCustomHeroCard}
               server={server}
+              pmp={pmp}
+              clearPmp={handleClearPmp}
             />
             {userId !== myUserId && (
               <Button
@@ -633,6 +651,7 @@ export function UserRoomProfile({
           </Box>
           <UserExtendedSection
             profile={extendedProfile}
+            pmp={pmp}
             htmlReactParserOptions={htmlReactParserOptions}
             linkifyOpts={linkifyOpts}
             innerColor={innerColor}

src/app/components/user-profile/styles.css.ts

@@ -131,3 +131,11 @@ export const UserHeroMenuItem = style({
     },
   },
 });
+
+export const LinkUnderline = style({
+  cursor: 'pointer',
+  textDecoration: 'underline',
+  ':hover': {
+    textDecoration: 'none',
+  },
+});

src/app/features/call-status/LiveChip.tsx

@@ -65,6 +65,7 @@ export function LiveChip({ count, room, members }: LiveChipProps) {
                           room.roomId,
                           undefined,
                           userId,
+                          undefined,
                           getMouseEventCords(evt.nativeEvent),
                           'Right'
                         )

src/app/features/call-status/MemberGlance.tsx

@@ -51,6 +51,7 @@ export function MemberGlance({ room, members, speakers, max = 6 }: MemberGlanceP
                 room.roomId,
                 undefined,
                 userId,
+                undefined,
                 getMouseEventCords(evt.nativeEvent),
                 'Top'
               )

src/app/features/call/CallMemberCard.tsx

@@ -59,6 +59,7 @@ function CallMemberCard({ member }: CallMemberCardProps) {
           room.roomId,
           undefined,
           userId,
+          undefined,
           getMouseEventCords(evt.nativeEvent),
           'Right'
         )

src/app/features/common-settings/members/Members.tsx

@@ -142,7 +142,13 @@ export function Members({ requestBack, requestClose }: MembersProps) {
     const btn = evt.currentTarget as HTMLButtonElement;
     const userId = btn.getAttribute('data-user-id');
     if (userId) {
-      openProfile(room.roomId, space?.roomId, userId, getMouseEventCords(evt.nativeEvent));
+      openProfile(
+        room.roomId,
+        space?.roomId,
+        userId,
+        undefined,
+        getMouseEventCords(evt.nativeEvent)
+      );
     }
   };
 

src/app/features/room-nav/RoomNavUser.tsx

@@ -37,7 +37,13 @@ export function RoomNavUser({ room, callMembership, hideText }: RoomNavUserProps
   const isCallParticipant = isActiveCall && userId !== mx.getUserId();
 
   const handleNavUserClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    openProfile(room.roomId, space?.roomId, userId, evt.currentTarget.getBoundingClientRect());
+    openProfile(
+      room.roomId,
+      space?.roomId,
+      userId,
+      undefined,
+      evt.currentTarget.getBoundingClientRect()
+    );
   };
 
   const ariaLabel = isCallParticipant ? `Call Participant: ${name}` : name;

src/app/features/room/MembersDrawer.tsx

@@ -311,7 +311,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
     // BODGE, dependent on menuItem height staying at toRem(40)
     cords.y = Math.min(cords.y, window.innerHeight - 42);
 
-    openUserRoomProfile(room.roomId, space?.roomId, userId, cords, 'Left');
+    openUserRoomProfile(room.roomId, space?.roomId, userId, undefined, cords, 'Left');
   };
 
   const [memberSidebarWidth, setMemberSidebarWidth] = useSetting(

src/app/features/room/RoomInput.tsx

@@ -212,7 +212,7 @@ import { AudioMessageRecorder } from './AudioMessageRecorder';
 import * as prefix from '$unstable/prefixes';
 import { PollDialog } from './poll-modals';
 import { useClientConfig } from '$hooks/useClientConfig';
-import { PersistentPersonaPicker, type PersonaPickerTab } from './persona-picker/PersonaPicker.tsx';
+import { PersonaPicker, type PersonaPickerTab } from './persona-picker/PersonaPicker.tsx';
 import { createComposerController, type ComposerController } from './composerController';
 import { buildEditReplacement, buildOutgoingMessage } from './composerMessage';
 import { pickNativeFile } from './nativeFilePicker';
@@ -2356,8 +2356,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   </IconButton>
                 </>
               )}
-              {pmpPickerEnable && !editingEvent && (
-                <PersistentPersonaPicker
+              {pmpPickerEnable && (isMobileOrTablet() ? !editingEvent : true) && (
+                <PersonaPicker
                   tab={personaPickerTab}
                   mx={mx}
                   roomId={roomId}

src/app/features/room/RoomTimeline.tsx

@@ -78,6 +78,7 @@ import type { IImageContent } from '$types/matrix/common';
 import { useTimelineRendererContext } from '$hooks/timeline/useTimelineRendererContext';
 import { TimelineScrollingProvider, useScrollActivity } from '$hooks/useTimelineScrollActivity';
 import * as css from './RoomTimeline.css';
+import type { Persona } from '$app/persona';
 
 const MAX_VIEWPORT_FILL_PAGINATIONS = 5;
 
@@ -926,6 +927,7 @@ export function RoomTimeline({
       roomId: string,
       spaceId: string | undefined,
       userId: string,
+      pmp: Persona | undefined,
       rect: DOMRect,
       undefinedArg?: undefined,
       options?: unknown

src/app/features/room/ThreadDrawer.tsx

@@ -46,6 +46,7 @@ import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollo
 import * as css from './ThreadDrawer.css';
 import { SidebarResizer } from '$pages/client/sidebar/SidebarResizer';
 import { isMobileOrTablet } from '$utils/platform';
+import type { Persona } from '$app/persona';
 
 type ThreadDrawerProps = {
   room: Room;
@@ -150,6 +151,7 @@ export function ThreadDrawer({ room, threadRootId, onClose, overlay }: ThreadDra
       roomId: string,
       spaceId: string | undefined,
       userId: string,
+      pmp: Persona | undefined,
       rect: DOMRect,
       undefinedArg?: undefined,
       options?: unknown