feat(web): list-UX polish — Lucide icons, no-wrap cells, FK-link styling (#188)

Addresses three repo-owner reports from live testing:

1. **Icons (Lucide).** Installed `lucide-react` (the DESIGN_SYSTEM §7
   mandated library — one icon set, MIT, tree-shakeable). The mobile
   nav button now uses the `Menu` (3-line hamburger) icon; the list
   Filter button uses `ListFilter`. (Owner asked for "3 horizontal
   lines" — Lucide provides exactly that without adding a second icon
   system like Font Awesome.)
2. **Cell text no longer splits mid-value.** `@dar/ui` Table `<th>` /
   `<td>` get `whitespace-nowrap`; the table already lives in
   `overflow-x-auto`, so long values scroll horizontally (matches
   Django admin's changelist) instead of wrapping "Test Tenant" onto
   two lines.
3. **ForeignKey cells styled as links.** `FieldValueView` renders FK
   envelopes (`{id,label}`) with link styling; exported
   `isForeignKeyValue` from `@dar/data`. Full navigation to the related
   detail needs the column FK-target metadata (tracked in #184).

Verified: `pnpm -r typecheck` + `pnpm --filter @dar/web build` pass.
In-browser verification is the repo owner's.

Tier 4 (frontend). `lucide-react` is an app-level dep (apps/web), not
a generic-package dep; aligns with the existing DESIGN_SYSTEM choice.
Refs #184; ACCEPTANCE §2.4 / §2.8.

Co-authored-by: Martin Castro Laminrs <mcastro@laminr.ai>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 3 people

frontend/apps/web/package.json

@@ -15,6 +15,7 @@
     "@dar/api": "workspace:*",
     "@dar/data": "workspace:*",
     "@dar/ui": "workspace:*",
+    "lucide-react": "^1.16.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "react-router-dom": "^6.26.0"

frontend/apps/web/src/Layout.tsx

@@ -1,5 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import { useEffect, useMemo, useState } from 'react';
+import { Menu } from 'lucide-react';
 import { Link } from 'react-router-dom';
 
 import { useRegistry } from '@dar/data';
@@ -116,9 +117,7 @@ export function Layout({ children }: PropsWithChildren) {
           onClick={() => setDrawerOpen(true)}
           className="-ml-2 rounded p-2 hover:bg-gray-800"
         >
-          <span className="mb-1 block h-0.5 w-5 bg-current" />
-          <span className="mb-1 block h-0.5 w-5 bg-current" />
-          <span className="block h-0.5 w-5 bg-current" />
+          <Menu className="h-5 w-5" aria-hidden />
         </button>
         <Link to="/" onClick={closeDrawer} className="flex items-center gap-2 font-semibold">
           {BRAND_LOGO_URL && <img src={BRAND_LOGO_URL} alt="" className="h-5 w-5 rounded" />}

frontend/apps/web/src/components/FieldValueView.tsx

@@ -8,7 +8,7 @@
 // text (e.g. a `CharField` holding `<script>`) stays inert. The trust
 // boundary is identical to Django's `mark_safe`. See SECURITY.md + #172.
 
-import { isHtmlValue, renderValue, type FieldValue } from '@dar/data';
+import { isForeignKeyValue, isHtmlValue, renderValue, type FieldValue } from '@dar/data';
 
 interface FieldValueViewProps {
   value: FieldValue | undefined;
@@ -18,5 +18,13 @@ export function FieldValueView({ value }: FieldValueViewProps) {
   if (isHtmlValue(value)) {
     return <span dangerouslySetInnerHTML={{ __html: value.html }} />;
   }
+  // ForeignKey cells read as links (the related object's str()). Style
+  // them as links so they're visually navigable — matches Django
+  // admin's list_display FK columns. Full navigation to the related
+  // detail needs the column's FK-target metadata (tracked in #184);
+  // until then the row click (→ this row's detail) is the action.
+  if (isForeignKeyValue(value)) {
+    return <span className="text-blue-600 underline decoration-dotted">{value.label}</span>;
+  }
   return <>{renderValue(value)}</>;
 }

frontend/apps/web/src/pages/ListPage.tsx

@@ -6,6 +6,7 @@
 // the data layer's job.
 
 import { useMemo, useState } from 'react';
+import { ListFilter } from 'lucide-react';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 
 import {
@@ -141,11 +142,12 @@ export function ListPage() {
               type="button"
               onClick={() => setFilterOpen(true)}
               aria-haspopup="dialog"
-              className="shrink-0 rounded border border-gray-300 px-3 py-2 text-sm hover:bg-gray-100"
+              className="inline-flex shrink-0 items-center gap-1.5 rounded border border-gray-300 px-3 py-2 text-sm hover:bg-gray-100"
             >
+              <ListFilter className="h-4 w-4" aria-hidden />
               Filters
               {chips.length > 0 && (
-                <span className="ml-1 rounded-full bg-blue-600 px-1.5 py-0.5 text-xs text-white">
+                <span className="ml-0.5 rounded-full bg-blue-600 px-1.5 py-0.5 text-xs text-white">
                   {chips.length}
                 </span>
               )}

frontend/packages/data/src/format.ts

@@ -9,7 +9,13 @@ import type { FieldValue, ForeignKeyValue, HtmlValue } from '@dar/api';
 
 const EMPTY_PLACEHOLDER = '—';
 
-function isForeignKeyValue(value: unknown): value is ForeignKeyValue {
+/**
+ * True when the value is a ForeignKey envelope (`{ id, label }`) — the
+ * related object's pk + `str()`. Callers render it as a link so FK
+ * cells read as navigable, matching Django admin's `list_display` FK
+ * columns.
+ */
+export function isForeignKeyValue(value: unknown): value is ForeignKeyValue {
   return typeof value === 'object' && value !== null && 'id' in value && 'label' in value;
 }
 

frontend/packages/data/src/index.ts

@@ -27,6 +27,7 @@ export type {
   HtmlValue,
   ListResponse,
   ListRow,
+  LoginResponse,
   Permissions,
   RegistryAppEntry,
   RegistryModelEntry,
@@ -47,7 +48,7 @@ export type { DetailState } from './detail-context';
 export { createObject, updateObject, deleteObject } from './mutations';
 export type { CreateArgs, UpdateArgs, DeleteArgs } from './mutations';
 
-export { renderValue, isHtmlValue } from './format';
+export { renderValue, isHtmlValue, isForeignKeyValue } from './format';
 
 export { useSwrCache } from './swr-cache';
 export type { SwrState, UseSwrCacheArgs } from './swr-cache';

frontend/packages/ui/src/Table.tsx

@@ -54,7 +54,7 @@ export function Table<Row>({
                 <th
                   key={col.key}
                   scope="col"
-                  className={`px-4 py-2 font-medium ${align} ${sortable ? 'cursor-pointer hover:bg-gray-100' : ''}`}
+                  className={`whitespace-nowrap px-4 py-2 font-medium ${align} ${sortable ? 'cursor-pointer hover:bg-gray-100' : ''}`}
                   onClick={sortable ? () => onSort(col.key) : undefined}
                 >
                   <span className="inline-flex items-center gap-1">
@@ -78,7 +78,10 @@ export function Table<Row>({
                 className={onRowClick ? 'cursor-pointer hover:bg-gray-50' : ''}
               >
                 {columns.map((col) => (
-                  <td key={col.key} className={`px-4 py-2 ${ALIGN_CLASSES[col.align ?? 'left']}`}>
+                  <td
+                    key={col.key}
+                    className={`whitespace-nowrap px-4 py-2 ${ALIGN_CLASSES[col.align ?? 'left']}`}
+                  >
                     {col.render(row)}
                   </td>
                 ))}