Skip to content

UI: move action buttons outside list cards #163

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
snackman wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

UI: move action buttons outside list cards #163

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4f9fff1
ui: move action buttons outside list cards, enlarge flyer
snackman May 5, 2026
a19d55f
ui: apply external buttons layout on mobile too
snackman May 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 68 additions & 2 deletions src/components/EventCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ interface EventCardProps {
onRsvp?: () => void;
/** Compact mode for map popups — smaller text, no impression tracking */
compact?: boolean;
/** When true, action buttons are rendered externally (ListView desktop) — hides internal button column and enlarges flyer */
externalActions?: boolean;
}

function FriendsGoingModal({
Expand Down Expand Up @@ -144,6 +146,7 @@ export const EventCard = memo(function EventCard({
rsvpStatus,
onRsvp,
compact,
externalActions,
}: EventCardProps) {
const [showFriendsModal, setShowFriendsModal] = useState(false);
const [showCheckedInModal, setShowCheckedInModal] = useState(false);
Expand Down Expand Up @@ -231,7 +234,7 @@ export const EventCard = memo(function EventCard({
>
{/* Left column: action buttons + cover image */}
<div className="flex items-center shrink-0 gap-1">
<div className="flex flex-col items-center gap-1">
<div className={`flex flex-col items-center gap-1${externalActions ? ' hidden' : ''}`}>
{onItineraryToggle && (
<StarButton
eventId={event.id}
Expand Down Expand Up @@ -259,7 +262,7 @@ export const EventCard = memo(function EventCard({
</button>
)}
</div>
{event.link && <OGImage url={event.link} eventId={event.id} rsvpUrl={event.link} onOpenLightbox={onOpenLightbox} />}
{event.link && <OGImage url={event.link} eventId={event.id} rsvpUrl={event.link} onOpenLightbox={onOpenLightbox} className={externalActions ? 'w-[106px] sm:w-[140px]' : undefined} />}
</div>

{/* Right: event details */}
Expand Down Expand Up @@ -446,3 +449,66 @@ export const EventCard = memo(function EventCard({
</div>
);
});

/* ------------------------------------------------------------------ */
/* Standalone action buttons — rendered outside the card in ListView */
/* ------------------------------------------------------------------ */

interface EventCardActionsProps {
event: ETHDenverEvent;
isInItinerary: boolean;
onItineraryToggle?: (eventId: string) => void;
rsvpStatus?: 'idle' | 'confirmed';
onRsvp?: () => void;
}

export function EventCardActions({
event,
isInItinerary,
onItineraryToggle,
rsvpStatus,
onRsvp,
}: EventCardActionsProps) {
const [copied, setCopied] = useState(false);

const handleCopyLink = (e: React.MouseEvent) => {
e.stopPropagation();
if (!event.link) return;
navigator.clipboard.writeText(event.link).then(() => {
trackCopyEventLink(event.name);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
});
};

return (
<div className="flex flex-col items-center gap-1">
{onItineraryToggle && (
<StarButton
eventId={event.id}
isStarred={isInItinerary}
onToggle={onItineraryToggle}
/>
)}
{onRsvp && event.link && (
<div className="mt-px">
<RsvpButton eventLink={event.link} status={rsvpStatus ?? 'idle'} onClick={onRsvp} />
</div>
)}
{event.link && (
<button
onClick={handleCopyLink}
className="p-1 text-[var(--theme-text-muted)] hover:text-[var(--theme-text-secondary)] transition-colors cursor-pointer"
aria-label="Copy event link"
title="Copy link"
>
{copied ? (
<Check className="w-4 h-4 text-green-400" />
) : (
<Link className="w-4 h-4" />
)}
</button>
)}
</div>
);
}
56 changes: 35 additions & 21 deletions src/components/ListView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
import type { ETHDenverEvent, ReactionEmoji, NativeAd, FriendInfo } from '@/lib/types';
import { formatDateLabel } from '@/lib/utils';
import { sortByStartTime } from '@/lib/time-parse';
import { EventCard } from './EventCard';
import { EventCard, EventCardActions } from './EventCard';
import { FeaturedSection } from './FeaturedSection';
import NativeAdCard from './NativeAdCard';
import { imageCache, FlyerLightbox } from './OGImage';
Expand Down Expand Up @@ -446,26 +446,40 @@ export const ListView = memo(function ListView({
</div>
) : (
<div className="pt-3">
<EventCard
event={item.event}
isInItinerary={itinerary?.has(item.event.id)}
onItineraryToggle={onItineraryToggle}
friendsCount={friendsCountByEvent?.get(item.event.id)}
friendsGoing={friendsByEvent?.get(item.event.id)}
checkedInFriends={checkedInFriendsByEvent?.get(item.event.id)}
checkInCount={checkInCounts?.get(item.event.id)}
reactions={reactionsByEvent?.get(item.event.id)}
onToggleReaction={onToggleReaction}
commentCount={commentCounts?.get(item.event.id)}
conference={conference}
onCheckIn={onCheckIn}
checkInLoading={checkInLoading}
liveUrgency={liveEventIds?.get(item.event.id)}
userLocation={userLocation}
onOpenLightbox={() => setLightboxEventIndex(virtualRow.index)}
rsvpStatus={getRsvpStatus?.(item.event.id)}
onRsvp={item.event.link ? () => onRsvp?.(item.event.id, item.event.link!, item.event.name) : undefined}
/>
<div className="flex items-center gap-2">
<div className="flex flex-col items-center gap-1 shrink-0">
<EventCardActions
event={item.event}
isInItinerary={itinerary?.has(item.event.id) ?? false}
onItineraryToggle={onItineraryToggle}
rsvpStatus={getRsvpStatus?.(item.event.id)}
onRsvp={item.event.link ? () => onRsvp?.(item.event.id, item.event.link!, item.event.name) : undefined}
/>
</div>
<div className="flex-1 min-w-0">
<EventCard
event={item.event}
isInItinerary={itinerary?.has(item.event.id)}
onItineraryToggle={onItineraryToggle}
friendsCount={friendsCountByEvent?.get(item.event.id)}
friendsGoing={friendsByEvent?.get(item.event.id)}
checkedInFriends={checkedInFriendsByEvent?.get(item.event.id)}
checkInCount={checkInCounts?.get(item.event.id)}
reactions={reactionsByEvent?.get(item.event.id)}
onToggleReaction={onToggleReaction}
commentCount={commentCounts?.get(item.event.id)}
conference={conference}
onCheckIn={onCheckIn}
checkInLoading={checkInLoading}
liveUrgency={liveEventIds?.get(item.event.id)}
userLocation={userLocation}
onOpenLightbox={() => setLightboxEventIndex(virtualRow.index)}
rsvpStatus={getRsvpStatus?.(item.event.id)}
onRsvp={item.event.link ? () => onRsvp?.(item.event.id, item.event.link!, item.event.name) : undefined}
externalActions
/>
</div>
</div>
</div>
)}
</div>
Expand Down
6 changes: 4 additions & 2 deletions src/components/OGImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,13 @@ interface OGImageProps {
isInItinerary?: boolean;
onItineraryToggle?: (eventId: string) => void;
friendsGoing?: FriendInfo[];
/** Override the default width classes (e.g. for enlarged flyer when buttons are external) */
className?: string;
}

export const imageCache = new Map<string, string | null>();

export function OGImage({ url, eventId, rsvpUrl, onOpenLightbox, isInItinerary, onItineraryToggle, friendsGoing }: OGImageProps) {
export function OGImage({ url, eventId, rsvpUrl, onOpenLightbox, isInItinerary, onItineraryToggle, friendsGoing, className }: OGImageProps) {
const [imageUrl, setImageUrl] = useState<string | null>(
imageCache.get(url) ?? null
);
Expand Down Expand Up @@ -86,7 +88,7 @@ export function OGImage({ url, eventId, rsvpUrl, onOpenLightbox, isInItinerary,
<>
<div
ref={ref}
className="shrink-0 w-[88px] sm:w-[106px] rounded-lg overflow-hidden bg-stone-800/30 self-center cursor-pointer"
className={`shrink-0 ${className ?? 'w-[88px] sm:w-[106px]'} rounded-lg overflow-hidden bg-stone-800/30 self-center cursor-pointer`}
onClick={(e) => {
e.stopPropagation();
if (!imageUrl) return;
Expand Down