feat(web): collections management screen for manual + smart collections (#140)

Replaces the PlaceholderScreen at /app/collections with a real screen that
covers manual and smart collections, matching the SPA's extracted-screen
pattern (screens/CollectionsScreen.tsx; App.tsx gets only the route branch +
import).

Manual collections: list, create, rename, delete, and a per-row toggle for
UseCustomPlaybackOrder (PUT). Item management: an add-items picker that searches
the library (library/browse) and buckets results into the typed
AddItemsToCollectionRequest, plus per-item remove.

Smart collections: list, create, edit (name + query), delete, with a live
result preview that runs the query through library/browse.

API layer: new api/collections.ts owns the typed CRUD (getCollections/
getSmartCollections moved here from schedules.ts; schedules imports them). Unit
tests cover the client, the add-items bucket mapping, and the screen.

Honest gap: no API endpoint lists a manual collection's items by id. The items
view uses a best-effort collection:"name" Lucene search (movies/shows/seasons/
artists only) behind a prominent note. Multi/rerun/playlist collections are out
of scope (no API) and pointed to the Classic UI. Follow-ups #151/#152/#153.

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

web/src/shell.css

@@ -3428,3 +3428,168 @@
   }
 }
 
+
+/* ---------- collections screen (#140) ---------- */
+.ctv-collections {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5, 10px);
+}
+
+.ctv-collections-loading,
+.ctv-collections-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4, 8px);
+  padding: var(--space-8, 20px);
+  color: var(--text-secondary);
+  font-size: var(--text-sm, 13px);
+}
+
+.ctv-collections-detail-title {
+  font-size: var(--text-sm, 13px);
+  font-weight: var(--weight-medium, 500);
+  color: var(--text-primary);
+}
+
+.ctv-collections-linkbtn {
+  border: 0;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  padding: 0;
+  color: var(--text-primary);
+  font: inherit;
+  font-weight: var(--weight-medium, 500);
+}
+
+.ctv-collections-linkbtn:hover {
+  color: var(--ctv-accent);
+}
+
+.ctv-collections-order-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3, 6px);
+  color: var(--text-secondary);
+  font-size: var(--text-xs, 12px);
+  cursor: pointer;
+}
+
+.ctv-collections-query {
+  margin-top: 3px;
+  font: var(--text-2xs) / 1.3 var(--font-mono);
+  color: var(--text-disabled);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 520px;
+}
+
+/* smart-collection preview + picker */
+.ctv-collections-preview {
+  margin-top: 12px;
+  border: 1px solid var(--border-hairline);
+  border-radius: var(--radius-sm, 5px);
+  background: var(--ctv-bg-sunken);
+  padding: var(--space-5, 10px);
+}
+
+.ctv-collections-preview-head {
+  margin-bottom: var(--space-4, 8px);
+}
+
+.ctv-collections-preview-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 220px;
+  overflow-y: auto;
+}
+
+.ctv-collections-preview-list li {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4, 8px);
+  font-size: var(--text-xs, 12px);
+  color: var(--text-secondary);
+}
+
+.ctv-collections-preview-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary);
+}
+
+.ctv-collections-preview-type,
+.ctv-collections-preview-empty {
+  font: var(--text-2xs) / 1 var(--font-mono);
+  color: var(--text-disabled);
+}
+
+.ctv-collections-picker-note {
+  margin: 10px 0 0;
+  font: var(--text-2xs) / 1.4 var(--font-sans);
+  color: var(--text-disabled);
+}
+
+.ctv-collections-picker-results {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.ctv-collections-picker-empty {
+  padding: var(--space-7, 16px);
+  text-align: center;
+  color: var(--text-disabled);
+  font-size: var(--text-xs, 12px);
+}
+
+.ctv-collections-picker-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4, 8px);
+  width: 100%;
+  border: 1px solid var(--border-hairline);
+  border-radius: var(--radius-sm, 5px);
+  background: var(--surface-card);
+  padding: var(--space-4, 8px) var(--space-5, 10px);
+  cursor: pointer;
+  font: inherit;
+  color: var(--text-primary);
+  text-align: left;
+}
+
+.ctv-collections-picker-row-active {
+  background: color-mix(in srgb, var(--action-primary) 12%, transparent);
+  border-color: color-mix(in srgb, var(--action-primary) 35%, transparent);
+}
+
+.ctv-collections-picker-row-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-sm, 13px);
+}
+
+.ctv-collections-picker-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--action-primary);
+}