Adding listen-view with mock-storage

src/components/AppNavBar.vue

@@ -39,6 +39,7 @@ function onLanguageChange(code: string) {
 
 const tabs = [
   { label: 'Speak', icon: '🎤', route: '/speak' },
+  { label: 'Listen', icon: '🎧', route: '/listen' },
 ]
 
 function navigate(path: string) {

src/router/index.ts

@@ -6,7 +6,7 @@ const router = createRouter({
   routes: [
     { path: '/', redirect: '/speak' },
     { path: '/speak', name: 'speak', component: SpeakView },
-    { path: '/listen', name: 'listen', component: () => import('@/views/PlaceholderView.vue') },
+    { path: '/listen', name: 'listen', component: () => import('@/views/ListenView.vue') },
     { path: '/write', name: 'write', component: () => import('@/views/PlaceholderView.vue') },
     { path: '/review', name: 'review', component: () => import('@/views/PlaceholderView.vue') },
   ],

src/stores/listen.ts

@@ -0,0 +1,101 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import api from '@/lib/api'
+import { useMockStorageStore } from '@/stores/mockStorage'
+import { useUserStore } from '@/stores/user'
+
+export type ListenSlotStatus = 'loading' | 'ready' | 'voted' | 'skipped' | 'error'
+
+export interface ListenSlot {
+  audioId: string
+  userId: string
+  sentence: string | null
+  audioUrl: string | null
+  status: ListenSlotStatus
+  vote: 'yes' | 'no' | null
+  error: string | null
+}
+
+export const useListenStore = defineStore('listen', () => {
+  const slots = ref<ListenSlot[]>([])
+  const activeIndex = ref(0)
+  const loading = ref(false)
+
+  const activeSlot = computed(() => slots.value[activeIndex.value] ?? null)
+  const allDone = computed(() =>
+    slots.value.length > 0 &&
+    slots.value.every((s) => s.vote !== null || s.status === 'skipped'),
+  )
+
+  async function loadBatch() {
+    const mockStore = useMockStorageStore()
+    const currentUserId = useUserStore().userId
+    const entries = mockStore.recordings.filter((e) => e.userId !== currentUserId).slice(0, 5)
+    if (entries.length === 0) {
+      slots.value = []
+      return
+    }
+
+    loading.value = true
+    slots.value = entries.map((e) => ({
+      audioId: e.audioId,
+      userId: e.userId,
+      sentence: null,
+      audioUrl: null,
+      status: 'loading' as ListenSlotStatus,
+      vote: null,
+      error: null,
+    }))
+    activeIndex.value = 0
+
+    await Promise.all(
+      entries.map(async (entry, i) => {
+        try {
+          const { data } = await api.get(`/audio/${entry.audioId}`)
+          console.log(`Loaded audio ${entry.audioId}:`, data)
+          slots.value[i] = {
+            ...slots.value[i],
+            sentence: data.metadata?.sentence ?? null,
+            audioUrl: data.url ?? null,
+            status: 'ready',
+          }
+        } catch {
+          slots.value[i] = { ...slots.value[i], status: 'error', error: 'Failed to load' }
+        }
+      }),
+    )
+    loading.value = false
+  }
+
+  function setActiveIndex(index: number) {
+    activeIndex.value = index
+  }
+
+  function vote(index: number, choice: 'yes' | 'no') {
+    if (!slots.value[index]) return
+    slots.value[index] = { ...slots.value[index], vote: choice, status: 'voted' }
+    const voterId = useUserStore().userId ?? ''
+    useMockStorageStore().recordVote(slots.value[index].audioId, voterId, choice)
+    const next = slots.value.findIndex(
+      (s, i) => i > index && s.vote === null && s.status !== 'skipped',
+    )
+    if (next !== -1) activeIndex.value = next
+  }
+
+  function skip(index: number) {
+    if (!slots.value[index]) return
+    slots.value[index] = { ...slots.value[index], status: 'skipped' }
+    const next = slots.value.findIndex(
+      (s, i) => i > index && s.vote === null && s.status !== 'skipped',
+    )
+    if (next !== -1) activeIndex.value = next
+  }
+
+  function reset() {
+    slots.value = []
+    activeIndex.value = 0
+    loading.value = false
+  }
+
+  return { slots, activeIndex, activeSlot, allDone, loading, loadBatch, setActiveIndex, vote, skip, reset }
+})

src/stores/mockStorage.ts

@@ -0,0 +1,32 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export interface MockVote {
+  voterId: string
+  vote: 'yes' | 'no'
+}
+
+export interface MockRecordingEntry {
+  audioId: string
+  userId: string
+  votes: MockVote[]
+}
+
+export const useMockStorageStore = defineStore('mockStorage', () => {
+  const recordings = ref<MockRecordingEntry[]>([])
+
+  function addRecording(audioId: string, userId: string) {
+    if (!import.meta.env.DEV) return
+    recordings.value.push({ audioId, userId, votes: [] })
+    console.log(`Added recording: audioId=${audioId}, userId=${userId}`)
+  }
+
+  function recordVote(audioId: string, voterId: string, vote: 'yes' | 'no') {
+    if (!import.meta.env.DEV) return
+    const entry = recordings.value.find((e) => e.audioId === audioId)
+    if (entry) entry.votes.push({ voterId, vote })
+      console.log(`Recorded vote: audioId=${audioId}, voterId=${voterId}, vote=${vote}`)
+  }
+
+  return { recordings, addRecording, recordVote }
+})

src/stores/recording.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import api from '@/lib/api'
 import type { SentenceSlot } from '@/stores/sentence'
+import { useMockStorageStore } from '@/stores/mockStorage'
 
 export type RecordingStatus = 'idle' | 'recording' | 'recorded' | 'uploading' | 'uploaded' | 'error'
 
@@ -124,15 +125,16 @@ export const useRecordingStore = defineStore('recording', () => {
       form.append('text', sentence.text)
       form.append('hash', sentence.hash)
       form.append('userId', opts.userId)
-      console.log(opts.userId)
       if (opts.age) form.append('age', opts.age)
       if (opts.gender) form.append('gender', opts.gender)
       if (opts.variantCode) form.append('variantCode', opts.variantCode)
       if (opts.accentCode) form.append('accentCode', opts.accentCode)
 
       try {
         const { data } = await api.post('/audio', form)
+        console.log(`Uploaded slot ${i}:`, data)
         slots.value[i] = { ...slots.value[i], status: 'uploaded', uploadId: data.id }
+        useMockStorageStore().addRecording(data.id, opts.userId)
       } catch (err: unknown) {
         const msg = err instanceof Error ? err.message : 'Upload failed'
         slots.value[i] = { ...slots.value[i], status: 'error', error: msg }