\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}",[],[238,245,252],{"_102":260,"_95":261,"_154":262,"_156":246,"_157":139,"_158":263,"_160":161,"_104":264,"_99":182,"_163":183,"_165":265,"_166":22,"_167":-5,"_168":266,"_98":267},"a6d1cfe8-40e2-11f0-ba51-76b3cceeab13","Dashboard.tsx","a52a06b2-384d-11f0-aa48-9e149126039e",56,["D",1749000265392],"/** @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}",[],[238,245,261],{"_102":269,"_95":270,"_154":271,"_156":246,"_157":139,"_158":272,"_160":161,"_104":273,"_99":32,"_163":183,"_165":274,"_166":22,"_167":-5,"_168":275,"_98":276},"24cc64f6-384d-11f0-a787-9e149126039e","ShareModal.tsx","24cc65be-384d-11f0-a787-9e149126039e",12,["D",1748056442945],"/** @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}",[],[238,245,270],{"_102":278,"_95":279,"_154":280,"_156":246,"_157":139,"_158":281,"_160":161,"_104":282,"_99":182,"_163":183,"_165":283,"_166":22,"_167":-5,"_168":284,"_98":285},"bdc48aba-40e2-11f0-969f-76b3cceeab13","VoicePlayer.tsx","372227b2-384d-11f0-b669-9e149126039e",57,["D",1749000303895],"/** @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}",[],[238,245,279],{"_102":287,"_95":288,"_154":289,"_156":246,"_157":139,"_158":138,"_160":161,"_104":290,"_99":159,"_163":183,"_165":291,"_166":22,"_167":-5,"_168":292,"_98":293},"d73266e8-40e2-11f0-80d7-76b3cceeab13","VoiceRecorder.tsx","1928f86c-384d-11f0-935b-9e149126039e",["D",1749000346558],"/** @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}",[],[238,245,288],[238,245],{"_102":296,"_95":297,"_154":298,"_156":239,"_157":139,"_158":299,"_160":161,"_104":300,"_99":119,"_163":301,"_165":302,"_166":22,"_167":-5,"_168":303,"_98":304},"76a23f42-40e2-11f0-9bef-76b3cceeab13","index.html","f7eca9dc-384c-11f0-a5c1-9e149126039e",54,["D",1749000184550],"file","\n\n \n \n \n Voice Messages\n \n \n \n \n \n

\n \n \n",[],[238,297],{"_102":306,"_95":307,"_154":308,"_156":239,"_157":139,"_158":193,"_160":161,"_104":309,"_99":32,"_163":183,"_165":310,"_166":22,"_167":-5,"_168":311,"_98":312},"fa30946a-384c-11f0-b0d1-9e149126039e","index.tsx","fa30955a-384c-11f0-b0d1-9e149126039e",["D",1748056371459],"/** @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();",[],[238,307],[238],{"_102":315,"_95":316,"_154":317,"_156":-5,"_157":139,"_158":119,"_160":161,"_104":318,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":319,"_98":328},"d1bbdf8a-384c-11f0-a838-9e149126039e","shared","9bbd557d-4fef-4efa-8282-7d9b38cff9ef",["D",1748056303584],[320],{"_102":321,"_95":322,"_154":323,"_156":317,"_157":139,"_158":119,"_160":161,"_104":324,"_99":32,"_163":183,"_165":325,"_166":22,"_167":-5,"_168":326,"_98":327},"d1bba470-384c-11f0-a838-9e149126039e","types.ts","d1bba524-384c-11f0-a838-9e149126039e",["D",1748056303584],"// 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}",[],[316,322],[316],{"_102":330,"_95":331,"_154":332,"_156":-5,"_157":139,"_158":333,"_160":161,"_104":334,"_99":119,"_163":301,"_165":335,"_166":22,"_167":-5,"_168":336,"_98":337},"cbedbeb0-384d-11f0-9704-9e149126039e","README.md","ce4351da-384c-11f0-b5cf-9e149126039e",25,["D",1748056723340],"# 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",[],[331],"files",[151,170,176,187,198,205,214,225,236,243,250,259,268,277,286,295,305,314,320,329],"counts",{"_342":32,"_343":119,"_344":202,"_345":346},"pulls","branches","forks","envVars",{"_347":182,"_348":32},"count","emptyCount","contents",[351,354,357,360],{"_102":152,"_95":153,"_154":155,"_156":-5,"_157":139,"_158":159,"_160":161,"_104":352,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":353},["D",1748056309532],[153],{"_102":237,"_95":238,"_154":239,"_156":-5,"_157":139,"_158":240,"_160":161,"_104":355,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":356},["D",1748056367659],[238],{"_102":315,"_95":316,"_154":317,"_156":-5,"_157":139,"_158":119,"_160":161,"_104":358,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":359},["D",1748056303584],[316],{"_102":330,"_95":331,"_154":332,"_156":-5,"_157":139,"_158":333,"_160":161,"_104":361,"_99":119,"_163":301,"_165":335,"_166":22,"_167":-5,"_98":362},["D",1748056723340],[331],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.remixes",{"_93":94,"_95":96,"_100":371,"_344":376,"_422":-5},{"_102":103,"_95":96,"_104":372,"_106":-5,"_107":22,"_108":109,"_110":111,"_112":113,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":119,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":373,"_133":374,"_136":375,"_148":22},["D",1748056195569],{"_93":94,"_131":132},{"_93":94,"_135":132,"_14":114},{"_99":138,"_95":43,"_102":139,"_140":103,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":96,"_147":94},[377,386,395,404,413],{"_102":378,"_95":96,"_110":-5,"_112":-5,"_108":109,"_14":379,"_16":380,"_148":22,"_23":381,"_133":384,"_115":-5,"_116":22,"_104":385,"_118":32},"0fb9b202-435c-11f0-acd9-76b3cceeab13","687c1294-9830-4fa5-9b5c-d9a5df6803ae","246de9af-537f-4372-b903-2221cb2755d9",{"_93":382,"_131":383},"michaelwschultz","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybGxFZXJlSFdpMXN2T1JNbjIyWnl4OFFsMjIifQ",{"_93":382,"_135":383,"_14":379},["D",1749272312788],{"_102":387,"_95":96,"_110":-5,"_112":-5,"_108":109,"_14":388,"_16":389,"_148":22,"_23":390,"_133":393,"_115":-5,"_116":22,"_104":394,"_118":32},"2bb0f150-45f5-11f0-8fae-76b3cceeab13","195e4a10-45f1-11f0-acdf-8798996c99b8","4fafc489-e2be-401a-9d7f-70328808f0e8",{"_93":391,"_131":392},"hrev","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yeUpjZXByZlplNGhLdFgzOGR4YkhqSmJCcnkifQ",{"_93":391,"_135":392,"_14":388},["D",1749557975054],{"_102":396,"_95":96,"_110":-5,"_112":-5,"_108":109,"_14":397,"_16":398,"_148":22,"_23":399,"_133":402,"_115":-5,"_116":22,"_104":403,"_118":32},"4069c998-4003-11f0-a40f-76b3cceeab13","3fedf2a0-3fb3-11f0-ad5b-814c56c8abb0","0db72b81-b83d-4dfc-9541-54563c4ed440",{"_93":400,"_131":401},"Victoria1234","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ4eEJib2R4YktaSm1ZR2J3V3pGR2N1cmd6dCJ9",{"_93":400,"_135":401,"_14":397},["D",1748904315796],{"_102":405,"_95":96,"_110":-5,"_112":-5,"_108":109,"_14":406,"_16":407,"_148":22,"_23":408,"_133":411,"_115":-5,"_116":22,"_104":412,"_118":32},"5df0c9b0-4000-11f0-b18d-76b3cceeab13","4da697b0-3ffb-11f0-ae04-ff2f80b377fd","e97a8f41-cc1a-4a99-a375-c25eeb688c54",{"_93":409,"_131":410},"Darkpearlzz","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ4eUNONmZCVnFNTnhscExJa3lOZU81MVBpWSJ9",{"_93":409,"_135":410,"_14":406},["D",1748903076845],{"_102":414,"_95":96,"_110":-5,"_112":-5,"_108":109,"_14":415,"_16":416,"_148":22,"_23":417,"_133":420,"_115":-5,"_116":22,"_104":421,"_118":32},"fbd7c644-48d2-11f0-976c-76b3cceeab13","13ee9a0f-d98c-429d-a0b7-1df66e5d589c","5760224a-bbc4-4c0b-b912-259758c4ed8a",{"_93":418,"_131":419},"arthrod","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybGdRZzN2TktCS3JGa24za1JPS2pWT1ZyeWgifQ",{"_93":418,"_135":419,"_14":415},["D",1749873145373],"upstream","actionData","errors"]

cameronpak

voicemessages