fix(frontend): distinguish draft errors from empty state

Author: QuentinHourdeaux

frontend/src/features/draft/draft-list-screen.tsx

@@ -19,6 +19,7 @@ export function DraftListScreen() {
     statesById,
     drafts,
     showCapture,
+    showEmptyState,
     isLoadingDrafts,
     draftsLoadError,
     statesLoadError,
@@ -97,7 +98,7 @@ export function DraftListScreen() {
 
       {showCapture && (
         <div
-          className={drafts.length === 0
+          className={showEmptyState
             ? "draft-home__empty"
             : "draft-home__content"}
         >
@@ -133,10 +134,10 @@ export function DraftListScreen() {
             stacksById={stacksById}
             showStackContext
             onDraftCreated={handleDraftCreated}
-            formHeading={drafts.length === 0
+            formHeading={showEmptyState
               ? "Capture your first Draft"
               : undefined}
-            emptyLead={drafts.length === 0
+            emptyLead={showEmptyState
               ? "Record work in seconds without creating a Stack first."
               : undefined}
           />

frontend/src/features/draft/stack-draft-section.tsx

@@ -10,6 +10,7 @@ export function StackDraftSection({ stackId }: StackDraftSectionProps) {
     statesById,
     drafts,
     showCapture,
+    showEmptyState,
     isLoadingDrafts,
     draftsLoadError,
     statesLoadError,
@@ -70,7 +71,9 @@ export function StackDraftSection({ stackId }: StackDraftSectionProps) {
             showStackContext={false}
             stackId={stackId}
             onDraftCreated={handleDraftCreated}
-            emptyLead="Capture the first Draft for this Stack."
+            emptyLead={showEmptyState
+              ? "Capture the first Draft for this Stack."
+              : undefined}
           />
         </div>
       )}

frontend/src/features/draft/use-draft-list-data.ts

@@ -26,6 +26,7 @@ export interface UseDraftListDataResult {
   readonly statesById: ReadonlyMap<string, State>;
   readonly drafts: readonly Draft[];
   readonly showCapture: boolean;
+  readonly showEmptyState: boolean;
   readonly isLoadingDrafts: boolean;
   readonly draftsLoadError: string | null;
   readonly statesLoadError: string | null;
@@ -161,6 +162,8 @@ export const useDraftListData = ({
     : draftsCreatedDuringError;
   const showCapture = draftsState.kind === "ready" ||
     draftsState.kind === "error";
+  const showEmptyState = draftsState.kind === "ready" &&
+    draftsState.data.length === 0;
   const isLoadingDrafts = draftsState.kind === "loading";
   const draftsLoadError = draftsState.kind === "error"
     ? draftsState.message
@@ -173,6 +176,7 @@ export const useDraftListData = ({
     statesById,
     drafts,
     showCapture,
+    showEmptyState,
     isLoadingDrafts,
     draftsLoadError,
     statesLoadError,

frontend/tests/draft-list.test.tsx

@@ -671,8 +671,13 @@ describe("draft list screen", () => {
     });
 
     expect(
-      screen.getByRole("form", { name: "Capture your first Draft" }),
+      screen.getByRole("form", { name: "Capture Draft" }),
     ).toBeInTheDocument();
+    expect(
+      screen.queryByText(
+        "Record work in seconds without creating a Stack first.",
+      ),
+    ).not.toBeInTheDocument();
   });
 
   it("keeps the draft list error visible after creating during a list failure", async () => {
@@ -714,7 +719,7 @@ describe("draft list screen", () => {
     renderApp("/");
 
     const createForm = await screen.findByRole("form", {
-      name: "Capture your first Draft",
+      name: "Capture Draft",
     });
 
     await user.type(
@@ -1135,6 +1140,11 @@ describe("stack detail draft capture", () => {
     const createForm = await within(draftsSection).findByRole("form", {
       name: "Capture Draft",
     });
+    expect(
+      within(draftsSection).queryByText(
+        "Capture the first Draft for this Stack.",
+      ),
+    ).not.toBeInTheDocument();
 
     await user.type(
       within(createForm).getByLabelText("Title"),