feat: Add dynamic width calculation for carousel items based on image aspect ratio

feat: Implement confirmation dialog for room sharing in ShareRoomPicker

fix: Improve server input synchronization and blur handling in ServerPicker

feat: Integrate UnifiedPush for background sync in Android, including pusher management

refactor: Streamline Android share handling and file upload processes

fix: Update notification handling to use Capacitor's local notifications API

capacitor.config.json

@@ -0,0 +1,12 @@
+{
+  "appId": "com.paarrot.app",
+  "appName": "Paarrot",
+  "webDir": "dist",
+  "bundledWebRuntime": false,
+  "plugins": {
+    "LocalNotifications": {
+      "smallIcon": "ic_stat_paarrot",
+      "iconColor": "#FF8A00"
+    }
+  }
+}

config.json

@@ -1,8 +1,6 @@
 {
-  "defaultHomeserver": 0,
+  "defaultHomeserver": 2,
   "homeserverList": [
-    "ruv.wtf",
-    "exau.dev",
     "converser.eu",
     "envs.net",
     "matrix.org",
@@ -12,6 +10,10 @@
   ],
   "allowCustomHomeservers": true,
 
+  "calling": {
+    "livekitServiceUrl": "https://b.ruv.wtf/matrix-rtc/livekit/jwt"
+  },
+
   "featuredCommunities": {
     "openAsDefault": false,
     "spaces": [

package-lock.json

@@ -12,8 +12,10 @@
         "@atlaskit/pragmatic-drag-and-drop": "1.1.6",
         "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
         "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
+        "@capacitor/core": "8.3.4",
+        "@capacitor/local-notifications": "8.2.0",
         "@fontsource/inter": "4.5.14",
-        "@paarrot/plugin-manager": "file:../../PluginManager",
+        "@paarrot/plugin-manager": "git+http://synbox.ruv.wtf:8418/litruv/plugin-manager.git",
         "@tanstack/react-query": "5.24.1",
         "@tanstack/react-query-devtools": "5.24.1",
         "@tanstack/react-virtual": "3.2.0",
@@ -114,15 +116,6 @@
         "node": ">=16.0.0"
       }
     },
-    "../../PluginManager": {
-      "name": "@paarrot/plugin-manager",
-      "version": "1.0.0",
-      "devDependencies": {
-        "@types/node": "^25.6.0",
-        "rimraf": "^5.0.0",
-        "typescript": "^5.4.0"
-      }
-    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -1678,6 +1671,24 @@
       "integrity": "sha512-wJ8ReQbHxsAfXhrf9ixl0aYbZorRuOWpBNzm8pL8ftmSxQx/wnJD5Eg861NwJU/czy2VXFIebCeZnZrI9rktIQ==",
       "license": "(Apache-2.0 AND BSD-3-Clause)"
     },
+    "node_modules/@capacitor/core": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.3.4.tgz",
+      "integrity": "sha512-CqRQCkb6HXxcx/N7s+hHTN6ef2CmamFiRMITwm4qB840ph56mS42bzUgn6tKCP+RZjdDweiRHj9ytDDeN6jFag==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@capacitor/local-notifications": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/local-notifications/-/local-notifications-8.2.0.tgz",
+      "integrity": "sha512-fvLY0w2w4MiX+DD4+Wv4DOwOLdzKZsMDwAcRv/Juudd+QbKbn69s6cM3xVqPwAiDqfnqsY4/S8xtQD6M73wY2A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@capacitor/core": ">=8.0.0"
+      }
+    },
     "node_modules/@emotion/hash": {
       "version": "0.9.2",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
@@ -2344,8 +2355,8 @@
       }
     },
     "node_modules/@paarrot/plugin-manager": {
-      "resolved": "../../PluginManager",
+      "version": "1.0.0",
-      "link": true
+      "resolved": "git+http://synbox.ruv.wtf:8418/litruv/plugin-manager.git#6c389381df3966568a40c39d8661f9a4300f7819"
     },
     "node_modules/@react-aria/breadcrumbs": {
       "version": "3.5.20",

package.json

@@ -23,6 +23,8 @@
     "@atlaskit/pragmatic-drag-and-drop": "1.1.6",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
+    "@capacitor/core": "8.3.4",
+    "@capacitor/local-notifications": "8.2.0",
     "@fontsource/inter": "4.5.14",
     "@paarrot/plugin-manager": "git+http://synbox.ruv.wtf:8418/litruv/plugin-manager.git",
     "@tanstack/react-query": "5.24.1",

public/res/svg/notification.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.05922,0,0,1.05922,-0.562821,-0.480534)">
+        <g transform="matrix(1.6762,0,0,1.6762,-4.50707,-10.7901)">
+            <path d="M4.624,14.382C4.624,14.382 1.358,10.79 5.108,8.336C5.501,8.316 7.14,8.899 7.18,10.368C7.22,11.836 5.641,11.172 5.108,11.856C4.575,12.54 4.454,14.121 4.624,14.382Z"/>
+        </g>
+        <g transform="matrix(1.6762,0,0,1.6762,-4.50707,-10.7901)">
+            <path d="M5.08,13.547C5.08,13.547 7.28,14.842 7.291,10.74C7.592,10.971 8.588,12.107 7.713,13.777C6.838,15.446 5.392,14.322 5.08,13.547Z"/>
+        </g>
+        <g transform="matrix(1.6762,0,0,1.6762,-4.50707,-10.7901)">
+            <path d="M5.921,14.763C5.584,14.449 6.374,15.403 6.704,16.642C6.873,16.232 8.282,17.562 11.166,14.247C12.324,12.581 13.244,11.279 11.249,8.874C9.254,6.469 6.507,6.615 5.469,7.581C4.431,8.546 5.35,7.566 6.653,8.667C7.52,9.399 7.444,10.431 7.444,10.431C7.774,10.551 9.12,12.332 7.935,14.099C7.205,15.187 6.259,15.076 5.921,14.763Z"/>
+        </g>
+    </g>
+</svg>

src/app/components/RenderMessageContent.tsx

@@ -159,6 +159,24 @@ export function RenderMessageContent({
     </>
   );
 
+  // Check for custom renderer from plugins BEFORE standard type handling
+  // so plugins can intercept any msgtype including custom ones.
+  const customRendererEarly = pluginRegistry.getRenderer('message');
+  if (customRendererEarly) {
+    try {
+      const messageDataEarly = {
+        msgtype: msgType,
+        ...getContent(),
+      };
+      const customContentEarly = customRendererEarly(messageDataEarly, () => null);
+      if (customContentEarly) {
+        return customContentEarly as React.ReactElement;
+      }
+    } catch (error) {
+      console.error('[RenderMessageContent] Custom renderer error (early):', error);
+    }
+  }
+
   if (msgType === MsgType.Text) {
     return (
       <MText

src/app/components/editor/Editor.tsx

@@ -6,6 +6,8 @@ import React, {
   forwardRef,
   useCallback,
   useState,
+  useEffect,
+  useRef,
 } from 'react';
 import { Box, Scroll, Text } from 'folds';
 import { Descendant, Editor, createEditor, Transforms, Range, Element as SlateElement, Text as SlateText, Point } from 'slate';
@@ -167,6 +169,48 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
       [editor, onKeyDown]
     );
 
+    const handleBeforeInput = useCallback(
+      (event: Event) => {
+        const inputEvent = event as InputEvent;
+        
+        // Handle autocorrect replacement that causes text duplication
+        if (inputEvent.inputType === 'insertReplacementText' || 
+            inputEvent.inputType === 'insertFromComposition') {
+          const { selection } = editor;
+          if (!selection) return;
+
+          // Get the data being inserted
+          const data = inputEvent.data || inputEvent.dataTransfer?.getData('text/plain');
+          
+          if (data) {
+            event.preventDefault();
+            
+            // If there's selected text, delete it first
+            if (selection && !Range.isCollapsed(selection)) {
+              Transforms.delete(editor, { at: selection });
+            }
+            
+            // Insert the replacement text
+            editor.insertText(data);
+          }
+        }
+      },
+      [editor]
+    );
+
+    const editableRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      const editableElement = editableRef.current?.querySelector('[data-slate-editor="true"]');
+      if (!editableElement) return;
+
+      editableElement.addEventListener('beforeinput', handleBeforeInput, { capture: true });
+      
+      return () => {
+        editableElement.removeEventListener('beforeinput', handleBeforeInput, { capture: true });
+      };
+    }, [handleBeforeInput]);
+
     const renderPlaceholder = useCallback(
       ({ attributes, children }: RenderPlaceholderProps) => (
         <span {...attributes} className={css.EditorPlaceholderContainer}>
@@ -196,6 +240,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
               size="300"
               visibility="Hover"
               hideTrack
+              ref={editableRef}
             >
               <Editable
                 data-editable-name={editableName}

src/app/components/emoji-board/EmojiBoard.tsx

@@ -21,7 +21,7 @@ import { useEmojiGroupIcons } from './useEmojiGroupIcons';
 import { preventScrollWithArrowKey, stopPropagation } from '../../utils/keyboard';
 import { useRelevantImagePacks } from '../../hooks/useImagePacks';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useRecentEmoji } from '../../hooks/useRecentEmoji';
+import { useEmojiUsage } from '../../hooks/useEmojiUsage';
 import { isUserId, mxcUrlToHttp } from '../../utils/matrix';
 import { editableActiveElement, targetFromEvent } from '../../utils/dom';
 import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
@@ -53,6 +53,7 @@ import {
 import { EmojiBoardTab, EmojiType } from './types';
 import { VirtualTile } from '../virtualizer';
 
+const MOST_USED_GROUP_ID = 'most_used_group';
 const RECENT_GROUP_ID = 'recent_group';
 const SEARCH_GROUP_ID = 'search_group';
 
@@ -72,19 +73,29 @@ const useGroups = (
   imagePacks: ImagePack[]
 ): [EmojiGroupItem[], StickerGroupItem[]] => {
   const mx = useMatrixClient();
+  const { getTopEmojis } = useEmojiUsage();
 
-  const recentEmojis = useRecentEmoji(mx, 21);
   const labels = useEmojiGroupLabels();
 
   const emojiGroupItems = useMemo(() => {
     const g: EmojiGroupItem[] = [];
     if (tab !== EmojiBoardTab.Emoji) return g;
 
-    g.push({
+    // Add most-used emojis
-      id: RECENT_GROUP_ID,
+    const topShortcodes = getTopEmojis(21);
-      name: 'Recent',
+    if (topShortcodes.length > 0) {
-      items: recentEmojis,
+      const mostUsedEmojis = topShortcodes
-    });
+        .map((shortcode) => emojis.find((e) => e.shortcode === shortcode))
+        .filter((e): e is IEmoji => e !== undefined);
+      
+      if (mostUsedEmojis.length > 0) {
+        g.push({
+          id: MOST_USED_GROUP_ID,
+          name: 'Most Used',
+          items: mostUsedEmojis,
+        });
+      }
+    }
 
     imagePacks.forEach((pack) => {
       let label = pack.meta.name;
@@ -108,7 +119,7 @@ const useGroups = (
     });
 
     return g;
-  }, [mx, recentEmojis, labels, imagePacks, tab]);
+  }, [mx, labels, imagePacks, tab, getTopEmojis]);
 
   const stickerGroupItems = useMemo(() => {
     const g: StickerGroupItem[] = [];
@@ -187,10 +198,10 @@ function EmojiSidebar({ activeGroupAtom, packs, onScrollToGroup }: EmojiSidebarP
     <Sidebar>
       <SidebarStack>
         <GroupIcon
-          active={activeGroupId === RECENT_GROUP_ID}
+          active={activeGroupId === MOST_USED_GROUP_ID}
-          id={RECENT_GROUP_ID}
+          id={MOST_USED_GROUP_ID}
-          label="Recent"
+          label="Most Used"
-          icon={Icons.RecentClock}
+          icon={Icons.Heart}
           onClick={handleScrollToGroup}
         />
       </SidebarStack>
@@ -378,13 +389,30 @@ export function EmojiBoard({
   addToRecentEmoji = true,
 }: EmojiBoardProps) {
   const mx = useMatrixClient();
+  const { trackEmojiUsage, getMostUsedEmoji } = useEmojiUsage();
 
   const emojiTab = tab === EmojiBoardTab.Emoji;
   const usage = emojiTab ? ImageUsage.Emoticon : ImageUsage.Sticker;
 
+  // Get default emoji - use most used or fallback to slight_smile
+  const defaultPreview = useMemo((): PreviewData => {
+    if (!emojiTab) return undefined;
+    
+    const mostUsedShortcode = getMostUsedEmoji();
+    if (mostUsedShortcode) {
+      // Find emoji by shortcode
+      const emoji = emojis.find((e) => e.shortcode === mostUsedShortcode);
+      if (emoji) {
+        return { key: emoji.unicode, shortcode: emoji.shortcode };
+      }
+    }
+    // Fallback to default
+    return DefaultEmojiPreview;
+  }, [emojiTab, getMostUsedEmoji]);
+
   const previewAtom = useMemo(
-    () => createPreviewDataAtom(emojiTab ? DefaultEmojiPreview : undefined),
+    () => createPreviewDataAtom(defaultPreview),
-    [emojiTab]
+    [defaultPreview]
   );
   const activeGroupIdAtom = useMemo(() => atom<string | undefined>(undefined), []);
   const setActiveGroupId = useSetAtom(activeGroupIdAtom);
@@ -439,6 +467,10 @@ export function EmojiBoard({
       onEmojiSelect?.(emojiInfo.data, emojiInfo.shortcode);
       if (!evt.altKey && !evt.shiftKey && addToRecentEmoji) {
         addRecentEmoji(mx, emojiInfo.data);
+        // Track emoji usage for favorites
+        trackEmojiUsage(emojiInfo.shortcode).catch((err) => {
+          console.error('Failed to track emoji usage:', err);
+        });
       }
     }
     if (emojiInfo.type === EmojiType.CustomEmoji) {

src/app/components/media/media.css.ts

@@ -7,6 +7,7 @@ export const Image = style([
     display: 'block',
     maxWidth: '100%',
     maxHeight: '100%',
+    borderRadius: 'inherit',
     imageRendering: 'auto',
     backfaceVisibility: 'hidden',
     transform: 'translateZ(0)',

src/app/components/message/MsgTypeRenderers.tsx

@@ -80,7 +80,10 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }:
   const { body, formatted_body: customBody } = content;
 
   if (typeof body !== 'string') return <BrokenContent />;
-  const trimmedBody = trimReplyFromBody(body);
+  const trimmedBody = trimReplyFromBody(body).trim();
+  const trimmedCustomBody = typeof customBody === 'string' 
+    ? customBody.trim().replace(/(<br\s*\/?>\s*)+$/gi, '') 
+    : undefined;
   const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
   const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
 
@@ -93,7 +96,7 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }:
       >
         {renderBody({
           body: trimmedBody,
-          customBody: typeof customBody === 'string' ? customBody : undefined,
+          customBody: trimmedCustomBody,
         })}
         {edited && <MessageEditedContent />}
       </MessageTextBody>
@@ -119,7 +122,10 @@ export function MEmote({
   const { body, formatted_body: customBody } = content;
 
   if (typeof body !== 'string') return <BrokenContent />;
-  const trimmedBody = trimReplyFromBody(body);
+  const trimmedBody = trimReplyFromBody(body).trim();
+  const trimmedCustomBody = typeof customBody === 'string' 
+    ? customBody.trim().replace(/(<br\s*\/?>\s*)+$/gi, '') 
+    : undefined;
   const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
   const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
 
@@ -133,7 +139,7 @@ export function MEmote({
         <b>{`${displayName} `}</b>
         {renderBody({
           body: trimmedBody,
-          customBody: typeof customBody === 'string' ? customBody : undefined,
+          customBody: trimmedCustomBody,
         })}
         {edited && <MessageEditedContent />}
       </MessageTextBody>
@@ -152,7 +158,10 @@ export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNot
   const { body, formatted_body: customBody } = content;
 
   if (typeof body !== 'string') return <BrokenContent />;
-  const trimmedBody = trimReplyFromBody(body);
+  const trimmedBody = trimReplyFromBody(body).trim();
+  const trimmedCustomBody = typeof customBody === 'string' 
+    ? customBody.trim().replace(/(<br\s*\/?>\s*)+$/gi, '') 
+    : undefined;
   const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
   const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
 
@@ -165,7 +174,7 @@ export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNot
       >
         {renderBody({
           body: trimmedBody,
-          customBody: typeof customBody === 'string' ? customBody : undefined,
+          customBody: trimmedCustomBody,
         })}
         {edited && <MessageEditedContent />}
       </MessageTextBody>
@@ -197,7 +206,7 @@ export function MImage({ content, renderImageContent, outlined }: MImageProps) {
   }
 
   return (
-    <Attachment outlined={outlined}>
+    <Attachment outlined={outlined} transparent>
       <AttachmentBox>
         {renderImageContent({
           body: content.body || 'Image',

src/app/components/message/Reply.css.ts

@@ -32,7 +32,9 @@ export const Reply = style({
 
 export const ReplyContent = style({
   opacity: config.opacity.P300,
-
+  overflow: 'clip',
+  overflowY: 'clip',
+  lineHeight: '1.5',
   selectors: {
     [`${Reply}:hover &`]: {
       opacity: config.opacity.P500,

src/app/components/message/content/style.css.ts

@@ -8,6 +8,8 @@ export const RelativeBase = style([
     display: 'flex',
     maxWidth: '100%',
     maxHeight: '100%',
+    borderRadius: '7px',
+    overflow: 'hidden',
   },
 ]);
 
@@ -19,6 +21,8 @@ export const AbsoluteContainer = style([
     justifyContent: 'center',
     maxWidth: '100%',
     maxHeight: '100%',
+    borderRadius: 'inherit',
+    overflow: 'hidden',
   },
 ]);
 

src/app/components/message/layout/layout.css.ts

@@ -188,8 +188,10 @@ export const BubbleLeftArrow = style({
 
 export const Username = style({
   overflow: 'hidden',
+  overflowY: 'clip',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
+  lineHeight: '1.5',
   // Allow text selection while keeping button clickable
   userSelect: 'text',
   WebkitUserSelect: 'text',
@@ -210,6 +212,9 @@ export const UsernameBold = style({
 export const MessageTextBody = recipe({
   base: {
     wordBreak: 'break-word',
+    overflow: 'clip',
+    overflowY: 'clip',
+    lineHeight: '1.5',
   },
   variants: {
     preWrap: {

src/app/components/user-profile/UserHero.tsx

@@ -37,6 +37,13 @@ export function UserHero({ userId, avatarUrl, avatarMxc, presence }: UserHeroPro
   const bannerUrl = useOtherUserBanner(userId, avatarMxc); // Now returns blob URL directly
   const profileStyle = useOtherUserProfileStyle(userId, avatarMxc);
 
+  console.log('[UserHero]', {
+    userId,
+    avatarMxc,
+    bannerUrl,
+    profileStyle,
+  });
+
   return (
     <Box
       direction="Column"
@@ -125,6 +132,13 @@ export function UserHeroName({ displayName, userId, avatarMxc }: UserHeroNamePro
   const username = getMxIdLocalPart(userId);
   const userColor = useOtherUserColor(userId, avatarMxc);
 
+  console.log('[UserHeroName]', {
+    userId,
+    avatarMxc,
+    userColor,
+    fallbackColor: colorMXID(userId),
+  });
+
   return (
     <Box grow="Yes" direction="Column" gap="100">
       <Box alignItems="Baseline" gap="200" wrap="Wrap">

src/app/components/user-profile/UserRoomProfile.tsx

@@ -26,7 +26,8 @@ import { DirectCreateSearchParams } from '../../pages/paths';
 import { getContrastingTextColor, stripAlphaFromColor, getTextShadowColor } from '../../utils/common';
 import classNames from 'classnames';
 import { BreakWord, LineClamp3 } from '../../styles/Text.css';
-import colorMXID from '../../../util/colorMXID';
+import colorMXID, { getColorMXIDValue } from '../../../util/colorMXID';
+import { useOtherUserColor } from '../../hooks/useUserColor';
 
 type UserRoomProfileProps = {
   userId: string;
@@ -64,6 +65,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
 
   const presence = useUserPresence(userId);
   const profileStyle = useOtherUserProfileStyle(userId, avatarMxc);
+  const userColor = useOtherUserColor(userId, avatarMxc);
 
   // Build gradient CSS if configured
   const gradientStyle = profileStyle.gradient
@@ -87,9 +89,25 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
     (canKickUser && membership === Membership.Join) ||
     (canBanUser && membership !== Membership.Ban);
 
-  const profileColor = profileStyle.avatarBorderColor ? stripAlphaFromColor(profileStyle.avatarBorderColor) : colorMXID(userId);
+  // Use userColor for text, or fall back to colorMXID
+  const profileColor = userColor ? userColor : getColorMXIDValue(userId);
   const profileTextShadow = `0 1px 4px ${getTextShadowColor(profileColor)}`;
-  const pillBgColor = profileStyle.avatarBorderColor ? stripAlphaFromColor(profileStyle.avatarBorderColor) : undefined;
+  
+  // Use avatarBorderColor for pill background only if it has visible alpha (not fully transparent)
+  const hasVisibleBorder = profileStyle.avatarBorderColor && !profileStyle.avatarBorderColor.endsWith('00');
+  const pillBgColor = hasVisibleBorder ? stripAlphaFromColor(profileStyle.avatarBorderColor!) : undefined;
+
+  console.log('[UserRoomProfile]', {
+    userId,
+    avatarMxc,
+    userColor,
+    profileStyle,
+    profileColor,
+    profileTextShadow,
+    hasVisibleBorder,
+    pillBgColor,
+    fallbackColorMXID: getColorMXIDValue(userId),
+  });
 
   return (
     <Box direction="Column">

src/app/features/ShareRoomPicker.tsx

@@ -0,0 +1,316 @@
+import { useAtomValue } from 'jotai';
+import React, { ChangeEventHandler, useCallback, useMemo, useRef, useState } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import FocusTrap from 'focus-trap-react';
+import {
+  Avatar,
+  Box,
+  Button,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Input,
+  MenuItem,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Scroll,
+  Text,
+  config,
+} from 'folds';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+import { useAllJoinedRoomsSet, useGetRoom } from '../hooks/useGetRoom';
+import { allRoomsAtom } from '../state/room-list/roomList';
+import { mDirectAtom } from '../state/mDirectList';
+import { useDirects, useRooms } from '../state/hooks/roomList';
+import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../utils/room';
+import { RoomAvatar, RoomIcon } from '../components/room-avatar';
+import { nameInitials } from '../utils/common';
+import { useMediaAuthentication } from '../hooks/useMediaAuthentication';
+import { factoryRoomIdByActivity } from '../utils/sort';
+import {
+  SearchItemStrGetter,
+  useAsyncSearch,
+  UseAsyncSearchOptions,
+} from '../hooks/useAsyncSearch';
+import { VirtualTile } from '../components/virtualizer';
+import { AndroidSharePayload } from '../utils/androidShare';
+import { stopPropagation } from '../utils/keyboard';
+
+const SEARCH_OPTS: UseAsyncSearchOptions = {
+  limit: 200,
+  matchOptions: {
+    contain: true,
+  },
+};
+
+type ShareRoomPickerProps = {
+  /** The pending share payload to display a preview of. */
+  share: AndroidSharePayload;
+  /** Called when the user picks a room. */
+  onPick: (roomId: string) => void;
+  /** Called when the user dismisses without picking. */
+  onDismiss: () => void;
+};
+
+/**
+ * Full-screen modal that lets the user pick a room to send
+ * an incoming Android share intent into.
+ */
+export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [confirmRoomId, setConfirmRoomId] = useState<string | null>(null);
+
+  const mDirects = useAtomValue(mDirectAtom);
+  const allRoomsSet = useAllJoinedRoomsSet();
+  const getRoom = useGetRoom(allRoomsSet);
+  const rooms = useRooms(mx, allRoomsAtom, mDirects);
+  const directs = useDirects(mx, allRoomsAtom, mDirects);
+
+  const allItems = useMemo(
+    () => [...rooms, ...directs].sort(factoryRoomIdByActivity(mx)),
+    [mx, rooms, directs]
+  );
+
+  const getRoomNameStr: SearchItemStrGetter<string> = useCallback(
+    (rId) => getRoom(rId)?.name ?? rId,
+    [getRoom]
+  );
+
+  const [searchResult, searchRoom, resetSearch] = useAsyncSearch(
+    allItems,
+    getRoomNameStr,
+    SEARCH_OPTS
+  );
+
+  const items = searchResult ? searchResult.items : allItems;
+
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 48,
+    overscan: 8,
+  });
+  const vItems = virtualizer.getVirtualItems();
+
+  const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
+    const value = evt.currentTarget.value.trim();
+    if (!value) {
+      resetSearch();
+      return;
+    }
+    searchRoom(value);
+  };
+
+  const handleRoomClick: React.MouseEventHandler<HTMLButtonElement> = (evt) => {
+    const roomId = evt.currentTarget.getAttribute('data-room-id');
+    if (roomId) {
+      setConfirmRoomId(roomId);
+    }
+  };
+
+  const handleConfirm = useCallback(() => {
+    if (confirmRoomId) {
+      onPick(confirmRoomId);
+    }
+  }, [confirmRoomId, onPick]);
+
+  const handleCancelConfirm = useCallback(() => {
+    setConfirmRoomId(null);
+  }, []);
+
+  const previewText = share.text?.slice(0, 80) ?? share.subject?.slice(0, 80);
+  const fileCount = share.files.length;
+
+  return (
+    <>
+      <Overlay open>
+      <FocusTrap
+        focusTrapOptions={{
+          initialFocus: false,
+          clickOutsideDeactivates: true,
+          onDeactivate: onDismiss,
+          escapeDeactivates: stopPropagation,
+        }}
+      >
+        <Box
+          grow="Yes"
+          direction="Column"
+          style={{
+            position: 'fixed',
+            inset: 0,
+            zIndex: 999,
+            backgroundColor: '#1a1d23',
+            paddingTop: '60px',
+          }}
+        >
+          <Header
+            size="500"
+            style={{ padding: config.space.S400 }}
+          >
+            <Box grow="Yes" direction="Column" gap="100" style={{ minWidth: 0, maxWidth: '80%' }}>
+              <Text size="H4">Share to Room</Text>
+              {(previewText || fileCount > 0) && (
+                <Text size="T200" priority="300" style={{ opacity: 0.7, wordBreak: 'break-word', whiteSpace: 'normal' }}>
+                  {previewText
+                    ? `"${previewText}${(share.text?.length ?? 0) > 80 ? '…' : ''}"`
+                    : `${fileCount} file${fileCount !== 1 ? 's' : ''}`}
+                </Text>
+              )}
+            </Box>
+            <Box shrink="No">
+              <IconButton size="300" radii="300" onClick={onDismiss}>
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Box>
+          </Header>
+
+          <Box
+            style={{
+              padding: config.space.S200,
+              paddingTop: config.space.S300,
+            }}
+          >
+            <Input
+              onChange={handleSearchChange}
+              before={<Icon size="200" src={Icons.Search} />}
+              placeholder="Search rooms…"
+              size="400"
+              variant="Background"
+              outlined
+              autoFocus
+              style={{ width: '100%' }}
+            />
+          </Box>
+
+          <Scroll ref={scrollRef} size="300" hideTrack style={{ flex: 1, minHeight: 0 }}>
+            <Box style={{ padding: config.space.S300 }} direction="Column">
+              {vItems.length === 0 && (
+                <Box
+                  style={{ padding: `${config.space.S700} 0` }}
+                  alignItems="Center"
+                  justifyContent="Center"
+                  direction="Column"
+                  gap="100"
+                >
+                  <Text size="H6" align="Center">
+                    {searchResult ? 'No Match Found' : 'No Rooms'}
+                  </Text>
+                  <Text size="T200" align="Center" priority="300">
+                    {searchResult
+                      ? `No rooms found for "${searchResult.query}".`
+                      : 'You have no rooms to share into.'}
+                  </Text>
+                </Box>
+              )}
+              <Box style={{ position: 'relative', height: virtualizer.getTotalSize() }}>
+                {vItems.map((vItem) => {
+                  const roomId = items[vItem.index];
+                  const room = getRoom(roomId);
+                  if (!room) return null;
+                  const isDm = mDirects.has(roomId);
+
+                  const avatarSrc = isDm
+                    ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
+                    : getRoomAvatarUrl(mx, room, 96, useAuthentication);
+
+                  return (
+                    <VirtualTile
+                      virtualItem={vItem}
+                      style={{ paddingBottom: config.space.S100 }}
+                      ref={virtualizer.measureElement}
+                      key={roomId}
+                    >
+                      <MenuItem
+                        data-room-id={roomId}
+                        onClick={handleRoomClick}
+                        variant="Surface"
+                        size="400"
+                        radii="400"
+                        before={
+                          <Avatar size="300" radii={isDm ? '400' : '300'}>
+                            {avatarSrc ? (
+                              <RoomAvatar
+                                roomId={roomId}
+                                src={avatarSrc}
+                                alt={room.name}
+                                renderFallback={() => (
+                                  <Text as="span" size="H6">
+                                    {nameInitials(room.name)}
+                                  </Text>
+                                )}
+                              />
+                            ) : (
+                              <RoomIcon room={room} size="200" filled />
+                            )}
+                          </Avatar>
+                        }
+                      >
+                        <Box grow="Yes" direction="Column">
+                          <Text size="B400" truncate>
+                            {room.name}
+                          </Text>
+                        </Box>
+                      </MenuItem>
+                    </VirtualTile>
+                  );
+                })}
+              </Box>
+            </Box>
+          </Scroll>
+        </Box>
+      </FocusTrap>
+    </Overlay>
+
+    {confirmRoomId && (() => {
+      const room = getRoom(confirmRoomId);
+      const roomName = room?.name ?? confirmRoomId;
+      const isDm = mDirects.has(confirmRoomId);
+      return (
+        <Overlay open backdrop={<OverlayBackdrop />}>
+          <OverlayCenter>
+            <FocusTrap
+              focusTrapOptions={{
+                initialFocus: false,
+                onDeactivate: handleCancelConfirm,
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              <Modal style={{ maxWidth: '280px' }}>
+                <Box direction="Column" gap="100" style={{ padding: config.space.S300 }}>
+                  <Box direction="Column" gap="100">
+                    <Text size="H4">Share to {isDm ? 'Person' : 'Room'}?</Text>
+                    <Text size="T300" priority="300">
+                      Send to <strong>{roomName}</strong>?
+                    </Text>
+                  </Box>
+                  <Box gap="200" justifyContent="End">
+                    <Button
+                      onClick={handleCancelConfirm}
+                      variant="Secondary"
+                      size="400"
+                    >
+                      <Text size="B400">Cancel</Text>
+                    </Button>
+                    <Button
+                      onClick={handleConfirm}
+                      variant="Primary"
+                      size="400"
+                    >
+                      <Text size="B400">Share</Text>
+                    </Button>
+                  </Box>
+                </Box>
+              </Modal>
+            </FocusTrap>
+          </OverlayCenter>
+        </Overlay>
+      );
+    })()}
+    </>
+  );
+}

src/app/features/room/RoomInput.tsx

@@ -125,6 +125,17 @@ import { useOtherUserColor } from '../../hooks/useUserColor';
 import { getMemberAvatarMxc } from '../../utils/room';
 import { convertEmoticons, convertEmoticonsInHtml } from '../../utils/emoticonConverter';
 
+/**
+ * Creates a UUID used to group image events into one carousel.
+ */
+const createCarouselUuid = (): string => {
+  if (typeof globalThis.crypto?.randomUUID === 'function') {
+    return globalThis.crypto.randomUUID();
+  }
+
+  return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+};
+
 interface RoomInputProps {
   editor: Editor;
   fileDropContainerRef: RefObject<HTMLElement>;
@@ -305,12 +316,34 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     };
 
     const handleSendUpload = async (uploads: UploadSuccess[]) => {
+      const imageUploads = uploads.filter((upload) => {
+        const fileItem = selectedFiles.find((f) => f.file === upload.file);
+        return !!fileItem && fileItem.file.type.startsWith('image');
+      });
+      const carouselUuid = imageUploads.length > 1 ? createCarouselUuid() : undefined;
+      const imageUploadIndexByFile = new Map(
+        imageUploads.map((upload, index) => [upload.file, index] as const)
+      );
+
       const contentsPromises = uploads.map(async (upload) => {
         const fileItem = selectedFiles.find((f) => f.file === upload.file);
         if (!fileItem) throw new Error('Broken upload');
 
         if (fileItem.file.type.startsWith('image')) {
-          return getImageMsgContent(mx, fileItem, upload.mxc);
+          const imageIndex = imageUploadIndexByFile.get(upload.file);
+
+          return getImageMsgContent(
+            mx,
+            fileItem,
+            upload.mxc,
+            carouselUuid !== undefined && imageIndex !== undefined
+              ? {
+                  uuid: carouselUuid,
+                  index: imageIndex,
+                  total: imageUploads.length,
+                }
+              : undefined
+          );
         }
         if (fileItem.file.type.startsWith('video')) {
           return getVideoMsgContent(mx, fileItem, upload.mxc);
@@ -405,10 +438,10 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         return;
       }
 
-      if (plainText === '') return;
+      let body = plainText.trim();
+      let formattedBody = customHtml.trim().replace(/(<br\s*\/?>\s*)+$/gi, '');
 
-      let body = plainText;
+      if (body === '') return;
-      let formattedBody = customHtml;
 
       // Apply emoticon conversion if enabled
       if (autoConvertEmoticons) {

src/app/features/room/RoomTimeline.css.ts

@@ -1,5 +1,6 @@
 import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
-import { DefaultReset, config } from 'folds';
+import { style } from '@vanilla-extract/css';
+import { DefaultReset, color, config, toRem } from 'folds';
 
 export const TimelineFloat = recipe({
   base: [
@@ -28,3 +29,81 @@ export const TimelineFloat = recipe({
 });
 
 export type TimelineFloatVariants = RecipeVariants<typeof TimelineFloat>;
+
+export const CarouselScroller = style([
+  DefaultReset,
+  {
+    display: 'flex',
+    gap: config.space.S200,
+    overflowX: 'auto',
+    overflowY: 'hidden',
+    paddingBottom: config.space.S100,
+    width: '100%',
+    cursor: 'grab',
+    userSelect: 'none',
+  },
+]);
+
+export const CarouselScrollerDragging = style([
+  DefaultReset,
+  {
+    cursor: 'grabbing',
+  },
+]);
+
+export const CarouselItem = style([
+  DefaultReset,
+  {
+    flex: '0 0 auto',
+    maxWidth: '100%',
+  },
+]);
+
+export const CarouselEdgeGradient = recipe({
+  base: [
+    DefaultReset,
+    {
+      position: 'absolute',
+      top: 0,
+      height: '100%',
+      width: toRem(16),
+      pointerEvents: 'none',
+      zIndex: 1,
+    },
+  ],
+  variants: {
+    position: {
+      Left: {
+        left: 0,
+        background: `linear-gradient(to right, ${color.Surface.Container}, rgba(116, 116, 116, 0))`,
+      },
+      Right: {
+        right: 0,
+        background: `linear-gradient(to left, ${color.Surface.Container}, rgba(116, 116, 116, 0))`,
+      },
+    },
+  },
+});
+
+export const CarouselScrollBtn = recipe({
+  base: [
+    DefaultReset,
+    {
+      position: 'absolute',
+      top: '50%',
+      zIndex: 2,
+    },
+  ],
+  variants: {
+    position: {
+      Left: {
+        left: 0,
+        transform: 'translate(-25%, -50%)',
+      },
+      Right: {
+        right: 0,
+        transform: 'translate(25%, -50%)',
+      },
+    },
+  },
+});

src/app/features/room/RoomTimeline.tsx

@@ -19,6 +19,7 @@ import {
   IContent,
   MatrixClient,
   MatrixEvent,
+  MsgType,
   Room,
   RoomEvent,
   RoomEventHandlerMap,
@@ -35,6 +36,7 @@ import {
   Chip,
   ContainerColor,
   Icon,
+  IconButton,
   Icons,
   Line,
   Scroll,
@@ -52,7 +54,7 @@ import { eventWithShortcode, factoryEventSentBy, getMxIdLocalPart } from '../../
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useVirtualPaginator, ItemRange } from '../../hooks/useVirtualPaginator';
 import { useAlive } from '../../hooks/useAlive';
-import { editableActiveElement, scrollToBottom } from '../../utils/dom';
+import { autoScrollToBottom, editableActiveElement } from '../../utils/dom';
 import {
   DefaultPlaceholder,
   CompactPlaceholder,
@@ -62,6 +64,7 @@ import {
   Time,
   MessageNotDecryptedContent,
   RedactedContent,
+  MImage,
   MSticker,
   ImageContent,
   EventContent,
@@ -85,7 +88,7 @@ import {
   reactionOrEditEvent,
 } from '../../utils/room';
 import { useSetting } from '../../state/hooks/settings';
-import { MessageLayout, settingsAtom } from '../../state/settings';
+import { MessageLayout, ScrollToLatestBehavior, settingsAtom } from '../../state/settings';
 import { useMatrixEventRenderer } from '../../hooks/useMatrixEventRenderer';
 import { Reactions, Message, Event, EncryptedContent } from './message';
 import { useMemberEventParser } from '../../hooks/useMemberEventParser';
@@ -105,6 +108,12 @@ import { roomIdToReplyDraftAtomFamily } from '../../state/room/roomInputDrafts';
 import { activeThreadIdAtomFamily } from '../../state/activeThread';
 import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { GetContentCallback, MessageEvent, StateEvent } from '../../../types/matrix/room';
+import {
+  IImageContent,
+  PAARROT_CAROUSEL_INDEX_PROPERTY_NAME,
+  PAARROT_CAROUSEL_TOTAL_PROPERTY_NAME,
+  PAARROT_CAROUSEL_UUID_PROPERTY_NAME,
+} from '../../../types/matrix/common';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { useDocumentFocusChange } from '../../hooks/useDocumentFocusChange';
 import { RenderMessageContent } from '../../components/RenderMessageContent';
@@ -146,6 +155,55 @@ interface CallEventInfo {
   mEvent: MatrixEvent;
 }
 
+interface CarouselEventMetadata {
+  uuid: string;
+  index: number;
+  total: number;
+  content: IImageContent;
+}
+
+interface CarouselRenderableEvent {
+  mEvent: MatrixEvent;
+  mEventId: string;
+  item: number;
+  content: IImageContent;
+  index: number;
+}
+
+/**
+ * Extracts carousel metadata from an m.image room message.
+ */
+const getCarouselEventMetadata = (mEvent: MatrixEvent): CarouselEventMetadata | undefined => {
+  if (mEvent.getType() !== MessageEvent.RoomMessage || mEvent.isRedacted()) {
+    return undefined;
+  }
+
+  const content = mEvent.getContent() as IImageContent;
+  const uuid = content[PAARROT_CAROUSEL_UUID_PROPERTY_NAME];
+  const index = content[PAARROT_CAROUSEL_INDEX_PROPERTY_NAME];
+  const total = content[PAARROT_CAROUSEL_TOTAL_PROPERTY_NAME];
+
+  if (content.msgtype !== MsgType.Image) {
+    return undefined;
+  }
+  if (typeof uuid !== 'string') {
+    return undefined;
+  }
+  if (typeof index !== 'number' || !Number.isInteger(index) || index < 0) {
+    return undefined;
+  }
+  if (typeof total !== 'number' || !Number.isInteger(total) || total < 1) {
+    return undefined;
+  }
+
+  return {
+    uuid,
+    index,
+    total,
+    content,
+  };
+};
+
 const TimelineFloat = as<'div', css.TimelineFloatVariants>(
   ({ position, className, ...props }, ref) => (
     <Box
@@ -169,6 +227,198 @@ const TimelineDivider = as<'div', { variant?: ContainerColor | 'Inherit' }>(
   )
 );
 
+type CarouselScrollerProps = {
+  children: React.ReactNode;
+};
+
+const CarouselScroller = ({ children }: CarouselScrollerProps) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const backAnchorRef = useRef<HTMLDivElement>(null);
+  const frontAnchorRef = useRef<HTMLDivElement>(null);
+  const [backVisible, setBackVisible] = useState(true);
+  const [frontVisible, setFrontVisible] = useState(true);
+  const dragStateRef = useRef({
+    startX: 0,
+    startScrollLeft: 0,
+    dragging: false,
+    moved: false,
+    suppressClick: false,
+  });
+  const [isDragging, setIsDragging] = useState(false);
+
+  const intersectionObserver = useIntersectionObserver(
+    useCallback((entries) => {
+      const backAnchor = backAnchorRef.current;
+      const frontAnchor = frontAnchorRef.current;
+      const backEntry = backAnchor && getIntersectionObserverEntry(backAnchor, entries);
+      const frontEntry = frontAnchor && getIntersectionObserverEntry(frontAnchor, entries);
+      if (backEntry) {
+        setBackVisible(backEntry.isIntersecting);
+      }
+      if (frontEntry) {
+        setFrontVisible(frontEntry.isIntersecting);
+      }
+    }, []),
+    useCallback(
+      () => ({
+        root: scrollRef.current,
+        rootMargin: '10px',
+      }),
+      []
+    )
+  );
+
+  useEffect(() => {
+    const backAnchor = backAnchorRef.current;
+    const frontAnchor = frontAnchorRef.current;
+    if (backAnchor) intersectionObserver?.observe(backAnchor);
+    if (frontAnchor) intersectionObserver?.observe(frontAnchor);
+
+    return () => {
+      if (backAnchor) intersectionObserver?.unobserve(backAnchor);
+      if (frontAnchor) intersectionObserver?.unobserve(frontAnchor);
+    };
+  }, [intersectionObserver]);
+
+  const handleMouseDown = (evt: React.MouseEvent<HTMLDivElement>) => {
+    if (evt.button !== 0) return;
+    const scroll = scrollRef.current;
+    if (!scroll) return;
+
+    const dragState = dragStateRef.current;
+    dragState.startX = evt.clientX;
+    dragState.startScrollLeft = scroll.scrollLeft;
+    dragState.dragging = true;
+    dragState.moved = false;
+    dragState.suppressClick = false;
+    setIsDragging(true);
+  };
+
+  const handleMouseMove = (evt: React.MouseEvent<HTMLDivElement>) => {
+    const dragState = dragStateRef.current;
+    if (!dragState.dragging) {
+      return;
+    }
+
+    evt.preventDefault();
+    const scroll = scrollRef.current;
+    if (!scroll) return;
+
+    const deltaX = evt.clientX - dragState.startX;
+    if (Math.abs(deltaX) > 5) {
+      dragState.moved = true;
+    }
+    scroll.scrollLeft = dragState.startScrollLeft - deltaX;
+  };
+
+  const endDrag = () => {
+    const dragState = dragStateRef.current;
+    if (!dragState.dragging) return;
+
+    if (dragState.moved) {
+      dragState.suppressClick = true;
+    }
+    dragState.dragging = false;
+    setIsDragging(false);
+  };
+
+  const handleClickCapture = (evt: React.MouseEvent<HTMLDivElement>) => {
+    const dragState = dragStateRef.current;
+    if (!dragState.suppressClick) {
+      return;
+    }
+
+    dragState.suppressClick = false;
+    evt.preventDefault();
+    evt.stopPropagation();
+  };
+
+  const handleScrollFront = () => {
+    const scroll = scrollRef.current;
+    if (!scroll) return;
+
+    scroll.scrollTo({
+      left: scroll.scrollLeft + scroll.offsetWidth / 1.3,
+      behavior: 'smooth',
+    });
+  };
+
+  const handleScrollBack = () => {
+    const scroll = scrollRef.current;
+    if (!scroll) return;
+
+    scroll.scrollTo({
+      left: scroll.scrollLeft - scroll.offsetWidth / 1.3,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <Box style={{ position: 'relative' }}>
+      <Box
+        ref={scrollRef}
+        className={classNames(css.CarouselScroller, isDragging && css.CarouselScrollerDragging)}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={endDrag}
+        onMouseLeave={endDrag}
+        onClickCapture={handleClickCapture}
+      >
+        <div ref={backAnchorRef} />
+        {children}
+        <div ref={frontAnchorRef} />
+      </Box>
+
+      {!backVisible && (
+        <>
+          <div className={css.CarouselEdgeGradient({ position: 'Left' })} />
+          <IconButton
+            className={css.CarouselScrollBtn({ position: 'Left' })}
+            variant="Secondary"
+            radii="Pill"
+            size="300"
+            outlined
+            onClick={handleScrollBack}
+          >
+            <Icon size="300" src={Icons.ArrowLeft} />
+          </IconButton>
+        </>
+      )}
+
+      {!frontVisible && (
+        <>
+          <div className={css.CarouselEdgeGradient({ position: 'Right' })} />
+          <IconButton
+            className={css.CarouselScrollBtn({ position: 'Right' })}
+            variant="Primary"
+            radii="Pill"
+            size="300"
+            outlined
+            onClick={handleScrollFront}
+          >
+            <Icon size="300" src={Icons.ArrowRight} />
+          </IconButton>
+        </>
+      )}
+    </Box>
+  );
+};
+
+const getCarouselItemWidth = (content: IImageContent): string => {
+  const width = content.info?.w;
+  const height = content.info?.h;
+
+  if (!width || !height || height <= 0) {
+    return 'min(24rem, 72vw)';
+  }
+
+  const aspectRatio = width / height;
+  const baseHeightRem = 22;
+  const computedWidthRem = Math.max(11, Math.min(24, baseHeightRem * aspectRatio));
+
+  return `min(${computedWidthRem}rem, 72vw)`;
+};
+
 export const getLiveTimeline = (room: Room): EventTimeline =>
   room.getUnfilteredTimelineSet().getLiveTimeline();
 
@@ -474,6 +724,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
 
   const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
   const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+  const [scrollToLatestBehavior] = useSetting(settingsAtom, 'scrollToLatestBehavior');
 
   // Track consecutive call member events for collapsing
   const pendingCallEventsRef = useRef<CallEventInfo[]>([]);
@@ -513,10 +764,13 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const space = useSpaceOptionally();
   const markAsRead = useMarkAsRead(mx);
   const location = useLocation();
+  const scrollToLatest = (location.state as { scrollToLatest?: boolean } | null)?.scrollToLatest;
 
   const imagePackRooms: Room[] = useImagePackRooms(room.roomId, roomToParents);
 
-  const [unreadInfo, setUnreadInfo] = useState(() => getRoomUnreadInfo(room, true));
+  const [unreadInfo, setUnreadInfo] = useState(() =>
+    getRoomUnreadInfo(room, scrollToLatestBehavior !== ScrollToLatestBehavior.Always)
+  );
   const readUptoEventIdRef = useRef<string>();
   if (unreadInfo) {
     readUptoEventIdRef.current = unreadInfo.readUptoEventId;
@@ -527,16 +781,18 @@ 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 timelineContentRef = useRef<HTMLDivElement>(null);
+  const timelineContentHeightRef = useRef(0);
   const scrollToBottomRef = useRef({
     count: 0,
     smooth: true,
+    force: false,
   });
 
   const [focusItem, setFocusItem] = useState<
@@ -636,6 +892,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       setTimeline(getInitialTimeline(room));
       scrollToBottomRef.current.count += 1;
       scrollToBottomRef.current.smooth = false;
+      scrollToBottomRef.current.force = true;
     }, [alive, room])
   );
 
@@ -644,52 +901,49 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     useCallback(
       (mEvt: MatrixEvent) => {
         const isOwnMessage = mEvt.getSender() === mx.getUserId();
-        const shouldScroll = atBottomRef.current || (shouldAutoScrollRef.current && isOwnMessage);
+        const shouldStickToBottom = atBottomRef.current || isOwnMessage;
 
-        if (shouldScroll) {
+        // Always update timeline with new message
-          if (isOwnMessage) {
+        setTimeline((ct) => ({
-            shouldAutoScrollRef.current = true;
+          ...ct,
-          }
+          range: {
-
+            start: ct.range.start + 1,
-          if (document.hasFocus() && (!unreadInfo || isOwnMessage)) {
+            end: ct.range.end + 1,
-            requestAnimationFrame(() => markAsRead(mEvt.getRoomId()!, hideActivity));
+          },
-          }
+        }));
-
-          if (!document.hasFocus() && !unreadInfo) {
-            setUnreadInfo(getRoomUnreadInfo(room));
-          }
 
+        // Handle own messages and focus
+        if (isOwnMessage) {
           setLatestUnreadMessage(null);
-          scrollToBottomRef.current.count += 1;
+          if (document.hasFocus() && (!unreadInfo)) {
-          scrollToBottomRef.current.smooth = true;
+            const roomId = mEvt.getRoomId();
-
+            if (roomId) {
-          setTimeline((ct) => ({
+              requestAnimationFrame(() => markAsRead(roomId, hideActivity));
-            ...ct,
+            }
-            range: {
+          }
-              start: ct.range.start + 1,
+        } else if (!document.hasFocus() && !unreadInfo) {
-              end: ct.range.end + 1,
+          // Show unread notification for other users' messages when unfocused
-            },
+          setUnreadInfo(getRoomUnreadInfo(room));
-          }));
-          return;
         }
 
-        if (!isOwnMessage) {
+        // Preserve the pre-update bottom state so a newly added message keeps the view pinned.
-          shouldAutoScrollRef.current = false;
+        scrollToBottomRef.current.count += 1;
-          const senderName = getMemberDisplayName(room, mEvt.getSender() ?? '') 
+        scrollToBottomRef.current.smooth = !isOwnMessage;
-            ?? getMxIdLocalPart(mEvt.getSender() ?? '') 
+        scrollToBottomRef.current.force = shouldStickToBottom;
-            ?? 'Unknown';
+
+        // Show unread message preview for incoming messages when not at bottom
+        if (!isOwnMessage && !atBottomRef.current) {
+          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,
+            content: messageText.length > 100 ? `${messageText.substring(0, 100)}...` : messageText,
           });
         }
-
-        setTimeline((ct) => ({ ...ct }));
-        if (!unreadInfo) {
-          setUnreadInfo(getRoomUnreadInfo(room));
-        }
       },
       [mx, room, unreadInfo, hideActivity, markAsRead]
     )
@@ -750,13 +1004,35 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         if (!editorBaseEntry || !scrollElement) return;
 
         if (atBottomRef.current) {
-          scrollToBottom(scrollElement);
+          autoScrollToBottom(scrollElement, false, true);
         }
       };
     }, [getScrollElement, roomInputRef]),
     useCallback(() => roomInputRef.current, [roomInputRef])
   );
 
+  useResizeObserver(
+    useCallback((entries) => {
+      const timelineContent = timelineContentRef.current;
+      const scrollElement = getScrollElement();
+      if (!timelineContent || !scrollElement) return;
+
+      const timelineEntry = getResizeObserverEntry(timelineContent, entries);
+      if (!timelineEntry) return;
+
+      const nextHeight = timelineEntry.contentRect.height;
+      const previousHeight = timelineContentHeightRef.current;
+      timelineContentHeightRef.current = nextHeight;
+
+      if (previousHeight === 0 || nextHeight <= previousHeight || !atBottomRef.current) {
+        return;
+      }
+
+      autoScrollToBottom(scrollElement, false, true);
+    }, [getScrollElement]),
+    useCallback(() => timelineContentRef.current, [])
+  );
+
   const tryAutoMarkAsRead = useCallback(() => {
     const readUptoEventId = readUptoEventIdRef.current;
     if (!readUptoEventId) {
@@ -774,7 +1050,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     useCallback((entry: IntersectionObserverEntry) => {
       if (!entry.isIntersecting) {
         setAtBottom(false);
-        shouldAutoScrollRef.current = false;
       }
     }, []),
     { wait: 1000 }
@@ -788,7 +1063,6 @@ 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();
@@ -861,22 +1135,21 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
 
   // 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;
+      scrollToBottomRef.current.force = true;
     }
-  }, [(location.state as any)?.scrollToLatest, room]);
+  }, [scrollToLatest, room]);
 
   // Scroll to bottom on initial timeline load
   useLayoutEffect(() => {
     const scrollEl = scrollRef.current;
     if (scrollEl) {
-      scrollToBottom(scrollEl);
+      autoScrollToBottom(scrollEl, false, true);
     }
   }, []);
 
@@ -923,8 +1196,13 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   useLayoutEffect(() => {
     if (scrollToBottomCount > 0) {
       const scrollEl = scrollRef.current;
-      if (scrollEl)
+      if (scrollEl) {
-        scrollToBottom(scrollEl, scrollToBottomRef.current.smooth ? 'smooth' : 'instant');
+        autoScrollToBottom(
+          scrollEl,
+          scrollToBottomRef.current.smooth,
+          scrollToBottomRef.current.force
+        );
+      }
     }
   }, [scrollToBottomCount]);
 
@@ -977,11 +1255,11 @@ 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;
+    scrollToBottomRef.current.force = true;
   };
 
   const handleJumpToUnread = () => {
@@ -1720,6 +1998,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   let isPrevRendered = false;
   let newDivider = false;
   let dayDivider = false;
+  const groupedCarouselEventIds = new Set<string>();
 
   // Clear pending call events at the start of each render
   pendingCallEventsRef.current = [];
@@ -1841,6 +2120,110 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     );
   };
 
+  const renderImageCarouselMessage = (
+    carouselEvents: CarouselRenderableEvent[],
+    mEventId: string,
+    mEvent: MatrixEvent,
+    item: number,
+    timelineSet: EventTimelineSet,
+    collapse: boolean
+  ): React.ReactNode => {
+    const reactionRelations = getEventReactions(timelineSet, mEventId);
+    const reactions = reactionRelations && reactionRelations.getSortedAnnotationsByKey();
+    const hasReactions = reactions && reactions.length > 0;
+    const { replyEventId, threadRootId } = mEvent;
+    const highlighted = focusItem?.index === item && focusItem.highlight;
+    const senderId = mEvent.getSender() ?? '';
+
+    const orderedCarouselEvents = [...carouselEvents].sort((a, b) => a.index - b.index);
+
+    return (
+      <Message
+        key={`carousel-${mEventId}`}
+        data-message-item={item}
+        data-message-id={mEventId}
+        room={room}
+        mEvent={mEvent}
+        messageSpacing={messageSpacing}
+        messageLayout={messageLayout}
+        collapse={collapse}
+        highlight={highlighted}
+        edit={editId === mEventId}
+        canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
+        canSendReaction={canSendReaction}
+        canPinEvent={canPinEvent}
+        imagePackRooms={imagePackRooms}
+        relations={hasReactions ? reactionRelations : undefined}
+        onUserClick={handleUserClick}
+        onUsernameClick={handleUsernameClick}
+        onReplyClick={handleReplyClick}
+        onReactionToggle={handleReactionToggle}
+        onEditId={handleEdit}
+        reply={
+          replyEventId && (
+            <Reply
+              room={room}
+              timelineSet={timelineSet}
+              replyEventId={replyEventId}
+              threadRootId={threadRootId}
+              onClick={handleOpenReply}
+              onOpenThread={handleOpenThread}
+              getMemberPowerTag={getMemberPowerTag}
+              accessibleTagColors={accessiblePowerTagColors}
+              legacyUsernameColor={legacyUsernameColor || direct}
+            />
+          )
+        }
+        reactions={
+          reactionRelations && (
+            <Reactions
+              style={{ marginTop: config.space.S200 }}
+              room={room}
+              relations={reactionRelations}
+              mEventId={mEventId}
+              canSendReaction={canSendReaction}
+              onReactionToggle={handleReactionToggle}
+            />
+          )
+        }
+        hideReadReceipts={hideActivity}
+        showDeveloperTools={showDeveloperTools}
+        memberPowerTag={getMemberPowerTag(senderId)}
+        accessibleTagColors={accessiblePowerTagColors}
+        legacyUsernameColor={legacyUsernameColor || direct}
+        hour24Clock={hour24Clock}
+        dateFormatString={dateFormatString}
+      >
+        {mEvent.isRedacted() ? (
+          <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
+        ) : (
+          <CarouselScroller>
+            {orderedCarouselEvents.map((carouselEvent) => (
+              <Box
+                key={carouselEvent.mEventId}
+                className={css.CarouselItem}
+                style={{ width: getCarouselItemWidth(carouselEvent.content) }}
+              >
+                <MImage
+                  content={carouselEvent.content}
+                  renderImageContent={(props) => (
+                    <ImageContent
+                      {...props}
+                      autoPlay={mediaAutoLoad}
+                      renderImage={(p) => <Image {...p} loading="lazy" />}
+                      renderViewer={(p) => <ImageViewer {...p} />}
+                    />
+                  )}
+                  outlined={messageLayout === MessageLayout.Bubble}
+                />
+              </Box>
+            ))}
+          </CarouselScroller>
+        )}
+      </Message>
+    );
+  };
+
   const eventRenderer = (item: number, index: number, allItems: number[]) => {
     const [eventTimeline, baseIndex] = getTimelineAndBaseIndex(timeline.linkedTimelines, item);
     if (!eventTimeline) return null;
@@ -1874,17 +2257,77 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       prevEvent.getType() === mEvent.getType() &&
       minuteDifference(prevEvent.getTs(), mEvent.getTs()) < 2;
 
-    const rawEventJSX = reactionOrEditEvent(mEvent)
+    if (groupedCarouselEventIds.has(mEventId)) {
-      ? null
+      prevEvent = mEvent;
-      : renderMatrixEvent(
+      isPrevRendered = true;
-          mEvent.getType(),
+      return null;
-          typeof mEvent.getStateKey() === 'string',
+    }
-          mEventId,
+
-          mEvent,
+    const getEventByItem = (
-          item,
+      timelineItem: number
-          timelineSet,
+    ): { event: MatrixEvent; eventId: string } | undefined => {
-          collapsed
+      const [tm, bIndex] = getTimelineAndBaseIndex(timeline.linkedTimelines, timelineItem);
-        );
+      if (!tm) return undefined;
+
+      const event = getTimelineEvent(tm, getTimelineRelativeIndex(timelineItem, bIndex));
+      const eventId = event?.getId();
+      if (!event || !eventId) return undefined;
+
+      return { event, eventId };
+    };
+
+    const carouselMetadata = getCarouselEventMetadata(mEvent);
+    const carouselEvents: CarouselRenderableEvent[] = [];
+    if (carouselMetadata && eventSender) {
+      carouselEvents.push({
+        mEvent,
+        mEventId,
+        item,
+        content: carouselMetadata.content,
+        index: carouselMetadata.index,
+      });
+
+      for (let nextIndex = index + 1; nextIndex < allItems.length; nextIndex += 1) {
+        const nextEvt = getEventByItem(allItems[nextIndex]);
+        if (!nextEvt) break;
+
+        const nextSender = nextEvt.event.getSender();
+        const nextMeta = getCarouselEventMetadata(nextEvt.event);
+
+        if (!nextMeta || nextSender !== eventSender || nextMeta.uuid !== carouselMetadata.uuid) {
+          break;
+        }
+
+        groupedCarouselEventIds.add(nextEvt.eventId);
+        carouselEvents.push({
+          mEvent: nextEvt.event,
+          mEventId: nextEvt.eventId,
+          item: allItems[nextIndex],
+          content: nextMeta.content,
+          index: nextMeta.index,
+        });
+
+        if (carouselEvents.length >= carouselMetadata.total) {
+          break;
+        }
+      }
+    }
+
+    let rawEventJSX: React.ReactNode = null;
+    if (!reactionOrEditEvent(mEvent)) {
+      rawEventJSX =
+        carouselEvents.length > 1
+          ? renderImageCarouselMessage(carouselEvents, mEventId, mEvent, item, timelineSet, collapsed)
+          : renderMatrixEvent(
+              mEvent.getType(),
+              typeof mEvent.getStateKey() === 'string',
+              mEventId,
+              mEvent,
+              item,
+              timelineSet,
+              collapsed
+            );
+    }
 
     // Check if this is a call event that should be grouped
     const isCallEventPending = rawEventJSX === ('CALL_EVENT_PENDING' as unknown as React.ReactNode);
@@ -1992,6 +2435,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       )}
       <Scroll ref={scrollRef} visibility="Hover">
         <Box
+          ref={timelineContentRef}
           direction="Column"
           justifyContent="End"
           style={{ minHeight: '100%', padding: `${config.space.S600} 0` }}

src/app/features/room/RoomViewTyping.css.ts

@@ -24,4 +24,7 @@ export const RoomViewTyping = style([
 ]);
 export const TypingText = style({
   flexGrow: 1,
+  overflow: 'clip',
+  overflowY: 'clip',
+  lineHeight: '1.5',
 });

src/app/features/room/ThreadView.tsx

@@ -96,7 +96,7 @@ import {
 } from '../../utils/matrix';
 import { GetContentCallback, MessageEvent } from '../../../types/matrix/room';
 import { inSameDay, minuteDifference, timeDayMonthYear, today, yesterday } from '../../utils/time';
-import { scrollToBottom } from '../../utils/dom';
+import { autoScrollToBottom, scrollElementIntoView } from '../../utils/dom';
 
 type ThreadViewProps = {
   room: Room;
@@ -406,7 +406,7 @@ export function ThreadView({ room, threadRootId }: ThreadViewProps) {
   // Scroll to bottom on mount and when new events arrive.
   useLayoutEffect(() => {
     const el = scrollRef.current;
-    if (el) scrollToBottom(el);
+    if (el) autoScrollToBottom(el);
   }, [events.length]);
 
   const handleClose = useCallback(() => {
@@ -481,7 +481,7 @@ export function ThreadView({ room, threadRootId }: ThreadViewProps) {
     const el = scrollRef.current?.querySelector(
       `[data-message-id="${targetId}"]`
     ) as HTMLElement | null;
-    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    if (el) scrollElementIntoView(el, { behavior: 'smooth', block: 'center' });
   }, []);
 
   const handleReactionToggle = useCallback(

src/app/features/room/message/Message.tsx

@@ -62,6 +62,8 @@ import {
 import { MessageLayout, MessageSpacing } from '../../../state/settings';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
+import { useEmojiUsage } from '../../../hooks/useEmojiUsage';
+import { emojis } from '../../../plugins/emoji';
 import * as css from './styles.css';
 import { EventReaders } from '../../../components/event-readers';
 import { TextViewer } from '../../../components/text-viewer';
@@ -91,10 +93,13 @@ type MessageQuickReactionsProps = {
 };
 export const MessageQuickReactions = as<'div', MessageQuickReactionsProps>(
   ({ onReaction, ...props }, ref) => {
-    const mx = useMatrixClient();
+    const { getTopEmojis } = useEmojiUsage();
-    const recentEmojis = useRecentEmoji(mx, 4);
+    const topShortcodes = getTopEmojis(4);
+    const mostUsedEmojis = topShortcodes
+      .map((shortcode) => emojis.find((e) => e.shortcode === shortcode))
+      .filter((e): e is IEmoji => e !== undefined);
 
-    if (recentEmojis.length === 0) return <span />;
+    if (mostUsedEmojis.length === 0) return <span />;
     return (
       <>
         <Box
@@ -105,7 +110,7 @@ export const MessageQuickReactions = as<'div', MessageQuickReactionsProps>(
           {...props}
           ref={ref}
         >
-          {recentEmojis.map((emoji) => (
+          {mostUsedEmojis.map((emoji) => (
             <IconButton
               key={emoji.unicode}
               className={css.MessageQuickReaction}

src/app/features/room/msgContent.ts

@@ -4,6 +4,9 @@ import {
   IThumbnailContent,
   MATRIX_BLUR_HASH_PROPERTY_NAME,
   MATRIX_SPOILER_PROPERTY_NAME,
+  PAARROT_CAROUSEL_INDEX_PROPERTY_NAME,
+  PAARROT_CAROUSEL_TOTAL_PROPERTY_NAME,
+  PAARROT_CAROUSEL_UUID_PROPERTY_NAME,
 } from '../../../types/matrix/common';
 import {
   getImageFileUrl,
@@ -18,6 +21,12 @@ import { TUploadItem } from '../../state/room/roomInputDrafts';
 import { encodeBlurHash } from '../../utils/blurHash';
 import { scaleYDimension } from '../../utils/common';
 
+type CarouselMetadata = {
+  uuid: string;
+  index: number;
+  total: number;
+};
+
 const generateThumbnailContent = async (
   mx: MatrixClient,
   img: HTMLImageElement | HTMLVideoElement,
@@ -46,7 +55,8 @@ const generateThumbnailContent = async (
 export const getImageMsgContent = async (
   mx: MatrixClient,
   item: TUploadItem,
-  mxc: string
+  mxc: string,
+  carouselMetadata?: CarouselMetadata
 ): Promise<IContent> => {
   const { file, originalFile, encInfo, metadata } = item;
   const [imgError, imgEl] = await to(loadImageElement(getImageFileUrl(originalFile)));
@@ -74,6 +84,11 @@ export const getImageMsgContent = async (
   } else {
     content.url = mxc;
   }
+  if (carouselMetadata) {
+    content[PAARROT_CAROUSEL_UUID_PROPERTY_NAME] = carouselMetadata.uuid;
+    content[PAARROT_CAROUSEL_INDEX_PROPERTY_NAME] = carouselMetadata.index;
+    content[PAARROT_CAROUSEL_TOTAL_PROPERTY_NAME] = carouselMetadata.total;
+  }
   return content;
 };
 

src/app/features/settings/account/Profile.tsx

@@ -55,7 +55,7 @@ import { useUserProfileStyle } from '../../../hooks/useUserProfileStyle';
 import { useUserPresence } from '../../../hooks/useUserPresence';
 import { AvatarPresence, PresenceBadge } from '../../../components/presence';
 import { BreakWord, LineClamp3 } from '../../../styles/Text.css';
-import colorMXID from '../../../../util/colorMXID';
+import colorMXID, { getColorMXIDValue } from '../../../../util/colorMXID';
 import {
   extractMetadataFromImage,
   embedMetadataInImage,
@@ -574,7 +574,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
     : profileStyle.avatarBorderColor;
 
   const previewPillBgColor = previewBorderColor ? stripAlphaFromColor(previewBorderColor) : undefined;
-  const previewProfileColor = userColor || colorMXID(userId);
+  const previewProfileColor = userColor || getColorMXIDValue(userId);
 
   const previewTextShadow = `0 1px 4px ${getTextShadowColor(previewProfileColor)}`;
 

src/app/features/settings/audio/Audio.tsx

@@ -454,7 +454,11 @@ export function Audio({ requestClose }: AudioProps) {
   const [micTestState, setMicTestState] = useState<'idle' | 'testing' | 'done' | 'error'>('idle');
   const [micLevel, setMicLevel] = useState(0);
   const [speakerTestState, setSpeakerTestState] = useState<'idle' | 'testing' | 'done' | 'error'>('idle');
+  const [micMonitoring, setMicMonitoring] = useState(false);
   const micAnimFrameRef = useRef<number | null>(null);
+  const micMonitorContextRef = useRef<AudioContext | null>(null);
+  const micMonitorStreamRef = useRef<MediaStream | null>(null);
+  const micMonitorGainRef = useRef<GainNode | null>(null);
   const [showRemoteCursor, setShowRemoteCursor] = useSetting(settingsAtom, 'showRemoteCursor');
 
   useEffect(() => {
@@ -627,6 +631,101 @@ export function Audio({ requestClose }: AudioProps) {
     }
   }, [speakerTestState]);
 
+  const handleMicMonitoringToggle = useCallback(async () => {
+    if (micMonitoring) {
+      // Stop monitoring
+      if (micAnimFrameRef.current !== null) {
+        cancelAnimationFrame(micAnimFrameRef.current);
+        micAnimFrameRef.current = null;
+      }
+      if (micMonitorStreamRef.current) {
+        micMonitorStreamRef.current.getTracks().forEach((track) => track.stop());
+        micMonitorStreamRef.current = null;
+      }
+      if (micMonitorContextRef.current) {
+        micMonitorContextRef.current.close();
+        micMonitorContextRef.current = null;
+      }
+      micMonitorGainRef.current = null;
+      setMicLevel(0);
+      setMicMonitoring(false);
+    } else {
+      // Start monitoring
+      try {
+        const constraints: MediaStreamConstraints = {
+          audio: settings.microphoneId
+            ? {
+                deviceId: { exact: settings.microphoneId },
+                noiseSuppression: settings.noiseSuppression,
+                echoCancellation: settings.echoCancellation,
+                autoGainControl: settings.autoGainControl,
+              }
+            : {
+                noiseSuppression: settings.noiseSuppression,
+                echoCancellation: settings.echoCancellation,
+                autoGainControl: settings.autoGainControl,
+              },
+        };
+
+        const stream = await navigator.mediaDevices.getUserMedia(constraints);
+        const audioContext = new AudioContext();
+        const analyser = audioContext.createAnalyser();
+        analyser.fftSize = 256;
+        const dataArray = new Uint8Array(analyser.frequencyBinCount);
+        const microphone = audioContext.createMediaStreamSource(stream);
+        const gainNode = audioContext.createGain();
+        
+        // Connect microphone to analyser for level monitoring
+        microphone.connect(analyser);
+        
+        // Connect microphone to speakers for playback
+        microphone.connect(gainNode);
+        gainNode.connect(audioContext.destination);
+        gainNode.gain.value = 1.0; // Full volume playback
+
+        micMonitorContextRef.current = audioContext;
+        micMonitorStreamRef.current = stream;
+        micMonitorGainRef.current = gainNode;
+
+        const tick = () => {
+          analyser.getByteFrequencyData(dataArray);
+          const avg = dataArray.reduce((a, b) => a + b, 0) / dataArray.length;
+          setMicLevel(Math.min(100, Math.round((avg / 255) * 100 * 3)));
+          micAnimFrameRef.current = requestAnimationFrame(tick);
+        };
+        micAnimFrameRef.current = requestAnimationFrame(tick);
+
+        setMicMonitoring(true);
+      } catch (e) {
+        console.error('Microphone monitoring failed:', e);
+      }
+    }
+  }, [micMonitoring, settings.microphoneId, settings.noiseSuppression, settings.echoCancellation, settings.autoGainControl]);
+
+  // Cleanup monitoring on unmount or when settings change
+  useEffect(() => {
+    return () => {
+      if (micAnimFrameRef.current !== null) {
+        cancelAnimationFrame(micAnimFrameRef.current);
+      }
+      if (micMonitorStreamRef.current) {
+        micMonitorStreamRef.current.getTracks().forEach((track) => track.stop());
+      }
+      if (micMonitorContextRef.current) {
+        micMonitorContextRef.current.close();
+      }
+    };
+  }, []);
+
+  // Restart monitoring when mic settings change
+  useEffect(() => {
+    if (micMonitoring) {
+      handleMicMonitoringToggle(); // Stop
+      setTimeout(() => handleMicMonitoringToggle(), 100); // Restart
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [settings.microphoneId, settings.noiseSuppression, settings.echoCancellation, settings.autoGainControl]);
+
   return (
     <Page>
       <PageHeader>
@@ -686,21 +785,35 @@ export function Audio({ requestClose }: AudioProps) {
                         onSelect={handleMicrophoneSelect}
                       />
                       <Box direction="Column" gap="100" alignItems="End">
-                        <Button
+                        <Box gap="200" alignItems="Center">
-                          size="300"
+                          <Button
-                          variant={micTestState === 'error' ? 'Critical' : micTestState === 'done' ? 'Success' : 'Secondary'}
+                            size="300"
-                          fill="Soft"
+                            variant={micTestState === 'error' ? 'Critical' : micTestState === 'done' ? 'Success' : 'Secondary'}
-                          radii="300"
+                            fill="Soft"
-                          onClick={handleTestMicrophone}
+                            radii="300"
-                          disabled={micTestState === 'testing'}
+                            onClick={handleTestMicrophone}
-                        >
+                            disabled={micTestState === 'testing' || micMonitoring}
-                          <Text size="T300">
+                          >
-                            {micTestState === 'testing' ? 'Testing...' : micTestState === 'done' ? 'Done ✓' : micTestState === 'error' ? 'Failed' : 'Test'}
+                            <Text size="T300">
-                          </Text>
+                              {micTestState === 'testing' ? 'Testing...' : micTestState === 'done' ? 'Done ✓' : micTestState === 'error' ? 'Failed' : 'Test'}
-                        </Button>
+                            </Text>
-                        {micTestState === 'testing' && (
+                          </Button>
-                          <Box style={{ width: toRem(80), height: toRem(6), background: color.Surface.Container, borderRadius: toRem(3), overflow: 'hidden' }}>
+                          <Button
-                            <Box style={{ width: `${micLevel}%`, height: '100%', background: color.Primary.Main, transition: 'width 0.05s ease' }} />
+                            size="300"
+                            variant={micMonitoring ? 'Primary' : 'Secondary'}
+                            fill={micMonitoring ? 'Solid' : 'Soft'}
+                            radii="300"
+                            onClick={handleMicMonitoringToggle}
+                            disabled={micTestState === 'testing'}
+                          >
+                            <Text size="T300">
+                              {micMonitoring ? 'Stop' : 'Monitor'}
+                            </Text>
+                          </Button>
+                        </Box>
+                        {(micTestState === 'testing' || micMonitoring) && (
+                          <Box style={{ width: toRem(160), height: toRem(6), background: color.Surface.Container, borderRadius: toRem(3), overflow: 'hidden' }}>
+                            <Box style={{ width: `${micLevel}%`, height: '100%', background: micMonitoring ? color.Success.Main : color.Primary.Main, transition: 'width 0.05s ease' }} />
                           </Box>
                         )}
                       </Box>

src/app/features/settings/notifications/SystemNotification.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Box, Text, Switch, Button, color, Spinner } from 'folds';
 import { IPusherRequest } from 'matrix-js-sdk';
 import { SequenceCard } from '../../../components/sequence-card';
@@ -10,6 +10,13 @@ import { getNotificationState, usePermissionState } from '../../../hooks/usePerm
 import { useEmailNotifications } from '../../../hooks/useEmailNotifications';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { isCapacitorNative, requestSystemNotificationPermission } from '../../../utils/tauri';
+import {
+  isBackgroundSyncSupported,
+  getBackgroundSyncStatus,
+  requestResetPushRegistration,
+  triggerBackgroundSyncPing,
+} from '../../../utils/backgroundSync';
 
 function EmailNotification() {
   const mx = useMatrixClient();
@@ -86,14 +93,15 @@ function EmailNotification() {
 
 export function SystemNotification() {
   const notifPermission = usePermissionState('notifications', getNotificationState());
+  const capacitorNative = isCapacitorNative();
   const [showNotifications, setShowNotifications] = useSetting(settingsAtom, 'showNotifications');
   const [isNotificationSounds, setIsNotificationSounds] = useSetting(
     settingsAtom,
     'isNotificationSounds'
   );
 
-  const requestNotificationPermission = () => {
+  const requestNotificationPermission = async () => {
-    window.Notification.requestPermission();
+    await requestSystemNotificationPermission();
   };
 
   return (
@@ -125,7 +133,7 @@ export function SystemNotification() {
               </Button>
             ) : (
               <Switch
-                disabled={notifPermission !== 'granted'}
+                disabled={!capacitorNative && notifPermission !== 'granted'}
                 value={showNotifications}
                 onChange={setShowNotifications}
               />
@@ -145,6 +153,7 @@ export function SystemNotification() {
           after={<Switch value={isNotificationSounds} onChange={setIsNotificationSounds} />}
         />
       </SequenceCard>
+      {isBackgroundSyncSupported() && <AndroidPushNotifications />}
       <SequenceCard
         className={SequenceCardStyle}
         variant="SurfaceVariant"
@@ -156,3 +165,126 @@ export function SystemNotification() {
     </Box>
   );
 }
+
+type PushStatus = {
+  registered: boolean;
+  distributor: string;
+  endpoint: string;
+};
+
+/** Android-only section showing UnifiedPush registration status and controls. */
+function AndroidPushNotifications() {
+  const [status, setStatus] = useState<PushStatus | undefined>(undefined);
+  const [loading, setLoading] = useState(true);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    const s = await getBackgroundSyncStatus();
+    setStatus(
+      s
+        ? {
+            registered: s.registered,
+            distributor: s.distributor || '',
+            endpoint: s.endpoint || '',
+          }
+        : undefined
+    );
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const [resetState, reset] = useAsyncCallback(
+    useCallback(async () => {
+      await requestResetPushRegistration();
+      await refresh();
+    }, [refresh])
+  );
+
+  const [pingState, ping] = useAsyncCallback(
+    useCallback(async () => {
+      await triggerBackgroundSyncPing('manual-test');
+    }, [])
+  );
+
+  const isBusy =
+    loading ||
+    resetState.status === AsyncStatus.Loading ||
+    pingState.status === AsyncStatus.Loading;
+
+  return (
+    <Box direction="Column" gap="100">
+      <Text size="L400">Android Push (UnifiedPush)</Text>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="400"
+      >
+        <SettingTile
+          title="Background Notifications"
+          description={
+            loading ? (
+              'Loading status…'
+            ) : status === undefined ? (
+              <Text as="span" style={{ color: color.Critical.Main }} size="T200">
+                Failed to read push status.
+              </Text>
+            ) : status.registered ? (
+              <>
+                <Text as="span" size="T200">
+                  {`Distributor: ${status.distributor || 'unknown'}`}
+                </Text>
+              </>
+            ) : (
+              <Text as="span" style={{ color: color.Warning?.Main ?? color.Critical.Main }} size="T200">
+                Not registered. Tap &quot;Reset&quot; to choose a distributor app.
+              </Text>
+            )
+          }
+          after={loading ? <Spinner variant="Secondary" /> : undefined}
+        />
+        <SettingTile
+          title="Change Distributor"
+          description="Re-open the UnifiedPush distributor selection dialog."
+          after={
+            <Button
+              size="300"
+              radii="300"
+              variant="Secondary"
+              disabled={isBusy}
+              onClick={() => void reset()}
+            >
+              {resetState.status === AsyncStatus.Loading ? (
+                <Spinner variant="Secondary" size="200" />
+              ) : (
+                <Text size="B300">Reset</Text>
+              )}
+            </Button>
+          }
+        />
+        <SettingTile
+          title="Test Notification"
+          description="Trigger a test push ping to verify the pipeline works."
+          after={
+            <Button
+              size="300"
+              radii="300"
+              variant="Secondary"
+              disabled={isBusy}
+              onClick={() => void ping()}
+            >
+              {pingState.status === AsyncStatus.Loading ? (
+                <Spinner variant="Secondary" size="200" />
+              ) : (
+                <Text size="B300">Send Test</Text>
+              )}
+            </Button>
+          }
+        />
+      </SequenceCard>
+    </Box>
+  );
+}

src/app/hooks/useAuthenticatedMediaUrl.ts

@@ -29,7 +29,9 @@ export const useAuthenticatedMediaUrl = (
     // Check if this is an authenticated media URL
     const isAuthenticatedMediaUrl =
       src.includes('/_matrix/client/v1/media/download') ||
-      src.includes('/_matrix/client/v1/media/thumbnail');
+      src.includes('/_matrix/client/v1/media/thumbnail') ||
+      (src.includes('/_matrix/media/') &&
+        (src.includes('/download/') || src.includes('/thumbnail/')));
 
     if (!isAuthenticatedMediaUrl) {
       setBlobUrl(src);
@@ -99,7 +101,9 @@ export const useAuthenticatedMediaFetch = () => {
     async (src: string): Promise<string> => {
       const isAuthenticatedMediaUrl =
         src.includes('/_matrix/client/v1/media/download') ||
-        src.includes('/_matrix/client/v1/media/thumbnail');
+        src.includes('/_matrix/client/v1/media/thumbnail') ||
+        (src.includes('/_matrix/media/') &&
+          (src.includes('/download/') || src.includes('/thumbnail/')));
 
       if (!isAuthenticatedMediaUrl) {
         return src;

src/app/hooks/useEmojiUsage.ts

@@ -0,0 +1,104 @@
+import { useCallback, useMemo } from 'react';
+import { useMatrixClient } from './useMatrixClient';
+import { useAccountData } from './useAccountData';
+
+const PAARROT_EMOJI_USAGE_EVENT = 'paarrot.favemojis';
+const MAX_TRACKED_EMOJIS = 50;
+
+export type EmojiUsageData = {
+  [shortcode: string]: {
+    count: number;
+    lastUsed: number;
+  };
+};
+
+/**
+ * Hook for tracking emoji usage and storing favorites in Matrix account data
+ * Stores emoji usage stats under paarrot.favemojis in user's account data
+ */
+export function useEmojiUsage() {
+  const mx = useMatrixClient();
+  const event = useAccountData(PAARROT_EMOJI_USAGE_EVENT);
+
+  const emojiUsage = useMemo((): EmojiUsageData => {
+    const content = event?.getContent<EmojiUsageData>();
+    return content || {};
+  }, [event]);
+
+  /**
+   * Track emoji usage (max 1 per message as per spec)
+   * @param shortcode - Emoji shortcode (e.g., 'thumbsup', 'smile')
+   */
+  const trackEmojiUsage = useCallback(
+    async (shortcode: string) => {
+      const now = Date.now();
+      const currentUsage = { ...emojiUsage };
+
+      // Update or create emoji entry
+      currentUsage[shortcode] = {
+        count: (currentUsage[shortcode]?.count || 0) + 1,
+        lastUsed: now,
+      };
+
+      // Keep only top MAX_TRACKED_EMOJIS by usage count
+      const entries = Object.entries(currentUsage);
+      if (entries.length > MAX_TRACKED_EMOJIS) {
+        entries.sort((a, b) => b[1].count - a[1].count);
+        const topEmojis = entries.slice(0, MAX_TRACKED_EMOJIS);
+        const newUsage: EmojiUsageData = {};
+        topEmojis.forEach(([key, value]) => {
+          newUsage[key] = value;
+        });
+        await mx.setAccountData(PAARROT_EMOJI_USAGE_EVENT, newUsage);
+      } else {
+        await mx.setAccountData(PAARROT_EMOJI_USAGE_EVENT, currentUsage);
+      }
+    },
+    [mx, emojiUsage]
+  );
+
+  /**
+   * Get most used emoji shortcode
+   * @returns Shortcode of most used emoji, or undefined if none tracked
+   */
+  const getMostUsedEmoji = useCallback((): string | undefined => {
+    const entries = Object.entries(emojiUsage);
+    if (entries.length === 0) return undefined;
+
+    // Sort by count descending, then by lastUsed descending
+    entries.sort((a, b) => {
+      if (b[1].count !== a[1].count) {
+        return b[1].count - a[1].count;
+      }
+      return b[1].lastUsed - a[1].lastUsed;
+    });
+
+    return entries[0][0];
+  }, [emojiUsage]);
+
+  /**
+   * Get top N most used emojis
+   * @param count - Number of top emojis to return
+   * @returns Array of shortcodes sorted by usage
+   */
+  const getTopEmojis = useCallback(
+    (count: number = 10): string[] => {
+      const entries = Object.entries(emojiUsage);
+      entries.sort((a, b) => {
+        if (b[1].count !== a[1].count) {
+          return b[1].count - a[1].count;
+        }
+        return b[1].lastUsed - a[1].lastUsed;
+      });
+      return entries.slice(0, count).map(([shortcode]) => shortcode);
+    },
+    [emojiUsage]
+  );
+
+  return {
+    emojiUsage,
+    trackEmojiUsage,
+    getMostUsedEmoji,
+    getTopEmojis,
+  };
+}

src/app/hooks/useUserBanner.ts

@@ -73,6 +73,7 @@ export function useUserBanner(): [
 
         const profile = await mx.getProfileInfo(userId);
         const avatarUrl = profile.avatar_url;
+        console.log('[useUserBanner.loadBanner] Loading banner from avatar:', avatarUrl);
         
         if (!avatarUrl) {
           setBanner(undefined);
@@ -90,6 +91,7 @@ export function useUserBanner(): [
         // Always use current session's token to avoid stale tokens during account switches
         const accessToken = getCurrentAccessToken();
         const metadata = await fetchAndExtractMetadata(httpUrl, useAuthentication ? accessToken : null);
+        console.log('[useUserBanner.loadBanner] Extracted banner:', metadata.banner);
         setBanner(metadata.banner);
       } catch {
         setBanner(undefined);
@@ -104,7 +106,8 @@ export function useUserBanner(): [
     if (!userId) return undefined;
     
     const user = mx.getUser(userId);
-    const onAvatarChange: UserEventHandlerMap[UserEvent.AvatarUrl] = () => {
+    const onAvatarChange: UserEventHandlerMap[UserEvent.AvatarUrl] = (newAvatarUrl) => {
+      console.log('[useUserBanner] Avatar changed event fired, new URL:', newAvatarUrl);
       loadBanner();
     };
 
@@ -143,12 +146,16 @@ export function useUserBanner(): [
 
     // Get existing metadata to preserve
     const existingMetadata = extractMetadataFromImage(avatarData);
+    console.log('[updateBanner] Existing metadata:', existingMetadata);
     
     // Modify image metadata with new banner, preserving color
     const newMetadata: ImageMetadata = {
       color: existingMetadata.color,
       banner: newBanner,
+      avatarBorderColor: existingMetadata.avatarBorderColor,
+      gradient: existingMetadata.gradient,
     };
+    console.log('[updateBanner] New metadata to embed:', newMetadata);
     
     const newAvatarData = embedMetadataInImage(avatarData, newMetadata);
 
@@ -158,10 +165,13 @@ export function useUserBanner(): [
 
     // Verify the banner was embedded correctly before uploading
     const verifyMetadata = extractMetadataFromImage(newAvatarData);
+    console.log('[updateBanner] Verification - extracted metadata from new avatar:', verifyMetadata);
     
     if (newBanner && verifyMetadata.banner !== newBanner) {
+      console.error('[updateBanner] Banner verification FAILED!', 'Expected:', newBanner, 'Got:', verifyMetadata.banner);
       throw new Error('Banner verification failed');
     }
+    console.log('[updateBanner] Banner verification passed');
 
     // Upload modified avatar with correct MIME type
     const mimeType = getMimeType(format);
@@ -172,21 +182,26 @@ export function useUserBanner(): [
       name: `avatar.${extension}`,
       type: mimeType,
     });
+    console.log('[updateBanner] Avatar uploaded successfully, MXC:', uploadResponse.content_uri);
 
     // Update profile with new avatar
     try {
+      console.log('[updateBanner] Setting avatar URL to:', uploadResponse.content_uri);
       await Promise.race([
         mx.setAvatarUrl(uploadResponse.content_uri),
         new Promise((_, reject) => {
           setTimeout(() => reject(new Error('setAvatarUrl timeout')), 30000);
         })
       ]);
+      console.log('[updateBanner] setAvatarUrl completed');
       
       // Manually sync user object to ensure event listeners are triggered
       const user = mx.getUser(userId);
       if (user && user.avatarUrl !== uploadResponse.content_uri) {
+        console.log('[updateBanner] Manually syncing user avatar URL');
         user.setAvatarUrl(uploadResponse.content_uri);
       }
+      console.log('[updateBanner] Banner update complete');
     } catch (error) {
       throw new Error(`Failed to update avatar URL: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
@@ -217,11 +232,14 @@ export function useOtherUserBanner(userId: string, avatarMxc: string | undefined
     let blobUrl: string | undefined;
 
     if (!avatarMxc) {
+      console.log('[useOtherUserBanner] No avatarMxc provided for', userId);
       setBannerBlobUrl(undefined);
       return undefined;
     }
 
     const loadBanner = async () => {
+      console.log('[useOtherUserBanner] Loading banner for', userId, 'avatarMxc:', avatarMxc);
+      
       // Check cache first
       const cacheKey = `${userId}:${avatarMxc}`;
       const cached = userBannerCache.get(cacheKey);
@@ -230,11 +248,15 @@ export function useOtherUserBanner(userId: string, avatarMxc: string | undefined
       
       if (cached && Date.now() - cached.timestamp < CACHE_TTL_MS) {
         // Use cached banner MXC
+        console.log('[useOtherUserBanner] Using cached bannerMxc:', cached.bannerMxc);
         bannerMxc = cached.bannerMxc;
       } else {
         // Fetch banner MXC from avatar metadata
         const httpUrl = mxcUrlToHttp(mx, avatarMxc, useAuthentication);
+        console.log('[useOtherUserBanner] Fetching metadata from:', httpUrl);
+        
         if (!httpUrl) {
+          console.log('[useOtherUserBanner] Failed to get HTTP URL');
           setBannerBlobUrl(undefined);
           return;
         }
@@ -243,6 +265,8 @@ export function useOtherUserBanner(userId: string, avatarMxc: string | undefined
         const accessToken = getCurrentAccessToken();
         const metadata = await fetchAndExtractMetadata(httpUrl, useAuthentication ? accessToken : null);
         
+        console.log('[useOtherUserBanner] Extracted metadata:', metadata);
+        
         bannerMxc = metadata.banner;
         
         // Cache the banner MXC (not the blob URL)
@@ -250,17 +274,23 @@ export function useOtherUserBanner(userId: string, avatarMxc: string | undefined
       }
       
       if (!bannerMxc) {
+        console.log('[useOtherUserBanner] No banner MXC found');
         setBannerBlobUrl(undefined);
         return;
       }
 
+      console.log('[useOtherUserBanner] Fetching banner image from MXC:', bannerMxc);
+      
       // Fetch the banner image data with authentication
       const bannerHttpUrl = mxcUrlToHttp(mx, bannerMxc, useAuthentication);
       if (!bannerHttpUrl) {
+        console.log('[useOtherUserBanner] Failed to convert banner MXC to HTTP URL');
         setBannerBlobUrl(undefined);
         return;
       }
 
+      console.log('[useOtherUserBanner] Banner HTTP URL:', bannerHttpUrl);
+
       // Always use current session's token to avoid stale tokens during account switches
       const accessToken = getCurrentAccessToken();
       const headers: HeadersInit = {};

src/app/hooks/useUserColor.ts

@@ -260,10 +260,19 @@ const CACHE_TTL_MS = 30 * 60 * 1000; // 30 minutes
 export function useOtherUserColor(userId: string, avatarMxc: string | undefined): string | undefined {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
-  const [color, setColor] = useState<string | undefined>();
+  
+  // Check cache synchronously BEFORE initializing state to avoid flash
+  const cacheKey = avatarMxc ? `${userId}:${avatarMxc}` : '';
+  const cachedEntry = cacheKey ? userColorCache.get(cacheKey) : undefined;
+  const cachedColor = cachedEntry && Date.now() - cachedEntry.timestamp < CACHE_TTL_MS 
+    ? cachedEntry.color 
+    : undefined;
+  
+  const [color, setColor] = useState<string | undefined>(cachedColor);
 
   useEffect(() => {
     if (!avatarMxc) {
+      console.log('[useOtherUserColor] No avatarMxc provided for', userId);
       setColor(undefined);
       return;
     }
@@ -272,13 +281,16 @@ export function useOtherUserColor(userId: string, avatarMxc: string | undefined)
     const cacheKey = `${userId}:${avatarMxc}`;
     const cached = userColorCache.get(cacheKey);
     if (cached && Date.now() - cached.timestamp < CACHE_TTL_MS) {
+      console.log('[useOtherUserColor] Using cached color for', userId, ':', cached.color);
       setColor(cached.color);
       return;
     }
 
     const loadColor = async () => {
       const httpUrl = mxcUrlToHttp(mx, avatarMxc, useAuthentication);
+      console.log('[useOtherUserColor] Loading color for', userId, 'from', httpUrl);
       if (!httpUrl) {
+        console.log('[useOtherUserColor] Failed to get HTTP URL for', avatarMxc);
         setColor(undefined);
         return;
       }
@@ -287,6 +299,8 @@ export function useOtherUserColor(userId: string, avatarMxc: string | undefined)
       const accessToken = getCurrentAccessToken();
       const extractedColor = await fetchAndExtractColor(httpUrl, useAuthentication ? accessToken : null);
       
+      console.log('[useOtherUserColor] Extracted color for', userId, ':', extractedColor);
+      
       // Cache the result
       userColorCache.set(cacheKey, { color: extractedColor, timestamp: Date.now() });
       

src/app/hooks/useUserProfileStyle.ts

@@ -212,22 +212,29 @@ export function useOtherUserProfileStyle(userId: string, avatarMxc: string | und
 
   useEffect(() => {
     if (!avatarMxc) {
+      console.log('[useOtherUserProfileStyle] No avatarMxc provided for', userId);
       setStyle({});
       return;
     }
 
     const loadStyle = async () => {
+      console.log('[useOtherUserProfileStyle] Loading style for', userId, 'avatarMxc:', avatarMxc);
+      
       // Check cache first
       const cacheKey = `${userId}:${avatarMxc}`;
       const cached = userStyleCache.get(cacheKey);
 
       if (cached && Date.now() - cached.timestamp < CACHE_TTL_MS) {
+        console.log('[useOtherUserProfileStyle] Using cached style:', cached.style);
         setStyle(cached.style);
         return;
       }
 
       const httpUrl = mxcUrlToHttp(mx, avatarMxc, useAuthentication);
+      console.log('[useOtherUserProfileStyle] Fetching metadata from:', httpUrl);
+      
       if (!httpUrl) {
+        console.log('[useOtherUserProfileStyle] Failed to get HTTP URL');
         setStyle({});
         return;
       }
@@ -236,11 +243,15 @@ export function useOtherUserProfileStyle(userId: string, avatarMxc: string | und
       const accessToken = getCurrentAccessToken();
       const metadata = await fetchAndExtractMetadata(httpUrl, useAuthentication ? accessToken : null);
 
+      console.log('[useOtherUserProfileStyle] Extracted metadata:', metadata);
+
       const styleData: ProfileStyleData = {
         avatarBorderColor: metadata.avatarBorderColor,
         gradient: metadata.gradient,
       };
 
+      console.log('[useOtherUserProfileStyle] Final styleData:', styleData);
+
       // Cache the result
       userStyleCache.set(cacheKey, { style: styleData, timestamp: Date.now() });
       setStyle(styleData);

src/app/hooks/useVirtualPaginator.ts

@@ -5,6 +5,7 @@ import {
   getScrollInfo,
   isInScrollView,
   isIntersectingScrollView,
+  scrollToPosition,
 } from '../utils/dom';
 
 const PAGINATOR_ANCHOR_ATTR = 'data-paginator-anchor';
@@ -218,7 +219,7 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
         scrollTo = element.offsetTop - Math.round(scrollInfo.viewHeight) + element.clientHeight;
       }
 
-      scrollElement.scrollTo({
+      scrollToPosition(scrollElement, {
         top: scrollTo - (opts?.offset ?? 0),
         behavior: opts?.behavior,
       });
@@ -253,10 +254,12 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
 
       if (!itemElement) {
         const scrollElement = getScrollElement();
-        scrollElement?.scrollTo({
+        if (scrollElement) {
-          top: opts?.offset ?? 0,
+          scrollToPosition(scrollElement, {
-          behavior: opts?.behavior,
+            top: opts?.offset ?? 0,
-        });
+            behavior: opts?.behavior,
+          });
+        }
         return true;
       }
       return scrollToElement(itemElement, opts);
@@ -364,7 +367,7 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
     const offsetAddition = offsetTop - oldOffsetTop;
     const restoreTop = oldScrollTop + offsetAddition;
 
-    scrollEl.scrollTo({
+    scrollToPosition(scrollEl, {
       top: restoreTop,
       behavior: 'instant',
     });

src/app/paarrot-api.ts

@@ -344,7 +344,7 @@ async function sendMessage(matrixClient: any, roomId: string, message: string) {
 
   const content = {
     msgtype: 'm.text',
-    body: message,
+    body: message.trim(),
   };
 
   const result = await matrixClient.sendMessage(roomId, content);

src/app/pages/auth/ServerPicker.tsx

@@ -1,5 +1,6 @@
 import React, {
   ChangeEventHandler,
+  FocusEventHandler,
   KeyboardEventHandler,
   MouseEventHandler,
   useEffect,
@@ -39,8 +40,13 @@ export function ServerPicker({
   const serverInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    // sync input with it outside server changes
+    // Only sync input when server changes externally (e.g., from menu selection)
-    if (serverInputRef.current && serverInputRef.current.value !== server) {
+    // and input is not focused to avoid cursor jumping during typing
+    if (
+      serverInputRef.current &&
+      serverInputRef.current.value !== server &&
+      document.activeElement !== serverInputRef.current
+    ) {
       serverInputRef.current.value = server;
     }
   }, [server]);
@@ -52,6 +58,13 @@ export function ServerPicker({
     if (inputServer) debounceServerSelect(inputServer);
   };
 
+  const handleBlur: FocusEventHandler<HTMLInputElement> = (evt) => {
+    const inputServer = evt.target.value.trim();
+    if (inputServer && inputServer !== server) {
+      onServerChange(inputServer);
+    }
+  };
+
   const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
     if (evt.key === 'ArrowDown') {
       evt.preventDefault();
@@ -85,6 +98,7 @@ export function ServerPicker({
       outlined
       defaultValue={server}
       onChange={handleServerChange}
+      onBlur={handleBlur}
       onKeyDown={handleKeyDown}
       size="500"
       readOnly={!allowCustomServer}

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -1,5 +1,6 @@
 import { useAtomValue } from 'jotai';
-import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
+import { useAtom, useSetAtom } from 'jotai';
+import React, { ReactNode, useCallback, useEffect, useRef, useState, Fragment } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { RoomEvent, RoomEventHandlerMap } from 'matrix-js-sdk';
 import { roomToUnreadAtom, unreadEqual, unreadInfoToUnread } from '../../state/room/roomToUnread';
@@ -28,8 +29,35 @@ import { roomToParentsAtom } from '../../state/room/roomToParents';
 import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
 import { useInboxNotificationsSelected } from '../../hooks/router/useInbox';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { isTauri, isElectron, sendNotification, setupNotificationTapListener } from '../../utils/tauri';
+import { plainToEditorInput, toPlainText } from '../../components/editor';
+import { ShareRoomPicker } from '../../features/ShareRoomPicker';
+import {
+  isTauri,
+  isElectron,
+  isCapacitorNative,
+  sendNotification,
+  setupNotificationTapListener,
+} from '../../utils/tauri';
 import { setPaarrotNavigate, initPaarrotAPI } from '../../paarrot-api';
+import {
+  startBackgroundSync,
+  stopBackgroundSync,
+  setAppForegroundState,
+} from '../../utils/backgroundSync';
+import {
+  TUploadItem,
+  roomIdToMsgDraftAtomFamily,
+  roomIdToUploadItemsAtomFamily,
+} from '../../state/room/roomInputDrafts';
+import { encryptFile } from '../../utils/matrix';
+import {
+  AndroidSharePayload,
+  clearPendingAndroidShare,
+  getPendingAndroidShare,
+  isAndroidShareSupported,
+  listenForAndroidShares,
+  materializeSharedFile,
+} from '../../utils/androidShare';
 
 /**
  * Applies the selected emoji style font to the document.
@@ -118,7 +146,7 @@ function InviteNotifications() {
           });
       }
       
-      if (isTauri() && !isElectron()) {
+      if ((isTauri() && !isElectron()) || isCapacitorNative()) {
         sendNotification({
           title: 'Invitation',
           body,
@@ -257,7 +285,7 @@ function MessageNotifications() {
         console.warn('[Notifications] flashFrame not available, isElectron:', isElectron());
       }
       
-      if (isTauri() && !isElectron()) {
+      if ((isTauri() && !isElectron()) || isCapacitorNative()) {
         const roomPath = isDm
           ? getDirectRoomPath(roomId, eventId)
           : getHomeRoomPath(roomId, eventId);
@@ -350,7 +378,10 @@ function MessageNotifications() {
         return;
       }
 
-      if (showNotifications && ((isTauri() && !isElectron()) || notificationPermission('granted'))) {
+      if (
+        showNotifications &&
+        ((isTauri() && !isElectron()) || isCapacitorNative() || notificationPermission('granted'))
+      ) {
         const avatarMxc =
           room.getAvatarFallbackMember()?.getMxcAvatarUrl() ?? room.getMxcAvatarUrl();
         const content = mEvent.getContent();
@@ -404,6 +435,36 @@ function MessageNotifications() {
   return null;
 }
 
+/**
+ * Configures native Android push-ping background sync on login, keeps it
+ * informed of foreground state so it doesn't double-fire notifications,
+ * and clears it cleanly on unmount (logout).
+ * Only active on Android Capacitor builds.
+ */
+function BackgroundSyncSetup() {
+  const mx = useMatrixClient();
+  // Try to make a simple fetch to verify component is rendering
+  try {
+    fetch('/_matrix/client/v3/sync', { method: 'HEAD' }).catch(() => {});
+  } catch {}
+
+  useEffect(() => {
+    console.log('BackgroundSyncSetup: Starting background sync for', mx.getUserId());
+    startBackgroundSync(mx);
+
+    const onVisibility = () => setAppForegroundState(!document.hidden);
+    document.addEventListener('visibilitychange', onVisibility);
+    setAppForegroundState(!document.hidden);
+
+    return () => {
+      document.removeEventListener('visibilitychange', onVisibility);
+      stopBackgroundSync();
+    };
+  }, [mx]);
+
+  return null;
+}
+
 /**
  * Initializes the Paarrot API for Electron integration
  * Registers the navigate function and sets up IPC handlers
@@ -454,6 +515,167 @@ function TaskbarFlashStopper() {
   return null;
 }
 
+function AndroidShareIntentHandler() {
+  const mx = useMatrixClient();
+  const navigate = useNavigate();
+  const [pendingShare, setPendingShare] = useState<AndroidSharePayload | null>(null);
+  const mDirects = useAtomValue(mDirectAtom);
+  const roomToParents = useAtomValue(roomToParentsAtom);
+
+  const applyPendingShare = useCallback(
+    async (share: AndroidSharePayload, roomId: string) => {
+      const room = mx.getRoom(roomId);
+      if (!room) return false;
+
+      // Send text message if present
+      const nextParts = [share.subject?.trim(), share.text?.trim()].filter(
+        (value): value is string => !!value
+      );
+      if (nextParts.length > 0) {
+        const textContent = {
+          msgtype: 'm.text' as const,
+          body: nextParts.join('\n'),
+        };
+        await mx.sendMessage(roomId, textContent);
+      }
+
+      // Upload and send files if present
+      if (share.files.length > 0) {
+        for (const sharedFile of share.files) {
+          const originalFile = await materializeSharedFile(sharedFile, share.receivedAt);
+          
+          let fileToUpload = originalFile;
+          let encInfo: any = undefined;
+
+          if (room.hasEncryptionStateEvent()) {
+            const encrypted = await encryptFile(originalFile);
+            fileToUpload = encrypted.file;
+            encInfo = encrypted.encInfo;
+          }
+
+          // Upload file
+          const uploadResult = await mx.uploadContent(fileToUpload);
+          const mxc = uploadResult?.content_uri;
+          if (!mxc) continue;
+
+          // Determine message type and send
+          const fileType = originalFile.type;
+          let msgtype = 'm.file' as const;
+          if (fileType.startsWith('image/')) msgtype = 'm.image' as const;
+          else if (fileType.startsWith('video/')) msgtype = 'm.video' as const;
+          else if (fileType.startsWith('audio/')) msgtype = 'm.audio' as const;
+
+          const fileContent: any = {
+            msgtype,
+            body: originalFile.name,
+            filename: originalFile.name,
+            info: {
+              mimetype: originalFile.type,
+              size: originalFile.size,
+            },
+          };
+
+          if (encInfo) {
+            fileContent.file = {
+              ...encInfo,
+              url: mxc,
+            };
+          } else {
+            fileContent.url = mxc;
+          }
+
+          await mx.sendMessage(roomId, fileContent);
+        }
+      }
+
+      await clearPendingAndroidShare();
+      return true;
+    },
+    [mx]
+  );
+
+  const handlePickRoom = useCallback(
+    (roomId: string) => {
+      if (!pendingShare) return;
+
+      applyPendingShare(pendingShare, roomId)
+        .then((applied) => {
+          if (applied) {
+            setPendingShare(null);
+            
+            // Navigate to the selected room
+            const isDirect = mDirects.has(roomId);
+            if (isDirect) {
+              navigate(getDirectRoomPath(roomId));
+            } else {
+              const parents = roomToParents.get(roomId);
+              const parent = parents && parents.length > 0 ? parents[0] : undefined;
+              if (parent) {
+                navigate(getSpaceRoomPath(parent, roomId));
+              } else {
+                navigate(getHomeRoomPath(roomId));
+              }
+            }
+          }
+        })
+        .catch((err) => {
+          console.error('[AndroidShare] Failed to apply share after pick:', err);
+          setPendingShare(null);
+        });
+    },
+    [applyPendingShare, pendingShare, navigate, mDirects, roomToParents]
+  );
+
+  const handleDismiss = useCallback(() => {
+    clearPendingAndroidShare().catch(() => {});
+    setPendingShare(null);
+  }, []);
+
+  useEffect(() => {
+    if (!isAndroidShareSupported()) return;
+
+    let mounted = true;
+    let listenerHandle: { remove: () => Promise<void> } | undefined;
+
+    getPendingAndroidShare()
+      .then((share) => {
+        if (mounted && share) {
+          setPendingShare(share);
+        }
+      })
+      .catch((err) => {
+        console.error('[AndroidShare] Failed to get pending share:', err);
+      });
+
+    listenForAndroidShares((share) => {
+      if (mounted) {
+        setPendingShare(share);
+      }
+    })
+      .then((handle) => {
+        listenerHandle = handle;
+      })
+      .catch((err) => {
+        console.error('[AndroidShare] Failed to listen for shares:', err);
+      });
+
+    return () => {
+      mounted = false;
+      void listenerHandle?.remove();
+    };
+  }, []);
+
+  if (!pendingShare) return null;
+
+  return (
+    <ShareRoomPicker
+      share={pendingShare}
+      onPick={handlePickRoom}
+      onDismiss={handleDismiss}
+    />
+  );
+}
+
 type ClientNonUIFeaturesProps = {
   children: ReactNode;
 };
@@ -466,8 +688,10 @@ export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) {
       <FaviconUpdater />
       <InviteNotifications />
       <MessageNotifications />
+      <BackgroundSyncSetup />
       <PaarrotAPIInitializer />
       <TaskbarFlashStopper />
+      <AndroidShareIntentHandler />
       {children}
     </>
   );

src/app/styles/CustomHtml.css.ts

@@ -16,13 +16,21 @@ export const MarginSpaced = style({
   },
 });
 
-export const Paragraph = style([DefaultReset]);
+export const Paragraph = style([
+  DefaultReset,
+  {
+    overflow: 'hidden',
+    lineHeight: '1.5',
+  },
+]);
 
 export const Heading = style([
   DefaultReset,
   MarginSpaced,
   {
     marginTop: config.space.S400,
+    overflow: 'hidden',
+    lineHeight: '1.5',
     selectors: {
       '&:first-child': {
         marginTop: 0,
@@ -38,6 +46,8 @@ export const BlockQuote = style([
     paddingLeft: config.space.S200,
     borderLeft: `${config.borderWidth.B700} solid ${color.SurfaceVariant.ContainerLine}`,
     fontStyle: 'italic',
+    overflow: 'hidden',
+    lineHeight: '1.5',
   },
 ]);
 
@@ -62,7 +72,9 @@ export const Code = style([
   CodeFont,
   {
     padding: `0 ${config.space.S100}`,
-    display: 'inline-block',
+    display: 'inline',
+    overflow: 'hidden',
+    lineHeight: '1.5',
   },
 ]);
 
@@ -108,6 +120,8 @@ export const Spoiler = recipe({
       padding: `0 ${config.space.S100}`,
       backgroundColor: color.SurfaceVariant.ContainerActive,
       borderRadius: config.radii.R300,
+      overflow: 'hidden',
+      lineHeight: '1.5',
       selectors: {
         '&[aria-pressed=true]': {
           color: 'transparent',
@@ -132,6 +146,7 @@ export const CodeBlock = style([
     fontStyle: 'normal',
     position: 'relative',
     overflow: 'hidden',
+    lineHeight: '1.5',
   },
 ]);
 export const CodeBlockHeader = style([
@@ -167,6 +182,8 @@ export const List = style([
   {
     padding: `0 ${config.space.S100}`,
     paddingLeft: config.space.S600,
+    overflow: 'hidden',
+    lineHeight: '1.5',
   },
 ]);
 
@@ -194,6 +211,8 @@ export const Mention = recipe({
       padding: `0 ${toRem(2)}`,
       borderRadius: config.radii.R300,
       fontWeight: config.fontWeight.W500,
+      overflow: 'hidden',
+      lineHeight: '1.5',
     },
   ],
   variants: {
@@ -219,6 +238,8 @@ export const Command = recipe({
       padding: `0 ${toRem(2)}`,
       borderRadius: config.radii.R300,
       fontWeight: config.fontWeight.W500,
+      overflow: 'hidden',
+      lineHeight: '1.5',
     },
   ],
   variants: {
@@ -287,5 +308,7 @@ export const highlightText = style([
   {
     backgroundColor: 'yellow',
     color: 'black',
+    overflow: 'hidden',
+    lineHeight: '1.5',
   },
 ]);

src/app/utils/androidShare.ts

@@ -0,0 +1,73 @@
+import { Capacitor, registerPlugin, type PluginListenerHandle } from '@capacitor/core';
+
+/** Metadata for a file received from an Android share intent. */
+export type AndroidSharedFile = {
+  path: string;
+  name: string;
+  mimeType: string;
+  size: number;
+};
+
+/** Payload persisted by the native Android share handler. */
+export type AndroidSharePayload = {
+  text?: string;
+  subject?: string;
+  files: AndroidSharedFile[];
+  receivedAt: number;
+};
+
+interface AndroidShareHandlerPlugin {
+  /** Returns the last pending share payload, if one exists. */
+  getPendingShare(): Promise<{ share: AndroidSharePayload | null }>;
+  /** Clears the last pending share payload after it has been consumed. */
+  clearPendingShare(): Promise<void>;
+  addListener(
+    eventName: 'shareReceived',
+    listenerFunc: (payload: AndroidSharePayload) => void
+  ): Promise<PluginListenerHandle>;
+}
+
+const AndroidShareHandler = registerPlugin<AndroidShareHandlerPlugin>('AndroidShareHandler');
+
+/** Returns true when the Android share bridge is available. */
+export const isAndroidShareSupported = (): boolean =>
+  Capacitor.isNativePlatform() && Capacitor.getPlatform() === 'android';
+
+/** Fetches the current pending native share payload. */
+export const getPendingAndroidShare = async (): Promise<AndroidSharePayload | null> => {
+  if (!isAndroidShareSupported()) return null;
+  const result = await AndroidShareHandler.getPendingShare();
+  return result.share;
+};
+
+/** Clears the native pending share payload. */
+export const clearPendingAndroidShare = async (): Promise<void> => {
+  if (!isAndroidShareSupported()) return;
+  await AndroidShareHandler.clearPendingShare();
+};
+
+/** Subscribes to new incoming native share payloads. */
+export const listenForAndroidShares = async (
+  listener: (payload: AndroidSharePayload) => void
+): Promise<PluginListenerHandle | undefined> => {
+  if (!isAndroidShareSupported()) return undefined;
+  return AndroidShareHandler.addListener('shareReceived', listener);
+};
+
+/** Converts a cached native shared file into a browser File for upload. */
+export const materializeSharedFile = async (
+  sharedFile: AndroidSharedFile,
+  receivedAt: number
+): Promise<File> => {
+  const fileUrl = Capacitor.convertFileSrc(sharedFile.path);
+  const response = await fetch(fileUrl);
+  if (!response.ok) {
+    throw new Error(`Failed to read shared file: ${sharedFile.name}`);
+  }
+
+  const blob = await response.blob();
+  return new File([blob], sharedFile.name, {
+    type: sharedFile.mimeType || blob.type,
+    lastModified: receivedAt,
+  });
+};

src/app/utils/backgroundSync.ts

@@ -0,0 +1,518 @@
+import { Capacitor, registerPlugin, type PluginListenerHandle } from '@capacitor/core';
+import type { IPusherRequest, MatrixClient } from 'matrix-js-sdk';
+
+type UnifiedPushStatus = {
+  running: boolean;
+  endpoint: string;
+  instance: string;
+  registered: boolean;
+  distributor: string;
+  distributors: string[] | string;
+};
+
+type UnifiedPushEndpointEvent = {
+  endpoint: string;
+  previousEndpoint: string;
+  instance: string;
+};
+
+type UnifiedPushUnregisteredEvent = {
+  previousEndpoint: string;
+  instance: string;
+};
+
+type UnifiedPushRegistrationFailedEvent = {
+  reason: string;
+  instance: string;
+};
+
+interface MatrixBackgroundSyncPlugin {
+  /** Persist credentials and request UnifiedPush registration. */
+  start(options: {
+    homeserverUrl: string;
+    accessToken: string;
+    userId: string;
+    deviceId: string;
+  }): Promise<void>;
+  /** Trigger a one-shot fetch as if a push ping arrived. */
+  triggerPing(options: { reason?: string }): Promise<void>;
+  /** Re-open distributor setup flow and retry registration. */
+  requestDistributorSetup(): Promise<{ success: boolean }>;
+  /** Stop any in-flight fetch, clear credentials, and unregister UnifiedPush. */
+  stop(): Promise<void>;
+  /**
+   * Notify the service whether the app UI is visible.
+   * When foreground is true, the service suppresses native notifications
+   * because the JS layer handles them via LocalNotifications.
+   */
+  setAppForeground(options: { foreground: boolean }): Promise<void>;
+  /** Returns fetch state and current UnifiedPush registration details. */
+  getStatus(): Promise<UnifiedPushStatus>;
+  addListener(
+    eventName: 'unifiedPushNewEndpoint',
+    listenerFunc: (event: UnifiedPushEndpointEvent) => void
+  ): Promise<PluginListenerHandle>;
+  addListener(
+    eventName: 'unifiedPushUnregistered',
+    listenerFunc: (event: UnifiedPushUnregisteredEvent) => void
+  ): Promise<PluginListenerHandle>;
+  addListener(
+    eventName: 'unifiedPushRegistrationFailed',
+    listenerFunc: (event: UnifiedPushRegistrationFailedEvent) => void
+  ): Promise<PluginListenerHandle>;
+}
+
+type StoredPusherState = {
+  endpoint: string;
+  appId: string;
+};
+
+const MatrixBackgroundSync = registerPlugin<MatrixBackgroundSyncPlugin>('MatrixBackgroundSync');
+const DEFAULT_UNIFIED_PUSH_GATEWAY = 'https://matrix.gateway.unifiedpush.org/_matrix/push/v1/notify';
+const PUSHER_APP_ID_BASE = 'com.paarrot.app.android';
+const PUSHER_STORAGE_PREFIX = 'paarrot.unifiedpush';
+
+/** Returns true when the current platform is Android Capacitor. */
+export const isBackgroundSyncSupported = (): boolean =>
+  Capacitor.isNativePlatform() && Capacitor.getPlatform() === 'android';
+
+const getStoredPusherKey = (userId: string | null, deviceId: string | null): string =>
+  `${PUSHER_STORAGE_PREFIX}:${userId ?? 'unknown'}:${deviceId ?? 'unknown'}`;
+
+const buildPusherAppId = (deviceId: string | null): string => {
+  const raw = deviceId ? `${PUSHER_APP_ID_BASE}.${deviceId}` : PUSHER_APP_ID_BASE;
+  return raw.length > 64 ? raw.slice(0, 64) : raw;
+};
+
+const loadStoredPusherState = (
+  userId: string | null,
+  deviceId: string | null
+): StoredPusherState | undefined => {
+  if (typeof window === 'undefined' || !window.localStorage) return undefined;
+
+  const raw = window.localStorage.getItem(getStoredPusherKey(userId, deviceId));
+  if (!raw) return undefined;
+
+  try {
+    return JSON.parse(raw) as StoredPusherState;
+  } catch {
+    return undefined;
+  }
+};
+
+const saveStoredPusherState = (
+  userId: string | null,
+  deviceId: string | null,
+  state: StoredPusherState
+): void => {
+  if (typeof window === 'undefined' || !window.localStorage) return;
+  window.localStorage.setItem(getStoredPusherKey(userId, deviceId), JSON.stringify(state));
+};
+
+const clearStoredPusherState = (userId: string | null, deviceId: string | null): void => {
+  if (typeof window === 'undefined' || !window.localStorage) return;
+  window.localStorage.removeItem(getStoredPusherKey(userId, deviceId));
+};
+
+const normalizeDistributors = (raw: UnifiedPushStatus['distributors']): string[] => {
+  if (Array.isArray(raw)) return raw;
+  if (typeof raw !== 'string') return [];
+
+  const trimmed = raw.trim();
+  if (!trimmed || trimmed === '[]') return [];
+
+  if (trimmed.startsWith('[') && trimmed.endsWith(']')) {
+    return trimmed
+      .slice(1, -1)
+      .split(',')
+      .map((entry) => entry.trim())
+      .filter(Boolean);
+  }
+
+  return [trimmed];
+};
+
+const resolveUnifiedPushGateway = async (endpoint: string): Promise<string> => {
+  try {
+    const discoveryUrl = new URL(endpoint);
+    discoveryUrl.pathname = '/_matrix/push/v1/notify';
+    discoveryUrl.search = '';
+
+    const response = await fetch(discoveryUrl.toString(), { method: 'GET' });
+    if (!response.ok) return DEFAULT_UNIFIED_PUSH_GATEWAY;
+
+    const body = (await response.json()) as {
+      gateway?: string;
+      unifiedpush?: { gateway?: string };
+    };
+
+    if (body.gateway === 'matrix' || body.unifiedpush?.gateway === 'matrix') {
+      return discoveryUrl.toString();
+    }
+  } catch (err) {
+    console.warn('[BackgroundSync] UnifiedPush gateway discovery failed:', err);
+  }
+
+  return DEFAULT_UNIFIED_PUSH_GATEWAY;
+};
+
+class AndroidUnifiedPushManager {
+  private client: MatrixClient | undefined;
+
+  private listenerHandles: PluginListenerHandle[] = [];
+
+  private listenersReady = false;
+
+  private distributorSetupAttempted = false;
+
+  private distributorPromptShown = false;
+
+  /** Start native UnifiedPush registration and synchronize the Matrix pusher. */
+  async start(mx: MatrixClient): Promise<void> {
+    console.log('[BackgroundSync] start() called, platform:', Capacitor.getPlatform(), 'isNative:', Capacitor.isNativePlatform());
+    
+    if (!isBackgroundSyncSupported()) {
+      console.log('[BackgroundSync] Background sync not supported on this platform');
+      return;
+    }
+
+    const homeserverUrl = mx.getHomeserverUrl();
+    const accessToken = mx.getAccessToken();
+    const userId = mx.getUserId();
+    const deviceId = mx.getDeviceId();
+
+    console.log('[BackgroundSync] Credentials check:', { userId, deviceId, hasToken: !!accessToken, hasUrl: !!homeserverUrl });
+
+    if (!homeserverUrl || !accessToken || !userId) {
+      console.warn('[BackgroundSync] Missing credentials, not starting');
+      return;
+    }
+
+    this.client = mx;
+    this.distributorSetupAttempted = false;
+    this.distributorPromptShown = false;
+    await this.ensureListeners();
+
+    try {
+      console.log('[BackgroundSync] Calling plugin.start()...');
+      await MatrixBackgroundSync.start({
+        homeserverUrl,
+        accessToken,
+        userId,
+        deviceId: deviceId ?? '',
+      });
+      console.log('[BackgroundSync] plugin.start() completed');
+    } catch (err) {
+      console.error('[BackgroundSync] plugin.start() failed:', err);
+      throw err;
+    }
+
+    await this.syncExistingEndpoint();
+    await this.ensureDistributorPromptFromStatus();
+    console.log('[BackgroundSync] UnifiedPush registration requested');
+  }
+
+  /** Stop native UnifiedPush integration and remove the Matrix pusher for this device. */
+  async stop(): Promise<void> {
+    if (!isBackgroundSyncSupported()) return;
+
+    const client = this.client;
+    if (client) {
+      const deviceId = client.getDeviceId();
+      const userId = client.getUserId();
+      const status = await this.safeGetStatus();
+      const stored = loadStoredPusherState(userId, deviceId);
+      const endpoint = status?.endpoint || stored?.endpoint;
+      const appId = stored?.appId ?? buildPusherAppId(deviceId);
+
+      if (endpoint) {
+        await this.removePusher(client, endpoint, appId);
+      }
+      clearStoredPusherState(userId, deviceId);
+    }
+
+    await MatrixBackgroundSync.stop();
+    await this.disposeListeners();
+    this.client = undefined;
+    console.log('[BackgroundSync] UnifiedPush stopped');
+  }
+
+  /** Update the Matrix pusher when a new native endpoint is published. */
+  private async handleNewEndpoint(event: UnifiedPushEndpointEvent): Promise<void> {
+    const client = this.client;
+    if (!client) return;
+
+    if (event.previousEndpoint) {
+      await this.removePusher(client, event.previousEndpoint);
+    }
+
+    await this.upsertPusher(client, event.endpoint);
+  }
+
+  /** Remove the Matrix pusher when UnifiedPush unregisters this instance. */
+  private async handleUnregistered(event: UnifiedPushUnregisteredEvent): Promise<void> {
+    const client = this.client;
+    if (!client) return;
+
+    const stored = loadStoredPusherState(client.getUserId(), client.getDeviceId());
+    const endpoint = event.previousEndpoint || stored?.endpoint;
+    const appId = stored?.appId ?? buildPusherAppId(client.getDeviceId());
+
+    if (endpoint) {
+      await this.removePusher(client, endpoint, appId);
+    }
+
+    clearStoredPusherState(client.getUserId(), client.getDeviceId());
+  }
+
+  /** Log native registration failures so the missing distributor path is visible. */
+  private handleRegistrationFailed(event: UnifiedPushRegistrationFailedEvent): void {
+    console.warn('[BackgroundSync] UnifiedPush registration failed:', event.reason);
+
+    if (event.reason !== 'ACTION_REQUIRED' || this.distributorSetupAttempted) {
+      return;
+    }
+
+    this.distributorSetupAttempted = true;
+    void this.tryRequestDistributorSetup();
+  }
+
+  /** Re-opens distributor selection once after ACTION_REQUIRED and logs actionable status. */
+  private async tryRequestDistributorSetup(): Promise<void> {
+    try {
+      const setupResult = await MatrixBackgroundSync.requestDistributorSetup();
+      console.warn('[BackgroundSync] requestDistributorSetup result:', setupResult);
+      const status = await this.safeGetStatus();
+      console.warn('[BackgroundSync] UnifiedPush status after setup attempt:', status);
+      const distributors = normalizeDistributors(status?.distributors ?? []);
+      if (distributors.length === 0) {
+        console.error(
+          '[BackgroundSync] No UnifiedPush distributor installed. Install one (for example ntfy) to enable Android background notifications.'
+        );
+        this.showNoDistributorPrompt();
+      }
+    } catch (err) {
+      console.warn('[BackgroundSync] requestDistributorSetup failed:', err);
+    }
+  }
+
+  /** Fallback check so users still get prompted even when ACTION_REQUIRED event is missed. */
+  private async ensureDistributorPromptFromStatus(): Promise<void> {
+    const status = await this.safeGetStatus();
+    if (!status) return;
+
+    const distributors = normalizeDistributors(status.distributors);
+    if (!status.registered && distributors.length === 0) {
+      console.error(
+        '[BackgroundSync] No UnifiedPush distributor installed. Install one (for example ntfy) to enable Android background notifications.'
+      );
+      this.showNoDistributorPrompt();
+    }
+  }
+
+  /** Show a one-time actionable prompt when no distributor app is installed. */
+  private showNoDistributorPrompt(): void {
+    if (this.distributorPromptShown) return;
+    this.distributorPromptShown = true;
+
+    const message =
+      'Android background notifications need a UnifiedPush distributor app. Install one (for example ntfy), then reopen Paarrot.';
+    const docsUrl = 'https://unifiedpush.org/users/distributors/';
+
+    if (typeof window === 'undefined') return;
+
+    try {
+      const openDocs = window.confirm(`${message}\n\nOpen distributor list now?`);
+      if (openDocs) {
+        window.open(docsUrl, '_blank', 'noopener,noreferrer');
+      }
+    } catch {
+      window.alert(message);
+    }
+  }
+
+  /** Install plugin listeners once for the active Matrix client. */
+  private async ensureListeners(): Promise<void> {
+    if (this.listenersReady) return;
+
+    this.listenerHandles = [
+      await MatrixBackgroundSync.addListener('unifiedPushNewEndpoint', (event) => {
+        void this.handleNewEndpoint(event).catch((err) => {
+          console.error('[BackgroundSync] handleNewEndpoint failed:', err);
+        });
+      }),
+      await MatrixBackgroundSync.addListener('unifiedPushUnregistered', (event) => {
+        void this.handleUnregistered(event);
+      }),
+      await MatrixBackgroundSync.addListener('unifiedPushRegistrationFailed', (event) => {
+        this.handleRegistrationFailed(event);
+      }),
+    ];
+    this.listenersReady = true;
+  }
+
+  /** Remove all plugin listeners when the manager stops. */
+  private async disposeListeners(): Promise<void> {
+    await Promise.all(this.listenerHandles.map((handle) => handle.remove()));
+    this.listenerHandles = [];
+    this.listenersReady = false;
+  }
+
+  /** Reconcile an already-persisted native endpoint after app startup. */
+  private async syncExistingEndpoint(): Promise<void> {
+    const client = this.client;
+    if (!client) return;
+
+    const status = await this.safeGetStatus();
+    console.log('[BackgroundSync] Native status before pusher sync:', status);
+    if (status?.registered && status.endpoint) {
+      await this.upsertPusher(client, status.endpoint);
+    }
+  }
+
+  /** Create or refresh the Matrix HTTP pusher for the current device. */
+  private async upsertPusher(mx: MatrixClient, endpoint: string): Promise<void> {
+    const deviceId = mx.getDeviceId();
+    const userId = mx.getUserId();
+    const appId = buildPusherAppId(deviceId);
+    const gatewayUrl = await resolveUnifiedPushGateway(endpoint);
+
+    console.log('[BackgroundSync] Upserting Matrix pusher', {
+      appId,
+      endpoint,
+      gatewayUrl,
+      deviceId,
+      userId,
+    });
+
+    try {
+      await mx.setPusher({
+        kind: 'http',
+        app_id: appId,
+        pushkey: endpoint,
+        app_display_name: 'Paarrot',
+        device_display_name: deviceId ?? 'Android',
+        lang: 'en',
+        data: {
+          url: gatewayUrl,
+          format: 'event_id_only',
+        },
+        append: false,
+        device_id: deviceId ?? undefined,
+      } as unknown as IPusherRequest);
+
+      const pushers = (await mx.getPushers())?.pushers ?? [];
+      const thisPusher = pushers.find((p) => p.pushkey === endpoint && p.app_id === appId);
+      console.log('[BackgroundSync] Matrix pusher upserted successfully', {
+        totalPushers: pushers.length,
+        foundThisPusher: Boolean(thisPusher),
+      });
+    } catch (err) {
+      console.error('[BackgroundSync] Matrix pusher upsert failed:', err);
+      throw err;
+    }
+
+    saveStoredPusherState(userId, deviceId, { endpoint, appId });
+  }
+
+  /** Remove a previously-registered Matrix HTTP pusher for this device. */
+  private async removePusher(
+    mx: MatrixClient,
+    endpoint: string,
+    appId = buildPusherAppId(mx.getDeviceId())
+  ): Promise<void> {
+    try {
+      await mx.setPusher({
+        pushkey: endpoint,
+        app_id: appId,
+        kind: null,
+      } as unknown as IPusherRequest);
+    } catch (err) {
+      console.warn('[BackgroundSync] Failed to remove UnifiedPush pusher:', err);
+    }
+  }
+
+  /** Read native registration state without failing the caller. */
+  private async safeGetStatus(): Promise<UnifiedPushStatus | undefined> {
+    try {
+      return await MatrixBackgroundSync.getStatus();
+    } catch (err) {
+      console.warn('[BackgroundSync] Failed to read UnifiedPush status:', err);
+      return undefined;
+    }
+  }
+}
+
+const unifiedPushManager = new AndroidUnifiedPushManager();
+
+/** Start native UnifiedPush registration and sync the Matrix pusher. */
+export const startBackgroundSync = async (mx: MatrixClient): Promise<void> => {
+  await unifiedPushManager.start(mx);
+};
+
+/**
+ * Manually triggers a one-shot native fetch.
+ * Useful for diagnostics and bridge testing.
+ */
+export const triggerBackgroundSyncPing = async (reason?: string): Promise<void> => {
+  if (!isBackgroundSyncSupported()) return;
+
+  try {
+    await MatrixBackgroundSync.triggerPing({ reason });
+  } catch (err) {
+    console.warn('[BackgroundSync] triggerPing failed:', err);
+  }
+};
+
+/** Stop UnifiedPush integration and remove the Matrix pusher for this session. */
+export const stopBackgroundSync = async (): Promise<void> => {
+  await unifiedPushManager.stop();
+};
+
+/**
+ * Tells the native service whether the app UI is in the foreground.
+ * Call when document visibility changes so the service can suppress
+ * duplicate notifications while the JS layer is active.
+ * @param foreground true if the WebView UI is currently visible
+ */
+export const setAppForegroundState = async (foreground: boolean): Promise<void> => {
+  if (!isBackgroundSyncSupported()) return;
+
+  try {
+    await MatrixBackgroundSync.setAppForeground({ foreground });
+  } catch (err) {
+    console.warn('[BackgroundSync] setAppForeground failed:', err);
+  }
+};
+
+/**
+ * Re-opens the UnifiedPush distributor selection dialog.
+ * Allows users to re-select or change their push notification distributor without terminal access.
+ * Useful when the current endpoint becomes unavailable.
+ */
+export const requestResetPushRegistration = async (): Promise<{ success: boolean }> => {
+  if (!isBackgroundSyncSupported()) {
+    console.warn('[BackgroundSync] Background sync not supported on this platform');
+    return { success: false };
+  }
+
+  try {
+    const result = await MatrixBackgroundSync.requestDistributorSetup();
+    console.log('[BackgroundSync] requestDistributorSetup completed:', result);
+    return result ?? { success: false };
+  } catch (err) {
+    console.error('[BackgroundSync] requestDistributorSetup failed:', err);
+    return { success: false };
+  }
+};
+
+/** Returns the current native UnifiedPush status, or undefined if unavailable. */
+export const getBackgroundSyncStatus = async (): Promise<UnifiedPushStatus | undefined> => {
+  if (!isBackgroundSyncSupported()) return undefined;
+  try {
+    return await MatrixBackgroundSync.getStatus();
+  } catch (err) {
+    console.warn('[BackgroundSync] getStatus failed:', err);
+    return undefined;
+  }
+};

src/app/utils/dom.ts

@@ -172,6 +172,32 @@ export type ScrollInfo = {
   viewHeight: number;
   scrollable: boolean;
 };
+
+export type ScrollBehavior = 'auto' | 'instant' | 'smooth';
+
+export type ScrollPosition = {
+  top?: number;
+  left?: number;
+  behavior?: ScrollBehavior;
+};
+
+/**
+ * Centralized wrapper for element scrolling.
+ */
+export const scrollToPosition = (scrollEl: HTMLElement, position: ScrollPosition): void => {
+  scrollEl.scrollTo(position);
+};
+
+/**
+ * Centralized wrapper for scrolling a target into the current viewport.
+ */
+export const scrollElementIntoView = (
+  element: HTMLElement,
+  options?: ScrollIntoViewOptions
+): void => {
+  element.scrollIntoView(options);
+};
+
 export const getScrollInfo = (target: HTMLElement): ScrollInfo => ({
   offsetTop: Math.round(target.offsetTop),
   top: Math.round(target.scrollTop),
@@ -180,17 +206,44 @@ export const getScrollInfo = (target: HTMLElement): ScrollInfo => ({
   scrollable: target.scrollHeight > target.offsetHeight,
 });
 
-export const scrollToBottom = (scrollEl: HTMLElement, behavior?: 'auto' | 'instant' | 'smooth') => {
+export const scrollToBottom = (scrollEl: HTMLElement, behavior?: ScrollBehavior) => {
-  scrollEl.scrollTo({
+  scrollToPosition(scrollEl, {
     top: Math.round(scrollEl.scrollHeight - scrollEl.offsetHeight),
     behavior,
   });
 };
 
+/**
+ * Check if scroll element is at or near the bottom (within threshold).
+ * Useful for "sticky to bottom" behavior in chat-like interfaces.
+ * @param scrollEl - The scrollable element
+ * @param threshold - Distance from bottom in pixels (default: 50px)
+ * @returns true if scrolled to bottom within threshold
+ */
+export const isScrolledToBottom = (scrollEl: HTMLElement, threshold = 50): boolean => {
+  const { scrollTop, offsetHeight, scrollHeight } = scrollEl;
+  const scrollPosition = scrollTop + offsetHeight;
+  return scrollHeight - scrollPosition <= threshold;
+};
+
+/**
+ * Shared auto-scroll behavior for chat-like timelines that should stay pinned to bottom.
+ * Only scrolls if already near the bottom unless a call site explicitly forces it.
+ */
+export const autoScrollToBottom = (
+  scrollEl: HTMLElement,
+  smooth = false,
+  force = false
+): void => {
+  if (force || isScrolledToBottom(scrollEl)) {
+    scrollToBottom(scrollEl, smooth ? 'smooth' : 'instant');
+  }
+};
+
 export const copyToClipboard = (text: string) => {
   // Try Electron clipboard first (if available)
-  if ('electron' in window && (window as any).electron?.clipboard?.writeText) {
+  if ('electron' in window && window.electron?.clipboard?.writeText) {
-    (window as any).electron.clipboard.writeText(text);
+    window.electron.clipboard.writeText(text);
     return;
   }
 

src/app/utils/imageMetadata.ts

@@ -170,6 +170,8 @@ export function detectImageFormat(data: ArrayBuffer | Uint8Array): ImageFormat {
 export function extractColorFromImage(imageData: ArrayBuffer | Uint8Array): string | undefined {
   const format = detectImageFormat(imageData);
   
+  console.log('[extractColorFromImage] Detected format:', format);
+  
   switch (format) {
     case 'png':
       return extractColorFromPNG(imageData);
@@ -211,14 +213,19 @@ export function extractBannerFromImage(imageData: ArrayBuffer | Uint8Array): str
 export function extractMetadataFromImage(imageData: ArrayBuffer | Uint8Array): ImageMetadata {
   const format = detectImageFormat(imageData);
   
+  console.log('[extractMetadataFromImage] Detected format:', format);
+  
   switch (format) {
     case 'png':
-      return extractMetadataFromPNG(imageData);
+      const pngMetadata = extractMetadataFromPNG(imageData);
+      console.log('[extractMetadataFromImage] PNG metadata:', pngMetadata);
+      return pngMetadata;
     // For other formats, extract color only for now
     case 'webp':
     case 'jpeg':
     case 'gif': {
       const color = extractColorFromImage(imageData);
+      console.log('[extractMetadataFromImage] Non-PNG color:', color);
       return color ? { color } : {};
     }
     default:
@@ -344,6 +351,10 @@ export function getExtension(format: ImageFormat): string {
 const avatarMetadataCache = new LRUCache<string, { metadata: ImageMetadata; timestamp: number }>(100);
 const METADATA_CACHE_TTL_MS = 30 * 60 * 1000; // 30 minutes
 
+// In-flight fetch tracking to prevent duplicate parallel requests
+const inflightColorFetches = new Map<string, Promise<string | undefined>>();
+const inflightMetadataFetches = new Map<string, Promise<ImageMetadata>>();
+
 /**
  * Fetch and extract color from an image URL (supports all formats)
  * @param url - HTTP URL to fetch the image from
@@ -354,29 +365,51 @@ export async function fetchAndExtractColor(url: string, accessToken?: string | n
   // Check if full metadata is cached
   const cached = avatarMetadataCache.get(url);
   if (cached && Date.now() - cached.timestamp < METADATA_CACHE_TTL_MS) {
+    console.log('[fetchAndExtractColor] Using cached color for', url, ':', cached.metadata.color);
     return cached.metadata.color;
   }
 
-  try {
+  // Check if fetch already in progress
-    const response = await fetch(url, {
+  const inflightKey = `${url}:${accessToken || ''}`;
-      method: 'GET',
+  const existingFetch = inflightColorFetches.get(inflightKey);
-      headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : undefined,
+  if (existingFetch) {
-    });
+    console.log('[fetchAndExtractColor] Reusing in-flight fetch for', url);
-    if (!response.ok) return undefined;
+    return existingFetch;
-    
-    const data = await response.arrayBuffer();
-    const color = extractColorFromImage(data);
-    
-    // Cache the color result as part of metadata
-    avatarMetadataCache.set(url, { 
-      metadata: { color }, 
-      timestamp: Date.now() 
-    });
-    
-    return color;
-  } catch {
-    return undefined;
   }
+
+  console.log('[fetchAndExtractColor] Fetching and extracting color from', url);
+  
+  const fetchPromise = (async () => {
+    try {
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : undefined,
+      });
+      
+      console.log('[fetchAndExtractColor] Fetch response status:', response.ok, response.status);
+      
+      if (!response.ok) return undefined;
+      
+      const data = await response.arrayBuffer();
+      console.log('[fetchAndExtractColor] Downloaded', data.byteLength, 'bytes');
+      
+      const color = extractColorFromImage(data);
+      console.log('[fetchAndExtractColor] Extracted color:', color);
+      
+      // Don't cache here - fetchAndExtractMetadata will cache full metadata
+      // This avoids cache collision where color-only fetch overwrites full metadata
+      
+      return color;
+    } catch (error) {
+      console.error('[fetchAndExtractColor] Error fetching/extracting color:', error);
+      return undefined;
+    } finally {
+      inflightColorFetches.delete(inflightKey);
+    }
+  })();
+
+  inflightColorFetches.set(inflightKey, fetchPromise);
+  return fetchPromise;
 }
 
 /**
@@ -389,27 +422,51 @@ export async function fetchAndExtractMetadata(url: string, accessToken?: string
   // Check cache first
   const cached = avatarMetadataCache.get(url);
   if (cached && Date.now() - cached.timestamp < METADATA_CACHE_TTL_MS) {
+    console.log('[fetchAndExtractMetadata] Using cached metadata for', url, ':', cached.metadata);
     return cached.metadata;
   }
 
-  try {
+  // Check if fetch already in progress
-    const response = await fetch(url, {
+  const inflightKey = `${url}:${accessToken || ''}`;
-      method: 'GET',
+  const existingFetch = inflightMetadataFetches.get(inflightKey);
-      headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : undefined,
+  if (existingFetch) {
-    });
+    console.log('[fetchAndExtractMetadata] Reusing in-flight fetch for', url);
-    if (!response.ok) return {};
+    return existingFetch;
-    
-    const data = await response.arrayBuffer();
-    const metadata = extractMetadataFromImage(data);
-    
-    // Cache the result
-    avatarMetadataCache.set(url, { 
-      metadata, 
-      timestamp: Date.now() 
-    });
-    
-    return metadata;
-  } catch {
-    return {};
   }
+
+  console.log('[fetchAndExtractMetadata] Fetching metadata from', url);
+
+  const fetchPromise = (async () => {
+    try {
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : undefined,
+      });
+      
+      console.log('[fetchAndExtractMetadata] Fetch response status:', response.ok, response.status);
+      
+      if (!response.ok) return {};
+      
+      const data = await response.arrayBuffer();
+      console.log('[fetchAndExtractMetadata] Downloaded', data.byteLength, 'bytes');
+      
+      const metadata = extractMetadataFromImage(data);
+      console.log('[fetchAndExtractMetadata] Extracted metadata:', metadata);
+      
+      // Cache the result
+      avatarMetadataCache.set(url, { 
+        metadata, 
+        timestamp: Date.now() 
+      });
+      
+      return metadata;
+    } catch {
+      return {};
+    } finally {
+      inflightMetadataFetches.delete(inflightKey);
+    }
+  })();
+
+  inflightMetadataFetches.set(inflightKey, fetchPromise);
+  return fetchPromise;
 }

src/app/utils/matrix.ts

@@ -23,7 +23,7 @@ const DOMAIN_REGEX = /\b(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}\b/;
 
 export const isServerName = (serverName: string): boolean => DOMAIN_REGEX.test(serverName);
 
-const matchMxId = (id: string): RegExpMatchArray | null => id.match(/^([@!$+#])([^\s:]+):(\S+)$/);
+const matchMxId = (id: string): RegExpMatchArray | null => id.match(/^([@$+#])([^\s:]+):(\S+)$/);
 
 const validMxId = (id: string): boolean => !!matchMxId(id);
 
@@ -301,7 +301,9 @@ export const mxcUrlToHttp = (
  */
 export const isAuthenticatedMediaUrl = (url: string): boolean =>
   url.includes('/_matrix/client/v1/media/download') ||
-  url.includes('/_matrix/client/v1/media/thumbnail');
+  url.includes('/_matrix/client/v1/media/thumbnail') ||
+  url.includes('/_matrix/media/') &&
+    (url.includes('/download/') || url.includes('/thumbnail/'));
 
 /**
  * Downloads media with optional authentication.

src/app/utils/pngMetadata.ts

@@ -153,21 +153,30 @@ export function extractColorFromPNG(imageData: ArrayBuffer | Uint8Array): string
   // Verify PNG signature
   for (let i = 0; i < 8; i++) {
     if (data[i] !== PNG_SIGNATURE[i]) {
+      console.warn('[extractColorFromPNG] Not a valid PNG');
       return undefined; // Not a PNG
     }
   }
   
   const chunks = parseChunks(data);
+  console.log('[extractColorFromPNG] Found', chunks.length, 'chunks');
   
+  let textChunksFound = 0;
   for (const chunk of chunks) {
     if (chunk.type === 'tEXt') {
+      textChunksFound++;
       const text = parseTextChunk(chunk.data);
-      if (text && text.key === PAARROT_COLOR_KEY) {
+      if (text) {
-        return text.value;
+        console.log('[extractColorFromPNG] Found tEXt chunk:', text.key, '=', text.value);
+        if (text.key === PAARROT_COLOR_KEY) {
+          console.log('[extractColorFromPNG] Found paarrot:color =', text.value);
+          return text.value;
+        }
       }
     }
   }
   
+  console.log('[extractColorFromPNG] No paarrot:color found (found', textChunksFound, 'tEXt chunks)');
   return undefined;
 }
 
@@ -214,16 +223,21 @@ export function extractMetadataFromPNG(imageData: ArrayBuffer | Uint8Array): Ima
   // Verify PNG signature
   for (let i = 0; i < 8; i++) {
     if (data[i] !== PNG_SIGNATURE[i]) {
+      console.warn('[extractMetadataFromPNG] Not a valid PNG');
       return metadata; // Not a PNG
     }
   }
   
   const chunks = parseChunks(data);
+  console.log('[extractMetadataFromPNG] Found', chunks.length, 'chunks');
   
+  let textChunksFound = 0;
   for (const chunk of chunks) {
     if (chunk.type === 'tEXt') {
+      textChunksFound++;
       const text = parseTextChunk(chunk.data);
       if (text) {
+        console.log('[extractMetadataFromPNG] Found tEXt chunk:', text.key, '=', text.value);
         if (text.key === PAARROT_COLOR_KEY) {
           metadata.color = text.value;
         } else if (text.key === PAARROT_BANNER_KEY) {
@@ -241,6 +255,8 @@ export function extractMetadataFromPNG(imageData: ArrayBuffer | Uint8Array): Ima
     }
   }
   
+  console.log('[extractMetadataFromPNG] Final metadata extracted:', metadata, 'found', textChunksFound, 'tEXt chunks');
+  
   return metadata;
 }
 

src/app/utils/tauri.ts

@@ -116,6 +116,9 @@ export const isYouTubeStreamingAvailable = (): boolean => {
 /** Callback for notification tap actions */
 let notificationTapCallback: ((path: string) => void) | null = null;
 
+const ANDROID_NOTIFICATION_SMALL_ICON = 'ic_stat_paarrot';
+const ANDROID_NOTIFICATION_ICON_COLOR = '#FF8A00';
+
 /**
  * Bring the Tauri window to the front and focus it
  */
@@ -190,6 +193,21 @@ export const setupNotificationTapListener = async (onTap: (path: string) => void
       console.warn('Failed to set up Tauri notification tap listener:', err);
     }
   }
+
+  if (isCapacitorNative()) {
+    try {
+      const { LocalNotifications } = await import('@capacitor/local-notifications');
+      await LocalNotifications.addListener('localNotificationActionPerformed', async (event: any) => {
+        await focusWindow();
+        const path = event?.notification?.extra?.path;
+        if (path && typeof path === 'string' && notificationTapCallback) {
+          notificationTapCallback(path);
+        }
+      });
+    } catch (err) {
+      console.warn('Failed to set up Capacitor notification tap listener:', err);
+    }
+  }
 };
 
 /**
@@ -204,6 +222,15 @@ export const isTauri = (): boolean =>
 export const isElectron = (): boolean =>
   typeof window !== 'undefined' && 'electron' in window;
 
+/**
+ * Check if we're running inside a Capacitor native app
+ */
+export const isCapacitorNative = (): boolean => {
+  if (typeof window === 'undefined') return false;
+  const cap = (window as any).Capacitor;
+  return Boolean(cap?.isNativePlatform?.() || cap?.getPlatform?.() === 'android' || cap?.getPlatform?.() === 'ios');
+};
+
 /**
  * Check if we're running on a mobile platform (Android/iOS)
  */
@@ -305,6 +332,78 @@ const ensureNotificationChannel = async (): Promise<void> => {
   }
 };
 
+const ensureCapacitorNotificationChannel = async (): Promise<void> => {
+  if (notificationChannelCreated || !isAndroid()) return;
+
+  try {
+    const { LocalNotifications } = await import('@capacitor/local-notifications');
+    await LocalNotifications.createChannel({
+      id: 'messages',
+      name: 'Messages',
+      description: 'Message notifications from Matrix',
+      importance: 5,
+      sound: 'default',
+      visibility: 1,
+      vibration: true,
+      lights: true,
+    });
+    notificationChannelCreated = true;
+  } catch (err) {
+    console.warn('Failed to create Capacitor notification channel:', err);
+  }
+};
+
+/**
+ * Request notification permission across Electron, Tauri, Capacitor, and browser
+ */
+export const requestSystemNotificationPermission = async (): Promise<boolean> => {
+  if (isElectron() || (isTauri() && !isElectron())) {
+    if (!('Notification' in window)) return false;
+    const permission = await Notification.requestPermission();
+    return permission === 'granted';
+  }
+
+  if (isCapacitorNative()) {
+    try {
+      const { LocalNotifications } = await import('@capacitor/local-notifications');
+      let perm = await LocalNotifications.checkPermissions();
+      if (perm.display !== 'granted') {
+        perm = await LocalNotifications.requestPermissions();
+      }
+      return perm.display === 'granted';
+    } catch (err) {
+      console.warn('Capacitor notification permission request failed:', err);
+      return false;
+    }
+  }
+
+  if (!('Notification' in window)) return false;
+  const permission = await Notification.requestPermission();
+  return permission === 'granted';
+};
+
+export const getSystemNotificationPermissionState = async (): Promise<PermissionState> => {
+  if (isCapacitorNative()) {
+    try {
+      const { LocalNotifications } = await import('@capacitor/local-notifications');
+      const perm = await LocalNotifications.checkPermissions();
+      return perm.display === 'granted' ? 'granted' : 'prompt';
+    } catch (err) {
+      console.warn('Failed to check Capacitor notification permission:', err);
+      return 'denied';
+    }
+  }
+
+  if ('Notification' in window) {
+    if (window.Notification.permission === 'default') {
+      return 'prompt';
+    }
+    return window.Notification.permission;
+  }
+
+  return 'denied';
+};
+
 /**
  * Send a notification using Tauri's notification plugin
  * Falls back to browser Notification API if not in Tauri
@@ -370,6 +469,38 @@ export const sendNotification = async (options: {
     }
   }
 
+  if (isCapacitorNative()) {
+    try {
+      const { LocalNotifications } = await import('@capacitor/local-notifications');
+      let perm = await LocalNotifications.checkPermissions();
+      if (perm.display !== 'granted') {
+        perm = await LocalNotifications.requestPermissions();
+      }
+
+      if (perm.display === 'granted') {
+        await ensureCapacitorNotificationChannel();
+
+        const id = Math.floor(Date.now() % 2147483647);
+        await LocalNotifications.schedule({
+          notifications: [
+            {
+              id,
+              title,
+              body,
+              channelId: isAndroid() ? 'messages' : undefined,
+              smallIcon: isAndroid() ? ANDROID_NOTIFICATION_SMALL_ICON : undefined,
+              iconColor: isAndroid() ? ANDROID_NOTIFICATION_ICON_COLOR : undefined,
+              extra: path ? { path } : undefined,
+            },
+          ],
+        });
+      }
+      return;
+    } catch (err) {
+      console.warn('Capacitor notification failed:', err);
+    }
+  }
+  
   // Fallback to browser notification
   sendBrowserNotification({ title, body, icon, onClick });
 };

src/ext.d.ts

@@ -53,6 +53,9 @@ interface PluginAPI {
 interface ElectronAPI {
   platform?: string;
   arch?: string;
+  clipboard?: {
+    writeText: (text: string) => void;
+  };
   plugins?: PluginAPI;
 }
 

src/index.css

@@ -94,6 +94,11 @@ body {
   font-variant-ligatures: no-contextual;
 }
 
+/* Prevent zalgo text and combining diacritics from overflowing line boundaries */
+p, span, div, a, button, li, td, th, h1, h2, h3, h4, h5, h6 {
+  line-height: 1.5;
+}
+
 /* Theme-specific body backgrounds for safe area padding */
 body.light-theme {
   background-color: #F0F0F0;

src/types/matrix/common.ts

@@ -4,6 +4,9 @@ import { MsgType } from 'matrix-js-sdk';
 export const MATRIX_BLUR_HASH_PROPERTY_NAME = 'xyz.amorgan.blurhash';
 export const MATRIX_SPOILER_PROPERTY_NAME = 'page.codeberg.everypizza.msc4193.spoiler';
 export const MATRIX_SPOILER_REASON_PROPERTY_NAME = 'page.codeberg.everypizza.msc4193.spoiler.reason';
+export const PAARROT_CAROUSEL_UUID_PROPERTY_NAME = 'com.paarrot.carousel_uuid';
+export const PAARROT_CAROUSEL_INDEX_PROPERTY_NAME = 'com.paarrot.carousel_index';
+export const PAARROT_CAROUSEL_TOTAL_PROPERTY_NAME = 'com.paarrot.carousel_total';
 
 export type IImageInfo = {
   w?: number;
@@ -51,6 +54,9 @@ export type IImageContent = {
   file?: IEncryptedFile;
   [MATRIX_SPOILER_PROPERTY_NAME]?: boolean;
   [MATRIX_SPOILER_REASON_PROPERTY_NAME]?: string;
+  [PAARROT_CAROUSEL_UUID_PROPERTY_NAME]?: string;
+  [PAARROT_CAROUSEL_INDEX_PROPERTY_NAME]?: number;
+  [PAARROT_CAROUSEL_TOTAL_PROPERTY_NAME]?: number;
 };
 
 export type IVideoContent = {

src/util/colorMXID.js

@@ -1,5 +1,69 @@
 // https://github.com/cloudrac3r/cadencegq/blob/master/pug/mxid.pug
 
+/**
+ * Convert HSL to hex color
+ * @param {number} h - Hue (0-360)
+ * @param {number} s - Saturation (0-100)
+ * @param {number} l - Lightness (0-100)
+ * @returns {string} Hex color string
+ */
+function hslToHex(h, s, l) {
+  const sNorm = s / 100;
+  const lNorm = l / 100;
+
+  const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm;
+  const x = c * (1 - Math.abs((h / 60) % 2 - 1));
+  const m = lNorm - c / 2;
+
+  let r = 0;
+  let g = 0;
+  let b = 0;
+
+  if (h >= 0 && h < 60) {
+    r = c; g = x; b = 0;
+  } else if (h >= 60 && h < 120) {
+    r = x; g = c; b = 0;
+  } else if (h >= 120 && h < 180) {
+    r = 0; g = c; b = x;
+  } else if (h >= 180 && h < 240) {
+    r = 0; g = x; b = c;
+  } else if (h >= 240 && h < 300) {
+    r = x; g = 0; b = c;
+  } else if (h >= 300 && h < 360) {
+    r = c; g = 0; b = x;
+  }
+
+  const rHex = Math.round((r + m) * 255).toString(16).padStart(2, '0');
+  const gHex = Math.round((g + m) * 255).toString(16).padStart(2, '0');
+  const bHex = Math.round((b + m) * 255).toString(16).padStart(2, '0');
+
+  return `#${rHex}${gHex}${bHex}`.toUpperCase();
+}
+
+// Light theme colors: hsl(h, 100%, l)
+const LIGHT_COLORS = [
+  { h: 208, s: 100, l: 45 }, // --mx-uc-1
+  { h: 302, s: 100, l: 30 }, // --mx-uc-2
+  { h: 163, s: 100, l: 30 }, // --mx-uc-3
+  { h: 343, s: 100, l: 45 }, // --mx-uc-4
+  { h: 24, s: 100, l: 45 },  // --mx-uc-5
+  { h: 181, s: 100, l: 30 }, // --mx-uc-6
+  { h: 242, s: 100, l: 45 }, // --mx-uc-7
+  { h: 94, s: 100, l: 35 },  // --mx-uc-8
+];
+
+// Dark theme colors: hsl(h, 100%, l)
+const DARK_COLORS = [
+  { h: 208, s: 100, l: 75 }, // --mx-uc-1
+  { h: 301, s: 100, l: 80 }, // --mx-uc-2
+  { h: 163, s: 100, l: 70 }, // --mx-uc-3
+  { h: 343, s: 100, l: 75 }, // --mx-uc-4
+  { h: 24, s: 100, l: 70 },  // --mx-uc-5
+  { h: 181, s: 100, l: 60 }, // --mx-uc-6
+  { h: 243, s: 100, l: 80 }, // --mx-uc-7
+  { h: 94, s: 100, l: 80 },  // --mx-uc-8
+];
+
 function hashCode(str) {
   let hash = 0;
   let i;
@@ -22,6 +86,33 @@ export function cssColorMXID(userId) {
   return `--mx-uc-${colorNumber + 1}`;
 }
 
+/**
+ * Get the actual hex color value for a user ID
+ * @param {string} userId - Matrix user ID
+ * @param {boolean} isDark - Whether to use dark theme colors (default: auto-detect)
+ * @returns {string} Hex color string
+ */
+export function getColorMXIDValue(userId, isDark) {
+  const colorNumber = hashCode(userId) % 8;
+  
+  // Auto-detect theme if not specified
+  let useDark = isDark;
+  if (typeof isDark === 'undefined') {
+    const bodyClass = document.body.className;
+    useDark = bodyClass.includes('dark-theme') || 
+              bodyClass.includes('butter-theme') || 
+              bodyClass.includes('discord-theme') || 
+              bodyClass.includes('discord-darker-theme') || 
+              bodyClass.includes('twilight-theme') || 
+              bodyClass.includes('mocha-theme');
+  }
+  
+  const colorSet = useDark ? DARK_COLORS : LIGHT_COLORS;
+  const color = colorSet[colorNumber];
+  
+  return hslToHex(color.h, color.s, color.l);
+}
+
 export default function colorMXID(userId) {
   return `var(${cssColorMXID(userId)})`;
 }

tsconfig.json

@@ -7,9 +7,10 @@
     "allowJs": true,
     "strict": true,
     "esModuleInterop": true,
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "outDir": "dist",
+    "rootDir": "./src",
     "skipLibCheck": true,
     "lib": ["ES2016", "DOM"]
   },

vite.config.js

@@ -220,6 +220,7 @@ export default defineConfig({
   server: {
     port: 38347,
     host: '0.0.0.0',
+    open: false,
     cors: true, // Enable CORS for dev server
     fs: {
       // Allow serving files from one level up to the project root