fix: restore avatar rendering and split presence dot into separate button

The previous version wrapped UserAvatar in a div inside SidebarAvatar,
which broke the folds Avatar CSS (expects AvatarImage/AvatarFallback as
direct child) — causing the white circle instead of the avatar.

New approach:
- SidebarAvatar has only UserAvatar as its direct child (restored)
- Clicking the avatar opens Settings directly (original behavior)
- PresencePicker renders a small absolutely-positioned button in the
  bottom-right corner of SidebarItem (which already has position:relative)
- Clicking the presence dot opens the status picker menu

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/pages/client/sidebar/SettingsTab.tsx

@@ -63,28 +63,15 @@ function presenceVariant(status: string): 'Success' | 'Warning' | 'Critical' | '
   return 'Secondary';
 }
 
-export function SettingsTab() {
+function PresencePicker() {
-  const mx = useMatrixClient();
-  const useAuthentication = useMediaAuthentication();
-  const userId = mx.getUserId()!;
-  const profile = useUserProfile(userId);
   const [presenceStatus, setPresenceStatus] = useSetting(settingsAtom, 'presenceStatus');
-
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
-  const [settingsOpen, setSettingsOpen] = useState(false);
-
-  const displayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
-  const avatarUrl = profile.avatarUrl
-    ? (mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined)
-    : undefined;
 
   const currentOption =
     PRESENCE_OPTIONS.find((o) => o.id === presenceStatus) ?? PRESENCE_OPTIONS[4];
-
   const closeMenu = () => setMenuAnchor(undefined);
 
   return (
-    <SidebarItem active={settingsOpen || !!menuAnchor}>
     <PopOut
       anchor={menuAnchor}
       position="Right"
@@ -124,54 +111,30 @@ export function SettingsTab() {
                   <Text size="T300">{option.label}</Text>
                 </MenuItem>
               ))}
-                <div
-                  style={{
-                    height: 1,
-                    background: 'var(--border-surface-variant)',
-                    margin: `${config.space.S100} 0`,
-                  }}
-                />
-                <MenuItem
-                  size="300"
-                  variant="Surface"
-                  radii="300"
-                  before={<Icon size="100" src={Icons.Setting} />}
-                  onClick={() => {
-                    closeMenu();
-                    setSettingsOpen(true);
-                  }}
-                >
-                  <Text size="T300">User Settings</Text>
-                </MenuItem>
             </Box>
           </Menu>
         </FocusTrap>
       }
     >
-        <SidebarItemTooltip tooltip={`${displayName} — ${currentOption.label}`}>
+      {/* Presence dot sits in the bottom-right corner of SidebarItem (which is position:relative) */}
-          {(triggerRef) => (
+      <button
-            <SidebarAvatar
+        type="button"
-              as="button"
+        aria-label={`Status: ${currentOption.label}. Click to change.`}
-              ref={triggerRef}
+        onClick={(e) => {
-              onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
+          e.stopPropagation();
-                setMenuAnchor(e.currentTarget.getBoundingClientRect())
+          setMenuAnchor(e.currentTarget.getBoundingClientRect());
-              }
+        }}
-            >
-              <div style={{ position: 'relative', display: 'inline-flex' }}>
-                <UserAvatar
-                  userId={userId}
-                  src={avatarUrl}
-                  renderFallback={() => <Text size="H4">{nameInitials(displayName)}</Text>}
-                />
-                <div
         style={{
           position: 'absolute',
-                    bottom: -1,
+          bottom: 2,
-                    right: -1,
+          right: 2,
           background: 'var(--bg-surface)',
+          border: 'none',
           borderRadius: '50%',
           padding: 2,
           lineHeight: 0,
+          cursor: 'pointer',
+          zIndex: 1,
         }}
       >
         <Badge
@@ -180,12 +143,40 @@ export function SettingsTab() {
           fill={presenceStatus === 'invisible' ? 'Soft' : 'Solid'}
           radii="Pill"
         />
-                </div>
+      </button>
-              </div>
+    </PopOut>
+  );
+}
+
+export function SettingsTab() {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const userId = mx.getUserId()!;
+  const profile = useUserProfile(userId);
+
+  const [settingsOpen, setSettingsOpen] = useState(false);
+
+  const displayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
+  const avatarUrl = profile.avatarUrl
+    ? (mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined)
+    : undefined;
+
+  return (
+    // SidebarItem already has position:relative in its CSS — the PresencePicker
+    // button is absolutely positioned inside it, below the avatar.
+    <SidebarItem active={settingsOpen}>
+      <SidebarItemTooltip tooltip="User Settings">
+        {(triggerRef) => (
+          <SidebarAvatar as="button" ref={triggerRef} onClick={() => setSettingsOpen(true)}>
+            <UserAvatar
+              userId={userId}
+              src={avatarUrl}
+              renderFallback={() => <Text size="H4">{nameInitials(displayName)}</Text>}
+            />
           </SidebarAvatar>
         )}
       </SidebarItemTooltip>
-      </PopOut>
+      <PresencePicker />
       {settingsOpen && (
         <Modal500 requestClose={() => setSettingsOpen(false)}>
           <Settings requestClose={() => setSettingsOpen(false)} />