feat(ui): cosmetic tweaks — profile pencil, pills, search, ticket count, map icon, avatar trigger, no overlay animations #105

Merged
padreug merged 7 commits from feat/ui-tweaks-2 into dev 2026-06-17 08:35:09 +00:00
Owner

Cosmetic bucket after splitting the original ui-tweaks-2 branch into 3 PRs (calendar UX → #110, real-time/subscriptions → #111).

  • Profile edit affordance → pencil inside the identity card.
  • Temporal filter pills respect palette radius + shadow.
  • Organizer name included in event fuzzy search (reads the shared profile cache).
  • Show total ticket capacity ("N of M tickets left") on card + detail.
  • Even out the Map empty-state icon transparency (element opacity, not stroke alpha).
  • Top-right menu trigger shows the user's avatar/initial (or a login icon when logged out) instead of a hamburger.
  • Disable enter/exit animations on overlays globally.

🤖 Generated with Claude Code

Cosmetic bucket after splitting the original ui-tweaks-2 branch into 3 PRs (calendar UX → #110, real-time/subscriptions → #111). - Profile edit affordance → pencil inside the identity card. - Temporal filter pills respect palette radius + shadow. - Organizer name included in event fuzzy search (reads the shared profile cache). - Show total ticket capacity ("N of M tickets left") on card + detail. - Even out the Map empty-state icon transparency (element opacity, not stroke alpha). - Top-right menu trigger shows the user's avatar/initial (or a login icon when logged out) instead of a hamburger. - Disable enter/exit animations on overlays globally. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
Replace the gear (Settings) button in the profile sheet header with a
pencil button inside the identity card, by the avatar/name row. A pencil
reads as "edit your profile" more intuitively than a header gear, and
co-locating it with the identity it edits is clearer. Opens the same
edit-profile dialog.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Drop the hardcoded rounded-full on the temporal filter pills so they
inherit each palette's --radius (square under neobrut, gently rounded
elsewhere) and the theme's offset drop-shadow, instead of overriding it.
Add pb-1 pr-1 so neobrut's hard 4px shadow isn't clipped by the
overflow-x-auto scroll box.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Search only indexed title/summary/description/location/tags, so typing an
organizer's name found nothing. Organizer display names aren't stored on
the event (they're resolved per-pubkey into the shared ProfileService
cache), so enrich the search corpus with the resolved name read from that
same reactive cache and add it as a Fuse key. Opening the search overlay
warms the cache for any organizers not yet fetched, and the corpus
recomputes as kind-0 metadata arrives.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The month-grid calendar opened with no day selected, so the events panel
below was empty until the user clicked a day. Initialise the selection to
today (currentMonth already starts on the current month) so it opens
showing today's events.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The calendar page had no way back to the feed except the browser/back
gesture. Add a top-bar ghost Back link (ArrowLeft + "Back" → events feed)
mirroring EventDetailPage's pattern for navigation consistency.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The heart took ~1s to fill because toggleBookmark awaited the remote
LNbits signer + relay publish before updating state. Flip local state
optimistically so the heart responds on tap, then sign/publish in the
background and roll back (with an error toast) if it fails. Add a brief
scale pop on the heart when a favorite is added for tactile feedback.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Availability only showed remaining ("N tickets available"), not the total
capacity. Derive total (remaining + sold) on EventTicketInfo and display
"N of M tickets left" on both the event card and the detail page, so
buyers can gauge demand. Unlimited events are unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The feed had two redundant day controls — the DatePickerStrip week strip
and the temporal preset pills — on top of the calendar page. Remove the
week strip (the calendar already covers picking a specific date) and move
the calendar shortcut to the end of the temporal-filter row, next to the
pills. Frees a row and keeps coarse windows (Today/This Week/…) inline
with one-tap access to the full calendar.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
With the DatePickerStrip gone, selectedDate/selectDate in useEventFilters
were unreachable — nothing set a specific date anymore (the calendar page
only navigates to event detail). Delete the orphaned DatePickerStrip
component and strip the now-dead date-filter branch, state, and actions.
The feed filters purely by temporal pills + past/upcoming + categories.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
My Tickets listed every ticket with no way to separate events that
already happened. Add an Upcoming/Past segmented toggle (defaults to
upcoming) that filters the grouped tickets by their event's date, with
the tab counts (All/Paid/Pending/Registered) derived from the visible
set so badges match what's shown. Events not yet resolved from relays
stay visible under Upcoming until their date is known.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The toggle sat in the header's top-right corner, where it collided with
the fixed top-right hamburger menu (the Past button rendered behind it).
Move it to its own left-aligned row above the tabs — same approach the
calendar page uses to clear the hamburger.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The aspect-square day cells made the month grid ~350px tall on mobile,
pushing the selected-day event list well below the fold. Switch cells to
a fixed h-12 (still a comfortable 48px tap target) and tighten the
section spacing (space-y-4 → space-y-2), so the grid + day's events fit
with less scrolling.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The My-tickets filter chip sat on its own row below the Back link,
wasting vertical space. Move it onto the Back-button row (still
left-aligned to clear the fixed top-right hamburger), reclaiming a row.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
After a successful ticket purchase, the feed/calendar "My tickets" filter
and EventCard owned badges didn't update until a full page reload — the
shared useOwnedTickets singleton was never refreshed. Its own docs note a
successful purchase should call refresh(); wire that in at the payment-
confirmed point in useTicketPurchase so every surface reflects the new
ticket immediately.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add a pickerMode to EventCalendarView (month grid only, emits selectDate
on every day tap, no selected-day events panel) and a new
EventCalendarPopup dialog wrapping it. Picking a day emits the date and
closes. Groundwork for replacing the standalone calendar page with an
on-feed date-picker popup and a My-Tickets event-date visual.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Bring back selectedDate filtering, now driven by the calendar popup
instead of the removed week-strip: when a day is picked it takes
priority over the temporal pills and bypasses the past/upcoming split.
Add a dedicated clearSelectedDate() so the date selection can be cleared
independently of categories (a preset pill also clears it).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The calendar button now opens the date-picker popup instead of
navigating to a separate page. Picking a day filters the feed to that
day (button highlights while active) and shows a removable date chip
whose ✕ clears ONLY the date selection — distinct from category
clearing, which keeps its own clear in the filter dropdown. Dots in the
popup come from the full (unfiltered) event set.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The calendar is now a date-picker popup on the feed (and, next, a visual
on My Tickets), so the dedicated /events/calendar page and route are no
longer needed. Delete EventsCalendarPage.vue, drop its route, and update
the stale openCreate comment.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replaces the My-tickets filter that lived on the removed calendar page.
A calendar button opens the date-picker popup with per-day dots over the
user's own events; picking a day filters the ticket list to it (a
removable date chip overrides the upcoming/past toggle while active).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Defensive guard so the date-picker popup can never linger across
navigation (reported: it appeared open on the feed after returning from
an event detail page). Force calendarOpen=false in onBeforeRouteLeave on
both the feed and My Tickets, the two popup hosts. Modals shouldn't
survive a route change regardless of how the close/navigation interleave.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The placeholder map icon used text-muted-foreground/30, applying alpha to
the stroke colour so the lucide icon's overlapping fold lines compounded
to a darker shade where they crossed the outline. Use element-level
opacity-30 with the full colour instead, so the whole icon fades
uniformly.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace the hamburger icon on the fixed top-right menu button with a
context-aware affordance: the user's avatar when logged in (first
initial when they have no picture), or a login icon when logged out.
Opens the same profile/menu sheet either way; aria-label reflects the
state. overflow-hidden + the avatar filling the round button keeps it
clipped to the chip.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Reka-ui overlays (dialog, sheet, popover, dropdown, tooltip, …) animate
their open/close via the data-state open/closed attribute. Zero the
animation duration globally in index.css so overlays appear/dismiss
instantly — no fade/zoom/slide. Verified the dialog still mounts and
unmounts correctly (Presence resolves at 0s). Pulse/spin loaders and CSS
transitions (hovers, the favourite heart pop) are untouched.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Display how many people have favorited (liked) an event next to its
heart, updating in real time. A like == the event appearing in someone's
NIP-51 bookmark list (kind 10003) — the same action the heart performs.

New useEventLikes composable keeps ONE batched subscription over every
mounted heart's event coordinate (filtered by #a). It stays open after
EOSE, so a like published by anyone is pushed live and the count ticks
up for everyone — verified end-to-end against a relay (a like from a
fresh key bumped the shown count 2→3 with no reload). The heart also
pops on a live increment (gated past the initial historical-load
window), and the user's own like/un-like reflects instantly via the
optimistic heart state.

Caveat: an un-like by another user only reflects on next load — a
replaceable list that no longer contains the coord stops matching the #a
filter, so the removal isn't pushed. Counts are correct on fresh load.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
padreug force-pushed feat/ui-tweaks-2 from 08d7b8622f to 1249d33aac 2026-06-17 08:27:10 +00:00 Compare
padreug changed title from feat(ui): UI tweaks round 2 — palette-aware filter pills + profile edit affordance to feat(ui): cosmetic tweaks — profile pencil, pills, search, ticket count, map icon, avatar trigger, no overlay animations 2026-06-17 08:28:29 +00:00
padreug deleted branch feat/ui-tweaks-2 2026-06-17 08:35:09 +00:00
Sign in to join this conversation.
No description provided.