+2 -2

src/lib/cards/_base/BaseCard/BaseCard.svelte

reviewed

··· 45 45 draggable={false} 46 46 class={[ 47 47 fillPage 48 48 - ? 'card group/card selection:bg-accent-600/50 focus-within:outline-accent-500 @container/card relative isolate z-0 h-full w-full outline-offset-2 transition-all duration-200 focus-within:outline-2' 49 49 - : 'card group/card selection:bg-accent-600/50 focus-within:outline-accent-500 @container/card absolute isolate z-0 rounded-3xl outline-offset-2 transition-all duration-200 focus-within:outline-2', 48 48 + ? 'card group/card selection:bg-accent-600/50 focus-within:outline-accent-500 @container/card relative isolate z-0 h-full w-full outline-offset-2 transition-[outline] duration-200 focus-within:outline-2' 49 49 + : 'card group/card selection:bg-accent-600/50 focus-within:outline-accent-500 @container/card absolute isolate z-0 rounded-3xl outline-offset-2 transition-[outline] duration-200 focus-within:outline-2', 50 50 !fillPage ? (color ? (colors[color] ?? colors.accent) : colors.base) : '', 51 51 color !== 'accent' && item.color !== 'base' && item.color !== 'transparent' ? color : '', 52 52 showOutline ? 'outline-2' : '',

+7 -15

src/lib/cards/core/MapCard/Map.svelte

reviewed

··· 5 5 6 6 let { item = $bindable(), isEditing = false }: { item: Item; isEditing?: boolean } = $props(); 7 7 8 8 - let center = $state({ lng: parseFloat(item.cardData.lon), lat: parseFloat(item.cardData.lat) }); 8 8 + const center = { lng: parseFloat(item.cardData.lon), lat: parseFloat(item.cardData.lat) }; 9 9 let showAttribution = $state(false); 10 10 let map: maplibregl.Map | undefined = $state(); 11 11 12 12 - const fixedCenter = { lng: parseFloat(item.cardData.lon), lat: parseFloat(item.cardData.lat) }; 13 13 - 14 12 function handleZoom() { 15 15 - if (!isEditing && map) { 16 16 - map.setCenter(fixedCenter); 13 13 + if (map) { 14 14 + map.setCenter(center); 17 15 } 18 16 } 19 19 - 20 20 - $effect(() => { 21 21 - if (!isEditing && map) { 22 22 - map.getCanvas().style.touchAction = 'pan-x pan-y'; 23 23 - } 24 24 - }); 25 17 </script> 26 18 27 19 <div ··· 38 30 zoom={item.cardData.zoom} 39 31 {center} 40 32 attributionControl={false} 41 41 - dragPan={isEditing} 33 33 + dragPan={false} 42 34 dragRotate={false} 43 35 keyboard={false} 44 44 - touchZoomRotate={true} 45 45 - scrollZoom={true} 36 36 + touchZoomRotate={isEditing} 37 37 + scrollZoom={isEditing} 46 38 boxZoom={false} 47 39 pitchWithRotate={false} 48 40 touchPitch={false} ··· 50 42 > 51 43 <Projection type="globe" /> 52 44 53 53 - <Marker bind:lnglat={center}> 45 45 + <Marker lnglat={center}> 54 46 {#snippet content()} 55 47 <div class="from-accent-400 size-10 rounded-full bg-radial via-transparent p-3"> 56 48 <div class="bg-accent-500 size-4 rounded-full ring-2 ring-white"></div>

+1 -1

src/lib/cards/social/EventCard/EventCard.svelte

reviewed

··· 91 91 92 92 let eventUrl = $derived(() => { 93 93 if (parsedUri) { 94 94 - return `https://blento.app/${parsedUri.repo}/events/${parsedUri.rkey}`; 94 94 + return `https://atmo.rsvp/p/${parsedUri.repo}/e/${parsedUri.rkey}`; 95 95 } 96 96 return '#'; 97 97 });

+22 -8

src/lib/cards/social/UpcomingEventsCard/UpcomingEventsCard.svelte

reviewed

··· 1 1 <script lang="ts"> 2 2 import { onMount } from 'svelte'; 3 3 - import { Badge } from '@foxui/core'; 3 3 + import { Badge, Button, Modal } from '@foxui/core'; 4 4 import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context'; 5 5 import type { ContentComponentProps } from '../../types'; 6 6 import { UpcomingEventsCardDefinition } from '.'; 7 7 import type { EventData } from '../EventCard'; 8 8 import { user } from '$lib/atproto'; 9 9 import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte'; 10 10 - import * as TID from '@atcute/tid'; 10 10 + let showCreateModal = $state(false); 11 11 12 12 let { item }: ContentComponentProps = $props(); 13 13 ··· 143 143 /> 144 144 </svg> 145 145 </button> 146 146 - <a 147 147 - href="/{handle}/events/{TID.now()}/edit" 148 148 - target="_blank" 146 146 + <button 147 147 + onclick={() => (showCreateModal = true)} 149 148 title="Create new event" 150 150 - class="bg-base-100 hover:bg-base-200 dark:bg-base-800 dark:hover:bg-base-700 accent:bg-accent-400/30 accent:hover:bg-accent-400/50 text-base-700 dark:text-base-300 z-50 flex size-7 items-center justify-center rounded-lg transition-colors" 149 149 + class="bg-base-100 hover:bg-base-200 dark:bg-base-800 dark:hover:bg-base-700 accent:bg-accent-400/30 accent:hover:bg-accent-400/50 text-base-700 dark:text-base-300 z-50 flex size-7 cursor-pointer items-center justify-center rounded-lg transition-colors" 151 150 > 152 151 <svg 153 152 xmlns="http://www.w3.org/2000/svg" ··· 159 158 > 160 159 <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> 161 160 </svg> 162 162 - </a> 161 161 + </button> 163 162 </div> 164 163 {/if} 165 164 </div> ··· 170 169 <div class="flex flex-col gap-2"> 171 170 {#each events as event (event.rkey)} 172 171 <a 173 173 - href="https://blento.app/{did}/events/{event.rkey}" 172 172 + href="https://atmo.rsvp/p/{did}/e/{event.rkey}" 174 173 target="_blank" 175 174 class="hover:bg-base-100 dark:hover:bg-base-800 accent:hover:bg-accent-400/20 flex flex-col gap-1 rounded-lg p-2 transition-colors" 176 175 use:qrOverlay={{ context: { title: event.name } }} ··· 252 251 {/if} 253 252 </div> 254 253 </div> 254 254 + 255 255 + <Modal bind:open={showCreateModal}> 256 256 + <div class="flex flex-col gap-4"> 257 257 + <h3 class="text-lg font-semibold">Create Event</h3> 258 258 + <p class="text-base-600 dark:text-base-400 text-sm"> 259 259 + Create events on atmo.rsvp, these events will show up here (might take a few minutes). 260 260 + </p> 261 261 + <div class="flex justify-end gap-2"> 262 262 + <Button variant="ghost" onclick={() => (showCreateModal = false)}>Cancel</Button> 263 263 + <Button href="https://atmo.rsvp" target="_blank" onclick={() => (showCreateModal = false)}> 264 264 + Go to atmo.rsvp 265 265 + </Button> 266 266 + </div> 267 267 + </div> 268 268 + </Modal>

+1 -1

src/lib/cards/social/UpcomingRsvpsCard/UpcomingRsvpsCard.svelte

reviewed

··· 85 85 <div class="flex flex-col gap-2"> 86 86 {#each rsvps as rsvp, i (`${rsvp.eventUri}-${i}`)} 87 87 <a 88 88 - href="https://blento.app/{rsvp.hostDid}/events/{rsvp.rkey}" 88 88 + href="https://atmo.rsvp/p/{rsvp.hostDid}/e/{rsvp.rkey}" 89 89 target="_blank" 90 90 class="hover:bg-base-100 dark:hover:bg-base-800 accent:hover:bg-accent-400/20 flex flex-col gap-1 rounded-lg p-2 transition-colors" 91 91 use:qrOverlay={{ context: { title: rsvp.event.name } }}

-28

src/routes/[[actor=actor]]/events/+layout.server.ts

reviewed

··· 1 1 - import { getRecord } from '$lib/atproto/methods.js'; 2 2 - import type { Did } from '@atcute/lexicons'; 3 3 - import { getActor } from '$lib/actor.js'; 4 4 - 5 5 - export async function load({ params, platform, request }) { 6 6 - const did = await getActor({ request, paramActor: params.actor, platform }); 7 7 - 8 8 - if (!did) return { accentColor: undefined, baseColor: undefined }; 9 9 - 10 10 - try { 11 11 - const publication = await getRecord({ 12 12 - did: did as Did, 13 13 - collection: 'site.standard.publication', 14 14 - rkey: 'blento.self' 15 15 - }); 16 16 - 17 17 - const preferences = publication?.value?.preferences as 18 18 - | { accentColor?: string; baseColor?: string } 19 19 - | undefined; 20 20 - 21 21 - return { 22 22 - accentColor: preferences?.accentColor, 23 23 - baseColor: preferences?.baseColor 24 24 - }; 25 25 - } catch { 26 26 - return { accentColor: undefined, baseColor: undefined }; 27 27 - } 28 28 - }

-9

src/routes/[[actor=actor]]/events/+layout.svelte

reviewed

··· 1 1 - <script lang="ts"> 2 2 - import ThemeScript from '$lib/website/ThemeScript.svelte'; 3 3 - 4 4 - let { data, children } = $props(); 5 5 - </script> 6 6 - 7 7 - <ThemeScript accentColor={data.accentColor} baseColor={data.baseColor} /> 8 8 - 9 9 - {@render children()}

-71

src/routes/[[actor=actor]]/events/+page.server.ts

reviewed

··· 1 1 - import { error } from '@sveltejs/kit'; 2 2 - import type { EventData } from '$lib/cards/social/EventCard'; 3 3 - import { getBlentoOrBskyProfile, listRecords } from '$lib/atproto/methods.js'; 4 4 - import { createCache, type CachedProfile } from '$lib/cache'; 5 5 - import type { Did } from '@atcute/lexicons'; 6 6 - import { getActor } from '$lib/actor.js'; 7 7 - 8 8 - export async function load({ params, platform, request }) { 9 9 - const cache = createCache(platform); 10 10 - 11 11 - const did = await getActor({ request, paramActor: params.actor, platform }); 12 12 - 13 13 - if (!did) { 14 14 - throw error(404, 'Events not found'); 15 15 - } 16 16 - 17 17 - try { 18 18 - // Try cache first 19 19 - if (cache) { 20 20 - const cached = await cache.getJSON<{ 21 21 - events: (EventData & { rkey: string })[]; 22 22 - did: string; 23 23 - hostProfile: CachedProfile | null; 24 24 - }>('events', did); 25 25 - if (cached) return cached; 26 26 - } 27 27 - 28 28 - const [records, hostProfile] = await Promise.all([ 29 29 - listRecords({ 30 30 - did: did as Did, 31 31 - collection: 'community.lexicon.calendar.event', 32 32 - limit: 100 33 33 - }), 34 34 - cache 35 35 - ? cache.getProfile(did as Did).catch(() => null) 36 36 - : getBlentoOrBskyProfile({ did: did as Did }) 37 37 - .then( 38 38 - (p): CachedProfile => ({ 39 39 - did: p.did as string, 40 40 - handle: p.handle as string, 41 41 - displayName: p.displayName as string | undefined, 42 42 - avatar: p.avatar as string | undefined, 43 43 - hasBlento: p.hasBlento, 44 44 - url: p.url 45 45 - }) 46 46 - ) 47 47 - .catch(() => null) 48 48 - ]); 49 49 - 50 50 - const events = records.map((r) => ({ 51 51 - ...(r.value as EventData), 52 52 - rkey: r.uri.split('/').pop() as string 53 53 - })); 54 54 - 55 55 - const result = { 56 56 - events, 57 57 - did, 58 58 - hostProfile: hostProfile ?? null 59 59 - }; 60 60 - 61 61 - // Cache the result 62 62 - if (cache) { 63 63 - await cache.putJSON('events', did, result).catch(() => {}); 64 64 - } 65 65 - 66 66 - return result; 67 67 - } catch (e) { 68 68 - if (e && typeof e === 'object' && 'status' in e) throw e; 69 69 - throw error(404, 'Events not found'); 70 70 - } 71 71 - }

-232

src/routes/[[actor=actor]]/events/+page.svelte

reviewed

··· 1 1 - <script lang="ts"> 2 2 - import type { EventData } from '$lib/cards/social/EventCard'; 3 3 - import { getCDNImageBlobUrl } from '$lib/atproto'; 4 4 - import { user } from '$lib/atproto/auth.svelte'; 5 5 - import { Avatar as FoxAvatar, Badge, Button, toast } from '@foxui/core'; 6 6 - import { page } from '$app/state'; 7 7 - import Avatar from 'svelte-boring-avatars'; 8 8 - import * as TID from '@atcute/tid'; 9 9 - import { goto } from '$app/navigation'; 10 10 - 11 11 - let { data } = $props(); 12 12 - 13 13 - let events: (EventData & { rkey: string })[] = $derived(data.events); 14 14 - let did: string = $derived(data.did); 15 15 - let hostProfile = $derived(data.hostProfile); 16 16 - 17 17 - let hostName = $derived(hostProfile?.displayName || hostProfile?.handle || did); 18 18 - let hostUrl = $derived( 19 19 - hostProfile?.url ?? `https://bsky.app/profile/${hostProfile?.handle || did}` 20 20 - ); 21 21 - 22 22 - function formatDate(dateStr: string): string { 23 23 - const date = new Date(dateStr); 24 24 - const options: Intl.DateTimeFormatOptions = { 25 25 - weekday: 'short', 26 26 - month: 'short', 27 27 - day: 'numeric' 28 28 - }; 29 29 - if (date.getFullYear() !== new Date().getFullYear()) { 30 30 - options.year = 'numeric'; 31 31 - } 32 32 - return date.toLocaleDateString('en-US', options); 33 33 - } 34 34 - 35 35 - function formatTime(dateStr: string): string { 36 36 - return new Date(dateStr).toLocaleTimeString('en-US', { 37 37 - hour: 'numeric', 38 38 - minute: '2-digit' 39 39 - }); 40 40 - } 41 41 - 42 42 - function getModeLabel(mode: string): string { 43 43 - if (mode.includes('virtual')) return 'Virtual'; 44 44 - if (mode.includes('hybrid')) return 'Hybrid'; 45 45 - if (mode.includes('inperson')) return 'In-Person'; 46 46 - return 'Event'; 47 47 - } 48 48 - 49 49 - function getModeColor(mode: string): 'cyan' | 'purple' | 'amber' | 'secondary' { 50 50 - if (mode.includes('virtual')) return 'cyan'; 51 51 - if (mode.includes('hybrid')) return 'purple'; 52 52 - if (mode.includes('inperson')) return 'amber'; 53 53 - return 'secondary'; 54 54 - } 55 55 - 56 56 - function getLocationString(locations: EventData['locations']): string | undefined { 57 57 - if (!locations || locations.length === 0) return undefined; 58 58 - 59 59 - const loc = locations.find((v) => v.$type === 'community.lexicon.location.address'); 60 60 - if (!loc) return undefined; 61 61 - 62 62 - const flat = loc as Record<string, unknown>; 63 63 - const nested = loc.address; 64 64 - 65 65 - const locality = (flat.locality as string) || nested?.locality; 66 66 - const region = (flat.region as string) || nested?.region; 67 67 - 68 68 - const parts = [locality, region].filter(Boolean); 69 69 - return parts.length > 0 ? parts.join(', ') : undefined; 70 70 - } 71 71 - 72 72 - function getThumbnail(event: EventData): { url: string; alt: string } | null { 73 73 - if (!event.media || event.media.length === 0) return null; 74 74 - const media = event.media.find((m) => m.role === 'thumbnail'); 75 75 - if (!media?.content) return null; 76 76 - const url = getCDNImageBlobUrl({ did, blob: media.content, type: 'jpeg' }); 77 77 - if (!url) return null; 78 78 - return { url, alt: media.alt || event.name }; 79 79 - } 80 80 - 81 81 - let isOwner = $derived(user.isLoggedIn && user.did === did); 82 82 - 83 83 - let showPast: boolean = $state(false); 84 84 - let now = $derived(new Date()); 85 85 - let filteredEvents = $derived( 86 86 - events.filter((e) => { 87 87 - const endOrStart = e.endsAt || e.startsAt; 88 88 - const eventDate = new Date(endOrStart); 89 89 - return showPast ? eventDate < now : eventDate >= now; 90 90 - }) 91 91 - ); 92 92 - </script> 93 93 - 94 94 - <svelte:head> 95 95 - <title>{hostName} - Events</title> 96 96 - <meta name="description" content="Events hosted by {hostName}" /> 97 97 - <meta property="og:title" content="{hostName} - Events" /> 98 98 - <meta property="og:description" content="Events hosted by {hostName}" /> 99 99 - <meta name="twitter:card" content="summary" /> 100 100 - <meta name="twitter:title" content="{hostName} - Events" /> 101 101 - <meta name="twitter:description" content="Events hosted by {hostName}" /> 102 102 - </svelte:head> 103 103 - 104 104 - <div class="min-h-screen px-6 py-12 sm:py-12"> 105 105 - <div class="mx-auto max-w-3xl"> 106 106 - <!-- Header --> 107 107 - <div class="mb-8 flex items-start justify-between"> 108 108 - <div> 109 109 - <h1 class="text-base-900 dark:text-base-50 mb-2 text-2xl font-bold sm:text-3xl"> 110 110 - {showPast ? 'Past' : 'Upcoming'} events 111 111 - </h1> 112 112 - <div class="mt-4 flex items-center gap-2"> 113 113 - <span class="text-base-500 dark:text-base-400 text-sm">Hosted by</span> 114 114 - <a 115 115 - href={hostUrl} 116 116 - target={hostProfile?.hasBlento ? undefined : '_blank'} 117 117 - rel={hostProfile?.hasBlento ? undefined : 'noopener noreferrer'} 118 118 - class="flex items-center gap-1.5 hover:underline" 119 119 - > 120 120 - <FoxAvatar src={hostProfile?.avatar} alt={hostName} class="size-5 shrink-0" /> 121 121 - <span class="text-base-900 dark:text-base-100 text-sm font-medium">{hostName}</span> 122 122 - </a> 123 123 - </div> 124 124 - </div> 125 125 - <div class="flex flex-col items-end gap-2"> 126 126 - {#if isOwner} 127 127 - <Button 128 128 - variant="primary" 129 129 - onclick={() => { 130 130 - const rkey = TID.now(); 131 131 - const handle = 132 132 - user.profile?.handle && user.profile.handle !== 'handle.invalid' 133 133 - ? user.profile.handle 134 134 - : user.did; 135 135 - goto(`/${handle}/events/${rkey}/edit`); 136 136 - }}>New event</Button 137 137 - > 138 138 - {/if} 139 139 - <Button 140 140 - variant="secondary" 141 141 - onclick={async () => { 142 142 - const calendarUrl = `${page.url.origin}${page.url.pathname.replace(/\/$/, '')}/calendar`; 143 143 - await navigator.clipboard.writeText(calendarUrl); 144 144 - toast.success('Subscription link copied to clipboard'); 145 145 - }}>Subscribe</Button 146 146 - > 147 147 - </div> 148 148 - </div> 149 149 - 150 150 - <!-- Toggle --> 151 151 - <div class="mb-6 flex gap-1"> 152 152 - <button 153 153 - class="rounded-xl px-3 py-1.5 text-sm font-medium transition-colors {!showPast 154 154 - ? 'bg-base-200 dark:bg-base-800 text-base-900 dark:text-base-50' 155 155 - : 'text-base-500 dark:text-base-400 hover:text-base-700 dark:hover:text-base-200 cursor-pointer'}" 156 156 - onclick={() => (showPast = false)}>Upcoming</button 157 157 - > 158 158 - <button 159 159 - class="rounded-xl px-3 py-1.5 text-sm font-medium transition-colors {showPast 160 160 - ? 'bg-base-200 dark:bg-base-800 text-base-900 dark:text-base-50' 161 161 - : 'text-base-500 dark:text-base-400 hover:text-base-700 dark:hover:text-base-200 cursor-pointer'}" 162 162 - onclick={() => (showPast = true)}>Past</button 163 163 - > 164 164 - </div> 165 165 - 166 166 - {#if filteredEvents.length === 0} 167 167 - <p class="text-base-500 dark:text-base-400 py-12 text-center"> 168 168 - No {showPast ? 'past' : 'upcoming'} events. 169 169 - </p> 170 170 - {:else} 171 171 - <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"> 172 172 - {#each filteredEvents as event (event.rkey)} 173 173 - {@const thumbnail = getThumbnail(event)} 174 174 - {@const location = getLocationString(event.locations)} 175 175 - {@const rkey = event.rkey} 176 176 - <a 177 177 - href="./events/{rkey}" 178 178 - class="border-base-200 dark:border-base-800 hover:border-base-300 dark:hover:border-base-700 group bg-base-100 dark:bg-base-950 block overflow-hidden rounded-2xl border transition-colors" 179 179 - > 180 180 - <!-- Thumbnail --> 181 181 - <div class="p-4"> 182 182 - {#if thumbnail} 183 183 - <img 184 184 - src={thumbnail.url} 185 185 - alt={thumbnail.alt} 186 186 - class="aspect-square w-full rounded-2xl object-cover" 187 187 - /> 188 188 - {:else} 189 189 - <div 190 190 - class="bg-base-100 dark:bg-base-900 aspect-square w-full overflow-hidden rounded-2xl [&>svg]:h-full [&>svg]:w-full" 191 191 - > 192 192 - <Avatar 193 193 - size={400} 194 194 - name={rkey} 195 195 - variant="marble" 196 196 - colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']} 197 197 - square 198 198 - /> 199 199 - </div> 200 200 - {/if} 201 201 - </div> 202 202 - 203 203 - <!-- Content --> 204 204 - <div class="p-4"> 205 205 - <h2 206 206 - class="text-base-900 dark:text-base-50 group-hover:text-base-700 dark:group-hover:text-base-200 mb-1 leading-snug font-semibold" 207 207 - > 208 208 - {event.name} 209 209 - </h2> 210 210 - 211 211 - <p class="text-base-500 dark:text-base-400 mb-2 text-sm"> 212 212 - {formatDate(event.startsAt)} &middot; {formatTime(event.startsAt)} 213 213 - </p> 214 214 - 215 215 - <div class="flex flex-wrap items-center gap-2"> 216 216 - {#if event.mode} 217 217 - <Badge size="sm" variant={getModeColor(event.mode)} 218 218 - >{getModeLabel(event.mode)}</Badge 219 219 - > 220 220 - {/if} 221 221 - 222 222 - {#if location} 223 223 - <span class="text-base-500 dark:text-base-400 truncate text-xs">{location}</span> 224 224 - {/if} 225 225 - </div> 226 226 - </div> 227 227 - </a> 228 228 - {/each} 229 229 - </div> 230 230 - {/if} 231 231 - </div> 232 232 - </div>

-60

src/routes/[[actor=actor]]/events/[rkey]/+page.server.ts

reviewed

··· 1 1 - import { error } from '@sveltejs/kit'; 2 2 - import type { EventData } from '$lib/cards/social/EventCard'; 3 3 - import { getBlentoOrBskyProfile, getRecord } from '$lib/atproto/methods.js'; 4 4 - import { createCache, type CachedProfile } from '$lib/cache'; 5 5 - import type { Did } from '@atcute/lexicons'; 6 6 - import { getActor } from '$lib/actor'; 7 7 - 8 8 - export async function load({ params, platform, request }) { 9 9 - const { rkey } = params; 10 10 - 11 11 - const cache = createCache(platform); 12 12 - 13 13 - const did = await getActor({ request, paramActor: params.actor, platform }); 14 14 - 15 15 - if (!did || !rkey) { 16 16 - throw error(404, 'Event not found'); 17 17 - } 18 18 - 19 19 - try { 20 20 - const [eventRecord, hostProfile] = await Promise.all([ 21 21 - getRecord({ 22 22 - did: did as Did, 23 23 - collection: 'community.lexicon.calendar.event', 24 24 - rkey 25 25 - }), 26 26 - cache 27 27 - ? cache.getProfile(did as Did).catch(() => null) 28 28 - : getBlentoOrBskyProfile({ did: did as Did }) 29 29 - .then( 30 30 - (p): CachedProfile => ({ 31 31 - did: p.did as string, 32 32 - handle: p.handle as string, 33 33 - displayName: p.displayName as string | undefined, 34 34 - avatar: p.avatar as string | undefined, 35 35 - hasBlento: p.hasBlento, 36 36 - url: p.url 37 37 - }) 38 38 - ) 39 39 - .catch(() => null) 40 40 - ]); 41 41 - 42 42 - if (!eventRecord?.value) { 43 43 - throw error(404, 'Event not found'); 44 44 - } 45 45 - 46 46 - const eventData: EventData = eventRecord.value as EventData; 47 47 - console.log(eventData); 48 48 - 49 49 - return { 50 50 - eventData, 51 51 - did, 52 52 - rkey, 53 53 - hostProfile: hostProfile ?? null, 54 54 - eventCid: (eventRecord.cid as string) ?? null 55 55 - }; 56 56 - } catch (e) { 57 57 - if (e && typeof e === 'object' && 'status' in e) throw e; 58 58 - throw error(404, 'Event not found'); 59 59 - } 60 60 - }

-490

src/routes/[[actor=actor]]/events/[rkey]/+page.svelte

reviewed

··· 1 1 - <script lang="ts"> 2 2 - import type { EventData } from '$lib/cards/social/EventCard'; 3 3 - import { getCDNImageBlobUrl } from '$lib/atproto'; 4 4 - import { user } from '$lib/atproto/auth.svelte'; 5 5 - import { Avatar as FoxAvatar, Badge, Button } from '@foxui/core'; 6 6 - import Avatar from 'svelte-boring-avatars'; 7 7 - import EventRsvp from './EventRsvp.svelte'; 8 8 - import EventAttendees from './EventAttendees.svelte'; 9 9 - import { page } from '$app/state'; 10 10 - import { marked } from 'marked'; 11 11 - import { sanitize } from '$lib/sanitize'; 12 12 - import { generateICalEvent } from '$lib/ical'; 13 13 - 14 14 - let { data } = $props(); 15 15 - 16 16 - let eventData: EventData = $derived(data.eventData); 17 17 - let did: string = $derived(data.did); 18 18 - let rkey: string = $derived(data.rkey); 19 19 - let hostProfile = $derived(data.hostProfile); 20 20 - 21 21 - let hostUrl = $derived( 22 22 - hostProfile?.url ?? `https://bsky.app/profile/${hostProfile?.handle || did}` 23 23 - ); 24 24 - 25 25 - let startDate = $derived(new Date(eventData.startsAt)); 26 26 - let endDate = $derived(eventData.endsAt ? new Date(eventData.endsAt) : null); 27 27 - 28 28 - function formatMonth(date: Date): string { 29 29 - return date.toLocaleDateString('en-US', { month: 'short' }).toUpperCase(); 30 30 - } 31 31 - 32 32 - function formatDay(date: Date): number { 33 33 - return date.getDate(); 34 34 - } 35 35 - 36 36 - function formatWeekday(date: Date): string { 37 37 - return date.toLocaleDateString('en-US', { weekday: 'long' }); 38 38 - } 39 39 - 40 40 - function formatFullDate(date: Date): string { 41 41 - const options: Intl.DateTimeFormatOptions = { month: 'long', day: 'numeric' }; 42 42 - if (date.getFullYear() !== new Date().getFullYear()) { 43 43 - options.year = 'numeric'; 44 44 - } 45 45 - return date.toLocaleDateString('en-US', options); 46 46 - } 47 47 - 48 48 - function formatTime(date: Date): string { 49 49 - return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }); 50 50 - } 51 51 - 52 52 - function getModeLabel(mode: string): string { 53 53 - if (mode.includes('virtual')) return 'Virtual'; 54 54 - if (mode.includes('hybrid')) return 'Hybrid'; 55 55 - if (mode.includes('inperson')) return 'In-Person'; 56 56 - return 'Event'; 57 57 - } 58 58 - 59 59 - function getModeColor(mode: string): 'cyan' | 'purple' | 'amber' | 'secondary' { 60 60 - if (mode.includes('virtual')) return 'cyan'; 61 61 - if (mode.includes('hybrid')) return 'purple'; 62 62 - if (mode.includes('inperson')) return 'amber'; 63 63 - return 'secondary'; 64 64 - } 65 65 - 66 66 - function getLocationString(locations: EventData['locations']): string | undefined { 67 67 - if (!locations || locations.length === 0) return undefined; 68 68 - 69 69 - const loc = locations.find((v) => v.$type === 'community.lexicon.location.address'); 70 70 - if (!loc) return undefined; 71 71 - 72 72 - // Handle both flat location objects (name, street, locality, country) 73 73 - // and nested address objects 74 74 - const flat = loc as Record<string, unknown>; 75 75 - const nested = loc.address; 76 76 - 77 77 - const street = (flat.street as string) || undefined; 78 78 - const locality = (flat.locality as string) || nested?.locality; 79 79 - const region = (flat.region as string) || nested?.region; 80 80 - 81 81 - const parts = [street, locality, region].filter(Boolean); 82 82 - return parts.length > 0 ? parts.join(', ') : undefined; 83 83 - } 84 84 - 85 85 - let location = $derived(getLocationString(eventData.locations)); 86 86 - 87 87 - let thumbnailImage = $derived.by(() => { 88 88 - if (!eventData.media || eventData.media.length === 0) return null; 89 89 - const media = eventData.media.find((m) => m.role === 'thumbnail'); 90 90 - if (!media?.content) return null; 91 91 - const url = getCDNImageBlobUrl({ did, blob: media.content, type: 'jpeg' }); 92 92 - if (!url) return null; 93 93 - return { url, alt: media.alt || eventData.name }; 94 94 - }); 95 95 - 96 96 - let bannerImage = $derived.by(() => { 97 97 - if (!eventData.media || eventData.media.length === 0) return null; 98 98 - const media = eventData.media.find((m) => m.role === 'header'); 99 99 - if (!media?.content) return null; 100 100 - const url = getCDNImageBlobUrl({ did, blob: media.content, type: 'jpeg' }); 101 101 - if (!url) return null; 102 102 - return { url, alt: media.alt || eventData.name }; 103 103 - }); 104 104 - 105 105 - // Prefer thumbnail; fall back to header/banner image 106 106 - let displayImage = $derived(thumbnailImage ?? bannerImage); 107 107 - let isBannerOnly = $derived(!thumbnailImage && !!bannerImage); 108 108 - 109 109 - let isSameDay = $derived( 110 110 - endDate && 111 111 - startDate.getFullYear() === endDate.getFullYear() && 112 112 - startDate.getMonth() === endDate.getMonth() && 113 113 - startDate.getDate() === endDate.getDate() 114 114 - ); 115 115 - 116 116 - const renderer = new marked.Renderer(); 117 117 - renderer.link = ({ href, text }) => 118 118 - `<a target="_blank" rel="noopener noreferrer nofollow" href="${href}" class="text-accent-600 dark:text-accent-400 hover:underline">${text}</a>`; 119 119 - 120 120 - function renderDescription( 121 121 - text: string, 122 122 - facets?: { 123 123 - index: { byteStart: number; byteEnd: number }; 124 124 - features: { $type: string; did?: string; uri?: string; tag?: string }[]; 125 125 - }[] 126 126 - ): string { 127 127 - let result = text; 128 128 - 129 129 - if (facets && facets.length > 0) { 130 130 - const encoder = new TextEncoder(); 131 131 - const encoded = encoder.encode(text); 132 132 - const decoder = new TextDecoder(); 133 133 - 134 134 - // Sort facets in reverse order by byteStart so replacements don't shift positions 135 135 - const sorted = [...facets].sort((a, b) => b.index.byteStart - a.index.byteStart); 136 136 - 137 137 - for (const facet of sorted) { 138 138 - const feature = facet.features?.[0]; 139 139 - if (!feature) continue; 140 140 - 141 141 - const segmentBytes = encoded.slice(facet.index.byteStart, facet.index.byteEnd); 142 142 - const segmentText = decoder.decode(segmentBytes); 143 143 - 144 144 - let mdLink: string | null = null; 145 145 - switch (feature.$type) { 146 146 - case 'app.bsky.richtext.facet#mention': 147 147 - mdLink = `[${segmentText}](https://bsky.app/profile/${feature.did})`; 148 148 - break; 149 149 - case 'app.bsky.richtext.facet#link': 150 150 - mdLink = `[${segmentText}](${feature.uri})`; 151 151 - break; 152 152 - case 'app.bsky.richtext.facet#tag': 153 153 - mdLink = `[${segmentText}](https://bsky.app/hashtag/${feature.tag})`; 154 154 - break; 155 155 - } 156 156 - 157 157 - if (mdLink) { 158 158 - // Convert byte offsets to character offsets for string replacement 159 159 - const before = decoder.decode(encoded.slice(0, facet.index.byteStart)); 160 160 - const after = decoder.decode(encoded.slice(facet.index.byteEnd)); 161 161 - result = before + mdLink + after; 162 162 - } 163 163 - } 164 164 - } 165 165 - 166 166 - return marked.parse(result, { renderer }) as string; 167 167 - } 168 168 - 169 169 - let descriptionHtml = $derived( 170 170 - eventData.description 171 171 - ? sanitize( 172 172 - renderDescription( 173 173 - eventData.description, 174 174 - eventData.facets as 175 175 - | { 176 176 - index: { byteStart: number; byteEnd: number }; 177 177 - features: { $type: string; did?: string; uri?: string; tag?: string }[]; 178 178 - }[] 179 179 - | undefined 180 180 - ), 181 181 - { ADD_ATTR: ['target'] } 182 182 - ) 183 183 - : null 184 184 - ); 185 185 - 186 186 - // let smokesignalUrl = $derived(`https://smokesignal.events/${did}/${rkey}`); 187 187 - let eventUri = $derived(`at://${did}/community.lexicon.calendar.event/${rkey}`); 188 188 - 189 189 - let ogImageUrl = $derived(`${page.url.origin}${page.url.pathname}/og.png`); 190 190 - 191 191 - let isOwner = $derived(user.isLoggedIn && user.did === did); 192 192 - 193 193 - let attendeesRef: EventAttendees | undefined = $state(); 194 194 - 195 195 - function handleRsvp(status: 'going' | 'interested') { 196 196 - if (!user.did) return; 197 197 - attendeesRef?.addAttendee({ 198 198 - did: user.did, 199 199 - status, 200 200 - avatar: user.profile?.avatar, 201 201 - name: user.profile?.displayName || user.profile?.handle || user.did 202 202 - }); 203 203 - } 204 204 - 205 205 - function handleRsvpCancel() { 206 206 - if (!user.did) return; 207 207 - attendeesRef?.removeAttendee(user.did); 208 208 - } 209 209 - 210 210 - function downloadIcs() { 211 211 - const ical = generateICalEvent(eventData, eventUri, page.url.href); 212 212 - const blob = new Blob([ical], { type: 'text/calendar;charset=utf-8' }); 213 213 - const url = URL.createObjectURL(blob); 214 214 - const a = document.createElement('a'); 215 215 - a.href = url; 216 216 - a.download = `${eventData.name.replace(/[^a-zA-Z0-9]/g, '-')}.ics`; 217 217 - a.click(); 218 218 - URL.revokeObjectURL(url); 219 219 - } 220 220 - </script> 221 221 - 222 222 - <svelte:head> 223 223 - <title>{eventData.name}</title> 224 224 - <meta name="description" content={eventData.description || `Event: ${eventData.name}`} /> 225 225 - <meta property="og:title" content={eventData.name} /> 226 226 - <meta property="og:description" content={eventData.description || `Event: ${eventData.name}`} /> 227 227 - <meta property="og:image" content={ogImageUrl} /> 228 228 - <meta name="twitter:card" content="summary_large_image" /> 229 229 - <meta name="twitter:title" content={eventData.name} /> 230 230 - <meta name="twitter:description" content={eventData.description || `Event: ${eventData.name}`} /> 231 231 - <meta name="twitter:image" content={ogImageUrl} /> 232 232 - </svelte:head> 233 233 - 234 234 - <div class="min-h-screen px-6 py-12 sm:py-12"> 235 235 - <div class="mx-auto max-w-3xl"> 236 236 - <!-- Banner image (full width, only when no thumbnail) --> 237 237 - {#if isBannerOnly && displayImage} 238 238 - <img 239 239 - src={displayImage.url} 240 240 - alt={displayImage.alt} 241 241 - class="border-base-200 dark:border-base-800 mb-8 aspect-3/1 w-full rounded-2xl border object-cover" 242 242 - /> 243 243 - {/if} 244 244 - 245 245 - <!-- Two-column layout: image left, details right --> 246 246 - <div 247 247 - class="grid grid-cols-1 gap-8 md:grid-cols-[14rem_1fr] md:grid-rows-[auto_1fr] md:gap-x-10 md:gap-y-6 lg:grid-cols-[16rem_1fr]" 248 248 - > 249 249 - <!-- Thumbnail image (left column) --> 250 250 - {#if !isBannerOnly} 251 251 - <div class="order-1 max-w-sm md:order-0 md:col-start-1 md:max-w-none"> 252 252 - {#if displayImage} 253 253 - <img 254 254 - src={displayImage.url} 255 255 - alt={displayImage.alt} 256 256 - class="border-base-200 dark:border-base-800 aspect-square w-full rounded-2xl border object-cover" 257 257 - /> 258 258 - {:else} 259 259 - <div 260 260 - class="border-base-200 dark:border-base-800 aspect-square w-full overflow-hidden rounded-2xl border [&>svg]:h-full [&>svg]:w-full" 261 261 - > 262 262 - <Avatar 263 263 - size={256} 264 264 - name={data.rkey} 265 265 - variant="marble" 266 266 - colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']} 267 267 - square 268 268 - /> 269 269 - </div> 270 270 - {/if} 271 271 - </div> 272 272 - {/if} 273 273 - 274 274 - <!-- Right column: event details --> 275 275 - <div class="order-2 min-w-0 md:order-0 md:col-start-2 md:row-span-2 md:row-start-1"> 276 276 - <div class="mb-2 flex items-start justify-between gap-4"> 277 277 - <h1 class="text-base-900 dark:text-base-50 text-4xl leading-tight font-bold sm:text-5xl"> 278 278 - {eventData.name} 279 279 - </h1> 280 280 - {#if isOwner} 281 281 - <Button href="./{rkey}/edit" size="sm" class="shrink-0">Edit</Button> 282 282 - {/if} 283 283 - </div> 284 284 - 285 285 - <!-- Mode badge --> 286 286 - {#if eventData.mode} 287 287 - <div class="mb-8"> 288 288 - <Badge size="md" variant={getModeColor(eventData.mode)} 289 289 - >{getModeLabel(eventData.mode)}</Badge 290 290 - > 291 291 - </div> 292 292 - {/if} 293 293 - 294 294 - <!-- Date row --> 295 295 - <div class="mb-4 flex items-center gap-4"> 296 296 - <div 297 297 - class="border-base-200 dark:border-base-700 bg-base-100 dark:bg-base-950/30 flex size-12 shrink-0 flex-col items-center justify-center overflow-hidden rounded-xl border" 298 298 - > 299 299 - <span class="text-base-500 dark:text-base-400 text-[9px] leading-none font-semibold"> 300 300 - {formatMonth(startDate)} 301 301 - </span> 302 302 - <span class="text-base-900 dark:text-base-50 text-lg leading-tight font-bold"> 303 303 - {formatDay(startDate)} 304 304 - </span> 305 305 - </div> 306 306 - <div> 307 307 - <p class="text-base-900 dark:text-base-50 font-semibold"> 308 308 - {formatWeekday(startDate)}, {formatFullDate(startDate)} 309 309 - {#if endDate && !isSameDay} 310 310 - - {formatWeekday(endDate)}, {formatFullDate(endDate)} 311 311 - {/if} 312 312 - </p> 313 313 - <p class="text-base-500 dark:text-base-400 text-sm"> 314 314 - {formatTime(startDate)} 315 315 - {#if endDate && isSameDay} 316 316 - - {formatTime(endDate)} 317 317 - {/if} 318 318 - </p> 319 319 - </div> 320 320 - </div> 321 321 - 322 322 - <!-- Location row --> 323 323 - {#if location} 324 324 - <div class="mb-6 flex items-center gap-4"> 325 325 - <div 326 326 - class="border-base-200 dark:border-base-700 bg-base-100 dark:bg-base-950/30 flex size-12 shrink-0 items-center justify-center rounded-xl border" 327 327 - > 328 328 - <svg 329 329 - xmlns="http://www.w3.org/2000/svg" 330 330 - fill="none" 331 331 - viewBox="0 0 24 24" 332 332 - stroke-width="1.5" 333 333 - stroke="currentColor" 334 334 - class="text-base-900 dark:text-base-200 size-5" 335 335 - > 336 336 - <path 337 337 - stroke-linecap="round" 338 338 - stroke-linejoin="round" 339 339 - d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" 340 340 - /> 341 341 - <path 342 342 - stroke-linecap="round" 343 343 - stroke-linejoin="round" 344 344 - d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" 345 345 - /> 346 346 - </svg> 347 347 - </div> 348 348 - <p class="text-base-900 dark:text-base-50 font-semibold">{location}</p> 349 349 - </div> 350 350 - {/if} 351 351 - 352 352 - <EventRsvp 353 353 - {eventUri} 354 354 - eventCid={data.eventCid} 355 355 - onrsvp={handleRsvp} 356 356 - oncancel={handleRsvpCancel} 357 357 - /> 358 358 - 359 359 - <!-- About Event --> 360 360 - {#if descriptionHtml} 361 361 - <div class="mt-8 mb-8"> 362 362 - <p 363 363 - class="text-base-500 dark:text-base-400 mb-3 text-xs font-semibold tracking-wider uppercase" 364 364 - > 365 365 - About 366 366 - </p> 367 367 - <div 368 368 - class="text-base-700 dark:text-base-300 prose dark:prose-invert prose-a:text-accent-600 dark:prose-a:text-accent-400 prose-a:hover:underline prose-a:no-underline max-w-none leading-relaxed wrap-break-word" 369 369 - > 370 370 - {@html descriptionHtml} 371 371 - </div> 372 372 - </div> 373 373 - {/if} 374 374 - </div> 375 375 - 376 376 - <!-- Left column: sidebar info --> 377 377 - <div class="order-3 space-y-6 md:order-0 md:col-start-1"> 378 378 - <!-- Hosted By --> 379 379 - <div> 380 380 - <p 381 381 - class="text-base-500 dark:text-base-400 mb-3 text-xs font-semibold tracking-wider uppercase" 382 382 - > 383 383 - Hosted By 384 384 - </p> 385 385 - <a 386 386 - href={hostUrl} 387 387 - target={hostProfile?.hasBlento ? undefined : '_blank'} 388 388 - rel={hostProfile?.hasBlento ? undefined : 'noopener noreferrer'} 389 389 - class="text-base-900 dark:text-base-100 flex items-center gap-2.5 font-medium hover:underline" 390 390 - > 391 391 - <FoxAvatar 392 392 - src={hostProfile?.avatar} 393 393 - alt={hostProfile?.displayName || hostProfile?.handle || did} 394 394 - class="size-8 shrink-0" 395 395 - /> 396 396 - <span class="truncate text-sm"> 397 397 - {hostProfile?.displayName || hostProfile?.handle || did} 398 398 - </span> 399 399 - </a> 400 400 - </div> 401 401 - 402 402 - {#if eventData.uris && eventData.uris.length > 0} 403 403 - <!-- Links --> 404 404 - <div> 405 405 - <p 406 406 - class="text-base-500 dark:text-base-400 mb-4 text-xs font-semibold tracking-wider uppercase" 407 407 - > 408 408 - Links 409 409 - </p> 410 410 - <div class="space-y-3"> 411 411 - {#each eventData.uris as link (link.name + link.uri)} 412 412 - <a 413 413 - href={link.uri} 414 414 - target="_blank" 415 415 - rel="noopener noreferrer" 416 416 - class="text-base-700 dark:text-base-300 hover:text-base-900 dark:hover:text-base-100 flex items-center gap-1.5 text-sm transition-colors" 417 417 - > 418 418 - <svg 419 419 - xmlns="http://www.w3.org/2000/svg" 420 420 - fill="none" 421 421 - viewBox="0 0 24 24" 422 422 - stroke-width="1.5" 423 423 - stroke="currentColor" 424 424 - class="size-3.5 shrink-0" 425 425 - > 426 426 - <path 427 427 - stroke-linecap="round" 428 428 - stroke-linejoin="round" 429 429 - d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" 430 430 - /> 431 431 - </svg> 432 432 - <span class="truncate">{link.name || link.uri.replace(/^https?:\/\//, '')}</span> 433 433 - </a> 434 434 - {/each} 435 435 - </div> 436 436 - </div> 437 437 - {/if} 438 438 - 439 439 - <!-- Add to Calendar --> 440 440 - <button 441 441 - onclick={downloadIcs} 442 442 - class="text-base-700 dark:text-base-300 hover:text-base-900 dark:hover:text-base-100 flex cursor-pointer items-center gap-2 text-sm font-medium transition-colors" 443 443 - > 444 444 - <svg 445 445 - xmlns="http://www.w3.org/2000/svg" 446 446 - fill="none" 447 447 - viewBox="0 0 24 24" 448 448 - stroke-width="1.5" 449 449 - stroke="currentColor" 450 450 - class="size-4" 451 451 - > 452 452 - <path 453 453 - stroke-linecap="round" 454 454 - stroke-linejoin="round" 455 455 - d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" 456 456 - /> 457 457 - </svg> 458 458 - Add to Calendar 459 459 - </button> 460 460 - 461 461 - <!-- Attendees --> 462 462 - <EventAttendees bind:this={attendeesRef} {eventUri} /> 463 463 - </div> 464 464 - 465 465 - <!-- View on Smoke Signal link, currently disabled as some events dont work on smokesignal --> 466 466 - <!-- <a 467 467 - href={smokesignalUrl} 468 468 - target="_blank" 469 469 - rel="noopener noreferrer" 470 470 - class="text-base-500 dark:text-base-400 hover:text-base-700 dark:hover:text-base-200 order-6 inline-flex items-center gap-1.5 text-sm transition-colors md:order-0 md:col-start-2" 471 471 - > 472 472 - View on Smoke Signal 473 473 - <svg 474 474 - xmlns="http://www.w3.org/2000/svg" 475 475 - fill="none" 476 476 - viewBox="0 0 24 24" 477 477 - stroke-width="2" 478 478 - stroke="currentColor" 479 479 - class="size-3.5" 480 480 - > 481 481 - <path 482 482 - stroke-linecap="round" 483 483 - stroke-linejoin="round" 484 484 - d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" 485 485 - /> 486 486 - </svg> 487 487 - </a> --> 488 488 - </div> 489 489 - </div> 490 490 - </div>

-205

src/routes/[[actor=actor]]/events/[rkey]/EventAttendees.svelte

reviewed

··· 1 1 - <script lang="ts"> 2 2 - import { Avatar as FoxAvatar } from '@foxui/core'; 3 3 - import { onMount } from 'svelte'; 4 4 - import { scale } from 'svelte/transition'; 5 5 - import { flip } from 'svelte/animate'; 6 6 - import { fetchEventAttendees, type AttendeeInfo } from './api.remote'; 7 7 - import Modal from '$lib/components/modal/Modal.svelte'; 8 8 - 9 9 - let { eventUri }: { eventUri: string } = $props(); 10 10 - 11 11 - let goingCount = $state(0); 12 12 - let interestedCount = $state(0); 13 13 - let goingAttendees: AttendeeInfo[] = $state([]); 14 14 - let interestedAttendees: AttendeeInfo[] = $state([]); 15 15 - let loading = $state(true); 16 16 - 17 17 - let modalOpen = $state(false); 18 18 - let modalGroup: 'going' | 'interested' = $state('going'); 19 19 - 20 20 - const MAX_AVATARS = 18; 21 21 - 22 22 - onMount(async () => { 23 23 - try { 24 24 - const result = await fetchEventAttendees(eventUri); 25 25 - if (!result) return; 26 26 - goingCount = result.goingCount; 27 27 - interestedCount = result.interestedCount; 28 28 - goingAttendees = result.going; 29 29 - interestedAttendees = result.interested; 30 30 - } catch (err) { 31 31 - console.error('Failed to fetch event attendees:', err); 32 32 - } finally { 33 33 - loading = false; 34 34 - } 35 35 - }); 36 36 - 37 37 - let totalCount = $derived(goingCount + interestedCount); 38 38 - 39 39 - let goingDisplay = $derived(goingAttendees.slice(0, MAX_AVATARS)); 40 40 - let goingOverflow = $derived(goingCount - goingDisplay.length); 41 41 - 42 42 - let interestedDisplay = $derived(interestedAttendees.slice(0, MAX_AVATARS)); 43 43 - let interestedOverflow = $derived(interestedCount - interestedDisplay.length); 44 44 - 45 45 - let modalAttendees = $derived(modalGroup === 'going' ? goingAttendees : interestedAttendees); 46 46 - let modalTitle = $derived(modalGroup === 'going' ? 'Going' : 'Interested'); 47 47 - 48 48 - function openModal(group: 'going' | 'interested') { 49 49 - modalGroup = group; 50 50 - modalOpen = true; 51 51 - } 52 52 - 53 53 - export function addAttendee(attendee: AttendeeInfo) { 54 54 - // Remove from both lists first (in case of status change) 55 55 - goingAttendees = goingAttendees.filter((a) => a.did !== attendee.did); 56 56 - interestedAttendees = interestedAttendees.filter((a) => a.did !== attendee.did); 57 57 - 58 58 - if (attendee.status === 'going') { 59 59 - goingAttendees = [attendee, ...goingAttendees]; 60 60 - goingCount = goingAttendees.length; 61 61 - } else if (attendee.status === 'interested') { 62 62 - interestedAttendees = [attendee, ...interestedAttendees]; 63 63 - interestedCount = interestedAttendees.length; 64 64 - } 65 65 - } 66 66 - 67 67 - function thumbnail(url: string | undefined) { 68 68 - return url?.replace('/avatar/', '/avatar_thumbnail/'); 69 69 - } 70 70 - 71 71 - export function removeAttendee(did: string) { 72 72 - const wasGoing = goingAttendees.some((a) => a.did === did); 73 73 - const wasInterested = interestedAttendees.some((a) => a.did === did); 74 74 - goingAttendees = goingAttendees.filter((a) => a.did !== did); 75 75 - interestedAttendees = interestedAttendees.filter((a) => a.did !== did); 76 76 - if (wasGoing) goingCount = goingAttendees.length; 77 77 - if (wasInterested) interestedCount = interestedAttendees.length; 78 78 - } 79 79 - </script> 80 80 - 81 81 - {#if loading} 82 82 - <div class="flex items-center gap-3"> 83 83 - <div class="bg-base-300 dark:bg-base-700 h-3 w-24 animate-pulse rounded"></div> 84 84 - </div> 85 85 - {:else if totalCount > 0} 86 86 - <div class="mb-2"> 87 87 - {#if goingCount > 0} 88 88 - <button 89 89 - type="button" 90 90 - class="hover:bg-base-100 dark:hover:bg-base-800/50 -mx-2 block w-full cursor-pointer rounded-xl px-2 py-2 text-left transition-colors" 91 91 - onclick={() => openModal('going')} 92 92 - > 93 93 - <p class="text-base-900 dark:text-base-50 mb-2 text-sm"> 94 94 - <span class="font-bold">{goingCount}</span> 95 95 - <span 96 96 - class="text-base-500 dark:text-base-400 text-xs font-semibold tracking-wider uppercase" 97 97 - >Going</span 98 98 - > 99 99 - </p> 100 100 - <div class="flex items-center"> 101 101 - <div class="flex flex-wrap -space-y-2 -space-x-4 pr-4"> 102 102 - {#each goingDisplay as person (person.did)} 103 103 - <div 104 104 - animate:flip={{ duration: 300 }} 105 105 - in:scale={{ duration: 300, start: 0.5 }} 106 106 - out:scale={{ duration: 200, start: 0.5 }} 107 107 - > 108 108 - <FoxAvatar 109 109 - src={thumbnail(person.avatar)} 110 110 - alt={person.name} 111 111 - class="border-base-100 dark:border-base-900 size-12 border-2" 112 112 - /> 113 113 - </div> 114 114 - {/each} 115 115 - {#if goingOverflow > 0} 116 116 - <span 117 117 - class="bg-base-200 dark:bg-base-800 text-base-950 dark:text-base-100 border-base-100 dark:border-base-900 z-10 inline-flex size-12 items-center justify-center rounded-full border-2 text-sm font-semibold" 118 118 - > 119 119 - +{goingOverflow} 120 120 - </span> 121 121 - {/if} 122 122 - </div> 123 123 - </div> 124 124 - </button> 125 125 - {/if} 126 126 - 127 127 - {#if interestedCount > 0} 128 128 - <button 129 129 - type="button" 130 130 - class="hover:bg-base-100 dark:hover:bg-base-800/50 -mx-2 mt-4 block w-full cursor-pointer rounded-xl px-2 py-2 text-left transition-colors" 131 131 - onclick={() => openModal('interested')} 132 132 - > 133 133 - <p class="text-base-900 dark:text-base-50 mb-2 text-sm"> 134 134 - <span class="font-bold">{interestedCount}</span> 135 135 - <span 136 136 - class="text-base-500 dark:text-base-400 text-xs font-semibold tracking-wider uppercase" 137 137 - >Interested</span 138 138 - > 139 139 - </p> 140 140 - <div class="flex items-center"> 141 141 - <div class="flex flex-wrap -space-y-2 -space-x-4 pr-4"> 142 142 - {#each interestedDisplay as person (person.did)} 143 143 - <div 144 144 - animate:flip={{ duration: 300 }} 145 145 - in:scale={{ duration: 300, start: 0.5 }} 146 146 - out:scale={{ duration: 200, start: 0.5 }} 147 147 - > 148 148 - <FoxAvatar 149 149 - src={thumbnail(person.avatar)} 150 150 - alt={person.name} 151 151 - class="border-base-100 dark:border-base-900 size-12 border-2" 152 152 - /> 153 153 - </div> 154 154 - {/each} 155 155 - {#if interestedOverflow > 0} 156 156 - <span 157 157 - class="bg-base-200 dark:bg-base-800 text-base-950 dark:text-base-100 border-base-100 dark:border-base-900 z-10 inline-flex size-12 items-center justify-center rounded-full border-2 text-sm font-semibold" 158 158 - > 159 159 - +{interestedOverflow} 160 160 - </span> 161 161 - {/if} 162 162 - </div> 163 163 - </div> 164 164 - </button> 165 165 - {/if} 166 166 - </div> 167 167 - {/if} 168 168 - 169 169 - <Modal 170 170 - bind:open={modalOpen} 171 171 - closeButton 172 172 - onOpenAutoFocus={(e: Event) => e.preventDefault()} 173 173 - class="p-0" 174 174 - > 175 175 - <p class="text-base-900 dark:text-base-50 px-4 pt-4 text-lg font-semibold"> 176 176 - {modalTitle} 177 177 - <span class="text-base-500 dark:text-base-400 text-sm font-normal"> 178 178 - ({modalAttendees.length}) 179 179 - </span> 180 180 - </p> 181 181 - <div 182 182 - class="dark:bg-base-900/50 bg-base-200/30 mx-4 mb-4 max-h-80 space-y-1 overflow-y-auto rounded-xl p-2" 183 183 - > 184 184 - {#each modalAttendees as person (person.did)} 185 185 - <a 186 186 - href={person.url} 187 187 - target={person.url?.startsWith('/') ? undefined : '_blank'} 188 188 - rel={person.url?.startsWith('/') ? undefined : 'noopener noreferrer'} 189 189 - class="hover:bg-base-200 dark:hover:bg-base-900 flex items-center gap-3 rounded-xl px-2 py-2 transition-colors" 190 190 - > 191 191 - <FoxAvatar src={thumbnail(person.avatar)} alt={person.name} class="size-10 shrink-0" /> 192 192 - <div class="min-w-0"> 193 193 - <p class="text-base-900 dark:text-base-50 truncate text-sm font-medium"> 194 194 - {person.name} 195 195 - </p> 196 196 - {#if person.handle} 197 197 - <p class="text-base-500 dark:text-base-400 truncate text-xs"> 198 198 - @{person.handle} 199 199 - </p> 200 200 - {/if} 201 201 - </div> 202 202 - </a> 203 203 - {/each} 204 204 - </div> 205 205 - </Modal>

-245

src/routes/[[actor=actor]]/events/[rkey]/EventRsvp.svelte

reviewed

··· 1 1 - <script lang="ts"> 2 2 - import { user } from '$lib/atproto/auth.svelte'; 3 3 - import { getRecord, putRecord, deleteRecord, createTID } from '$lib/atproto/methods'; 4 4 - import { atProtoLoginModalState } from '@foxui/social'; 5 5 - import { Avatar, Button } from '@foxui/core'; 6 6 - import type { Did } from '@atcute/lexicons'; 7 7 - 8 8 - let { 9 9 - eventUri, 10 10 - eventCid, 11 11 - onrsvp, 12 12 - oncancel 13 13 - }: { 14 14 - eventUri: string; 15 15 - eventCid: string | null; 16 16 - onrsvp?: (status: 'going' | 'interested') => void; 17 17 - oncancel?: () => void; 18 18 - } = $props(); 19 19 - 20 20 - let rsvpStatus: 'going' | 'interested' | 'notgoing' | null = $state(null); 21 21 - let rsvpRkey: string | null = $state(null); 22 22 - let rsvpLoading = $state(false); 23 23 - let rsvpSubmitting = $state(false); 24 24 - 25 25 - $effect(() => { 26 26 - const userDid = user.did; 27 27 - if (!userDid || user.isInitializing) { 28 28 - rsvpStatus = null; 29 29 - rsvpRkey = null; 30 30 - return; 31 31 - } 32 32 - 33 33 - rsvpLoading = true; 34 34 - 35 35 - const url = `https://constellation.microcosm.blue/xrpc/blue.microcosm.links.getBacklinks?subject=${encodeURIComponent(eventUri)}&source=community.lexicon.calendar.rsvp:subject.uri&did=${encodeURIComponent(userDid)}&limit=1`; 36 36 - 37 37 - fetch(url) 38 38 - .then((res) => { 39 39 - if (!res.ok) throw new Error('Failed to fetch backlinks'); 40 40 - return res.json(); 41 41 - }) 42 42 - .then(async (data) => { 43 43 - if (!data?.records?.length) { 44 44 - rsvpStatus = null; 45 45 - rsvpRkey = null; 46 46 - return; 47 47 - } 48 48 - 49 49 - const backlink = data.records[0]; 50 50 - rsvpRkey = backlink.rkey; 51 51 - 52 52 - const recordData = await getRecord({ 53 53 - did: backlink.did as Did, 54 54 - collection: backlink.collection, 55 55 - rkey: backlink.rkey 56 56 - }); 57 57 - 58 58 - const status = recordData?.value?.status as string; 59 59 - if (status?.includes('#going')) rsvpStatus = 'going'; 60 60 - else if (status?.includes('#interested')) rsvpStatus = 'interested'; 61 61 - else if (status?.includes('#notgoing')) rsvpStatus = 'notgoing'; 62 62 - else rsvpStatus = null; 63 63 - }) 64 64 - .catch(() => { 65 65 - rsvpStatus = null; 66 66 - rsvpRkey = null; 67 67 - }) 68 68 - .finally(() => { 69 69 - rsvpLoading = false; 70 70 - }); 71 71 - }); 72 72 - 73 73 - async function submitRsvp(status: 'going' | 'interested') { 74 74 - if (!user.client || !user.did) return; 75 75 - rsvpSubmitting = true; 76 76 - try { 77 77 - const key = rsvpRkey ?? createTID(); 78 78 - 79 79 - const response = await putRecord({ 80 80 - collection: 'community.lexicon.calendar.rsvp', 81 81 - rkey: key, 82 82 - record: { 83 83 - $type: 'community.lexicon.calendar.rsvp', 84 84 - status: `community.lexicon.calendar.rsvp#${status}`, 85 85 - subject: { 86 86 - uri: eventUri, 87 87 - ...(eventCid ? { cid: eventCid } : {}) 88 88 - }, 89 89 - createdAt: new Date().toISOString() 90 90 - } 91 91 - }); 92 92 - 93 93 - if (response.ok) { 94 94 - rsvpStatus = status; 95 95 - rsvpRkey = key; 96 96 - onrsvp?.(status); 97 97 - refreshRsvpCache(); 98 98 - } 99 99 - } catch (e) { 100 100 - console.error('Failed to submit RSVP:', e); 101 101 - } finally { 102 102 - rsvpSubmitting = false; 103 103 - } 104 104 - } 105 105 - 106 106 - async function cancelRsvp() { 107 107 - if (!user.client || !user.did || !rsvpRkey) return; 108 108 - rsvpSubmitting = true; 109 109 - try { 110 110 - await deleteRecord({ 111 111 - collection: 'community.lexicon.calendar.rsvp', 112 112 - rkey: rsvpRkey 113 113 - }); 114 114 - rsvpStatus = null; 115 115 - rsvpRkey = null; 116 116 - oncancel?.(); 117 117 - refreshRsvpCache(); 118 118 - } catch (e) { 119 119 - console.error('Failed to cancel RSVP:', e); 120 120 - } finally { 121 121 - rsvpSubmitting = false; 122 122 - } 123 123 - } 124 124 - 125 125 - function refreshRsvpCache() { 126 126 - const handle = 127 127 - user.profile?.handle && user.profile.handle !== 'handle.invalid' 128 128 - ? user.profile.handle 129 129 - : user.did; 130 130 - if (handle) { 131 131 - fetch(`/${handle}/rsvp/api/refresh`).catch(() => {}); 132 132 - } 133 133 - } 134 134 - </script> 135 135 - 136 136 - <div 137 137 - class="border-base-200 dark:border-base-800 bg-base-100 items-between dark:bg-base-950/50 mt-8 mb-2 flex h-25 flex-col justify-center rounded-2xl border p-4" 138 138 - > 139 139 - {#if user.isInitializing || rsvpLoading} 140 140 - <div class="flex items-center gap-3"> 141 141 - <div class="bg-base-300 dark:bg-base-700 size-5 animate-pulse rounded-full"></div> 142 142 - <div class="bg-base-300 dark:bg-base-700 h-4 w-32 animate-pulse rounded"></div> 143 143 - </div> 144 144 - {:else if !user.isLoggedIn} 145 145 - <div class="flex items-center justify-between gap-4"> 146 146 - <p class="text-base-600 dark:text-base-400 text-sm">Log in to RSVP to this event</p> 147 147 - 148 148 - <Button onclick={() => atProtoLoginModalState.show()}>Log in to RSVP</Button> 149 149 - </div> 150 150 - {:else if rsvpStatus === 'going'} 151 151 - <div class="flex items-center justify-between"> 152 152 - <div class="flex items-center gap-3"> 153 153 - <div 154 154 - class="flex size-8 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30" 155 155 - > 156 156 - <svg 157 157 - xmlns="http://www.w3.org/2000/svg" 158 158 - viewBox="0 0 20 20" 159 159 - fill="currentColor" 160 160 - class="size-4 text-green-600 dark:text-green-400" 161 161 - > 162 162 - <path 163 163 - fill-rule="evenodd" 164 164 - d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" 165 165 - clip-rule="evenodd" 166 166 - /> 167 167 - </svg> 168 168 - </div> 169 169 - <p class="text-base-900 dark:text-base-50 font-semibold">You're Going</p> 170 170 - </div> 171 171 - <Button onclick={cancelRsvp} disabled={rsvpSubmitting} variant="ghost">Remove</Button> 172 172 - </div> 173 173 - {:else if rsvpStatus === 'interested'} 174 174 - <div class="flex items-center justify-between"> 175 175 - <div class="flex items-center gap-3"> 176 176 - <div 177 177 - class="flex size-8 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/30" 178 178 - > 179 179 - <svg 180 180 - xmlns="http://www.w3.org/2000/svg" 181 181 - viewBox="0 0 20 20" 182 182 - fill="currentColor" 183 183 - class="size-4 text-amber-600 dark:text-amber-400" 184 184 - > 185 185 - <path 186 186 - fill-rule="evenodd" 187 187 - d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" 188 188 - clip-rule="evenodd" 189 189 - /> 190 190 - </svg> 191 191 - </div> 192 192 - <p class="text-base-900 dark:text-base-50 font-semibold">You're Interested</p> 193 193 - </div> 194 194 - <Button onclick={cancelRsvp} disabled={rsvpSubmitting} variant="ghost">Remove</Button> 195 195 - </div> 196 196 - {:else if rsvpStatus === 'notgoing'} 197 197 - <div class="flex items-center justify-between"> 198 198 - <div class="flex items-center gap-3"> 199 199 - <div 200 200 - class="flex size-8 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30" 201 201 - > 202 202 - <svg 203 203 - xmlns="http://www.w3.org/2000/svg" 204 204 - viewBox="0 0 20 20" 205 205 - fill="currentColor" 206 206 - class="size-4 text-red-600 dark:text-red-400" 207 207 - > 208 208 - <path 209 209 - d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" 210 210 - /> 211 211 - </svg> 212 212 - </div> 213 213 - <p class="text-base-900 dark:text-base-50 font-semibold">Not Going</p> 214 214 - </div> 215 215 - <Button onclick={cancelRsvp} disabled={rsvpSubmitting} variant="ghost">Remove</Button> 216 216 - </div> 217 217 - {:else} 218 218 - {#if user.profile} 219 219 - <div class="mb-4 flex items-center gap-2"> 220 220 - <span class="text-base-500 dark:text-base-400 text-sm">RSVPing as</span> 221 221 - <Avatar 222 222 - src={user.profile.avatar} 223 223 - alt={user.profile.displayName || user.profile.handle} 224 224 - class="size-5" 225 225 - /> 226 226 - <span class="text-base-700 dark:text-base-300 truncate text-sm font-medium"> 227 227 - {user.profile.displayName || user.profile.handle} 228 228 - </span> 229 229 - </div> 230 230 - {/if} 231 231 - <div class="flex gap-3"> 232 232 - <Button onclick={() => submitRsvp('going')} disabled={rsvpSubmitting} class="flex-1"> 233 233 - {rsvpSubmitting ? '...' : 'Going'} 234 234 - </Button> 235 235 - <Button 236 236 - onclick={() => submitRsvp('interested')} 237 237 - disabled={rsvpSubmitting} 238 238 - variant="secondary" 239 239 - class="flex-1" 240 240 - > 241 241 - {rsvpSubmitting ? '...' : 'Interested'} 242 242 - </Button> 243 243 - </div> 244 244 - {/if} 245 245 - </div>

-75

src/routes/[[actor=actor]]/events/[rkey]/api.remote.ts

reviewed

··· 1 1 - import { query, getRequestEvent } from '$app/server'; 2 2 - import { createCache } from '$lib/cache'; 3 3 - import { fetchEventRsvps, resolveProfile } from '$lib/events/fetch-attendees'; 4 4 - 5 5 - export type AttendeeInfo = { 6 6 - did: string; 7 7 - status: 'going' | 'interested'; 8 8 - avatar?: string; 9 9 - name: string; 10 10 - handle?: string; 11 11 - url?: string; 12 12 - }; 13 13 - 14 14 - export type EventAttendeesResult = { 15 15 - going: AttendeeInfo[]; 16 16 - interested: AttendeeInfo[]; 17 17 - goingCount: number; 18 18 - interestedCount: number; 19 19 - }; 20 20 - 21 21 - export const fetchEventAttendees = query( 22 22 - 'unchecked', 23 23 - async (eventUri: string): Promise<EventAttendeesResult> => { 24 24 - const rsvpMap = await fetchEventRsvps(eventUri); 25 25 - 26 26 - const going: string[] = []; 27 27 - const interested: string[] = []; 28 28 - for (const [did, status] of rsvpMap) { 29 29 - if (status === 'going') going.push(did); 30 30 - else interested.push(did); 31 31 - } 32 32 - 33 33 - // Fetch profiles for attendees (with caching) 34 34 - const uniqueDids = [...new Set([...going, ...interested])]; 35 35 - const { platform } = getRequestEvent(); 36 36 - const cache = createCache(platform); 37 37 - 38 38 - const profileMap = new Map< 39 39 - string, 40 40 - { handle?: string; displayName?: string; avatar?: string; hasBlento?: boolean; url?: string } 41 41 - >(); 42 42 - 43 43 - await Promise.all( 44 44 - uniqueDids.map(async (did) => { 45 45 - const profile = await resolveProfile(did, cache).catch(() => null); 46 46 - if (profile) profileMap.set(did, profile); 47 47 - }) 48 48 - ); 49 49 - 50 50 - function toAttendeeInfo(did: string, status: 'going' | 'interested'): AttendeeInfo { 51 51 - const profile = profileMap.get(did); 52 52 - const handle = profile?.handle; 53 53 - const url = profile?.hasBlento 54 54 - ? profile.url || (handle ? `/${handle}` : undefined) 55 55 - : handle 56 56 - ? `https://bsky.app/profile/${handle}` 57 57 - : `https://bsky.app/profile/${did}`; 58 58 - return { 59 59 - did, 60 60 - status, 61 61 - avatar: profile?.avatar, 62 62 - name: profile?.displayName || handle || did, 63 63 - handle, 64 64 - url 65 65 - }; 66 66 - } 67 67 - 68 68 - return { 69 69 - going: going.map((did) => toAttendeeInfo(did, 'going')), 70 70 - interested: interested.map((did) => toAttendeeInfo(did, 'interested')), 71 71 - goingCount: going.length, 72 72 - interestedCount: interested.length 73 73 - }; 74 74 - } 75 75 - );

-65

src/routes/[[actor=actor]]/events/[rkey]/edit/+page.server.ts

reviewed

··· 1 1 - import { error } from '@sveltejs/kit'; 2 2 - import type { EventData } from '$lib/cards/social/EventCard'; 3 3 - import { getBlentoOrBskyProfile, getRecord } from '$lib/atproto/methods.js'; 4 4 - import { createCache, type CachedProfile } from '$lib/cache'; 5 5 - import type { Did } from '@atcute/lexicons'; 6 6 - import { getActor } from '$lib/actor'; 7 7 - 8 8 - export async function load({ params, platform, request }) { 9 9 - const { rkey } = params; 10 10 - 11 11 - const cache = createCache(platform); 12 12 - 13 13 - const did = await getActor({ request, paramActor: params.actor, platform }); 14 14 - 15 15 - if (!did || !rkey) { 16 16 - throw error(404, 'Event not found'); 17 17 - } 18 18 - 19 19 - try { 20 20 - const [eventRecord, hostProfile] = await Promise.all([ 21 21 - getRecord({ 22 22 - did: did as Did, 23 23 - collection: 'community.lexicon.calendar.event', 24 24 - rkey 25 25 - }).catch(() => null), 26 26 - cache 27 27 - ? cache.getProfile(did as Did).catch(() => null) 28 28 - : getBlentoOrBskyProfile({ did: did as Did }) 29 29 - .then( 30 30 - (p): CachedProfile => ({ 31 31 - did: p.did as string, 32 32 - handle: p.handle as string, 33 33 - displayName: p.displayName as string | undefined, 34 34 - avatar: p.avatar as string | undefined, 35 35 - hasBlento: p.hasBlento, 36 36 - url: p.url 37 37 - }) 38 38 - ) 39 39 - .catch(() => null) 40 40 - ]); 41 41 - 42 42 - if (!eventRecord?.value) { 43 43 - return { 44 44 - eventData: null, 45 45 - did, 46 46 - rkey, 47 47 - hostProfile: hostProfile ?? null, 48 48 - eventCid: null 49 49 - }; 50 50 - } 51 51 - 52 52 - const eventData: EventData = eventRecord.value as EventData; 53 53 - 54 54 - return { 55 55 - eventData, 56 56 - did, 57 57 - rkey, 58 58 - hostProfile: hostProfile ?? null, 59 59 - eventCid: (eventRecord.cid as string) ?? null 60 60 - }; 61 61 - } catch (e) { 62 62 - if (e && typeof e === 'object' && 'status' in e) throw e; 63 63 - throw error(404, 'Event not found'); 64 64 - } 65 65 - }

-1259

src/routes/[[actor=actor]]/events/[rkey]/edit/+page.svelte

reviewed

··· 1 1 - <script lang="ts"> 2 2 - import { user } from '$lib/atproto/auth.svelte'; 3 3 - import { atProtoLoginModalState } from '@foxui/social'; 4 4 - import { uploadBlob, putRecord, deleteRecord, resolveHandle } from '$lib/atproto/methods'; 5 5 - import { getCDNImageBlobUrl } from '$lib/atproto'; 6 6 - import { compressImage } from '$lib/atproto/image-helper'; 7 7 - import { validateLink } from '$lib/helper'; 8 8 - import { 9 9 - Avatar as FoxAvatar, 10 10 - Button, 11 11 - PopoverRoot, 12 12 - PopoverTrigger, 13 13 - PopoverContent, 14 14 - ToggleGroup, 15 15 - ToggleGroupItem, 16 16 - Input 17 17 - } from '@foxui/core'; 18 18 - import { goto } from '$app/navigation'; 19 19 - import { tokenize, type Token } from '@atcute/bluesky-richtext-parser'; 20 20 - import type { Handle } from '@atcute/lexicons'; 21 21 - import { onMount } from 'svelte'; 22 22 - import { browser } from '$app/environment'; 23 23 - import { putImage, getImage, deleteImage } from '$lib/components/image-store'; 24 24 - import Modal from '$lib/components/modal/Modal.svelte'; 25 25 - import Avatar from 'svelte-boring-avatars'; 26 26 - import DateTimePicker from '$lib/components/DateTimePicker.svelte'; 27 27 - 28 28 - let { data } = $props(); 29 29 - 30 30 - let rkey: string = $derived(data.rkey); 31 31 - let isNew = $derived(data.eventData === null); 32 32 - let DRAFT_KEY = $derived(`blento-event-edit-${rkey}`); 33 33 - 34 34 - type EventMode = 'inperson' | 'virtual' | 'hybrid'; 35 35 - 36 36 - interface EventLocation { 37 37 - street?: string; 38 38 - locality?: string; 39 39 - region?: string; 40 40 - country?: string; 41 41 - } 42 42 - 43 43 - interface EventDraft { 44 44 - name: string; 45 45 - description: string; 46 46 - startsAt: string; 47 47 - endsAt: string; 48 48 - links: Array<{ uri: string; name: string }>; 49 49 - mode?: EventMode; 50 50 - thumbnailKey?: string; 51 51 - thumbnailChanged?: boolean; 52 52 - location?: EventLocation | null; 53 53 - locationChanged?: boolean; 54 54 - } 55 55 - 56 56 - let thumbnailKey: string | null = $state(null); 57 57 - let thumbnailChanged = $state(false); 58 58 - 59 59 - let name = $state(''); 60 60 - let description = $state(''); 61 61 - let startsAt = $state(''); 62 62 - let endsAt = $state(''); 63 63 - let mode: EventMode = $state('inperson'); 64 64 - let thumbnailFile: File | null = $state(null); 65 65 - let thumbnailPreview: string | null = $state(null); 66 66 - let submitting = $state(false); 67 67 - let error: string | null = $state(null); 68 68 - let titleEl: HTMLTextAreaElement | undefined = $state(undefined); 69 69 - 70 70 - let location: EventLocation | null = $state(null); 71 71 - let locationChanged = $state(false); 72 72 - let showLocationModal = $state(false); 73 73 - let locationSearch = $state(''); 74 74 - let locationSearching = $state(false); 75 75 - let locationError = $state(''); 76 76 - let locationResult: { displayName: string; location: EventLocation } | null = $state(null); 77 77 - 78 78 - let links: Array<{ uri: string; name: string }> = $state([]); 79 79 - let editingDates = $state(false); 80 80 - let showLinkPopup = $state(false); 81 81 - let newLinkUri = $state(''); 82 82 - let newLinkName = $state(''); 83 83 - let linkError = $state(''); 84 84 - 85 85 - let draftLoaded = $state(false); 86 86 - 87 87 - function isoToDatetimeLocal(iso: string): string { 88 88 - const date = new Date(iso); 89 89 - const pad = (n: number) => n.toString().padStart(2, '0'); 90 90 - return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`; 91 91 - } 92 92 - 93 93 - function stripModePrefix(modeStr: string): EventMode { 94 94 - const stripped = modeStr.replace('community.lexicon.calendar.event#', ''); 95 95 - if (stripped === 'virtual' || stripped === 'hybrid' || stripped === 'inperson') return stripped; 96 96 - return 'inperson'; 97 97 - } 98 98 - 99 99 - function populateLocationFromEventData() { 100 100 - const eventData = data.eventData; 101 101 - if (!eventData) return; 102 102 - if (eventData.locations && eventData.locations.length > 0) { 103 103 - const loc = eventData.locations.find((v) => v.$type === 'community.lexicon.location.address'); 104 104 - if (loc) { 105 105 - const flat = loc as Record<string, unknown>; 106 106 - const nested = loc.address; 107 107 - const street = (flat.street as string) || undefined; 108 108 - const locality = (flat.locality as string) || nested?.locality; 109 109 - const region = (flat.region as string) || nested?.region; 110 110 - const country = (flat.country as string) || nested?.country; 111 111 - location = { 112 112 - ...(street && { street }), 113 113 - ...(locality && { locality }), 114 114 - ...(region && { region }), 115 115 - ...(country && { country }) 116 116 - }; 117 117 - } 118 118 - } 119 119 - locationChanged = false; 120 120 - } 121 121 - 122 122 - function populateThumbnailFromEventData() { 123 123 - const eventData = data.eventData; 124 124 - if (!eventData) return; 125 125 - if (eventData.media && eventData.media.length > 0) { 126 126 - const media = eventData.media.find((m) => m.role === 'thumbnail'); 127 127 - if (media?.content) { 128 128 - const url = getCDNImageBlobUrl({ did: data.did, blob: media.content, type: 'jpeg' }); 129 129 - if (url) { 130 130 - thumbnailPreview = url; 131 131 - thumbnailChanged = false; 132 132 - } 133 133 - } 134 134 - } 135 135 - } 136 136 - 137 137 - function populateFromEventData() { 138 138 - const eventData = data.eventData; 139 139 - if (!eventData) return; 140 140 - name = eventData.name || ''; 141 141 - description = eventData.description || ''; 142 142 - startsAt = eventData.startsAt ? isoToDatetimeLocal(eventData.startsAt) : ''; 143 143 - endsAt = eventData.endsAt ? isoToDatetimeLocal(eventData.endsAt) : ''; 144 144 - mode = eventData.mode ? stripModePrefix(eventData.mode) : 'inperson'; 145 145 - links = eventData.uris ? eventData.uris.map((l) => ({ uri: l.uri, name: l.name || '' })) : []; 146 146 - populateLocationFromEventData(); 147 147 - populateThumbnailFromEventData(); 148 148 - } 149 149 - 150 150 - onMount(async () => { 151 151 - // Migrate old creation draft if this is a new event 152 152 - if (isNew) { 153 153 - const oldDraft = localStorage.getItem('blento-event-draft'); 154 154 - if (oldDraft && !localStorage.getItem(DRAFT_KEY)) { 155 155 - localStorage.setItem(DRAFT_KEY, oldDraft); 156 156 - localStorage.removeItem('blento-event-draft'); 157 157 - } 158 158 - } 159 159 - 160 160 - const saved = localStorage.getItem(DRAFT_KEY); 161 161 - if (saved) { 162 162 - try { 163 163 - const draft: EventDraft = JSON.parse(saved); 164 164 - name = draft.name || ''; 165 165 - description = draft.description || ''; 166 166 - startsAt = draft.startsAt || ''; 167 167 - endsAt = draft.endsAt || ''; 168 168 - links = draft.links || []; 169 169 - mode = draft.mode || 'inperson'; 170 170 - locationChanged = draft.locationChanged || false; 171 171 - if (draft.locationChanged) { 172 172 - location = draft.location || null; 173 173 - } else if (!isNew) { 174 174 - // For edits without location changes, load from event data 175 175 - populateLocationFromEventData(); 176 176 - } 177 177 - thumbnailChanged = draft.thumbnailChanged || false; 178 178 - 179 179 - if (draft.thumbnailKey) { 180 180 - const img = await getImage(draft.thumbnailKey); 181 181 - if (img) { 182 182 - thumbnailKey = draft.thumbnailKey; 183 183 - thumbnailFile = new File([img.blob], img.name, { type: img.blob.type }); 184 184 - thumbnailPreview = URL.createObjectURL(img.blob); 185 185 - thumbnailChanged = true; 186 186 - } 187 187 - } else if (!thumbnailChanged && !isNew) { 188 188 - // No new thumbnail in draft, show existing one from event data 189 189 - populateThumbnailFromEventData(); 190 190 - } 191 191 - } catch { 192 192 - localStorage.removeItem(DRAFT_KEY); 193 193 - if (!isNew) populateFromEventData(); 194 194 - } 195 195 - } else if (!isNew) { 196 196 - populateFromEventData(); 197 197 - } 198 198 - draftLoaded = true; 199 199 - if (!startsAt) editingDates = true; 200 200 - titleEl?.focus(); 201 201 - }); 202 202 - 203 203 - let saveDraftTimeout: ReturnType<typeof setTimeout> | undefined; 204 204 - 205 205 - function saveDraft() { 206 206 - if (!draftLoaded || !browser) return; 207 207 - clearTimeout(saveDraftTimeout); 208 208 - saveDraftTimeout = setTimeout(() => { 209 209 - const draft: EventDraft = { 210 210 - name, 211 211 - description, 212 212 - startsAt, 213 213 - endsAt, 214 214 - links, 215 215 - mode, 216 216 - thumbnailChanged, 217 217 - locationChanged 218 218 - }; 219 219 - if (locationChanged) draft.location = location; 220 220 - if (thumbnailKey) draft.thumbnailKey = thumbnailKey; 221 221 - localStorage.setItem(DRAFT_KEY, JSON.stringify(draft)); 222 222 - }, 500); 223 223 - } 224 224 - 225 225 - $effect(() => { 226 226 - // track all draft fields by reading them 227 227 - void [ 228 228 - name, 229 229 - description, 230 230 - startsAt, 231 231 - endsAt, 232 232 - mode, 233 233 - JSON.stringify(links), 234 234 - JSON.stringify(location) 235 235 - ]; 236 236 - saveDraft(); 237 237 - }); 238 238 - 239 239 - async function searchLocation() { 240 240 - const q = locationSearch.trim(); 241 241 - if (!q) return; 242 242 - locationError = ''; 243 243 - locationSearching = true; 244 244 - locationResult = null; 245 245 - 246 246 - try { 247 247 - const response = await fetch('/api/geocoding?q=' + encodeURIComponent(q)); 248 248 - if (!response.ok) throw new Error('response not ok'); 249 249 - const data = await response.json(); 250 250 - if (!data || data.error) throw new Error('no results'); 251 251 - 252 252 - const addr = data.address || {}; 253 253 - const road = addr.road || ''; 254 254 - const houseNumber = addr.house_number || ''; 255 255 - const street = road ? (houseNumber ? `${road} ${houseNumber}` : road) : ''; 256 256 - const locality = 257 257 - addr.city || addr.town || addr.village || addr.municipality || addr.hamlet || ''; 258 258 - const region = addr.state || addr.county || ''; 259 259 - const country = addr.country || ''; 260 260 - 261 261 - locationResult = { 262 262 - displayName: data.display_name || q, 263 263 - location: { 264 264 - ...(street && { street }), 265 265 - ...(locality && { locality }), 266 266 - ...(region && { region }), 267 267 - ...(country && { country }) 268 268 - } 269 269 - }; 270 270 - } catch { 271 271 - locationError = "Couldn't find that location."; 272 272 - } finally { 273 273 - locationSearching = false; 274 274 - } 275 275 - } 276 276 - 277 277 - function confirmLocation() { 278 278 - if (locationResult) { 279 279 - location = locationResult.location; 280 280 - locationChanged = true; 281 281 - } 282 282 - showLocationModal = false; 283 283 - locationSearch = ''; 284 284 - locationResult = null; 285 285 - locationError = ''; 286 286 - } 287 287 - 288 288 - function removeLocation() { 289 289 - location = null; 290 290 - locationChanged = true; 291 291 - } 292 292 - 293 293 - function getLocationDisplayString(loc: EventLocation): string { 294 294 - return [loc.street, loc.locality, loc.region, loc.country].filter(Boolean).join(', '); 295 295 - } 296 296 - 297 297 - function addLink() { 298 298 - const raw = newLinkUri.trim(); 299 299 - if (!raw) return; 300 300 - const uri = validateLink(raw); 301 301 - if (!uri) { 302 302 - linkError = 'Please enter a valid URL'; 303 303 - return; 304 304 - } 305 305 - links.push({ uri, name: newLinkName.trim() }); 306 306 - newLinkUri = ''; 307 307 - newLinkName = ''; 308 308 - linkError = ''; 309 309 - showLinkPopup = false; 310 310 - } 311 311 - 312 312 - function removeLink(index: number) { 313 313 - links.splice(index, 1); 314 314 - } 315 315 - 316 316 - let fileInput: HTMLInputElement | undefined = $state(); 317 317 - 318 318 - let hostName = $derived(user.profile?.displayName || user.profile?.handle || user.did || ''); 319 319 - 320 320 - async function setThumbnail(file: File) { 321 321 - thumbnailFile = file; 322 322 - thumbnailChanged = true; 323 323 - if (thumbnailPreview) URL.revokeObjectURL(thumbnailPreview); 324 324 - thumbnailPreview = URL.createObjectURL(file); 325 325 - 326 326 - if (thumbnailKey) await deleteImage(thumbnailKey); 327 327 - thumbnailKey = crypto.randomUUID(); 328 328 - await putImage(thumbnailKey, file, file.name); 329 329 - saveDraft(); 330 330 - } 331 331 - 332 332 - async function onFileChange(e: Event) { 333 333 - const input = e.target as HTMLInputElement; 334 334 - const file = input.files?.[0]; 335 335 - if (!file) return; 336 336 - setThumbnail(file); 337 337 - } 338 338 - 339 339 - let isDragOver = $state(false); 340 340 - 341 341 - function onDragOver(e: DragEvent) { 342 342 - e.preventDefault(); 343 343 - isDragOver = true; 344 344 - } 345 345 - 346 346 - function onDragLeave(e: DragEvent) { 347 347 - e.preventDefault(); 348 348 - isDragOver = false; 349 349 - } 350 350 - 351 351 - function onDrop(e: DragEvent) { 352 352 - e.preventDefault(); 353 353 - isDragOver = false; 354 354 - const file = e.dataTransfer?.files?.[0]; 355 355 - if (file?.type.startsWith('image/')) { 356 356 - setThumbnail(file); 357 357 - } 358 358 - } 359 359 - 360 360 - function removeThumbnail() { 361 361 - thumbnailFile = null; 362 362 - thumbnailChanged = true; 363 363 - if (thumbnailPreview) { 364 364 - URL.revokeObjectURL(thumbnailPreview); 365 365 - thumbnailPreview = null; 366 366 - } 367 367 - if (thumbnailKey) { 368 368 - deleteImage(thumbnailKey); 369 369 - thumbnailKey = null; 370 370 - } 371 371 - if (fileInput) fileInput.value = ''; 372 372 - saveDraft(); 373 373 - } 374 374 - 375 375 - function formatMonth(date: Date): string { 376 376 - return date.toLocaleDateString('en-US', { month: 'short' }).toUpperCase(); 377 377 - } 378 378 - 379 379 - function formatDay(date: Date): number { 380 380 - return date.getDate(); 381 381 - } 382 382 - 383 383 - function formatWeekday(date: Date): string { 384 384 - return date.toLocaleDateString('en-US', { weekday: 'long' }); 385 385 - } 386 386 - 387 387 - function formatFullDate(date: Date): string { 388 388 - const options: Intl.DateTimeFormatOptions = { month: 'long', day: 'numeric' }; 389 389 - if (date.getFullYear() !== new Date().getFullYear()) { 390 390 - options.year = 'numeric'; 391 391 - } 392 392 - return date.toLocaleDateString('en-US', options); 393 393 - } 394 394 - 395 395 - function formatTime(date: Date): string { 396 396 - return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }); 397 397 - } 398 398 - 399 399 - let startDate = $derived(startsAt ? new Date(startsAt) : null); 400 400 - let endDate = $derived(endsAt ? new Date(endsAt) : null); 401 401 - let isSameDay = $derived( 402 402 - startDate && 403 403 - endDate && 404 404 - startDate.getFullYear() === endDate.getFullYear() && 405 405 - startDate.getMonth() === endDate.getMonth() && 406 406 - startDate.getDate() === endDate.getDate() 407 407 - ); 408 408 - 409 409 - // Auto-adjust end date if start moves past it 410 410 - $effect(() => { 411 411 - if (startsAt && endsAt) { 412 412 - const s = new Date(startsAt); 413 413 - const e = new Date(endsAt); 414 414 - if (s >= e) { 415 415 - // eslint-disable-next-line svelte/prefer-svelte-reactivity -- temporary local, not reactive state 416 416 - const adjusted = new Date(s); 417 417 - adjusted.setHours(adjusted.getHours() + 1); 418 418 - endsAt = isoToDatetimeLocal(adjusted.toISOString()); 419 419 - } 420 420 - } 421 421 - }); 422 422 - 423 423 - async function tokensToFacets(tokens: Token[]): Promise<Record<string, unknown>[]> { 424 424 - const encoder = new TextEncoder(); 425 425 - const facets: Record<string, unknown>[] = []; 426 426 - let byteOffset = 0; 427 427 - 428 428 - for (const token of tokens) { 429 429 - const tokenBytes = encoder.encode(token.raw); 430 430 - const byteStart = byteOffset; 431 431 - const byteEnd = byteOffset + tokenBytes.length; 432 432 - 433 433 - if (token.type === 'mention') { 434 434 - try { 435 435 - const did = await resolveHandle({ handle: token.handle as Handle }); 436 436 - if (did) { 437 437 - facets.push({ 438 438 - index: { byteStart, byteEnd }, 439 439 - features: [{ $type: 'app.bsky.richtext.facet#mention', did }] 440 440 - }); 441 441 - } 442 442 - } catch { 443 443 - // skip unresolvable mentions 444 444 - } 445 445 - } else if (token.type === 'autolink') { 446 446 - facets.push({ 447 447 - index: { byteStart, byteEnd }, 448 448 - features: [{ $type: 'app.bsky.richtext.facet#link', uri: token.url }] 449 449 - }); 450 450 - } else if (token.type === 'topic') { 451 451 - facets.push({ 452 452 - index: { byteStart, byteEnd }, 453 453 - features: [{ $type: 'app.bsky.richtext.facet#tag', tag: token.name }] 454 454 - }); 455 455 - } 456 456 - 457 457 - byteOffset = byteEnd; 458 458 - } 459 459 - 460 460 - return facets; 461 461 - } 462 462 - 463 463 - async function handleSubmit() { 464 464 - error = null; 465 465 - 466 466 - if (!name.trim()) { 467 467 - error = 'Name is required.'; 468 468 - return; 469 469 - } 470 470 - if (!startsAt) { 471 471 - error = 'Start date is required.'; 472 472 - return; 473 473 - } 474 474 - if (!user.client || !user.did) { 475 475 - error = 'You must be logged in.'; 476 476 - return; 477 477 - } 478 478 - 479 479 - submitting = true; 480 480 - 481 481 - try { 482 482 - let media: Array<Record<string, unknown>> | undefined; 483 483 - 484 484 - if (isNew || thumbnailChanged) { 485 485 - if (thumbnailFile) { 486 486 - const compressed = await compressImage(thumbnailFile); 487 487 - const blobRef = await uploadBlob({ blob: compressed.blob }); 488 488 - if (blobRef) { 489 489 - media = [ 490 490 - { 491 491 - role: 'thumbnail', 492 492 - content: blobRef, 493 493 - aspect_ratio: { 494 494 - width: compressed.aspectRatio.width, 495 495 - height: compressed.aspectRatio.height 496 496 - } 497 497 - } 498 498 - ]; 499 499 - } 500 500 - } 501 501 - // If changed/new but no thumbnailFile, media stays undefined (thumbnail removed/absent) 502 502 - } else { 503 503 - // Thumbnail not changed — reuse original media from eventData 504 504 - if (data.eventData?.media && data.eventData.media.length > 0) { 505 505 - media = data.eventData.media as Array<Record<string, unknown>>; 506 506 - } 507 507 - } 508 508 - 509 509 - const createdAt = isNew 510 510 - ? new Date().toISOString() 511 511 - : ((data.eventData as Record<string, unknown>)?.createdAt as string) || 512 512 - new Date().toISOString(); 513 513 - 514 514 - const record: Record<string, unknown> = { 515 515 - $type: 'community.lexicon.calendar.event', 516 516 - name: name.trim(), 517 517 - mode: `community.lexicon.calendar.event#${mode}`, 518 518 - status: 'community.lexicon.calendar.event#scheduled', 519 519 - startsAt: new Date(startsAt).toISOString(), 520 520 - createdAt 521 521 - }; 522 522 - 523 523 - const trimmedDescription = description.trim(); 524 524 - if (trimmedDescription) { 525 525 - record.description = trimmedDescription; 526 526 - const tokens = tokenize(trimmedDescription); 527 527 - const facets = await tokensToFacets(tokens); 528 528 - if (facets.length > 0) { 529 529 - record.facets = facets; 530 530 - } 531 531 - } 532 532 - if (endsAt) { 533 533 - record.endsAt = new Date(endsAt).toISOString(); 534 534 - } 535 535 - if (media) { 536 536 - record.media = media; 537 537 - } 538 538 - if (links.length > 0) { 539 539 - record.uris = links; 540 540 - } 541 541 - if (isNew || locationChanged) { 542 542 - if (location) { 543 543 - record.locations = [ 544 544 - { 545 545 - $type: 'community.lexicon.location.address', 546 546 - ...location 547 547 - } 548 548 - ]; 549 549 - } 550 550 - // If changed/new but no location, locations stays undefined (removed/absent) 551 551 - } else if (data.eventData?.locations && data.eventData.locations.length > 0) { 552 552 - record.locations = data.eventData.locations; 553 553 - } 554 554 - 555 555 - const response = await putRecord({ 556 556 - collection: 'community.lexicon.calendar.event', 557 557 - rkey, 558 558 - record 559 559 - }); 560 560 - 561 561 - if (response.ok) { 562 562 - localStorage.removeItem(DRAFT_KEY); 563 563 - if (thumbnailKey) deleteImage(thumbnailKey); 564 564 - const handle = 565 565 - user.profile?.handle && user.profile.handle !== 'handle.invalid' 566 566 - ? user.profile.handle 567 567 - : user.did; 568 568 - fetch(`/${handle}/events/api/refresh`).catch(() => {}); 569 569 - goto(`/${handle}/events/${rkey}`); 570 570 - } else { 571 571 - error = `Failed to ${isNew ? 'create' : 'save'} event. Please try again.`; 572 572 - } 573 573 - } catch (e) { 574 574 - console.error(`Failed to ${isNew ? 'create' : 'save'} event:`, e); 575 575 - error = `Failed to ${isNew ? 'create' : 'save'} event. Please try again.`; 576 576 - } finally { 577 577 - submitting = false; 578 578 - } 579 579 - } 580 580 - 581 581 - let showDeleteConfirm = $state(false); 582 582 - let deleting = $state(false); 583 583 - 584 584 - async function handleDelete() { 585 585 - deleting = true; 586 586 - try { 587 587 - await deleteRecord({ 588 588 - collection: 'community.lexicon.calendar.event', 589 589 - rkey 590 590 - }); 591 591 - localStorage.removeItem(DRAFT_KEY); 592 592 - if (thumbnailKey) deleteImage(thumbnailKey); 593 593 - const handle = 594 594 - user.profile?.handle && user.profile.handle !== 'handle.invalid' 595 595 - ? user.profile.handle 596 596 - : user.did; 597 597 - fetch(`/${handle}/events/api/refresh`).catch(() => {}); 598 598 - goto(`/${handle}/events`); 599 599 - } catch (e) { 600 600 - console.error('Failed to delete event:', e); 601 601 - error = 'Failed to delete event. Please try again.'; 602 602 - } finally { 603 603 - deleting = false; 604 604 - showDeleteConfirm = false; 605 605 - } 606 606 - } 607 607 - </script> 608 608 - 609 609 - <svelte:head> 610 610 - <title>{isNew ? 'Create Event' : 'Edit Event'}</title> 611 611 - </svelte:head> 612 612 - 613 613 - <div class="min-h-screen px-6 py-12 sm:py-12"> 614 614 - <div class="mx-auto max-w-3xl"> 615 615 - {#if user.isInitializing} 616 616 - <div class="flex items-center gap-3"> 617 617 - <div class="bg-base-300 dark:bg-base-700 size-5 animate-pulse rounded-full"></div> 618 618 - <div class="bg-base-300 dark:bg-base-700 h-4 w-48 animate-pulse rounded"></div> 619 619 - </div> 620 620 - {:else if !user.isLoggedIn} 621 621 - <div 622 622 - class="border-base-200 dark:border-base-800 bg-base-100 dark:bg-base-900/50 rounded-2xl border p-8 text-center" 623 623 - > 624 624 - <p class="text-base-600 dark:text-base-400 mb-4"> 625 625 - Log in to {isNew ? 'create an event' : 'edit this event'}. 626 626 - </p> 627 627 - <Button onclick={() => atProtoLoginModalState.show()}>Log in</Button> 628 628 - </div> 629 629 - {:else} 630 630 - <form 631 631 - onsubmit={(e) => { 632 632 - e.preventDefault(); 633 633 - handleSubmit(); 634 634 - }} 635 635 - > 636 636 - <!-- Two-column layout mirroring detail page --> 637 637 - <div 638 638 - class="grid grid-cols-1 gap-8 md:grid-cols-[14rem_1fr] md:gap-x-10 md:gap-y-6 lg:grid-cols-[16rem_1fr]" 639 639 - > 640 640 - <!-- Thumbnail (left column) --> 641 641 - <!-- svelte-ignore a11y_no_static_element_interactions --> 642 642 - <div 643 643 - class="order-1 max-w-sm md:order-0 md:col-start-1 md:max-w-none" 644 644 - ondragover={onDragOver} 645 645 - ondragleave={onDragLeave} 646 646 - ondrop={onDrop} 647 647 - > 648 648 - <input 649 649 - bind:this={fileInput} 650 650 - type="file" 651 651 - accept="image/*" 652 652 - onchange={onFileChange} 653 653 - class="hidden" 654 654 - /> 655 655 - <div class="group relative"> 656 656 - {#if thumbnailPreview} 657 657 - <img 658 658 - src={thumbnailPreview} 659 659 - alt="Thumbnail preview" 660 660 - class="border-base-200 dark:border-base-800 aspect-square w-full rounded-2xl border object-cover" 661 661 - /> 662 662 - {:else} 663 663 - <div 664 664 - class="bg-base-100 dark:bg-base-900 aspect-square w-full overflow-hidden rounded-2xl [&>svg]:h-full [&>svg]:w-full" 665 665 - > 666 666 - <Avatar 667 667 - size={400} 668 668 - name={rkey} 669 669 - variant="marble" 670 670 - colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']} 671 671 - square 672 672 - /> 673 673 - </div> 674 674 - {/if} 675 675 - <!-- Upload overlay on hover --> 676 676 - <button 677 677 - type="button" 678 678 - onclick={() => fileInput?.click()} 679 679 - class="absolute inset-0 flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-2xl bg-black/0 text-white/0 transition-colors group-hover:bg-black/40 group-hover:text-white/90 {isDragOver 680 680 - ? 'bg-black/40 text-white/90' 681 681 - : ''}" 682 682 - > 683 683 - <svg 684 684 - xmlns="http://www.w3.org/2000/svg" 685 685 - fill="none" 686 686 - viewBox="0 0 24 24" 687 687 - stroke-width="1.5" 688 688 - stroke="currentColor" 689 689 - class="size-6" 690 690 - > 691 691 - <path 692 692 - stroke-linecap="round" 693 693 - stroke-linejoin="round" 694 694 - d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z" 695 695 - /> 696 696 - </svg> 697 697 - <span class="text-sm font-medium">Upload thumbnail</span> 698 698 - </button> 699 699 - {#if thumbnailPreview} 700 700 - <Button 701 701 - variant="ghost" 702 702 - size="iconSm" 703 703 - onclick={removeThumbnail} 704 704 - class="bg-base-900/70 absolute top-2 right-2 text-white opacity-0 transition-opacity group-hover:opacity-100 hover:bg-red-600" 705 705 - > 706 706 - <svg 707 707 - xmlns="http://www.w3.org/2000/svg" 708 708 - viewBox="0 0 20 20" 709 709 - fill="currentColor" 710 710 - class="size-3.5" 711 711 - > 712 712 - <path 713 713 - d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" 714 714 - /> 715 715 - </svg> 716 716 - </Button> 717 717 - {/if} 718 718 - </div> 719 719 - </div> 720 720 - 721 721 - <!-- Right column: event details --> 722 722 - <div class="order-2 min-w-0 md:order-0 md:col-start-2 md:row-span-5 md:row-start-1"> 723 723 - <!-- Name + Save button --> 724 724 - <div class="mb-2 flex items-start justify-between gap-4"> 725 725 - <textarea 726 726 - bind:this={titleEl} 727 727 - bind:value={name} 728 728 - required 729 729 - placeholder="Event name" 730 730 - rows={1} 731 731 - class="text-base-900 dark:text-base-50 placeholder:text-base-500 dark:placeholder:text-base-500 w-full min-w-0 resize-none border-0 bg-transparent px-0 text-4xl leading-tight font-bold focus:border-0 focus:ring-0 focus:outline-none sm:text-5xl" 732 732 - style="field-sizing: content;" 733 733 - ></textarea> 734 734 - <Button 735 735 - type="submit" 736 736 - size="sm" 737 737 - class="shrink-0" 738 738 - disabled={submitting || !name.trim() || !startsAt} 739 739 - > 740 740 - {submitting ? (isNew ? 'Creating...' : 'Saving...') : isNew ? 'Create' : 'Save'} 741 741 - </Button> 742 742 - </div> 743 743 - 744 744 - <!-- Mode toggle --> 745 745 - <div class="mb-8"> 746 746 - <ToggleGroup 747 747 - type="single" 748 748 - bind:value={ 749 749 - () => { 750 750 - return mode; 751 751 - }, 752 752 - (val) => { 753 753 - if (val) mode = val; 754 754 - } 755 755 - } 756 756 - class="w-fit" 757 757 - > 758 758 - <ToggleGroupItem size="sm" value="inperson">In Person</ToggleGroupItem> 759 759 - <ToggleGroupItem size="sm" value="virtual">Virtual</ToggleGroupItem> 760 760 - <ToggleGroupItem size="sm" value="hybrid">Hybrid</ToggleGroupItem> 761 761 - </ToggleGroup> 762 762 - </div> 763 763 - 764 764 - <!-- Date row --> 765 765 - <div class="mb-4 flex items-start gap-4"> 766 766 - <div 767 767 - class="border-base-200 dark:border-base-700 bg-base-100 dark:bg-base-950/30 flex size-12 shrink-0 flex-col items-center justify-center overflow-hidden rounded-xl border" 768 768 - > 769 769 - {#if startDate} 770 770 - <span 771 771 - class="text-base-500 dark:text-base-400 text-[9px] leading-none font-semibold" 772 772 - > 773 773 - {formatMonth(startDate)} 774 774 - </span> 775 775 - <span class="text-base-900 dark:text-base-50 text-lg leading-tight font-bold"> 776 776 - {formatDay(startDate)} 777 777 - </span> 778 778 - {:else} 779 779 - <svg 780 780 - xmlns="http://www.w3.org/2000/svg" 781 781 - fill="none" 782 782 - viewBox="0 0 24 24" 783 783 - stroke-width="1.5" 784 784 - stroke="currentColor" 785 785 - class="text-base-900 dark:text-base-200 size-5" 786 786 - > 787 787 - <path 788 788 - stroke-linecap="round" 789 789 - stroke-linejoin="round" 790 790 - d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" 791 791 - /> 792 792 - </svg> 793 793 - {/if} 794 794 - </div> 795 795 - <div class="flex-1"> 796 796 - {#if startDate && !editingDates} 797 797 - <!-- Display mode: show formatted date, click to edit --> 798 798 - <div class="flex items-start gap-2"> 799 799 - <button 800 800 - type="button" 801 801 - onclick={() => (editingDates = true)} 802 802 - class="cursor-pointer text-left" 803 803 - > 804 804 - <p class="text-base-900 dark:text-base-50 font-semibold"> 805 805 - {formatWeekday(startDate)}, {formatFullDate(startDate)} 806 806 - {#if endDate && !isSameDay} 807 807 - - {formatWeekday(endDate)}, {formatFullDate(endDate)} 808 808 - {/if} 809 809 - </p> 810 810 - <p class="text-base-500 dark:text-base-400 text-sm"> 811 811 - {formatTime(startDate)} 812 812 - {#if endDate && isSameDay} 813 813 - - {formatTime(endDate)} 814 814 - {/if} 815 815 - </p> 816 816 - </button> 817 817 - <Button variant="ghost" size="iconSm" onclick={() => (editingDates = true)}> 818 818 - <svg 819 819 - xmlns="http://www.w3.org/2000/svg" 820 820 - fill="none" 821 821 - viewBox="0 0 24 24" 822 822 - stroke-width="1.5" 823 823 - stroke="currentColor" 824 824 - class="size-3.5" 825 825 - > 826 826 - <path 827 827 - stroke-linecap="round" 828 828 - stroke-linejoin="round" 829 829 - d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" 830 830 - /> 831 831 - </svg> 832 832 - </Button> 833 833 - </div> 834 834 - {:else} 835 835 - <!-- Edit mode: show pickers --> 836 836 - <div class="flex flex-col gap-2"> 837 837 - <div class="flex items-center gap-2"> 838 838 - {#if endsAt} 839 839 - <span class="text-base-500 dark:text-base-400 w-9 text-xs">Start</span> 840 840 - {/if} 841 841 - <DateTimePicker bind:value={startsAt} required /> 842 842 - </div> 843 843 - {#if endsAt} 844 844 - <div class="flex items-center gap-2"> 845 845 - <span class="text-base-500 dark:text-base-400 w-9 text-xs">End</span> 846 846 - <DateTimePicker bind:value={endsAt} minValue={startsAt} /> 847 847 - <Button variant="ghost" size="iconSm" onclick={() => (endsAt = '')}> 848 848 - <svg 849 849 - xmlns="http://www.w3.org/2000/svg" 850 850 - fill="none" 851 851 - viewBox="0 0 24 24" 852 852 - stroke-width="1.5" 853 853 - stroke="currentColor" 854 854 - class="size-3.5" 855 855 - > 856 856 - <path 857 857 - stroke-linecap="round" 858 858 - stroke-linejoin="round" 859 859 - d="M6 18 18 6M6 6l12 12" 860 860 - /> 861 861 - </svg> 862 862 - </Button> 863 863 - </div> 864 864 - {:else} 865 865 - <Button 866 866 - variant="ghost" 867 867 - size="sm" 868 868 - class="w-fit" 869 869 - onclick={() => { 870 870 - if (startsAt) { 871 871 - const d = new Date(startsAt); 872 872 - d.setHours(d.getHours() + 1); 873 873 - endsAt = isoToDatetimeLocal(d.toISOString()); 874 874 - } else { 875 875 - endsAt = ''; 876 876 - } 877 877 - }} 878 878 - > 879 879 - <svg 880 880 - xmlns="http://www.w3.org/2000/svg" 881 881 - fill="none" 882 882 - viewBox="0 0 24 24" 883 883 - stroke-width="1.5" 884 884 - stroke="currentColor" 885 885 - class="size-3.5" 886 886 - > 887 887 - <path 888 888 - stroke-linecap="round" 889 889 - stroke-linejoin="round" 890 890 - d="M12 4.5v15m7.5-7.5h-15" 891 891 - /> 892 892 - </svg> 893 893 - Add end date 894 894 - </Button> 895 895 - {/if} 896 896 - {#if startDate} 897 897 - <Button size="sm" onclick={() => (editingDates = false)} class="mt-1 w-fit"> 898 898 - <svg 899 899 - xmlns="http://www.w3.org/2000/svg" 900 900 - fill="none" 901 901 - viewBox="0 0 24 24" 902 902 - stroke-width="2" 903 903 - stroke="currentColor" 904 904 - class="size-3.5" 905 905 - > 906 906 - <path 907 907 - stroke-linecap="round" 908 908 - stroke-linejoin="round" 909 909 - d="m4.5 12.75 6 6 9-13.5" 910 910 - /> 911 911 - </svg> 912 912 - Done 913 913 - </Button> 914 914 - {/if} 915 915 - </div> 916 916 - {/if} 917 917 - </div> 918 918 - </div> 919 919 - 920 920 - <!-- Location row --> 921 921 - {#if location} 922 922 - <div class="mb-6 flex items-center gap-4"> 923 923 - <div 924 924 - class="border-base-200 dark:border-base-700 bg-base-100 dark:bg-base-950/30 flex size-12 shrink-0 items-center justify-center rounded-xl border" 925 925 - > 926 926 - <svg 927 927 - xmlns="http://www.w3.org/2000/svg" 928 928 - fill="none" 929 929 - viewBox="0 0 24 24" 930 930 - stroke-width="1.5" 931 931 - stroke="currentColor" 932 932 - class="text-base-900 dark:text-base-200 size-5" 933 933 - > 934 934 - <path 935 935 - stroke-linecap="round" 936 936 - stroke-linejoin="round" 937 937 - d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" 938 938 - /> 939 939 - <path 940 940 - stroke-linecap="round" 941 941 - stroke-linejoin="round" 942 942 - d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" 943 943 - /> 944 944 - </svg> 945 945 - </div> 946 946 - <p class="text-base-900 dark:text-base-50 flex-1 font-semibold"> 947 947 - {getLocationDisplayString(location)} 948 948 - </p> 949 949 - <Button variant="ghost" size="iconSm" onclick={removeLocation} class="shrink-0"> 950 950 - <svg 951 951 - xmlns="http://www.w3.org/2000/svg" 952 952 - viewBox="0 0 20 20" 953 953 - fill="currentColor" 954 954 - class="size-3.5" 955 955 - > 956 956 - <path 957 957 - d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" 958 958 - /> 959 959 - </svg> 960 960 - </Button> 961 961 - </div> 962 962 - {:else} 963 963 - <div class="mb-6"> 964 964 - <Button variant="ghost" onclick={() => (showLocationModal = true)}> 965 965 - <svg 966 966 - xmlns="http://www.w3.org/2000/svg" 967 967 - fill="none" 968 968 - viewBox="0 0 24 24" 969 969 - stroke-width="1.5" 970 970 - stroke="currentColor" 971 971 - class="size-4" 972 972 - > 973 973 - <path 974 974 - stroke-linecap="round" 975 975 - stroke-linejoin="round" 976 976 - d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" 977 977 - /> 978 978 - <path 979 979 - stroke-linecap="round" 980 980 - stroke-linejoin="round" 981 981 - d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" 982 982 - /> 983 983 - </svg> 984 984 - Add location 985 985 - </Button> 986 986 - </div> 987 987 - {/if} 988 988 - 989 989 - <!-- About Event --> 990 990 - <div class="mt-8 mb-8"> 991 991 - <p 992 992 - class="text-base-500 dark:text-base-400 mb-3 text-xs font-semibold tracking-wider uppercase" 993 993 - > 994 994 - About 995 995 - </p> 996 996 - <textarea 997 997 - bind:value={description} 998 998 - rows={4} 999 999 - placeholder="What's this event about? @mentions, #hashtags and links will be detected automatically." 1000 1000 - class="text-base-700 dark:text-base-300 placeholder:text-base-500 dark:placeholder:text-base-500 w-full resize-none border-0 bg-transparent px-0 leading-relaxed focus:border-0 focus:ring-0 focus:outline-none" 1001 1001 - style="field-sizing: content;" 1002 1002 - ></textarea> 1003 1003 - </div> 1004 1004 - 1005 1005 - {#if error} 1006 1006 - <p class="mb-4 text-sm text-red-600 dark:text-red-400">{error}</p> 1007 1007 - {/if} 1008 1008 - 1009 1009 - <Button type="submit" disabled={submitting || !name.trim() || !startsAt}> 1010 1010 - {submitting 1011 1011 - ? isNew 1012 1012 - ? 'Creating...' 1013 1013 - : 'Saving...' 1014 1014 - : isNew 1015 1015 - ? 'Create Event' 1016 1016 - : 'Save Changes'} 1017 1017 - </Button> 1018 1018 - </div> 1019 1019 - 1020 1020 - <!-- Hosted By --> 1021 1021 - <div class="order-3 md:order-0 md:col-start-1"> 1022 1022 - <p 1023 1023 - class="text-base-500 dark:text-base-400 mb-3 text-xs font-semibold tracking-wider uppercase" 1024 1024 - > 1025 1025 - Hosted By 1026 1026 - </p> 1027 1027 - <div class="flex items-center gap-2.5"> 1028 1028 - <FoxAvatar src={user.profile?.avatar} alt={hostName} class="size-8 shrink-0" /> 1029 1029 - <span class="text-base-900 dark:text-base-100 truncate text-sm font-medium"> 1030 1030 - {hostName} 1031 1031 - </span> 1032 1032 - </div> 1033 1033 - </div> 1034 1034 - 1035 1035 - <!-- Links --> 1036 1036 - <div class="order-4 md:order-0 md:col-start-1"> 1037 1037 - <p 1038 1038 - class="text-base-500 dark:text-base-400 mb-4 text-xs font-semibold tracking-wider uppercase" 1039 1039 - > 1040 1040 - Links 1041 1041 - </p> 1042 1042 - <div class="space-y-3"> 1043 1043 - {#each links as link, i (i)} 1044 1044 - <div class="group flex items-center gap-1.5"> 1045 1045 - <svg 1046 1046 - xmlns="http://www.w3.org/2000/svg" 1047 1047 - fill="none" 1048 1048 - viewBox="0 0 24 24" 1049 1049 - stroke-width="1.5" 1050 1050 - stroke="currentColor" 1051 1051 - class="text-base-700 dark:text-base-300 size-3.5 shrink-0" 1052 1052 - > 1053 1053 - <path 1054 1054 - stroke-linecap="round" 1055 1055 - stroke-linejoin="round" 1056 1056 - d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" 1057 1057 - /> 1058 1058 - </svg> 1059 1059 - <span class="text-base-700 dark:text-base-300 truncate text-sm"> 1060 1060 - {link.name || link.uri.replace(/^https?:\/\//, '')} 1061 1061 - </span> 1062 1062 - <Button 1063 1063 - variant="ghost" 1064 1064 - size="iconSm" 1065 1065 - onclick={() => removeLink(i)} 1066 1066 - class="ml-auto shrink-0 opacity-0 transition-opacity group-hover:opacity-100" 1067 1067 - > 1068 1068 - <svg 1069 1069 - xmlns="http://www.w3.org/2000/svg" 1070 1070 - viewBox="0 0 20 20" 1071 1071 - fill="currentColor" 1072 1072 - class="size-3.5" 1073 1073 - > 1074 1074 - <path 1075 1075 - d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" 1076 1076 - /> 1077 1077 - </svg> 1078 1078 - </Button> 1079 1079 - </div> 1080 1080 - {/each} 1081 1081 - </div> 1082 1082 - 1083 1083 - <div class="mt-3"> 1084 1084 - <PopoverRoot bind:open={showLinkPopup}> 1085 1085 - <PopoverTrigger> 1086 1086 - <Button size="sm"> 1087 1087 - <svg 1088 1088 - xmlns="http://www.w3.org/2000/svg" 1089 1089 - fill="none" 1090 1090 - viewBox="0 0 24 24" 1091 1091 - stroke-width="1.5" 1092 1092 - stroke="currentColor" 1093 1093 - class="size-4" 1094 1094 - > 1095 1095 - <path 1096 1096 - stroke-linecap="round" 1097 1097 - stroke-linejoin="round" 1098 1098 - d="M12 4.5v15m7.5-7.5h-15" 1099 1099 - /> 1100 1100 - </svg> 1101 1101 - 1102 1102 - Add link 1103 1103 - </Button> 1104 1104 - </PopoverTrigger> 1105 1105 - <PopoverContent side="bottom" sideOffset={8} class="w-64 p-3"> 1106 1106 - <Input 1107 1107 - type="url" 1108 1108 - bind:value={newLinkUri} 1109 1109 - placeholder="https://..." 1110 1110 - variant="secondary" 1111 1111 - class="mb-2" 1112 1112 - onkeydown={(e) => { 1113 1113 - if (e.key === 'Enter') { 1114 1114 - e.preventDefault(); 1115 1115 - addLink(); 1116 1116 - } 1117 1117 - }} 1118 1118 - /> 1119 1119 - <Input 1120 1120 - type="text" 1121 1121 - bind:value={newLinkName} 1122 1122 - placeholder="Label (optional)" 1123 1123 - variant="secondary" 1124 1124 - class="mb-2" 1125 1125 - onkeydown={(e) => { 1126 1126 - if (e.key === 'Enter') { 1127 1127 - e.preventDefault(); 1128 1128 - addLink(); 1129 1129 - } 1130 1130 - }} 1131 1131 - /> 1132 1132 - {#if linkError} 1133 1133 - <p class="mb-2 text-xs text-red-500">{linkError}</p> 1134 1134 - {/if} 1135 1135 - <div class="flex justify-end gap-2"> 1136 1136 - <Button 1137 1137 - variant="ghost" 1138 1138 - size="sm" 1139 1139 - onclick={() => { 1140 1140 - showLinkPopup = false; 1141 1141 - linkError = ''; 1142 1142 - newLinkUri = ''; 1143 1143 - newLinkName = ''; 1144 1144 - }} 1145 1145 - > 1146 1146 - Cancel 1147 1147 - </Button> 1148 1148 - <Button onclick={addLink} size="sm" disabled={!newLinkUri.trim()}>Add</Button> 1149 1149 - </div> 1150 1150 - </PopoverContent> 1151 1151 - </PopoverRoot> 1152 1152 - </div> 1153 1153 - </div> 1154 1154 - </div> 1155 1155 - 1156 1156 - {#if !isNew} 1157 1157 - <div class="border-base-200 dark:border-base-800 mt-12 border-t pt-8"> 1158 1158 - {#if showDeleteConfirm} 1159 1159 - <div class="flex items-center gap-3"> 1160 1160 - <p class="text-sm text-red-600 dark:text-red-400"> 1161 1161 - Are you sure? This cannot be undone. 1162 1162 - </p> 1163 1163 - <Button 1164 1164 - variant="secondary" 1165 1165 - size="sm" 1166 1166 - onclick={() => (showDeleteConfirm = false)} 1167 1167 - disabled={deleting} 1168 1168 - > 1169 1169 - Cancel 1170 1170 - </Button> 1171 1171 - <Button size="sm" onclick={handleDelete} disabled={deleting} variant="red"> 1172 1172 - {deleting ? 'Deleting...' : 'Delete'} 1173 1173 - </Button> 1174 1174 - </div> 1175 1175 - {:else} 1176 1176 - <Button variant="red" onclick={() => (showDeleteConfirm = true)}>Delete event</Button> 1177 1177 - {/if} 1178 1178 - </div> 1179 1179 - {/if} 1180 1180 - </form> 1181 1181 - {/if} 1182 1182 - </div> 1183 1183 - </div> 1184 1184 - 1185 1185 - <!-- Location modal --> 1186 1186 - <Modal bind:open={showLocationModal}> 1187 1187 - <p class="text-base-900 dark:text-base-50 text-lg font-semibold">Add location</p> 1188 1188 - <form 1189 1189 - onsubmit={(e) => { 1190 1190 - e.preventDefault(); 1191 1191 - searchLocation(); 1192 1192 - }} 1193 1193 - class="mt-2" 1194 1194 - > 1195 1195 - <div class="flex gap-2"> 1196 1196 - <Input type="text" class="flex-1" bind:value={locationSearch} /> 1197 1197 - <Button type="submit" disabled={locationSearching || !locationSearch.trim()}> 1198 1198 - {locationSearching ? 'Searching...' : 'Search'} 1199 1199 - </Button> 1200 1200 - </div> 1201 1201 - </form> 1202 1202 - 1203 1203 - {#if locationError} 1204 1204 - <p class="mt-3 text-sm text-red-600 dark:text-red-400">{locationError}</p> 1205 1205 - {/if} 1206 1206 - 1207 1207 - {#if locationResult} 1208 1208 - <div 1209 1209 - class="border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-900 mt-4 overflow-hidden rounded-xl border p-4" 1210 1210 - > 1211 1211 - <div class="flex items-start gap-3"> 1212 1212 - <svg 1213 1213 - xmlns="http://www.w3.org/2000/svg" 1214 1214 - fill="none" 1215 1215 - viewBox="0 0 24 24" 1216 1216 - stroke-width="1.5" 1217 1217 - stroke="currentColor" 1218 1218 - class="text-base-500 mt-0.5 size-5 shrink-0" 1219 1219 - > 1220 1220 - <path 1221 1221 - stroke-linecap="round" 1222 1222 - stroke-linejoin="round" 1223 1223 - d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" 1224 1224 - /> 1225 1225 - <path 1226 1226 - stroke-linecap="round" 1227 1227 - stroke-linejoin="round" 1228 1228 - d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" 1229 1229 - /> 1230 1230 - </svg> 1231 1231 - <div class="min-w-0 flex-1"> 1232 1232 - <p class="text-base-900 dark:text-base-50 font-medium"> 1233 1233 - {getLocationDisplayString(locationResult.location)} 1234 1234 - </p> 1235 1235 - <p class="text-base-500 dark:text-base-400 mt-0.5 truncate text-xs"> 1236 1236 - {locationResult.displayName} 1237 1237 - </p> 1238 1238 - </div> 1239 1239 - </div> 1240 1240 - <div class="mt-4 flex justify-end"> 1241 1241 - <Button onclick={confirmLocation}>Use this location</Button> 1242 1242 - </div> 1243 1243 - </div> 1244 1244 - {/if} 1245 1245 - 1246 1246 - <p class="text-base-400 dark:text-base-500 mt-4 text-xs"> 1247 1247 - Geocoding by <a 1248 1248 - href="https://nominatim.openstreetmap.org/" 1249 1249 - class="hover:text-base-600 dark:hover:text-base-400 underline" 1250 1250 - target="_blank">Nominatim</a 1251 1251 - > 1252 1252 - / &copy; 1253 1253 - <a 1254 1254 - href="https://www.openstreetmap.org/copyright" 1255 1255 - class="hover:text-base-600 dark:hover:text-base-400 underline" 1256 1256 - target="_blank">OpenStreetMap contributors</a 1257 1257 - > 1258 1258 - </p> 1259 1259 - </Modal>

-66

src/routes/[[actor=actor]]/events/[rkey]/og.png/+server.ts

reviewed

··· 1 1 - import { getCDNImageBlobUrl, getRecord } from '$lib/atproto/methods.js'; 2 2 - 3 3 - import type { Did } from '@atcute/lexicons'; 4 4 - import type { EventData } from '$lib/cards/social/EventCard'; 5 5 - import { ImageResponse } from '@ethercorps/sveltekit-og'; 6 6 - import { error } from '@sveltejs/kit'; 7 7 - import EventOgImage from './EventOgImage.svelte'; 8 8 - import { getActor } from '$lib/actor'; 9 9 - 10 10 - function formatDate(dateStr: string): string { 11 11 - const date = new Date(dateStr); 12 12 - const weekday = date.toLocaleDateString('en-US', { weekday: 'long' }); 13 13 - const month = date.toLocaleDateString('en-US', { month: 'long' }); 14 14 - const day = date.getDate(); 15 15 - return `${weekday}, ${month} ${day}`; 16 16 - } 17 17 - 18 18 - export async function GET({ params, platform, request }) { 19 19 - const { rkey } = params; 20 20 - 21 21 - const did = await getActor({ request, paramActor: params.actor, platform }); 22 22 - 23 23 - if (!did || !rkey) { 24 24 - throw error(404, 'Event not found'); 25 25 - } 26 26 - 27 27 - let eventData: EventData; 28 28 - 29 29 - try { 30 30 - const eventRecord = await getRecord({ 31 31 - did: did as Did, 32 32 - collection: 'community.lexicon.calendar.event', 33 33 - rkey 34 34 - }); 35 35 - 36 36 - if (!eventRecord?.value) { 37 37 - throw error(404, 'Event not found'); 38 38 - } 39 39 - 40 40 - eventData = eventRecord.value as EventData; 41 41 - } catch (e) { 42 42 - if (e && typeof e === 'object' && 'status' in e) throw e; 43 43 - throw error(404, 'Event not found'); 44 44 - } 45 45 - 46 46 - const dateStr = formatDate(eventData.startsAt); 47 47 - 48 48 - let thumbnailUrl: string | null = null; 49 49 - if (eventData.media && eventData.media.length > 0) { 50 50 - const media = eventData.media.find((m) => m.role === 'thumbnail'); 51 51 - if (media?.content) { 52 52 - thumbnailUrl = getCDNImageBlobUrl({ did, blob: media.content, type: 'jpeg' }) ?? null; 53 53 - } 54 54 - } 55 55 - 56 56 - return new ImageResponse( 57 57 - EventOgImage, 58 58 - { width: 1200, height: 630, debug: false }, 59 59 - { 60 60 - name: eventData.name, 61 61 - dateStr, 62 62 - thumbnailUrl, 63 63 - rkey 64 64 - } 65 65 - ); 66 66 - }

-62

src/routes/[[actor=actor]]/events/[rkey]/og.png/EventOgImage.svelte

reviewed

··· 1 1 - <script lang="ts"> 2 2 - import Avatar from 'svelte-boring-avatars'; 3 3 - 4 4 - let { 5 5 - name, 6 6 - dateStr, 7 7 - thumbnailUrl, 8 8 - rkey 9 9 - }: { 10 10 - name: string; 11 11 - dateStr: string; 12 12 - thumbnailUrl: string | null; 13 13 - rkey: string; 14 14 - } = $props(); 15 15 - </script> 16 16 - 17 17 - <div class="flex h-full w-full bg-neutral-900 p-0"> 18 18 - <div class="flex h-full shrink-0 items-center px-8"> 19 19 - <div class="flex overflow-hidden rounded-3xl"> 20 20 - {#if thumbnailUrl} 21 21 - <img src={thumbnailUrl} alt={name} width="420" height="420" style="object-fit: cover;" /> 22 22 - {:else} 23 23 - <Avatar 24 24 - size={420} 25 25 - name={rkey} 26 26 - variant="marble" 27 27 - colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']} 28 28 - square 29 29 - /> 30 30 - {/if} 31 31 - </div> 32 32 - </div> 33 33 - 34 34 - <div class="flex min-w-0 flex-1 flex-col justify-center p-12"> 35 35 - <h1 36 36 - class="text-7xl leading-tight font-bold text-neutral-50" 37 37 - style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;" 38 38 - > 39 39 - {name} 40 40 - </h1> 41 41 - 42 42 - <div class="mt-8 flex items-center"> 43 43 - <svg 44 44 - width="28" 45 45 - height="28" 46 46 - viewBox="0 0 24 24" 47 47 - fill="none" 48 48 - xmlns="http://www.w3.org/2000/svg" 49 49 - > 50 50 - <path 51 51 - d="M8 2v3M16 2v3M3.5 9.09h17M21 8.5v8c0 3-1.5 5-5 5H8c-3.5 0-5-2-5-5v-8c0-3 1.5-5 5-5h8c3.5 0 5 2 5 5Z" 52 52 - stroke="#a3a3a3" 53 53 - stroke-width="1.5" 54 54 - stroke-miterlimit="10" 55 55 - stroke-linecap="round" 56 56 - stroke-linejoin="round" 57 57 - /> 58 58 - </svg> 59 59 - <span class="ml-3 text-2xl text-neutral-300">{dateStr}</span> 60 60 - </div> 61 61 - </div> 62 62 - </div>

-47

src/routes/[[actor=actor]]/events/api/refresh/+server.ts

reviewed

··· 1 1 - import { createCache } from '$lib/cache'; 2 2 - import { error, json } from '@sveltejs/kit'; 3 3 - import { getActor } from '$lib/actor'; 4 4 - import { listRecords } from '$lib/atproto/methods.js'; 5 5 - import type { EventData } from '$lib/cards/social/EventCard'; 6 6 - import type { Did } from '@atcute/lexicons'; 7 7 - 8 8 - export async function GET({ params, platform, request }) { 9 9 - const cache = createCache(platform); 10 10 - if (!cache) return json('no cache'); 11 11 - 12 12 - const did = await getActor({ request, paramActor: params.actor, platform, blockBoth: false }); 13 13 - 14 14 - if (!did) { 15 15 - throw error(404, 'Not found'); 16 16 - } 17 17 - 18 18 - // Delete stale caches 19 19 - await Promise.all([cache.delete('events', did), cache.delete('ical', `${did}:calendar`)]).catch( 20 20 - () => {} 21 21 - ); 22 22 - 23 23 - // Re-fetch and cache 24 24 - const [records, hostProfile] = await Promise.all([ 25 25 - listRecords({ 26 26 - did: did as Did, 27 27 - collection: 'community.lexicon.calendar.event', 28 28 - limit: 100 29 29 - }), 30 30 - cache.getProfile(did as Did).catch(() => null) 31 31 - ]); 32 32 - 33 33 - const events = records.map((r) => ({ 34 34 - ...(r.value as EventData), 35 35 - rkey: r.uri.split('/').pop() as string 36 36 - })); 37 37 - 38 38 - const result = { 39 39 - events, 40 40 - did, 41 41 - hostProfile: hostProfile ?? null 42 42 - }; 43 43 - 44 44 - await cache.putJSON('events', did, result).catch(() => {}); 45 45 - 46 46 - return json(result); 47 47 - }

-97

src/routes/[[actor=actor]]/events/calendar/+server.ts

reviewed

··· 1 1 - import { error } from '@sveltejs/kit'; 2 2 - import type { EventData } from '$lib/cards/social/EventCard'; 3 3 - import { getCDNImageBlobUrl, listRecords } from '$lib/atproto/methods.js'; 4 4 - import { createCache } from '$lib/cache'; 5 5 - import type { Did } from '@atcute/lexicons'; 6 6 - import { getActor } from '$lib/actor'; 7 7 - import { generateICalFeed, type ICalAttendee, type ICalEvent } from '$lib/ical'; 8 8 - import { fetchEventRsvps, getProfileUrl, resolveProfile } from '$lib/events/fetch-attendees'; 9 9 - 10 10 - export async function GET({ params, platform, request }) { 11 11 - const cache = createCache(platform); 12 12 - 13 13 - const did = await getActor({ request, paramActor: params.actor, platform }); 14 14 - 15 15 - if (!did) { 16 16 - throw error(404, 'Not found'); 17 17 - } 18 18 - 19 19 - try { 20 20 - // Check cache first 21 21 - const cacheKey = `${did}:calendar`; 22 22 - if (cache) { 23 23 - const cached = await cache.get('ical', cacheKey); 24 24 - if (cached) { 25 25 - return new Response(cached, { 26 26 - headers: { 27 27 - 'Content-Type': 'text/calendar; charset=utf-8', 28 28 - 'Cache-Control': 'public, max-age=3600' 29 29 - } 30 30 - }); 31 31 - } 32 32 - } 33 33 - 34 34 - const [records, hostProfile] = await Promise.all([ 35 35 - listRecords({ 36 36 - did: did as Did, 37 37 - collection: 'community.lexicon.calendar.event', 38 38 - limit: 100 39 39 - }), 40 40 - resolveProfile(did, cache) 41 41 - ]); 42 42 - 43 43 - const actor = hostProfile?.handle || did; 44 44 - 45 45 - // Fetch attendees for all events in parallel 46 46 - const events: ICalEvent[] = await Promise.all( 47 47 - records.map(async (r) => { 48 48 - const eventData = r.value as EventData; 49 49 - const thumbnail = eventData.media?.find((m) => m.role === 'thumbnail'); 50 50 - const imageUrl = thumbnail?.content 51 51 - ? getCDNImageBlobUrl({ did, blob: thumbnail.content, type: 'jpeg' }) 52 52 - : undefined; 53 53 - 54 54 - // Fetch RSVPs and resolve handles 55 55 - const rsvpMap = await fetchEventRsvps(r.uri).catch(() => new Map()); 56 56 - const attendees: ICalAttendee[] = []; 57 57 - await Promise.all( 58 58 - Array.from(rsvpMap.entries()).map(async ([attendeeDid, status]) => { 59 59 - const profile = await resolveProfile(attendeeDid, cache).catch(() => null); 60 60 - attendees.push({ 61 61 - name: profile?.handle || attendeeDid, 62 62 - status, 63 63 - url: getProfileUrl(attendeeDid, profile) 64 64 - }); 65 65 - }) 66 66 - ); 67 67 - 68 68 - return { 69 69 - eventData, 70 70 - uid: r.uri, 71 71 - url: `https://blento.app/${actor}/events/${r.uri.split('/').pop()}`, 72 72 - organizer: actor, 73 73 - imageUrl, 74 74 - attendees 75 75 - }; 76 76 - }) 77 77 - ); 78 78 - 79 79 - const calendarName = `${hostProfile?.displayName || actor}'s Events`; 80 80 - const ical = generateICalFeed(events, calendarName); 81 81 - 82 82 - // Store in cache 83 83 - if (cache) { 84 84 - await cache.put('ical', cacheKey, ical).catch(() => {}); 85 85 - } 86 86 - 87 87 - return new Response(ical, { 88 88 - headers: { 89 89 - 'Content-Type': 'text/calendar; charset=utf-8', 90 90 - 'Cache-Control': 'public, max-age=3600' 91 91 - } 92 92 - }); 93 93 - } catch (e) { 94 94 - if (e && typeof e === 'object' && 'status' in e) throw e; 95 95 - throw error(500, 'Failed to generate calendar'); 96 96 - } 97 97 - }

-28

src/routes/[[actor=actor]]/rsvp/+layout.server.ts

reviewed

··· 1 1 - import { getRecord } from '$lib/atproto/methods.js'; 2 2 - import type { Did } from '@atcute/lexicons'; 3 3 - import { getActor } from '$lib/actor.js'; 4 4 - 5 5 - export async function load({ params, platform, request }) { 6 6 - const did = await getActor({ request, paramActor: params.actor, platform }); 7 7 - 8 8 - if (!did) return { accentColor: undefined, baseColor: undefined }; 9 9 - 10 10 - try { 11 11 - const publication = await getRecord({ 12 12 - did: did as Did, 13 13 - collection: 'site.standard.publication', 14 14 - rkey: 'blento.self' 15 15 - }); 16 16 - 17 17 - const preferences = publication?.value?.preferences as 18 18 - | { accentColor?: string; baseColor?: string } 19 19 - | undefined; 20 20 - 21 21 - return { 22 22 - accentColor: preferences?.accentColor, 23 23 - baseColor: preferences?.baseColor 24 24 - }; 25 25 - } catch { 26 26 - return { accentColor: undefined, baseColor: undefined }; 27 27 - } 28 28 - }

-9

src/routes/[[actor=actor]]/rsvp/+layout.svelte

reviewed

··· 1 1 - <script lang="ts"> 2 2 - import ThemeScript from '$lib/website/ThemeScript.svelte'; 3 3 - 4 4 - let { data, children } = $props(); 5 5 - </script> 6 6 - 7 7 - <ThemeScript accentColor={data.accentColor} baseColor={data.baseColor} /> 8 8 - 9 9 - {@render children()}

-48

src/routes/[[actor=actor]]/rsvp/+page.server.ts

reviewed

··· 1 1 - import { error } from '@sveltejs/kit'; 2 2 - import { createCache } from '$lib/cache'; 3 3 - import type { CachedProfile } from '$lib/cache'; 4 4 - import { getActor } from '$lib/actor.js'; 5 5 - import { fetchUserRsvps, resolveProfile, type ResolvedRsvp } from '$lib/events/fetch-attendees'; 6 6 - 7 7 - export async function load({ params, platform, request }) { 8 8 - const cache = createCache(platform); 9 9 - 10 10 - const did = await getActor({ request, paramActor: params.actor, platform }); 11 11 - 12 12 - if (!did) { 13 13 - throw error(404, 'RSVPs not found'); 14 14 - } 15 15 - 16 16 - try { 17 17 - // Try cache first 18 18 - if (cache) { 19 19 - const cached = await cache.getJSON<{ 20 20 - rsvps: ResolvedRsvp[]; 21 21 - did: string; 22 22 - userProfile: CachedProfile | null; 23 23 - }>('rsvps', did); 24 24 - if (cached) return cached; 25 25 - } 26 26 - 27 27 - const [rsvps, userProfile] = await Promise.all([ 28 28 - fetchUserRsvps(did, cache), 29 29 - resolveProfile(did, cache) 30 30 - ]); 31 31 - 32 32 - const result = { 33 33 - rsvps, 34 34 - did, 35 35 - userProfile: userProfile ?? null 36 36 - }; 37 37 - 38 38 - // Cache the result 39 39 - if (cache) { 40 40 - await cache.putJSON('rsvps', did, result).catch(() => {}); 41 41 - } 42 42 - 43 43 - return result; 44 44 - } catch (e) { 45 45 - if (e && typeof e === 'object' && 'status' in e) throw e; 46 46 - throw error(404, 'RSVPs not found'); 47 47 - } 48 48 - }

-200

src/routes/[[actor=actor]]/rsvp/+page.svelte

reviewed

··· 1 1 - <script lang="ts"> 2 2 - import type { EventData } from '$lib/cards/social/EventCard'; 3 3 - import { getCDNImageBlobUrl } from '$lib/atproto'; 4 4 - import { Avatar as FoxAvatar, Badge, Button, toast } from '@foxui/core'; 5 5 - import { page } from '$app/state'; 6 6 - import Avatar from 'svelte-boring-avatars'; 7 7 - import type { CachedProfile } from '$lib/cache'; 8 8 - 9 9 - let { data } = $props(); 10 10 - 11 11 - let rsvps: Array<{ 12 12 - event: EventData; 13 13 - rkey: string; 14 14 - hostDid: string; 15 15 - hostProfile: CachedProfile | null; 16 16 - status: string; 17 17 - eventUri: string; 18 18 - }> = $derived(data.rsvps); 19 19 - let did: string = $derived(data.did); 20 20 - let userProfile = $derived(data.userProfile); 21 21 - 22 22 - let userName = $derived(userProfile?.displayName || userProfile?.handle || did); 23 23 - 24 24 - function formatDate(dateStr: string): string { 25 25 - const date = new Date(dateStr); 26 26 - const options: Intl.DateTimeFormatOptions = { 27 27 - weekday: 'short', 28 28 - month: 'short', 29 29 - day: 'numeric' 30 30 - }; 31 31 - if (date.getFullYear() !== new Date().getFullYear()) { 32 32 - options.year = 'numeric'; 33 33 - } 34 34 - return date.toLocaleDateString('en-US', options); 35 35 - } 36 36 - 37 37 - function formatTime(dateStr: string): string { 38 38 - return new Date(dateStr).toLocaleTimeString('en-US', { 39 39 - hour: 'numeric', 40 40 - minute: '2-digit' 41 41 - }); 42 42 - } 43 43 - 44 44 - function getModeLabel(mode: string): string { 45 45 - if (mode.includes('virtual')) return 'Virtual'; 46 46 - if (mode.includes('hybrid')) return 'Hybrid'; 47 47 - if (mode.includes('inperson')) return 'In-Person'; 48 48 - return 'Event'; 49 49 - } 50 50 - 51 51 - function getModeColor(mode: string): 'cyan' | 'purple' | 'amber' | 'secondary' { 52 52 - if (mode.includes('virtual')) return 'cyan'; 53 53 - if (mode.includes('hybrid')) return 'purple'; 54 54 - if (mode.includes('inperson')) return 'amber'; 55 55 - return 'secondary'; 56 56 - } 57 57 - 58 58 - function getThumbnail(event: EventData, hostDid: string): { url: string; alt: string } | null { 59 59 - if (!event.media || event.media.length === 0) return null; 60 60 - const media = event.media.find((m) => m.role === 'thumbnail'); 61 61 - if (!media?.content) return null; 62 62 - const url = getCDNImageBlobUrl({ did: hostDid, blob: media.content, type: 'jpeg' }); 63 63 - if (!url) return null; 64 64 - return { url, alt: media.alt || event.name }; 65 65 - } 66 66 - 67 67 - function getStatusLabel(status: string): string { 68 68 - return status === 'going' ? 'Going' : 'Interested'; 69 69 - } 70 70 - 71 71 - function getStatusColor(status: string): 'green' | 'blue' { 72 72 - return status === 'going' ? 'green' : 'blue'; 73 73 - } 74 74 - 75 75 - let showPast: boolean = $state(false); 76 76 - let now = $derived(new Date()); 77 77 - let filteredRsvps = $derived( 78 78 - rsvps.filter((r) => { 79 79 - const endOrStart = r.event.endsAt || r.event.startsAt; 80 80 - const eventDate = new Date(endOrStart); 81 81 - return showPast ? eventDate < now : eventDate >= now; 82 82 - }) 83 83 - ); 84 84 - </script> 85 85 - 86 86 - <svelte:head> 87 87 - <title>{userName} - RSVPs</title> 88 88 - <meta name="description" content="Events {userName} is attending" /> 89 89 - <meta property="og:title" content="{userName} - RSVPs" /> 90 90 - <meta property="og:description" content="Events {userName} is attending" /> 91 91 - <meta name="twitter:card" content="summary" /> 92 92 - <meta name="twitter:title" content="{userName} - RSVPs" /> 93 93 - <meta name="twitter:description" content="Events {userName} is attending" /> 94 94 - </svelte:head> 95 95 - 96 96 - <div class="min-h-screen px-6 py-12 sm:py-12"> 97 97 - <div class="mx-auto max-w-3xl"> 98 98 - <!-- Header --> 99 99 - <div class="mb-8 flex items-start justify-between"> 100 100 - <div> 101 101 - <h1 class="text-base-900 dark:text-base-50 mb-2 text-2xl font-bold sm:text-3xl"> 102 102 - {showPast ? 'Past' : 'Upcoming'} RSVPs 103 103 - </h1> 104 104 - <div class="mt-4 flex items-center gap-2"> 105 105 - <FoxAvatar src={userProfile?.avatar} alt={userName} class="size-5 shrink-0" /> 106 106 - <span class="text-base-900 dark:text-base-100 text-sm font-medium">{userName}</span> 107 107 - </div> 108 108 - </div> 109 109 - <Button 110 110 - variant="secondary" 111 111 - onclick={async () => { 112 112 - const calendarUrl = `${page.url.origin}${page.url.pathname.replace(/\/$/, '')}/calendar`; 113 113 - await navigator.clipboard.writeText(calendarUrl); 114 114 - toast.success('Subscription link copied to clipboard'); 115 115 - }}>Subscribe</Button 116 116 - > 117 117 - </div> 118 118 - 119 119 - <!-- Toggle --> 120 120 - <div class="mb-6 flex gap-1"> 121 121 - <button 122 122 - class="rounded-xl px-3 py-1.5 text-sm font-medium transition-colors {!showPast 123 123 - ? 'bg-base-200 dark:bg-base-800 text-base-900 dark:text-base-50' 124 124 - : 'text-base-500 dark:text-base-400 hover:text-base-700 dark:hover:text-base-200 cursor-pointer'}" 125 125 - onclick={() => (showPast = false)}>Upcoming</button 126 126 - > 127 127 - <button 128 128 - class="rounded-xl px-3 py-1.5 text-sm font-medium transition-colors {showPast 129 129 - ? 'bg-base-200 dark:bg-base-800 text-base-900 dark:text-base-50' 130 130 - : 'text-base-500 dark:text-base-400 hover:text-base-700 dark:hover:text-base-200 cursor-pointer'}" 131 131 - onclick={() => (showPast = true)}>Past</button 132 132 - > 133 133 - </div> 134 134 - 135 135 - {#if filteredRsvps.length === 0} 136 136 - <p class="text-base-500 dark:text-base-400 py-12 text-center"> 137 137 - No {showPast ? 'past' : 'upcoming'} RSVPs. 138 138 - </p> 139 139 - {:else} 140 140 - <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"> 141 141 - {#each filteredRsvps as rsvp (rsvp.eventUri)} 142 142 - {@const thumbnail = getThumbnail(rsvp.event, rsvp.hostDid)} 143 143 - {@const hostHandle = rsvp.hostProfile?.handle || rsvp.hostDid} 144 144 - <a 145 145 - href="/{hostHandle}/events/{rsvp.rkey}" 146 146 - class="border-base-200 dark:border-base-800 hover:border-base-300 dark:hover:border-base-700 group bg-base-100 dark:bg-base-950 block overflow-hidden rounded-2xl border transition-colors" 147 147 - > 148 148 - <!-- Thumbnail --> 149 149 - <div class="p-4"> 150 150 - {#if thumbnail} 151 151 - <img 152 152 - src={thumbnail.url} 153 153 - alt={thumbnail.alt} 154 154 - class="aspect-square w-full rounded-2xl object-cover" 155 155 - /> 156 156 - {:else} 157 157 - <div 158 158 - class="bg-base-100 dark:bg-base-900 aspect-square w-full overflow-hidden rounded-2xl [&>svg]:h-full [&>svg]:w-full" 159 159 - > 160 160 - <Avatar 161 161 - size={400} 162 162 - name={rsvp.rkey} 163 163 - variant="marble" 164 164 - colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']} 165 165 - square 166 166 - /> 167 167 - </div> 168 168 - {/if} 169 169 - </div> 170 170 - 171 171 - <!-- Content --> 172 172 - <div class="p-4"> 173 173 - <h2 174 174 - class="text-base-900 dark:text-base-50 group-hover:text-base-700 dark:group-hover:text-base-200 mb-1 leading-snug font-semibold" 175 175 - > 176 176 - {rsvp.event.name} 177 177 - </h2> 178 178 - 179 179 - <p class="text-base-500 dark:text-base-400 mb-2 text-sm"> 180 180 - {formatDate(rsvp.event.startsAt)} &middot; {formatTime(rsvp.event.startsAt)} 181 181 - </p> 182 182 - 183 183 - <div class="flex flex-wrap items-center gap-2"> 184 184 - {#if rsvp.event.mode} 185 185 - <Badge size="sm" variant={getModeColor(rsvp.event.mode)} 186 186 - >{getModeLabel(rsvp.event.mode)}</Badge 187 187 - > 188 188 - {/if} 189 189 - 190 190 - <Badge size="sm" variant={getStatusColor(rsvp.status)} 191 191 - >{getStatusLabel(rsvp.status)}</Badge 192 192 - > 193 193 - </div> 194 194 - </div> 195 195 - </a> 196 196 - {/each} 197 197 - </div> 198 198 - {/if} 199 199 - </div> 200 200 - </div>

-37

src/routes/[[actor=actor]]/rsvp/api/refresh/+server.ts

reviewed

··· 1 1 - import { createCache } from '$lib/cache'; 2 2 - import { error, json } from '@sveltejs/kit'; 3 3 - import { getActor } from '$lib/actor'; 4 4 - import { fetchUserRsvps, resolveProfile } from '$lib/events/fetch-attendees'; 5 5 - 6 6 - export async function GET({ params, platform, request }) { 7 7 - const cache = createCache(platform); 8 8 - if (!cache) return json('no cache'); 9 9 - 10 10 - const did = await getActor({ request, paramActor: params.actor, platform, blockBoth: false }); 11 11 - 12 12 - if (!did) { 13 13 - throw error(404, 'Not found'); 14 14 - } 15 15 - 16 16 - // Delete stale caches 17 17 - await Promise.all([ 18 18 - cache.delete('rsvps', did), 19 19 - cache.delete('ical', `${did}:rsvp-calendar`) 20 20 - ]).catch(() => {}); 21 21 - 22 22 - // Re-fetch and cache 23 23 - const [rsvps, userProfile] = await Promise.all([ 24 24 - fetchUserRsvps(did, cache), 25 25 - resolveProfile(did, cache) 26 26 - ]); 27 27 - 28 28 - const result = { 29 29 - rsvps, 30 30 - did, 31 31 - userProfile: userProfile ?? null 32 32 - }; 33 33 - 34 34 - await cache.putJSON('rsvps', did, result).catch(() => {}); 35 35 - 36 36 - return json(result); 37 37 - }

-106

src/routes/[[actor=actor]]/rsvp/calendar/+server.ts

reviewed

··· 1 1 - import { error } from '@sveltejs/kit'; 2 2 - import { getCDNImageBlobUrl } from '$lib/atproto/methods.js'; 3 3 - import { createCache } from '$lib/cache'; 4 4 - import { getActor } from '$lib/actor'; 5 5 - import { generateICalFeed, type ICalAttendee, type ICalEvent } from '$lib/ical'; 6 6 - import { 7 7 - fetchEventRsvps, 8 8 - fetchUserRsvps, 9 9 - getProfileUrl, 10 10 - resolveProfile 11 11 - } from '$lib/events/fetch-attendees'; 12 12 - 13 13 - export async function GET({ params, platform, request }) { 14 14 - const cache = createCache(platform); 15 15 - 16 16 - const did = await getActor({ request, paramActor: params.actor, platform }); 17 17 - 18 18 - if (!did) { 19 19 - throw error(404, 'Not found'); 20 20 - } 21 21 - 22 22 - try { 23 23 - // Check cache first 24 24 - const cacheKey = `${did}:rsvp-calendar`; 25 25 - if (cache) { 26 26 - const cached = await cache.get('ical', cacheKey); 27 27 - if (cached) { 28 28 - return new Response(cached, { 29 29 - headers: { 30 30 - 'Content-Type': 'text/calendar; charset=utf-8', 31 31 - 'Cache-Control': 'public, max-age=3600' 32 32 - } 33 33 - }); 34 34 - } 35 35 - } 36 36 - 37 37 - const [rsvps, userProfile] = await Promise.all([ 38 38 - fetchUserRsvps(did, cache), 39 39 - resolveProfile(did, cache) 40 40 - ]); 41 41 - 42 42 - // Enrich each RSVP with attendees and image URLs for the iCal feed 43 43 - const events: ICalEvent[] = ( 44 44 - await Promise.all( 45 45 - rsvps.map(async (rsvp) => { 46 46 - try { 47 47 - const actor = rsvp.hostProfile?.handle || rsvp.hostDid; 48 48 - const thumbnail = rsvp.event.media?.find((m) => m.role === 'thumbnail'); 49 49 - const imageUrl = thumbnail?.content 50 50 - ? getCDNImageBlobUrl({ 51 51 - did: rsvp.hostDid, 52 52 - blob: thumbnail.content, 53 53 - type: 'jpeg' 54 54 - }) 55 55 - : undefined; 56 56 - 57 57 - const rsvpMap = await fetchEventRsvps(rsvp.eventUri).catch( 58 58 - () => new Map<string, 'going' | 'interested'>() 59 59 - ); 60 60 - const attendees: ICalAttendee[] = []; 61 61 - await Promise.all( 62 62 - Array.from(rsvpMap.entries()).map(async ([attendeeDid, status]) => { 63 63 - const profile = await resolveProfile(attendeeDid, cache).catch(() => null); 64 64 - attendees.push({ 65 65 - name: profile?.handle || attendeeDid, 66 66 - status, 67 67 - url: getProfileUrl(attendeeDid, profile) 68 68 - }); 69 69 - }) 70 70 - ); 71 71 - 72 72 - return { 73 73 - eventData: rsvp.event, 74 74 - uid: rsvp.eventUri, 75 75 - url: `https://blento.app/${actor}/events/${rsvp.rkey}`, 76 76 - organizer: actor, 77 77 - imageUrl, 78 78 - attendees 79 79 - } satisfies ICalEvent; 80 80 - } catch { 81 81 - return null; 82 82 - } 83 83 - }) 84 84 - ) 85 85 - ).filter((e) => e !== null); 86 86 - 87 87 - const actor = userProfile?.handle || did; 88 88 - const calendarName = `${userProfile?.displayName || actor}'s RSVP Events`; 89 89 - const ical = generateICalFeed(events, calendarName); 90 90 - 91 91 - // Store in cache 92 92 - if (cache) { 93 93 - await cache.put('ical', cacheKey, ical).catch(() => {}); 94 94 - } 95 95 - 96 96 - return new Response(ical, { 97 97 - headers: { 98 98 - 'Content-Type': 'text/calendar; charset=utf-8', 99 99 - 'Cache-Control': 'public, max-age=3600' 100 100 - } 101 101 - }); 102 102 - } catch (e) { 103 103 - if (e && typeof e === 'object' && 'status' in e) throw e; 104 104 - throw error(500, 'Failed to generate calendar'); 105 105 - } 106 106 - }