feat(tickets): conservation des tickets en sprint, affichage du statut & filtres (#37)

Les tickets restent rattachés à leur sprint ; SprintManager affiche le
statut et propose des filtres via useTicketSearch. Frontend / read-query.

QA vert : tsc --noEmit exit 0, vitest 62 fichiers / 623 tests passés.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/features/tickets/SprintManager.tsx

@@ -9,13 +9,22 @@
  *
  * Deleting a sprint UNASSIGNS its tickets (they fall back to the backlog); it
  * never deletes tickets — the confirmation says so explicitly.
+ *
+ * Ticket view (#37): the sprint tickets are read through this component's OWN
+ * {@link useTicketSearch} instance — independent of the main Tickets panel
+ * filter — so tickets stay visible once closed (no default `statuses` filter)
+ * and can be filtered/sorted per status/priority via the shared
+ * {@link TicketFacetsBar}. Rows show their {@link StatusBadge}/{@link
+ * PriorityBadge}. Grouping by sprint is done client-side on the returned rows.
  */
 
 import { useState } from "react";
 
 import { Button, Input } from "@/shared";
-import { TicketRef } from "./ticketMeta";
+import { PriorityBadge, StatusBadge, TicketRef } from "./ticketMeta";
+import { TicketFacetsBar } from "./TicketFacetsBar";
 import { TicketPicker } from "./TicketPicker";
+import { useTicketSearch } from "./useTicketSearch";
 import type { TicketsViewModel } from "./useTickets";
 
 export interface SprintManagerProps {
@@ -25,7 +34,11 @@ export interface SprintManagerProps {
 }
 
 export function SprintManager({ projectId, vm, onClose }: SprintManagerProps) {
-  const items = vm.list?.items ?? [];
+  // Own ticket query, independent of the main panel filter (#37). No default
+  // `statuses` → closed/done tickets remain visible; the facets bar below drives
+  // per-status/priority filtering + sort of the whole sprint view.
+  const search = useTicketSearch(projectId, { refreshOnEvents: true });
+  const items = search.rows;
   const sprints = [...vm.sprints].sort((a, b) => a.order - b.order);
 
   const [newName, setNewName] = useState("");
@@ -92,13 +105,37 @@ export function SprintManager({ projectId, vm, onClose }: SprintManagerProps) {
           </Button>
         </form>
 
+        {/* ── Sprint-ticket filters (#37) — independent of the main panel;
+            filters/sorts every sprint's tickets by status/priority/text. ── */}
+        <div className="mb-5">
+          <TicketFacetsBar
+            text={search.text}
+            onTextChange={search.setText}
+            statuses={search.statuses}
+            priorities={search.priorities}
+            onToggleStatus={search.toggleStatus}
+            onTogglePriority={search.togglePriority}
+            onClearFacets={search.clearFacets}
+            sort={search.sort}
+            onSortChange={search.setSort}
+          />
+        </div>
+
+        {search.error && (
+          <p
+            role="alert"
+            className="mb-4 rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-sm text-danger"
+          >
+            {search.error}
+          </p>
+        )}
+
         {sprints.length === 0 ? (
           <p className="text-sm text-muted">No sprints yet.</p>
         ) : (
           <ul className="flex flex-col gap-4">
             {sprints.map((sprint, index) => {
               const inSprint = items.filter((t) => t.sprintId === sprint.id);
-              const addable = items.filter((t) => t.sprintId !== sprint.id);
               const draft = renameDrafts[sprint.id] ?? sprint.name;
               return (
                 <li
@@ -180,7 +217,8 @@ export function SprintManager({ projectId, vm, onClose }: SprintManagerProps) {
                     </div>
                   </div>
 
-                  {/* ── Tickets in this sprint ── */}
+                  {/* ── Tickets in this sprint (with status/priority badges,
+                      #37; kept visible even once closed/done) ── */}
                   <div className="mt-3 flex flex-col gap-1">
                     {inSprint.length === 0 ? (
                       <p className="text-xs text-muted">No tickets in this sprint.</p>
@@ -195,6 +233,10 @@ export function SprintManager({ projectId, vm, onClose }: SprintManagerProps) {
                             <span className="min-w-0 flex-1 truncate text-content">
                               {t.title}
                             </span>
+                            <span className="flex shrink-0 items-center gap-1">
+                              <StatusBadge status={t.status} />
+                              <PriorityBadge priority={t.priority} />
+                            </span>
                             <Button
                               size="sm"
                               variant="ghost"
@@ -216,14 +258,12 @@ export function SprintManager({ projectId, vm, onClose }: SprintManagerProps) {
                         size="sm"
                         variant="ghost"
                         aria-label={`add ticket to sprint ${sprint.name}`}
-                        disabled={vm.busy || addable.length === 0}
+                        disabled={vm.busy}
                         onClick={() =>
                           setPickerSprint({ id: sprint.id, name: sprint.name })
                         }
                       >
-                        {addable.length === 0
-                          ? "No tickets to add"
-                          : "Ajouter des tickets"}
+                        Ajouter des tickets
                       </Button>
                     </div>
                   </div>
@@ -232,6 +272,20 @@ export function SprintManager({ projectId, vm, onClose }: SprintManagerProps) {
             })}
           </ul>
         )}
+
+        {/* More sprint tickets may exist beyond the first page (#37). */}
+        {search.hasMore && (
+          <div className="mt-4 flex justify-center">
+            <Button
+              size="sm"
+              variant="ghost"
+              loading={search.busy}
+              onClick={() => search.loadMore()}
+            >
+              Load more tickets
+            </Button>
+          </div>
+        )}
       </div>
 
       {/* ── Delete confirmation ── */}