From 4f299c6204604336468783be18ad205c98c9a345 Mon Sep 17 00:00:00 2001
From: claude <claude@verso>
Date: Sat, 13 Jun 2026 11:06:49 +0000
Subject: [PATCH] build 221: wider search bar, XS compact list view

Search bar: set min-width: 300px so the placeholder text is fully
visible. XS zoom level (value 0): adds lumiere-card-grid--compact class
which switches cards to horizontal rows, hides the thumbnail, and shows
only name / badge / owner / date / actions in a compact strip. Stored
0.75 from old S already fell back to 1 (S); new 0 is cleanly additive.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/project-list-lumiere.tsx       |  7 +-
 .../pages/project-list-lumiere.scss           | 90 +++++++++++++++++++
 2 files changed, 94 insertions(+), 3 deletions(-)

diff --git a/services/web/frontend/js/features/project-list/components/project-list-lumiere.tsx b/services/web/frontend/js/features/project-list/components/project-list-lumiere.tsx
index 41bb396701..94bdfa7274 100644
--- a/services/web/frontend/js/features/project-list/components/project-list-lumiere.tsx
+++ b/services/web/frontend/js/features/project-list/components/project-list-lumiere.tsx
@@ -30,8 +30,9 @@ import { TrashProjectButtonTooltip } from './table/cells/action-buttons/trash-pr
 
 // ── Tile zoom ─────────────────────────────────────────────────────────────────
 
-type ZoomLevel = 1 | 1.35 | 1.75
+type ZoomLevel = 0 | 1 | 1.35 | 1.75
 const ZOOM_OPTIONS: { value: ZoomLevel; label: string }[] = [
+  { value: 0, label: 'XS' },
   { value: 1, label: 'S' },
   { value: 1.35, label: 'M' },
   { value: 1.75, label: 'L' },
@@ -304,9 +305,9 @@ export function ProjectListLumiere() {
                 <p className="lumiere-empty">{t('no_projects')}</p>
               ) : (
                 <div
-                  className="lumiere-card-grid"
+                  className={`lumiere-card-grid${cardScale === 0 ? ' lumiere-card-grid--compact' : ''}`}
                   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                  style={{ '--lum-card-scale': cardScale } as React.CSSProperties}
+                  style={cardScale === 0 ? {} : ({ '--lum-card-scale': cardScale } as React.CSSProperties)}
                 >
                   {visibleProjects.map(project => (
                     <ProjectCard key={project.id} project={project} />
diff --git a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
index 4fa57ea3be..12502f1c24 100644
--- a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
+++ b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
@@ -341,6 +341,11 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
     flex-wrap: wrap;
   }
 
+  // Search bar — wide enough to show the full placeholder
+  form.project-search .form-control {
+    min-width: 300px;
+  }
+
   .lumiere-title {
     font-family: Georgia, 'Times New Roman', 'DejaVu Serif', serif !important;
     font-size: 2rem !important;
@@ -725,6 +730,91 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
     cursor: default;
   }
 
+  // ── XS compact list view ─────────────────────────────────────────────────
+  // Activated via .lumiere-card-grid--compact (cardScale === 0).
+  // Cards become flat rows; thumbnail is hidden; only name, badge, owner,
+  // date, and action strip remain.
+
+  .lumiere-card-grid--compact {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    margin-top: 0.5rem;
+
+    // Card row — horizontal instead of vertical
+    .lumiere-card {
+      flex-direction: row;
+
+      &:hover,
+      &:focus-within {
+        transform: none;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
+      }
+    }
+
+    // Checkbox: vertically centered in the row
+    .lumiere-card-checkbox {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    // Link area fills the row, items laid out horizontally
+    .lumiere-card-link {
+      flex-direction: row;
+      align-items: center;
+      padding: 0.45rem 0.75rem 0.45rem 2.2rem;
+      gap: 0.65rem;
+    }
+
+    // Hide the preview thumbnail
+    .lumiere-card-thumb {
+      display: none;
+    }
+
+    // Body becomes a horizontal strip
+    .lumiere-card-body {
+      flex-direction: row;
+      align-items: center;
+      gap: 0.65rem;
+      padding: 0;
+      flex: 1;
+      min-width: 0;
+    }
+
+    // Name stretches to fill remaining space, single line
+    .lumiere-card-name {
+      flex: 1;
+      min-width: 0;
+      font-size: 0.85rem;
+      -webkit-line-clamp: 1;
+    }
+
+    // More room for the owner label in list mode
+    .lumiere-card-owner {
+      max-width: 160px;
+    }
+
+    // Date sits inline, no top margin
+    .lumiere-card-date {
+      margin-top: 0;
+      flex-shrink: 0;
+    }
+
+    // Actions: vertical strip on the right, border-left instead of border-top
+    .lumiere-card-actions {
+      border-top: none;
+      border-left: 1px solid rgba($lum-teal, 0.10);
+      flex-direction: row;
+      align-self: stretch;
+      align-items: center;
+      padding: 0.25rem 0.4rem;
+
+      .action-btn {
+        padding: 3px !important;
+      }
+    }
+  }
+
   // ── Selection bar — tool buttons ──────────────────────────────────────────
 
   .lumiere-selection-bar {