13 changed files with 42 additions and 1918 deletions
--- a/src/modules/nostr-feed/LINK_AGGREGATOR_PLAN.md
+++ b/src/modules/nostr-feed/LINK_AGGREGATOR_PLAN.md
@ -78,38 +78,30 @@ Transform the nostr-feed module into a Reddit-style link aggregator with support
 ## Implementation Phases
-### Phase 1: Core Data Model
+### Phase 1: Core Data Model (Current)
 - [x] Create feature branch
 - [x] Document plan
- [x] Create `types/submission.ts` - Type definitions
+- [ ] Create `types/submission.ts` - Type definitions
- [x] Create `SubmissionService.ts` - Submission CRUD
+- [ ] Create `SubmissionService.ts` - Submission CRUD
- [x] Create `LinkPreviewService.ts` - OG tag fetching
+- [ ] Create `LinkPreviewService.ts` - OG tag fetching
- [x] Extend `FeedService.ts` - Handle kind 1111
+- [ ] Extend `FeedService.ts` - Handle kind 1111
 ### Phase 2: Post Creation
- [x] Create `SubmitComposer.vue` - Multi-type composer
+- [ ] Create `SubmitComposer.vue` - Multi-type composer
- [x] Add link preview on URL paste
+- [ ] Add link preview on URL paste
- [x] Add NSFW toggle
+- [ ] Integrate with pictrs for media upload
- [x] Add route `/submit` for composer
+- [ ] Add NSFW toggle
 - [ ] Integrate with pictrs for media upload (Future)
 ### Phase 3: Feed Display
- [x] Create `SubmissionRow.vue` - Link aggregator row (Reddit/Lemmy style)
+- [ ] Create `SubmissionCard.vue` - Link aggregator card
- [x] Create `VoteControls.vue` - Up/down voting
+- [ ] Create `VoteButtons.vue` - Up/down voting
- [x] Create `SortTabs.vue` - Sort tabs (hot, new, top, controversial)
+- [ ] Add feed sorting (hot, new, top, controversial)
- [x] Create `SubmissionList.vue` - Main feed container
+- [ ] Add score calculation
 - [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
+- [ ] Create `SubmissionDetail.vue` - Full post view
- [x] Create `SubmissionComment.vue` - Recursive threaded comments
+- [ ] Integrate `ThreadedPost.vue` for comments
- [x] Create `SubmissionDetailPage.vue` - Route page wrapper
+- [ ] Add comment sorting
 - [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`
--- a/src/modules/nostr-feed/components/SortTabs.vue
+++ b/src/modules/nostr-feed/components/SortTabs.vue
@ -6,13 +6,6 @@
 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 {
@ -85,23 +78,19 @@ function selectTimeRange(range: TimeRange) {
    <!-- Time range dropdown (for top) -->
    <template v-if="showTimeDropdown">
      <span class="text-muted-foreground mx-1">·</span>
-      <Select
+      <select
-        :model-value="currentTimeRange"
+        :value="currentTimeRange"
-        @update:model-value="selectTimeRange($event as TimeRange)"
+        class="bg-transparent text-sm text-muted-foreground hover:text-foreground cursor-pointer border-none outline-none"
        @change="selectTimeRange(($event.target as HTMLSelectElement).value 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">
+        <option
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem
          v-for="range in timeRangeOptions"
          :key="range.id"
          :value="range.id"
        >
          {{ range.label }}
-          </SelectItem>
+        </option>
-        </SelectContent>
+      </select>
      </Select>
    </template>
  </div>
 </template>
--- a/src/modules/nostr-feed/components/SubmissionComment.vue
+++ b/src/modules/nostr-feed/components/SubmissionComment.vue
@ -1,276 +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, X } from 'lucide-vue-next'
 import VoteControls from './VoteControls.vue'
 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>
--- a/src/modules/nostr-feed/components/SubmissionDetail.vue
+++ b/src/modules/nostr-feed/components/SubmissionDetail.vue
@ -1,541 +0,0 @@
 <script setup lang="ts">
 /**
 * SubmissionDetail - Full post view with comments
 * Displays complete submission content and threaded comments
 */
 import { ref, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { formatDistanceToNow } from 'date-fns'
 import {
  ArrowLeft,
  MessageSquare,
  Share2,
  Bookmark,
  Flag,
  ExternalLink,
  Image as ImageIcon,
  FileText,
  Loader2,
  ChevronUp,
  ChevronDown,
  Reply,
  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 {
  SubmissionWithMeta,
  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) {
    const profile = profileService.getProfile(pubkey)
    if (profile?.display_name) return profile.display_name
    if (profile?.name) return profile.name
  }
  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(),
      null // 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)
 }
 // Count total replies
 function countReplies(comment: SubmissionCommentType): number {
  let count = comment.replies?.length || 0
  comment.replies?.forEach(reply => {
    count += countReplies(reply)
  })
  return count
 }
 // Go back
 function goBack() {
  router.back()
 }
 </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>
--- a/src/modules/nostr-feed/components/SubmissionList.vue
+++ b/src/modules/nostr-feed/components/SubmissionList.vue
@ -120,7 +120,7 @@ function onSubmissionClick(submission: SubmissionWithMeta) {
 // Handle share
 function onShare(submission: SubmissionWithMeta) {
  // Copy link to clipboard or open share dialog
-  const url = `${window.location.origin}/submission/${submission.id}`
+  const url = `${window.location.origin}/post/${submission.id}`
  navigator.clipboard?.writeText(url)
  // TODO: Show toast notification
 }
--- a/src/modules/nostr-feed/components/SubmitComposer.vue
+++ b/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>
--- a/src/modules/nostr-feed/composables/useSubmissions.ts
+++ b/src/modules/nostr-feed/composables/useSubmissions.ts
@ -289,27 +289,9 @@ export function useSubmissions(options: UseSubmissionsOptions = {}): UseSubmissi
 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)
  }
@ -318,17 +300,9 @@ export function useSubmission(submissionId: string) {
    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
  }
--- a/src/modules/nostr-feed/index.ts
+++ b/src/modules/nostr-feed/index.ts
@ -4,13 +4,10 @@ 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 { useSubmissions } from './composables/useSubmissions'
 import { FeedService } from './services/FeedService'
 import { ProfileService } from './services/ProfileService'
 import { ReactionService } from './services/ReactionService'
@ -26,27 +23,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...')
@ -100,17 +76,13 @@ export const nostrFeedModule: ModulePlugin = {
    NostrFeed,
    SubmissionList,
    SubmissionRow,
    SubmissionDetail,
    SubmissionComment,
    SubmitComposer,
    VoteControls,
    SortTabs
  },
  composables: {
    useFeed,
-    useSubmissions,
+    useSubmissions
    useSubmission
  }
 }
--- a/src/modules/nostr-feed/services/ReactionService.ts
+++ b/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
   */
--- a/src/modules/nostr-feed/services/SubmissionService.ts
+++ b/src/modules/nostr-feed/services/SubmissionService.ts
@ -148,8 +148,6 @@ export class SubmissionService extends BaseService {
        onEvent: (event: NostrEvent) => this.handleEvent(event),
        onEose: () => {
          this.debug('End of stored events')
          // Refresh all submission votes from loaded reactions
          this.refreshAllSubmissionVotes()
          this._isLoading.value = false
        },
        onClose: () => {
@ -185,82 +183,6 @@ export class SubmissionService extends BaseService {
    }
  }
  /**
   * Subscribe to a specific submission and its comments
   */
  async subscribeToSubmission(submissionId: string): Promise<void> {
    this._isLoading.value = true
    this._error.value = null
    try {
      if (!this.relayHub?.isConnected) {
        await this.relayHub?.connect()
      }
      const subscriptionId = `submission-${submissionId}-${Date.now()}`
      // Build filters for the submission and its comments
      const filters: Filter[] = [
        // The submission itself
        {
          kinds: [SUBMISSION_KINDS.SUBMISSION],
          ids: [submissionId]
        },
        // Comments referencing this submission (via 'e' tag - parent reference)
        {
          kinds: [SUBMISSION_KINDS.SUBMISSION],
          '#e': [submissionId]
        },
        // Comments referencing this submission (via 'E' tag - root reference)
        {
          kinds: [SUBMISSION_KINDS.SUBMISSION],
          '#E': [submissionId]
        },
        // Reactions on the submission and comments
        {
          kinds: [SUBMISSION_KINDS.REACTION],
          '#e': [submissionId]
        }
      ]
      this.debug('Subscribing to submission with filters:', filters)
      const unsubscribe = this.relayHub.subscribe({
        id: subscriptionId,
        filters,
        onEvent: (event: NostrEvent) => this.handleEvent(event),
        onEose: () => {
          this.debug('End of stored events for submission')
          // Refresh submission votes from loaded reactions
          this.refreshSubmissionVotes(submissionId)
          // After loading comments, fetch their reactions
          this.fetchCommentReactions(submissionId)
          this._isLoading.value = false
        },
        onClose: () => {
          this.debug('Submission subscription closed')
        }
      })
      // Store for cleanup (don't overwrite main subscription)
      // For now, we'll manage this separately
      this.currentSubscription = subscriptionId
      this.currentUnsubscribe = unsubscribe
      // Timeout fallback
      setTimeout(() => {
        if (this._isLoading.value && this.currentSubscription === subscriptionId) {
          this._isLoading.value = false
        }
      }, 10000)
    } catch (err) {
      this._error.value = err instanceof Error ? err.message : 'Failed to subscribe to submission'
      this._isLoading.value = false
      throw err
    }
  }
  /**
   * Build Nostr filters from feed configuration
   */
@ -352,12 +274,6 @@ export class SubmissionService extends BaseService {
    }
    this.seenEventIds.add(event.id)
    // Check if this is a top-level submission or a comment
    if (this.isComment(event)) {
      this.handleCommentEvent(event)
      return
    }
    // Parse the submission
    const submission = this.parseSubmission(event)
    if (!submission) {
@ -365,6 +281,12 @@ export class SubmissionService extends BaseService {
      return
    }
    // Check if this is a top-level submission or a comment
    if (this.isComment(event)) {
      this.handleCommentEvent(event)
      return
    }
    // Create full submission with metadata
    const submissionWithMeta = this.enrichSubmission(submission)
    this._submissions.set(submission.id, submissionWithMeta)
@ -407,12 +329,6 @@ export class SubmissionService extends BaseService {
    const rootId = rootTag[1]
    // Check for duplicate comment
    const existingComments = this._comments.get(rootId)
    if (existingComments?.some(c => c.id === event.id)) {
      return
    }
    // Parse as comment
    const comment: SubmissionComment = {
      id: event.id,
@ -423,7 +339,7 @@ export class SubmissionService extends BaseService {
      parentId: this.getParentId(event) || rootId,
      depth: 0,
      replies: [],
-      votes: this.getCommentVotes(event.id)
+      votes: this.getDefaultVotes()
    }
    // Add to comments map
@ -431,12 +347,6 @@ export class SubmissionService extends BaseService {
      this._comments.set(rootId, [])
    }
    this._comments.get(rootId)!.push(comment)
    // Update comment count on the submission
    const submission = this._submissions.get(rootId)
    if (submission) {
      submission.commentCount = this._comments.get(rootId)!.length
    }
  }
  /**
@ -707,23 +617,6 @@ export class SubmissionService extends BaseService {
    }
  }
  /**
   * Get votes for a comment from reaction service
   */
  private getCommentVotes(commentId: string): SubmissionVotes {
    if (this.reactionService) {
      const reactions = this.reactionService.getEventReactions(commentId)
      return {
        upvotes: reactions.likes || 0,
        downvotes: reactions.dislikes || 0,
        score: (reactions.likes || 0) - (reactions.dislikes || 0),
        userVote: reactions.userHasLiked ? 'upvote' : reactions.userHasDisliked ? 'downvote' : null,
        userVoteId: reactions.userReactionId
      }
    }
    return this.getDefaultVotes()
  }
  /**
   * Calculate ranking scores
   */
@ -911,23 +804,12 @@ export class SubmissionService extends BaseService {
   * Downvote a submission
   */
  async downvote(submissionId: string): Promise<void> {
    // TODO: Implement downvote using '-' reaction content
    // For now, this is a placeholder that mirrors the upvote logic
    const submission = this._submissions.get(submissionId)
    if (!submission) throw new Error('Submission not found')
-    if (submission.votes.userVote === 'downvote') {
+    this.debug('Downvote not yet implemented')
      // Remove downvote
      await this.reactionService?.undislikeEvent(submissionId)
    } else {
      // Add downvote (ReactionService keeps only latest reaction per user)
      await this.reactionService?.dislikeEvent(
        submissionId,
        submission.pubkey,
        SUBMISSION_KINDS.SUBMISSION
      )
    }
    // Refresh votes
    this.refreshSubmissionVotes(submissionId)
  }
  /**
@ -941,77 +823,6 @@ export class SubmissionService extends BaseService {
    submission.ranking = this.calculateRanking(submission, submission.votes)
  }
  /**
   * Refresh votes for all submissions
   */
  private refreshAllSubmissionVotes(): void {
    for (const submissionId of this._submissions.keys()) {
      this.refreshSubmissionVotes(submissionId)
    }
  }
  /**
   * Upvote a comment
   */
  async upvoteComment(submissionId: string, commentId: string): Promise<void> {
    const comment = this.findComment(submissionId, commentId)
    if (!comment) throw new Error('Comment not found')
    if (comment.votes.userVote === 'upvote') {
      // Remove upvote
      await this.reactionService?.unlikeEvent(commentId)
      comment.votes.userVote = null
      comment.votes.upvotes = Math.max(0, comment.votes.upvotes - 1)
    } else {
      // Add upvote
      await this.reactionService?.likeEvent(
        commentId,
        comment.pubkey,
        SUBMISSION_KINDS.SUBMISSION
      )
      // If was downvoted, remove downvote
      if (comment.votes.userVote === 'downvote') {
        comment.votes.downvotes = Math.max(0, comment.votes.downvotes - 1)
      }
      comment.votes.userVote = 'upvote'
      comment.votes.upvotes += 1
    }
    // Update score
    comment.votes.score = comment.votes.upvotes - comment.votes.downvotes
  }
  /**
   * Downvote a comment
   */
  async downvoteComment(submissionId: string, commentId: string): Promise<void> {
    const comment = this.findComment(submissionId, commentId)
    if (!comment) throw new Error('Comment not found')
    if (comment.votes.userVote === 'downvote') {
      // Remove downvote
      await this.reactionService?.undislikeEvent(commentId)
      comment.votes.userVote = null
      comment.votes.downvotes = Math.max(0, comment.votes.downvotes - 1)
    } else {
      // Add downvote (ReactionService keeps only latest reaction per user)
      await this.reactionService?.dislikeEvent(
        commentId,
        comment.pubkey,
        SUBMISSION_KINDS.SUBMISSION
      )
      // If was upvoted, update local count
      if (comment.votes.userVote === 'upvote') {
        comment.votes.upvotes = Math.max(0, comment.votes.upvotes - 1)
      }
      comment.votes.userVote = 'downvote'
      comment.votes.downvotes += 1
    }
    // Update score
    comment.votes.score = comment.votes.upvotes - comment.votes.downvotes
  }
  // ============================================================================
  // Sorting
  // ============================================================================
@ -1112,223 +923,6 @@ export class SubmissionService extends BaseService {
    }
  }
  /**
   * Get sorted threaded comments
   */
  getSortedComments(
    submissionId: string,
    sort: 'best' | 'new' | 'old' | 'controversial' = 'best'
  ): SubmissionComment[] {
    const comments = this.getComments(submissionId)
    const tree = this.buildCommentTree(comments)
    // Apply custom sort to the tree
    const compareFn = this.getCommentSortFn(sort)
    tree.sort(compareFn)
    tree.forEach(comment => this.sortReplies(comment, compareFn))
    return tree
  }
  /**
   * Get comparison function for comment sorting
   */
  private getCommentSortFn(
    sort: 'best' | 'new' | 'old' | 'controversial'
  ): (a: SubmissionComment, b: SubmissionComment) => number {
    switch (sort) {
      case 'best':
        return (a, b) => b.votes.score - a.votes.score
      case 'new':
        return (a, b) => b.created_at - a.created_at
      case 'old':
        return (a, b) => a.created_at - b.created_at
      case 'controversial':
        return (a, b) => {
          const aControversy = calculateControversyRank(a.votes.upvotes, a.votes.downvotes)
          const bControversy = calculateControversyRank(b.votes.upvotes, b.votes.downvotes)
          return bControversy - aControversy
        }
      default:
        return (a, b) => b.votes.score - a.votes.score
    }
  }
  /**
   * Create a comment on a submission or reply to another comment
   */
  async createComment(
    submissionId: string,
    content: string,
    parentCommentId?: string
  ): Promise<string> {
    this.requireAuth()
    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 root submission
    const submission = this._submissions.get(submissionId)
    if (!submission) {
      throw new Error('Submission not found')
    }
    try {
      this._isLoading.value = true
      const tags: string[][] = []
      // Root scope - the community (if submission has one)
      if (submission.communityRef) {
        const ref = parseCommunityRef(submission.communityRef)
        if (ref) {
          tags.push(['A', submission.communityRef])
          tags.push(['K', '34550'])
          tags.push(['P', ref.pubkey])
        }
      }
      // Root reference - the submission
      tags.push(['E', submissionId, '', submission.pubkey])
      // Parent reference
      if (parentCommentId) {
        // Replying to a comment
        const parentComment = this.findComment(submissionId, parentCommentId)
        if (parentComment) {
          tags.push(['e', parentCommentId, '', parentComment.pubkey])
          tags.push(['p', parentComment.pubkey])
        } else {
          // Fallback to submission as parent
          tags.push(['e', submissionId, '', submission.pubkey])
          tags.push(['p', submission.pubkey])
        }
      } else {
        // Top-level comment on submission
        tags.push(['e', submissionId, '', submission.pubkey])
        tags.push(['p', submission.pubkey])
      }
      tags.push(['k', '1111'])
      const eventTemplate: EventTemplate = {
        kind: SUBMISSION_KINDS.SUBMISSION,
        content,
        tags,
        created_at: Math.floor(Date.now() / 1000)
      }
      // Sign
      const privkeyBytes = this.hexToUint8Array(userPrivkey)
      const signedEvent = finalizeEvent(eventTemplate, privkeyBytes)
      // Publish
      await this.relayHub.publishEvent(signedEvent)
      // Handle locally - add to comments
      const comment: SubmissionComment = {
        id: signedEvent.id,
        pubkey: signedEvent.pubkey,
        created_at: signedEvent.created_at,
        content: signedEvent.content,
        rootId: submissionId,
        parentId: parentCommentId || submissionId,
        depth: 0,
        replies: [],
        votes: this.getDefaultVotes()
      }
      if (!this._comments.has(submissionId)) {
        this._comments.set(submissionId, [])
      }
      this._comments.get(submissionId)!.push(comment)
      // Update comment count on submission
      const sub = this._submissions.get(submissionId)
      if (sub) {
        sub.commentCount = this.getCommentCount(submissionId)
      }
      return signedEvent.id
    } finally {
      this._isLoading.value = false
    }
  }
  /**
   * Find a comment by ID within a submission's comments
   */
  private findComment(submissionId: string, commentId: string): SubmissionComment | undefined {
    const comments = this._comments.get(submissionId) || []
    return comments.find(c => c.id === commentId)
  }
  /**
   * Fetch reactions for all comments of a submission
   */
  private async fetchCommentReactions(submissionId: string): Promise<void> {
    const comments = this._comments.get(submissionId)
    if (!comments || comments.length === 0) return
    const commentIds = comments.map(c => c.id)
    this.debug('Fetching reactions for comments:', commentIds.length)
    // Subscribe to reactions for all comment IDs
    const filters: Filter[] = [
      {
        kinds: [SUBMISSION_KINDS.REACTION],
        '#e': commentIds
      }
    ]
    return new Promise<void>((resolve) => {
      const subscriptionId = `comment-reactions-${submissionId}-${Date.now()}`
      const unsubscribe = this.relayHub.subscribe({
        id: subscriptionId,
        filters,
        onEvent: (event: NostrEvent) => {
          // Route to reaction service
          this.reactionService?.handleReactionEvent(event)
        },
        onEose: () => {
          this.debug('End of comment reactions')
          // Update all comment votes after reactions are loaded
          this.updateCommentVotes(submissionId)
          unsubscribe()
          resolve()
        },
        onClose: () => {
          resolve()
        }
      })
      // Timeout fallback
      setTimeout(() => {
        unsubscribe()
        resolve()
      }, 5000)
    })
  }
  /**
   * Update votes for all comments from reaction service
   */
  private updateCommentVotes(submissionId: string): void {
    const comments = this._comments.get(submissionId)
    if (!comments) return
    for (const comment of comments) {
      comment.votes = this.getCommentVotes(comment.id)
    }
  }
  // ============================================================================
  // Utilities
  // ============================================================================
--- a/src/modules/nostr-feed/views/SubmissionDetailPage.vue
+++ b/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>
--- a/src/modules/nostr-feed/views/SubmitPage.vue
+++ b/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>
--- a/src/pages/LinkAggregatorTest.vue
+++ b/src/pages/LinkAggregatorTest.vue
@ -321,7 +321,6 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { MessageSquare, Share2, Bookmark, EyeOff, Send, Loader2, ChevronDown, ChevronUp, Wifi, WifiOff } from 'lucide-vue-next'
 import { SimplePool, finalizeEvent, generateSecretKey, getPublicKey, type Event as NostrEvent } from 'nostr-tools'
 import { bytesToHex, hexToBytes } from '@noble/hashes/utils'
@ -332,8 +331,6 @@ import SubmissionThumbnail from '@/modules/nostr-feed/components/SubmissionThumb
 import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
 import type { SortType, TimeRange, VoteType } from '@/modules/nostr-feed/types/submission'
 const router = useRouter()
 // View mode
 const viewMode = ref<'submissions' | 'mock'>('mock')
@ -713,6 +710,6 @@ function onMockDownvote(submission: MockSubmission) {
 // Real submission click handler
 function onSubmissionClick(submission: any) {
  console.log('Clicked submission:', submission)
-  router.push({ name: 'submission-detail', params: { id: submission.id } })
+  // TODO: Navigate to detail view
 }
 </script>