(initialData.form || null);\n const [forms, setForms] = useState([]);\n const [loading, setLoading] = useState(false);\n\n // If we're in view or embed mode, show the form directly\n if (initialData.mode === 'view' || initialData.mode === 'embed') {\n return (\n

\n \n

\n );\n }\n\n useEffect(() => {\n loadForms();\n }, []);\n\n const loadForms = async () => {\n try {\n setLoading(true);\n const response = await fetch('/api/forms');\n if (response.ok) {\n const formsData = await response.json();\n setForms(formsData);\n }\n } catch (error) {\n console.error('Failed to load forms:', error);\n } finally {\n setLoading(false);\n }\n };\n\n const handleFormCreated = (form: Form) => {\n setForms(prev => [form, ...prev]);\n setSelectedForm(form);\n setCurrentView('dashboard');\n };\n\n const handleFormUpdated = (form: Form) => {\n setForms(prev => prev.map(f => f.id === form.id ? form : f));\n setSelectedForm(form);\n };\n\n const handleFormDeleted = (formId: string) => {\n setForms(prev => prev.filter(f => f.id !== formId));\n if (selectedForm?.id === formId) {\n setSelectedForm(null);\n setCurrentView('builder');\n }\n };\n\n const renderNavigation = () => (\n

Form Builder

\n setCurrentView('builder')}\n className={`px-3 py-2 rounded-md text-sm font-medium ${\n currentView === 'builder'\n ? 'bg-blue-100 text-blue-700'\n : 'text-gray-500 hover:text-gray-700'\n }`}\n >\n Create Form\n \n setCurrentView('dashboard')}\n className={`px-3 py-2 rounded-md text-sm font-medium ${\n currentView === 'dashboard'\n ? 'bg-blue-100 text-blue-700'\n : 'text-gray-500 hover:text-gray-700'\n }`}\n >\n Dashboard\n \n

\n {forms.length > 0 && (\n

\n {forms.length} form{forms.length !== 1 ? 's' : ''} created\n

\n )}\n

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

\n {renderNavigation()}\n \n

\n {loading && (\n

\n Loading...\n

\n )}\n\n {!loading && currentView === 'builder' && (\n \n )}\n\n {!loading && currentView === 'dashboard' && (\n setCurrentView('builder')}\n />\n )}\n\n {!loading && currentView === 'form' && selectedForm && (\n

\n setCurrentView('dashboard')}\n className=\"text-blue-600 hover:text-blue-800 text-sm font-medium\"\n >\n ← Back to Dashboard\n \n

\n \n

\n )}\n

\n );\n}","deleted","label",[169,170,152],"frontend","components","permalink","https://www.val.town/x/kyumz/Forms/code/frontend/components/App.tsx","extension","actionData","errors"]