Enhance comment seeding and search functionality

- Updated the `seedComments` function to return an array of published comment event IDs for tracking.
- Introduced `seedCommentReactions` to seed upvotes and downvotes on comments, improving interaction visibility.
- Enhanced the `App.vue` and `MobileNav.vue` components to support a mobile search overlay, allowing users to search films seamlessly.
- Added a new `MobileSearch` component for better search experience on mobile devices.
- Implemented a search feature in `AppHeader.vue` with dropdown results for improved content discovery.

Co-authored-by: Cursor <cursoragent@cursor.com>

scripts/seed-activity.ts

@@ -344,9 +344,35 @@ function pickComment(itemId: string, sentiment: 'positive' | 'mixed' | 'negative
 }
 
 // ── seed comments (kind 1111) ───────────────────────────────────
-async function seedComments(relay: Relay) {
+// Returns array of published comment event IDs for use by seedCommentReactions
+async function seedComments(relay: Relay): Promise<string[]> {
   console.log('\n💬 Seeding comments (kind 1111)...')
   let count = 0
+  const commentEventIds: string[] = []
+
+  /**
+   * Helper that publishes a comment and tracks the event ID if successful.
+   */
+  async function publishComment(
+    relay: Relay,
+    signer: PrivateKeySigner,
+    event: { kind: number; content: string; tags: string[][]; created_at: number },
+    label: string,
+  ): Promise<boolean> {
+    const signed = await signer.signEvent(event)
+    try {
+      const res = await relay.publish(signed, { timeout: 5000 })
+      if (!res.ok) {
+        console.warn(`  ⚠ ${label}: ${res.message}`)
+      } else {
+        commentEventIds.push(signed.id)
+      }
+      return true
+    } catch (err) {
+      console.error(`  ✗ ${label}:`, err instanceof Error ? err.message : err)
+      return false
+    }
+  }
 
   // Top content: several comments
   for (const item of topContent) {
@@ -359,7 +385,7 @@ async function seedComments(relay: Relay) {
       const content = pickComment(item.id, sentiment)
       const age = randomInt(1 * ONE_DAY, 30 * ONE_DAY)
 
-      const ok = await publishEvent(relay, signer, {
+      const ok = await publishComment(relay, signer, {
         kind: 1111,
         content,
         tags: [
@@ -386,7 +412,7 @@ async function seedComments(relay: Relay) {
       const content = pickComment(item.id, sentiment)
       const age = randomInt(3 * ONE_DAY, 45 * ONE_DAY)
 
-      const ok = await publishEvent(relay, signer, {
+      const ok = await publishComment(relay, signer, {
         kind: 1111,
         content,
         tags: [
@@ -411,7 +437,7 @@ async function seedComments(relay: Relay) {
       const content = pickComment(item.id, 'positive')
       const age = randomInt(0, 10 * ONE_DAY)
 
-      const ok = await publishEvent(relay, signer, {
+      const ok = await publishComment(relay, signer, {
         kind: 1111,
         content,
         tags: [
@@ -436,7 +462,7 @@ async function seedComments(relay: Relay) {
       const content = pickComment(item.id, 'positive')
       const age = randomInt(0, 3 * ONE_DAY)
 
-      const ok = await publishEvent(relay, signer, {
+      const ok = await publishComment(relay, signer, {
         kind: 1111,
         content,
         tags: [
@@ -472,7 +498,7 @@ async function seedComments(relay: Relay) {
       const content = pickComment(item.id, sentiment)
       const age = randomInt(2 * ONE_DAY, 40 * ONE_DAY)
 
-      const ok = await publishEvent(relay, signer, {
+      const ok = await publishComment(relay, signer, {
         kind: 1111,
         content,
         tags: [
@@ -488,6 +514,36 @@ async function seedComments(relay: Relay) {
   }
 
   console.log(`  ✓ ${count} comments seeded`)
+  return commentEventIds
+}
+
+// ── seed comment reactions (kind 7) ─────────────────────────────
+// Seeds upvotes/downvotes on comment events so vote sorting is visible
+async function seedCommentReactions(relay: Relay, commentEventIds: string[]) {
+  console.log('\n👍 Seeding comment reactions (kind 7)...')
+  let count = 0
+
+  for (const eventId of commentEventIds) {
+    const numVotes = randomInt(2, 8)
+    const voters = pick(allPersonas, numVotes)
+
+    for (const persona of voters) {
+      const signer = PrivateKeySigner.fromKey(persona.nsec)
+      // ~80% upvote, ~20% downvote for realistic distribution
+      const emoji = Math.random() < 0.8 ? '+' : '-'
+      const age = randomInt(0, 14 * ONE_DAY)
+
+      const ok = await publishEvent(relay, signer, {
+        kind: 7,
+        content: emoji,
+        tags: [['e', eventId], ['k', '1111']],
+        created_at: now - age,
+      }, `comment-reaction ${persona.name}->${eventId.slice(0, 8)}`)
+      if (ok) count++
+    }
+  }
+
+  console.log(`  ✓ ${count} comment reactions seeded`)
 }
 
 // ── main ────────────────────────────────────────────────────────
@@ -497,7 +553,8 @@ async function main() {
   const relay = new Relay(RELAY_URL)
 
   await seedReactions(relay)
-  await seedComments(relay)
+  const commentEventIds = await seedComments(relay)
+  await seedCommentReactions(relay, commentEventIds)
 
   console.log('\n✅ Done! Activity seeded successfully.')
   setTimeout(() => process.exit(0), 1000)