delete modal

src/client/index.tsx

@@ -403,6 +403,11 @@ const FormActions = define('FormActions', {
 let newAppError = ''
 let newAppCreating = false
 
+// Delete App confirmation
+let deleteAppError = ''
+let deleteAppDeleting = false
+let deleteAppTarget: App | null = null
+
 async function createNewApp(input: HTMLInputElement) {
   const name = input.value.trim().toLowerCase().replace(/\s+/g, '-')
 
@@ -484,6 +489,82 @@ function openNewAppModal() {
   ))
 }
 
+// Delete App confirmation modal
+async function deleteApp(input: HTMLInputElement) {
+  if (!deleteAppTarget) return
+
+  const expected = `sudo rm ${deleteAppTarget.name}`
+  const value = input.value.trim()
+
+  if (value !== expected) {
+    deleteAppError = `Type "${expected}" to confirm`
+    rerenderModal()
+    return
+  }
+
+  deleteAppDeleting = true
+  deleteAppError = ''
+  rerenderModal()
+
+  try {
+    const res = await fetch(`/api/sync/apps/${deleteAppTarget.name}`, {
+      method: 'DELETE',
+    })
+    if (!res.ok) {
+      throw new Error(`Failed to delete app: ${res.statusText}`)
+    }
+
+    // Success - close modal and clear selection
+    if (selectedApp === deleteAppTarget.name) {
+      selectedApp = null
+      localStorage.removeItem('selectedApp')
+    }
+    closeModal()
+  } catch (err) {
+    deleteAppError = err instanceof Error ? err.message : 'Failed to delete app'
+    deleteAppDeleting = false
+    rerenderModal()
+  }
+}
+
+function openDeleteAppModal(app: App) {
+  deleteAppError = ''
+  deleteAppDeleting = false
+  deleteAppTarget = app
+
+  const expected = `sudo rm ${app.name}`
+
+  openModal('Delete App', () => (
+    <Form onSubmit={(e: Event) => {
+      e.preventDefault()
+      const input = (e.target as HTMLFormElement).querySelector('input') as HTMLInputElement
+      deleteApp(input)
+    }}>
+      <p style={{ margin: '0 0 16px', color: theme('colors-textMuted') }}>
+        This will <strong style={{ color: theme('colors-error') }}>permanently delete</strong> <strong>{app.name}</strong> from the server.
+      </p>
+      <FormField>
+        <FormLabel for="delete-confirm">Type "{expected}" to confirm</FormLabel>
+        <FormInput
+          id="delete-confirm"
+          type="text"
+          placeholder={expected}
+          autofocus
+        />
+        {deleteAppError && <FormError>{deleteAppError}</FormError>}
+      </FormField>
+      <FormActions>
+        <Button type="button" onClick={closeModal} disabled={deleteAppDeleting}>
+          Cancel
+        </Button>
+        <Button type="submit" variant="danger" disabled={deleteAppDeleting}>
+          {deleteAppDeleting ? 'Deleting...' : 'Delete App'}
+        </Button>
+      </FormActions>
+    </Form>
+  ))
+}
+
 // Actions - call API then let SSE update the state
 const startApp = (name: string) => fetch(`/api/apps/${name}/start`, { method: 'POST' })
 const stopApp = (name: string) => fetch(`/api/apps/${name}/stop`, { method: 'POST' })
@@ -525,7 +606,7 @@ const AppDetail = ({ app }: { app: App }) => (
       </MainTitle>
       <HeaderActions>
         <Button>Settings</Button>
-        <Button variant="danger">Delete</Button>
+        <Button variant="danger" onClick={() => openDeleteAppModal(app)}>Delete</Button>
       </HeaderActions>
     </MainHeader>
     <MainContent>