src/core/di-container.ts

@@ -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'),
 

src/modules/nostr-feed/LINK_AGGREGATOR_PLAN.md

@@ -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

src/modules/nostr-feed/components/SortTabs.vue

@@ -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>

src/modules/nostr-feed/components/SubmissionComment.vue

@@ -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>

src/modules/nostr-feed/components/SubmissionDetail.vue

@@ -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-40 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>

src/modules/nostr-feed/components/SubmissionList.vue

@@ -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>

src/modules/nostr-feed/components/SubmissionRow.vue

@@ -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>

src/modules/nostr-feed/components/SubmissionThumbnail.vue

@@ -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>

src/modules/nostr-feed/components/SubmitComposer.vue

@@ -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>

src/modules/nostr-feed/components/VoteControls.vue

@@ -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>

src/modules/nostr-feed/composables/useSubmissions.ts

@@ -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
-  }
-}

src/modules/nostr-feed/index.ts

@@ -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,
+    NostrFeed
-    SubmissionList,
-    SubmissionRow,
-    SubmissionDetail,
-    SubmissionComment,
-    SubmitComposer,
-    VoteControls,
-    SortTabs
   },
 
   composables: {
-    useFeed,
+    useFeed
-    useSubmissions,
-    useSubmission
   }
 }
 

src/modules/nostr-feed/services/LinkPreviewService.ts

@@ -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'
-  }
-}

src/modules/nostr-feed/services/ReactionService.ts

@@ -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
    */

src/modules/nostr-feed/types/index.ts

@@ -1,5 +0,0 @@
-/**
- * Types index - re-export all types from the module
- */
-
-export * from './submission'

src/modules/nostr-feed/types/submission.ts

@@ -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
-}

src/modules/nostr-feed/views/SubmissionDetailPage.vue

@@ -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>

src/modules/nostr-feed/views/SubmitPage.vue

@@ -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>

src/pages/Home.vue

@@ -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 -->
+    <!-- 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="max-w-4xl mx-auto flex items-center justify-between px-4 py-2 sm:px-6">
+      <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>
 
-    <!-- Main Feed Area -->
+      <!-- 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">
-      <div class="max-w-4xl mx-auto px-4 sm:px-6">
+      <!-- Collapsible Composer -->
-        <SubmissionList
+      <div v-if="showComposer || replyTo" class="border-b bg-background sticky top-0 z-10">
-          :show-ranks="false"
+        <div class="max-h-[70vh] overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
-          :show-time-range="true"
+          <div class="px-4 py-3 sm:px-6">
-          initial-sort="hot"
+            <!-- Regular Note Composer -->
-          @submission-click="onSubmissionClick"
+            <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 -->
+    <!-- Floating Action Buttons for Compose -->
-    <div class="fixed bottom-6 right-6 z-50">
+    <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="navigateToSubmit"
+            @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]" />
+          <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 FeedFilters from '@/modules/nostr-feed/components/FeedFilters.vue'
-import type { SubmissionWithMeta } from '@/modules/nostr-feed/types/submission'
+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
+// UI state
-function onSubmissionClick(submission: SubmissionWithMeta) {
+const showFilters = ref(false)
-  router.push({ name: 'submission-detail', params: { id: submission.id } })
+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
+// Computed properties
-function navigateToSubmit() {
+const activeFilterCount = computed(() => selectedFilters.value.length)
-  router.push({ name: 'submit-post' })
+
+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>