Merge pull request #27 from QuentinHourdeaux/feat/draft-list-and-quick-create-ui

Add draft list and quick-create UI

Author: QuentinHourdeaux

docs/planned-prs/16-draft-list-and-quick-create-ui.md

@@ -0,0 +1,69 @@
+import { readJson } from "../lib/api/read-json.ts";
+
+export interface Draft {
+  readonly id: string;
+  readonly stackId: string | null;
+  readonly title: string;
+  readonly description: string;
+  readonly stateId: string;
+  readonly createdAt: string;
+  readonly updatedAt: string;
+}
+
+export interface CreateDraftInput {
+  readonly title: string;
+  readonly stackId?: string;
+}
+
+export interface ListDraftsFilter {
+  readonly stateId?: string;
+  readonly stackId?: string;
+}
+
+/** GET /api/drafts — list Drafts, optionally filtered by stateId and/or stackId. */
+export const listDrafts = async (
+  filter?: ListDraftsFilter,
+  signal?: AbortSignal,
+): Promise<Draft[]> => {
+  const searchParams = new URLSearchParams();
+
+  if (filter?.stateId !== undefined) {
+    searchParams.set("stateId", filter.stateId);
+  }
+
+  if (filter?.stackId !== undefined) {
+    searchParams.set("stackId", filter.stackId);
+  }
+
+  const query = searchParams.toString();
+  const path = query.length > 0 ? `/api/drafts?${query}` : "/api/drafts";
+  const response = await fetch(path, { signal });
+  const body = await readJson<{ drafts: Draft[] }>(response);
+  return body.drafts;
+};
+
+/** GET /api/drafts/:draftId — load one Draft by id. */
+export const getDraft = async (
+  draftId: string,
+  signal?: AbortSignal,
+): Promise<Draft> => {
+  const response = await fetch(`/api/drafts/${draftId}`, { signal });
+  return await readJson<Draft>(response);
+};
+
+/** POST /api/drafts — create a Draft. Omit stackId for a standalone Draft. */
+export const createDraft = async (
+  input: CreateDraftInput,
+  signal?: AbortSignal,
+): Promise<Draft> => {
+  const response = await fetch("/api/drafts", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(input),
+    signal,
+  });
+
+  return await readJson<Draft>(response);
+};

frontend/src/api/drafts.ts

@@ -18,6 +18,9 @@ export function AppShell() {
 
         <nav className="app-nav" aria-label="Main">
           <NavLink className="app-nav__link" to="/" end>
+            Drafts
+          </NavLink>
+          <NavLink className="app-nav__link" to="/stacks">
             Stacks
           </NavLink>
           <NavLink className="app-nav__link" to="/settings/states">

frontend/src/app/app-shell.tsx

@@ -1,5 +1,7 @@
 import { Route, Routes } from "react-router";
 import { AppShell } from "./app-shell.tsx";
+import { DraftDetailPage } from "./routes/draft-detail-page.tsx";
+import { DraftListPage } from "./routes/draft-list-page.tsx";
 import { NotFoundPage } from "./routes/not-found-page.tsx";
 import { StackDetailPage } from "./routes/stack-detail-page.tsx";
 import { StackListPage } from "./routes/stack-list-page.tsx";
@@ -9,8 +11,10 @@ export function App() {
   return (
     <Routes>
       <Route element={<AppShell />}>
-        <Route index element={<StackListPage />} />
+        <Route index element={<DraftListPage />} />
+        <Route path="stacks" element={<StackListPage />} />
         <Route path="stacks/:stackId" element={<StackDetailPage />} />
+        <Route path="drafts/:draftId" element={<DraftDetailPage />} />
         <Route path="settings/states" element={<StateSettingsPage />} />
         <Route path="*" element={<NotFoundPage />} />
       </Route>

frontend/src/app/app.tsx

@@ -0,0 +1,5 @@
+import { DraftDetailScreen } from "../../features/draft/draft-detail-screen.tsx";
+
+export function DraftDetailPage() {
+  return <DraftDetailScreen />;
+}

frontend/src/app/routes/draft-detail-page.tsx

@@ -0,0 +1,5 @@
+import { DraftListScreen } from "../../features/draft/draft-list-screen.tsx";
+
+export function DraftListPage() {
+  return <DraftListScreen />;
+}

frontend/src/app/routes/draft-list-page.tsx

@@ -14,7 +14,7 @@ export function NotFoundPage() {
       </p>
       <p>
         <Link className="page__action-link" to="/">
-          Back to Stacks
+          Back to Drafts
         </Link>
       </p>
     </section>