\n \n\n",[],[385,377],"frontend","b2f15416-206b-11f0-afe4-569c3dd06744","App.tsx","f59ecbba-2069-11f0-83a5-569c3dd06744",86,["D",1745430738411],16,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport copy from \"https://esm.sh/copy-to-clipboard@3.3.3\";\n\ninterface Attachment {\n id: string;\n filename: string;\n contentType: string;\n size: number;\n receivedAt: string;\n from: string;\n subject: string;\n}\n\nconst App: React.FC = () => {\n const [attachments, setAttachments] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [selectedAttachment, setSelectedAttachment] = useState(null);\n const [copied, setCopied] = useState(false);\n const [isFullscreen, setIsFullscreen] = useState(false);\n const viewerRef = useRef(null);\n \n // Get email address from window object (injected by the server)\n const emailAddress = (window as any).emailAddress || \"unknown@example.com\";\n const sourceUrl = (window as any).sourceUrl || \"#\";\n const appName = (window as any).appName || \"Remarkable Viewer\";\n\n const copyEmailToClipboard = () => {\n copy(emailAddress);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000); // Reset after 2 seconds\n };\n \n const toggleFullscreen = () => {\n setIsFullscreen(!isFullscreen);\n };\n\n useEffect(() => {\n const fetchAttachments = async () => {\n try {\n const response = await fetch(\"/api/attachments\");\n if (!response.ok) {\n throw new Error(\"Failed to fetch attachments\");\n }\n const data = await response.json();\n setAttachments(data);\n } catch (err) {\n setError(err instanceof Error ? err.message : \"Unknown error\");\n } finally {\n setLoading(false);\n }\n };\n\n fetchAttachments();\n }, []);\n\n const formatDate = (dateString: string) => {\n const date = new Date(dateString);\n return date.toLocaleString();\n };\n\n const formatFileSize = (bytes: number) => {\n if (bytes < 1024) return bytes + \" bytes\";\n else if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + \" KB\";\n else return (bytes / (1024 * 1024)).toFixed(1) + \" MB\";\n };\n \n const formatSender = (email: string) => {\n // Extract name or username from email if possible\n const match = email.match(/^\"?([^\"@]+)\"?\\s*<.*>$/) || email.match(/^([^@]+)@/);\n return match ? match[1] : email;\n };\n\n return (\n

{appName}

\n View your Remarkable documents sent via email to: {\" \"}\n \n {emailAddress}\n {copied && ✓ Copied!}\n \n

\n View Source\n

\n\n {loading ? (\n

Loading documents...

\n ) : error ? (\n

Error: {error}

\n ) : attachments.length === 0 ? (\n

No documents found

\n Send PDF documents to {\" \"}\n \n {emailAddress}\n {copied && ✓ Copied!}\n \n {\" \"} to view them here.\n

\n ) : (\n

Documents

setSelectedAttachment(attachment.id)}\n >\n
{attachment.filename}
\n
\n {formatFileSize(attachment.size)}\n {formatDate(attachment.receivedAt)}\n
\n

\n \n

\n {selectedAttachment ? (\n <>\n

\n {attachments.find(a => a.id === selectedAttachment)?.filename || \"Document\"}\n

\n \n \n Download\n \n \n

History · backend