fix: DM preview shows message body for E2EE rooms; filter inputs match members panel style

- RoomNavItem: change isEncrypted() to isDecryptionFailure() so DM
  previews show actual message body for successfully decrypted E2EE
  events instead of always showing 'Encrypted message'
- Home.tsx / Direct.tsx: upgrade filter inputs to size 400 / radii 400
  with search icon prefix to match the members list search bar style

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/features/room-nav/RoomNavItem.tsx

@@ -454,7 +454,7 @@ function RoomNavItem_({
     // Skip pure membership events
     if (type === StateEvent.RoomMember) return null;
     let body: string;
-    if (latestEvent.isEncrypted()) {
+    if (latestEvent.isDecryptionFailure()) {
       body = 'Encrypted message';
     } else if (type === MessageEvent.Sticker) {
       body = 'Sticker';

src/app/features/room/MediaGallery.tsx

@@ -13,7 +13,7 @@ import {
   TooltipProvider,
   config,
 } from 'folds';
-import { Direction, EventType, MatrixEvent, MsgType, Room } from 'matrix-js-sdk';
+import { EventType, MsgType, Room } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { mxcUrlToHttp } from '../../utils/matrix';
@@ -65,53 +65,45 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
   const useAuthentication = useMediaAuthentication();
 
   const [tab, setTab] = useState<GalleryTab>('image');
-  const [events, setEvents] = useState<MatrixEvent[]>([]);
   const [loading, setLoading] = useState(false);
-  const [paginationToken, setPaginationToken] = useState<string | null>(null);
+  const [canLoadMore, setCanLoadMore] = useState(true);
 
   const msgtype = TAB_MSGTYPES[tab];
 
-  const loadMedia = useCallback(
+  // Read already-decrypted events from the live timeline (works for E2EE rooms)
-    async (fromToken: string | null, append: boolean) => {
+  const getFilteredEvents = useCallback(() => {
-      setLoading(true);
+    const timeline = room.getLiveTimeline();
-      try {
+    return timeline
-        const response = await mx.createMessagesRequest(
+      .getEvents()
-          room.roomId,
+      .filter((ev) => {
-          fromToken,
+        if (ev.isRedacted()) return false;
-          100,
+        const content = ev.getContent();
-          Direction.Backward,
+        return ev.getType() === EventType.RoomMessage && content.msgtype === msgtype;
-          undefined,
+      })
-        );
+      .slice()
-        const { end, chunk } = response;
+      .reverse(); // newest first
-        const filtered = chunk
+  }, [room, msgtype]);
-          .filter(
-            (ev) =>
-              ev.type === EventType.RoomMessage &&
-              ev.content?.msgtype === msgtype &&
-              !ev.unsigned?.redacted_because,
-          )
-          .map((ev) => new MatrixEvent(ev));
 
-        setEvents((prev) => (append ? [...prev, ...filtered] : filtered));
+  const [events, setEvents] = useState(() => getFilteredEvents());
-        setPaginationToken(end ?? null);
-      } catch {
-        // silently swallow fetch errors — gallery stays showing what it has
-      } finally {
-        setLoading(false);
-      }
-    },
-    [mx, room.roomId, msgtype],
-  );
 
   useEffect(() => {
-    setEvents([]);
+    setEvents(getFilteredEvents());
-    setPaginationToken(null);
+    setCanLoadMore(true);
-    loadMedia(null, false).catch(() => undefined);
+  }, [getFilteredEvents]);
-  }, [loadMedia]);
 
-  const handleLoadMore = () => {
+  const handleLoadMore = useCallback(async () => {
-    if (paginationToken) loadMedia(paginationToken, true).catch(() => undefined);
+    setLoading(true);
-  };
+    try {
+      const timeline = room.getLiveTimeline();
+      const hasMore = await mx.paginateEventTimeline(timeline, { backwards: true, limit: 100 });
+      setEvents(getFilteredEvents());
+      setCanLoadMore(hasMore);
+    } catch {
+      // silently swallow
+    } finally {
+      setLoading(false);
+    }
+  }, [mx, room, getFilteredEvents]);
 
   return (
     <Box
@@ -306,7 +298,7 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
             )}
 
             {/* Load more */}
-            {paginationToken !== null && !loading && (
+            {canLoadMore && !loading && events.length > 0 && (
               <Box justifyContent="Center" style={{ padding: config.space.S200 }}>
                 <Button
                   size="300"

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -267,7 +267,7 @@ function QuickSwitcherFeature() {
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'p') {
         e.preventDefault();
         setOpen(true);
       }

src/app/pages/client/direct/Direct.tsx

@@ -270,14 +270,15 @@ export function Direct() {
                   }
                   placeholder="Filter DMs…"
                   variant="Surface"
-                  size="300"
+                  size="400"
-                  radii="300"
+                  radii="400"
+                  before={<Icon size="50" src={Icons.Search} />}
                   after={
                     filterQuery ? (
                       <IconButton
                         onClick={() => setFilterQuery('')}
-                        size="300"
+                        size="400"
-                        radii="300"
+                        radii="Pill"
                         variant="Background"
                         fill="None"
                         aria-label="Clear filter"

src/app/pages/client/home/Home.tsx

@@ -402,14 +402,15 @@ export function Home() {
                   onChange={(e: ChangeEvent<HTMLInputElement>) => setFilterQuery(e.target.value)}
                   placeholder="Filter rooms…"
                   variant="Surface"
-                  size="300"
+                  size="400"
-                  radii="300"
+                  radii="400"
+                  before={<Icon size="50" src={Icons.Search} />}
                   after={
                     filterQuery ? (
                       <IconButton
                         onClick={() => setFilterQuery('')}
-                        size="300"
+                        size="400"
-                        radii="300"
+                        radii="Pill"
                         variant="Background"
                         fill="None"
                         aria-label="Clear filter"