Add a "new card" form to each kanban column

Each column gets its own form at the bottom (styled like the sidebar
inbox's), creating the card directly in that status, appended after
its existing cards.

- API: POST /projects/{id}/cards takes an optional status_id, which
  must belong to the project (422 otherwise); omitted, it still
  defaults to the project's first status as before. Position is
  already "end of that status" for free -- createInProject() already
  ranks by (owner, project, status).
- cards store: add() takes an optional statusId, forwarded as
  status_id when given.
- ProjectView: one draft string per status (keyed by status id) so
  typing in one column doesn't touch another's, mirroring the
  per-status independence the columns already have for reordering.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web/src/stores/cards.ts

@@ -32,11 +32,13 @@ export const useCardsStore = defineStore('cards', () => {
     }
   }
 
-  async function add(text: string): Promise<void> {
+  /** Adds to the project's first status, unless a particular one is given
+   * (e.g. a kanban column's own "new card" form) -- either way, at the end. */
+  async function add(text: string, statusId?: number): Promise<void> {
     const { card } = await apiRequest<{ card: Card }>(`/projects/${projectId.value}/cards`, {
       method: 'POST',
       auth: true,
-      body: { text },
+      body: statusId === undefined ? { text } : { text, status_id: statusId },
     })
     // The API appends the card, so the end of the array is its correct place.
     cards.value.push(card)

web/src/views/ProjectView.vue

@@ -134,6 +134,24 @@ async function onCreate() {
     submitting.value = false
   }
 }
+
+// --- add a card directly into one kanban column -- one draft per status, so
+// typing in one column's form doesn't touch another's.
+const newColumnCardText = ref<Record<number, string>>({})
+const addingToStatusId = ref<number | null>(null)
+
+async function onCreateInColumn(column: Column) {
+  addingToStatusId.value = column.statusId
+  actionError.value = null
+  try {
+    await cards.add(newColumnCardText.value[column.statusId] ?? '', column.statusId)
+    newColumnCardText.value[column.statusId] = ''
+  } catch (e) {
+    actionError.value = e instanceof ApiError ? e.message : 'Could not add the card.'
+  } finally {
+    addingToStatusId.value = null
+  }
+}
 </script>
 
 <template>
@@ -223,6 +241,21 @@ async function onCreate() {
                 <KanbanCard :card="element" />
               </template>
             </draggable>
+
+            <form class="kanban__new" @submit.prevent="onCreateInColumn(column)">
+              <input
+                v-model="newColumnCardText[column.statusId]"
+                class="field field--compact"
+                type="text"
+                maxlength="1000"
+                required
+                placeholder="New card"
+                :aria-label="`New card in ${column.title}`"
+              />
+              <button type="submit" :disabled="addingToStatusId === column.statusId">
+                {{ addingToStatusId === column.statusId ? 'Adding…' : 'Add' }}
+              </button>
+            </form>
           </section>
         </div>
       </div>