From a3dd873d3669f421e9f90c291aa241075c449cd4 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sat, 30 May 2026 23:52:15 -0400
Subject: [PATCH] fix: restore avatar rendering and split presence dot into
 separate button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 209 +++++++++----------
 1 file changed, 100 insertions(+), 109 deletions(-)

diff --git a/src/app/pages/client/sidebar/SettingsTab.tsx b/src/app/pages/client/sidebar/SettingsTab.tsx
index 50050f205..30bc05e62 100644
--- a/src/app/pages/client/sidebar/SettingsTab.tsx
+++ b/src/app/pages/client/sidebar/SettingsTab.tsx
@@ -63,14 +63,97 @@ function presenceVariant(status: string): 'Success' | 'Warning' | 'Critical' | '
   return 'Secondary';
 }
 
+function PresencePicker() {
+  const [presenceStatus, setPresenceStatus] = useSetting(settingsAtom, 'presenceStatus');
+  const [menuAnchor, setMenuAnchor] = useState<RectCords>();
+
+  const currentOption =
+    PRESENCE_OPTIONS.find((o) => o.id === presenceStatus) ?? PRESENCE_OPTIONS[4];
+  const closeMenu = () => setMenuAnchor(undefined);
+
+  return (
+    <PopOut
+      anchor={menuAnchor}
+      position="Right"
+      align="End"
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: closeMenu,
+            clickOutsideDeactivates: true,
+          }}
+        >
+          <Menu variant="Surface" style={{ padding: config.space.S100, minWidth: toRem(210) }}>
+            <Box direction="Column" gap="100">
+              <Box style={{ padding: `${config.space.S100} ${config.space.S200}` }}>
+                <Text size="L400" style={{ opacity: 0.6 }}>
+                  Set Status
+                </Text>
+              </Box>
+              {PRESENCE_OPTIONS.map((option) => (
+                <MenuItem
+                  key={option.id}
+                  size="300"
+                  variant={option.id === presenceStatus ? 'Primary' : 'Surface'}
+                  radii="300"
+                  before={<PresenceDot option={option} />}
+                  after={
+                    option.id === presenceStatus ? (
+                      <Icon size="100" src={Icons.Check} />
+                    ) : undefined
+                  }
+                  onClick={() => {
+                    setPresenceStatus(option.id);
+                    closeMenu();
+                  }}
+                >
+                  <Text size="T300">{option.label}</Text>
+                </MenuItem>
+              ))}
+            </Box>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      {/* Presence dot sits in the bottom-right corner of SidebarItem (which is position:relative) */}
+      <button
+        type="button"
+        aria-label={`Status: ${currentOption.label}. Click to change.`}
+        onClick={(e) => {
+          e.stopPropagation();
+          setMenuAnchor(e.currentTarget.getBoundingClientRect());
+        }}
+        style={{
+          position: 'absolute',
+          bottom: 2,
+          right: 2,
+          background: 'var(--bg-surface)',
+          border: 'none',
+          borderRadius: '50%',
+          padding: 2,
+          lineHeight: 0,
+          cursor: 'pointer',
+          zIndex: 1,
+        }}
+      >
+        <Badge
+          size="200"
+          variant={presenceVariant(presenceStatus)}
+          fill={presenceStatus === 'invisible' ? 'Soft' : 'Solid'}
+          radii="Pill"
+        />
+      </button>
+    </PopOut>
+  );
+}
+
 export function SettingsTab() {
   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;
@@ -78,114 +161,22 @@ export function SettingsTab() {
     ? (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"
-        align="End"
-        content={
-          <FocusTrap
-            focusTrapOptions={{
-              initialFocus: false,
-              onDeactivate: closeMenu,
-              clickOutsideDeactivates: true,
-            }}
-          >
-            <Menu variant="Surface" style={{ padding: config.space.S100, minWidth: toRem(210) }}>
-              <Box direction="Column" gap="100">
-                <Box style={{ padding: `${config.space.S100} ${config.space.S200}` }}>
-                  <Text size="L400" style={{ opacity: 0.6 }}>
-                    Set Status
-                  </Text>
-                </Box>
-                {PRESENCE_OPTIONS.map((option) => (
-                  <MenuItem
-                    key={option.id}
-                    size="300"
-                    variant={option.id === presenceStatus ? 'Primary' : 'Surface'}
-                    radii="300"
-                    before={<PresenceDot option={option} />}
-                    after={
-                      option.id === presenceStatus ? (
-                        <Icon size="100" src={Icons.Check} />
-                      ) : undefined
-                    }
-                    onClick={() => {
-                      setPresenceStatus(option.id);
-                      closeMenu();
-                    }}
-                  >
-                    <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}`}>
-          {(triggerRef) => (
-            <SidebarAvatar
-              as="button"
-              ref={triggerRef}
-              onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
-                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,
-                    right: -1,
-                    background: 'var(--bg-surface)',
-                    borderRadius: '50%',
-                    padding: 2,
-                    lineHeight: 0,
-                  }}
-                >
-                  <Badge
-                    size="200"
-                    variant={presenceVariant(presenceStatus)}
-                    fill={presenceStatus === 'invisible' ? 'Soft' : 'Solid'}
-                    radii="Pill"
-                  />
-                </div>
-              </div>
-            </SidebarAvatar>
-          )}
-        </SidebarItemTooltip>
-      </PopOut>
+    // 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>
+      <PresencePicker />
       {settingsOpen && (
         <Modal500 requestClose={() => setSettingsOpen(false)}>
           <Settings requestClose={() => setSettingsOpen(false)} />