From ec5e9812aa3d9ef746b26ca7ce1fd9c5906b9098 Mon Sep 17 00:00:00 2001
From: Evie Gauthier <evie@gauthier.id>
Date: Mon, 16 Mar 2026 17:16:04 -0400
Subject: [PATCH 1/8] fix: quick issues batch 1 (#2 #44 #45 #52 #66 #67 #69 #79
 #35 #103 #120 #168)

---
 .changeset/quick-issues-batch-1.md            | 19 ++++++++
 index.html                                    |  3 +-
 public/manifest.json                          |  4 +-
 src/app/components/RenderMessageContent.tsx   |  4 +-
 src/app/components/editor/Editor.tsx          |  2 +
 .../autocomplete/BaseAutocompleteMenu.tsx     |  4 +-
 .../autocomplete/EmoticonAutocomplete.tsx     |  2 +
 .../autocomplete/RoomMentionAutocomplete.tsx  |  2 +
 .../autocomplete/UserMentionAutocomplete.tsx  |  2 +
 src/app/components/media/Video.tsx            | 30 +++++++++++-
 src/app/features/room/RoomInput.tsx           |  7 +++
 .../notifications/SystemNotification.tsx      | 22 +++++++++
 src/app/hooks/useClientConfig.ts              |  2 +
 src/app/pages/App.tsx                         | 24 ++++++----
 src/app/pages/auth/AuthLayout.tsx             | 18 +++++--
 src/app/pages/auth/ServerPicker.tsx           | 25 +++++++++-
 src/app/pages/client/ClientNonUIFeatures.tsx  |  9 ++--
 .../client/sidebar/AccountSwitcherTab.tsx     | 48 ++++++++++++++++++-
 src/app/plugins/matrix-to.ts                  | 10 +++-
 .../voice-recorder-kit/supportedCodec.ts      |  1 -
 src/app/state/settings.ts                     |  2 +
 src/app/utils/sanitize.test.ts                |  1 -
 src/index.css                                 |  1 +
 23 files changed, 212 insertions(+), 30 deletions(-)
 create mode 100644 .changeset/quick-issues-batch-1.md

diff --git a/.changeset/quick-issues-batch-1.md b/.changeset/quick-issues-batch-1.md
new file mode 100644
index 000000000..783ae7843
--- /dev/null
+++ b/.changeset/quick-issues-batch-1.md
@@ -0,0 +1,19 @@
+---
+default: patch
+---
+
+Fix several small UI/UX issues:
+
+- **#2**: Reduced-motion: add `animation-iteration-count: 1` so spinners stop after one cycle instead of running indefinitely at near-zero speed
+- **#44**: Account switcher: show a confirmation dialog before signing out of an account
+- **#45**: Server picker: prevent iOS from restoring the old server name while the user is actively editing the input
+- **#52**: Message editor: add `autoCapitalize="sentences"` to respect the OS/keyboard setting on mobile
+- **#66**: Adding account: show a "Cancel" button next to the "Adding account" label so users can abort the flow
+- **#67**: Support `matrixToBaseUrl` in `config.json` to override the default matrix.to link base
+- **#79/#35**: Autocomplete: pressing Enter now selects the top item instead of sending the message
+- **#69**: Autocomplete: focus returns to the message editor after completing a mention or emoji
+- **#103**: Browser tab/PWA theme-color: use the correct light (`#ffffff`) and dark (`#1b1a21`) colours via media-query meta tags
+- **#120**: Video messages: volume is persisted across page loads via `localStorage`
+- **#168**: Notifications: add "Favicon Dot: Mentions Only" setting — when enabled, the favicon only changes for mentions/keywords, not plain unreads
+
+Closes #2, #44, #45, #52, #66, #67, #79, #35, #69, #103, #120, #168
diff --git a/index.html b/index.html
index 21c34e6d1..62ce1dabb 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,8 @@
       property="og:description"
       content="A Matrix client where you can enjoy the conversation using (not) simple, elegant and secure interface protected by e2ee with the power of open source. And colorful cosmetics. Because yes."
     />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1a21" />
 
     <link id="favicon" rel="shortcut icon" href="./public/favicon.png" />
 
diff --git a/public/manifest.json b/public/manifest.json
index 67deb47a2..696b875ee 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -7,8 +7,8 @@
   "display": "standalone",
   "orientation": "portrait",
   "start_url": "./",
-  "background_color": "#fff",
-  "theme_color": "#fff",
+  "background_color": "#1b1a21",
+  "theme_color": "#1b1a21",
   "icons": [
     {
       "src": "./public/android/android-chrome-36x36.png",
diff --git a/src/app/components/RenderMessageContent.tsx b/src/app/components/RenderMessageContent.tsx
index f235b7586..b892f7691 100644
--- a/src/app/components/RenderMessageContent.tsx
+++ b/src/app/components/RenderMessageContent.tsx
@@ -28,7 +28,7 @@ import {
   VideoContent,
 } from './message';
 import { UrlPreviewCard, UrlPreviewHolder } from './url-preview';
-import { Image, MediaControl, Video } from './media';
+import { Image, MediaControl, PersistedVolumeVideo } from './media';
 import { ImageViewer } from './image-viewer';
 import { PdfViewer } from './Pdf-viewer';
 import { TextViewer } from './text-viewer';
@@ -323,7 +323,7 @@ function RenderMessageContentInternal({
                       )
                     : undefined
                 }
-                renderVideo={(p) => <Video {...p} />}
+                renderVideo={(p) => <PersistedVolumeVideo {...p} />}
               />
             )}
             outlined={outlineAttachment}
diff --git a/src/app/components/editor/Editor.tsx b/src/app/components/editor/Editor.tsx
index 92ef1cb12..27df4cf6c 100644
--- a/src/app/components/editor/Editor.tsx
+++ b/src/app/components/editor/Editor.tsx
@@ -160,6 +160,8 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
                 onKeyDown={handleKeydown}
                 onKeyUp={onKeyUp}
                 onPaste={onPaste}
+                // Defer to OS capitalization setting (respects iOS sentence-case toggle).
+                autoCapitalize="sentences"
                 // keeps focus after pressing send.
                 onBlur={() => {
                   if (mobileOrTablet()) ReactEditor.focus(editor);
diff --git a/src/app/components/editor/autocomplete/BaseAutocompleteMenu.tsx b/src/app/components/editor/autocomplete/BaseAutocompleteMenu.tsx
index 3f350a88a..9f1bf316f 100644
--- a/src/app/components/editor/autocomplete/BaseAutocompleteMenu.tsx
+++ b/src/app/components/editor/autocomplete/BaseAutocompleteMenu.tsx
@@ -7,7 +7,9 @@ type BaseAutocompleteMenuProps = {
 export function BaseAutocompleteMenu({ children }: BaseAutocompleteMenuProps) {
   return (
     <div className={css.AutocompleteMenuBase}>
-      <div className={css.AutocompleteMenuContainer}>{children}</div>
+      <div className={css.AutocompleteMenuContainer} data-autocomplete-menu="true">
+        {children}
+      </div>
     </div>
   );
 }
diff --git a/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx b/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx
index c8466ae98..4eb4d7ba1 100644
--- a/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx
+++ b/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx
@@ -1,5 +1,6 @@
 import { KeyboardEvent as ReactKeyboardEvent, useEffect, useMemo } from 'react';
 import { Editor } from 'slate';
+import { ReactEditor } from 'slate-react';
 import { Box, MenuItem, Text, toRem } from 'folds';
 import { Room } from '$types/matrix-sdk';
 
@@ -91,6 +92,7 @@ export function EmoticonAutocomplete({
       const emoticonEl = createEmoticonElement(key, shortcode);
       replaceWithElement(editor, query.range, emoticonEl);
       moveCursor(editor, true);
+      ReactEditor.focus(editor);
       requestClose();
     });
 
diff --git a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
index e02467122..ff690edce 100644
--- a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
+++ b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
@@ -1,5 +1,6 @@
 import { KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect } from 'react';
 import { Editor } from 'slate';
+import { ReactEditor } from 'slate-react';
 import { Avatar, Icon, Icons, MenuItem, Text } from 'folds';
 import { JoinRule, MatrixClient } from '$types/matrix-sdk';
 import { useAtomValue } from 'jotai';
@@ -115,6 +116,7 @@ export function RoomMentionAutocomplete({
     );
     replaceWithElement(editor, query.range, mentionEl);
     moveCursor(editor, true);
+    ReactEditor.focus(editor);
     requestClose();
   };
 
diff --git a/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx b/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx
index 919b5c879..e47fe9d07 100644
--- a/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx
+++ b/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx
@@ -1,5 +1,6 @@
 import { useEffect, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { Editor } from 'slate';
+import { ReactEditor } from 'slate-react';
 import { Avatar, Icon, Icons, MenuItem, Text } from 'folds';
 import { MatrixClient, Room, RoomMember } from '$types/matrix-sdk';
 
@@ -113,6 +114,7 @@ export function UserMentionAutocomplete({
     );
     replaceWithElement(editor, query.range, mentionEl);
     moveCursor(editor, true);
+    ReactEditor.focus(editor);
     requestClose();
   };
 
diff --git a/src/app/components/media/Video.tsx b/src/app/components/media/Video.tsx
index 307dc9e64..a2a371df9 100644
--- a/src/app/components/media/Video.tsx
+++ b/src/app/components/media/Video.tsx
@@ -1,4 +1,4 @@
-import { VideoHTMLAttributes, forwardRef } from 'react';
+import { VideoHTMLAttributes, forwardRef, useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import * as css from './media.css';
 
@@ -8,3 +8,31 @@ export const Video = forwardRef<HTMLVideoElement, VideoHTMLAttributes<HTMLVideoE
     <video className={classNames(css.Video, className)} {...props} ref={ref} />
   )
 );
+
+const VIDEO_VOLUME_KEY = 'videoVolume';
+
+export function PersistedVolumeVideo({
+  onVolumeChange,
+  ...props
+}: VideoHTMLAttributes<HTMLVideoElement>) {
+  const innerRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    const stored = localStorage.getItem(VIDEO_VOLUME_KEY);
+    if (innerRef.current && stored !== null) {
+      const parsed = parseFloat(stored);
+      if (!Number.isNaN(parsed)) innerRef.current.volume = parsed;
+    }
+  }, []);
+
+  return (
+    <Video
+      {...props}
+      ref={innerRef}
+      onVolumeChange={(e) => {
+        localStorage.setItem(VIDEO_VOLUME_KEY, String((e.target as HTMLVideoElement).volume));
+        onVolumeChange?.(e);
+      }}
+    />
+  );
+}
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index 65e54ab9f..c55f0e321 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -747,6 +747,13 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           !isComposing(evt)
         ) {
           evt.preventDefault();
+          if (autocompleteQuery) {
+            const firstItem = document.querySelector<HTMLButtonElement>(
+              '[data-autocomplete-menu] button'
+            );
+            firstItem?.click();
+            return;
+          }
           submit().catch((error) => {
             log.error('submit failed', { roomId }, error);
           });
diff --git a/src/app/features/settings/notifications/SystemNotification.tsx b/src/app/features/settings/notifications/SystemNotification.tsx
index 87ab5fc09..47266460e 100644
--- a/src/app/features/settings/notifications/SystemNotification.tsx
+++ b/src/app/features/settings/notifications/SystemNotification.tsx
@@ -189,6 +189,10 @@ export function SystemNotification() {
   const [showUnreadCounts, setShowUnreadCounts] = useSetting(settingsAtom, 'showUnreadCounts');
   const [badgeCountDMsOnly, setBadgeCountDMsOnly] = useSetting(settingsAtom, 'badgeCountDMsOnly');
   const [showPingCounts, setShowPingCounts] = useSetting(settingsAtom, 'showPingCounts');
+  const [faviconForMentionsOnly, setFaviconForMentionsOnly] = useSetting(
+    settingsAtom,
+    'faviconForMentionsOnly'
+  );
 
   // Describe what the current badge combo actually does so users aren't left guessing.
   const badgeBehaviourSummary = (): string => {
@@ -338,6 +342,24 @@ export function SystemNotification() {
       <Text size="T300" style={{ opacity: 0.7 }}>
         {badgeBehaviourSummary()}
       </Text>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="400"
+      >
+        <SettingTile
+          title="Favicon Dot: Mentions Only"
+          description="Only change the browser tab favicon when you have mentions or keywords. Unreads without mentions won't affect the favicon."
+          after={
+            <Switch
+              variant="Primary"
+              value={faviconForMentionsOnly}
+              onChange={setFaviconForMentionsOnly}
+            />
+          }
+        />
+      </SequenceCard>
       <SequenceCard
         className={SequenceCardStyle}
         variant="SurfaceVariant"
diff --git a/src/app/hooks/useClientConfig.ts b/src/app/hooks/useClientConfig.ts
index 4d6cec62a..87685337d 100644
--- a/src/app/hooks/useClientConfig.ts
+++ b/src/app/hooks/useClientConfig.ts
@@ -40,6 +40,8 @@ export type ClientConfig = {
   };
 
   hashRouter?: HashRouterConfig;
+
+  matrixToBaseUrl?: string;
 };
 
 const ClientConfigContext = createContext<ClientConfig | null>(null);
diff --git a/src/app/pages/App.tsx b/src/app/pages/App.tsx
index 0408f38ea..bf5ee6395 100644
--- a/src/app/pages/App.tsx
+++ b/src/app/pages/App.tsx
@@ -7,6 +7,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 
 import { ClientConfigLoader } from '$components/ClientConfigLoader';
 import { ClientConfigProvider } from '$hooks/useClientConfig';
+import { setMatrixToBase } from '$plugins/matrix-to';
 import { ScreenSizeProvider, useScreenSize } from '$hooks/useScreenSize';
 import { useCompositionEndTracking } from '$hooks/useComposingCheck';
 import { ErrorPage } from '$components/DefaultErrorPage';
@@ -35,16 +36,19 @@ function App() {
                     <ConfigConfigError error={err} retry={retry} ignore={ignore} />
                   )}
                 >
-                  {(clientConfig) => (
-                    <ClientConfigProvider value={clientConfig}>
-                      <QueryClientProvider client={queryClient}>
-                        <JotaiProvider>
-                          <RouterProvider router={createRouter(clientConfig, screenSize)} />
-                        </JotaiProvider>
-                        <ReactQueryDevtools initialIsOpen={false} />
-                      </QueryClientProvider>
-                    </ClientConfigProvider>
-                  )}
+                  {(clientConfig) => {
+                    setMatrixToBase(clientConfig.matrixToBaseUrl);
+                    return (
+                      <ClientConfigProvider value={clientConfig}>
+                        <QueryClientProvider client={queryClient}>
+                          <JotaiProvider>
+                            <RouterProvider router={createRouter(clientConfig, screenSize)} />
+                          </JotaiProvider>
+                          <ReactQueryDevtools initialIsOpen={false} />
+                        </QueryClientProvider>
+                      </ClientConfigProvider>
+                    );
+                  }}
                 </ClientConfigLoader>
               </FeatureCheck>
             </ScreenSizeProvider>
diff --git a/src/app/pages/auth/AuthLayout.tsx b/src/app/pages/auth/AuthLayout.tsx
index edc913a68..256497c24 100644
--- a/src/app/pages/auth/AuthLayout.tsx
+++ b/src/app/pages/auth/AuthLayout.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { Box, Header, Scroll, Spinner, Text, color } from 'folds';
+import { Box, Chip, Header, Scroll, Spinner, Text, color } from 'folds';
 import {
   Outlet,
   generatePath,
@@ -22,6 +22,7 @@ import { AuthFlowsLoader } from '$components/AuthFlowsLoader';
 import { AuthFlowsProvider } from '$hooks/useAuthFlows';
 import { AuthServerProvider } from '$hooks/useAuthServer';
 import { LOGIN_PATH, REGISTER_PATH, RESET_PASSWORD_PATH } from '$pages/paths';
+import { getHomePath } from '$pages/pathUtils';
 import { AutoDiscoveryAction, autoDiscovery } from '../../cs-api';
 import { ServerPicker } from './ServerPicker';
 import * as css from './styles.css';
@@ -139,9 +140,18 @@ export function AuthLayout() {
               <Text size="H3">Sable</Text>
             </Box>
             {isAddingAccount && (
-              <Text size="T200" priority="300" style={{ marginLeft: 'auto', marginRight: 4 }}>
-                Adding account
-              </Text>
+              <Box gap="200" alignItems="Center" style={{ marginLeft: 'auto' }}>
+                <Text size="T200" priority="300">
+                  Adding account
+                </Text>
+                <Chip
+                  variant="Surface"
+                  radii="300"
+                  onClick={() => window.location.assign(getHomePath())}
+                >
+                  <Text size="T200">Cancel</Text>
+                </Chip>
+              </Box>
             )}
           </Header>
           <Box className={css.AuthCardContent} direction="Column">
diff --git a/src/app/pages/auth/ServerPicker.tsx b/src/app/pages/auth/ServerPicker.tsx
index 12dfa1757..e8a4984b2 100644
--- a/src/app/pages/auth/ServerPicker.tsx
+++ b/src/app/pages/auth/ServerPicker.tsx
@@ -1,5 +1,6 @@
 import {
   ChangeEventHandler,
+  FocusEventHandler,
   KeyboardEventHandler,
   MouseEventHandler,
   useEffect,
@@ -37,10 +38,16 @@ export function ServerPicker({
 }) {
   const [serverMenuAnchor, setServerMenuAnchor] = useState<RectCords>();
   const serverInputRef = useRef<HTMLInputElement>(null);
+  const inputFocusedRef = useRef(false);
 
   useEffect(() => {
-    // sync input with it outside server changes
-    if (serverInputRef.current && serverInputRef.current.value !== server) {
+    // sync input with outside server changes, but only when not focused
+    // (on iOS, syncing while focused causes the deleted text to reappear)
+    if (
+      !inputFocusedRef.current &&
+      serverInputRef.current &&
+      serverInputRef.current.value !== server
+    ) {
       serverInputRef.current.value = server;
     }
   }, [server]);
@@ -52,6 +59,18 @@ export function ServerPicker({
     if (inputServer) debounceServerSelect(inputServer);
   };
 
+  const handleInputFocus: FocusEventHandler<HTMLInputElement> = () => {
+    inputFocusedRef.current = true;
+  };
+
+  const handleInputBlur: FocusEventHandler<HTMLInputElement> = () => {
+    inputFocusedRef.current = false;
+    // restore the server value if the input was cleared without selecting a new one
+    if (serverInputRef.current && serverInputRef.current.value.trim() === '') {
+      serverInputRef.current.value = server;
+    }
+  };
+
   const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
     if (evt.key === 'ArrowDown') {
       evt.preventDefault();
@@ -86,6 +105,8 @@ export function ServerPicker({
       defaultValue={server}
       onChange={handleServerChange}
       onKeyDown={handleKeyDown}
+      onFocus={handleInputFocus}
+      onBlur={handleInputBlur}
       size="500"
       readOnly={!allowCustomServer}
       onClick={allowCustomServer ? undefined : handleOpenServerMenu}
diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx
index 541545da4..fc8c7a013 100644
--- a/src/app/pages/client/ClientNonUIFeatures.tsx
+++ b/src/app/pages/client/ClientNonUIFeatures.tsx
@@ -95,6 +95,7 @@ function PageZoomFeature() {
 function FaviconUpdater() {
   const roomToUnread = useAtomValue(roomToUnreadAtom);
   const [usePushNotifications] = useSetting(settingsAtom, 'usePushNotifications');
+  const [faviconForMentionsOnly] = useSetting(settingsAtom, 'faviconForMentionsOnly');
   const registration = useAtomValue(registrationAtom);
 
   useEffect(() => {
@@ -115,8 +116,10 @@ function FaviconUpdater() {
       }
     });
 
-    if (notification) {
-      setFavicon(highlight ? LogoHighlightSVG : LogoUnreadSVG);
+    if (highlight) {
+      setFavicon(LogoHighlightSVG);
+    } else if (!faviconForMentionsOnly && notification) {
+      setFavicon(LogoUnreadSVG);
     } else {
       setFavicon(LogoSVG);
     }
@@ -149,7 +152,7 @@ function FaviconUpdater() {
     } catch {
       // Likely Firefox/Gecko-based and doesn't support badging API
     }
-  }, [roomToUnread, usePushNotifications, registration]);
+  }, [roomToUnread, usePushNotifications, registration, faviconForMentionsOnly]);
 
   return null;
 }
diff --git a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx
index 39438b114..75a7d099b 100644
--- a/src/app/pages/client/sidebar/AccountSwitcherTab.tsx
+++ b/src/app/pages/client/sidebar/AccountSwitcherTab.tsx
@@ -1,6 +1,9 @@
 import { MouseEvent, MouseEventHandler, useCallback, useState } from 'react';
 import {
   Box,
+  Button,
+  Dialog,
+  Header,
   Icon,
   Icons,
   Menu,
@@ -162,6 +165,9 @@ export function AccountSwitcherTab() {
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const [busyUserIds, setBusyUserIds] = useState<Set<string>>(new Set());
   const [settingsOpen, setSettingsOpen] = useState(false);
+  const [confirmSignOutSession, setConfirmSignOutSession] = useState<Session | undefined>(
+    undefined
+  );
 
   const activeSession = sessions.find((s) => s.userId === activeSessionId) ?? sessions[0];
 
@@ -333,7 +339,10 @@ export function AccountSwitcherTab() {
                       isBusy={busyUserIds.has(session.userId)}
                       unread={!isActive ? backgroundUnreads[session.userId] : undefined}
                       onSwitch={handleSwitch}
-                      onSignOut={handleSignOut}
+                      onSignOut={(pendingSession) => {
+                        setMenuAnchor(undefined);
+                        setConfirmSignOutSession(pendingSession);
+                      }}
                     />
                   );
                 })}
@@ -365,6 +374,43 @@ export function AccountSwitcherTab() {
           <Settings requestClose={() => setSettingsOpen(false)} />
         </Modal500>
       )}
+      {confirmSignOutSession && (
+        <Modal500 requestClose={() => setConfirmSignOutSession(undefined)}>
+          <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">Sign out</Text>
+              </Box>
+            </Header>
+            <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+              <Text priority="400">
+                Are you sure you want to sign out of <b>{confirmSignOutSession.userId}</b>?
+              </Text>
+              <Box direction="Column" gap="200">
+                <Button
+                  variant="Critical"
+                  onClick={() => {
+                    handleSignOut(confirmSignOutSession);
+                    setConfirmSignOutSession(undefined);
+                  }}
+                >
+                  <Text size="B400">Sign out</Text>
+                </Button>
+                <Button variant="Secondary" onClick={() => setConfirmSignOutSession(undefined)}>
+                  <Text size="B400">Cancel</Text>
+                </Button>
+              </Box>
+            </Box>
+          </Dialog>
+        </Modal500>
+      )}
     </SidebarItem>
   );
 }
diff --git a/src/app/plugins/matrix-to.ts b/src/app/plugins/matrix-to.ts
index 03a7d2c17..35afe11d7 100644
--- a/src/app/plugins/matrix-to.ts
+++ b/src/app/plugins/matrix-to.ts
@@ -1,4 +1,12 @@
-const MATRIX_TO_BASE = 'https://matrix.to';
+let MATRIX_TO_BASE = 'https://matrix.to';
+
+/**
+ * Override the default matrix.to base URL (configurable per deployment).
+ * Must be called before any getMatrixTo* functions are used.
+ */
+export const setMatrixToBase = (baseUrl?: string): void => {
+  if (baseUrl) MATRIX_TO_BASE = baseUrl.replace(/\/$/, '');
+};
 
 export const getMatrixToUser = (userId: string): string => `${MATRIX_TO_BASE}/#/${userId}`;
 
diff --git a/src/app/plugins/voice-recorder-kit/supportedCodec.ts b/src/app/plugins/voice-recorder-kit/supportedCodec.ts
index 99481bde8..445147cda 100644
--- a/src/app/plugins/voice-recorder-kit/supportedCodec.ts
+++ b/src/app/plugins/voice-recorder-kit/supportedCodec.ts
@@ -46,7 +46,6 @@ export function getSupportedAudioCodec(): string | null {
   const userAgent = globalThis.navigator?.userAgent ?? '';
   const isIOS =
     /iPad|iPhone|iPod/.test(userAgent) ||
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
     (globalThis.navigator?.platform === 'MacIntel' && globalThis.navigator?.maxTouchPoints > 1);
   const isSafari = /^((?!chrome|android|crios|fxios|edgios).)*safari/i.test(userAgent) || isIOS;
 
diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts
index 350f8e128..c7de24591 100644
--- a/src/app/state/settings.ts
+++ b/src/app/state/settings.ts
@@ -97,6 +97,7 @@ export interface Settings {
   autoplayEmojis: boolean;
   saveStickerEmojiBandwidth: boolean;
   alwaysShowCallButton: boolean;
+  faviconForMentionsOnly: boolean;
 
   // furry stuff
   renderAnimals: boolean;
@@ -178,6 +179,7 @@ const defaultSettings: Settings = {
   autoplayEmojis: true,
   saveStickerEmojiBandwidth: false,
   alwaysShowCallButton: false,
+  faviconForMentionsOnly: false,
 
   // furry stuff
   renderAnimals: true,
diff --git a/src/app/utils/sanitize.test.ts b/src/app/utils/sanitize.test.ts
index f957b56ec..52c668e6b 100644
--- a/src/app/utils/sanitize.test.ts
+++ b/src/app/utils/sanitize.test.ts
@@ -37,7 +37,6 @@ describe('sanitizeCustomHtml – XSS prevention', () => {
   });
 
   it('strips javascript: href on anchor tags', () => {
-    // eslint-disable-next-line no-script-url
     const result = sanitizeCustomHtml('<a href="javascript:alert(\'xss\')">link</a>');
     expect(result).not.toMatch(/javascript:/);
   });
diff --git a/src/index.css b/src/index.css
index 453dc7f00..1c32c9170 100755
--- a/src/index.css
+++ b/src/index.css
@@ -187,6 +187,7 @@ pre {
 
 body.reduced-motion * {
   animation-duration: 0.001ms !important;
+  animation-iteration-count: 1 !important;
   transition-duration: 0.001ms !important;
 }
 

From e252a1242bc4dad4bff01e1c599b23ce0186ebf8 Mon Sep 17 00:00:00 2001
From: Evie Gauthier <evie@gauthier.id>
Date: Mon, 16 Mar 2026 17:29:49 -0400
Subject: [PATCH 2/8] fix: highlight first autocomplete item to indicate Enter
 selection

---
 .../editor/autocomplete/AutocompleteMenu.css.tsx          | 8 +++++++-
 .../components/editor/autocomplete/AutocompleteMenu.tsx   | 4 +++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/components/editor/autocomplete/AutocompleteMenu.css.tsx b/src/app/components/editor/autocomplete/AutocompleteMenu.css.tsx
index a160b6001..96a7dc16b 100644
--- a/src/app/components/editor/autocomplete/AutocompleteMenu.css.tsx
+++ b/src/app/components/editor/autocomplete/AutocompleteMenu.css.tsx
@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 import { DefaultReset, color, config } from 'folds';
 
 export const AutocompleteMenuBase = style([
@@ -38,3 +38,9 @@ export const AutocompleteNotice = style([
   AutocompleteMenuHeader,
   { color: color.SurfaceVariant.OnContainer },
 ]);
+
+export const AutocompleteMenuItems = style({});
+
+globalStyle(`${AutocompleteMenuItems} button:first-child`, {
+  backgroundColor: color.SurfaceVariant.ContainerHover,
+});
diff --git a/src/app/components/editor/autocomplete/AutocompleteMenu.tsx b/src/app/components/editor/autocomplete/AutocompleteMenu.tsx
index cda3b5e16..545437924 100644
--- a/src/app/components/editor/autocomplete/AutocompleteMenu.tsx
+++ b/src/app/components/editor/autocomplete/AutocompleteMenu.tsx
@@ -42,7 +42,9 @@ export function AutocompleteMenu({ headerContent, requestClose, children }: Auto
             {headerContent}
           </Header>
           <Scroll style={{ flexGrow: 1 }} onKeyDown={preventScrollWithArrowKey}>
-            <div style={{ padding: config.space.S200 }}>{children}</div>
+            <div className={css.AutocompleteMenuItems} style={{ padding: config.space.S200 }}>
+              {children}
+            </div>
           </Scroll>
         </Menu>
       </FocusTrap>

From c7063690f00049a67ea8e01a9aa9f99b6196363a Mon Sep 17 00:00:00 2001
From: Evie Gauthier <evie@gauthier.id>
Date: Mon, 16 Mar 2026 19:52:20 -0400
Subject: [PATCH 3/8] fix: focus first autocomplete item on menu open

---
 .../editor/autocomplete/AutocompleteMenu.css.tsx           | 6 +-----
 .../components/editor/autocomplete/AutocompleteMenu.tsx    | 7 ++++---
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/app/components/editor/autocomplete/AutocompleteMenu.css.tsx b/src/app/components/editor/autocomplete/AutocompleteMenu.css.tsx
index 96a7dc16b..149f10108 100644
--- a/src/app/components/editor/autocomplete/AutocompleteMenu.css.tsx
+++ b/src/app/components/editor/autocomplete/AutocompleteMenu.css.tsx
@@ -1,4 +1,4 @@
-import { globalStyle, style } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
 import { DefaultReset, color, config } from 'folds';
 
 export const AutocompleteMenuBase = style([
@@ -39,8 +39,4 @@ export const AutocompleteNotice = style([
   { color: color.SurfaceVariant.OnContainer },
 ]);
 
-export const AutocompleteMenuItems = style({});
 
-globalStyle(`${AutocompleteMenuItems} button:first-child`, {
-  backgroundColor: color.SurfaceVariant.ContainerHover,
-});
diff --git a/src/app/components/editor/autocomplete/AutocompleteMenu.tsx b/src/app/components/editor/autocomplete/AutocompleteMenu.tsx
index 545437924..73e36f6e0 100644
--- a/src/app/components/editor/autocomplete/AutocompleteMenu.tsx
+++ b/src/app/components/editor/autocomplete/AutocompleteMenu.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, useRef } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { isKeyHotkey } from 'is-hotkey';
 import { Header, Menu, Scroll, config } from 'folds';
@@ -15,6 +15,7 @@ type AutocompleteMenuProps = {
 };
 export function AutocompleteMenu({ headerContent, requestClose, children }: AutocompleteMenuProps) {
   const alive = useAlive();
+  const itemsRef = useRef<HTMLDivElement>(null);
 
   const handleDeactivate = () => {
     if (alive()) {
@@ -27,7 +28,7 @@ export function AutocompleteMenu({ headerContent, requestClose, children }: Auto
     <BaseAutocompleteMenu>
       <FocusTrap
         focusTrapOptions={{
-          initialFocus: false,
+          initialFocus: () => itemsRef.current?.querySelector<HTMLButtonElement>('button') ?? false,
           onPostDeactivate: handleDeactivate,
           returnFocusOnDeactivate: false,
           clickOutsideDeactivates: true,
@@ -42,7 +43,7 @@ export function AutocompleteMenu({ headerContent, requestClose, children }: Auto
             {headerContent}
           </Header>
           <Scroll style={{ flexGrow: 1 }} onKeyDown={preventScrollWithArrowKey}>
-            <div className={css.AutocompleteMenuItems} style={{ padding: config.space.S200 }}>
+            <div ref={itemsRef} style={{ padding: config.space.S200 }}>
               {children}
             </div>
           </Scroll>

From b6db65c33b8aa70fd9e14b04014f56c268b7eb0c Mon Sep 17 00:00:00 2001
From: Evie Gauthier <evie@gauthier.id>
Date: Mon, 16 Mar 2026 20:14:46 -0400
Subject: [PATCH 4/8] =?UTF-8?q?fix:=20virtual=20autocomplete=20selection?=
 =?UTF-8?q?=20=E2=80=94=20typing=20preserved,=20arrow=20keys=20navigate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../autocomplete/AutocompleteMenu.css.tsx     | 10 +++-
 .../editor/autocomplete/AutocompleteMenu.tsx  | 50 ++++++++++++++++---
 src/app/features/room/RoomInput.tsx           | 23 +++++++--
 3 files changed, 72 insertions(+), 11 deletions(-)

diff --git a/src/app/components/editor/autocomplete/AutocompleteMenu.css.tsx b/src/app/components/editor/autocomplete/AutocompleteMenu.css.tsx
index 149f10108..821fd65dd 100644
--- a/src/app/components/editor/autocomplete/AutocompleteMenu.css.tsx
+++ b/src/app/components/editor/autocomplete/AutocompleteMenu.css.tsx
@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 import { DefaultReset, color, config } from 'folds';
 
 export const AutocompleteMenuBase = style([
@@ -39,4 +39,12 @@ export const AutocompleteNotice = style([
   { color: color.SurfaceVariant.OnContainer },
 ]);
 
+export const AutocompleteMenuItems = style({});
+
+globalStyle(`${AutocompleteMenuItems} button[data-selected]`, {
+  backgroundColor: color.SurfaceVariant.ContainerHover,
+  outline: `2px solid ${color.Primary.Main}`,
+  outlineOffset: -2,
+});
+
 
diff --git a/src/app/components/editor/autocomplete/AutocompleteMenu.tsx b/src/app/components/editor/autocomplete/AutocompleteMenu.tsx
index 73e36f6e0..ef30e4971 100644
--- a/src/app/components/editor/autocomplete/AutocompleteMenu.tsx
+++ b/src/app/components/editor/autocomplete/AutocompleteMenu.tsx
@@ -1,6 +1,5 @@
-import { ReactNode, useRef } from 'react';
+import { ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
-import { isKeyHotkey } from 'is-hotkey';
 import { Header, Menu, Scroll, config } from 'folds';
 
 import { preventScrollWithArrowKey, stopPropagation } from '$utils/keyboard';
@@ -8,6 +7,9 @@ import { useAlive } from '$hooks/useAlive';
 import * as css from './AutocompleteMenu.css';
 import { BaseAutocompleteMenu } from './BaseAutocompleteMenu';
 
+export const AUTOCOMPLETE_NAVIGATE_EVENT = 'autocomplete-navigate';
+export type AutocompleteNavigateDetail = { direction: 1 | -1 };
+
 type AutocompleteMenuProps = {
   requestClose: () => void;
   headerContent: ReactNode;
@@ -16,6 +18,8 @@ type AutocompleteMenuProps = {
 export function AutocompleteMenu({ headerContent, requestClose, children }: AutocompleteMenuProps) {
   const alive = useAlive();
   const itemsRef = useRef<HTMLDivElement>(null);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const prevButtonCountRef = useRef(-1);
 
   const handleDeactivate = () => {
     if (alive()) {
@@ -24,17 +28,51 @@ export function AutocompleteMenu({ headerContent, requestClose, children }: Auto
     }
   };
 
+  // Sync data-selected to DOM; reset to index 0 when the item list changes
+  useLayoutEffect(() => {
+    const buttons = Array.from(
+      itemsRef.current?.querySelectorAll<HTMLButtonElement>('button') ?? []
+    );
+    const count = buttons.length;
+
+    let idx = selectedIndex;
+    if (count !== prevButtonCountRef.current) {
+      prevButtonCountRef.current = count;
+      idx = 0;
+      if (selectedIndex !== 0) setSelectedIndex(0);
+    }
+
+    const safeIdx = Math.max(0, Math.min(idx, count - 1));
+    buttons.forEach((btn, i) => {
+      if (i === safeIdx) btn.dataset.selected = 'true';
+      else delete btn.dataset.selected;
+    });
+  });
+
+  // Listen for navigation events dispatched by the editor key handler
+  useEffect(() => {
+    const container = itemsRef.current?.closest('[data-autocomplete-menu]');
+    if (!container) return;
+    const handler = (e: Event) => {
+      const { direction } = (e as CustomEvent<AutocompleteNavigateDetail>).detail;
+      setSelectedIndex((prev) => {
+        const buttons = itemsRef.current?.querySelectorAll('button') ?? [];
+        return Math.max(0, Math.min(prev + direction, buttons.length - 1));
+      });
+    };
+    container.addEventListener(AUTOCOMPLETE_NAVIGATE_EVENT, handler);
+    return () => container.removeEventListener(AUTOCOMPLETE_NAVIGATE_EVENT, handler);
+  }, []);
+
   return (
     <BaseAutocompleteMenu>
       <FocusTrap
         focusTrapOptions={{
-          initialFocus: () => itemsRef.current?.querySelector<HTMLButtonElement>('button') ?? false,
+          initialFocus: false,
           onPostDeactivate: handleDeactivate,
           returnFocusOnDeactivate: false,
           clickOutsideDeactivates: true,
           allowOutsideClick: true,
-          isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
-          isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
           escapeDeactivates: stopPropagation,
         }}
       >
@@ -43,7 +81,7 @@ export function AutocompleteMenu({ headerContent, requestClose, children }: Auto
             {headerContent}
           </Header>
           <Scroll style={{ flexGrow: 1 }} onKeyDown={preventScrollWithArrowKey}>
-            <div ref={itemsRef} style={{ padding: config.space.S200 }}>
+            <div ref={itemsRef} className={css.AutocompleteMenuItems} style={{ padding: config.space.S200 }}>
               {children}
             </div>
           </Scroll>
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index c55f0e321..193f48c28 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -742,16 +742,31 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
 
     const handleKeyDown: KeyboardEventHandler = useCallback(
       (evt) => {
+        if (autocompleteQuery && isKeyHotkey('arrowdown', evt)) {
+          evt.preventDefault();
+          document.querySelector('[data-autocomplete-menu]')?.dispatchEvent(
+            new CustomEvent('autocomplete-navigate', { detail: { direction: 1 } })
+          );
+          return;
+        }
+        if (autocompleteQuery && isKeyHotkey('arrowup', evt)) {
+          evt.preventDefault();
+          document.querySelector('[data-autocomplete-menu]')?.dispatchEvent(
+            new CustomEvent('autocomplete-navigate', { detail: { direction: -1 } })
+          );
+          return;
+        }
         if (
           (isKeyHotkey('mod+enter', evt) || (!enterForNewline && isKeyHotkey('enter', evt))) &&
           !isComposing(evt)
         ) {
           evt.preventDefault();
           if (autocompleteQuery) {
-            const firstItem = document.querySelector<HTMLButtonElement>(
-              '[data-autocomplete-menu] button'
-            );
-            firstItem?.click();
+            const selectedItem =
+              document.querySelector<HTMLButtonElement>(
+                '[data-autocomplete-menu] button[data-selected]'
+              ) ?? document.querySelector<HTMLButtonElement>('[data-autocomplete-menu] button');
+            selectedItem?.click();
             return;
           }
           submit().catch((error) => {

From d33776869331cd478766e1f6a2d20d4383a3767f Mon Sep 17 00:00:00 2001
From: Evie Gauthier <evie@gauthier.id>
Date: Mon, 16 Mar 2026 20:27:08 -0400
Subject: [PATCH 5/8] Update quick-issues-batch-1.md to remove closed issues

Removed closed issue references from the changeset.
---
 .changeset/quick-issues-batch-1.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/.changeset/quick-issues-batch-1.md b/.changeset/quick-issues-batch-1.md
index 783ae7843..38065fca3 100644
--- a/.changeset/quick-issues-batch-1.md
+++ b/.changeset/quick-issues-batch-1.md
@@ -15,5 +15,3 @@ Fix several small UI/UX issues:
 - **#103**: Browser tab/PWA theme-color: use the correct light (`#ffffff`) and dark (`#1b1a21`) colours via media-query meta tags
 - **#120**: Video messages: volume is persisted across page loads via `localStorage`
 - **#168**: Notifications: add "Favicon Dot: Mentions Only" setting — when enabled, the favicon only changes for mentions/keywords, not plain unreads
-
-Closes #2, #44, #45, #52, #66, #67, #79, #35, #69, #103, #120, #168

From d7ede9532cdfaab63a1b98e9a7ee57d604670647 Mon Sep 17 00:00:00 2001
From: Evie Gauthier <evie@gauthier.id>
Date: Mon, 16 Mar 2026 20:30:21 -0400
Subject: [PATCH 6/8] fix: resolve lint/format errors in autocomplete virtual
 selection

---
 .changeset/quick-issues-batch-1.md                 |  2 +-
 .../editor/autocomplete/AutocompleteMenu.css.tsx   |  4 +---
 .../editor/autocomplete/AutocompleteMenu.tsx       | 13 ++++++++-----
 src/app/features/room/RoomInput.tsx                | 14 ++++++++------
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/.changeset/quick-issues-batch-1.md b/.changeset/quick-issues-batch-1.md
index 38065fca3..3a0a5ab5c 100644
--- a/.changeset/quick-issues-batch-1.md
+++ b/.changeset/quick-issues-batch-1.md
@@ -10,7 +10,7 @@ Fix several small UI/UX issues:
 - **#52**: Message editor: add `autoCapitalize="sentences"` to respect the OS/keyboard setting on mobile
 - **#66**: Adding account: show a "Cancel" button next to the "Adding account" label so users can abort the flow
 - **#67**: Support `matrixToBaseUrl` in `config.json` to override the default matrix.to link base
-- **#79/#35**: Autocomplete: pressing Enter now selects the top item instead of sending the message
+- **#79/#35**: Autocomplete: pressing Enter now selects the highlighted item instead of sending the message; the first item is highlighted on open and Arrow Up/Down navigate the list while keeping typing focus in the editor
 - **#69**: Autocomplete: focus returns to the message editor after completing a mention or emoji
 - **#103**: Browser tab/PWA theme-color: use the correct light (`#ffffff`) and dark (`#1b1a21`) colours via media-query meta tags
 - **#120**: Video messages: volume is persisted across page loads via `localStorage`
diff --git a/src/app/components/editor/autocomplete/AutocompleteMenu.css.tsx b/src/app/components/editor/autocomplete/AutocompleteMenu.css.tsx
index 821fd65dd..fb36858cf 100644
--- a/src/app/components/editor/autocomplete/AutocompleteMenu.css.tsx
+++ b/src/app/components/editor/autocomplete/AutocompleteMenu.css.tsx
@@ -41,10 +41,8 @@ export const AutocompleteNotice = style([
 
 export const AutocompleteMenuItems = style({});
 
-globalStyle(`${AutocompleteMenuItems} button[data-selected]`, {
+globalStyle(`${AutocompleteMenuItems} button[data-selected='true']`, {
   backgroundColor: color.SurfaceVariant.ContainerHover,
   outline: `2px solid ${color.Primary.Main}`,
   outlineOffset: -2,
 });
-
-
diff --git a/src/app/components/editor/autocomplete/AutocompleteMenu.tsx b/src/app/components/editor/autocomplete/AutocompleteMenu.tsx
index ef30e4971..0b82001b5 100644
--- a/src/app/components/editor/autocomplete/AutocompleteMenu.tsx
+++ b/src/app/components/editor/autocomplete/AutocompleteMenu.tsx
@@ -44,15 +44,14 @@ export function AutocompleteMenu({ headerContent, requestClose, children }: Auto
 
     const safeIdx = Math.max(0, Math.min(idx, count - 1));
     buttons.forEach((btn, i) => {
-      if (i === safeIdx) btn.dataset.selected = 'true';
-      else delete btn.dataset.selected;
+      btn.setAttribute('data-selected', String(i === safeIdx));
     });
-  });
+  }, [selectedIndex]);
 
   // Listen for navigation events dispatched by the editor key handler
   useEffect(() => {
     const container = itemsRef.current?.closest('[data-autocomplete-menu]');
-    if (!container) return;
+    if (!container) return undefined;
     const handler = (e: Event) => {
       const { direction } = (e as CustomEvent<AutocompleteNavigateDetail>).detail;
       setSelectedIndex((prev) => {
@@ -81,7 +80,11 @@ export function AutocompleteMenu({ headerContent, requestClose, children }: Auto
             {headerContent}
           </Header>
           <Scroll style={{ flexGrow: 1 }} onKeyDown={preventScrollWithArrowKey}>
-            <div ref={itemsRef} className={css.AutocompleteMenuItems} style={{ padding: config.space.S200 }}>
+            <div
+              ref={itemsRef}
+              className={css.AutocompleteMenuItems}
+              style={{ padding: config.space.S200 }}
+            >
               {children}
             </div>
           </Scroll>
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index 193f48c28..1be4b84f7 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -744,16 +744,18 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       (evt) => {
         if (autocompleteQuery && isKeyHotkey('arrowdown', evt)) {
           evt.preventDefault();
-          document.querySelector('[data-autocomplete-menu]')?.dispatchEvent(
-            new CustomEvent('autocomplete-navigate', { detail: { direction: 1 } })
-          );
+          document
+            .querySelector('[data-autocomplete-menu]')
+            ?.dispatchEvent(new CustomEvent('autocomplete-navigate', { detail: { direction: 1 } }));
           return;
         }
         if (autocompleteQuery && isKeyHotkey('arrowup', evt)) {
           evt.preventDefault();
-          document.querySelector('[data-autocomplete-menu]')?.dispatchEvent(
-            new CustomEvent('autocomplete-navigate', { detail: { direction: -1 } })
-          );
+          document
+            .querySelector('[data-autocomplete-menu]')
+            ?.dispatchEvent(
+              new CustomEvent('autocomplete-navigate', { detail: { direction: -1 } })
+            );
           return;
         }
         if (

From 1a4af27d4910b7801f315b2d79c8ef4d4a771308 Mon Sep 17 00:00:00 2001
From: Evie Gauthier <evie@gauthier.id>
Date: Mon, 16 Mar 2026 20:51:22 -0400
Subject: [PATCH 7/8] fix: persist volume for audio+video; split changesets;
 revert matrix.to (#120)

---
 .changeset/fix-account-signout-confirm.md     |  7 ++++++
 .changeset/fix-autocomplete-selection.md      |  7 ++++++
 .changeset/fix-cancel-add-account.md          |  7 ++++++
 .changeset/fix-editor-autocapitalize.md       |  7 ++++++
 .changeset/fix-favicon-mentions-only.md       |  7 ++++++
 .changeset/fix-media-volume-persist.md        |  7 ++++++
 .changeset/fix-reduced-motion-animation.md    |  7 ++++++
 .changeset/fix-server-picker-ios-autofill.md  |  7 ++++++
 .changeset/fix-theme-color-meta.md            |  7 ++++++
 .changeset/quick-issues-batch-1.md            | 17 -------------
 src/app/components/media/Video.tsx            |  4 ++--
 .../message/content/AudioContent.tsx          | 18 +++++++++++++-
 src/app/hooks/useClientConfig.ts              |  2 --
 src/app/pages/App.tsx                         | 24 ++++++++-----------
 src/app/plugins/matrix-to.ts                  | 10 +-------
 15 files changed, 93 insertions(+), 45 deletions(-)
 create mode 100644 .changeset/fix-account-signout-confirm.md
 create mode 100644 .changeset/fix-autocomplete-selection.md
 create mode 100644 .changeset/fix-cancel-add-account.md
 create mode 100644 .changeset/fix-editor-autocapitalize.md
 create mode 100644 .changeset/fix-favicon-mentions-only.md
 create mode 100644 .changeset/fix-media-volume-persist.md
 create mode 100644 .changeset/fix-reduced-motion-animation.md
 create mode 100644 .changeset/fix-server-picker-ios-autofill.md
 create mode 100644 .changeset/fix-theme-color-meta.md
 delete mode 100644 .changeset/quick-issues-batch-1.md

diff --git a/.changeset/fix-account-signout-confirm.md b/.changeset/fix-account-signout-confirm.md
new file mode 100644
index 000000000..52a09d178
--- /dev/null
+++ b/.changeset/fix-account-signout-confirm.md
@@ -0,0 +1,7 @@
+---
+default: patch
+---
+
+Account switcher: show a confirmation dialog before signing out of an account.
+
+Closes #44
diff --git a/.changeset/fix-autocomplete-selection.md b/.changeset/fix-autocomplete-selection.md
new file mode 100644
index 000000000..ffacbd70c
--- /dev/null
+++ b/.changeset/fix-autocomplete-selection.md
@@ -0,0 +1,7 @@
+---
+default: patch
+---
+
+Autocomplete: pressing Enter now selects the highlighted item instead of sending the message. The first item is highlighted on open and ArrowUp/Down navigate the list while keeping typing focus in the editor. Focus returns to the message editor after completing a mention or emoji.
+
+Closes #35, #69, #79
diff --git a/.changeset/fix-cancel-add-account.md b/.changeset/fix-cancel-add-account.md
new file mode 100644
index 000000000..ef027e098
--- /dev/null
+++ b/.changeset/fix-cancel-add-account.md
@@ -0,0 +1,7 @@
+---
+default: patch
+---
+
+Adding account: show a "Cancel" button next to the "Adding account" label so users can abort the flow.
+
+Closes #66
diff --git a/.changeset/fix-editor-autocapitalize.md b/.changeset/fix-editor-autocapitalize.md
new file mode 100644
index 000000000..b122b49ca
--- /dev/null
+++ b/.changeset/fix-editor-autocapitalize.md
@@ -0,0 +1,7 @@
+---
+default: patch
+---
+
+Message editor: add `autoCapitalize="sentences"` to respect the OS/keyboard capitalisation setting on mobile.
+
+Closes #52
diff --git a/.changeset/fix-favicon-mentions-only.md b/.changeset/fix-favicon-mentions-only.md
new file mode 100644
index 000000000..ba8ce5d93
--- /dev/null
+++ b/.changeset/fix-favicon-mentions-only.md
@@ -0,0 +1,7 @@
+---
+default: patch
+---
+
+Notifications: add "Favicon Dot: Mentions Only" setting — when enabled, the favicon badge only changes for mentions/keywords, not plain unreads.
+
+Closes #168
diff --git a/.changeset/fix-media-volume-persist.md b/.changeset/fix-media-volume-persist.md
new file mode 100644
index 000000000..00790b8d4
--- /dev/null
+++ b/.changeset/fix-media-volume-persist.md
@@ -0,0 +1,7 @@
+---
+default: patch
+---
+
+Video and audio messages: volume level is now persisted across page loads via `localStorage` and shared between all media players.
+
+Closes #120
diff --git a/.changeset/fix-reduced-motion-animation.md b/.changeset/fix-reduced-motion-animation.md
new file mode 100644
index 000000000..804c456cb
--- /dev/null
+++ b/.changeset/fix-reduced-motion-animation.md
@@ -0,0 +1,7 @@
+---
+default: patch
+---
+
+Reduced-motion: add `animation-iteration-count: 1` so spinners stop after one cycle instead of running indefinitely at near-zero speed.
+
+Closes #2
diff --git a/.changeset/fix-server-picker-ios-autofill.md b/.changeset/fix-server-picker-ios-autofill.md
new file mode 100644
index 000000000..52f8df4c2
--- /dev/null
+++ b/.changeset/fix-server-picker-ios-autofill.md
@@ -0,0 +1,7 @@
+---
+default: patch
+---
+
+Server picker: prevent iOS from restoring the old server name while the user is actively editing the input.
+
+Closes #45
diff --git a/.changeset/fix-theme-color-meta.md b/.changeset/fix-theme-color-meta.md
new file mode 100644
index 000000000..ce3160794
--- /dev/null
+++ b/.changeset/fix-theme-color-meta.md
@@ -0,0 +1,7 @@
+---
+default: patch
+---
+
+Browser tab/PWA: use the correct light (`#ffffff`) and dark (`#1b1a21`) theme-color values via `media` attribute on the meta tags.
+
+Closes #103
diff --git a/.changeset/quick-issues-batch-1.md b/.changeset/quick-issues-batch-1.md
deleted file mode 100644
index 3a0a5ab5c..000000000
--- a/.changeset/quick-issues-batch-1.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-default: patch
----
-
-Fix several small UI/UX issues:
-
-- **#2**: Reduced-motion: add `animation-iteration-count: 1` so spinners stop after one cycle instead of running indefinitely at near-zero speed
-- **#44**: Account switcher: show a confirmation dialog before signing out of an account
-- **#45**: Server picker: prevent iOS from restoring the old server name while the user is actively editing the input
-- **#52**: Message editor: add `autoCapitalize="sentences"` to respect the OS/keyboard setting on mobile
-- **#66**: Adding account: show a "Cancel" button next to the "Adding account" label so users can abort the flow
-- **#67**: Support `matrixToBaseUrl` in `config.json` to override the default matrix.to link base
-- **#79/#35**: Autocomplete: pressing Enter now selects the highlighted item instead of sending the message; the first item is highlighted on open and Arrow Up/Down navigate the list while keeping typing focus in the editor
-- **#69**: Autocomplete: focus returns to the message editor after completing a mention or emoji
-- **#103**: Browser tab/PWA theme-color: use the correct light (`#ffffff`) and dark (`#1b1a21`) colours via media-query meta tags
-- **#120**: Video messages: volume is persisted across page loads via `localStorage`
-- **#168**: Notifications: add "Favicon Dot: Mentions Only" setting — when enabled, the favicon only changes for mentions/keywords, not plain unreads
diff --git a/src/app/components/media/Video.tsx b/src/app/components/media/Video.tsx
index a2a371df9..6c08aca8f 100644
--- a/src/app/components/media/Video.tsx
+++ b/src/app/components/media/Video.tsx
@@ -9,7 +9,7 @@ export const Video = forwardRef<HTMLVideoElement, VideoHTMLAttributes<HTMLVideoE
   )
 );
 
-const VIDEO_VOLUME_KEY = 'videoVolume';
+export const MEDIA_VOLUME_KEY = 'mediaVolume';
 
 export function PersistedVolumeVideo({
   onVolumeChange,
@@ -30,7 +30,7 @@ export function PersistedVolumeVideo({
       {...props}
       ref={innerRef}
       onVolumeChange={(e) => {
-        localStorage.setItem(VIDEO_VOLUME_KEY, String((e.target as HTMLVideoElement).volume));
+        localStorage.setItem(MEDIA_VOLUME_KEY, String((e.target as HTMLVideoElement).volume));
         onVolumeChange?.(e);
       }}
     />
diff --git a/src/app/components/message/content/AudioContent.tsx b/src/app/components/message/content/AudioContent.tsx
index 6ef9349ba..1153ffae7 100644
--- a/src/app/components/message/content/AudioContent.tsx
+++ b/src/app/components/message/content/AudioContent.tsx
@@ -18,6 +18,7 @@ import { useThrottle } from '$hooks/useThrottle';
 import { secondsToMinutesAndSeconds } from '$utils/common';
 import { decryptFile, downloadEncryptedMedia, downloadMedia, mxcUrlToHttp } from '$utils/matrix';
 import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
+import { MEDIA_VOLUME_KEY } from '$components/media';
 
 const PLAY_TIME_THROTTLE_OPS = {
   wait: 500,
@@ -60,6 +61,14 @@ export function AudioContent({
 
   const audioRef = useRef<HTMLAudioElement | null>(null);
 
+  useEffect(() => {
+    const stored = localStorage.getItem(MEDIA_VOLUME_KEY);
+    if (audioRef.current && stored !== null) {
+      const parsed = parseFloat(stored);
+      if (!Number.isNaN(parsed)) audioRef.current.volume = parsed;
+    }
+  }, []);
+
   const [currentTime, setCurrentTime] = useState(0);
   // duration in seconds. (NOTE: info.duration is in milliseconds)
   const infoDuration = info.duration ?? 0;
@@ -197,7 +206,14 @@ export function AudioContent({
       </>
     ),
     children: (
-      <audio controls={false} autoPlay ref={audioRef}>
+      <audio
+        controls={false}
+        autoPlay
+        ref={audioRef}
+        onVolumeChange={(e) => {
+          localStorage.setItem(MEDIA_VOLUME_KEY, String((e.target as HTMLAudioElement).volume));
+        }}
+      >
         {srcState.status === AsyncStatus.Success && <source src={srcState.data} type={mimeType} />}
       </audio>
     ),
diff --git a/src/app/hooks/useClientConfig.ts b/src/app/hooks/useClientConfig.ts
index 87685337d..4d6cec62a 100644
--- a/src/app/hooks/useClientConfig.ts
+++ b/src/app/hooks/useClientConfig.ts
@@ -40,8 +40,6 @@ export type ClientConfig = {
   };
 
   hashRouter?: HashRouterConfig;
-
-  matrixToBaseUrl?: string;
 };
 
 const ClientConfigContext = createContext<ClientConfig | null>(null);
diff --git a/src/app/pages/App.tsx b/src/app/pages/App.tsx
index bf5ee6395..0408f38ea 100644
--- a/src/app/pages/App.tsx
+++ b/src/app/pages/App.tsx
@@ -7,7 +7,6 @@ import { ErrorBoundary } from 'react-error-boundary';
 
 import { ClientConfigLoader } from '$components/ClientConfigLoader';
 import { ClientConfigProvider } from '$hooks/useClientConfig';
-import { setMatrixToBase } from '$plugins/matrix-to';
 import { ScreenSizeProvider, useScreenSize } from '$hooks/useScreenSize';
 import { useCompositionEndTracking } from '$hooks/useComposingCheck';
 import { ErrorPage } from '$components/DefaultErrorPage';
@@ -36,19 +35,16 @@ function App() {
                     <ConfigConfigError error={err} retry={retry} ignore={ignore} />
                   )}
                 >
-                  {(clientConfig) => {
-                    setMatrixToBase(clientConfig.matrixToBaseUrl);
-                    return (
-                      <ClientConfigProvider value={clientConfig}>
-                        <QueryClientProvider client={queryClient}>
-                          <JotaiProvider>
-                            <RouterProvider router={createRouter(clientConfig, screenSize)} />
-                          </JotaiProvider>
-                          <ReactQueryDevtools initialIsOpen={false} />
-                        </QueryClientProvider>
-                      </ClientConfigProvider>
-                    );
-                  }}
+                  {(clientConfig) => (
+                    <ClientConfigProvider value={clientConfig}>
+                      <QueryClientProvider client={queryClient}>
+                        <JotaiProvider>
+                          <RouterProvider router={createRouter(clientConfig, screenSize)} />
+                        </JotaiProvider>
+                        <ReactQueryDevtools initialIsOpen={false} />
+                      </QueryClientProvider>
+                    </ClientConfigProvider>
+                  )}
                 </ClientConfigLoader>
               </FeatureCheck>
             </ScreenSizeProvider>
diff --git a/src/app/plugins/matrix-to.ts b/src/app/plugins/matrix-to.ts
index 35afe11d7..03a7d2c17 100644
--- a/src/app/plugins/matrix-to.ts
+++ b/src/app/plugins/matrix-to.ts
@@ -1,12 +1,4 @@
-let MATRIX_TO_BASE = 'https://matrix.to';
-
-/**
- * Override the default matrix.to base URL (configurable per deployment).
- * Must be called before any getMatrixTo* functions are used.
- */
-export const setMatrixToBase = (baseUrl?: string): void => {
-  if (baseUrl) MATRIX_TO_BASE = baseUrl.replace(/\/$/, '');
-};
+const MATRIX_TO_BASE = 'https://matrix.to';
 
 export const getMatrixToUser = (userId: string): string => `${MATRIX_TO_BASE}/#/${userId}`;
 

From 097e12d3a4575c7767ddff8c8460dd14914195e6 Mon Sep 17 00:00:00 2001
From: Evie Gauthier <evie@gauthier.id>
Date: Mon, 16 Mar 2026 21:03:30 -0400
Subject: [PATCH 8/8] fix: correct remaining VIDEO_VOLUME_KEY reference and add
 useEffect import

---
 src/app/components/media/Video.tsx                  | 2 +-
 src/app/components/message/content/AudioContent.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/media/Video.tsx b/src/app/components/media/Video.tsx
index 6c08aca8f..c28efcaa3 100644
--- a/src/app/components/media/Video.tsx
+++ b/src/app/components/media/Video.tsx
@@ -18,7 +18,7 @@ export function PersistedVolumeVideo({
   const innerRef = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
-    const stored = localStorage.getItem(VIDEO_VOLUME_KEY);
+    const stored = localStorage.getItem(MEDIA_VOLUME_KEY);
     if (innerRef.current && stored !== null) {
       const parsed = parseFloat(stored);
       if (!Number.isNaN(parsed)) innerRef.current.volume = parsed;
diff --git a/src/app/components/message/content/AudioContent.tsx b/src/app/components/message/content/AudioContent.tsx
index 1153ffae7..26d74db88 100644
--- a/src/app/components/message/content/AudioContent.tsx
+++ b/src/app/components/message/content/AudioContent.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/media-has-caption */
-import { ReactNode, useCallback, useRef, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { Badge, Chip, Icon, IconButton, Icons, ProgressBar, Spinner, Text, toRem } from 'folds';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import { Range } from 'react-range';