Add collapsible components and feed filter functionality

- Introduced Collapsible, CollapsibleContent, and CollapsibleTrigger components for improved UI interactions.
- Added FeedFilters component to allow users to customize content visibility in the NostrFeed.
- Updated NostrFeed and Home components to integrate new filtering capabilities, enhancing user experience with customizable content display.
- Implemented content filter logic in FeedService to support dynamic filtering based on user selections.

These changes enhance the modularity and interactivity of the feed system, providing users with greater control over the content they see.

src/pages/Home.vue

@@ -3,7 +3,30 @@
     <PWAInstallPrompt auto-show />
     <!-- TODO: Implement push notifications properly - currently commenting out admin notifications dialog -->
     <!-- <NotificationPermission auto-show /> -->
-    <NostrFeed feed-type="all" />
+
+    <!-- Feed Filter Controls -->
+    <Card>
+      <CardHeader>
+        <CardTitle class="flex items-center gap-2">
+          <Filter class="h-5 w-5" />
+          Content Filters
+        </CardTitle>
+        <CardDescription>
+          Choose what types of content you want to see in your feed
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <FeedFilters v-model="selectedFilters" :admin-pubkeys="adminPubkeys" />
+      </CardContent>
+    </Card>
+
+    <!-- Feed Content -->
+    <NostrFeed
+      :feed-type="feedType"
+      :content-filters="selectedFilters"
+      :admin-pubkeys="adminPubkeys"
+      :key="feedKey"
+    />
   </div>
 </template>
 
@@ -12,5 +35,39 @@
 // 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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Filter } from 'lucide-vue-next'
 import PWAInstallPrompt from '@/components/pwa/PWAInstallPrompt.vue'
+import FeedFilters from '@/modules/nostr-feed/components/FeedFilters.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'
+
+// Get admin pubkeys from app config
+const adminPubkeys = appConfig.modules['nostr-feed']?.config?.adminPubkeys || []
+
+// Feed configuration
+const selectedFilters = ref<ContentFilter[]>(FILTER_PRESETS.all)
+const feedKey = ref(0) // Force feed component to re-render when filters change
+
+// Determine feed type based on selected filters
+const feedType = computed(() => {
+  if (selectedFilters.value.length === 0) return 'all'
+
+  // Check if it matches a preset
+  for (const [presetName, presetFilters] of Object.entries(FILTER_PRESETS)) {
+    if (presetFilters.length === selectedFilters.value.length &&
+        presetFilters.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))) {
+      return presetName === 'all' ? 'all' : 'custom'
+    }
+  }
+
+  return 'custom'
+})
+
+// Force feed to reload when filters change
+watch(selectedFilters, () => {
+  feedKey.value++
+}, { deep: true })
 </script>