color

apps/basic/index.tsx

@@ -1,4 +1,4 @@
-import { Hype } from 'hype'
+import { Hype } from '@because/hype'
 
 const app = new Hype
 

apps/clock/index.tsx

@@ -1,4 +1,4 @@
-import { Hype } from 'hype'
+import { Hype } from '@because/hype'
 import { define, stylesToCSS } from '@because/forge'
 
 const app = new Hype()

apps/profile/index.tsx

@@ -1,4 +1,4 @@
-import { Hype } from 'hype'
+import { Hype } from '@because/hype'
 
 const app = new Hype
 

src/cli/index.ts

@@ -276,18 +276,20 @@ async function getApp(name: string) {
   console.log(color.green(`✓ Downloaded ${name}`))
 }
 
-function isApp(): boolean {
+function getAppPackage(): { name?: string; scripts?: { toes?: string } } | null {
   try {
-    const pkg = JSON.parse(readFileSync(join(process.cwd(), 'package.json'), 'utf-8'))
+    return JSON.parse(readFileSync(join(process.cwd(), 'package.json'), 'utf-8'))
-    return !!pkg?.scripts?.toes
+  } catch {
-  } catch (e) {
+    return null
-    return false
   }
 }
 
+const isApp = () => !!getAppPackage()?.scripts?.toes
+
 function resolveAppName(name?: string): string | undefined {
   if (name) return name
-  if (isApp()) return basename(process.cwd())
+  const pkg = getAppPackage()
+  if (pkg?.scripts?.toes) return pkg.name || basename(process.cwd())
   console.error('No app specified and current directory is not a toes app')
   return undefined
 }
@@ -648,6 +650,22 @@ async function rmApp(arg?: string) {
 program
   .name('toes')
   .version('0.0.1', '-v, --version')
+  .addHelpText('beforeAll', (ctx) => {
+    if (ctx.command === program) {
+      return color.bold().cyan('\n🐾 Toes') + color.gray(' - personal web appliance\n')
+    }
+    return ''
+  })
+  .configureOutput({
+    writeOut: (str) => {
+      const colored = str
+        .replace(/^(Usage:)/gm, color.yellow('$1'))
+        .replace(/^(Commands:)/gm, color.yellow('$1'))
+        .replace(/^(Options:)/gm, color.yellow('$1'))
+        .replace(/^(Arguments:)/gm, color.yellow('$1'))
+      process.stdout.write(colored)
+    },
+  })
 
 program
   .command('info')

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' })
@@ -524,8 +605,8 @@ const AppDetail = ({ app }: { app: App }) => (
         {app.name}
       </MainTitle>
       <HeaderActions>
-        <Button>Settings</Button>
+        {/* <Button>Settings</Button> */}
-        <Button variant="danger">Delete</Button>
+        <Button variant="danger" onClick={() => openDeleteAppModal(app)}>Delete</Button>
       </HeaderActions>
     </MainHeader>
     <MainContent>