merge nostrized-events module into unified main
Adds the standalone activities/events PWA build: - vite.activities.config.ts (standalone entry point) - build:activities npm script - i18n support (Spanish Latin American translations) - Map/calendar UI improvements Conflicts resolved keeping main-unified's module system (links, tasks, expenses, di-container, navigation).
This commit is contained in:
Patrick Mulligan
commit
b1e8534ca7
55 changed files with 4821 additions and 0 deletions
|
|
@ -28,6 +28,12 @@ VITE_PUSH_NOTIFICATIONS_ENABLED=true
|
|||
# Image Upload Configuration (pict-rs)
|
||||
VITE_PICTRS_BASE_URL=https://img.mydomain.com
|
||||
|
||||
# Activities / Sortir Configuration
|
||||
# Default language for the standalone activities app (fr, en, es)
|
||||
VITE_DEFAULT_LOCALE=fr
|
||||
# Default map center as "lat,lng" (defaults to France center if not set)
|
||||
VITE_DEFAULT_MAP_CENTER=42.9667,1.6000
|
||||
|
||||
# Market Configuration
|
||||
VITE_MARKET_NADDR=naddr1qqjxgdp4vv6rydej943n2dny956rwwf4943xzwfc95ekyd3evenrsvrrvc6r2qf8waehxw309akxucnfw3ejuct5d96xcctw9e5k7tmwdaehgunjv4kxz7f0v96xjmczyqrfrfkxv3m8t4elpe28x065z30zszaaqa4u0744qcmadsz3y50cjqcyqqq82scmcafla
|
||||
# OBSOLETE: Not used in codebase - market uses VITE_NOSTR_RELAYS instead
|
||||
|
|
|
|||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -9,6 +9,7 @@ lerna-debug.log*
|
|||
|
||||
node_modules
|
||||
dist
|
||||
dist-*
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
|
|
|
|||
19
activities.html
Normal file
19
activities.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
|
||||
<title>Sortir — Activités</title>
|
||||
<meta name="apple-mobile-web-app-title" content="Sortir">
|
||||
<meta name="description" content="Découvrez les activités et événements près de chez vous">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/activities-app/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
43
package-lock.json
generated
43
package-lock.json
generated
|
|
@ -18,8 +18,10 @@
|
|||
"date-fns": "^4.1.0",
|
||||
"electron-squirrel-startup": "^1.0.1",
|
||||
"fuse.js": "^7.0.0",
|
||||
"leaflet": "^1.9.4",
|
||||
"light-bolt11-decoder": "^3.2.0",
|
||||
"lucide-vue-next": "^0.474.0",
|
||||
"ngeohash": "^0.6.3",
|
||||
"nostr-tools": "^2.10.4",
|
||||
"pinia": "^2.3.1",
|
||||
"qr-scanner": "^1.4.2",
|
||||
|
|
@ -48,6 +50,8 @@
|
|||
"@tailwindcss/forms": "^0.5.10",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@tailwindcss/vite": "^4.0.12",
|
||||
"@types/leaflet": "^1.9.21",
|
||||
"@types/ngeohash": "^0.6.8",
|
||||
"@types/node": "^22.18.1",
|
||||
"@types/qrcode": "^1.5.5",
|
||||
"@types/rollup-plugin-visualizer": "^4.2.3",
|
||||
|
|
@ -5067,6 +5071,13 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/geojson": {
|
||||
"version": "7946.0.16",
|
||||
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
|
||||
"integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/http-cache-semantics": {
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz",
|
||||
|
|
@ -5084,6 +5095,23 @@
|
|||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/leaflet": {
|
||||
"version": "1.9.21",
|
||||
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.21.tgz",
|
||||
"integrity": "sha512-TbAd9DaPGSnzp6QvtYngntMZgcRk+igFELwR2N99XZn7RXUdKgsXMR+28bUO0rPsWp8MIu/f47luLIQuSLYv/w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/geojson": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/ngeohash": {
|
||||
"version": "0.6.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/ngeohash/-/ngeohash-0.6.8.tgz",
|
||||
"integrity": "sha512-A90x3HMwE1yXbWCnd0ztHzv8rAQPjwTzX2diYI/6OrWm/3oairDaehw5WPWJFgZ+8+J/OuF99IbipmMa2le6tQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "22.18.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.18.1.tgz",
|
||||
|
|
@ -9755,6 +9783,12 @@
|
|||
"json-buffer": "3.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/leaflet": {
|
||||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
|
||||
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
|
||||
"license": "BSD-2-Clause"
|
||||
},
|
||||
"node_modules/leven": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
|
||||
|
|
@ -10885,6 +10919,15 @@
|
|||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/ngeohash": {
|
||||
"version": "0.6.3",
|
||||
"resolved": "https://registry.npmjs.org/ngeohash/-/ngeohash-0.6.3.tgz",
|
||||
"integrity": "sha512-kltF0cOxgx1AbmVzKxYZaoB0aj7mOxZeHaerEtQV0YaqnkXNq26WWqMmJ6lTqShYxVRWZ/mwvvTrNeOwdslWiw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=v0.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/nice-try": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,9 @@
|
|||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview --host",
|
||||
"analyze": "vite build --mode analyze",
|
||||
"dev:activities": "vite --host --config vite.activities.config.ts",
|
||||
"build:activities": "vue-tsc -b && vite build --config vite.activities.config.ts",
|
||||
"preview:activities": "vite preview --host --config vite.activities.config.ts",
|
||||
"electron:dev": "concurrently \"vite --host\" \"electron-forge start\"",
|
||||
"electron:build": "vue-tsc -b && vite build && electron-builder",
|
||||
"electron:package": "electron-builder",
|
||||
|
|
@ -27,8 +30,10 @@
|
|||
"date-fns": "^4.1.0",
|
||||
"electron-squirrel-startup": "^1.0.1",
|
||||
"fuse.js": "^7.0.0",
|
||||
"leaflet": "^1.9.4",
|
||||
"light-bolt11-decoder": "^3.2.0",
|
||||
"lucide-vue-next": "^0.474.0",
|
||||
"ngeohash": "^0.6.3",
|
||||
"nostr-tools": "^2.10.4",
|
||||
"pinia": "^2.3.1",
|
||||
"qr-scanner": "^1.4.2",
|
||||
|
|
@ -57,6 +62,8 @@
|
|||
"@tailwindcss/forms": "^0.5.10",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@tailwindcss/vite": "^4.0.12",
|
||||
"@types/leaflet": "^1.9.21",
|
||||
"@types/ngeohash": "^0.6.8",
|
||||
"@types/node": "^22.18.1",
|
||||
"@types/qrcode": "^1.5.5",
|
||||
"@types/rollup-plugin-visualizer": "^4.2.3",
|
||||
|
|
|
|||
84
src/activities-app/App.vue
Normal file
84
src/activities-app/App.vue
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Toaster } from '@/components/ui/sonner'
|
||||
import LoginDialog from '@/components/auth/LoginDialog.vue'
|
||||
import { useTheme } from '@/components/theme-provider'
|
||||
import { toast } from 'vue-sonner'
|
||||
import {
|
||||
CalendarDays, Map, Heart, Settings, Search,
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
|
||||
useTheme()
|
||||
|
||||
const showLoginDialog = ref(false)
|
||||
|
||||
// Bottom navigation tabs (p'a semana style)
|
||||
const bottomTabs = computed(() => [
|
||||
{ name: t('activities.nav.feed'), icon: Search, path: '/activities' },
|
||||
{ name: t('activities.nav.calendar'), icon: CalendarDays, path: '/activities/calendar' },
|
||||
{ name: t('activities.nav.map'), icon: Map, path: '/activities/map' },
|
||||
{ name: t('activities.nav.favorites'), icon: Heart, path: '/activities/favorites' },
|
||||
{ name: t('activities.nav.settings'), icon: Settings, path: '/settings' },
|
||||
])
|
||||
|
||||
const isLoginPage = computed(() => route.path === '/login')
|
||||
|
||||
function isActiveTab(path: string): boolean {
|
||||
if (path === '/activities') {
|
||||
return route.path === '/activities' || route.path.startsWith('/activities/') &&
|
||||
!route.path.startsWith('/activities/calendar') &&
|
||||
!route.path.startsWith('/activities/map') &&
|
||||
!route.path.startsWith('/activities/favorites')
|
||||
}
|
||||
return route.path.startsWith(path)
|
||||
}
|
||||
|
||||
async function handleLoginSuccess() {
|
||||
showLoginDialog.value = false
|
||||
toast.success('Welcome!')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-background font-sans antialiased">
|
||||
<div class="relative flex min-h-screen flex-col"
|
||||
style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)">
|
||||
|
||||
<!-- Main content (with bottom padding for nav bar) -->
|
||||
<main class="flex-1" :class="{ 'pb-16': !isLoginPage }">
|
||||
<router-view />
|
||||
</main>
|
||||
|
||||
<!-- Bottom navigation bar (p'a semana style) -->
|
||||
<nav
|
||||
v-if="!isLoginPage"
|
||||
class="fixed bottom-0 left-0 right-0 z-50 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
|
||||
style="padding-bottom: env(safe-area-inset-bottom)"
|
||||
>
|
||||
<div class="flex items-center justify-around h-14 max-w-lg mx-auto">
|
||||
<button
|
||||
v-for="tab in bottomTabs"
|
||||
:key="tab.path"
|
||||
class="flex flex-col items-center justify-center gap-0.5 flex-1 h-full transition-colors"
|
||||
:class="isActiveTab(tab.path)
|
||||
? 'text-primary'
|
||||
: 'text-muted-foreground hover:text-foreground'"
|
||||
@click="router.push(tab.path)"
|
||||
>
|
||||
<component :is="tab.icon" class="w-5 h-5" />
|
||||
<span class="text-[10px] font-medium">{{ tab.name }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<Toaster />
|
||||
<LoginDialog v-model:is-open="showLoginDialog" @success="handleLoginSuccess" />
|
||||
</div>
|
||||
</template>
|
||||
62
src/activities-app/app.config.ts
Normal file
62
src/activities-app/app.config.ts
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
import type { AppConfig } from '@/core/types'
|
||||
|
||||
function parseMapCenter(envValue: string | undefined, fallback: { lat: number; lng: number }) {
|
||||
if (!envValue) return fallback
|
||||
const [lat, lng] = envValue.split(',').map(Number)
|
||||
if (isNaN(lat) || isNaN(lng)) return fallback
|
||||
return { lat, lng }
|
||||
}
|
||||
|
||||
/**
|
||||
* Standalone activities app configuration.
|
||||
* Only enables base + activities modules.
|
||||
*/
|
||||
export const appConfig: AppConfig = {
|
||||
modules: {
|
||||
base: {
|
||||
name: 'base',
|
||||
enabled: true,
|
||||
lazy: false,
|
||||
config: {
|
||||
nostr: {
|
||||
relays: JSON.parse(import.meta.env.VITE_NOSTR_RELAYS || '["wss://relay.damus.io", "wss://nos.lol"]')
|
||||
},
|
||||
auth: {
|
||||
sessionTimeout: 24 * 60 * 60 * 1000,
|
||||
},
|
||||
pwa: {
|
||||
autoPrompt: true
|
||||
},
|
||||
imageUpload: {
|
||||
baseUrl: import.meta.env.VITE_PICTRS_BASE_URL || 'https://img.mydomain.com',
|
||||
maxSizeMB: 10,
|
||||
acceptedTypes: ['image/jpeg', 'image/png', 'image/webp', 'image/avif', 'image/gif']
|
||||
}
|
||||
}
|
||||
},
|
||||
activities: {
|
||||
name: 'activities',
|
||||
enabled: true,
|
||||
lazy: false,
|
||||
config: {
|
||||
apiConfig: {
|
||||
baseUrl: import.meta.env.VITE_LNBITS_BASE_URL || 'http://localhost:5000',
|
||||
apiKey: import.meta.env.VITE_API_KEY || ''
|
||||
},
|
||||
defaultMapCenter: parseMapCenter(import.meta.env.VITE_DEFAULT_MAP_CENTER, { lat: 42.9667, lng: 1.6000 }),
|
||||
maxTicketsPerUser: 10,
|
||||
enableMap: true,
|
||||
enablePrivateEvents: false
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
features: {
|
||||
pwa: true,
|
||||
pushNotifications: true,
|
||||
electronApp: false,
|
||||
developmentMode: import.meta.env.DEV
|
||||
}
|
||||
}
|
||||
|
||||
export default appConfig
|
||||
138
src/activities-app/app.ts
Normal file
138
src/activities-app/app.ts
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
import { createApp } from 'vue'
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { createPinia } from 'pinia'
|
||||
import { pluginManager } from '@/core/plugin-manager'
|
||||
import { eventBus } from '@/core/event-bus'
|
||||
import { container } from '@/core/di-container'
|
||||
|
||||
import appConfig from './app.config'
|
||||
import baseModule from '@/modules/base'
|
||||
import activitiesModule from '@/modules/activities'
|
||||
|
||||
import App from './App.vue'
|
||||
|
||||
import '@/assets/index.css'
|
||||
import { i18n, changeLocale, type AvailableLocale } from '@/i18n'
|
||||
|
||||
/**
|
||||
* Initialize the standalone activities app
|
||||
*/
|
||||
export async function createAppInstance() {
|
||||
console.log('🚀 Starting Sortir — Activities App...')
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
// Collect routes from enabled modules only
|
||||
const moduleRoutes = [
|
||||
...baseModule.routes || [],
|
||||
...activitiesModule.routes || [],
|
||||
].filter(Boolean)
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [
|
||||
// Activities page is the home page in standalone mode
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/activities'
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('@/pages/Login.vue'),
|
||||
meta: { requiresAuth: false }
|
||||
},
|
||||
...moduleRoutes,
|
||||
// App-specific routes
|
||||
{
|
||||
path: '/settings',
|
||||
name: 'settings',
|
||||
component: () => import('./views/SettingsPage.vue'),
|
||||
meta: { requiresAuth: false }
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const pinia = createPinia()
|
||||
|
||||
app.use(router)
|
||||
app.use(pinia)
|
||||
app.use(i18n)
|
||||
|
||||
// Set default locale from env (user's saved preference takes priority via useStorage in i18n)
|
||||
const defaultLocale = import.meta.env.VITE_DEFAULT_LOCALE as AvailableLocale | undefined
|
||||
if (defaultLocale && !localStorage.getItem('user-locale')) {
|
||||
await changeLocale(defaultLocale)
|
||||
}
|
||||
|
||||
// Initialize plugin manager
|
||||
pluginManager.init(app, router)
|
||||
|
||||
// Register modules
|
||||
const moduleRegistrations = []
|
||||
|
||||
if (appConfig.modules.base.enabled) {
|
||||
moduleRegistrations.push(
|
||||
pluginManager.register(baseModule, appConfig.modules.base)
|
||||
)
|
||||
}
|
||||
|
||||
if (appConfig.modules.activities?.enabled) {
|
||||
moduleRegistrations.push(
|
||||
pluginManager.register(activitiesModule, appConfig.modules.activities)
|
||||
)
|
||||
}
|
||||
|
||||
await Promise.all(moduleRegistrations)
|
||||
await pluginManager.installAll()
|
||||
|
||||
// Initialize auth
|
||||
const { auth } = await import('@/composables/useAuthService')
|
||||
await auth.initialize()
|
||||
|
||||
// Auth guard — only redirect for routes that explicitly require auth
|
||||
router.beforeEach(async (to, _from, next) => {
|
||||
const requiresAuth = to.meta.requiresAuth === true
|
||||
|
||||
if (requiresAuth && !auth.isAuthenticated.value) {
|
||||
next('/login')
|
||||
} else if (to.path === '/login' && auth.isAuthenticated.value) {
|
||||
next('/')
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
})
|
||||
|
||||
// Global error handling
|
||||
app.config.errorHandler = (err, _vm, info) => {
|
||||
console.error('Global error:', err, info)
|
||||
eventBus.emit('app:error', { error: err, info }, 'app')
|
||||
}
|
||||
|
||||
if (appConfig.features.developmentMode) {
|
||||
;(window as any).__pluginManager = pluginManager
|
||||
;(window as any).__eventBus = eventBus
|
||||
;(window as any).__container = container
|
||||
}
|
||||
|
||||
console.log('✅ Sortir app initialized')
|
||||
return { app, router }
|
||||
}
|
||||
|
||||
export async function startApp() {
|
||||
try {
|
||||
const { app } = await createAppInstance()
|
||||
app.mount('#app')
|
||||
console.log('🎉 Sortir app started!')
|
||||
eventBus.emit('app:started', {}, 'app')
|
||||
} catch (error) {
|
||||
console.error('💥 Failed to start Sortir app:', error)
|
||||
document.getElementById('app')!.innerHTML = `
|
||||
<div style="padding: 20px; text-align: center; color: red;">
|
||||
<h1>Failed to Start</h1>
|
||||
<p>${error instanceof Error ? error.message : 'Unknown error'}</p>
|
||||
<p>Please refresh the page.</p>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
18
src/activities-app/main.ts
Normal file
18
src/activities-app/main.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { startApp } from './app'
|
||||
import { registerSW } from 'virtual:pwa-register'
|
||||
import 'vue-sonner/style.css'
|
||||
|
||||
// PWA service worker with periodic updates
|
||||
const intervalMS = 60 * 60 * 1000 // 1 hour
|
||||
registerSW({
|
||||
onRegistered(r) {
|
||||
r && setInterval(() => {
|
||||
r.update()
|
||||
}, intervalMS)
|
||||
},
|
||||
onOfflineReady() {
|
||||
console.log('Sortir app ready to work offline')
|
||||
}
|
||||
})
|
||||
|
||||
startApp()
|
||||
95
src/activities-app/views/SettingsPage.vue
Normal file
95
src/activities-app/views/SettingsPage.vue
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { useTheme } from '@/components/theme-provider'
|
||||
import { changeLocale, type AvailableLocale } from '@/i18n'
|
||||
import { auth } from '@/composables/useAuthService'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Sun, Moon, LogIn, LogOut } from 'lucide-vue-next'
|
||||
|
||||
const { theme, setTheme } = useTheme()
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
const languages: { code: AvailableLocale; label: string }[] = [
|
||||
{ code: 'fr', label: 'Français' },
|
||||
{ code: 'en', label: 'English' },
|
||||
{ code: 'es', label: 'Español' },
|
||||
]
|
||||
|
||||
const isAuthenticated = computed(() => auth.isAuthenticated.value)
|
||||
const userPubkey = computed(() => auth.currentUser.value?.pubkey)
|
||||
|
||||
function toggleTheme() {
|
||||
setTheme(theme.value === 'dark' ? 'light' : 'dark')
|
||||
}
|
||||
|
||||
function setLanguage(lang: AvailableLocale) {
|
||||
changeLocale(lang)
|
||||
}
|
||||
|
||||
async function handleLogout() {
|
||||
await auth.logout()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mx-auto px-4 py-6 max-w-lg">
|
||||
<h1 class="text-2xl font-bold text-foreground mb-6">{{ t('activities.settings.title') }}</h1>
|
||||
|
||||
<!-- Account -->
|
||||
<div class="space-y-4">
|
||||
<h2 class="text-sm font-medium text-muted-foreground uppercase tracking-wide">{{ t('activities.settings.account') }}</h2>
|
||||
<div v-if="isAuthenticated" class="bg-muted/50 rounded-lg p-4 space-y-3">
|
||||
<p class="text-sm text-foreground font-mono truncate">
|
||||
{{ userPubkey }}
|
||||
</p>
|
||||
<Button variant="outline" size="sm" class="w-full gap-2" @click="handleLogout">
|
||||
<LogOut class="w-4 h-4" />
|
||||
{{ t('activities.settings.logOut') }}
|
||||
</Button>
|
||||
</div>
|
||||
<div v-else class="bg-muted/50 rounded-lg p-4">
|
||||
<p class="text-sm text-muted-foreground mb-3">
|
||||
{{ t('activities.settings.loginPrompt') }}
|
||||
</p>
|
||||
<Button size="sm" class="w-full gap-2" @click="$router.push('/login')">
|
||||
<LogIn class="w-4 h-4" />
|
||||
{{ t('activities.settings.logIn') }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator class="my-6" />
|
||||
|
||||
<!-- Appearance -->
|
||||
<div class="space-y-4">
|
||||
<h2 class="text-sm font-medium text-muted-foreground uppercase tracking-wide">{{ t('activities.settings.appearance') }}</h2>
|
||||
<div class="flex items-center justify-between bg-muted/50 rounded-lg p-4">
|
||||
<span class="text-sm text-foreground">{{ t('activities.settings.theme') }}</span>
|
||||
<Button variant="outline" size="icon" class="h-8 w-8" @click="toggleTheme">
|
||||
<Sun v-if="theme === 'dark'" class="w-4 h-4" />
|
||||
<Moon v-else class="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator class="my-6" />
|
||||
|
||||
<!-- Language -->
|
||||
<div class="space-y-4">
|
||||
<h2 class="text-sm font-medium text-muted-foreground uppercase tracking-wide">{{ t('activities.settings.language') }}</h2>
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
v-for="lang in languages"
|
||||
:key="lang.code"
|
||||
:variant="locale === lang.code ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
@click="setLanguage(lang.code)"
|
||||
>
|
||||
{{ lang.label }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,5 +1,12 @@
|
|||
import type { AppConfig } from './core/types'
|
||||
|
||||
function parseMapCenter(envValue: string | undefined, fallback: { lat: number; lng: number }) {
|
||||
if (!envValue) return fallback
|
||||
const [lat, lng] = envValue.split(',').map(Number)
|
||||
if (isNaN(lat) || isNaN(lng)) return fallback
|
||||
return { lat, lng }
|
||||
}
|
||||
|
||||
export const appConfig: AppConfig = {
|
||||
modules: {
|
||||
base: {
|
||||
|
|
@ -94,6 +101,21 @@ export const appConfig: AppConfig = {
|
|||
maxTicketsPerUser: 10
|
||||
}
|
||||
},
|
||||
activities: {
|
||||
name: 'activities',
|
||||
enabled: true,
|
||||
lazy: false,
|
||||
config: {
|
||||
apiConfig: {
|
||||
baseUrl: import.meta.env.VITE_LNBITS_BASE_URL || 'http://localhost:5000',
|
||||
apiKey: import.meta.env.VITE_API_KEY || ''
|
||||
},
|
||||
defaultMapCenter: parseMapCenter(import.meta.env.VITE_DEFAULT_MAP_CENTER, { lat: 46.6034, lng: 1.8883 }),
|
||||
maxTicketsPerUser: 10,
|
||||
enableMap: true,
|
||||
enablePrivateEvents: false
|
||||
}
|
||||
},
|
||||
wallet: {
|
||||
name: 'wallet',
|
||||
enabled: true,
|
||||
|
|
|
|||
|
|
@ -151,6 +151,10 @@ export const SERVICE_TOKENS = {
|
|||
|
||||
// Events services
|
||||
EVENTS_SERVICE: Symbol('eventsService'),
|
||||
|
||||
// Activities services (Nostr-native events module)
|
||||
ACTIVITIES_NOSTR_SERVICE: Symbol('activitiesNostrService'),
|
||||
ACTIVITIES_TICKET_API: Symbol('activitiesTicketApi'),
|
||||
|
||||
// Invoice services
|
||||
INVOICE_SERVICE: Symbol('invoiceService'),
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ const messages: LocaleMessages = {
|
|||
events: 'Events',
|
||||
market: 'Market',
|
||||
chat: 'Chat',
|
||||
activities: 'Activities',
|
||||
login: 'Login',
|
||||
logout: 'Logout'
|
||||
},
|
||||
|
|
@ -29,6 +30,95 @@ const messages: LocaleMessages = {
|
|||
de: 'German',
|
||||
zh: 'Chinese'
|
||||
},
|
||||
activities: {
|
||||
title: 'Activities',
|
||||
createNew: 'Create Activity',
|
||||
noActivities: 'No activities found',
|
||||
filters: {
|
||||
all: 'All',
|
||||
today: 'Today',
|
||||
tomorrow: 'Tomorrow',
|
||||
thisWeek: 'This Week',
|
||||
thisMonth: 'This Month',
|
||||
},
|
||||
categories: {
|
||||
concert: 'Concert',
|
||||
workshop: 'Workshop',
|
||||
market: 'Market',
|
||||
festival: 'Festival',
|
||||
exhibition: 'Exhibition',
|
||||
sport: 'Sport',
|
||||
theater: 'Theater',
|
||||
cinema: 'Cinema',
|
||||
party: 'Party',
|
||||
talk: 'Talk',
|
||||
conference: 'Conference',
|
||||
meetup: 'Meetup',
|
||||
food: 'Food',
|
||||
outdoor: 'Outdoor',
|
||||
kids: 'Kids',
|
||||
wellness: 'Wellness',
|
||||
technology: 'Technology',
|
||||
art: 'Art',
|
||||
music: 'Music',
|
||||
dance: 'Dance',
|
||||
literature: 'Literature',
|
||||
comedy: 'Comedy',
|
||||
charity: 'Charity',
|
||||
tradition: 'Tradition',
|
||||
other: 'Other',
|
||||
},
|
||||
detail: {
|
||||
getTicket: 'Get Ticket',
|
||||
going: 'Going',
|
||||
maybe: 'Maybe',
|
||||
notGoing: 'Not Going',
|
||||
contactOrganizer: 'Contact Organizer',
|
||||
organizer: 'Organizer',
|
||||
location: 'Location',
|
||||
when: 'When',
|
||||
tickets: 'Tickets',
|
||||
ticketsAvailable: '{count} tickets available',
|
||||
soldOut: 'Sold Out',
|
||||
free: 'Free',
|
||||
},
|
||||
tickets: {
|
||||
myTickets: 'My Tickets',
|
||||
scanTicket: 'Scan Ticket',
|
||||
noTickets: 'No tickets yet',
|
||||
paid: 'Paid',
|
||||
pending: 'Pending',
|
||||
registered: 'Registered',
|
||||
},
|
||||
nav: {
|
||||
feed: 'Feed',
|
||||
calendar: 'Calendar',
|
||||
map: 'Map',
|
||||
favorites: 'Favorites',
|
||||
settings: 'Settings',
|
||||
},
|
||||
search: {
|
||||
placeholder: 'Search activities...',
|
||||
noResults: 'No activities found',
|
||||
},
|
||||
favorites: {
|
||||
title: 'Favorites',
|
||||
loginPrompt: 'Log in to save your favorite activities',
|
||||
empty: 'No favorites yet',
|
||||
emptyHint: 'Tap the heart icon on any activity to save it here',
|
||||
logIn: 'Log in',
|
||||
},
|
||||
settings: {
|
||||
title: 'Settings',
|
||||
account: 'Account',
|
||||
loginPrompt: 'Log in to bookmark activities, RSVP, and purchase tickets.',
|
||||
logIn: 'Log in',
|
||||
logOut: 'Log out',
|
||||
appearance: 'Appearance',
|
||||
theme: 'Theme',
|
||||
language: 'Language',
|
||||
},
|
||||
},
|
||||
dateTimeFormats: {
|
||||
short: {
|
||||
year: 'numeric',
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ const messages: LocaleMessages = {
|
|||
events: 'Eventos',
|
||||
market: 'Mercado',
|
||||
chat: 'Chat',
|
||||
activities: 'Actividades',
|
||||
login: 'Iniciar Sesión',
|
||||
logout: 'Cerrar Sesión'
|
||||
},
|
||||
|
|
@ -29,6 +30,95 @@ const messages: LocaleMessages = {
|
|||
de: 'Alemán',
|
||||
zh: 'Chino'
|
||||
},
|
||||
activities: {
|
||||
title: 'Actividades',
|
||||
createNew: 'Crear actividad',
|
||||
noActivities: 'No se encontraron actividades',
|
||||
filters: {
|
||||
all: 'Todas',
|
||||
today: 'Hoy',
|
||||
tomorrow: 'Mañana',
|
||||
thisWeek: 'Esta semana',
|
||||
thisMonth: 'Este mes',
|
||||
},
|
||||
categories: {
|
||||
concert: 'Concierto',
|
||||
workshop: 'Taller',
|
||||
market: 'Mercado',
|
||||
festival: 'Festival',
|
||||
exhibition: 'Exposición',
|
||||
sport: 'Deporte',
|
||||
theater: 'Teatro',
|
||||
cinema: 'Cine',
|
||||
party: 'Fiesta',
|
||||
talk: 'Charla',
|
||||
conference: 'Conferencia',
|
||||
meetup: 'Encuentro',
|
||||
food: 'Gastronomía',
|
||||
outdoor: 'Al aire libre',
|
||||
kids: 'Niños',
|
||||
wellness: 'Bienestar',
|
||||
technology: 'Tecnología',
|
||||
art: 'Arte',
|
||||
music: 'Música',
|
||||
dance: 'Danza',
|
||||
literature: 'Literatura',
|
||||
comedy: 'Comedia',
|
||||
charity: 'Solidario',
|
||||
tradition: 'Tradición',
|
||||
other: 'Otro',
|
||||
},
|
||||
detail: {
|
||||
getTicket: 'Obtener boleto',
|
||||
going: 'Voy',
|
||||
maybe: 'Tal vez',
|
||||
notGoing: 'No voy',
|
||||
contactOrganizer: 'Contactar organizador',
|
||||
organizer: 'Organizador',
|
||||
location: 'Ubicación',
|
||||
when: 'Cuándo',
|
||||
tickets: 'Boletos',
|
||||
ticketsAvailable: '{count} boletos disponibles',
|
||||
soldOut: 'Agotado',
|
||||
free: 'Gratis',
|
||||
},
|
||||
tickets: {
|
||||
myTickets: 'Mis boletos',
|
||||
scanTicket: 'Escanear boleto',
|
||||
noTickets: 'Aún no tienes boletos',
|
||||
paid: 'Pagado',
|
||||
pending: 'Pendiente',
|
||||
registered: 'Registrado',
|
||||
},
|
||||
nav: {
|
||||
feed: 'Inicio',
|
||||
calendar: 'Calendario',
|
||||
map: 'Mapa',
|
||||
favorites: 'Favoritos',
|
||||
settings: 'Ajustes',
|
||||
},
|
||||
search: {
|
||||
placeholder: 'Buscar actividades...',
|
||||
noResults: 'No se encontraron actividades',
|
||||
},
|
||||
favorites: {
|
||||
title: 'Favoritos',
|
||||
loginPrompt: 'Inicia sesión para guardar tus actividades favoritas',
|
||||
empty: 'Aún no tienes favoritos',
|
||||
emptyHint: 'Toca el corazón en cualquier actividad para guardarla aquí',
|
||||
logIn: 'Iniciar sesión',
|
||||
},
|
||||
settings: {
|
||||
title: 'Ajustes',
|
||||
account: 'Cuenta',
|
||||
loginPrompt: 'Inicia sesión para guardar actividades, confirmar asistencia y comprar boletos.',
|
||||
logIn: 'Iniciar sesión',
|
||||
logOut: 'Cerrar sesión',
|
||||
appearance: 'Apariencia',
|
||||
theme: 'Tema',
|
||||
language: 'Idioma',
|
||||
},
|
||||
},
|
||||
dateTimeFormats: {
|
||||
short: {
|
||||
year: 'numeric',
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ const messages: LocaleMessages = {
|
|||
events: 'Événements',
|
||||
market: 'Marché',
|
||||
chat: 'Chat',
|
||||
activities: 'Activités',
|
||||
login: 'Connexion',
|
||||
logout: 'Déconnexion'
|
||||
},
|
||||
|
|
@ -29,6 +30,95 @@ const messages: LocaleMessages = {
|
|||
de: 'Allemand',
|
||||
zh: 'Chinois'
|
||||
},
|
||||
activities: {
|
||||
title: 'Activités',
|
||||
createNew: 'Créer une activité',
|
||||
noActivities: 'Aucune activité trouvée',
|
||||
filters: {
|
||||
all: 'Tout',
|
||||
today: "Aujourd'hui",
|
||||
tomorrow: 'Demain',
|
||||
thisWeek: 'Cette semaine',
|
||||
thisMonth: 'Ce mois-ci',
|
||||
},
|
||||
categories: {
|
||||
concert: 'Concert',
|
||||
workshop: 'Atelier',
|
||||
market: 'Marché',
|
||||
festival: 'Festival',
|
||||
exhibition: 'Exposition',
|
||||
sport: 'Sport',
|
||||
theater: 'Théâtre',
|
||||
cinema: 'Cinéma',
|
||||
party: 'Fête',
|
||||
talk: 'Conférence',
|
||||
conference: 'Congrès',
|
||||
meetup: 'Rencontre',
|
||||
food: 'Gastronomie',
|
||||
outdoor: 'Plein air',
|
||||
kids: 'Enfants',
|
||||
wellness: 'Bien-être',
|
||||
technology: 'Technologie',
|
||||
art: 'Art',
|
||||
music: 'Musique',
|
||||
dance: 'Danse',
|
||||
literature: 'Littérature',
|
||||
comedy: 'Humour',
|
||||
charity: 'Caritatif',
|
||||
tradition: 'Tradition',
|
||||
other: 'Autre',
|
||||
},
|
||||
detail: {
|
||||
getTicket: 'Obtenir un billet',
|
||||
going: 'Présent',
|
||||
maybe: 'Peut-être',
|
||||
notGoing: 'Absent',
|
||||
contactOrganizer: "Contacter l'organisateur",
|
||||
organizer: 'Organisateur',
|
||||
location: 'Lieu',
|
||||
when: 'Quand',
|
||||
tickets: 'Billets',
|
||||
ticketsAvailable: '{count} billets disponibles',
|
||||
soldOut: 'Épuisé',
|
||||
free: 'Gratuit',
|
||||
},
|
||||
tickets: {
|
||||
myTickets: 'Mes billets',
|
||||
scanTicket: 'Scanner le billet',
|
||||
noTickets: 'Pas encore de billets',
|
||||
paid: 'Payé',
|
||||
pending: 'En attente',
|
||||
registered: 'Enregistré',
|
||||
},
|
||||
nav: {
|
||||
feed: 'Fil',
|
||||
calendar: 'Calendrier',
|
||||
map: 'Carte',
|
||||
favorites: 'Favoris',
|
||||
settings: 'Réglages',
|
||||
},
|
||||
search: {
|
||||
placeholder: 'Rechercher des activités...',
|
||||
noResults: 'Aucune activité trouvée',
|
||||
},
|
||||
favorites: {
|
||||
title: 'Favoris',
|
||||
loginPrompt: 'Connectez-vous pour sauvegarder vos activités préférées',
|
||||
empty: 'Pas encore de favoris',
|
||||
emptyHint: "Appuyez sur le cœur d'une activité pour la sauvegarder ici",
|
||||
logIn: 'Se connecter',
|
||||
},
|
||||
settings: {
|
||||
title: 'Réglages',
|
||||
account: 'Compte',
|
||||
loginPrompt: 'Connectez-vous pour sauvegarder des activités, confirmer votre présence et acheter des billets.',
|
||||
logIn: 'Se connecter',
|
||||
logOut: 'Se déconnecter',
|
||||
appearance: 'Apparence',
|
||||
theme: 'Thème',
|
||||
language: 'Langue',
|
||||
},
|
||||
},
|
||||
dateTimeFormats: {
|
||||
short: {
|
||||
year: 'numeric',
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ export interface LocaleMessages {
|
|||
events: string
|
||||
market: string
|
||||
chat: string
|
||||
activities: string
|
||||
login: string
|
||||
logout: string
|
||||
}
|
||||
|
|
@ -29,6 +30,70 @@ export interface LocaleMessages {
|
|||
de: string
|
||||
zh: string
|
||||
}
|
||||
// Activities module
|
||||
activities?: {
|
||||
title: string
|
||||
createNew: string
|
||||
noActivities: string
|
||||
filters: {
|
||||
all: string
|
||||
today: string
|
||||
tomorrow: string
|
||||
thisWeek: string
|
||||
thisMonth: string
|
||||
}
|
||||
categories: Record<string, string>
|
||||
detail: {
|
||||
getTicket: string
|
||||
going: string
|
||||
maybe: string
|
||||
notGoing: string
|
||||
contactOrganizer: string
|
||||
organizer: string
|
||||
location: string
|
||||
when: string
|
||||
tickets: string
|
||||
ticketsAvailable: string
|
||||
soldOut: string
|
||||
free: string
|
||||
}
|
||||
tickets: {
|
||||
myTickets: string
|
||||
scanTicket: string
|
||||
noTickets: string
|
||||
paid: string
|
||||
pending: string
|
||||
registered: string
|
||||
}
|
||||
nav: {
|
||||
feed: string
|
||||
calendar: string
|
||||
map: string
|
||||
favorites: string
|
||||
settings: string
|
||||
}
|
||||
search: {
|
||||
placeholder: string
|
||||
noResults: string
|
||||
}
|
||||
favorites: {
|
||||
title: string
|
||||
loginPrompt: string
|
||||
empty: string
|
||||
emptyHint: string
|
||||
logIn: string
|
||||
}
|
||||
settings: {
|
||||
title: string
|
||||
account: string
|
||||
loginPrompt: string
|
||||
logIn: string
|
||||
logOut: string
|
||||
appearance: string
|
||||
theme: string
|
||||
language: string
|
||||
}
|
||||
}
|
||||
// Add date/time formats
|
||||
dateTimeFormats: {
|
||||
short: {
|
||||
|
|
|
|||
183
src/modules/activities/components/ActivityCalendarView.vue
Normal file
183
src/modules/activities/components/ActivityCalendarView.vue
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import {
|
||||
startOfMonth, endOfMonth, startOfWeek, endOfWeek,
|
||||
eachDayOfInterval, format, isSameMonth, isSameDay,
|
||||
addMonths, subMonths,
|
||||
} from 'date-fns'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
|
||||
import { useDateLocale } from '../composables/useDateLocale'
|
||||
import type { Activity } from '../types/activity'
|
||||
|
||||
const props = defineProps<{
|
||||
activities: Activity[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
selectDate: [date: Date]
|
||||
selectActivity: [activity: Activity]
|
||||
}>()
|
||||
|
||||
const { dateLocale } = useDateLocale()
|
||||
|
||||
const currentMonth = ref(new Date())
|
||||
|
||||
const monthLabel = computed(() => format(currentMonth.value, 'MMMM yyyy', { locale: dateLocale.value }))
|
||||
|
||||
const weekDays = computed(() => {
|
||||
// Generate localized single-letter day names starting from Monday
|
||||
const days: string[] = []
|
||||
// Start from a known Monday (2024-01-01 is a Monday)
|
||||
const monday = new Date(2024, 0, 1)
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const d = new Date(monday)
|
||||
d.setDate(d.getDate() + i)
|
||||
days.push(format(d, 'EEEEE', { locale: dateLocale.value }))
|
||||
}
|
||||
return days
|
||||
})
|
||||
|
||||
const calendarDays = computed(() => {
|
||||
const monthStart = startOfMonth(currentMonth.value)
|
||||
const monthEnd = endOfMonth(currentMonth.value)
|
||||
const calStart = startOfWeek(monthStart, { weekStartsOn: 1 })
|
||||
const calEnd = endOfWeek(monthEnd, { weekStartsOn: 1 })
|
||||
|
||||
return eachDayOfInterval({ start: calStart, end: calEnd })
|
||||
})
|
||||
|
||||
// Map of date string -> activities on that day
|
||||
const activityDayMap = computed(() => {
|
||||
const map = new Map<string, Activity[]>()
|
||||
for (const activity of props.activities) {
|
||||
if (!activity.startDate || isNaN(activity.startDate.getTime())) continue
|
||||
const key = format(activity.startDate, 'yyyy-MM-dd')
|
||||
if (!map.has(key)) map.set(key, [])
|
||||
map.get(key)!.push(activity)
|
||||
}
|
||||
return map
|
||||
})
|
||||
|
||||
function getActivitiesForDay(date: Date): Activity[] {
|
||||
const key = format(date, 'yyyy-MM-dd')
|
||||
return activityDayMap.value.get(key) ?? []
|
||||
}
|
||||
|
||||
function getDotCount(date: Date): number {
|
||||
return Math.min(getActivitiesForDay(date).length, 3)
|
||||
}
|
||||
|
||||
const selectedDay = ref<Date | null>(null)
|
||||
const selectedDayActivities = computed(() => {
|
||||
if (!selectedDay.value) return []
|
||||
return getActivitiesForDay(selectedDay.value)
|
||||
})
|
||||
|
||||
function selectDay(date: Date) {
|
||||
if (selectedDay.value && isSameDay(selectedDay.value, date)) {
|
||||
selectedDay.value = null
|
||||
} else {
|
||||
selectedDay.value = date
|
||||
emit('selectDate', date)
|
||||
}
|
||||
}
|
||||
|
||||
function prevMonth() {
|
||||
currentMonth.value = subMonths(currentMonth.value, 1)
|
||||
selectedDay.value = null
|
||||
}
|
||||
|
||||
function nextMonth() {
|
||||
currentMonth.value = addMonths(currentMonth.value, 1)
|
||||
selectedDay.value = null
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<!-- Month navigation -->
|
||||
<div class="flex items-center justify-between">
|
||||
<Button variant="ghost" size="icon" class="h-8 w-8" @click="prevMonth">
|
||||
<ChevronLeft class="h-4 w-4" />
|
||||
</Button>
|
||||
<h2 class="text-lg font-semibold text-foreground">{{ monthLabel }}</h2>
|
||||
<Button variant="ghost" size="icon" class="h-8 w-8" @click="nextMonth">
|
||||
<ChevronRight class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Weekday headers -->
|
||||
<div class="grid grid-cols-7 gap-0">
|
||||
<div
|
||||
v-for="day in weekDays"
|
||||
:key="day"
|
||||
class="text-center text-xs font-medium text-muted-foreground py-1"
|
||||
>
|
||||
{{ day }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Calendar grid -->
|
||||
<div class="grid grid-cols-7 gap-0">
|
||||
<button
|
||||
v-for="date in calendarDays"
|
||||
:key="date.toISOString()"
|
||||
class="aspect-square flex flex-col items-center justify-center relative p-1 rounded-lg transition-colors"
|
||||
:class="{
|
||||
'text-muted-foreground/40': !isSameMonth(date, currentMonth),
|
||||
'bg-primary text-primary-foreground': selectedDay && isSameDay(date, selectedDay),
|
||||
'bg-muted/50': isSameDay(date, new Date()) && !(selectedDay && isSameDay(date, selectedDay)),
|
||||
'hover:bg-muted': !(selectedDay && isSameDay(date, selectedDay)),
|
||||
}"
|
||||
@click="selectDay(date)"
|
||||
>
|
||||
<span class="text-sm">{{ format(date, 'd') }}</span>
|
||||
<!-- Activity dots -->
|
||||
<div v-if="getDotCount(date) > 0" class="flex gap-0.5 mt-0.5">
|
||||
<div
|
||||
v-for="i in getDotCount(date)"
|
||||
:key="i"
|
||||
class="w-1 h-1 rounded-full"
|
||||
:class="selectedDay && isSameDay(date, selectedDay) ? 'bg-primary-foreground' : 'bg-primary'"
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Selected day activities -->
|
||||
<div v-if="selectedDay" class="border-t pt-4 space-y-2">
|
||||
<h3 class="text-sm font-medium text-muted-foreground">
|
||||
{{ format(selectedDay, 'EEEE, MMMM d', { locale: dateLocale }) }}
|
||||
<span v-if="selectedDayActivities.length > 0" class="ml-1">
|
||||
({{ selectedDayActivities.length }})
|
||||
</span>
|
||||
</h3>
|
||||
|
||||
<div v-if="selectedDayActivities.length === 0" class="text-sm text-muted-foreground/70 py-4 text-center">
|
||||
No activities on this day
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="activity in selectedDayActivities"
|
||||
:key="activity.nostrEventId"
|
||||
class="flex items-center gap-3 p-2 rounded-lg hover:bg-muted cursor-pointer"
|
||||
@click="emit('selectActivity', activity)"
|
||||
>
|
||||
<img
|
||||
v-if="activity.image"
|
||||
:src="activity.image"
|
||||
:alt="activity.title"
|
||||
class="w-12 h-12 rounded object-cover shrink-0"
|
||||
/>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm font-medium text-foreground truncate">{{ activity.title }}</p>
|
||||
<p class="text-xs text-muted-foreground truncate">
|
||||
{{ activity.type === 'time' ? format(activity.startDate, 'HH:mm') : '' }}
|
||||
{{ activity.location ? `· ${activity.location}` : '' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
152
src/modules/activities/components/ActivityCard.vue
Normal file
152
src/modules/activities/components/ActivityCard.vue
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { format } from 'date-fns'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { MapPin, Calendar, Ticket } from 'lucide-vue-next'
|
||||
import BookmarkButton from './BookmarkButton.vue'
|
||||
import { useDateLocale } from '../composables/useDateLocale'
|
||||
import type { Activity } from '../types/activity'
|
||||
|
||||
const props = defineProps<{
|
||||
activity: Activity
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
click: [activity: Activity]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { dateLocale } = useDateLocale()
|
||||
|
||||
const dateDisplay = computed(() => {
|
||||
const a = props.activity
|
||||
if (!a.startDate || isNaN(a.startDate.getTime())) return ''
|
||||
try {
|
||||
const opts = { locale: dateLocale.value }
|
||||
if (a.type === 'date') {
|
||||
return format(a.startDate, 'EEE, MMM d', opts)
|
||||
}
|
||||
const date = format(a.startDate, 'EEE, MMM d', opts)
|
||||
const time = format(a.startDate, 'HH:mm', opts)
|
||||
return `${date} \u2022 ${time}`
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
})
|
||||
|
||||
const categoryLabel = computed(() => {
|
||||
if (!props.activity.category) return null
|
||||
return t(`activities.categories.${props.activity.category}`, props.activity.category)
|
||||
})
|
||||
|
||||
const priceDisplay = computed(() => {
|
||||
const info = props.activity.ticketInfo
|
||||
if (!info) return null
|
||||
if (info.price === 0) return t('activities.detail.free')
|
||||
return `${info.price} ${info.currency}`
|
||||
})
|
||||
|
||||
const placeholderBg = computed(() => {
|
||||
// Generate a consistent hue from the activity title
|
||||
const hash = props.activity.title.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
|
||||
const hue = hash % 360
|
||||
return `hsl(${hue}, 40%, 85%)`
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card
|
||||
class="overflow-hidden cursor-pointer hover:shadow-lg transition-shadow duration-200 flex flex-col"
|
||||
@click="emit('click', activity)"
|
||||
>
|
||||
<!-- Image / Placeholder -->
|
||||
<div class="relative aspect-[16/9] overflow-hidden">
|
||||
<img
|
||||
v-if="activity.image"
|
||||
:src="activity.image"
|
||||
:alt="activity.title"
|
||||
class="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="w-full h-full flex items-center justify-center"
|
||||
:style="{ backgroundColor: placeholderBg }"
|
||||
>
|
||||
<Calendar class="w-12 h-12 text-foreground/20" />
|
||||
</div>
|
||||
|
||||
<!-- Category badge -->
|
||||
<Badge
|
||||
v-if="categoryLabel"
|
||||
variant="secondary"
|
||||
class="absolute top-2 left-2 text-xs"
|
||||
>
|
||||
{{ categoryLabel }}
|
||||
</Badge>
|
||||
|
||||
<!-- Price badge -->
|
||||
<Badge
|
||||
v-if="priceDisplay"
|
||||
class="absolute top-2 right-2 text-xs"
|
||||
>
|
||||
{{ priceDisplay }}
|
||||
</Badge>
|
||||
|
||||
</div>
|
||||
|
||||
<CardContent class="p-4 flex-1 flex flex-col gap-2">
|
||||
<!-- Title + Bookmark -->
|
||||
<div class="flex items-start gap-1">
|
||||
<h3 class="font-semibold text-foreground line-clamp-2 leading-tight flex-1">
|
||||
{{ activity.title }}
|
||||
</h3>
|
||||
<BookmarkButton
|
||||
:pubkey="activity.organizer.pubkey"
|
||||
:d-tag="activity.id"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Summary -->
|
||||
<p
|
||||
v-if="activity.summary"
|
||||
class="text-sm text-muted-foreground line-clamp-2"
|
||||
>
|
||||
{{ activity.summary }}
|
||||
</p>
|
||||
|
||||
<div class="mt-auto space-y-1.5 pt-2">
|
||||
<!-- Date/Time -->
|
||||
<div class="flex items-center gap-1.5 text-sm text-muted-foreground">
|
||||
<Calendar class="w-3.5 h-3.5 shrink-0" />
|
||||
<span class="truncate">{{ dateDisplay }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Location -->
|
||||
<div
|
||||
v-if="activity.location"
|
||||
class="flex items-center gap-1.5 text-sm text-muted-foreground"
|
||||
>
|
||||
<MapPin class="w-3.5 h-3.5 shrink-0" />
|
||||
<span class="truncate">{{ activity.location }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Tickets available -->
|
||||
<div
|
||||
v-if="activity.ticketInfo"
|
||||
class="flex items-center gap-1.5 text-sm text-muted-foreground"
|
||||
>
|
||||
<Ticket class="w-3.5 h-3.5 shrink-0" />
|
||||
<span v-if="activity.ticketInfo.available > 0">
|
||||
{{ t('activities.detail.ticketsAvailable', { count: activity.ticketInfo.available }) }}
|
||||
</span>
|
||||
<span v-else class="text-destructive font-medium">
|
||||
{{ t('activities.detail.soldOut') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
59
src/modules/activities/components/ActivityList.vue
Normal file
59
src/modules/activities/components/ActivityList.vue
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { CalendarSearch } from 'lucide-vue-next'
|
||||
import ActivityCard from './ActivityCard.vue'
|
||||
import type { Activity } from '../types/activity'
|
||||
|
||||
defineProps<{
|
||||
activities: Activity[]
|
||||
isLoading?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [activity: Activity]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Loading skeleton -->
|
||||
<div v-if="isLoading" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div
|
||||
v-for="i in 6"
|
||||
:key="i"
|
||||
class="rounded-lg border bg-card animate-pulse"
|
||||
>
|
||||
<div class="aspect-[16/9] bg-muted" />
|
||||
<div class="p-4 space-y-3">
|
||||
<div class="h-5 bg-muted rounded w-3/4" />
|
||||
<div class="h-4 bg-muted rounded w-full" />
|
||||
<div class="h-4 bg-muted rounded w-1/2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div
|
||||
v-else-if="activities.length === 0"
|
||||
class="flex flex-col items-center justify-center py-16 text-center"
|
||||
>
|
||||
<CalendarSearch class="w-16 h-16 text-muted-foreground opacity-30 mb-4" />
|
||||
<h3 class="text-lg font-medium text-foreground mb-1">
|
||||
{{ t('activities.noActivities') }}
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ t('activities.search.noResults') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Activity grid -->
|
||||
<div v-else class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<ActivityCard
|
||||
v-for="activity in activities"
|
||||
:key="activity.nostrEventId"
|
||||
:activity="activity"
|
||||
@click="emit('select', activity)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
126
src/modules/activities/components/ActivityMap.vue
Normal file
126
src/modules/activities/components/ActivityMap.vue
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import L from 'leaflet'
|
||||
import 'leaflet/dist/leaflet.css'
|
||||
import type { Activity } from '../types/activity'
|
||||
|
||||
const props = defineProps<{
|
||||
activities: Activity[]
|
||||
center?: { lat: number; lng: number }
|
||||
zoom?: number
|
||||
}>()
|
||||
|
||||
const router = useRouter()
|
||||
const mapContainer = ref<HTMLElement | null>(null)
|
||||
let map: L.Map | null = null
|
||||
let markerGroup: L.LayerGroup | null = null
|
||||
let hasFittedBounds = false
|
||||
|
||||
// Fix Leaflet default icon paths (broken by bundlers)
|
||||
const defaultIcon = L.icon({
|
||||
iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
|
||||
iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
|
||||
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
shadowSize: [41, 41],
|
||||
})
|
||||
|
||||
function initMap() {
|
||||
if (!mapContainer.value) return
|
||||
|
||||
const defaultCenter = props.center ?? { lat: 46.6034, lng: 1.8883 } // France
|
||||
const defaultZoom = props.zoom ?? 5
|
||||
|
||||
map = L.map(mapContainer.value).setView(
|
||||
[defaultCenter.lat, defaultCenter.lng],
|
||||
defaultZoom
|
||||
)
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
||||
maxZoom: 19,
|
||||
}).addTo(map)
|
||||
|
||||
markerGroup = L.layerGroup().addTo(map)
|
||||
|
||||
updateMarkers()
|
||||
}
|
||||
|
||||
function updateMarkers() {
|
||||
if (!map || !markerGroup) return
|
||||
|
||||
markerGroup.clearLayers()
|
||||
|
||||
const geoActivities = props.activities.filter(a => a.coordinates)
|
||||
|
||||
for (const activity of geoActivities) {
|
||||
const { lat, lng } = activity.coordinates!
|
||||
|
||||
const marker = L.marker([lat, lng], { icon: defaultIcon })
|
||||
|
||||
const popupContent = `
|
||||
<div style="min-width: 200px; cursor: pointer;" class="activity-popup">
|
||||
${activity.image ? `<img src="${activity.image}" style="width: 100%; height: 100px; object-fit: cover; border-radius: 4px; margin-bottom: 8px;" />` : ''}
|
||||
<div style="font-weight: 600; font-size: 14px; margin-bottom: 4px;">${escapeHtml(activity.title)}</div>
|
||||
${activity.location ? `<div style="font-size: 12px; color: #888; margin-bottom: 2px;">📍 ${escapeHtml(activity.location)}</div>` : ''}
|
||||
<div style="font-size: 12px; color: #888;">📅 ${activity.startDate.toLocaleDateString()}</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
marker.bindPopup(popupContent)
|
||||
marker.on('click', () => {
|
||||
marker.openPopup()
|
||||
})
|
||||
// Navigate on popup click
|
||||
marker.on('popupopen', () => {
|
||||
const popup = marker.getPopup()
|
||||
if (popup) {
|
||||
const el = popup.getElement()
|
||||
const content = el?.querySelector('.activity-popup')
|
||||
if (content) {
|
||||
(content as HTMLElement).onclick = () => {
|
||||
router.push({ name: 'activity-detail', params: { id: activity.id } })
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
markerGroup.addLayer(marker)
|
||||
}
|
||||
|
||||
// Fit bounds only on first load, not when new activities stream in
|
||||
if (!hasFittedBounds && geoActivities.length > 0) {
|
||||
hasFittedBounds = true
|
||||
const bounds = L.latLngBounds(
|
||||
geoActivities.map(a => [a.coordinates!.lat, a.coordinates!.lng] as L.LatLngTuple)
|
||||
)
|
||||
map.fitBounds(bounds, { padding: [50, 50], maxZoom: 12 })
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHtml(text: string): string {
|
||||
const div = document.createElement('div')
|
||||
div.textContent = text
|
||||
return div.innerHTML
|
||||
}
|
||||
|
||||
watch(() => props.activities, updateMarkers, { deep: true })
|
||||
|
||||
onMounted(() => {
|
||||
initMap()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (map) {
|
||||
map.remove()
|
||||
map = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="mapContainer" class="w-full h-full min-h-[400px] rounded-lg z-0" />
|
||||
</template>
|
||||
169
src/modules/activities/components/ActivitySearchOverlay.vue
Normal file
169
src/modules/activities/components/ActivitySearchOverlay.vue
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { format } from 'date-fns'
|
||||
import { useDateLocale } from '../composables/useDateLocale'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Search, X, MapPin, Calendar } from 'lucide-vue-next'
|
||||
import { useFuzzySearch, type FuzzySearchOptions } from '@/composables/useFuzzySearch'
|
||||
import type { Activity } from '../types/activity'
|
||||
|
||||
const props = defineProps<{
|
||||
activities: Activity[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [activity: Activity]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { dateLocale } = useDateLocale()
|
||||
const isOpen = ref(false)
|
||||
const inputRef = ref<HTMLInputElement | null>(null)
|
||||
|
||||
const searchOptions: FuzzySearchOptions<Activity> = {
|
||||
fuseOptions: {
|
||||
keys: [
|
||||
{ name: 'title', weight: 0.5 },
|
||||
{ name: 'summary', weight: 0.2 },
|
||||
{ name: 'description', weight: 0.15 },
|
||||
{ name: 'location', weight: 0.1 },
|
||||
{ name: 'tags', weight: 0.05 },
|
||||
],
|
||||
threshold: 0.35,
|
||||
ignoreLocation: true,
|
||||
},
|
||||
matchAllWhenSearchEmpty: false,
|
||||
minSearchLength: 2,
|
||||
resultLimit: 8,
|
||||
}
|
||||
|
||||
const activitiesRef = computed(() => props.activities)
|
||||
|
||||
const {
|
||||
searchQuery,
|
||||
filteredItems,
|
||||
isSearching,
|
||||
clearSearch,
|
||||
setSearchQuery,
|
||||
} = useFuzzySearch(activitiesRef, searchOptions)
|
||||
|
||||
const showResults = computed(() => isOpen.value && isSearching.value && filteredItems.value.length > 0)
|
||||
const showNoResults = computed(() => isOpen.value && isSearching.value && filteredItems.value.length === 0)
|
||||
|
||||
function formatDate(activity: Activity): string {
|
||||
if (!activity.startDate || isNaN(activity.startDate.getTime())) return ''
|
||||
try {
|
||||
const opts = { locale: dateLocale.value }
|
||||
if (activity.type === 'date') return format(activity.startDate, 'MMM d', opts)
|
||||
return format(activity.startDate, 'MMM d · HH:mm', opts)
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
function handleSelect(activity: Activity) {
|
||||
clearSearch()
|
||||
isOpen.value = false
|
||||
emit('select', activity)
|
||||
}
|
||||
|
||||
function handleClear() {
|
||||
clearSearch()
|
||||
isOpen.value = false
|
||||
}
|
||||
|
||||
function handleFocus() {
|
||||
isOpen.value = true
|
||||
}
|
||||
|
||||
function handleInput(value: string | number) {
|
||||
setSearchQuery(String(value))
|
||||
isOpen.value = true
|
||||
}
|
||||
|
||||
// Close on click outside
|
||||
function handleClickOutside(e: MouseEvent) {
|
||||
const target = e.target as HTMLElement
|
||||
if (!target.closest('.search-overlay-container')) {
|
||||
isOpen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(isOpen, (open) => {
|
||||
if (open) {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
} else {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="search-overlay-container relative">
|
||||
<!-- Search input -->
|
||||
<div class="relative">
|
||||
<Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
|
||||
<Input
|
||||
ref="inputRef"
|
||||
:model-value="searchQuery"
|
||||
@update:model-value="handleInput"
|
||||
@focus="handleFocus"
|
||||
:placeholder="t('activities.search.placeholder')"
|
||||
class="pl-9 pr-9"
|
||||
/>
|
||||
<Button
|
||||
v-if="searchQuery"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6 p-0"
|
||||
@click="handleClear"
|
||||
>
|
||||
<X class="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Results dropdown overlay -->
|
||||
<div
|
||||
v-if="showResults || showNoResults"
|
||||
class="absolute left-0 right-0 top-full mt-1 z-50 bg-background border rounded-lg shadow-lg max-h-[50vh] overflow-y-auto"
|
||||
>
|
||||
<!-- No results -->
|
||||
<div v-if="showNoResults" class="p-4 text-sm text-muted-foreground text-center">
|
||||
{{ t('activities.search.noResults') }}
|
||||
</div>
|
||||
|
||||
<!-- Result items -->
|
||||
<button
|
||||
v-for="activity in filteredItems"
|
||||
:key="activity.nostrEventId"
|
||||
class="w-full flex items-center gap-3 px-3 py-2.5 hover:bg-muted transition-colors text-left border-b last:border-b-0"
|
||||
@click="handleSelect(activity)"
|
||||
>
|
||||
<!-- Thumbnail -->
|
||||
<img
|
||||
v-if="activity.image"
|
||||
:src="activity.image"
|
||||
:alt="activity.title"
|
||||
class="w-10 h-10 rounded object-cover shrink-0"
|
||||
/>
|
||||
<div v-else class="w-10 h-10 rounded bg-muted flex items-center justify-center shrink-0">
|
||||
<Calendar class="w-4 h-4 text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm font-medium text-foreground truncate">{{ activity.title }}</p>
|
||||
<div class="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<span v-if="formatDate(activity)" class="truncate">{{ formatDate(activity) }}</span>
|
||||
<span v-if="activity.location" class="flex items-center gap-0.5 truncate">
|
||||
<MapPin class="w-2.5 h-2.5 shrink-0" />
|
||||
{{ activity.location }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
48
src/modules/activities/components/BookmarkButton.vue
Normal file
48
src/modules/activities/components/BookmarkButton.vue
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Heart } from 'lucide-vue-next'
|
||||
import { toast } from 'vue-sonner'
|
||||
import { useAuth } from '@/composables/useAuthService'
|
||||
import { useBookmarks } from '../composables/useBookmarks'
|
||||
import { NIP52_KINDS } from '../types/nip52'
|
||||
|
||||
const props = defineProps<{
|
||||
pubkey: string
|
||||
dTag: string
|
||||
kind?: number
|
||||
}>()
|
||||
|
||||
const router = useRouter()
|
||||
const { isAuthenticated } = useAuth()
|
||||
const { isBookmarked, toggleBookmark } = useBookmarks()
|
||||
|
||||
const activityKind = computed(() => props.kind ?? NIP52_KINDS.CALENDAR_TIME_EVENT)
|
||||
const bookmarked = computed(() => isBookmarked(activityKind.value, props.pubkey, props.dTag))
|
||||
|
||||
function handleToggle() {
|
||||
if (!isAuthenticated.value) {
|
||||
toast.info('Log in to save favorites', {
|
||||
action: {
|
||||
label: 'Log in',
|
||||
onClick: () => router.push('/login'),
|
||||
},
|
||||
})
|
||||
return
|
||||
}
|
||||
toggleBookmark(activityKind.value, props.pubkey, props.dTag)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8"
|
||||
:class="bookmarked ? 'text-red-500 hover:text-red-600' : 'text-muted-foreground hover:text-foreground'"
|
||||
@click.stop="handleToggle"
|
||||
>
|
||||
<Heart class="w-4 h-4" :class="{ 'fill-current': bookmarked }" />
|
||||
</Button>
|
||||
</template>
|
||||
52
src/modules/activities/components/CategoryFilterBar.vue
Normal file
52
src/modules/activities/components/CategoryFilterBar.vue
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { X } from 'lucide-vue-next'
|
||||
import type { ActivityCategory } from '../types/category'
|
||||
import { ALL_CATEGORIES } from '../types/category'
|
||||
|
||||
const props = defineProps<{
|
||||
selected: ActivityCategory[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
toggle: [category: ActivityCategory]
|
||||
clear: []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
function categoryLabel(cat: ActivityCategory): string {
|
||||
return t(`activities.categories.${cat}`, cat)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-medium text-muted-foreground">Categories</span>
|
||||
<Button
|
||||
v-if="props.selected.length > 0"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="h-6 px-2 text-xs"
|
||||
@click="emit('clear')"
|
||||
>
|
||||
<X class="w-3 h-3 mr-1" />
|
||||
Clear
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<Badge
|
||||
v-for="cat in ALL_CATEGORIES"
|
||||
:key="cat"
|
||||
:variant="props.selected.includes(cat) ? 'default' : 'outline'"
|
||||
class="cursor-pointer text-xs select-none hover:opacity-80 transition-opacity"
|
||||
@click="emit('toggle', cat)"
|
||||
>
|
||||
{{ categoryLabel(cat) }}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
45
src/modules/activities/components/CategorySelector.vue
Normal file
45
src/modules/activities/components/CategorySelector.vue
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import type { ActivityCategory } from '../types/category'
|
||||
import { ALL_CATEGORIES } from '../types/category'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: ActivityCategory[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: ActivityCategory[]]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
function toggle(cat: ActivityCategory) {
|
||||
const current = [...props.modelValue]
|
||||
const idx = current.indexOf(cat)
|
||||
if (idx >= 0) {
|
||||
current.splice(idx, 1)
|
||||
} else {
|
||||
current.push(cat)
|
||||
}
|
||||
emit('update:modelValue', current)
|
||||
}
|
||||
|
||||
function label(cat: ActivityCategory): string {
|
||||
return t(`activities.categories.${cat}`, cat)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<Badge
|
||||
v-for="cat in ALL_CATEGORIES"
|
||||
:key="cat"
|
||||
:variant="modelValue.includes(cat) ? 'default' : 'outline'"
|
||||
class="cursor-pointer text-xs select-none hover:opacity-80 transition-opacity"
|
||||
@click="toggle(cat)"
|
||||
>
|
||||
{{ label(cat) }}
|
||||
</Badge>
|
||||
</div>
|
||||
</template>
|
||||
270
src/modules/activities/components/CreateActivityDialog.vue
Normal file
270
src/modules/activities/components/CreateActivityDialog.vue
Normal file
|
|
@ -0,0 +1,270 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useForm } from 'vee-validate'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import * as z from 'zod'
|
||||
import {
|
||||
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription,
|
||||
} from '@/components/ui/dialog'
|
||||
import {
|
||||
FormControl, FormField, FormItem, FormLabel, FormMessage,
|
||||
} from '@/components/ui/form'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { CalendarPlus } from 'lucide-vue-next'
|
||||
import { useAuth } from '@/composables/useAuthService'
|
||||
import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||
import type { ActivitiesNostrService } from '../services/ActivitiesNostrService'
|
||||
import type { CalendarTimeEvent } from '../types/nip52'
|
||||
import type { ActivityCategory } from '../types/category'
|
||||
import CategorySelector from './CategorySelector.vue'
|
||||
import LocationPicker from './LocationPicker.vue'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
defineProps<{
|
||||
isOpen: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:isOpen': [value: boolean]
|
||||
'created': []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { currentUser } = useAuth()
|
||||
|
||||
const isPublishing = ref(false)
|
||||
const selectedCategories = ref<ActivityCategory[]>([])
|
||||
const location = ref('')
|
||||
|
||||
const formSchema = toTypedSchema(z.object({
|
||||
title: z.string().min(1, 'Title is required').max(200),
|
||||
summary: z.string().max(500).optional(),
|
||||
description: z.string().min(1, 'Description is required').max(5000),
|
||||
startDate: z.string().min(1, 'Start date is required'),
|
||||
startTime: z.string().min(1, 'Start time is required'),
|
||||
endDate: z.string().optional(),
|
||||
endTime: z.string().optional(),
|
||||
image: z.string().url('Must be a valid URL').optional().or(z.literal('')),
|
||||
}))
|
||||
|
||||
const form = useForm({
|
||||
validationSchema: formSchema,
|
||||
initialValues: {
|
||||
title: '',
|
||||
summary: '',
|
||||
description: '',
|
||||
startDate: '',
|
||||
startTime: '',
|
||||
endDate: '',
|
||||
endTime: '',
|
||||
image: '',
|
||||
},
|
||||
})
|
||||
|
||||
const isFormValid = computed(() => form.meta.value.valid)
|
||||
|
||||
const onSubmit = form.handleSubmit(async (values) => {
|
||||
const nostrService = tryInjectService<ActivitiesNostrService>(SERVICE_TOKENS.ACTIVITIES_NOSTR_SERVICE)
|
||||
if (!nostrService) {
|
||||
toast.error('Activities service not available')
|
||||
return
|
||||
}
|
||||
|
||||
const signingKey = currentUser.value?.prvkey
|
||||
if (!signingKey) {
|
||||
toast.error('Signing key not available. Please log in again.')
|
||||
return
|
||||
}
|
||||
|
||||
isPublishing.value = true
|
||||
|
||||
try {
|
||||
// Build unix timestamps
|
||||
const startTimestamp = Math.floor(new Date(`${values.startDate}T${values.startTime}`).getTime() / 1000)
|
||||
let endTimestamp: number | undefined
|
||||
if (values.endDate && values.endTime) {
|
||||
endTimestamp = Math.floor(new Date(`${values.endDate}T${values.endTime}`).getTime() / 1000)
|
||||
}
|
||||
|
||||
// Generate a unique d-tag
|
||||
const dTag = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
|
||||
|
||||
const eventData: Partial<CalendarTimeEvent> = {
|
||||
dTag,
|
||||
title: values.title,
|
||||
summary: values.summary || undefined,
|
||||
content: values.description,
|
||||
image: values.image || undefined,
|
||||
start: startTimestamp,
|
||||
end: endTimestamp,
|
||||
startTzid: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
location: location.value || undefined,
|
||||
hashtags: selectedCategories.value,
|
||||
}
|
||||
|
||||
const result = await nostrService.publishCalendarEvent(eventData, signingKey)
|
||||
|
||||
if (result.success > 0) {
|
||||
toast.success(`Activity published to ${result.success} relay${result.success > 1 ? 's' : ''}`)
|
||||
emit('created')
|
||||
handleClose()
|
||||
} else {
|
||||
toast.error('Failed to publish to any relay')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to publish activity:', err)
|
||||
toast.error(err instanceof Error ? err.message : 'Failed to publish activity')
|
||||
} finally {
|
||||
isPublishing.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function handleClose() {
|
||||
emit('update:isOpen', false)
|
||||
form.resetForm()
|
||||
selectedCategories.value = []
|
||||
location.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog :open="isOpen" @update:open="handleClose">
|
||||
<DialogContent class="sm:max-w-[550px] max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle class="flex items-center gap-2">
|
||||
<CalendarPlus class="w-5 h-5" />
|
||||
{{ t('activities.createNew') }}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Publish a new activity to Nostr relays
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form @submit="onSubmit" class="space-y-4 py-2">
|
||||
<!-- Title -->
|
||||
<FormField v-slot="{ componentField }" name="title">
|
||||
<FormItem>
|
||||
<FormLabel>Title *</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="e.g. Marché de Noël de Foix" v-bind="componentField" :disabled="isPublishing" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Summary -->
|
||||
<FormField v-slot="{ componentField }" name="summary">
|
||||
<FormItem>
|
||||
<FormLabel>Summary</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Brief one-line description" v-bind="componentField" :disabled="isPublishing" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Description -->
|
||||
<FormField v-slot="{ componentField }" name="description">
|
||||
<FormItem>
|
||||
<FormLabel>Description *</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder="Full details about the activity..."
|
||||
v-bind="componentField"
|
||||
:disabled="isPublishing"
|
||||
rows="4"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Start date/time -->
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<FormField v-slot="{ componentField }" name="startDate">
|
||||
<FormItem>
|
||||
<FormLabel>Start date *</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="date" v-bind="componentField" :disabled="isPublishing" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="startTime">
|
||||
<FormItem>
|
||||
<FormLabel>Start time *</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="time" v-bind="componentField" :disabled="isPublishing" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
<!-- End date/time -->
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<FormField v-slot="{ componentField }" name="endDate">
|
||||
<FormItem>
|
||||
<FormLabel>End date</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="date" v-bind="componentField" :disabled="isPublishing" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="endTime">
|
||||
<FormItem>
|
||||
<FormLabel>End time</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="time" v-bind="componentField" :disabled="isPublishing" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
<!-- Location -->
|
||||
<LocationPicker
|
||||
v-model="location"
|
||||
:disabled="isPublishing"
|
||||
/>
|
||||
|
||||
<!-- Categories -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-sm font-medium">Categories</label>
|
||||
<CategorySelector v-model="selectedCategories" />
|
||||
</div>
|
||||
|
||||
<!-- Image URL -->
|
||||
<FormField v-slot="{ componentField }" name="image">
|
||||
<FormItem>
|
||||
<FormLabel>Image URL</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="https://example.com/image.jpg"
|
||||
v-bind="componentField"
|
||||
:disabled="isPublishing"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Submit -->
|
||||
<Button
|
||||
type="submit"
|
||||
:disabled="isPublishing || !isFormValid"
|
||||
class="w-full"
|
||||
>
|
||||
<span v-if="isPublishing" class="animate-spin mr-2">⚡</span>
|
||||
{{ isPublishing ? 'Publishing...' : 'Publish Activity' }}
|
||||
</Button>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
73
src/modules/activities/components/DatePickerStrip.vue
Normal file
73
src/modules/activities/components/DatePickerStrip.vue
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { addDays, format, isSameDay, startOfWeek } from 'date-fns'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
|
||||
import { useDateLocale } from '../composables/useDateLocale'
|
||||
|
||||
const props = defineProps<{
|
||||
/** Currently selected date (if any) */
|
||||
selectedDate?: Date
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [date: Date]
|
||||
}>()
|
||||
|
||||
const { dateLocale } = useDateLocale()
|
||||
|
||||
/** Start of the visible week */
|
||||
const weekStart = ref(startOfWeek(new Date(), { weekStartsOn: 1 }))
|
||||
|
||||
const days = computed(() => {
|
||||
return Array.from({ length: 7 }, (_, i) => addDays(weekStart.value, i))
|
||||
})
|
||||
|
||||
const isToday = (date: Date) => isSameDay(date, new Date())
|
||||
const isSelected = (date: Date) => props.selectedDate ? isSameDay(date, props.selectedDate) : false
|
||||
|
||||
function prevWeek() {
|
||||
weekStart.value = addDays(weekStart.value, -7)
|
||||
}
|
||||
|
||||
function nextWeek() {
|
||||
weekStart.value = addDays(weekStart.value, 7)
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button variant="ghost" size="icon" class="h-8 w-8 shrink-0" @click="prevWeek">
|
||||
<ChevronLeft class="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<div class="grid grid-cols-7 flex-1 gap-0.5">
|
||||
<button
|
||||
v-for="day in days"
|
||||
:key="day.toISOString()"
|
||||
class="flex flex-col items-center py-1.5 rounded-lg transition-colors"
|
||||
:class="{
|
||||
'bg-primary text-primary-foreground': isSelected(day),
|
||||
'bg-muted/50': isToday(day) && !isSelected(day),
|
||||
'hover:bg-muted': !isSelected(day),
|
||||
}"
|
||||
@click="emit('select', day)"
|
||||
>
|
||||
<span class="text-[10px] font-medium uppercase leading-none"
|
||||
:class="isSelected(day) ? 'text-primary-foreground/70' : 'text-muted-foreground'"
|
||||
>
|
||||
{{ format(day, 'EEEEE', { locale: dateLocale }) }}
|
||||
</span>
|
||||
<span class="text-sm font-semibold leading-tight mt-0.5">
|
||||
{{ format(day, 'd') }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Button variant="ghost" size="icon" class="h-8 w-8 shrink-0" @click="nextWeek">
|
||||
<ChevronRight class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
34
src/modules/activities/components/LocationPicker.vue
Normal file
34
src/modules/activities/components/LocationPicker.vue
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<script setup lang="ts">
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { MapPin } from 'lucide-vue-next'
|
||||
|
||||
defineProps<{
|
||||
modelValue: string
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-1.5">
|
||||
<Label class="text-sm font-medium">Location</Label>
|
||||
<div class="relative">
|
||||
<MapPin class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
:model-value="modelValue"
|
||||
@update:model-value="emit('update:modelValue', $event as string)"
|
||||
:placeholder="placeholder ?? 'e.g. Salle des fêtes, Foix, Ariège'"
|
||||
:disabled="disabled"
|
||||
class="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
Enter the venue name and address
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
34
src/modules/activities/components/OrganizerCard.vue
Normal file
34
src/modules/activities/components/OrganizerCard.vue
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<script setup lang="ts">
|
||||
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
|
||||
import { User } from 'lucide-vue-next'
|
||||
import { useOrganizerProfile } from '../composables/useOrganizerProfile'
|
||||
|
||||
const props = defineProps<{
|
||||
pubkey: string
|
||||
}>()
|
||||
|
||||
const { profile, displayName, isLoading } = useOrganizerProfile(props.pubkey)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center gap-3">
|
||||
<Avatar class="h-10 w-10">
|
||||
<AvatarImage v-if="profile?.picture" :src="profile.picture" :alt="displayName" />
|
||||
<AvatarFallback class="bg-primary/10">
|
||||
<User class="w-5 h-5 text-primary" />
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-medium text-foreground truncate">
|
||||
<template v-if="isLoading">Loading...</template>
|
||||
<template v-else>{{ displayName }}</template>
|
||||
</p>
|
||||
<p v-if="profile?.nip05" class="text-xs text-muted-foreground truncate">
|
||||
{{ profile.nip05 }}
|
||||
</p>
|
||||
<p v-else class="text-xs text-muted-foreground font-mono truncate">
|
||||
{{ pubkey.slice(0, 16) }}...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
66
src/modules/activities/components/RSVPButton.vue
Normal file
66
src/modules/activities/components/RSVPButton.vue
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Check, HelpCircle, X } from 'lucide-vue-next'
|
||||
import { toast } from 'vue-sonner'
|
||||
import { useAuth } from '@/composables/useAuthService'
|
||||
import { useRSVP } from '../composables/useRSVP'
|
||||
import { NIP52_KINDS, type RSVPStatus } from '../types/nip52'
|
||||
|
||||
const props = defineProps<{
|
||||
pubkey: string
|
||||
dTag: string
|
||||
kind?: number
|
||||
}>()
|
||||
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
const { isAuthenticated } = useAuth()
|
||||
const { getMyRSVP, getRSVPCount, setRSVP } = useRSVP()
|
||||
|
||||
const activityKind = computed(() => props.kind ?? NIP52_KINDS.CALENDAR_TIME_EVENT)
|
||||
const myStatus = computed(() => getMyRSVP(activityKind.value, props.pubkey, props.dTag))
|
||||
const goingCount = computed(() => getRSVPCount(activityKind.value, props.pubkey, props.dTag))
|
||||
|
||||
const buttons: { status: RSVPStatus; labelKey: string; icon: any }[] = [
|
||||
{ status: 'accepted', labelKey: 'activities.detail.going', icon: Check },
|
||||
{ status: 'tentative', labelKey: 'activities.detail.maybe', icon: HelpCircle },
|
||||
{ status: 'declined', labelKey: 'activities.detail.notGoing', icon: X },
|
||||
]
|
||||
|
||||
function handleClick(status: RSVPStatus) {
|
||||
if (!isAuthenticated.value) {
|
||||
toast.info('Log in to RSVP', {
|
||||
action: {
|
||||
label: 'Log in',
|
||||
onClick: () => router.push('/login'),
|
||||
},
|
||||
})
|
||||
return
|
||||
}
|
||||
setRSVP(activityKind.value, props.pubkey, props.dTag, status)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-2">
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
v-for="btn in buttons"
|
||||
:key="btn.status"
|
||||
:variant="myStatus === btn.status ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
class="flex-1 gap-1.5"
|
||||
@click="handleClick(btn.status)"
|
||||
>
|
||||
<component :is="btn.icon" class="w-3.5 h-3.5" />
|
||||
{{ t(btn.labelKey) }}
|
||||
</Button>
|
||||
</div>
|
||||
<p v-if="goingCount > 0" class="text-xs text-muted-foreground">
|
||||
{{ goingCount }} {{ goingCount === 1 ? 'person' : 'people' }} going
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
38
src/modules/activities/components/TemporalFilterBar.vue
Normal file
38
src/modules/activities/components/TemporalFilterBar.vue
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import type { TemporalFilter } from '../types/filters'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: TemporalFilter
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: TemporalFilter]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const options: { value: TemporalFilter; labelKey: string }[] = [
|
||||
{ value: 'all', labelKey: 'activities.filters.all' },
|
||||
{ value: 'today', labelKey: 'activities.filters.today' },
|
||||
{ value: 'tomorrow', labelKey: 'activities.filters.tomorrow' },
|
||||
{ value: 'this-week', labelKey: 'activities.filters.thisWeek' },
|
||||
{ value: 'this-month', labelKey: 'activities.filters.thisMonth' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex gap-2 overflow-x-auto" style="-ms-overflow-style: none; scrollbar-width: none;">
|
||||
<Button
|
||||
v-for="option in options"
|
||||
:key="option.value"
|
||||
:variant="props.modelValue === option.value ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
class="rounded-full text-xs shrink-0"
|
||||
@click="emit('update:modelValue', option.value)"
|
||||
>
|
||||
{{ t(option.labelKey) }}
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
129
src/modules/activities/composables/useActivities.ts
Normal file
129
src/modules/activities/composables/useActivities.ts
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
import { ref, computed, onUnmounted } from 'vue'
|
||||
import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||
import type { ActivitiesNostrService } from '../services/ActivitiesNostrService'
|
||||
import type { CalendarEventFilters } from '../services/ActivitiesNostrService'
|
||||
import { useActivitiesStore } from '../stores/activities'
|
||||
import { useActivityFilters } from './useActivityFilters'
|
||||
|
||||
/**
|
||||
* Main composable for activities discovery.
|
||||
* Subscribes to NIP-52 events via ActivitiesNostrService and manages the activity feed.
|
||||
*/
|
||||
export function useActivities() {
|
||||
const store = useActivitiesStore()
|
||||
const filters = useActivityFilters()
|
||||
|
||||
const isSubscribed = ref(false)
|
||||
const subscriptionError = ref<string | null>(null)
|
||||
let unsubscribe: (() => void) | null = null
|
||||
|
||||
// Filtered and sorted activities (from all activities, filters handle time range)
|
||||
const filteredActivities = computed(() => {
|
||||
const all = store.activities.sort(
|
||||
(a, b) => a.startDate.getTime() - b.startDate.getTime()
|
||||
)
|
||||
return filters.applyFilters(all)
|
||||
})
|
||||
|
||||
/**
|
||||
* Subscribe to NIP-52 calendar events from Nostr relays.
|
||||
*/
|
||||
function subscribe(eventFilters?: CalendarEventFilters) {
|
||||
if (isSubscribed.value) return
|
||||
|
||||
const nostrService = tryInjectService<ActivitiesNostrService>(SERVICE_TOKENS.ACTIVITIES_NOSTR_SERVICE)
|
||||
if (!nostrService) {
|
||||
subscriptionError.value = 'Activities service not available'
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
store.isLoading = true
|
||||
subscriptionError.value = null
|
||||
|
||||
unsubscribe = nostrService.subscribeToCalendarEvents(
|
||||
(activity) => {
|
||||
store.upsertActivity(activity)
|
||||
store.isLoading = false
|
||||
},
|
||||
eventFilters
|
||||
)
|
||||
|
||||
isSubscribed.value = true
|
||||
|
||||
// Set loading to false after a timeout (in case no events arrive)
|
||||
setTimeout(() => {
|
||||
store.isLoading = false
|
||||
}, 5000)
|
||||
} catch (err) {
|
||||
subscriptionError.value = err instanceof Error ? err.message : 'Failed to subscribe'
|
||||
store.isLoading = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* One-shot query for calendar events.
|
||||
*/
|
||||
async function query(eventFilters?: CalendarEventFilters) {
|
||||
const nostrService = tryInjectService<ActivitiesNostrService>(SERVICE_TOKENS.ACTIVITIES_NOSTR_SERVICE)
|
||||
if (!nostrService) {
|
||||
subscriptionError.value = 'Activities service not available'
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
store.isLoading = true
|
||||
subscriptionError.value = null
|
||||
const activities = await nostrService.queryCalendarEvents(eventFilters)
|
||||
store.upsertActivities(activities)
|
||||
} catch (err) {
|
||||
subscriptionError.value = err instanceof Error ? err.message : 'Failed to query activities'
|
||||
} finally {
|
||||
store.isLoading = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Unsubscribe from relay events.
|
||||
*/
|
||||
function stop() {
|
||||
if (unsubscribe) {
|
||||
unsubscribe()
|
||||
unsubscribe = null
|
||||
}
|
||||
isSubscribed.value = false
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh: stop current subscription and re-subscribe.
|
||||
*/
|
||||
function refresh(eventFilters?: CalendarEventFilters) {
|
||||
stop()
|
||||
store.clearAll()
|
||||
subscribe(eventFilters)
|
||||
}
|
||||
|
||||
// Cleanup on unmount
|
||||
onUnmounted(() => {
|
||||
stop()
|
||||
})
|
||||
|
||||
return {
|
||||
// State
|
||||
activities: filteredActivities,
|
||||
allActivities: computed(() => store.activities),
|
||||
isLoading: computed(() => store.isLoading),
|
||||
isSubscribed,
|
||||
error: subscriptionError,
|
||||
lastUpdated: computed(() => store.lastUpdated),
|
||||
|
||||
// Filter controls (re-exported)
|
||||
...filters,
|
||||
|
||||
// Actions
|
||||
subscribe,
|
||||
query,
|
||||
stop,
|
||||
refresh,
|
||||
}
|
||||
}
|
||||
78
src/modules/activities/composables/useActivityDetail.ts
Normal file
78
src/modules/activities/composables/useActivityDetail.ts
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||
import type { ActivitiesNostrService } from '../services/ActivitiesNostrService'
|
||||
import { useActivitiesStore } from '../stores/activities'
|
||||
import type { Activity } from '../types/activity'
|
||||
|
||||
/**
|
||||
* Composable for loading a single activity by its d-tag identifier.
|
||||
* First checks the store cache, then queries relays if not found.
|
||||
*/
|
||||
export function useActivityDetail(activityId: string) {
|
||||
const store = useActivitiesStore()
|
||||
const isLoading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
let unsubscribe: (() => void) | null = null
|
||||
|
||||
const activity = computed<Activity | undefined>(() =>
|
||||
store.getActivityById(activityId)
|
||||
)
|
||||
|
||||
async function load() {
|
||||
// Already in cache
|
||||
if (activity.value) return
|
||||
|
||||
const nostrService = tryInjectService<ActivitiesNostrService>(SERVICE_TOKENS.ACTIVITIES_NOSTR_SERVICE)
|
||||
if (!nostrService) {
|
||||
error.value = 'Activities service not available'
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
|
||||
// Subscribe and wait for this specific event
|
||||
unsubscribe = nostrService.subscribeToCalendarEvents(
|
||||
(incoming) => {
|
||||
store.upsertActivity(incoming)
|
||||
if (incoming.id === activityId) {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// Also do a one-shot query
|
||||
const results = await nostrService.queryCalendarEvents()
|
||||
store.upsertActivities(results)
|
||||
|
||||
// If we still don't have it after query, stop loading
|
||||
setTimeout(() => {
|
||||
isLoading.value = false
|
||||
if (!activity.value) {
|
||||
error.value = 'Activity not found'
|
||||
}
|
||||
}, 5000)
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : 'Failed to load activity'
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
load()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (unsubscribe) {
|
||||
unsubscribe()
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
activity,
|
||||
isLoading,
|
||||
error,
|
||||
reload: load,
|
||||
}
|
||||
}
|
||||
145
src/modules/activities/composables/useActivityFilters.ts
Normal file
145
src/modules/activities/composables/useActivityFilters.ts
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
import { ref, computed } from 'vue'
|
||||
import {
|
||||
startOfDay, endOfDay, startOfWeek, endOfWeek,
|
||||
startOfMonth, endOfMonth, addDays, isSameDay,
|
||||
} from 'date-fns'
|
||||
import type { Activity } from '../types/activity'
|
||||
import type { ActivityCategory } from '../types/category'
|
||||
import type { TemporalFilter, ActivityFilters } from '../types/filters'
|
||||
import { DEFAULT_FILTERS } from '../types/filters'
|
||||
|
||||
/**
|
||||
* Composable for managing activity filter state and applying filters reactively.
|
||||
*/
|
||||
export function useActivityFilters() {
|
||||
const temporal = ref<TemporalFilter>(DEFAULT_FILTERS.temporal)
|
||||
const selectedCategories = ref<ActivityCategory[]>([])
|
||||
const selectedDate = ref<Date | undefined>(undefined)
|
||||
|
||||
const filters = computed<ActivityFilters>(() => ({
|
||||
temporal: temporal.value,
|
||||
categories: selectedCategories.value,
|
||||
}))
|
||||
|
||||
/**
|
||||
* Apply the current filters to a list of activities.
|
||||
*/
|
||||
function applyFilters(activities: Activity[]): Activity[] {
|
||||
let result = activities
|
||||
|
||||
// Specific date filter (from DatePickerStrip) takes priority over temporal
|
||||
if (selectedDate.value) {
|
||||
const dayStart = startOfDay(selectedDate.value)
|
||||
const dayEnd = endOfDay(selectedDate.value)
|
||||
result = result.filter(a => {
|
||||
const activityEnd = a.endDate ?? a.startDate
|
||||
return a.startDate <= dayEnd && activityEnd >= dayStart
|
||||
})
|
||||
} else {
|
||||
// Temporal filter
|
||||
result = applyTemporalFilter(result, temporal.value)
|
||||
}
|
||||
|
||||
// Category filter
|
||||
if (selectedCategories.value.length > 0) {
|
||||
result = result.filter(a =>
|
||||
a.category && selectedCategories.value.includes(a.category)
|
||||
)
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
function setTemporal(value: TemporalFilter) {
|
||||
temporal.value = value
|
||||
selectedDate.value = undefined // clear date pick when using temporal pills
|
||||
}
|
||||
|
||||
function selectDate(date: Date) {
|
||||
if (selectedDate.value && isSameDay(selectedDate.value, date)) {
|
||||
selectedDate.value = undefined // toggle off
|
||||
} else {
|
||||
selectedDate.value = date
|
||||
temporal.value = 'all' // clear temporal pill when picking a specific date
|
||||
}
|
||||
}
|
||||
|
||||
function toggleCategory(category: ActivityCategory) {
|
||||
const idx = selectedCategories.value.indexOf(category)
|
||||
if (idx >= 0) {
|
||||
selectedCategories.value.splice(idx, 1)
|
||||
} else {
|
||||
selectedCategories.value.push(category)
|
||||
}
|
||||
}
|
||||
|
||||
function clearCategories() {
|
||||
selectedCategories.value = []
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
temporal.value = DEFAULT_FILTERS.temporal
|
||||
selectedCategories.value = []
|
||||
selectedDate.value = undefined
|
||||
}
|
||||
|
||||
const hasActiveFilters = computed(() =>
|
||||
temporal.value !== 'all' ||
|
||||
selectedCategories.value.length > 0 ||
|
||||
selectedDate.value !== undefined
|
||||
)
|
||||
|
||||
return {
|
||||
// State
|
||||
temporal,
|
||||
selectedCategories,
|
||||
selectedDate,
|
||||
filters,
|
||||
hasActiveFilters,
|
||||
|
||||
// Actions
|
||||
applyFilters,
|
||||
setTemporal,
|
||||
selectDate,
|
||||
toggleCategory,
|
||||
clearCategories,
|
||||
resetFilters,
|
||||
}
|
||||
}
|
||||
|
||||
// --- Helpers ---
|
||||
|
||||
function applyTemporalFilter(activities: Activity[], filter: TemporalFilter): Activity[] {
|
||||
if (filter === 'all') return activities
|
||||
|
||||
const now = new Date()
|
||||
let start: Date
|
||||
let end: Date
|
||||
|
||||
switch (filter) {
|
||||
case 'today':
|
||||
start = startOfDay(now)
|
||||
end = endOfDay(now)
|
||||
break
|
||||
case 'tomorrow':
|
||||
start = startOfDay(addDays(now, 1))
|
||||
end = endOfDay(addDays(now, 1))
|
||||
break
|
||||
case 'this-week':
|
||||
start = startOfWeek(now, { weekStartsOn: 1 })
|
||||
end = endOfWeek(now, { weekStartsOn: 1 })
|
||||
break
|
||||
case 'this-month':
|
||||
start = startOfMonth(now)
|
||||
end = endOfMonth(now)
|
||||
break
|
||||
default:
|
||||
return activities
|
||||
}
|
||||
|
||||
return activities.filter(a => {
|
||||
const activityEnd = a.endDate ?? a.startDate
|
||||
// Activity overlaps with the filter range
|
||||
return a.startDate <= end && activityEnd >= start
|
||||
})
|
||||
}
|
||||
156
src/modules/activities/composables/useBookmarks.ts
Normal file
156
src/modules/activities/composables/useBookmarks.ts
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { finalizeEvent, type EventTemplate, type Event as NostrEvent } from 'nostr-tools'
|
||||
import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||
import { useAuth } from '@/composables/useAuthService'
|
||||
|
||||
/**
|
||||
* NIP-51 Bookmarks (kind 10003) for saving favorite activities.
|
||||
*
|
||||
* Stores references to NIP-52 calendar events as 'a' tags:
|
||||
* ['a', '<kind>:<pubkey>:<d-tag>']
|
||||
*
|
||||
* The bookmark list is a replaceable event (kind 10003) — publishing
|
||||
* a new one replaces the previous.
|
||||
*/
|
||||
|
||||
const BOOKMARK_KIND = 10003
|
||||
|
||||
interface BookmarkState {
|
||||
/** Set of bookmarked activity coordinates: "kind:pubkey:d-tag" */
|
||||
bookmarkedCoords: Set<string>
|
||||
/** The latest bookmark event we've seen */
|
||||
lastEventId: string | null
|
||||
}
|
||||
|
||||
// Shared state across all component instances
|
||||
const state = ref<BookmarkState>({
|
||||
bookmarkedCoords: new Set(),
|
||||
lastEventId: null,
|
||||
})
|
||||
const isLoaded = ref(false)
|
||||
|
||||
export function useBookmarks() {
|
||||
const { isAuthenticated, currentUser } = useAuth()
|
||||
let unsubscribe: (() => void) | null = null
|
||||
|
||||
const bookmarkedIds = computed(() => state.value.bookmarkedCoords)
|
||||
|
||||
function isBookmarked(activityKind: number, pubkey: string, dTag: string): boolean {
|
||||
return state.value.bookmarkedCoords.has(`${activityKind}:${pubkey}:${dTag}`)
|
||||
}
|
||||
|
||||
function isBookmarkedByDTag(dTag: string): boolean {
|
||||
for (const coord of state.value.bookmarkedCoords) {
|
||||
if (coord.endsWith(`:${dTag}`)) return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
/**
|
||||
* Load the user's bookmark list from relays.
|
||||
*/
|
||||
function loadBookmarks() {
|
||||
if (!isAuthenticated.value || !currentUser.value?.pubkey) return
|
||||
|
||||
const relayHub = tryInjectService<any>(SERVICE_TOKENS.RELAY_HUB)
|
||||
if (!relayHub) return
|
||||
|
||||
unsubscribe = relayHub.subscribe({
|
||||
id: `bookmarks-${Date.now()}`,
|
||||
filters: [{
|
||||
kinds: [BOOKMARK_KIND],
|
||||
authors: [currentUser.value.pubkey],
|
||||
limit: 1,
|
||||
}],
|
||||
onEvent: (event: NostrEvent) => {
|
||||
// Only process if newer than what we have
|
||||
if (state.value.lastEventId && event.created_at <= (state.value as any).lastCreatedAt) return
|
||||
|
||||
const coords = new Set<string>()
|
||||
for (const tag of event.tags) {
|
||||
if (tag[0] === 'a' && tag[1]) {
|
||||
coords.add(tag[1])
|
||||
}
|
||||
}
|
||||
state.value = {
|
||||
bookmarkedCoords: coords,
|
||||
lastEventId: event.id,
|
||||
}
|
||||
;(state.value as any).lastCreatedAt = event.created_at
|
||||
isLoaded.value = true
|
||||
},
|
||||
onEose: () => {
|
||||
isLoaded.value = true
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle bookmark for an activity. Publishes updated NIP-51 bookmark list.
|
||||
*/
|
||||
async function toggleBookmark(activityKind: number, pubkey: string, dTag: string) {
|
||||
if (!isAuthenticated.value || !currentUser.value?.prvkey) return
|
||||
|
||||
const coord = `${activityKind}:${pubkey}:${dTag}`
|
||||
const newCoords = new Set(state.value.bookmarkedCoords)
|
||||
|
||||
if (newCoords.has(coord)) {
|
||||
newCoords.delete(coord)
|
||||
} else {
|
||||
newCoords.add(coord)
|
||||
}
|
||||
|
||||
// Build and publish updated bookmark list
|
||||
const tags: string[][] = Array.from(newCoords).map(c => ['a', c])
|
||||
|
||||
const template: EventTemplate = {
|
||||
kind: BOOKMARK_KIND,
|
||||
created_at: Math.floor(Date.now() / 1000),
|
||||
content: '',
|
||||
tags,
|
||||
}
|
||||
|
||||
const signingKey = hexToUint8Array(currentUser.value.prvkey)
|
||||
const signedEvent = finalizeEvent(template, signingKey)
|
||||
|
||||
const relayHub = tryInjectService<any>(SERVICE_TOKENS.RELAY_HUB)
|
||||
if (!relayHub) return
|
||||
|
||||
const result = await relayHub.publishEvent(signedEvent)
|
||||
if (result.success > 0) {
|
||||
state.value = {
|
||||
bookmarkedCoords: newCoords,
|
||||
lastEventId: signedEvent.id,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!isLoaded.value) {
|
||||
loadBookmarks()
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (unsubscribe) {
|
||||
unsubscribe()
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
bookmarkedIds,
|
||||
isBookmarked,
|
||||
isBookmarkedByDTag,
|
||||
toggleBookmark,
|
||||
isLoaded,
|
||||
loadBookmarks,
|
||||
}
|
||||
}
|
||||
|
||||
function hexToUint8Array(hex: string): Uint8Array {
|
||||
const bytes = new Uint8Array(hex.length / 2)
|
||||
for (let i = 0; i < hex.length; i += 2) {
|
||||
bytes[i / 2] = parseInt(hex.substr(i, 2), 16)
|
||||
}
|
||||
return bytes
|
||||
}
|
||||
23
src/modules/activities/composables/useDateLocale.ts
Normal file
23
src/modules/activities/composables/useDateLocale.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { fr, es, enUS } from 'date-fns/locale'
|
||||
import type { Locale } from 'date-fns'
|
||||
|
||||
const localeMap: Record<string, Locale> = {
|
||||
fr,
|
||||
es,
|
||||
en: enUS,
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a reactive date-fns Locale based on the current i18n language.
|
||||
*/
|
||||
export function useDateLocale() {
|
||||
const { locale } = useI18n()
|
||||
|
||||
const dateLocale = computed<Locale>(() => {
|
||||
return localeMap[locale.value] ?? enUS
|
||||
})
|
||||
|
||||
return { dateLocale }
|
||||
}
|
||||
149
src/modules/activities/composables/useOrganizerProfile.ts
Normal file
149
src/modules/activities/composables/useOrganizerProfile.ts
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||
import type { Event as NostrEvent } from 'nostr-tools'
|
||||
|
||||
export interface OrganizerProfile {
|
||||
pubkey: string
|
||||
name?: string
|
||||
displayName?: string
|
||||
about?: string
|
||||
picture?: string
|
||||
banner?: string
|
||||
nip05?: string
|
||||
lud16?: string
|
||||
website?: string
|
||||
}
|
||||
|
||||
// Global cache of fetched profiles
|
||||
const profileCache = ref<Map<string, OrganizerProfile>>(new Map())
|
||||
|
||||
/**
|
||||
* Composable for fetching and displaying organizer profiles (NIP-01 kind 0).
|
||||
* Uses its own relay subscription to avoid depending on the nostr-feed module.
|
||||
*/
|
||||
export function useOrganizerProfile(pubkey: string) {
|
||||
const profile = ref<OrganizerProfile | null>(profileCache.value.get(pubkey) ?? null)
|
||||
const isLoading = ref(!profile.value)
|
||||
let unsubscribe: (() => void) | null = null
|
||||
|
||||
function load() {
|
||||
if (profileCache.value.has(pubkey)) {
|
||||
profile.value = profileCache.value.get(pubkey)!
|
||||
isLoading.value = false
|
||||
return
|
||||
}
|
||||
|
||||
const relayHub = tryInjectService<any>(SERVICE_TOKENS.RELAY_HUB)
|
||||
if (!relayHub) {
|
||||
isLoading.value = false
|
||||
return
|
||||
}
|
||||
|
||||
unsubscribe = relayHub.subscribe({
|
||||
id: `profile-${pubkey}-${Date.now()}`,
|
||||
filters: [{
|
||||
kinds: [0],
|
||||
authors: [pubkey],
|
||||
limit: 1,
|
||||
}],
|
||||
onEvent: (event: NostrEvent) => {
|
||||
try {
|
||||
const metadata = JSON.parse(event.content)
|
||||
const p: OrganizerProfile = {
|
||||
pubkey,
|
||||
name: metadata.name,
|
||||
displayName: metadata.display_name,
|
||||
about: metadata.about,
|
||||
picture: metadata.picture,
|
||||
banner: metadata.banner,
|
||||
nip05: metadata.nip05,
|
||||
lud16: metadata.lud16,
|
||||
website: metadata.website,
|
||||
}
|
||||
profileCache.value.set(pubkey, p)
|
||||
profile.value = p
|
||||
} catch {
|
||||
// invalid metadata JSON
|
||||
}
|
||||
isLoading.value = false
|
||||
},
|
||||
onEose: () => {
|
||||
isLoading.value = false
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
load()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (unsubscribe) {
|
||||
unsubscribe()
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
profile,
|
||||
isLoading,
|
||||
get displayName() {
|
||||
const p = profile.value
|
||||
return p?.displayName ?? p?.name ?? `${pubkey.slice(0, 8)}...${pubkey.slice(-4)}`
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Batch-fetch profiles for multiple pubkeys (for activity cards).
|
||||
*/
|
||||
export function useBatchProfiles() {
|
||||
function fetchProfiles(pubkeys: string[]) {
|
||||
const uncached = pubkeys.filter(pk => !profileCache.value.has(pk))
|
||||
if (uncached.length === 0) return
|
||||
|
||||
const relayHub = tryInjectService<any>(SERVICE_TOKENS.RELAY_HUB)
|
||||
if (!relayHub) return
|
||||
|
||||
relayHub.subscribe({
|
||||
id: `batch-profiles-${Date.now()}`,
|
||||
filters: [{
|
||||
kinds: [0],
|
||||
authors: uncached,
|
||||
}],
|
||||
onEvent: (event: NostrEvent) => {
|
||||
try {
|
||||
const metadata = JSON.parse(event.content)
|
||||
profileCache.value.set(event.pubkey, {
|
||||
pubkey: event.pubkey,
|
||||
name: metadata.name,
|
||||
displayName: metadata.display_name,
|
||||
about: metadata.about,
|
||||
picture: metadata.picture,
|
||||
banner: metadata.banner,
|
||||
nip05: metadata.nip05,
|
||||
lud16: metadata.lud16,
|
||||
website: metadata.website,
|
||||
})
|
||||
} catch {
|
||||
// skip invalid
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function getProfile(pubkey: string): OrganizerProfile | undefined {
|
||||
return profileCache.value.get(pubkey)
|
||||
}
|
||||
|
||||
function getDisplayName(pubkey: string): string {
|
||||
const p = profileCache.value.get(pubkey)
|
||||
return p?.displayName ?? p?.name ?? `${pubkey.slice(0, 8)}...${pubkey.slice(-4)}`
|
||||
}
|
||||
|
||||
return {
|
||||
profiles: profileCache,
|
||||
fetchProfiles,
|
||||
getProfile,
|
||||
getDisplayName,
|
||||
}
|
||||
}
|
||||
172
src/modules/activities/composables/useRSVP.ts
Normal file
172
src/modules/activities/composables/useRSVP.ts
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { finalizeEvent, type EventTemplate, type Event as NostrEvent } from 'nostr-tools'
|
||||
import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||
import { useAuth } from '@/composables/useAuthService'
|
||||
import { NIP52_KINDS, type RSVPStatus } from '../types/nip52'
|
||||
|
||||
/**
|
||||
* NIP-52 RSVP (kind 31925) for responding to calendar events.
|
||||
*
|
||||
* Each RSVP is an addressable event with:
|
||||
* d-tag: unique identifier for this RSVP
|
||||
* a-tag: reference to the calendar event (kind:pubkey:d-tag)
|
||||
* status tag: 'accepted' | 'declined' | 'tentative'
|
||||
*/
|
||||
|
||||
interface RSVPEntry {
|
||||
status: RSVPStatus
|
||||
eventId: string
|
||||
createdAt: number
|
||||
}
|
||||
|
||||
// Cache: activityCoord -> user's RSVP status
|
||||
const rsvpCache = ref<Map<string, RSVPEntry>>(new Map())
|
||||
// Cache: activityCoord -> count of RSVPs from all users
|
||||
const rsvpCounts = ref<Map<string, number>>(new Map())
|
||||
const isLoaded = ref(false)
|
||||
|
||||
export function useRSVP() {
|
||||
const { isAuthenticated, currentUser } = useAuth()
|
||||
let unsubscribe: (() => void) | null = null
|
||||
|
||||
/**
|
||||
* Get the user's RSVP status for an activity.
|
||||
*/
|
||||
function getMyRSVP(activityKind: number, pubkey: string, dTag: string): RSVPStatus | null {
|
||||
const coord = `${activityKind}:${pubkey}:${dTag}`
|
||||
return rsvpCache.value.get(coord)?.status ?? null
|
||||
}
|
||||
|
||||
/**
|
||||
* Get RSVP count for an activity.
|
||||
*/
|
||||
function getRSVPCount(activityKind: number, pubkey: string, dTag: string): number {
|
||||
const coord = `${activityKind}:${pubkey}:${dTag}`
|
||||
return rsvpCounts.value.get(coord) ?? 0
|
||||
}
|
||||
|
||||
/**
|
||||
* Load the user's RSVPs and counts for visible activities from relays.
|
||||
*/
|
||||
function loadRSVPs() {
|
||||
const relayHub = tryInjectService<any>(SERVICE_TOKENS.RELAY_HUB)
|
||||
if (!relayHub) return
|
||||
|
||||
// Subscribe to all RSVPs (for counts) and filter user's own
|
||||
unsubscribe = relayHub.subscribe({
|
||||
id: `rsvps-${Date.now()}`,
|
||||
filters: [{
|
||||
kinds: [NIP52_KINDS.RSVP],
|
||||
limit: 500,
|
||||
}],
|
||||
onEvent: (event: NostrEvent) => {
|
||||
const aTag = event.tags.find(t => t[0] === 'a')?.[1]
|
||||
if (!aTag) return
|
||||
|
||||
const statusTag = event.tags.find(t => t[0] === 'status')?.[1] as RSVPStatus | undefined
|
||||
// Also check 'l' tag pattern used by some clients
|
||||
const lStatus = event.tags.find(t => t[0] === 'l' && t[2] === 'status')?.[1] as RSVPStatus | undefined
|
||||
const status = statusTag ?? lStatus
|
||||
if (!status || !['accepted', 'declined', 'tentative'].includes(status)) return
|
||||
|
||||
// Update count
|
||||
if (status === 'accepted') {
|
||||
rsvpCounts.value.set(aTag, (rsvpCounts.value.get(aTag) ?? 0) + 1)
|
||||
}
|
||||
|
||||
// Update user's own RSVP
|
||||
if (currentUser.value?.pubkey && event.pubkey === currentUser.value.pubkey) {
|
||||
const existing = rsvpCache.value.get(aTag)
|
||||
if (!existing || event.created_at > existing.createdAt) {
|
||||
rsvpCache.value.set(aTag, {
|
||||
status,
|
||||
eventId: event.id,
|
||||
createdAt: event.created_at,
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
onEose: () => {
|
||||
isLoaded.value = true
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Publish an RSVP for an activity.
|
||||
* Clicking the same status again removes the RSVP (publishes 'declined').
|
||||
*/
|
||||
async function setRSVP(
|
||||
activityKind: number,
|
||||
activityPubkey: string,
|
||||
activityDTag: string,
|
||||
status: RSVPStatus
|
||||
) {
|
||||
if (!isAuthenticated.value || !currentUser.value?.prvkey) return
|
||||
|
||||
const coord = `${activityKind}:${activityPubkey}:${activityDTag}`
|
||||
|
||||
// Toggle: if already this status, decline instead
|
||||
const currentStatus = getMyRSVP(activityKind, activityPubkey, activityDTag)
|
||||
const newStatus = currentStatus === status ? 'declined' : status
|
||||
|
||||
const dTag = `rsvp-${activityDTag}`
|
||||
|
||||
const template: EventTemplate = {
|
||||
kind: NIP52_KINDS.RSVP,
|
||||
created_at: Math.floor(Date.now() / 1000),
|
||||
content: '',
|
||||
tags: [
|
||||
['d', dTag],
|
||||
['a', coord],
|
||||
['status', newStatus],
|
||||
['L', 'status'],
|
||||
['l', newStatus, 'status'],
|
||||
['p', activityPubkey],
|
||||
],
|
||||
}
|
||||
|
||||
const signingKey = hexToUint8Array(currentUser.value.prvkey)
|
||||
const signedEvent = finalizeEvent(template, signingKey)
|
||||
|
||||
const relayHub = tryInjectService<any>(SERVICE_TOKENS.RELAY_HUB)
|
||||
if (!relayHub) return
|
||||
|
||||
const result = await relayHub.publishEvent(signedEvent)
|
||||
if (result.success > 0) {
|
||||
rsvpCache.value.set(coord, {
|
||||
status: newStatus,
|
||||
eventId: signedEvent.id,
|
||||
createdAt: signedEvent.created_at,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!isLoaded.value) {
|
||||
loadRSVPs()
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (unsubscribe) {
|
||||
unsubscribe()
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
getMyRSVP,
|
||||
getRSVPCount,
|
||||
setRSVP,
|
||||
isLoaded,
|
||||
loadRSVPs,
|
||||
}
|
||||
}
|
||||
|
||||
function hexToUint8Array(hex: string): Uint8Array {
|
||||
const bytes = new Uint8Array(hex.length / 2)
|
||||
for (let i = 0; i < hex.length; i += 2) {
|
||||
bytes[i / 2] = parseInt(hex.substr(i, 2), 16)
|
||||
}
|
||||
return bytes
|
||||
}
|
||||
128
src/modules/activities/index.ts
Normal file
128
src/modules/activities/index.ts
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
import { createModulePlugin } from '@/core/base/BaseModulePlugin'
|
||||
import { SERVICE_TOKENS } from '@/core/di-container'
|
||||
import { ActivitiesNostrService } from './services/ActivitiesNostrService'
|
||||
import { TicketApiService, type TicketApiConfig } from './services/TicketApiService'
|
||||
|
||||
export interface ActivitiesModuleConfig {
|
||||
apiConfig: TicketApiConfig
|
||||
defaultMapCenter?: { lat: number; lng: number }
|
||||
maxTicketsPerUser?: number
|
||||
enableMap?: boolean
|
||||
enablePrivateEvents?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Activities Module Plugin
|
||||
*
|
||||
* Nostr-native communal events module using NIP-52 Calendar Events
|
||||
* for discovery, with database-backed ticketing via LNbits.
|
||||
*/
|
||||
export const activitiesModule = createModulePlugin({
|
||||
name: 'activities',
|
||||
version: '1.0.0',
|
||||
dependencies: ['base'],
|
||||
|
||||
routes: [
|
||||
{
|
||||
path: '/activities',
|
||||
name: 'activities',
|
||||
component: () => import('./views/ActivitiesPage.vue'),
|
||||
meta: {
|
||||
title: 'Activities',
|
||||
requiresAuth: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/activities/calendar',
|
||||
name: 'activities-calendar',
|
||||
component: () => import('./views/ActivitiesCalendarPage.vue'),
|
||||
meta: {
|
||||
title: 'Calendar',
|
||||
requiresAuth: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/activities/map',
|
||||
name: 'activities-map',
|
||||
component: () => import('./views/ActivitiesMapPage.vue'),
|
||||
meta: {
|
||||
title: 'Map',
|
||||
requiresAuth: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/activities/favorites',
|
||||
name: 'activities-favorites',
|
||||
component: () => import('./views/ActivitiesFavoritesPage.vue'),
|
||||
meta: {
|
||||
title: 'Favorites',
|
||||
requiresAuth: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/activities/:id',
|
||||
name: 'activity-detail',
|
||||
component: () => import('./views/ActivityDetailPage.vue'),
|
||||
meta: {
|
||||
title: 'Activity',
|
||||
requiresAuth: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/my-tickets',
|
||||
name: 'my-tickets-v2',
|
||||
component: () => import('./views/MyTicketsPage.vue'),
|
||||
meta: {
|
||||
title: 'My Tickets',
|
||||
requiresAuth: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
eventListeners: [
|
||||
{
|
||||
event: 'payment:completed',
|
||||
handler: (event) => {
|
||||
console.log('Activities module: payment completed', event.data)
|
||||
},
|
||||
description: 'Handle payment completion for ticket purchases',
|
||||
},
|
||||
],
|
||||
|
||||
onInstall: async (_app, options) => {
|
||||
const config = options?.config as ActivitiesModuleConfig | undefined
|
||||
if (!config) {
|
||||
throw new Error('Activities module requires configuration')
|
||||
}
|
||||
|
||||
const { container } = await import('@/core/di-container')
|
||||
|
||||
// 1. Create services
|
||||
const nostrService = new ActivitiesNostrService()
|
||||
const ticketApi = new TicketApiService(config.apiConfig)
|
||||
|
||||
// 2. Register in DI container BEFORE initialization
|
||||
container.provide(SERVICE_TOKENS.ACTIVITIES_NOSTR_SERVICE, nostrService)
|
||||
container.provide(SERVICE_TOKENS.ACTIVITIES_TICKET_API, ticketApi)
|
||||
|
||||
// 3. Initialize the Nostr service (needs RelayHub dependency)
|
||||
await nostrService.initialize({
|
||||
waitForDependencies: true,
|
||||
maxRetries: 3,
|
||||
})
|
||||
},
|
||||
|
||||
onUninstall: async () => {
|
||||
const { container } = await import('@/core/di-container')
|
||||
container.remove(SERVICE_TOKENS.ACTIVITIES_NOSTR_SERVICE)
|
||||
container.remove(SERVICE_TOKENS.ACTIVITIES_TICKET_API)
|
||||
},
|
||||
})
|
||||
|
||||
export default activitiesModule
|
||||
|
||||
// Re-export types for external use
|
||||
export type { Activity, OrganizerInfo, ActivityTicketInfo } from './types/activity'
|
||||
export type { ActivityTicket, TicketStatus } from './types/ticket'
|
||||
export type { ActivityCategory } from './types/category'
|
||||
export type { CalendarTimeEvent, CalendarDateEvent, CalendarRSVP } from './types/nip52'
|
||||
182
src/modules/activities/services/ActivitiesNostrService.ts
Normal file
182
src/modules/activities/services/ActivitiesNostrService.ts
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
import { BaseService } from '@/core/base/BaseService'
|
||||
import { finalizeEvent, type Event as NostrEvent, type EventTemplate } from 'nostr-tools'
|
||||
import type { SubscriptionConfig } from '@/modules/base/nostr/relay-hub'
|
||||
import {
|
||||
NIP52_KINDS,
|
||||
parseCalendarTimeEvent,
|
||||
parseCalendarDateEvent,
|
||||
buildCalendarTimeEventTags,
|
||||
type CalendarTimeEvent,
|
||||
} from '../types/nip52'
|
||||
import {
|
||||
calendarTimeEventToActivity,
|
||||
calendarDateEventToActivity,
|
||||
type Activity,
|
||||
} from '../types/activity'
|
||||
|
||||
export interface CalendarEventFilters {
|
||||
/** Only return events created after this timestamp */
|
||||
since?: number
|
||||
/** Only return events created before this timestamp */
|
||||
until?: number
|
||||
/** Filter by specific authors (pubkeys) */
|
||||
authors?: string[]
|
||||
/** Filter by hashtags (NIP-52 't' tags) */
|
||||
hashtags?: string[]
|
||||
/** Filter by geohash prefix (NIP-52 'g' tag) */
|
||||
geohash?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Service for subscribing to and publishing NIP-52 Calendar Events via RelayHub.
|
||||
* Extends BaseService for standardized dependency injection and lifecycle.
|
||||
*/
|
||||
export class ActivitiesNostrService extends BaseService {
|
||||
protected readonly metadata = {
|
||||
name: 'ActivitiesNostrService',
|
||||
version: '1.0.0',
|
||||
dependencies: ['RelayHub'],
|
||||
}
|
||||
|
||||
private activeUnsubscribes: Array<() => void> = []
|
||||
|
||||
protected async onInitialize(): Promise<void> {
|
||||
this.debug('ActivitiesNostrService initialized')
|
||||
}
|
||||
|
||||
/**
|
||||
* Subscribe to NIP-52 calendar events from relays.
|
||||
* Returns an unsubscribe function.
|
||||
*/
|
||||
subscribeToCalendarEvents(
|
||||
onActivity: (activity: Activity) => void,
|
||||
filters?: CalendarEventFilters
|
||||
): () => void {
|
||||
if (!this.relayHub) {
|
||||
throw new Error('RelayHub not available')
|
||||
}
|
||||
|
||||
const nostrFilters = this.buildNostrFilters(filters)
|
||||
|
||||
const subscriptionId = `activities-calendar-${Date.now()}`
|
||||
|
||||
const config: SubscriptionConfig = {
|
||||
id: subscriptionId,
|
||||
filters: nostrFilters,
|
||||
onEvent: (event: NostrEvent) => {
|
||||
const activity = this.parseNostrEventToActivity(event)
|
||||
if (activity) {
|
||||
onActivity(activity)
|
||||
}
|
||||
},
|
||||
onEose: () => {
|
||||
this.debug('End of stored events for subscription', subscriptionId)
|
||||
},
|
||||
}
|
||||
|
||||
const unsubscribe = this.relayHub.subscribe(config)
|
||||
this.activeUnsubscribes.push(unsubscribe)
|
||||
|
||||
return () => {
|
||||
unsubscribe()
|
||||
this.activeUnsubscribes = this.activeUnsubscribes.filter(fn => fn !== unsubscribe)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Query relays for calendar events (one-shot, not a subscription).
|
||||
*/
|
||||
async queryCalendarEvents(filters?: CalendarEventFilters): Promise<Activity[]> {
|
||||
if (!this.relayHub) {
|
||||
throw new Error('RelayHub not available')
|
||||
}
|
||||
|
||||
const nostrFilters = this.buildNostrFilters(filters)
|
||||
const events: NostrEvent[] = await this.relayHub.queryEvents(nostrFilters)
|
||||
|
||||
const activities: Activity[] = []
|
||||
for (const event of events) {
|
||||
const activity = this.parseNostrEventToActivity(event)
|
||||
if (activity) {
|
||||
activities.push(activity)
|
||||
}
|
||||
}
|
||||
|
||||
return activities
|
||||
}
|
||||
|
||||
/**
|
||||
* Publish a NIP-52 time-based calendar event.
|
||||
* Requires an authenticated user with a signing key.
|
||||
*/
|
||||
async publishCalendarEvent(
|
||||
eventData: Partial<CalendarTimeEvent>,
|
||||
signingKeyHex: string
|
||||
): Promise<{ success: number; total: number }> {
|
||||
if (!this.relayHub) {
|
||||
throw new Error('RelayHub not available')
|
||||
}
|
||||
|
||||
const tags = buildCalendarTimeEventTags(eventData)
|
||||
const template: EventTemplate = {
|
||||
kind: NIP52_KINDS.CALENDAR_TIME_EVENT,
|
||||
created_at: Math.floor(Date.now() / 1000),
|
||||
content: eventData.content ?? '',
|
||||
tags,
|
||||
}
|
||||
|
||||
const privkeyBytes = hexToUint8Array(signingKeyHex)
|
||||
const signedEvent = finalizeEvent(template, privkeyBytes)
|
||||
|
||||
return await this.relayHub.publishEvent(signedEvent)
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse a raw Nostr event into an Activity view model.
|
||||
*/
|
||||
private parseNostrEventToActivity(event: NostrEvent): Activity | null {
|
||||
if (event.kind === NIP52_KINDS.CALENDAR_TIME_EVENT) {
|
||||
const parsed = parseCalendarTimeEvent(event)
|
||||
if (parsed) return calendarTimeEventToActivity(parsed)
|
||||
}
|
||||
|
||||
if (event.kind === NIP52_KINDS.CALENDAR_DATE_EVENT) {
|
||||
const parsed = parseCalendarDateEvent(event)
|
||||
if (parsed) return calendarDateEventToActivity(parsed)
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
/**
|
||||
* Build nostr-tools Filter objects from our CalendarEventFilters.
|
||||
*/
|
||||
private buildNostrFilters(filters?: CalendarEventFilters): Array<Record<string, any>> {
|
||||
const filter: Record<string, any> = {
|
||||
kinds: [NIP52_KINDS.CALENDAR_DATE_EVENT, NIP52_KINDS.CALENDAR_TIME_EVENT],
|
||||
}
|
||||
|
||||
if (filters?.since) filter.since = filters.since
|
||||
if (filters?.until) filter.until = filters.until
|
||||
if (filters?.authors?.length) filter.authors = filters.authors
|
||||
if (filters?.hashtags?.length) filter['#t'] = filters.hashtags
|
||||
if (filters?.geohash) filter['#g'] = [filters.geohash]
|
||||
|
||||
return [filter]
|
||||
}
|
||||
|
||||
protected override async onDispose(): Promise<void> {
|
||||
for (const unsub of this.activeUnsubscribes) {
|
||||
unsub()
|
||||
}
|
||||
this.activeUnsubscribes = []
|
||||
}
|
||||
}
|
||||
|
||||
function hexToUint8Array(hex: string): Uint8Array {
|
||||
const bytes = new Uint8Array(hex.length / 2)
|
||||
for (let i = 0; i < hex.length; i += 2) {
|
||||
bytes[i / 2] = parseInt(hex.substr(i, 2), 16)
|
||||
}
|
||||
return bytes
|
||||
}
|
||||
91
src/modules/activities/services/LnbitsPaymentProvider.ts
Normal file
91
src/modules/activities/services/LnbitsPaymentProvider.ts
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
import type {
|
||||
PaymentProvider,
|
||||
CreateInvoiceParams,
|
||||
InvoiceResult,
|
||||
PaymentStatus,
|
||||
PayInvoiceResult,
|
||||
} from './PaymentProviderInterface'
|
||||
|
||||
export interface LnbitsPaymentConfig {
|
||||
baseUrl: string
|
||||
apiKey: string
|
||||
}
|
||||
|
||||
/**
|
||||
* LNbits implementation of PaymentProvider.
|
||||
* Talks to the LNbits REST API for invoice creation, payment, and status checks.
|
||||
*/
|
||||
export class LnbitsPaymentProvider implements PaymentProvider {
|
||||
constructor(private config: LnbitsPaymentConfig) {}
|
||||
|
||||
async createInvoice(params: CreateInvoiceParams): Promise<InvoiceResult> {
|
||||
const response = await fetch(`${this.config.baseUrl}/api/v1/payments`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Api-Key': this.config.apiKey,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
out: false,
|
||||
amount: params.amount,
|
||||
memo: params.memo,
|
||||
extra: params.metadata,
|
||||
}),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json().catch(() => ({ detail: 'Failed to create invoice' }))
|
||||
throw new Error(typeof error.detail === 'string' ? error.detail : 'Failed to create invoice')
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
return {
|
||||
paymentHash: data.payment_hash,
|
||||
paymentRequest: data.payment_request,
|
||||
}
|
||||
}
|
||||
|
||||
async checkPaymentStatus(paymentHash: string): Promise<PaymentStatus> {
|
||||
const response = await fetch(`${this.config.baseUrl}/api/v1/payments/${paymentHash}`, {
|
||||
headers: {
|
||||
'X-Api-Key': this.config.apiKey,
|
||||
},
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to check payment status')
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
return {
|
||||
paid: data.paid === true,
|
||||
preimage: data.preimage,
|
||||
}
|
||||
}
|
||||
|
||||
async payInvoice(paymentRequest: string): Promise<PayInvoiceResult> {
|
||||
const response = await fetch(`${this.config.baseUrl}/api/v1/payments`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Api-Key': this.config.apiKey,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
out: true,
|
||||
bolt11: paymentRequest,
|
||||
}),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json().catch(() => ({ detail: 'Failed to pay invoice' }))
|
||||
throw new Error(typeof error.detail === 'string' ? error.detail : 'Failed to pay invoice')
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
return {
|
||||
paymentHash: data.payment_hash,
|
||||
feeMsat: data.fee_msat ?? 0,
|
||||
preimage: data.preimage ?? '',
|
||||
}
|
||||
}
|
||||
}
|
||||
48
src/modules/activities/services/PaymentProviderInterface.ts
Normal file
48
src/modules/activities/services/PaymentProviderInterface.ts
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
/**
|
||||
* Payment Provider Abstraction
|
||||
*
|
||||
* Enables swapping between LNbits and lightning.pub (or other providers)
|
||||
* without changing consuming code.
|
||||
*/
|
||||
|
||||
export interface CreateInvoiceParams {
|
||||
/** Amount in the specified currency */
|
||||
amount: number
|
||||
/** Currency code (e.g., 'sats', 'EUR') */
|
||||
currency: string
|
||||
/** Invoice memo/description */
|
||||
memo: string
|
||||
/** Arbitrary metadata attached to the invoice */
|
||||
metadata?: Record<string, string>
|
||||
}
|
||||
|
||||
export interface InvoiceResult {
|
||||
paymentHash: string
|
||||
paymentRequest: string
|
||||
}
|
||||
|
||||
export interface PaymentStatus {
|
||||
paid: boolean
|
||||
preimage?: string
|
||||
}
|
||||
|
||||
export interface PayInvoiceResult {
|
||||
paymentHash: string
|
||||
feeMsat: number
|
||||
preimage: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Abstract payment provider interface.
|
||||
* Implementations handle the specifics of LNbits, lightning.pub, etc.
|
||||
*/
|
||||
export interface PaymentProvider {
|
||||
/** Create a Lightning invoice for receiving payment */
|
||||
createInvoice(params: CreateInvoiceParams): Promise<InvoiceResult>
|
||||
|
||||
/** Check whether an invoice has been paid */
|
||||
checkPaymentStatus(paymentHash: string): Promise<PaymentStatus>
|
||||
|
||||
/** Pay a Lightning invoice from the user's wallet */
|
||||
payInvoice(paymentRequest: string): Promise<PayInvoiceResult>
|
||||
}
|
||||
158
src/modules/activities/services/TicketApiService.ts
Normal file
158
src/modules/activities/services/TicketApiService.ts
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
import type {
|
||||
ActivityTicket,
|
||||
TicketPurchaseInvoice,
|
||||
TicketPaymentStatus,
|
||||
} from '../types/ticket'
|
||||
|
||||
export interface TicketApiConfig {
|
||||
baseUrl: string
|
||||
apiKey: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Database-backed ticketing API service.
|
||||
* Talks to the LNbits events extension for ticket inventory,
|
||||
* purchases, payment status, and validation.
|
||||
*
|
||||
* This is NOT a BaseService -- it's a simple API wrapper instantiated
|
||||
* with config at module install time (same pattern as EventsApiService).
|
||||
*/
|
||||
export class TicketApiService {
|
||||
constructor(private config: TicketApiConfig) {}
|
||||
|
||||
/**
|
||||
* Fetch all public events from the LNbits events extension.
|
||||
* Used to correlate Nostr activities with ticketed events.
|
||||
*/
|
||||
async fetchTicketedEvents(): Promise<any[]> {
|
||||
const response = await this.request(
|
||||
'/events/api/v1/events/public',
|
||||
{ method: 'GET' }
|
||||
)
|
||||
return response
|
||||
}
|
||||
|
||||
/**
|
||||
* Request a ticket purchase (creates a Lightning invoice).
|
||||
*/
|
||||
async requestTicket(
|
||||
eventId: string,
|
||||
userId: string,
|
||||
accessToken: string
|
||||
): Promise<TicketPurchaseInvoice> {
|
||||
const data = await this.request(
|
||||
`/events/api/v1/tickets/${eventId}/user/${userId}`,
|
||||
{
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${accessToken}`,
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
return {
|
||||
paymentHash: data.payment_hash,
|
||||
paymentRequest: data.payment_request,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check whether a ticket payment has been confirmed.
|
||||
*/
|
||||
async checkPaymentStatus(
|
||||
eventId: string,
|
||||
paymentHash: string
|
||||
): Promise<TicketPaymentStatus> {
|
||||
const data = await this.request(
|
||||
`/events/api/v1/tickets/${eventId}/${paymentHash}`,
|
||||
{ method: 'POST' }
|
||||
)
|
||||
|
||||
return {
|
||||
paid: data.paid === true,
|
||||
ticketId: data.ticket_id,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch all tickets for a user.
|
||||
*/
|
||||
async fetchUserTickets(
|
||||
userId: string,
|
||||
accessToken: string
|
||||
): Promise<ActivityTicket[]> {
|
||||
const data = await this.request(
|
||||
`/events/api/v1/tickets/user/${userId}`,
|
||||
{
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${accessToken}`,
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
return (data as any[]).map(t => ({
|
||||
id: t.id,
|
||||
wallet: t.wallet,
|
||||
activityId: t.event,
|
||||
name: t.name,
|
||||
email: t.email,
|
||||
userId: t.user_id,
|
||||
registered: t.registered,
|
||||
paid: t.paid,
|
||||
time: t.time,
|
||||
regTimestamp: t.reg_timestamp,
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate/register a ticket at the door (scan).
|
||||
*/
|
||||
async validateTicket(ticketId: string): Promise<ActivityTicket[]> {
|
||||
const data = await this.request(
|
||||
`/events/api/v1/register/ticket/${ticketId}`,
|
||||
{ method: 'GET' }
|
||||
)
|
||||
|
||||
return (data as any[]).map(t => ({
|
||||
id: t.id,
|
||||
wallet: t.wallet,
|
||||
activityId: t.event,
|
||||
name: t.name,
|
||||
email: t.email,
|
||||
userId: t.user_id,
|
||||
registered: t.registered,
|
||||
paid: t.paid,
|
||||
time: t.time,
|
||||
regTimestamp: t.reg_timestamp,
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
* Internal fetch helper with standard headers and error handling.
|
||||
*/
|
||||
private async request(path: string, init: RequestInit = {}): Promise<any> {
|
||||
const headers: Record<string, string> = {
|
||||
'accept': 'application/json',
|
||||
'X-API-KEY': this.config.apiKey,
|
||||
...(init.headers as Record<string, string> ?? {}),
|
||||
}
|
||||
|
||||
const response = await fetch(`${this.config.baseUrl}${path}`, {
|
||||
...init,
|
||||
headers,
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json().catch(() => ({ detail: `Request failed: ${path}` }))
|
||||
const errorMessage = typeof error.detail === 'string'
|
||||
? error.detail
|
||||
: Array.isArray(error.detail)
|
||||
? error.detail[0]?.msg ?? 'Request failed'
|
||||
: 'Request failed'
|
||||
throw new Error(errorMessage)
|
||||
}
|
||||
|
||||
return response.json()
|
||||
}
|
||||
}
|
||||
100
src/modules/activities/stores/activities.ts
Normal file
100
src/modules/activities/stores/activities.ts
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
import type { Activity } from '../types/activity'
|
||||
|
||||
/**
|
||||
* Pinia store for cached activities from Nostr relays.
|
||||
* Handles deduplication by NIP-52 addressable event key (kind:pubkey:d-tag).
|
||||
*/
|
||||
export const useActivitiesStore = defineStore('activities', () => {
|
||||
// State
|
||||
const activitiesMap = ref<Map<string, Activity>>(new Map())
|
||||
const isLoading = ref(false)
|
||||
const lastUpdated = ref<Date | null>(null)
|
||||
|
||||
// Computed
|
||||
const activities = computed(() => Array.from(activitiesMap.value.values()))
|
||||
|
||||
const upcomingActivities = computed(() => {
|
||||
const now = new Date()
|
||||
return activities.value
|
||||
.filter(a => a.startDate >= now || (a.endDate && a.endDate >= now))
|
||||
.sort((a, b) => a.startDate.getTime() - b.startDate.getTime())
|
||||
})
|
||||
|
||||
const pastActivities = computed(() => {
|
||||
const now = new Date()
|
||||
return activities.value
|
||||
.filter(a => {
|
||||
const endOrStart = a.endDate ?? a.startDate
|
||||
return endOrStart < now
|
||||
})
|
||||
.sort((a, b) => b.startDate.getTime() - a.startDate.getTime())
|
||||
})
|
||||
|
||||
// Actions
|
||||
|
||||
/**
|
||||
* Add or update an activity in the store.
|
||||
* Deduplicates by id (d-tag). Newer events replace older ones.
|
||||
*/
|
||||
function upsertActivity(activity: Activity) {
|
||||
const existing = activitiesMap.value.get(activity.id)
|
||||
|
||||
// Only update if this is a newer version
|
||||
if (!existing || activity.createdAt >= existing.createdAt) {
|
||||
activitiesMap.value.set(activity.id, activity)
|
||||
lastUpdated.value = new Date()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add multiple activities (batch upsert).
|
||||
*/
|
||||
function upsertActivities(newActivities: Activity[]) {
|
||||
for (const activity of newActivities) {
|
||||
upsertActivity(activity)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove an activity from the store.
|
||||
*/
|
||||
function removeActivity(id: string) {
|
||||
activitiesMap.value.delete(id)
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear all cached activities.
|
||||
*/
|
||||
function clearAll() {
|
||||
activitiesMap.value.clear()
|
||||
lastUpdated.value = null
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a single activity by its id (d-tag).
|
||||
*/
|
||||
function getActivityById(id: string): Activity | undefined {
|
||||
return activitiesMap.value.get(id)
|
||||
}
|
||||
|
||||
return {
|
||||
// State
|
||||
activitiesMap,
|
||||
isLoading,
|
||||
lastUpdated,
|
||||
|
||||
// Computed
|
||||
activities,
|
||||
upcomingActivities,
|
||||
pastActivities,
|
||||
|
||||
// Actions
|
||||
upsertActivity,
|
||||
upsertActivities,
|
||||
removeActivity,
|
||||
clearAll,
|
||||
getActivityById,
|
||||
}
|
||||
})
|
||||
139
src/modules/activities/types/activity.ts
Normal file
139
src/modules/activities/types/activity.ts
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
import ngeohash from 'ngeohash'
|
||||
import type { ActivityCategory } from './category'
|
||||
import type { CalendarTimeEvent, CalendarDateEvent } from './nip52'
|
||||
|
||||
/**
|
||||
* Unified view model for displaying activities in the UI.
|
||||
* Created from NIP-52 CalendarTimeEvent or CalendarDateEvent.
|
||||
*/
|
||||
export interface Activity {
|
||||
/** Unique identifier (NIP-52 d-tag) */
|
||||
id: string
|
||||
/** Nostr event ID */
|
||||
nostrEventId: string
|
||||
/** Whether this is a date-only or time-specific event */
|
||||
type: 'date' | 'time'
|
||||
/** Organizer information */
|
||||
organizer: OrganizerInfo
|
||||
/** Activity title */
|
||||
title: string
|
||||
/** Brief summary */
|
||||
summary?: string
|
||||
/** Full description (markdown) */
|
||||
description: string
|
||||
/** Banner/poster image URL */
|
||||
image?: string
|
||||
/** Start date/time */
|
||||
startDate: Date
|
||||
/** End date/time */
|
||||
endDate?: Date
|
||||
/** Timezone identifier (IANA) */
|
||||
timezone?: string
|
||||
/** Human-readable location */
|
||||
location?: string
|
||||
/** Geographic coordinates (derived from geohash) */
|
||||
coordinates?: { lat: number; lng: number }
|
||||
/** NIP-52 geohash (g tag) */
|
||||
geohash?: string
|
||||
/** Primary category */
|
||||
category?: ActivityCategory
|
||||
/** All hashtags/tags */
|
||||
tags: string[]
|
||||
/** Ticket pricing info (if ticketed) */
|
||||
ticketInfo?: ActivityTicketInfo
|
||||
/** Whether this is a private/invite-only event */
|
||||
isPrivate: boolean
|
||||
/** Nostr event created_at timestamp */
|
||||
createdAt: Date
|
||||
}
|
||||
|
||||
export interface OrganizerInfo {
|
||||
pubkey: string
|
||||
name?: string
|
||||
picture?: string
|
||||
nip05?: string
|
||||
}
|
||||
|
||||
export interface ActivityTicketInfo {
|
||||
price: number
|
||||
currency: string
|
||||
available: number
|
||||
total: number
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert a CalendarTimeEvent to an Activity view model
|
||||
*/
|
||||
export function calendarTimeEventToActivity(event: CalendarTimeEvent, organizer?: Partial<OrganizerInfo>): Activity {
|
||||
const category = event.hashtags[0] as ActivityCategory | undefined
|
||||
|
||||
return {
|
||||
id: event.dTag,
|
||||
nostrEventId: event.id,
|
||||
type: 'time',
|
||||
organizer: {
|
||||
pubkey: event.pubkey,
|
||||
...organizer,
|
||||
},
|
||||
title: event.title,
|
||||
summary: event.summary,
|
||||
description: event.content,
|
||||
image: event.image,
|
||||
startDate: new Date(event.start * 1000),
|
||||
endDate: event.end ? new Date(event.end * 1000) : undefined,
|
||||
timezone: event.startTzid,
|
||||
location: event.location,
|
||||
coordinates: decodeGeohash(event.geohash),
|
||||
geohash: event.geohash,
|
||||
category,
|
||||
tags: event.hashtags,
|
||||
isPrivate: false,
|
||||
createdAt: new Date(event.createdAt * 1000),
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert a CalendarDateEvent to an Activity view model
|
||||
*/
|
||||
export function calendarDateEventToActivity(event: CalendarDateEvent, organizer?: Partial<OrganizerInfo>): Activity {
|
||||
const category = event.hashtags[0] as ActivityCategory | undefined
|
||||
|
||||
// Parse ISO date string (YYYY-MM-DD) to Date at midnight UTC
|
||||
const parseIsoDate = (dateStr: string): Date => {
|
||||
const [year, month, day] = dateStr.split('-').map(Number)
|
||||
return new Date(Date.UTC(year, month - 1, day))
|
||||
}
|
||||
|
||||
return {
|
||||
id: event.dTag,
|
||||
nostrEventId: event.id,
|
||||
type: 'date',
|
||||
organizer: {
|
||||
pubkey: event.pubkey,
|
||||
...organizer,
|
||||
},
|
||||
title: event.title,
|
||||
summary: event.summary,
|
||||
description: event.content,
|
||||
image: event.image,
|
||||
startDate: parseIsoDate(event.start),
|
||||
endDate: event.end ? parseIsoDate(event.end) : undefined,
|
||||
location: event.location,
|
||||
coordinates: decodeGeohash(event.geohash),
|
||||
geohash: event.geohash,
|
||||
category,
|
||||
tags: event.hashtags,
|
||||
isPrivate: false,
|
||||
createdAt: new Date(event.createdAt * 1000),
|
||||
}
|
||||
}
|
||||
|
||||
function decodeGeohash(geohash?: string): { lat: number; lng: number } | undefined {
|
||||
if (!geohash) return undefined
|
||||
try {
|
||||
const { latitude, longitude } = ngeohash.decode(geohash)
|
||||
return { lat: latitude, lng: longitude }
|
||||
} catch {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
35
src/modules/activities/types/category.ts
Normal file
35
src/modules/activities/types/category.ts
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/**
|
||||
* Activity categories inspired by p'a semana
|
||||
* Mapped to NIP-52 't' (hashtag) tags
|
||||
*/
|
||||
export const ACTIVITY_CATEGORIES = {
|
||||
concert: 'concert',
|
||||
workshop: 'workshop',
|
||||
market: 'market',
|
||||
festival: 'festival',
|
||||
exhibition: 'exhibition',
|
||||
sport: 'sport',
|
||||
theater: 'theater',
|
||||
cinema: 'cinema',
|
||||
party: 'party',
|
||||
talk: 'talk',
|
||||
conference: 'conference',
|
||||
meetup: 'meetup',
|
||||
food: 'food',
|
||||
outdoor: 'outdoor',
|
||||
kids: 'kids',
|
||||
wellness: 'wellness',
|
||||
technology: 'technology',
|
||||
art: 'art',
|
||||
music: 'music',
|
||||
dance: 'dance',
|
||||
literature: 'literature',
|
||||
comedy: 'comedy',
|
||||
charity: 'charity',
|
||||
tradition: 'tradition',
|
||||
other: 'other',
|
||||
} as const
|
||||
|
||||
export type ActivityCategory = typeof ACTIVITY_CATEGORIES[keyof typeof ACTIVITY_CATEGORIES]
|
||||
|
||||
export const ALL_CATEGORIES = Object.values(ACTIVITY_CATEGORIES)
|
||||
28
src/modules/activities/types/filters.ts
Normal file
28
src/modules/activities/types/filters.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import type { ActivityCategory } from './category'
|
||||
|
||||
/**
|
||||
* Temporal filter presets (p'a semana style)
|
||||
*/
|
||||
export type TemporalFilter = 'all' | 'today' | 'tomorrow' | 'this-week' | 'this-month'
|
||||
|
||||
/**
|
||||
* Combined filter state for activity discovery
|
||||
*/
|
||||
export interface ActivityFilters {
|
||||
temporal: TemporalFilter
|
||||
categories: ActivityCategory[]
|
||||
/** Free text search */
|
||||
search?: string
|
||||
/** Geohash prefix for geographic filtering */
|
||||
geohash?: string
|
||||
/** Filter by specific organizer pubkey */
|
||||
organizerPubkey?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Default filter state
|
||||
*/
|
||||
export const DEFAULT_FILTERS: ActivityFilters = {
|
||||
temporal: 'all',
|
||||
categories: [],
|
||||
}
|
||||
245
src/modules/activities/types/nip52.ts
Normal file
245
src/modules/activities/types/nip52.ts
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
import type { Event as NostrEvent } from 'nostr-tools'
|
||||
|
||||
/**
|
||||
* NIP-52 Calendar Event kinds
|
||||
* https://github.com/nostr-protocol/nips/blob/master/52.md
|
||||
*/
|
||||
export const NIP52_KINDS = {
|
||||
/** Date-based calendar event (all-day / multi-day) */
|
||||
CALENDAR_DATE_EVENT: 31922,
|
||||
/** Time-based calendar event (specific times with timezone) */
|
||||
CALENDAR_TIME_EVENT: 31923,
|
||||
/** Calendar (collection of calendar events) */
|
||||
CALENDAR: 31924,
|
||||
/** Calendar Event RSVP */
|
||||
RSVP: 31925,
|
||||
} as const
|
||||
|
||||
export type Nip52Kind = typeof NIP52_KINDS[keyof typeof NIP52_KINDS]
|
||||
|
||||
/**
|
||||
* Parsed NIP-52 date-based calendar event (kind 31922)
|
||||
*/
|
||||
export interface CalendarDateEvent {
|
||||
dTag: string
|
||||
pubkey: string
|
||||
title: string
|
||||
summary?: string
|
||||
content: string
|
||||
image?: string
|
||||
start: string // ISO 8601 date: YYYY-MM-DD
|
||||
end?: string // ISO 8601 date: YYYY-MM-DD
|
||||
location?: string
|
||||
geohash?: string
|
||||
hashtags: string[]
|
||||
participants: Participant[]
|
||||
references: string[]
|
||||
id: string
|
||||
createdAt: number
|
||||
}
|
||||
|
||||
/**
|
||||
* Parsed NIP-52 time-based calendar event (kind 31923)
|
||||
*/
|
||||
export interface CalendarTimeEvent {
|
||||
dTag: string
|
||||
pubkey: string
|
||||
title: string
|
||||
summary?: string
|
||||
content: string
|
||||
image?: string
|
||||
start: number // Unix timestamp
|
||||
end?: number // Unix timestamp
|
||||
startTzid?: string // IANA timezone identifier
|
||||
endTzid?: string // IANA timezone identifier
|
||||
location?: string
|
||||
geohash?: string
|
||||
hashtags: string[]
|
||||
participants: Participant[]
|
||||
references: string[]
|
||||
id: string
|
||||
createdAt: number
|
||||
}
|
||||
|
||||
export interface Participant {
|
||||
pubkey: string
|
||||
relayUrl?: string
|
||||
role?: string // 'organizer' | 'performer' | 'host' | etc.
|
||||
}
|
||||
|
||||
/**
|
||||
* RSVP status values per NIP-52
|
||||
*/
|
||||
export type RSVPStatus = 'accepted' | 'declined' | 'tentative'
|
||||
|
||||
/**
|
||||
* Parsed NIP-52 RSVP (kind 31925)
|
||||
*/
|
||||
export interface CalendarRSVP {
|
||||
dTag: string
|
||||
pubkey: string
|
||||
eventCoordinate: string // 'a' tag: kind:pubkey:d-tag
|
||||
eventId?: string // 'e' tag (optional)
|
||||
status: RSVPStatus
|
||||
freebusy?: 'free' | 'busy'
|
||||
id: string
|
||||
createdAt: number
|
||||
}
|
||||
|
||||
// --- Tag parsing helpers ---
|
||||
|
||||
function getTagValue(tags: string[][], tagName: string): string | undefined {
|
||||
return tags.find(t => t[0] === tagName)?.[1]
|
||||
}
|
||||
|
||||
function getTagValues(tags: string[][], tagName: string): string[] {
|
||||
return tags.filter(t => t[0] === tagName).map(t => t[1])
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse a NIP-52 start/end tag value to a unix timestamp in seconds.
|
||||
* Handles: unix seconds, unix milliseconds, and ISO date strings.
|
||||
*/
|
||||
/**
|
||||
* Parse a NIP-52 start/end tag value to a unix timestamp in seconds.
|
||||
* Handles: unix seconds, unix milliseconds, and ISO date strings.
|
||||
* Returns NaN if unparseable (caller must handle).
|
||||
*/
|
||||
function parseTimestamp(value: string): number {
|
||||
const num = Number(value)
|
||||
if (!isNaN(num) && num > 0) {
|
||||
// If the number is unreasonably large, it's likely milliseconds
|
||||
if (num > 1e12) {
|
||||
return Math.floor(num / 1000)
|
||||
}
|
||||
return num
|
||||
}
|
||||
// Try as ISO date string
|
||||
const date = new Date(value)
|
||||
if (!isNaN(date.getTime())) {
|
||||
return Math.floor(date.getTime() / 1000)
|
||||
}
|
||||
return NaN
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse a Nostr event into a CalendarTimeEvent (kind 31923)
|
||||
*/
|
||||
export function parseCalendarTimeEvent(event: NostrEvent): CalendarTimeEvent | null {
|
||||
if (event.kind !== NIP52_KINDS.CALENDAR_TIME_EVENT) return null
|
||||
|
||||
const dTag = getTagValue(event.tags, 'd')
|
||||
const title = getTagValue(event.tags, 'title')
|
||||
const startStr = getTagValue(event.tags, 'start')
|
||||
|
||||
if (!dTag || !title || !startStr) return null
|
||||
|
||||
const startTs = parseTimestamp(startStr)
|
||||
if (isNaN(startTs)) return null // reject events with unparseable timestamps
|
||||
|
||||
const endStr = getTagValue(event.tags, 'end')
|
||||
const endTs = endStr ? parseTimestamp(endStr) : undefined
|
||||
|
||||
const participants: Participant[] = event.tags
|
||||
.filter(t => t[0] === 'p')
|
||||
.map(t => ({
|
||||
pubkey: t[1],
|
||||
relayUrl: t[2] || undefined,
|
||||
role: t[3] || undefined,
|
||||
}))
|
||||
|
||||
return {
|
||||
dTag,
|
||||
pubkey: event.pubkey,
|
||||
title,
|
||||
summary: getTagValue(event.tags, 'summary'),
|
||||
content: event.content,
|
||||
image: getTagValue(event.tags, 'image'),
|
||||
start: startTs,
|
||||
end: isNaN(endTs as number) ? undefined : endTs,
|
||||
startTzid: getTagValue(event.tags, 'start_tzid'),
|
||||
endTzid: getTagValue(event.tags, 'end_tzid'),
|
||||
location: getTagValue(event.tags, 'location'),
|
||||
geohash: getTagValue(event.tags, 'g'),
|
||||
hashtags: getTagValues(event.tags, 't'),
|
||||
participants,
|
||||
references: getTagValues(event.tags, 'r'),
|
||||
id: event.id,
|
||||
createdAt: event.created_at,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse a Nostr event into a CalendarDateEvent (kind 31922)
|
||||
*/
|
||||
export function parseCalendarDateEvent(event: NostrEvent): CalendarDateEvent | null {
|
||||
if (event.kind !== NIP52_KINDS.CALENDAR_DATE_EVENT) return null
|
||||
|
||||
const dTag = getTagValue(event.tags, 'd')
|
||||
const title = getTagValue(event.tags, 'title')
|
||||
const start = getTagValue(event.tags, 'start')
|
||||
|
||||
if (!dTag || !title || !start) return null
|
||||
|
||||
const participants: Participant[] = event.tags
|
||||
.filter(t => t[0] === 'p')
|
||||
.map(t => ({
|
||||
pubkey: t[1],
|
||||
relayUrl: t[2] || undefined,
|
||||
role: t[3] || undefined,
|
||||
}))
|
||||
|
||||
return {
|
||||
dTag,
|
||||
pubkey: event.pubkey,
|
||||
title,
|
||||
summary: getTagValue(event.tags, 'summary'),
|
||||
content: event.content,
|
||||
image: getTagValue(event.tags, 'image'),
|
||||
start,
|
||||
end: getTagValue(event.tags, 'end'),
|
||||
location: getTagValue(event.tags, 'location'),
|
||||
geohash: getTagValue(event.tags, 'g'),
|
||||
hashtags: getTagValues(event.tags, 't'),
|
||||
participants,
|
||||
references: getTagValues(event.tags, 'r'),
|
||||
id: event.id,
|
||||
createdAt: event.created_at,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Build NIP-52 tags for a time-based calendar event
|
||||
*/
|
||||
export function buildCalendarTimeEventTags(event: Partial<CalendarTimeEvent>): string[][] {
|
||||
const tags: string[][] = []
|
||||
|
||||
if (event.dTag) tags.push(['d', event.dTag])
|
||||
if (event.title) tags.push(['title', event.title])
|
||||
if (event.summary) tags.push(['summary', event.summary])
|
||||
if (event.image) tags.push(['image', event.image])
|
||||
if (event.start != null) tags.push(['start', String(event.start)])
|
||||
if (event.end != null) tags.push(['end', String(event.end)])
|
||||
if (event.startTzid) tags.push(['start_tzid', event.startTzid])
|
||||
if (event.endTzid) tags.push(['end_tzid', event.endTzid])
|
||||
if (event.location) tags.push(['location', event.location])
|
||||
if (event.geohash) tags.push(['g', event.geohash])
|
||||
|
||||
for (const tag of event.hashtags ?? []) {
|
||||
tags.push(['t', tag])
|
||||
}
|
||||
|
||||
for (const p of event.participants ?? []) {
|
||||
const pTag = ['p', p.pubkey]
|
||||
if (p.relayUrl) pTag.push(p.relayUrl)
|
||||
else if (p.role) pTag.push('')
|
||||
if (p.role) pTag.push(p.role)
|
||||
tags.push(pTag)
|
||||
}
|
||||
|
||||
for (const r of event.references ?? []) {
|
||||
tags.push(['r', r])
|
||||
}
|
||||
|
||||
return tags
|
||||
}
|
||||
42
src/modules/activities/types/ticket.ts
Normal file
42
src/modules/activities/types/ticket.ts
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
/**
|
||||
* Database-backed ticket types (via LNbits events extension)
|
||||
*/
|
||||
|
||||
export interface ActivityTicket {
|
||||
id: string
|
||||
wallet: string
|
||||
/** Reference to the activity (LNbits event ID) */
|
||||
activityId: string
|
||||
/** Ticket holder name */
|
||||
name: string | null
|
||||
/** Ticket holder email */
|
||||
email: string | null
|
||||
/** Nostr pubkey or LNbits user ID */
|
||||
userId: string | null
|
||||
/** Whether ticket has been scanned/registered at the door */
|
||||
registered: boolean
|
||||
/** Whether payment has been confirmed */
|
||||
paid: boolean
|
||||
/** Ticket creation timestamp */
|
||||
time: string
|
||||
/** Registration/scan timestamp */
|
||||
regTimestamp: string
|
||||
}
|
||||
|
||||
export type TicketStatus = 'pending' | 'paid' | 'registered' | 'cancelled'
|
||||
|
||||
export interface TicketPurchaseRequest {
|
||||
activityId: string
|
||||
userId: string
|
||||
accessToken: string
|
||||
}
|
||||
|
||||
export interface TicketPurchaseInvoice {
|
||||
paymentHash: string
|
||||
paymentRequest: string
|
||||
}
|
||||
|
||||
export interface TicketPaymentStatus {
|
||||
paid: boolean
|
||||
ticketId?: string
|
||||
}
|
||||
27
src/modules/activities/views/ActivitiesCalendarPage.vue
Normal file
27
src/modules/activities/views/ActivitiesCalendarPage.vue
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useActivities } from '../composables/useActivities'
|
||||
import ActivityCalendarView from '../components/ActivityCalendarView.vue'
|
||||
import type { Activity } from '../types/activity'
|
||||
|
||||
const router = useRouter()
|
||||
const { allActivities, subscribe } = useActivities()
|
||||
|
||||
onMounted(() => {
|
||||
subscribe()
|
||||
})
|
||||
|
||||
function handleSelectActivity(activity: Activity) {
|
||||
router.push({ name: 'activity-detail', params: { id: activity.id } })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mx-auto px-4 py-6 max-w-lg">
|
||||
<ActivityCalendarView
|
||||
:activities="allActivities"
|
||||
@select-activity="handleSelectActivity"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
72
src/modules/activities/views/ActivitiesFavoritesPage.vue
Normal file
72
src/modules/activities/views/ActivitiesFavoritesPage.vue
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Heart } from 'lucide-vue-next'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { toast } from 'vue-sonner'
|
||||
import { useAuth } from '@/composables/useAuthService'
|
||||
import { useBookmarks } from '../composables/useBookmarks'
|
||||
import { useActivitiesStore } from '../stores/activities'
|
||||
import ActivityList from '../components/ActivityList.vue'
|
||||
import type { Activity } from '../types/activity'
|
||||
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
const { isAuthenticated } = useAuth()
|
||||
const { isBookmarkedByDTag, isLoaded } = useBookmarks()
|
||||
const store = useActivitiesStore()
|
||||
|
||||
const favoriteActivities = computed(() => {
|
||||
return store.activities.filter(a => isBookmarkedByDTag(a.id))
|
||||
})
|
||||
|
||||
function handleSelect(activity: Activity) {
|
||||
router.push({ name: 'activity-detail', params: { id: activity.id } })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!isAuthenticated.value) {
|
||||
toast.info(t('activities.favorites.loginPrompt'), {
|
||||
action: {
|
||||
label: t('activities.favorites.logIn'),
|
||||
onClick: () => router.push('/login'),
|
||||
},
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<h1 class="text-2xl font-bold text-foreground mb-4">{{ t('activities.favorites.title') }}</h1>
|
||||
|
||||
<!-- Not authenticated -->
|
||||
<div v-if="!isAuthenticated" class="flex flex-col items-center justify-center py-16 text-center">
|
||||
<Heart class="w-16 h-16 text-muted-foreground opacity-30 mb-4" />
|
||||
<p class="text-muted-foreground mb-3">{{ t('activities.favorites.loginPrompt') }}</p>
|
||||
<Button variant="outline" size="sm" @click="router.push('/login')">
|
||||
{{ t('activities.favorites.logIn') }}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-else-if="!isLoaded" class="flex flex-col items-center justify-center py-16">
|
||||
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
|
||||
</div>
|
||||
|
||||
<!-- Empty -->
|
||||
<div v-else-if="favoriteActivities.length === 0" class="flex flex-col items-center justify-center py-16 text-center">
|
||||
<Heart class="w-16 h-16 text-muted-foreground opacity-30 mb-4" />
|
||||
<p class="text-muted-foreground">{{ t('activities.favorites.empty') }}</p>
|
||||
<p class="text-sm text-muted-foreground/70 mt-1">{{ t('activities.favorites.emptyHint') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Favorites list -->
|
||||
<ActivityList
|
||||
v-else
|
||||
:activities="favoriteActivities"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
55
src/modules/activities/views/ActivitiesMapPage.vue
Normal file
55
src/modules/activities/views/ActivitiesMapPage.vue
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { Map } from 'lucide-vue-next'
|
||||
import { useActivities } from '../composables/useActivities'
|
||||
import ActivityMap from '../components/ActivityMap.vue'
|
||||
|
||||
const { allActivities, isLoading, subscribe } = useActivities()
|
||||
|
||||
function parseMapCenter(): { lat: number; lng: number } | undefined {
|
||||
const raw = import.meta.env.VITE_DEFAULT_MAP_CENTER
|
||||
if (!raw) return undefined
|
||||
const [lat, lng] = raw.split(',').map(Number)
|
||||
if (isNaN(lat) || isNaN(lng)) return undefined
|
||||
return { lat, lng }
|
||||
}
|
||||
|
||||
const mapCenter = parseMapCenter()
|
||||
|
||||
const geoActivities = computed(() =>
|
||||
allActivities.value.filter(a => a.coordinates)
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
subscribe()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col h-[calc(100vh-3.5rem)]">
|
||||
<!-- Loading overlay -->
|
||||
<div v-if="isLoading && geoActivities.length === 0" class="flex-1 flex items-center justify-center">
|
||||
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
|
||||
</div>
|
||||
|
||||
<!-- No geotagged activities -->
|
||||
<div v-else-if="!isLoading && geoActivities.length === 0" class="flex-1 flex flex-col items-center justify-center text-center px-4">
|
||||
<Map class="w-16 h-16 text-muted-foreground/30 mb-4" />
|
||||
<p class="text-muted-foreground">No geotagged activities found</p>
|
||||
<p class="text-sm text-muted-foreground/70 mt-1">Activities with location data will appear as markers on the map</p>
|
||||
</div>
|
||||
|
||||
<!-- Map -->
|
||||
<ActivityMap
|
||||
v-else
|
||||
:activities="geoActivities"
|
||||
:center="mapCenter"
|
||||
class="flex-1"
|
||||
/>
|
||||
|
||||
<!-- Activity count -->
|
||||
<div v-if="geoActivities.length > 0" class="px-4 py-2 text-xs text-muted-foreground border-t bg-background">
|
||||
{{ geoActivities.length }} activit{{ geoActivities.length === 1 ? 'y' : 'ies' }} on map
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
147
src/modules/activities/views/ActivitiesPage.vue
Normal file
147
src/modules/activities/views/ActivitiesPage.vue
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from '@/components/ui/collapsible'
|
||||
import { RefreshCw, SlidersHorizontal, ChevronDown, Plus } from 'lucide-vue-next'
|
||||
import { useAuth } from '@/composables/useAuthService'
|
||||
import { useActivities } from '../composables/useActivities'
|
||||
import CreateActivityDialog from '../components/CreateActivityDialog.vue'
|
||||
import ActivitySearchOverlay from '../components/ActivitySearchOverlay.vue'
|
||||
import TemporalFilterBar from '../components/TemporalFilterBar.vue'
|
||||
import CategoryFilterBar from '../components/CategoryFilterBar.vue'
|
||||
import DatePickerStrip from '../components/DatePickerStrip.vue'
|
||||
import ActivityList from '../components/ActivityList.vue'
|
||||
import type { Activity } from '../types/activity'
|
||||
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
const { isAuthenticated } = useAuth()
|
||||
|
||||
const showCreateDialog = ref(false)
|
||||
|
||||
const {
|
||||
activities,
|
||||
isLoading,
|
||||
error,
|
||||
temporal,
|
||||
selectedCategories,
|
||||
hasActiveFilters,
|
||||
selectedDate,
|
||||
selectDate,
|
||||
setTemporal,
|
||||
toggleCategory,
|
||||
clearCategories,
|
||||
resetFilters,
|
||||
subscribe,
|
||||
refresh,
|
||||
} = useActivities()
|
||||
|
||||
const filtersOpen = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
subscribe()
|
||||
})
|
||||
|
||||
function handleSelectActivity(activity: Activity) {
|
||||
router.push({ name: 'activity-detail', params: { id: activity.id } })
|
||||
}
|
||||
|
||||
function handleRefresh() {
|
||||
refresh()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mx-auto py-6 px-4">
|
||||
<!-- Page header -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold text-foreground">
|
||||
{{ t('activities.title') }}
|
||||
</h1>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button
|
||||
v-if="isAuthenticated"
|
||||
size="sm"
|
||||
@click="showCreateDialog = true"
|
||||
>
|
||||
<Plus class="w-4 h-4 mr-1.5" />
|
||||
<span class="hidden sm:inline">{{ t('activities.createNew') }}</span>
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" class="h-8 w-8" @click="handleRefresh" :disabled="isLoading">
|
||||
<RefreshCw class="w-4 h-4" :class="{ 'animate-spin': isLoading }" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search with dropdown overlay -->
|
||||
<div class="mb-4">
|
||||
<ActivitySearchOverlay
|
||||
:activities="activities"
|
||||
@select="handleSelectActivity"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Date picker strip (p'a semana style) -->
|
||||
<div class="mb-4">
|
||||
<DatePickerStrip :selected-date="selectedDate" @select="selectDate" />
|
||||
</div>
|
||||
|
||||
<!-- Temporal filter pills -->
|
||||
<div class="mb-4">
|
||||
<TemporalFilterBar :model-value="temporal" @update:model-value="setTemporal" />
|
||||
</div>
|
||||
|
||||
<!-- Category filters (collapsible) -->
|
||||
<Collapsible v-model:open="filtersOpen" class="mb-6">
|
||||
<CollapsibleTrigger as-child>
|
||||
<Button variant="ghost" size="sm" class="gap-1.5 text-muted-foreground">
|
||||
<SlidersHorizontal class="w-4 h-4" />
|
||||
Categories
|
||||
<span v-if="selectedCategories.length > 0" class="text-xs bg-primary text-primary-foreground rounded-full px-1.5">
|
||||
{{ selectedCategories.length }}
|
||||
</span>
|
||||
<ChevronDown class="w-3.5 h-3.5 transition-transform" :class="{ 'rotate-180': filtersOpen }" />
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent class="mt-2">
|
||||
<CategoryFilterBar
|
||||
:selected="selectedCategories"
|
||||
@toggle="toggleCategory"
|
||||
@clear="clearCategories"
|
||||
/>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
|
||||
<!-- Active filters indicator -->
|
||||
<div v-if="hasActiveFilters" class="flex items-center gap-2 mb-4">
|
||||
<span class="text-xs text-muted-foreground">Filters active</span>
|
||||
<Button variant="ghost" size="sm" class="h-6 px-2 text-xs" @click="resetFilters">
|
||||
Clear all
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Error state -->
|
||||
<div v-if="error" class="mb-4 p-4 bg-destructive/10 text-destructive rounded-lg text-sm">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<!-- Activity feed -->
|
||||
<ActivityList
|
||||
:activities="activities"
|
||||
:is-loading="isLoading"
|
||||
@select="handleSelectActivity"
|
||||
/>
|
||||
|
||||
<!-- Create Activity Dialog -->
|
||||
<CreateActivityDialog
|
||||
v-model:is-open="showCreateDialog"
|
||||
@created="handleRefresh"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
166
src/modules/activities/views/ActivityDetailPage.vue
Normal file
166
src/modules/activities/views/ActivityDetailPage.vue
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { format } from 'date-fns'
|
||||
import { useDateLocale } from '../composables/useDateLocale'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import {
|
||||
Calendar, MapPin, ArrowLeft,
|
||||
} from 'lucide-vue-next'
|
||||
import { useActivityDetail } from '../composables/useActivityDetail'
|
||||
import BookmarkButton from '../components/BookmarkButton.vue'
|
||||
import RSVPButton from '../components/RSVPButton.vue'
|
||||
import OrganizerCard from '../components/OrganizerCard.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
|
||||
const activityId = route.params.id as string
|
||||
const { activity, isLoading, error, reload } = useActivityDetail(activityId)
|
||||
const { dateLocale } = useDateLocale()
|
||||
|
||||
const dateDisplay = computed(() => {
|
||||
if (!activity.value) return ''
|
||||
const a = activity.value
|
||||
const opts = { locale: dateLocale.value }
|
||||
if (a.type === 'date') {
|
||||
const start = format(a.startDate, 'EEEE, MMMM d, yyyy', opts)
|
||||
if (a.endDate) {
|
||||
return `${start} — ${format(a.endDate, 'EEEE, MMMM d, yyyy', opts)}`
|
||||
}
|
||||
return start
|
||||
}
|
||||
const start = format(a.startDate, 'EEEE, MMMM d, yyyy \u2022 HH:mm', opts)
|
||||
if (a.endDate) {
|
||||
return `${start} — ${format(a.endDate, 'HH:mm', opts)}`
|
||||
}
|
||||
return start
|
||||
})
|
||||
|
||||
const categoryLabel = computed(() => {
|
||||
if (!activity.value?.category) return null
|
||||
return t(`activities.categories.${activity.value.category}`, activity.value.category)
|
||||
})
|
||||
|
||||
function goBack() {
|
||||
router.push({ name: 'activities' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mx-auto py-6 px-4 max-w-3xl">
|
||||
<!-- Top bar -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<Button variant="ghost" size="sm" class="gap-1.5" @click="goBack">
|
||||
<ArrowLeft class="w-4 h-4" />
|
||||
Back
|
||||
</Button>
|
||||
<BookmarkButton
|
||||
v-if="activity"
|
||||
:pubkey="activity.organizer.pubkey"
|
||||
:d-tag="activity.id"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="isLoading" class="space-y-4">
|
||||
<div class="aspect-[16/9] bg-muted rounded-lg animate-pulse" />
|
||||
<div class="h-8 bg-muted rounded w-3/4 animate-pulse" />
|
||||
<div class="h-4 bg-muted rounded w-1/2 animate-pulse" />
|
||||
<div class="h-32 bg-muted rounded animate-pulse" />
|
||||
</div>
|
||||
|
||||
<!-- Error -->
|
||||
<div v-else-if="error" class="text-center py-16">
|
||||
<h2 class="text-xl font-semibold text-foreground mb-2">Activity not found</h2>
|
||||
<p class="text-muted-foreground mb-4">{{ error }}</p>
|
||||
<Button variant="outline" @click="reload">Retry</Button>
|
||||
</div>
|
||||
|
||||
<!-- Detail content -->
|
||||
<div v-else-if="activity" class="space-y-6">
|
||||
<!-- Hero image -->
|
||||
<div v-if="activity.image" class="rounded-lg overflow-hidden">
|
||||
<img
|
||||
:src="activity.image"
|
||||
:alt="activity.title"
|
||||
class="w-full aspect-[16/9] object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Title + Category -->
|
||||
<div>
|
||||
<div class="flex items-start gap-2 mb-2">
|
||||
<Badge v-if="categoryLabel" variant="secondary" class="shrink-0 mt-1">
|
||||
{{ categoryLabel }}
|
||||
</Badge>
|
||||
<div v-for="tag in activity.tags.slice(1)" :key="tag">
|
||||
<Badge variant="outline" class="text-xs">{{ tag }}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-2xl sm:text-3xl font-bold text-foreground">
|
||||
{{ activity.title }}
|
||||
</h1>
|
||||
<p v-if="activity.summary" class="text-muted-foreground mt-2">
|
||||
{{ activity.summary }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<!-- Info section -->
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<!-- When -->
|
||||
<div class="bg-muted/50 rounded-lg p-4 space-y-1">
|
||||
<div class="flex items-center gap-2 text-sm font-medium text-foreground">
|
||||
<Calendar class="w-4 h-4" />
|
||||
{{ t('activities.detail.when') }}
|
||||
</div>
|
||||
<p class="text-sm text-muted-foreground">{{ dateDisplay }}</p>
|
||||
<p v-if="activity.timezone" class="text-xs text-muted-foreground/70">
|
||||
{{ activity.timezone }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Where -->
|
||||
<div v-if="activity.location" class="bg-muted/50 rounded-lg p-4 space-y-1">
|
||||
<div class="flex items-center gap-2 text-sm font-medium text-foreground">
|
||||
<MapPin class="w-4 h-4" />
|
||||
{{ t('activities.detail.location') }}
|
||||
</div>
|
||||
<p class="text-sm text-muted-foreground">{{ activity.location }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RSVP -->
|
||||
<RSVPButton
|
||||
:pubkey="activity.organizer.pubkey"
|
||||
:d-tag="activity.id"
|
||||
/>
|
||||
|
||||
<!-- Organizer -->
|
||||
<div class="bg-muted/50 rounded-lg p-4">
|
||||
<p class="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">
|
||||
{{ t('activities.detail.organizer') }}
|
||||
</p>
|
||||
<OrganizerCard :pubkey="activity.organizer.pubkey" />
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<!-- Description -->
|
||||
<div class="prose prose-sm max-w-none text-foreground">
|
||||
<p class="whitespace-pre-wrap">{{ activity.description }}</p>
|
||||
</div>
|
||||
|
||||
<!-- External references -->
|
||||
<div v-if="activity.tags.length > 0" class="space-y-2">
|
||||
<!-- References would go here in future phases -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
10
src/modules/activities/views/MyTicketsPage.vue
Normal file
10
src/modules/activities/views/MyTicketsPage.vue
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
// Phase 3 will implement the full tickets view
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<h1 class="text-2xl font-bold text-foreground">My Tickets</h1>
|
||||
<p class="text-muted-foreground mt-2">Your purchased tickets will appear here</p>
|
||||
</div>
|
||||
</template>
|
||||
113
vite.activities.config.ts
Normal file
113
vite.activities.config.ts
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
import { fileURLToPath, URL } from 'node:url'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
import { defineConfig, type Plugin } from 'vite'
|
||||
import { VitePWA } from 'vite-plugin-pwa'
|
||||
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'
|
||||
import { visualizer } from 'rollup-plugin-visualizer'
|
||||
|
||||
/**
|
||||
* Plugin to rewrite dev server requests to activities.html
|
||||
* (SPA fallback for the standalone activities app entry point)
|
||||
*/
|
||||
function activitiesHtmlPlugin(): Plugin {
|
||||
return {
|
||||
name: 'activities-html-rewrite',
|
||||
configureServer(server) {
|
||||
server.middlewares.use((req, _res, next) => {
|
||||
// Rewrite all non-asset requests to activities.html
|
||||
if (
|
||||
req.url &&
|
||||
!req.url.startsWith('/@') &&
|
||||
!req.url.startsWith('/src/') &&
|
||||
!req.url.startsWith('/node_modules/') &&
|
||||
!req.url.includes('.') // skip files with extensions
|
||||
) {
|
||||
req.url = '/activities.html'
|
||||
}
|
||||
next()
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Vite config for the standalone Sortir activities app.
|
||||
* Deployed to sortir.ariege.io
|
||||
*/
|
||||
export default defineConfig(({ mode }) => ({
|
||||
plugins: [
|
||||
activitiesHtmlPlugin(),
|
||||
vue(),
|
||||
tailwindcss(),
|
||||
VitePWA({
|
||||
registerType: 'autoUpdate',
|
||||
devOptions: {
|
||||
enabled: true,
|
||||
},
|
||||
workbox: {
|
||||
globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
|
||||
},
|
||||
includeAssets: [
|
||||
'favicon.ico',
|
||||
'apple-touch-icon.png',
|
||||
'mask-icon.svg',
|
||||
'icon-192.png',
|
||||
'icon-512.png',
|
||||
'icon-maskable-192.png',
|
||||
'icon-maskable-512.png',
|
||||
],
|
||||
manifest: {
|
||||
name: 'Sortir — Activités & Événements',
|
||||
short_name: 'Sortir',
|
||||
description: 'Découvrez les activités et événements près de chez vous',
|
||||
theme_color: '#1f2937',
|
||||
background_color: '#ffffff',
|
||||
display: 'standalone',
|
||||
orientation: 'portrait-primary',
|
||||
start_url: '/',
|
||||
scope: '/',
|
||||
id: 'sortir-activities',
|
||||
categories: ['social', 'entertainment', 'lifestyle'],
|
||||
lang: 'fr',
|
||||
icons: [
|
||||
{ src: '/icon-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
|
||||
{ src: '/icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
|
||||
{ src: '/icon-maskable-192.png', sizes: '192x192', type: 'image/png', purpose: 'maskable' },
|
||||
{ src: '/icon-maskable-512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
|
||||
],
|
||||
},
|
||||
}),
|
||||
ViteImageOptimizer({
|
||||
jpg: { quality: 80 },
|
||||
png: { quality: 80 },
|
||||
webp: { lossless: true },
|
||||
}),
|
||||
mode === 'analyze' &&
|
||||
visualizer({
|
||||
open: true,
|
||||
filename: 'dist-activities/stats.html',
|
||||
gzipSize: true,
|
||||
brotliSize: true,
|
||||
}),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
},
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist-activities',
|
||||
rollupOptions: {
|
||||
input: 'activities.html',
|
||||
output: {
|
||||
manualChunks: {
|
||||
'vue-vendor': ['vue', 'vue-router', 'pinia'],
|
||||
'ui-vendor': ['radix-vue', '@vueuse/core'],
|
||||
'shadcn': ['class-variance-authority', 'clsx', 'tailwind-merge'],
|
||||
},
|
||||
},
|
||||
},
|
||||
chunkSizeWarningLimit: 1000,
|
||||
},
|
||||
}))
|
||||
Loading…
Add table
Add a link
Reference in a new issue