Refactor code structure for improved readability and maintainability

smariconde · smariconde · commit c6937e9da701 · 2026-05-06T20:23:20.000-03:00
diff --git a/.claude/agents/app-builder.md b/.claude/agents/app-builder.md
@@ -206,7 +206,7 @@ import { createId } from '@paralleldrive/cuid2'
 
 // Next.js
 import { revalidatePath } from 'next/cache'
-import { notFound } from 'next/navigation'
+import { notFound, redirect } from 'next/navigation'
 import Link from 'next/link'
 
 // UI — always use the barrel import, never sub-paths
diff --git a/.claude/rules/server-actions.md b/.claude/rules/server-actions.md
@@ -36,6 +36,29 @@ import { myTable } from '../../../apps/<appId>/db/schema'  // ✓
 import { myTable } from '@/apps/<appId>/db/schema'          // ✗ no alias
 ```
 
+## Delete and update actions
+
+Both delete and update actions must redirect after `revalidatePath`, otherwise the deleted item's detail page re-renders and triggers `notFound()` (delete), or the user stays stuck on the edit form with no feedback (update):
+
+```typescript
+export async function deleteItem(id: string) {
+  const db = getDb()
+  await db.delete(myTable).where(eq(myTable.id, id))
+  revalidatePath('/apps/<appId>')
+  redirect('/apps/<appId>')
+}
+
+export async function updateItem(id: string, formData: FormData) {
+  const db = getDb()
+  await db.update(myTable)...
+  revalidatePath('/apps/<appId>')
+  revalidatePath(`/apps/<appId>/${id}`)
+  redirect('/apps/<appId>')
+}
+```
+
+Import `redirect` from `'next/navigation'`.
+
 ## FormData conventions
 
 - Use `formData.get('fieldName') as string` — field name must match the HTML `name` attribute exactly.
diff --git a/README.md b/README.md
@@ -1,6 +1,11 @@
 <div align="center">
 
-# 🧩 AppAtelier
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="screenshots/logo.png">
+  <img src="screenshots/logo.png" alt="AppAtelier" width="140" />
+</picture>
+
+# AppAtelier
 
 **Build your own private app store. One repo, one deploy, infinite installable PWAs — described in plain language to a team of AI agents.**
 
@@ -25,6 +30,22 @@ One repo. One Vercel project. One wildcard DNS record. Every app you'll ever cre
 
 ---
 
+## Preview
+
+<p align="center">
+  <img src="screenshots/hub.png" alt="AppAtelier Hub — web launcher showing all your installed PWAs as an icon grid" width="90%" />
+</p>
+
+<p align="center">
+  <img src="screenshots/tasks.png" alt="Tasks PWA — task manager app with priorities and due dates" width="45%" />
+  &nbsp;&nbsp;
+  <img src="screenshots/habits.png" alt="Habits PWA — habit tracker with daily streak counting" width="45%" />
+</p>
+
+*The hub (top) shows your launcher at `yourdomain.com`. Below: Tasks and Habits — two of the four included example PWAs, each at its own subdomain and individually installable. All shown on mobile where they're designed to be installed and used.*
+
+---
+
 ## Quick start
 
 > **Requirements:** Node.js ≥20, pnpm ≥10, [Claude Code](https://claude.com/claude-code) (for the AI studio).
diff --git a/app/apps/_template/actions.ts b/app/apps/_template/actions.ts
@@ -1,6 +1,7 @@
 'use server'
 
 import { revalidatePath } from 'next/cache'
+import { redirect } from 'next/navigation'
 import { getDb } from '@hub/db'
 import { items } from '../../../apps/__APP_ID__/db/schema'
 import { eq } from 'drizzle-orm'
@@ -19,10 +20,12 @@ export async function updateItem(id: string, formData: FormData) {
   await db.update(items).set({ title, updatedAt: new Date() }).where(eq(items.id, id))
   revalidatePath('/apps/__APP_ID__')
   revalidatePath(`/apps/__APP_ID__/${id}`)
+  redirect('/apps/__APP_ID__')
 }
 
 export async function deleteItem(id: string) {
   const db = getDb()
   await db.delete(items).where(eq(items.id, id))
   revalidatePath('/apps/__APP_ID__')
+  redirect('/apps/__APP_ID__')
 }
diff --git a/app/apps/habits/[id]/page.tsx b/app/apps/habits/[id]/page.tsx
@@ -58,7 +58,7 @@ export default async function HabitPage({ params }: { params: Promise<{ id: stri
     <AppContainer>
       <PageHeader backHref="/apps/habits" />
 
-      <form action={updateHabitWithId} className="space-y-4" id="edit-form">
+      <form action={updateHabitWithId} className="space-y-4">
         <div
           className="w-4 h-4 rounded-full"
           style={{ backgroundColor: habit.color }}
@@ -107,22 +107,21 @@ export default async function HabitPage({ params }: { params: Promise<{ id: stri
             ))}
           </div>
         </div>
-      </form>
 
-      <div className="flex items-center justify-between pt-4 border-t border-zinc-800 mt-4">
-        <DeleteButton
-          formAction={deleteHabit.bind(null, id)}
-          confirmMessage="Delete this habit and all its entries?"
-        />
-        <button
-          type="submit"
-          form="edit-form"
-          className="text-zinc-950 text-sm font-semibold px-4 py-1.5 rounded-lg transition-colors hover:opacity-90"
-          style={{ backgroundColor: habit.color }}
-        >
-          Save
-        </button>
-      </div>
+        <div className="flex items-center justify-between pt-4 border-t border-zinc-800 mt-4">
+          <DeleteButton
+            formAction={deleteHabit.bind(null, id)}
+            confirmMessage="Delete this habit and all its entries?"
+          />
+          <button
+            type="submit"
+            className="text-zinc-950 text-sm font-semibold px-4 py-1.5 rounded-lg transition-colors hover:opacity-90"
+            style={{ backgroundColor: habit.color }}
+          >
+            Save
+          </button>
+        </div>
+      </form>
     </AppContainer>
   )
 }
diff --git a/app/apps/habits/actions.ts b/app/apps/habits/actions.ts
@@ -1,6 +1,7 @@
 'use server'
 
 import { revalidatePath } from 'next/cache'
+import { redirect } from 'next/navigation'
 import { getDb } from '@hub/db'
 import { habits, entries } from '../../../apps/habits/db/schema'
 import { eq, and } from 'drizzle-orm'
@@ -37,13 +38,15 @@ export async function updateHabit(id: string, formData: FormData) {
 
   revalidatePath('/apps/habits')
   revalidatePath(`/apps/habits/${id}`)
+  redirect('/apps/habits')
 }
 
 export async function deleteHabit(id: string) {
   const db = getDb()
   await db.delete(entries).where(eq(entries.habitId, id))
   await db.delete(habits).where(eq(habits.id, id))
   revalidatePath('/apps/habits')
+  redirect('/apps/habits')
 }
 
 export async function toggleEntry(habitId: string, date: string) {
diff --git a/app/apps/notes/actions.ts b/app/apps/notes/actions.ts
@@ -1,6 +1,7 @@
 'use server'
 
 import { revalidatePath } from 'next/cache'
+import { redirect } from 'next/navigation'
 import { getDb } from '@hub/db'
 import { notes } from '../../../apps/notes/db/schema'
 import { eq } from 'drizzle-orm'
@@ -34,10 +35,12 @@ export async function updateNote(id: string, formData: FormData) {
 
   revalidatePath('/apps/notes')
   revalidatePath(`/apps/notes/${id}`)
+  redirect('/apps/notes')
 }
 
 export async function deleteNote(id: string) {
   const db = getDb()
   await db.delete(notes).where(eq(notes.id, id))
   revalidatePath('/apps/notes')
+  redirect('/apps/notes')
 }
diff --git a/app/apps/tasks/actions.ts b/app/apps/tasks/actions.ts
@@ -1,6 +1,7 @@
 'use server'
 
 import { revalidatePath } from 'next/cache'
+import { redirect } from 'next/navigation'
 import { getDb } from '@hub/db'
 import { tasks } from '../../../apps/tasks/db/schema'
 import { eq, sql } from 'drizzle-orm'
@@ -55,10 +56,12 @@ export async function updateTask(id: string, formData: FormData) {
 
   revalidatePath('/apps/tasks')
   revalidatePath(`/apps/tasks/${id}`)
+  redirect('/apps/tasks')
 }
 
 export async function deleteTask(id: string) {
   const db = getDb()
   await db.delete(tasks).where(eq(tasks.id, id))
   revalidatePath('/apps/tasks')
+  redirect('/apps/tasks')
 }
diff --git a/packages/db/src/adapters/d1.ts b/packages/db/src/adapters/d1.ts
@@ -1,10 +1,8 @@
 /// <reference types="@cloudflare/workers-types" />
-import { drizzle } from 'drizzle-orm/d1'
 
-// D1 requires the CF Worker binding passed per-request (from CF Pages/Worker env).
-// In a Next.js on Cloudflare Pages context, set globalThis.__D1_BINDING__ = env.DB
-// in your CF Pages Function entry point before calling the Next.js handler.
 export function getDb(d1Binding?: D1Database) {
+  const { drizzle } = require('drizzle-orm/d1') as typeof import('drizzle-orm/d1')
+
   const binding =
     d1Binding ?? (globalThis as unknown as { __D1_BINDING__?: D1Database }).__D1_BINDING__
   if (!binding) {
diff --git a/packages/db/src/adapters/mysql.ts b/packages/db/src/adapters/mysql.ts
@@ -1,10 +1,11 @@
-import { drizzle } from 'drizzle-orm/mysql2'
-import mysql from 'mysql2/promise'
+import type { MySql2Database } from 'drizzle-orm/mysql2'
 
-let _db: ReturnType<typeof drizzle> | null = null
+let _db: MySql2Database<Record<string, never>> | null = null
 
 export function getDb() {
   if (!_db) {
+    const mysql = require('mysql2/promise')
+    const { drizzle } = require('drizzle-orm/mysql2') as typeof import('drizzle-orm/mysql2')
     const pool = mysql.createPool(process.env.DATABASE_URL!)
     _db = drizzle(pool as any)
   }
diff --git a/packages/db/src/adapters/postgres.ts b/packages/db/src/adapters/postgres.ts
@@ -1,12 +1,11 @@
-import { drizzle } from 'drizzle-orm/postgres-js'
-import postgres from 'postgres'
-
-let _db: ReturnType<typeof drizzle> | null = null
+let _db: ReturnType<typeof import('drizzle-orm/postgres-js').drizzle> | null = null
 
 export function getDb() {
   if (!_db) {
+    const postgres = require('postgres')
+    const { drizzle } = require('drizzle-orm/postgres-js') as typeof import('drizzle-orm/postgres-js')
     const client = postgres(process.env.DATABASE_URL!)
     _db = drizzle(client)
   }
-  return _db
+  return _db!
 }
diff --git a/packages/db/src/adapters/sqlite.ts b/packages/db/src/adapters/sqlite.ts
@@ -1,15 +1,15 @@
-import { drizzle } from 'drizzle-orm/better-sqlite3'
-import Database from 'better-sqlite3'
 import path from 'path'
 
-let _db: ReturnType<typeof drizzle> | null = null
+let _db: ReturnType<typeof import('drizzle-orm/better-sqlite3').drizzle> | null = null
 
 export function getDb(url?: string) {
   if (!_db) {
+    const Database = require('better-sqlite3')
+    const { drizzle } = require('drizzle-orm/better-sqlite3') as typeof import('drizzle-orm/better-sqlite3')
     const dbPath = url ?? process.env.DATABASE_URL ?? './local.db'
     const sqlite = new Database(path.resolve(dbPath))
     sqlite.pragma('journal_mode = WAL')
     _db = drizzle(sqlite)
   }
-  return _db
+  return _db!
 }
diff --git a/packages/db/src/adapters/turso.ts b/packages/db/src/adapters/turso.ts
@@ -1,15 +1,14 @@
-import { drizzle } from 'drizzle-orm/libsql'
-import { createClient } from '@libsql/client'
-
-let _db: ReturnType<typeof drizzle> | null = null
+let _db: ReturnType<typeof import('drizzle-orm/libsql').drizzle> | null = null
 
 export function getDb() {
   if (!_db) {
+    const { createClient } = require('@libsql/client') as typeof import('@libsql/client')
+    const { drizzle } = require('drizzle-orm/libsql') as typeof import('drizzle-orm/libsql')
     const client = createClient({
       url: process.env.DATABASE_URL!,
       authToken: process.env.DATABASE_AUTH_TOKEN,
     })
     _db = drizzle(client)
   }
-  return _db
+  return _db!
 }
diff --git a/packages/ui/src/components/delete-button.tsx b/packages/ui/src/components/delete-button.tsx
@@ -14,16 +14,15 @@ export function DeleteButton({
   label = 'Delete',
 }: DeleteButtonProps) {
   return (
-    <form action={formAction}>
-      <button
-        type="submit"
-        className="text-red-500 hover:text-red-400 text-sm transition-colors"
-        onClick={(e) => {
-          if (!confirm(confirmMessage)) e.preventDefault()
-        }}
-      >
-        {label}
-      </button>
-    </form>
+    <button
+      type="submit"
+      formAction={formAction}
+      className="text-red-500 hover:text-red-400 text-sm transition-colors"
+      onClick={(e) => {
+        if (!confirm(confirmMessage)) e.preventDefault()
+      }}
+    >
+      {label}
+    </button>
   )
 }
diff --git a/screenshots/habits.png b/screenshots/habits.png
diff --git a/screenshots/hub.png b/screenshots/hub.png
diff --git a/screenshots/logo.png b/screenshots/logo.png
diff --git a/screenshots/tasks.png b/screenshots/tasks.png
