fix(fonts): the app uses Inter again (#320)

Since the switch to @fontsource-variable/inter 5 (May), the package
registers the family 'Inter Variable', but the app still asked for the
4.x name 'InterVariable', so every user got their platform's default
sans-serif (Arial / Helvetica / DejaVu) and Settings → Appearance →
font "Inter" did nothing.

--font-secondary (index.css) and the App font map now ask for
'Inter Variable' first, keeping 'InterVariable' as a fallback for a
locally installed old version.

Verified headless: before, 0 Inter faces loaded and
document.fonts.check('16px "Inter Variable"') false; now the face loads
and the check is true.

Fixes #320

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5

src/app/features/message-search/SearchFilters.tsx

@@ -43,7 +43,6 @@ import { DebounceOptions, useDebounce } from '../../hooks/useDebounce';
 import { VirtualTile } from '../../components/virtualizer';
 import { stopPropagation } from '../../utils/keyboard';
 import { MsgTypeFilter } from './useMessageSearch';
-import { useLocalRoomNames } from '../../hooks/useRoomMeta';
 
 const MSG_TYPE_FILTER_OPTIONS: { msgType: MsgTypeFilter; label: string; icon: IconSrc }[] = [
   { msgType: 'm.image', label: 'Images', icon: Icons.Photo },
@@ -138,19 +137,14 @@ type SelectRoomButtonProps = {
   onChange: (rooms?: string[]) => void;
 };
 function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButtonProps) {
-  const localNames = useLocalRoomNames();
   const mx = useMatrixClient();
   const scrollRef = useRef<HTMLDivElement>(null);
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const [localSelected, setLocalSelected] = useState(selectedRooms);
 
   const getRoomNameStr: SearchItemStrGetter<string> = useCallback(
-    (rId) => {
-      const name = mx.getRoom(rId)?.name ?? rId;
-      // [Gitea #336] match the personal "Rename for me" name too
-      return localNames[rId] ? [localNames[rId], name] : name;
-    },
-    [mx, localNames],
+    (rId) => mx.getRoom(rId)?.name ?? rId,
+    [mx],
   );
 
   const [searchResult, _searchRoom, resetSearch] = useAsyncSearch(
@@ -298,7 +292,7 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto
                             }
                           >
                             <Text truncate size="T300">
-                              {localNames[room.roomId] ?? room.name}
+                              {room.name}
                             </Text>
                           </MenuItem>
                         </VirtualTile>
@@ -707,7 +701,6 @@ export function SearchFilters({
   pinnedOnly,
   onTogglePinnedOnly,
 }: SearchFiltersProps) {
-  const localNames = useLocalRoomNames();
   const mx = useMatrixClient();
 
   return (
@@ -755,7 +748,7 @@ export function SearchFilters({
               }
               after={<Icon size="50" src={Icons.Cross} />}
             >
-              <Text size="T200">{localNames[room.roomId] ?? room.name}</Text>
+              <Text size="T200">{room.name}</Text>
             </Chip>
           );
         })}

src/app/features/message-search/SearchResultGroup.tsx

@@ -50,7 +50,6 @@ import {
 } from '../../hooks/useMemberPowerTag';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
-import { useLocalRoomNames } from '../../hooks/useRoomMeta';
 
 type SearchResultGroupProps = {
   room: Room;
@@ -74,7 +73,6 @@ export function SearchResultGroup({
   hour24Clock,
   dateFormatString,
 }: SearchResultGroupProps) {
-  const localNames = useLocalRoomNames();
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const highlightRegex = useMemo(() => makeHighlightRegex(highlights), [highlights]);
@@ -214,7 +212,7 @@ export function SearchResultGroup({
             />
           </Avatar>
           <Text size="H4" truncate>
-            {localNames[room.roomId] ?? room.name}
+            {room.name}
           </Text>
         </Box>
       </Header>

src/app/features/room/thread/ThreadPanel.tsx

@@ -32,7 +32,6 @@ import { useThreadNotificationMode } from '../../../hooks/useThreadNotifications
 import { useTimestampFormatter } from '../../../hooks/useTimestampFormatter';
 import { getMemberName } from '../../../utils/room';
 import { ThreadNotificationMode } from '../../../utils/threadNotifications';
-import { useLocalRoomNames } from '../../../hooks/useRoomMeta';
 
 type ThreadPanelHeaderProps = {
   room: Room;
@@ -40,7 +39,6 @@ type ThreadPanelHeaderProps = {
   requestClose: () => void;
 };
 function ThreadPanelHeader({ room, threadId, requestClose }: ThreadPanelHeaderProps) {
-  const localNames = useLocalRoomNames();
   const mode = useThreadNotificationMode(room.roomId, threadId);
   const { format } = useTimestampFormatter();
   // [Gitea #165] Who started the thread and when — the first thing you want
@@ -57,7 +55,7 @@ function ThreadPanelHeader({ room, threadId, requestClose }: ThreadPanelHeaderPr
             Thread
           </Text>
           <Text size="T200" truncate style={{ opacity: 0.65 }}>
-            {localNames[room.roomId] ?? room.name}
+            {room.name}
             {startedBy && root && ` · started by ${startedBy}, ${format(root.getTs())}`}
           </Text>
         </Box>

src/app/features/room/thread/ThreadsListPanel.tsx

@@ -48,7 +48,6 @@ import { useTimestampFormatter } from '../../../hooks/useTimestampFormatter';
 import { formatRelativeAge } from '../../../utils/formatTimestamp';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
-import { useLocalRoomNames } from '../../../hooks/useRoomMeta';
 
 // Persisted across panel opens (the panel unmounts on close). getOnInit reads
 // localStorage synchronously so the chosen filter/sort apply on first render.
@@ -236,7 +235,6 @@ export type ThreadsListPanelProps = {
   onOpenThread: (threadId: string) => void;
 };
 export function ThreadsListPanel({ room, onClose, onOpenThread }: ThreadsListPanelProps) {
-  const localNames = useLocalRoomNames();
   const { navigateRoom } = useRoomNavigate();
   const screenSize = useScreenSizeContext();
   const handleJump = useCallback(
@@ -363,7 +361,7 @@ export function ThreadsListPanel({ room, onClose, onOpenThread }: ThreadsListPan
               Threads
             </Text>
             <Text size="T200" truncate style={{ opacity: 0.65 }}>
-              {localNames[room.roomId] ?? room.name}
+              {room.name}
             </Text>
           </Box>
           {totalUnread > 0 && (

src/app/pages/App.tsx

@@ -48,7 +48,7 @@ import {
 const EMOJI_FONTS = 'var(--font-flags), var(--font-emoji)';
 const FONT_MAP: Record<string, string> = {
   system: `system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', ${EMOJI_FONTS}, sans-serif`,
-  inter: `'InterVariable', ${EMOJI_FONTS}, sans-serif`,
+  inter: `'Inter Variable', 'InterVariable', ${EMOJI_FONTS}, sans-serif`,
   'jetbrains-mono': `'JetBrains Mono', ${EMOJI_FONTS}, monospace`,
   'fira-code': `'Fira Code', ${EMOJI_FONTS}, monospace`,
 };

src/app/pages/client/inbox/Notifications.tsx

@@ -98,7 +98,6 @@ import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { PresenceRingAvatar } from '../../../components/presence';
 import { AvatarDecoration } from '../../../components/avatar-decoration/AvatarDecoration';
-import { useLocalRoomNames } from '../../../hooks/useRoomMeta';
 
 type RoomNotificationsGroup = {
   roomId: string;
@@ -224,7 +223,6 @@ function RoomNotificationsGroupComp({
   hour24Clock,
   dateFormatString,
 }: RoomNotificationsGroupProps) {
-  const localNames = useLocalRoomNames();
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
@@ -430,7 +428,7 @@ function RoomNotificationsGroupComp({
             />
           </Avatar>
           <Text size="H4" truncate>
-            {localNames[room.roomId] ?? room.name}
+            {room.name}
           </Text>
         </Box>
         <Box shrink="No">

src/index.css

@@ -42,7 +42,8 @@
 
   --font-emoji: 'Twemoji_DISABLED';
   --font-flags: 'TwemojiFlags_DISABLED';
-  --font-secondary: 'InterVariable', var(--font-flags), var(--font-emoji), sans-serif;
+  --font-secondary:
+    'Inter Variable', 'InterVariable', var(--font-flags), var(--font-emoji), sans-serif;
 }
 
 .dark-theme,
@@ -66,7 +67,7 @@
   --mx-uc-7: hsl(243, 100%, 80%);
   --mx-uc-8: hsl(94, 100%, 80%);
 
-  --font-secondary: 'InterVariable', var(--font-emoji), sans-serif;
+  --font-secondary: 'Inter Variable', 'InterVariable', var(--font-emoji), sans-serif;
 }
 
 html {