From 3fa8def57bd9cf0185e77a666e8983dcac1977ca Mon Sep 17 00:00:00 2001
From: "Rosy.iso" <rosy.iso@blossomdevs.com>
Date: Fri, 6 Mar 2026 00:19:14 +0100
Subject: [PATCH 01/10] very very very initial placeholder stuff for tomorrow

---
 .../common-settings/cosmetics/Cosmetics.tsx   | 62 ++++++++++++++++++-
 1 file changed, 60 insertions(+), 2 deletions(-)

diff --git a/src/app/features/common-settings/cosmetics/Cosmetics.tsx b/src/app/features/common-settings/cosmetics/Cosmetics.tsx
index 70c4cacd01..f4196f73bc 100644
--- a/src/app/features/common-settings/cosmetics/Cosmetics.tsx
+++ b/src/app/features/common-settings/cosmetics/Cosmetics.tsx
@@ -147,8 +147,65 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
                   />
                 </SequenceCard>
               </Box>
-
-              {/* --- COMMAND REFERENCE SECTION --- */}
+              <Box direction="Column" gap="100">
+                <Text size="L400">Profile</Text>
+                <SequenceCard
+                  className={SequenceCardStyle}
+                  variant="SurfaceVariant"
+                  direction="Column"
+                  gap="400"
+                >
+                  <SettingTile
+                    title="Avatar"
+                    description="Placeholder. This is a work in progress still!"
+                  />
+                </SequenceCard>
+                <SequenceCard
+                  className={SequenceCardStyle}
+                  variant="SurfaceVariant"
+                  direction="Column"
+                  gap="400"
+                >
+                  <SettingTile
+                    title="Nickname"
+                    description="Placeholder. This is a work in progress still!"
+                  />
+                </SequenceCard>
+                <SequenceCard
+                  className={SequenceCardStyle}
+                  variant="SurfaceVariant"
+                  direction="Column"
+                  gap="400"
+                >
+                  <SettingTile
+                    title="Color"
+                    description='Placeholder. This is a work in progress still!'
+                  />
+                </SequenceCard>
+                <SequenceCard
+                  className={SequenceCardStyle}
+                  variant="SurfaceVariant"
+                  direction="Column"
+                  gap="400"
+                >
+                  <SettingTile
+                    title="Pronouns"
+                    description="Placeholder. This is a work in progress still!"
+                  />
+                </SequenceCard>
+                <SequenceCard
+                  className={SequenceCardStyle}
+                  variant="SurfaceVariant"
+                  direction="Column"
+                  gap="400"
+                >
+                  <SettingTile
+                    title="Font"
+                    description="Placeholder. This is a work in progress still!"
+                  />
+                </SequenceCard>
+              </Box>
+              {/* }
               <Box direction="Column" gap="100">
                 <Text size="L400">Commands</Text>
                 <SequenceCard
@@ -196,6 +253,7 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
                   />
                 </SequenceCard>
               </Box>
+              { */}
             </Box>
           </PageContent>
         </Scroll>

From 579f439e2da6f972e773835f83573b616a18b577 Mon Sep 17 00:00:00 2001
From: "Rosy.iso" <rosy.iso@blossomdevs.com>
Date: Fri, 6 Mar 2026 10:01:42 +0100
Subject: [PATCH 02/10] update description of cosmetic settings and move the
 to-be cosmetics above them

---
 .../common-settings/cosmetics/Cosmetics.tsx   | 132 +++++-------------
 1 file changed, 34 insertions(+), 98 deletions(-)

diff --git a/src/app/features/common-settings/cosmetics/Cosmetics.tsx b/src/app/features/common-settings/cosmetics/Cosmetics.tsx
index f4196f73bc..71f074310f 100644
--- a/src/app/features/common-settings/cosmetics/Cosmetics.tsx
+++ b/src/app/features/common-settings/cosmetics/Cosmetics.tsx
@@ -70,83 +70,6 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
         <Scroll hideTrack visibility="Hover">
           <PageContent>
             <Box direction="Column" gap="700">
-              <Box direction="Column" gap="100">
-                <Text size="L400">Settings</Text>
-
-                <SequenceCard
-                  className={SequenceCardStyle}
-                  variant="SurfaceVariant"
-                  direction="Column"
-                  gap="400"
-                >
-                  <SettingTile
-                    title={isSpace ? 'Space-Wide Colors' : 'Room Colors'}
-                    description={
-                      isSpace
-                        ? 'Allow everyone to use /scolor in this space.'
-                        : 'Allow everyone to use /color in this room.'
-                    }
-                    after={
-                      <Switch
-                        variant="Primary"
-                        value={getLevel(StateEvent.RoomCosmeticsColor) === 0}
-                        onChange={(enabled) => handleToggle(StateEvent.RoomCosmeticsColor, enabled)}
-                        disabled={!canEditPermissions}
-                      />
-                    }
-                  />
-                </SequenceCard>
-
-                <SequenceCard
-                  className={SequenceCardStyle}
-                  variant="SurfaceVariant"
-                  direction="Column"
-                  gap="400"
-                >
-                  <SettingTile
-                    title={isSpace ? 'Space-Wide Fonts' : 'Room Fonts'}
-                    description={
-                      isSpace
-                        ? 'Allow everyone to use /sfont in this space.'
-                        : 'Allow everyone to use /font in this room.'
-                    }
-                    after={
-                      <Switch
-                        variant="Primary"
-                        value={getLevel(StateEvent.RoomCosmeticsFont) === 0}
-                        onChange={(enabled) => handleToggle(StateEvent.RoomCosmeticsFont, enabled)}
-                        disabled={!canEditPermissions}
-                      />
-                    }
-                  />
-                </SequenceCard>
-
-                <SequenceCard
-                  className={SequenceCardStyle}
-                  variant="SurfaceVariant"
-                  direction="Column"
-                  gap="400"
-                >
-                  <SettingTile
-                    title={isSpace ? 'Space-Wide Pronouns' : 'Room Pronouns'}
-                    description={
-                      isSpace
-                        ? 'Allow everyone to use /spronoun in this space.'
-                        : 'Allow everyone to use /pronoun in this room.'
-                    }
-                    after={
-                      <Switch
-                        variant="Primary"
-                        value={getLevel(StateEvent.RoomCosmeticsPronouns) === 0}
-                        onChange={(enabled) =>
-                          handleToggle(StateEvent.RoomCosmeticsPronouns, enabled)
-                        }
-                        disabled={!canEditPermissions}
-                      />
-                    }
-                  />
-                </SequenceCard>
-              </Box>
               <Box direction="Column" gap="100">
                 <Text size="L400">Profile</Text>
                 <SequenceCard
@@ -179,7 +102,7 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
                 >
                   <SettingTile
                     title="Color"
-                    description='Placeholder. This is a work in progress still!'
+                    description="Placeholder. This is a work in progress still!"
                   />
                 </SequenceCard>
                 <SequenceCard
@@ -205,20 +128,8 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
                   />
                 </SequenceCard>
               </Box>
-              {/* }
               <Box direction="Column" gap="100">
-                <Text size="L400">Commands</Text>
-                <SequenceCard
-                  className={SequenceCardStyle}
-                  variant="SurfaceVariant"
-                  direction="Column"
-                  gap="400"
-                >
-                  <SettingTile
-                    title="/color [hex]"
-                    description="Set room-specific name color. (e.g. /color #ff00ff)"
-                  />
-                </SequenceCard>
+                <Text size="L400">Settings</Text>
                 <SequenceCard
                   className={SequenceCardStyle}
                   variant="SurfaceVariant"
@@ -226,8 +137,16 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
                   gap="400"
                 >
                   <SettingTile
-                    title="/font [name]"
-                    description="Set room-specific name font. (e.g. /font monospace)"
+                    title={isSpace ? 'Space-Wide Colors' : 'Room Colors'}
+                    description={`Allow everyone to set a color that applies in ${isSpace ? "all the space's rooms" : 'this room'}.`}
+                    after={
+                      <Switch
+                        variant="Primary"
+                        value={getLevel(StateEvent.RoomCosmeticsColor) === 0}
+                        onChange={(enabled) => handleToggle(StateEvent.RoomCosmeticsColor, enabled)}
+                        disabled={!canEditPermissions}
+                      />
+                    }
                   />
                 </SequenceCard>
                 <SequenceCard
@@ -237,8 +156,16 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
                   gap="400"
                 >
                   <SettingTile
-                    title="/pronoun [pronouns]"
-                    description='Set room-specific pronoun set. (e.g. /pronoun "they\them, it\its")'
+                    title={isSpace ? 'Space-Wide Fonts' : 'Room Fonts'}
+                    description={`Allow everyone to set a font that applies in ${isSpace ? "all the space's rooms" : 'this room'}.`}
+                    after={
+                      <Switch
+                        variant="Primary"
+                        value={getLevel(StateEvent.RoomCosmeticsFont) === 0}
+                        onChange={(enabled) => handleToggle(StateEvent.RoomCosmeticsFont, enabled)}
+                        disabled={!canEditPermissions}
+                      />
+                    }
                   />
                 </SequenceCard>
                 <SequenceCard
@@ -248,12 +175,21 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
                   gap="400"
                 >
                   <SettingTile
-                    title="/scolor | /sfont | /spronoun"
-                    description="Apply colors/fonts/pronouns to the entire space."
+                    title={isSpace ? 'Space-Wide Pronouns' : 'Room Pronouns'}
+                    description={`Allow everyone to set pronouns that apply in ${isSpace ? "all the space's rooms" : 'this room'}.`}
+                    after={
+                      <Switch
+                        variant="Primary"
+                        value={getLevel(StateEvent.RoomCosmeticsPronouns) === 0}
+                        onChange={(enabled) =>
+                          handleToggle(StateEvent.RoomCosmeticsPronouns, enabled)
+                        }
+                        disabled={!canEditPermissions}
+                      />
+                    }
                   />
                 </SequenceCard>
               </Box>
-              { */}
             </Box>
           </PageContent>
         </Scroll>

From b6ed01cee15533ecd529f5aaea854b283bb2a96d Mon Sep 17 00:00:00 2001
From: "Rosy.iso" <rosy.iso@blossomdevs.com>
Date: Fri, 6 Mar 2026 10:20:10 +0100
Subject: [PATCH 03/10] underlike Cosmetics icon in rooms and spaces' settings

---
 .../features/room-settings/RoomSettings.tsx   | 51 +++++++++++--------
 .../features/space-settings/SpaceSettings.tsx | 48 ++++++++++-------
 2 files changed, 58 insertions(+), 41 deletions(-)

diff --git a/src/app/features/room-settings/RoomSettings.tsx b/src/app/features/room-settings/RoomSettings.tsx
index d79cfd77ab..a2abde704a 100644
--- a/src/app/features/room-settings/RoomSettings.tsx
+++ b/src/app/features/room-settings/RoomSettings.tsx
@@ -24,6 +24,7 @@ type RoomSettingsMenuItem = {
   page: RoomSettingsPage;
   name: string;
   icon: IconSrc;
+  activeIcon?: IconSrc;
 };
 
 const useRoomSettingsMenuItems = (): RoomSettingsMenuItem[] =>
@@ -48,6 +49,7 @@ const useRoomSettingsMenuItems = (): RoomSettingsMenuItem[] =>
         page: RoomSettingsPage.CosmeticsPage,
         name: 'Cosmetics',
         icon: Icons.Alphabet,
+        activeIcon: Icons.AlphabetUnderline,
       },
       {
         page: RoomSettingsPage.EmojisStickersPage,
@@ -139,29 +141,34 @@ export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) {
               <Box grow="Yes" direction="Column">
                 <PageNavContent>
                   <div style={{ flexGrow: 1 }}>
-                    {menuItems.map((item) => (
-                      <MenuItem
-                        key={item.name}
-                        variant="Background"
-                        radii="400"
-                        aria-pressed={activePage === item.page}
-                        before={
-                          <Icon src={item.icon} size="100" filled={activePage === item.page} />
-                        }
-                        onClick={() => setActivePage(item.page)}
-                      >
-                        <Text
-                          style={{
-                            fontWeight:
-                              activePage === item.page ? config.fontWeight.W600 : undefined,
-                          }}
-                          size="T300"
-                          truncate
+                    {menuItems.map((item) => {
+                      const currentIcon =
+                        activePage === item.page && item.activeIcon ? item.activeIcon : item.icon;
+
+                      return (
+                        <MenuItem
+                          key={item.name}
+                          variant="Background"
+                          radii="400"
+                          aria-pressed={activePage === item.page}
+                          before={
+                            <Icon src={currentIcon} size="100" filled={activePage === item.page} />
+                          }
+                          onClick={() => setActivePage(item.page)}
                         >
-                          {item.name}
-                        </Text>
-                      </MenuItem>
-                    ))}
+                          <Text
+                            style={{
+                              fontWeight:
+                                activePage === item.page ? config.fontWeight.W600 : undefined,
+                            }}
+                            size="T300"
+                            truncate
+                          >
+                            {item.name}
+                          </Text>
+                        </MenuItem>
+                      );
+                    })}
                   </div>
                 </PageNavContent>
               </Box>
diff --git a/src/app/features/space-settings/SpaceSettings.tsx b/src/app/features/space-settings/SpaceSettings.tsx
index 79ab84429d..ddd1d5c74e 100644
--- a/src/app/features/space-settings/SpaceSettings.tsx
+++ b/src/app/features/space-settings/SpaceSettings.tsx
@@ -23,6 +23,7 @@ type SpaceSettingsMenuItem = {
   page: SpaceSettingsPage;
   name: string;
   icon: IconSrc;
+  activeIcon?: IconSrc;
 };
 
 const useSpaceSettingsMenuItems = (): SpaceSettingsMenuItem[] =>
@@ -47,6 +48,7 @@ const useSpaceSettingsMenuItems = (): SpaceSettingsMenuItem[] =>
         page: SpaceSettingsPage.CosmeticsPage,
         name: 'Cosmetics',
         icon: Icons.Alphabet,
+        activeIcon: Icons.AlphabetUnderline,
       },
       {
         page: SpaceSettingsPage.EmojisStickersPage,
@@ -132,26 +134,34 @@ export function SpaceSettings({ initialPage, requestClose }: SpaceSettingsProps)
             <Box grow="Yes" direction="Column">
               <PageNavContent>
                 <div style={{ flexGrow: 1 }}>
-                  {menuItems.map((item) => (
-                    <MenuItem
-                      key={item.name}
-                      variant="Background"
-                      radii="400"
-                      aria-pressed={activePage === item.page}
-                      before={<Icon src={item.icon} size="100" filled={activePage === item.page} />}
-                      onClick={() => setActivePage(item.page)}
-                    >
-                      <Text
-                        style={{
-                          fontWeight: activePage === item.page ? config.fontWeight.W600 : undefined,
-                        }}
-                        size="T300"
-                        truncate
+                  {menuItems.map((item) => {
+                    const currentIcon =
+                      activePage === item.page && item.activeIcon ? item.activeIcon : item.icon;
+
+                    return (
+                      <MenuItem
+                        key={item.name}
+                        variant="Background"
+                        radii="400"
+                        aria-pressed={activePage === item.page}
+                        before={
+                          <Icon src={currentIcon} size="100" filled={activePage === item.page} />
+                        }
+                        onClick={() => setActivePage(item.page)}
                       >
-                        {item.name}
-                      </Text>
-                    </MenuItem>
-                  ))}
+                        <Text
+                          style={{
+                            fontWeight:
+                              activePage === item.page ? config.fontWeight.W600 : undefined,
+                          }}
+                          size="T300"
+                          truncate
+                        >
+                          {item.name}
+                        </Text>
+                      </MenuItem>
+                    );
+                  })}
                 </div>
               </PageNavContent>
             </Box>

From 29ee1922519b25bd9556e20b7a6692c00d675fed Mon Sep 17 00:00:00 2001
From: "Rosy.iso" <rosy.iso@blossomdevs.com>
Date: Fri, 6 Mar 2026 10:42:18 +0100
Subject: [PATCH 04/10] placeholder avatar

---
 .../common-settings/cosmetics/Cosmetics.tsx   | 29 +++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/app/features/common-settings/cosmetics/Cosmetics.tsx b/src/app/features/common-settings/cosmetics/Cosmetics.tsx
index 71f074310f..d34f41e633 100644
--- a/src/app/features/common-settings/cosmetics/Cosmetics.tsx
+++ b/src/app/features/common-settings/cosmetics/Cosmetics.tsx
@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { Box, Text, IconButton, Icon, Icons, Scroll, Switch } from 'folds';
+import { Box, Text, IconButton, Icon, Icons, Scroll, Switch, Avatar } from 'folds';
 import { Page, PageContent, PageHeader } from '$components/page';
 import { SequenceCard } from '$components/sequence-card';
 import { SettingTile } from '$components/setting-tile';
@@ -11,6 +11,11 @@ import { useRoomCreators } from '$hooks/useRoomCreators';
 import { useRoomPermissions } from '$hooks/useRoomPermissions';
 import { createLogger } from '$utils/debug';
 import { SequenceCardStyle } from '$features/common-settings/styles.css';
+import { UserAvatar } from '$components/user-avatar';
+import { nameInitials } from '$utils/common';
+import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
+import { useUserProfile } from '$hooks/useUserProfile';
+import { getMxIdLocalPart, mxcUrlToHttp } from '$utils/matrix';
 
 type CosmeticsProps = {
   requestClose: () => void;
@@ -20,6 +25,8 @@ const log = createLogger('Cosmetics');
 
 export function Cosmetics({ requestClose }: CosmeticsProps) {
   const mx = useMatrixClient();
+  const userId = mx.getUserId()!;
+  const profile = useUserProfile(userId);
   const room = useRoom();
   const creators = useRoomCreators(room);
   const powerLevels = usePowerLevels(room);
@@ -28,6 +35,13 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
   const permissions = useRoomPermissions(creators, powerLevels);
   const canEditPermissions = permissions.stateEvent(StateEvent.RoomPowerLevels, mx.getSafeUserId());
 
+  const useAuthentication = useMediaAuthentication();
+  const avatarUrl = profile.avatarUrl
+    ? (mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined)
+    : undefined;
+
+  const defaultDisplayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
+
   const getLevel = (eventType: string) => (powerLevels as any).events?.[eventType] ?? 50;
 
   const handleToggle = useCallback(
@@ -80,7 +94,18 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
                 >
                   <SettingTile
                     title="Avatar"
-                    description="Placeholder. This is a work in progress still!"
+                    description="This...is still a placeholder"
+                    after={
+                      <Avatar size="500" radii="300">
+                        <UserAvatar
+                          userId={userId}
+                          src={avatarUrl}
+                          renderFallback={() => (
+                            <Text size="H4">{nameInitials(defaultDisplayName)}</Text>
+                          )}
+                        />
+                      </Avatar>
+                    }
                   />
                 </SequenceCard>
                 <SequenceCard

From 27292cd6a9b588eb626759ad104ef92ea3c6245e Mon Sep 17 00:00:00 2001
From: "Rosy.iso" <rosy.iso@blossomdevs.com>
Date: Sat, 7 Mar 2026 19:05:16 +0100
Subject: [PATCH 05/10] add room display name

---
 .../common-settings/cosmetics/Cosmetics.tsx   | 105 ++++++++++++++++--
 1 file changed, 96 insertions(+), 9 deletions(-)

diff --git a/src/app/features/common-settings/cosmetics/Cosmetics.tsx b/src/app/features/common-settings/cosmetics/Cosmetics.tsx
index d34f41e633..61f266153b 100644
--- a/src/app/features/common-settings/cosmetics/Cosmetics.tsx
+++ b/src/app/features/common-settings/cosmetics/Cosmetics.tsx
@@ -1,5 +1,5 @@
-import { useCallback } from 'react';
-import { Box, Text, IconButton, Icon, Icons, Scroll, Switch, Avatar } from 'folds';
+import { ChangeEventHandler, FormEventHandler, useCallback, useEffect, useState } from 'react';
+import { Box, Text, IconButton, Icon, Icons, Scroll, Switch, Avatar, Input, config, Button, Spinner } from 'folds';
 import { Page, PageContent, PageHeader } from '$components/page';
 import { SequenceCard } from '$components/sequence-card';
 import { SettingTile } from '$components/setting-tile';
@@ -16,13 +16,103 @@ import { nameInitials } from '$utils/common';
 import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
 import { useUserProfile } from '$hooks/useUserProfile';
 import { getMxIdLocalPart, mxcUrlToHttp } from '$utils/matrix';
+import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
+import { Room } from '$types/matrix-sdk';
+import { Command, useCommands } from '$hooks/useCommands';
 
-type CosmeticsProps = {
-  requestClose: () => void;
+const log = createLogger('Cosmetics');
+
+type CosmeticsSettingProps = {
+  userId: string;
+  room: Room;
 };
+export function CosmeticsNickname({ userId, room }: CosmeticsSettingProps) {
+  const mx = useMatrixClient();
 
-const log = createLogger('Cosmetics');
+  const defaultDisplayName = room.getMember(userId)!.rawDisplayName;
+  const [displayName, setDisplayName] = useState<string>(defaultDisplayName);
+
+  const myRoomNick = useCommands(mx, room)[Command.MyRoomNick];
+  const [changeState, changeDisplayName] = useAsyncCallback((name: string) => myRoomNick.exe(name));
+  const changingDisplayName = changeState.status === AsyncStatus.Loading;
+
+  useEffect(() => {
+    setDisplayName(defaultDisplayName);
+  }, [defaultDisplayName]);
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
+    const name = evt.currentTarget.value;
+    setDisplayName(name);
+  };
+
+  const handleReset = () => {
+    setDisplayName(defaultDisplayName);
+  };
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    if (changingDisplayName) return;
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const displayNameInput = target?.displayNameInput as HTMLInputElement | undefined;
+    const name = displayNameInput?.value;
+    if (!name) return;
+
+    changeDisplayName(name);
+  };
 
+  const hasChanges = displayName !== defaultDisplayName;
+  return (
+    <SettingTile title="Room Display Name">
+      <Box direction="Column" grow="Yes" gap="100">
+        <Box as="form" onSubmit={handleSubmit} gap="200">
+          <Box grow="Yes" direction="Column">
+            <Input
+              required
+              name="displayNameInput"
+              value={displayName}
+              onChange={handleChange}
+              variant="Secondary"
+              radii="300"
+              style={{ paddingRight: config.space.S200 }}
+              readOnly={changingDisplayName}
+              after={
+                hasChanges &&
+                !changingDisplayName && (
+                  <IconButton
+                    type="reset"
+                    onClick={handleReset}
+                    size="300"
+                    radii="300"
+                    variant="Secondary"
+                  >
+                    <Icon src={Icons.Cross} size="100" />
+                  </IconButton>
+                )
+              }
+            />
+          </Box>
+          <Button
+            size="400"
+            variant={hasChanges ? 'Success' : 'Secondary'}
+            fill={hasChanges ? 'Solid' : 'Soft'}
+            outlined
+            radii="300"
+            disabled={!hasChanges || changingDisplayName}
+            type="submit"
+          >
+            {changingDisplayName && <Spinner variant="Success" fill="Solid" size="300" />}
+            <Text size="B400">Save</Text>
+          </Button>
+        </Box>
+      </Box>
+    </SettingTile>
+  );
+}
+
+type CosmeticsProps = {
+  requestClose: () => void;
+};
 export function Cosmetics({ requestClose }: CosmeticsProps) {
   const mx = useMatrixClient();
   const userId = mx.getUserId()!;
@@ -114,10 +204,7 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
                   direction="Column"
                   gap="400"
                 >
-                  <SettingTile
-                    title="Nickname"
-                    description="Placeholder. This is a work in progress still!"
-                  />
+                  <CosmeticsNickname userId={userId} room={room} />
                 </SequenceCard>
                 <SequenceCard
                   className={SequenceCardStyle}

From 4219f31d5edb40ff4090a80c302b1770a04069a7 Mon Sep 17 00:00:00 2001
From: "Rosy.iso" <rosy.iso@blossomdevs.com>
Date: Sat, 7 Mar 2026 21:27:23 +0100
Subject: [PATCH 06/10] hide away room profile and display name in spaces
 (they're room only)

---
 .../common-settings/cosmetics/Cosmetics.tsx   | 79 +++++++++++--------
 1 file changed, 48 insertions(+), 31 deletions(-)

diff --git a/src/app/features/common-settings/cosmetics/Cosmetics.tsx b/src/app/features/common-settings/cosmetics/Cosmetics.tsx
index 61f266153b..e4bc861301 100644
--- a/src/app/features/common-settings/cosmetics/Cosmetics.tsx
+++ b/src/app/features/common-settings/cosmetics/Cosmetics.tsx
@@ -1,5 +1,18 @@
 import { ChangeEventHandler, FormEventHandler, useCallback, useEffect, useState } from 'react';
-import { Box, Text, IconButton, Icon, Icons, Scroll, Switch, Avatar, Input, config, Button, Spinner } from 'folds';
+import {
+  Box,
+  Text,
+  IconButton,
+  Icon,
+  Icons,
+  Scroll,
+  Switch,
+  Avatar,
+  Input,
+  config,
+  Button,
+  Spinner,
+} from 'folds';
 import { Page, PageContent, PageHeader } from '$components/page';
 import { SequenceCard } from '$components/sequence-card';
 import { SettingTile } from '$components/setting-tile';
@@ -176,36 +189,40 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
             <Box direction="Column" gap="700">
               <Box direction="Column" gap="100">
                 <Text size="L400">Profile</Text>
-                <SequenceCard
-                  className={SequenceCardStyle}
-                  variant="SurfaceVariant"
-                  direction="Column"
-                  gap="400"
-                >
-                  <SettingTile
-                    title="Avatar"
-                    description="This...is still a placeholder"
-                    after={
-                      <Avatar size="500" radii="300">
-                        <UserAvatar
-                          userId={userId}
-                          src={avatarUrl}
-                          renderFallback={() => (
-                            <Text size="H4">{nameInitials(defaultDisplayName)}</Text>
-                          )}
-                        />
-                      </Avatar>
-                    }
-                  />
-                </SequenceCard>
-                <SequenceCard
-                  className={SequenceCardStyle}
-                  variant="SurfaceVariant"
-                  direction="Column"
-                  gap="400"
-                >
-                  <CosmeticsNickname userId={userId} room={room} />
-                </SequenceCard>
+                {!isSpace && (
+                  <SequenceCard
+                    className={SequenceCardStyle}
+                    variant="SurfaceVariant"
+                    direction="Column"
+                    gap="400"
+                  >
+                    <SettingTile
+                      title="Avatar"
+                      description="This...is still a placeholder"
+                      after={
+                        <Avatar size="500" radii="300">
+                          <UserAvatar
+                            userId={userId}
+                            src={avatarUrl}
+                            renderFallback={() => (
+                              <Text size="H4">{nameInitials(defaultDisplayName)}</Text>
+                            )}
+                          />
+                        </Avatar>
+                      }
+                    />
+                  </SequenceCard>
+                )}
+                {!isSpace && (
+                  <SequenceCard
+                    className={SequenceCardStyle}
+                    variant="SurfaceVariant"
+                    direction="Column"
+                    gap="400"
+                  >
+                    <CosmeticsNickname userId={userId} room={room} />
+                  </SequenceCard>
+                )}
                 <SequenceCard
                   className={SequenceCardStyle}
                   variant="SurfaceVariant"

From 6fa2b3bf1cf04b4804571fd9c3c12e95eb7f6a69 Mon Sep 17 00:00:00 2001
From: "Rosy.iso" <rosy.iso@blossomdevs.com>
Date: Sat, 7 Mar 2026 21:40:44 +0100
Subject: [PATCH 07/10] allow being able to reset a room display name into the
 global display name

---
 .../common-settings/cosmetics/Cosmetics.tsx     | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/app/features/common-settings/cosmetics/Cosmetics.tsx b/src/app/features/common-settings/cosmetics/Cosmetics.tsx
index e4bc861301..8204b2a014 100644
--- a/src/app/features/common-settings/cosmetics/Cosmetics.tsx
+++ b/src/app/features/common-settings/cosmetics/Cosmetics.tsx
@@ -27,7 +27,7 @@ import { SequenceCardStyle } from '$features/common-settings/styles.css';
 import { UserAvatar } from '$components/user-avatar';
 import { nameInitials } from '$utils/common';
 import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
-import { useUserProfile } from '$hooks/useUserProfile';
+import { UserProfile, useUserProfile } from '$hooks/useUserProfile';
 import { getMxIdLocalPart, mxcUrlToHttp } from '$utils/matrix';
 import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
 import { Room } from '$types/matrix-sdk';
@@ -36,14 +36,16 @@ import { Command, useCommands } from '$hooks/useCommands';
 const log = createLogger('Cosmetics');
 
 type CosmeticsSettingProps = {
+  profile: UserProfile;
   userId: string;
   room: Room;
 };
-export function CosmeticsNickname({ userId, room }: CosmeticsSettingProps) {
+export function CosmeticsNickname({ profile, userId, room }: CosmeticsSettingProps) {
   const mx = useMatrixClient();
 
   const defaultDisplayName = room.getMember(userId)!.rawDisplayName;
   const [displayName, setDisplayName] = useState<string>(defaultDisplayName);
+  const hasChanges = displayName !== defaultDisplayName;
 
   const myRoomNick = useCommands(mx, room)[Command.MyRoomNick];
   const [changeState, changeDisplayName] = useAsyncCallback((name: string) => myRoomNick.exe(name));
@@ -59,7 +61,11 @@ export function CosmeticsNickname({ userId, room }: CosmeticsSettingProps) {
   };
 
   const handleReset = () => {
-    setDisplayName(defaultDisplayName);
+    if (hasChanges) {
+      setDisplayName(defaultDisplayName);
+    } else {
+      setDisplayName(profile.displayName ?? getMxIdLocalPart(userId) ?? userId);
+    }
   };
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
@@ -74,7 +80,6 @@ export function CosmeticsNickname({ userId, room }: CosmeticsSettingProps) {
     changeDisplayName(name);
   };
 
-  const hasChanges = displayName !== defaultDisplayName;
   return (
     <SettingTile title="Room Display Name">
       <Box direction="Column" grow="Yes" gap="100">
@@ -90,7 +95,7 @@ export function CosmeticsNickname({ userId, room }: CosmeticsSettingProps) {
               style={{ paddingRight: config.space.S200 }}
               readOnly={changingDisplayName}
               after={
-                hasChanges &&
+                displayName !== (profile.displayName ?? getMxIdLocalPart(userId) ?? userId) &&
                 !changingDisplayName && (
                   <IconButton
                     type="reset"
@@ -220,7 +225,7 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
                     direction="Column"
                     gap="400"
                   >
-                    <CosmeticsNickname userId={userId} room={room} />
+                    <CosmeticsNickname profile={profile} userId={userId} room={room} />
                   </SequenceCard>
                 )}
                 <SequenceCard

From c42b809cf32b9143e77f3b284064915daa604a0c Mon Sep 17 00:00:00 2001
From: "Rosy.iso" <rosy.iso@blossomdevs.com>
Date: Sun, 8 Mar 2026 09:33:42 +0100
Subject: [PATCH 08/10] allow inputting an empty name to reset the room display
 name

---
 src/app/features/common-settings/cosmetics/Cosmetics.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/features/common-settings/cosmetics/Cosmetics.tsx b/src/app/features/common-settings/cosmetics/Cosmetics.tsx
index 8204b2a014..24d81fdff6 100644
--- a/src/app/features/common-settings/cosmetics/Cosmetics.tsx
+++ b/src/app/features/common-settings/cosmetics/Cosmetics.tsx
@@ -75,9 +75,8 @@ export function CosmeticsNickname({ profile, userId, room }: CosmeticsSettingPro
     const target = evt.target as HTMLFormElement | undefined;
     const displayNameInput = target?.displayNameInput as HTMLInputElement | undefined;
     const name = displayNameInput?.value;
-    if (!name) return;
 
-    changeDisplayName(name);
+    changeDisplayName(name ?? '');
   };
 
   return (
@@ -86,7 +85,6 @@ export function CosmeticsNickname({ profile, userId, room }: CosmeticsSettingPro
         <Box as="form" onSubmit={handleSubmit} gap="200">
           <Box grow="Yes" direction="Column">
             <Input
-              required
               name="displayNameInput"
               value={displayName}
               onChange={handleChange}

From 8509fb033b685001465adf0de0e52339f80b45d5 Mon Sep 17 00:00:00 2001
From: "Rosy.iso" <rosy.iso@blossomdevs.com>
Date: Mon, 9 Mar 2026 00:21:22 +0100
Subject: [PATCH 09/10] show room profile in cosmetics

---
 .../common-settings/cosmetics/Cosmetics.tsx   | 71 ++++++++++++-------
 1 file changed, 46 insertions(+), 25 deletions(-)

diff --git a/src/app/features/common-settings/cosmetics/Cosmetics.tsx b/src/app/features/common-settings/cosmetics/Cosmetics.tsx
index 24d81fdff6..14abaca5fa 100644
--- a/src/app/features/common-settings/cosmetics/Cosmetics.tsx
+++ b/src/app/features/common-settings/cosmetics/Cosmetics.tsx
@@ -30,20 +30,51 @@ import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
 import { UserProfile, useUserProfile } from '$hooks/useUserProfile';
 import { getMxIdLocalPart, mxcUrlToHttp } from '$utils/matrix';
 import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
-import { Room } from '$types/matrix-sdk';
+import { Room, RoomMember } from '$types/matrix-sdk';
 import { Command, useCommands } from '$hooks/useCommands';
 
 const log = createLogger('Cosmetics');
 
 type CosmeticsSettingProps = {
   profile: UserProfile;
+  member: RoomMember;
   userId: string;
   room: Room;
 };
-export function CosmeticsNickname({ profile, userId, room }: CosmeticsSettingProps) {
+export function CosmeticsAvatar({ profile, member, userId, room }: CosmeticsSettingProps) {
   const mx = useMatrixClient();
 
-  const defaultDisplayName = room.getMember(userId)!.rawDisplayName;
+  const useAuthentication = useMediaAuthentication();
+  /* const avatarUrl = profile.avatarUrl
+    ? (mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined)
+    : undefined; */
+  const avatarMxc = member.getMxcAvatarUrl();
+  const avatarUrl =
+    avatarMxc && (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined);
+
+  return (
+    <SettingTile
+      title="Avatar"
+      description="This...is still a placeholder"
+      after={
+        <Avatar size="500" radii="300">
+          <UserAvatar
+            userId={userId}
+            src={avatarUrl}
+            renderFallback={() => (
+              <Text size="H4">{nameInitials(room.getMember(userId)!.rawDisplayName)}</Text>
+            )}
+          />
+        </Avatar>
+      }
+    />
+  );
+}
+
+export function CosmeticsNickname({ profile, member, userId, room }: CosmeticsSettingProps) {
+  const mx = useMatrixClient();
+
+  const defaultDisplayName = member.rawDisplayName;
   const [displayName, setDisplayName] = useState<string>(defaultDisplayName);
   const hasChanges = displayName !== defaultDisplayName;
 
@@ -135,19 +166,13 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
   const profile = useUserProfile(userId);
   const room = useRoom();
   const creators = useRoomCreators(room);
+  const member = room.getMember(userId)!;
   const powerLevels = usePowerLevels(room);
   const isSpace = room.isSpaceRoom();
 
   const permissions = useRoomPermissions(creators, powerLevels);
   const canEditPermissions = permissions.stateEvent(StateEvent.RoomPowerLevels, mx.getSafeUserId());
 
-  const useAuthentication = useMediaAuthentication();
-  const avatarUrl = profile.avatarUrl
-    ? (mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined)
-    : undefined;
-
-  const defaultDisplayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
-
   const getLevel = (eventType: string) => (powerLevels as any).events?.[eventType] ?? 50;
 
   const handleToggle = useCallback(
@@ -199,20 +224,11 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
                     direction="Column"
                     gap="400"
                   >
-                    <SettingTile
-                      title="Avatar"
-                      description="This...is still a placeholder"
-                      after={
-                        <Avatar size="500" radii="300">
-                          <UserAvatar
-                            userId={userId}
-                            src={avatarUrl}
-                            renderFallback={() => (
-                              <Text size="H4">{nameInitials(defaultDisplayName)}</Text>
-                            )}
-                          />
-                        </Avatar>
-                      }
+                    <CosmeticsAvatar
+                      profile={profile}
+                      member={member}
+                      userId={userId}
+                      room={room}
                     />
                   </SequenceCard>
                 )}
@@ -223,7 +239,12 @@ export function Cosmetics({ requestClose }: CosmeticsProps) {
                     direction="Column"
                     gap="400"
                   >
-                    <CosmeticsNickname profile={profile} userId={userId} room={room} />
+                    <CosmeticsNickname
+                      profile={profile}
+                      member={member}
+                      userId={userId}
+                      room={room}
+                    />
                   </SequenceCard>
                 )}
                 <SequenceCard

From a3480f9ce2e658c92c2df4c365d0f267b8e68033 Mon Sep 17 00:00:00 2001
From: "Rosy.iso" <rosy.iso@blossomdevs.com>
Date: Mon, 9 Mar 2026 13:56:36 +0100
Subject: [PATCH 10/10] add room specific avatar interface

---
 .../common-settings/cosmetics/Cosmetics.tsx   | 165 +++++++++++++++++-
 1 file changed, 157 insertions(+), 8 deletions(-)

diff --git a/src/app/features/common-settings/cosmetics/Cosmetics.tsx b/src/app/features/common-settings/cosmetics/Cosmetics.tsx
index 14abaca5fa..a286f6ab1c 100644
--- a/src/app/features/common-settings/cosmetics/Cosmetics.tsx
+++ b/src/app/features/common-settings/cosmetics/Cosmetics.tsx
@@ -1,4 +1,11 @@
-import { ChangeEventHandler, FormEventHandler, useCallback, useEffect, useState } from 'react';
+import {
+  ChangeEventHandler,
+  FormEventHandler,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import {
   Box,
   Text,
@@ -12,6 +19,12 @@ import {
   config,
   Button,
   Spinner,
+  OverlayBackdrop,
+  Overlay,
+  OverlayCenter,
+  Modal,
+  Dialog,
+  Header,
 } from 'folds';
 import { Page, PageContent, PageHeader } from '$components/page';
 import { SequenceCard } from '$components/sequence-card';
@@ -32,6 +45,15 @@ import { getMxIdLocalPart, mxcUrlToHttp } from '$utils/matrix';
 import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
 import { Room, RoomMember } from '$types/matrix-sdk';
 import { Command, useCommands } from '$hooks/useCommands';
+import { useCapabilities } from '$hooks/useCapabilities';
+import { useObjectURL } from '$hooks/useObjectURL';
+import { createUploadAtom, UploadSuccess } from '$state/upload';
+import { useFilePicker } from '$hooks/useFilePicker';
+import { CompactUploadCardRenderer } from '$components/upload-card';
+import FocusTrap from 'focus-trap-react';
+import { ImageEditor } from '$components/image-editor';
+import { stopPropagation } from '$utils/keyboard';
+import { ModalWide } from '$styles/Modal.css';
 
 const log = createLogger('Cosmetics');
 
@@ -43,19 +65,46 @@ type CosmeticsSettingProps = {
 };
 export function CosmeticsAvatar({ profile, member, userId, room }: CosmeticsSettingProps) {
   const mx = useMatrixClient();
-
   const useAuthentication = useMediaAuthentication();
-  /* const avatarUrl = profile.avatarUrl
-    ? (mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined)
-    : undefined; */
+  const capabilities = useCapabilities();
+  const [alertRemove, setAlertRemove] = useState(false);
+  const disableSetAvatar = capabilities['m.set_avatar_url']?.enabled === false;
+
   const avatarMxc = member.getMxcAvatarUrl();
   const avatarUrl =
     avatarMxc && (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined);
 
+  const [imageFile, setImageFile] = useState<File>();
+  const imageFileURL = useObjectURL(imageFile);
+  const uploadAtom = useMemo(() => {
+    if (imageFile) return createUploadAtom(imageFile);
+    return undefined;
+  }, [imageFile]);
+
+  const pickFile = useFilePicker(setImageFile, false);
+
+  const handleRemoveUpload = useCallback(() => {
+    setImageFile(undefined);
+  }, []);
+
+  const myRoomAvatar = useCommands(mx, room)[Command.MyRoomAvatar];
+  const handleUploaded = useCallback(
+    (upload: UploadSuccess) => {
+      const { mxc } = upload;
+      myRoomAvatar.exe(mxc);
+      handleRemoveUpload();
+    },
+    [myRoomAvatar, handleRemoveUpload]
+  );
+
+  const handleRemoveAvatar = () => {
+    myRoomAvatar.exe('');
+    setAlertRemove(false);
+  };
+
   return (
     <SettingTile
-      title="Avatar"
-      description="This...is still a placeholder"
+      title="Room Avatar"
       after={
         <Avatar size="500" radii="300">
           <UserAvatar
@@ -67,7 +116,107 @@ export function CosmeticsAvatar({ profile, member, userId, room }: CosmeticsSett
           />
         </Avatar>
       }
-    />
+    >
+      {uploadAtom ? (
+        <Box gap="200" direction="Column">
+          <CompactUploadCardRenderer
+            uploadAtom={uploadAtom}
+            onRemove={handleRemoveUpload}
+            onComplete={handleUploaded}
+          />
+        </Box>
+      ) : (
+        <Box gap="200">
+          <Button
+            onClick={() => pickFile('image/*')}
+            size="300"
+            variant="Secondary"
+            fill="Soft"
+            outlined
+            radii="300"
+            disabled={disableSetAvatar}
+          >
+            <Text size="B300">Upload</Text>
+          </Button>
+          {avatarUrl &&
+            avatarUrl !==
+              mxcUrlToHttp(mx, profile.avatarUrl ?? '', useAuthentication, 96, 96, 'crop') && (
+              <Button
+                size="300"
+                variant="Critical"
+                fill="None"
+                radii="300"
+                disabled={disableSetAvatar}
+                onClick={() => setAlertRemove(true)}
+              >
+                <Text size="B300">Remove</Text>
+              </Button>
+            )}
+        </Box>
+      )}
+
+      {imageFileURL && (
+        <Overlay open={false} backdrop={<OverlayBackdrop />}>
+          <OverlayCenter>
+            <FocusTrap
+              focusTrapOptions={{
+                initialFocus: false,
+                onDeactivate: handleRemoveUpload,
+                clickOutsideDeactivates: true,
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              <Modal className={ModalWide} variant="Surface" size="500">
+                <ImageEditor
+                  name={imageFile?.name ?? 'Unnamed'}
+                  url={imageFileURL}
+                  requestClose={handleRemoveUpload}
+                />
+              </Modal>
+            </FocusTrap>
+          </OverlayCenter>
+        </Overlay>
+      )}
+
+      <Overlay open={alertRemove} backdrop={<OverlayBackdrop />}>
+        <OverlayCenter>
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: () => setAlertRemove(false),
+              clickOutsideDeactivates: true,
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Dialog variant="Surface">
+              <Header
+                style={{
+                  padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+                  borderBottomWidth: config.borderWidth.B300,
+                }}
+                variant="Surface"
+                size="500"
+              >
+                <Box grow="Yes">
+                  <Text size="H4">Remove Room Avatar</Text>
+                </Box>
+                <IconButton size="300" onClick={() => setAlertRemove(false)} radii="300">
+                  <Icon src={Icons.Cross} />
+                </IconButton>
+              </Header>
+              <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+                <Box direction="Column" gap="200">
+                  <Text priority="400">Are you sure you want to remove room avatar?</Text>
+                </Box>
+                <Button variant="Critical" onClick={handleRemoveAvatar}>
+                  <Text size="B400">Remove</Text>
+                </Button>
+              </Box>
+            </Dialog>
+          </FocusTrap>
+        </OverlayCenter>
+      </Overlay>
+    </SettingTile>
   );
 }