Change profile pronouns to closer follow MSC4247

src/app/components/message/layout/Base.tsx

@@ -28,6 +28,10 @@ export const UsernameBold = as<'b'>(({ as: AsUsernameBold = 'b', className, ...p
   <AsUsernameBold className={classNames(css.UsernameBold, className)} {...props} ref={ref} />
 ));
 
+export const PronounPill = as<'span'>(({ as: AsPronounPill = 'span', className, ...props }, ref) => (
+  <AsPronounPill className={classNames(css.PronounPill, className)} {...props} ref={ref} />
+));
+
 export const MessageTextBody = as<'div', css.MessageTextBodyVariants & { notice?: boolean }>(
   ({ as: asComp = 'div', className, preWrap, jumboEmoji, emote, notice, ...props }, ref) => (
     <Text

src/app/components/message/layout/layout.css.ts

@@ -181,6 +181,16 @@ export const UsernameBold = style({
   fontWeight: 550,
 });
 
+export const PronounPill = style({
+  borderRadius: config.radii.Pill,
+  backgroundColor: 'var(--sable-surface-var-container)',
+  paddingInline: toRem(5),
+  opacity: 0.8,
+  fontSize: '0.7rem',
+  whiteSpace: 'nowrap',
+  textTransform: 'lowercase',
+});
+
 export const MessageTextBody = recipe({
   base: {
     wordBreak: 'break-word',

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

@@ -63,7 +63,7 @@ function UserExtendedSection({
   const clamp = (str: string, len: number) => (str.length > len ? `${str.slice(0, len)}...` : str);
   const [showMore, setShowMore] = useState(false);
 
-  const pronouns = profile.pronouns?.map((p: any) => clamp(p.summary, 20)).join('/');
+  const pronouns = profile.pronouns?.map((p: any) => clamp(p.summary, 16)).join(', ');
   const timezone = profile.timezone ? clamp(profile.timezone, 64) : null;
   const localTime = timezone
     ? new Intl.DateTimeFormat([], {

src/app/features/room/message/Message.tsx

@@ -35,6 +35,7 @@ import {
   CompactLayout,
   MessageBase,
   ModernLayout,
+  PronounPill,
   Time,
   Username,
   UsernameBold,
@@ -249,46 +250,33 @@ function useMobileDoubleTap(callback: () => void, delay = 300) {
   );
 }
 
-function PronounTag({ pronouns, tagColor }: { pronouns?: any[]; tagColor: string }) {
+const Pronouns = as<
+  'div',
+  {
+    pronouns?: any[];
+    tagColor: string;
+  }
+>(({ pronouns, tagColor, ...props }, ref) => {
   if (!pronouns || pronouns.length === 0) return null;
 
   const clamp = (str: string, len: number) => (str.length > len ? `${str.slice(0, len)}...` : str);
+  const limit = mobileOrTablet() ? 1 : 3;
 
-  const display = clamp(
-    pronouns
-      .slice(0, 2)
-      .map((p) => clamp(p.summary, 48))
-      .join('/'),
-    128
-  );
-  const hasMore = pronouns.length > 2;
+  const display = pronouns.slice(0, limit).map((p) => (
+    <PronounPill style={{ color: tagColor }} {...props} ref={ref}>
+      {clamp(p.summary, 16)}
+    </PronounPill>
+  ));
 
-  return (
-    <Box
-      alignItems="Center"
-      style={{
-        backgroundColor: 'var(--sable-surface-var-container)',
-        padding: '0 5px',
-        borderRadius: config.radii.Pill,
-        height: '16px',
-        display: 'inline-flex',
-      }}
-    >
-      <Text
-        style={{
-          color: tagColor,
-          fontSize: '0.7rem',
-          lineHeight: '1',
-          textTransform: 'lowercase',
-          opacity: 0.8,
-        }}
-      >
-        {display}
-        {hasMore ? '...' : ''}
-      </Text>
-    </Box>
-  );
-}
+  if (pronouns.length > limit) {
+    display.push(
+      <PronounPill style={{ color: tagColor }} {...props} ref={ref}>
+        ...
+      </PronounPill>
+    );
+  }
+  return <>{display}</>;
+});
 
 function MessageInternal(
   {
@@ -404,7 +392,7 @@ function MessageInternal(
           </Text>
         </Username>
         {showPronouns && (
-          <PronounTag pronouns={profile.pronouns} tagColor={usernameColor ?? 'currentColor'} />
+          <Pronouns pronouns={profile.pronouns} tagColor={usernameColor ?? 'currentColor'} />
         )}
         {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
       </Box>

src/app/features/settings/account/PronounEditor.tsx

@@ -5,6 +5,7 @@ import { SettingTile } from '$components/setting-tile';
 type PronounSet = {
   summary: string;
   language?: string;
+  grammatical_gender?: string;
 };
 
 type PronounEditorProps = {
@@ -13,7 +14,7 @@ type PronounEditorProps = {
 };
 
 export function PronounEditor({ current, onSave }: PronounEditorProps) {
-  const initialString = current.map((p) => p.summary).join('/');
+  const initialString = current.map((p) => p.summary).join(', ');
   const [val, setVal] = useState(initialString);
 
   useEffect(() => setVal(initialString), [initialString]);
@@ -22,10 +23,10 @@ export function PronounEditor({ current, onSave }: PronounEditorProps) {
     if (val === initialString) return;
     const safeVal = val.slice(0, 128);
     const next = safeVal
-      .split('/')
+      .split(',')
       .map((s) => s.trim())
       .filter(Boolean)
-      .map((s) => ({ summary: s.slice(0, 16) }));
+      .map((s) => ({ summary: s.slice(0, 16), language: "en" }));
     onSave(next);
   };
 
@@ -36,7 +37,7 @@ export function PronounEditor({ current, onSave }: PronounEditorProps) {
   return (
     <SettingTile
       title="Pronouns"
-      description="Separate with slashes (e.g. they/them)."
+      description="Separate sets with commas (e.g. 'they/them, it/its')."
       after={
         <Input
           value={val}