\n 🎙️ Voice Notes\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 Notes\n \n

\n )}\n\n

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

\n );\n}",[],[230,236,242],{"_102":249,"_95":250,"_155":251,"_157":237,"_158":136,"_159":160,"_161":162,"_104":252,"_99":32,"_164":182,"_166":253,"_167":22,"_168":-5,"_169":254,"_98":255},"407045d4-4003-11f0-a40f-76b3cceeab13","Dashboard.tsx","98010f3a-f86b-451a-9400-c3f844c5e722",["D",1748904315796],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } 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 notes');\n }\n } catch (err) {\n setError('Failed to load voice notes');\n console.error('Error fetching voice notes:', 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 note? 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 note: ' + data.error);\n }\n } catch (error) {\n console.error('Error deleting voice note:', error);\n alert('Failed to delete voice note');\n }\n };\n\n if (loading) {\n return (\n

⏳

\n Loading Your Voice Notes...\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 Notes\n

\n \n Refresh\n \n

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

🎙️

\n No Voice Notes Yet\n

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

\n ) : (\n

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

\n {voiceNote.title || 'Untitled Voice Note'}\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 && (\n 📊 {voiceNote.maxListens} max\n )}\n {voiceNote.expiresAt && (\n ⏰ Expires {formatDate(voiceNote.expiresAt)}\n )}\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}",[],[230,236,250],{"_102":257,"_95":258,"_155":259,"_157":237,"_158":136,"_159":160,"_161":162,"_104":260,"_99":32,"_164":182,"_166":261,"_167":22,"_168":-5,"_169":262,"_98":263},"40705074-4003-11f0-a40f-76b3cceeab13","ShareModal.tsx","70d753da-2ecf-4e61-b637-98072d03f55b",["D",1748904315796],"/** @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}",[],[230,236,258],{"_102":265,"_95":266,"_155":267,"_157":237,"_158":136,"_159":160,"_161":162,"_104":268,"_99":32,"_164":182,"_166":269,"_167":22,"_168":-5,"_169":270,"_98":271},"40705650-4003-11f0-a40f-76b3cceeab13","VoicePlayer.tsx","92e2c8e6-a682-4947-9a1d-a545a77522bb",["D",1748904315796],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } 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 note not found');\n }\n } catch (err) {\n setError('Failed to load voice note');\n console.error('Error fetching voice note:', 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 note 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${listensLeft !== 1 ? 's' : ''} 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 Note'}\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 note 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 Note\n \n

\n );\n}",[],[230,236,266],{"_102":273,"_95":274,"_155":275,"_157":237,"_158":136,"_159":160,"_161":162,"_104":276,"_99":32,"_164":182,"_166":277,"_167":22,"_168":-5,"_169":278,"_98":279},"407061cc-4003-11f0-a40f-76b3cceeab13","VoiceRecorder.tsx","5ea19c88-e0ac-4152-8a7d-eb6ec97e3e56",["D",1748904315796],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport ShareModal from \"./ShareModal.tsx\";\nimport type { VoiceNote, ShareSettings } from \"../../shared/types.ts\";\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\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 note: ' + data.error);\n }\n })\n .catch(error => {\n console.error('Error saving voice note:', error);\n alert('Error saving voice note');\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 Note Created!\n

\n Your voice note 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 Notes\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 note\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 note\"\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}",[],[230,236,274],[230,236],{"_102":282,"_95":283,"_155":284,"_157":231,"_158":136,"_159":160,"_161":162,"_104":285,"_99":32,"_164":286,"_166":287,"_167":22,"_168":-5,"_169":288,"_98":289},"40706eba-4003-11f0-a40f-76b3cceeab13","index.html","6b9d4cbb-e244-4b97-848a-2ee0cd281f76",["D",1748904315796],"file","\n\n\n \n \n Voice Notes\n \n \n \n\n\n

\n \n\n",[],[230,283],{"_102":291,"_95":292,"_155":293,"_157":231,"_158":136,"_159":160,"_161":162,"_104":294,"_99":32,"_164":182,"_166":295,"_167":22,"_168":-5,"_169":296,"_98":297},"40707072-4003-11f0-a40f-76b3cceeab13","index.tsx","3cb0e8b6-3126-4582-b5fc-879598c0332d",["D",1748904315796],"/** @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();",[],[230,292],[230],{"_102":300,"_95":301,"_155":302,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":303,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":304,"_98":313},"407079f0-4003-11f0-a40f-76b3cceeab13","shared","a73d15a5-0794-4bf7-af72-613696db7409",["D",1748904315796],[305],{"_102":306,"_95":307,"_155":308,"_157":302,"_158":136,"_159":160,"_161":162,"_104":309,"_99":32,"_164":182,"_166":310,"_167":22,"_168":-5,"_169":311,"_98":312},"40707838-4003-11f0-a40f-76b3cceeab13","types.ts","7556b556-1b53-48a6-9ea9-d9ac68305478",["D",1748904315796],"// 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}",[],[301,307],[301],{"_102":315,"_95":316,"_155":317,"_157":-5,"_158":136,"_159":135,"_161":162,"_104":318,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":319,"_98":320},"4861b5a2-4003-11f0-822c-76b3cceeab13","untitled-folder-3804","4861b67e-4003-11f0-822c-76b3cceeab13",["D",1748904329185],[],[316],{"_102":322,"_95":323,"_155":324,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":325,"_99":32,"_164":286,"_166":326,"_167":22,"_168":-5,"_169":327,"_98":328},"40707b94-4003-11f0-a40f-76b3cceeab13","README.md","6da8ed74-41f8-42ae-9ac9-92747325c0a0",["D",1748904315796],"# 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",[],[323],"files",[152,171,177,186,195,201,209,218,228,234,240,248,256,264,272,281,290,299,305,314,321],"counts",{"_333":32,"_334":160,"_335":160,"_336":32},"pulls","branches","forks","envVars","contents",[339,342,345,348,351],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":340,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":341},["D",1748904315796],[154],{"_102":229,"_95":230,"_155":231,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":343,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":344},["D",1748904315796],[230],{"_102":300,"_95":301,"_155":302,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":346,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":347},["D",1748904315796],[301],{"_102":315,"_95":316,"_155":317,"_157":-5,"_158":136,"_159":135,"_161":162,"_104":349,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":350},["D",1748904329185],[316],{"_102":322,"_95":323,"_155":324,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":352,"_99":32,"_164":286,"_166":326,"_167":22,"_168":-5,"_98":353},["D",1748904315796],[323],"upstreamProject",{"_102":144,"_95":96,"_110":356,"_111":357,"_108":109,"_23":358},"Record, transcribe, and share voice notes","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/18bff8bf-ce15-4f5b-07b9-ea79b4736400/square512",{"_93":359,"_128":360},"cameronpak","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yZTJhZU9HSzJmZVFZMmpXaFBLNGVvblNXTTkifQ","upstreamBranch",{"_102":139,"_104":363,"_364":365,"_95":43,"_137":144,"_99":366,"_138":-5,"_140":-5,"_367":368,"_106":-5,"_149":22,"_108":109,"_148":359,"_16":146,"_147":96},["D",1748056195569],"updatedAt",["D",1749000346558],58,"lockfileKey","1755584484815-esm.town_v_cameronpak_voicemessages@58-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":43,"_99":-7,"_98":72,"_100":375,"_150":380,"_329":444,"_286":-7,"_337":445,"_456":457,"_460":22,"_461":-5,"_462":160,"_463":464,"_465":466},{"_102":103,"_95":96,"_104":376,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":377,"_130":378,"_133":379,"_149":22},["D",1748904315796],{"_93":94,"_128":129},{"_93":94,"_132":129},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":139,"_140":141,"_142":109,"_143":144,"_145":146,"_147":96,"_148":94},[381,405,432,438,441],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":163,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":382,"_98":404},[383,392,401],{"_102":172,"_95":173,"_155":174,"_157":156,"_158":136,"_159":160,"_161":162,"_104":175,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":384,"_98":391},[385,388],{"_102":178,"_95":179,"_155":180,"_157":174,"_158":136,"_159":160,"_161":162,"_104":181,"_99":32,"_164":182,"_166":183,"_167":22,"_168":-5,"_169":386,"_98":387},[],[154,173,179],{"_102":187,"_95":188,"_155":189,"_157":174,"_158":136,"_159":160,"_161":162,"_104":190,"_99":32,"_164":182,"_166":191,"_167":22,"_168":-5,"_169":389,"_98":390},[],[154,173,188],[154,173],{"_102":196,"_95":197,"_155":198,"_157":156,"_158":136,"_159":160,"_161":162,"_104":199,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":393,"_98":400},[394,397],{"_102":202,"_95":203,"_155":204,"_157":198,"_158":136,"_159":160,"_161":162,"_104":205,"_99":32,"_164":182,"_166":206,"_167":22,"_168":-5,"_169":395,"_98":396},[],[154,197,203],{"_102":210,"_95":211,"_155":212,"_157":198,"_158":136,"_159":160,"_161":162,"_104":213,"_99":32,"_164":182,"_166":214,"_167":22,"_168":-5,"_169":398,"_98":399},[],[154,197,211],[154,197],{"_102":219,"_95":220,"_155":221,"_157":156,"_158":136,"_159":160,"_161":162,"_104":222,"_99":32,"_164":223,"_166":224,"_167":22,"_168":-5,"_169":402,"_98":403},[],[154,220],[154],{"_102":229,"_95":230,"_155":231,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":232,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":406,"_98":431},[407,425,428],{"_102":235,"_95":236,"_155":237,"_157":231,"_158":136,"_159":160,"_161":162,"_104":238,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":408,"_98":424},[409,412,415,418,421],{"_102":241,"_95":242,"_155":243,"_157":237,"_158":136,"_159":160,"_161":162,"_104":244,"_99":32,"_164":182,"_166":245,"_167":22,"_168":-5,"_169":410,"_98":411},[],[230,236,242],{"_102":249,"_95":250,"_155":251,"_157":237,"_158":136,"_159":160,"_161":162,"_104":252,"_99":32,"_164":182,"_166":253,"_167":22,"_168":-5,"_169":413,"_98":414},[],[230,236,250],{"_102":257,"_95":258,"_155":259,"_157":237,"_158":136,"_159":160,"_161":162,"_104":260,"_99":32,"_164":182,"_166":261,"_167":22,"_168":-5,"_169":416,"_98":417},[],[230,236,258],{"_102":265,"_95":266,"_155":267,"_157":237,"_158":136,"_159":160,"_161":162,"_104":268,"_99":32,"_164":182,"_166":269,"_167":22,"_168":-5,"_169":419,"_98":420},[],[230,236,266],{"_102":273,"_95":274,"_155":275,"_157":237,"_158":136,"_159":160,"_161":162,"_104":276,"_99":32,"_164":182,"_166":277,"_167":22,"_168":-5,"_169":422,"_98":423},[],[230,236,274],[230,236],{"_102":282,"_95":283,"_155":284,"_157":231,"_158":136,"_159":160,"_161":162,"_104":285,"_99":32,"_164":286,"_166":287,"_167":22,"_168":-5,"_169":426,"_98":427},[],[230,283],{"_102":291,"_95":292,"_155":293,"_157":231,"_158":136,"_159":160,"_161":162,"_104":294,"_99":32,"_164":182,"_166":295,"_167":22,"_168":-5,"_169":429,"_98":430},[],[230,292],[230],{"_102":300,"_95":301,"_155":302,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":303,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":433,"_98":437},[434],{"_102":306,"_95":307,"_155":308,"_157":302,"_158":136,"_159":160,"_161":162,"_104":309,"_99":32,"_164":182,"_166":310,"_167":22,"_168":-5,"_169":435,"_98":436},[],[301,307],[301],{"_102":315,"_95":316,"_155":317,"_157":-5,"_158":136,"_159":135,"_161":162,"_104":318,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":439,"_98":440},[],[316],{"_102":322,"_95":323,"_155":324,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":325,"_99":32,"_164":286,"_166":326,"_167":22,"_168":-5,"_169":442,"_98":443},[],[323],[381,383,385,388,392,394,397,401,405,407,409,412,415,418,421,425,428,432,434,438,441],[446,448,450,452,454],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":340,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":447},[154],{"_102":229,"_95":230,"_155":231,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":343,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":449},[230],{"_102":300,"_95":301,"_155":302,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":346,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":451},[301],{"_102":315,"_95":316,"_155":317,"_157":-5,"_158":136,"_159":135,"_161":162,"_104":349,"_99":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":453},[316],{"_102":322,"_95":323,"_155":324,"_157":-5,"_158":136,"_159":160,"_161":162,"_104":352,"_99":32,"_164":286,"_166":326,"_167":22,"_168":-5,"_98":455},[323],"upstream",{"_102":139,"_104":458,"_364":459,"_95":43,"_137":144,"_99":366,"_138":-5,"_140":-5,"_367":368,"_106":-5,"_149":22,"_108":109,"_148":359,"_16":146,"_147":96},["D",1748056195569],["D",1749000346558],"showCompareCallout","pull","ahead","behind",10,"templates",[],"actionData","errors"]