39 lines
2.7 KiB
Markdown
39 lines
2.7 KiB
Markdown
|
---
|
||
|
|
title: "MessageBubble footer — timestamp + favorite + (file) download"
|
||
|
|
type: quick-work
|
||
|
|
date: 2026-06-03
|
||
|
|
---
|
||
|
|
|
||
|
|
# MessageBubble footer — timestamp + favorite + (file) download
|
||
|
|
|
||
|
|
## Task
|
||
|
|
Implement the 全部资料 card layout from Figma `4206-6509`:
|
||
|
|
- Each card shows a bottom row with the publish timestamp on the left and action buttons on the right.
|
||
|
|
- Image / album / video / text / link bubbles → 1 button (FavoriteButton).
|
||
|
|
- File-document bubbles (mp3, pptx, pdf, zip, …) → 2 buttons (FavoriteButton + Download).
|
||
|
|
|
||
|
|
## Changes
|
||
|
|
- `src/components/messageStream/BubbleAttachmentDownloadButton.tsx` (new) — small circular download button visually matched to `FavoriteButton` (sm). Handles its own download/loading state and surfaces the `SaveToAlbumGuide` toast for media kinds.
|
||
|
|
- `src/components/messageStream/MessageBubble.tsx`
|
||
|
|
- Removed the absolute-positioned FavoriteButton for the default variant.
|
||
|
|
- Removed the right-aligned `<time>` block for the default variant.
|
||
|
|
- Added a new flex footer: timestamp on the left, FavoriteButton (+ optional `BubbleAttachmentDownloadButton`) on the right.
|
||
|
|
- File-doc detection is based on `pickBubble(post) === FileDocBubble` and the primary attachment `post.attachments[0]`.
|
||
|
|
- `variant === "latest"` paths are left untouched (latest masonry cards keep the bottom-right absolute FavoriteButton and the existing right-aligned timestamp because `LatestFileCard` already renders its own footer).
|
||
|
|
- `src/components/messageStream/bubbles/FileDocBubble.tsx`
|
||
|
|
- Removed the inline per-row download button from `AttachmentRow` in the default variant (download now lives in the bubble footer).
|
||
|
|
- Trimmed the now-unused state and handlers from `AttachmentRow`; imports remain because `LatestFileCard` still uses them.
|
||
|
|
|
||
|
|
## Verification
|
||
|
|
- `npx tsc --noEmit` — clean.
|
||
|
|
- `npm run format` then `npm run format:check` — clean.
|
||
|
|
- `npm test` — 49/49 passing.
|
||
|
|
- Visual check pending on device — expected to match Figma `4206-6509`:
|
||
|
|
- timestamp + bookmark on image/album/video/text/link cards
|
||
|
|
- timestamp + bookmark + download on file cards
|
||
|
|
|
||
|
|
## Notes
|
||
|
|
- For posts with multiple file attachments, the footer download button currently targets `attachments[0]` only (matches the Figma single-attachment cards). If a multi-attachment file post needs per-attachment download, revisit `AttachmentRow` and re-add a small inline download or expose a list in an overflow menu.
|
||
|
|
- The new download button mirrors `FavoriteButton`'s sm style (h-9 w-9, same border / bg / hover treatment) so the two sit on the same baseline and share visual weight.
|
||
|
|
- The home page's "latest" masonry variant is unaffected — that path renders `LatestFileCard` which already has its own footer.
|