From f65e56d06d9bcbc2a20a0303c600df6c305455f4 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Thu, 4 Jun 2026 20:57:18 -0400
Subject: [PATCH] docs: update landing page with GIF preview, policy lists,
 collapsible messages, send animation, context menu

Adds inline GIF preview and collapsible long messages rows to the
feature comparison table; extends the June 2026 feature list with all
five newly completed items (P3-5, P3-9, P5-19, P5-23, P5-26).
Includes pre-staged README additions for presence tracking, encrypted
search, privacy settings, draft persistence, and PiP persistence.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 README.md          | 12 ++++++++++--
 landing/index.html | 24 ++++++++++++++++++++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index ef6a840..968c611 100644
--- a/README.md
+++ b/README.md
@@ -426,9 +426,17 @@ All custom code lives in `src/app/` on the `lotus` branch of `code.lotusguild.or
 | **PTT badge theming** | `src/app/features/call/CallControls.tsx` | Plain folds `Chip` by default; neon terminal style (`#00FF88`/`#FF6B00`, JetBrains Mono) when `lotusTerminal` setting is on |
 | **GIF picker** | `src/app/components/GifPicker.tsx`, `src/app/features/room/RoomInput.tsx` | Giphy JS/React SDK (`@giphy/react-components`, `@giphy/js-fetch-api`, `styled-components`). API key in `config.json` → `gifApiKey`. GIF button appears next to Send only when `gifApiKey` is set. Sends GIF as `m.image` (fetches blob → `mx.uploadContent` → `mx.sendMessage`). `FocusTrap` handles click-outside / Escape to close |
 | **GIF picker terminal theme** | `src/app/components/GifPicker.tsx` | When `lotusTerminal` is on: dark navy background (`#060c14`), orange dim border, 4px radius, `// GIF_SEARCH` header, injected `<style>` overrides Giphy SDK SearchBar input (dark bg, orange border/focus ring, JetBrains Mono), custom orange scrollbar |
-| **Terminal Design System toggle** | `src/app/state/settings.ts`, `src/app/features/settings/` | `lotusTerminal` boolean setting. When enabled: PTT badge and GIF picker use LotusGuild Terminal Design System aesthetics |
+| **Terminal Design System toggle** | `src/app/state/settings.ts`, `src/app/features/settings/` | `lotusTerminal` boolean setting. When enabled: PTT badge, GIF picker, and voice message recorder use LotusGuild Terminal Design System aesthetics (green #00FF88 / orange #FF6B00, JetBrains Mono) |
 | **Presence status badges** | `src/app/features/room/MembersDrawer.tsx`, `src/app/features/common-settings/members/Members.tsx`, `src/app/hooks/useUserPresence.ts`, `src/app/components/presence/` | Online/busy/away colored dot badges shown next to verification shields for every member in the room members drawer and settings members panel. Uses `useUserPresence(userId)` hook + `PresenceBadge` component. Members.tsx wraps the hook in a `MemberPresenceBadge` child component to satisfy React hook rules inside `.map()` |
-| **Per-member device sessions panel** | `src/app/components/user-profile/UserRoomProfile.tsx`, `src/app/hooks/useOtherUserDevices.ts` | Collapsible "Sessions" card in user profile popout. Lists all devices for any user with colored shield icons (green=verified, yellow=unverified). Shows per-device "Verify" button that initiates cross-signing SAS emoji verification via `crypto.requestDeviceVerification(userId, deviceId)`. Updates live via `CryptoEvent.DevicesUpdated`. Only shown when cross-signing is active |
+| **Discord-style presence tracking** | `src/app/hooks/usePresenceUpdater.ts`, `src/app/pages/client/ClientNonUIFeatures.tsx` | Broadcasts `online` on startup, `unavailable` after 10 min idle or tab hidden, `offline` on page close (fetch+keepalive). Activity throttled to 1 event/sec. `hidePresence` setting broadcasts offline and disables all tracking |
+| **Per-member device sessions panel** | `src/app/components/user-profile/UserRoomProfile.tsx`, `src/app/hooks/useOtherUserDevices.ts` | Collapsible "Sessions" card in user profile popout. Lists all devices with colored shield icons (green=verified, yellow=unverified, loading/error states). Per-device "Verify" button initiates cross-signing SAS emoji verification. Updates live via `CryptoEvent.DevicesUpdated`. Only shown when cross-signing is active |
+| **Privacy settings** | `src/app/features/settings/general/General.tsx`, `src/app/state/settings.ts` | Dedicated Privacy section in General settings. `hideActivity` suppresses typing indicators and read receipts. `hidePresence` appears offline to everyone |
+| **Encrypted room search** | `src/app/features/message-search/useLocalMessageSearch.ts`, `src/app/features/message-search/MessageSearch.tsx` | Searches locally cached decrypted events in E2EE rooms alongside server-side search. Per-room "Load more" buttons paginate 100 msgs at a time; shows oldest cached date and X/Y coverage counter. Sender-aware (respects `from:@user` filter) |
+| **Message search: sender filter** | `src/app/features/message-search/SearchInput.tsx`, `src/app/features/message-search/SearchFilters.tsx` | Type `from:@user` in the search box for live autocomplete of known users (homeserver-biased ranking). Selected senders shown as removable chips. Works for both server search and local encrypted search |
+| **Message search: date range** | `src/app/features/message-search/SearchFilters.tsx`, `src/app/features/message-search/useMessageSearch.ts` | From/To date pickers in the filter bar. Passed as `from_ts`/`to_ts` epoch ms to Matrix `/search` |
+| **Document title unread count** | `src/app/pages/client/ClientNonUIFeatures.tsx` | Tab title updates to `(N) Lotus Chat` for mentions, `· Lotus Chat` for unreads, `Lotus Chat` when clear |
+| **Message draft persistence** | `src/app/features/room/RoomInput.tsx` | Unsent messages survive page reload via `localStorage` (`draft-msg-<roomId>`). Jotai in-memory atom remains the primary store; localStorage used as fallback on reload. Cleared on send |
+| **PiP position persistence + snap** | `src/app/components/CallEmbedProvider.tsx` | PiP position saved to `localStorage` on drag end; restored on next PiP enter (clamped to viewport). Double-click snaps to nearest corner with 180ms CSS transition |
 | **LiveKit codec config** | `/etc/livekit/config.yaml` (LXC 151) | `enabled_codecs`: VP8, H264, VP9, Opus, RED for better quality and redundancy |
 
 **Key config values (`/opt/lotus-cinny/config.json`, root — vite copies this to dist):**
diff --git a/landing/index.html b/landing/index.html
index 45b6907..35c5088 100644
--- a/landing/index.html
+++ b/landing/index.html
@@ -555,7 +555,7 @@
             </div>
             <p class="also-available">
                 Our Lotus Guild fork of Cinny adds: voice message recording &amp; playback with 0.75×/1×/1.5×/2× speed control (MSC3245, E2EE), device verification fix (cross-client SAS emoji + inline cards), per-member device session panel with per-device verify buttons, full Discord-style presence tracking (online on startup, idle/away after 10&nbsp;min inactivity, unavailable when tab hidden, offline on close &mdash; with a &ldquo;Hide Online Status&rdquo; privacy toggle), presence status indicators (online/busy/away dots) in member lists, incoming call ring + Answer/Decline (DMs &amp; group chats), GIF picker (Giphy), emoji &amp; sticker picker (custom packs, stickers send as <code style="font-size:0.8em;color:#e88;">m.sticker</code> events), pinned messages panel (pin icon in room header, pin/unpin from message menu), who-reacted viewer (hover any reaction for a name tooltip; right-click for a full avatar list), draggable+resizable picture-in-picture call window, poll creation &amp; voting (single or multiple choice, 2&ndash;10 options), message forwarding, image/video captions, location sharing (map view + send), deleted message placeholders, per-message read receipt avatars (click for full list with timestamps), private read receipts toggle (Settings &rarr; Privacy), screenshare fullscreen button, screenshare audio mute (mute a screenshare&rsquo;s audio without leaving the call), PTT (Push-to-Talk with configurable hold key), push-to-deafen (<kbd style="font-size:0.8em;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:3px;padding:1px 5px;">M</kbd> key, configurable in Settings &rarr; Calls), custom status messages with emoji picker + auto-clear timer (30&nbsp;min &ndash; 7&nbsp;days) shown below usernames, encrypted room search via local cache scan with per-room &ldquo;Load more&rdquo; history buttons, a dedicated Privacy settings section (hide typing, hide online status), sidebar room filter (search rooms by name in Home and DMs tabs), favorite rooms (star any room, syncs across devices via m.favourite tag), media gallery drawer (browse all images/videos/files shared in a room), invite link + QR code (in both invite modal and room settings), knock-to-join support (Request to Join button + admin Approve/Deny panel), code syntax highlighting in Lotus Terminal mode (keywords, strings, numbers, comments, functions), night light / blue light filter (warm orange overlay with adjustable intensity in Settings &rarr; Appearance), message length counter in the composer, and the Lotus Terminal design theme (with TDS-styled orange typing indicator dots).
-                Also added in June 2026: message scheduling (MSC4140, datetime picker, cancel tray), saved messages / bookmarks (right-click any message, sidebar panel, syncs across devices), room history export (txt/json/html, date range, E2EE-aware), room activity &amp; mod log (joins, kicks, bans, power level changes), server ACL editor (allow/deny lists, wildcard validation, power-level gated), room stats panel (top members, top reactions, media breakdown, 24h activity heatmap), opt-in image compression (Canvas API at 0.82 quality, shows before/after sizes), and 13 domain-specific URL preview cards (YouTube, Vimeo, Twitch, Reddit, X/Twitter, Spotify, Steam, IMDb, Wikipedia, GitHub, Discord, npm, Stack Overflow).
+                Also added in June 2026: message scheduling (MSC4140, datetime picker, cancel tray), saved messages / bookmarks (right-click any message, sidebar panel, syncs across devices), room history export (txt/json/html, date range, E2EE-aware), room activity &amp; mod log (joins, kicks, bans, power level changes), server ACL editor (allow/deny lists, wildcard validation, power-level gated), room stats panel (top members, top reactions, media breakdown, 24h activity heatmap), opt-in image compression (Canvas API at 0.82 quality, shows before/after sizes), 13 domain-specific URL preview cards (YouTube, Vimeo, Twitch, Reddit, X/Twitter, Spotify, Steam, IMDb, Wikipedia, GitHub, Discord, npm, Stack Overflow), inline GIF preview (Giphy &amp; Tenor share links auto-embed as animated GIFs via the homeserver proxy), policy list viewer (admin panel for <code style="font-size:0.8em;color:#e88;">m.policy.rule.*</code> ban list rooms &mdash; complements Draupnir), collapsible long messages (auto-collapse &gt;&thinsp;20 lines with &ldquo;Read more&rdquo; toggle, threshold configurable), message send animation (0.15&thinsp;s fade+scale on own messages, respects prefers-reduced-motion), and right-click room context menu improvements (Mute with duration submenu 15&thinsp;min&ndash;indefinite, Copy Room Link, Mark as Read, Leave Room, Room Settings).
                 Prefer the unmodified upstream? <a href="https://cinny.in" target="_blank" rel="noopener">cinny.in</a> works with our homeserver &mdash; set it to <code style="font-size:0.8em;color:#e88;">matrix.lotusguild.org</code>.
             </p>
 
@@ -676,7 +676,7 @@
 
     <!-- ── Feature Comparison Table ── -->
     <div class="comparison-section">
-        <p class="comparison-title">Client Feature Comparison &mdash; June 2026 (updated)</p>
+        <p class="comparison-title">Client Feature Comparison &mdash; June 2026 (latest)</p>
         <p class="scroll-hint" id="scrollHint">← swipe to compare →</p>
         <div class="table-wrap">
         <table>
@@ -1168,6 +1168,26 @@
                     <td><span class="yes">✓</span></td>
                     <td><span class="no">✗</span></td>
                 </tr>
+                <tr>
+                    <td>Collapsible long messages<small>auto-collapse &gt;20 lines</small></td>
+                    <td class="ours"><span class="yes">✓</span><small>"Read more" toggle,<br>threshold configurable</small></td>
+                    <td><span class="no">✗</span></td>
+                    <td><span class="no">✗</span></td>
+                    <td><span class="no">✗</span></td>
+                    <td><span class="no">✗</span></td>
+                    <td><span class="no">✗</span></td>
+                    <td><span class="no">✗</span></td>
+                </tr>
+                <tr>
+                    <td>Inline GIF preview<small>Giphy / Tenor links auto-embed</small></td>
+                    <td class="ours"><span class="yes">✓</span><small>via homeserver proxy,<br>no direct CDN contact</small></td>
+                    <td><span class="no">✗</span></td>
+                    <td><span class="no">✗</span></td>
+                    <td><span class="no">✗</span></td>
+                    <td><span class="no">✗</span></td>
+                    <td><span class="no">✗</span></td>
+                    <td><span class="no">✗</span></td>
+                </tr>
 
             </tbody>
         </table>