fix(ui): avatar-decoration reliability, Saved Messages + Media Gallery redesign
Avatar decorations: useAvatarDecoration cached ALL profile-field fetch failures as "no decoration" permanently for the session. The member list and timeline mount many avatars at once, so one rate-limited (429) burst would wipe everyone's decoration until a full reload. Now only a genuine 404 (field unset) is cached; transient errors retry on the next mount. Saved Messages panel — full redesign to match the canonical MembersDrawer: - co-located BookmarksPanel.css.ts: toRem(266) + max-width:750px full-screen media query, replacing the old position:absolute/zIndex:100 mobile "modal" that had no backdrop or escape - variant="Background" header; room avatars on each item (was a generic hash) - priority tokens replace all raw opacity hacks; 3px borderLeft accent removed - Escape-to-close; multi-line preview is now a proper folds Button (N38) Media Gallery (N12): moved fixed positioning + width into MediaGallery.css.ts using toRem(320) + a full-screen media query; border/header use config tokens; added Escape-to-close on the panel (previously only the lightbox handled it). Presence (SettingsTab / useUserPresence): - N16: wrap presence-dot trigger in TooltipProvider; replace undefined --bg-surface with color.Background.Container - N17: add escapeDeactivates + isKeyForward/isKeyBackward to the FocusTrap - N19: align reader labels (usePresenceLabel) to the setter vocabulary (Online/Idle/Offline) so a chosen status matches the tooltip others see Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+52
-52
@@ -307,63 +307,63 @@ This document tracks identified bugs, edge cases, and architectural discrepancie
|
|||||||
|
|
||||||
### 🟠 Moderate — Interaction Pattern or Visual Deviations
|
### 🟠 Moderate — Interaction Pattern or Visual Deviations
|
||||||
|
|
||||||
| # | Area | File | Lines | Issue | Native Pattern |
|
| # | Area | File | Lines | Issue | Native Pattern |
|
||||||
| :-- | :------------------------- | :---------------------------------------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| :-- | :------------------------- | :---------------------------------------- | :---------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| N5 | Read Receipts | `ReadReceiptAvatars.tsx` | 62–137 | Trigger button is raw `<button>` with `onMouseEnter`/`onMouseLeave` JS style mutation for hover state | All interactive elements use `useHover` from `react-aria` and folds variant system for hover; direct `.style` mutation used nowhere else on buttons |
|
| N5 | Read Receipts | `ReadReceiptAvatars.tsx` | 62–137 | Trigger button is raw `<button>` with `onMouseEnter`/`onMouseLeave` JS style mutation for hover state | All interactive elements use `useHover` from `react-aria` and folds variant system for hover; direct `.style` mutation used nowhere else on buttons |
|
||||||
| N6 | Read Receipts | `ReadReceiptAvatars.tsx` & `Message.tsx` | 32–56 / 268–283 | Two code paths open `EventReaders`: avatar-pill path uses `useModalStyle(360)` for mobile fullscreen; context-menu path (`MessageReadReceiptItem`) does not — on mobile the context menu path opens a fixed-size non-fullscreen modal for the same content | All modals that share a layout variant use `useModalStyle` consistently; `MessageReadReceiptItem` was not updated when `useModalStyle` was added |
|
| N6 | Read Receipts | `ReadReceiptAvatars.tsx` & `Message.tsx` | 32–56 / 268–283 | Two code paths open `EventReaders`: avatar-pill path uses `useModalStyle(360)` for mobile fullscreen; context-menu path (`MessageReadReceiptItem`) does not — on mobile the context menu path opens a fixed-size non-fullscreen modal for the same content | All modals that share a layout variant use `useModalStyle` consistently; `MessageReadReceiptItem` was not updated when `useModalStyle` was added |
|
||||||
| N7 | Delivery Status | `Message.tsx` | 89–148 | `DeliveryStatus` renders Unicode glyphs (`⟳ ✓ ✕`) in a `<span>` with `fontSize: '10px'` instead of folds `<Icon>` components — **FIXED**: replaced with `Icons.Check/Cross/Send` via `<Icon size="100">` | `Icons.Check`, `Icons.Cross`, etc. are used for all other status glyphs; folds `Text` size tokens for all supplementary text |
|
| N7 | Delivery Status | `Message.tsx` | 89–148 | `DeliveryStatus` renders Unicode glyphs (`⟳ ✓ ✕`) in a `<span>` with `fontSize: '10px'` instead of folds `<Icon>` components — **FIXED**: replaced with `Icons.Check/Cross/Send` via `<Icon size="100">` | `Icons.Check`, `Icons.Cross`, etc. are used for all other status glyphs; folds `Text` size tokens for all supplementary text |
|
||||||
| N8 | GIF Picker | `GifPicker.tsx` | 83–124 | GIF picker container uses fully bespoke inline styles (`borderRadius: '12px'`, `boxShadow: '0 8px 32px rgba(0,0,0,0.4)'`, raw `rgba` border) — two separate style sets for TDS and non-TDS paths | `EmojiBoard` has no caller-applied container styling; folds components handle their own surface internally via design tokens |
|
| N8 | GIF Picker | `GifPicker.tsx` | 83–124 | GIF picker container uses fully bespoke inline styles (`borderRadius: '12px'`, `boxShadow: '0 8px 32px rgba(0,0,0,0.4)'`, raw `rgba` border) — two separate style sets for TDS and non-TDS paths | `EmojiBoard` has no caller-applied container styling; folds components handle their own surface internally via design tokens |
|
||||||
| N9 | GIF Button | `RoomInput.tsx` | 1076–1087 | GIF toolbar button renders `<Text size="T200">` with hand-rolled `fontWeight`/`fontSize`/`letterSpacing` instead of `<Icon>` — **WON'T FIX (deliberate)**: folds has no GIF icon, and "GIF" is a widely-recognized text affordance (Slack/Discord/Element all use a text label). Converting to an arbitrary icon would be less clear, not more. | All 8 other toolbar buttons (`Smile`, `Sticker`, `Location`, `Poll`, etc.) use `<Icon src={...} />` exclusively |
|
| N9 | GIF Button | `RoomInput.tsx` | 1076–1087 | GIF toolbar button renders `<Text size="T200">` with hand-rolled `fontWeight`/`fontSize`/`letterSpacing` instead of `<Icon>` — **WON'T FIX (deliberate)**: folds has no GIF icon, and "GIF" is a widely-recognized text affordance (Slack/Discord/Element all use a text label). Converting to an arbitrary icon would be less clear, not more. | All 8 other toolbar buttons (`Smile`, `Sticker`, `Location`, `Poll`, etc.) use `<Icon src={...} />` exclusively |
|
||||||
| N10 | Send Animation | `Message.tsx` + `Animations.css.ts` | 979–998 / 60–71 | `MsgAppearClass` and `MentionHighlightPulse` both animate `transform: scale` on the same `MessageBase` DOM node — on self-sent mention messages both classes apply simultaneously and fight over the `transform` property | Pre-existing `highlightAnime` only animates `backgroundColor`; no prior `transform` animation on `MessageBase` |
|
| N10 | Send Animation | `Message.tsx` + `Animations.css.ts` | 979–998 / 60–71 | `MsgAppearClass` and `MentionHighlightPulse` both animate `transform: scale` on the same `MessageBase` DOM node — on self-sent mention messages both classes apply simultaneously and fight over the `transform` property | Pre-existing `highlightAnime` only animates `backgroundColor`; no prior `transform` animation on `MessageBase` |
|
||||||
| N11 | AvatarDecoration | `AvatarDecoration.tsx` | 5 / 38–41 | Fixed 8px inset on all sides regardless of avatar size — at folds size `"200"` (~32px) the decoration bleeds 50% of the avatar diameter, clipping against `overflow: hidden` parent containers in member lists | Folds `Avatar` and `PresenceRingAvatar` do not emit overflow outside their bounding box |
|
| N11 | AvatarDecoration | `AvatarDecoration.tsx` | 5 / 38–41 | Fixed 8px inset on all sides regardless of avatar size — at folds size `"200"` (~32px) the decoration bleeds 50% of the avatar diameter, clipping against `overflow: hidden` parent containers in member lists. **Inset issue still OPEN.** _Related regression fixed in `useAvatarDecoration.ts`_: the decoration fetch cached **all** failures (including transient 429/5xx) as "no decoration" permanently for the session, so a single rate-limited burst (member list / timeline mount many avatars at once) would make decorations vanish until a full reload. Now only a genuine 404 is cached; transient errors retry on the next mount. | Folds `Avatar` and `PresenceRingAvatar` do not emit overflow outside their bounding box |
|
||||||
| N12 | MediaGallery Drawer | `MediaGallery.tsx` | 651–661 | Drawer uses `position: 'fixed'` with hardcoded `width: '320px'` as inline styles on a `<Box>` | `MembersDrawer` uses a vanilla-extract class with `width: toRem(266)` and is placed by the layout system, not `position: fixed`. 54px width discrepancy also breaks visual rhythm if both panels could be open |
|
| N12 | MediaGallery Drawer | `MediaGallery.tsx` | 651–661 | Drawer uses `position: 'fixed'` with hardcoded `width: '320px'` as inline styles on a `<Box>` — **FIXED**: moved positioning/width into co-located `MediaGallery.css.ts` using `toRem(320)` + a `max-width: 750px` full-screen media query (mirrors `MembersDrawer`); border/header now use `config.borderWidth`/`config.space` tokens. Added Escape-to-close on the panel (previously only the lightbox handled Escape). | `MembersDrawer` uses a vanilla-extract class with `width: toRem(266)` and is placed by the layout system, not `position: fixed`. 54px width discrepancy also breaks visual rhythm if both panels could be open |
|
||||||
| N13 | ScheduledMessagesTray | `ScheduledMessagesTray.tsx` | 108–126 | Collapsible tray header is `<Box as="button">` with `cursor: 'pointer'` inline style and no folds variant — no hover state, no focus ring — **FIXED**: replaced with folds `<Button variant="Secondary" fill="None" radii="0">` using `before`/`after` icon props (gains design-system hover/focus) | All clickable header/toggle elements in the room view use folds `<Button>` or `<IconButton>` with explicit variants for hover/focus; `<Box as="button">` with no variant is used nowhere else |
|
| N13 | ScheduledMessagesTray | `ScheduledMessagesTray.tsx` | 108–126 | Collapsible tray header is `<Box as="button">` with `cursor: 'pointer'` inline style and no folds variant — no hover state, no focus ring — **FIXED**: replaced with folds `<Button variant="Secondary" fill="None" radii="0">` using `before`/`after` icon props (gains design-system hover/focus) | All clickable header/toggle elements in the room view use folds `<Button>` or `<IconButton>` with explicit variants for hover/focus; `<Box as="button">` with no variant is used nowhere else |
|
||||||
| N14 | ForwardMessageDialog | `ForwardMessageDialog.tsx` | 137–154 | Dialog uses `<Modal>` but has no `<Header>` component and no close `<IconButton>` — only way to close is clicking outside | Every other modal using `<Modal>` or `<Box role="dialog">` includes a `<Header>` with a close `<IconButton>` in the top-right (EditHistoryModal, LeaveRoomPrompt, ScheduleMessageModal, RemindMeDialog, etc.) |
|
| N14 | ForwardMessageDialog | `ForwardMessageDialog.tsx` | 137–154 | Dialog uses `<Modal>` but has no `<Header>` component and no close `<IconButton>` — only way to close is clicking outside | Every other modal using `<Modal>` or `<Box role="dialog">` includes a `<Header>` with a close `<IconButton>` in the top-right (EditHistoryModal, LeaveRoomPrompt, ScheduleMessageModal, RemindMeDialog, etc.) |
|
||||||
| N15 | ScheduleMessageModal | `ScheduleMessageModal.tsx` | 180–193 | Modal root is `<Box as="form" role="dialog">` with manually assembled `borderRadius: config.radii.R400`/`boxShadow` | `ForwardMessageDialog` uses folds `<Modal size="400">` with `R500` radius; the R400 vs R500 mismatch is visible when both dialogs appear in the same session |
|
| N15 | ScheduleMessageModal | `ScheduleMessageModal.tsx` | 180–193 | Modal root is `<Box as="form" role="dialog">` with manually assembled `borderRadius: config.radii.R400`/`boxShadow` | `ForwardMessageDialog` uses folds `<Modal size="400">` with `R500` radius; the R400 vs R500 mismatch is visible when both dialogs appear in the same session |
|
||||||
| N16 | Presence Picker | `SettingsTab.tsx` | 118–144 | Presence trigger dot is raw `<button>` with `position: absolute; bottom: 2; right: 2` inline and no folds focus ring; no tooltip | Every other sidebar icon button uses folds `IconButton` with `SidebarItemTooltip` and `TooltipProvider` |
|
| N16 | Presence Picker | `SettingsTab.tsx` | 118–144 | Presence trigger dot is raw `<button>` with `position: absolute; bottom: 2; right: 2` inline and no folds focus ring; no tooltip — **FIXED**: wrapped the trigger in a folds `TooltipProvider` (shows "Status: …"); replaced the undefined `var(--bg-surface)` with `color.Background.Container`. Kept the absolute-positioned `<button>` (it overlays the avatar corner; a full `IconButton` would be too large for the dot). | Every other sidebar icon button uses folds `IconButton` with `SidebarItemTooltip` and `TooltipProvider` |
|
||||||
| N17 | Presence Picker | `SettingsTab.tsx` | 80–86 | `PresencePicker` `FocusTrap` missing `escapeDeactivates: stopPropagation` and `isKeyForward`/`isKeyBackward` | Every other `PopOut`+`FocusTrap`+`Menu` combo supplies both (theme selector `General.tsx:143–160`, `SettingsSelect`, sort menus) — without it Escape bubbles past the trap and arrow-key navigation is absent |
|
| N17 | Presence Picker | `SettingsTab.tsx` | 80–86 | `PresencePicker` `FocusTrap` missing `escapeDeactivates: stopPropagation` and `isKeyForward`/`isKeyBackward` — **FIXED**: added all three options, matching the theme selector / sort menus | Every other `PopOut`+`FocusTrap`+`Menu` combo supplies both (theme selector `General.tsx:143–160`, `SettingsSelect`, sort menus) — without it Escape bubbles past the trap and arrow-key navigation is absent |
|
||||||
| N18 | Profile Selects | `Profile.tsx` | 547–575 / 816–848 | `ProfileStatus` auto-clear and `ProfileTimezone` selectors are native `<select>` elements with hardcoded `colorScheme: 'dark'` — will render in dark mode on light themes | General.tsx uses folds `SettingsSelect<T>` (`Button`+`PopOut`+`Menu`) for all dropdowns; `colorScheme: 'dark'` breaks light/custom theme appearance |
|
| N18 | Profile Selects | `Profile.tsx` | 547–575 / 816–848 | `ProfileStatus` auto-clear and `ProfileTimezone` selectors are native `<select>` elements with hardcoded `colorScheme: 'dark'` — will render in dark mode on light themes | General.tsx uses folds `SettingsSelect<T>` (`Button`+`PopOut`+`Menu`) for all dropdowns; `colorScheme: 'dark'` breaks light/custom theme appearance |
|
||||||
| N19 | Presence Labels | `useUserPresence.ts` vs `SettingsTab.tsx` | 55–62 / 36–42 | `PresenceBadge` tooltip shows "Active / Busy / Away"; `PresencePicker` options read "Online / Idle / Do Not Disturb / Invisible" — a DND user shows tooltip "Busy", not "Do Not Disturb" | Within the same Lotus feature set the user-facing vocabulary is inconsistent between the setter UI and the reader tooltip |
|
| N19 | Presence Labels | `useUserPresence.ts` vs `SettingsTab.tsx` | 55–62 / 36–42 | `PresenceBadge` tooltip shows "Active / Busy / Away"; `PresencePicker` options read "Online / Idle / Do Not Disturb / Invisible" — a DND user shows tooltip "Busy", not "Do Not Disturb" — **FIXED**: aligned `usePresenceLabel` reader vocabulary to the setter (online→"Online", unavailable→"Idle", offline→"Offline") | Within the same Lotus feature set the user-facing vocabulary is inconsistent between the setter UI and the reader tooltip |
|
||||||
| N20 | Notification Presets | `Notifications.tsx` | 57–107 | Gaming/Work/Sleep preset buttons are bare `<button>` elements with Lotus-specific CSS vars (`--border-interactive-normal`, `--bg-surface-low`) not defined in all themes | Grouped preset/action buttons elsewhere use folds `Chip variant="Primary/Secondary" outlined radii="Pill"` (e.g., Composer Toolbar toggles in `General.tsx:1100–1113`) |
|
| N20 | Notification Presets | `Notifications.tsx` | 57–107 | Gaming/Work/Sleep preset buttons are bare `<button>` elements with Lotus-specific CSS vars (`--border-interactive-normal`, `--bg-surface-low`) not defined in all themes | Grouped preset/action buttons elsewhere use folds `Chip variant="Primary/Secondary" outlined radii="Pill"` (e.g., Composer Toolbar toggles in `General.tsx:1100–1113`) |
|
||||||
| N21 | Notification Sound Selects | `SystemNotification.tsx` | 111–305 | Message sound, invite sound, and quiet-hours time pickers are bare `<select>`/`<input type="time">` with `colorScheme: 'dark'` workaround | All other dropdowns in settings use the `Button`+`PopOut`+`Menu`+`MenuItem` folds pattern; the native select renders OS-styled on all platforms |
|
| N21 | Notification Sound Selects | `SystemNotification.tsx` | 111–305 | Message sound, invite sound, and quiet-hours time pickers are bare `<select>`/`<input type="time">` with `colorScheme: 'dark'` workaround | All other dropdowns in settings use the `Button`+`PopOut`+`Menu`+`MenuItem` folds pattern; the native select renders OS-styled on all platforms |
|
||||||
| N22 | DM Preview Virtualizer | `RoomNavItem.tsx` / `Direct.tsx` | 608–627 / 232 | DM preview adds a second text row to each DM item, making it taller than 38px, but `useVirtualizer` in `Direct.tsx` still uses `estimateSize: () => 38` — causes layout jump/overlap on initial render | Non-DM rooms in Home.tsx also estimate 38px; DM items with a preview are now a different height, creating two visual densities in the same nav column |
|
| N22 | DM Preview Virtualizer | `RoomNavItem.tsx` / `Direct.tsx` | 608–627 / 232 | DM preview adds a second text row to each DM item, making it taller than 38px, but `useVirtualizer` in `Direct.tsx` still uses `estimateSize: () => 38` — causes layout jump/overlap on initial render | Non-DM rooms in Home.tsx also estimate 38px; DM items with a preview are now a different height, creating two visual densities in the same nav column |
|
||||||
| N23 | RoomServerACL | `RoomServerACL.tsx` | 100–115 / 298–309 | Server-name text input is a raw `<input type="text">` with inline style object; "Allow IP literal addresses" is a raw `<input type="checkbox">` with `style={{ width: 16, height: 16 }}` | All other text/boolean controls in room settings use folds `Input` and `Checkbox` components (`RoomAddress.tsx:163`, `RoomAddress.tsx:330`) |
|
| N23 | RoomServerACL | `RoomServerACL.tsx` | 100–115 / 298–309 | Server-name text input is a raw `<input type="text">` with inline style object; "Allow IP literal addresses" is a raw `<input type="checkbox">` with `style={{ width: 16, height: 16 }}` | All other text/boolean controls in room settings use folds `Input` and `Checkbox` components (`RoomAddress.tsx:163`, `RoomAddress.tsx:330`) |
|
||||||
| N24 | PolicyListViewer | `PolicyListViewer.tsx` | 245–264 | Room-ID add input is a raw `<input type="text">` with manually replicated folds token values | Native pattern: folds `<Input variant="Secondary" size="300" radii="300">` — no inline style needed |
|
| N24 | PolicyListViewer | `PolicyListViewer.tsx` | 245–264 | Room-ID add input is a raw `<input type="text">` with manually replicated folds token values | Native pattern: folds `<Input variant="Secondary" size="300" radii="300">` — no inline style needed |
|
||||||
| N25 | ExportRoomHistory Inputs | `ExportRoomHistory.tsx` | 258–292 | Both date range pickers are raw `<input type="date">` with inline styles | Native pattern: folds `Input` component; `<input type="date">` renders OS-native date picker, unstyled relative to the rest of the settings panel |
|
| N25 | ExportRoomHistory Inputs | `ExportRoomHistory.tsx` | 258–292 | Both date range pickers are raw `<input type="date">` with inline styles | Native pattern: folds `Input` component; `<input type="date">` renders OS-native date picker, unstyled relative to the rest of the settings panel |
|
||||||
| N26 | RoomShareInvite QR | `RoomShareInvite.tsx` | 66–73 | QR code `<img>` has no `onError` handler and no loading state — broken-image placeholder shown when the external API is unreachable | Cinny avatar components and MediaGallery use `onError` handlers; this is the only settings element making a request to a third-party server with no graceful degradation |
|
| N26 | RoomShareInvite QR | `RoomShareInvite.tsx` | 66–73 | QR code `<img>` has no `onError` handler and no loading state — broken-image placeholder shown when the external API is unreachable | Cinny avatar components and MediaGallery use `onError` handlers; this is the only settings element making a request to a third-party server with no graceful degradation |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### 🟡 Minor — Cosmetic / Token Discipline
|
### 🟡 Minor — Cosmetic / Token Discipline
|
||||||
|
|
||||||
| # | Area | File | Lines | Issue | Native Pattern |
|
| # | Area | File | Lines | Issue | Native Pattern |
|
||||||
| :------ | :--------------------------------- | :------------------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| :------ | :--------------------------------- | :------------------------------------- | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| N27 | GIF Picker | `GifPicker.tsx` | 103–110 | `FocusTrap` omits `returnFocusOnDeactivate: false` — focus returns to GIF button on dismiss instead of staying in the editor | `EmojiBoard` in `RoomInput.tsx:978` explicitly sets `returnFocusOnDeactivate={false}`; GIF picker dismiss behaviour is inconsistent with emoji picker |
|
| N27 | GIF Picker | `GifPicker.tsx` | 103–110 | `FocusTrap` omits `returnFocusOnDeactivate: false` — focus returns to GIF button on dismiss instead of staying in the editor | `EmojiBoard` in `RoomInput.tsx:978` explicitly sets `returnFocusOnDeactivate={false}`; GIF picker dismiss behaviour is inconsistent with emoji picker |
|
||||||
| N28 | Character Counter | `RoomInput.tsx` | 1159–1174 | Composer character counter rendered with `color: 'var(--tc-surface-low)'` and raw pixel padding — a CSS variable not used anywhere else in the codebase — **FIXED**: removed undefined var and raw opacity; now `<Text priority="300">` with `config.space.S100` padding | Use `color.*` folds tokens or `priority="300"` on a `Text` component |
|
| N28 | Character Counter | `RoomInput.tsx` | 1159–1174 | Composer character counter rendered with `color: 'var(--tc-surface-low)'` and raw pixel padding — a CSS variable not used anywhere else in the codebase — **FIXED**: removed undefined var and raw opacity; now `<Text priority="300">` with `config.space.S100` padding | Use `color.*` folds tokens or `priority="300"` on a `Text` component |
|
||||||
| N29 | PollCreator Modal | `PollCreator.tsx` | 103–116 | Modal root is `<Box as="form" role="dialog" aria-modal="true">` with manually assembled surface styles instead of folds `<Dialog variant="Surface">` | `MessageDeleteItem` and `MessageReportItem` in `Message.tsx:506,635` use `<Dialog variant="Surface">` inside `OverlayCenter > FocusTrap` |
|
| N29 | PollCreator Modal | `PollCreator.tsx` | 103–116 | Modal root is `<Box as="form" role="dialog" aria-modal="true">` with manually assembled surface styles instead of folds `<Dialog variant="Surface">` | `MessageDeleteItem` and `MessageReportItem` in `Message.tsx:506,635` use `<Dialog variant="Surface">` inside `OverlayCenter > FocusTrap` |
|
||||||
| N30 | Playback Speed Chip | `AudioContent.tsx` | 163–189 | Speed chip uses `variant="SurfaceVariant" radii="Pill"` while adjacent Play/Pause chip uses `variant="Secondary" radii="300"` — mismatched shape and variant within the same `leftControl` row — **FIXED**: changed speed chip to `variant="Secondary" radii="300"` | Controls grouped in the same row should share variant and radii |
|
| N30 | Playback Speed Chip | `AudioContent.tsx` | 163–189 | Speed chip uses `variant="SurfaceVariant" radii="Pill"` while adjacent Play/Pause chip uses `variant="Secondary" radii="300"` — mismatched shape and variant within the same `leftControl` row — **FIXED**: changed speed chip to `variant="Secondary" radii="300"` | Controls grouped in the same row should share variant and radii |
|
||||||
| N31 | Collapsible Message Toggle | `MsgTypeRenderers.tsx` | 97–105 | "Read more ↓" / "Show less ↑" uses `<Button size="300" variant="Secondary" fill="None">` — visually a padded form button — **FIXED**: replaced with the native flush inline-button pattern (`background:none;border:none;padding:0`) + `<Text size="T200">` tinted `color.Primary.Main`, matching `(edited)` in FallbackContent | Inline text toggles in message content (e.g. `(edited)` in `FallbackContent.tsx:74`) use bare `<button>` with `background: none; border: none; padding: 0` to stay flush with text |
|
| N31 | Collapsible Message Toggle | `MsgTypeRenderers.tsx` | 97–105 | "Read more ↓" / "Show less ↑" uses `<Button size="300" variant="Secondary" fill="None">` — visually a padded form button — **FIXED**: replaced with the native flush inline-button pattern (`background:none;border:none;padding:0`) + `<Text size="T200">` tinted `color.Primary.Main`, matching `(edited)` in FallbackContent | Inline text toggles in message content (e.g. `(edited)` in `FallbackContent.tsx:74`) use bare `<button>` with `background: none; border: none; padding: 0` to stay flush with text |
|
||||||
| N32 | ReadReceiptAvatars Pill | `ReadReceiptAvatars.tsx` | 95–103 | Pill border is `'1px solid rgba(0,212,255,0.30)'` hardcoded raw rgba string; `borderRadius: '999px'` not a folds radii token; padding in raw pixels — **FIXED**: replaced with `config.borderWidth.B300`, `config.radii.Pill`, `config.space.S100/S200` | Use `color.*` folds tokens and `config.radii.Pill` / `config.space.S*` |
|
| N32 | ReadReceiptAvatars Pill | `ReadReceiptAvatars.tsx` | 95–103 | Pill border is `'1px solid rgba(0,212,255,0.30)'` hardcoded raw rgba string; `borderRadius: '999px'` not a folds radii token; padding in raw pixels — **FIXED**: replaced with `config.borderWidth.B300`, `config.radii.Pill`, `config.space.S100/S200` | Use `color.*` folds tokens and `config.radii.Pill` / `config.space.S*` |
|
||||||
| ~~N33~~ | ~~ReadReceiptAvatars Class~~ | ~~`ReadReceiptAvatars.tsx`~~ | ~~67~~ | ~~`className="receipt-pill-btn"` references a class never defined~~ — **FIXED**: removed dead className | All custom CSS goes through co-located vanilla-extract `*.css.ts` files |
|
| ~~N33~~ | ~~ReadReceiptAvatars Class~~ | ~~`ReadReceiptAvatars.tsx`~~ | ~~67~~ | ~~`className="receipt-pill-btn"` references a class never defined~~ — **FIXED**: removed dead className | All custom CSS goes through co-located vanilla-extract `*.css.ts` files |
|
||||||
| N34 | EventReaders Header Size | `EventReaders.tsx` | 70 | `Header size="600"` (56px tall) while all peer message-action modals use `size="500"` (48px) — **FIXED**: changed to `size="500"` | `EditHistoryModal`, `LeaveRoomPrompt`, `MessageDeleteItem`, `MessageReportItem` all use `size="500"`; `size="600"` is reserved for full-page panel headers |
|
| N34 | EventReaders Header Size | `EventReaders.tsx` | 70 | `Header size="600"` (56px tall) while all peer message-action modals use `size="500"` (48px) — **FIXED**: changed to `size="500"` | `EditHistoryModal`, `LeaveRoomPrompt`, `MessageDeleteItem`, `MessageReportItem` all use `size="500"`; `size="600"` is reserved for full-page panel headers |
|
||||||
| N35 | EventReaders Close Button | `EventReaders.tsx` | 96 | Close `IconButton` missing explicit `radii="300"` prop — **FIXED**: added `radii="300"` | Every peer modal close button explicitly sets `radii="300"` (EditHistoryModal:184, LeaveRoomPrompt:75, MessageDeleteItem:517) |
|
| N35 | EventReaders Close Button | `EventReaders.tsx` | 96 | Close `IconButton` missing explicit `radii="300"` prop — **FIXED**: added `radii="300"` | Every peer modal close button explicitly sets `radii="300"` (EditHistoryModal:184, LeaveRoomPrompt:75, MessageDeleteItem:517) |
|
||||||
| N36 | EventReaders Header Border | `EventReaders.tsx` | 72–77 | Lotus-mode header sets `borderBottom: '1px solid var(--lt-border-color)'` as a CSS shorthand string — **FIXED**: changed to `borderBottomWidth: config.borderWidth.B300` | Native modals use `borderBottomWidth: config.borderWidth.B300` to avoid overriding the border-color set by the folds variant system |
|
| N36 | EventReaders Header Border | `EventReaders.tsx` | 72–77 | Lotus-mode header sets `borderBottom: '1px solid var(--lt-border-color)'` as a CSS shorthand string — **FIXED**: changed to `borderBottomWidth: config.borderWidth.B300` | Native modals use `borderBottomWidth: config.borderWidth.B300` to avoid overriding the border-color set by the folds variant system |
|
||||||
| N37 | EventReaders Timestamp | `EventReaders.tsx` | 143–151 | Lotus path sets `fontSize: '0.72rem'` inline — a raw relative unit between folds `T200` and `T100` scale steps — **FIXED**: removed raw `fontSize`, added `priority="300"` | Use folds `Text size="T200" priority="300"` for subdued secondary text |
|
| N37 | EventReaders Timestamp | `EventReaders.tsx` | 143–151 | Lotus path sets `fontSize: '0.72rem'` inline — a raw relative unit between folds `T200` and `T100` scale steps — **FIXED**: removed raw `fontSize`, added `priority="300"` | Use folds `Text size="T200" priority="300"` for subdued secondary text |
|
||||||
| N38 | BookmarksPanel Header | `BookmarksPanel.tsx` | 155–196 | Header uses `variant="Surface"` and close button uses `size="300" radii="300"`; also has a SurfaceVariant search bar strip with no equivalent in any native drawer | `MembersDrawer` header uses `variant="Background"` and default-size close button; the extra search+count strip creates a structurally different component family |
|
| N38 | BookmarksPanel Header | `BookmarksPanel.tsx` | 155–196 | Header uses `variant="Surface"` and close button uses `size="300" radii="300"`; also has a SurfaceVariant search bar strip with no equivalent in any native drawer — **FIXED (full redesign)**: rebuilt the whole "Saved Messages" panel to match the canonical `MembersDrawer` — co-located `BookmarksPanel.css.ts` (`toRem(266)` + `max-width:750px` full-screen media query, replacing the old `position:absolute; zIndex:100` mobile "modal" that had no backdrop/escape), `variant="Background"` header, room **avatars** on each item (was a generic hash icon), `priority` tokens replacing all raw `opacity` hacks, the `borderLeft:3px` accent removed, and Escape-to-close added. | `MembersDrawer` header uses `variant="Background"` and default-size close button; the extra search+count strip creates a structurally different component family |
|
||||||
| N39 | Forward Menu Icon | `Message.tsx` | 1150 | Forward context menu item's `after` icon has no `size="100"` prop — **FIXED**: added `size="100"` to the `ArrowRight` icon | Every other after-icon in the same menu block explicitly uses `size="100"` (Reply, Reaction, Edit, Remind Me, Bookmark); missing size causes the Forward icon to render larger |
|
| N39 | Forward Menu Icon | `Message.tsx` | 1150 | Forward context menu item's `after` icon has no `size="100"` prop — **FIXED**: added `size="100"` to the `ArrowRight` icon | Every other after-icon in the same menu block explicitly uses `size="100"` (Reply, Reaction, Edit, Remind Me, Bookmark); missing size causes the Forward icon to render larger |
|
||||||
| N40 | ProfileDecoration Remove Button | `ProfileDecoration.tsx` | 185 | "Remove" link is a raw `<button>` with `background: 'none'; color: 'var(--tc-surface-low-contrast)'` — an undefined CSS variable — **FIXED**: replaced with `<Button variant="Critical" fill="None" size="300" radii="300">` | Use folds `<Button variant="Critical" fill="None">` or a `Text`-styled inline link |
|
| N40 | ProfileDecoration Remove Button | `ProfileDecoration.tsx` | 185 | "Remove" link is a raw `<button>` with `background: 'none'; color: 'var(--tc-surface-low-contrast)'` — an undefined CSS variable — **FIXED**: replaced with `<Button variant="Critical" fill="None" size="300" radii="300">` | Use folds `<Button variant="Critical" fill="None">` or a `Text`-styled inline link |
|
||||||
| N41 | PresenceBadge / UserNotes Saving | `UserRoomProfile.tsx` | 240–244 | "Saving…" indicator is `<Text opacity={0.5}>` without a spinner — **FIXED**: now shows a folds `<Spinner variant="Success" fill="Solid" size="100">` beside the "Saving…" text | Every other save operation in `Profile.tsx` shows a folds `<Spinner variant="Success" fill="Solid" size="300">` alongside the save button |
|
| N41 | PresenceBadge / UserNotes Saving | `UserRoomProfile.tsx` | 240–244 | "Saving…" indicator is `<Text opacity={0.5}>` without a spinner — **FIXED**: now shows a folds `<Spinner variant="Success" fill="Solid" size="100">` beside the "Saving…" text | Every other save operation in `Profile.tsx` shows a folds `<Spinner variant="Success" fill="Solid" size="300">` alongside the save button |
|
||||||
| N42 | Character Counter Convention | `UserRoomProfile.tsx` vs `Profile.tsx` | 243 / 479–490 | `UserPrivateNotes` shows remaining count `"N left"`, appears only under 100; `ProfileStatus` shows `"current / 64"` always with color progression | Two Lotus features in the same settings flow use different counter conventions; neither matches a pre-existing Cinny pattern |
|
| N42 | Character Counter Convention | `UserRoomProfile.tsx` vs `Profile.tsx` | 243 / 479–490 | `UserPrivateNotes` shows remaining count `"N left"`, appears only under 100; `ProfileStatus` shows `"current / 64"` always with color progression | Two Lotus features in the same settings flow use different counter conventions; neither matches a pre-existing Cinny pattern |
|
||||||
| N43 | Night Light Slider | `General.tsx` | 554–565 | Night Light intensity slider is a raw `<input type="range">` with no `accentColor` token — renders in browser-default blue on all themes — **FIXED**: added `accentColor: color.Primary.Main`; the intensity label `opacity` hack also replaced with `priority="300"` | The Gate Threshold slider at `General.tsx:1456` at minimum sets `accentColor: 'var(--accent-orange)'`; the Night Light slider does neither |
|
| N43 | Night Light Slider | `General.tsx` | 554–565 | Night Light intensity slider is a raw `<input type="range">` with no `accentColor` token — renders in browser-default blue on all themes — **FIXED**: added `accentColor: color.Primary.Main`; the intensity label `opacity` hack also replaced with `priority="300"` | The Gate Threshold slider at `General.tsx:1456` at minimum sets `accentColor: 'var(--accent-orange)'`; the Night Light slider does neither |
|
||||||
| N44 | Mention Highlight & Boot Button | `General.tsx` | 597–677 | `<input type="color">` for mention highlight uses raw pixel dimensions (`width: '36px'`, `height: '28px'`, `borderRadius: '4px'`); Reset and Boot buttons are bare `<button>` with Lotus CSS vars — **PARTIALLY FIXED**: the mention-highlight Reset button (renders on all themes) is now a folds `<Button variant="Secondary" fill="Soft">`, removing the undefined `--border-interactive-normal` var. The Boot button is **deliberately kept** as-is: it only renders when `lotusTerminal` is active, i.e. exactly when the `--accent-orange*` TDS vars are defined. The `<input type="color">` itself is tracked separately as N69. | Adjacent settings controls use folds `IconButton`/`Button`; there is no other `<input type="color">` in the Cinny settings UI |
|
| N44 | Mention Highlight & Boot Button | `General.tsx` | 597–677 | `<input type="color">` for mention highlight uses raw pixel dimensions (`width: '36px'`, `height: '28px'`, `borderRadius: '4px'`); Reset and Boot buttons are bare `<button>` with Lotus CSS vars — **PARTIALLY FIXED**: the mention-highlight Reset button (renders on all themes) is now a folds `<Button variant="Secondary" fill="Soft">`, removing the undefined `--border-interactive-normal` var. The Boot button is **deliberately kept** as-is: it only renders when `lotusTerminal` is active, i.e. exactly when the `--accent-orange*` TDS vars are defined. The `<input type="color">` itself is tracked separately as N69. | Adjacent settings controls use folds `IconButton`/`Button`; there is no other `<input type="color">` in the Cinny settings UI |
|
||||||
| N45 | SettingsSelect vs SelectTheme | `General.tsx` | 126 vs 197 | `SettingsSelect` trigger uses `variant="Secondary"` while `SelectTheme` uses `variant="Primary" outlined fill="Soft"` for the same `Button`+`PopOut` dropdown pattern — adjacent rows in the same Appearance section have different visual weight — **FIXED**: `SelectTheme` trigger changed to `variant="Secondary"` to match `SettingsSelect` | Dropdown triggers should share the same variant within the same settings section |
|
| N45 | SettingsSelect vs SelectTheme | `General.tsx` | 126 vs 197 | `SettingsSelect` trigger uses `variant="Secondary"` while `SelectTheme` uses `variant="Primary" outlined fill="Soft"` for the same `Button`+`PopOut` dropdown pattern — adjacent rows in the same Appearance section have different visual weight — **FIXED**: `SelectTheme` trigger changed to `variant="Secondary"` to match `SettingsSelect` | Dropdown triggers should share the same variant within the same settings section |
|
||||||
| N46 | RoomInsights SectionHeader | `RoomInsights.tsx` | 24–37 | `SectionHeader` adds `textTransform: 'uppercase'`, `letterSpacing: '0.06em'`, `opacity: 0.6` to `Text size="L400"` — **FIXED**: simplified to `<Text size="L400" priority="300">` | Every other settings panel uses bare `<Text size="L400">Label</Text>` with no transforms (`General.tsx:52–72`, `ExportRoomHistory.tsx:220,246`) |
|
| N46 | RoomInsights SectionHeader | `RoomInsights.tsx` | 24–37 | `SectionHeader` adds `textTransform: 'uppercase'`, `letterSpacing: '0.06em'`, `opacity: 0.6` to `Text size="L400"` — **FIXED**: simplified to `<Text size="L400" priority="300">` | Every other settings panel uses bare `<Text size="L400">Label</Text>` with no transforms (`General.tsx:52–72`, `ExportRoomHistory.tsx:220,246`) |
|
||||||
| N47 | RoomInsights Chart Radii | `RoomInsights.tsx` | 350–356 / 415–436 | Bar chart uses `borderRadius: 3` and histogram bars use `borderRadius: '2px 2px 0 0'` as raw pixel integers — **FIXED**: replaced with `config.radii.R300` | All other rounded corners use `config.radii.*` tokens |
|
| N47 | RoomInsights Chart Radii | `RoomInsights.tsx` | 350–356 / 415–436 | Bar chart uses `borderRadius: 3` and histogram bars use `borderRadius: '2px 2px 0 0'` as raw pixel integers — **FIXED**: replaced with `config.radii.R300` | All other rounded corners use `config.radii.*` tokens |
|
||||||
| N48 | RoomInsights Font Size | `RoomInsights.tsx` | 448 | Hour-axis labels set `style={{ fontSize: 9 }}` as a raw pixel integer — overrides the folds `Text size="T200"` applied on the same element — **FIXED**: removed raw `style={{ fontSize: 9 }}` | Use only folds `Text` size props; never override with raw `fontSize` |
|
| N48 | RoomInsights Font Size | `RoomInsights.tsx` | 448 | Hour-axis labels set `style={{ fontSize: 9 }}` as a raw pixel integer — overrides the folds `Text size="T200"` applied on the same element — **FIXED**: removed raw `style={{ fontSize: 9 }}` | Use only folds `Text` size props; never override with raw `fontSize` |
|
||||||
| N49 | RoomInsights Emoji Icons | `RoomInsights.tsx` | 41–65 / 292–295 | `StatTile` uses literal Unicode emoji (`🖼️ 🎬 🎵 📎`) in `<Text size="H4">` as icons — **FIXED**: `StatTile` now takes an `icon: IconSrc` and renders `<Icon>` using `Icons.Photo/VideoCamera/Headphone/File` | All other iconographic elements use `<Icon src={Icons.*} />` from folds — emoji rendering varies between Windows/macOS/Linux and cannot be tinted by the theme |
|
| N49 | RoomInsights Emoji Icons | `RoomInsights.tsx` | 41–65 / 292–295 | `StatTile` uses literal Unicode emoji (`🖼️ 🎬 🎵 📎`) in `<Text size="H4">` as icons — **FIXED**: `StatTile` now takes an `icon: IconSrc` and renders `<Icon>` using `Icons.Photo/VideoCamera/Headphone/File` | All other iconographic elements use `<Icon src={Icons.*} />` from folds — emoji rendering varies between Windows/macOS/Linux and cannot be tinted by the theme |
|
||||||
| N50 | RoomInsights Warning Banner | `RoomInsights.tsx` | 168–192 | Disclaimer banner uses raw `<Box style={{ border: color.Warning.Main, background: color.Warning.Container }}>` — **FIXED**: replaced with `<SequenceCard variant="SurfaceVariant">` with `<Icon>` colored via `color.Warning.Main` | Settings panel informational cards use `<SequenceCard variant="SurfaceVariant">` throughout RoomServerACL, ExportRoomHistory, PolicyListViewer |
|
| N50 | RoomInsights Warning Banner | `RoomInsights.tsx` | 168–192 | Disclaimer banner uses raw `<Box style={{ border: color.Warning.Main, background: color.Warning.Container }}>` — **FIXED**: replaced with `<SequenceCard variant="SurfaceVariant">` with `<Icon>` colored via `color.Warning.Main` | Settings panel informational cards use `<SequenceCard variant="SurfaceVariant">` throughout RoomServerACL, ExportRoomHistory, PolicyListViewer |
|
||||||
| N51 | ExportRoomHistory Progress | `ExportRoomHistory.tsx` | 311–314 | Export progress shows as a plain `Text` string ("Exporting… N messages") — **WON'T FIX (deliberate)**: unlike `BackupRestore` (which has a known total to drive a determinate `ProgressBar`), export has no known total — it counts messages as they stream. The operation already shows a folds `Spinner` in the button plus a live count, which is the correct affordance for an indeterminate task. | `BackupRestore.tsx:72,90` uses a folds `<ProgressBar variant="Secondary" size="300">` for the same kind of long async operation |
|
| N51 | ExportRoomHistory Progress | `ExportRoomHistory.tsx` | 311–314 | Export progress shows as a plain `Text` string ("Exporting… N messages") — **WON'T FIX (deliberate)**: unlike `BackupRestore` (which has a known total to drive a determinate `ProgressBar`), export has no known total — it counts messages as they stream. The operation already shows a folds `Spinner` in the button plus a live count, which is the correct affordance for an indeterminate task. | `BackupRestore.tsx:72,90` uses a folds `<ProgressBar variant="Secondary" size="300">` for the same kind of long async operation |
|
||||||
| N52 | MessageQuickReactions Empty Return | `Message.tsx` | 160 | `if (recentEmojis.length === 0) return <span />;` — injects an invisible DOM node into the hover action bar flex container — **FIXED**: changed to `return null` | Universal convention for empty renders in Cinny is `return null`; 144+ instances across the codebase; the empty `<span>` can affect flex spacing |
|
| N52 | MessageQuickReactions Empty Return | `Message.tsx` | 160 | `if (recentEmojis.length === 0) return <span />;` — injects an invisible DOM node into the hover action bar flex container — **FIXED**: changed to `return null` | Universal convention for empty renders in Cinny is `return null`; 144+ instances across the codebase; the empty `<span>` can affect flex spacing |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,42 @@
|
|||||||
|
import { style } from '@vanilla-extract/css';
|
||||||
|
import { config, toRem } from 'folds';
|
||||||
|
|
||||||
|
// Mirrors MembersDrawer: a 266px side panel on desktop that becomes a
|
||||||
|
// full-screen fixed panel on narrow viewports — the app's canonical drawer.
|
||||||
|
export const BookmarksPanel = style({
|
||||||
|
width: toRem(266),
|
||||||
|
'@media': {
|
||||||
|
'(max-width: 750px)': {
|
||||||
|
position: 'fixed',
|
||||||
|
inset: 0,
|
||||||
|
width: '100%',
|
||||||
|
zIndex: 500,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const BookmarksHeader = style({
|
||||||
|
flexShrink: 0,
|
||||||
|
padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
|
||||||
|
borderBottomWidth: config.borderWidth.B300,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const BookmarksToolbar = style({
|
||||||
|
flexShrink: 0,
|
||||||
|
padding: config.space.S200,
|
||||||
|
borderBottomWidth: config.borderWidth.B300,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const BookmarksContent = style({
|
||||||
|
padding: config.space.S200,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const BookmarkPreview = style({
|
||||||
|
width: '100%',
|
||||||
|
display: '-webkit-box',
|
||||||
|
WebkitLineClamp: 2,
|
||||||
|
WebkitBoxOrient: 'vertical',
|
||||||
|
overflow: 'hidden',
|
||||||
|
wordBreak: 'break-word',
|
||||||
|
textAlign: 'left',
|
||||||
|
});
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
import React, { ChangeEvent, useState } from 'react';
|
import React, { ChangeEvent, useCallback, useEffect, useState } from 'react';
|
||||||
import {
|
import {
|
||||||
|
Avatar,
|
||||||
Box,
|
Box,
|
||||||
Button,
|
Button,
|
||||||
Header,
|
Header,
|
||||||
@@ -12,9 +13,17 @@ import {
|
|||||||
color,
|
color,
|
||||||
config,
|
config,
|
||||||
} from 'folds';
|
} from 'folds';
|
||||||
|
import classNames from 'classnames';
|
||||||
import { useBookmarks, Bookmark } from '../../hooks/useBookmarks';
|
import { useBookmarks, Bookmark } from '../../hooks/useBookmarks';
|
||||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||||
import { useRoomNavigate } from '../../hooks/useRoomNavigate';
|
import { useRoomNavigate } from '../../hooks/useRoomNavigate';
|
||||||
|
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||||
|
import { RoomAvatar } from '../../components/room-avatar';
|
||||||
|
import { getRoomAvatarUrl } from '../../utils/room';
|
||||||
|
import { nameInitials } from '../../utils/common';
|
||||||
|
import { ContainerColor } from '../../styles/ContainerColor.css';
|
||||||
|
import { stopPropagation } from '../../utils/keyboard';
|
||||||
|
import * as css from './BookmarksPanel.css';
|
||||||
|
|
||||||
function formatTimeAgo(ts: number): string {
|
function formatTimeAgo(ts: number): string {
|
||||||
const diff = Date.now() - ts;
|
const diff = Date.now() - ts;
|
||||||
@@ -37,187 +46,150 @@ type BookmarkItemProps = {
|
|||||||
|
|
||||||
function BookmarkItem({ bookmark, onJump, onRemove }: BookmarkItemProps) {
|
function BookmarkItem({ bookmark, onJump, onRemove }: BookmarkItemProps) {
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
const room = mx.getRoom(bookmark.roomId);
|
const useAuthentication = useMediaAuthentication();
|
||||||
|
const room = mx.getRoom(bookmark.roomId) ?? undefined;
|
||||||
const displayRoomName = room?.name ?? bookmark.roomName;
|
const displayRoomName = room?.name ?? bookmark.roomName;
|
||||||
|
const avatarUrl = room
|
||||||
|
? (getRoomAvatarUrl(mx, room, 96, useAuthentication) ?? undefined)
|
||||||
|
: undefined;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
direction="Column"
|
direction="Column"
|
||||||
gap="200"
|
gap="200"
|
||||||
style={{
|
style={{
|
||||||
padding: `${config.space.S300} ${config.space.S300}`,
|
padding: config.space.S300,
|
||||||
borderBottom: `1px solid ${color.Surface.ContainerLine}`,
|
borderRadius: config.radii.R300,
|
||||||
background: color.Surface.Container,
|
background: color.SurfaceVariant.Container,
|
||||||
transition: 'background 0.1s',
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Room name row */}
|
{/* Room identity + remove */}
|
||||||
<Box alignItems="Center" gap="100">
|
<Box alignItems="Center" gap="200">
|
||||||
<Icon src={Icons.Hash} size="50" style={{ opacity: 0.5, flexShrink: 0 }} />
|
<Avatar size="200" radii="300">
|
||||||
<Text
|
<RoomAvatar
|
||||||
size="T200"
|
roomId={bookmark.roomId}
|
||||||
style={{
|
src={avatarUrl}
|
||||||
color: color.Primary.Main,
|
alt={displayRoomName}
|
||||||
fontWeight: 600,
|
renderFallback={() => <Text size="H6">{nameInitials(displayRoomName)}</Text>}
|
||||||
overflow: 'hidden',
|
/>
|
||||||
textOverflow: 'ellipsis',
|
</Avatar>
|
||||||
whiteSpace: 'nowrap',
|
<Box grow="Yes" direction="Column" style={{ minWidth: 0 }}>
|
||||||
}}
|
<Text size="T200" truncate style={{ fontWeight: config.fontWeight.W600 }}>
|
||||||
|
{displayRoomName}
|
||||||
|
</Text>
|
||||||
|
<Text size="T200" priority="300">
|
||||||
|
{formatTimeAgo(bookmark.savedAt)}
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<IconButton
|
||||||
|
size="300"
|
||||||
|
variant="SurfaceVariant"
|
||||||
|
fill="None"
|
||||||
|
radii="300"
|
||||||
|
onClick={() => onRemove(bookmark.eventId)}
|
||||||
|
aria-label="Remove saved message"
|
||||||
>
|
>
|
||||||
{displayRoomName}
|
<Icon size="100" src={Icons.Delete} />
|
||||||
</Text>
|
</IconButton>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{/* Message preview */}
|
{/* Message preview — clicking jumps to the message */}
|
||||||
<Box
|
<Button
|
||||||
style={{
|
variant="Secondary"
|
||||||
background: color.SurfaceVariant.Container,
|
fill="Soft"
|
||||||
borderRadius: config.radii.R300,
|
size="300"
|
||||||
borderLeft: `3px solid ${color.Primary.Main}`,
|
radii="300"
|
||||||
padding: `${config.space.S100} ${config.space.S200}`,
|
onClick={() => onJump(bookmark.roomId, bookmark.eventId)}
|
||||||
}}
|
aria-label="Jump to saved message"
|
||||||
|
style={{ justifyContent: 'flex-start', height: 'unset', padding: config.space.S200 }}
|
||||||
>
|
>
|
||||||
<Text
|
<Text className={css.BookmarkPreview} size="T200" priority="400">
|
||||||
size="T300"
|
|
||||||
style={{
|
|
||||||
overflow: 'hidden',
|
|
||||||
display: '-webkit-box',
|
|
||||||
WebkitLineClamp: 2,
|
|
||||||
WebkitBoxOrient: 'vertical',
|
|
||||||
wordBreak: 'break-word',
|
|
||||||
opacity: 0.9,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{bookmark.previewText || '(no preview)'}
|
{bookmark.previewText || '(no preview)'}
|
||||||
</Text>
|
</Text>
|
||||||
</Box>
|
</Button>
|
||||||
|
|
||||||
{/* Footer row */}
|
|
||||||
<Box alignItems="Center" justifyContent="SpaceBetween" gap="200">
|
|
||||||
<Text size="T200" style={{ opacity: 0.5 }}>
|
|
||||||
{formatTimeAgo(bookmark.savedAt)}
|
|
||||||
</Text>
|
|
||||||
<Box gap="100" shrink="No">
|
|
||||||
<Button
|
|
||||||
size="300"
|
|
||||||
variant="Primary"
|
|
||||||
fill="Soft"
|
|
||||||
radii="300"
|
|
||||||
onClick={() => onJump(bookmark.roomId, bookmark.eventId)}
|
|
||||||
before={<Icon size="100" src={Icons.ArrowRight} />}
|
|
||||||
>
|
|
||||||
<Text size="T300">Jump</Text>
|
|
||||||
</Button>
|
|
||||||
<IconButton
|
|
||||||
size="300"
|
|
||||||
variant="Surface"
|
|
||||||
fill="None"
|
|
||||||
radii="300"
|
|
||||||
onClick={() => onRemove(bookmark.eventId)}
|
|
||||||
aria-label="Remove bookmark"
|
|
||||||
>
|
|
||||||
<Icon size="100" src={Icons.Delete} />
|
|
||||||
</IconButton>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
type BookmarksPanelProps = {
|
type BookmarksPanelProps = {
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
isMobile?: boolean;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export function BookmarksPanel({ onClose, isMobile }: BookmarksPanelProps) {
|
export function BookmarksPanel({ onClose }: BookmarksPanelProps) {
|
||||||
const { bookmarks, removeBookmark } = useBookmarks();
|
const { bookmarks, removeBookmark } = useBookmarks();
|
||||||
const { navigateRoom } = useRoomNavigate();
|
const { navigateRoom } = useRoomNavigate();
|
||||||
const [filter, setFilter] = useState('');
|
const [filter, setFilter] = useState('');
|
||||||
|
|
||||||
const handleJump = (roomId: string, eventId: string) => {
|
// Escape closes the panel (parity with the app's other overlays/drawers).
|
||||||
navigateRoom(roomId, eventId);
|
useEffect(() => {
|
||||||
onClose();
|
const handleKeyDown = (evt: KeyboardEvent) => {
|
||||||
};
|
if (evt.key === 'Escape') {
|
||||||
|
stopPropagation(evt);
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('keydown', handleKeyDown);
|
||||||
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||||
|
}, [onClose]);
|
||||||
|
|
||||||
|
const handleJump = useCallback(
|
||||||
|
(roomId: string, eventId: string) => {
|
||||||
|
navigateRoom(roomId, eventId);
|
||||||
|
onClose();
|
||||||
|
},
|
||||||
|
[navigateRoom, onClose],
|
||||||
|
);
|
||||||
|
|
||||||
const handleFilterChange = (e: ChangeEvent<HTMLInputElement>) => {
|
const handleFilterChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||||
setFilter(e.target.value);
|
setFilter(e.target.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const query = filter.trim().toLowerCase();
|
||||||
const filtered: Bookmark[] =
|
const filtered: Bookmark[] =
|
||||||
filter.trim().length === 0
|
query.length === 0
|
||||||
? bookmarks
|
? bookmarks
|
||||||
: bookmarks.filter((bk) => {
|
: bookmarks.filter(
|
||||||
const q = filter.toLowerCase();
|
(bk) =>
|
||||||
return bk.previewText.toLowerCase().includes(q) || bk.roomName.toLowerCase().includes(q);
|
bk.previewText.toLowerCase().includes(query) ||
|
||||||
});
|
bk.roomName.toLowerCase().includes(query),
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
|
className={classNames(css.BookmarksPanel, ContainerColor({ variant: 'Background' }))}
|
||||||
|
shrink="No"
|
||||||
direction="Column"
|
direction="Column"
|
||||||
style={{
|
|
||||||
width: isMobile ? '100%' : '266px',
|
|
||||||
height: '100%',
|
|
||||||
position: isMobile ? 'absolute' : 'static',
|
|
||||||
top: isMobile ? 0 : 'auto',
|
|
||||||
left: isMobile ? 0 : 'auto',
|
|
||||||
zIndex: isMobile ? 100 : 'auto',
|
|
||||||
flexShrink: 0,
|
|
||||||
borderLeft: isMobile ? 'none' : `1px solid ${color.Surface.ContainerLine}`,
|
|
||||||
background: color.Surface.Container,
|
|
||||||
overflow: 'hidden',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{/* Header */}
|
<Header className={css.BookmarksHeader} variant="Background" size="600">
|
||||||
<Header
|
|
||||||
style={{
|
|
||||||
flexShrink: 0,
|
|
||||||
padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
|
|
||||||
borderBottom: `1px solid ${color.Surface.ContainerLine}`,
|
|
||||||
}}
|
|
||||||
variant="Surface"
|
|
||||||
size="600"
|
|
||||||
>
|
|
||||||
<Box grow="Yes" alignItems="Center" gap="200">
|
<Box grow="Yes" alignItems="Center" gap="200">
|
||||||
<Icon src={Icons.Star} size="200" />
|
<Icon src={Icons.Star} size="200" />
|
||||||
<Box grow="Yes">
|
<Box grow="Yes">
|
||||||
<Text size="H5">Saved Messages</Text>
|
<Text size="H4" truncate>
|
||||||
|
Saved Messages
|
||||||
|
</Text>
|
||||||
</Box>
|
</Box>
|
||||||
<IconButton
|
<IconButton size="300" radii="300" aria-label="Close saved messages" onClick={onClose}>
|
||||||
size="300"
|
<Icon src={Icons.Cross} />
|
||||||
variant="Surface"
|
|
||||||
radii="300"
|
|
||||||
aria-label="Close saved messages"
|
|
||||||
onClick={onClose}
|
|
||||||
>
|
|
||||||
<Icon src={Icons.Cross} size="100" />
|
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Box>
|
</Box>
|
||||||
</Header>
|
</Header>
|
||||||
|
|
||||||
{/* Search */}
|
{/* Search */}
|
||||||
<Box
|
<Box className={css.BookmarksToolbar} direction="Column" gap="100">
|
||||||
style={{
|
|
||||||
flexShrink: 0,
|
|
||||||
padding: config.space.S200,
|
|
||||||
borderBottom: `1px solid ${color.Surface.ContainerLine}`,
|
|
||||||
background: color.SurfaceVariant.Container,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Input
|
<Input
|
||||||
variant="Surface"
|
variant="SurfaceVariant"
|
||||||
size="400"
|
size="400"
|
||||||
radii="400"
|
radii="300"
|
||||||
placeholder="Search saved messages…"
|
placeholder="Search saved messages…"
|
||||||
value={filter}
|
value={filter}
|
||||||
onChange={handleFilterChange}
|
onChange={handleFilterChange}
|
||||||
before={<Icon size="200" src={Icons.Search} />}
|
before={<Icon size="100" src={Icons.Search} />}
|
||||||
after={
|
after={
|
||||||
filter.length > 0 ? (
|
filter.length > 0 ? (
|
||||||
<IconButton
|
<IconButton
|
||||||
size="300"
|
size="300"
|
||||||
variant="Surface"
|
variant="SurfaceVariant"
|
||||||
|
fill="None"
|
||||||
radii="300"
|
radii="300"
|
||||||
aria-label="Clear search"
|
aria-label="Clear search"
|
||||||
onClick={() => setFilter('')}
|
onClick={() => setFilter('')}
|
||||||
@@ -227,56 +199,47 @@ export function BookmarksPanel({ onClose, isMobile }: BookmarksPanelProps) {
|
|||||||
) : undefined
|
) : undefined
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</Box>
|
{bookmarks.length > 0 && (
|
||||||
|
<Text size="T200" priority="300">
|
||||||
{/* Count badge */}
|
|
||||||
{bookmarks.length > 0 && (
|
|
||||||
<Box
|
|
||||||
style={{
|
|
||||||
flexShrink: 0,
|
|
||||||
padding: `${config.space.S100} ${config.space.S300}`,
|
|
||||||
borderBottom: `1px solid ${color.Surface.ContainerLine}`,
|
|
||||||
background: color.SurfaceVariant.Container,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Text size="T200" style={{ opacity: 0.6 }}>
|
|
||||||
{filtered.length === bookmarks.length
|
{filtered.length === bookmarks.length
|
||||||
? `${bookmarks.length} saved message${bookmarks.length !== 1 ? 's' : ''}`
|
? `${bookmarks.length} saved message${bookmarks.length !== 1 ? 's' : ''}`
|
||||||
: `${filtered.length} of ${bookmarks.length} messages`}
|
: `${filtered.length} of ${bookmarks.length} messages`}
|
||||||
</Text>
|
</Text>
|
||||||
</Box>
|
)}
|
||||||
)}
|
</Box>
|
||||||
|
|
||||||
{/* List */}
|
{/* List */}
|
||||||
<Scroll variant="Background" size="300" style={{ flexGrow: 1, minHeight: 0 }}>
|
<Box grow="Yes" style={{ minHeight: 0 }}>
|
||||||
{filtered.length === 0 ? (
|
<Scroll variant="Background" size="300" visibility="Hover" hideTrack>
|
||||||
<Box
|
{filtered.length === 0 ? (
|
||||||
direction="Column"
|
<Box
|
||||||
alignItems="Center"
|
direction="Column"
|
||||||
justifyContent="Center"
|
alignItems="Center"
|
||||||
gap="300"
|
justifyContent="Center"
|
||||||
style={{ padding: config.space.S600, textAlign: 'center' }}
|
gap="300"
|
||||||
>
|
style={{ padding: config.space.S700, textAlign: 'center' }}
|
||||||
<Icon size="600" src={Icons.Star} style={{ opacity: 0.3 }} />
|
>
|
||||||
<Text size="T300" priority="300" align="Center">
|
<Icon size="600" src={Icons.Star} style={{ opacity: config.opacity.Disabled }} />
|
||||||
{bookmarks.length === 0
|
<Text size="T300" priority="300" align="Center">
|
||||||
? 'No saved messages yet.\nRight-click any message to bookmark it.'
|
{bookmarks.length === 0
|
||||||
: 'No bookmarks match your search.'}
|
? 'No saved messages yet. Right-click any message to save it.'
|
||||||
</Text>
|
: 'No saved messages match your search.'}
|
||||||
</Box>
|
</Text>
|
||||||
) : (
|
</Box>
|
||||||
<Box direction="Column">
|
) : (
|
||||||
{filtered.map((bk) => (
|
<Box className={css.BookmarksContent} direction="Column" gap="200">
|
||||||
<BookmarkItem
|
{filtered.map((bk) => (
|
||||||
key={bk.eventId}
|
<BookmarkItem
|
||||||
bookmark={bk}
|
key={bk.eventId}
|
||||||
onJump={handleJump}
|
bookmark={bk}
|
||||||
onRemove={removeBookmark}
|
onJump={handleJump}
|
||||||
/>
|
onRemove={removeBookmark}
|
||||||
))}
|
/>
|
||||||
</Box>
|
))}
|
||||||
)}
|
</Box>
|
||||||
</Scroll>
|
)}
|
||||||
|
</Scroll>
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import { style } from '@vanilla-extract/css';
|
||||||
|
import { color, config, toRem } from 'folds';
|
||||||
|
|
||||||
|
// Right-side drawer that floats over the room view. 320px is wider than the
|
||||||
|
// 266px member/bookmark drawers because it hosts a media grid; on narrow
|
||||||
|
// viewports it expands to fill the screen, matching the app's other drawers.
|
||||||
|
export const MediaGalleryDrawer = style({
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
width: toRem(320),
|
||||||
|
zIndex: 500,
|
||||||
|
overflow: 'hidden',
|
||||||
|
borderLeftWidth: config.borderWidth.B300,
|
||||||
|
borderLeftStyle: 'solid',
|
||||||
|
borderLeftColor: color.Surface.ContainerLine,
|
||||||
|
'@media': {
|
||||||
|
'(max-width: 750px)': {
|
||||||
|
width: '100%',
|
||||||
|
borderLeftWidth: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const MediaGalleryHeader = style({
|
||||||
|
flexShrink: 0,
|
||||||
|
paddingRight: config.space.S200,
|
||||||
|
paddingLeft: config.space.S300,
|
||||||
|
borderBottomWidth: config.borderWidth.B300,
|
||||||
|
});
|
||||||
@@ -15,13 +15,15 @@ import {
|
|||||||
config,
|
config,
|
||||||
} from 'folds';
|
} from 'folds';
|
||||||
import { EventType, MatrixClient, MatrixEvent, MsgType, Room } from 'matrix-js-sdk';
|
import { EventType, MatrixClient, MatrixEvent, MsgType, Room } from 'matrix-js-sdk';
|
||||||
|
import classNames from 'classnames';
|
||||||
import { useNearViewport } from '../../hooks/useNearViewport';
|
import { useNearViewport } from '../../hooks/useNearViewport';
|
||||||
import { IEncryptedFile, IImageInfo, IThumbnailContent } from '../../../types/matrix/common';
|
import { IEncryptedFile, IImageInfo, IThumbnailContent } from '../../../types/matrix/common';
|
||||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||||
import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../utils/matrix';
|
import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../utils/matrix';
|
||||||
import { ContainerColor } from '../../styles/ContainerColor.css';
|
import { ContainerColor } from '../../styles/ContainerColor.css';
|
||||||
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
|
import { stopPropagation } from '../../utils/keyboard';
|
||||||
|
import * as css from './MediaGallery.css';
|
||||||
|
|
||||||
type GalleryTab = 'image' | 'video' | 'file';
|
type GalleryTab = 'image' | 'video' | 'file';
|
||||||
|
|
||||||
@@ -545,8 +547,6 @@ type MediaGalleryProps = {
|
|||||||
export function MediaGallery({ room, onClose }: MediaGalleryProps) {
|
export function MediaGallery({ room, onClose }: MediaGalleryProps) {
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
const useAuthentication = useMediaAuthentication();
|
const useAuthentication = useMediaAuthentication();
|
||||||
const screenSize = useScreenSizeContext();
|
|
||||||
const isMobile = screenSize === ScreenSize.Mobile;
|
|
||||||
|
|
||||||
const [tab, setTab] = useState<GalleryTab>('image');
|
const [tab, setTab] = useState<GalleryTab>('image');
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
@@ -561,6 +561,20 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
|
|||||||
setLightboxIndex(null); // stale index would open wrong item in new tab's lightboxItems
|
setLightboxIndex(null); // stale index would open wrong item in new tab's lightboxItems
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
// Escape closes the drawer — but only when the lightbox isn't open, since the
|
||||||
|
// lightbox has its own Escape handler that should take precedence.
|
||||||
|
useEffect(() => {
|
||||||
|
if (lightboxIndex !== null) return undefined;
|
||||||
|
const handleKeyDown = (evt: KeyboardEvent) => {
|
||||||
|
if (evt.key === 'Escape') {
|
||||||
|
stopPropagation(evt);
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('keydown', handleKeyDown);
|
||||||
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||||
|
}, [lightboxIndex, onClose]);
|
||||||
|
|
||||||
const msgtype = TAB_MSGTYPES[tab];
|
const msgtype = TAB_MSGTYPES[tab];
|
||||||
|
|
||||||
const getFilteredEvents = useCallback(
|
const getFilteredEvents = useCallback(
|
||||||
@@ -659,30 +673,11 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Box
|
<Box
|
||||||
className={ContainerColor({ variant: 'Surface' })}
|
className={classNames(css.MediaGalleryDrawer, ContainerColor({ variant: 'Surface' }))}
|
||||||
direction="Column"
|
direction="Column"
|
||||||
style={{
|
|
||||||
position: 'fixed',
|
|
||||||
top: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
width: isMobile ? '100%' : '320px',
|
|
||||||
zIndex: 500,
|
|
||||||
borderLeft: isMobile ? 'none' : `1px solid ${color.Surface.ContainerLine}`,
|
|
||||||
overflow: 'hidden',
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<Header
|
<Header variant="Surface" size="600" className={css.MediaGalleryHeader}>
|
||||||
variant="Surface"
|
|
||||||
size="600"
|
|
||||||
style={{
|
|
||||||
flexShrink: 0,
|
|
||||||
paddingRight: config.space.S200,
|
|
||||||
paddingLeft: config.space.S300,
|
|
||||||
borderBottom: `1px solid ${color.Surface.ContainerLine}`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box grow="Yes" alignItems="Center" gap="200">
|
<Box grow="Yes" alignItems="Center" gap="200">
|
||||||
<Icon size="200" src={Icons.Photo} />
|
<Icon size="200" src={Icons.Photo} />
|
||||||
<Box grow="Yes">
|
<Box grow="Yes">
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { Method } from 'matrix-js-sdk';
|
import { MatrixError, Method } from 'matrix-js-sdk';
|
||||||
import { useMatrixClient } from './useMatrixClient';
|
import { useMatrixClient } from './useMatrixClient';
|
||||||
|
|
||||||
const PROFILE_FIELD = 'io.lotus.avatar_decoration';
|
const PROFILE_FIELD = 'io.lotus.avatar_decoration';
|
||||||
@@ -32,8 +32,18 @@ function fetchDecoration(
|
|||||||
cache.set(userId, val);
|
cache.set(userId, val);
|
||||||
return val;
|
return val;
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch((err: unknown) => {
|
||||||
cache.set(userId, null);
|
// A 404 (M_NOT_FOUND) means the field is genuinely unset → cache "no
|
||||||
|
// decoration". A transient failure (429 rate-limit, 5xx, network) must
|
||||||
|
// NOT be cached: doing so permanently hides the user's decoration for the
|
||||||
|
// whole session. This matters most for the member list and timeline, which
|
||||||
|
// mount many avatars at once and can trip homeserver rate limits — a
|
||||||
|
// single 429 in that burst would otherwise wipe the decoration until a
|
||||||
|
// full reload. Leaving the cache unset lets the next mount retry.
|
||||||
|
const status = err instanceof MatrixError ? err.httpStatus : undefined;
|
||||||
|
if (status === 404) {
|
||||||
|
cache.set(userId, null);
|
||||||
|
}
|
||||||
return null;
|
return null;
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
|
|||||||
@@ -53,10 +53,14 @@ export const useUserPresence = (userId: string): UserPresence | undefined => {
|
|||||||
|
|
||||||
export const usePresenceLabel = (): Record<Presence, string> =>
|
export const usePresenceLabel = (): Record<Presence, string> =>
|
||||||
useMemo(
|
useMemo(
|
||||||
|
// Keep this vocabulary aligned with the status setter (PresencePicker in
|
||||||
|
// SettingsTab.tsx): online -> "Online", unavailable -> "Idle". Previously
|
||||||
|
// these read "Active"/"Busy"/"Away", so a user who set "Idle" showed as
|
||||||
|
// "Busy" to others.
|
||||||
() => ({
|
() => ({
|
||||||
[Presence.Online]: 'Active',
|
[Presence.Online]: 'Online',
|
||||||
[Presence.Unavailable]: 'Busy',
|
[Presence.Unavailable]: 'Idle',
|
||||||
[Presence.Offline]: 'Away',
|
[Presence.Offline]: 'Offline',
|
||||||
}),
|
}),
|
||||||
[],
|
[],
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -49,10 +49,7 @@ export function ClientLayout({ nav, children }: ClientLayoutProps) {
|
|||||||
{screenSize === ScreenSize.Desktop && (
|
{screenSize === ScreenSize.Desktop && (
|
||||||
<Line variant="Background" direction="Vertical" size="300" />
|
<Line variant="Background" direction="Vertical" size="300" />
|
||||||
)}
|
)}
|
||||||
<BookmarksPanel
|
<BookmarksPanel onClose={() => setBookmarksOpen(false)} />
|
||||||
onClose={() => setBookmarksOpen(false)}
|
|
||||||
isMobile={screenSize !== ScreenSize.Desktop}
|
|
||||||
/>
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
@@ -9,12 +9,15 @@ import {
|
|||||||
PopOut,
|
PopOut,
|
||||||
RectCords,
|
RectCords,
|
||||||
Text,
|
Text,
|
||||||
|
Tooltip,
|
||||||
|
TooltipProvider,
|
||||||
color,
|
color,
|
||||||
config,
|
config,
|
||||||
toRem,
|
toRem,
|
||||||
} from 'folds';
|
} from 'folds';
|
||||||
import FocusTrap from 'focus-trap-react';
|
import FocusTrap from 'focus-trap-react';
|
||||||
import { SidebarItem, SidebarItemTooltip, SidebarAvatar } from '../../../components/sidebar';
|
import { SidebarItem, SidebarItemTooltip, SidebarAvatar } from '../../../components/sidebar';
|
||||||
|
import { stopPropagation } from '../../../utils/keyboard';
|
||||||
import { UserAvatar } from '../../../components/user-avatar';
|
import { UserAvatar } from '../../../components/user-avatar';
|
||||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||||
import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
|
import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
|
||||||
@@ -82,12 +85,16 @@ function PresencePicker() {
|
|||||||
initialFocus: false,
|
initialFocus: false,
|
||||||
onDeactivate: closeMenu,
|
onDeactivate: closeMenu,
|
||||||
clickOutsideDeactivates: true,
|
clickOutsideDeactivates: true,
|
||||||
|
escapeDeactivates: stopPropagation,
|
||||||
|
isKeyForward: (evt: KeyboardEvent) =>
|
||||||
|
evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
|
||||||
|
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Menu variant="Surface" style={{ padding: config.space.S100, minWidth: toRem(210) }}>
|
<Menu variant="Surface" style={{ padding: config.space.S100, minWidth: toRem(210) }}>
|
||||||
<Box direction="Column" gap="100">
|
<Box direction="Column" gap="100">
|
||||||
<Box style={{ padding: `${config.space.S100} ${config.space.S200}` }}>
|
<Box style={{ padding: `${config.space.S100} ${config.space.S200}` }}>
|
||||||
<Text size="L400" style={{ opacity: 0.6 }}>
|
<Text size="L400" priority="300">
|
||||||
Set Status
|
Set Status
|
||||||
</Text>
|
</Text>
|
||||||
</Box>
|
</Box>
|
||||||
@@ -115,33 +122,45 @@ function PresencePicker() {
|
|||||||
}
|
}
|
||||||
>
|
>
|
||||||
{/* Presence dot sits in the bottom-right corner of SidebarItem (which is position:relative) */}
|
{/* Presence dot sits in the bottom-right corner of SidebarItem (which is position:relative) */}
|
||||||
<button
|
<TooltipProvider
|
||||||
type="button"
|
position="Right"
|
||||||
aria-label={`Status: ${currentOption.label}. Click to change.`}
|
tooltip={
|
||||||
onClick={(e) => {
|
<Tooltip>
|
||||||
e.stopPropagation();
|
<Text size="T200">{`Status: ${currentOption.label}`}</Text>
|
||||||
setMenuAnchor(e.currentTarget.getBoundingClientRect());
|
</Tooltip>
|
||||||
}}
|
}
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
bottom: 2,
|
|
||||||
right: 2,
|
|
||||||
background: 'var(--bg-surface)',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '50%',
|
|
||||||
padding: 2,
|
|
||||||
lineHeight: 0,
|
|
||||||
cursor: 'pointer',
|
|
||||||
zIndex: 1,
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<Badge
|
{(triggerRef) => (
|
||||||
size="200"
|
<button
|
||||||
variant={presenceVariant(presenceStatus)}
|
type="button"
|
||||||
fill={presenceStatus === 'invisible' ? 'Soft' : 'Solid'}
|
ref={triggerRef}
|
||||||
radii="Pill"
|
aria-label={`Status: ${currentOption.label}. Click to change.`}
|
||||||
/>
|
onClick={(e) => {
|
||||||
</button>
|
e.stopPropagation();
|
||||||
|
setMenuAnchor(e.currentTarget.getBoundingClientRect());
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: 2,
|
||||||
|
right: 2,
|
||||||
|
background: color.Background.Container,
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '50%',
|
||||||
|
padding: 2,
|
||||||
|
lineHeight: 0,
|
||||||
|
cursor: 'pointer',
|
||||||
|
zIndex: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Badge
|
||||||
|
size="200"
|
||||||
|
variant={presenceVariant(presenceStatus)}
|
||||||
|
fill={presenceStatus === 'invisible' ? 'Soft' : 'Solid'}
|
||||||
|
radii="Pill"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</TooltipProvider>
|
||||||
</PopOut>
|
</PopOut>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user