Drawer top: drop nav pt-2 so the first menu item sits flush with the
drawer top edge per Figma frame 173 (first item y matches drawer y).
Drawer bottom: raise CTA bottom inset from 20px to 34px so the gap
between the 链接钱包 button and the drawer's bottom edge matches the
Figma measurement (Btn Primary bottom y=25041 vs drawer bottom y=25075).
The safe-area-inset env() still wins on devices with a larger inset.
Figma 4164-5336 frame 173 specifies the drawer body as #14131A at 90%
opacity with a 24px background blur. Switch bg-ark-bg to bg-ark-bg/90
backdrop-blur-xl so the underlying page bleeds through softly rather
than being fully masked.
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 WalletConnect relay (wss://relay.walletconnect.org) is unreliable/blocked
in mainland China. Every wallet flow (desktop QR, mobile deeplink, mobile QR)
depends on it, so Chinese users see the login button hang forever and the
QR code never appears. When RainbowKit's render fails, the whole site goes
white because nothing catches the error.
Changes:
- Add WalletStackErrorBoundary around <RainbowWalletProvider> + modal so
RainbowKit init failures no longer blank the entire app.
- Hoist <WalletProvider> above the boundary; it only depends on the injected
provider, so useWallet keeps working for header / favorites / etc. even
when the WC stack is dead.
- On mobile, the TP/imToken 'Open Wallet App' button now navigates directly
to tpdapp://open / imtokenv2://navigate/DappView with an ?autoLogin=<kind>
query, pulling the site into the wallet's in-app browser without ever
touching the WC relay. MetaMask still uses the WC path (no equivalent
deeplink).
- Add AutoInjectedLogin: when the page loads with ?autoLogin=<kind>, wait
up to 8s for window.ethereum, then connectInjectedWallet + completeLogin.
Strips the param via history.replaceState to avoid re-firing on reload.
- Guard against the in-app-browser disconnect/reconnect case: if
getInjectedWallet(kind) is already truthy, skip the deeplink and let
useWalletConnectLogin's deeplink mode take the injected fast path
(avoids TP trying to open TP recursively).
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.
- Align latest-update media size pills to the Figma spec: 72x24 pill, black background, 24px gray icon cell, 10px label, and the exact small Figma cloud-download SVG.
- For non-document latest cards, remove the duplicate footer download action so media cards only show per-media size/download pills plus the bookmark action, matching the Figma non-document card design.
- Keep card heights flexible so content determines the final card height instead of locking to design mock heights.
- Update desktop header actions to match Figma: remove the standalone desktop favorites button and style the wallet connect pill with the wallet icon while allowing localized labels to expand.
- Replace favorite action with the Figma bookmark SVG and hover state; replace download cloud with the provided Figma SVG.
- Align official recommendation cards with the Figma card structure, colors, and bottom action row.
- Rework popular rows to the Figma desktop rhythm with 90px rows, wide thumbnails, rank area, and right-side action buttons.
- Add a dedicated desktop LatestUpdateCard for Figma-style latest-update masonry cards with flexible text-driven heights instead of fixed card heights.
- PopularRankList: switch row to 90px Figma layout (246x90 cover, gap 24/12, pill px-3 py-1, meta color #9FA0A8, object-cover image)
- RecommendedCard: unify card and cover background to #272632
Previous attempt deleted the in-flight act workspace and broke
actions/checkout. Restore the safe >60min sweep for ~/.cache/act
while keeping npm/docker/tmp/log cleanup aggressive.
- wipe all stale act workspaces (keep only current run's dir)
- clear ~/.npm/_cacache and setup-node cache fully
- docker system prune -af --volumes
- apt/yum cache clean, journald vacuum to 100M
- /tmp older than 30min instead of 120min
Search results can link to older posts that are not present in the first
/browse page. The previous deep-link flow kept paginating the all-assets
stream until the target id appeared, leaving users stuck on the waiting
indicator for very old posts.
Fetch /api/posts/:id directly for ?post= arrivals and inject the resolved
target post at the top of the stream when it is not already in loaded
items. The normal paginated feed still loads below for context. Keep the
explicit finding/not-found status messages as a fallback for slow or
missing direct fetches.
Verified with search result c5eeb17d-3bd0-4d32-9c92-5efa6e4a015c: target
post rendered within 100ms instead of waiting for pagination. Checks:
tsc, format:check, tests, build.
Banner / Home-card deep-links were starting the smooth scroll the
moment the target post entered the DOM, before the in-view Reveal
animations on the top bubbles had time to fade in. Users perceived the
page as 'scrolling past nothing' because most bubbles were still at
opacity 0 when the viewport moved.
Track the moment first non-skeleton content appears for the current
target via firstContentAtRef, then hold the smooth-scroll start until
~300ms after that — long enough for the initial Reveal staggers to
play. Elapsed time is subtracted so cached arrivals don't pay the full
wait twice, and the ref resets per target so each navigation re-times.
Verified in the browser: with cold cache, content arrives ~480ms after
click, smooth scroll starts ~800ms (300ms settle), reaches deep target
by ~1.3s. With warm cache same pattern; users now see content before
motion begins.
Banner / Home-card clicks landing on /browse?post=X now always start the
smooth-scroll positioning from the top of the stream, instead of from
whatever scrollY the user happened to leave the page at. Runs in
useLayoutEffect before paint so the user never briefly sees the previous
position before the jump, giving a clearly visible scroll journey to the
target post every time.
Verified in the browser: before banner click scrollY=2000, immediately
after =0, then smooth-scrolled to ~25k as pagination loaded the target
post deeper in the stream.
- Replace the bare '…' loading dots at the bottom of the post stream
with a skeleton bubble that matches the initial-load placeholders, so
pagination feels like content arriving instead of a frozen indicator.
- Localize the retry control via new 'retry' / 'loadMoreFailed' keys
across all 7 locales and surface a user-friendly error string instead
of the raw exception message.
- Retry button now picks reset() vs loadMore() based on item count so a
pagination failure only refetches the next page, not the whole stream.
- When a banner deep-link can't find its target post and pagination
errors, break out of the retry loop and release the scroll lock so the
user sees the inline retry instead of an endless freeze.
Verified in the browser: zh-CN renders '加载更多资料失败，请检查网络后重试。'
with a '重试' button; banner clicks with empty / '#' / 'javascript:' /
null linkUrls render no anchor and do not navigate.
- 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>
