web-app/src/pages/Home.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">
      <!-- Quick Action Component Area -->
      <div v-if="activeAction || 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">
            <!-- Dynamic Quick Action Component -->
            <component
              :is="activeAction?.component"
              v-if="activeAction"
              :reply-to="replyTo"
              @note-published="onActionComplete"
              @rideshare-published="onActionComplete"
              @action-complete="onActionComplete"
              @clear-reply="onClearReply"
              @close="closeQuickAction"
            />
          </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 Quick Action Button -->
    <div v-if="!activeAction && !replyTo && quickActions.length > 0" class="fixed bottom-6 right-6 z-50">
      <div class="flex flex-col items-end gap-3">
        <!-- Quick Action Buttons (when expanded) -->
        <div v-if="showQuickActions" class="flex flex-col gap-2">
          <Button
            v-for="action in quickActions"
            :key="action.id"
            @click="openQuickAction(action)"
            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"
          >
            <component :is="getIconComponent(action.icon)" class="h-4 w-4" />
            <span class="text-sm font-medium">{{ action.label }}</span>
          </Button>
        </div>

        <!-- Main FAB -->
        <Button
          @click="toggleQuickActions"
          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': showQuickActions }"
          />
        </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 } from 'lucide-vue-next'
import * as LucideIcons from 'lucide-vue-next'
import PWAInstallPrompt from '@/components/pwa/PWAInstallPrompt.vue'
import FeedFilters from '@/modules/nostr-feed/components/FeedFilters.vue'
import NostrFeed from '@/modules/nostr-feed/components/NostrFeed.vue'
import { FILTER_PRESETS } from '@/modules/nostr-feed/config/content-filters'
import { useQuickActions } from '@/composables/useQuickActions'
import appConfig from '@/app.config'
import type { ContentFilter } from '@/modules/nostr-feed/services/FeedService'
import type { QuickAction } from '@/core/types'

// Get quick actions from modules
const { quickActions } = useQuickActions()

// Get admin pubkeys from app config
const adminPubkeys = appConfig.modules['nostr-feed']?.config?.adminPubkeys || []

// UI state
const showFilters = ref(false)
const showQuickActions = ref(false)
const activeAction = ref<QuickAction | null>(null)

// Feed configuration
const selectedFilters = ref<ContentFilter[]>(FILTER_PRESETS.all)
const feedKey = ref(0) // Force feed component to re-render when filters change

// Reply state (for note composer compatibility)
const replyTo = ref<any | 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
  }
}

// Quick action methods
const toggleQuickActions = () => {
  showQuickActions.value = !showQuickActions.value
}

const openQuickAction = (action: QuickAction) => {
  activeAction.value = action
  showQuickActions.value = false
}

const closeQuickAction = () => {
  activeAction.value = null
  replyTo.value = undefined
}

// Event handlers for quick action components
const onActionComplete = (eventData?: any) => {
  console.log('Quick action completed:', activeAction.value?.id, eventData)
  // Refresh the feed to show new content
  feedKey.value++
  // Close the action
  activeAction.value = null
  replyTo.value = undefined
}

const onClearReply = () => {
  replyTo.value = undefined
}

const onReplyToNote = (note: any) => {
  replyTo.value = note
  // Find and open the note composer action
  const noteAction = quickActions.value.find(a => a.id === 'note')
  if (noteAction) {
    activeAction.value = noteAction
  }
}

// Helper to get Lucide icon component
const getIconComponent = (iconName: string) => {
  return (LucideIcons as any)[iconName] || Plus
}
</script>