Use IntersectionObserver on the ComposeBox wrapper in Feed.tsx to track
its visibility. When visible, hide the FAB to avoid redundancy. When the
user scrolls past the compose area, the FAB smoothly fades in with an
upward slide animation. Extends LayoutStore with fabHidden state that
is part of the snapshot so useSyncExternalStore triggers re-renders.
- Add /settings/magic entry to settings page with magic-intro.png icon
- New MagicSettingsPage with toggle for Magic Mouse mode
- Add magicMouse boolean to AppConfig (optional, defaults to false)
- CursorFireEffect: canvas overlay emitting fire particles in primary color
- Mount CursorFireEffect in MainLayout when magicMouse is enabled
Replace the custom WebxdcFeedPage with KindFeedPage, powered by
a new tagFilters option on useFeed/Feed/KindFeedPage. The webxdc
page now uses the same follows/global tabs, pull-to-refresh, and
NoteCard rendering as every other feed.
- useFeed: accept optional tagFilters (e.g. { '#m': [...] })
- Feed/KindFeedPage: pass tagFilters through
- FloatingComposeButton: accept onFabClick callback override
- LayoutOptions: add onFabClick for custom FAB behavior
- Remove useWebxdcFeed (no longer needed)
Use primitive bgUrl/bgMode strings as effect dependencies instead of
the background object reference, ensuring React detects the change
when switching between presets with and without backgrounds.
- Remove ScopedThemeColumns, scopedThemeTokens from LayoutContext and MainLayout
- Profile page now temporarily overrides :root CSS vars with the visited user's theme
- On navigation away, user's own theme is restored via effect cleanup
- Entire page (sidebar, center, right) uses the profile theme
- Removed all display:contents and background extension hacks
- Added scopedThemeTokens to LayoutOptions
- MainLayout wraps center + right columns in ScopedTheme (display:contents)
- Profile page passes theme tokens via useLayoutOptions instead of local wrapper
- Center column and ProfileRightSidebar use bg-background for scoped theme fill
- Removed ProfileThemeWrapper component (no longer needed)
- Desktop: Remove redundant Home/Search nav items (logo serves as Home, inline
search covers both quick lookup and full search page navigation)
- Add visual section grouping with labeled separators (Explore, You, Settings)
- Replace ugly dashed 'Add' button with subtle 'More...' inline link
- Add edit mode with drag-and-drop reordering (@dnd-kit) and remove buttons
for content-type items in the Explore section
- Hover-to-remove on desktop content-type items outside edit mode
- Mobile: Replace avatar menu trigger with standard hamburger icon
- Mobile: Add search icon to top bar right side
- Mobile: Redesign bottom nav as 4-tab layout (Home, Explore, Notifications, You)
- Mobile: Explore tab opens bottom sheet with content type links (vaul Drawer)
- Mobile drawer: Replace profile header with logo, restructure to match desktop
sections, add 'Manage...' link for settings, remove redundant Profile link
- Add sidebarOrder to AppConfig for persisting custom item order
- Extend useFeedSettings hook with orderedRoutes, addToSidebar, removeFromSidebar
Borders were on each page's <main> element, causing them to start below the top of the column. Moving sidebar:border-l and xl:border-r to the wrapper div in MainLayout ensures borders span the full column height from the very top.
- FloatingComposeButton accepts kind prop: kind=1 opens compose dialog, others show 'Coming soon'
- FAB positioned sticky bottom-right within center column (visible on all screen sizes)
- Center column gets bottom padding (pb-24) to account for FAB obstruction
- LayoutContext extended with fabKind option passed through layout system
- Home feed uses kind=1, KindFeedPage passes its kind, StreamsFeedPage uses 30311
Moved the Suspense boundary from App.tsx (which wrapped the entire app)
into MainLayout around just the Outlet and right sidebar. The left
sidebar, mobile nav, and mobile top bar now persist while lazy page
chunks load. A skeleton fallback fills the content area during loading.
MainLayout was rendered inside each page component, causing the entire
layout (sidebar, mobile nav, drawer) to be destroyed and recreated on
every route change. This made navigations feel like full page refreshes.
Restructured to use a React Router layout route with <Outlet />, so
MainLayout persists across navigations and only the page content swaps.
Pages that need custom layout options (showFAB, rightSidebar, etc.) use
the new useLayoutOptions hook to configure the persistent layout.
Lock main element to viewport height on mobile with body scroll disabled,
collapsible description with author under details, zap button inline with
title, and chat input sitting directly above the bottom nav with no gaps.
- Added timeout-based hover management for reaction quick menu
- Menu now closes smoothly when mouse leaves both button and menu
- 150ms delay allows user to move from button to menu seamlessly
- FAB now only appears on the feed page (Index)
- Added showFAB prop to MainLayout for conditional rendering
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Removed hideMobileTopBar prop from MainLayout entirely
- Added STICKY_HEADER_CLASS constant in utils for consistent mobile-aware
sticky positioning (top-10 on mobile, top-0 on desktop)
- Updated all pages to use the shared constant: Search, KindFeed (Vines),
Hashtag, Wallet, Settings, Placeholder, NotFound, Bookmarks,
Notifications, and Profile
- Back arrows hidden on desktop where sidebar provides navigation
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
Right sidebar was 340px vs left sidebar 300px, causing the feed
column to appear shifted left. Now both sidebars are 300px with
max-w-[1200px] container for symmetric centering.
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Widen left sidebar from 280px to 300px to match Ditto
- Add max-w-[1240px] and mx-auto to center the three-column layout
- Adjust compose box textarea top padding (py-2 → pt-3 pb-2) for better vertical alignment of placeholder text with avatar
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Add Zap button to profile header (visible for other users with lightning address)
- Add posting streak counter with flame icon (36h window, caps at 99+)
- Create ProfileRightSidebar with Media grid and Profile Fields sections
- Handle $BTC profile field with copiable address, QR code modal, and mempool.space link
- Regular profile fields render as labels with linked URLs
- MainLayout now accepts optional custom right sidebar prop
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
The mobile layout now activates the moment the left sidebar would need
to shrink — at 688px (72px sidebar + 600px feed + padding). Added a
custom `sidebar` Tailwind screen breakpoint and replaced all `md:`
references that control the sidebar/mobile toggle with `sidebar:`.
This ensures the bottom nav, top bar, drawer, FAB, and full-width feed
kick in precisely when the sidebar can no longer fit alongside the feed.
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
Mobile UI (< md breakpoint):
- MobileTopBar: user avatar (opens drawer) + centered Mew logo
- MobileDrawer: left slide-out sheet with user profile, follower stats,
menu items (Profile, Wallet, Bookmarks, Mutes, Preferences, Domain blocks,
Logout), and expandable Switch accounts section
- MobileBottomNav: fixed bottom bar with Home, Notifications, Search, Vines
- FloatingComposeButton: purple FAB in bottom-right corner opens compose dialog
- Feed goes full-width on mobile, max-w-[600px] only on md+
- Left sidebar hidden on mobile, right sidebar hidden below lg
- Pages with their own headers use hideMobileTopBar to avoid double headers
- Safe area bottom padding for iOS devices
- Added routes for /bookmarks, /mutes, /domain-blocks placeholders
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
Derek Ross