Project configuration view: manage a project's statuses

New /projects/:id/configure view, linked from a new 'Configure' item on
the project view's Manage menu.

Backend:
- CardStatusRepository/CardStatusController gain full CRUD: create
  (appended at the end), reorder (dense positions, like card
  ordering), and delete.
- Deleting a status with cards attached is rejected with 409 and
  error.details.card_count, rather than hitting the existing FK
  RESTRICT constraint -- retrying with { reassign_to: <status id> }
  moves those cards to that status first (CardRepository::
  reassignStatus, appended after the destination's existing cards)
  and deletes in one transaction (CardStatusRepository::transaction,
  shared PDO connection across repositories).
- The last status in a project can't be deleted, since a project card
  is required to have one.
- Routes: POST/DELETE .../statuses(/:id), PUT .../statuses/order.
- 14 new CardStatusTest cases covering all of the above.

Frontend:
- ProjectConfigureView.vue: header (title, back-to-project link, the
  shared Manage menu) + a vuedraggable status list (reorder persists
  the whole new order) with a delete button per row and an add-status
  form. A row's plain delete either succeeds immediately or, on 409,
  opens a modal to choose a different status before retrying the
  delete with reassign_to.
- Extracted ProjectManageMenu.vue (the Manage dropdown + delete-project
  modal) out of ProjectView so both views share it; it now also has a
  Configure link (hidden on the configure page itself).
- ApiError gains a cardCount getter (details.card_count), mirroring
  the existing retryAfter getter.

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

web/src/views/ProjectView.vue

@@ -1,21 +1,19 @@
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import draggable from 'vuedraggable'
 import CardRow from '../components/CardRow.vue'
 import KanbanCard from '../components/KanbanCard.vue'
+import ProjectManageMenu from '../components/ProjectManageMenu.vue'
 import { ApiError, apiRequest } from '../lib/api'
 import { reorderColumn } from '../lib/cardOrder'
 import { useCardsStore } from '../stores/cards'
 import { useInboxStore } from '../stores/inbox'
-import { useProjectsStore } from '../stores/projects'
 import type { Card, CardStatus, Project } from '../types'
 
 const route = useRoute()
-const router = useRouter()
 const cards = useCardsStore()
 const inbox = useInboxStore()
-const projects = useProjectsStore()
 
 const projectId = Number(route.params.id)
 const project = ref<Project | null>(null)
@@ -32,12 +30,6 @@ const activeTab = ref<(typeof tabs)[number]['key']>('kanban')
 
 const titleDraft = ref('')
 
-const menuOpen = ref(false)
-const confirmingDelete = ref(false)
-const deleting = ref(false)
-const deleteError = ref<string | null>(null)
-const cancelButton = ref<HTMLButtonElement>()
-
 const newText = ref('')
 const submitting = ref(false)
 
@@ -108,24 +100,7 @@ watch(project, (value) => {
   if (value) titleDraft.value = value.title
 })
 
-watch(confirmingDelete, async (open) => {
-  if (open) {
-    await nextTick()
-    cancelButton.value?.focus()
-  }
-})
-
-onMounted(() => {
-  void load()
-  window.addEventListener('keydown', onKeydown)
-})
-onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
-
-function onKeydown(event: KeyboardEvent) {
-  if (event.key !== 'Escape') return
-  if (confirmingDelete.value) confirmingDelete.value = false
-  else if (menuOpen.value) menuOpen.value = false
-}
+onMounted(() => void load())
 
 async function load() {
   loadError.value = null
@@ -172,26 +147,6 @@ function saveTitle() {
   if (next !== project.value.title) void patchProject({ title: next })
 }
 
-function askDelete() {
-  menuOpen.value = false
-  deleteError.value = null
-  confirmingDelete.value = true
-}
-
-async function confirmDelete() {
-  deleting.value = true
-  deleteError.value = null
-  try {
-    await apiRequest(`/projects/${projectId}`, { method: 'DELETE', auth: true })
-    projects.reset()
-    cards.reset()
-    await router.push('/')
-  } catch (e) {
-    deleteError.value = e instanceof ApiError ? e.message : 'Could not delete the project.'
-    deleting.value = false
-  }
-}
-
 /** Run a store mutation, surfacing failures and resyncing from the server. */
 async function run(op: Promise<unknown>) {
   actionError.value = null
@@ -234,33 +189,11 @@ async function onCreate() {
           />
         </h1>
 
-        <div class="menu">
-          <button
-            type="button"
-            class="menu__toggle"
-            aria-haspopup="true"
-            :aria-expanded="menuOpen"
-            @click="menuOpen = !menuOpen"
-          >
-            Manage &#9662;
-          </button>
-
-          <template v-if="menuOpen">
-            <div class="menu__backdrop" @click="menuOpen = false" />
-            <ul class="menu__list" role="menu">
-              <li role="none">
-                <button
-                  type="button"
-                  role="menuitem"
-                  class="menu__item menu__item--danger"
-                  @click="askDelete"
-                >
-                  Delete project
-                </button>
-              </li>
-            </ul>
-          </template>
-        </div>
+        <ProjectManageMenu
+          :project-id="projectId"
+          :project-title="project.title"
+          :card-count="cards.cards.length"
+        />
       </div>
 
       <p v-if="actionError" class="form-error">{{ actionError }}</p>
@@ -336,36 +269,4 @@ async function onCreate() {
       </div>
     </template>
   </section>
-
-  <div
-    v-if="confirmingDelete"
-    class="modal"
-    role="dialog"
-    aria-modal="true"
-    aria-labelledby="confirm-delete-title"
-  >
-    <div class="modal__backdrop" @click="confirmingDelete = false" />
-    <div class="modal__dialog">
-      <h2 id="confirm-delete-title">Delete this project?</h2>
-      <p class="muted">
-        &ldquo;{{ project?.title }}&rdquo; and its {{ cards.cards.length }}
-        card{{ cards.cards.length === 1 ? '' : 's' }} will be permanently deleted.
-      </p>
-      <p v-if="deleteError" class="form-error">{{ deleteError }}</p>
-      <div class="modal__actions">
-        <button
-          ref="cancelButton"
-          type="button"
-          class="btn-secondary"
-          :disabled="deleting"
-          @click="confirmingDelete = false"
-        >
-          Cancel
-        </button>
-        <button type="button" class="btn-danger" :disabled="deleting" @click="confirmDelete">
-          {{ deleting ? 'Deleting…' : 'Delete project' }}
-        </button>
-      </div>
-    </div>
-  </div>
 </template>