Move LinkPreview rendering from a fixed position below the post into
NoteContent itself, so previews appear exactly where the URL was in
the original text.
- Rewrite NoteContent to use a token-based architecture: useMemo
produces typed tokens (text, link-preview, mention, nostr-link,
hashtag), then the render phase maps tokens to components
- Non-media URLs produce a `link-preview` token that renders an
inline <LinkPreview> card at that position in the content flow
- Remove separate LinkPreview blocks from NoteCard and PostDetailPage
since previews are now handled by NoteContent
- Remove unused extractPreviewUrl helper from useLinkPreview hook
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Add useLinkPreview hook that fetches Open Graph metadata (title,
description, image, favicon, site name) via CORS proxy with 1hr
stale time caching
- Add extractPreviewUrl helper to find the first non-media URL in
note content
- Add LinkPreview component with a polished card UI showing OG image,
title, description, domain favicon, and external link indicator
- Strip all URLs (both media and non-media) from NoteContent inline
text — media URLs are rendered as image embeds, non-media URLs are
rendered as LinkPreview cards
- Integrate LinkPreview into NoteCard and PostDetailPage between
image attachments and action buttons
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
Image URLs (jpg, jpeg, png, gif, webp, svg) are already rendered as
embedded image previews by NoteCard and PostDetailPage. This change
removes them from the inline text content to avoid duplication.
Also trims leading/trailing whitespace left behind after stripping
image URLs from the edges of content.
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Cap display name to max 40% width so it doesn't get crushed by long NIP-05 addresses
- Make NIP-05 span properly truncate with min-w-0 instead of pushing the layout
- Timestamp and separator remain fixed (shrink-0) so they're always visible
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
Unreliable metric since it only reflects the limited number of posts fetched, not the user's actual total.
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Removed the Calendar icon and "Joined Nostr" text from profile info
- Added truncate to NIP-05 address to prevent overflow
- Added min-w-0 and truncate to website URL to prevent container breakout
- Made link icon shrink-0 to prevent it from being squished by long URLs
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Scrollbars are hidden by default (transparent thumb and track)
- Thin 6px scrollbar appears with 25% opacity on container hover
- Thumb brightens to 40% on direct hover for feedback
- Works across both webkit and Firefox (scrollbar-width/scrollbar-color)
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Use flex items-center on the input wrapper instead of absolute
top-1/2 -translate-y-1/2 hacks for proper icon centering
- Remove focus-visible ring and ring-offset on search input
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Create useSearchProfiles hook that queries wss://relay.ditto.pub
with NIP-50 search filter for kind 0 (profile) events
- Create ProfileSearchDropdown component with debounced input,
keyboard navigation, and animated dropdown of matching profiles
- Update SearchPage to use the new profile autocomplete
- Update LeftSidebar search bar to use the profile autocomplete
- Selecting a profile navigates to their npub profile page
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Removed the border-top from the footer
- Changed aside from lg:block to lg:flex flex-col for flex layout
- Added mt-auto to push footer to the bottom, mirroring the left
sidebar's profile position
- Right-aligned the text with text-right
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
The query already had limit: 5 at the relay level, but relays may
return more results than requested. Added .slice(0, 5) after sorting
to guarantee only the 5 most recent accounts are shown.
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
Added z-10 to the Feed tab bar so note content scrolls behind
it instead of overlapping on top.
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Added logo.png to public folder
- Added favicon and apple-touch-icon link tags to index.html
- Updated manifest.webmanifest with icon references
- Updated MewLogo component to render the PNG image instead of SVG
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
ReplyComposeModal now handles both cases: when an event is passed it's a
reply (shows embedded post preview), when no event is passed it's a new
post. FloatingComposeButton reuses ReplyComposeModal instead of having
its own duplicate dialog.
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
Updated ReplyComposeModal, FloatingComposeButton, and InteractionsModal
to place the title on the left and the dismiss X button on the right,
matching the standard dialog layout pattern.
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Created useEventInteractions hook that fetches kind 6 (reposts),
kind 7 (reactions), and kind 9735 (zap receipts) for a given event ID
- Created InteractionsModal component with three tabs:
- Reposts: shows who reposted with avatar, name, and timestamp
- Reactions: groups reactions by emoji, showing each user under the
emoji header with counts
- Zaps: shows who zapped with amount badges (sorted by largest first),
zap messages, and a total sats summary at top
- Stats row text (e.g. "2 Reposts", "1 👍", "500 sats") is now clickable
and opens the modal to the relevant tab
- Action buttons (Repost, Reactions, Zaps) in the post detail view also
open the modal to their respective tabs
- All user rows link to the user's profile page
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Created ReplyComposeModal component that shows the original post embedded
in a compact card above the compose area, matching the reference design
- Updated ComposeBox to accept replyTo, forceExpanded, and hideAvatar props
- ComposeBox now generates proper NIP-10 reply tags (root/reply markers,
p tags for thread participants)
- Wired reply buttons in NoteCard and PostDetailPage to open the modal
- Reply success invalidates both feed and replies query caches
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Map "+" and empty reactions to 👍 emoji so they appear in the stats row
- Remove border-top from stats row and date-only row to match Ditto
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Use justify-around for action buttons (full-width distribution like Ditto)
- Match icon sizes to 18px (same as feed NoteCards)
- Add border-top separator above stats row
- Show date-only row when no stats exist
- Conditionally hide stats row when no engagement data
- Make reply composer expandable (collapsed = single line, no button)
- Smaller avatar (size-9) in reply composer matching Ditto
- Adjust spacing and padding to match Ditto reference screenshots
- Match header font size to xl for "Post Details" title
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Create PostDetailPage with expanded post view showing author info,
full content, images, stats (reposts, likes, zap amount), full date,
action buttons, and inline reply composer
- Create useEvent hook for fetching single events by hex ID
- Create useReplies hook for fetching kind:1 replies to an event
- Update NIP19Page to render PostDetailPage for note1/nevent1 identifiers
- Make NoteCard clickable to navigate to post detail via nevent1 URL
- Fix NoteMoreMenu to use React Router navigate instead of window.location.href
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Fixed early return using old `zaps` key instead of `zapAmount`
- Added robust amount extraction with 3 fallback strategies:
1. Top-level `amount` tag on the zap receipt
2. `amount` tag inside the embedded zap request (description tag)
3. Parsing the bolt11 invoice string
- This ensures zap amounts display even when relays omit the amount tag
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- useEventStats now sums the `amount` tag (millisatoshis) from kind 9735
zap receipts and returns `zapAmount` in sats instead of a zap count
- NoteCard displays the total with compact formatting (e.g. 1.2K, 3.5M)
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- NoteMoreMenu now shows a compact post preview at the top (avatar,
author name, timestamp, and 3-line-clamped content) before menu items
- Dialog overlay updated globally: bg-black/60 + backdrop-blur-sm for a
frosted-glass effect behind all modals
- FloatingComposeButton modal reworked to match the same presentation
pattern: rounded-2xl, hidden default close button replaced with a
centered header (X / "New post" title), separator, compose area
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Created NoteMoreMenu component as a centered dialog with grouped actions:
- Show Post Details, Copy Link to Post, View on njump.me, Bookmark
- Mute Conversation, Mention @user
- Mute @user, Report @user (destructive)
- Close button
- Added the ⋯ More button back to NoteCard action bar alongside Bookmark
- Menu items show the author's display name dynamically
- Copy Link copies nevent-based URL to clipboard with toast feedback
- Bookmark option in the menu toggles bookmark state via useBookmarks hook
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Created useBookmarks hook for NIP-51 kind 10003 bookmark list management
(query, add, remove bookmarks)
- Created BookmarksPage with login prompt, loading skeletons, and empty state
- Replaced "More" nav item with "Bookmarks" in LeftSidebar
- Added bookmark toggle button to NoteCard action bar (replaces three-dot menu)
- Removed /more route from AppRouter
- Bookmarks are stored per NIP-51 as replaceable kind 10003 events
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Inline ComposeBox hidden below sidebar breakpoint (mobile uses FAB)
- "New post" dialog: rounded-2xl corners, clean header with title and
border divider, no padding gap, overflow hidden for crisp edges
- Removed redundant DialogHeader wrapper, title sits in a flex bar
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Tabs z-index lowered to z-[1] so the emoji popover portal (z-50)
always renders above them
- Mobile top bar avatar container uses flex centering instead of
fixed width, ensuring the profile picture is visually centered
- Logo wrapped in flex-1 centered container for proper horizontal balance
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Header: h-10 fixed height, smaller avatar (size-7), smaller logo (22px),
tighter padding (px-3) — eliminates the gap/clipping between header
and sticky tabs
- Tabs sticky offset updated to top-10 (40px) to sit flush under header
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Lowered tabs z-index to z-[5] so the emoji popover (z-50 portal)
renders above them
- Tabs now stick at top-[48px] on mobile (below the 48px top bar)
and top-0 on desktop (sidebar: breakpoint), so they remain visible
when scrolling through the feed
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- EmojiPicker component with 9 categories: Smileys, Gestures, People,
Nature, Food, Activities, Objects, Symbols, Flags
- Category tab bar with emoji icons for quick switching
- Search input filters by category name
- Scrollable grid of emoji buttons (8 columns)
- Click an emoji to insert it at the cursor position in the textarea
- Popover opens from the smiley face button in the compose toolbar
- Button highlights when the picker is open
- No external emoji dependencies — all native Unicode emoji
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Compact single-line compose expands to multi-line on focus/click
- Toolbar shows: paperclip (file upload via Blossom), emoji, content
warning triangle (NIP-36 sensitive content toggle)
- Content warning toggle adds `content-warning`, `L`, and `l` tags
per NIP-36 spec, with optional reason input field
- Circular progress ring shows character usage against 5000 char limit
- Ring turns amber at 90%, red when over limit
- Remaining character count displayed next to ring
- "Post!" button disabled when over limit or empty
- File uploads append URL to content via useUploadFile hook
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
Left border appears at the sidebar breakpoint (900px), right border
only at lg (1024px) when the right sidebar is present. In the middle
view (sidebar visible, right panel hidden), the feed extends to the
edge without a floating right border — matching Ditto's behavior.
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
The sidebar now either shows fully (280px with labels, search, user
info) or is completely replaced by the mobile UI. The icon-only 72px
strip is eliminated — below 900px the mobile top bar, bottom nav,
drawer, and FAB take over entirely.
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>
shakespeare.diy