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,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)} />