- MessageStream: drop the mount-time scroll lock and the 80ms-delayed
custom rAF; engage the lock only while the smooth animation runs and
use native scrollTo({behavior:'smooth'}) so the page never feels frozen
during pagination and the easing is buttery.
- PublicLayout: fire the default /browse prefetch immediately on mount
(banner / Home tile destination) so a fast tap hits a warm cache;
popular / latest stay deferred to idle.
- FigmaBanner: prefetch the all-scope stream on mount and on pointerdown
as safety nets, and ignore empty / '#' / javascript: link URLs so a
contentless banner renders as a non-interactive image.
- usePostStream: dedupe in-flight prefetches by key so concurrent
callers (layout + banner) collapse into a single network request.
The banners API can return hundreds of records; show at most 10 so the carousel
and its dot indicator stay on one row within the phone width, regardless of how
many exist on the backend.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Banner linkUrls come back from the API as unprefixed paths
(e.g. /browse?post=123). Navigating to them directly dropped non-English
viewers into the English version of the post. Localize both the rendered
href and the SPA navigate target via stripLangPrefix + localizePath.
Initialize the categories state from the cached response on first render so the
category icons stay visible when navigating back to the home page, instead of
flashing empty for a frame.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
With many banners the pagination dots overflowed the phone width. Show at most
10 dots in a window that follows the active slide; each dot still maps to its
real slide index.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Measure the image's rendered bottom edge with refs + ResizeObserver and
position the long-press save hint relative to it instead of pinning to
screen center or stage bottom. Enlarges the toast for mobile legibility
and clamps the offset so tall portrait images don't push it offscreen.
The app ships its own 7-language i18n and serves localized content, but mobile
browsers (Google Translate) were auto-translating the Chinese UI into broken
English (brand, nav, language dropdown). Add translate="no" + the Google
notranslate meta, and keep the attribute set on language changes.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Extract zhDict/enDict from i18n.tsx into src/locales/{zh-CN,en}.ts
- Add full Korean dictionary (src/locales/ko.ts) covering all 115 UI keys
- Update formatBytes test/impl boundary for 1000-based units
- md (768-1023px): 2 columns with px-4 so cards don't kiss the screen edge.
- lg+ (>=1024px): 3 columns, parent wrapper provides spacing.
- <768px stays on the original single-column mobile branch.
- Matches Figma design (file uHDZkVHjAp7BXDKQKB0PM4, node 4367-11405).
- Mobile keeps the existing 5-post single column unchanged.
- Desktop (md+) renders all 12 latest posts in a CSS-columns masonry
with break-inside-avoid so each card's height stays content-driven.
- Adds an optional 'fluid' prop to MessageBubble that drops the
standalone-feed max-widths so bubbles fill the masonry column. The
/browse stream keeps the default non-fluid widths.
Match Figma node 4366-11092 desktop banner design:
- Slides shrink to 78%/72%/60% width on md/lg/xl with snap-center,
first/last get matching left/right margin so the edges still center.
- Each slide is wrapped in a framer-motion m.div that animates filter,
opacity, and scale between active and idle states.
- goTo and scroll/drag handlers use the slide's real offsetWidth so
centering math holds at every breakpoint; mobile (full-width, snap-start
visual) is unchanged.
- Replace the desktop header search field with a search icon button that
opens the search panel on click (matching mobile), so there is one search
input (in the panel) instead of a redundant header field, and the trigger
no longer vanishes when the panel opens.
- Lower the nav collapse breakpoint from 1100px to 1000px so the full menu
stays visible on smaller desktop widths before falling back to the
hamburger menu.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Match the official-recommendation and popular cards to the message bubble
surface color (#272632) used on the browse/all page and the latest section,
so homepage content cards and the browse page share one background. Also
align the popular card border with the official card (#27292E).
Categories tiles are intentionally left unchanged.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Size the banner and the popular rank list to the same responsive widths as
the latest section's message bubbles (680/900/1120), so the banner, latest
cards and popular cards line up at one consistent content width on desktop.
Desktop-scoped; mobile stays full-width.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Wrap the Categories and Popular sections in the same responsive
max-width container (820/1080/1180) used by Official and Latest, so all
four section titles line up vertically on desktop.
- Official carousel arrows: hide the arrow at the edge already reached, and
snap one card per click (reveal the next/previous card fully, keeping a
small peek) instead of a fixed-pixel scroll.
- Show the pagination dots on desktop too (was mobile-only).
- RecommendedCard download button icon: text-ark-gold -> text-white to match
the file bubble / popular / video download buttons.
Desktop-scoped; mobile layout unchanged.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Banner: scale down and center on desktop (md:max-w-[680px] lg:max-w-[800px])
so it no longer fills the whole screen.
- Align section widths to one responsive container (820/1080/1180): wrap the
Official row and match Popular to Latest, fixing left-edge/width mismatches.
- RecommendedCard: stop the carousel card from shrinking back to 246.4px at xl.
- Popular download button now matches the file bubble's filled round
DownloadCloud button for visual consistency.
- Header nav vertical padding py-1 -> py-0.5; swap Favorites before Popular
across desktop nav and mobile menu to match the bottom tab order.
- Official carousel: hide the left arrow at the start and the right arrow at
the end instead of always showing both.
All changes are md/lg/xl-scoped; mobile layout is unchanged.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Entering /browse via a popular-section card carried ?post=, which made
ScrollToTop skip the reset entirely. The window stayed at the previous
page's bottom scroll, so the deep-link animation visibly scrolled UP from
the bottom to the target post.
Now any pathname change jumps to the top first (even with ?post=), letting
the destination align to the post by scrolling down from the top. Hash
anchors and same-page ?post= changes are still left alone.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Mobile sections had no vertical rhythm (space-y only at md+) and
inconsistent header-to-content gaps. Add uniform 10px spacing between
sections and header-to-content so each section header sits symmetric.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
