- Drop max-w-[1280px] on the desktop header inner row so the header
expands with wider viewports instead of staying capped.
- Move the inline nav / burger toggle from min-[1000px] to xl (1280px)
so the nav only appears when all six items have enough room. The old
threshold relied on overflow-x-auto, which clipped the first/last
characters ("ll assets", "Popula").
- Remove the now-unused .header-nav-scroll CSS along with the scroll
fallback wiring on the nav element.
Mid-width viewports (1000–1280px) now show the burger drawer instead
of a horizontally-scrolled nav. main content stays at max-w-[1280px]
on purpose.
- Add mute toggle button (Volume2/VolumeX icons) to the custom control bar.
- Add an always-visible inline straight-line volume slider on desktop;
mobile keeps mute toggle only and relies on system volume keys.
- Slider at 0 auto-mutes; unmuting from zero restores volume to 1.
- Sync isMuted/volume state via the video volumechange event.
Verified in browser at /browse?type=video: drag slider updates
video.volume, mute toggle preserves volume across on/off.
Rename the localized URL prefixes from full English names to short
ISO-style codes:
/chinese -> /cn
/japanese -> /ja
/korean -> /ko
/vietnamese -> /vi
/indonesian -> /id
/malay -> /ms
Add legacyLanguageRedirects mapping and a LegacyLangRedirect component
in App.tsx so links shared on WeChat (and elsewhere) that still use the
long-form paths keep landing on the right page. The redirect preserves
the sub-path, query string, and hash, e.g.
/malay/browse?post=42#x -> /ms/browse?post=42#x
Also refresh doc-comment examples in i18n.tsx, FigmaBanner.tsx,
PublicLayout.tsx, and useLocalizedPath.ts so future readers see the new
prefixes.
The 链接钱包 CTA was using the lucide outline Wallet icon. Replace it
with a local WalletIcon component built from the exact Figma path
(filled body, currentColor fill) so the icon paints in dark on the
yellow CTA, matching Figma's #08070C fill via the button's text-black
utility.
Rebuild the mobile hamburger menu as a full-screen drawer that matches
the Figma design 1:1 — five nav items (全部资料 / 资料分类 / 官方推荐 /
最新更新 / 热门资料), transparent item backgrounds over the ark-bg
drawer, hairline dividers at #2B2B37, gold text on the active route,
and the existing WalletButton compact pill as the bottom CTA. Drop the
chevron-right indicators per the rendered Figma frame and remove the
old 收藏 row since it's not in the design.
Also move the drawer JSX out of <header sticky top-0 z-40> and render
it as a sibling at the layout root. The sticky+z-index header was
creating a stacking context that trapped the drawer's z-50 fixed below
the bottom nav at z-40 global, so the drawer never reached the
foreground.
Add the same iOS-safe body scroll lock used for the search overlay so
the underlying page doesn't drift while the drawer is open.
Match the Figma 4206-6509 card layout for /browse: every bubble now
renders a bottom row with the publish timestamp on the left and the
action buttons on the right. Image, album, video, text and link cards
show only the FavoriteButton; file-document cards show the
FavoriteButton plus a new BubbleAttachmentDownloadButton sized to
match. Removes the absolute-positioned favorite from the default
variant, drops the right-aligned timestamp block, and strips the inline
per-row download button from FileDocBubble's default variant since the
download now lives in the footer. The 'latest' masonry variant is
untouched so the home page continues to use LatestFileCard's existing
internal footer.
The defensive rAF + scroll loop and its touching guard were added to
fight an iOS sticky-relayout quirk, but the module-level lastScrollLeft
plus the useLayoutEffect mount restore already cover the common case.
The watch loop also interfered with a fresh slide gesture immediately
after a filter tap. Strip it out together with the surrounding inline
comments so the component is the minimum needed: gold active state on
click and a remount-surviving scroll position.
Image, album, and video bubbles in the official-assets category now
render the attachment filename as a bottom-left overlay so editors can
identify the source asset at a glance. Shared AttachmentFilenameLabel
component mirrors the AttachmentDownloadPill style, uses
filenameWithExtension so MIME-only attachments still get a sensible
label, and is pointer-events-none so it never blocks the bubble's tap
target.
PublicLayout wraps the routed page in <AnimatePresence> keyed by
pathname+search, so changing ?type=… fully unmounts the page and creates
a fresh FilterChips. A useRef-based save/restore therefore reset on
every filter switch. Persist the scrollLeft in a module-level value
that survives the unmount, restore synchronously on mount, and keep an
~1.5s post-mount watch window for the iOS Safari sticky relayout that
asynchronously snaps scrollLeft back to 0. Also gate the inactive-chip
hover color behind [@media(hover:hover)] so iOS sticky-hover no longer
leaves a faint gold tint on the last-tapped filter.
Both routes render the same MessageStream; the layout wrapper used to inset
/category by px-4 / sm:px-6 on mobile while /browse stayed edge-to-edge,
shrinking bubble width and making the category waterfall feel narrower
than the all-resources page.
