Upload folder using huggingface_hub

client/components/BackupControl.tsx

@@ -1,8 +1,11 @@
-import { useState, useRef, ChangeEvent } from 'react'
-import { useEditor, TldrawUiMenuItem } from 'tldraw'
+import { useState, useRef, useEffect, ChangeEvent } from 'react'
+import { useEditor, TldrawUiMenuItem, uniqueId } from 'tldraw'
 import { useAuth } from '../hooks/useAuth'
 import { useBackups } from '../hooks/useBackups'
 import { exportToImage } from '../utils/exportUtils'
+import { Filesystem, Directory, Encoding } from '@capacitor/filesystem'
+import { Share } from '@capacitor/share'
+import { Capacitor } from '@capacitor/core'
 
 export function BackupMenuItem({ roomId }: { roomId: string }) {
     const editor = useEditor()
@@ -62,7 +65,7 @@ export function BackupMenuItem({ roomId }: { roomId: string }) {
 export function DownloadMenuItem({ roomId }: { roomId: string }) {
     const editor = useEditor()
 
-    const handleDownload = () => {
+    const handleDownload = async () => {
         try {
             const snapshot = editor.getSnapshot()
             const jsonStr = JSON.stringify({
@@ -72,15 +75,38 @@ export function DownloadMenuItem({ roomId }: { roomId: string }) {
                 source: 'tldraw-multiplayer'
             }, null, 2)
 
-            const blob = new Blob([jsonStr], { type: 'application/json' })
-            const url = URL.createObjectURL(blob)
-            const link = document.createElement('a')
-            link.href = url
-            link.download = `tldraw-room-${roomId}-${new Date().toISOString().slice(0,10)}.json`
-            document.body.appendChild(link)
-            link.click()
-            document.body.removeChild(link)
-            URL.revokeObjectURL(url)
+            const fileName = `tldraw-room-${roomId}-${new Date().toISOString().slice(0,10)}.json`
+
+            if (Capacitor.isNativePlatform()) {
+                // Native (Android/iOS): Use Filesystem + Share
+                try {
+                    const savedFile = await Filesystem.writeFile({
+                        path: fileName,
+                        data: jsonStr,
+                        directory: Directory.Cache,
+                        encoding: Encoding.UTF8
+                    })
+
+                    await Share.share({
+                        title: 'Backup Board JSON',
+                        files: [savedFile.uri],
+                    })
+                } catch (err: any) {
+                    console.error('Native save failed', err)
+                    alert('Failed to save file: ' + err.message)
+                }
+            } else {
+                // Web: Use anchor tag download
+                const blob = new Blob([jsonStr], { type: 'application/json' })
+                const url = URL.createObjectURL(blob)
+                const link = document.createElement('a')
+                link.href = url
+                link.download = fileName
+                document.body.appendChild(link)
+                link.click()
+                document.body.removeChild(link)
+                URL.revokeObjectURL(url)
+            }
         } catch (e: any) {
             console.error('Failed to download backup', e)
             alert('Failed to download backup: ' + e.message)
@@ -99,12 +125,34 @@ export function DownloadMenuItem({ roomId }: { roomId: string }) {
 }
 
 export function RestoreMenuItem() {
+    const handleRestoreClick = () => {
+        window.dispatchEvent(new CustomEvent('tldraw-trigger-file-restore'))
+    }
+
+    return (
+        <TldrawUiMenuItem
+            id="restore-json"
+            label="Restore from File"
+            icon="external-link"
+            readonlyOk
+            onSelect={handleRestoreClick}
+        />
+    )
+}
+
+export function RestoreFileHandler({ roomId: _roomId }: { roomId: string }) {
     const editor = useEditor()
     const inputRef = useRef<HTMLInputElement>(null)
 
-    const handleRestoreClick = () => {
-        inputRef.current?.click()
-    }
+    useEffect(() => {
+        const handleTrigger = () => {
+            if (inputRef.current) {
+                inputRef.current.click()
+            }
+        }
+        window.addEventListener('tldraw-trigger-file-restore', handleTrigger)
+        return () => window.removeEventListener('tldraw-trigger-file-restore', handleTrigger)
+    }, [])
 
     const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
         const file = e.target.files?.[0]
@@ -119,37 +167,65 @@ export function RestoreMenuItem() {
                 // Handle both raw snapshot or our wrapped format
                 const snapshot = data.snapshot || data
 
-                if (window.confirm('This will replace the current board content. Are you sure?')) {
-                    editor.loadSnapshot(snapshot)
+                const mode = window.confirm('Restore as a NEW board? (Click Cancel to OVERWRITE the current board)')
+
+                if (mode) {
+                    // Restore as New
+                    const newId = uniqueId()
+                    const name = data.roomName || 'Restored Board'
+
+                    // Store for the new room to pick up
+                    localStorage.setItem(`restore_data_${newId}`, JSON.stringify({
+                        snapshot,
+                        roomName: name
+                    }))
+
+                    // Save to recents
+                    const storedRooms = localStorage.getItem('tldraw_saved_rooms')
+                    let recentRooms = []
+                    try {
+                        if (storedRooms) recentRooms = JSON.parse(storedRooms)
+                    } catch (e) {}
+
+                    recentRooms.push({
+                        id: newId,
+                        name: name,
+                        lastVisited: Date.now()
+                    })
+                    localStorage.setItem('tldraw_saved_rooms', JSON.stringify(recentRooms))
+
+                    // Open in new tab or navigate?
+                    // Let's navigate to keep it simple, or open in new tab if requested.
+                    // Implementation plan said "Creates new Room -> Loads snapshot -> Navigates to room"
+                    window.location.assign(`/#/${newId}`)
+                } else {
+                    // Overwrite Current
+                    if (window.confirm('WARNING: This will permanently overwrite the current board content for everyone. Are you sure?')) {
+                        editor.loadSnapshot(snapshot)
+                    }
                 }
             } catch (e: any) {
                 console.error('Failed to parse backup file', e)
-                alert('Failed to restore backup: Invalid file format')
+                alert('Failed to restore backup: Invalid file format (' + e.message + ')')
             } finally {
                 // Reset input
                 if (inputRef.current) inputRef.current.value = ''
             }
         }
+        reader.onerror = (err) => {
+             alert('FileReader Error: ' + err)
+        }
         reader.readAsText(file)
     }
 
     return (
-        <>
-            <TldrawUiMenuItem
-                id="restore-json"
-                label="Restore from File"
-                icon="external-link"
-                readonlyOk
-                onSelect={handleRestoreClick}
-            />
-            <input
-                ref={inputRef}
-                type="file"
-                accept=".json"
-                style={{ display: 'none' }}
-                onChange={handleFileChange}
-            />
-        </>
+        <input
+            ref={inputRef}
+            type="file"
+            accept="application/json,.json"
+            style={{ position: 'fixed', top: '-10000px', left: '-10000px', opacity: 0, pointerEvents: 'none' }}
+            onChange={handleFileChange}
+        />
     )
 }
 

client/components/Toast.tsx

@@ -0,0 +1,89 @@
+import { useState, useEffect } from 'react'
+import { createRoot } from 'react-dom/client'
+
+interface ToastProps {
+    message: string
+    duration?: number
+    type?: 'info' | 'success' | 'error'
+    onClose: () => void
+}
+
+function Toast({ message, duration = 3000, type = 'info', onClose }: ToastProps) {
+    const [visible, setVisible] = useState(false)
+
+    useEffect(() => {
+        // Trigger enter animation
+        requestAnimationFrame(() => setVisible(true))
+
+        const timer = setTimeout(() => {
+            setVisible(false)
+            // Wait for exit animation to finish before unmounting
+            setTimeout(onClose, 300)
+        }, duration)
+
+        return () => clearTimeout(timer)
+    }, [duration, onClose])
+
+    const getBgColor = () => {
+        switch (type) {
+            case 'success': return '#10b981' // Green
+            case 'error': return '#ef4444'   // Red
+            default: return '#3b82f6'        // Blue
+        }
+    }
+
+    return (
+        <div style={{
+            position: 'fixed',
+            bottom: 24,
+            left: '50%',
+            transform: `translateX(-50%) translateY(${visible ? 0 : 20}px)`,
+            opacity: visible ? 1 : 0,
+            background: getBgColor(),
+            color: '#fff',
+            padding: '10px 20px',
+            borderRadius: 8,
+            boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+            fontSize: '0.9rem',
+            fontWeight: 500,
+            zIndex: 10000,
+            transition: 'all 0.3s cubic-bezier(0.16, 1, 0.3, 1)',
+            pointerEvents: 'none', // Allow clicks to pass through
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            minWidth: 200,
+            justifyContent: 'center'
+        }}>
+            {type === 'success' && (
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
+            )}
+            {type === 'info' && (
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
+            )}
+            {message}
+        </div>
+    )
+}
+
+export function showToast(message: string, options: { duration?: number, type?: 'info' | 'success' | 'error' } = {}) {
+    const div = document.createElement('div')
+    document.body.appendChild(div)
+    const root = createRoot(div)
+
+    const cleanup = () => {
+        root.unmount()
+        if (document.body.contains(div)) {
+            document.body.removeChild(div)
+        }
+    }
+
+    root.render(
+        <Toast
+            message={message}
+            duration={options.duration}
+            type={options.type}
+            onClose={cleanup}
+        />
+    )
+}

client/pages/RoomPage.tsx

@@ -33,7 +33,7 @@ import { BrushManager } from '../components/BrushManager'
 import { EquationRenderer } from '../components/EquationRendererSimple'
 import { getEraserSettings } from '../utils/eraserUtils'
 import { EquationShapeUtil } from '../shapes/EquationShapeUtil'
-import { BackupMenuItem, DownloadMenuItem, RestoreMenuItem, PdfExportMenuItem } from '../components/BackupControl'
+import { BackupMenuItem, DownloadMenuItem, RestoreMenuItem, RestoreFileHandler, PdfExportMenuItem } from '../components/BackupControl'
 
 const customShapeUtils = [
     ...defaultShapeUtils.filter(u => u.type !== 'geo'),
@@ -393,6 +393,7 @@ export function RoomPage() {
                 }}
             >
                 <SPenController />
+                <RestoreFileHandler roomId={roomId} />
                 <StatePersistence roomId={roomId} />
                 <NavigationDock roomId={roomId} />
                 <SelectLockedLogic />

client/utils/exportUtils.ts

@@ -2,7 +2,7 @@ import { Share } from '@capacitor/share'
 import { Filesystem, Directory } from '@capacitor/filesystem'
 import { SERVER_URL } from '../config'
 import { Editor } from 'tldraw'
-import { customAlert, customPrompt } from './uiUtils'
+import { customAlert, customPrompt, showToast } from './uiUtils'
 import { jsPDF } from 'jspdf'
 import 'svg2pdf.js'
 
@@ -48,6 +48,9 @@ export const exportToImage = async (editor: Editor, roomId: string, format: 'png
             return
         }
 
+        // Show quiet indicator
+        showToast(`Preparing ${format.toUpperCase()} export...`, { duration: 3000 })
+
         // 2. Calculate Bounds to prevent OOM
         let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity
         shapeIds.forEach(id => {

client/utils/uiUtils.ts

@@ -1,4 +1,7 @@
 import { showModal } from '../components/Modal'
+import { showToast as showToastImpl } from '../components/Toast'
+
+export const showToast = showToastImpl
 
 export const customAlert = async (message: string, title?: string) => {
     await showModal({
@@ -25,11 +28,8 @@ export const customPrompt = async (message: string, defaultValue?: string, title
 // but based on current Modal code, 'alert' type doesn't show Cancel button.
 // Let's UPDATE Modal.tsx to support 'confirm' type first.
 export const customConfirm = async (message: string, title?: string): Promise<boolean> => {
-    // We need to update Modal.tsx to support this first.
-    // For now, mapping to window.confirm as fallback or we can quickly update Modal.
-    // Let's assume we will update Modal.tsx in the next step.
     const result = await showModal({
-        type: 'confirm' as any, // We will add this type
+        type: 'confirm',
         message,
         title,
     })

deploy.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+set -e # Exit on error
+
+echo "🚀 Starting deployment process..."
+
+# 1. Build the project
+echo "📦 Building project..."
+npm run build
+
+# 2. Deploy to Cloudflare
+echo "☁️ Deploying to Cloudflare..."
+npx wrangler deploy
+
+# 3. Upload to Hugging Face
+echo "🤗 Uploading to Hugging Face..."
+/home/u0_a369/.local/bin/hf upload Jaimodiji/my-multiplayer-app . . \
+  --repo-type space \
+  --exclude "node_modules/*" \
+  --exclude "dist/*" \
+  --exclude ".wrangler/*" \
+  --exclude ".git/*" \
+  --exclude ".env" \
+  --exclude ".dev.vars" \
+  --exclude "temp/*" \
+  --exclude "restored_files/*" \
+  --exclude "*.sqlite" \
+  --exclude "*.log"
+
+echo "✅ Deployment completed successfully!"