@prenta/admin 2.6.1 → 2.8.0

package/src/views/ScriptTags.tsx

@@ -9,8 +9,16 @@ import { ConfirmDialog } from '../components/ui/ConfirmDialog.js'
 import { FilterPill } from '../components/ui/FilterPill.js'
 import { RowActions, RowActionButton } from '../components/ui/RowActions.js'
 import { SearchInput } from '../components/ui/SearchInput.js'
-import { StatPill } from '../components/ui/StatPill.js'
+import { CountChip } from '../components/ui/CountChip.js'
 import { InspectorPane, SplitPaneLayout, SplitPaneList } from '../components/ui/InspectorPane.js'
+import {
+  cardCell,
+  cardColumnHeader,
+  cardRow,
+  cardRowGroup,
+  cardTable,
+} from '../components/ui/card-table.js'
+import { CardListControls } from '../components/ui/CardListControls.js'
 import {
   CONSENT_COLORS,
   CONSENT_LABELS,
@@ -248,7 +256,8 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
           </div>
         )}
 
-        <div className="mb-4 flex items-center justify-between">
+        {/* Actions sit level with the title (ScriptTags.html `.st-hdr-row`). */}
+        <div className="mb-4 flex items-start justify-between">
           <div>
             <h1 className="mb-1 text-[var(--txt)]">Script Tags</h1>
             <p className="text-sm text-[var(--sub)]">
@@ -256,39 +265,41 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
             </p>
             {tags.length > 0 && (
               <div className="mt-3 flex flex-wrap gap-1.5">
-                <StatPill value={tags.length} label="Total" />
-                <StatPill
-                  value={tags.filter((t) => t.enabled).length}
-                  label="Active"
-                  valueClassName="text-[var(--suc)]"
-                />
-                <StatPill
-                  value={tags.filter((t) => !t.enabled).length}
+                <CountChip n={tags.length} label="Total" />
+                <CountChip n={tags.filter((t) => t.enabled).length} label="Active" tone="ok" />
+                <CountChip
+                  n={tags.filter((t) => !t.enabled).length}
                   label="Inactive"
-                  valueClassName="text-[var(--muted)]"
+                  tone="muted"
                 />
-                <StatPill
-                  value={consentGatedCount}
+                <CountChip
+                  n={consentGatedCount}
                   label="Consent-gated"
-                  icon={<Shield size={12} className="text-[var(--acc)]" aria-hidden />}
+                  icon={<Shield className="text-acc" />}
                 />
               </div>
             )}
           </div>
-          <Button
-            type="button"
-            variant="primary"
-            size="md"
-            onClick={() => setSelection({ mode: 'new' })}
-            leftIcon={<Plus size={16} aria-hidden />}
-          >
-            New Script
-          </Button>
+          {/* Below 769px the create action floats above the tab bar. */}
+          <div data-header-actions="" className="flex items-center gap-2">
+            <Button
+              type="button"
+              variant="primary"
+              size="md"
+              onClick={() => setSelection({ mode: 'new' })}
+              leftIcon={<Plus size={16} aria-hidden />}
+              data-fab=""
+            >
+              New Script
+            </Button>
+          </div>
         </div>
 
         {tags.length > 0 && (
           <div className="mb-3 flex flex-wrap items-center gap-2">
-            <div className="w-full max-w-[260px]">
+            {/* ScriptTags.html `.st-search`: grows from 200px, never narrower
+                than 180px, at most 260px. */}
+            <div className="max-w-[260px] min-w-[180px] flex-[1_1_200px]">
               <SearchInput value={search} onChange={setSearch} placeholder="Search scripts…" />
             </div>
             <div className="flex gap-1" role="group" aria-label="Filter by location">
@@ -313,7 +324,10 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
                 </FilterPill>
               ))}
             </div>
-            <span className="ml-auto text-xs text-[var(--muted)]" aria-live="polite">
+            <span
+              className="ml-auto shrink-0 text-xs whitespace-nowrap text-[var(--muted)]"
+              aria-live="polite"
+            >
               {checkedIds.size > 0 ? (
                 <>
                   {checkedIds.size} selected ·{' '}
@@ -334,7 +348,7 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
       </div>
 
       <SplitPaneLayout>
-        <SplitPaneList className="p-4 pr-8 sm:pr-8">
+        <SplitPaneList className="mobile:pr-4 p-4 pr-8 sm:pr-8">
           {tags.length === 0 && !error ? (
             <div className="rounded-lg border border-[var(--bdr)] bg-[var(--card)] p-12 text-center">
               <Code2 className="mx-auto mb-3 h-10 w-10 text-[var(--sub)]" />
@@ -371,139 +385,205 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
               </button>
             </div>
           ) : (
-            <div className="overflow-x-auto rounded-lg border border-[var(--bdr)] bg-[var(--card)]">
-              {/* min-w keeps the 8 columns readable; narrow viewports scroll sideways. */}
-              <table className="w-full min-w-[920px] text-sm" aria-label="Script tags">
-                <thead>
-                  <tr className="bg-muted border-b border-[var(--bdr)]">
-                    <th className="w-9 px-3 py-3">
-                      <input
-                        type="checkbox"
-                        checked={allVisibleChecked}
-                        onChange={toggleAllChecked}
-                        aria-label={
-                          allVisibleChecked ? 'Deselect all scripts' : 'Select all scripts'
-                        }
-                        className="h-[15px] w-[15px] cursor-pointer accent-[var(--acc)]"
-                      />
-                    </th>
-                    <th className="px-4 py-3 text-left font-medium text-[var(--sub)]">Script</th>
-                    <th className="px-4 py-3 text-left font-medium text-[var(--sub)]">Location</th>
-                    <th className="px-4 py-3 text-center font-medium text-[var(--sub)]">
-                      Priority
-                    </th>
-                    <th className="px-4 py-3 text-left font-medium text-[var(--sub)]">Scope</th>
-                    <th className="px-4 py-3 text-left font-medium text-[var(--sub)]">Consent</th>
-                    <th className="px-4 py-3 text-center font-medium text-[var(--sub)]">Active</th>
-                    <th className="px-4 py-3 text-right font-medium text-[var(--sub)]">Updated</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {filteredTags.map((tag) => {
-                    const isSelected = selection?.mode === 'edit' && selection.id === tag.id
-                    const consent = CONSENT_COLORS[consentCategoryOf(tag)] ?? NO_CONSENT_COLORS
-                    return (
-                      <tr
-                        key={tag.id}
-                        className={`group cursor-pointer border-b border-[var(--bdr)] transition-colors last:border-0 ${
-                          isSelected ? 'bg-[var(--acc-l)]' : 'hover:bg-[var(--acc-l)]'
-                        }`}
-                        onClick={() => toggleRow(tag)}
+            <>
+              {/* Phones: the header's select-all, out of reach on cards. */}
+              <CardListControls
+                className="mb-2"
+                selectAll={{
+                  checked: allVisibleChecked,
+                  onChange: () => toggleAllChecked(),
+                }}
+              />
+              <div className="mobile:rounded-none mobile:border-0 mobile:bg-transparent overflow-x-auto rounded-lg border border-[var(--bdr)] bg-[var(--card)]">
+                {/* min-w keeps the 8 columns readable; narrow viewports scroll
+                  sideways. Below 769px the rows are cards instead. */}
+                <table
+                  {...cardTable}
+                  className="w-full min-w-[920px] text-sm"
+                  aria-label="Script tags"
+                >
+                  <thead {...cardRowGroup}>
+                    <tr {...cardRow} className="bg-muted border-b border-[var(--bdr)]">
+                      <th {...cardColumnHeader} className="w-9 px-3 py-3">
+                        <input
+                          type="checkbox"
+                          checked={allVisibleChecked}
+                          onChange={toggleAllChecked}
+                          aria-label={
+                            allVisibleChecked ? 'Deselect all scripts' : 'Select all scripts'
+                          }
+                          className="h-[15px] w-[15px] cursor-pointer accent-[var(--acc)]"
+                        />
+                      </th>
+                      <th
+                        {...cardColumnHeader}
+                        className="px-4 py-3 text-left font-medium text-[var(--sub)]"
+                      >
+                        Script
+                      </th>
+                      <th
+                        {...cardColumnHeader}
+                        className="px-4 py-3 text-left font-medium text-[var(--sub)]"
+                      >
+                        Location
+                      </th>
+                      <th
+                        {...cardColumnHeader}
+                        className="px-4 py-3 text-center font-medium text-[var(--sub)]"
+                      >
+                        Priority
+                      </th>
+                      <th
+                        {...cardColumnHeader}
+                        className="px-4 py-3 text-left font-medium text-[var(--sub)]"
+                      >
+                        Scope
+                      </th>
+                      <th
+                        {...cardColumnHeader}
+                        className="px-4 py-3 text-left font-medium text-[var(--sub)]"
+                      >
+                        Consent
+                      </th>
+                      <th
+                        {...cardColumnHeader}
+                        className="px-4 py-3 text-center font-medium text-[var(--sub)]"
                       >
-                        <td className="px-3 py-[11px]" onClick={(e) => e.stopPropagation()}>
-                          <input
-                            type="checkbox"
-                            checked={checkedIds.has(tag.id)}
-                            onChange={() => toggleChecked(tag.id)}
-                            aria-label={`Select ${tag.name}`}
-                            className="h-[15px] w-[15px] cursor-pointer accent-[var(--acc)]"
-                          />
-                        </td>
-                        <td className="px-4 py-[11px]">
-                          <button
-                            type="button"
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              toggleRow(tag)
-                            }}
-                            aria-expanded={isSelected}
-                            className="text-left font-medium text-[var(--txt)] hover:text-[var(--acc)]"
+                        Active
+                      </th>
+                      <th
+                        {...cardColumnHeader}
+                        className="px-4 py-3 text-right font-medium text-[var(--sub)]"
+                      >
+                        Updated
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody {...cardRowGroup}>
+                    {filteredTags.map((tag) => {
+                      const isSelected = selection?.mode === 'edit' && selection.id === tag.id
+                      const consent = CONSENT_COLORS[consentCategoryOf(tag)] ?? NO_CONSENT_COLORS
+                      return (
+                        <tr
+                          key={tag.id}
+                          {...cardRow}
+                          data-state={isSelected ? 'selected' : undefined}
+                          className={`group cursor-pointer border-b border-[var(--bdr)] transition-colors last:border-0 ${
+                            isSelected ? 'bg-[var(--acc-l)]' : 'hover:bg-[var(--acc-l)]'
+                          }`}
+                          onClick={() => toggleRow(tag)}
+                        >
+                          <td
+                            {...cardCell({ role: 'check' })}
+                            className="px-3 py-[11px]"
+                            onClick={(e) => e.stopPropagation()}
                           >
-                            {tag.name}
-                          </button>
-                          <div className="mt-0.5 text-[11.5px] text-[var(--muted)]">
-                            Added {formatDate(tag.createdAt)}
-                          </div>
-                        </td>
-                        <td className="px-4 py-[11px]">
-                          <span
-                            className={`inline-flex items-center rounded-[5px] px-2 py-[3px] text-[11.5px] font-medium ${PLACEMENT_COLORS[tag.placement] ?? 'bg-muted text-[var(--txt)]'}`}
+                            {/* The label is the card's 44px hit area on mobile. */}
+                            <label className="inline-flex cursor-pointer">
+                              <input
+                                type="checkbox"
+                                checked={checkedIds.has(tag.id)}
+                                onChange={() => toggleChecked(tag.id)}
+                                aria-label={`Select ${tag.name}`}
+                                className="h-[15px] w-[15px] cursor-pointer accent-[var(--acc)]"
+                              />
+                            </label>
+                          </td>
+                          <td {...cardCell({ role: 'title' })} className="px-4 py-[11px]">
+                            <button
+                              type="button"
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                toggleRow(tag)
+                              }}
+                              aria-expanded={isSelected}
+                              className="text-left font-medium text-[var(--txt)] hover:text-[var(--acc)]"
+                            >
+                              {tag.name}
+                            </button>
+                            <div className="mt-0.5 text-[11.5px] text-[var(--muted)]">
+                              Added {formatDate(tag.createdAt)}
+                            </div>
+                          </td>
+                          <td {...cardCell({ label: 'Location' })} className="px-4 py-[11px]">
+                            <span
+                              className={`inline-flex items-center rounded-[5px] px-2 py-[3px] text-[11.5px] font-medium ${PLACEMENT_COLORS[tag.placement] ?? 'bg-muted text-[var(--txt)]'}`}
+                            >
+                              {PLACEMENT_LABELS[tag.placement] ?? tag.placement}
+                            </span>
+                          </td>
+                          <td
+                            {...cardCell({ label: 'Priority' })}
+                            className="px-4 py-[11px] text-center"
                           >
-                            {PLACEMENT_LABELS[tag.placement] ?? tag.placement}
-                          </span>
-                        </td>
-                        <td className="px-4 py-[11px] text-center">
-                          <span className="inline-flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-[var(--bdr)] bg-[var(--bg)] text-[11.5px] font-semibold text-[var(--sub)]">
-                            {tag.priority}
-                          </span>
-                        </td>
-                        <td className="px-4 py-[11px] text-[var(--sub)]">{scopeLabel(tag)}</td>
-                        <td className="px-4 py-[11px]">
-                          <span
-                            className={`inline-flex items-center gap-[3px] rounded-[4px] px-[7px] py-0.5 text-[11px] font-medium ${consent.badge}`}
+                            <span className="inline-flex h-6 w-6 items-center justify-center rounded-full border-[1.5px] border-[var(--bdr)] bg-[var(--bg)] text-[11.5px] font-semibold text-[var(--sub)]">
+                              {tag.priority}
+                            </span>
+                          </td>
+                          <td
+                            {...cardCell({ label: 'Scope' })}
+                            className="px-4 py-[11px] text-[var(--sub)]"
                           >
+                            {scopeLabel(tag)}
+                          </td>
+                          <td {...cardCell({ label: 'Consent' })} className="px-4 py-[11px]">
                             <span
-                              className={`inline-block h-[5px] w-[5px] rounded-full ${consent.dot}`}
-                              aria-hidden
-                            />
-                            {CONSENT_LABELS[consentCategoryOf(tag)] ?? tag.consentCategory}
-                          </span>
-                        </td>
-                        <td
-                          className="px-4 py-[11px] text-center"
-                          onClick={(e) => e.stopPropagation()}
-                        >
-                          <EnabledSwitch
-                            checked={tag.enabled}
-                            disabled={togglingId === tag.id}
-                            onCheckedChange={(next) => void toggleEnabled(tag, next)}
-                            aria-label={`${tag.enabled ? 'Disable' : 'Enable'} ${tag.name}`}
-                          />
-                        </td>
-                        <td className="px-4 py-[11px]">
-                          <div className="flex items-center justify-end gap-2">
-                            <RowActions>
-                              <RowActionButton
-                                aria-label={`Duplicate ${tag.name}`}
-                                onClick={(e) => {
-                                  e.stopPropagation()
-                                  void duplicateTag(tag)
-                                }}
-                              >
-                                <Copy size={12} aria-hidden />
-                              </RowActionButton>
-                              <RowActionButton
-                                danger
-                                aria-label={`Delete ${tag.name}`}
-                                onClick={(e) => {
-                                  e.stopPropagation()
-                                  setPendingDelete(tag)
-                                }}
-                              >
-                                <Trash2 size={12} aria-hidden />
-                              </RowActionButton>
-                            </RowActions>
-                            <span className="text-xs whitespace-nowrap text-[var(--sub)]">
-                              {formatDate(tag.updatedAt)}
+                              className={`inline-flex items-center gap-[3px] rounded-[4px] px-[7px] py-0.5 text-[11px] font-medium ${consent.badge}`}
+                            >
+                              <span
+                                className={`inline-block h-[5px] w-[5px] rounded-full ${consent.dot}`}
+                                aria-hidden
+                              />
+                              {CONSENT_LABELS[consentCategoryOf(tag)] ?? tag.consentCategory}
                             </span>
-                          </div>
-                        </td>
-                      </tr>
-                    )
-                  })}
-                </tbody>
-              </table>
-            </div>
+                          </td>
+                          <td
+                            {...cardCell({ label: 'Active' })}
+                            className="px-4 py-[11px] text-center"
+                            onClick={(e) => e.stopPropagation()}
+                          >
+                            <EnabledSwitch
+                              checked={tag.enabled}
+                              disabled={togglingId === tag.id}
+                              onCheckedChange={(next) => void toggleEnabled(tag, next)}
+                              aria-label={`${tag.enabled ? 'Disable' : 'Enable'} ${tag.name}`}
+                            />
+                          </td>
+                          <td {...cardCell({ label: 'Updated' })} className="px-4 py-[11px]">
+                            <div className="flex items-center justify-end gap-2">
+                              <RowActions>
+                                <RowActionButton
+                                  aria-label={`Duplicate ${tag.name}`}
+                                  onClick={(e) => {
+                                    e.stopPropagation()
+                                    void duplicateTag(tag)
+                                  }}
+                                >
+                                  <Copy size={12} aria-hidden />
+                                </RowActionButton>
+                                <RowActionButton
+                                  danger
+                                  aria-label={`Delete ${tag.name}`}
+                                  onClick={(e) => {
+                                    e.stopPropagation()
+                                    setPendingDelete(tag)
+                                  }}
+                                >
+                                  <Trash2 size={12} aria-hidden />
+                                </RowActionButton>
+                              </RowActions>
+                              <span className="text-xs whitespace-nowrap text-[var(--sub)]">
+                                {formatDate(tag.updatedAt)}
+                              </span>
+                            </div>
+                          </td>
+                        </tr>
+                      )
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            </>
           )}
         </SplitPaneList>