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/components/VoiceMessageRecorder.tsx

@@ -228,7 +228,6 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
         >
           {waveformBars.map((h, i) => (
             <div
-              // eslint-disable-next-line react/no-array-index-key
               key={i}
               style={{
                 width: toRem(2),
@@ -276,7 +275,6 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
       }}
     >
       {previewUrl && (
-        // eslint-disable-next-line jsx-a11y/media-has-caption
         <audio src={previewUrl} controls style={{ height: toRem(28), maxWidth: toRem(180) }} />
       )}
       <Text size="T200" style={{ fontVariantNumeric: 'tabular-nums', flexShrink: 0 }}>

src/app/features/message-search/useMessageSearch.ts

@@ -92,7 +92,6 @@ export const useMessageSearch = (params: MessageSearchParams) => {
               after_limit: 0,
               include_profile: false,
             },
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             filter: {
               limit,
               rooms,
@@ -100,6 +99,7 @@ export const useMessageSearch = (params: MessageSearchParams) => {
               // from_ts / to_ts are valid Matrix spec fields not yet in SDK types
               ...(fromTs !== undefined && { from_ts: fromTs }),
               ...(toTs !== undefined && { to_ts: toTs }),
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
             } as any,
             include_state: false,
             order_by: order as SearchOrderBy.Recent,
@@ -114,7 +114,7 @@ export const useMessageSearch = (params: MessageSearchParams) => {
       });
       return parseSearchResult(r);
     },
-    [mx, term, order, rooms, senders],
+    [mx, term, order, rooms, senders, fromTs, toTs],
   );
 
   return searchMessages;

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}>
+    // SidebarItem already has position:relative in its CSS — the PresencePicker
-      <PopOut
+    // button is absolutely positioned inside it, below the avatar.
-        anchor={menuAnchor}
+    <SidebarItem active={settingsOpen}>
-        position="Right"
+      <SidebarItemTooltip tooltip="User Settings">
-        align="End"
+        {(triggerRef) => (
-        content={
+          <SidebarAvatar as="button" ref={triggerRef} onClick={() => setSettingsOpen(true)}>
-          <FocusTrap
+            <UserAvatar
-            focusTrapOptions={{
+              userId={userId}
-              initialFocus: false,
+              src={avatarUrl}
-              onDeactivate: closeMenu,
+              renderFallback={() => <Text size="H4">{nameInitials(displayName)}</Text>}
-              clickOutsideDeactivates: true,
+            />
-            }}
+          </SidebarAvatar>
-          >
+        )}
-            <Menu variant="Surface" style={{ padding: config.space.S100, minWidth: toRem(210) }}>
+      </SidebarItemTooltip>
-              <Box direction="Column" gap="100">
+      <PresencePicker />
-                <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>
       {settingsOpen && (
         <Modal500 requestClose={() => setSettingsOpen(false)}>
           <Settings requestClose={() => setSettingsOpen(false)} />