feat: implement room list reordering and animation hooks; add scroll to latest behavior settings

2026-04-23 14:53:00 +10:00
parent 643608f25d
commit 35ccdc0a22
9 changed files with 414 additions and 32 deletions
--- a/src/app/components/direct-list/DirectList.tsx
+++ b/src/app/components/direct-list/DirectList.tsx
@@ -50,6 +50,7 @@ import {
  useRoomsNotificationPreferencesContext,
 } from '../../hooks/useRoomsNotificationPreferences';
 import { useDirectCreateSelected } from '../../hooks/router/useDirectSelected';
+import { useRoomListReorder, useListReorderAnimation } from '../../hooks/useRoomListReorder';

 /**
 * Props for the DirectMenu component
@@ -215,13 +216,17 @@ export function DirectList({
  const selectedRoomId = useSelectedRoom();
  const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
  
+  const reorderTrigger = useRoomListReorder(mx, directs);
+
  const sortedDirects = useMemo(() => {
    const items = Array.from(directs).sort(factoryRoomIdByActivity(mx));
    if (closedCategories.has(DEFAULT_CATEGORY_ID)) {
      return items.filter((rId) => roomToUnread.has(rId) || rId === selectedRoomId);
    }
    return items;
-  }, [mx, directs, closedCategories, roomToUnread, selectedRoomId]);
+  }, [mx, directs, closedCategories, roomToUnread, selectedRoomId, reorderTrigger]);
+
+  const animationRef = useListReorderAnimation(sortedDirects);

  const virtualizer = useVirtualizer({
    count: sortedDirects.length,
@@ -275,6 +280,7 @@ export function DirectList({
          </NavCategoryHeader>
        )}
        <div
+          ref={animationRef}
          style={{
            position: 'relative',
            height: virtualizer.getTotalSize(),
@@ -287,7 +293,12 @@ export function DirectList({
            const selected = selectedRoomId === roomId;

            return (
-              <VirtualTile virtualItem={vItem} key={vItem.index} ref={virtualizer.measureElement}>
+              <VirtualTile 
+                virtualItem={vItem} 
+                key={roomId} 
+                ref={virtualizer.measureElement}
+                data-room-id={roomId}
+              >
                <RoomNavItem
                  room={room}
                  selected={selected}
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -1,6 +1,7 @@
 import React, { MouseEventHandler, forwardRef, useState, useMemo } from 'react';
 import { Room, EventTimeline } from 'matrix-js-sdk';
 import { useAtomValue } from 'jotai';
+import { useNavigate } from 'react-router-dom';
 import {
  Avatar,
  Box,
@@ -44,7 +45,7 @@ import { getCanonicalAliasOrRoomId, isRoomAlias, mxcUrlToHttp } from '../../util
 import { getViaServers } from '../../plugins/via-servers';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
+import { settingsAtom, ScrollToLatestBehavior } from '../../state/settings';
 import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
 import { useSpaceOptionally } from '../../hooks/useSpace';
 import {
@@ -294,6 +295,8 @@ export function RoomNavItem({
 }: RoomNavItemProps) {
  const mx = useMatrixClient();
  const useAuthentication = useMediaAuthentication();
+  const navigate = useNavigate();
+  const [scrollToLatestBehavior] = useSetting(settingsAtom, 'scrollToLatestBehavior');
  const [hover, setHover] = useState(false);
  const { hoverProps } = useHover({ onHoverChange: setHover });
  const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
@@ -365,6 +368,20 @@ export function RoomNavItem({
    setMenuAnchor(evt.currentTarget.getBoundingClientRect());
  };

+  const handleRoomClick: MouseEventHandler<HTMLAnchorElement> = (evt) => {
+    if (selected) {
+      evt.preventDefault();
+      
+      const shouldScroll = 
+        scrollToLatestBehavior === ScrollToLatestBehavior.Always ||
+        (scrollToLatestBehavior === ScrollToLatestBehavior.OnNewMessage && unread !== undefined);
+      
+      if (shouldScroll) {
+        navigate(linkPath, { replace: true, state: { scrollToLatest: Date.now() } });
+      }
+    }
+  };
+
  const optionsVisible = hover || !!menuAnchor;

  return (
@@ -380,7 +397,7 @@ export function RoomNavItem({
        {...hoverProps}
        {...focusWithinProps}
      >
-        <NavLink to={linkPath}>
+        <NavLink to={linkPath} onClick={handleRoomClick}>
          <NavItemContent>
            <Box as="span" grow="Yes" alignItems="Center" gap={shouldShowIcon ? "200" : "100"}>
              {shouldShowIcon && (
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -47,6 +47,7 @@ import {
 import { isKeyHotkey } from 'is-hotkey';
 import { Opts as LinkifyOpts } from 'linkifyjs';
 import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
 import { eventWithShortcode, factoryEventSentBy, getMxIdLocalPart } from '../../utils/matrix';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useVirtualPaginator, ItemRange } from '../../hooks/useVirtualPaginator';
@@ -511,6 +512,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
  const openUserRoomProfile = useOpenUserRoomProfile();
  const space = useSpaceOptionally();
  const markAsRead = useMarkAsRead(mx);
+  const location = useLocation();

  const imagePackRooms: Room[] = useImagePackRooms(room.roomId, roomToParents);

@@ -525,6 +527,12 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
  const atBottomRef = useRef(atBottom);
  atBottomRef.current = atBottom;

+  const shouldAutoScrollRef = useRef<boolean>(true);
+  const [latestUnreadMessage, setLatestUnreadMessage] = useState<{
+    sender: string;
+    content: string;
+  } | null>(null);
+
  const scrollRef = useRef<HTMLDivElement>(null);
  const scrollToBottomRef = useRef({
    count: 0,
@@ -635,15 +643,15 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
    room,
    useCallback(
      (mEvt: MatrixEvent) => {
-        // if user is at bottom of timeline
-        // keep paginating timeline and conditionally mark as read
-        // otherwise we update timeline without paginating
-        // so timeline can be updated with evt like: edits, reactions etc
-        if (atBottomRef.current) {
-          if (document.hasFocus() && (!unreadInfo || mEvt.getSender() === mx.getUserId())) {
-            // Check if the document is in focus (user is actively viewing the app),
-            // and either there are no unread messages or the latest message is from the current user.
-            // If either condition is met, trigger the markAsRead function to send a read receipt.
+        const isOwnMessage = mEvt.getSender() === mx.getUserId();
+        const shouldScroll = atBottomRef.current || (shouldAutoScrollRef.current && isOwnMessage);
+
+        if (shouldScroll) {
+          if (isOwnMessage) {
+            shouldAutoScrollRef.current = true;
+          }
+
+          if (document.hasFocus() && (!unreadInfo || isOwnMessage)) {
            requestAnimationFrame(() => markAsRead(mEvt.getRoomId()!, hideActivity));
          }

@@ -651,6 +659,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
            setUnreadInfo(getRoomUnreadInfo(room));
          }

+          setLatestUnreadMessage(null);
          scrollToBottomRef.current.count += 1;
          scrollToBottomRef.current.smooth = true;

@@ -663,6 +672,20 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
          }));
          return;
        }
+
+        if (!isOwnMessage) {
+          shouldAutoScrollRef.current = false;
+          const senderName = getMemberDisplayName(room, mEvt.getSender() ?? '') 
+            ?? getMxIdLocalPart(mEvt.getSender() ?? '') 
+            ?? 'Unknown';
+          const content = mEvt.getContent();
+          const messageText = content.body ?? content.msgtype ?? 'New message';
+          setLatestUnreadMessage({
+            sender: senderName,
+            content: messageText.length > 100 ? messageText.substring(0, 100) + '...' : messageText,
+          });
+        }
+
        setTimeline((ct) => ({ ...ct }));
        if (!unreadInfo) {
          setUnreadInfo(getRoomUnreadInfo(room));
@@ -749,7 +772,10 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli

  const debounceSetAtBottom = useDebounce(
    useCallback((entry: IntersectionObserverEntry) => {
-      if (!entry.isIntersecting) setAtBottom(false);
+      if (!entry.isIntersecting) {
+        setAtBottom(false);
+        shouldAutoScrollRef.current = false;
+      }
    }, []),
    { wait: 1000 }
  );
@@ -762,6 +788,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
        if (targetEntry) debounceSetAtBottom(targetEntry);
        if (targetEntry?.isIntersecting && atLiveEndRef.current) {
          setAtBottom(true);
+          shouldAutoScrollRef.current = true;
+          setLatestUnreadMessage(null);
          if (document.hasFocus()) {
            tryAutoMarkAsRead();
          }
@@ -831,6 +859,19 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
    }
  }, [eventId, loadEventTimeline]);

+  // Scroll to latest when clicking on already-selected room
+  useEffect(() => {
+    const scrollToLatest = (location.state as any)?.scrollToLatest;
+    if (scrollToLatest) {
+      shouldAutoScrollRef.current = true;
+      setLatestUnreadMessage(null);
+      setUnreadInfo(undefined);
+      setTimeline(getInitialTimeline(room));
+      scrollToBottomRef.current.count += 1;
+      scrollToBottomRef.current.smooth = false;
+    }
+  }, [(location.state as any)?.scrollToLatest, room]);
+
  // Scroll to bottom on initial timeline load
  useLayoutEffect(() => {
    const scrollEl = scrollRef.current;
@@ -936,6 +977,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
    if (eventId) {
      navigateRoom(room.roomId, undefined, { replace: true });
    }
+    shouldAutoScrollRef.current = true;
+    setLatestUnreadMessage(null);
    setTimeline(getInitialTimeline(room));
    scrollToBottomRef.current.count += 1;
    scrollToBottomRef.current.smooth = false;
@@ -2036,15 +2079,36 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
      </Scroll>
      {!atBottom && (
        <TimelineFloat position="Bottom">
-          <Chip
-            variant="SurfaceVariant"
-            radii="Pill"
-            outlined
-            before={<Icon size="50" src={Icons.ArrowBottom} />}
-            onClick={handleJumpToLatest}
-          >
-            <Text size="L400">Jump to Latest</Text>
-          </Chip>
+          <Box direction="Column" gap="200" alignItems="Center">
+            {latestUnreadMessage && (
+              <Box
+                style={{
+                  backgroundColor: color.Surface.Container,
+                  padding: `${config.space.S200} ${config.space.S300}`,
+                  borderRadius: config.radii.R400,
+                  maxWidth: toRem(400),
+                  border: `1px solid ${color.Surface.ContainerLine}`,
+                }}
+              >
+                <Text size="T300" priority="300" style={{ 
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                }}>
+                  <b>{latestUnreadMessage.sender}:</b> {latestUnreadMessage.content}
+                </Text>
+              </Box>
+            )}
+            <Chip
+              variant="SurfaceVariant"
+              radii="Pill"
+              outlined
+              before={<Icon size="50" src={Icons.ArrowBottom} />}
+              onClick={handleJumpToLatest}
+            >
+              <Text size="L400">Jump to Latest</Text>
+            </Chip>
+          </Box>
        </TimelineFloat>
      )}
    </Box>
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -34,7 +34,7 @@ import FocusTrap from 'focus-trap-react';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
 import { useSetting } from '../../../state/hooks/settings';
-import { DateFormat, EmojiStyle, MessageLayout, MessageSpacing, settingsAtom } from '../../../state/settings';
+import { DateFormat, EmojiStyle, MessageLayout, MessageSpacing, ScrollToLatestBehavior, settingsAtom } from '../../../state/settings';
 import { SettingTile } from '../../../components/setting-tile';
 import { KeySymbol } from '../../../utils/key-symbol';
 import { isMacOS } from '../../../utils/user-agent';
@@ -984,6 +984,83 @@ function SelectMessageSpacing() {
  );
 }

+function SelectScrollToLatestBehavior() {
+  const [menuCords, setMenuCords] = useState<RectCords>();
+  const [scrollToLatestBehavior, setScrollToLatestBehavior] = useSetting(
+    settingsAtom,
+    'scrollToLatestBehavior'
+  );
+
+  const behaviors = [
+    { value: ScrollToLatestBehavior.Always, label: 'Always' },
+    { value: ScrollToLatestBehavior.OnNewMessage, label: 'On New Message' },
+    { value: ScrollToLatestBehavior.Never, label: 'Never' },
+  ];
+
+  const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const handleSelect = (behavior: ScrollToLatestBehavior) => {
+    setScrollToLatestBehavior(behavior);
+    setMenuCords(undefined);
+  };
+
+  const currentLabel = behaviors.find((b) => b.value === scrollToLatestBehavior)?.label ?? 'Always';
+
+  return (
+    <>
+      <Button
+        size="300"
+        variant="Secondary"
+        outlined
+        fill="Soft"
+        radii="300"
+        after={<Icon size="300" src={Icons.ChevronBottom} />}
+        onClick={handleMenu}
+      >
+        <Text size="T300">{currentLabel}</Text>
+      </Button>
+      <PopOut
+        anchor={menuCords}
+        offset={5}
+        position="Bottom"
+        align="End"
+        content={
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: () => setMenuCords(undefined),
+              clickOutsideDeactivates: true,
+              isKeyForward: (evt: KeyboardEvent) =>
+                evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+              isKeyBackward: (evt: KeyboardEvent) =>
+                evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Menu>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+                {behaviors.map((item) => (
+                  <MenuItem
+                    key={item.value}
+                    size="300"
+                    variant={scrollToLatestBehavior === item.value ? 'Primary' : 'Surface'}
+                    radii="300"
+                    onClick={() => handleSelect(item.value)}
+                  >
+                    <Text size="T300">{item.label}</Text>
+                  </MenuItem>
+                ))}
+              </Box>
+            </Menu>
+          </FocusTrap>
+        }
+      />
+    </>
+  );
+}
+
 function Messages() {
  const [legacyUsernameColor, setLegacyUsernameColor] = useSetting(
    settingsAtom,
@@ -1011,6 +1088,12 @@ function Messages() {
      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
        <SettingTile title="Message Spacing" after={<SelectMessageSpacing />} />
      </SequenceCard>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Scroll to Latest on Room Reselect"
+          after={<SelectScrollToLatestBehavior />}
+        />
+      </SequenceCard>
      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
        <SettingTile
          title="Legacy Username Color"
--- a/src/app/hooks/useRoomListReorder.ts
+++ b/src/app/hooks/useRoomListReorder.ts
@@ -0,0 +1,110 @@
+import { useEffect, useRef, useState } from 'react';
+import { MatrixClient, MatrixEvent, Room, RoomEvent, IRoomTimelineData } from 'matrix-js-sdk';
+
+/**
+ * Hook that tracks timeline events across all rooms to trigger re-sorting of room lists.
+ * Returns a counter that increments whenever a message is sent or received in any room.
+ * This can be used as a dependency in useMemo to trigger re-sorting of room lists.
+ * 
+ * @param mx - The Matrix client instance
+ * @param roomIds - Optional array of room IDs to track. If not provided, tracks all rooms.
+ * @returns A number that increments on each timeline event
+ */
+export const useRoomListReorder = (mx: MatrixClient, roomIds?: string[]): number => {
+  const [updateCounter, setUpdateCounter] = useState(0);
+
+  useEffect(() => {
+    const handleTimelineEvent = (
+      mEvent: MatrixEvent,
+      room: Room | undefined,
+      toStartOfTimeline: boolean | undefined,
+      removed: boolean,
+      data: IRoomTimelineData
+    ) => {
+      if (!room || !data.liveEvent) return;
+      if (toStartOfTimeline) return;
+      
+      if (roomIds && !roomIds.includes(room.roomId)) return;
+      
+      setUpdateCounter((prev) => prev + 1);
+    };
+
+    mx.on(RoomEvent.Timeline, handleTimelineEvent);
+    
+    return () => {
+      mx.removeListener(RoomEvent.Timeline, handleTimelineEvent);
+    };
+  }, [mx, roomIds]);
+
+  return updateCounter;
+};
+
+/**
+ * Hook that implements FLIP (First, Last, Invert, Play) animation for list reordering.
+ * Tracks element positions before and after reorder, then animates the difference.
+ * 
+ * @param items - Array of item IDs in their current order
+ * @returns Ref callback to attach to the list container
+ */
+export const useListReorderAnimation = <T extends string>(
+  items: T[]
+): React.RefCallback<HTMLElement> => {
+  const positionsRef = useRef<Map<T, number>>(new Map());
+  const containerRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const currentPositions = new Map<T, number>();
+    const elements = new Map<T, HTMLElement>();
+
+    items.forEach((itemId) => {
+      const element = containerRef.current!.querySelector(`[data-room-id="${itemId}"]`) as HTMLElement;
+      if (element) {
+        currentPositions.set(itemId, element.offsetTop);
+        elements.set(itemId, element);
+      }
+    });
+
+    if (positionsRef.current.size === 0) {
+      positionsRef.current = currentPositions;
+      return;
+    }
+
+    const animations: Array<{ element: HTMLElement; deltaY: number }> = [];
+
+    items.forEach((itemId) => {
+      const element = elements.get(itemId);
+      const oldPos = positionsRef.current.get(itemId);
+      const newPos = currentPositions.get(itemId);
+
+      if (element && oldPos !== undefined && newPos !== undefined) {
+        const deltaY = oldPos - newPos;
+
+        if (Math.abs(deltaY) > 1) {
+          animations.push({ element, deltaY });
+        }
+      }
+    });
+
+    if (animations.length > 0) {
+      animations.forEach(({ element, deltaY }) => {
+        element.style.transform = `translateY(${deltaY}px)`;
+        element.style.transition = 'none';
+      });
+
+      requestAnimationFrame(() => {
+        animations.forEach(({ element }) => {
+          element.style.transition = 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1)';
+          element.style.transform = '';
+        });
+      });
+    }
+
+    positionsRef.current = currentPositions;
+  }, [items]);
+
+  return (container: HTMLElement | null) => {
+    containerRef.current = container;
+  };
+};
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -48,6 +48,7 @@ import { stopPropagation } from '../../../utils/keyboard';
 import { PluginButtonSlot } from '../../../features/settings/plugins/PluginButtonSlot';
 import { PluginNavSlot } from '../../../features/settings/plugins/PluginNavSlot';
 import { useSetting } from '../../../state/hooks/settings';
+import { useRoomListReorder, useListReorderAnimation } from '../../../hooks/useRoomListReorder';
 import { settingsAtom } from '../../../state/settings';
 import {
  getRoomNotificationMode,
@@ -246,13 +247,17 @@ export function Direct() {
  const noRoomToDisplay = directs.length === 0;
  const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
  
+  const reorderTrigger = useRoomListReorder(mx, directs);
+
  const sortedDirects = useMemo(() => {
    const items = Array.from(directs).sort(factoryRoomIdByActivity(mx));
    if (closedCategories.has(DEFAULT_CATEGORY_ID)) {
      return items.filter((rId) => roomToUnread.has(rId) || rId === selectedRoomId);
    }
    return items;
-  }, [mx, directs, closedCategories, roomToUnread, selectedRoomId]);
+  }, [mx, directs, closedCategories, roomToUnread, selectedRoomId, reorderTrigger]);
+
+  const animationRef = useListReorderAnimation(sortedDirects);

  const virtualizer = useVirtualizer({
    count: sortedDirects.length,
@@ -307,6 +312,7 @@ export function Direct() {
                </RoomNavCategoryButton>
              </NavCategoryHeader>
              <div
+                ref={animationRef}
                style={{
                  position: 'relative',
                  height: virtualizer.getTotalSize(),
@@ -321,8 +327,9 @@ export function Direct() {
                  return (
                    <VirtualTile
                      virtualItem={vItem}
-                      key={vItem.index}
+                      key={roomId}
                      ref={virtualizer.measureElement}
+                      data-room-id={roomId}
                    >
                      <RoomNavItem
                        room={room}
--- a/src/app/plugins/react-custom-html-parser.tsx
+++ b/src/app/plugins/react-custom-html-parser.tsx
@@ -289,7 +289,15 @@ export function CodeBlock({
            fill="None"
            radii="Pill"
            onClick={handleCopy}
-            before={copied && <Icon size="50" src={Icons.Check} />}
+            before={
+              copied ? (
+                <Icon size="50" src={Icons.Check} />
+              ) : (
+                <svg width="12" height="12" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+                  <path d="M3 5V12.73C2.4 12.38 2 11.74 2 11V5C2 2.79 3.79 1 6 1H9C9.74 1 10.38 1.4 10.73 2H6C4.35 2 3 3.35 3 5ZM11 15H6C4.897 15 4 14.103 4 13V5C4 3.897 4.897 3 6 3H11C12.103 3 13 3.897 13 5V13C13 14.103 12.103 15 11 15ZM12 5C12 4.448 11.552 4 11 4H6C5.448 4 5 4.448 5 5V13C5 13.552 5.448 14 6 14H11C11.552 14 12 13.552 12 13V5Z"/>
+                </svg>
+              )
+            }
          >
            <Text size="B300">{copied ? 'Copied' : 'Copy'}</Text>
          </Chip>
@@ -327,6 +335,41 @@ export function CodeBlock({
  );
 }

+export function InlineCode({
+  children,
+  opts,
+  props,
+}: {
+  children: ChildNode[];
+  opts: HTMLReactParserOptions;
+  props: any;
+}) {
+  const [copied, setCopied] = useTimeoutToggle();
+
+  const handleCopy = (e: MouseEvent<HTMLSpanElement>) => {
+    e.stopPropagation();
+    copyToClipboard(extractTextFromChildren(children));
+    setCopied();
+  };
+
+  return (
+    <span className={css.InlineCodeWrapper}>
+      <span className={css.InlineCodeCopyButton} onClick={handleCopy}>
+        {copied ? (
+          <Icon size="50" src={Icons.Check} />
+        ) : (
+          <svg width="12" height="12" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+            <path d="M3 5V12.73C2.4 12.38 2 11.74 2 11V5C2 2.79 3.79 1 6 1H9C9.74 1 10.38 1.4 10.73 2H6C4.35 2 3 3.35 3 5ZM11 15H6C4.897 15 4 14.103 4 13V5C4 3.897 4.897 3 6 3H11C12.103 3 13 3.897 13 5V13C13 14.103 12.103 15 11 15ZM12 5C12 4.448 11.552 4 11 4H6C5.448 4 5 4.448 5 5V13C5 13.552 5.448 14 6 14H11C11.552 14 12 13.552 12 13V5Z"/>
+          </svg>
+        )}
+      </span>
+      <Text as="code" size="T300" className={css.Code} {...props}>
+        {domToReact(children, opts)}
+      </Text>
+    </span>
+  );
+}
+
 export const getReactCustomHtmlParser = (
  mx: MatrixClient,
  roomId: string | undefined,
@@ -450,11 +493,7 @@ export const getReactCustomHtmlParser = (
              );
            }
          } else {
-            return (
-              <Text as="code" size="T300" className={css.Code} {...props}>
-                {domToReact(children, opts)}
-              </Text>
-            );
+            return <InlineCode opts={opts} props={props}>{children}</InlineCode>;
          }
        }

--- a/src/app/state/settings.ts
+++ b/src/app/state/settings.ts
@@ -15,6 +15,12 @@ export enum EmojiStyle {
  Twemoji = 'twemoji',
 }

+export enum ScrollToLatestBehavior {
+  Always = 'always',
+  Never = 'never',
+  OnNewMessage = 'onNewMessage',
+}
+
 export type CallPanelDockPosition = 'right' | 'sidebar';

 export interface Settings {
@@ -56,6 +62,8 @@ export interface Settings {
  developerTools: boolean;

  autoJoinSpaceRooms: boolean;
+  
+  scrollToLatestBehavior: ScrollToLatestBehavior;
 }

 const defaultSettings: Settings = {
@@ -97,6 +105,8 @@ const defaultSettings: Settings = {
  developerTools: false,

  autoJoinSpaceRooms: true,
+  
+  scrollToLatestBehavior: ScrollToLatestBehavior.Always,
 };

 export const getSettings = () => {
--- a/src/app/styles/CustomHtml.css.ts
+++ b/src/app/styles/CustomHtml.css.ts
@@ -51,15 +51,56 @@ const CodeFont = style({
  fontFamily: 'monospace',
 });

+export const InlineCodeWrapper = style({
+  position: 'relative',
+  display: 'inline-block',
+});
+
 export const Code = style([
  DefaultReset,
  BaseCode,
  CodeFont,
  {
    padding: `0 ${config.space.S100}`,
+    display: 'inline-block',
  },
 ]);

+export const InlineCodeCopyButton = style({
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  transform: 'translateY(-100%)',
+  opacity: 0,
+  transition: 'opacity 0.15s ease-in-out',
+  background: color.SurfaceVariant.Container,
+  border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+  borderBottom: 'none',
+  borderTopLeftRadius: config.radii.R300,
+  borderTopRightRadius: config.radii.R300,
+  padding: `${config.space.S200} ${config.space.S300}`,
+  cursor: 'pointer',
+  fontSize: toRem(11),
+  color: color.SurfaceVariant.OnContainer,
+  fontWeight: config.fontWeight.W500,
+  whiteSpace: 'nowrap',
+  zIndex: 1,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  selectors: {
+    [`${InlineCodeWrapper}:hover &`]: {
+      opacity: 1,
+    },
+    '&:hover': {
+      background: color.SurfaceVariant.ContainerHover,
+    },
+    '&:active': {
+      background: color.SurfaceVariant.ContainerActive,
+    },
+  },
+});
+
 export const Spoiler = recipe({
  base: [
    DefaultReset,