Explore: cards can be dragged out to the inbox

One-directional drag support, joining the shared "kanban" group:
put: false and sort: false mean a card can leave Explore's list (to
unfile it via the sidebar's inbox) but the list can't receive a drop
itself (there's no status to assign an incoming card) or be reordered
by dragging (it's sorted by name regardless).

sortedCards moves from a computed to a ref rebuilt by a watch --
<draggable> splices its bound list in place as the user drags, which a
plain computed would just discard on its next recomputation. No local
@change handler is needed: the splice already happens locally, and the
inbox's own handler (AppSidebar) persists the move and reloads this
project's cards regardless of which side of the drag it's reacting to.

AppSidebar: widened the "is a project open" check for the post-drag
cards refresh back to both project routes (Explore's list is now also
a place a card can leave from), and reused the same route-name set
already defined for the sidebar's project switcher.

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

web/README.md

@@ -160,21 +160,31 @@ project) the way switching to a different project's id still does.
 ### Explore
 
 The flat card list, **sorted by name (case-insensitive)** via a `sortedCards`
-computed — there is no manual order here. Each row links to the card's own
+ref (rebuilt by a `watch` on the store's `cards.cards` -- a plain computed
-view (`/cards/:id` — see [Card detail](#card-detail)) and shows its status
+can't be handed to `<draggable>`, which splices its bound list in place as
-chip (`card.status.name` or "No status") next to the text; a delete button
+the user drags). Each row links to the card's own view (`/cards/:id` — see
-sits outside that link.
+[Card detail](#card-detail)); there is no manual order here, and no delete
+button either -- deleting lives on that view now.
+
+The list is a `<draggable>` too, but one-directional: `group: { name:
+'kanban', put: false }` and `sort: false` mean a card can be dragged *out* --
+to the sidebar's inbox, unfiling it from the project -- but Explore can't
+receive a drop itself (there's no status to put an incoming card in), nor
+reorder on its own drag (it's sorted by name regardless). No `@change`
+handler is needed on this side: `<draggable>` already splices the card out of
+`sortedCards` locally, and the inbox's own handler (see above) persists the
+move and reloads this project's `cards`, which rebuilds the list from the
+authoritative result regardless of which side reacted to the drop.
 
 ### Kanban
 
 One column per project status, in `position` order -- the inbox is *not* a
 column here; it's in the sidebar (see above), though it's still a valid drag
-source/target (the only view where that's true -- Explore has no draggable
+target as well as a source (unlike Explore, which can only send a card *to*
-list of its own, which the sidebar accounts for when deciding whether to
+the inbox, not receive one). Unlike the cards, statuses are this route's own
-refresh a project's cards after an inbox drag). Unlike the cards, statuses
+fetch (`GET /api/projects/:id/statuses`) -- Explore has no use for them.
-are this route's own fetch (`GET /api/projects/:id/statuses`) -- Explore has
+`board` is derived from `cards.cards` + those statuses and rebuilt by a
-no use for them. `board` is derived from `cards.cards` + those statuses and
+`watch` whenever either changes.
-rebuilt by a `watch` whenever either changes.
 
 Every drop — whether reordering within a column (`moved`) or dragging in from
 another column or the sidebar's inbox (`added`) — calls

web/src/components/AppSidebar.vue

@@ -89,10 +89,9 @@ async function onInboxChange(change: ColumnChange) {
   } catch (e) {
     inboxError.value = e instanceof ApiError ? e.message : 'Something went wrong.'
   } finally {
-    // The card may have come from (or gone to) the kanban board currently
+    // The card may have come from (or gone to) the project currently open --
-    // open -- the only place a project's cards are a drag target/source
+    // Explore can drag a card out (but not receive one), Kanban can do both.
-    // alongside the inbox (Explore has no draggable list of its own).
+    const openProjectId = ON_PROJECT_ROUTES.has(String(route.name)) ? Number(route.params.id) : null
-    const openProjectId = route.name === 'project-kanban' ? Number(route.params.id) : null
     await Promise.all([
       loadInbox(),
       openProjectId !== null ? cards.load(openProjectId) : Promise.resolve(),

web/src/style.css

@@ -546,6 +546,7 @@ h1 {
   border-radius: var(--radius-md);
   padding: 0.4rem 0.55rem;
   background: var(--surface);
+  cursor: grab;
 }
 
 /* Same hover treatment as .kanban-card -- just the border, no background
@@ -554,8 +555,12 @@ h1 {
   border-color: var(--accent);
 }
 
+.card-row--ghost {
+  opacity: var(--opacity-ghost);
+}
+
 /* Wraps the text + status badge -- the whole row is a link to the card's own
-   view, except the delete button (a sibling, so it isn't nested inside it). */
+   view. */
 .card-row__link {
   flex: 1;
   min-width: 0;

web/src/views/ProjectExploreView.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
+import draggable from 'vuedraggable'
 import CardRow from '../components/CardRow.vue'
 import { ApiError } from '../lib/api'
 import { useCardsStore } from '../stores/cards'
+import type { Card } from '../types'
 
 // The project's cards, flat and sorted by name -- ProjectView (the parent
 // layout) has already loaded them into this store, keyed to the current
@@ -19,10 +21,16 @@ const summary = computed(() => {
   return `${total} card${total === 1 ? '' : 's'}.`
 })
 
-// No manual order here -- sort by name, case-insensitively.
+// No manual order here -- sorted by name, case-insensitively -- but a plain
-const sortedCards = computed(() =>
+// computed can't be handed to <draggable> (it splices its bound list in
-  [...cards.cards].sort((a, b) => a.text.localeCompare(b.text, undefined, { sensitivity: 'base' })),
+// place as the user drags; a computed would just be recalculated over that
-)
+// and discard it). A ref rebuilt on every underlying change gives it
+// something real to mutate, the same way the kanban board's columns do.
+const sortedCards = ref<Card[]>([])
+function rebuildSortedCards() {
+  sortedCards.value = [...cards.cards].sort((a, b) => a.text.localeCompare(b.text, undefined, { sensitivity: 'base' }))
+}
+watch(() => cards.cards, rebuildSortedCards, { deep: true, immediate: true })
 
 async function onCreate() {
   submitting.value = true
@@ -46,9 +54,26 @@ async function onCreate() {
 
     <p v-if="cards.loading && !cards.loaded" class="muted">Loading…</p>
 
-    <ul v-else-if="sortedCards.length" class="cards">
+    <!-- No handler needed: dragging a card out (the only thing possible --
-      <CardRow v-for="card in sortedCards" :key="card.id" :card="card" />
+         put: false, sort: false) splices it out of `sortedCards` locally, and
-    </ul>
+         wherever it lands (the sidebar's inbox) persists the move and
+         reloads this project's cards, which rebuilds this list from the
+         authoritative result either way. -->
+    <draggable
+      v-else-if="sortedCards.length"
+      :list="sortedCards"
+      :group="{ name: 'kanban', put: false }"
+      :sort="false"
+      item-key="id"
+      tag="ul"
+      class="cards"
+      ghost-class="card-row--ghost"
+      :animation="150"
+    >
+      <template #item="{ element: card }: { element: Card }">
+        <CardRow :card="card" />
+      </template>
+    </draggable>
 
     <form class="kanban__new form--new-card" @submit.prevent="onCreate">
       <input