Compare commits
No commits in common. "demo-newui" and "main" have entirely different histories.
demo-newui
...
main
59 changed files with 961 additions and 7478 deletions
8
package-lock.json
generated
8
package-lock.json
generated
|
|
@ -25,7 +25,7 @@
|
|||
"qr-scanner": "^1.4.2",
|
||||
"qrcode": "^1.5.4",
|
||||
"radix-vue": "^1.9.13",
|
||||
"reka-ui": "^2.7.0",
|
||||
"reka-ui": "^2.5.0",
|
||||
"tailwind-merge": "^2.6.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"unique-names-generator": "^4.7.1",
|
||||
|
|
@ -12172,9 +12172,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/reka-ui": {
|
||||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.7.0.tgz",
|
||||
"integrity": "sha512-m+XmxQN2xtFzBP3OAdIafKq7C8OETo2fqfxcIIxYmNN2Ch3r5oAf6yEYCIJg5tL/yJU2mHqF70dCCekUkrAnXA==",
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.5.0.tgz",
|
||||
"integrity": "sha512-81aMAmJeVCy2k0E6x7n1kypDY6aM1ldLis5+zcdV1/JtoAlSDck5OBsyLRJU9CfgbrQp1ImnRnBSmC4fZ2fkZQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
"qr-scanner": "^1.4.2",
|
||||
"qrcode": "^1.5.4",
|
||||
"radix-vue": "^1.9.13",
|
||||
"reka-ui": "^2.7.0",
|
||||
"reka-ui": "^2.5.0",
|
||||
"tailwind-merge": "^2.6.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"unique-names-generator": "^4.7.1",
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 213 KiB After Width: | Height: | Size: 313 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB After Width: | Height: | Size: 151 KiB |
30
src/App.vue
30
src/App.vue
|
|
@ -1,7 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref, computed, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import AppLayout from '@/components/layout/AppLayout.vue'
|
||||
import Navbar from '@/components/layout/Navbar.vue'
|
||||
import Footer from '@/components/layout/Footer.vue'
|
||||
import LoginDialog from '@/components/auth/LoginDialog.vue'
|
||||
import { Toaster } from '@/components/ui/sonner'
|
||||
import 'vue-sonner/style.css'
|
||||
|
|
@ -19,8 +20,10 @@ useTheme()
|
|||
// Initialize preloader
|
||||
const marketPreloader = useMarketPreloader()
|
||||
|
||||
// Show layout on all pages except login
|
||||
const showLayout = computed(() => {
|
||||
// Relay hub initialization is now handled by the base module
|
||||
|
||||
// Hide navbar on login page
|
||||
const showNavbar = computed(() => {
|
||||
return route.path !== '/login'
|
||||
})
|
||||
|
||||
|
|
@ -59,14 +62,21 @@ watch(() => auth.isAuthenticated.value, async (isAuthenticated) => {
|
|||
|
||||
<template>
|
||||
<div class="min-h-screen bg-background font-sans antialiased">
|
||||
<!-- Sidebar layout for authenticated pages -->
|
||||
<AppLayout v-if="showLayout">
|
||||
<router-view />
|
||||
</AppLayout>
|
||||
<div class="relative flex min-h-screen flex-col"
|
||||
style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)">
|
||||
<header
|
||||
v-if="showNavbar"
|
||||
class="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<nav class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 flex h-14 lg:h-16 xl:h-20 items-center justify-between">
|
||||
<Navbar />
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Login page without sidebar -->
|
||||
<div v-else class="min-h-screen">
|
||||
<router-view />
|
||||
<main class="flex-1">
|
||||
<router-view />
|
||||
</main>
|
||||
|
||||
<Footer v-if="showNavbar" />
|
||||
</div>
|
||||
|
||||
<!-- Toast notifications -->
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ export async function createAppInstance() {
|
|||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('./pages/LoginDemo.vue'),
|
||||
component: () => import('./pages/Login.vue'),
|
||||
meta: { requiresAuth: false }
|
||||
},
|
||||
// Pre-register module routes
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 324 KiB After Width: | Height: | Size: 1.4 MiB |
|
|
@ -1,38 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import AppSidebar from './AppSidebar.vue'
|
||||
import AppTopBar from './AppTopBar.vue'
|
||||
import MobileDrawer from './MobileDrawer.vue'
|
||||
|
||||
const sidebarOpen = ref(false)
|
||||
|
||||
const openSidebar = () => {
|
||||
sidebarOpen.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-background">
|
||||
<!-- Mobile Drawer -->
|
||||
<MobileDrawer v-model:open="sidebarOpen" />
|
||||
|
||||
<!-- Desktop Sidebar (fixed left) -->
|
||||
<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
|
||||
<AppSidebar />
|
||||
</div>
|
||||
|
||||
<!-- Main content area (offset on desktop) -->
|
||||
<div class="lg:pl-72">
|
||||
<!-- Top Bar -->
|
||||
<AppTopBar @open-sidebar="openSidebar" />
|
||||
|
||||
<!-- Main Content -->
|
||||
<main
|
||||
class="flex-1"
|
||||
style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)"
|
||||
>
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,149 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useTheme } from '@/components/theme-provider'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import {
|
||||
Home,
|
||||
Calendar,
|
||||
ShoppingBag,
|
||||
MessageSquare,
|
||||
// Settings, // TODO: Uncomment when Settings page is implemented
|
||||
Sun,
|
||||
Moon
|
||||
} from 'lucide-vue-next'
|
||||
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
|
||||
import { useModularNavigation } from '@/composables/useModularNavigation'
|
||||
|
||||
const route = useRoute()
|
||||
const { t } = useI18n()
|
||||
const { theme, setTheme } = useTheme()
|
||||
const { navigation } = useModularNavigation()
|
||||
|
||||
// Map navigation items to icons
|
||||
const navIcons: Record<string, any> = {
|
||||
'/': Home,
|
||||
'/events': Calendar,
|
||||
'/market': ShoppingBag,
|
||||
'/chat': MessageSquare,
|
||||
}
|
||||
|
||||
const toggleTheme = () => {
|
||||
setTheme(theme.value === 'dark' ? 'light' : 'dark')
|
||||
}
|
||||
|
||||
// Check if route is active
|
||||
const isActive = (href: string) => {
|
||||
if (href === '/') {
|
||||
return route.path === '/'
|
||||
}
|
||||
return route.path.startsWith(href)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-border bg-background px-6 pb-4">
|
||||
<!-- Logo -->
|
||||
<div class="flex h-16 shrink-0 items-center">
|
||||
<router-link to="/" class="flex items-center gap-2">
|
||||
<img
|
||||
src="@/assets/logo.png"
|
||||
alt="Logo"
|
||||
class="h-8 w-8"
|
||||
/>
|
||||
<span class="font-semibold text-foreground">{{ t('nav.title') }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="flex flex-1 flex-col">
|
||||
<ul role="list" class="flex flex-1 flex-col gap-y-7">
|
||||
<!-- Primary Navigation -->
|
||||
<li>
|
||||
<ul role="list" class="-mx-2 space-y-1">
|
||||
<li v-for="item in navigation" :key="item.href">
|
||||
<router-link
|
||||
:to="item.href"
|
||||
:class="[
|
||||
isActive(item.href)
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
|
||||
'group flex gap-x-3 rounded-md p-2 text-sm font-semibold transition-colors'
|
||||
]"
|
||||
>
|
||||
<component
|
||||
:is="navIcons[item.href] || Home"
|
||||
:class="[
|
||||
isActive(item.href)
|
||||
? 'text-accent-foreground'
|
||||
: 'text-muted-foreground group-hover:text-accent-foreground',
|
||||
'h-5 w-5 shrink-0'
|
||||
]"
|
||||
/>
|
||||
{{ item.name }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!-- Secondary Section (placeholder for future use) -->
|
||||
<li>
|
||||
<div class="text-xs font-semibold text-muted-foreground">
|
||||
<!-- Future: Your stalls, subscriptions, etc. -->
|
||||
</div>
|
||||
<ul role="list" class="-mx-2 mt-2 space-y-1">
|
||||
<!-- Empty for now -->
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!-- Footer: Settings & Preferences -->
|
||||
<li class="mt-auto space-y-2">
|
||||
<Separator />
|
||||
|
||||
<!-- Theme & Language -->
|
||||
<div class="flex items-center justify-between px-2 py-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
@click="toggleTheme"
|
||||
class="h-8 w-8"
|
||||
>
|
||||
<Sun v-if="theme === 'dark'" class="h-4 w-4" />
|
||||
<Moon v-else class="h-4 w-4" />
|
||||
</Button>
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
|
||||
<!-- TODO: Review implementing Settings page in the future
|
||||
<router-link
|
||||
to="/settings"
|
||||
:class="[
|
||||
isActive('/settings')
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
|
||||
'group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold transition-colors'
|
||||
]"
|
||||
>
|
||||
<Settings class="h-5 w-5 shrink-0" />
|
||||
Settings
|
||||
</router-link>
|
||||
-->
|
||||
|
||||
<!-- LNbits Attribution -->
|
||||
<Separator class="my-2" />
|
||||
<div class="text-center">
|
||||
<a
|
||||
href="https://lnbits.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
Powered by ⚡LNbits
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,242 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import {
|
||||
Menu,
|
||||
Bell,
|
||||
ShoppingCart,
|
||||
User,
|
||||
LogOut,
|
||||
Wallet,
|
||||
Ticket,
|
||||
Store,
|
||||
Activity,
|
||||
} from 'lucide-vue-next'
|
||||
import CurrencyDisplay from '@/components/ui/CurrencyDisplay.vue'
|
||||
import LoginDialog from '@/components/auth/LoginDialog.vue'
|
||||
import ProfileDialog from '@/components/auth/ProfileDialog.vue'
|
||||
import { LogoutConfirmDialog } from '@/components/ui/LogoutConfirmDialog'
|
||||
import { auth } from '@/composables/useAuthService'
|
||||
import { useModularNavigation } from '@/composables/useModularNavigation'
|
||||
import { useMarketStore } from '@/modules/market/stores/market'
|
||||
import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||
import appConfig from '@/app.config'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'openSidebar'): void
|
||||
}>()
|
||||
|
||||
const router = useRouter()
|
||||
const { userMenuItems } = useModularNavigation()
|
||||
const marketStore = useMarketStore()
|
||||
|
||||
const showLoginDialog = ref(false)
|
||||
const showProfileDialog = ref(false)
|
||||
const showLogoutConfirm = ref(false)
|
||||
|
||||
// Get PaymentService for wallet balance
|
||||
const paymentService = tryInjectService(SERVICE_TOKENS.PAYMENT_SERVICE) as any
|
||||
|
||||
// Get ChatService for notifications
|
||||
const chatService = tryInjectService(SERVICE_TOKENS.CHAT_SERVICE) as any
|
||||
|
||||
// Wallet balance
|
||||
const totalBalance = computed(() => {
|
||||
return paymentService?.totalBalance || 0
|
||||
})
|
||||
|
||||
// Combined notifications (chat unread for now)
|
||||
const totalNotifications = computed(() => {
|
||||
return chatService?.totalUnreadCount?.value || 0
|
||||
})
|
||||
|
||||
// Cart item count
|
||||
const cartItemCount = computed(() => {
|
||||
return marketStore.totalCartItems
|
||||
})
|
||||
|
||||
// Check if market module is enabled
|
||||
const isMarketEnabled = computed(() => {
|
||||
return appConfig.modules.market?.enabled ?? false
|
||||
})
|
||||
|
||||
const openLoginDialog = () => {
|
||||
showLoginDialog.value = true
|
||||
}
|
||||
|
||||
const openProfileDialog = () => {
|
||||
showProfileDialog.value = true
|
||||
}
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
auth.logout()
|
||||
router.push('/login')
|
||||
} catch (error) {
|
||||
console.error('Logout failed:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const navigateToNotifications = () => {
|
||||
// For now, navigate to chat since that's our notification source
|
||||
router.push('/chat')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="sticky top-0 z-40 flex h-14 shrink-0 items-center gap-x-4 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-4 sm:gap-x-6 sm:px-6 lg:px-8"
|
||||
>
|
||||
<!-- Mobile menu button -->
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="-m-2.5 p-2.5 lg:hidden"
|
||||
@click="emit('openSidebar')"
|
||||
>
|
||||
<span class="sr-only">Open sidebar</span>
|
||||
<Menu class="h-5 w-5" />
|
||||
</Button>
|
||||
|
||||
<!-- Separator (mobile only) -->
|
||||
<div class="h-6 w-px bg-border lg:hidden" aria-hidden="true" />
|
||||
|
||||
<!-- Spacer / Future search area -->
|
||||
<div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
|
||||
<!-- Search placeholder for future -->
|
||||
<div class="flex-1">
|
||||
<!-- Future: Global search input -->
|
||||
</div>
|
||||
|
||||
<!-- Right side actions -->
|
||||
<div class="flex items-center gap-x-4 lg:gap-x-6">
|
||||
<!-- Notifications (combined) -->
|
||||
<Button
|
||||
v-if="auth.isAuthenticated.value"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="relative"
|
||||
@click="navigateToNotifications"
|
||||
>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<Bell class="h-5 w-5" />
|
||||
<Badge
|
||||
v-if="totalNotifications > 0"
|
||||
class="absolute -top-1 -right-1 h-4 w-4 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center rounded-full"
|
||||
>
|
||||
{{ totalNotifications > 99 ? '99+' : totalNotifications }}
|
||||
</Badge>
|
||||
</Button>
|
||||
|
||||
<!-- Cart (only when market is enabled) -->
|
||||
<router-link
|
||||
v-if="auth.isAuthenticated.value && isMarketEnabled"
|
||||
to="/cart"
|
||||
class="relative flex items-center justify-center"
|
||||
>
|
||||
<Button variant="ghost" size="icon" class="relative">
|
||||
<span class="sr-only">Shopping cart</span>
|
||||
<ShoppingCart class="h-5 w-5" />
|
||||
<Badge
|
||||
v-if="cartItemCount > 0"
|
||||
class="absolute -top-1 -right-1 h-4 w-4 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center rounded-full"
|
||||
>
|
||||
{{ cartItemCount > 99 ? '99+' : cartItemCount }}
|
||||
</Badge>
|
||||
</Button>
|
||||
</router-link>
|
||||
|
||||
<!-- Separator -->
|
||||
<div class="hidden lg:block lg:h-6 lg:w-px lg:bg-border" aria-hidden="true" />
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div v-if="auth.isAuthenticated.value">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" class="relative flex items-center gap-2">
|
||||
<User class="h-5 w-5" />
|
||||
<span class="hidden lg:block text-sm font-semibold truncate max-w-32">
|
||||
{{ auth.userDisplay.value?.name || 'Anonymous' }}
|
||||
</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" class="w-64">
|
||||
<!-- Wallet Balance -->
|
||||
<DropdownMenuItem @click="() => router.push('/wallet')" class="gap-2">
|
||||
<Wallet class="h-4 w-4 text-muted-foreground" />
|
||||
<CurrencyDisplay :balance-msat="totalBalance" />
|
||||
</DropdownMenuItem>
|
||||
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
<!-- Profile -->
|
||||
<DropdownMenuItem @click="openProfileDialog" class="gap-2">
|
||||
<User class="h-4 w-4" />
|
||||
Profile
|
||||
</DropdownMenuItem>
|
||||
|
||||
<!-- User menu items (from modules) -->
|
||||
<DropdownMenuItem
|
||||
v-for="item in userMenuItems"
|
||||
:key="item.href"
|
||||
@click="() => router.push(item.href)"
|
||||
class="gap-2"
|
||||
>
|
||||
<component
|
||||
:is="item.icon === 'Ticket' ? Ticket : item.icon === 'Store' ? Store : Activity"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
{{ item.name }}
|
||||
</DropdownMenuItem>
|
||||
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
<!-- Logout -->
|
||||
<DropdownMenuItem
|
||||
@click="showLogoutConfirm = true"
|
||||
class="gap-2 text-destructive"
|
||||
>
|
||||
<LogOut class="h-4 w-4" />
|
||||
Logout
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
<!-- Login button (when not authenticated) -->
|
||||
<Button
|
||||
v-else
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="openLoginDialog"
|
||||
class="gap-2"
|
||||
>
|
||||
<User class="h-4 w-4" />
|
||||
<span class="hidden sm:inline">Login</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Login Dialog -->
|
||||
<LoginDialog v-model:is-open="showLoginDialog" />
|
||||
|
||||
<!-- Profile Dialog -->
|
||||
<ProfileDialog v-model:is-open="showProfileDialog" />
|
||||
|
||||
<!-- Logout Confirm Dialog -->
|
||||
<LogoutConfirmDialog
|
||||
v-model:is-open="showLogoutConfirm"
|
||||
@confirm="handleLogout"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,172 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useTheme } from '@/components/theme-provider'
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from '@/components/ui/sheet'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import {
|
||||
Home,
|
||||
Calendar,
|
||||
ShoppingBag,
|
||||
MessageSquare,
|
||||
// Settings, // TODO: Uncomment when Settings page is implemented
|
||||
Sun,
|
||||
Moon,
|
||||
} from 'lucide-vue-next'
|
||||
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
|
||||
import { useModularNavigation } from '@/composables/useModularNavigation'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:open', value: boolean): void
|
||||
}>()
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
const { theme, setTheme } = useTheme()
|
||||
const { navigation } = useModularNavigation()
|
||||
|
||||
// Map navigation items to icons
|
||||
const navIcons: Record<string, any> = {
|
||||
'/': Home,
|
||||
'/events': Calendar,
|
||||
'/market': ShoppingBag,
|
||||
'/chat': MessageSquare,
|
||||
}
|
||||
|
||||
const isOpen = computed({
|
||||
get: () => props.open,
|
||||
set: (value) => emit('update:open', value),
|
||||
})
|
||||
|
||||
const toggleTheme = () => {
|
||||
setTheme(theme.value === 'dark' ? 'light' : 'dark')
|
||||
}
|
||||
|
||||
// Check if route is active
|
||||
const isActive = (href: string) => {
|
||||
if (href === '/') {
|
||||
return route.path === '/'
|
||||
}
|
||||
return route.path.startsWith(href)
|
||||
}
|
||||
|
||||
// Navigate and close drawer
|
||||
const navigateTo = (href: string) => {
|
||||
router.push(href)
|
||||
isOpen.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Sheet v-model:open="isOpen">
|
||||
<SheetContent side="left" class="w-72 p-0">
|
||||
<div class="flex h-full flex-col">
|
||||
<!-- Header with Logo -->
|
||||
<SheetHeader class="px-6 py-4 border-b border-border">
|
||||
<SheetTitle class="flex items-center gap-2">
|
||||
<img
|
||||
src="@/assets/logo.png"
|
||||
alt="Logo"
|
||||
class="h-8 w-8"
|
||||
/>
|
||||
<span class="font-semibold">{{ t('nav.title') }}</span>
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="flex-1 overflow-y-auto px-4 py-4">
|
||||
<ul role="list" class="space-y-1">
|
||||
<li v-for="item in navigation" :key="item.href">
|
||||
<button
|
||||
@click="navigateTo(item.href)"
|
||||
:class="[
|
||||
isActive(item.href)
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
|
||||
'group flex w-full gap-x-3 rounded-md p-2 text-sm font-semibold transition-colors'
|
||||
]"
|
||||
>
|
||||
<component
|
||||
:is="navIcons[item.href] || Home"
|
||||
:class="[
|
||||
isActive(item.href)
|
||||
? 'text-accent-foreground'
|
||||
: 'text-muted-foreground group-hover:text-accent-foreground',
|
||||
'h-5 w-5 shrink-0'
|
||||
]"
|
||||
/>
|
||||
{{ item.name }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Secondary Section Placeholder -->
|
||||
<div class="mt-8">
|
||||
<div class="text-xs font-semibold text-muted-foreground px-2">
|
||||
<!-- Future: Your stalls, subscriptions, etc. -->
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="border-t border-border px-4 py-4 space-y-2">
|
||||
<!-- Theme & Language -->
|
||||
<div class="flex items-center justify-between px-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
@click="toggleTheme"
|
||||
class="h-8 w-8"
|
||||
>
|
||||
<Sun v-if="theme === 'dark'" class="h-4 w-4" />
|
||||
<Moon v-else class="h-4 w-4" />
|
||||
</Button>
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
|
||||
<!-- TODO: Review implementing Settings page in the future
|
||||
<Separator />
|
||||
|
||||
<button
|
||||
@click="navigateTo('/settings')"
|
||||
:class="[
|
||||
isActive('/settings')
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
|
||||
'group flex w-full gap-x-3 rounded-md p-2 text-sm font-semibold transition-colors'
|
||||
]"
|
||||
>
|
||||
<Settings class="h-5 w-5 shrink-0" />
|
||||
Settings
|
||||
</button>
|
||||
-->
|
||||
|
||||
<!-- LNbits Attribution -->
|
||||
<Separator class="my-2" />
|
||||
<div class="text-center">
|
||||
<a
|
||||
href="https://lnbits.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
Powered by ⚡LNbits
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</template>
|
||||
|
|
@ -1,13 +1,3 @@
|
|||
<!--
|
||||
DEPRECATED: This file is kept for reference only and will be deleted.
|
||||
|
||||
The top navbar layout has been replaced with a sidebar layout.
|
||||
See the new layout components:
|
||||
- AppLayout.vue (main layout wrapper)
|
||||
- AppSidebar.vue (desktop sidebar)
|
||||
- AppTopBar.vue (top bar with notifications, cart, profile)
|
||||
- MobileDrawer.vue (mobile slide-out navigation)
|
||||
-->
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { DialogRootEmits, DialogRootProps } from "reka-ui"
|
||||
import { DialogRoot, useForwardPropsEmits } from "reka-ui"
|
||||
|
||||
const props = defineProps<DialogRootProps>()
|
||||
const emits = defineEmits<DialogRootEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</DialogRoot>
|
||||
</template>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { DialogCloseProps } from "reka-ui"
|
||||
import { DialogClose } from "reka-ui"
|
||||
|
||||
const props = defineProps<DialogCloseProps>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogClose v-bind="props">
|
||||
<slot />
|
||||
</DialogClose>
|
||||
</template>
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { DialogContentEmits, DialogContentProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import type { SheetVariants } from "."
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import { X } from "lucide-vue-next"
|
||||
import {
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
useForwardPropsEmits,
|
||||
} from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { sheetVariants } from "."
|
||||
|
||||
interface SheetContentProps extends DialogContentProps {
|
||||
class?: HTMLAttributes["class"]
|
||||
side?: SheetVariants["side"]
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const props = defineProps<SheetContentProps>()
|
||||
|
||||
const emits = defineEmits<DialogContentEmits>()
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class", "side")
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogPortal>
|
||||
<DialogOverlay
|
||||
class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
|
||||
/>
|
||||
<DialogContent
|
||||
:class="cn(sheetVariants({ side }), props.class)"
|
||||
v-bind="{ ...forwarded, ...$attrs }"
|
||||
>
|
||||
<slot />
|
||||
|
||||
<DialogClose
|
||||
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
|
||||
>
|
||||
<X class="w-4 h-4" />
|
||||
</DialogClose>
|
||||
</DialogContent>
|
||||
</DialogPortal>
|
||||
</template>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { DialogDescriptionProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import { DialogDescription } from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class")
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogDescription
|
||||
:class="cn('text-sm text-muted-foreground', props.class)"
|
||||
v-bind="delegatedProps"
|
||||
>
|
||||
<slot />
|
||||
</DialogDescription>
|
||||
</template>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{ class?: HTMLAttributes["class"] }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="
|
||||
cn(
|
||||
'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<{ class?: HTMLAttributes["class"] }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="
|
||||
cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
|
||||
"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { DialogTitleProps } from "reka-ui"
|
||||
import type { HTMLAttributes } from "vue"
|
||||
import { reactiveOmit } from "@vueuse/core"
|
||||
import { DialogTitle } from "reka-ui"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
|
||||
|
||||
const delegatedProps = reactiveOmit(props, "class")
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogTitle
|
||||
:class="cn('text-lg font-semibold text-foreground', props.class)"
|
||||
v-bind="delegatedProps"
|
||||
>
|
||||
<slot />
|
||||
</DialogTitle>
|
||||
</template>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { DialogTriggerProps } from "reka-ui"
|
||||
import { DialogTrigger } from "reka-ui"
|
||||
|
||||
const props = defineProps<DialogTriggerProps>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogTrigger v-bind="props">
|
||||
<slot />
|
||||
</DialogTrigger>
|
||||
</template>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import type { VariantProps } from "class-variance-authority"
|
||||
import { cva } from "class-variance-authority"
|
||||
|
||||
export { default as Sheet } from "./Sheet.vue"
|
||||
export { default as SheetClose } from "./SheetClose.vue"
|
||||
export { default as SheetContent } from "./SheetContent.vue"
|
||||
export { default as SheetDescription } from "./SheetDescription.vue"
|
||||
export { default as SheetFooter } from "./SheetFooter.vue"
|
||||
export { default as SheetHeader } from "./SheetHeader.vue"
|
||||
export { default as SheetTitle } from "./SheetTitle.vue"
|
||||
export { default as SheetTrigger } from "./SheetTrigger.vue"
|
||||
|
||||
export const sheetVariants = cva(
|
||||
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
||||
{
|
||||
variants: {
|
||||
side: {
|
||||
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
||||
bottom:
|
||||
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
||||
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
||||
right:
|
||||
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
side: "right",
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
export type SheetVariants = VariantProps<typeof sheetVariants>
|
||||
|
|
@ -79,13 +79,13 @@ export function useModularNavigation() {
|
|||
})
|
||||
}
|
||||
|
||||
// TODO: Review implementing Relay Hub Status page in the future
|
||||
// items.push({
|
||||
// name: 'Relay Hub Status',
|
||||
// href: '/relay-hub-status',
|
||||
// icon: 'Activity',
|
||||
// requiresAuth: true
|
||||
// })
|
||||
// Base module items (always available)
|
||||
items.push({
|
||||
name: 'Relay Hub Status',
|
||||
href: '/relay-hub-status',
|
||||
icon: 'Activity',
|
||||
requiresAuth: true
|
||||
})
|
||||
|
||||
return items
|
||||
})
|
||||
|
|
|
|||
|
|
@ -137,11 +137,6 @@ export const SERVICE_TOKENS = {
|
|||
PROFILE_SERVICE: Symbol('profileService'),
|
||||
REACTION_SERVICE: Symbol('reactionService'),
|
||||
|
||||
// Link aggregator services
|
||||
SUBMISSION_SERVICE: Symbol('submissionService'),
|
||||
LINK_PREVIEW_SERVICE: Symbol('linkPreviewService'),
|
||||
COMMUNITY_SERVICE: Symbol('communityService'),
|
||||
|
||||
// Nostr metadata services
|
||||
NOSTR_METADATA_SERVICE: Symbol('nostrMetadataService'),
|
||||
|
||||
|
|
|
|||
|
|
@ -158,7 +158,7 @@
|
|||
: 'bg-muted'
|
||||
]"
|
||||
>
|
||||
<ChatMessageContent :content="message.content" />
|
||||
<p class="text-sm">{{ message.content }}</p>
|
||||
<p class="text-xs opacity-70 mt-1">
|
||||
{{ formatTime(message.created_at) }}
|
||||
</p>
|
||||
|
|
@ -325,7 +325,7 @@
|
|||
: 'bg-muted'
|
||||
]"
|
||||
>
|
||||
<ChatMessageContent :content="message.content" />
|
||||
<p class="text-sm">{{ message.content }}</p>
|
||||
<p class="text-xs opacity-70 mt-1">
|
||||
{{ formatTime(message.created_at) }}
|
||||
</p>
|
||||
|
|
@ -376,7 +376,6 @@ import { Badge } from '@/components/ui/badge'
|
|||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
|
||||
import { useChat } from '../composables/useChat'
|
||||
import ChatMessageContent from './ChatMessageContent.vue'
|
||||
|
||||
import { useFuzzySearch } from '@/composables/useFuzzySearch'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,115 +0,0 @@
|
|||
<template>
|
||||
<!-- Order Message -->
|
||||
<div v-if="parsedOrder" class="min-w-[200px]">
|
||||
<div class="flex items-center gap-2 font-semibold text-sm mb-3">
|
||||
<ShoppingBag class="w-4 h-4" />
|
||||
<span>Order Placed</span>
|
||||
</div>
|
||||
|
||||
<div class="text-xs space-y-2">
|
||||
<!-- Items -->
|
||||
<div v-if="parsedOrder.items?.length" class="space-y-1">
|
||||
<div
|
||||
v-for="(item, index) in parsedOrder.items"
|
||||
:key="index"
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<span class="opacity-70">{{ item.quantity }}x</span>
|
||||
<span>Item</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="border-t border-current opacity-20 my-2" />
|
||||
|
||||
<!-- Shipping -->
|
||||
<div v-if="shippingLabel" class="flex items-center gap-2">
|
||||
<Truck class="w-3 h-3 opacity-70" />
|
||||
<span>{{ shippingLabel }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Order Reference -->
|
||||
<div class="opacity-60 text-[10px] font-mono mt-2">
|
||||
#{{ shortOrderId }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Regular Text Message -->
|
||||
<p v-else class="text-sm whitespace-pre-wrap break-words">{{ content }}</p>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { ShoppingBag, Truck } from 'lucide-vue-next'
|
||||
|
||||
interface OrderItem {
|
||||
product_id: string
|
||||
quantity: number
|
||||
}
|
||||
|
||||
interface OrderContact {
|
||||
name?: string
|
||||
email?: string
|
||||
}
|
||||
|
||||
interface ParsedOrder {
|
||||
type: number
|
||||
id: string
|
||||
items?: OrderItem[]
|
||||
contact?: OrderContact
|
||||
shipping_id?: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
content: string
|
||||
}>()
|
||||
|
||||
// Try to parse the content as an order message
|
||||
const parsedOrder = computed<ParsedOrder | null>(() => {
|
||||
try {
|
||||
// Check if content looks like JSON
|
||||
const trimmed = props.content.trim()
|
||||
if (!trimmed.startsWith('{') || !trimmed.endsWith('}')) {
|
||||
return null
|
||||
}
|
||||
|
||||
const parsed = JSON.parse(trimmed)
|
||||
|
||||
// Validate it's an order message (has type and id fields)
|
||||
if (typeof parsed.type === 'number' && typeof parsed.id === 'string' && parsed.id.startsWith('order_')) {
|
||||
return parsed as ParsedOrder
|
||||
}
|
||||
|
||||
return null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
// Format shipping label
|
||||
const shippingLabel = computed(() => {
|
||||
if (!parsedOrder.value?.shipping_id) return null
|
||||
|
||||
const id = parsedOrder.value.shipping_id
|
||||
// Extract zone name if it follows the pattern "zonename-hash"
|
||||
if (id.includes('-')) {
|
||||
const zoneName = id.split('-')[0]
|
||||
// Capitalize first letter
|
||||
return zoneName.charAt(0).toUpperCase() + zoneName.slice(1)
|
||||
}
|
||||
|
||||
return 'Standard'
|
||||
})
|
||||
|
||||
// Short order ID for display
|
||||
const shortOrderId = computed(() => {
|
||||
if (!parsedOrder.value?.id) return ''
|
||||
// Extract the unique part from "order_timestamp_randomstring"
|
||||
const parts = parsedOrder.value.id.split('_')
|
||||
if (parts.length >= 3) {
|
||||
return parts[2].slice(0, 8) // Just the random part
|
||||
}
|
||||
return parsedOrder.value.id.slice(-8)
|
||||
})
|
||||
</script>
|
||||
|
|
@ -702,8 +702,7 @@ export class ChatService extends BaseService {
|
|||
}
|
||||
}
|
||||
/**
|
||||
* Process a message event (incoming or outgoing)
|
||||
* Note: This is called for both directions from loadRecentMessagesForPeer
|
||||
* Process an incoming message event
|
||||
*/
|
||||
private async processIncomingMessage(event: any): Promise<void> {
|
||||
try {
|
||||
|
|
@ -716,29 +715,10 @@ export class ChatService extends BaseService {
|
|||
console.warn('Cannot process message: user not authenticated')
|
||||
return
|
||||
}
|
||||
|
||||
// Determine if this is an outgoing message (sent by us)
|
||||
const isOutgoing = event.pubkey === userPubkey
|
||||
|
||||
// For NIP-04 decryption, we need the OTHER party's pubkey
|
||||
// - For incoming messages: sender is the other party (event.pubkey)
|
||||
// - For outgoing messages: recipient is the other party (from p-tag)
|
||||
let otherPartyPubkey: string
|
||||
if (isOutgoing) {
|
||||
// Outgoing: get recipient from p-tag
|
||||
const pTag = event.tags.find((tag: string[]) => tag[0] === 'p')
|
||||
if (!pTag || !pTag[1]) {
|
||||
console.warn('Cannot process outgoing message: no recipient p-tag')
|
||||
return
|
||||
}
|
||||
otherPartyPubkey = pTag[1]
|
||||
} else {
|
||||
// Incoming: sender is the other party
|
||||
otherPartyPubkey = event.pubkey
|
||||
}
|
||||
|
||||
// Decrypt the message content using the other party's pubkey
|
||||
const decryptedContent = await nip04.decrypt(userPrivkey, otherPartyPubkey, event.content)
|
||||
// Get sender pubkey from event
|
||||
const senderPubkey = event.pubkey
|
||||
// Decrypt the message content
|
||||
const decryptedContent = await nip04.decrypt(userPrivkey, senderPubkey, event.content)
|
||||
// Check if this is a market-related message
|
||||
let isMarketMessage = false
|
||||
try {
|
||||
|
|
@ -784,13 +764,13 @@ export class ChatService extends BaseService {
|
|||
id: event.id,
|
||||
content: displayContent,
|
||||
created_at: event.created_at,
|
||||
sent: isOutgoing,
|
||||
pubkey: event.pubkey
|
||||
sent: false,
|
||||
pubkey: senderPubkey
|
||||
}
|
||||
// Ensure we have a peer record for the other party (the peer we're chatting with)
|
||||
this.addPeer(otherPartyPubkey)
|
||||
// Add the message to the peer's conversation
|
||||
this.addMessage(otherPartyPubkey, message)
|
||||
// Ensure we have a peer record for the sender
|
||||
this.addPeer(senderPubkey)
|
||||
// Add the message
|
||||
this.addMessage(senderPubkey, message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to process incoming message:', error)
|
||||
|
|
|
|||
|
|
@ -47,14 +47,10 @@
|
|||
<FormField v-slot="{ componentField }" name="currency">
|
||||
<FormItem>
|
||||
<FormLabel>Currency *</FormLabel>
|
||||
<Select
|
||||
:key="`currency-select-${availableCurrencies.length}`"
|
||||
:disabled="isCreating || isLoadingCurrencies"
|
||||
v-bind="componentField"
|
||||
>
|
||||
<Select :disabled="isCreating" v-bind="componentField">
|
||||
<FormControl>
|
||||
<SelectTrigger class="w-full">
|
||||
<SelectValue :placeholder="isLoadingCurrencies ? 'Loading...' : 'Select currency'" />
|
||||
<SelectValue placeholder="Select currency" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
|
|
@ -279,7 +275,6 @@ const toast = useToast()
|
|||
// Local state
|
||||
const isCreating = ref(false)
|
||||
const createError = ref<string | null>(null)
|
||||
const isLoadingCurrencies = ref(false)
|
||||
const availableCurrencies = ref<string[]>(['sat'])
|
||||
const availableZones = ref<Zone[]>([])
|
||||
const showNewZoneForm = ref(false)
|
||||
|
|
@ -336,27 +331,11 @@ const onSubmit = form.handleSubmit(async (values) => {
|
|||
|
||||
// Methods
|
||||
const loadAvailableCurrencies = async () => {
|
||||
isLoadingCurrencies.value = true
|
||||
try {
|
||||
const currencies = await nostrmarketAPI.getCurrencies()
|
||||
if (currencies.length > 0) {
|
||||
// Ensure 'sat' is always first in the list
|
||||
const satIndex = currencies.indexOf('sat')
|
||||
if (satIndex === -1) {
|
||||
// Add 'sat' at the beginning if not present
|
||||
availableCurrencies.value = ['sat', ...currencies]
|
||||
} else if (satIndex > 0) {
|
||||
// Move 'sat' to the beginning if present but not first
|
||||
const withoutSat = currencies.filter(c => c !== 'sat')
|
||||
availableCurrencies.value = ['sat', ...withoutSat]
|
||||
} else {
|
||||
availableCurrencies.value = currencies
|
||||
}
|
||||
}
|
||||
availableCurrencies.value = currencies
|
||||
} catch (error) {
|
||||
console.error('Failed to load currencies:', error)
|
||||
} finally {
|
||||
isLoadingCurrencies.value = false
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -77,6 +77,77 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Customer Actions -->
|
||||
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
||||
<h3 class="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
|
||||
<ShoppingCart class="w-5 h-5 text-primary" />
|
||||
Customer Actions
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<Button
|
||||
@click="navigateToMarket"
|
||||
variant="default"
|
||||
class="w-full justify-start"
|
||||
>
|
||||
<Store class="w-4 h-4 mr-2" />
|
||||
Browse Market
|
||||
</Button>
|
||||
<Button
|
||||
@click="navigateToOrders"
|
||||
variant="outline"
|
||||
class="w-full justify-start"
|
||||
>
|
||||
<Package class="w-4 h-4 mr-2" />
|
||||
View All Orders
|
||||
</Button>
|
||||
<Button
|
||||
@click="navigateToCart"
|
||||
variant="outline"
|
||||
class="w-full justify-start"
|
||||
>
|
||||
<ShoppingCart class="w-4 h-4 mr-2" />
|
||||
Shopping Cart
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Merchant Actions -->
|
||||
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
||||
<h3 class="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
|
||||
<Store class="w-5 h-5 text-green-500" />
|
||||
Merchant Actions
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<Button
|
||||
@click="navigateToStore"
|
||||
variant="default"
|
||||
class="w-full justify-start"
|
||||
>
|
||||
<Store class="w-4 h-4 mr-2" />
|
||||
Manage Store
|
||||
</Button>
|
||||
<Button
|
||||
@click="navigateToProducts"
|
||||
variant="outline"
|
||||
class="w-full justify-start"
|
||||
>
|
||||
<Package class="w-4 h-4 mr-2" />
|
||||
Manage Products
|
||||
</Button>
|
||||
<Button
|
||||
@click="navigateToOrders"
|
||||
variant="outline"
|
||||
class="w-full justify-start"
|
||||
>
|
||||
<Package class="w-4 h-4 mr-2" />
|
||||
View Orders
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity -->
|
||||
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
||||
<h3 class="text-lg font-semibold text-foreground mb-4">Recent Activity</h3>
|
||||
|
|
@ -145,12 +216,15 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAuth } from '@/composables/useAuthService'
|
||||
import { useMarket } from '../composables/useMarket'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
Package,
|
||||
Store,
|
||||
ShoppingCart,
|
||||
DollarSign,
|
||||
BarChart3,
|
||||
Clock
|
||||
|
|
@ -159,6 +233,7 @@ import type { OrderApiResponse, NostrmarketAPI } from '../services/nostrmarketAP
|
|||
import { injectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||
import type { PaymentService } from '@/core/services/PaymentService'
|
||||
|
||||
const router = useRouter()
|
||||
const auth = useAuth()
|
||||
const { isConnected } = useMarket()
|
||||
const nostrmarketAPI = injectService(SERVICE_TOKENS.NOSTRMARKET_API) as NostrmarketAPI
|
||||
|
|
@ -266,6 +341,12 @@ const getActivityVariant = (type: string) => {
|
|||
}
|
||||
}
|
||||
|
||||
const navigateToMarket = () => router.push('/market')
|
||||
const navigateToOrders = () => router.push('/market-dashboard?tab=orders')
|
||||
const navigateToCart = () => router.push('/cart')
|
||||
const navigateToStore = () => router.push('/market-dashboard?tab=store')
|
||||
const navigateToProducts = () => router.push('/market-dashboard?tab=store')
|
||||
|
||||
// Load orders when component mounts
|
||||
onMounted(() => {
|
||||
fetchOrders()
|
||||
|
|
|
|||
|
|
@ -2,522 +2,331 @@
|
|||
<div class="space-y-6">
|
||||
<!-- Header -->
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-foreground">Store Settings</h2>
|
||||
<p class="text-muted-foreground mt-1">Configure your store information</p>
|
||||
<h2 class="text-2xl font-bold text-foreground">Market Settings</h2>
|
||||
<p class="text-muted-foreground mt-1">Configure your store and market preferences</p>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="isLoading" class="flex justify-center py-12">
|
||||
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
||||
<!-- Settings Tabs -->
|
||||
<div class="border-b border-border">
|
||||
<nav class="flex space-x-8">
|
||||
<button
|
||||
v-for="tab in settingsTabs"
|
||||
:key="tab.id"
|
||||
@click="activeSettingsTab = tab.id"
|
||||
:class="[
|
||||
'py-2 px-1 border-b-2 font-medium text-sm transition-colors',
|
||||
activeSettingsTab === tab.id
|
||||
? 'border-primary text-primary'
|
||||
: 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground'
|
||||
]"
|
||||
>
|
||||
{{ tab.name }}
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- No Store State -->
|
||||
<div v-else-if="!currentStall" class="text-center py-12">
|
||||
<div class="w-16 h-16 bg-muted rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Store class="w-8 h-8 text-muted-foreground" />
|
||||
</div>
|
||||
<h3 class="text-lg font-medium text-foreground mb-2">No Store Found</h3>
|
||||
<p class="text-muted-foreground">
|
||||
Create a store first to manage its settings
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Store Settings Form -->
|
||||
<div v-else class="space-y-6">
|
||||
<!-- Store Information -->
|
||||
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
||||
<h3 class="text-lg font-semibold text-foreground mb-4">Store Information</h3>
|
||||
<form @submit="onSubmit" class="space-y-4">
|
||||
<FormField v-slot="{ componentField }" name="name">
|
||||
<FormItem>
|
||||
<FormLabel>Store Name *</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Enter store name"
|
||||
:disabled="isSaving"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="description">
|
||||
<FormItem>
|
||||
<FormLabel>Description</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder="Describe your store and what you sell"
|
||||
:disabled="isSaving"
|
||||
v-bind="componentField"
|
||||
rows="3"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
This description will be shown to customers browsing your store
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="imageUrl">
|
||||
<FormItem>
|
||||
<FormLabel>Store Image URL</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="https://example.com/store-image.jpg"
|
||||
:disabled="isSaving"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Optional image to represent your store
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Read-only Currency Field -->
|
||||
<div class="pt-4 border-t">
|
||||
<label class="block text-sm font-medium text-muted-foreground mb-1">Currency</label>
|
||||
<div class="text-foreground">{{ currentStall.currency }}</div>
|
||||
<p class="text-xs text-muted-foreground mt-1">Currency is set when the store is created and cannot be changed</p>
|
||||
<!-- Settings Content -->
|
||||
<div class="min-h-[500px]">
|
||||
<!-- Store Settings Tab -->
|
||||
<div v-if="activeSettingsTab === 'store'" class="space-y-6">
|
||||
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
||||
<h3 class="text-lg font-semibold text-foreground mb-4">Store Information</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-foreground mb-2">Store Name</label>
|
||||
<Input v-model="storeSettings.name" placeholder="Enter store name" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-foreground mb-2">Store Description</label>
|
||||
<Input v-model="storeSettings.description" placeholder="Enter store description" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-foreground mb-2">Contact Email</label>
|
||||
<Input v-model="storeSettings.contactEmail" type="email" placeholder="Enter contact email" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-foreground mb-2">Store Category</label>
|
||||
<select v-model="storeSettings.category" class="w-full px-3 py-2 border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring bg-background text-foreground">
|
||||
<option value="">Select category</option>
|
||||
<option value="electronics">Electronics</option>
|
||||
<option value="clothing">Clothing</option>
|
||||
<option value="books">Books</option>
|
||||
<option value="food">Food & Beverages</option>
|
||||
<option value="services">Services</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-4">
|
||||
<Button type="submit" :disabled="isSaving || !isFormValid">
|
||||
<span v-if="isSaving">Saving...</span>
|
||||
<span v-else>Save Changes</span>
|
||||
<div class="mt-6">
|
||||
<Button @click="saveStoreSettings" variant="default">
|
||||
Save Store Settings
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shipping Zones Section -->
|
||||
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-foreground">Shipping Zones</h3>
|
||||
<p class="text-sm text-muted-foreground">Configure where you ship and the associated costs</p>
|
||||
</div>
|
||||
<Button
|
||||
v-if="!showAddZoneForm"
|
||||
@click="showAddZoneForm = true"
|
||||
size="sm"
|
||||
:disabled="isZoneLoading"
|
||||
>
|
||||
<Plus class="w-4 h-4 mr-2" />
|
||||
Add Zone
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Add Zone Form -->
|
||||
<div v-if="showAddZoneForm" class="mb-6 p-4 bg-muted/50 rounded-lg border">
|
||||
<h4 class="font-medium text-foreground mb-4">{{ editingZone ? 'Edit Zone' : 'Add New Zone' }}</h4>
|
||||
<form @submit.prevent="saveZone" class="space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-foreground mb-1">Zone Name *</label>
|
||||
<Input
|
||||
v-model="zoneForm.name"
|
||||
placeholder="e.g., Domestic, International"
|
||||
:disabled="isZoneSaving"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-foreground mb-1">Shipping Cost *</label>
|
||||
<Input
|
||||
v-model.number="zoneForm.cost"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
placeholder="0"
|
||||
:disabled="isZoneSaving"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Payment Settings Tab -->
|
||||
<div v-else-if="activeSettingsTab === 'payment'" class="space-y-6">
|
||||
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
||||
<h3 class="text-lg font-semibold text-foreground mb-4">Payment Configuration</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-foreground mb-1">Countries/Regions</label>
|
||||
<Input
|
||||
v-model="zoneForm.countriesInput"
|
||||
placeholder="e.g., USA, Canada, Mexico (comma-separated)"
|
||||
:disabled="isZoneSaving"
|
||||
/>
|
||||
<p class="text-xs text-muted-foreground mt-1">Comma-separated list of countries or regions this zone covers</p>
|
||||
<label class="block text-sm font-medium text-foreground mb-2">Default Currency</label>
|
||||
<select v-model="paymentSettings.defaultCurrency" class="w-full px-3 py-2 border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring bg-background text-foreground">
|
||||
<option value="sat">Satoshi (sats)</option>
|
||||
<option value="btc">Bitcoin (BTC)</option>
|
||||
<option value="usd">US Dollar (USD)</option>
|
||||
<option value="eur">Euro (EUR)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<Button type="submit" :disabled="isZoneSaving || !isZoneFormValid" size="sm">
|
||||
<span v-if="isZoneSaving">Saving...</span>
|
||||
<span v-else>{{ editingZone ? 'Update Zone' : 'Add Zone' }}</span>
|
||||
</Button>
|
||||
<Button type="button" variant="outline" @click="cancelZoneForm" size="sm" :disabled="isZoneSaving">
|
||||
Cancel
|
||||
</Button>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-foreground mb-2">Invoice Expiry (minutes)</label>
|
||||
<Input v-model="paymentSettings.invoiceExpiry" type="number" min="5" max="1440" placeholder="60" />
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-foreground mb-2">Auto-generate Invoices</label>
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
v-model="paymentSettings.autoGenerateInvoices"
|
||||
type="checkbox"
|
||||
class="h-4 w-4 text-primary focus:ring-primary border-input rounded"
|
||||
/>
|
||||
<label class="ml-2 text-sm text-foreground">
|
||||
Automatically generate Lightning invoices for new orders
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<Button @click="savePaymentSettings" variant="default">
|
||||
Save Payment Settings
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zones List -->
|
||||
<div v-if="isZoneLoading" class="flex justify-center py-8">
|
||||
<div class="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="zones.length === 0 && !showAddZoneForm" class="text-center py-8 text-muted-foreground">
|
||||
<Truck class="w-12 h-12 mx-auto mb-3 opacity-50" />
|
||||
<p>No shipping zones configured</p>
|
||||
<p class="text-sm">Add a shipping zone to enable shipping for your products</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-3">
|
||||
<div
|
||||
v-for="zone in zones"
|
||||
:key="zone.id"
|
||||
class="flex items-center justify-between p-4 bg-muted/30 rounded-lg border"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<div class="font-medium text-foreground">{{ zone.name }}</div>
|
||||
<div class="text-sm text-muted-foreground">
|
||||
<span>{{ formatCost(zone.cost) }} {{ zone.currency }}</span>
|
||||
<span v-if="zone.countries?.length" class="ml-2">
|
||||
· {{ zone.countries.join(', ') }}
|
||||
<!-- Nostr Settings Tab -->
|
||||
<div v-else-if="activeSettingsTab === 'nostr'" class="space-y-6">
|
||||
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
||||
<h3 class="text-lg font-semibold text-foreground mb-4">Nostr Network Configuration</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-foreground mb-2">Relay Connections</label>
|
||||
<div class="space-y-2">
|
||||
<div v-for="relay in nostrSettings.relays" :key="relay" class="flex items-center gap-2">
|
||||
<Input :value="relay" readonly class="flex-1" />
|
||||
<Button @click="removeRelay(relay)" variant="outline" size="sm">
|
||||
<X class="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Input v-model="newRelay" placeholder="wss://relay.example.com" class="flex-1" />
|
||||
<Button @click="addRelay" variant="outline">
|
||||
Add Relay
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-foreground mb-2">Nostr Public Key</label>
|
||||
<Input :value="nostrSettings.pubkey" readonly class="font-mono text-sm" />
|
||||
<p class="text-xs text-muted-foreground mt-1">Your Nostr public key for receiving orders</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-foreground mb-2">Connection Status</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<div
|
||||
class="w-3 h-3 rounded-full"
|
||||
:class="orderEvents.isSubscribed ? 'bg-green-500' : 'bg-yellow-500'"
|
||||
></div>
|
||||
<span class="text-sm text-muted-foreground">
|
||||
{{ orderEvents.isSubscribed ? 'Connected to Nostr network' : 'Connecting to Nostr network...' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@click="editZone(zone)"
|
||||
:disabled="isZoneSaving"
|
||||
>
|
||||
<Pencil class="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@click="confirmDeleteZone(zone)"
|
||||
:disabled="isZoneSaving"
|
||||
class="text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash2 class="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<Button @click="saveNostrSettings" variant="default">
|
||||
Save Nostr Settings
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shipping Settings Tab -->
|
||||
<div v-else-if="activeSettingsTab === 'shipping'" class="space-y-6">
|
||||
<div class="bg-card p-6 rounded-lg border shadow-sm">
|
||||
<h3 class="text-lg font-semibold text-foreground mb-4">Shipping Zones</h3>
|
||||
<div class="space-y-4">
|
||||
<div v-for="zone in shippingSettings.zones" :key="zone.id" class="border border-border rounded-lg p-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-foreground mb-1">Zone Name</label>
|
||||
<Input v-model="zone.name" placeholder="Zone name" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-foreground mb-1">Cost</label>
|
||||
<Input v-model="zone.cost" type="number" min="0" step="0.01" placeholder="0.00" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-foreground mb-1">Currency</label>
|
||||
<select v-model="zone.currency" class="w-full px-3 py-2 border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring bg-background text-foreground">
|
||||
<option value="sat">Satoshi (sats)</option>
|
||||
<option value="btc">Bitcoin (BTC)</option>
|
||||
<option value="usd">US Dollar (USD)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex justify-end">
|
||||
<Button @click="removeShippingZone(zone.id)" variant="outline" size="sm">
|
||||
Remove Zone
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Button @click="addShippingZone" variant="outline">
|
||||
<Plus class="w-4 h-4 mr-2" />
|
||||
Add Shipping Zone
|
||||
</Button>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<Button @click="saveShippingSettings" variant="default">
|
||||
Save Shipping Settings
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Zone Confirmation Dialog -->
|
||||
<Dialog :open="showDeleteConfirm" @update:open="showDeleteConfirm = $event">
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Delete Shipping Zone</DialogTitle>
|
||||
<DialogDescription>
|
||||
Are you sure you want to delete "{{ zoneToDelete?.name }}"?
|
||||
This action cannot be undone.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="showDeleteConfirm = false" :disabled="isZoneSaving">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
@click="deleteZone"
|
||||
:disabled="isZoneSaving"
|
||||
variant="destructive"
|
||||
>
|
||||
<span v-if="isZoneSaving">Deleting...</span>
|
||||
<span v-else>Delete</span>
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { useForm } from 'vee-validate'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import * as z from 'zod'
|
||||
import { ref, onMounted } from 'vue'
|
||||
// import { useOrderEvents } from '@/composables/useOrderEvents' // TODO: Move to market module
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import {
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Store, Plus, Pencil, Trash2, Truck } from 'lucide-vue-next'
|
||||
import { injectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||
import type { NostrmarketAPI, Stall, Zone } from '../services/nostrmarketAPI'
|
||||
import { auth } from '@/composables/useAuthService'
|
||||
import { useToast } from '@/core/composables/useToast'
|
||||
import { Plus, X } from 'lucide-vue-next'
|
||||
|
||||
// Services
|
||||
const nostrmarketAPI = injectService(SERVICE_TOKENS.NOSTRMARKET_API) as NostrmarketAPI
|
||||
const paymentService = injectService(SERVICE_TOKENS.PAYMENT_SERVICE) as any
|
||||
const toast = useToast()
|
||||
// const marketStore = useMarketStore()
|
||||
// const orderEvents = useOrderEvents() // TODO: Move to market module
|
||||
const orderEvents = { isSubscribed: ref(false) } // Temporary mock
|
||||
|
||||
// State
|
||||
const isLoading = ref(true)
|
||||
const isSaving = ref(false)
|
||||
const currentStall = ref<Stall | null>(null)
|
||||
// Local state
|
||||
const activeSettingsTab = ref('store')
|
||||
const newRelay = ref('')
|
||||
|
||||
// Zone state
|
||||
const zones = ref<Zone[]>([])
|
||||
const isZoneLoading = ref(false)
|
||||
const isZoneSaving = ref(false)
|
||||
const showAddZoneForm = ref(false)
|
||||
const editingZone = ref<Zone | null>(null)
|
||||
const showDeleteConfirm = ref(false)
|
||||
const zoneToDelete = ref<Zone | null>(null)
|
||||
|
||||
// Zone form
|
||||
const zoneForm = ref({
|
||||
name: '',
|
||||
cost: 0,
|
||||
countriesInput: ''
|
||||
// Settings data
|
||||
const storeSettings = ref({
|
||||
name: 'My Store',
|
||||
description: 'A great place to shop',
|
||||
contactEmail: 'store@example.com',
|
||||
category: 'other'
|
||||
})
|
||||
|
||||
const isZoneFormValid = computed(() => {
|
||||
return zoneForm.value.name.trim().length > 0 && zoneForm.value.cost >= 0
|
||||
const paymentSettings = ref({
|
||||
defaultCurrency: 'sat',
|
||||
invoiceExpiry: 60,
|
||||
autoGenerateInvoices: true
|
||||
})
|
||||
|
||||
// Form schema - only fields that exist in the Stall model
|
||||
const formSchema = toTypedSchema(z.object({
|
||||
name: z.string().min(1, "Store name is required").max(100, "Store name must be less than 100 characters"),
|
||||
description: z.string().max(500, "Description must be less than 500 characters").optional(),
|
||||
imageUrl: z.string().url("Must be a valid URL").optional().or(z.literal(''))
|
||||
}))
|
||||
|
||||
// Form setup
|
||||
const form = useForm({
|
||||
validationSchema: formSchema,
|
||||
initialValues: {
|
||||
name: '',
|
||||
description: '',
|
||||
imageUrl: ''
|
||||
}
|
||||
const nostrSettings = ref({
|
||||
relays: [
|
||||
'wss://relay.damus.io',
|
||||
'wss://relay.snort.social',
|
||||
'wss://nostr-pub.wellorder.net'
|
||||
],
|
||||
pubkey: 'npub1...' // TODO: Get from auth
|
||||
})
|
||||
|
||||
const { resetForm, meta } = form
|
||||
const isFormValid = computed(() => meta.value.valid)
|
||||
const shippingSettings = ref({
|
||||
zones: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Local',
|
||||
cost: 0,
|
||||
currency: 'sat',
|
||||
estimatedDays: '1-2 days'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Domestic',
|
||||
cost: 1000,
|
||||
currency: 'sat',
|
||||
estimatedDays: '3-5 days'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'International',
|
||||
cost: 5000,
|
||||
currency: 'sat',
|
||||
estimatedDays: '7-14 days'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// Format cost for display
|
||||
const formatCost = (cost: number) => {
|
||||
return cost === 0 ? 'Free' : cost.toString()
|
||||
// Settings tabs
|
||||
const settingsTabs = [
|
||||
{ id: 'store', name: 'Store Settings' },
|
||||
{ id: 'payment', name: 'Payment Settings' },
|
||||
{ id: 'nostr', name: 'Nostr Network' },
|
||||
{ id: 'shipping', name: 'Shipping Zones' }
|
||||
]
|
||||
|
||||
// Methods
|
||||
const saveStoreSettings = () => {
|
||||
// TODO: Save store settings
|
||||
console.log('Saving store settings:', storeSettings.value)
|
||||
}
|
||||
|
||||
// Load store data
|
||||
const loadStoreData = async () => {
|
||||
const currentUser = auth.currentUser?.value
|
||||
if (!currentUser?.wallets?.length) {
|
||||
isLoading.value = false
|
||||
return
|
||||
}
|
||||
const savePaymentSettings = () => {
|
||||
// TODO: Save payment settings
|
||||
console.log('Saving payment settings:', paymentSettings.value)
|
||||
}
|
||||
|
||||
const inkey = paymentService.getPreferredWalletInvoiceKey()
|
||||
if (!inkey) {
|
||||
isLoading.value = false
|
||||
return
|
||||
}
|
||||
const saveNostrSettings = () => {
|
||||
// TODO: Save Nostr settings
|
||||
console.log('Saving Nostr settings:', nostrSettings.value)
|
||||
}
|
||||
|
||||
try {
|
||||
const stalls = await nostrmarketAPI.getStalls(inkey)
|
||||
if (stalls && stalls.length > 0) {
|
||||
currentStall.value = stalls[0]
|
||||
const saveShippingSettings = () => {
|
||||
// TODO: Save shipping settings
|
||||
console.log('Saving shipping settings:', shippingSettings.value)
|
||||
}
|
||||
|
||||
// Update form with current values
|
||||
resetForm({
|
||||
values: {
|
||||
name: stalls[0].name || '',
|
||||
description: stalls[0].config?.description || '',
|
||||
imageUrl: stalls[0].config?.image_url || ''
|
||||
}
|
||||
})
|
||||
|
||||
// Load zones
|
||||
await loadZones()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load store data:', error)
|
||||
toast.error('Failed to load store settings')
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
const addRelay = () => {
|
||||
if (newRelay.value && !nostrSettings.value.relays.includes(newRelay.value)) {
|
||||
nostrSettings.value.relays.push(newRelay.value)
|
||||
newRelay.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
// Load shipping zones
|
||||
const loadZones = async () => {
|
||||
const inkey = paymentService.getPreferredWalletInvoiceKey()
|
||||
if (!inkey) return
|
||||
|
||||
isZoneLoading.value = true
|
||||
try {
|
||||
zones.value = await nostrmarketAPI.getZones(inkey)
|
||||
} catch (error) {
|
||||
console.error('Failed to load zones:', error)
|
||||
toast.error('Failed to load shipping zones')
|
||||
} finally {
|
||||
isZoneLoading.value = false
|
||||
const removeRelay = (relay: string) => {
|
||||
const index = nostrSettings.value.relays.indexOf(relay)
|
||||
if (index > -1) {
|
||||
nostrSettings.value.relays.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
// Save store settings
|
||||
const onSubmit = form.handleSubmit(async (values) => {
|
||||
if (!currentStall.value?.id) return
|
||||
|
||||
isSaving.value = true
|
||||
|
||||
try {
|
||||
const adminKey = paymentService.getPreferredWalletAdminKey()
|
||||
if (!adminKey) {
|
||||
throw new Error('No wallet admin key available')
|
||||
}
|
||||
|
||||
// Build full stall object with updated values (API requires PUT with full object)
|
||||
const stallToUpdate = {
|
||||
...currentStall.value,
|
||||
name: values.name,
|
||||
config: {
|
||||
...currentStall.value.config,
|
||||
description: values.description || '',
|
||||
image_url: values.imageUrl || undefined
|
||||
}
|
||||
}
|
||||
|
||||
const updatedStall = await nostrmarketAPI.updateStall(adminKey, stallToUpdate)
|
||||
|
||||
currentStall.value = updatedStall
|
||||
toast.success('Store settings saved successfully!')
|
||||
} catch (error) {
|
||||
console.error('Failed to save store settings:', error)
|
||||
toast.error('Failed to save store settings')
|
||||
} finally {
|
||||
isSaving.value = false
|
||||
}
|
||||
})
|
||||
|
||||
// Zone form functions
|
||||
const resetZoneForm = () => {
|
||||
zoneForm.value = {
|
||||
name: '',
|
||||
const addShippingZone = () => {
|
||||
const newZone = {
|
||||
id: Date.now().toString(),
|
||||
name: 'New Zone',
|
||||
cost: 0,
|
||||
countriesInput: ''
|
||||
currency: 'sat',
|
||||
estimatedDays: '3-5 days'
|
||||
}
|
||||
editingZone.value = null
|
||||
showAddZoneForm.value = false
|
||||
shippingSettings.value.zones.push(newZone)
|
||||
}
|
||||
|
||||
const cancelZoneForm = () => {
|
||||
resetZoneForm()
|
||||
}
|
||||
|
||||
const editZone = (zone: Zone) => {
|
||||
editingZone.value = zone
|
||||
zoneForm.value = {
|
||||
name: zone.name,
|
||||
cost: zone.cost,
|
||||
countriesInput: zone.countries?.join(', ') || ''
|
||||
}
|
||||
showAddZoneForm.value = true
|
||||
}
|
||||
|
||||
const saveZone = async () => {
|
||||
const adminKey = paymentService.getPreferredWalletAdminKey()
|
||||
if (!adminKey || !currentStall.value) return
|
||||
|
||||
isZoneSaving.value = true
|
||||
|
||||
try {
|
||||
const countries = zoneForm.value.countriesInput
|
||||
.split(',')
|
||||
.map(c => c.trim())
|
||||
.filter(c => c.length > 0)
|
||||
|
||||
const zoneData: Zone = {
|
||||
id: editingZone.value?.id || '',
|
||||
name: zoneForm.value.name.trim(),
|
||||
currency: currentStall.value.currency,
|
||||
cost: zoneForm.value.cost,
|
||||
countries
|
||||
}
|
||||
|
||||
if (editingZone.value) {
|
||||
// Update existing zone
|
||||
await nostrmarketAPI.updateZone(adminKey, editingZone.value.id, zoneData)
|
||||
toast.success('Shipping zone updated!')
|
||||
} else {
|
||||
// Create new zone
|
||||
await nostrmarketAPI.createZone(adminKey, {
|
||||
name: zoneData.name,
|
||||
currency: zoneData.currency,
|
||||
cost: zoneData.cost,
|
||||
countries: zoneData.countries
|
||||
})
|
||||
toast.success('Shipping zone added!')
|
||||
}
|
||||
|
||||
// Reload zones and reset form
|
||||
await loadZones()
|
||||
resetZoneForm()
|
||||
} catch (error) {
|
||||
console.error('Failed to save zone:', error)
|
||||
toast.error(editingZone.value ? 'Failed to update zone' : 'Failed to add zone')
|
||||
} finally {
|
||||
isZoneSaving.value = false
|
||||
const removeShippingZone = (zoneId: string) => {
|
||||
const index = shippingSettings.value.zones.findIndex(z => z.id === zoneId)
|
||||
if (index > -1) {
|
||||
shippingSettings.value.zones.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
const confirmDeleteZone = (zone: Zone) => {
|
||||
zoneToDelete.value = zone
|
||||
showDeleteConfirm.value = true
|
||||
}
|
||||
|
||||
const deleteZone = async () => {
|
||||
const adminKey = paymentService.getPreferredWalletAdminKey()
|
||||
if (!adminKey || !zoneToDelete.value) return
|
||||
|
||||
isZoneSaving.value = true
|
||||
|
||||
try {
|
||||
await nostrmarketAPI.deleteZone(adminKey, zoneToDelete.value.id)
|
||||
toast.success('Shipping zone deleted!')
|
||||
await loadZones()
|
||||
} catch (error) {
|
||||
console.error('Failed to delete zone:', error)
|
||||
toast.error('Failed to delete zone')
|
||||
} finally {
|
||||
isZoneSaving.value = false
|
||||
showDeleteConfirm.value = false
|
||||
zoneToDelete.value = null
|
||||
}
|
||||
}
|
||||
|
||||
// Watch for auth changes
|
||||
watch(() => auth.currentUser?.value?.pubkey, async (newPubkey, oldPubkey) => {
|
||||
if (newPubkey !== oldPubkey) {
|
||||
isLoading.value = true
|
||||
await loadStoreData()
|
||||
}
|
||||
})
|
||||
|
||||
// Initialize
|
||||
onMounted(async () => {
|
||||
await loadStoreData()
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
console.log('Market Settings component loaded')
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -49,47 +49,84 @@
|
|||
|
||||
<!-- Stores Grid (shown when merchant profile exists) -->
|
||||
<div v-else>
|
||||
<!-- Loading State for Stalls -->
|
||||
<div v-if="isLoadingStalls" class="flex justify-center py-12">
|
||||
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
|
||||
<!-- No Store - Create First Store -->
|
||||
<div v-else-if="userStalls.length === 0" class="flex flex-col items-center justify-center py-12">
|
||||
<div class="w-24 h-24 bg-muted rounded-full flex items-center justify-center mb-6">
|
||||
<Store class="w-12 h-12 text-muted-foreground" />
|
||||
<!-- Header Section -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-foreground">My Stores</h2>
|
||||
<p class="text-muted-foreground mt-1">
|
||||
Manage your stores and products
|
||||
</p>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-foreground mb-2">Create Your Store</h2>
|
||||
<p class="text-muted-foreground text-center mb-6 max-w-md">
|
||||
Set up your store to start selling products on the Nostr marketplace.
|
||||
</p>
|
||||
<Button
|
||||
@click="showCreateStoreDialog = true"
|
||||
variant="default"
|
||||
size="lg"
|
||||
>
|
||||
<Plus class="w-5 h-5 mr-2" />
|
||||
Create Store
|
||||
<Button @click="navigateToMarket" variant="outline">
|
||||
<Store class="w-4 h-4 mr-2" />
|
||||
Browse Market
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active Store Dashboard (shown when user has a store) -->
|
||||
<div v-else-if="activeStall">
|
||||
<!-- Loading State for Stalls -->
|
||||
<div v-if="isLoadingStalls" class="flex justify-center py-12">
|
||||
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
|
||||
<!-- Stores Cards Grid -->
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
||||
<!-- Existing Store Cards -->
|
||||
<StoreCard
|
||||
v-for="stall in userStalls"
|
||||
:key="stall.id"
|
||||
:stall="stall"
|
||||
@manage="manageStall"
|
||||
@view-products="viewStallProducts"
|
||||
/>
|
||||
|
||||
<!-- Create New Store Card -->
|
||||
<div class="bg-card rounded-lg border-2 border-dashed border-muted-foreground/25 hover:border-primary/50 transition-colors">
|
||||
<button
|
||||
@click="showCreateStoreDialog = true"
|
||||
class="w-full h-full p-6 flex flex-col items-center justify-center min-h-[200px] hover:bg-muted/30 transition-colors"
|
||||
>
|
||||
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-3">
|
||||
<Plus class="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-foreground mb-1">Create New Store</h3>
|
||||
<p class="text-sm text-muted-foreground text-center">
|
||||
Add another store to expand your marketplace presence
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active Store Dashboard (shown when a store is selected) -->
|
||||
<div v-if="activeStall">
|
||||
<!-- Header -->
|
||||
<div class="space-y-4 mb-6">
|
||||
<!-- Top row with back button and currency -->
|
||||
<div class="flex items-center gap-3">
|
||||
<Button @click="activeStallId = null" variant="ghost" size="sm">
|
||||
← Back to Stores
|
||||
</Button>
|
||||
<div class="h-4 w-px bg-border"></div>
|
||||
<Badge variant="secondary">{{ activeStall.currency }}</Badge>
|
||||
</div>
|
||||
|
||||
<!-- Store info and actions -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-3 mb-1">
|
||||
<h2 class="text-xl sm:text-2xl font-bold text-foreground">{{ activeStall.name }}</h2>
|
||||
<Badge variant="secondary">{{ activeStall.currency }}</Badge>
|
||||
</div>
|
||||
<p class="text-sm sm:text-base text-muted-foreground">{{ activeStall.config?.description || 'Manage incoming orders and your products' }}</p>
|
||||
<h2 class="text-xl sm:text-2xl font-bold text-foreground">{{ activeStall.name }}</h2>
|
||||
<p class="text-sm sm:text-base text-muted-foreground mt-1">{{ activeStall.config?.description || 'Manage incoming orders and your products' }}</p>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row gap-2 sm:gap-3">
|
||||
<Button @click="navigateToMarket" variant="outline" class="w-full sm:w-auto">
|
||||
<Store class="w-4 h-4 mr-2" />
|
||||
<span class="sm:inline">Browse Market</span>
|
||||
</Button>
|
||||
<Button @click="showCreateProductDialog = true" variant="default" class="w-full sm:w-auto">
|
||||
<Plus class="w-4 h-4 mr-2" />
|
||||
<span>Add Product</span>
|
||||
</Button>
|
||||
</div>
|
||||
<Button @click="navigateToMarket" variant="outline" class="w-full sm:w-auto">
|
||||
<Store class="w-4 h-4 mr-2" />
|
||||
<span class="sm:inline">Browse Market</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -151,23 +188,20 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customer Satisfaction (Coming Soon) -->
|
||||
<div class="bg-card p-4 sm:p-6 rounded-lg border shadow-sm opacity-50 relative">
|
||||
<div class="absolute top-2 right-2">
|
||||
<Badge variant="outline" class="text-xs">Coming Soon</Badge>
|
||||
</div>
|
||||
<!-- Customer Satisfaction -->
|
||||
<div class="bg-card p-4 sm:p-6 rounded-lg border shadow-sm">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs sm:text-sm font-medium text-muted-foreground">Satisfaction</p>
|
||||
<p class="text-xl sm:text-2xl font-bold text-muted-foreground">--%</p>
|
||||
<p class="text-xl sm:text-2xl font-bold text-foreground">{{ storeStats.satisfaction }}%</p>
|
||||
</div>
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-muted rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Star class="w-5 h-5 sm:w-6 sm:h-6 text-muted-foreground" />
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-yellow-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Star class="w-5 h-5 sm:w-6 sm:h-6 text-yellow-500" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 sm:mt-4">
|
||||
<div class="flex items-center text-xs sm:text-sm text-muted-foreground">
|
||||
<span>No reviews yet</span>
|
||||
<span>{{ storeStats.totalReviews }} reviews</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -396,6 +430,7 @@ import { injectService, SERVICE_TOKENS } from '@/core/di-container'
|
|||
import CreateStoreDialog from './CreateStoreDialog.vue'
|
||||
import CreateProductDialog from './CreateProductDialog.vue'
|
||||
import DeleteConfirmDialog from './DeleteConfirmDialog.vue'
|
||||
import StoreCard from './StoreCard.vue'
|
||||
import MerchantOrders from './MerchantOrders.vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
|
@ -617,6 +652,14 @@ const loadStallProducts = async () => {
|
|||
}
|
||||
}
|
||||
|
||||
const manageStall = (stallId: string) => {
|
||||
activeStallId.value = stallId
|
||||
}
|
||||
|
||||
const viewStallProducts = (stallId: string) => {
|
||||
activeStallId.value = stallId
|
||||
}
|
||||
|
||||
const navigateToMarket = () => router.push('/market')
|
||||
|
||||
const checkMerchantProfile = async () => {
|
||||
|
|
@ -654,6 +697,7 @@ const checkMerchantProfile = async () => {
|
|||
// Event handlers
|
||||
const onStoreCreated = async (_stall: Stall) => {
|
||||
await loadStallsList()
|
||||
toast.success('Store created successfully!')
|
||||
}
|
||||
|
||||
const onProductCreated = async (_product: Product) => {
|
||||
|
|
|
|||
|
|
@ -212,6 +212,19 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Debug Information (Development Only) -->
|
||||
<div v-if="isDevelopment" class="mt-8 p-4 bg-gray-100 rounded-lg">
|
||||
<h4 class="font-medium mb-2">Debug Information</h4>
|
||||
<div class="text-sm space-y-1">
|
||||
<div>Total Orders in Store: {{ Object.keys(marketStore.orders).length }}</div>
|
||||
<div>Filtered Orders: {{ filteredOrders.length }}</div>
|
||||
<div>Order Events Subscribed: {{ orderEvents.isSubscribed ? 'Yes' : 'No' }}</div>
|
||||
<div>Relay Hub Connected: {{ relayHub.isConnected ? 'Yes' : 'No' }}</div>
|
||||
<div>Auth Status: {{ auth.isAuthenticated ? 'Authenticated' : 'Not Authenticated' }}</div>
|
||||
<div>Current User: {{ auth.currentUser?.value?.pubkey ? 'Yes' : 'No' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else class="text-center py-12">
|
||||
<div class="w-16 h-16 bg-muted rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
|
|
@ -299,6 +312,8 @@ const pendingOrders = computed(() => allOrders.value.filter(o => o.status === 'p
|
|||
const paidOrders = computed(() => allOrders.value.filter(o => o.status === 'paid').length)
|
||||
const pendingPayments = computed(() => allOrders.value.filter(o => !isOrderPaid(o)).length)
|
||||
|
||||
const isDevelopment = computed(() => import.meta.env.DEV)
|
||||
|
||||
// Methods
|
||||
const isOrderPaid = (order: any) => {
|
||||
// Prioritize the 'paid' field from Nostr status updates (type 2)
|
||||
|
|
@ -482,9 +497,34 @@ onMounted(() => {
|
|||
paymentService.forceResetPaymentState()
|
||||
}
|
||||
|
||||
// Orders are already loaded in the market store
|
||||
console.log('Order History component loaded with', allOrders.value.length, 'orders')
|
||||
console.log('Market store orders:', marketStore.orders)
|
||||
|
||||
// Debug: Log order details for orders with payment requests
|
||||
allOrders.value.forEach(order => {
|
||||
if (order.paymentRequest) {
|
||||
console.log('Order with payment request:', {
|
||||
id: order.id,
|
||||
paymentRequest: order.paymentRequest.substring(0, 50) + '...',
|
||||
hasPaymentRequest: !!order.paymentRequest,
|
||||
status: order.status,
|
||||
paymentStatus: order.paymentStatus
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
console.log('Order events status:', orderEvents.isSubscribed.value)
|
||||
console.log('Relay hub connected:', relayHub.isConnected.value)
|
||||
console.log('Auth status:', auth.isAuthenticated)
|
||||
console.log('Current user:', auth.currentUser?.value?.pubkey)
|
||||
|
||||
// Start listening for order events if not already listening
|
||||
if (!orderEvents.isSubscribed.value) {
|
||||
console.log('Starting order events listener...')
|
||||
orderEvents.initialize()
|
||||
} else {
|
||||
console.log('Order events already listening')
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -329,28 +329,6 @@ export class NostrmarketAPI extends BaseService {
|
|||
return stall
|
||||
}
|
||||
|
||||
/**
|
||||
* Update an existing stall
|
||||
* Note: The LNbits API uses PUT and expects the full stall object
|
||||
*/
|
||||
async updateStall(
|
||||
walletAdminkey: string,
|
||||
stallData: Stall
|
||||
): Promise<Stall> {
|
||||
const stall = await this.request<Stall>(
|
||||
`/api/v1/stall/${stallData.id}`,
|
||||
walletAdminkey,
|
||||
{
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(stallData),
|
||||
}
|
||||
)
|
||||
|
||||
this.debug('Updated stall:', { stallId: stall.id, stallName: stall.name })
|
||||
|
||||
return stall
|
||||
}
|
||||
|
||||
/**
|
||||
* Get available shipping zones
|
||||
*/
|
||||
|
|
@ -393,70 +371,30 @@ export class NostrmarketAPI extends BaseService {
|
|||
}
|
||||
|
||||
/**
|
||||
* Update an existing shipping zone
|
||||
*/
|
||||
async updateZone(
|
||||
walletAdminkey: string,
|
||||
zoneId: string,
|
||||
zoneData: Zone
|
||||
): Promise<Zone> {
|
||||
const zone = await this.request<Zone>(
|
||||
`/api/v1/zone/${zoneId}`,
|
||||
walletAdminkey,
|
||||
{
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify(zoneData),
|
||||
}
|
||||
)
|
||||
|
||||
this.debug('Updated zone:', { zoneId: zone.id, zoneName: zone.name })
|
||||
|
||||
return zone
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a shipping zone
|
||||
*/
|
||||
async deleteZone(walletAdminkey: string, zoneId: string): Promise<void> {
|
||||
await this.request<void>(
|
||||
`/api/v1/zone/${zoneId}`,
|
||||
walletAdminkey,
|
||||
{ method: 'DELETE' }
|
||||
)
|
||||
|
||||
this.debug('Deleted zone:', { zoneId })
|
||||
}
|
||||
|
||||
/**
|
||||
* Get available currencies from the LNbits core API
|
||||
* This endpoint returns currencies allowed by the server configuration
|
||||
* Get available currencies
|
||||
*/
|
||||
async getCurrencies(): Promise<string[]> {
|
||||
// Call the LNbits core API directly (not under /nostrmarket)
|
||||
const url = `${this.baseUrl}/api/v1/currencies`
|
||||
const baseCurrencies = ['sat']
|
||||
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch currencies: ${response.status}`)
|
||||
}
|
||||
|
||||
const apiCurrencies = await response.json()
|
||||
const apiCurrencies = await this.request<string[]>(
|
||||
'/api/v1/currencies',
|
||||
'', // No authentication needed for currencies endpoint
|
||||
{ method: 'GET' }
|
||||
)
|
||||
|
||||
if (apiCurrencies && Array.isArray(apiCurrencies)) {
|
||||
this.debug('Retrieved currencies from LNbits core:', { count: apiCurrencies.length, currencies: apiCurrencies })
|
||||
return apiCurrencies
|
||||
// Combine base currencies with API currencies, removing duplicates
|
||||
const allCurrencies = [...baseCurrencies, ...apiCurrencies.filter(currency => !baseCurrencies.includes(currency))]
|
||||
this.debug('Retrieved currencies:', { count: allCurrencies.length, currencies: allCurrencies })
|
||||
return allCurrencies
|
||||
}
|
||||
|
||||
this.debug('No currencies returned from server, using default')
|
||||
return ['sat']
|
||||
this.debug('No API currencies returned, using base currencies only')
|
||||
return baseCurrencies
|
||||
} catch (error) {
|
||||
this.debug('Failed to get currencies, using default:', error)
|
||||
return ['sat']
|
||||
this.debug('Failed to get currencies, falling back to base currencies:', error)
|
||||
return baseCurrencies
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<Button @click="$router.push('/market')" variant="outline">
|
||||
Continue Shopping
|
||||
</Button>
|
||||
<Button @click="$router.push('/market/dashboard?tab=orders')" variant="default">
|
||||
<Button @click="$router.push('/market/dashboard')" variant="default">
|
||||
View My Orders
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -108,73 +108,118 @@
|
|||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Shipping & Contact Information -->
|
||||
<Card>
|
||||
<!-- Shipping Information -->
|
||||
<Card v-if="!orderConfirmed">
|
||||
<CardHeader>
|
||||
<CardTitle>Shipping & Contact</CardTitle>
|
||||
<CardDescription>Select shipping and provide your contact details</CardDescription>
|
||||
<CardTitle>Shipping Information</CardTitle>
|
||||
<CardDescription>Select your shipping zone</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-6">
|
||||
<CardContent>
|
||||
<!-- Shipping Zones -->
|
||||
<div v-if="availableShippingZones.length > 0">
|
||||
<Label class="mb-3 block">Shipping Zone</Label>
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
v-for="zone in availableShippingZones"
|
||||
:key="zone.id"
|
||||
@click="selectShippingZone(zone)"
|
||||
:class="[
|
||||
'p-4 border rounded-lg cursor-pointer transition-colors',
|
||||
selectedShippingZone?.id === zone.id
|
||||
? 'border-primary bg-primary/10'
|
||||
: 'border-border hover:border-primary/50'
|
||||
]"
|
||||
>
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<h3 class="font-medium text-foreground">{{ zone.name }}</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ zone.countries?.join(', ') || 'Available' }}
|
||||
<span v-if="!zone.requiresPhysicalShipping" class="ml-2 text-blue-600">
|
||||
• No shipping required
|
||||
</span>
|
||||
</p>
|
||||
<p v-if="zone.description" class="text-xs text-muted-foreground mt-1">
|
||||
{{ zone.description }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="font-semibold text-foreground">
|
||||
{{ formatPrice(zone.cost, checkoutCart.currency) }}
|
||||
</p>
|
||||
<p class="text-xs text-muted-foreground">shipping</p>
|
||||
</div>
|
||||
<div v-if="availableShippingZones.length > 0" class="space-y-3">
|
||||
<div
|
||||
v-for="zone in availableShippingZones"
|
||||
:key="zone.id"
|
||||
@click="selectShippingZone(zone)"
|
||||
:class="[
|
||||
'p-4 border rounded-lg cursor-pointer transition-colors',
|
||||
selectedShippingZone?.id === zone.id
|
||||
? 'border-primary bg-primary/10'
|
||||
: 'border-border hover:border-primary/50'
|
||||
]"
|
||||
>
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<h3 class="font-medium text-foreground">{{ zone.name }}</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ zone.countries?.join(', ') || 'Available' }}
|
||||
<span v-if="!zone.requiresPhysicalShipping" class="ml-2 text-blue-600">
|
||||
• No shipping required
|
||||
</span>
|
||||
</p>
|
||||
<p v-if="zone.description" class="text-xs text-muted-foreground mt-1">
|
||||
{{ zone.description }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="font-semibold text-foreground">
|
||||
{{ formatPrice(zone.cost, checkoutCart.currency) }}
|
||||
</p>
|
||||
<p class="text-xs text-muted-foreground">shipping</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="text-center py-4 bg-muted/50 rounded-lg">
|
||||
<div v-else class="text-center py-6">
|
||||
<p class="text-muted-foreground">This merchant hasn't configured shipping zones yet.</p>
|
||||
<p class="text-sm text-muted-foreground">Please contact the merchant for shipping information.</p>
|
||||
</div>
|
||||
|
||||
<!-- Separator -->
|
||||
<div class="border-t border-border" />
|
||||
<!-- Confirm Order Button -->
|
||||
<div class="mt-6">
|
||||
<Button
|
||||
@click="confirmOrder"
|
||||
:disabled="availableShippingZones.length > 0 && !selectedShippingZone"
|
||||
class="w-full"
|
||||
size="lg"
|
||||
>
|
||||
Confirm Order
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Shipping Address (shown when required for physical delivery) -->
|
||||
<div v-if="requiresShippingAddress">
|
||||
<Label for="address">Shipping Address *</Label>
|
||||
<!-- Contact & Payment Information -->
|
||||
<Card v-if="orderConfirmed">
|
||||
<CardHeader>
|
||||
<CardTitle>Contact & Payment Information</CardTitle>
|
||||
<CardDescription>Provide your details for order processing</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-6">
|
||||
<!-- Contact Form -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<Label for="email">Email (optional)</Label>
|
||||
<Input
|
||||
id="email"
|
||||
v-model="contactData.email"
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
<p class="text-xs text-muted-foreground mt-1">Merchant may not use email</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label for="npub">Alternative Npub (optional)</Label>
|
||||
<Input
|
||||
id="npub"
|
||||
v-model="contactData.npub"
|
||||
placeholder="npub..."
|
||||
/>
|
||||
<p class="text-xs text-muted-foreground mt-1">Different Npub for communication</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label for="address">
|
||||
{{ selectedShippingZone?.requiresPhysicalShipping !== false ? 'Shipping Address' : 'Contact Address (optional)' }}
|
||||
</Label>
|
||||
<Textarea
|
||||
id="address"
|
||||
v-model="contactData.address"
|
||||
placeholder="Full shipping address..."
|
||||
:placeholder="selectedShippingZone?.requiresPhysicalShipping !== false
|
||||
? 'Full shipping address...'
|
||||
: 'Contact address (optional)...'"
|
||||
rows="3"
|
||||
/>
|
||||
<p class="text-xs text-muted-foreground mt-1">Required for physical delivery</p>
|
||||
<p class="text-xs text-muted-foreground mt-1">
|
||||
{{ selectedShippingZone?.requiresPhysicalShipping !== false
|
||||
? 'Required for physical delivery'
|
||||
: 'Optional for digital items or pickup' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Message to Merchant (visible) -->
|
||||
<div>
|
||||
<Label for="message">Message to Merchant (optional)</Label>
|
||||
<Textarea
|
||||
|
|
@ -185,72 +230,40 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<!-- Optional Contact Info (collapsible) -->
|
||||
<Collapsible v-model:open="showOptionalContact">
|
||||
<CollapsibleTrigger class="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer w-full">
|
||||
<ChevronDown
|
||||
class="w-4 h-4 transition-transform"
|
||||
:class="{ 'rotate-180': showOptionalContact }"
|
||||
/>
|
||||
<span>Additional contact info (optional)</span>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent class="pt-4 space-y-4">
|
||||
<!-- Contact Address (optional for digital/pickup) -->
|
||||
<div v-if="!requiresShippingAddress">
|
||||
<Label for="address">Contact Address</Label>
|
||||
<Textarea
|
||||
id="address"
|
||||
v-model="contactData.address"
|
||||
placeholder="Contact address (optional)..."
|
||||
rows="3"
|
||||
/>
|
||||
<p class="text-xs text-muted-foreground mt-1">Optional for digital items or pickup</p>
|
||||
<!-- Payment Method Selection -->
|
||||
<div>
|
||||
<Label>Payment Method</Label>
|
||||
<div class="flex gap-3 mt-2">
|
||||
<div
|
||||
v-for="method in paymentMethods"
|
||||
:key="method.value"
|
||||
@click="paymentMethod = method.value"
|
||||
:class="[
|
||||
'p-3 border rounded-lg cursor-pointer text-center flex-1 transition-colors',
|
||||
paymentMethod === method.value
|
||||
? 'border-primary bg-primary/10'
|
||||
: 'border-border hover:border-primary/50'
|
||||
]"
|
||||
>
|
||||
<p class="font-medium">{{ method.label }}</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label for="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
v-model="contactData.email"
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
<p class="text-xs text-muted-foreground mt-1">Merchant may not use email</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label for="npub">Alternative Npub</Label>
|
||||
<Input
|
||||
id="npub"
|
||||
v-model="contactData.npub"
|
||||
placeholder="npub..."
|
||||
/>
|
||||
<p class="text-xs text-muted-foreground mt-1">Different Npub for communication</p>
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
|
||||
<!-- Payment Method (Lightning only for now) -->
|
||||
<div class="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span>⚡</span>
|
||||
<span>Payment via Lightning Network</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Place Order Button -->
|
||||
<div class="pt-4 border-t border-border">
|
||||
<Button
|
||||
@click="placeOrder"
|
||||
:disabled="isPlacingOrder || !canPlaceOrder"
|
||||
:disabled="isPlacingOrder || (selectedShippingZone?.requiresPhysicalShipping !== false && !contactData.address)"
|
||||
class="w-full"
|
||||
size="lg"
|
||||
>
|
||||
<span v-if="isPlacingOrder" class="animate-spin mr-2">⚡</span>
|
||||
Place Order - {{ formatPrice(orderTotal, checkoutCart.currency) }}
|
||||
</Button>
|
||||
<p v-if="!canPlaceOrder" class="text-xs text-destructive mt-2 text-center">
|
||||
{{ orderValidationMessage }}
|
||||
<p v-if="selectedShippingZone?.requiresPhysicalShipping !== false && !contactData.address"
|
||||
class="text-xs text-destructive mt-2 text-center">
|
||||
Shipping address is required for physical delivery
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
@ -280,14 +293,8 @@ import { Label } from '@/components/ui/label'
|
|||
import ProgressiveImage from '@/components/ui/image/ProgressiveImage.vue'
|
||||
import {
|
||||
Package,
|
||||
CheckCircle,
|
||||
ChevronDown
|
||||
CheckCircle
|
||||
} from 'lucide-vue-next'
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger
|
||||
} from '@/components/ui/collapsible'
|
||||
|
||||
const route = useRoute()
|
||||
const marketStore = useMarketStore()
|
||||
|
|
@ -296,10 +303,11 @@ const authService = injectService(SERVICE_TOKENS.AUTH_SERVICE) as any
|
|||
// State
|
||||
const isLoading = ref(true)
|
||||
const error = ref<string | null>(null)
|
||||
const orderConfirmed = ref(false)
|
||||
const orderPlaced = ref(false)
|
||||
const isPlacingOrder = ref(false)
|
||||
const selectedShippingZone = ref<any>(null)
|
||||
const showOptionalContact = ref(false)
|
||||
const paymentMethod = ref('ln')
|
||||
|
||||
// Form data
|
||||
const contactData = ref({
|
||||
|
|
@ -309,7 +317,12 @@ const contactData = ref({
|
|||
message: ''
|
||||
})
|
||||
|
||||
// TODO: Add BTC Onchain and Cashu payment options in the future
|
||||
// Payment methods
|
||||
const paymentMethods = [
|
||||
{ label: 'Lightning Network', value: 'ln' },
|
||||
{ label: 'BTC Onchain', value: 'btc' },
|
||||
{ label: 'Cashu', value: 'cashu' }
|
||||
]
|
||||
|
||||
// Computed
|
||||
const stallId = computed(() => route.params.stallId as string)
|
||||
|
|
@ -370,41 +383,26 @@ const availableShippingZones = computed(() => {
|
|||
})
|
||||
})
|
||||
|
||||
// Determine if shipping address is required
|
||||
const requiresShippingAddress = computed(() => {
|
||||
return selectedShippingZone.value?.requiresPhysicalShipping !== false
|
||||
})
|
||||
|
||||
// Validation for placing order
|
||||
const canPlaceOrder = computed(() => {
|
||||
// Must select shipping zone if zones are available
|
||||
if (availableShippingZones.value.length > 0 && !selectedShippingZone.value) {
|
||||
return false
|
||||
}
|
||||
// Must provide address if physical shipping is required
|
||||
if (requiresShippingAddress.value && !contactData.value.address) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
|
||||
const orderValidationMessage = computed(() => {
|
||||
if (availableShippingZones.value.length > 0 && !selectedShippingZone.value) {
|
||||
return 'Please select a shipping zone'
|
||||
}
|
||||
if (requiresShippingAddress.value && !contactData.value.address) {
|
||||
return 'Shipping address is required for physical delivery'
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
// Methods
|
||||
const selectShippingZone = (zone: any) => {
|
||||
selectedShippingZone.value = zone
|
||||
}
|
||||
|
||||
const confirmOrder = () => {
|
||||
// Allow proceeding if no shipping zones are available (e.g., for digital goods)
|
||||
if (availableShippingZones.value.length > 0 && !selectedShippingZone.value) {
|
||||
error.value = 'Please select a shipping zone'
|
||||
return
|
||||
}
|
||||
orderConfirmed.value = true
|
||||
}
|
||||
|
||||
const placeOrder = async () => {
|
||||
if (!canPlaceOrder.value) {
|
||||
// Only require shipping address if selected zone requires physical shipping
|
||||
const requiresShippingAddress = selectedShippingZone.value?.requiresPhysicalShipping !== false
|
||||
|
||||
if (requiresShippingAddress && !contactData.value.address) {
|
||||
error.value = 'Shipping address is required for this delivery method'
|
||||
return
|
||||
}
|
||||
|
||||
|
|
@ -466,7 +464,7 @@ const placeOrder = async () => {
|
|||
currency: checkoutCart.value.currency,
|
||||
requiresPhysicalShipping: false
|
||||
},
|
||||
paymentMethod: 'lightning' as const,
|
||||
paymentMethod: paymentMethod.value === 'ln' ? 'lightning' as const : 'btc_onchain' as const,
|
||||
subtotal: orderSubtotal.value,
|
||||
shippingCost: selectedShippingZone.value?.cost || 0,
|
||||
total: orderTotal.value,
|
||||
|
|
|
|||
|
|
@ -62,7 +62,6 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useMarketStore } from '@/modules/market/stores/market'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
|
|
@ -78,13 +77,10 @@ import MerchantStore from '../components/MerchantStore.vue'
|
|||
import MarketSettings from '../components/MarketSettings.vue'
|
||||
import { auth } from '@/composables/useAuthService'
|
||||
|
||||
const route = useRoute()
|
||||
const marketStore = useMarketStore()
|
||||
|
||||
// Local state - check for tab query param
|
||||
const validTabs = ['overview', 'orders', 'store', 'settings']
|
||||
const initialTab = validTabs.includes(route.query.tab as string) ? route.query.tab as string : 'overview'
|
||||
const activeTab = ref(initialTab)
|
||||
// Local state
|
||||
const activeTab = ref('overview')
|
||||
|
||||
// Computed properties for tab badges
|
||||
const orderCount = computed(() => {
|
||||
|
|
|
|||
|
|
@ -1,176 +0,0 @@
|
|||
# Link Aggregator Implementation Plan
|
||||
|
||||
## Overview
|
||||
|
||||
Transform the nostr-feed module into a Reddit-style link aggregator with support for:
|
||||
- **Link posts** - External URLs with Open Graph previews
|
||||
- **Media posts** - Images/videos with inline display
|
||||
- **Self posts** - Text/markdown content
|
||||
|
||||
## NIP Compliance
|
||||
|
||||
| NIP | Purpose | Usage |
|
||||
|-----|---------|-------|
|
||||
| NIP-72 | Moderated Communities | Community definitions (kind 34550), approvals (kind 4550) |
|
||||
| NIP-22 | Comments | Community posts (kind 1111) with scoped threading |
|
||||
| NIP-92 | Media Attachments | `imeta` tags for media metadata |
|
||||
| NIP-94 | File Metadata | Reference for media fields |
|
||||
| NIP-25 | Reactions | Upvote (`+`) / Downvote (`-`) |
|
||||
| NIP-10 | Reply Threading | Fallback for kind 1 compatibility |
|
||||
|
||||
## Event Structure
|
||||
|
||||
### Submission (kind 1111)
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"kind": 1111,
|
||||
"content": "<self-post body or link description>",
|
||||
"tags": [
|
||||
// Community scope (NIP-72 + NIP-22)
|
||||
["A", "34550:<community-pubkey>:<community-d>", "<relay>"],
|
||||
["a", "34550:<community-pubkey>:<community-d>", "<relay>"],
|
||||
["K", "34550"],
|
||||
["k", "34550"],
|
||||
["P", "<community-pubkey>"],
|
||||
["p", "<community-pubkey>"],
|
||||
|
||||
// Submission metadata
|
||||
["title", "<post title>"],
|
||||
["post-type", "link|media|self"],
|
||||
|
||||
// Link post fields
|
||||
["r", "<url>"],
|
||||
["preview-title", "<og:title>"],
|
||||
["preview-description", "<og:description>"],
|
||||
["preview-image", "<og:image>"],
|
||||
["preview-site-name", "<og:site_name>"],
|
||||
|
||||
// Media post fields (NIP-92)
|
||||
["imeta", "url <url>", "m <mime>", "dim <WxH>", "blurhash <hash>", "alt <desc>"],
|
||||
|
||||
// Common
|
||||
["t", "<hashtag>"],
|
||||
["nsfw", "true|false"]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Comment on Submission (kind 1111)
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"kind": 1111,
|
||||
"content": "<comment text>",
|
||||
"tags": [
|
||||
// Root scope (the community)
|
||||
["A", "34550:<community-pubkey>:<community-d>", "<relay>"],
|
||||
["K", "34550"],
|
||||
["P", "<community-pubkey>"],
|
||||
|
||||
// Parent (the submission or parent comment)
|
||||
["e", "<parent-event-id>", "<relay>", "<parent-pubkey>"],
|
||||
["k", "1111"],
|
||||
["p", "<parent-pubkey>"]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Implementation Phases
|
||||
|
||||
### Phase 1: Core Data Model
|
||||
- [x] Create feature branch
|
||||
- [x] Document plan
|
||||
- [x] Create `types/submission.ts` - Type definitions
|
||||
- [x] Create `SubmissionService.ts` - Submission CRUD
|
||||
- [x] Create `LinkPreviewService.ts` - OG tag fetching
|
||||
- [x] Extend `FeedService.ts` - Handle kind 1111
|
||||
|
||||
### Phase 2: Post Creation
|
||||
- [x] Create `SubmitComposer.vue` - Multi-type composer
|
||||
- [x] Add link preview on URL paste
|
||||
- [x] Add NSFW toggle
|
||||
- [x] Add route `/submit` for composer
|
||||
- [ ] Integrate with pictrs for media upload (Future)
|
||||
|
||||
### Phase 3: Feed Display
|
||||
- [x] Create `SubmissionRow.vue` - Link aggregator row (Reddit/Lemmy style)
|
||||
- [x] Create `VoteControls.vue` - Up/down voting
|
||||
- [x] Create `SortTabs.vue` - Sort tabs (hot, new, top, controversial)
|
||||
- [x] Create `SubmissionList.vue` - Main feed container
|
||||
- [x] Create `SubmissionThumbnail.vue` - Thumbnail display
|
||||
- [x] Add feed sorting (hot, new, top, controversial)
|
||||
- [x] Add score calculation
|
||||
- [x] Create `LinkAggregatorTest.vue` - Test page with mock data & live mode
|
||||
|
||||
### Phase 4: Detail View
|
||||
- [x] Create `SubmissionDetail.vue` - Full post view with content display
|
||||
- [x] Create `SubmissionComment.vue` - Recursive threaded comments
|
||||
- [x] Create `SubmissionDetailPage.vue` - Route page wrapper
|
||||
- [x] Add route `/submission/:id` for detail view
|
||||
- [x] Add comment sorting (best, new, old, controversial)
|
||||
- [x] Integrate comment submission via SubmissionService.createComment()
|
||||
|
||||
### Phase 5: Communities (Future)
|
||||
- [ ] Create `CommunityService.ts`
|
||||
- [ ] Create community browser
|
||||
- [ ] Add moderation queue
|
||||
|
||||
## Ranking Algorithms
|
||||
|
||||
### Hot Rank (Lemmy-style)
|
||||
```typescript
|
||||
function hotRank(score: number, createdAt: Date): number {
|
||||
const order = Math.log10(Math.max(Math.abs(score), 1))
|
||||
const sign = score > 0 ? 1 : score < 0 ? -1 : 0
|
||||
const seconds = (createdAt.getTime() - EPOCH.getTime()) / 1000
|
||||
return sign * order + seconds / 45000
|
||||
}
|
||||
```
|
||||
|
||||
### Controversy Rank
|
||||
```typescript
|
||||
function controversyRank(upvotes: number, downvotes: number): number {
|
||||
const total = upvotes + downvotes
|
||||
if (total === 0) return 0
|
||||
const magnitude = Math.pow(total, 0.8)
|
||||
const balance = total > 0 ? Math.min(upvotes, downvotes) / Math.max(upvotes, downvotes) : 0
|
||||
return magnitude * balance
|
||||
}
|
||||
```
|
||||
|
||||
## File Structure
|
||||
|
||||
```
|
||||
src/modules/nostr-feed/
|
||||
├── types/
|
||||
│ └── submission.ts # NEW
|
||||
├── services/
|
||||
│ ├── FeedService.ts # MODIFY
|
||||
│ ├── SubmissionService.ts # NEW
|
||||
│ ├── LinkPreviewService.ts # NEW
|
||||
│ ├── CommunityService.ts # NEW (Phase 5)
|
||||
│ ├── ProfileService.ts # EXISTING
|
||||
│ └── ReactionService.ts # EXISTING (enhance for up/down)
|
||||
├── components/
|
||||
│ ├── SubmissionCard.vue # NEW (Phase 3)
|
||||
│ ├── SubmitComposer.vue # NEW (Phase 2)
|
||||
│ ├── SubmissionDetail.vue # NEW (Phase 4)
|
||||
│ ├── VoteButtons.vue # NEW (Phase 3)
|
||||
│ ├── ThreadedPost.vue # EXISTING (reuse)
|
||||
│ ├── NostrFeed.vue # EXISTING (modify)
|
||||
│ └── NoteComposer.vue # EXISTING
|
||||
├── composables/
|
||||
│ ├── useSubmissions.ts # NEW
|
||||
│ ├── useCommunities.ts # NEW (Phase 5)
|
||||
│ ├── useFeed.ts # EXISTING
|
||||
│ └── useReactions.ts # EXISTING
|
||||
└── config/
|
||||
└── content-filters.ts # MODIFY
|
||||
```
|
||||
|
||||
## Migration Strategy
|
||||
|
||||
1. **Backwards compatible** - Continue supporting kind 1 notes
|
||||
2. **Gradual adoption** - Add kind 1111 alongside existing
|
||||
3. **Feature flag** - Toggle between classic feed and link aggregator view
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* SortTabs - Sort/filter tabs for submission list
|
||||
* Minimal tab row like old Reddit: hot | new | top | controversial
|
||||
*/
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { Flame, Clock, TrendingUp, Swords } from 'lucide-vue-next'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from '@/components/ui/select'
|
||||
import type { SortType, TimeRange } from '../types/submission'
|
||||
|
||||
interface Props {
|
||||
currentSort: SortType
|
||||
currentTimeRange?: TimeRange
|
||||
showTimeRange?: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:sort', sort: SortType): void
|
||||
(e: 'update:timeRange', range: TimeRange): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
currentTimeRange: 'day',
|
||||
showTimeRange: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const sortOptions: { id: SortType; label: string; icon: any }[] = [
|
||||
{ id: 'hot', label: 'hot', icon: Flame },
|
||||
{ id: 'new', label: 'new', icon: Clock },
|
||||
{ id: 'top', label: 'top', icon: TrendingUp },
|
||||
{ id: 'controversial', label: 'controversial', icon: Swords }
|
||||
]
|
||||
|
||||
const timeRangeOptions: { id: TimeRange; label: string }[] = [
|
||||
{ id: 'hour', label: 'hour' },
|
||||
{ id: 'day', label: 'day' },
|
||||
{ id: 'week', label: 'week' },
|
||||
{ id: 'month', label: 'month' },
|
||||
{ id: 'year', label: 'year' },
|
||||
{ id: 'all', label: 'all time' }
|
||||
]
|
||||
|
||||
// Show time range dropdown when top is selected
|
||||
const showTimeDropdown = computed(() =>
|
||||
props.showTimeRange && props.currentSort === 'top'
|
||||
)
|
||||
|
||||
function selectSort(sort: SortType) {
|
||||
emit('update:sort', sort)
|
||||
}
|
||||
|
||||
function selectTimeRange(range: TimeRange) {
|
||||
emit('update:timeRange', range)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center gap-1 text-sm border-b border-border pt-3 pb-2 mb-2">
|
||||
<!-- Sort tabs -->
|
||||
<template v-for="option in sortOptions" :key="option.id">
|
||||
<button
|
||||
type="button"
|
||||
:class="[
|
||||
'px-2 py-1 rounded transition-colors flex items-center gap-1',
|
||||
currentSort === option.id
|
||||
? 'bg-accent text-foreground font-medium'
|
||||
: 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
|
||||
]"
|
||||
@click="selectSort(option.id)"
|
||||
>
|
||||
<component :is="option.icon" class="h-3.5 w-3.5" />
|
||||
<span>{{ option.label }}</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<!-- Time range dropdown (for top) -->
|
||||
<template v-if="showTimeDropdown">
|
||||
<span class="text-muted-foreground mx-1">·</span>
|
||||
<Select
|
||||
:model-value="currentTimeRange"
|
||||
@update:model-value="selectTimeRange($event as TimeRange)"
|
||||
>
|
||||
<SelectTrigger class="h-auto w-auto gap-1 border-0 bg-transparent px-1 py-0.5 text-sm text-muted-foreground shadow-none hover:text-foreground focus:ring-0">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
v-for="range in timeRangeOptions"
|
||||
:key="range.id"
|
||||
:value="range.id"
|
||||
>
|
||||
{{ range.label }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,275 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* SubmissionComment - Recursive comment component for submission threads
|
||||
* Displays a single comment with vote controls and nested replies
|
||||
*/
|
||||
|
||||
import { computed, ref } from 'vue'
|
||||
import { formatDistanceToNow } from 'date-fns'
|
||||
import { ChevronUp, ChevronDown, Reply, Flag, MoreHorizontal, Send } from 'lucide-vue-next'
|
||||
import type { SubmissionComment as CommentType } from '../types/submission'
|
||||
|
||||
interface Props {
|
||||
comment: CommentType
|
||||
depth: number
|
||||
collapsedComments: Set<string>
|
||||
getDisplayName: (pubkey: string) => string
|
||||
isAuthenticated: boolean
|
||||
currentUserPubkey?: string | null
|
||||
replyingToId?: string | null
|
||||
isSubmittingReply?: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'toggle-collapse', commentId: string): void
|
||||
(e: 'reply', comment: CommentType): void
|
||||
(e: 'cancel-reply'): void
|
||||
(e: 'submit-reply', commentId: string, text: string): void
|
||||
(e: 'upvote', comment: CommentType): void
|
||||
(e: 'downvote', comment: CommentType): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
replyingToId: null,
|
||||
isSubmittingReply: false
|
||||
})
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// Local reply text
|
||||
const replyText = ref('')
|
||||
|
||||
// Is this comment being replied to
|
||||
const isBeingRepliedTo = computed(() => props.replyingToId === props.comment.id)
|
||||
|
||||
// Handle reply click
|
||||
function onReplyClick() {
|
||||
emit('reply', props.comment)
|
||||
}
|
||||
|
||||
// Submit the reply
|
||||
function submitReply() {
|
||||
if (!replyText.value.trim()) return
|
||||
emit('submit-reply', props.comment.id, replyText.value.trim())
|
||||
replyText.value = ''
|
||||
}
|
||||
|
||||
// Cancel reply
|
||||
function cancelReply() {
|
||||
replyText.value = ''
|
||||
emit('cancel-reply')
|
||||
}
|
||||
|
||||
// Is this comment collapsed
|
||||
const isCollapsed = computed(() => props.collapsedComments.has(props.comment.id))
|
||||
|
||||
// Has replies
|
||||
const hasReplies = computed(() => props.comment.replies && props.comment.replies.length > 0)
|
||||
|
||||
// Count total nested replies
|
||||
const replyCount = computed(() => {
|
||||
const count = (c: CommentType): number => {
|
||||
let total = c.replies?.length || 0
|
||||
c.replies?.forEach(r => { total += count(r) })
|
||||
return total
|
||||
}
|
||||
return count(props.comment)
|
||||
})
|
||||
|
||||
// Format time
|
||||
function formatTime(timestamp: number): string {
|
||||
return formatDistanceToNow(timestamp * 1000, { addSuffix: true })
|
||||
}
|
||||
|
||||
// Depth colors for threading lines (using theme-aware chart colors)
|
||||
const depthColors = [
|
||||
'bg-chart-1',
|
||||
'bg-chart-2',
|
||||
'bg-chart-3',
|
||||
'bg-chart-4',
|
||||
'bg-chart-5'
|
||||
]
|
||||
|
||||
const depthColor = computed(() => depthColors[props.depth % depthColors.length])
|
||||
|
||||
// Is own comment
|
||||
const isOwnComment = computed(() =>
|
||||
props.currentUserPubkey && props.currentUserPubkey === props.comment.pubkey
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'relative',
|
||||
depth > 0 ? 'ml-0.5' : ''
|
||||
]"
|
||||
>
|
||||
<!-- Threading line -->
|
||||
<div
|
||||
v-if="depth > 0"
|
||||
:class="[
|
||||
'absolute left-0 top-0 bottom-0 w-0.5',
|
||||
depthColor,
|
||||
'hover:w-1 transition-all cursor-pointer'
|
||||
]"
|
||||
@click="emit('toggle-collapse', comment.id)"
|
||||
/>
|
||||
|
||||
<!-- Comment content -->
|
||||
<div
|
||||
:class="[
|
||||
'py-1',
|
||||
depth > 0 ? 'pl-2' : '',
|
||||
'hover:bg-accent/20 transition-colors'
|
||||
]"
|
||||
>
|
||||
<!-- Header row -->
|
||||
<div class="flex items-center gap-2 text-xs">
|
||||
<!-- Collapse toggle -->
|
||||
<button
|
||||
v-if="hasReplies"
|
||||
class="text-muted-foreground hover:text-foreground"
|
||||
@click="emit('toggle-collapse', comment.id)"
|
||||
>
|
||||
<ChevronDown v-if="!isCollapsed" class="h-3.5 w-3.5" />
|
||||
<ChevronUp v-else class="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<div v-else class="w-3.5" />
|
||||
|
||||
<!-- Author -->
|
||||
<span class="font-medium hover:underline cursor-pointer">
|
||||
{{ getDisplayName(comment.pubkey) }}
|
||||
</span>
|
||||
|
||||
<!-- Score -->
|
||||
<span class="text-muted-foreground">
|
||||
{{ comment.votes.score }} {{ comment.votes.score === 1 ? 'point' : 'points' }}
|
||||
</span>
|
||||
|
||||
<!-- Time -->
|
||||
<span class="text-muted-foreground">
|
||||
{{ formatTime(comment.created_at) }}
|
||||
</span>
|
||||
|
||||
<!-- Collapsed indicator -->
|
||||
<span v-if="isCollapsed && hasReplies" class="text-muted-foreground">
|
||||
({{ replyCount }} {{ replyCount === 1 ? 'child' : 'children' }})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Content (hidden when collapsed) -->
|
||||
<div v-if="!isCollapsed">
|
||||
<!-- Comment body -->
|
||||
<div class="mt-1 text-sm whitespace-pre-wrap leading-relaxed pl-5">
|
||||
{{ comment.content }}
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center gap-1 mt-1 pl-5">
|
||||
<!-- Vote buttons (inline style) -->
|
||||
<button
|
||||
:class="[
|
||||
'p-1 transition-colors',
|
||||
comment.votes.userVote === 'upvote'
|
||||
? 'text-orange-500'
|
||||
: 'text-muted-foreground hover:text-orange-500'
|
||||
]"
|
||||
:disabled="!isAuthenticated"
|
||||
@click="emit('upvote', comment)"
|
||||
>
|
||||
<ChevronUp class="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
:class="[
|
||||
'p-1 transition-colors',
|
||||
comment.votes.userVote === 'downvote'
|
||||
? 'text-blue-500'
|
||||
: 'text-muted-foreground hover:text-blue-500'
|
||||
]"
|
||||
:disabled="!isAuthenticated"
|
||||
@click="emit('downvote', comment)"
|
||||
>
|
||||
<ChevronDown class="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<!-- Reply -->
|
||||
<button
|
||||
class="flex items-center gap-1 px-2 py-1 text-xs text-muted-foreground hover:text-foreground hover:bg-accent rounded transition-colors"
|
||||
:disabled="!isAuthenticated"
|
||||
@click="onReplyClick"
|
||||
>
|
||||
<Reply class="h-3 w-3" />
|
||||
<span>reply</span>
|
||||
</button>
|
||||
|
||||
<!-- Report (not for own comments) -->
|
||||
<button
|
||||
v-if="!isOwnComment"
|
||||
class="flex items-center gap-1 px-2 py-1 text-xs text-muted-foreground hover:text-foreground hover:bg-accent rounded transition-colors"
|
||||
>
|
||||
<Flag class="h-3 w-3" />
|
||||
<span>report</span>
|
||||
</button>
|
||||
|
||||
<!-- More options -->
|
||||
<button
|
||||
class="p-1 text-muted-foreground hover:text-foreground hover:bg-accent rounded transition-colors"
|
||||
>
|
||||
<MoreHorizontal class="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Inline reply form -->
|
||||
<div v-if="isBeingRepliedTo" class="mt-2 pl-5">
|
||||
<div class="border rounded-lg bg-background p-2">
|
||||
<textarea
|
||||
v-model="replyText"
|
||||
placeholder="Write a reply..."
|
||||
rows="3"
|
||||
class="w-full px-2 py-1.5 text-sm bg-transparent resize-none focus:outline-none"
|
||||
:disabled="isSubmittingReply"
|
||||
/>
|
||||
<div class="flex items-center justify-end gap-2 mt-1">
|
||||
<button
|
||||
class="px-3 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||||
@click="cancelReply"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
class="flex items-center gap-1 px-3 py-1 text-xs bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors disabled:opacity-50"
|
||||
:disabled="!replyText.trim() || isSubmittingReply"
|
||||
@click="submitReply"
|
||||
>
|
||||
<Send class="h-3 w-3" />
|
||||
Reply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nested replies -->
|
||||
<div v-if="hasReplies" class="mt-1">
|
||||
<SubmissionComment
|
||||
v-for="reply in comment.replies"
|
||||
:key="reply.id"
|
||||
:comment="reply"
|
||||
:depth="depth + 1"
|
||||
:collapsed-comments="collapsedComments"
|
||||
:get-display-name="getDisplayName"
|
||||
:is-authenticated="isAuthenticated"
|
||||
:current-user-pubkey="currentUserPubkey"
|
||||
:replying-to-id="replyingToId"
|
||||
:is-submitting-reply="isSubmittingReply"
|
||||
@toggle-collapse="emit('toggle-collapse', $event)"
|
||||
@reply="emit('reply', $event)"
|
||||
@cancel-reply="emit('cancel-reply')"
|
||||
@submit-reply="(commentId, text) => emit('submit-reply', commentId, text)"
|
||||
@upvote="emit('upvote', $event)"
|
||||
@downvote="emit('downvote', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,553 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* SubmissionDetail - Full post view with comments
|
||||
* Displays complete submission content and threaded comments
|
||||
*/
|
||||
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { formatDistanceToNow } from 'date-fns'
|
||||
import {
|
||||
ArrowLeft,
|
||||
MessageSquare,
|
||||
Share2,
|
||||
Bookmark,
|
||||
Flag,
|
||||
ExternalLink,
|
||||
Image as ImageIcon,
|
||||
FileText,
|
||||
Loader2,
|
||||
Send
|
||||
} from 'lucide-vue-next'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import VoteControls from './VoteControls.vue'
|
||||
import SubmissionCommentComponent from './SubmissionComment.vue'
|
||||
import { useSubmission } from '../composables/useSubmissions'
|
||||
import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||
import type { ProfileService } from '../services/ProfileService'
|
||||
import type { SubmissionService } from '../services/SubmissionService'
|
||||
import type {
|
||||
SubmissionComment as SubmissionCommentType,
|
||||
LinkSubmission,
|
||||
MediaSubmission,
|
||||
SelfSubmission
|
||||
} from '../types/submission'
|
||||
|
||||
interface Props {
|
||||
/** Submission ID to display */
|
||||
submissionId: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const router = useRouter()
|
||||
|
||||
// Comment sort options
|
||||
type CommentSort = 'best' | 'new' | 'old' | 'controversial'
|
||||
|
||||
// Inject services
|
||||
const profileService = tryInjectService<ProfileService>(SERVICE_TOKENS.PROFILE_SERVICE)
|
||||
const authService = tryInjectService<any>(SERVICE_TOKENS.AUTH_SERVICE)
|
||||
const submissionService = tryInjectService<SubmissionService>(SERVICE_TOKENS.SUBMISSION_SERVICE)
|
||||
|
||||
// Use submission composable - handles subscription automatically
|
||||
const { submission, comments, upvote, downvote, isLoading, error } = useSubmission(props.submissionId)
|
||||
|
||||
// Comment composer state
|
||||
const showComposer = ref(false)
|
||||
const replyingTo = ref<{ id: string; author: string } | null>(null)
|
||||
const commentText = ref('')
|
||||
const isSubmittingComment = ref(false)
|
||||
const commentError = ref<string | null>(null)
|
||||
|
||||
// Comment sorting state
|
||||
const commentSort = ref<CommentSort>('best')
|
||||
|
||||
// Collapsed comments state
|
||||
const collapsedComments = ref(new Set<string>())
|
||||
|
||||
// Sorted comments
|
||||
const sortedComments = computed(() => {
|
||||
if (submissionService) {
|
||||
return submissionService.getSortedComments(props.submissionId, commentSort.value)
|
||||
}
|
||||
return comments.value
|
||||
})
|
||||
|
||||
// Auth state
|
||||
const isAuthenticated = computed(() => authService?.isAuthenticated?.value || false)
|
||||
const currentUserPubkey = computed(() => authService?.user?.value?.pubkey || null)
|
||||
|
||||
// Get display name for a pubkey
|
||||
function getDisplayName(pubkey: string): string {
|
||||
if (profileService) {
|
||||
return profileService.getDisplayName(pubkey)
|
||||
}
|
||||
return `${pubkey.slice(0, 8)}...`
|
||||
}
|
||||
|
||||
// Format timestamp
|
||||
function formatTime(timestamp: number): string {
|
||||
return formatDistanceToNow(timestamp * 1000, { addSuffix: true })
|
||||
}
|
||||
|
||||
// Extract domain from URL
|
||||
function extractDomain(url: string): string {
|
||||
try {
|
||||
return new URL(url).hostname.replace('www.', '')
|
||||
} catch {
|
||||
return url
|
||||
}
|
||||
}
|
||||
|
||||
// Cast submission to specific type
|
||||
const linkSubmission = computed(() =>
|
||||
submission.value?.postType === 'link' ? submission.value as LinkSubmission : null
|
||||
)
|
||||
const mediaSubmission = computed(() =>
|
||||
submission.value?.postType === 'media' ? submission.value as MediaSubmission : null
|
||||
)
|
||||
const selfSubmission = computed(() =>
|
||||
submission.value?.postType === 'self' ? submission.value as SelfSubmission : null
|
||||
)
|
||||
|
||||
// Community name
|
||||
const communityName = computed(() => {
|
||||
if (!submission.value?.communityRef) return null
|
||||
const parts = submission.value.communityRef.split(':')
|
||||
return parts.length >= 3 ? parts.slice(2).join(':') : null
|
||||
})
|
||||
|
||||
// Handle voting
|
||||
async function onUpvote() {
|
||||
if (!isAuthenticated.value) return
|
||||
try {
|
||||
await upvote()
|
||||
} catch (err) {
|
||||
console.error('Failed to upvote:', err)
|
||||
}
|
||||
}
|
||||
|
||||
async function onDownvote() {
|
||||
if (!isAuthenticated.value) return
|
||||
try {
|
||||
await downvote()
|
||||
} catch (err) {
|
||||
console.error('Failed to downvote:', err)
|
||||
}
|
||||
}
|
||||
|
||||
// Handle comment voting
|
||||
async function onCommentUpvote(comment: SubmissionCommentType) {
|
||||
if (!isAuthenticated.value || !submissionService) return
|
||||
try {
|
||||
await submissionService.upvoteComment(props.submissionId, comment.id)
|
||||
} catch (err) {
|
||||
console.error('Failed to upvote comment:', err)
|
||||
}
|
||||
}
|
||||
|
||||
async function onCommentDownvote(comment: SubmissionCommentType) {
|
||||
if (!isAuthenticated.value || !submissionService) return
|
||||
try {
|
||||
await submissionService.downvoteComment(props.submissionId, comment.id)
|
||||
} catch (err) {
|
||||
console.error('Failed to downvote comment:', err)
|
||||
}
|
||||
}
|
||||
|
||||
// Handle share
|
||||
function onShare() {
|
||||
const url = window.location.href
|
||||
navigator.clipboard?.writeText(url)
|
||||
// TODO: Show toast
|
||||
}
|
||||
|
||||
// Computed for passing to comment components
|
||||
const replyingToId = computed(() => replyingTo.value?.id || null)
|
||||
|
||||
// Handle comment reply - for inline replies to comments
|
||||
function startReply(comment?: SubmissionCommentType) {
|
||||
if (comment) {
|
||||
// Replying to a comment - show inline form (handled by SubmissionComment)
|
||||
replyingTo.value = { id: comment.id, author: getDisplayName(comment.pubkey) }
|
||||
showComposer.value = false // Hide top composer
|
||||
} else {
|
||||
// Top-level comment - show top composer
|
||||
replyingTo.value = null
|
||||
showComposer.value = true
|
||||
}
|
||||
commentText.value = ''
|
||||
}
|
||||
|
||||
function cancelReply() {
|
||||
showComposer.value = false
|
||||
replyingTo.value = null
|
||||
commentText.value = ''
|
||||
}
|
||||
|
||||
// Submit top-level comment (from top composer)
|
||||
async function submitComment() {
|
||||
if (!commentText.value.trim() || !isAuthenticated.value || !submissionService) return
|
||||
|
||||
isSubmittingComment.value = true
|
||||
commentError.value = null
|
||||
|
||||
try {
|
||||
await submissionService.createComment(
|
||||
props.submissionId,
|
||||
commentText.value.trim(),
|
||||
undefined // Top-level comment
|
||||
)
|
||||
cancelReply()
|
||||
} catch (err: any) {
|
||||
console.error('Failed to submit comment:', err)
|
||||
commentError.value = err.message || 'Failed to post comment'
|
||||
} finally {
|
||||
isSubmittingComment.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Submit inline reply (from SubmissionComment's inline form)
|
||||
async function submitReply(commentId: string, text: string) {
|
||||
if (!text.trim() || !isAuthenticated.value || !submissionService) return
|
||||
|
||||
isSubmittingComment.value = true
|
||||
commentError.value = null
|
||||
|
||||
try {
|
||||
await submissionService.createComment(
|
||||
props.submissionId,
|
||||
text.trim(),
|
||||
commentId
|
||||
)
|
||||
cancelReply()
|
||||
} catch (err: any) {
|
||||
console.error('Failed to submit reply:', err)
|
||||
commentError.value = err.message || 'Failed to post reply'
|
||||
} finally {
|
||||
isSubmittingComment.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle comment collapse
|
||||
function toggleCollapse(commentId: string) {
|
||||
if (collapsedComments.value.has(commentId)) {
|
||||
collapsedComments.value.delete(commentId)
|
||||
} else {
|
||||
collapsedComments.value.add(commentId)
|
||||
}
|
||||
// Trigger reactivity
|
||||
collapsedComments.value = new Set(collapsedComments.value)
|
||||
}
|
||||
|
||||
// Go back
|
||||
function goBack() {
|
||||
router.back()
|
||||
}
|
||||
|
||||
// Helper to collect all pubkeys from comments recursively
|
||||
function collectCommentPubkeys(comments: SubmissionCommentType[]): string[] {
|
||||
const pubkeys: string[] = []
|
||||
for (const comment of comments) {
|
||||
pubkeys.push(comment.pubkey)
|
||||
if (comment.replies?.length) {
|
||||
pubkeys.push(...collectCommentPubkeys(comment.replies))
|
||||
}
|
||||
}
|
||||
return pubkeys
|
||||
}
|
||||
|
||||
// Fetch profiles when submission loads
|
||||
watch(submission, (sub) => {
|
||||
if (profileService && sub) {
|
||||
profileService.fetchProfiles([sub.pubkey])
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
// Fetch profiles when comments load
|
||||
watch(comments, (newComments) => {
|
||||
if (profileService && newComments.length > 0) {
|
||||
const pubkeys = [...new Set(collectCommentPubkeys(newComments))]
|
||||
profileService.fetchProfiles(pubkeys)
|
||||
}
|
||||
}, { immediate: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-background">
|
||||
<!-- Header -->
|
||||
<header class="sticky top-0 z-30 bg-background/95 backdrop-blur border-b">
|
||||
<div class="max-w-4xl mx-auto px-4 py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<Button variant="ghost" size="sm" @click="goBack" class="h-8 w-8 p-0">
|
||||
<ArrowLeft class="h-4 w-4" />
|
||||
</Button>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h1 class="text-sm font-medium truncate">
|
||||
{{ submission?.title || 'Loading...' }}
|
||||
</h1>
|
||||
<p v-if="communityName" class="text-xs text-muted-foreground">
|
||||
{{ communityName }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Loading state -->
|
||||
<div v-if="isLoading && !submission" class="flex items-center justify-center py-16">
|
||||
<Loader2 class="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
<span class="ml-2 text-sm text-muted-foreground">Loading submission...</span>
|
||||
</div>
|
||||
|
||||
<!-- Error state -->
|
||||
<div v-else-if="error" class="max-w-4xl mx-auto p-4">
|
||||
<div class="text-center py-8">
|
||||
<p class="text-sm text-destructive">{{ error }}</p>
|
||||
<Button variant="outline" size="sm" class="mt-4" @click="goBack">
|
||||
Go Back
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submission content -->
|
||||
<main v-else-if="submission" class="max-w-4xl mx-auto">
|
||||
<article class="p-4 border-b">
|
||||
<!-- Post header with votes -->
|
||||
<div class="flex gap-3">
|
||||
<!-- Vote controls -->
|
||||
<VoteControls
|
||||
:score="submission.votes.score"
|
||||
:user-vote="submission.votes.userVote"
|
||||
:disabled="!isAuthenticated"
|
||||
@upvote="onUpvote"
|
||||
@downvote="onDownvote"
|
||||
/>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Title -->
|
||||
<h1 class="text-xl font-semibold leading-tight mb-2">
|
||||
{{ submission.title }}
|
||||
</h1>
|
||||
|
||||
<!-- Badges -->
|
||||
<div v-if="submission.nsfw || submission.flair" class="flex items-center gap-2 mb-2">
|
||||
<Badge v-if="submission.nsfw" variant="destructive" class="text-xs">
|
||||
NSFW
|
||||
</Badge>
|
||||
<Badge v-if="submission.flair" variant="secondary" class="text-xs">
|
||||
{{ submission.flair }}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<!-- Metadata -->
|
||||
<div class="text-sm text-muted-foreground mb-4">
|
||||
<span>submitted {{ formatTime(submission.created_at) }}</span>
|
||||
<span> by </span>
|
||||
<span class="font-medium hover:underline cursor-pointer">
|
||||
{{ getDisplayName(submission.pubkey) }}
|
||||
</span>
|
||||
<template v-if="communityName">
|
||||
<span> to </span>
|
||||
<span class="font-medium hover:underline cursor-pointer">{{ communityName }}</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Link post content -->
|
||||
<div v-if="linkSubmission" class="mb-4">
|
||||
<a
|
||||
:href="linkSubmission.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="block p-4 border rounded-lg hover:bg-accent/30 transition-colors group"
|
||||
>
|
||||
<div class="flex items-start gap-4">
|
||||
<!-- Preview image -->
|
||||
<div
|
||||
v-if="linkSubmission.preview?.image"
|
||||
class="flex-shrink-0 w-32 h-24 rounded overflow-hidden bg-muted"
|
||||
>
|
||||
<img
|
||||
:src="linkSubmission.preview.image"
|
||||
:alt="linkSubmission.preview.title || ''"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="flex-shrink-0 w-16 h-16 rounded bg-muted flex items-center justify-center">
|
||||
<ExternalLink class="h-6 w-6 text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<!-- Preview content -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 text-xs text-muted-foreground mb-1">
|
||||
<ExternalLink class="h-3 w-3" />
|
||||
<span>{{ extractDomain(linkSubmission.url) }}</span>
|
||||
</div>
|
||||
<h3 v-if="linkSubmission.preview?.title" class="font-medium text-sm group-hover:underline">
|
||||
{{ linkSubmission.preview.title }}
|
||||
</h3>
|
||||
<p v-if="linkSubmission.preview?.description" class="text-xs text-muted-foreground mt-1 line-clamp-2">
|
||||
{{ linkSubmission.preview.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Optional body -->
|
||||
<div v-if="linkSubmission.body" class="mt-4 text-sm whitespace-pre-wrap">
|
||||
{{ linkSubmission.body }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Media post content -->
|
||||
<div v-if="mediaSubmission" class="mb-4">
|
||||
<div class="rounded-lg overflow-hidden bg-muted">
|
||||
<img
|
||||
v-if="mediaSubmission.media.mimeType?.startsWith('image/')"
|
||||
:src="mediaSubmission.media.url"
|
||||
:alt="mediaSubmission.media.alt || ''"
|
||||
class="max-w-full max-h-[600px] mx-auto"
|
||||
/>
|
||||
<video
|
||||
v-else-if="mediaSubmission.media.mimeType?.startsWith('video/')"
|
||||
:src="mediaSubmission.media.url"
|
||||
controls
|
||||
class="max-w-full max-h-[600px] mx-auto"
|
||||
/>
|
||||
<div v-else class="p-8 flex flex-col items-center justify-center">
|
||||
<ImageIcon class="h-12 w-12 text-muted-foreground mb-2" />
|
||||
<a
|
||||
:href="mediaSubmission.media.url"
|
||||
target="_blank"
|
||||
class="text-sm text-primary hover:underline"
|
||||
>
|
||||
View media
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Caption -->
|
||||
<div v-if="mediaSubmission.body" class="mt-4 text-sm whitespace-pre-wrap">
|
||||
{{ mediaSubmission.body }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Self post content -->
|
||||
<div v-if="selfSubmission" class="mb-4">
|
||||
<div class="text-sm whitespace-pre-wrap leading-relaxed">
|
||||
{{ selfSubmission.body }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<button
|
||||
class="flex items-center gap-1.5 hover:text-foreground transition-colors"
|
||||
@click="startReply()"
|
||||
>
|
||||
<MessageSquare class="h-4 w-4" />
|
||||
<span>{{ submission.commentCount }} comments</span>
|
||||
</button>
|
||||
<button
|
||||
class="flex items-center gap-1.5 hover:text-foreground transition-colors"
|
||||
@click="onShare"
|
||||
>
|
||||
<Share2 class="h-4 w-4" />
|
||||
<span>share</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-1.5 hover:text-foreground transition-colors">
|
||||
<Bookmark class="h-4 w-4" />
|
||||
<span>save</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-1.5 hover:text-foreground transition-colors">
|
||||
<Flag class="h-4 w-4" />
|
||||
<span>report</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Top-level comment composer (only for new comments, not replies) -->
|
||||
<div v-if="isAuthenticated && !replyingTo" class="p-4 border-b">
|
||||
<div class="flex gap-2">
|
||||
<textarea
|
||||
v-model="commentText"
|
||||
placeholder="Write a comment..."
|
||||
rows="3"
|
||||
class="flex-1 px-3 py-2 text-sm border rounded-lg bg-background resize-none focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
<!-- Comment error -->
|
||||
<div v-if="commentError" class="mt-2 text-sm text-destructive">
|
||||
{{ commentError }}
|
||||
</div>
|
||||
<div class="flex justify-end mt-2">
|
||||
<Button
|
||||
size="sm"
|
||||
:disabled="!commentText.trim() || isSubmittingComment"
|
||||
@click="submitComment"
|
||||
>
|
||||
<Loader2 v-if="isSubmittingComment" class="h-4 w-4 animate-spin mr-2" />
|
||||
<Send v-else class="h-4 w-4 mr-2" />
|
||||
Comment
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Comments section -->
|
||||
<section class="divide-y divide-border">
|
||||
<!-- Comment sort selector -->
|
||||
<div v-if="sortedComments.length > 0" class="px-4 py-3 border-b flex items-center gap-2">
|
||||
<span class="text-sm text-muted-foreground">Sort by:</span>
|
||||
<select
|
||||
v-model="commentSort"
|
||||
class="text-sm bg-background border rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
>
|
||||
<option value="best">Best</option>
|
||||
<option value="new">New</option>
|
||||
<option value="old">Old</option>
|
||||
<option value="controversial">Controversial</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div v-if="sortedComments.length === 0" class="p-8 text-center text-sm text-muted-foreground">
|
||||
No comments yet. Be the first to comment!
|
||||
</div>
|
||||
|
||||
<!-- Recursive comment rendering -->
|
||||
<template v-for="comment in sortedComments" :key="comment.id">
|
||||
<SubmissionCommentComponent
|
||||
:comment="comment"
|
||||
:depth="0"
|
||||
:collapsed-comments="collapsedComments"
|
||||
:get-display-name="getDisplayName"
|
||||
:is-authenticated="isAuthenticated"
|
||||
:current-user-pubkey="currentUserPubkey"
|
||||
:replying-to-id="replyingToId"
|
||||
:is-submitting-reply="isSubmittingComment"
|
||||
@toggle-collapse="toggleCollapse"
|
||||
@reply="startReply"
|
||||
@cancel-reply="cancelReply"
|
||||
@submit-reply="submitReply"
|
||||
@upvote="onCommentUpvote"
|
||||
@downvote="onCommentDownvote"
|
||||
/>
|
||||
</template>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Not found state -->
|
||||
<div v-else class="max-w-4xl mx-auto p-4">
|
||||
<div class="text-center py-16">
|
||||
<FileText class="h-12 w-12 text-muted-foreground mx-auto mb-4" />
|
||||
<p class="text-sm text-muted-foreground">Submission not found</p>
|
||||
<Button variant="outline" size="sm" class="mt-4" @click="goBack">
|
||||
Go Back
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,235 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* SubmissionList - Main container for Reddit/Lemmy style submission feed
|
||||
* Includes sort tabs, submission rows, and loading states
|
||||
*/
|
||||
|
||||
import { computed, onMounted, watch } from 'vue'
|
||||
import { Loader2 } from 'lucide-vue-next'
|
||||
import SortTabs from './SortTabs.vue'
|
||||
import SubmissionRow from './SubmissionRow.vue'
|
||||
import { useSubmissions } from '../composables/useSubmissions'
|
||||
import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||
import type { ProfileService } from '../services/ProfileService'
|
||||
import type { SubmissionWithMeta, SortType, TimeRange, CommunityRef } from '../types/submission'
|
||||
|
||||
interface Props {
|
||||
/** Community to filter by */
|
||||
community?: CommunityRef | null
|
||||
/** Show rank numbers */
|
||||
showRanks?: boolean
|
||||
/** Show time range selector for top sort */
|
||||
showTimeRange?: boolean
|
||||
/** Initial sort */
|
||||
initialSort?: SortType
|
||||
/** Max submissions to show */
|
||||
limit?: number
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'submission-click', submission: SubmissionWithMeta): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
showRanks: false,
|
||||
showTimeRange: true,
|
||||
initialSort: 'hot',
|
||||
limit: 50
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// Inject profile service for display names
|
||||
const profileService = tryInjectService<ProfileService>(SERVICE_TOKENS.PROFILE_SERVICE)
|
||||
|
||||
// Auth service for checking authentication
|
||||
const authService = tryInjectService<any>(SERVICE_TOKENS.AUTH_SERVICE)
|
||||
|
||||
// Use submissions composable
|
||||
const {
|
||||
submissions,
|
||||
isLoading,
|
||||
error,
|
||||
currentSort,
|
||||
currentTimeRange,
|
||||
subscribe,
|
||||
upvote,
|
||||
downvote,
|
||||
setSort
|
||||
} = useSubmissions({
|
||||
autoSubscribe: false,
|
||||
config: {
|
||||
community: props.community,
|
||||
limit: props.limit
|
||||
}
|
||||
})
|
||||
|
||||
// Set initial sort
|
||||
currentSort.value = props.initialSort
|
||||
|
||||
// Current user pubkey
|
||||
const currentUserPubkey = computed(() => authService?.user?.value?.pubkey || null)
|
||||
|
||||
// Is user authenticated
|
||||
const isAuthenticated = computed(() => authService?.isAuthenticated?.value || false)
|
||||
|
||||
// Get display name for a pubkey
|
||||
function getDisplayName(pubkey: string): string {
|
||||
if (profileService) {
|
||||
return profileService.getDisplayName(pubkey)
|
||||
}
|
||||
// Fallback to truncated pubkey
|
||||
return `${pubkey.slice(0, 8)}...`
|
||||
}
|
||||
|
||||
// Handle sort change
|
||||
function onSortChange(sort: SortType) {
|
||||
setSort(sort, currentTimeRange.value)
|
||||
}
|
||||
|
||||
// Handle time range change
|
||||
function onTimeRangeChange(range: TimeRange) {
|
||||
setSort(currentSort.value, range)
|
||||
}
|
||||
|
||||
// Handle upvote
|
||||
async function onUpvote(submission: SubmissionWithMeta) {
|
||||
try {
|
||||
await upvote(submission.id)
|
||||
} catch (err) {
|
||||
console.error('Failed to upvote:', err)
|
||||
}
|
||||
}
|
||||
|
||||
// Handle downvote
|
||||
async function onDownvote(submission: SubmissionWithMeta) {
|
||||
try {
|
||||
await downvote(submission.id)
|
||||
} catch (err) {
|
||||
console.error('Failed to downvote:', err)
|
||||
}
|
||||
}
|
||||
|
||||
// Handle submission click
|
||||
function onSubmissionClick(submission: SubmissionWithMeta) {
|
||||
emit('submission-click', submission)
|
||||
}
|
||||
|
||||
// Handle share
|
||||
function onShare(submission: SubmissionWithMeta) {
|
||||
// Copy link to clipboard or open share dialog
|
||||
const url = `${window.location.origin}/submission/${submission.id}`
|
||||
navigator.clipboard?.writeText(url)
|
||||
// TODO: Show toast notification
|
||||
}
|
||||
|
||||
// Handle save
|
||||
function onSave(submission: SubmissionWithMeta) {
|
||||
// TODO: Implement save functionality
|
||||
console.log('Save:', submission.id)
|
||||
}
|
||||
|
||||
// Handle hide
|
||||
function onHide(submission: SubmissionWithMeta) {
|
||||
// TODO: Implement hide functionality
|
||||
console.log('Hide:', submission.id)
|
||||
}
|
||||
|
||||
// Handle report
|
||||
function onReport(submission: SubmissionWithMeta) {
|
||||
// TODO: Implement report functionality
|
||||
console.log('Report:', submission.id)
|
||||
}
|
||||
|
||||
// Fetch profiles when submissions change
|
||||
watch(submissions, (newSubmissions) => {
|
||||
if (profileService && newSubmissions.length > 0) {
|
||||
const pubkeys = [...new Set(newSubmissions.map(s => s.pubkey))]
|
||||
profileService.fetchProfiles(pubkeys)
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
// Subscribe when community changes
|
||||
watch(() => props.community, () => {
|
||||
subscribe({
|
||||
community: props.community,
|
||||
limit: props.limit
|
||||
})
|
||||
}, { immediate: false })
|
||||
|
||||
// Initial subscribe
|
||||
onMounted(() => {
|
||||
subscribe({
|
||||
community: props.community,
|
||||
limit: props.limit
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="submission-list">
|
||||
<!-- Sort tabs -->
|
||||
<SortTabs
|
||||
:current-sort="currentSort"
|
||||
:current-time-range="currentTimeRange"
|
||||
:show-time-range="showTimeRange"
|
||||
@update:sort="onSortChange"
|
||||
@update:time-range="onTimeRangeChange"
|
||||
/>
|
||||
|
||||
<!-- Loading state -->
|
||||
<div v-if="isLoading && submissions.length === 0" class="flex items-center justify-center py-8">
|
||||
<Loader2 class="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
<span class="ml-2 text-sm text-muted-foreground">Loading submissions...</span>
|
||||
</div>
|
||||
|
||||
<!-- Error state -->
|
||||
<div v-else-if="error" class="text-center py-8">
|
||||
<p class="text-sm text-destructive">{{ error }}</p>
|
||||
<button
|
||||
type="button"
|
||||
class="mt-2 text-sm text-primary hover:underline"
|
||||
@click="subscribe({ community, limit })"
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div v-else-if="submissions.length === 0" class="text-center py-8">
|
||||
<p class="text-sm text-muted-foreground">No submissions yet</p>
|
||||
</div>
|
||||
|
||||
<!-- Submission list -->
|
||||
<div v-else class="divide-y divide-border">
|
||||
<SubmissionRow
|
||||
v-for="(submission, index) in submissions"
|
||||
:key="submission.id"
|
||||
:submission="submission"
|
||||
:rank="showRanks ? index + 1 : undefined"
|
||||
:get-display-name="getDisplayName"
|
||||
:current-user-pubkey="currentUserPubkey"
|
||||
:is-authenticated="isAuthenticated"
|
||||
@upvote="onUpvote"
|
||||
@downvote="onDownvote"
|
||||
@click="onSubmissionClick"
|
||||
@share="onShare"
|
||||
@save="onSave"
|
||||
@hide="onHide"
|
||||
@report="onReport"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Loading more indicator -->
|
||||
<div v-if="isLoading && submissions.length > 0" class="flex items-center justify-center py-4">
|
||||
<Loader2 class="h-4 w-4 animate-spin text-muted-foreground" />
|
||||
<span class="ml-2 text-xs text-muted-foreground">Loading more...</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.submission-list {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,247 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* SubmissionRow - Single submission row in Reddit/Lemmy style
|
||||
* Compact, information-dense layout with votes, thumbnail, title, metadata
|
||||
*/
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { formatDistanceToNow } from 'date-fns'
|
||||
import { MessageSquare, Share2, Bookmark, EyeOff, Flag, Link2 } from 'lucide-vue-next'
|
||||
import VoteControls from './VoteControls.vue'
|
||||
import SubmissionThumbnail from './SubmissionThumbnail.vue'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import type { SubmissionWithMeta, LinkSubmission, MediaSubmission } from '../types/submission'
|
||||
import { extractDomain } from '../types/submission'
|
||||
|
||||
interface Props {
|
||||
submission: SubmissionWithMeta
|
||||
/** Display name resolver */
|
||||
getDisplayName: (pubkey: string) => string
|
||||
/** Current user pubkey for "own post" detection */
|
||||
currentUserPubkey?: string | null
|
||||
/** Show rank number */
|
||||
rank?: number
|
||||
/** Whether user is authenticated (for voting) */
|
||||
isAuthenticated?: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'upvote', submission: SubmissionWithMeta): void
|
||||
(e: 'downvote', submission: SubmissionWithMeta): void
|
||||
(e: 'click', submission: SubmissionWithMeta): void
|
||||
(e: 'save', submission: SubmissionWithMeta): void
|
||||
(e: 'hide', submission: SubmissionWithMeta): void
|
||||
(e: 'report', submission: SubmissionWithMeta): void
|
||||
(e: 'share', submission: SubmissionWithMeta): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
isAuthenticated: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// Extract thumbnail URL based on post type
|
||||
const thumbnailUrl = computed(() => {
|
||||
const s = props.submission
|
||||
|
||||
if (s.postType === 'link') {
|
||||
const link = s as LinkSubmission
|
||||
return link.preview?.image || undefined
|
||||
}
|
||||
|
||||
if (s.postType === 'media') {
|
||||
const media = s as MediaSubmission
|
||||
return media.media.thumbnail || media.media.url
|
||||
}
|
||||
|
||||
return undefined
|
||||
})
|
||||
|
||||
// Extract domain for link posts
|
||||
const domain = computed(() => {
|
||||
if (props.submission.postType === 'link') {
|
||||
const link = props.submission as LinkSubmission
|
||||
return extractDomain(link.url)
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
// Format timestamp
|
||||
const timeAgo = computed(() => {
|
||||
return formatDistanceToNow(props.submission.created_at * 1000, { addSuffix: true })
|
||||
})
|
||||
|
||||
// Author display name
|
||||
const authorName = computed(() => {
|
||||
return props.getDisplayName(props.submission.pubkey)
|
||||
})
|
||||
|
||||
// Is this the user's own post?
|
||||
const isOwnPost = computed(() => {
|
||||
return props.currentUserPubkey === props.submission.pubkey
|
||||
})
|
||||
|
||||
// Community name (if any)
|
||||
const communityName = computed(() => {
|
||||
const ref = props.submission.communityRef
|
||||
if (!ref) return null
|
||||
// Extract identifier from "34550:pubkey:identifier"
|
||||
const parts = ref.split(':')
|
||||
return parts.length >= 3 ? parts.slice(2).join(':') : null
|
||||
})
|
||||
|
||||
// Post type indicator for self posts
|
||||
const postTypeLabel = computed(() => {
|
||||
if (props.submission.postType === 'self') return 'self'
|
||||
return null
|
||||
})
|
||||
|
||||
function onTitleClick() {
|
||||
if (props.submission.postType === 'link') {
|
||||
// Open external link
|
||||
const link = props.submission as LinkSubmission
|
||||
window.open(link.url, '_blank', 'noopener,noreferrer')
|
||||
} else {
|
||||
// Navigate to post detail
|
||||
emit('click', props.submission)
|
||||
}
|
||||
}
|
||||
|
||||
function onCommentsClick() {
|
||||
emit('click', props.submission)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-start gap-2 py-2 px-1 hover:bg-accent/30 transition-colors group">
|
||||
<!-- Rank number (optional) -->
|
||||
<div v-if="rank" class="w-6 text-right text-sm text-muted-foreground font-medium pt-1">
|
||||
{{ rank }}
|
||||
</div>
|
||||
|
||||
<!-- Vote controls -->
|
||||
<VoteControls
|
||||
:score="submission.votes.score"
|
||||
:user-vote="submission.votes.userVote"
|
||||
:disabled="!isAuthenticated"
|
||||
@upvote="emit('upvote', submission)"
|
||||
@downvote="emit('downvote', submission)"
|
||||
/>
|
||||
|
||||
<!-- Thumbnail -->
|
||||
<SubmissionThumbnail
|
||||
:src="thumbnailUrl"
|
||||
:post-type="submission.postType"
|
||||
:nsfw="submission.nsfw"
|
||||
:size="70"
|
||||
class="cursor-pointer"
|
||||
@click="onCommentsClick"
|
||||
/>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Title row -->
|
||||
<div class="flex items-start gap-2">
|
||||
<h3
|
||||
class="text-sm font-medium leading-snug cursor-pointer hover:underline"
|
||||
@click="onTitleClick"
|
||||
>
|
||||
{{ submission.title }}
|
||||
</h3>
|
||||
|
||||
<!-- Domain for link posts -->
|
||||
<span v-if="domain" class="text-xs text-muted-foreground flex-shrink-0">
|
||||
({{ domain }})
|
||||
</span>
|
||||
|
||||
<!-- Self post indicator -->
|
||||
<span v-if="postTypeLabel" class="text-xs text-muted-foreground flex-shrink-0">
|
||||
({{ postTypeLabel }})
|
||||
</span>
|
||||
|
||||
<!-- External link icon for link posts -->
|
||||
<Link2
|
||||
v-if="submission.postType === 'link'"
|
||||
class="h-3 w-3 text-muted-foreground flex-shrink-0 mt-0.5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Flair badges -->
|
||||
<div v-if="submission.nsfw || submission.flair" class="flex items-center gap-1 mt-0.5">
|
||||
<Badge v-if="submission.nsfw" variant="destructive" class="text-[10px] px-1 py-0">
|
||||
NSFW
|
||||
</Badge>
|
||||
<Badge v-if="submission.flair" variant="secondary" class="text-[10px] px-1 py-0">
|
||||
{{ submission.flair }}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<!-- Metadata row -->
|
||||
<div class="text-xs text-muted-foreground mt-1">
|
||||
<span>submitted {{ timeAgo }}</span>
|
||||
<span> by </span>
|
||||
<span class="hover:underline cursor-pointer">{{ authorName }}</span>
|
||||
<template v-if="communityName">
|
||||
<span> to </span>
|
||||
<span class="hover:underline cursor-pointer font-medium">{{ communityName }}</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Actions row -->
|
||||
<div class="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
|
||||
<!-- Comments -->
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-1 hover:text-foreground transition-colors"
|
||||
@click="onCommentsClick"
|
||||
>
|
||||
<MessageSquare class="h-3.5 w-3.5" />
|
||||
<span>{{ submission.commentCount }} comments</span>
|
||||
</button>
|
||||
|
||||
<!-- Share -->
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-1 hover:text-foreground transition-colors opacity-0 group-hover:opacity-100"
|
||||
@click="emit('share', submission)"
|
||||
>
|
||||
<Share2 class="h-3.5 w-3.5" />
|
||||
<span>share</span>
|
||||
</button>
|
||||
|
||||
<!-- Save -->
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-1 hover:text-foreground transition-colors opacity-0 group-hover:opacity-100"
|
||||
:class="{ 'text-yellow-500': submission.isSaved }"
|
||||
@click="emit('save', submission)"
|
||||
>
|
||||
<Bookmark class="h-3.5 w-3.5" :class="{ 'fill-current': submission.isSaved }" />
|
||||
<span>{{ submission.isSaved ? 'saved' : 'save' }}</span>
|
||||
</button>
|
||||
|
||||
<!-- Hide -->
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-1 hover:text-foreground transition-colors opacity-0 group-hover:opacity-100"
|
||||
@click="emit('hide', submission)"
|
||||
>
|
||||
<EyeOff class="h-3.5 w-3.5" />
|
||||
<span>hide</span>
|
||||
</button>
|
||||
|
||||
<!-- Report (not for own posts) -->
|
||||
<button
|
||||
v-if="!isOwnPost"
|
||||
type="button"
|
||||
class="flex items-center gap-1 hover:text-foreground transition-colors opacity-0 group-hover:opacity-100"
|
||||
@click="emit('report', submission)"
|
||||
>
|
||||
<Flag class="h-3.5 w-3.5" />
|
||||
<span>report</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* SubmissionThumbnail - Small square thumbnail for submissions
|
||||
* Shows preview image, video indicator, or placeholder icon
|
||||
*/
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { FileText, Image, ExternalLink } from 'lucide-vue-next'
|
||||
import type { SubmissionType } from '../types/submission'
|
||||
|
||||
interface Props {
|
||||
/** Thumbnail URL */
|
||||
src?: string
|
||||
/** Submission type for fallback icon */
|
||||
postType: SubmissionType
|
||||
/** Alt text */
|
||||
alt?: string
|
||||
/** Whether this is NSFW content */
|
||||
nsfw?: boolean
|
||||
/** Size in pixels */
|
||||
size?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
size: 70,
|
||||
nsfw: false
|
||||
})
|
||||
|
||||
// Determine fallback icon based on post type
|
||||
const FallbackIcon = computed(() => {
|
||||
switch (props.postType) {
|
||||
case 'link':
|
||||
return ExternalLink
|
||||
case 'media':
|
||||
return Image
|
||||
case 'self':
|
||||
default:
|
||||
return FileText
|
||||
}
|
||||
})
|
||||
|
||||
// Background color for fallback
|
||||
const fallbackBgClass = computed(() => {
|
||||
switch (props.postType) {
|
||||
case 'link':
|
||||
return 'bg-blue-500/10'
|
||||
case 'media':
|
||||
return 'bg-purple-500/10'
|
||||
case 'self':
|
||||
default:
|
||||
return 'bg-muted'
|
||||
}
|
||||
})
|
||||
|
||||
// Icon color for fallback
|
||||
const fallbackIconClass = computed(() => {
|
||||
switch (props.postType) {
|
||||
case 'link':
|
||||
return 'text-blue-500'
|
||||
case 'media':
|
||||
return 'text-purple-500'
|
||||
case 'self':
|
||||
default:
|
||||
return 'text-muted-foreground'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex-shrink-0 rounded overflow-hidden"
|
||||
:style="{ width: `${size}px`, height: `${size}px` }"
|
||||
>
|
||||
<!-- NSFW blur overlay -->
|
||||
<template v-if="nsfw && src">
|
||||
<div class="relative w-full h-full">
|
||||
<img
|
||||
:src="src"
|
||||
:alt="alt || 'Thumbnail'"
|
||||
class="w-full h-full object-cover blur-lg"
|
||||
/>
|
||||
<div class="absolute inset-0 flex items-center justify-center bg-black/50">
|
||||
<span class="text-[10px] font-bold text-red-500 uppercase">NSFW</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Image thumbnail -->
|
||||
<template v-else-if="src">
|
||||
<img
|
||||
:src="src"
|
||||
:alt="alt || 'Thumbnail'"
|
||||
class="w-full h-full object-cover bg-muted"
|
||||
loading="lazy"
|
||||
@error="($event.target as HTMLImageElement).style.display = 'none'"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Fallback icon -->
|
||||
<template v-else>
|
||||
<div
|
||||
:class="[
|
||||
'w-full h-full flex items-center justify-center',
|
||||
fallbackBgClass
|
||||
]"
|
||||
>
|
||||
<component
|
||||
:is="FallbackIcon"
|
||||
:class="['h-6 w-6', fallbackIconClass]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,406 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* SubmitComposer - Create new submissions (link, media, self posts)
|
||||
* Similar to Lemmy's Create Post form
|
||||
*/
|
||||
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
Link2,
|
||||
FileText,
|
||||
Image as ImageIcon,
|
||||
Loader2,
|
||||
ExternalLink,
|
||||
X,
|
||||
AlertCircle
|
||||
} from 'lucide-vue-next'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||
import type { SubmissionService } from '../services/SubmissionService'
|
||||
import type { LinkPreviewService } from '../services/LinkPreviewService'
|
||||
import type {
|
||||
LinkPreview,
|
||||
SubmissionType,
|
||||
LinkSubmissionForm,
|
||||
SelfSubmissionForm,
|
||||
SubmissionForm
|
||||
} from '../types/submission'
|
||||
|
||||
interface Props {
|
||||
/** Pre-selected community */
|
||||
community?: string
|
||||
/** Initial post type */
|
||||
initialType?: SubmissionType
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
initialType: 'self'
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'submitted', submissionId: string): void
|
||||
(e: 'cancel'): void
|
||||
}>()
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// Services
|
||||
const submissionService = tryInjectService<SubmissionService>(SERVICE_TOKENS.SUBMISSION_SERVICE)
|
||||
const linkPreviewService = tryInjectService<LinkPreviewService>(SERVICE_TOKENS.LINK_PREVIEW_SERVICE)
|
||||
const authService = tryInjectService<any>(SERVICE_TOKENS.AUTH_SERVICE)
|
||||
|
||||
// Auth state
|
||||
const isAuthenticated = computed(() => authService?.isAuthenticated?.value || false)
|
||||
|
||||
// Form state
|
||||
const postType = ref<SubmissionType>(props.initialType)
|
||||
const title = ref('')
|
||||
const url = ref('')
|
||||
const body = ref('')
|
||||
const thumbnailUrl = ref('')
|
||||
const nsfw = ref(false)
|
||||
|
||||
// Link preview state
|
||||
const linkPreview = ref<LinkPreview | null>(null)
|
||||
const isLoadingPreview = ref(false)
|
||||
const previewError = ref<string | null>(null)
|
||||
|
||||
// Submission state
|
||||
const isSubmitting = ref(false)
|
||||
const submitError = ref<string | null>(null)
|
||||
|
||||
// Validation
|
||||
const isValid = computed(() => {
|
||||
if (!title.value.trim()) return false
|
||||
if (postType.value === 'link' && !url.value.trim()) return false
|
||||
if (postType.value === 'self' && !body.value.trim()) return false
|
||||
return true
|
||||
})
|
||||
|
||||
// Debounced URL preview fetching
|
||||
let previewTimeout: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
watch(url, (newUrl) => {
|
||||
if (previewTimeout) {
|
||||
clearTimeout(previewTimeout)
|
||||
}
|
||||
|
||||
linkPreview.value = null
|
||||
previewError.value = null
|
||||
|
||||
if (!newUrl.trim() || postType.value !== 'link') {
|
||||
return
|
||||
}
|
||||
|
||||
// Validate URL format
|
||||
try {
|
||||
new URL(newUrl)
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
|
||||
// Debounce the preview fetch
|
||||
previewTimeout = setTimeout(async () => {
|
||||
await fetchLinkPreview(newUrl)
|
||||
}, 500)
|
||||
})
|
||||
|
||||
async function fetchLinkPreview(urlToFetch: string) {
|
||||
if (!linkPreviewService) {
|
||||
previewError.value = 'Link preview service not available'
|
||||
return
|
||||
}
|
||||
|
||||
isLoadingPreview.value = true
|
||||
previewError.value = null
|
||||
|
||||
try {
|
||||
const preview = await linkPreviewService.fetchPreview(urlToFetch)
|
||||
linkPreview.value = preview
|
||||
} catch (err: any) {
|
||||
console.error('Failed to fetch link preview:', err)
|
||||
previewError.value = err.message || 'Failed to load preview'
|
||||
} finally {
|
||||
isLoadingPreview.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function clearPreview() {
|
||||
linkPreview.value = null
|
||||
previewError.value = null
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!isValid.value || !isAuthenticated.value || !submissionService) return
|
||||
|
||||
isSubmitting.value = true
|
||||
submitError.value = null
|
||||
|
||||
try {
|
||||
let form: SubmissionForm
|
||||
|
||||
if (postType.value === 'link') {
|
||||
const linkForm: LinkSubmissionForm = {
|
||||
postType: 'link',
|
||||
title: title.value.trim(),
|
||||
url: url.value.trim(),
|
||||
body: body.value.trim() || undefined,
|
||||
communityRef: props.community,
|
||||
nsfw: nsfw.value
|
||||
}
|
||||
form = linkForm
|
||||
} else if (postType.value === 'self') {
|
||||
const selfForm: SelfSubmissionForm = {
|
||||
postType: 'self',
|
||||
title: title.value.trim(),
|
||||
body: body.value.trim(),
|
||||
communityRef: props.community,
|
||||
nsfw: nsfw.value
|
||||
}
|
||||
form = selfForm
|
||||
} else if (postType.value === 'media') {
|
||||
// TODO: Implement media submission with file upload
|
||||
submitError.value = 'Media uploads not yet implemented'
|
||||
return
|
||||
} else {
|
||||
submitError.value = 'Unknown post type'
|
||||
return
|
||||
}
|
||||
|
||||
const submissionId = await submissionService.createSubmission(form)
|
||||
|
||||
if (submissionId) {
|
||||
emit('submitted', submissionId)
|
||||
// Navigate to the new submission
|
||||
router.push({ name: 'submission-detail', params: { id: submissionId } })
|
||||
} else {
|
||||
submitError.value = 'Failed to create submission'
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('Failed to submit:', err)
|
||||
submitError.value = err.message || 'Failed to create submission'
|
||||
} finally {
|
||||
isSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
emit('cancel')
|
||||
router.back()
|
||||
}
|
||||
|
||||
function selectPostType(type: SubmissionType) {
|
||||
postType.value = type
|
||||
// Clear URL when switching away from link type
|
||||
if (type !== 'link') {
|
||||
url.value = ''
|
||||
clearPreview()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="max-w-2xl mx-auto p-4">
|
||||
<h1 class="text-xl font-semibold mb-6">Create Post</h1>
|
||||
|
||||
<!-- Auth warning -->
|
||||
<div v-if="!isAuthenticated" class="mb-4 p-4 bg-destructive/10 border border-destructive/20 rounded-lg">
|
||||
<div class="flex items-center gap-2 text-destructive">
|
||||
<AlertCircle class="h-4 w-4" />
|
||||
<span class="text-sm font-medium">You must be logged in to create a post</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post type selector -->
|
||||
<div class="flex gap-2 mb-6">
|
||||
<Button
|
||||
:variant="postType === 'self' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
@click="selectPostType('self')"
|
||||
>
|
||||
<FileText class="h-4 w-4 mr-2" />
|
||||
Text
|
||||
</Button>
|
||||
<Button
|
||||
:variant="postType === 'link' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
@click="selectPostType('link')"
|
||||
>
|
||||
<Link2 class="h-4 w-4 mr-2" />
|
||||
Link
|
||||
</Button>
|
||||
<Button
|
||||
:variant="postType === 'media' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
@click="selectPostType('media')"
|
||||
disabled
|
||||
title="Coming soon"
|
||||
>
|
||||
<ImageIcon class="h-4 w-4 mr-2" />
|
||||
Image
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleSubmit" class="space-y-4">
|
||||
<!-- Title -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1.5">
|
||||
Title <span class="text-destructive">*</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="title"
|
||||
type="text"
|
||||
placeholder="An interesting title"
|
||||
maxlength="300"
|
||||
class="w-full px-3 py-2 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
:disabled="!isAuthenticated"
|
||||
/>
|
||||
<div class="text-xs text-muted-foreground mt-1 text-right">
|
||||
{{ title.length }}/300
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- URL (for link posts) -->
|
||||
<div v-if="postType === 'link'">
|
||||
<label class="block text-sm font-medium mb-1.5">
|
||||
URL <span class="text-destructive">*</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="url"
|
||||
type="url"
|
||||
placeholder="https://example.com/article"
|
||||
class="w-full px-3 py-2 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
:disabled="!isAuthenticated"
|
||||
/>
|
||||
|
||||
<!-- Link preview -->
|
||||
<div v-if="isLoadingPreview" class="mt-3 p-4 border rounded-lg bg-muted/30">
|
||||
<div class="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Loader2 class="h-4 w-4 animate-spin" />
|
||||
Loading preview...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="previewError" class="mt-3 p-3 border border-destructive/20 rounded-lg bg-destructive/5">
|
||||
<div class="flex items-center gap-2 text-sm text-destructive">
|
||||
<AlertCircle class="h-4 w-4" />
|
||||
{{ previewError }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="linkPreview" class="mt-3 p-4 border rounded-lg bg-muted/30">
|
||||
<div class="flex items-start gap-3">
|
||||
<!-- Preview image -->
|
||||
<div v-if="linkPreview.image" class="flex-shrink-0 w-24 h-18 rounded overflow-hidden bg-muted">
|
||||
<img
|
||||
:src="linkPreview.image"
|
||||
:alt="linkPreview.title || ''"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Preview content -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 text-xs text-muted-foreground mb-1">
|
||||
<ExternalLink class="h-3 w-3" />
|
||||
<span>{{ linkPreview.domain }}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-auto p-1 hover:bg-accent rounded"
|
||||
@click="clearPreview"
|
||||
>
|
||||
<X class="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
<h4 v-if="linkPreview.title" class="font-medium text-sm line-clamp-2">
|
||||
{{ linkPreview.title }}
|
||||
</h4>
|
||||
<p v-if="linkPreview.description" class="text-xs text-muted-foreground mt-1 line-clamp-2">
|
||||
{{ linkPreview.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Thumbnail URL (optional) -->
|
||||
<div v-if="postType === 'link'">
|
||||
<label class="block text-sm font-medium mb-1.5">
|
||||
Thumbnail URL
|
||||
<span class="text-muted-foreground font-normal">(optional)</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="thumbnailUrl"
|
||||
type="url"
|
||||
placeholder="https://example.com/image.jpg"
|
||||
class="w-full px-3 py-2 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
:disabled="!isAuthenticated"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1.5">
|
||||
Body
|
||||
<span v-if="postType === 'self'" class="text-destructive">*</span>
|
||||
<span v-else class="text-muted-foreground font-normal">(optional)</span>
|
||||
</label>
|
||||
<textarea
|
||||
v-model="body"
|
||||
:placeholder="postType === 'self' ? 'Write your post content...' : 'Optional description or commentary...'"
|
||||
rows="6"
|
||||
class="w-full px-3 py-2 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary resize-y min-h-[120px]"
|
||||
:disabled="!isAuthenticated"
|
||||
/>
|
||||
<div class="text-xs text-muted-foreground mt-1">
|
||||
Markdown supported
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- NSFW toggle -->
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
id="nsfw"
|
||||
v-model="nsfw"
|
||||
type="checkbox"
|
||||
class="rounded border-muted-foreground"
|
||||
:disabled="!isAuthenticated"
|
||||
/>
|
||||
<label for="nsfw" class="text-sm font-medium cursor-pointer">
|
||||
NSFW
|
||||
</label>
|
||||
<Badge v-if="nsfw" variant="destructive" class="text-xs">
|
||||
Not Safe For Work
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<!-- Error message -->
|
||||
<div v-if="submitError" class="p-3 border border-destructive/20 rounded-lg bg-destructive/5">
|
||||
<div class="flex items-center gap-2 text-sm text-destructive">
|
||||
<AlertCircle class="h-4 w-4" />
|
||||
{{ submitError }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center gap-3 pt-4">
|
||||
<Button
|
||||
type="submit"
|
||||
:disabled="!isValid || isSubmitting || !isAuthenticated"
|
||||
>
|
||||
<Loader2 v-if="isSubmitting" class="h-4 w-4 animate-spin mr-2" />
|
||||
Create
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
@click="handleCancel"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* VoteControls - Compact upvote/downvote arrows with score
|
||||
* Lemmy/Reddit style vertical layout
|
||||
*/
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { ChevronUp, ChevronDown } from 'lucide-vue-next'
|
||||
|
||||
interface Props {
|
||||
score: number
|
||||
userVote: 'upvote' | 'downvote' | null
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'upvote'): void
|
||||
(e: 'downvote'): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
disabled: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// Format score for display (e.g., 1.2k for 1200)
|
||||
const displayScore = computed(() => {
|
||||
const score = props.score
|
||||
if (Math.abs(score) >= 10000) {
|
||||
return (score / 1000).toFixed(0) + 'k'
|
||||
}
|
||||
if (Math.abs(score) >= 1000) {
|
||||
return (score / 1000).toFixed(1) + 'k'
|
||||
}
|
||||
return score.toString()
|
||||
})
|
||||
|
||||
// Score color based on value
|
||||
const scoreClass = computed(() => {
|
||||
if (props.userVote === 'upvote') return 'text-orange-500'
|
||||
if (props.userVote === 'downvote') return 'text-blue-500'
|
||||
if (props.score > 0) return 'text-foreground'
|
||||
if (props.score < 0) return 'text-muted-foreground'
|
||||
return 'text-muted-foreground'
|
||||
})
|
||||
|
||||
function onUpvote() {
|
||||
if (!props.disabled) {
|
||||
emit('upvote')
|
||||
}
|
||||
}
|
||||
|
||||
function onDownvote() {
|
||||
if (!props.disabled) {
|
||||
emit('downvote')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col items-center gap-0 min-w-[40px]">
|
||||
<!-- Upvote button -->
|
||||
<button
|
||||
type="button"
|
||||
:disabled="disabled"
|
||||
:class="[
|
||||
'p-1 rounded transition-colors',
|
||||
'hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
userVote === 'upvote' ? 'text-orange-500' : 'text-muted-foreground hover:text-orange-500'
|
||||
]"
|
||||
@click="onUpvote"
|
||||
>
|
||||
<ChevronUp
|
||||
class="h-5 w-5"
|
||||
:class="{ 'fill-current': userVote === 'upvote' }"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<!-- Score -->
|
||||
<span
|
||||
:class="[
|
||||
'text-xs font-bold tabular-nums min-w-[24px] text-center',
|
||||
scoreClass
|
||||
]"
|
||||
>
|
||||
{{ displayScore }}
|
||||
</span>
|
||||
|
||||
<!-- Downvote button -->
|
||||
<button
|
||||
type="button"
|
||||
:disabled="disabled"
|
||||
:class="[
|
||||
'p-1 rounded transition-colors',
|
||||
'hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
userVote === 'downvote' ? 'text-blue-500' : 'text-muted-foreground hover:text-blue-500'
|
||||
]"
|
||||
@click="onDownvote"
|
||||
>
|
||||
<ChevronDown
|
||||
class="h-5 w-5"
|
||||
:class="{ 'fill-current': userVote === 'downvote' }"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,335 +0,0 @@
|
|||
/**
|
||||
* useSubmissions Composable
|
||||
*
|
||||
* Provides reactive access to the SubmissionService for Reddit-style submissions.
|
||||
*/
|
||||
|
||||
import { computed, ref, onMounted, onUnmounted, watch, type Ref, type ComputedRef } from 'vue'
|
||||
import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||
import type { SubmissionService } from '../services/SubmissionService'
|
||||
import type { LinkPreviewService } from '../services/LinkPreviewService'
|
||||
import type {
|
||||
SubmissionWithMeta,
|
||||
SubmissionForm,
|
||||
SubmissionFeedConfig,
|
||||
SubmissionComment,
|
||||
SortType,
|
||||
TimeRange,
|
||||
LinkPreview
|
||||
} from '../types/submission'
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
export interface UseSubmissionsOptions {
|
||||
/** Auto-subscribe on mount */
|
||||
autoSubscribe?: boolean
|
||||
/** Feed configuration */
|
||||
config?: Partial<SubmissionFeedConfig>
|
||||
}
|
||||
|
||||
export interface UseSubmissionsReturn {
|
||||
// State
|
||||
submissions: ComputedRef<SubmissionWithMeta[]>
|
||||
isLoading: ComputedRef<boolean>
|
||||
error: ComputedRef<string | null>
|
||||
|
||||
// Sorting
|
||||
currentSort: Ref<SortType>
|
||||
currentTimeRange: Ref<TimeRange>
|
||||
|
||||
// Actions
|
||||
subscribe: (config?: Partial<SubmissionFeedConfig>) => Promise<void>
|
||||
unsubscribe: () => Promise<void>
|
||||
refresh: () => Promise<void>
|
||||
createSubmission: (form: SubmissionForm) => Promise<string>
|
||||
upvote: (submissionId: string) => Promise<void>
|
||||
downvote: (submissionId: string) => Promise<void>
|
||||
setSort: (sort: SortType, timeRange?: TimeRange) => void
|
||||
|
||||
// Getters
|
||||
getSubmission: (id: string) => SubmissionWithMeta | undefined
|
||||
getComments: (submissionId: string) => SubmissionComment[]
|
||||
getThreadedComments: (submissionId: string) => SubmissionComment[]
|
||||
|
||||
// Link preview
|
||||
fetchLinkPreview: (url: string) => Promise<LinkPreview>
|
||||
isPreviewLoading: (url: string) => boolean
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Composable
|
||||
// ============================================================================
|
||||
|
||||
export function useSubmissions(options: UseSubmissionsOptions = {}): UseSubmissionsReturn {
|
||||
const {
|
||||
autoSubscribe = true,
|
||||
config: initialConfig = {}
|
||||
} = options
|
||||
|
||||
// Inject services
|
||||
const submissionService = tryInjectService<SubmissionService>(SERVICE_TOKENS.SUBMISSION_SERVICE)
|
||||
const linkPreviewService = tryInjectService<LinkPreviewService>(SERVICE_TOKENS.LINK_PREVIEW_SERVICE)
|
||||
|
||||
// Local state
|
||||
const currentSort = ref<SortType>('hot')
|
||||
const currentTimeRange = ref<TimeRange>('day')
|
||||
|
||||
// Default feed config
|
||||
const defaultConfig: SubmissionFeedConfig = {
|
||||
sort: 'hot',
|
||||
timeRange: 'day',
|
||||
includeNsfw: false,
|
||||
limit: 50,
|
||||
...initialConfig
|
||||
}
|
||||
|
||||
// Computed values from service
|
||||
const submissions = computed(() => {
|
||||
if (!submissionService) return []
|
||||
return submissionService.getSortedSubmissions(currentSort.value)
|
||||
})
|
||||
|
||||
const isLoading = computed(() => submissionService?.isLoading.value ?? false)
|
||||
const error = computed(() => submissionService?.error.value ?? null)
|
||||
|
||||
// ============================================================================
|
||||
// Actions
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Subscribe to submissions feed
|
||||
*/
|
||||
async function subscribe(config?: Partial<SubmissionFeedConfig>): Promise<void> {
|
||||
if (!submissionService) {
|
||||
console.warn('SubmissionService not available')
|
||||
return
|
||||
}
|
||||
|
||||
const feedConfig: SubmissionFeedConfig = {
|
||||
...defaultConfig,
|
||||
...config,
|
||||
sort: currentSort.value,
|
||||
timeRange: currentTimeRange.value
|
||||
}
|
||||
|
||||
await submissionService.subscribe(feedConfig)
|
||||
}
|
||||
|
||||
/**
|
||||
* Unsubscribe from feed
|
||||
*/
|
||||
async function unsubscribe(): Promise<void> {
|
||||
await submissionService?.unsubscribe()
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the feed
|
||||
*/
|
||||
async function refresh(): Promise<void> {
|
||||
submissionService?.clear()
|
||||
await subscribe()
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new submission
|
||||
*/
|
||||
async function createSubmission(form: SubmissionForm): Promise<string> {
|
||||
if (!submissionService) {
|
||||
throw new Error('SubmissionService not available')
|
||||
}
|
||||
return submissionService.createSubmission(form)
|
||||
}
|
||||
|
||||
/**
|
||||
* Upvote a submission
|
||||
*/
|
||||
async function upvote(submissionId: string): Promise<void> {
|
||||
if (!submissionService) {
|
||||
throw new Error('SubmissionService not available')
|
||||
}
|
||||
await submissionService.upvote(submissionId)
|
||||
}
|
||||
|
||||
/**
|
||||
* Downvote a submission
|
||||
*/
|
||||
async function downvote(submissionId: string): Promise<void> {
|
||||
if (!submissionService) {
|
||||
throw new Error('SubmissionService not available')
|
||||
}
|
||||
await submissionService.downvote(submissionId)
|
||||
}
|
||||
|
||||
/**
|
||||
* Change sort order
|
||||
*/
|
||||
function setSort(sort: SortType, timeRange?: TimeRange): void {
|
||||
currentSort.value = sort
|
||||
if (timeRange) {
|
||||
currentTimeRange.value = timeRange
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Getters
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Get a single submission by ID
|
||||
*/
|
||||
function getSubmission(id: string): SubmissionWithMeta | undefined {
|
||||
return submissionService?.getSubmission(id)
|
||||
}
|
||||
|
||||
/**
|
||||
* Get comments for a submission
|
||||
*/
|
||||
function getComments(submissionId: string): SubmissionComment[] {
|
||||
return submissionService?.getComments(submissionId) ?? []
|
||||
}
|
||||
|
||||
/**
|
||||
* Get threaded comments for a submission
|
||||
*/
|
||||
function getThreadedComments(submissionId: string): SubmissionComment[] {
|
||||
return submissionService?.getThreadedComments(submissionId) ?? []
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Link Preview
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Fetch link preview for a URL
|
||||
*/
|
||||
async function fetchLinkPreview(url: string): Promise<LinkPreview> {
|
||||
if (!linkPreviewService) {
|
||||
return {
|
||||
url,
|
||||
domain: new URL(url).hostname.replace(/^www\./, '')
|
||||
}
|
||||
}
|
||||
return linkPreviewService.fetchPreview(url)
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if preview is loading
|
||||
*/
|
||||
function isPreviewLoading(url: string): boolean {
|
||||
return linkPreviewService?.isLoading(url) ?? false
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Lifecycle
|
||||
// ============================================================================
|
||||
|
||||
// Watch for sort changes and re-sort
|
||||
watch([currentSort, currentTimeRange], async () => {
|
||||
// Re-subscribe with new sort if needed for time-based filtering
|
||||
if (currentSort.value === 'top') {
|
||||
await subscribe()
|
||||
}
|
||||
})
|
||||
|
||||
// Auto-subscribe on mount
|
||||
onMounted(() => {
|
||||
if (autoSubscribe) {
|
||||
subscribe()
|
||||
}
|
||||
})
|
||||
|
||||
// Cleanup on unmount
|
||||
onUnmounted(() => {
|
||||
unsubscribe()
|
||||
})
|
||||
|
||||
// ============================================================================
|
||||
// Return
|
||||
// ============================================================================
|
||||
|
||||
return {
|
||||
// State
|
||||
submissions,
|
||||
isLoading,
|
||||
error,
|
||||
|
||||
// Sorting
|
||||
currentSort,
|
||||
currentTimeRange,
|
||||
|
||||
// Actions
|
||||
subscribe,
|
||||
unsubscribe,
|
||||
refresh,
|
||||
createSubmission,
|
||||
upvote,
|
||||
downvote,
|
||||
setSort,
|
||||
|
||||
// Getters
|
||||
getSubmission,
|
||||
getComments,
|
||||
getThreadedComments,
|
||||
|
||||
// Link preview
|
||||
fetchLinkPreview,
|
||||
isPreviewLoading
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Single Submission Hook
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Hook for working with a single submission
|
||||
*/
|
||||
export function useSubmission(submissionId: string) {
|
||||
const submissionService = tryInjectService<SubmissionService>(SERVICE_TOKENS.SUBMISSION_SERVICE)
|
||||
|
||||
const isLoading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
const submission = computed(() => submissionService?.getSubmission(submissionId))
|
||||
const comments = computed(() => submissionService?.getThreadedComments(submissionId) ?? [])
|
||||
|
||||
async function subscribe(): Promise<void> {
|
||||
if (!submissionService) return
|
||||
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
await submissionService.subscribeToSubmission(submissionId)
|
||||
} catch (err: any) {
|
||||
error.value = err.message || 'Failed to load submission'
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function upvote(): Promise<void> {
|
||||
await submissionService?.upvote(submissionId)
|
||||
}
|
||||
|
||||
async function downvote(): Promise<void> {
|
||||
await submissionService?.downvote(submissionId)
|
||||
}
|
||||
|
||||
// Subscribe on mount
|
||||
onMounted(() => {
|
||||
subscribe()
|
||||
})
|
||||
|
||||
return {
|
||||
submission,
|
||||
comments,
|
||||
isLoading: computed(() => isLoading.value || submissionService?.isLoading.value || false),
|
||||
error: computed(() => error.value || submissionService?.error.value || null),
|
||||
subscribe,
|
||||
upvote,
|
||||
downvote
|
||||
}
|
||||
}
|
||||
|
|
@ -2,20 +2,10 @@ import type { App } from 'vue'
|
|||
import type { ModulePlugin } from '@/core/types'
|
||||
import { container, SERVICE_TOKENS } from '@/core/di-container'
|
||||
import NostrFeed from './components/NostrFeed.vue'
|
||||
import SubmissionList from './components/SubmissionList.vue'
|
||||
import SubmissionRow from './components/SubmissionRow.vue'
|
||||
import SubmissionDetail from './components/SubmissionDetail.vue'
|
||||
import SubmissionComment from './components/SubmissionComment.vue'
|
||||
import SubmitComposer from './components/SubmitComposer.vue'
|
||||
import VoteControls from './components/VoteControls.vue'
|
||||
import SortTabs from './components/SortTabs.vue'
|
||||
import { useFeed } from './composables/useFeed'
|
||||
import { useSubmissions, useSubmission } from './composables/useSubmissions'
|
||||
import { FeedService } from './services/FeedService'
|
||||
import { ProfileService } from './services/ProfileService'
|
||||
import { ReactionService } from './services/ReactionService'
|
||||
import { SubmissionService } from './services/SubmissionService'
|
||||
import { LinkPreviewService } from './services/LinkPreviewService'
|
||||
|
||||
/**
|
||||
* Nostr Feed Module Plugin
|
||||
|
|
@ -26,27 +16,6 @@ export const nostrFeedModule: ModulePlugin = {
|
|||
version: '1.0.0',
|
||||
dependencies: ['base'],
|
||||
|
||||
routes: [
|
||||
{
|
||||
path: '/submission/:id',
|
||||
name: 'submission-detail',
|
||||
component: () => import('./views/SubmissionDetailPage.vue'),
|
||||
meta: {
|
||||
title: 'Submission',
|
||||
requiresAuth: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/submit',
|
||||
name: 'submit-post',
|
||||
component: () => import('./views/SubmitPage.vue'),
|
||||
meta: {
|
||||
title: 'Create Post',
|
||||
requiresAuth: true
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
async install(app: App) {
|
||||
console.log('nostr-feed module: Starting installation...')
|
||||
|
||||
|
|
@ -54,14 +23,10 @@ export const nostrFeedModule: ModulePlugin = {
|
|||
const feedService = new FeedService()
|
||||
const profileService = new ProfileService()
|
||||
const reactionService = new ReactionService()
|
||||
const submissionService = new SubmissionService()
|
||||
const linkPreviewService = new LinkPreviewService()
|
||||
|
||||
container.provide(SERVICE_TOKENS.FEED_SERVICE, feedService)
|
||||
container.provide(SERVICE_TOKENS.PROFILE_SERVICE, profileService)
|
||||
container.provide(SERVICE_TOKENS.REACTION_SERVICE, reactionService)
|
||||
container.provide(SERVICE_TOKENS.SUBMISSION_SERVICE, submissionService)
|
||||
container.provide(SERVICE_TOKENS.LINK_PREVIEW_SERVICE, linkPreviewService)
|
||||
console.log('nostr-feed module: Services registered in DI container')
|
||||
|
||||
// Initialize services
|
||||
|
|
@ -78,39 +43,21 @@ export const nostrFeedModule: ModulePlugin = {
|
|||
reactionService.initialize({
|
||||
waitForDependencies: true,
|
||||
maxRetries: 3
|
||||
}),
|
||||
submissionService.initialize({
|
||||
waitForDependencies: true,
|
||||
maxRetries: 3
|
||||
}),
|
||||
linkPreviewService.initialize({
|
||||
waitForDependencies: true,
|
||||
maxRetries: 3
|
||||
})
|
||||
])
|
||||
console.log('nostr-feed module: Services initialized')
|
||||
|
||||
// Register components globally
|
||||
app.component('NostrFeed', NostrFeed)
|
||||
app.component('SubmissionList', SubmissionList)
|
||||
console.log('nostr-feed module: Installation complete')
|
||||
},
|
||||
|
||||
components: {
|
||||
NostrFeed,
|
||||
SubmissionList,
|
||||
SubmissionRow,
|
||||
SubmissionDetail,
|
||||
SubmissionComment,
|
||||
SubmitComposer,
|
||||
VoteControls,
|
||||
SortTabs
|
||||
NostrFeed
|
||||
},
|
||||
|
||||
composables: {
|
||||
useFeed,
|
||||
useSubmissions,
|
||||
useSubmission
|
||||
useFeed
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,552 +0,0 @@
|
|||
/**
|
||||
* LinkPreviewService
|
||||
*
|
||||
* Fetches Open Graph and meta tags from URLs to generate link previews.
|
||||
* Used when creating link submissions to embed preview data.
|
||||
*/
|
||||
|
||||
import { reactive } from 'vue'
|
||||
import { BaseService } from '@/core/base/BaseService'
|
||||
import type { LinkPreview } from '../types/submission'
|
||||
import { extractDomain } from '../types/submission'
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
interface CacheEntry {
|
||||
preview: LinkPreview
|
||||
timestamp: number
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Service Definition
|
||||
// ============================================================================
|
||||
|
||||
export class LinkPreviewService extends BaseService {
|
||||
protected readonly metadata = {
|
||||
name: 'LinkPreviewService',
|
||||
version: '1.0.0',
|
||||
dependencies: []
|
||||
}
|
||||
|
||||
// Cache for previews (URL -> preview)
|
||||
private cache = reactive(new Map<string, CacheEntry>())
|
||||
|
||||
// Cache TTL (15 minutes)
|
||||
private readonly CACHE_TTL = 15 * 60 * 1000
|
||||
|
||||
// Loading state per URL
|
||||
private _loading = reactive(new Map<string, boolean>())
|
||||
|
||||
// Error state per URL
|
||||
private _errors = reactive(new Map<string, string>())
|
||||
|
||||
// CORS proxy URL (configurable)
|
||||
private proxyUrl = ''
|
||||
|
||||
// ============================================================================
|
||||
// Lifecycle
|
||||
// ============================================================================
|
||||
|
||||
protected async onInitialize(): Promise<void> {
|
||||
console.log('LinkPreviewService: Initializing...')
|
||||
|
||||
// Try to get proxy URL from environment
|
||||
this.proxyUrl = import.meta.env.VITE_CORS_PROXY_URL || ''
|
||||
|
||||
// Clean expired cache entries periodically
|
||||
setInterval(() => this.cleanCache(), this.CACHE_TTL)
|
||||
|
||||
console.log('LinkPreviewService: Initialization complete')
|
||||
}
|
||||
|
||||
protected async onDispose(): Promise<void> {
|
||||
this.cache.clear()
|
||||
this._loading.clear()
|
||||
this._errors.clear()
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Public API
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Fetch link preview for a URL
|
||||
*/
|
||||
async fetchPreview(url: string): Promise<LinkPreview> {
|
||||
// Normalize URL
|
||||
const normalizedUrl = this.normalizeUrl(url)
|
||||
|
||||
// Check cache
|
||||
const cached = this.getCachedPreview(normalizedUrl)
|
||||
if (cached) {
|
||||
return cached
|
||||
}
|
||||
|
||||
// Check if already loading
|
||||
if (this._loading.get(normalizedUrl)) {
|
||||
// Wait for existing request
|
||||
return this.waitForPreview(normalizedUrl)
|
||||
}
|
||||
|
||||
// Mark as loading
|
||||
this._loading.set(normalizedUrl, true)
|
||||
this._errors.delete(normalizedUrl)
|
||||
|
||||
try {
|
||||
const preview = await this.doFetch(normalizedUrl)
|
||||
|
||||
// Cache the result
|
||||
this.cache.set(normalizedUrl, {
|
||||
preview,
|
||||
timestamp: Date.now()
|
||||
})
|
||||
|
||||
return preview
|
||||
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : 'Failed to fetch preview'
|
||||
this._errors.set(normalizedUrl, message)
|
||||
|
||||
// Return minimal preview on error
|
||||
return {
|
||||
url: normalizedUrl,
|
||||
domain: extractDomain(normalizedUrl)
|
||||
}
|
||||
|
||||
} finally {
|
||||
this._loading.set(normalizedUrl, false)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get cached preview if available and not expired
|
||||
*/
|
||||
getCachedPreview(url: string): LinkPreview | null {
|
||||
const cached = this.cache.get(url)
|
||||
if (!cached) return null
|
||||
|
||||
// Check if expired
|
||||
if (Date.now() - cached.timestamp > this.CACHE_TTL) {
|
||||
this.cache.delete(url)
|
||||
return null
|
||||
}
|
||||
|
||||
return cached.preview
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if URL is currently loading
|
||||
*/
|
||||
isLoading(url: string): boolean {
|
||||
return this._loading.get(url) || false
|
||||
}
|
||||
|
||||
/**
|
||||
* Get error for URL
|
||||
*/
|
||||
getError(url: string): string | null {
|
||||
return this._errors.get(url) || null
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear cache for a specific URL or all
|
||||
*/
|
||||
clearCache(url?: string): void {
|
||||
if (url) {
|
||||
this.cache.delete(url)
|
||||
} else {
|
||||
this.cache.clear()
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Fetching
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Perform the actual fetch
|
||||
*/
|
||||
private async doFetch(url: string): Promise<LinkPreview> {
|
||||
// Try different methods in order of preference
|
||||
|
||||
// 1. Try direct fetch (works for same-origin or CORS-enabled sites)
|
||||
try {
|
||||
return await this.fetchDirect(url)
|
||||
} catch (directError) {
|
||||
this.debug('Direct fetch failed:', directError)
|
||||
}
|
||||
|
||||
// 2. Try CORS proxy if configured
|
||||
if (this.proxyUrl) {
|
||||
try {
|
||||
return await this.fetchViaProxy(url)
|
||||
} catch (proxyError) {
|
||||
this.debug('Proxy fetch failed:', proxyError)
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Try oEmbed for supported sites
|
||||
try {
|
||||
return await this.fetchOembed(url)
|
||||
} catch (oembedError) {
|
||||
this.debug('oEmbed fetch failed:', oembedError)
|
||||
}
|
||||
|
||||
// 4. Return basic preview with just the domain
|
||||
return {
|
||||
url,
|
||||
domain: extractDomain(url)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Direct fetch (may fail due to CORS)
|
||||
*/
|
||||
private async fetchDirect(url: string): Promise<LinkPreview> {
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'text/html'
|
||||
}
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`)
|
||||
}
|
||||
|
||||
const html = await response.text()
|
||||
return this.parseHtml(url, html)
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch via CORS proxy
|
||||
*/
|
||||
private async fetchViaProxy(url: string): Promise<LinkPreview> {
|
||||
const proxyUrl = `${this.proxyUrl}${encodeURIComponent(url)}`
|
||||
|
||||
const response = await fetch(proxyUrl, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'text/html'
|
||||
}
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Proxy HTTP ${response.status}`)
|
||||
}
|
||||
|
||||
const html = await response.text()
|
||||
return this.parseHtml(url, html)
|
||||
}
|
||||
|
||||
/**
|
||||
* Try oEmbed for supported providers
|
||||
*/
|
||||
private async fetchOembed(url: string): Promise<LinkPreview> {
|
||||
// oEmbed providers and their endpoints
|
||||
const providers = [
|
||||
{
|
||||
pattern: /youtube\.com\/watch|youtu\.be/,
|
||||
endpoint: 'https://www.youtube.com/oembed'
|
||||
},
|
||||
{
|
||||
pattern: /twitter\.com|x\.com/,
|
||||
endpoint: 'https://publish.twitter.com/oembed'
|
||||
},
|
||||
{
|
||||
pattern: /vimeo\.com/,
|
||||
endpoint: 'https://vimeo.com/api/oembed.json'
|
||||
}
|
||||
]
|
||||
|
||||
const provider = providers.find(p => p.pattern.test(url))
|
||||
if (!provider) {
|
||||
throw new Error('No oEmbed provider for URL')
|
||||
}
|
||||
|
||||
const oembedUrl = `${provider.endpoint}?url=${encodeURIComponent(url)}&format=json`
|
||||
const response = await fetch(oembedUrl)
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`oEmbed HTTP ${response.status}`)
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
return {
|
||||
url,
|
||||
domain: extractDomain(url),
|
||||
title: data.title,
|
||||
description: data.description || data.author_name,
|
||||
image: data.thumbnail_url,
|
||||
siteName: data.provider_name,
|
||||
type: data.type,
|
||||
videoUrl: data.html?.includes('iframe') ? url : undefined
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// HTML Parsing
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Parse HTML to extract Open Graph and meta tags
|
||||
*/
|
||||
private parseHtml(url: string, html: string): LinkPreview {
|
||||
const preview: LinkPreview = {
|
||||
url,
|
||||
domain: extractDomain(url)
|
||||
}
|
||||
|
||||
// Create a DOM parser
|
||||
const parser = new DOMParser()
|
||||
const doc = parser.parseFromString(html, 'text/html')
|
||||
|
||||
// Extract Open Graph tags
|
||||
const ogTags = this.extractOgTags(doc)
|
||||
|
||||
// Extract Twitter Card tags (fallback)
|
||||
const twitterTags = this.extractTwitterTags(doc)
|
||||
|
||||
// Extract standard meta tags (fallback)
|
||||
const metaTags = this.extractMetaTags(doc)
|
||||
|
||||
// Merge with priority: OG > Twitter > Meta > Title
|
||||
preview.title = ogTags.title || twitterTags.title || metaTags.title || this.extractTitle(doc)
|
||||
preview.description = ogTags.description || twitterTags.description || metaTags.description
|
||||
preview.image = ogTags.image || twitterTags.image
|
||||
preview.siteName = ogTags.siteName || twitterTags.site
|
||||
preview.type = ogTags.type
|
||||
preview.videoUrl = ogTags.video
|
||||
preview.favicon = this.extractFavicon(doc, url)
|
||||
|
||||
return preview
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract Open Graph tags
|
||||
*/
|
||||
private extractOgTags(doc: Document): Record<string, string | undefined> {
|
||||
const tags: Record<string, string | undefined> = {}
|
||||
|
||||
const ogMetas = doc.querySelectorAll('meta[property^="og:"]')
|
||||
ogMetas.forEach(meta => {
|
||||
const property = meta.getAttribute('property')?.replace('og:', '')
|
||||
const content = meta.getAttribute('content')
|
||||
if (property && content) {
|
||||
switch (property) {
|
||||
case 'title':
|
||||
tags.title = content
|
||||
break
|
||||
case 'description':
|
||||
tags.description = content
|
||||
break
|
||||
case 'image':
|
||||
tags.image = content
|
||||
break
|
||||
case 'site_name':
|
||||
tags.siteName = content
|
||||
break
|
||||
case 'type':
|
||||
tags.type = content
|
||||
break
|
||||
case 'video':
|
||||
case 'video:url':
|
||||
tags.video = content
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return tags
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract Twitter Card tags
|
||||
*/
|
||||
private extractTwitterTags(doc: Document): Record<string, string | undefined> {
|
||||
const tags: Record<string, string | undefined> = {}
|
||||
|
||||
const twitterMetas = doc.querySelectorAll('meta[name^="twitter:"]')
|
||||
twitterMetas.forEach(meta => {
|
||||
const name = meta.getAttribute('name')?.replace('twitter:', '')
|
||||
const content = meta.getAttribute('content')
|
||||
if (name && content) {
|
||||
switch (name) {
|
||||
case 'title':
|
||||
tags.title = content
|
||||
break
|
||||
case 'description':
|
||||
tags.description = content
|
||||
break
|
||||
case 'image':
|
||||
case 'image:src':
|
||||
tags.image = content
|
||||
break
|
||||
case 'site':
|
||||
tags.site = content
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return tags
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract standard meta tags
|
||||
*/
|
||||
private extractMetaTags(doc: Document): Record<string, string | undefined> {
|
||||
const tags: Record<string, string | undefined> = {}
|
||||
|
||||
// Description
|
||||
const descMeta = doc.querySelector('meta[name="description"]')
|
||||
if (descMeta) {
|
||||
tags.description = descMeta.getAttribute('content') || undefined
|
||||
}
|
||||
|
||||
// Title from meta
|
||||
const titleMeta = doc.querySelector('meta[name="title"]')
|
||||
if (titleMeta) {
|
||||
tags.title = titleMeta.getAttribute('content') || undefined
|
||||
}
|
||||
|
||||
return tags
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract page title
|
||||
*/
|
||||
private extractTitle(doc: Document): string | undefined {
|
||||
return doc.querySelector('title')?.textContent || undefined
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract favicon URL
|
||||
*/
|
||||
private extractFavicon(doc: Document, pageUrl: string): string | undefined {
|
||||
// Try various link rel types
|
||||
const selectors = [
|
||||
'link[rel="icon"]',
|
||||
'link[rel="shortcut icon"]',
|
||||
'link[rel="apple-touch-icon"]'
|
||||
]
|
||||
|
||||
for (const selector of selectors) {
|
||||
const link = doc.querySelector(selector)
|
||||
const href = link?.getAttribute('href')
|
||||
if (href) {
|
||||
return this.resolveUrl(href, pageUrl)
|
||||
}
|
||||
}
|
||||
|
||||
// Default favicon location
|
||||
return this.resolveUrl('/favicon.ico', pageUrl)
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Utilities
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Normalize URL
|
||||
*/
|
||||
private normalizeUrl(url: string): string {
|
||||
let normalized = url.trim()
|
||||
|
||||
// Add protocol if missing
|
||||
if (!normalized.startsWith('http://') && !normalized.startsWith('https://')) {
|
||||
normalized = 'https://' + normalized
|
||||
}
|
||||
|
||||
return normalized
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve relative URL to absolute
|
||||
*/
|
||||
private resolveUrl(href: string, base: string): string {
|
||||
try {
|
||||
return new URL(href, base).toString()
|
||||
} catch {
|
||||
return href
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Wait for an in-flight preview request
|
||||
*/
|
||||
private async waitForPreview(url: string): Promise<LinkPreview> {
|
||||
// Poll until loading is done
|
||||
while (this._loading.get(url)) {
|
||||
await new Promise(resolve => setTimeout(resolve, 100))
|
||||
}
|
||||
|
||||
// Return cached result or error
|
||||
const cached = this.getCachedPreview(url)
|
||||
if (cached) return cached
|
||||
|
||||
return {
|
||||
url,
|
||||
domain: extractDomain(url)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clean expired cache entries
|
||||
*/
|
||||
private cleanCache(): void {
|
||||
const now = Date.now()
|
||||
|
||||
for (const [url, entry] of this.cache) {
|
||||
if (now - entry.timestamp > this.CACHE_TTL) {
|
||||
this.cache.delete(url)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Validation
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Check if URL is valid
|
||||
*/
|
||||
isValidUrl(url: string): boolean {
|
||||
try {
|
||||
const parsed = new URL(this.normalizeUrl(url))
|
||||
return parsed.protocol === 'http:' || parsed.protocol === 'https:'
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if URL is likely to be media
|
||||
*/
|
||||
isMediaUrl(url: string): boolean {
|
||||
const mediaExtensions = [
|
||||
'.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg',
|
||||
'.mp4', '.webm', '.mov', '.avi',
|
||||
'.mp3', '.wav', '.ogg', '.flac'
|
||||
]
|
||||
|
||||
const lowerUrl = url.toLowerCase()
|
||||
return mediaExtensions.some(ext => lowerUrl.includes(ext))
|
||||
}
|
||||
|
||||
/**
|
||||
* Guess media type from URL
|
||||
*/
|
||||
guessMediaType(url: string): 'image' | 'video' | 'audio' | 'other' {
|
||||
const lowerUrl = url.toLowerCase()
|
||||
|
||||
if (/\.(jpg|jpeg|png|gif|webp|svg)/.test(lowerUrl)) return 'image'
|
||||
if (/\.(mp4|webm|mov|avi)/.test(lowerUrl)) return 'video'
|
||||
if (/\.(mp3|wav|ogg|flac)/.test(lowerUrl)) return 'audio'
|
||||
|
||||
return 'other'
|
||||
}
|
||||
}
|
||||
|
|
@ -427,124 +427,6 @@ export class ReactionService extends BaseService {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Send a dislike reaction to an event
|
||||
*/
|
||||
async dislikeEvent(eventId: string, eventPubkey: string, eventKind: number): Promise<void> {
|
||||
if (!this.authService?.isAuthenticated?.value) {
|
||||
throw new Error('Must be authenticated to react')
|
||||
}
|
||||
|
||||
if (!this.relayHub?.isConnected) {
|
||||
throw new Error('Not connected to relays')
|
||||
}
|
||||
|
||||
const userPubkey = this.authService.user.value?.pubkey
|
||||
const userPrivkey = this.authService.user.value?.prvkey
|
||||
|
||||
if (!userPubkey || !userPrivkey) {
|
||||
throw new Error('User keys not available')
|
||||
}
|
||||
|
||||
// Check if user already disliked this event
|
||||
const eventReactions = this.getEventReactions(eventId)
|
||||
if (eventReactions.userHasDisliked) {
|
||||
throw new Error('Already disliked this event')
|
||||
}
|
||||
|
||||
try {
|
||||
this._isLoading.value = true
|
||||
|
||||
// Create reaction event template according to NIP-25
|
||||
const eventTemplate: EventTemplate = {
|
||||
kind: 7, // Reaction
|
||||
content: '-', // Dislike reaction
|
||||
tags: [
|
||||
['e', eventId, '', eventPubkey], // Event being reacted to
|
||||
['p', eventPubkey], // Author of the event being reacted to
|
||||
['k', eventKind.toString()] // Kind of the event being reacted to
|
||||
],
|
||||
created_at: Math.floor(Date.now() / 1000)
|
||||
}
|
||||
|
||||
// Sign the event
|
||||
const privkeyBytes = this.hexToUint8Array(userPrivkey)
|
||||
const signedEvent = finalizeEvent(eventTemplate, privkeyBytes)
|
||||
|
||||
// Publish the reaction
|
||||
await this.relayHub.publishEvent(signedEvent)
|
||||
|
||||
// Optimistically update local state
|
||||
this.handleReactionEvent(signedEvent)
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to dislike event:', error)
|
||||
throw error
|
||||
} finally {
|
||||
this._isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove a dislike from an event using NIP-09 deletion events
|
||||
*/
|
||||
async undislikeEvent(eventId: string): Promise<void> {
|
||||
if (!this.authService?.isAuthenticated?.value) {
|
||||
throw new Error('Must be authenticated to remove reaction')
|
||||
}
|
||||
|
||||
if (!this.relayHub?.isConnected) {
|
||||
throw new Error('Not connected to relays')
|
||||
}
|
||||
|
||||
const userPubkey = this.authService.user.value?.pubkey
|
||||
const userPrivkey = this.authService.user.value?.prvkey
|
||||
|
||||
if (!userPubkey || !userPrivkey) {
|
||||
throw new Error('User keys not available')
|
||||
}
|
||||
|
||||
// Get the user's reaction ID to delete
|
||||
const eventReactions = this.getEventReactions(eventId)
|
||||
|
||||
if (!eventReactions.userHasDisliked || !eventReactions.userReactionId) {
|
||||
throw new Error('No dislike reaction to remove')
|
||||
}
|
||||
|
||||
try {
|
||||
this._isLoading.value = true
|
||||
|
||||
// Create deletion event according to NIP-09
|
||||
const eventTemplate: EventTemplate = {
|
||||
kind: 5, // Deletion request
|
||||
content: '', // Empty content or reason
|
||||
tags: [
|
||||
['e', eventReactions.userReactionId], // The reaction event to delete
|
||||
['k', '7'] // Kind of event being deleted (reaction)
|
||||
],
|
||||
created_at: Math.floor(Date.now() / 1000)
|
||||
}
|
||||
|
||||
// Sign the event
|
||||
const privkeyBytes = this.hexToUint8Array(userPrivkey)
|
||||
const signedEvent = finalizeEvent(eventTemplate, privkeyBytes)
|
||||
|
||||
// Publish the deletion
|
||||
const result = await this.relayHub.publishEvent(signedEvent)
|
||||
|
||||
console.log(`ReactionService: Dislike deletion published to ${result.success}/${result.total} relays`)
|
||||
|
||||
// Optimistically update local state
|
||||
this.handleDeletionEvent(signedEvent)
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to remove dislike:', error)
|
||||
throw error
|
||||
} finally {
|
||||
this._isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper function to convert hex string to Uint8Array
|
||||
*/
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,5 +0,0 @@
|
|||
/**
|
||||
* Types index - re-export all types from the module
|
||||
*/
|
||||
|
||||
export * from './submission'
|
||||
|
|
@ -1,528 +0,0 @@
|
|||
/**
|
||||
* Link Aggregator Types
|
||||
*
|
||||
* Implements Reddit-style submissions using NIP-72 (Communities) and NIP-22 (Comments).
|
||||
* Submissions are kind 1111 events scoped to a community with structured metadata.
|
||||
*/
|
||||
|
||||
|
||||
// ============================================================================
|
||||
// Constants
|
||||
// ============================================================================
|
||||
|
||||
/** Nostr event kinds used by the link aggregator */
|
||||
export const SUBMISSION_KINDS = {
|
||||
/** Community definition (NIP-72) */
|
||||
COMMUNITY: 34550,
|
||||
/** Submission/comment (NIP-22) */
|
||||
SUBMISSION: 1111,
|
||||
/** Moderator approval (NIP-72) */
|
||||
APPROVAL: 4550,
|
||||
/** Reaction/vote (NIP-25) */
|
||||
REACTION: 7,
|
||||
/** Deletion (NIP-09) */
|
||||
DELETION: 5,
|
||||
/** File metadata (NIP-94) - for media references */
|
||||
FILE_METADATA: 1063
|
||||
} as const
|
||||
|
||||
/** Submission post types */
|
||||
export type SubmissionType = 'link' | 'media' | 'self'
|
||||
|
||||
/** Vote types for reactions */
|
||||
export type VoteType = 'upvote' | 'downvote' | null
|
||||
|
||||
/** Feed sort options */
|
||||
export type SortType = 'hot' | 'new' | 'top' | 'controversial'
|
||||
|
||||
/** Time range for "top" sorting */
|
||||
export type TimeRange = 'hour' | 'day' | 'week' | 'month' | 'year' | 'all'
|
||||
|
||||
// ============================================================================
|
||||
// Link Preview Types
|
||||
// ============================================================================
|
||||
|
||||
/** Open Graph metadata extracted from a URL */
|
||||
export interface LinkPreview {
|
||||
/** The original URL */
|
||||
url: string
|
||||
/** og:title or page title */
|
||||
title?: string
|
||||
/** og:description or meta description */
|
||||
description?: string
|
||||
/** og:image URL */
|
||||
image?: string
|
||||
/** og:site_name */
|
||||
siteName?: string
|
||||
/** og:type (article, video, etc.) */
|
||||
type?: string
|
||||
/** og:video for video embeds */
|
||||
videoUrl?: string
|
||||
/** Favicon URL */
|
||||
favicon?: string
|
||||
/** Domain extracted from URL */
|
||||
domain: string
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Media Types (NIP-92 / NIP-94)
|
||||
// ============================================================================
|
||||
|
||||
/** Media attachment metadata from imeta tag */
|
||||
export interface MediaAttachment {
|
||||
/** Media URL */
|
||||
url: string
|
||||
/** MIME type (e.g., "image/jpeg", "video/mp4") */
|
||||
mimeType?: string
|
||||
/** Dimensions in "WxH" format */
|
||||
dimensions?: string
|
||||
/** Width in pixels */
|
||||
width?: number
|
||||
/** Height in pixels */
|
||||
height?: number
|
||||
/** Blurhash for placeholder */
|
||||
blurhash?: string
|
||||
/** Alt text for accessibility */
|
||||
alt?: string
|
||||
/** SHA-256 hash of the file */
|
||||
hash?: string
|
||||
/** File size in bytes */
|
||||
size?: number
|
||||
/** Thumbnail URL */
|
||||
thumbnail?: string
|
||||
/** Fallback URLs */
|
||||
fallbacks?: string[]
|
||||
}
|
||||
|
||||
/** Media type classification */
|
||||
export type MediaType = 'image' | 'video' | 'audio' | 'other'
|
||||
|
||||
// ============================================================================
|
||||
// Submission Types
|
||||
// ============================================================================
|
||||
|
||||
/** Base submission data shared by all post types */
|
||||
export interface SubmissionBase {
|
||||
/** Nostr event ID */
|
||||
id: string
|
||||
/** Author public key */
|
||||
pubkey: string
|
||||
/** Unix timestamp (seconds) */
|
||||
created_at: number
|
||||
/** Event kind (1111) */
|
||||
kind: typeof SUBMISSION_KINDS.SUBMISSION
|
||||
/** Raw event tags */
|
||||
tags: string[][]
|
||||
/** Submission title (required) */
|
||||
title: string
|
||||
/** Post type discriminator */
|
||||
postType: SubmissionType
|
||||
/** Community reference (a-tag format) */
|
||||
communityRef?: string
|
||||
/** Hashtags/topics */
|
||||
hashtags: string[]
|
||||
/** Whether marked NSFW */
|
||||
nsfw: boolean
|
||||
/** Flair/label for the post */
|
||||
flair?: string
|
||||
}
|
||||
|
||||
/** Link submission with URL and preview */
|
||||
export interface LinkSubmission extends SubmissionBase {
|
||||
postType: 'link'
|
||||
/** External URL */
|
||||
url: string
|
||||
/** Link preview metadata */
|
||||
preview?: LinkPreview
|
||||
/** Optional body/description */
|
||||
body?: string
|
||||
}
|
||||
|
||||
/** Media submission with attachments */
|
||||
export interface MediaSubmission extends SubmissionBase {
|
||||
postType: 'media'
|
||||
/** Primary media attachment */
|
||||
media: MediaAttachment
|
||||
/** Additional media attachments (gallery) */
|
||||
gallery?: MediaAttachment[]
|
||||
/** Caption/description */
|
||||
body?: string
|
||||
}
|
||||
|
||||
/** Self/text submission */
|
||||
export interface SelfSubmission extends SubmissionBase {
|
||||
postType: 'self'
|
||||
/** Markdown body content */
|
||||
body: string
|
||||
}
|
||||
|
||||
/** Union type for all submission types */
|
||||
export type Submission = LinkSubmission | MediaSubmission | SelfSubmission
|
||||
|
||||
// ============================================================================
|
||||
// Voting & Scoring
|
||||
// ============================================================================
|
||||
|
||||
/** Vote counts and user state for a submission */
|
||||
export interface SubmissionVotes {
|
||||
/** Total upvotes */
|
||||
upvotes: number
|
||||
/** Total downvotes */
|
||||
downvotes: number
|
||||
/** Net score (upvotes - downvotes) */
|
||||
score: number
|
||||
/** Current user's vote */
|
||||
userVote: VoteType
|
||||
/** User's vote event ID (for deletion) */
|
||||
userVoteId?: string
|
||||
}
|
||||
|
||||
/** Ranking scores for sorting */
|
||||
export interface SubmissionRanking {
|
||||
/** Hot rank score (activity + recency) */
|
||||
hotRank: number
|
||||
/** Controversy rank (balanced voting) */
|
||||
controversyRank: number
|
||||
/** Scaled rank (amplifies smaller communities) */
|
||||
scaledRank: number
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Full Submission with Metadata
|
||||
// ============================================================================
|
||||
|
||||
/** Complete submission with all associated data */
|
||||
export type SubmissionWithMeta = Submission & {
|
||||
/** Vote counts and user state */
|
||||
votes: SubmissionVotes
|
||||
/** Ranking scores */
|
||||
ranking: SubmissionRanking
|
||||
/** Total comment count */
|
||||
commentCount: number
|
||||
/** Whether the submission is saved by current user */
|
||||
isSaved: boolean
|
||||
/** Whether hidden by current user */
|
||||
isHidden: boolean
|
||||
/** Approval status in moderated community */
|
||||
approvalStatus: 'pending' | 'approved' | 'rejected' | null
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Comments
|
||||
// ============================================================================
|
||||
|
||||
/** Comment on a submission (also kind 1111) */
|
||||
export interface SubmissionComment {
|
||||
/** Nostr event ID */
|
||||
id: string
|
||||
/** Author public key */
|
||||
pubkey: string
|
||||
/** Unix timestamp */
|
||||
created_at: number
|
||||
/** Comment text content */
|
||||
content: string
|
||||
/** Root submission ID */
|
||||
rootId: string
|
||||
/** Direct parent ID (submission or comment) */
|
||||
parentId: string
|
||||
/** Depth in comment tree (0 = top-level) */
|
||||
depth: number
|
||||
/** Child comments */
|
||||
replies: SubmissionComment[]
|
||||
/** Vote data */
|
||||
votes: SubmissionVotes
|
||||
/** Whether collapsed in UI */
|
||||
isCollapsed?: boolean
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Community Types (NIP-72)
|
||||
// ============================================================================
|
||||
|
||||
/** Community moderator */
|
||||
export interface CommunityModerator {
|
||||
pubkey: string
|
||||
relay?: string
|
||||
role: 'moderator' | 'admin'
|
||||
}
|
||||
|
||||
/** Community definition (kind 34550) */
|
||||
export interface Community {
|
||||
/** Unique identifier (d-tag) */
|
||||
id: string
|
||||
/** Creator public key */
|
||||
pubkey: string
|
||||
/** Display name */
|
||||
name: string
|
||||
/** Description/about */
|
||||
description?: string
|
||||
/** Banner/header image URL */
|
||||
image?: string
|
||||
/** Icon/avatar URL */
|
||||
icon?: string
|
||||
/** List of moderators */
|
||||
moderators: CommunityModerator[]
|
||||
/** Rules (markdown) */
|
||||
rules?: string
|
||||
/** Preferred relays */
|
||||
relays: {
|
||||
author?: string
|
||||
requests?: string
|
||||
approvals?: string
|
||||
}
|
||||
/** Tags/topics */
|
||||
tags: string[]
|
||||
/** Whether posts require approval */
|
||||
requiresApproval: boolean
|
||||
/** Creation timestamp */
|
||||
created_at: number
|
||||
}
|
||||
|
||||
/** Community reference (a-tag format) */
|
||||
export interface CommunityRef {
|
||||
/** "34550" */
|
||||
kind: string
|
||||
/** Community creator pubkey */
|
||||
pubkey: string
|
||||
/** Community d-tag identifier */
|
||||
identifier: string
|
||||
/** Relay hint */
|
||||
relay?: string
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Form Types (for creating/editing)
|
||||
// ============================================================================
|
||||
|
||||
/** Form data for creating a link submission */
|
||||
export interface LinkSubmissionForm {
|
||||
postType: 'link'
|
||||
title: string
|
||||
url: string
|
||||
body?: string
|
||||
communityRef?: string
|
||||
nsfw?: boolean
|
||||
flair?: string
|
||||
}
|
||||
|
||||
/** Form data for creating a media submission */
|
||||
export interface MediaSubmissionForm {
|
||||
postType: 'media'
|
||||
title: string
|
||||
/** File to upload, or URL if already uploaded */
|
||||
media: File | string
|
||||
body?: string
|
||||
alt?: string
|
||||
communityRef?: string
|
||||
nsfw?: boolean
|
||||
flair?: string
|
||||
}
|
||||
|
||||
/** Form data for creating a self/text submission */
|
||||
export interface SelfSubmissionForm {
|
||||
postType: 'self'
|
||||
title: string
|
||||
body: string
|
||||
communityRef?: string
|
||||
nsfw?: boolean
|
||||
flair?: string
|
||||
}
|
||||
|
||||
/** Union type for submission forms */
|
||||
export type SubmissionForm = LinkSubmissionForm | MediaSubmissionForm | SelfSubmissionForm
|
||||
|
||||
// ============================================================================
|
||||
// Feed Configuration
|
||||
// ============================================================================
|
||||
|
||||
/** Configuration for fetching submissions */
|
||||
export interface SubmissionFeedConfig {
|
||||
/** Community to filter by (optional, null = all) */
|
||||
community?: CommunityRef | null
|
||||
/** Sort order */
|
||||
sort: SortType
|
||||
/** Time range for "top" sort */
|
||||
timeRange?: TimeRange
|
||||
/** Filter by post type */
|
||||
postTypes?: SubmissionType[]
|
||||
/** Include NSFW content */
|
||||
includeNsfw: boolean
|
||||
/** Maximum submissions to fetch */
|
||||
limit: number
|
||||
/** Author filter */
|
||||
authors?: string[]
|
||||
/** Hashtag filter */
|
||||
hashtags?: string[]
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Helper Functions
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Parse an 'a' tag into a CommunityRef
|
||||
* Format: "34550:<pubkey>:<identifier>"
|
||||
*/
|
||||
export function parseCommunityRef(aTag: string, relay?: string): CommunityRef | null {
|
||||
const parts = aTag.split(':')
|
||||
if (parts.length < 3 || parts[0] !== '34550') {
|
||||
return null
|
||||
}
|
||||
return {
|
||||
kind: parts[0],
|
||||
pubkey: parts[1],
|
||||
identifier: parts.slice(2).join(':'), // identifier may contain colons
|
||||
relay
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Format a CommunityRef back to 'a' tag format
|
||||
*/
|
||||
export function formatCommunityRef(ref: CommunityRef): string {
|
||||
return `${ref.kind}:${ref.pubkey}:${ref.identifier}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract domain from URL
|
||||
*/
|
||||
export function extractDomain(url: string): string {
|
||||
try {
|
||||
const parsed = new URL(url)
|
||||
return parsed.hostname.replace(/^www\./, '')
|
||||
} catch {
|
||||
return url
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Classify media type from MIME type
|
||||
*/
|
||||
export function classifyMediaType(mimeType?: string): MediaType {
|
||||
if (!mimeType) return 'other'
|
||||
if (mimeType.startsWith('image/')) return 'image'
|
||||
if (mimeType.startsWith('video/')) return 'video'
|
||||
if (mimeType.startsWith('audio/')) return 'audio'
|
||||
return 'other'
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse imeta tag into MediaAttachment
|
||||
* Format: ["imeta", "url <url>", "m <mime>", "dim <WxH>", ...]
|
||||
*/
|
||||
export function parseImetaTag(tag: string[]): MediaAttachment | null {
|
||||
if (tag[0] !== 'imeta') return null
|
||||
|
||||
const attachment: MediaAttachment = { url: '' }
|
||||
|
||||
for (let i = 1; i < tag.length; i++) {
|
||||
const [key, ...valueParts] = tag[i].split(' ')
|
||||
const value = valueParts.join(' ')
|
||||
|
||||
switch (key) {
|
||||
case 'url':
|
||||
attachment.url = value
|
||||
break
|
||||
case 'm':
|
||||
attachment.mimeType = value
|
||||
break
|
||||
case 'dim':
|
||||
attachment.dimensions = value
|
||||
const [w, h] = value.split('x').map(Number)
|
||||
if (!isNaN(w)) attachment.width = w
|
||||
if (!isNaN(h)) attachment.height = h
|
||||
break
|
||||
case 'blurhash':
|
||||
attachment.blurhash = value
|
||||
break
|
||||
case 'alt':
|
||||
attachment.alt = value
|
||||
break
|
||||
case 'x':
|
||||
attachment.hash = value
|
||||
break
|
||||
case 'size':
|
||||
attachment.size = parseInt(value, 10)
|
||||
break
|
||||
case 'thumb':
|
||||
attachment.thumbnail = value
|
||||
break
|
||||
case 'fallback':
|
||||
attachment.fallbacks = attachment.fallbacks || []
|
||||
attachment.fallbacks.push(value)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
return attachment.url ? attachment : null
|
||||
}
|
||||
|
||||
/**
|
||||
* Build imeta tag from MediaAttachment
|
||||
*/
|
||||
export function buildImetaTag(media: MediaAttachment): string[] {
|
||||
const tag = ['imeta']
|
||||
|
||||
tag.push(`url ${media.url}`)
|
||||
if (media.mimeType) tag.push(`m ${media.mimeType}`)
|
||||
if (media.dimensions) tag.push(`dim ${media.dimensions}`)
|
||||
else if (media.width && media.height) tag.push(`dim ${media.width}x${media.height}`)
|
||||
if (media.blurhash) tag.push(`blurhash ${media.blurhash}`)
|
||||
if (media.alt) tag.push(`alt ${media.alt}`)
|
||||
if (media.hash) tag.push(`x ${media.hash}`)
|
||||
if (media.size) tag.push(`size ${media.size}`)
|
||||
if (media.thumbnail) tag.push(`thumb ${media.thumbnail}`)
|
||||
media.fallbacks?.forEach(fb => tag.push(`fallback ${fb}`))
|
||||
|
||||
return tag
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Ranking Algorithms
|
||||
// ============================================================================
|
||||
|
||||
/** Epoch for hot rank calculation (Unix timestamp) */
|
||||
const HOT_RANK_EPOCH = 1134028003 // Dec 8, 2005 (Reddit's epoch)
|
||||
|
||||
/**
|
||||
* Calculate hot rank score (Reddit/Lemmy style)
|
||||
* Higher scores for posts with more upvotes that are newer
|
||||
*/
|
||||
export function calculateHotRank(score: number, createdAt: number): number {
|
||||
const order = Math.log10(Math.max(Math.abs(score), 1))
|
||||
const sign = score > 0 ? 1 : score < 0 ? -1 : 0
|
||||
const seconds = createdAt - HOT_RANK_EPOCH
|
||||
return sign * order + seconds / 45000
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate controversy rank
|
||||
* Higher scores for posts with balanced up/down votes
|
||||
*/
|
||||
export function calculateControversyRank(upvotes: number, downvotes: number): number {
|
||||
const total = upvotes + downvotes
|
||||
if (total === 0) return 0
|
||||
|
||||
const magnitude = Math.pow(total, 0.8)
|
||||
const balance = Math.min(upvotes, downvotes) / Math.max(upvotes, downvotes, 1)
|
||||
|
||||
return magnitude * balance
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate confidence score (Wilson score interval lower bound)
|
||||
* Used for "best" comment sorting
|
||||
*/
|
||||
export function calculateConfidence(upvotes: number, downvotes: number): number {
|
||||
const n = upvotes + downvotes
|
||||
if (n === 0) return 0
|
||||
|
||||
const z = 1.96 // 95% confidence
|
||||
const p = upvotes / n
|
||||
|
||||
const left = p + (z * z) / (2 * n)
|
||||
const right = z * Math.sqrt((p * (1 - p) + (z * z) / (4 * n)) / n)
|
||||
const under = 1 + (z * z) / n
|
||||
|
||||
return (left - right) / under
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* SubmissionDetailPage - Page wrapper for submission detail view
|
||||
* Extracts route params and passes to SubmissionDetail component
|
||||
*/
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import SubmissionDetail from '../components/SubmissionDetail.vue'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const submissionId = computed(() => route.params.id as string)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SubmissionDetail :submission-id="submissionId" />
|
||||
</template>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* SubmitPage - Page wrapper for submission composer
|
||||
* Handles route query params for community pre-selection
|
||||
*/
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import SubmitComposer from '../components/SubmitComposer.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
// Get community from query param if provided (e.g., /submit?community=...)
|
||||
const community = computed(() => route.query.community as string | undefined)
|
||||
|
||||
// Handle submission completion
|
||||
function onSubmitted(submissionId: string) {
|
||||
// Navigation is handled by SubmitComposer
|
||||
console.log('Submission created:', submissionId)
|
||||
}
|
||||
|
||||
// Handle cancel - go back
|
||||
function onCancel() {
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SubmitComposer
|
||||
:community="community"
|
||||
@submitted="onSubmitted"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -1,56 +1,268 @@
|
|||
<template>
|
||||
<div class="flex flex-col h-screen bg-background">
|
||||
<PWAInstallPrompt auto-show />
|
||||
<!-- TODO: Implement push notifications properly - currently commenting out admin notifications dialog -->
|
||||
<!-- <NotificationPermission auto-show /> -->
|
||||
|
||||
<!-- Header -->
|
||||
<div class="sticky top-0 z-30 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
|
||||
<div class="max-w-4xl mx-auto flex items-center justify-between px-4 py-2 sm:px-6">
|
||||
<!-- Compact Header with Filters Toggle (Mobile) -->
|
||||
<div class="sticky top-0 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
|
||||
<div class="flex items-center justify-between px-4 py-2 sm:px-6">
|
||||
<h1 class="text-lg font-semibold">Feed</h1>
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Active Filter Indicator -->
|
||||
<div class="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<span v-if="activeFilterCount > 0">{{ activeFilterCount }} filters</span>
|
||||
<span v-else>All content</span>
|
||||
</div>
|
||||
<!-- Filter Toggle Button -->
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@click="showFilters = !showFilters"
|
||||
class="h-8 w-8 p-0"
|
||||
>
|
||||
<Filter class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collapsible Filter Panel -->
|
||||
<div v-if="showFilters" class="border-t bg-background/95 backdrop-blur">
|
||||
<div class="px-4 py-3 sm:px-6">
|
||||
<FeedFilters v-model="selectedFilters" :admin-pubkeys="adminPubkeys" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Feed Area -->
|
||||
<!-- Main Feed Area - Takes remaining height with scrolling -->
|
||||
<div class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6">
|
||||
<SubmissionList
|
||||
:show-ranks="false"
|
||||
:show-time-range="true"
|
||||
initial-sort="hot"
|
||||
@submission-click="onSubmissionClick"
|
||||
<!-- Collapsible Composer -->
|
||||
<div v-if="showComposer || replyTo" class="border-b bg-background sticky top-0 z-10">
|
||||
<div class="max-h-[70vh] overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
|
||||
<div class="px-4 py-3 sm:px-6">
|
||||
<!-- Regular Note Composer -->
|
||||
<NoteComposer
|
||||
v-if="composerType === 'note' || replyTo"
|
||||
:reply-to="replyTo"
|
||||
@note-published="onNotePublished"
|
||||
@clear-reply="onClearReply"
|
||||
@close="onCloseComposer"
|
||||
/>
|
||||
|
||||
<!-- Rideshare Composer -->
|
||||
<RideshareComposer
|
||||
v-else-if="composerType === 'rideshare'"
|
||||
@rideshare-published="onRidesharePublished"
|
||||
@close="onCloseComposer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feed Content - Natural flow with padding for sticky elements -->
|
||||
<div>
|
||||
<NostrFeed
|
||||
:feed-type="feedType"
|
||||
:content-filters="selectedFilters"
|
||||
:admin-pubkeys="adminPubkeys"
|
||||
:key="feedKey"
|
||||
:compact-mode="true"
|
||||
@reply-to-note="onReplyToNote"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Action Button for Create Post -->
|
||||
<div class="fixed bottom-6 right-6 z-50">
|
||||
<Button
|
||||
@click="navigateToSubmit"
|
||||
size="lg"
|
||||
class="h-14 w-14 rounded-full shadow-lg hover:shadow-xl transition-all bg-primary hover:bg-primary/90 border-2 border-primary-foreground/20 flex items-center justify-center p-0"
|
||||
>
|
||||
<Plus class="h-6 w-6 stroke-[2.5]" />
|
||||
</Button>
|
||||
<!-- Floating Action Buttons for Compose -->
|
||||
<div v-if="!showComposer && !replyTo" class="fixed bottom-6 right-6 z-50">
|
||||
<!-- Main compose button -->
|
||||
<div class="flex flex-col items-end gap-3">
|
||||
<!-- Secondary buttons (when expanded) -->
|
||||
<div v-if="showComposerOptions" class="flex flex-col gap-2">
|
||||
<Button
|
||||
@click="openComposer('note')"
|
||||
size="lg"
|
||||
class="h-12 px-4 rounded-full shadow-lg hover:shadow-xl transition-all gap-2 bg-card border-2 border-border hover:bg-accent text-card-foreground"
|
||||
>
|
||||
<MessageSquare class="h-4 w-4" />
|
||||
<span class="text-sm font-medium">Note</span>
|
||||
</Button>
|
||||
<Button
|
||||
@click="openComposer('rideshare')"
|
||||
size="lg"
|
||||
class="h-12 px-4 rounded-full shadow-lg hover:shadow-xl transition-all gap-2 bg-card border-2 border-border hover:bg-accent text-card-foreground"
|
||||
>
|
||||
<Car class="h-4 w-4" />
|
||||
<span class="text-sm font-medium">Rideshare</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Main FAB -->
|
||||
<Button
|
||||
@click="toggleComposerOptions"
|
||||
size="lg"
|
||||
class="h-14 w-14 rounded-full shadow-lg hover:shadow-xl transition-all bg-primary hover:bg-primary/90 border-2 border-primary-foreground/20 flex items-center justify-center p-0"
|
||||
>
|
||||
<Plus
|
||||
class="h-6 w-6 stroke-[2.5] transition-transform duration-200"
|
||||
:class="{ 'rotate-45': showComposerOptions }"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Filters Bar (Mobile) -->
|
||||
<div class="md:hidden sticky bottom-0 z-30 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-t">
|
||||
<div class="flex overflow-x-auto px-4 py-2 gap-2 scrollbar-hide">
|
||||
<Button
|
||||
v-for="(preset, key) in quickFilterPresets"
|
||||
:key="key"
|
||||
:variant="isPresetActive(key) ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
@click="setQuickFilter(key)"
|
||||
class="whitespace-nowrap"
|
||||
>
|
||||
{{ preset.label }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
// NostrFeed is now registered globally by the nostr-feed module
|
||||
// No need to import it directly - use the modular version
|
||||
// TODO: Re-enable when push notifications are properly implemented
|
||||
// import NotificationPermission from '@/components/notifications/NotificationPermission.vue'
|
||||
import { ref, computed, watch } from 'vue'
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Plus } from 'lucide-vue-next'
|
||||
import { Filter, Plus, MessageSquare, Car } from 'lucide-vue-next'
|
||||
import PWAInstallPrompt from '@/components/pwa/PWAInstallPrompt.vue'
|
||||
import SubmissionList from '@/modules/nostr-feed/components/SubmissionList.vue'
|
||||
import type { SubmissionWithMeta } from '@/modules/nostr-feed/types/submission'
|
||||
import FeedFilters from '@/modules/nostr-feed/components/FeedFilters.vue'
|
||||
import NoteComposer from '@/modules/nostr-feed/components/NoteComposer.vue'
|
||||
import RideshareComposer from '@/modules/nostr-feed/components/RideshareComposer.vue'
|
||||
import NostrFeed from '@/modules/nostr-feed/components/NostrFeed.vue'
|
||||
import { FILTER_PRESETS } from '@/modules/nostr-feed/config/content-filters'
|
||||
import appConfig from '@/app.config'
|
||||
import type { ContentFilter } from '@/modules/nostr-feed/services/FeedService'
|
||||
import type { ReplyToNote } from '@/modules/nostr-feed/components/NoteComposer.vue'
|
||||
|
||||
const router = useRouter()
|
||||
// Get admin pubkeys from app config
|
||||
const adminPubkeys = appConfig.modules['nostr-feed']?.config?.adminPubkeys || []
|
||||
|
||||
// Handle submission click - navigate to detail page
|
||||
function onSubmissionClick(submission: SubmissionWithMeta) {
|
||||
router.push({ name: 'submission-detail', params: { id: submission.id } })
|
||||
// UI state
|
||||
const showFilters = ref(false)
|
||||
const showComposer = ref(false)
|
||||
const showComposerOptions = ref(false)
|
||||
const composerType = ref<'note' | 'rideshare'>('note')
|
||||
|
||||
// Feed configuration
|
||||
const selectedFilters = ref<ContentFilter[]>(FILTER_PRESETS.all)
|
||||
const feedKey = ref(0) // Force feed component to re-render when filters change
|
||||
|
||||
// Note composer state
|
||||
const replyTo = ref<ReplyToNote | undefined>()
|
||||
|
||||
// Quick filter presets for mobile bottom bar
|
||||
const quickFilterPresets = {
|
||||
all: { label: 'All', filters: FILTER_PRESETS.all },
|
||||
announcements: { label: 'Announcements', filters: FILTER_PRESETS.announcements },
|
||||
rideshare: { label: 'Rideshare', filters: FILTER_PRESETS.rideshare }
|
||||
}
|
||||
|
||||
// Navigate to submit page
|
||||
function navigateToSubmit() {
|
||||
router.push({ name: 'submit-post' })
|
||||
// Computed properties
|
||||
const activeFilterCount = computed(() => selectedFilters.value.length)
|
||||
|
||||
const isPresetActive = (presetKey: string) => {
|
||||
const preset = quickFilterPresets[presetKey as keyof typeof quickFilterPresets]
|
||||
if (!preset) return false
|
||||
|
||||
return preset.filters.length === selectedFilters.value.length &&
|
||||
preset.filters.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))
|
||||
}
|
||||
|
||||
// Determine feed type based on selected filters
|
||||
const feedType = computed(() => {
|
||||
if (selectedFilters.value.length === 0) return 'all'
|
||||
|
||||
// Check if it matches the 'all' preset
|
||||
if (selectedFilters.value.length === FILTER_PRESETS.all.length &&
|
||||
FILTER_PRESETS.all.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))) {
|
||||
return 'all'
|
||||
}
|
||||
|
||||
// Check if it matches the announcements preset
|
||||
if (selectedFilters.value.length === FILTER_PRESETS.announcements.length &&
|
||||
FILTER_PRESETS.announcements.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))) {
|
||||
return 'announcements'
|
||||
}
|
||||
|
||||
// Check if it matches the rideshare preset
|
||||
if (selectedFilters.value.length === FILTER_PRESETS.rideshare.length &&
|
||||
FILTER_PRESETS.rideshare.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))) {
|
||||
return 'rideshare'
|
||||
}
|
||||
|
||||
// For all other cases, use custom
|
||||
return 'custom'
|
||||
})
|
||||
|
||||
// Force feed to reload when filters change
|
||||
watch(selectedFilters, () => {
|
||||
feedKey.value++
|
||||
}, { deep: true })
|
||||
|
||||
// Handle note composer events
|
||||
// Methods
|
||||
const setQuickFilter = (presetKey: string) => {
|
||||
const preset = quickFilterPresets[presetKey as keyof typeof quickFilterPresets]
|
||||
if (preset) {
|
||||
selectedFilters.value = preset.filters
|
||||
}
|
||||
}
|
||||
|
||||
const onNotePublished = (noteId: string) => {
|
||||
console.log('Note published:', noteId)
|
||||
// Refresh the feed to show the new note
|
||||
feedKey.value++
|
||||
// Clear reply state and hide composer
|
||||
replyTo.value = undefined
|
||||
showComposer.value = false
|
||||
}
|
||||
|
||||
const onClearReply = () => {
|
||||
replyTo.value = undefined
|
||||
showComposer.value = false
|
||||
}
|
||||
|
||||
const onReplyToNote = (note: ReplyToNote) => {
|
||||
replyTo.value = note
|
||||
showComposer.value = true
|
||||
}
|
||||
|
||||
const onCloseComposer = () => {
|
||||
showComposer.value = false
|
||||
showComposerOptions.value = false
|
||||
replyTo.value = undefined
|
||||
}
|
||||
|
||||
// New composer methods
|
||||
const toggleComposerOptions = () => {
|
||||
showComposerOptions.value = !showComposerOptions.value
|
||||
}
|
||||
|
||||
const openComposer = (type: 'note' | 'rideshare') => {
|
||||
composerType.value = type
|
||||
showComposer.value = true
|
||||
showComposerOptions.value = false
|
||||
}
|
||||
|
||||
const onRidesharePublished = (noteId: string) => {
|
||||
console.log('Rideshare post published:', noteId)
|
||||
// Refresh the feed to show the new rideshare post
|
||||
feedKey.value++
|
||||
// Hide composer
|
||||
showComposer.value = false
|
||||
showComposerOptions.value = false
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,231 +0,0 @@
|
|||
<template>
|
||||
<div
|
||||
class="min-h-screen flex items-start sm:items-center justify-center px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-8 sm:py-12">
|
||||
<div class="flex flex-col items-center justify-center space-y-3 sm:space-y-6 max-w-4xl mx-auto w-full mt-8 sm:mt-0">
|
||||
<!-- Welcome Section -->
|
||||
<div class="text-center space-y-2 sm:space-y-4">
|
||||
<div class="flex justify-center">
|
||||
<img src="@/assets/logo.png" alt="Logo" class="h-34 w-34 sm:h-42 sm:w-42 lg:h-50 lg:w-50" />
|
||||
</div>
|
||||
<div class="space-y-1 sm:space-y-3">
|
||||
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight">Welcome to the Virtual Realm</h1>
|
||||
<p class="text-sm sm:text-base md:text-xl text-muted-foreground max-w-md mx-auto px-4">
|
||||
Your secure platform for events and community management
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Demo Account Creation Card -->
|
||||
<Card class="w-full max-w-md">
|
||||
<CardContent class="p-4 sm:p-6 md:p-8 space-y-4 sm:space-y-6">
|
||||
<!-- Demo Badge -->
|
||||
<div class="flex justify-center">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800">
|
||||
<div class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div>
|
||||
<span class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Demo Mode</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mode Toggle -->
|
||||
<div class="flex justify-center">
|
||||
<div class="inline-flex rounded-lg bg-muted p-1">
|
||||
<Button variant="ghost" size="sm" :class="activeMode === 'demo' ? 'bg-background shadow-sm' : ''"
|
||||
@click="activeMode = 'demo'">
|
||||
Demo Account
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" :class="activeMode === 'login' ? 'bg-background shadow-sm' : ''"
|
||||
@click="activeMode = 'login'">
|
||||
Sign In
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Demo Mode Content -->
|
||||
<div v-if="activeMode === 'demo'" class="space-y-4 sm:space-y-6 relative">
|
||||
<!-- Loading Overlay -->
|
||||
<div v-if="isLoading" class="absolute inset-0 bg-background/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center rounded-lg">
|
||||
<div class="flex flex-col items-center gap-3 text-center px-4">
|
||||
<div class="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
|
||||
<div>
|
||||
<p class="text-sm font-medium">Creating your demo account...</p>
|
||||
<p class="text-xs text-muted-foreground mt-1">This will only take a moment</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Demo Info -->
|
||||
<div class="text-center space-y-2 sm:space-y-3">
|
||||
<h2 class="text-lg sm:text-xl md:text-2xl font-semibold">Create Demo Account</h2>
|
||||
<p class="text-muted-foreground text-xs sm:text-sm leading-relaxed">
|
||||
Get instant access with a pre-funded demo account containing
|
||||
<span class="font-semibold text-green-600 dark:text-green-400">1,000,000 FAKE satoshis</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Create Account Button -->
|
||||
<Button @click="createFakeAccount" :disabled="isLoading"
|
||||
class="w-full h-10 sm:h-12 text-base sm:text-lg font-medium" size="lg">
|
||||
{{ 'Create Demo Account' }}
|
||||
</Button>
|
||||
|
||||
<!-- Info Text -->
|
||||
<p class="text-xs text-center text-muted-foreground">
|
||||
Your credentials will be generated automatically
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Login Mode Content -->
|
||||
<div v-else class="space-y-4 sm:space-y-6">
|
||||
<!-- Login Info -->
|
||||
<div class="text-center space-y-2 sm:space-y-3">
|
||||
<h2 class="text-lg sm:text-xl md:text-2xl font-semibold">Sign In</h2>
|
||||
<p class="text-muted-foreground text-xs sm:text-sm leading-relaxed">
|
||||
Sign in to your existing account
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Login Form -->
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="login-username">Username or Email</Label>
|
||||
<Input id="login-username" v-model="loginForm.username" placeholder="Enter your username or email"
|
||||
@keydown.enter="handleLogin" />
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="login-password">Password</Label>
|
||||
<Input id="login-password" type="password" v-model="loginForm.password"
|
||||
placeholder="Enter your password" @keydown.enter="handleLogin" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Login Button -->
|
||||
<Button @click="handleLogin" :disabled="isLoading || !canLogin"
|
||||
class="w-full h-10 sm:h-12 text-base sm:text-lg font-medium" size="lg">
|
||||
<span v-if="isLoading" class="animate-spin mr-2">⚡</span>
|
||||
{{ isLoading ? 'Signing In...' : 'Sign In' }}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Error Display -->
|
||||
<p v-if="error" class="text-sm text-destructive text-center">
|
||||
{{ error }}
|
||||
</p>
|
||||
|
||||
<!-- Success Message -->
|
||||
<div v-if="successMessage"
|
||||
class="text-sm text-green-600 dark:text-green-400 text-center bg-green-50 dark:bg-green-950/20 p-3 rounded-lg border border-green-200 dark:border-green-800">
|
||||
{{ successMessage }}
|
||||
</div>
|
||||
|
||||
<!-- Demo Notice -->
|
||||
<div class="text-center space-y-2">
|
||||
<p class="text-xs text-muted-foreground">
|
||||
This is a demo environment. All transactions use fake satoshis for testing purposes.
|
||||
</p>
|
||||
<div class="flex items-center justify-center gap-1 text-xs text-amber-600 dark:text-amber-400">
|
||||
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="font-medium">Demo data may be erased at any time</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { auth } from '@/composables/useAuthService'
|
||||
import { useDemoAccountGenerator } from '@/composables/useDemoAccountGenerator'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
const router = useRouter()
|
||||
const { isLoading, error, generateNewCredentials } = useDemoAccountGenerator()
|
||||
const successMessage = ref('')
|
||||
const activeMode = ref<'demo' | 'login'>('demo')
|
||||
|
||||
// Login form
|
||||
const loginForm = ref({
|
||||
username: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
const canLogin = computed(() => {
|
||||
return loginForm.value.username.trim() && loginForm.value.password.trim()
|
||||
})
|
||||
|
||||
// Create fake account and automatically log in
|
||||
async function createFakeAccount() {
|
||||
try {
|
||||
isLoading.value = true
|
||||
error.value = ''
|
||||
successMessage.value = ''
|
||||
|
||||
// Generate credentials
|
||||
const credentials = generateNewCredentials()
|
||||
|
||||
// Register the fake account
|
||||
await auth.register({
|
||||
username: credentials.username,
|
||||
email: credentials.email,
|
||||
password: credentials.password,
|
||||
password_repeat: credentials.password
|
||||
})
|
||||
|
||||
// Show success with username
|
||||
successMessage.value = `Account created! Username: ${credentials.username}`
|
||||
toast.success(`Logged in as ${credentials.username}!`)
|
||||
|
||||
// Redirect to home page after successful registration
|
||||
setTimeout(() => {
|
||||
router.push('/')
|
||||
}, 2000)
|
||||
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : 'Failed to create demo account'
|
||||
toast.error('Failed to create demo account. Please try again.')
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Login with existing credentials
|
||||
async function handleLogin() {
|
||||
if (!canLogin.value) return
|
||||
|
||||
try {
|
||||
isLoading.value = true
|
||||
error.value = ''
|
||||
successMessage.value = ''
|
||||
|
||||
await auth.login({
|
||||
username: loginForm.value.username,
|
||||
password: loginForm.value.password
|
||||
})
|
||||
|
||||
successMessage.value = 'Login successful! Redirecting...'
|
||||
toast.success('Login successful!')
|
||||
|
||||
// Redirect to home page after successful login
|
||||
setTimeout(() => {
|
||||
router.push('/')
|
||||
}, 1500)
|
||||
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : 'Login failed'
|
||||
toast.error('Login failed. Please check your credentials.')
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
216
target-ui.md
216
target-ui.md
|
|
@ -1,216 +0,0 @@
|
|||
<template>
|
||||
<!--
|
||||
This example requires updating your template:
|
||||
|
||||
```
|
||||
<html class="h-full bg-white dark:bg-gray-900">
|
||||
<body class="h-full">
|
||||
```
|
||||
-->
|
||||
<div>
|
||||
<TransitionRoot as="template" :show="sidebarOpen">
|
||||
<Dialog class="relative z-50 lg:hidden" @close="sidebarOpen = false">
|
||||
<TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0" enter-to="" leave="transition-opacity ease-linear duration-300" leave-from="" leave-to="opacity-0">
|
||||
<div class="fixed inset-0 bg-gray-900/80"></div>
|
||||
</TransitionChild>
|
||||
|
||||
<div class="fixed inset-0 flex">
|
||||
<TransitionChild as="template" enter="transition ease-in-out duration-300 transform" enter-from="-translate-x-full" enter-to="translate-x-0" leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0" leave-to="-translate-x-full">
|
||||
<DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
|
||||
<TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0" enter-to="" leave="ease-in-out duration-300" leave-from="" leave-to="opacity-0">
|
||||
<div class="absolute left-full top-0 flex w-16 justify-center pt-5">
|
||||
<button type="button" class="-m-2.5 p-2.5" @click="sidebarOpen = false">
|
||||
<span class="sr-only">Close sidebar</span>
|
||||
<XMarkIcon class="size-6 text-white" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
|
||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||
<div class="relative flex grow flex-col gap-y-5 overflow-y-auto bg-white px-6 pb-4 dark:bg-gray-900 dark:ring dark:ring-white/10 dark:before:pointer-events-none dark:before:absolute dark:before:inset-0 dark:before:bg-black/10">
|
||||
<div class="relative flex h-16 shrink-0 items-center">
|
||||
<img class="h-8 w-auto dark:hidden" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company" />
|
||||
<img class="hidden h-8 w-auto dark:block" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
|
||||
</div>
|
||||
<nav class="relative flex flex-1 flex-col">
|
||||
<ul role="list" class="flex flex-1 flex-col gap-y-7">
|
||||
<li>
|
||||
<ul role="list" class="-mx-2 space-y-1">
|
||||
<li v-for="item in navigation" :key="item.name">
|
||||
<a :href="item.href" :class="[item.current ? 'bg-gray-50 text-indigo-600 dark:bg-white/5 dark:text-white' : 'text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white', 'group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold']">
|
||||
<component :is="item.icon" :class="[item.current ? 'text-indigo-600 dark:text-white' : 'text-gray-400 group-hover:text-indigo-600 dark:group-hover:text-white', 'size-6 shrink-0']" aria-hidden="true" />
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div class="text-xs/6 font-semibold text-gray-400">Your teams</div>
|
||||
<ul role="list" class="-mx-2 mt-2 space-y-1">
|
||||
<li v-for="team in teams" :key="team.name">
|
||||
<a :href="team.href" :class="[team.current ? 'bg-gray-50 text-indigo-600 dark:bg-white/5 dark:text-white' : 'text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white', 'group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold']">
|
||||
<span :class="[team.current ? 'border-indigo-600 text-indigo-600 dark:border-white/20 dark:text-white' : 'border-gray-200 text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600 dark:border-white/10 dark:group-hover:border-white/20 dark:group-hover:text-white', 'flex size-6 shrink-0 items-center justify-center rounded-lg border bg-white text-[0.625rem] font-medium dark:bg-white/5']">{{ team.initial }}</span>
|
||||
<span class="truncate">{{ team.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mt-auto">
|
||||
<a href="#" class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-white">
|
||||
<Cog6ToothIcon class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600 dark:group-hover:text-white" aria-hidden="true" />
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
|
||||
<!-- Static sidebar for desktop -->
|
||||
<div class="hidden bg-gray-900 lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
|
||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||
<div class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6 pb-4 dark:border-white/10 dark:bg-black/10">
|
||||
<div class="flex h-16 shrink-0 items-center">
|
||||
<img class="h-8 w-auto dark:hidden" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company" />
|
||||
<img class="hidden h-8 w-auto dark:block" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
|
||||
</div>
|
||||
<nav class="flex flex-1 flex-col">
|
||||
<ul role="list" class="flex flex-1 flex-col gap-y-7">
|
||||
<li>
|
||||
<ul role="list" class="-mx-2 space-y-1">
|
||||
<li v-for="item in navigation" :key="item.name">
|
||||
<a :href="item.href" :class="[item.current ? 'bg-gray-50 text-indigo-600 dark:bg-white/5 dark:text-white' : 'text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white', 'group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold']">
|
||||
<component :is="item.icon" :class="[item.current ? 'text-indigo-600 dark:text-white' : 'text-gray-400 group-hover:text-indigo-600 dark:group-hover:text-white', 'size-6 shrink-0']" aria-hidden="true" />
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div class="text-xs/6 font-semibold text-gray-400">Your teams</div>
|
||||
<ul role="list" class="-mx-2 mt-2 space-y-1">
|
||||
<li v-for="team in teams" :key="team.name">
|
||||
<a :href="team.href" :class="[team.current ? 'bg-gray-50 text-indigo-600 dark:bg-white/5 dark:text-white' : 'text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white', 'group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold']">
|
||||
<span :class="[team.current ? 'border-indigo-600 text-indigo-600 dark:border-white/20 dark:text-white' : 'border-gray-200 text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600 dark:border-white/10 dark:group-hover:border-white/20 dark:group-hover:text-white', 'flex size-6 shrink-0 items-center justify-center rounded-lg border bg-white text-[0.625rem] font-medium dark:bg-white/5']">{{ team.initial }}</span>
|
||||
<span class="truncate">{{ team.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mt-auto">
|
||||
<a href="#" class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-white">
|
||||
<Cog6ToothIcon class="size-6 shrink-0 text-gray-400 group-hover:text-indigo-600 dark:group-hover:text-white" aria-hidden="true" />
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lg:pl-72">
|
||||
<div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8 dark:border-white/10 dark:bg-gray-900 dark:shadow-none">
|
||||
<button type="button" class="-m-2.5 p-2.5 text-gray-700 hover:text-gray-900 lg:hidden dark:text-gray-400 dark:hover:text-white" @click="sidebarOpen = true">
|
||||
<span class="sr-only">Open sidebar</span>
|
||||
<Bars3Icon class="size-6" aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
<!-- Separator -->
|
||||
<div class="h-6 w-px bg-gray-200 lg:hidden dark:bg-white/10" aria-hidden="true"></div>
|
||||
|
||||
<div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
|
||||
<form class="grid flex-1 grid-cols-1" action="#" method="GET">
|
||||
<input name="search" aria-label="Search" class="col-start-1 row-start-1 block size-full bg-white pl-8 text-base text-gray-900 outline-none placeholder:text-gray-400 sm:text-sm/6 dark:bg-gray-900 dark:text-white dark:placeholder:text-gray-500" placeholder="Search" />
|
||||
<MagnifyingGlassIcon class="pointer-events-none col-start-1 row-start-1 size-5 self-center text-gray-400" aria-hidden="true" />
|
||||
</form>
|
||||
<div class="flex items-center gap-x-4 lg:gap-x-6">
|
||||
<button type="button" class="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500 dark:hover:text-white">
|
||||
<span class="sr-only">View notifications</span>
|
||||
<BellIcon class="size-6" aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
<!-- Separator -->
|
||||
<div class="hidden lg:block lg:h-6 lg:w-px lg:bg-gray-200 dark:lg:bg-white/10" aria-hidden="true"></div>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<Menu as="div" class="relative">
|
||||
<MenuButton class="relative flex items-center">
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img class="size-8 rounded-full bg-gray-50 outline outline-1 -outline-offset-1 outline-black/5 dark:bg-gray-800 dark:outline-white/10" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
|
||||
<span class="hidden lg:flex lg:items-center">
|
||||
<span class="ml-4 text-sm/6 font-semibold text-gray-900 dark:text-white" aria-hidden="true">Tom Cook</span>
|
||||
<ChevronDownIcon class="ml-2 size-5 text-gray-400 dark:text-gray-500" aria-hidden="true" />
|
||||
</span>
|
||||
</MenuButton>
|
||||
<transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform scale-100" leave-to-class="transform opacity-0 scale-95">
|
||||
<MenuItems class="absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg outline outline-1 outline-gray-900/5 dark:bg-gray-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">
|
||||
<MenuItem v-for="item in userNavigation" :key="item.name" v-slot="{ active }">
|
||||
<a :href="item.href" :class="[active ? 'bg-gray-50 outline-none dark:bg-white/5' : '', 'block px-3 py-1 text-sm/6 text-gray-900 dark:text-white']">{{ item.name }}</a>
|
||||
</MenuItem>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="py-10">
|
||||
<div class="px-4 sm:px-6 lg:px-8">
|
||||
<!-- Your content -->
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
Dialog,
|
||||
DialogPanel,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
} from '@headlessui/vue'
|
||||
import {
|
||||
Bars3Icon,
|
||||
BellIcon,
|
||||
CalendarIcon,
|
||||
ChartPieIcon,
|
||||
Cog6ToothIcon,
|
||||
DocumentDuplicateIcon,
|
||||
FolderIcon,
|
||||
HomeIcon,
|
||||
UsersIcon,
|
||||
XMarkIcon,
|
||||
} from '@heroicons/vue/24/outline'
|
||||
import { ChevronDownIcon, MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
|
||||
|
||||
const navigation = [
|
||||
{ name: 'Dashboard', href: '#', icon: HomeIcon, current: true },
|
||||
{ name: 'Team', href: '#', icon: UsersIcon, current: false },
|
||||
{ name: 'Projects', href: '#', icon: FolderIcon, current: false },
|
||||
{ name: 'Calendar', href: '#', icon: CalendarIcon, current: false },
|
||||
{ name: 'Documents', href: '#', icon: DocumentDuplicateIcon, current: false },
|
||||
{ name: 'Reports', href: '#', icon: ChartPieIcon, current: false },
|
||||
]
|
||||
const teams = [
|
||||
{ id: 1, name: 'Heroicons', href: '#', initial: 'H', current: false },
|
||||
{ id: 2, name: 'Tailwind Labs', href: '#', initial: 'T', current: false },
|
||||
{ id: 3, name: 'Workcation', href: '#', initial: 'W', current: false },
|
||||
]
|
||||
const userNavigation = [
|
||||
{ name: 'Your profile', href: '#' },
|
||||
{ name: 'Sign out', href: '#' },
|
||||
]
|
||||
|
||||
const sidebarOpen = ref(false)
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue