-
- );
- }
-
- return (
-
- {/* Header */}
-
-
-
- {/* Check-in result toast */}
- {checkInResult && (
-
-
- ) : (
- setShowShareCard(false)}
- events={itineraryEvents}
- conferenceName={activeConference || 'Itinerary'}
- displayName={profile?.display_name ?? null}
- avatarUrl={profile?.avatar_url}
- hiddenEventIds={hiddenEvents}
- />
-
- );
+export default function ItineraryRedirect() {
+ redirect('/plan');
}
diff --git a/src/app/itinerary/s/[code]/page.tsx b/src/app/itinerary/s/[code]/page.tsx
index 957540fc..63d72a11 100644
--- a/src/app/itinerary/s/[code]/page.tsx
+++ b/src/app/itinerary/s/[code]/page.tsx
@@ -1,351 +1,5 @@
-'use client';
+import { redirect } from 'next/navigation';
-import { useEffect, useMemo, useState, useCallback } from 'react';
-import { useParams } from 'next/navigation';
-import Link from 'next/link';
-import { AddressLink } from '@/components/AddressLink';
-import dynamic from 'next/dynamic';
-import { ArrowLeft, Calendar, Map as MapIcon, List, Copy, Check } from 'lucide-react';
-import clsx from 'clsx';
-import { useEvents } from '@/hooks/useEvents';
-import { useItinerary } from '@/hooks/useItinerary';
-import { useAuth } from '@/contexts/AuthContext';
-import { supabase } from '@/lib/supabase';
-import { VIBE_COLORS } from '@/lib/tags';
-import { formatDateLabel } from '@/lib/utils';
-import { sortByStartTime } from '@/lib/time-parse';
-import type { ETHDenverEvent } from '@/lib/types';
-import { Loading } from '@/components/Loading';
-import { AuthModal } from '@/components/AuthModal';
-
-const MapView = dynamic(
- () => import('@/components/MapView').then((mod) => ({ default: mod.MapView })),
- {
- ssr: false,
- loading: () => (
-
-
-
-
-
- {/* Conference tabs */}
- {conferences.length > 0 && (
- - My Itinerary{' '} - - ({itineraryEvents.length} event{itineraryEvents.length !== 1 ? 's' : ''}) - -
-
- {conferences.map((conf) => (
-
- ))}
-
- )}
-
- {itineraryEvents.length > 0 && (
- <>
- {/* View toggle */}
-
-
- {([
- { mode: 'list' as const, icon: List, label: 'List' },
- { mode: 'map' as const, icon: MapIcon, label: 'Map' },
- ]).map(({ mode, icon: Icon, label }) => (
-
- ))}
-
-
-
-
-
- )}
-
-
- ) : viewMode === 'map' ? (
- No events in your itinerary yet
-- Star events from the main page to build your schedule! -
- - Browse Events - -
-
- )}
-
-
-
-
- ))}
-
-
-
- {/* Clear button */}
-
- ๐
- sheeets.xyz
- โ My Itinerary
-
-
- {conflicts.size > 0 && (
-
-
- )}
-
- {dateGroups.map((group) => (
- - {conflicts.size} event{conflicts.size !== 1 ? 's' : ''} with schedule conflicts -
-
-
-
-
- - {group.label} -
- -
- {group.events.map((event) => {
- const hasConflict = conflicts.has(event.id);
- const vibeColor = VIBE_COLORS[event.vibe] || VIBE_COLORS['default'];
- const timeDisplay = event.isAllDay
- ? 'All Day'
- : `${event.startTime}${event.endTime ? ` - ${event.endTime}` : ''}`;
- const dropIndicator = getDropIndicator(event.id);
- const isBeingDragged = dragId === event.id;
-
- return (
-
- registerItemRef(event.id, el)}
- {...getItemProps(event.id)}
- className="relative"
- >
- {/* Drop indicator - above */}
- {dropIndicator.showAbove && (
-
- )}
-
-
- );
- })}
-
- {hasConflict && (
-
- {event.address}
-
- )}
-
-
-
- {/* Drop indicator - below */}
- {dropIndicator.showBelow && (
-
- )}
-
-
- )}
-
-
-
-
- {event.organizer && (
-
-
- - {event.name} -
-
- {passesNowFilter(event, getConferenceNow(activeConference)) && (
-
- )}
- {event.link && (
-
-
- By {event.organizer}
- )} - -{timeDisplay}
- - {event.address && ( -
- {event.vibe && (
-
- {event.vibe}
-
- )}
- {event.isFree && (
-
- FREE
-
- )}
-
-
- sheeets.xyz โ side event guide
-
-
- {showClearConfirm ? (
-
-
- Clear all events?
-
-
-
- ) : (
-
- )}
-
-
- ),
- }
-);
-
-type SharedViewMode = 'list' | 'map';
-
-export default function SharedItineraryPage() {
- const params = useParams();
- const code = params.code as string;
-
- const { events, loading: eventsLoading } = useEvents();
- const { itinerary, addMany, toggle: toggleItinerary } = useItinerary();
- const { user } = useAuth();
-
- const [sharedEventIds, setSharedEventIds] = useStateLoading map...
-
-
- );
- }
-
- if (notFound) {
- return (
-
-
- );
- }
-
- return (
- Itinerary not found
-This share link may have expired or is invalid.
- - Browse Events - -
- {/* Header */}
-
-
-
- {/* Copy to itinerary banner */}
- {sharedEvents.length > 0 && (
-
-
- ) : (
-
- );
+export default function SharedItineraryRedirect({ params }: { params: { code: string } }) {
+ redirect(`/plan/s/${params.code}`);
}
diff --git a/src/app/plan/page.tsx b/src/app/plan/page.tsx
new file mode 100644
index 00000000..f9713c5e
--- /dev/null
+++ b/src/app/plan/page.tsx
@@ -0,0 +1,507 @@
+'use client';
+
+import { Suspense, useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+import dynamic from 'next/dynamic';
+import { EventCard } from '@/components/EventCard';
+import { Trash2, Share2, GripVertical, Eye, EyeOff } from 'lucide-react';
+import { useEvents } from '@/hooks/useEvents';
+import { useItinerary } from '@/hooks/useItinerary';
+
+
+import { formatDateLabel } from '@/lib/utils';
+import { trackItineraryClear, trackItineraryReorder } from '@/lib/analytics';
+import type { ETHDenverEvent } from '@/lib/types';
+import { Loading } from '@/components/Loading';
+import { useEventCheckIn } from '@/hooks/useEventCheckIn';
+import { useDragReorder } from '@/hooks/useDragReorder';
+import { useProfile } from '@/hooks/useProfile';
+import { Header } from '@/components/Header';
+import { FilterBar } from '@/components/FilterBar';
+import { SponsorsTicker } from '@/components/SponsorsTicker';
+import { ShareCardModal } from '@/components/ShareCardModal';
+import { useConferenceTabs } from '@/hooks/useConferenceTabs';
+import { useFilters } from '@/hooks/useFilters';
+import { useAdminConfig } from '@/hooks/useAdminConfig';
+import { useConferenceData } from '@/hooks/useConferenceData';
+import { GoogleCalendarButton } from '@/components/GoogleCalendarButton';
+import { getTabConfig } from '@/lib/conferences';
+import { passesNowFilter, applyFilters, computeTagCounts, getConferenceNow } from '@/lib/filters';
+import { resolveItemVariants, getVisitorId } from '@/lib/ab-testing';
+import { TableView } from '@/components/TableView';
+import { useFriends } from '@/hooks/useFriends';
+import { useFriendsItineraries } from '@/hooks/useFriendsItineraries';
+import type { FriendInfo } from '@/lib/types';
+import { STORAGE_KEYS } from '@/lib/storage-keys';
+
+const MapView = dynamic(
+ () => import('@/components/MapView').then((mod) => ({ default: mod.MapView })),
+ {
+ ssr: false,
+ loading: () => (
+
-
-
-
-
-
-
- Shared Itinerary
-- {sharedEvents.length} event{sharedEvents.length !== 1 ? 's' : ''} - {dateRange && ` ยท ${dateRange}`} -
-
- {sharedEvents.length > 0 && (
- <>
- {/* View toggle */}
-
-
- {([
- { mode: 'list' as const, icon: List, label: 'List' },
- { mode: 'map' as const, icon: MapIcon, label: 'Map' },
- ]).map(({ mode, icon: Icon, label }) => (
-
- ))}
-
-
- )}
-
-
- )}
-
- {/* Content */}
- {sharedEvents.length === 0 ? (
-
-
- - Add these events to your itinerary -
- -
-
- ) : viewMode === 'map' ? (
- No matching events found
-- The events in this itinerary may no longer be available. -
- - Browse Events - -
- {dateGroups.map((group) => (
-
-
- ))}
-
-
- )}
-
-
-
-
-
- - {group.label} -
- -
- {group.events.map((event) => {
- const vibeColor = VIBE_COLORS[event.vibe] || VIBE_COLORS['default'];
- const timeDisplay = event.isAllDay
- ? 'All Day'
- : `${event.startTime}${event.endTime ? ` - ${event.endTime}` : ''}`;
-
- return (
-
-
-
- {event.address}
-
- )}
-
-
- );
- })}
- - {event.link ? ( - - {event.name} - - ) : ( - event.name - )} -
- - {event.organizer && ( -By {event.organizer}
- )} - -{timeDisplay}
- - {event.address && ( -
- {event.vibe && (
-
- {event.vibe}
-
- )}
- {event.isFree && (
-
- FREE
-
- )}
-
-
- sheeets.xyz โ side event guide
-
-
+
+ ),
+ }
+);
+
+type ItineraryViewMode = 'list' | 'map' | 'table';
+
+
+function CheckInToast({ result, onDismiss }: { result: { ok: boolean; message: string }; onDismiss: () => void }) {
+ useEffect(() => {
+ const timer = setTimeout(onDismiss, 3000);
+ return () => clearTimeout(timer);
+ }, [onDismiss]);
+
+ return (
+ Loading map...
+
+ {result.message}
+
+ );
+}
+
+function ItineraryContent() {
+ const { events, loading } = useEvents();
+ const { tabs: conferenceTabs } = useConferenceTabs();
+ const { itinerary, toggle: toggleItinerary, clear: clearItinerary, reorder: reorderItinerary, hiddenEvents, toggleHidden } = useItinerary();
+
+ const { profile } = useProfile();
+ const { config } = useAdminConfig();
+ const { friends } = useFriends();
+ const { friendItineraries } = useFriendsItineraries(friends);
+
+ const friendsByEvent = useMemo(() => {
+ const map = new Map
+
+ );
+ }
+
+ return (
+
+ {}}
+ activeConference={activeConference}
+ />
+
+ setFilter('searchQuery', query)}
+ eventCount={itineraryEvents.length}
+ conferenceTabs={conferenceTabs}
+ itineraryCount={itineraryEvents.length}
+ onItineraryToggle={() => {}}
+ trailingButtons={
+ itineraryEvents.length > 0 ? (
+
+
+ ) : viewMode === 'table' ? (
+
+
+ ) : (
+ setShowShareCard(false)}
+ events={itineraryEvents}
+ conferenceName={activeConference || 'My Plan'}
+ displayName={profile?.display_name ?? null}
+ avatarUrl={profile?.avatar_url}
+ hiddenEventIds={hiddenEvents}
+ />
+
+ );
+}
+
+export default function ItineraryPage() {
+ return (
+
+
+
+ ) : undefined
+ }
+ />
+
+ {/* Check-in result toast */}
+ {checkInResult && (
+
+ 
+
+ ) : viewMode === 'map' ? (
+
+ No events in your plan yet
++ Add events from the main page to build your schedule! +
+ + Browse Events + +
+
+ )}
+
+
+ {dateGroups.map((group) => (
+
+
+ ))}
+
+
+
+ {/* Clear button */}
+
+
+
+
+ + {group.label} +
+ +
+ {group.events.map((event) => {
+ const dropIndicator = getDropIndicator(event.id);
+ const isBeingDragged = dragId === event.id;
+
+ return (
+
+ registerItemRef(event.id, el)}
+ {...getItemProps(event.id)}
+ className="relative"
+ >
+ {/* Drop indicator - above */}
+ {dropIndicator.showAbove && (
+
+ )}
+
+
+ );
+ })}
+
+
+
+ {/* Hide/show toggle for friends visibility */}
+
+
+
+ checkInToEvent(eventId, event.name)}
+ checkInLoading={checkInLoading}
+ liveUrgency={passesNowFilter(event, getConferenceNow(activeConference)) ? 'green' : undefined}
+ conference={activeConference}
+ userLocation={userLocation}
+ friendsGoing={friendsByEvent.get(event.id)}
+ />
+
+
+
+
+
+ {/* Drop indicator - below */}
+ {dropIndicator.showBelow && (
+
+ )}
+
+ plan.wtf โ side event guide
+
+
+ {showClearConfirm ? (
+
+
+ Clear all events?
+
+
+
+ ) : (
+
+ )}
+
+
+ ),
+ }
+);
+
+type SharedViewMode = 'list' | 'map';
+
+export default function SharedItineraryPage() {
+ const params = useParams();
+ const code = params.code as string;
+
+ const { events, loading: eventsLoading } = useEvents();
+ const { itinerary, addMany, toggle: toggleItinerary } = useItinerary();
+ const { user } = useAuth();
+
+ const [sharedEventIds, setSharedEventIds] = useStateLoading map...
+
+
+ );
+ }
+
+ if (notFound) {
+ return (
+
+
+ );
+ }
+
+ return (
+ Plan not found
+This share link may have expired or is invalid.
+ + Browse Events + +
+ {/* Header */}
+
+
+
+ {/* Copy to itinerary banner */}
+ {sharedEvents.length > 0 && (
+
+
+ ) : (
+
+ );
+}
diff --git a/src/app/robots.ts b/src/app/robots.ts
index a2b370f2..b5eb3575 100644
--- a/src/app/robots.ts
+++ b/src/app/robots.ts
@@ -5,7 +5,7 @@ export default function robots(): MetadataRoute.Robots {
rules: {
userAgent: '*',
allow: '/',
- disallow: ['/admin', '/itinerary'],
+ disallow: ['/admin', '/plan', '/itinerary'],
},
sitemap: 'https://plan.wtf/sitemap.xml',
};
diff --git a/src/components/EventApp.tsx b/src/components/EventApp.tsx
index d633ab00..bb3b8348 100644
--- a/src/components/EventApp.tsx
+++ b/src/components/EventApp.tsx
@@ -1,6 +1,7 @@
'use client';
import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { useRouter } from 'next/navigation';
import { useEvents } from '@/hooks/useEvents';
import { useFilters } from '@/hooks/useFilters';
import { useItinerary } from '@/hooks/useItinerary';
@@ -239,14 +240,15 @@ export function EventApp({ initialConference, initialEvents }: { initialConferen
checkInToNearbyEvents(events, itinerary, filters.conference);
}, [checkInToNearbyEvents, events, itinerary, filters.conference]);
+ const router = useRouter();
const handleItineraryFilterToggle = useCallback(() => {
if (!authUser) {
trackAuthPrompt('itinerary_button');
setShowSignIn(true);
return;
}
- toggleBool('itineraryOnly');
- }, [authUser, toggleBool]);
+ router.push(`/plan${filters.conference ? `?conf=${encodeURIComponent(filters.conference)}` : ''}`);
+ }, [authUser, router, filters.conference]);
// Theme: read from admin config per-conference and apply
const { setTheme } = useTheme();
@@ -485,7 +487,6 @@ export function EventApp({ initialConference, initialEvents }: { initialConferen
conferenceTabs={conferenceTabs}
itineraryCount={filteredEvents.filter(e => itinerary.has(e.id)).length}
onItineraryToggle={handleItineraryFilterToggle}
- isItineraryActive={filters.itineraryOnly}
/>
diff --git a/src/components/EventCard.tsx b/src/components/EventCard.tsx
index 3c4a5be1..5498fb96 100644
--- a/src/components/EventCard.tsx
+++ b/src/components/EventCard.tsx
@@ -37,6 +37,8 @@ interface EventCardProps {
liveUrgency?: 'green' | 'yellow' | 'red';
userLocation?: { lat: number; lng: number } | null;
onOpenLightbox?: (imageUrl: string, rsvpUrl?: string) => void;
+ /** Compact mode for map popups โ smaller text, no impression tracking */
+ compact?: boolean;
}
function FriendsGoingModal({
@@ -136,6 +138,7 @@ export function EventCard({
liveUrgency,
userLocation,
onOpenLightbox,
+ compact,
}: EventCardProps) {
const [showFriendsModal, setShowFriendsModal] = useState(false);
const [showCheckedInModal, setShowCheckedInModal] = useState(false);
@@ -147,7 +150,7 @@ export function EventCard({
// Track featured event impressions via IntersectionObserver
useEffect(() => {
- if (!event.isFeatured) return;
+ if (!event.isFeatured || compact) return;
const el = cardRef.current;
if (!el || featuredImpressionTracked.current) return;
@@ -174,6 +177,7 @@ export function EventCard({
// Track event impressions via IntersectionObserver (all events in list view)
useEffect(() => {
+ if (compact) return;
const el = cardRef.current;
if (!el || eventImpressionTracked.current) return;
@@ -213,7 +217,7 @@ export function EventCard({
: `${event.startTime}${event.endTime ? ` - ${event.endTime}` : ''}`;
return (
-
+
+
+
+
+
+
+ Shared Plan
++ {sharedEvents.length} event{sharedEvents.length !== 1 ? 's' : ''} + {dateRange && ` ยท ${dateRange}`} +
+
+ {sharedEvents.length > 0 && (
+ <>
+ {/* View toggle */}
+
+
+ {([
+ { mode: 'list' as const, icon: List, label: 'List' },
+ { mode: 'map' as const, icon: MapIcon, label: 'Map' },
+ ]).map(({ mode, icon: Icon, label }) => (
+
+ ))}
+
+
+ )}
+
+
+ )}
+
+ {/* Content */}
+ {sharedEvents.length === 0 ? (
+
+
+ + Add these events to your plan +
+ +
+
+ ) : viewMode === 'map' ? (
+ No matching events found
++ The events in this itinerary may no longer be available. +
+ + Browse Events + +
+ {dateGroups.map((group) => (
+
+
+ ))}
+
+
+ )}
+
+
+
+
+
+ + {group.label} +
+ +
+ {group.events.map((event) => {
+ const vibeColor = VIBE_COLORS[event.vibe] || VIBE_COLORS['default'];
+ const timeDisplay = event.isAllDay
+ ? 'All Day'
+ : `${event.startTime}${event.endTime ? ` - ${event.endTime}` : ''}`;
+
+ return (
+
+
+
+ {event.address}
+
+ )}
+
+
+ );
+ })}
+ + {event.link ? ( + + {event.name} + + ) : ( + event.name + )} +
+ + {event.organizer && ( +By {event.organizer}
+ )} + +{timeDisplay}
+ + {event.address && ( +
+ {event.vibe && (
+
+ {event.vibe}
+
+ )}
+ {event.isFree && (
+
+ FREE
+
+ )}
+
+
+ plan.wtf โ side event guide
+
+
-
+
)}
- {eventFriends &&
+
{event.isFeatured && (
Featured
)}
@@ -302,9 +306,9 @@ export function EventCard({
title="Copy link"
>
{copied ? (
- ;
}
-function formatFriendsText(friends: FriendInfo[]): string {
- const names = friends.map((f) => f.displayName.split(' ')[0]);
- if (names.length === 1) return names[0];
- if (names.length === 2) return `${names[0]} & ${names[1]}`;
- return `${names[0]}, ${names[1]} +${names.length - 2} more`;
-}
-
-function FriendsRow({ friends }: { friends: FriendInfo[] }) {
- if (!friends || friends.length === 0) return null;
- return (
-
-
- {event.link ? (
- {
- trackEventClick(event.name, event.link!);
- trackEvent({
- event_id: event.id,
- event_name: event.name,
- event_type: 'click',
- conference,
- url: event.link!,
- source: 'map-popup',
- });
- }}
- >
- {event.name}
-
- ) : (
- event.name
- )}
-
- {event.organizer && (
- {event.organizer}
-)}
-
- {onItineraryToggle && (
-
-
- {(checkInCount ?? 0) > 0 && (
-
- {checkInCount}
-
- )}
-
-
- {/* Address */}
- {event.address && (
-
-
- )}
-
- {/* Tags row (icons only) */}
- {event.tags.length > 0 && (
-
- {event.tags.map((tag) => (
- {event.note}
- )}
-
- {/* Emoji reactions + Comments inline */}
-
- {onToggleReaction && (
-
{event.tags.map((tag) => (
-
)}
@@ -390,6 +394,7 @@ export function EventCard({
eventId={event.id}
reactions={reactions}
onToggle={onToggleReaction}
+ compact={compact}
/>
)}
-
- );
-}
-
-function CheckedInFriendsRow({ friends }: { friends: FriendInfo[] }) {
- if (!friends || friends.length === 0) return null;
- return (
-
-
- );
-}
-
-function SingleEventContent({
- event,
- isInItinerary = false,
- onItineraryToggle,
- friendsCount,
- friendsGoing,
- checkedInFriends,
- checkInCount,
- reactions,
- onToggleReaction,
- commentCount,
- conference,
- onCheckIn,
- checkInLoading,
- liveUrgency,
-}: {
- event: ETHDenverEvent;
- isInItinerary?: boolean;
- onItineraryToggle?: (eventId: string) => void;
- friendsCount?: number;
- friendsGoing?: FriendInfo[];
- checkedInFriends?: FriendInfo[];
- checkInCount?: number;
- reactions?: { emoji: ReactionEmoji; count: number; reacted: boolean }[];
- onToggleReaction?: (eventId: string, emoji: ReactionEmoji) => void;
- commentCount?: number;
- conference?: string;
- onCheckIn?: (eventId: string) => void;
- checkInLoading?: boolean;
- liveUrgency?: 'green' | 'yellow' | 'red';
-}) {
- const timeDisplay = event.isAllDay
- ? 'All Day'
- : `${event.startTime}${event.endTime ? ` - ${event.endTime}` : ''}`;
-
- return (
-
- {/* Left: cover image */}
- {event.link &&
- );
-}
-
export function EventPopup({
event,
latitude,
@@ -273,22 +78,25 @@ export function EventPopup({
offset={16}
className={`map-popup${event.isFeatured ? ' map-popup-featured' : ''}`}
>
-
- {/* Top row: Name + Star */}
-
-
- )}
-
- {/* Tags row (icons only) */}
- {event.tags.length > 0 && (
-
-
-
-
- {/* Date + Time */}
-
-
- {onItineraryToggle && (
- - {event.link ? ( - { - trackEventClick(event.name, event.link!); - trackEvent({ - event_id: event.id, - event_name: event.name, - event_type: 'click', - conference, - url: event.link!, - source: 'map-popup', - }); - }} - > - {event.name} - - ) : ( - event.name - )} -
- {event.organizer && ( -{event.organizer}
-)} -
-
-
- {/* Address */}
- {event.address && (
-
-
- {event.tags.map((tag) => (
-
- )}
-
- {/* Friends going */}
- {friendsGoing && {event.note}
- )} - - {/* Emoji reactions + Comments inline */} -
- {onToggleReaction && (
-
-
- {/* Check In button (live events only) */}
- {liveUrgency && onCheckIn && (
-
- )}
-
+
);
}
@@ -305,6 +113,8 @@ export function MultiEventPopup({
friendsByEvent,
checkedInFriendsByEvent,
checkInCounts,
+ reactionsByEvent,
+ onToggleReaction,
commentCounts,
}: MultiEventPopupProps) {
return (
@@ -395,8 +205,6 @@ export function MultiEventPopup({
))}
- My Itinerary{' '}
+ My Plan{' '}
({itineraryEvents.length} event
{itineraryEvents.length !== 1 ? 's' : ''})
@@ -176,7 +176,7 @@ export function ItineraryPanel({
{itineraryEvents.length > 0 && (
<>
- No events in your itinerary yet
+ No events in your plan yet
Tap + on any event to add it to your plan!
@@ -242,8 +242,8 @@ export function ItineraryPanel({
{/* Branding header (visible in PNG) */}
๐
- sheeets.xyz
- โ My Itinerary
+ plan.wtf
+ โ My Plan
{/* Conflict warning */}
@@ -400,7 +400,7 @@ export function ItineraryPanel({
{/* Footer in PNG */}
- sheeets.xyz โ side event guide
+ plan.wtf โ side event guide
+ {([
+ { mode: 'gallery' as const, label: 'Flyers' },
+ { mode: 'text' as const, label: 'Text Only' },
+ ]).map(({ mode, label }) => (
+
+ ))}
+
+
{/* Preview area */}
{generating && !previewUrl ? (
@@ -373,6 +455,8 @@ export function ShareCardModal({
conferenceName={cardTitle || conferenceName}
displayName={displayName}
avatarUrl={avatarUrl}
+ flyerImages={flyerImages}
+ mode={cardMode}
/>
,
document.body
diff --git a/src/components/ShareCardTemplate.tsx b/src/components/ShareCardTemplate.tsx
index a1e05d11..49205802 100644
--- a/src/components/ShareCardTemplate.tsx
+++ b/src/components/ShareCardTemplate.tsx
@@ -5,17 +5,21 @@ import type { ETHDenverEvent } from '@/lib/types';
import { formatDateLabel } from '@/lib/utils';
import { sortByStartTime } from '@/lib/time-parse';
+export type ShareCardMode = 'gallery' | 'text';
+
interface ShareCardTemplateProps {
events: ETHDenverEvent[];
conferenceName: string;
displayName: string | null;
avatarUrl?: string | null;
+ flyerImages?: Map;
+ mode?: ShareCardMode;
}
const MAX_EVENTS = 15;
const ShareCardTemplate = forwardRef(
- function ShareCardTemplate({ events, conferenceName, displayName, avatarUrl }, ref) {
+ function ShareCardTemplate({ events, conferenceName, displayName, avatarUrl, flyerImages, mode = 'gallery' }, ref) {
const dateGroups = useMemo(() => {
const groupMap = new Map();
for (const event of events) {
@@ -32,10 +36,8 @@ const ShareCardTemplate = forwardRef(
}));
}, [events]);
- // Truncate to MAX_EVENTS using reduce to avoid mutable variables
const { truncatedGroups, truncated, remainingCount } = useMemo(() => {
const remaining = events.length > MAX_EVENTS ? events.length - MAX_EVENTS : 0;
-
const result = dateGroups.reduce<{
groups: typeof dateGroups;
count: number;
@@ -55,7 +57,6 @@ const ShareCardTemplate = forwardRef(
},
{ groups: [], count: 0, isTruncated: false }
);
-
return {
truncatedGroups: result.groups,
truncated: result.isTruncated,
@@ -78,40 +79,19 @@ const ShareCardTemplate = forwardRef(
}}
>
{/* Header */}
-
+
{avatarUrl ? (
) : displayName ? (
{
+ return new Promise((resolve, reject) => {
+ // Already loaded
+ if (typeof google !== 'undefined' && google.accounts?.oauth2) {
+ resolve();
+ return;
+ }
+
+ // Already loading
+ const existing = document.querySelector(`script[src="${GIS_SCRIPT_URL}"]`);
+ if (existing) {
+ existing.addEventListener('load', () => resolve());
+ existing.addEventListener('error', () => reject(new Error('Failed to load Google Identity Services')));
+ return;
+ }
+
+ const script = document.createElement('script');
+ script.src = GIS_SCRIPT_URL;
+ script.async = true;
+ script.defer = true;
+ script.onload = () => resolve();
+ script.onerror = () => reject(new Error('Failed to load Google Identity Services'));
+ document.head.appendChild(script);
+ });
+}
+
+export function useGoogleCalendarExport() {
+ const [status, setStatus] = useState('idle');
+ const [result, setResult] = useState(null);
+ const [errorMessage, setErrorMessage] = useState(null);
+ const tokenClientRef = useRef(null);
+
+ const exportToGoogleCalendar = useCallback(
+ async (events: ETHDenverEvent[], timezone: string) => {
+ if (!GOOGLE_CLIENT_ID) {
+ setStatus('error');
+ setErrorMessage('Google Calendar integration is not configured');
+ trackGoogleCalendarError('missing_client_id');
+ return;
+ }
+
+ if (events.length === 0) {
+ setStatus('error');
+ setErrorMessage('No events to export');
+ return;
+ }
+
+ setStatus('authorizing');
+ setErrorMessage(null);
+ setResult(null);
+
+ try {
+ // Load GIS script lazily
+ await loadGISScript();
+ } catch {
+ setStatus('error');
+ setErrorMessage('Could not connect to Google. Please try again.');
+ trackGoogleCalendarError('gis_load_failed');
+ return;
+ }
+
+ // Create token client if not already created
+ if (!tokenClientRef.current) {
+ tokenClientRef.current = google.accounts.oauth2.initTokenClient({
+ client_id: GOOGLE_CLIENT_ID,
+ scope: CALENDAR_SCOPE,
+ callback: () => {
+ // Handled in the Promise below
+ },
+ });
+ }
+
+ // Request access token โ wraps the callback in a promise
+ try {
+ const tokenResponse = await new Promise(
+ (resolve, reject) => {
+ // Re-initialize to set the correct callback for this request
+ tokenClientRef.current = google.accounts.oauth2.initTokenClient({
+ client_id: GOOGLE_CLIENT_ID!,
+ scope: CALENDAR_SCOPE,
+ callback: (response) => {
+ if (response.error) {
+ reject(new Error(response.error_description || response.error));
+ } else {
+ resolve(response);
+ }
+ },
+ error_callback: (error) => {
+ reject(new Error(error.message || 'Authorization failed'));
+ },
+ });
+
+ tokenClientRef.current!.requestAccessToken({ prompt: 'consent' });
+ }
+ );
+
+ // Got the token โ now export events
+ setStatus('exporting');
+
+ const response = await fetch('/api/google-calendar/export', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ accessToken: tokenResponse.access_token,
+ events,
+ timezone,
+ }),
+ });
+
+ if (!response.ok) {
+ const errorData = await response.json().catch(() => ({ error: 'Unknown error' }));
+ throw new Error(errorData.error || `HTTP ${response.status}`);
+ }
+
+ const insertResult: InsertResult = await response.json();
+ setResult(insertResult);
+
+ if (insertResult.failed > 0 && insertResult.inserted === 0) {
+ setStatus('error');
+ setErrorMessage(`Failed to add events. ${insertResult.errors[0]?.error || 'Please try again.'}`);
+ trackGoogleCalendarError('all_failed');
+ } else {
+ setStatus('success');
+ trackGoogleCalendarExport(insertResult.inserted, insertResult.failed);
+ }
+ } catch (err) {
+ const msg = err instanceof Error ? err.message : 'Authorization failed';
+
+ // User closed popup or denied consent
+ if (msg.includes('popup_closed') || msg.includes('access_denied')) {
+ setStatus('idle');
+ return;
+ }
+
+ setStatus('error');
+ setErrorMessage(msg);
+ trackGoogleCalendarError(msg);
+ }
+ },
+ []
+ );
+
+ const reset = useCallback(() => {
+ setStatus('idle');
+ setResult(null);
+ setErrorMessage(null);
+ }, []);
+
+ return {
+ status,
+ result,
+ errorMessage,
+ exportToGoogleCalendar,
+ reset,
+ };
+}
diff --git a/src/lib/analytics.ts b/src/lib/analytics.ts
index d5eed98b..e476580e 100644
--- a/src/lib/analytics.ts
+++ b/src/lib/analytics.ts
@@ -172,6 +172,12 @@ export const trackAdClick = (placement: string, url: string) =>
export const trackAdImpression = (placement: string) =>
track('ad_impression', { placement });
+// Google Calendar Export
+export const trackGoogleCalendarExport = (inserted: number, failed: number) =>
+ track('google_calendar_export', { inserted, failed });
+export const trackGoogleCalendarError = (error: string) =>
+ track('google_calendar_error', { error });
+
// A/B Testing (GA4 dual-tracking -- events also tracked in Supabase via /api/ab/track)
export const trackABImpression = (testId: string, variantId: string) =>
track('ab_impression', { test_id: testId, variant_id: variantId });
diff --git a/src/lib/calendar.ts b/src/lib/calendar.ts
index 50dbe3c6..8d67d457 100644
--- a/src/lib/calendar.ts
+++ b/src/lib/calendar.ts
@@ -1,6 +1,6 @@
import type { ETHDenverEvent } from './types';
-function parseTime(t: string): { hour: number; minute: number } | null {
+export function parseTime(t: string): { hour: number; minute: number } | null {
if (!t) return null;
const normalized = t.toLowerCase().trim();
if (normalized === 'all day' || normalized === 'tbd') return null;
diff --git a/src/lib/google-calendar.ts b/src/lib/google-calendar.ts
new file mode 100644
index 00000000..55059103
--- /dev/null
+++ b/src/lib/google-calendar.ts
@@ -0,0 +1,168 @@
+/**
+ * Server-side utility for inserting events into Google Calendar via REST API.
+ * Uses raw fetch โ no googleapis npm package needed.
+ */
+
+import type { ETHDenverEvent } from './types';
+import { parseTime } from './calendar';
+
+const CALENDAR_API = 'https://www.googleapis.com/calendar/v3/calendars/primary/events';
+
+interface GoogleCalendarEvent {
+ summary: string;
+ description?: string;
+ location?: string;
+ start: { dateTime?: string; date?: string; timeZone?: string };
+ end: { dateTime?: string; date?: string; timeZone?: string };
+ source?: { title: string; url: string };
+}
+
+export interface InsertResult {
+ inserted: number;
+ failed: number;
+ errors: Array<{ eventName: string; error: string }>;
+}
+
+/**
+ * Build a Google Calendar event object from an ETHDenverEvent.
+ */
+export function buildCalendarEvent(
+ event: ETHDenverEvent,
+ timezone: string
+): GoogleCalendarEvent {
+ const calEvent: GoogleCalendarEvent = {
+ summary: event.name,
+ start: {},
+ end: {},
+ };
+
+ // Description
+ const details: string[] = [];
+ if (event.organizer) details.push(`Organized by: ${event.organizer}`);
+ if (event.link) details.push(`RSVP: ${event.link}`);
+ if (event.cost && !event.isFree) details.push(`Cost: ${event.cost}`);
+ if (event.isFree) details.push('Free event');
+ if (event.tags?.length) details.push(`Tags: ${event.tags.join(', ')}`);
+ if (details.length > 0) calEvent.description = details.join('\n');
+
+ // Location
+ if (event.address) calEvent.location = event.address;
+
+ // Source link
+ if (event.link) {
+ calEvent.source = { title: 'RSVP', url: event.link };
+ }
+
+ // Date/time handling
+ if (event.isAllDay && event.dateISO) {
+ // All-day event: use date-only format
+ calEvent.start = { date: event.dateISO };
+ const nextDay = new Date(event.dateISO + 'T00:00:00');
+ nextDay.setDate(nextDay.getDate() + 1);
+ calEvent.end = { date: nextDay.toISOString().slice(0, 10) };
+ } else if (event.dateISO) {
+ const startTime = parseTime(event.startTime);
+ if (startTime) {
+ const startISO = formatDateTime(event.dateISO, startTime);
+ calEvent.start = { dateTime: startISO, timeZone: timezone };
+
+ const endTime = parseTime(event.endTime);
+ const endParsed = endTime || {
+ hour: startTime.hour + 1,
+ minute: startTime.minute,
+ };
+ const endISO = formatDateTime(event.dateISO, endParsed);
+ calEvent.end = { dateTime: endISO, timeZone: timezone };
+ } else {
+ // No parseable start time โ treat as all-day
+ calEvent.start = { date: event.dateISO };
+ const nextDay = new Date(event.dateISO + 'T00:00:00');
+ nextDay.setDate(nextDay.getDate() + 1);
+ calEvent.end = { date: nextDay.toISOString().slice(0, 10) };
+ }
+ }
+
+ return calEvent;
+}
+
+/**
+ * Format a dateISO + time into an ISO 8601 datetime string (without timezone offset).
+ * Google Calendar will interpret using the provided timeZone.
+ */
+function formatDateTime(
+ dateISO: string,
+ time: { hour: number; minute: number }
+): string {
+ const h = time.hour.toString().padStart(2, '0');
+ const m = time.minute.toString().padStart(2, '0');
+ return `${dateISO}T${h}:${m}:00`;
+}
+
+/**
+ * Insert multiple events into the user's primary Google Calendar.
+ * Processes events sequentially to avoid rate limits.
+ */
+export async function insertEvents(
+ accessToken: string,
+ events: ETHDenverEvent[],
+ timezone: string
+): Promise {
+ const result: InsertResult = { inserted: 0, failed: 0, errors: [] };
+
+ for (const event of events) {
+ const calEvent = buildCalendarEvent(event, timezone);
+
+ try {
+ const response = await fetch(CALENDAR_API, {
+ method: 'POST',
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(calEvent),
+ });
+
+ if (response.ok) {
+ result.inserted++;
+ } else if (response.status === 429) {
+ // Rate limited โ wait and retry once
+ await delay(1000);
+ const retry = await fetch(CALENDAR_API, {
+ method: 'POST',
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(calEvent),
+ });
+
+ if (retry.ok) {
+ result.inserted++;
+ } else {
+ const errorBody = await retry.text().catch(() => 'Unknown error');
+ result.failed++;
+ result.errors.push({ eventName: event.name, error: `Rate limited: ${errorBody}` });
+ }
+ } else {
+ const errorBody = await response.text().catch(() => 'Unknown error');
+ result.failed++;
+ result.errors.push({
+ eventName: event.name,
+ error: `HTTP ${response.status}: ${errorBody}`,
+ });
+ }
+ } catch (err) {
+ result.failed++;
+ result.errors.push({
+ eventName: event.name,
+ error: err instanceof Error ? err.message : 'Network error',
+ });
+ }
+ }
+
+ return result;
+}
+
+function delay(ms: number): Promise {
+ return new Promise((resolve) => setTimeout(resolve, ms));
+}
diff --git a/src/types/google-identity.d.ts b/src/types/google-identity.d.ts
new file mode 100644
index 00000000..cf12cf25
--- /dev/null
+++ b/src/types/google-identity.d.ts
@@ -0,0 +1,30 @@
+/**
+ * Type declarations for Google Identity Services (GIS) OAuth2 token model.
+ * @see https://developers.google.com/identity/oauth2/web/reference/js-reference
+ */
+
+declare namespace google.accounts.oauth2 {
+ interface TokenClientConfig {
+ client_id: string;
+ scope: string;
+ callback: (response: TokenResponse) => void;
+ error_callback?: (error: { type: string; message: string }) => void;
+ prompt?: '' | 'none' | 'consent' | 'select_account';
+ }
+
+ interface TokenResponse {
+ access_token: string;
+ expires_in: number;
+ scope: string;
+ token_type: string;
+ error?: string;
+ error_description?: string;
+ error_uri?: string;
+ }
+
+ interface TokenClient {
+ requestAccessToken(overrideConfig?: { prompt?: string; scope?: string }): void;
+ }
+
+ function initTokenClient(config: TokenClientConfig): TokenClient;
+}
{displayName.charAt(0).toUpperCase()}
@@ -119,13 +99,8 @@ const ShareCardTemplate = forwardRef(
) : null}
))}
- {/* Truncation notice */}
{truncated && remainingCount > 0 && (
{conferenceName}
@@ -133,14 +108,7 @@ const ShareCardTemplate = forwardRef(
{/* Amber separator */}
-
+
{/* Events block */}
@@ -149,90 +117,119 @@ const ShareCardTemplate = forwardRef(
{/* Day header */}
+ )}
{group.label}
- {/* Event rows */}
- {group.events.map((event) => {
- const timeDisplay = event.isAllDay
- ? 'All Day'
- : `${event.startTime}${event.endTime ? ` - ${event.endTime}` : ''}`;
-
- return (
-
- {/* Time */}
-
+ );
+ })}
+
- {timeDisplay}
-
-
- {/* Event details */}
-
+ {mode === 'gallery' ? (
+ /* Gallery grid */
+
- );
- })}
+
+ {group.events.map((event) => {
+ const flyerDataUrl = flyerImages?.get(event.id);
+ const timeDisplay = event.isAllDay
+ ? 'All Day'
+ : `${event.startTime || ''}${event.endTime ? ` - ${event.endTime}` : ''}`;
+
+ return (
+
+ ) : (
+ /* Text-only list */
+
+ 
+ ) : (
+
+ )}
+
+ );
+ })}
+
+
+ {flyerDataUrl ? (
+
+ {event.name}
+
+ {timeDisplay && (
+
+ {timeDisplay}
+
+ )}
+
+ {group.events.map((event) => {
+ const timeDisplay = event.isAllDay
+ ? 'All Day'
+ : `${event.startTime || ''}${event.endTime ? ` - ${event.endTime}` : ''}`;
+
+ return (
-
- {event.name}
-
- {event.address && (
- {event.address}
+ {timeDisplay}
+
+
+
- )}
-
+ {event.name}
+
+ {event.address && (
+
+ {event.address}
+
+ )}
... and {remainingCount} more event{remainingCount !== 1 ? 's' : ''}
@@ -241,22 +238,11 @@ const ShareCardTemplate = forwardRef(
{/* Footer */}
-
+
diff --git a/src/hooks/useDragReorder.ts b/src/hooks/useDragReorder.ts
index 00532635..a119bee1 100644
--- a/src/hooks/useDragReorder.ts
+++ b/src/hooks/useDragReorder.ts
@@ -71,10 +71,12 @@ export function useDragReorder({ onReorder }: UseDragReorderOptions) {
const handleDragStart = useCallback((e: React.DragEvent, id: string) => {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', id);
- // Set a small drag image offset
+ // Use the full item element as drag image instead of the tiny handle
if (e.dataTransfer.setDragImage) {
- const target = e.currentTarget as HTMLElement;
- e.dataTransfer.setDragImage(target, 20, 20);
+ const itemEl = itemRefs.current.get(id);
+ if (itemEl) {
+ e.dataTransfer.setDragImage(itemEl, 20, 20);
+ }
}
setDragState({ dragId: id, overId: null, position: 'below' });
}, []);
diff --git a/src/hooks/useGoogleCalendarExport.ts b/src/hooks/useGoogleCalendarExport.ts
new file mode 100644
index 00000000..62e5ad26
--- /dev/null
+++ b/src/hooks/useGoogleCalendarExport.ts
@@ -0,0 +1,172 @@
+'use client';
+
+import { useState, useCallback, useRef } from 'react';
+import type { ETHDenverEvent } from '@/lib/types';
+import type { InsertResult } from '@/lib/google-calendar';
+import { trackGoogleCalendarExport, trackGoogleCalendarError } from '@/lib/analytics';
+
+///