Replace the compact ExternalPostCard with a full feed-style layout
matching the /bluesky feed when viewing individual Bluesky posts.
Shows large avatar, full text, image/link embeds, and interactive
action buttons (comment, repost, react, share) for a thread-like feel.
Thread hideImage prop through LinkEmbed -> BlueskyEmbed -> ExternalPostCard
so images are suppressed in the compose dialog preview, matching the
behavior of normal post reply indicators.
Clicking the avatar, display name, or handle now navigates to
/i/{bsky.app/profile/handle} instead of the post's /i/ page.
Clicks stop propagation so the card-level navigation still works.
ReplyComposeModal now renders a LinkPreview card when the event is a URL,
so users see what they're commenting on. Previously the preview was skipped
entirely for URL-based comments.
Pass post.likeCount to ExternalReactionButton via new count prop so like
counts display from the Bluesky API. Comment button now opens the
ReplyComposeModal with the post URL instead of navigating away.
The Bluesky page had a broken inline reaction that just published '+' with
no emoji picker. The /i/ page had the full implementation with Popover,
QuickReactMenu, hover-to-open, and custom emoji support. Extracted the
reaction logic into a reusable ExternalReactionButton component and wired
it into both pages, removing ~230 lines of duplicated/inferior code.
Integrate useWikipediaSearch and useArchiveSearch into both the desktop
sidebar dropdown (ProfileSearchDropdown) and mobile bottom-nav sheet
(MobileSearchSheet). At most 1 result from each source is shown, always
positioned after Nostr profiles to preserve profile precedence. Keyboard
navigation indices updated to include the new items.
Detect Wikipedia URLs and render a custom WikipediaArticleHeader with hero
image, article title, Wikidata description, expandable extract, and a
Read on Wikipedia footer link. Also uses the Wikipedia API for accurate
page titles in the header bar and SEO metadata, and navigates back to
/wikipedia on the back button.
Replace dark:prose-invert with text-foreground on all prose containers so
markdown content matches the active theme colors. Also bump article preview
text size from text-sm to text-[15px] to match note content in the feed.
Avoid recreating style objects on every render in MobileBottomNav,
FloatingComposeButton, and MobileDrawer by extracting them to
module-level constants.
- Remove STICKY_HEADER_CLASS + backdrop-blur from TagFeedPage, ListDetailPage,
RelayPage, and DomainFeedPage to match the arc-based header style
- Migrate ListDetailPage tab bar to SubHeaderBar
- Migrate ThemesPage header to use shared PageHeader component
- Extract --top-bar-height and --bottom-nav-height CSS custom properties in
index.css, replacing hardcoded 2.5rem/2.75rem in all calc() expressions
- Document MobileDrawer DRAWER_BG_WIDTH constant (300px + 36px arc overhang)
- Remove unused STICKY_HEADER_CLASS import from ProfilePage
Consolidate duplicated patterns from iterative development into reusable
components:
- ArcBackground: shared SVG arc shape used by SubHeaderBar, MobileTopBar,
and MobileBottomNav (eliminates 3x duplicated SVG paths and magic numbers)
- PlanetButton: extracted FAB planet SVG with useId()-scoped gradient IDs
to prevent collisions if multiple instances ever coexist
- PageHeader: standardized back+icon+title header used across 10 pages
Net reduction of ~144 lines with no behavioral changes.
Create SubHeaderBar component that draws the tab background and
decorative arc as one combined SVG path (rect + curve). Replace all 9
sub-header instances across Feed, Search, Notifications, Videos, Vines,
Photos, Themes, Events, and Books pages.
Also update MobileTopBar to draw its background as a unified SVG shape
(rect-only when sub-header present, rect+arc when standalone).
Eliminates the sub-pixel transparent seam between bg-background/80
containers and their separate SVG arc overlays.
Draw the arc and rectangle as one combined path instead of a separate
SVG arc over a bg-background/80 div. Single fill layer eliminates both
the sub-pixel seam during animation and the double-opacity overlap line.
Overlap the SVG arc 1px into the nav bar (bottom: calc(100% - 1px))
and add will-change-transform to promote the entire nav to a single
compositing layer. Prevents the transparent seam that appeared during
fast scroll-triggered show/hide transitions.
Replaced the pathLength/strokeDasharray trick with two literal front-arc
path segments in the mask (computed by splitting the cubic bezier at
circle intersection points). The ring visually passes in front of the
planet body at the bottom-left and top-right, and behind it through the
middle — identical to the previous Chrome rendering, now cross-browser.
Remove pathLength/strokeDasharray/strokeDashoffset from the SVG mask,
which WebKit renders inconsistently. Use a simple full-path black
stroke instead — cross-browser safe with nearly identical visual result
at FAB size.
Planet body uses accent→primary diagonal gradient, ring uses
primary→accent horizontal gradient. Replaced generic drop-shadow-lg
with a primary-colored layered drop-shadow for a glowing float effect
that adapts to the current theme.
Update all CSS utilities referencing bottom nav height (bottom-fab,
bottom-mobile-nav, pb-overscroll, ai-chat-height, livestream-height,
vine-slide-height) from 3.5rem to 2.75rem.
Update all CSS utilities that reference the top bar height (top-mobile-bar,
-mt-mobile-bar, ai-chat-height, livestream-height, vine-slide-height) from
3rem to 2.5rem. Scale logo from 28px to 24px to fit.
Affects all shared tab bars (Follows/Ditto, Posts/Accounts,
All/Mentions, Follows/Global, etc.) via the single TabButton
component. Brings total height from ~48px to ~36px for a more
compact mobile experience.
Alex Gleason