268 lines
9.6 KiB
Vue
268 lines
9.6 KiB
Vue
<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 /> -->
|
|
|
|
<!-- 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 - Takes remaining height with scrolling -->
|
|
<div class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
|
|
<!-- 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 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">
|
|
// 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 { Filter, Plus, MessageSquare, Car } from 'lucide-vue-next'
|
|
import PWAInstallPrompt from '@/components/pwa/PWAInstallPrompt.vue'
|
|
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'
|
|
|
|
// Get admin pubkeys from app config
|
|
const adminPubkeys = appConfig.modules['nostr-feed']?.config?.adminPubkeys || []
|
|
|
|
// 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 }
|
|
}
|
|
|
|
// 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>
|