\n 🎙️ Voice Messages\n

\n Record, transcribe, and share voice notes with expiration controls\n

\n\n {/* Navigation */}\n {!voiceNoteId && (\n

\n setCurrentView(\"recorder\")}\n className={`px-6 py-2 rounded-md font-medium transition-colors ${\n currentView === \"recorder\"\n ? \"bg-blue-600 text-white\"\n : \"bg-white text-gray-700 hover:bg-gray-50\"\n }`}\n >\n 🎙️ Record\n \n setCurrentView(\"dashboard\")}\n className={`px-6 py-2 rounded-md font-medium transition-colors ${\n currentView === \"dashboard\"\n ? \"bg-blue-600 text-white\"\n : \"bg-white text-gray-700 hover:bg-gray-50\"\n }`}\n >\n 📋 My Messages\n \n

\n )}\n\n

\n {currentView === \"recorder\" && !voiceNoteId && (\n setCurrentView(\"dashboard\")} />\n )}\n\n {currentView === \"dashboard\" && !voiceNoteId && }\n\n {currentView === \"player\" && voiceNoteId && }\n

\n );\n}",[],[232,238,244],{"_105":251,"_95":252,"_158":253,"_160":239,"_161":142,"_162":102,"_163":164,"_107":254,"_101":32,"_166":184,"_168":255,"_169":22,"_170":-5,"_171":256,"_99":257},"4e8113c4-40e9-11f0-8d0a-76b3cceeab13","Dashboard.tsx","b3138d7a-7b07-46b9-9efb-0c520824637b",["D",1749003123700],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { VoiceNote } from \"../../shared/types.ts\";\n\nexport default function Dashboard() {\n const [voiceNotes, setVoiceNotes] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n fetchVoiceNotes();\n }, []);\n\n const fetchVoiceNotes = async () => {\n try {\n setLoading(true);\n const response = await fetch(\"/api/voicenotes\");\n const data = await response.json();\n\n if (data.success) {\n setVoiceNotes(data.voiceNotes || []);\n } else {\n setError(data.error || \"Failed to fetch voice messages\");\n }\n } catch (err) {\n setError(\"Failed to load voice messages\");\n console.error(\"Error fetching voice messages:\", err);\n } finally {\n setLoading(false);\n }\n };\n\n const formatDuration = (seconds: number) => {\n const mins = Math.floor(seconds / 60);\n const secs = seconds % 60;\n return `${mins}:${secs.toString().padStart(2, \"0\")}`;\n };\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleDateString(\"en-US\", {\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n };\n\n const getStatusInfo = (voiceNote: VoiceNote) => {\n if (voiceNote.isExpired) {\n return {\n text: \"Expired\",\n color: \"text-red-600 bg-red-50\",\n icon: \"⚠️\",\n };\n }\n\n if (voiceNote.expiresAt) {\n const expiresDate = new Date(voiceNote.expiresAt);\n const now = new Date();\n const timeLeft = expiresDate.getTime() - now.getTime();\n const daysLeft = Math.ceil(timeLeft / (1000 * 60 * 60 * 24));\n\n if (daysLeft <= 1) {\n return {\n text: `Expires soon (${daysLeft} day${daysLeft !== 1 ? \"s\" : \"\"})`,\n color: \"text-orange-600 bg-orange-50\",\n icon: \"⏰\",\n };\n }\n\n return {\n text: `Expires in ${daysLeft} days`,\n color: \"text-blue-600 bg-blue-50\",\n icon: \"⏰\",\n };\n }\n\n if (voiceNote.maxListens) {\n const listensLeft = voiceNote.maxListens - voiceNote.currentListens;\n\n if (listensLeft <= 1) {\n return {\n text: `${listensLeft} listen${listensLeft !== 1 ? \"s\" : \"\"} left`,\n color: \"text-orange-600 bg-orange-50\",\n icon: \"👂\",\n };\n }\n\n return {\n text: `${listensLeft}/${voiceNote.maxListens} listens left`,\n color: \"text-blue-600 bg-blue-50\",\n icon: \"👂\",\n };\n }\n\n return {\n text: \"Active\",\n color: \"text-green-600 bg-green-50\",\n icon: \"✅\",\n };\n };\n\n const copyShareUrl = async (voiceNoteId: string) => {\n const shareUrl = `${window.location.origin}/note/${voiceNoteId}`;\n try {\n await navigator.clipboard.writeText(shareUrl);\n alert(\"Share link copied to clipboard!\");\n } catch (error) {\n console.error(\"Failed to copy:\", error);\n // Fallback: show the URL in a prompt\n prompt(\"Copy this link:\", shareUrl);\n }\n };\n\n const deleteVoiceNote = async (voiceNoteId: string) => {\n if (!confirm(\"Are you sure you want to delete this voice messages? This action cannot be undone.\")) {\n return;\n }\n\n try {\n const response = await fetch(`/api/voicenotes/${voiceNoteId}`, {\n method: \"DELETE\",\n });\n\n const data = await response.json();\n\n if (data.success) {\n setVoiceNotes(prev => prev.filter(note => note.id !== voiceNoteId));\n } else {\n alert(\"Failed to delete voice message: \" + data.error);\n }\n } catch (error) {\n console.error(\"Error deleting voice message:\", error);\n alert(\"Failed to delete voice message\");\n }\n };\n\n if (loading) {\n return (\n

⏳

\n Loading Your Voice Messages...\n

\n );\n }\n\n if (error) {\n return (\n

❌

\n Error\n

{error}

\n \n Try Again\n \n

\n );\n }\n\n return (\n

\n 📋 Your Voice Messages\n

\n \n Refresh\n \n

\n\n {voiceNotes.length === 0\n ? (\n

🎙️

\n No Voice Messages Yet\n

\n Create your first voice message to see it here!\n

\n )\n : (\n

\n {voiceNotes.map((voiceNote) => {\n const statusInfo = getStatusInfo(voiceNote);\n\n return (\n \n

\n {voiceNote.title || \"Untitled Voice Message\"}\n

\n Created {formatDate(voiceNote.createdAt)} • {formatDuration(voiceNote.duration)}\n

\n\n \n {statusInfo.icon} {statusInfo.text}\n \n

\n\n {voiceNote.transcription && (\n

\n {voiceNote.transcription}\n

\n )}\n\n

\n 👂 {voiceNote.currentListens} listen{voiceNote.currentListens !== 1 ? \"s\" : \"\"}\n {voiceNote.maxListens && 📊 {voiceNote.maxListens} max}\n {voiceNote.expiresAt && ⏰ Expires {formatDate(voiceNote.expiresAt)}}\n

\n\n

\n window.open(`/note/${voiceNote.id}`, \"_blank\")}\n className=\"px-3 py-1 bg-blue-100 text-blue-700 rounded hover:bg-blue-200\"\n >\n View\n \n copyShareUrl(voiceNote.id)}\n className=\"px-3 py-1 bg-green-100 text-green-700 rounded hover:bg-green-200\"\n >\n Share\n \n deleteVoiceNote(voiceNote.id)}\n className=\"px-3 py-1 bg-red-100 text-red-700 rounded hover:bg-red-200\"\n >\n Delete\n \n

\n );\n })}\n

\n )}\n \n );\n}",[],[232,238,252],{"_105":259,"_95":260,"_158":261,"_160":239,"_161":142,"_162":102,"_163":164,"_107":262,"_101":32,"_166":184,"_168":263,"_169":22,"_170":-5,"_171":264,"_99":265},"4e811cde-40e9-11f0-8d0a-76b3cceeab13","ShareModal.tsx","f075944b-bdc0-4aa0-ae5e-7bcbab7ac643",["D",1749003123700],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { ShareSettings } from \"../../shared/types.ts\";\n\ninterface ShareModalProps {\n onSave: (settings: ShareSettings) => void;\n onCancel: () => void;\n isUploading: boolean;\n}\n\nexport default function ShareModal({ onSave, onCancel, isUploading }: ShareModalProps) {\n const [expirationType, setExpirationType] = useState<'none' | 'date' | 'listens'>('none');\n const [expirationDate, setExpirationDate] = useState('');\n const [maxListens, setMaxListens] = useState(1);\n\n const handleSave = () => {\n const settings: ShareSettings = {};\n \n if (expirationType === 'date' && expirationDate) {\n settings.expiresAt = new Date(expirationDate).toISOString();\n } else if (expirationType === 'listens') {\n settings.maxListens = maxListens;\n }\n \n onSave(settings);\n };\n\n const getTomorrowDate = () => {\n const tomorrow = new Date();\n tomorrow.setDate(tomorrow.getDate() + 1);\n return tomorrow.toISOString().split('T')[0];\n };\n\n return (\n

\n Share Settings\n

\n \n

\n \n Expiration Settings\n \n \n

\n \n setExpirationType(e.target.value as 'none')}\n className=\"mr-2\"\n />\n No expiration\n \n \n \n setExpirationType(e.target.value as 'date')}\n className=\"mr-2\"\n />\n Expire on date\n \n \n {expirationType === 'date' && (\n

\n setExpirationDate(e.target.value)}\n min={getTomorrowDate()}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n )}\n \n \n setExpirationType(e.target.value as 'listens')}\n className=\"mr-2\"\n />\n Expire after listens\n \n \n {expirationType === 'listens' && (\n

\n setMaxListens(parseInt(e.target.value) || 1)}\n min=\"1\"\n max=\"100\"\n className=\"w-20 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n \n listen{maxListens !== 1 ? 's' : ''}\n \n

\n )}\n

\n \n

\n \n Cancel\n \n \n {isUploading ? 'Saving...' : 'Save & Share'}\n \n

\n );\n}",[],[232,238,260],{"_105":267,"_95":268,"_158":269,"_160":239,"_161":142,"_162":102,"_163":164,"_107":270,"_101":32,"_166":184,"_168":271,"_169":22,"_170":-5,"_171":272,"_99":273},"4e812558-40e9-11f0-8d0a-76b3cceeab13","VoicePlayer.tsx","2a5ff72f-c05d-4fa0-972d-19b78646ed65",["D",1749003123700],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { VoiceNote } from \"../../shared/types.ts\";\n\ninterface VoicePlayerProps {\n voiceNoteId: string;\n}\n\nexport default function VoicePlayer({ voiceNoteId }: VoicePlayerProps) {\n const [voiceNote, setVoiceNote] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [audioUrl, setAudioUrl] = useState(null);\n\n useEffect(() => {\n fetchVoiceNote();\n }, [voiceNoteId]);\n\n const fetchVoiceNote = async () => {\n try {\n setLoading(true);\n const response = await fetch(`/api/voicenotes/${voiceNoteId}`);\n const data = await response.json();\n\n if (data.success) {\n setVoiceNote(data.voiceNote);\n // Get audio URL\n setAudioUrl(`/api/voicenotes/${voiceNoteId}/audio`);\n } else {\n setError(data.error || \"Voice message not found\");\n }\n } catch (err) {\n setError(\"Failed to load voice message\");\n console.error(\"Error fetching voice message:\", err);\n } finally {\n setLoading(false);\n }\n };\n\n const formatDuration = (seconds: number) => {\n const mins = Math.floor(seconds / 60);\n const secs = seconds % 60;\n return `${mins}:${secs.toString().padStart(2, \"0\")}`;\n };\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleDateString(\"en-US\", {\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n };\n\n const getExpirationInfo = () => {\n if (!voiceNote) return null;\n\n if (voiceNote.isExpired) {\n return {\n text: \"This voice message has expired\",\n color: \"text-red-600\",\n icon: \"⚠️\",\n };\n }\n\n if (voiceNote.expiresAt) {\n const expiresDate = new Date(voiceNote.expiresAt);\n const now = new Date();\n const timeLeft = expiresDate.getTime() - now.getTime();\n const daysLeft = Math.ceil(timeLeft / (1000 * 60 * 60 * 24));\n\n return {\n text: `Expires on ${formatDate(voiceNote.expiresAt)} (${daysLeft} day${daysLeft !== 1 ? \"s\" : \"\"} left)`,\n color: daysLeft <= 1 ? \"text-orange-600\" : \"text-gray-600\",\n icon: \"⏰\",\n };\n }\n\n if (voiceNote.maxListens) {\n const listensLeft = voiceNote.maxListens - voiceNote.currentListens;\n return {\n text: `${listensLeft} listen${\n listensLeft !== 1 ? \"s\" : \"\"\n } remaining (${voiceNote.currentListens}/${voiceNote.maxListens} used)`,\n color: listensLeft <= 1 ? \"text-orange-600\" : \"text-gray-600\",\n icon: \"👂\",\n };\n }\n\n return null;\n };\n\n const copyToClipboard = async (text: string) => {\n try {\n await navigator.clipboard.writeText(text);\n alert(\"Transcription copied to clipboard!\");\n } catch (error) {\n console.error(\"Failed to copy:\", error);\n }\n };\n\n if (loading) {\n return (\n

⏳

\n Loading Voice Note...\n

\n );\n }\n\n if (error) {\n return (\n

❌

\n Error\n

{error}

\n window.location.href = \"/\"}\n className=\"px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700\"\n >\n Go Home\n \n

\n );\n }\n\n if (!voiceNote) {\n return null;\n }\n\n const expirationInfo = getExpirationInfo();\n\n return (\n

🎵

\n {voiceNote.title || \"Voice Message\"}\n

\n Created {formatDate(voiceNote.createdAt)}\n

\n Duration: {formatDuration(voiceNote.duration)}\n

\n\n {expirationInfo && (\n

\n {expirationInfo.icon} {expirationInfo.text}\n

\n )}\n\n {!voiceNote.isExpired && audioUrl && (\n

\n \n

\n )}\n\n {voiceNote.isExpired && (\n

\n This voice message has expired and can no longer be played.\n

\n )}\n\n {voiceNote.transcription && (\n

Transcription

\n copyToClipboard(voiceNote.transcription!)}\n className=\"text-sm text-blue-600 hover:text-blue-800 underline\"\n >\n Copy\n \n

\n {voiceNote.transcription}\n

\n )}\n\n {!voiceNote.transcription && !voiceNote.isExpired && (\n

\n 🤖 Transcription in progress... Refresh the page in a moment to see the text.\n

\n )}\n\n

\n window.location.href = \"/\"}\n className=\"px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700\"\n >\n Create Your Own Voice Message\n \n

\n );\n}",[],[232,238,268],{"_105":275,"_95":276,"_158":277,"_160":239,"_161":142,"_162":102,"_163":164,"_107":278,"_101":32,"_166":184,"_168":279,"_169":22,"_170":-5,"_171":280,"_99":281},"4e812eb8-40e9-11f0-8d0a-76b3cceeab13","VoiceRecorder.tsx","4061ce6d-99fe-4594-8cc9-3cb08ba97162",["D",1749003123700],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { ShareSettings, VoiceNote } from \"../../shared/types.ts\";\nimport ShareModal from \"./ShareModal.tsx\";\n\ninterface RecordingState {\n isRecording: boolean;\n isPaused: boolean;\n duration: number;\n audioBlob: Blob | null;\n audioUrl: string | null;\n}\n\ninterface VoiceRecorderProps {\n onVoiceNoteCreated?: () => void;\n}\n\nexport default function VoiceRecorder({ onVoiceNoteCreated }: VoiceRecorderProps) {\n const [recordingState, setRecordingState] = useState({\n isRecording: false,\n isPaused: false,\n duration: 0,\n audioBlob: null,\n audioUrl: null,\n });\n\n const [title, setTitle] = useState(\"\");\n const [isUploading, setIsUploading] = useState(false);\n const [showShareModal, setShowShareModal] = useState(false);\n const [createdVoiceNote, setCreatedVoiceNote] = useState(null);\n const [shareUrl, setShareUrl] = useState(\"\");\n\n const mediaRecorderRef = useRef(null);\n const audioChunksRef = useRef([]);\n const timerRef = useRef(null);\n const streamRef = useRef(null);\n\n useEffect(() => {\n return () => {\n if (timerRef.current) {\n clearInterval(timerRef.current);\n }\n if (streamRef.current) {\n streamRef.current.getTracks().forEach(track => track.stop());\n }\n };\n }, []);\n\n const startRecording = async () => {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n streamRef.current = stream;\n\n const mediaRecorder = new MediaRecorder(stream);\n mediaRecorderRef.current = mediaRecorder;\n audioChunksRef.current = [];\n\n mediaRecorder.ondataavailable = (event) => {\n if (event.data.size > 0) {\n audioChunksRef.current.push(event.data);\n }\n };\n\n mediaRecorder.onstop = () => {\n const audioBlob = new Blob(audioChunksRef.current, { type: \"audio/webm\" });\n const audioUrl = URL.createObjectURL(audioBlob);\n\n setRecordingState(prev => ({\n ...prev,\n audioBlob,\n audioUrl,\n isRecording: false,\n }));\n };\n\n mediaRecorder.start();\n\n setRecordingState(prev => ({\n ...prev,\n isRecording: true,\n isPaused: false,\n duration: 0,\n }));\n\n // Start timer\n timerRef.current = setInterval(() => {\n setRecordingState(prev => ({\n ...prev,\n duration: prev.duration + 1,\n }));\n }, 1000);\n } catch (error) {\n console.error(\"Error starting recording:\", error);\n alert(\"Could not access microphone. Please check permissions.\");\n }\n };\n\n const stopRecording = () => {\n if (mediaRecorderRef.current && recordingState.isRecording) {\n mediaRecorderRef.current.stop();\n\n if (timerRef.current) {\n clearInterval(timerRef.current);\n timerRef.current = null;\n }\n\n if (streamRef.current) {\n streamRef.current.getTracks().forEach(track => track.stop());\n }\n }\n };\n\n const resetRecording = () => {\n if (recordingState.audioUrl) {\n URL.revokeObjectURL(recordingState.audioUrl);\n }\n\n setRecordingState({\n isRecording: false,\n isPaused: false,\n duration: 0,\n audioBlob: null,\n audioUrl: null,\n });\n\n setTitle(\"\");\n };\n\n const handleSave = (shareSettings: ShareSettings) => {\n if (!recordingState.audioBlob) return;\n\n setIsUploading(true);\n\n const formData = new FormData();\n formData.append(\"audio\", recordingState.audioBlob, \"recording.webm\");\n formData.append(\"title\", title);\n formData.append(\"duration\", recordingState.duration.toString());\n\n if (shareSettings.expiresAt) {\n formData.append(\"expiresAt\", shareSettings.expiresAt);\n }\n\n if (shareSettings.maxListens) {\n formData.append(\"maxListens\", shareSettings.maxListens.toString());\n }\n\n fetch(\"/api/voicenotes\", {\n method: \"POST\",\n body: formData,\n })\n .then(response => response.json())\n .then(data => {\n if (data.success) {\n setCreatedVoiceNote(data.voiceNote);\n setShareUrl(data.shareUrl);\n setShowShareModal(false);\n resetRecording();\n } else {\n alert(\"Error saving voice message: \" + data.error);\n }\n })\n .catch(error => {\n console.error(\"Error saving voice message:\", error);\n alert(\"Error saving voice message\");\n })\n .finally(() => {\n setIsUploading(false);\n });\n };\n\n const formatDuration = (seconds: number) => {\n const mins = Math.floor(seconds / 60);\n const secs = seconds % 60;\n return `${mins}:${secs.toString().padStart(2, \"0\")}`;\n };\n\n const copyToClipboard = async (text: string) => {\n try {\n await navigator.clipboard.writeText(text);\n alert(\"Link copied to clipboard!\");\n } catch (error) {\n console.error(\"Failed to copy:\", error);\n }\n };\n\n if (createdVoiceNote) {\n return (\n

✅

\n Voice Message Created!\n

\n Your voice message has been saved and is being transcribed.\n

\n\n

Share this link:

\n \n copyToClipboard(shareUrl)}\n className=\"px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm\"\n >\n Copy\n \n

\n\n {\n setCreatedVoiceNote(null);\n setShareUrl(\"\");\n onVoiceNoteCreated?.();\n }}\n className=\"px-6 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700\"\n >\n View All Messages\n \n

\n );\n }\n\n return (\n

\n {!recordingState.isRecording && !recordingState.audioBlob && (\n <>\n

🎙️

\n Ready to Record\n

\n Click the button below to start recording your voice message\n

\n \n Start Recording\n \n \n )}\n\n {recordingState.isRecording && (\n <>\n

🔴

\n Recording...\n

\n {formatDuration(recordingState.duration)}\n

\n \n Stop Recording\n \n \n )}\n\n {recordingState.audioBlob && (\n <>\n

🎵

\n Recording Complete\n

\n Duration: {formatDuration(recordingState.duration)}\n

\n\n \n\n

\n \n Title (optional)\n \n setTitle(e.target.value)}\n placeholder=\"Enter a title for your voice message\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n\n

\n \n Re-record\n \n setShowShareModal(true)}\n disabled={isUploading}\n className=\"px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50\"\n >\n {isUploading ? \"Saving...\" : \"Save & Share\"}\n \n

\n \n )}\n

\n\n {showShareModal && (\n setShowShareModal(false)}\n isUploading={isUploading}\n />\n )}\n

\n );\n}",[],[232,238,276],[232,238],{"_105":284,"_95":285,"_158":286,"_160":233,"_161":142,"_162":102,"_163":22,"_107":287,"_101":32,"_166":288,"_168":289,"_169":22,"_170":-5,"_171":290,"_99":291},"4e813f98-40e9-11f0-8d0a-76b3cceeab13","index.html","35d75a57-e057-4372-8ca5-16bb90ed146a",["D",1749003123700],"file","\n\n \n \n \n Voice Messages\n \n \n \n \n \n

\n \n \n",[],[232,285],{"_105":293,"_95":294,"_158":295,"_160":233,"_161":142,"_162":102,"_163":164,"_107":296,"_101":32,"_166":184,"_168":297,"_169":22,"_170":-5,"_171":298,"_99":299},"4e814420-40e9-11f0-8d0a-76b3cceeab13","index.tsx","8b783aba-446c-4db7-82b3-4d1acd80558d",["D",1749003123700],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[232,294],[232],{"_105":302,"_95":303,"_158":304,"_160":-5,"_161":142,"_162":102,"_163":164,"_107":305,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":306,"_99":315},"4e814cd6-40e9-11f0-8d0a-76b3cceeab13","shared","2a1f683d-48f5-453f-9ed6-a4c7321db69b",["D",1749003123700],[307],{"_105":308,"_95":309,"_158":310,"_160":304,"_161":142,"_162":102,"_163":164,"_107":311,"_101":32,"_166":184,"_168":312,"_169":22,"_170":-5,"_171":313,"_99":314},"4e814858-40e9-11f0-8d0a-76b3cceeab13","types.ts","62f7a7c1-519b-411a-a912-d17b9b82517d",["D",1749003123700],"// Shared types for voice notes app\n\nexport interface VoiceNote {\n id: string;\n title?: string;\n audioUrl: string;\n transcription?: string;\n duration: number; // in seconds\n createdAt: string;\n expiresAt?: string; // ISO date string\n maxListens?: number;\n currentListens: number;\n isExpired: boolean;\n}\n\nexport interface CreateVoiceNoteRequest {\n audioBlob: Blob;\n title?: string;\n expiresAt?: string;\n maxListens?: number;\n}\n\nexport interface ShareSettings {\n expiresAt?: string;\n maxListens?: number;\n}\n\nexport interface VoiceNoteResponse {\n success: boolean;\n voiceNote?: VoiceNote;\n shareUrl?: string;\n error?: string;\n}\n\nexport interface TranscriptionResponse {\n success: boolean;\n transcription?: string;\n error?: string;\n}",[],[303,309],[303],{"_105":317,"_95":318,"_158":319,"_160":-5,"_161":142,"_162":102,"_163":164,"_107":320,"_101":32,"_166":288,"_168":321,"_169":22,"_170":-5,"_171":322,"_99":323},"4e814f1a-40e9-11f0-8d0a-76b3cceeab13","README.md","ada9f206-d325-4c7b-a2e9-22fe8127baa5",["D",1749003123700],"# Voice Notes App\n\nA web application for recording, transcribing, and sharing voice notes with expiration controls.\n\n## Features\n\n- 🎙️ Record voice notes directly in the browser\n- 🤖 AI-powered transcription using OpenAI Whisper\n- 🔗 Share voice notes via unique URLs\n- ⏰ Set expiration by max listens or date\n- 📋 Dashboard to view and manage all your voice notes\n- 🗑️ Delete voice notes you no longer need\n- 📱 Responsive design with modern UI\n\n## User Stories\n\n- I can record a voice note\n- Given I record a voice note, it is transcribed by AI\n- Given I have recorded a voice note, I can share that voice note with someone via URL\n- I can set an expiration for the voice note by number of max listens (i.e. 1 listen)\n- Or, I can set an expiration for the voice note by choosing an expiration date\n- I can see which voice notes I have sent\n- I can delete voice notes I no longer need\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema\n│ │ └── queries.ts # Database operations\n│ ├── routes/\n│ │ ├── voicenotes.ts # Voice note CRUD operations\n│ │ └── static.ts # Static file serving\n│ └── index.ts # Main Hono server\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main app component\n│ │ ├── VoiceRecorder.tsx # Recording interface\n│ │ ├── VoicePlayer.tsx # Playback interface\n│ │ ├── ShareModal.tsx # Sharing configuration\n│ │ └── Dashboard.tsx # Voice notes management\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ └── style.css # Custom styles\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## Tech Stack\n\n- **Backend**: Hono (TypeScript API framework)\n- **Database**: SQLite for voice note metadata\n- **Storage**: Val Town Blob storage for audio files\n- **AI**: OpenAI Whisper for transcription\n- **Frontend**: React with TypeScript\n- **Styling**: TailwindCSS",[],[318],"files",[156,173,179,188,197,203,211,220,230,236,242,250,258,266,274,283,292,301,307,316],"counts",{"_328":32,"_329":122,"_330":331,"_332":102},"pulls","branches","forks",5,"envVars","contents",[335,338,341],{"_105":174,"_95":175,"_158":176,"_160":159,"_161":142,"_162":102,"_163":164,"_107":336,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_99":337},["D",1749003123700],[100,175],{"_105":198,"_95":199,"_158":200,"_160":159,"_161":142,"_162":102,"_163":164,"_107":339,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_99":340},["D",1749003123700],[100,199],{"_105":221,"_95":222,"_158":223,"_160":159,"_161":142,"_162":102,"_163":164,"_107":342,"_101":32,"_166":225,"_168":226,"_169":22,"_170":-5,"_99":343},["D",1749003123700],[100,222],{"_105":157,"_95":100,"_158":159,"_160":-5,"_161":142,"_162":102,"_163":164,"_107":345,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_99":346},["D",1749003123700],[100],"upstreamProject","upstreamBranch",{"_105":145,"_107":350,"_351":352,"_95":43,"_143":106,"_101":147,"_144":-5,"_146":-5,"_353":354,"_109":-5,"_153":22,"_111":112,"_152":94,"_16":123,"_151":96},["D",1748056195569],"updatedAt",["D",1749000346558],"lockfileKey","1755584484815-esm.town_v_cameronpak_voicemessages@58-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":98,"_101":102,"_99":100,"_103":361,"_154":366,"_324":427,"_288":428,"_333":430,"_437":438,"_441":164,"_442":-5,"_443":444,"_445":32,"_446":447},{"_105":106,"_95":96,"_107":362,"_109":-5,"_110":22,"_111":112,"_113":114,"_115":116,"_14":117,"_118":-5,"_119":22,"_120":-5,"_121":122,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":363,"_136":364,"_139":365,"_153":22},["D",1748056195569],{"_93":94,"_134":135},{"_93":94,"_138":135},{"_101":141,"_95":98,"_105":142,"_143":106,"_144":145,"_146":147,"_148":112,"_149":106,"_150":123,"_151":96,"_152":94},[367,391,418,424],{"_105":157,"_95":100,"_158":159,"_160":-5,"_161":142,"_162":102,"_163":164,"_107":165,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":368,"_99":390},[369,378,387],{"_105":174,"_95":175,"_158":176,"_160":159,"_161":142,"_162":102,"_163":164,"_107":177,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":370,"_99":377},[371,374],{"_105":180,"_95":181,"_158":182,"_160":176,"_161":142,"_162":102,"_163":164,"_107":183,"_101":32,"_166":184,"_168":185,"_169":22,"_170":-5,"_171":372,"_99":373},[],[100,175,181],{"_105":189,"_95":190,"_158":191,"_160":176,"_161":142,"_162":102,"_163":164,"_107":192,"_101":32,"_166":184,"_168":193,"_169":22,"_170":-5,"_171":375,"_99":376},[],[100,175,190],[100,175],{"_105":198,"_95":199,"_158":200,"_160":159,"_161":142,"_162":102,"_163":164,"_107":201,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":379,"_99":386},[380,383],{"_105":204,"_95":205,"_158":206,"_160":200,"_161":142,"_162":102,"_163":164,"_107":207,"_101":32,"_166":184,"_168":208,"_169":22,"_170":-5,"_171":381,"_99":382},[],[100,199,205],{"_105":212,"_95":213,"_158":214,"_160":200,"_161":142,"_162":102,"_163":164,"_107":215,"_101":32,"_166":184,"_168":216,"_169":22,"_170":-5,"_171":384,"_99":385},[],[100,199,213],[100,199],{"_105":221,"_95":222,"_158":223,"_160":159,"_161":142,"_162":102,"_163":164,"_107":224,"_101":32,"_166":225,"_168":226,"_169":22,"_170":-5,"_171":388,"_99":389},[],[100,222],[100],{"_105":231,"_95":232,"_158":233,"_160":-5,"_161":142,"_162":102,"_163":164,"_107":234,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":392,"_99":417},[393,411,414],{"_105":237,"_95":238,"_158":239,"_160":233,"_161":142,"_162":102,"_163":164,"_107":240,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":394,"_99":410},[395,398,401,404,407],{"_105":243,"_95":244,"_158":245,"_160":239,"_161":142,"_162":102,"_163":22,"_107":246,"_101":32,"_166":184,"_168":247,"_169":22,"_170":-5,"_171":396,"_99":397},[],[232,238,244],{"_105":251,"_95":252,"_158":253,"_160":239,"_161":142,"_162":102,"_163":164,"_107":254,"_101":32,"_166":184,"_168":255,"_169":22,"_170":-5,"_171":399,"_99":400},[],[232,238,252],{"_105":259,"_95":260,"_158":261,"_160":239,"_161":142,"_162":102,"_163":164,"_107":262,"_101":32,"_166":184,"_168":263,"_169":22,"_170":-5,"_171":402,"_99":403},[],[232,238,260],{"_105":267,"_95":268,"_158":269,"_160":239,"_161":142,"_162":102,"_163":164,"_107":270,"_101":32,"_166":184,"_168":271,"_169":22,"_170":-5,"_171":405,"_99":406},[],[232,238,268],{"_105":275,"_95":276,"_158":277,"_160":239,"_161":142,"_162":102,"_163":164,"_107":278,"_101":32,"_166":184,"_168":279,"_169":22,"_170":-5,"_171":408,"_99":409},[],[232,238,276],[232,238],{"_105":284,"_95":285,"_158":286,"_160":233,"_161":142,"_162":102,"_163":22,"_107":287,"_101":32,"_166":288,"_168":289,"_169":22,"_170":-5,"_171":412,"_99":413},[],[232,285],{"_105":293,"_95":294,"_158":295,"_160":233,"_161":142,"_162":102,"_163":164,"_107":296,"_101":32,"_166":184,"_168":297,"_169":22,"_170":-5,"_171":415,"_99":416},[],[232,294],[232],{"_105":302,"_95":303,"_158":304,"_160":-5,"_161":142,"_162":102,"_163":164,"_107":305,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":419,"_99":423},[420],{"_105":308,"_95":309,"_158":310,"_160":304,"_161":142,"_162":102,"_163":164,"_107":311,"_101":32,"_166":184,"_168":312,"_169":22,"_170":-5,"_171":421,"_99":422},[],[303,309],[303],{"_105":317,"_95":318,"_158":319,"_160":-5,"_161":142,"_162":102,"_163":164,"_107":320,"_101":32,"_166":288,"_168":321,"_169":22,"_170":-5,"_171":425,"_99":426},[],[318],[367,369,371,374,378,380,383,387,391,393,395,398,401,404,407,411,414,418,420,424],{"_105":157,"_95":100,"_158":159,"_160":-5,"_161":142,"_162":102,"_163":164,"_107":345,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_99":429},[100],[431,433,435],{"_105":174,"_95":175,"_158":176,"_160":159,"_161":142,"_162":102,"_163":164,"_107":336,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_99":432},[100,175],{"_105":198,"_95":199,"_158":200,"_160":159,"_161":142,"_162":102,"_163":164,"_107":339,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_99":434},[100,199],{"_105":221,"_95":222,"_158":223,"_160":159,"_161":142,"_162":102,"_163":164,"_107":342,"_101":32,"_166":225,"_168":226,"_169":22,"_170":-5,"_99":436},[100,222],"upstream",{"_105":145,"_107":439,"_351":440,"_95":43,"_143":106,"_101":147,"_144":-5,"_146":-5,"_353":354,"_109":-5,"_153":22,"_111":112,"_152":94,"_16":123,"_151":96},["D",1748056195569],["D",1749000346558],"showCompareCallout","pull","ahead",6,"behind","templates",[],"actionData","errors"]