Refactor: extract links and tasks into independent modules

- Create links module (link aggregator from atio branch) with SubmissionService,
  LinkPreviewService, voting, ranking, and full submission UI
- Create tasks module with TaskService (own relay subscription for kinds
  31922/31925), extracted from nostr-feed's ScheduledEventService
- Promote ProfileService and ReactionService to base module as shared services
- Replace Home.vue feed with SubmissionList from links module
- Disable nostr-feed module (kept in codebase for future re-enablement)
- Add links and tasks to app.config, app.ts, navigation, and DI container

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/app.config.ts

@@ -25,15 +25,34 @@ export const appConfig: AppConfig = {
     },
     'nostr-feed': {
       name: 'nostr-feed',
-      enabled: true,
+      enabled: false, // Disabled - replaced by links module
       lazy: false,
       config: {
-        refreshInterval: 30000, // 30 seconds
+        refreshInterval: 30000,
         maxPosts: 100,
         adminPubkeys: JSON.parse(import.meta.env.VITE_ADMIN_PUBKEYS || '[]'),
         feedTypes: ['announcements', 'general']
       }
     },
+    links: {
+      name: 'links',
+      enabled: true,
+      lazy: false,
+      config: {
+        maxSubmissions: 50,
+        corsProxyUrl: import.meta.env.VITE_CORS_PROXY_URL || '',
+        adminPubkeys: JSON.parse(import.meta.env.VITE_ADMIN_PUBKEYS || '[]')
+      }
+    },
+    tasks: {
+      name: 'tasks',
+      enabled: true,
+      lazy: false,
+      config: {
+        maxTasks: 200,
+        adminPubkeys: JSON.parse(import.meta.env.VITE_ADMIN_PUBKEYS || '[]')
+      }
+    },
     market: {
       name: 'market',
       enabled: true,

src/app.ts

@@ -17,6 +17,8 @@ import eventsModule from './modules/events'
 import marketModule from './modules/market'
 import walletModule from './modules/wallet'
 import expensesModule from './modules/expenses'
+import linksModule from './modules/links'
+import tasksModule from './modules/tasks'
 
 // Root component
 import App from './App.vue'
@@ -45,7 +47,9 @@ export async function createAppInstance() {
     ...eventsModule.routes || [],
     ...marketModule.routes || [],
     ...walletModule.routes || [],
-    ...expensesModule.routes || []
+    ...expensesModule.routes || [],
+    ...linksModule.routes || [],
+    ...tasksModule.routes || []
   ].filter(Boolean)
 
   // Create router with all routes available immediately
@@ -135,6 +139,20 @@ export async function createAppInstance() {
     )
   }
 
+  // Register links module
+  if (appConfig.modules.links?.enabled) {
+    moduleRegistrations.push(
+      pluginManager.register(linksModule, appConfig.modules.links)
+    )
+  }
+
+  // Register tasks module
+  if (appConfig.modules.tasks?.enabled) {
+    moduleRegistrations.push(
+      pluginManager.register(tasksModule, appConfig.modules.tasks)
+    )
+  }
+
   // Wait for all modules to register
   await Promise.all(moduleRegistrations)
 

src/composables/useModularNavigation.ts

@@ -42,6 +42,14 @@ export function useModularNavigation() {
       })
     }
 
+    if (appConfig.modules.tasks?.enabled) {
+      items.push({
+        name: 'Tasks',
+        href: '/tasks',
+        requiresAuth: true
+      })
+    }
+
     if (appConfig.modules.chat.enabled) {
       items.push({
         name: t('nav.chat'),

src/core/di-container.ts

@@ -136,8 +136,16 @@ export const SERVICE_TOKENS = {
   FEED_SERVICE: Symbol('feedService'),
   PROFILE_SERVICE: Symbol('profileService'),
   REACTION_SERVICE: Symbol('reactionService'),
+
+  // Tasks services
+  TASK_SERVICE: Symbol('taskService'),
+  /** @deprecated Use TASK_SERVICE instead */
   SCHEDULED_EVENT_SERVICE: Symbol('scheduledEventService'),
 
+  // Links services
+  SUBMISSION_SERVICE: Symbol('submissionService'),
+  LINK_PREVIEW_SERVICE: Symbol('linkPreviewService'),
+
   // Nostr metadata services
   NOSTR_METADATA_SERVICE: Symbol('nostrMetadataService'),
 

src/modules/base/composables/useProfiles.ts

@@ -0,0 +1,90 @@
+import { ref, computed } from 'vue'
+import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import type { ProfileService } from '../nostr/ProfileService'
+
+/**
+ * Composable for managing user profiles
+ */
+export function useProfiles() {
+  const profileService = injectService<ProfileService>(SERVICE_TOKENS.PROFILE_SERVICE)
+
+  // Reactive state
+  const isLoading = ref(false)
+  const error = ref<string | null>(null)
+
+  /**
+   * Get display name for a pubkey
+   */
+  const getDisplayName = (pubkey: string): string => {
+    if (!profileService) return formatPubkey(pubkey)
+    return profileService.getDisplayName(pubkey)
+  }
+
+  /**
+   * Fetch profiles for a list of pubkeys
+   */
+  const fetchProfiles = async (pubkeys: string[]): Promise<void> => {
+    if (!profileService || pubkeys.length === 0) return
+
+    try {
+      isLoading.value = true
+      error.value = null
+      await profileService.fetchProfiles(pubkeys)
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : 'Failed to fetch profiles'
+      console.error('Failed to fetch profiles:', err)
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  /**
+   * Subscribe to profile updates for active users
+   */
+  const subscribeToProfileUpdates = async (pubkeys: string[]): Promise<void> => {
+    if (!profileService) return
+
+    try {
+      await profileService.subscribeToProfileUpdates(pubkeys)
+    } catch (err) {
+      console.error('Failed to subscribe to profile updates:', err)
+    }
+  }
+
+  /**
+   * Get full profile for a pubkey
+   */
+  const getProfile = async (pubkey: string) => {
+    if (!profileService) return null
+    return await profileService.getProfile(pubkey)
+  }
+
+  /**
+   * Format pubkey as fallback display name
+   */
+  const formatPubkey = (pubkey: string): string => {
+    return `${pubkey.slice(0, 8)}...${pubkey.slice(-4)}`
+  }
+
+  /**
+   * Get all cached profiles
+   */
+  const profiles = computed(() => {
+    if (!profileService) return new Map()
+    return profileService.profiles
+  })
+
+  return {
+    // State
+    isLoading,
+    error,
+    profiles,
+
+    // Methods
+    getDisplayName,
+    fetchProfiles,
+    subscribeToProfileUpdates,
+    getProfile,
+    formatPubkey
+  }
+}

src/modules/base/composables/useReactions.ts

@@ -0,0 +1,102 @@
+import { computed } from 'vue'
+import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import type { ReactionService, EventReactions } from '../nostr/ReactionService'
+import { useToast } from '@/core/composables/useToast'
+
+/**
+ * Composable for managing reactions
+ */
+export function useReactions() {
+  const reactionService = injectService<ReactionService>(SERVICE_TOKENS.REACTION_SERVICE)
+  const toast = useToast()
+
+  /**
+   * Get reactions for a specific event
+   */
+  const getEventReactions = (eventId: string): EventReactions => {
+    if (!reactionService) {
+      return {
+        eventId,
+        likes: 0,
+        dislikes: 0,
+        totalReactions: 0,
+        userHasLiked: false,
+        userHasDisliked: false,
+        reactions: []
+      }
+    }
+    return reactionService.getEventReactions(eventId)
+  }
+
+  /**
+   * Subscribe to reactions for a list of event IDs
+   */
+  const subscribeToReactions = async (eventIds: string[]): Promise<void> => {
+    if (!reactionService || eventIds.length === 0) return
+
+    try {
+      await reactionService.subscribeToReactions(eventIds)
+    } catch (error) {
+      console.error('Failed to subscribe to reactions:', error)
+    }
+  }
+
+  /**
+   * Toggle like on an event - like if not liked, unlike if already liked
+   */
+  const toggleLike = async (eventId: string, eventPubkey: string, eventKind: number): Promise<void> => {
+    if (!reactionService) {
+      toast.error('Reaction service not available')
+      return
+    }
+
+    try {
+      await reactionService.toggleLikeEvent(eventId, eventPubkey, eventKind)
+
+      // Check if we liked or unliked
+      const eventReactions = reactionService.getEventReactions(eventId)
+      if (eventReactions.userHasLiked) {
+        toast.success('Post liked!')
+      } else {
+        toast.success('Like removed')
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to toggle reaction'
+
+      if (message.includes('authenticated')) {
+        toast.error('Please sign in to react to posts')
+      } else if (message.includes('Not connected')) {
+        toast.error('Not connected to relays')
+      } else {
+        toast.error(message)
+      }
+
+      console.error('Failed to toggle like:', error)
+    }
+  }
+
+  /**
+   * Get loading state
+   */
+  const isLoading = computed(() => {
+    return reactionService?.isLoading ?? false
+  })
+
+  /**
+   * Get all event reactions (for debugging)
+   */
+  const allEventReactions = computed(() => {
+    return reactionService?.eventReactions ?? new Map()
+  })
+
+  return {
+    // Methods
+    getEventReactions,
+    subscribeToReactions,
+    toggleLike,
+
+    // State
+    isLoading,
+    allEventReactions
+  }
+}

src/modules/base/index.ts

@@ -3,6 +3,8 @@ import type { ModulePlugin } from '@/core/types'
 import { container, SERVICE_TOKENS } from '@/core/di-container'
 import { relayHub } from './nostr/relay-hub'
 import { NostrMetadataService } from './nostr/nostr-metadata-service'
+import { ProfileService } from './nostr/ProfileService'
+import { ReactionService } from './nostr/ReactionService'
 
 // Import auth services
 import { auth } from './auth/auth-service'
@@ -28,6 +30,8 @@ const invoiceService = new InvoiceService()
 const lnbitsAPI = new LnbitsAPI()
 const imageUploadService = new ImageUploadService()
 const nostrMetadataService = new NostrMetadataService()
+const profileService = new ProfileService()
+const reactionService = new ReactionService()
 
 /**
  * Base Module Plugin
@@ -68,6 +72,10 @@ export const baseModule: ModulePlugin = {
     // Register image upload service
     container.provide(SERVICE_TOKENS.IMAGE_UPLOAD_SERVICE, imageUploadService)
 
+    // Register shared Nostr services (used by multiple modules)
+    container.provide(SERVICE_TOKENS.PROFILE_SERVICE, profileService)
+    container.provide(SERVICE_TOKENS.REACTION_SERVICE, reactionService)
+
     // Register PWA service
     container.provide('pwaService', pwaService)
 
@@ -106,6 +114,14 @@ export const baseModule: ModulePlugin = {
       waitForDependencies: true, // NostrMetadataService depends on AuthService and RelayHub
       maxRetries: 3
     })
+    await profileService.initialize({
+      waitForDependencies: true, // ProfileService depends on RelayHub
+      maxRetries: 3
+    })
+    await reactionService.initialize({
+      waitForDependencies: true, // ReactionService depends on RelayHub and AuthService
+      maxRetries: 3
+    })
     // InvoiceService doesn't need initialization as it's not a BaseService
     
     console.log('✅ Base module installed successfully')
@@ -123,6 +139,8 @@ export const baseModule: ModulePlugin = {
     await toastService.dispose()
     await imageUploadService.dispose()
     await nostrMetadataService.dispose()
+    await profileService.dispose()
+    await reactionService.dispose()
     // InvoiceService doesn't need disposal as it's not a BaseService
     await lnbitsAPI.dispose()
 
@@ -131,6 +149,8 @@ export const baseModule: ModulePlugin = {
     container.remove(SERVICE_TOKENS.INVOICE_SERVICE)
     container.remove(SERVICE_TOKENS.IMAGE_UPLOAD_SERVICE)
     container.remove(SERVICE_TOKENS.NOSTR_METADATA_SERVICE)
+    container.remove(SERVICE_TOKENS.PROFILE_SERVICE)
+    container.remove(SERVICE_TOKENS.REACTION_SERVICE)
     
     console.log('✅ Base module uninstalled')
   },
@@ -145,7 +165,9 @@ export const baseModule: ModulePlugin = {
     invoiceService,
     pwaService,
     imageUploadService,
-    nostrMetadataService
+    nostrMetadataService,
+    profileService,
+    reactionService
   },
 
   // No routes - base module is pure infrastructure

src/modules/base/nostr/ProfileService.ts

@@ -0,0 +1,274 @@
+import { reactive } from 'vue'
+import { BaseService } from '@/core/base/BaseService'
+import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import type { Event as NostrEvent, Filter } from 'nostr-tools'
+
+export interface UserProfile {
+  pubkey: string
+  name?: string
+  display_name?: string
+  about?: string
+  picture?: string
+  nip05?: string
+  updated_at: number
+}
+
+export class ProfileService extends BaseService {
+  protected readonly metadata = {
+    name: 'ProfileService',
+    version: '1.0.0',
+    dependencies: []
+  }
+
+  protected relayHub: any = null
+
+  // Profile cache - reactive for UI updates
+  private _profiles = reactive(new Map<string, UserProfile>())
+  private currentSubscription: string | null = null
+  private currentUnsubscribe: (() => void) | null = null
+
+  // Track which profiles we've requested to avoid duplicate requests
+  private requestedProfiles = new Set<string>()
+
+  protected async onInitialize(): Promise<void> {
+    console.log('ProfileService: Starting initialization...')
+
+    this.relayHub = injectService(SERVICE_TOKENS.RELAY_HUB)
+
+    if (!this.relayHub) {
+      throw new Error('RelayHub service not available')
+    }
+
+    console.log('ProfileService: Initialization complete')
+  }
+
+  /**
+   * Get profile for a pubkey, fetching if not cached
+   */
+  async getProfile(pubkey: string): Promise<UserProfile | null> {
+    // Return cached profile if available
+    if (this._profiles.has(pubkey)) {
+      return this._profiles.get(pubkey)!
+    }
+
+    // If not requested yet, fetch it
+    if (!this.requestedProfiles.has(pubkey)) {
+      await this.fetchProfile(pubkey)
+    }
+
+    return this._profiles.get(pubkey) || null
+  }
+
+  /**
+   * Get display name for a pubkey (returns formatted pubkey if no profile)
+   */
+  getDisplayName(pubkey: string): string {
+    const profile = this._profiles.get(pubkey)
+    if (profile?.display_name) return profile.display_name
+    if (profile?.name) return profile.name
+
+    // Return formatted pubkey as fallback
+    return `${pubkey.slice(0, 8)}...${pubkey.slice(-4)}`
+  }
+
+  /**
+   * Fetch profile for specific pubkey
+   */
+  private async fetchProfile(pubkey: string): Promise<void> {
+    if (!this.relayHub || this.requestedProfiles.has(pubkey)) {
+      return
+    }
+
+    this.requestedProfiles.add(pubkey)
+
+    try {
+      if (!this.relayHub.isConnected) {
+        await this.relayHub.connect()
+      }
+
+      const subscriptionId = `profile-${pubkey}-${Date.now()}`
+
+      const filter: Filter = {
+        kinds: [0], // Profile metadata
+        authors: [pubkey],
+        limit: 1
+      }
+
+      console.log(`ProfileService: Fetching profile for ${pubkey.slice(0, 8)}...`)
+
+      const unsubscribe = this.relayHub.subscribe({
+        id: subscriptionId,
+        filters: [filter],
+        onEvent: (event: NostrEvent) => {
+          this.handleProfileEvent(event)
+        },
+        onEose: () => {
+          console.log(`Profile subscription ${subscriptionId} complete`)
+          // Clean up subscription after getting the profile
+          if (unsubscribe) {
+            unsubscribe()
+          }
+        }
+      })
+
+    } catch (error) {
+      console.error(`Failed to fetch profile for ${pubkey}:`, error)
+      this.requestedProfiles.delete(pubkey) // Allow retry
+    }
+  }
+
+  /**
+   * Handle incoming profile event
+   */
+  private handleProfileEvent(event: NostrEvent): void {
+    try {
+      const metadata = JSON.parse(event.content)
+
+      const profile: UserProfile = {
+        pubkey: event.pubkey,
+        name: metadata.name,
+        display_name: metadata.display_name,
+        about: metadata.about,
+        picture: metadata.picture,
+        nip05: metadata.nip05,
+        updated_at: event.created_at
+      }
+
+      // Only update if this is newer than what we have
+      const existing = this._profiles.get(event.pubkey)
+      if (!existing || event.created_at > existing.updated_at) {
+        this._profiles.set(event.pubkey, profile)
+        console.log(`ProfileService: Updated profile for ${event.pubkey.slice(0, 8)}...`, profile.display_name || profile.name)
+      }
+
+    } catch (error) {
+      console.error('Failed to parse profile metadata:', error)
+    }
+  }
+
+  /**
+   * Bulk fetch profiles for multiple pubkeys
+   */
+  async fetchProfiles(pubkeys: string[]): Promise<void> {
+    const unfetchedPubkeys = pubkeys.filter(pubkey =>
+      !this._profiles.has(pubkey) && !this.requestedProfiles.has(pubkey)
+    )
+
+    if (unfetchedPubkeys.length === 0) return
+
+    console.log(`ProfileService: Bulk fetching ${unfetchedPubkeys.length} profiles`)
+
+    try {
+      if (!this.relayHub?.isConnected) {
+        await this.relayHub?.connect()
+      }
+
+      const subscriptionId = `profiles-bulk-${Date.now()}`
+
+      // Mark all as requested
+      unfetchedPubkeys.forEach(pubkey => this.requestedProfiles.add(pubkey))
+
+      const filter: Filter = {
+        kinds: [0],
+        authors: unfetchedPubkeys,
+        limit: unfetchedPubkeys.length
+      }
+
+      const unsubscribe = this.relayHub.subscribe({
+        id: subscriptionId,
+        filters: [filter],
+        onEvent: (event: NostrEvent) => {
+          this.handleProfileEvent(event)
+        },
+        onEose: () => {
+          console.log(`Bulk profile subscription ${subscriptionId} complete`)
+          if (unsubscribe) {
+            unsubscribe()
+          }
+        }
+      })
+
+    } catch (error) {
+      console.error('Failed to bulk fetch profiles:', error)
+      // Remove from requested so they can be retried
+      unfetchedPubkeys.forEach(pubkey => this.requestedProfiles.delete(pubkey))
+    }
+  }
+
+  /**
+   * Subscribe to real-time profile updates for active users
+   */
+  async subscribeToProfileUpdates(pubkeys: string[]): Promise<void> {
+    if (this.currentSubscription) {
+      await this.unsubscribeFromProfiles()
+    }
+
+    if (pubkeys.length === 0) return
+
+    try {
+      if (!this.relayHub?.isConnected) {
+        await this.relayHub?.connect()
+      }
+
+      const subscriptionId = `profile-updates-${Date.now()}`
+
+      const filter: Filter = {
+        kinds: [0],
+        authors: pubkeys
+      }
+
+      console.log(`ProfileService: Subscribing to profile updates for ${pubkeys.length} users`)
+
+      const unsubscribe = this.relayHub.subscribe({
+        id: subscriptionId,
+        filters: [filter],
+        onEvent: (event: NostrEvent) => {
+          this.handleProfileEvent(event)
+        },
+        onEose: () => {
+          console.log(`Profile updates subscription ${subscriptionId} ready`)
+        }
+      })
+
+      this.currentSubscription = subscriptionId
+      this.currentUnsubscribe = unsubscribe
+
+    } catch (error) {
+      console.error('Failed to subscribe to profile updates:', error)
+    }
+  }
+
+  /**
+   * Unsubscribe from profile updates
+   */
+  async unsubscribeFromProfiles(): Promise<void> {
+    if (this.currentUnsubscribe) {
+      this.currentUnsubscribe()
+      this.currentSubscription = null
+      this.currentUnsubscribe = null
+    }
+  }
+
+  /**
+   * Clear profile cache
+   */
+  clearCache(): void {
+    this._profiles.clear()
+    this.requestedProfiles.clear()
+  }
+
+  /**
+   * Get all cached profiles
+   */
+  get profiles(): Map<string, UserProfile> {
+    return this._profiles
+  }
+
+  /**
+   * Cleanup
+   */
+  protected async onDestroy(): Promise<void> {
+    await this.unsubscribeFromProfiles()
+    this.clearCache()
+  }
+}

src/modules/base/nostr/ReactionService.ts

@@ -0,0 +1,581 @@
+import { ref, reactive } from 'vue'
+import { BaseService } from '@/core/base/BaseService'
+import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import { finalizeEvent, type EventTemplate } from 'nostr-tools'
+import type { Event as NostrEvent } from 'nostr-tools'
+
+export interface Reaction {
+  id: string
+  eventId: string // The event being reacted to
+  pubkey: string // Who reacted
+  content: string // The reaction content ('+', '-', emoji)
+  created_at: number
+}
+
+export interface EventReactions {
+  eventId: string
+  likes: number
+  dislikes: number
+  totalReactions: number
+  userHasLiked: boolean
+  userHasDisliked: boolean
+  userReactionId?: string // Track the user's reaction ID for deletion
+  reactions: Reaction[]
+}
+
+export class ReactionService extends BaseService {
+  protected readonly metadata = {
+    name: 'ReactionService',
+    version: '1.0.0',
+    dependencies: []
+  }
+
+  protected relayHub: any = null
+  protected authService: any = null
+
+  // Reaction state - indexed by event ID
+  private _eventReactions = reactive(new Map<string, EventReactions>())
+  private _isLoading = ref(false)
+
+  // Track reaction subscription
+  private currentSubscription: string | null = null
+  private currentUnsubscribe: (() => void) | null = null
+
+  // Track which events we're monitoring
+  private monitoredEvents = new Set<string>()
+
+  // Track deleted reactions to hide them
+  private deletedReactions = new Set<string>()
+
+  protected async onInitialize(): Promise<void> {
+    console.log('ReactionService: Starting initialization...')
+
+    this.relayHub = injectService(SERVICE_TOKENS.RELAY_HUB)
+    this.authService = injectService(SERVICE_TOKENS.AUTH_SERVICE)
+
+    if (!this.relayHub) {
+      throw new Error('RelayHub service not available')
+    }
+
+    console.log('ReactionService: Initialization complete')
+  }
+
+  /**
+   * Get reactions for a specific event
+   */
+  getEventReactions(eventId: string): EventReactions {
+    if (!this._eventReactions.has(eventId)) {
+      this._eventReactions.set(eventId, {
+        eventId,
+        likes: 0,
+        dislikes: 0,
+        totalReactions: 0,
+        userHasLiked: false,
+        userHasDisliked: false,
+        reactions: []
+      })
+    }
+    return this._eventReactions.get(eventId)!
+  }
+
+  /**
+   * Subscribe to reactions for a list of event IDs
+   */
+  async subscribeToReactions(eventIds: string[]): Promise<void> {
+    if (eventIds.length === 0) return
+
+    // Filter out events we're already monitoring
+    const newEventIds = eventIds.filter(id => !this.monitoredEvents.has(id))
+    if (newEventIds.length === 0) return
+
+    console.log(`ReactionService: Subscribing to reactions for ${newEventIds.length} events`)
+
+    try {
+      if (!this.relayHub?.isConnected) {
+        await this.relayHub?.connect()
+      }
+
+      // Add to monitored set
+      newEventIds.forEach(id => this.monitoredEvents.add(id))
+
+      const subscriptionId = `reactions-${Date.now()}`
+
+      // Subscribe to reactions (kind 7) for these events
+      const filters = [
+        {
+          kinds: [7], // Reactions
+          '#e': newEventIds, // Events being reacted to
+          limit: 1000
+        }
+      ]
+
+      const unsubscribe = this.relayHub.subscribe({
+        id: subscriptionId,
+        filters: filters,
+        onEvent: (event: NostrEvent) => {
+          this.handleReactionEvent(event)
+        },
+        onEose: () => {
+          console.log(`ReactionService: Subscription ${subscriptionId} ready`)
+        }
+      })
+
+      // Store subscription info (we can have multiple)
+      if (!this.currentSubscription) {
+        this.currentSubscription = subscriptionId
+        this.currentUnsubscribe = unsubscribe
+      }
+
+    } catch (error) {
+      console.error('Failed to subscribe to reactions:', error)
+    }
+  }
+
+  /**
+   * Handle incoming reaction event
+   */
+  public handleReactionEvent(event: NostrEvent): void {
+    try {
+      // Find the event being reacted to
+      const eTag = event.tags.find(tag => tag[0] === 'e')
+      if (!eTag || !eTag[1]) {
+        console.warn('Reaction event missing e tag:', event.id)
+        return
+      }
+
+      const eventId = eTag[1]
+      const content = event.content.trim()
+
+      // Create reaction object
+      const reaction: Reaction = {
+        id: event.id,
+        eventId,
+        pubkey: event.pubkey,
+        content,
+        created_at: event.created_at
+      }
+
+      // Update event reactions
+      const eventReactions = this.getEventReactions(eventId)
+
+      // Check if this reaction already exists (deduplication) or is deleted
+      const existingIndex = eventReactions.reactions.findIndex(r => r.id === reaction.id)
+      if (existingIndex >= 0) {
+        return // Already have this reaction
+      }
+
+      // Check if this reaction has been deleted
+      if (this.deletedReactions.has(reaction.id)) {
+        return // This reaction was deleted
+      }
+
+      // IMPORTANT: Remove any previous reaction from the same user
+      // This ensures one reaction per user per event, even if deletion events aren't processed
+      const previousReactionIndex = eventReactions.reactions.findIndex(r =>
+        r.pubkey === reaction.pubkey &&
+        r.content === reaction.content
+      )
+
+      if (previousReactionIndex >= 0) {
+        // Replace the old reaction with the new one
+        eventReactions.reactions[previousReactionIndex] = reaction
+      } else {
+        // Add as new reaction
+        eventReactions.reactions.push(reaction)
+      }
+
+      // Recalculate counts and user state
+      this.recalculateEventReactions(eventId)
+
+    } catch (error) {
+      console.error('Failed to handle reaction event:', error)
+    }
+  }
+
+  /**
+   * Handle deletion event (called when a kind 5 event with k=7 is received)
+   */
+  public handleDeletionEvent(event: NostrEvent): void {
+    try {
+      // Process each deleted event
+      const eTags = event.tags.filter(tag => tag[0] === 'e')
+      const deletionAuthor = event.pubkey
+
+      for (const eTag of eTags) {
+        const deletedEventId = eTag[1]
+        if (deletedEventId) {
+          // Add to deleted set
+          this.deletedReactions.add(deletedEventId)
+
+          // Find and remove the reaction from all event reactions
+          for (const [eventId, eventReactions] of this._eventReactions) {
+            const reactionIndex = eventReactions.reactions.findIndex(r => r.id === deletedEventId)
+
+            if (reactionIndex >= 0) {
+              const reaction = eventReactions.reactions[reactionIndex]
+
+              // IMPORTANT: Only process deletion if it's from the same user who created the reaction
+              // This follows NIP-09 spec: "Relays SHOULD delete or stop publishing any referenced events
+              // that have an identical `pubkey` as the deletion request"
+              if (reaction.pubkey === deletionAuthor) {
+                eventReactions.reactions.splice(reactionIndex, 1)
+                // Recalculate counts for this event
+                this.recalculateEventReactions(eventId)
+              }
+            }
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Failed to handle deletion event:', error)
+    }
+  }
+
+  /**
+   * Recalculate reaction counts and user state for an event
+   */
+  private recalculateEventReactions(eventId: string): void {
+    const eventReactions = this.getEventReactions(eventId)
+    const userPubkey = this.authService?.user?.value?.pubkey
+
+    // Use Sets to track unique users who liked/disliked
+    const likedUsers = new Set<string>()
+    const dislikedUsers = new Set<string>()
+    let userHasLiked = false
+    let userHasDisliked = false
+    let userReactionId: string | undefined
+
+    // Group reactions by user, keeping only the most recent
+    const latestReactionsByUser = new Map<string, Reaction>()
+
+    for (const reaction of eventReactions.reactions) {
+      // Skip deleted reactions
+      if (this.deletedReactions.has(reaction.id)) {
+        continue
+      }
+
+      // Keep only the latest reaction from each user
+      const existing = latestReactionsByUser.get(reaction.pubkey)
+      if (!existing || reaction.created_at > existing.created_at) {
+        latestReactionsByUser.set(reaction.pubkey, reaction)
+      }
+    }
+
+    // Now count unique reactions
+    for (const reaction of latestReactionsByUser.values()) {
+      const isLike = reaction.content === '+' || reaction.content === '❤️' || reaction.content === ''
+      const isDislike = reaction.content === '-'
+
+      if (isLike) {
+        likedUsers.add(reaction.pubkey)
+        if (userPubkey && reaction.pubkey === userPubkey) {
+          userHasLiked = true
+          userReactionId = reaction.id
+        }
+      } else if (isDislike) {
+        dislikedUsers.add(reaction.pubkey)
+        if (userPubkey && reaction.pubkey === userPubkey) {
+          userHasDisliked = true
+          userReactionId = reaction.id
+        }
+      }
+    }
+
+    // Update the reactive state with unique user counts
+    eventReactions.likes = likedUsers.size
+    eventReactions.dislikes = dislikedUsers.size
+    eventReactions.totalReactions = latestReactionsByUser.size
+    eventReactions.userHasLiked = userHasLiked
+    eventReactions.userHasDisliked = userHasDisliked
+    eventReactions.userReactionId = userReactionId
+  }
+
+  /**
+   * Send a heart reaction (like) to an event
+   */
+  async likeEvent(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 liked this event
+    const eventReactions = this.getEventReactions(eventId)
+    if (eventReactions.userHasLiked) {
+      throw new Error('Already liked this event')
+    }
+
+    try {
+      this._isLoading.value = true
+
+      // Create reaction event template according to NIP-25
+      const eventTemplate: EventTemplate = {
+        kind: 7, // Reaction
+        content: '+', // Like 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 like event:', error)
+      throw error
+    } finally {
+      this._isLoading.value = false
+    }
+  }
+
+  /**
+   * 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')
+    }
+
+    const eventReactions = this.getEventReactions(eventId)
+    if (eventReactions.userHasDisliked) {
+      throw new Error('Already disliked this event')
+    }
+
+    try {
+      this._isLoading.value = true
+
+      const eventTemplate: EventTemplate = {
+        kind: 7,
+        content: '-', // Dislike reaction
+        tags: [
+          ['e', eventId, '', eventPubkey],
+          ['p', eventPubkey],
+          ['k', eventKind.toString()]
+        ],
+        created_at: Math.floor(Date.now() / 1000)
+      }
+
+      const privkeyBytes = this.hexToUint8Array(userPrivkey)
+      const signedEvent = finalizeEvent(eventTemplate, privkeyBytes)
+
+      await this.relayHub.publishEvent(signedEvent)
+      this.handleReactionEvent(signedEvent)
+
+    } catch (error) {
+      console.error('Failed to dislike event:', error)
+      throw error
+    } finally {
+      this._isLoading.value = false
+    }
+  }
+
+  /**
+   * Remove a like from an event (unlike) using NIP-09 deletion events
+   */
+  async unlikeEvent(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.userHasLiked || !eventReactions.userReactionId) {
+      throw new Error('No 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: Deletion published to ${result.success}/${result.total} relays`)
+
+      // Optimistically update local state
+      this.handleDeletionEvent(signedEvent)
+
+    } catch (error) {
+      console.error('Failed to unlike 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')
+    }
+
+    const eventReactions = this.getEventReactions(eventId)
+
+    if (!eventReactions.userHasDisliked || !eventReactions.userReactionId) {
+      throw new Error('No dislike to remove')
+    }
+
+    try {
+      this._isLoading.value = true
+
+      const eventTemplate: EventTemplate = {
+        kind: 5,
+        content: '',
+        tags: [
+          ['e', eventReactions.userReactionId],
+          ['k', '7']
+        ],
+        created_at: Math.floor(Date.now() / 1000)
+      }
+
+      const privkeyBytes = this.hexToUint8Array(userPrivkey)
+      const signedEvent = finalizeEvent(eventTemplate, privkeyBytes)
+
+      const result = await this.relayHub.publishEvent(signedEvent)
+      console.log(`ReactionService: Dislike deletion published to ${result.success}/${result.total} relays`)
+
+      this.handleDeletionEvent(signedEvent)
+
+    } catch (error) {
+      console.error('Failed to undislike event:', error)
+      throw error
+    } finally {
+      this._isLoading.value = false
+    }
+  }
+
+  /**
+   * Toggle like on an event - like if not liked, unlike if already liked
+   */
+  async toggleLikeEvent(eventId: string, eventPubkey: string, eventKind: number): Promise<void> {
+    const eventReactions = this.getEventReactions(eventId)
+
+    if (eventReactions.userHasLiked) {
+      // Unlike the event
+      await this.unlikeEvent(eventId)
+    } else {
+      // Like the event
+      await this.likeEvent(eventId, eventPubkey, eventKind)
+    }
+  }
+
+  /**
+   * Toggle dislike on an event
+   */
+  async toggleDislikeEvent(eventId: string, eventPubkey: string, eventKind: number): Promise<void> {
+    const eventReactions = this.getEventReactions(eventId)
+
+    if (eventReactions.userHasDisliked) {
+      await this.undislikeEvent(eventId)
+    } else {
+      await this.dislikeEvent(eventId, eventPubkey, eventKind)
+    }
+  }
+
+  /**
+   * Helper function to convert hex string to Uint8Array
+   */
+  private hexToUint8Array(hex: string): Uint8Array {
+    const bytes = new Uint8Array(hex.length / 2)
+    for (let i = 0; i < hex.length; i += 2) {
+      bytes[i / 2] = parseInt(hex.substr(i, 2), 16)
+    }
+    return bytes
+  }
+
+  /**
+   * Get all event reactions
+   */
+  get eventReactions(): Map<string, EventReactions> {
+    return this._eventReactions
+  }
+
+  /**
+   * Check if currently loading
+   */
+  get isLoading(): boolean {
+    return this._isLoading.value
+  }
+
+  /**
+   * Cleanup
+   */
+  protected async onDestroy(): Promise<void> {
+    if (this.currentUnsubscribe) {
+      this.currentUnsubscribe()
+    }
+    this._eventReactions.clear()
+    this.monitoredEvents.clear()
+    this.deletedReactions.clear()
+  }
+}

src/modules/links/components/SortTabs.vue

@@ -0,0 +1,107 @@
+<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/links/components/SubmissionComment.vue

@@ -0,0 +1,275 @@
+<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/links/components/SubmissionDetail.vue

@@ -0,0 +1,553 @@
+<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 '@/modules/base/nostr/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-30 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/links/components/SubmissionList.vue

@@ -0,0 +1,235 @@
+<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 '@/modules/base/nostr/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/links/components/SubmissionRow.vue

@@ -0,0 +1,247 @@
+<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/links/components/SubmissionThumbnail.vue

@@ -0,0 +1,114 @@
+<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/links/components/SubmitComposer.vue

@@ -0,0 +1,406 @@
+<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/links/components/VoteControls.vue

@@ -0,0 +1,107 @@
+<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/links/composables/useSubmissions.ts

@@ -0,0 +1,335 @@
+/**
+ * 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/links/index.ts

@@ -0,0 +1,77 @@
+import type { App } from 'vue'
+import { markRaw } from 'vue'
+import type { ModulePlugin } from '@/core/types'
+import { container, SERVICE_TOKENS } from '@/core/di-container'
+import { SubmissionService } from './services/SubmissionService'
+import { LinkPreviewService } from './services/LinkPreviewService'
+import SubmissionList from './components/SubmissionList.vue'
+import SubmitComposer from './components/SubmitComposer.vue'
+
+export const linksModule: ModulePlugin = {
+  name: 'links',
+  version: '1.0.0',
+  dependencies: ['base'],
+
+  quickActions: [
+    {
+      id: 'submit-link',
+      label: 'Submit',
+      icon: 'Link',
+      component: markRaw(SubmitComposer),
+      category: 'compose',
+      order: 1,
+      requiresAuth: true
+    }
+  ],
+
+  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('links module: Starting installation...')
+
+    const submissionService = new SubmissionService()
+    const linkPreviewService = new LinkPreviewService()
+
+    container.provide(SERVICE_TOKENS.SUBMISSION_SERVICE, submissionService)
+    container.provide(SERVICE_TOKENS.LINK_PREVIEW_SERVICE, linkPreviewService)
+    console.log('links module: Services registered in DI container')
+
+    console.log('links module: Initializing services...')
+    await Promise.all([
+      submissionService.initialize({
+        waitForDependencies: true,
+        maxRetries: 3
+      }),
+      linkPreviewService.initialize({
+        waitForDependencies: true,
+        maxRetries: 3
+      })
+    ])
+    console.log('links module: Services initialized')
+
+    app.component('SubmissionList', SubmissionList)
+    console.log('links module: Installation complete')
+  },
+
+  components: {
+    SubmissionList,
+    SubmitComposer
+  },
+
+  composables: {}
+}
+
+export default linksModule

src/modules/links/services/LinkPreviewService.ts

@@ -0,0 +1,552 @@
+/**
+ * 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/links/types/index.ts

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

src/modules/links/types/submission.ts

@@ -0,0 +1,528 @@
+/**
+ * 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/links/views/SubmissionDetailPage.vue

@@ -0,0 +1,18 @@
+<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/links/views/SubmitPage.vue

@@ -0,0 +1,35 @@
+<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/modules/nostr-feed/components/NostrFeed.vue

@@ -11,8 +11,8 @@ import {
 } from '@/components/ui/dialog'
 import { Megaphone, RefreshCw, AlertCircle, ChevronLeft, ChevronRight } from 'lucide-vue-next'
 import { useFeed } from '../composables/useFeed'
-import { useProfiles } from '../composables/useProfiles'
-import { useReactions } from '../composables/useReactions'
+import { useProfiles } from '@/modules/base/composables/useProfiles'
+import { useReactions } from '@/modules/base/composables/useReactions'
 import { useScheduledEvents } from '../composables/useScheduledEvents'
 import ThreadedPost from './ThreadedPost.vue'
 import ScheduledEventCard from './ScheduledEventCard.vue'

src/modules/nostr-feed/index.ts

@@ -7,9 +7,6 @@ import NoteComposer from './components/NoteComposer.vue'
 import RideshareComposer from './components/RideshareComposer.vue'
 import { useFeed } from './composables/useFeed'
 import { FeedService } from './services/FeedService'
-import { ProfileService } from './services/ProfileService'
-import { ReactionService } from './services/ReactionService'
-import { ScheduledEventService } from './services/ScheduledEventService'
 
 /**
  * Nostr Feed Module Plugin
@@ -46,37 +43,18 @@ export const nostrFeedModule: ModulePlugin = {
     console.log('nostr-feed module: Starting installation...')
 
     // Register services in DI container
+    // NOTE: ProfileService and ReactionService are now provided by the base module
     const feedService = new FeedService()
-    const profileService = new ProfileService()
-    const reactionService = new ReactionService()
-    const scheduledEventService = new ScheduledEventService()
 
     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.SCHEDULED_EVENT_SERVICE, scheduledEventService)
     console.log('nostr-feed module: Services registered in DI container')
 
     // Initialize services
     console.log('nostr-feed module: Initializing services...')
-    await Promise.all([
-      feedService.initialize({
-        waitForDependencies: true,
-        maxRetries: 3
-      }),
-      profileService.initialize({
-        waitForDependencies: true,
-        maxRetries: 3
-      }),
-      reactionService.initialize({
-        waitForDependencies: true,
-        maxRetries: 3
-      }),
-      scheduledEventService.initialize({
+    await feedService.initialize({
       waitForDependencies: true,
       maxRetries: 3
     })
-    ])
     console.log('nostr-feed module: Services initialized')
 
     // Register components globally

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

@@ -1,6 +1,6 @@
 import { ref, computed } from 'vue'
 import { BaseService } from '@/core/base/BaseService'
-import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import { injectService, tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
 import { eventBus } from '@/core/event-bus'
 import type { Event as NostrEvent, Filter } from 'nostr-tools'
 
@@ -73,12 +73,13 @@ export class FeedService extends BaseService {
     this.relayHub = injectService(SERVICE_TOKENS.RELAY_HUB)
     this.visibilityService = injectService(SERVICE_TOKENS.VISIBILITY_SERVICE)
     this.reactionService = injectService(SERVICE_TOKENS.REACTION_SERVICE)
-    this.scheduledEventService = injectService(SERVICE_TOKENS.SCHEDULED_EVENT_SERVICE)
+    // ScheduledEventService moved to tasks module - use tryInjectService for backward compat
+    this.scheduledEventService = tryInjectService(SERVICE_TOKENS.TASK_SERVICE)
 
     console.log('FeedService: RelayHub injected:', !!this.relayHub)
     console.log('FeedService: VisibilityService injected:', !!this.visibilityService)
     console.log('FeedService: ReactionService injected:', !!this.reactionService)
-    console.log('FeedService: ScheduledEventService injected:', !!this.scheduledEventService)
+    console.log('FeedService: TaskService injected:', !!this.scheduledEventService)
 
     if (!this.relayHub) {
       throw new Error('RelayHub service not available')

src/modules/tasks/components/TaskCard.vue

@@ -0,0 +1,313 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
+import { Calendar, MapPin, Clock, CheckCircle, PlayCircle, Hand, Trash2 } from 'lucide-vue-next'
+import type { ScheduledEvent, EventCompletion, TaskStatus } from '../services/TaskService'
+import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import type { AuthService } from '@/modules/base/auth/auth-service'
+
+interface Props {
+  event: ScheduledEvent
+  getDisplayName: (pubkey: string) => string
+  getCompletion: (eventAddress: string, occurrence?: string) => EventCompletion | undefined
+  getTaskStatus: (eventAddress: string, occurrence?: string) => TaskStatus | null
+  adminPubkeys?: string[]
+}
+
+interface Emits {
+  (e: 'claim-task', event: ScheduledEvent, occurrence?: string): void
+  (e: 'start-task', event: ScheduledEvent, occurrence?: string): void
+  (e: 'complete-task', event: ScheduledEvent, occurrence?: string): void
+  (e: 'unclaim-task', event: ScheduledEvent, occurrence?: string): void
+  (e: 'delete-task', event: ScheduledEvent): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  adminPubkeys: () => []
+})
+
+const emit = defineEmits<Emits>()
+
+const authService = injectService<AuthService>(SERVICE_TOKENS.AUTH_SERVICE)
+
+const showConfirmDialog = ref(false)
+const hasConfirmedCommunication = ref(false)
+
+const eventAddress = computed(() => `31922:${props.event.pubkey}:${props.event.dTag}`)
+const isRecurring = computed(() => !!props.event.recurrence)
+
+const occurrence = computed(() => {
+  if (!isRecurring.value) return undefined
+  return new Date().toISOString().split('T')[0]
+})
+
+const isAdminEvent = computed(() => props.adminPubkeys.includes(props.event.pubkey))
+const taskStatus = computed(() => props.getTaskStatus(eventAddress.value, occurrence.value))
+const isCompletable = computed(() => props.event.eventType === 'task')
+const completion = computed(() => props.getCompletion(eventAddress.value, occurrence.value))
+const currentUserPubkey = computed(() => authService?.user.value?.pubkey)
+
+const canUnclaim = computed(() => {
+  if (!completion.value || !currentUserPubkey.value) return false
+  if (taskStatus.value !== 'claimed') return false
+  return completion.value.pubkey === currentUserPubkey.value
+})
+
+const isAuthor = computed(() => {
+  if (!currentUserPubkey.value) return false
+  return props.event.pubkey === currentUserPubkey.value
+})
+
+const statusConfig = computed(() => {
+  switch (taskStatus.value) {
+    case 'claimed':
+      return { label: 'Claimed', variant: 'secondary' as const, icon: Hand, color: 'text-blue-600' }
+    case 'in-progress':
+      return { label: 'In Progress', variant: 'default' as const, icon: PlayCircle, color: 'text-orange-600' }
+    case 'completed':
+      return { label: 'Completed', variant: 'secondary' as const, icon: CheckCircle, color: 'text-green-600' }
+    default:
+      return null
+  }
+})
+
+const formattedDate = computed(() => {
+  try {
+    const date = new Date(props.event.start)
+    if (props.event.start.includes('T')) {
+      return date.toLocaleString('en-US', {
+        weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit'
+      })
+    } else {
+      return date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })
+    }
+  } catch (error) {
+    return props.event.start
+  }
+})
+
+const formattedTimeRange = computed(() => {
+  if (!props.event.end || !props.event.start.includes('T')) return null
+  try {
+    const start = new Date(props.event.start)
+    const end = new Date(props.event.end)
+    const startTime = start.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
+    const endTime = end.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
+    return `${startTime} - ${endTime}`
+  } catch (error) {
+    return null
+  }
+})
+
+const pendingAction = ref<'claim' | 'start' | 'complete' | 'unclaim' | 'delete' | null>(null)
+
+function handleClaimTask() {
+  pendingAction.value = 'claim'
+  showConfirmDialog.value = true
+}
+
+function handleStartTask() {
+  pendingAction.value = 'start'
+  showConfirmDialog.value = true
+}
+
+function handleCompleteTask() {
+  pendingAction.value = 'complete'
+  showConfirmDialog.value = true
+}
+
+function handleUnclaimTask() {
+  pendingAction.value = 'unclaim'
+  showConfirmDialog.value = true
+}
+
+function handleDeleteTask() {
+  pendingAction.value = 'delete'
+  showConfirmDialog.value = true
+}
+
+function confirmAction() {
+  if (!pendingAction.value) return
+  if (pendingAction.value === 'unclaim' && !hasConfirmedCommunication.value) return
+
+  switch (pendingAction.value) {
+    case 'claim': emit('claim-task', props.event, occurrence.value); break
+    case 'start': emit('start-task', props.event, occurrence.value); break
+    case 'complete': emit('complete-task', props.event, occurrence.value); break
+    case 'unclaim': emit('unclaim-task', props.event, occurrence.value); break
+    case 'delete': emit('delete-task', props.event); break
+  }
+
+  showConfirmDialog.value = false
+  pendingAction.value = null
+  hasConfirmedCommunication.value = false
+}
+
+function cancelAction() {
+  showConfirmDialog.value = false
+  pendingAction.value = null
+  hasConfirmedCommunication.value = false
+}
+
+const dialogContent = computed(() => {
+  switch (pendingAction.value) {
+    case 'claim':
+      return { title: 'Claim Task?', description: `This will mark "${props.event.title}" as claimed by you. You can start working on it later.`, confirmText: 'Claim Task' }
+    case 'start':
+      return { title: 'Start Task?', description: `This will mark "${props.event.title}" as in-progress. Others will see you're actively working on it.`, confirmText: 'Start Task' }
+    case 'complete':
+      return { title: 'Complete Task?', description: `This will mark "${props.event.title}" as completed by you. Other users will be able to see that you completed this task.`, confirmText: 'Mark Complete' }
+    case 'unclaim':
+      return { title: 'Unclaim Task?', description: `This will remove your claim on "${props.event.title}" and make it available for others.\n\nHave you communicated to others that you are unclaiming this task?`, confirmText: 'Unclaim Task' }
+    case 'delete':
+      return { title: 'Delete Task?', description: `This will permanently delete "${props.event.title}". This action cannot be undone.`, confirmText: 'Delete Task' }
+    default:
+      return { title: '', description: '', confirmText: '' }
+  }
+})
+</script>
+
+<template>
+  <Collapsible class="border-b md:border md:rounded-lg bg-card transition-all"
+               :class="{ 'opacity-60': isCompletable && taskStatus === 'completed' }">
+    <!-- Collapsed View (Trigger) -->
+    <CollapsibleTrigger as-child>
+      <div class="flex items-center gap-3 p-3 md:p-4 cursor-pointer hover:bg-accent/50 transition-colors">
+        <div class="flex items-center gap-1.5 text-sm text-muted-foreground shrink-0">
+          <Clock class="h-3.5 w-3.5" />
+          <span class="font-medium">{{ formattedTimeRange || formattedDate }}</span>
+        </div>
+
+        <h3 class="font-semibold text-sm md:text-base flex-1 truncate"
+            :class="{ 'line-through': isCompletable && taskStatus === 'completed' }">
+          {{ event.title }}
+        </h3>
+
+        <div class="flex items-center gap-2 shrink-0">
+          <Button v-if="isCompletable && !taskStatus" @click.stop="handleClaimTask" variant="ghost" size="sm" class="h-7 px-2 text-xs gap-1">
+            <Hand class="h-3.5 w-3.5" /><span class="hidden sm:inline">Claim</span>
+          </Button>
+          <Button v-else-if="isCompletable && taskStatus === 'claimed'" @click.stop="handleStartTask" variant="ghost" size="sm" class="h-7 px-2 text-xs gap-1">
+            <PlayCircle class="h-3.5 w-3.5" /><span class="hidden sm:inline">Start</span>
+          </Button>
+          <Button v-else-if="isCompletable && taskStatus === 'in-progress'" @click.stop="handleCompleteTask" variant="ghost" size="sm" class="h-7 px-2 text-xs gap-1">
+            <CheckCircle class="h-3.5 w-3.5" /><span class="hidden sm:inline">Complete</span>
+          </Button>
+
+          <Badge v-if="isCompletable && statusConfig && completion" :variant="statusConfig.variant" class="text-xs gap-1">
+            <component :is="statusConfig.icon" class="h-3 w-3" :class="statusConfig.color" />
+            <span>{{ getDisplayName(completion.pubkey) }}</span>
+          </Badge>
+
+          <Badge v-if="isRecurring" variant="outline" class="text-xs">
+            🔄
+          </Badge>
+        </div>
+      </div>
+    </CollapsibleTrigger>
+
+    <!-- Expanded View -->
+    <CollapsibleContent class="p-4 md:p-6 pt-0">
+      <div class="flex-1 min-w-0">
+        <div class="flex items-center gap-4 text-sm text-muted-foreground mb-2 flex-wrap">
+          <div class="flex items-center gap-1.5">
+            <Calendar class="h-4 w-4" /><span>{{ formattedDate }}</span>
+          </div>
+          <div v-if="formattedTimeRange" class="flex items-center gap-1.5">
+            <Clock class="h-4 w-4" /><span>{{ formattedTimeRange }}</span>
+          </div>
+        </div>
+
+        <div v-if="event.location" class="flex items-center gap-1.5 text-sm text-muted-foreground mb-3">
+          <MapPin class="h-4 w-4" /><span>{{ event.location }}</span>
+        </div>
+
+        <div v-if="event.description || event.content" class="text-sm mb-3">
+          <p class="whitespace-pre-wrap break-words">{{ event.description || event.content }}</p>
+        </div>
+
+        <div v-if="isCompletable && completion" class="text-xs mb-3">
+          <div v-if="taskStatus === 'completed'" class="text-muted-foreground">
+            ✓ Completed by {{ getDisplayName(completion.pubkey) }}
+            <span v-if="completion.notes"> - {{ completion.notes }}</span>
+          </div>
+          <div v-else-if="taskStatus === 'in-progress'" class="text-orange-600 dark:text-orange-400 font-medium">
+            🔄 In Progress by {{ getDisplayName(completion.pubkey) }}
+            <span v-if="completion.notes"> - {{ completion.notes }}</span>
+          </div>
+          <div v-else-if="taskStatus === 'claimed'" class="text-blue-600 dark:text-blue-400 font-medium">
+            👋 Claimed by {{ getDisplayName(completion.pubkey) }}
+            <span v-if="completion.notes"> - {{ completion.notes }}</span>
+          </div>
+        </div>
+
+        <div v-if="!isAdminEvent" class="text-xs text-muted-foreground mb-3">
+          Posted by {{ getDisplayName(event.pubkey) }}
+        </div>
+
+        <div v-if="isCompletable" class="mt-3 flex flex-wrap gap-2">
+          <template v-if="!taskStatus">
+            <Button @click.stop="handleClaimTask" variant="default" size="sm" class="gap-2"><Hand class="h-4 w-4" />Claim Task</Button>
+            <Button @click.stop="handleStartTask" variant="outline" size="sm" class="gap-2"><PlayCircle class="h-4 w-4" />Mark In Progress</Button>
+            <Button @click.stop="handleCompleteTask" variant="outline" size="sm" class="gap-2"><CheckCircle class="h-4 w-4" />Mark Complete</Button>
+          </template>
+          <template v-else-if="taskStatus === 'claimed'">
+            <Button @click.stop="handleStartTask" variant="default" size="sm" class="gap-2"><PlayCircle class="h-4 w-4" />Start Task</Button>
+            <Button @click.stop="handleCompleteTask" variant="outline" size="sm" class="gap-2"><CheckCircle class="h-4 w-4" />Mark Complete</Button>
+            <Button v-if="canUnclaim" @click.stop="handleUnclaimTask" variant="outline" size="sm">Unclaim</Button>
+          </template>
+          <template v-else-if="taskStatus === 'in-progress'">
+            <Button @click.stop="handleCompleteTask" variant="default" size="sm" class="gap-2"><CheckCircle class="h-4 w-4" />Mark Complete</Button>
+            <Button v-if="canUnclaim" @click.stop="handleUnclaimTask" variant="outline" size="sm">Unclaim</Button>
+          </template>
+          <template v-else-if="taskStatus === 'completed'">
+            <Button v-if="canUnclaim" @click.stop="handleUnclaimTask" variant="outline" size="sm">Unclaim</Button>
+          </template>
+        </div>
+
+        <div v-if="isAuthor" class="mt-4 pt-4 border-t border-border">
+          <Button @click.stop="handleDeleteTask" variant="destructive" size="sm" class="gap-2"><Trash2 class="h-4 w-4" />Delete Task</Button>
+        </div>
+      </div>
+    </CollapsibleContent>
+  </Collapsible>
+
+  <!-- Confirmation Dialog -->
+  <Dialog :open="showConfirmDialog" @update:open="(val: boolean) => showConfirmDialog = val">
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>{{ dialogContent.title }}</DialogTitle>
+        <DialogDescription>{{ dialogContent.description }}</DialogDescription>
+      </DialogHeader>
+
+      <div v-if="pendingAction === 'unclaim'" class="flex items-start space-x-3 py-4">
+        <Checkbox :model-value="hasConfirmedCommunication" @update:model-value="(val) => hasConfirmedCommunication = !!val" id="confirm-communication" />
+        <label for="confirm-communication" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer">
+          I have communicated this to the team.
+        </label>
+      </div>
+
+      <DialogFooter>
+        <Button variant="outline" @click="cancelAction">Cancel</Button>
+        <Button @click="confirmAction" :disabled="pendingAction === 'unclaim' && !hasConfirmedCommunication">
+          {{ dialogContent.confirmText }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

src/modules/tasks/components/TaskList.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { Button } from '@/components/ui/button'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { useTasks } from '../composables/useTasks'
+import { useProfiles } from '@/modules/base/composables/useProfiles'
+import TaskCard from './TaskCard.vue'
+import type { ScheduledEvent } from '../services/TaskService'
+import appConfig from '@/app.config'
+
+const {
+  getEventsForSpecificDate,
+  getCompletion,
+  getTaskStatus,
+  claimTask,
+  startTask,
+  completeEvent,
+  unclaimTask,
+  deleteTask,
+  allCompletions
+} = useTasks()
+
+const { getDisplayName, fetchProfiles } = useProfiles()
+
+const adminPubkeys = appConfig.modules['nostr-feed']?.config?.adminPubkeys || []
+
+// Selected date for viewing scheduled tasks (defaults to today)
+const selectedDate = ref(new Date().toISOString().split('T')[0])
+
+// Get scheduled tasks for the selected date (reactive)
+const scheduledEventsForDate = computed(() => getEventsForSpecificDate(selectedDate.value))
+
+function goToPreviousDay() {
+  const date = new Date(selectedDate.value)
+  date.setDate(date.getDate() - 1)
+  selectedDate.value = date.toISOString().split('T')[0]
+}
+
+function goToNextDay() {
+  const date = new Date(selectedDate.value)
+  date.setDate(date.getDate() + 1)
+  selectedDate.value = date.toISOString().split('T')[0]
+}
+
+function goToToday() {
+  selectedDate.value = new Date().toISOString().split('T')[0]
+}
+
+const isToday = computed(() => {
+  const today = new Date().toISOString().split('T')[0]
+  return selectedDate.value === today
+})
+
+const dateDisplayText = computed(() => {
+  const today = new Date().toISOString().split('T')[0]
+  const yesterday = new Date()
+  yesterday.setDate(yesterday.getDate() - 1)
+  const yesterdayStr = yesterday.toISOString().split('T')[0]
+  const tomorrow = new Date()
+  tomorrow.setDate(tomorrow.getDate() + 1)
+  const tomorrowStr = tomorrow.toISOString().split('T')[0]
+
+  if (selectedDate.value === today) {
+    return "Today's Tasks"
+  } else if (selectedDate.value === yesterdayStr) {
+    return "Yesterday's Tasks"
+  } else if (selectedDate.value === tomorrowStr) {
+    return "Tomorrow's Tasks"
+  } else {
+    const date = new Date(selectedDate.value + 'T00:00:00')
+    const formatted = date.toLocaleDateString('en-US', {
+      weekday: 'short', month: 'short', day: 'numeric'
+    })
+    return `Tasks for ${formatted}`
+  }
+})
+
+// Fetch profiles for task authors and completers
+watch(scheduledEventsForDate, async (events) => {
+  if (events.length > 0) {
+    const pubkeys = new Set<string>()
+
+    events.forEach((event: ScheduledEvent) => {
+      pubkeys.add(event.pubkey)
+      const eventAddress = `31922:${event.pubkey}:${event.dTag}`
+      const completion = getCompletion(eventAddress)
+      if (completion) {
+        pubkeys.add(completion.pubkey)
+      }
+    })
+
+    if (pubkeys.size > 0) {
+      await fetchProfiles([...pubkeys])
+    }
+  }
+}, { immediate: true })
+
+// Fetch profiles for new completions
+watch(allCompletions, async (completions) => {
+  if (completions.length > 0) {
+    const pubkeys = completions.map(c => c.pubkey)
+    await fetchProfiles(pubkeys)
+  }
+}, { immediate: true })
+
+// Task action handlers
+async function onClaimTask(event: ScheduledEvent, occurrence?: string) {
+  await claimTask(event, '', occurrence)
+}
+
+async function onStartTask(event: ScheduledEvent, occurrence?: string) {
+  await startTask(event, '', occurrence)
+}
+
+async function onCompleteTask(event: ScheduledEvent, occurrence?: string) {
+  await completeEvent(event, occurrence, '')
+}
+
+async function onUnclaimTask(event: ScheduledEvent, occurrence?: string) {
+  await unclaimTask(event, occurrence)
+}
+
+async function onDeleteTask(event: ScheduledEvent) {
+  await deleteTask(event)
+}
+</script>
+
+<template>
+  <div>
+    <!-- Date Navigation -->
+    <div class="flex items-center justify-between px-4 md:px-0 mb-3">
+      <Button variant="ghost" size="icon" class="h-8 w-8" @click="goToPreviousDay">
+        <ChevronLeft class="h-4 w-4" />
+      </Button>
+
+      <div class="flex items-center gap-2">
+        <h3 class="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+          {{ dateDisplayText }}
+        </h3>
+        <Button v-if="!isToday" variant="outline" size="sm" class="h-6 text-xs" @click="goToToday">
+          Today
+        </Button>
+      </div>
+
+      <Button variant="ghost" size="icon" class="h-8 w-8" @click="goToNextDay">
+        <ChevronRight class="h-4 w-4" />
+      </Button>
+    </div>
+
+    <!-- Tasks List -->
+    <div v-if="scheduledEventsForDate.length > 0" class="md:space-y-3">
+      <TaskCard
+        v-for="event in scheduledEventsForDate"
+        :key="`${event.pubkey}:${event.dTag}`"
+        :event="event"
+        :get-display-name="getDisplayName"
+        :get-completion="getCompletion"
+        :get-task-status="getTaskStatus"
+        :admin-pubkeys="adminPubkeys"
+        @claim-task="onClaimTask"
+        @start-task="onStartTask"
+        @complete-task="onCompleteTask"
+        @unclaim-task="onUnclaimTask"
+        @delete-task="onDeleteTask"
+      />
+    </div>
+    <div v-else class="text-center py-8 text-muted-foreground text-sm px-4">
+      {{ isToday ? 'No tasks for today' : 'No tasks for this day' }}
+    </div>
+  </div>
+</template>

src/modules/tasks/composables/useTasks.ts

@@ -0,0 +1,182 @@
+import { computed, onMounted, onUnmounted } from 'vue'
+import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import type { TaskService, ScheduledEvent, EventCompletion, TaskStatus } from '../services/TaskService'
+import type { AuthService } from '@/modules/base/auth/auth-service'
+import { useToast } from '@/core/composables/useToast'
+
+/**
+ * Composable for managing tasks
+ */
+export function useTasks(options?: { autoSubscribe?: boolean }) {
+  const taskService = injectService<TaskService>(SERVICE_TOKENS.TASK_SERVICE)
+  const authService = injectService<AuthService>(SERVICE_TOKENS.AUTH_SERVICE)
+  const toast = useToast()
+
+  const currentUserPubkey = computed(() => authService?.user.value?.pubkey)
+
+  // Auto-subscribe to task events on mount
+  if (options?.autoSubscribe !== false) {
+    onMounted(async () => {
+      await taskService?.subscribeToTasks()
+    })
+
+    onUnmounted(() => {
+      taskService?.unsubscribe()
+    })
+  }
+
+  const getScheduledEvents = (): ScheduledEvent[] => {
+    if (!taskService) return []
+    return taskService.getScheduledEvents()
+  }
+
+  const getEventsForDate = (date: string): ScheduledEvent[] => {
+    if (!taskService) return []
+    return taskService.getEventsForDate(date)
+  }
+
+  const getEventsForSpecificDate = (date?: string): ScheduledEvent[] => {
+    if (!taskService) return []
+    return taskService.getEventsForSpecificDate(date, currentUserPubkey.value)
+  }
+
+  const getTodaysEvents = (): ScheduledEvent[] => {
+    if (!taskService) return []
+    return taskService.getTodaysEvents(currentUserPubkey.value)
+  }
+
+  const getCompletion = (eventAddress: string, occurrence?: string): EventCompletion | undefined => {
+    if (!taskService) return undefined
+    return taskService.getCompletion(eventAddress, occurrence)
+  }
+
+  const isCompleted = (eventAddress: string, occurrence?: string): boolean => {
+    if (!taskService) return false
+    return taskService.isCompleted(eventAddress, occurrence)
+  }
+
+  const getTaskStatus = (eventAddress: string, occurrence?: string): TaskStatus | null => {
+    if (!taskService) return null
+    return taskService.getTaskStatus(eventAddress, occurrence)
+  }
+
+  const claimTask = async (event: ScheduledEvent, notes: string = '', occurrence?: string): Promise<void> => {
+    if (!taskService) {
+      toast.error('Task service not available')
+      return
+    }
+
+    try {
+      await taskService.claimTask(event, notes, occurrence)
+      toast.success('Task claimed!')
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to claim task'
+      if (message.includes('authenticated')) {
+        toast.error('Please sign in to claim tasks')
+      } else {
+        toast.error(message)
+      }
+      console.error('Failed to claim task:', error)
+    }
+  }
+
+  const startTask = async (event: ScheduledEvent, notes: string = '', occurrence?: string): Promise<void> => {
+    if (!taskService) {
+      toast.error('Task service not available')
+      return
+    }
+
+    try {
+      await taskService.startTask(event, notes, occurrence)
+      toast.success('Task started!')
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to start task'
+      toast.error(message)
+      console.error('Failed to start task:', error)
+    }
+  }
+
+  const unclaimTask = async (event: ScheduledEvent, occurrence?: string): Promise<void> => {
+    if (!taskService) {
+      toast.error('Task service not available')
+      return
+    }
+
+    try {
+      await taskService.unclaimTask(event, occurrence)
+      toast.success('Task unclaimed')
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to unclaim task'
+      toast.error(message)
+      console.error('Failed to unclaim task:', error)
+    }
+  }
+
+  const completeEvent = async (event: ScheduledEvent, occurrence?: string, notes: string = ''): Promise<void> => {
+    if (!taskService) {
+      toast.error('Task service not available')
+      return
+    }
+
+    try {
+      await taskService.completeEvent(event, notes, occurrence)
+      toast.success('Task completed!')
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to complete task'
+      toast.error(message)
+      console.error('Failed to complete task:', error)
+    }
+  }
+
+  const deleteTask = async (event: ScheduledEvent): Promise<void> => {
+    if (!taskService) {
+      toast.error('Task service not available')
+      return
+    }
+
+    try {
+      await taskService.deleteTask(event)
+      toast.success('Task deleted!')
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to delete task'
+      toast.error(message)
+      console.error('Failed to delete task:', error)
+    }
+  }
+
+  const isLoading = computed(() => {
+    return taskService?.isLoading ?? false
+  })
+
+  const allScheduledEvents = computed(() => {
+    return taskService?.scheduledEvents ?? new Map()
+  })
+
+  const allCompletions = computed(() => {
+    if (!taskService?.completions) return []
+    return Array.from(taskService.completions.values())
+  })
+
+  return {
+    // Getters
+    getScheduledEvents,
+    getEventsForDate,
+    getEventsForSpecificDate,
+    getTodaysEvents,
+    getCompletion,
+    isCompleted,
+    getTaskStatus,
+
+    // Actions
+    claimTask,
+    startTask,
+    completeEvent,
+    unclaimTask,
+    deleteTask,
+
+    // State
+    isLoading,
+    allScheduledEvents,
+    allCompletions
+  }
+}

src/modules/tasks/index.ts

@@ -0,0 +1,42 @@
+import type { App } from 'vue'
+import type { ModulePlugin } from '@/core/types'
+import { container, SERVICE_TOKENS } from '@/core/di-container'
+import { TaskService } from './services/TaskService'
+
+/**
+ * Tasks Module Plugin
+ * Provides task management with Nostr calendar events (kind 31922/31925)
+ */
+export const tasksModule: ModulePlugin = {
+  name: 'tasks',
+  version: '1.0.0',
+  dependencies: ['base'],
+
+  routes: [
+    {
+      path: '/tasks',
+      name: 'tasks',
+      component: () => import('./views/TasksPage.vue'),
+      meta: { title: 'Tasks', requiresAuth: true }
+    }
+  ],
+
+  async install(_app: App) {
+    console.log('tasks module: Starting installation...')
+
+    const taskService = new TaskService()
+    container.provide(SERVICE_TOKENS.TASK_SERVICE, taskService)
+    console.log('tasks module: TaskService registered in DI container')
+
+    await taskService.initialize({
+      waitForDependencies: true,
+      maxRetries: 3
+    })
+    console.log('tasks module: Installation complete')
+  },
+
+  components: {},
+  composables: {}
+}
+
+export default tasksModule

src/modules/tasks/services/TaskService.ts

@@ -0,0 +1,659 @@
+import { ref, reactive } from 'vue'
+import { BaseService } from '@/core/base/BaseService'
+import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import { finalizeEvent, type EventTemplate } from 'nostr-tools'
+import type { Event as NostrEvent } from 'nostr-tools'
+
+export interface RecurrencePattern {
+  frequency: 'daily' | 'weekly'
+  dayOfWeek?: string // For weekly: 'monday', 'tuesday', etc.
+  endDate?: string // ISO date string - when to stop recurring (optional)
+}
+
+export interface ScheduledEvent {
+  id: string
+  pubkey: string
+  created_at: number
+  dTag: string // Unique identifier from 'd' tag
+  title: string
+  start: string // ISO date string (YYYY-MM-DD or ISO datetime)
+  end?: string
+  description?: string
+  location?: string
+  status: string
+  eventType?: string // 'task' for completable events, 'announcement' for informational
+  participants?: Array<{ pubkey: string; type?: string }> // 'required', 'optional', 'organizer'
+  content: string
+  tags: string[][]
+  recurrence?: RecurrencePattern // Optional: for recurring events
+}
+
+export type TaskStatus = 'claimed' | 'in-progress' | 'completed' | 'blocked' | 'cancelled'
+
+export interface EventCompletion {
+  id: string
+  eventAddress: string // "31922:pubkey:d-tag"
+  occurrence?: string // ISO date string for the specific occurrence (YYYY-MM-DD)
+  pubkey: string // Who claimed/completed it
+  created_at: number
+  taskStatus: TaskStatus
+  completedAt?: number // Unix timestamp when completed
+  notes: string
+}
+
+export class TaskService extends BaseService {
+  protected readonly metadata = {
+    name: 'TaskService',
+    version: '1.0.0',
+    dependencies: ['RelayHub', 'AuthService', 'VisibilityService']
+  }
+
+  protected relayHub: any = null
+  protected authService: any = null
+
+  // Scheduled events state - indexed by event address
+  private _scheduledEvents = reactive(new Map<string, ScheduledEvent>())
+  private _completions = reactive(new Map<string, EventCompletion>())
+  private _isLoading = ref(false)
+
+  // Subscription management
+  private currentUnsubscribe: (() => void) | null = null
+  private _isSubscribed = false
+
+  protected async onInitialize(): Promise<void> {
+    console.log('TaskService: Starting initialization...')
+
+    this.relayHub = injectService(SERVICE_TOKENS.RELAY_HUB)
+    this.authService = injectService(SERVICE_TOKENS.AUTH_SERVICE)
+
+    if (!this.relayHub) {
+      throw new Error('RelayHub service not available')
+    }
+
+    // Register with VisibilityService for resume/pause lifecycle
+    if (this.visibilityService) {
+      this.visibilityService.registerService(
+        this.metadata.name,
+        this.onResume.bind(this),
+        this.onPause.bind(this)
+      )
+    }
+
+    console.log('TaskService: Initialization complete')
+  }
+
+  /**
+   * Subscribe to task-related Nostr events
+   */
+  async subscribeToTasks(): Promise<void> {
+    if (this._isSubscribed) return
+
+    if (!this.relayHub?.isConnected) {
+      await this.relayHub?.connect()
+    }
+
+    console.log('TaskService: Subscribing to task events...')
+
+    const subscriptionId = `tasks-${Date.now()}`
+
+    const filters = [
+      { kinds: [31922], limit: 200 }, // Calendar events (tasks)
+      { kinds: [31925], limit: 500 }, // Completions/RSVPs
+      { kinds: [5], '#k': ['31922', '31925'] } // Deletions of tasks and completions
+    ]
+
+    this.currentUnsubscribe = this.relayHub.subscribe({
+      id: subscriptionId,
+      filters,
+      onEvent: (event: NostrEvent) => {
+        this.routeEvent(event)
+      },
+      onEose: () => {
+        console.log('TaskService: Initial task data loaded')
+      }
+    })
+
+    this._isSubscribed = true
+  }
+
+  /**
+   * Unsubscribe from task events
+   */
+  unsubscribe(): void {
+    if (this.currentUnsubscribe) {
+      this.currentUnsubscribe()
+      this.currentUnsubscribe = null
+    }
+    this._isSubscribed = false
+  }
+
+  /**
+   * Route incoming events to the appropriate handler
+   */
+  private routeEvent(event: NostrEvent): void {
+    switch (event.kind) {
+      case 31922:
+        this.handleScheduledEvent(event)
+        break
+      case 31925:
+        this.handleCompletionEvent(event)
+        break
+      case 5:
+        this.handleDeletionRouting(event)
+        break
+    }
+  }
+
+  /**
+   * Route deletion events based on 'k' tag
+   */
+  private handleDeletionRouting(event: NostrEvent): void {
+    const kTag = event.tags.find(tag => tag[0] === 'k')?.[1]
+
+    if (kTag === '31922') {
+      this.handleTaskDeletion(event)
+    } else if (kTag === '31925') {
+      this.handleCompletionDeletion(event)
+    }
+  }
+
+  /**
+   * Visibility resume handler - reconnect if needed
+   */
+  private async onResume(): Promise<void> {
+    if (this._isSubscribed && !this.relayHub?.isConnected) {
+      console.log('TaskService: Reconnecting after visibility resume...')
+      this.unsubscribe()
+      await this.subscribeToTasks()
+    }
+  }
+
+  /**
+   * Visibility pause handler
+   */
+  private async onPause(): Promise<void> {
+    console.log('TaskService: App visibility paused')
+  }
+
+  /**
+   * Handle incoming scheduled event (kind 31922)
+   */
+  public handleScheduledEvent(event: NostrEvent): void {
+    try {
+      const dTag = event.tags.find(tag => tag[0] === 'd')?.[1]
+      if (!dTag) {
+        console.warn('Scheduled event missing d tag:', event.id)
+        return
+      }
+
+      const title = event.tags.find(tag => tag[0] === 'title')?.[1] || 'Untitled Event'
+      const start = event.tags.find(tag => tag[0] === 'start')?.[1]
+      const end = event.tags.find(tag => tag[0] === 'end')?.[1]
+      const description = event.tags.find(tag => tag[0] === 'description')?.[1]
+      const location = event.tags.find(tag => tag[0] === 'location')?.[1]
+      const status = event.tags.find(tag => tag[0] === 'status')?.[1] || 'pending'
+      const eventType = event.tags.find(tag => tag[0] === 'event-type')?.[1]
+
+      const participantTags = event.tags.filter(tag => tag[0] === 'p')
+      const participants = participantTags.map(tag => ({
+        pubkey: tag[1],
+        type: tag[3]
+      }))
+
+      const recurrenceFreq = event.tags.find(tag => tag[0] === 'recurrence')?.[1] as 'daily' | 'weekly' | undefined
+      const recurrenceDayOfWeek = event.tags.find(tag => tag[0] === 'recurrence-day')?.[1]
+      const recurrenceEndDate = event.tags.find(tag => tag[0] === 'recurrence-end')?.[1]
+
+      let recurrence: RecurrencePattern | undefined
+      if (recurrenceFreq === 'daily' || recurrenceFreq === 'weekly') {
+        recurrence = {
+          frequency: recurrenceFreq,
+          dayOfWeek: recurrenceDayOfWeek,
+          endDate: recurrenceEndDate
+        }
+      }
+
+      if (!start) {
+        console.warn('Scheduled event missing start date:', event.id)
+        return
+      }
+
+      const eventAddress = `31922:${event.pubkey}:${dTag}`
+
+      const scheduledEvent: ScheduledEvent = {
+        id: event.id,
+        pubkey: event.pubkey,
+        created_at: event.created_at,
+        dTag,
+        title,
+        start,
+        end,
+        description,
+        location,
+        status,
+        eventType,
+        participants: participants.length > 0 ? participants : undefined,
+        content: event.content,
+        tags: event.tags,
+        recurrence
+      }
+
+      this._scheduledEvents.set(eventAddress, scheduledEvent)
+    } catch (error) {
+      console.error('Failed to handle scheduled event:', error)
+    }
+  }
+
+  /**
+   * Handle RSVP/completion event (kind 31925)
+   */
+  public handleCompletionEvent(event: NostrEvent): void {
+    try {
+      const aTag = event.tags.find(tag => tag[0] === 'a')?.[1]
+      if (!aTag) {
+        console.warn('Completion event missing a tag:', event.id)
+        return
+      }
+
+      const taskStatusTag = event.tags.find(tag => tag[0] === 'task-status')?.[1] as TaskStatus | undefined
+
+      let taskStatus: TaskStatus
+      if (taskStatusTag) {
+        taskStatus = taskStatusTag
+      } else {
+        const completed = event.tags.find(tag => tag[0] === 'completed')?.[1] === 'true'
+        taskStatus = completed ? 'completed' : 'claimed'
+      }
+
+      const completedAtTag = event.tags.find(tag => tag[0] === 'completed_at')?.[1]
+      const completedAt = completedAtTag ? parseInt(completedAtTag) : undefined
+      const occurrence = event.tags.find(tag => tag[0] === 'occurrence')?.[1]
+
+      const completion: EventCompletion = {
+        id: event.id,
+        eventAddress: aTag,
+        occurrence,
+        pubkey: event.pubkey,
+        created_at: event.created_at,
+        taskStatus,
+        completedAt,
+        notes: event.content
+      }
+
+      const completionKey = occurrence ? `${aTag}:${occurrence}` : aTag
+      const existing = this._completions.get(completionKey)
+      if (!existing || event.created_at > existing.created_at) {
+        this._completions.set(completionKey, completion)
+      }
+    } catch (error) {
+      console.error('Failed to handle completion event:', error)
+    }
+  }
+
+  /**
+   * Handle deletion event for completion events (kind 5, k=31925)
+   */
+  public handleCompletionDeletion(event: NostrEvent): void {
+    try {
+      const eventIdsToDelete = event.tags
+        ?.filter((tag: string[]) => tag[0] === 'e')
+        .map((tag: string[]) => tag[1]) || []
+
+      if (eventIdsToDelete.length === 0) return
+
+      for (const [completionKey, completion] of this._completions.entries()) {
+        if (eventIdsToDelete.includes(completion.id) && completion.pubkey === event.pubkey) {
+          this._completions.delete(completionKey)
+        }
+      }
+    } catch (error) {
+      console.error('Failed to handle completion deletion:', error)
+    }
+  }
+
+  /**
+   * Handle deletion event for scheduled events (kind 5, k=31922)
+   */
+  public handleTaskDeletion(event: NostrEvent): void {
+    try {
+      const eventAddressesToDelete = event.tags
+        ?.filter((tag: string[]) => tag[0] === 'a')
+        .map((tag: string[]) => tag[1]) || []
+
+      if (eventAddressesToDelete.length === 0) return
+
+      for (const eventAddress of eventAddressesToDelete) {
+        const task = this._scheduledEvents.get(eventAddress)
+        if (task && task.pubkey === event.pubkey) {
+          this._scheduledEvents.delete(eventAddress)
+        }
+      }
+    } catch (error) {
+      console.error('Failed to handle task deletion:', error)
+    }
+  }
+
+  /**
+   * Get all scheduled events
+   */
+  getScheduledEvents(): ScheduledEvent[] {
+    return Array.from(this._scheduledEvents.values())
+  }
+
+  /**
+   * Get events scheduled for a specific date (YYYY-MM-DD)
+   */
+  getEventsForDate(date: string): ScheduledEvent[] {
+    return this.getScheduledEvents().filter(event => {
+      const eventDate = event.start.split('T')[0]
+      return eventDate === date
+    })
+  }
+
+  /**
+   * Check if a recurring event occurs on a specific date
+   */
+  private doesRecurringEventOccurOnDate(event: ScheduledEvent, targetDate: string): boolean {
+    if (!event.recurrence) return false
+
+    const target = new Date(targetDate)
+    const eventStart = new Date(event.start.split('T')[0])
+
+    if (target < eventStart) return false
+
+    if (event.recurrence.endDate) {
+      const endDate = new Date(event.recurrence.endDate)
+      if (target > endDate) return false
+    }
+
+    if (event.recurrence.frequency === 'daily') {
+      return true
+    } else if (event.recurrence.frequency === 'weekly') {
+      const targetDayOfWeek = target.toLocaleDateString('en-US', { weekday: 'long' }).toLowerCase()
+      const eventDayOfWeek = event.recurrence.dayOfWeek?.toLowerCase()
+      return targetDayOfWeek === eventDayOfWeek
+    }
+
+    return false
+  }
+
+  /**
+   * Get events for a specific date, optionally filtered by user participation
+   */
+  getEventsForSpecificDate(date?: string, userPubkey?: string): ScheduledEvent[] {
+    const targetDate = date || new Date().toISOString().split('T')[0]
+
+    const oneTimeEvents = this.getEventsForDate(targetDate).filter(event => !event.recurrence)
+
+    const allEvents = this.getScheduledEvents()
+    const recurringEventsOnDate = allEvents.filter(event =>
+      event.recurrence && this.doesRecurringEventOccurOnDate(event, targetDate)
+    )
+
+    let events = [...oneTimeEvents, ...recurringEventsOnDate]
+
+    if (userPubkey) {
+      events = events.filter(event => {
+        if (!event.participants || event.participants.length === 0) return true
+        return event.participants.some(p => p.pubkey === userPubkey)
+      })
+    }
+
+    events.sort((a, b) => a.start.localeCompare(b.start))
+
+    return events
+  }
+
+  /**
+   * Get events for today, optionally filtered by user participation
+   */
+  getTodaysEvents(userPubkey?: string): ScheduledEvent[] {
+    return this.getEventsForSpecificDate(undefined, userPubkey)
+  }
+
+  /**
+   * Get completion status for an event (optionally for a specific occurrence)
+   */
+  getCompletion(eventAddress: string, occurrence?: string): EventCompletion | undefined {
+    const completionKey = occurrence ? `${eventAddress}:${occurrence}` : eventAddress
+    return this._completions.get(completionKey)
+  }
+
+  /**
+   * Check if an event is completed (optionally for a specific occurrence)
+   */
+  isCompleted(eventAddress: string, occurrence?: string): boolean {
+    const completion = this.getCompletion(eventAddress, occurrence)
+    return completion?.taskStatus === 'completed'
+  }
+
+  /**
+   * Get task status for an event
+   */
+  getTaskStatus(eventAddress: string, occurrence?: string): TaskStatus | null {
+    const completion = this.getCompletion(eventAddress, occurrence)
+    return completion?.taskStatus || null
+  }
+
+  /**
+   * Claim a task (mark as claimed)
+   */
+  async claimTask(event: ScheduledEvent, notes: string = '', occurrence?: string): Promise<void> {
+    await this.updateTaskStatus(event, 'claimed', notes, occurrence)
+  }
+
+  /**
+   * Start a task (mark as in-progress)
+   */
+  async startTask(event: ScheduledEvent, notes: string = '', occurrence?: string): Promise<void> {
+    await this.updateTaskStatus(event, 'in-progress', notes, occurrence)
+  }
+
+  /**
+   * Mark an event as complete (optionally for a specific occurrence)
+   */
+  async completeEvent(event: ScheduledEvent, notes: string = '', occurrence?: string): Promise<void> {
+    await this.updateTaskStatus(event, 'completed', notes, occurrence)
+  }
+
+  /**
+   * Internal method to update task status
+   */
+  private async updateTaskStatus(
+    event: ScheduledEvent,
+    taskStatus: TaskStatus,
+    notes: string = '',
+    occurrence?: string
+  ): Promise<void> {
+    if (!this.authService?.isAuthenticated?.value) {
+      throw new Error('Must be authenticated to update task status')
+    }
+
+    if (!this.relayHub?.isConnected) {
+      throw new Error('Not connected to relays')
+    }
+
+    const userPrivkey = this.authService.user.value?.prvkey
+    if (!userPrivkey) {
+      throw new Error('User private key not available')
+    }
+
+    try {
+      this._isLoading.value = true
+
+      const eventAddress = `31922:${event.pubkey}:${event.dTag}`
+
+      const tags: string[][] = [
+        ['a', eventAddress],
+        ['task-status', taskStatus]
+      ]
+
+      if (taskStatus === 'completed') {
+        tags.push(['completed_at', Math.floor(Date.now() / 1000).toString()])
+      }
+
+      if (occurrence) {
+        tags.push(['occurrence', occurrence])
+      }
+
+      const eventTemplate: EventTemplate = {
+        kind: 31925,
+        content: notes,
+        tags,
+        created_at: Math.floor(Date.now() / 1000)
+      }
+
+      const privkeyBytes = this.hexToUint8Array(userPrivkey)
+      const signedEvent = finalizeEvent(eventTemplate, privkeyBytes)
+
+      await this.relayHub.publishEvent(signedEvent)
+
+      // Update local state
+      this.handleCompletionEvent(signedEvent)
+
+    } catch (error) {
+      console.error('Failed to update task status:', error)
+      throw error
+    } finally {
+      this._isLoading.value = false
+    }
+  }
+
+  /**
+   * Unclaim/reset a task
+   */
+  async unclaimTask(event: ScheduledEvent, occurrence?: string): Promise<void> {
+    if (!this.authService?.isAuthenticated?.value) {
+      throw new Error('Must be authenticated to unclaim tasks')
+    }
+
+    if (!this.relayHub?.isConnected) {
+      throw new Error('Not connected to relays')
+    }
+
+    const userPrivkey = this.authService.user.value?.prvkey
+    if (!userPrivkey) {
+      throw new Error('User private key not available')
+    }
+
+    try {
+      this._isLoading.value = true
+
+      const eventAddress = `31922:${event.pubkey}:${event.dTag}`
+      const completionKey = occurrence ? `${eventAddress}:${occurrence}` : eventAddress
+      const completion = this._completions.get(completionKey)
+
+      if (!completion) {
+        console.log('No completion to unclaim')
+        return
+      }
+
+      const deletionEvent: EventTemplate = {
+        kind: 5,
+        content: 'Task unclaimed',
+        tags: [
+          ['e', completion.id],
+          ['k', '31925']
+        ],
+        created_at: Math.floor(Date.now() / 1000)
+      }
+
+      const privkeyBytes = this.hexToUint8Array(userPrivkey)
+      const signedEvent = finalizeEvent(deletionEvent, privkeyBytes)
+
+      await this.relayHub.publishEvent(signedEvent)
+
+      // Remove from local state
+      this._completions.delete(completionKey)
+
+    } catch (error) {
+      console.error('Failed to unclaim task:', error)
+      throw error
+    } finally {
+      this._isLoading.value = false
+    }
+  }
+
+  /**
+   * Delete a scheduled event (kind 31922) - only author can delete
+   */
+  async deleteTask(event: ScheduledEvent): Promise<void> {
+    if (!this.authService?.isAuthenticated?.value) {
+      throw new Error('Must be authenticated to delete tasks')
+    }
+
+    if (!this.relayHub?.isConnected) {
+      throw new Error('Not connected to relays')
+    }
+
+    const userPrivkey = this.authService.user.value?.prvkey
+    const userPubkey = this.authService.user.value?.pubkey
+
+    if (!userPrivkey || !userPubkey) {
+      throw new Error('User credentials not available')
+    }
+
+    if (userPubkey !== event.pubkey) {
+      throw new Error('Only the task author can delete this task')
+    }
+
+    try {
+      this._isLoading.value = true
+
+      const eventAddress = `31922:${event.pubkey}:${event.dTag}`
+
+      const deletionEvent: EventTemplate = {
+        kind: 5,
+        content: 'Task deleted',
+        tags: [
+          ['a', eventAddress],
+          ['k', '31922']
+        ],
+        created_at: Math.floor(Date.now() / 1000)
+      }
+
+      const privkeyBytes = this.hexToUint8Array(userPrivkey)
+      const signedEvent = finalizeEvent(deletionEvent, privkeyBytes)
+
+      await this.relayHub.publishEvent(signedEvent)
+
+      // Remove from local state
+      this._scheduledEvents.delete(eventAddress)
+
+    } catch (error) {
+      console.error('Failed to delete task:', error)
+      throw error
+    } finally {
+      this._isLoading.value = false
+    }
+  }
+
+  /**
+   * Helper function to convert hex string to Uint8Array
+   */
+  private hexToUint8Array(hex: string): Uint8Array {
+    const bytes = new Uint8Array(hex.length / 2)
+    for (let i = 0; i < hex.length; i += 2) {
+      bytes[i / 2] = parseInt(hex.substr(i, 2), 16)
+    }
+    return bytes
+  }
+
+  get scheduledEvents(): Map<string, ScheduledEvent> {
+    return this._scheduledEvents
+  }
+
+  get completions(): Map<string, EventCompletion> {
+    return this._completions
+  }
+
+  get isLoading(): boolean {
+    return this._isLoading.value
+  }
+
+  protected async onDestroy(): Promise<void> {
+    this.unsubscribe()
+    this._scheduledEvents.clear()
+    this._completions.clear()
+  }
+}

src/modules/tasks/views/TasksPage.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="flex flex-col h-screen bg-background">
+    <!-- Header -->
+    <div class="sticky top-0 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
+      <div class="flex items-center justify-between px-4 py-2 sm:px-6">
+        <h1 class="text-lg font-semibold">Tasks</h1>
+      </div>
+    </div>
+
+    <!-- Task List -->
+    <div class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
+      <div class="w-full max-w-3xl mx-auto px-0 md:px-4 py-4">
+        <TaskList />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import TaskList from '../components/TaskList.vue'
+</script>

src/pages/Home.vue

@@ -1,257 +1,54 @@
 <template>
   <div class="flex flex-col h-screen bg-background">
     <PWAInstallPrompt auto-show />
-    <!-- TODO: Implement push notifications properly - currently commenting out admin notifications dialog -->
-    <!-- <NotificationPermission auto-show /> -->
 
-    <!-- Compact Header with Filters Toggle (Mobile) -->
-    <div class="sticky top-0 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
-      <div class="flex items-center justify-between px-4 py-2 sm:px-6">
+    <!-- Header -->
+    <div class="sticky top-0 z-30 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">
         <h1 class="text-lg font-semibold">Feed</h1>
-        <div class="flex items-center gap-2">
-          <!-- Active Filter Indicator -->
-          <div class="flex items-center gap-1 text-xs text-muted-foreground">
-            <span v-if="activeFilterCount > 0">{{ activeFilterCount }} filters</span>
-            <span v-else>All content</span>
-          </div>
-          <!-- Filter Toggle Button -->
-          <Button
-            variant="ghost"
-            size="sm"
-            @click="showFilters = !showFilters"
-            class="h-8 w-8 p-0"
-          >
-            <Filter class="h-4 w-4" />
-          </Button>
       </div>
     </div>
 
-      <!-- Collapsible Filter Panel -->
-      <div v-if="showFilters" class="border-t bg-background/95 backdrop-blur">
-        <div class="px-4 py-3 sm:px-6">
-          <FeedFilters v-model="selectedFilters" :admin-pubkeys="adminPubkeys" />
-        </div>
-      </div>
-    </div>
-
-    <!-- Main Feed Area - Takes remaining height with scrolling -->
+    <!-- Main Feed Area -->
     <div class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
-      <!-- Quick Action Component Area -->
-      <div v-if="activeAction || replyTo" class="border-b bg-background sticky top-0 z-10">
-        <div class="max-h-[70vh] overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
-          <div class="px-4 py-3 sm:px-6">
-            <!-- Dynamic Quick Action Component -->
-            <component
-              :is="activeAction?.component"
-              v-if="activeAction"
-              :reply-to="replyTo"
-              @note-published="onActionComplete"
-              @rideshare-published="onActionComplete"
-              @action-complete="onActionComplete"
-              @clear-reply="onClearReply"
-              @close="closeQuickAction"
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- Feed Content - Natural flow with padding for sticky elements -->
-      <div>
-        <NostrFeed
-          :feed-type="feedType"
-          :content-filters="selectedFilters"
-          :admin-pubkeys="adminPubkeys"
-          :key="feedKey"
-          :compact-mode="true"
-          @reply-to-note="onReplyToNote"
+      <div class="max-w-4xl mx-auto px-4 sm:px-6">
+        <SubmissionList
+          :show-ranks="false"
+          :show-time-range="true"
+          initial-sort="hot"
+          @submission-click="onSubmissionClick"
         />
       </div>
     </div>
 
-    <!-- Floating Quick Action Button -->
-    <div v-if="!activeAction && !replyTo && quickActions.length > 0" class="fixed bottom-6 right-6 z-50">
-      <div class="flex flex-col items-end gap-3">
-        <!-- Quick Action Buttons (when expanded) -->
-        <div v-if="showQuickActions" class="flex flex-col gap-2">
+    <!-- Floating Action Button for Create Post -->
+    <div class="fixed bottom-6 right-6 z-50">
       <Button
-            v-for="action in quickActions"
-            :key="action.id"
-            @click="openQuickAction(action)"
-            size="lg"
-            class="h-12 px-4 rounded-full shadow-lg hover:shadow-xl transition-all gap-2 bg-card border-2 border-border hover:bg-accent text-card-foreground"
-          >
-            <component :is="getIconComponent(action.icon)" class="h-4 w-4" />
-            <span class="text-sm font-medium">{{ action.label }}</span>
-          </Button>
-        </div>
-
-        <!-- Main FAB -->
-        <Button
-          @click="toggleQuickActions"
+        @click="navigateToSubmit"
         size="lg"
         class="h-14 w-14 rounded-full shadow-lg hover:shadow-xl transition-all bg-primary hover:bg-primary/90 border-2 border-primary-foreground/20 flex items-center justify-center p-0"
       >
-          <Plus
-            class="h-6 w-6 stroke-[2.5] transition-transform duration-200"
-            :class="{ 'rotate-45': showQuickActions }"
-          />
+        <Plus class="h-6 w-6 stroke-[2.5]" />
       </Button>
     </div>
   </div>
-
-    <!-- Quick Filters Bar (Mobile) -->
-    <div class="md:hidden sticky bottom-0 z-30 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-t">
-      <div class="flex overflow-x-auto px-4 py-2 gap-2 scrollbar-hide">
-        <Button
-          v-for="(preset, key) in quickFilterPresets"
-          :key="key"
-          :variant="isPresetActive(key) ? 'default' : 'outline'"
-          size="sm"
-          @click="setQuickFilter(key)"
-          class="whitespace-nowrap"
-        >
-          {{ preset.label }}
-        </Button>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script setup lang="ts">
-// NostrFeed is now registered globally by the nostr-feed module
-// No need to import it directly - use the modular version
-// TODO: Re-enable when push notifications are properly implemented
-// import NotificationPermission from '@/components/notifications/NotificationPermission.vue'
-import { ref, computed, watch } from 'vue'
-
+import { useRouter } from 'vue-router'
 import { Button } from '@/components/ui/button'
-import { Filter, Plus } from 'lucide-vue-next'
-import * as LucideIcons from 'lucide-vue-next'
+import { Plus } from 'lucide-vue-next'
 import PWAInstallPrompt from '@/components/pwa/PWAInstallPrompt.vue'
-import FeedFilters from '@/modules/nostr-feed/components/FeedFilters.vue'
-import NostrFeed from '@/modules/nostr-feed/components/NostrFeed.vue'
-import { FILTER_PRESETS } from '@/modules/nostr-feed/config/content-filters'
-import { useQuickActions } from '@/composables/useQuickActions'
-import appConfig from '@/app.config'
-import type { ContentFilter } from '@/modules/nostr-feed/services/FeedService'
-import type { QuickAction } from '@/core/types'
+import SubmissionList from '@/modules/links/components/SubmissionList.vue'
+import type { SubmissionWithMeta } from '@/modules/links/types/submission'
 
-// Get quick actions from modules
-const { quickActions } = useQuickActions()
+const router = useRouter()
 
-// Get admin pubkeys from app config
-const adminPubkeys = appConfig.modules['nostr-feed']?.config?.adminPubkeys || []
-
-// UI state
-const showFilters = ref(false)
-const showQuickActions = ref(false)
-const activeAction = ref<QuickAction | null>(null)
-
-// Feed configuration
-const selectedFilters = ref<ContentFilter[]>(FILTER_PRESETS.all)
-const feedKey = ref(0) // Force feed component to re-render when filters change
-
-// Reply state (for note composer compatibility)
-const replyTo = ref<any | undefined>()
-
-// Quick filter presets for mobile bottom bar
-const quickFilterPresets = {
-  all: { label: 'All', filters: FILTER_PRESETS.all },
-  announcements: { label: 'Announcements', filters: FILTER_PRESETS.announcements },
-  rideshare: { label: 'Rideshare', filters: FILTER_PRESETS.rideshare }
+function onSubmissionClick(submission: SubmissionWithMeta) {
+  router.push({ name: 'submission-detail', params: { id: submission.id } })
 }
 
-// Computed properties
-const activeFilterCount = computed(() => selectedFilters.value.length)
-
-const isPresetActive = (presetKey: string) => {
-  const preset = quickFilterPresets[presetKey as keyof typeof quickFilterPresets]
-  if (!preset) return false
-
-  return preset.filters.length === selectedFilters.value.length &&
-    preset.filters.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))
-}
-
-// Determine feed type based on selected filters
-const feedType = computed(() => {
-  if (selectedFilters.value.length === 0) return 'all'
-
-  // Check if it matches the 'all' preset
-  if (selectedFilters.value.length === FILTER_PRESETS.all.length &&
-      FILTER_PRESETS.all.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))) {
-    return 'all'
-  }
-
-  // Check if it matches the announcements preset
-  if (selectedFilters.value.length === FILTER_PRESETS.announcements.length &&
-      FILTER_PRESETS.announcements.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))) {
-    return 'announcements'
-  }
-
-  // Check if it matches the rideshare preset
-  if (selectedFilters.value.length === FILTER_PRESETS.rideshare.length &&
-      FILTER_PRESETS.rideshare.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))) {
-    return 'rideshare'
-  }
-
-  // For all other cases, use custom
-  return 'custom'
-})
-
-// Force feed to reload when filters change
-watch(selectedFilters, () => {
-  feedKey.value++
-}, { deep: true })
-
-// Handle note composer events
-// Methods
-const setQuickFilter = (presetKey: string) => {
-  const preset = quickFilterPresets[presetKey as keyof typeof quickFilterPresets]
-  if (preset) {
-    selectedFilters.value = preset.filters
-  }
-}
-
-// Quick action methods
-const toggleQuickActions = () => {
-  showQuickActions.value = !showQuickActions.value
-}
-
-const openQuickAction = (action: QuickAction) => {
-  activeAction.value = action
-  showQuickActions.value = false
-}
-
-const closeQuickAction = () => {
-  activeAction.value = null
-  replyTo.value = undefined
-}
-
-// Event handlers for quick action components
-const onActionComplete = (eventData?: any) => {
-  console.log('Quick action completed:', activeAction.value?.id, eventData)
-  // Refresh the feed to show new content
-  feedKey.value++
-  // Close the action
-  activeAction.value = null
-  replyTo.value = undefined
-}
-
-const onClearReply = () => {
-  replyTo.value = undefined
-}
-
-const onReplyToNote = (note: any) => {
-  replyTo.value = note
-  // Find and open the note composer action
-  const noteAction = quickActions.value.find(a => a.id === 'note')
-  if (noteAction) {
-    activeAction.value = noteAction
-  }
-}
-
-// Helper to get Lucide icon component
-const getIconComponent = (iconName: string) => {
-  return (LucideIcons as any)[iconName] || Plus
+function navigateToSubmit() {
+  router.push({ name: 'submit-post' })
 }
 </script>