From 8fa001c6ed741eb5c2280ab1476fd677c3d01dfb Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Wed, 8 Apr 2026 16:11:37 +0200
Subject: [PATCH] feat: short description AI targeting 30% length + checkbox
 sync for near-duplicate dimensions

- EditPanel: short description prompts now target ~30% of the long description character count, preserving key highlights as flowing prose
- DimensionsView: near-duplicate clusters expanded view replaced with a flat checkbox list (SKU + name + current dims per row), a target-dimension dropdown, and a "Sync N selected" button that unifies inner dimensions across selected products via ConfirmModal

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/DimensionsView.tsx | 164 ++++++++++++++++++++++--------
 1 file changed, 122 insertions(+), 42 deletions(-)

diff --git a/src/components/DimensionsView.tsx b/src/components/DimensionsView.tsx
index 0d597e2..31b49ac 100644
--- a/src/components/DimensionsView.tsx
+++ b/src/components/DimensionsView.tsx
@@ -296,49 +296,119 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
               {nearDuplicateClusters.length} cluster{nearDuplicateClusters.length !== 1 ? 's' : ''} with dimensions differing &lt;1 cm per axis
             </span>
           </div>
-          {nearDuplicateClusters.map((cluster, ci) => (
-            <div key={ci} className="border border-violet-500/25 bg-violet-500/5 rounded-lg overflow-hidden">
-              <button
-                onClick={() => {
-                  const next = new Set(expandedNearDuplicates);
-                  next.has(ci) ? next.delete(ci) : next.add(ci);
-                  setExpandedNearDuplicates(next);
-                }}
-                className="w-full flex items-center gap-4 p-3 hover:bg-violet-500/10 transition-colors text-left"
-              >
-                {expandedNearDuplicates.has(ci) ? <ChevronDown className="w-4 h-4 text-slate-500 shrink-0" /> : <ChevronRight className="w-4 h-4 text-slate-500 shrink-0" />}
-                <div className="flex items-center gap-3 flex-wrap">
-                  {cluster.groups.map((g, gi) => (
-                    <span key={g.key} className="font-mono text-xs text-violet-300 bg-violet-400/10 px-2 py-0.5 rounded">
-                      {g.key} cm
-                      <span className="text-slate-500 ml-1">({cluster.volumes[gi].toLocaleString()} cm³)</span>
-                    </span>
-                  ))}
-                  <span className="text-xs text-violet-400/70">
-                    — max diff {cluster.maxDiffPct.toFixed(1)} cm
-                  </span>
-                </div>
-              </button>
-              {expandedNearDuplicates.has(ci) && (
-                <div className="border-t border-violet-500/20 px-4 py-3 space-y-2">
-                  {cluster.groups.map((g, gi) => (
-                    <div key={g.key} className="flex items-start gap-4 text-xs">
-                      <span className="font-mono text-violet-300 w-32 shrink-0 pt-0.5">{g.key} cm</span>
-                      <div>
-                        <span className="text-slate-400">{cluster.volumes[gi].toLocaleString()} cm³</span>
-                        <span className="text-slate-600 mx-2">·</span>
-                        <span className="text-slate-500">{g.rows.length} product{g.rows.length !== 1 ? 's' : ''}: </span>
-                        <span className="text-slate-400">
-                          {g.rows.slice(0, 5).map(r => r.row[COLUMNS.ARTICLE_NO]).join(', ')}
-                          {g.rows.length > 5 && <span className="text-slate-600"> +{g.rows.length - 5} more</span>}
-                        </span>
-                      </div>
+          {nearDuplicateClusters.map((cluster, ci) => {
+            const allClusterRows = cluster.groups.flatMap(g => g.rows);
+            const selection = clusterSelections[ci] ?? new Set<number>();
+            const targetKey = clusterSyncTargets[ci] ?? cluster.groups[0].key;
+
+            return (
+              <div key={ci} className="border border-violet-500/25 bg-violet-500/5 rounded-lg overflow-hidden">
+                <button
+                  onClick={() => {
+                    const next = new Set(expandedNearDuplicates);
+                    next.has(ci) ? next.delete(ci) : next.add(ci);
+                    setExpandedNearDuplicates(next);
+                  }}
+                  className="w-full flex items-center gap-4 p-3 hover:bg-violet-500/10 transition-colors text-left"
+                >
+                  {expandedNearDuplicates.has(ci) ? <ChevronDown className="w-4 h-4 text-slate-500 shrink-0" /> : <ChevronRight className="w-4 h-4 text-slate-500 shrink-0" />}
+                  <div className="flex items-center gap-3 flex-wrap flex-1">
+                    {cluster.groups.map((g, gi) => (
+                      <span key={g.key} className="font-mono text-xs text-violet-300 bg-violet-400/10 px-2 py-0.5 rounded">
+                        {g.key} cm
+                        <span className="text-slate-500 ml-1">({cluster.volumes[gi].toLocaleString()} cm³)</span>
+                      </span>
+                    ))}
+                    <span className="text-xs text-violet-400/70">— max diff {cluster.maxDiffPct.toFixed(1)} cm</span>
+                  </div>
+                  <span className="text-xs text-slate-500 shrink-0">{allClusterRows.length} products</span>
+                </button>
+
+                {expandedNearDuplicates.has(ci) && (
+                  <div className="border-t border-violet-500/20">
+                    {/* Sync toolbar */}
+                    <div className="flex items-center gap-3 px-4 py-2.5 bg-violet-500/5 border-b border-violet-500/10 flex-wrap">
+                      <span className="text-xs text-slate-400">Sync selected to:</span>
+                      <select
+                        value={targetKey}
+                        onChange={e => setClusterSyncTargets(prev => ({ ...prev, [ci]: e.target.value }))}
+                        className="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs text-white focus:outline-none focus:border-violet-500"
+                      >
+                        {cluster.groups.map(g => {
+                          const repr = g.rows[0].row;
+                          return (
+                            <option key={g.key} value={g.key}>
+                              {repr[COLUMNS.INNER_L]} × {repr[COLUMNS.INNER_W]} × {repr[COLUMNS.INNER_H]} cm
+                            </option>
+                          );
+                        })}
+                      </select>
+                      <button
+                        disabled={selection.size === 0}
+                        onClick={() => setPendingNearDupSync({ clusterIndex: ci, targetGroupKey: targetKey, selectedIndices: Array.from(selection) })}
+                        className="flex items-center gap-1.5 px-3 py-1 bg-violet-600/20 text-violet-400 hover:bg-violet-600 hover:text-white rounded text-xs font-medium transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+                      >
+                        <Layers className="w-3 h-3" />
+                        Sync {selection.size} selected
+                      </button>
+                      <button
+                        onClick={() => setClusterSelections(prev => ({ ...prev, [ci]: new Set(allClusterRows.map(r => r.index)) }))}
+                        className="text-xs text-slate-500 hover:text-slate-300 transition-colors"
+                      >
+                        Select all
+                      </button>
+                      {selection.size > 0 && (
+                        <button
+                          onClick={() => setClusterSelections(prev => ({ ...prev, [ci]: new Set() }))}
+                          className="text-xs text-slate-500 hover:text-slate-300 transition-colors"
+                        >
+                          Clear
+                        </button>
+                      )}
                     </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          ))}
+
+                    {/* Flat product list */}
+                    <div className="divide-y divide-violet-500/10">
+                      {allClusterRows.map(({ row, index }) => {
+                        const isSelected = selection.has(index);
+                        return (
+                          <div
+                            key={index}
+                            className={cn(
+                              "flex items-center gap-3 px-4 py-2.5 hover:bg-violet-500/5 cursor-pointer transition-colors",
+                              isSelected && "bg-violet-500/10"
+                            )}
+                            onClick={() => setClusterSelections(prev => {
+                              const current = new Set(prev[ci] ?? []);
+                              if (current.has(index)) current.delete(index); else current.add(index);
+                              return { ...prev, [ci]: current };
+                            })}
+                          >
+                            <input
+                              type="checkbox"
+                              checked={isSelected}
+                              onChange={() => {}}
+                              onClick={e => e.stopPropagation()}
+                              className="rounded border-slate-600 bg-slate-700 text-violet-600 focus:ring-violet-500 shrink-0"
+                            />
+                            <div className="flex-1 min-w-0">
+                              <div className="flex items-center gap-2">
+                                <span className="font-mono text-xs text-slate-300 font-medium shrink-0">{row[COLUMNS.ARTICLE_NO]}</span>
+                                <span className="text-xs text-slate-500 truncate">{row[COLUMNS.ARTICLE_NAME]}</span>
+                              </div>
+                            </div>
+                            <span className="font-mono text-xs text-violet-300 bg-violet-400/10 px-2 py-0.5 rounded shrink-0">
+                              {row[COLUMNS.INNER_L]} × {row[COLUMNS.INNER_W]} × {row[COLUMNS.INNER_H]} cm
+                            </span>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+              </div>
+            );
+          })}
         </div>
       )}
 
@@ -523,6 +593,16 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
         type="warning"
         confirmText="Sync Group"
       />
+
+      <ConfirmModal
+        isOpen={!!pendingNearDupSync}
+        onConfirm={executeNearDupSync}
+        onCancel={() => setPendingNearDupSync(null)}
+        title="Sync Inner Dimensions"
+        message={`Update inner dimensions to ${pendingNearDupSync?.targetGroupKey} cm for ${pendingNearDupSync?.selectedIndices.length} selected product${(pendingNearDupSync?.selectedIndices.length ?? 0) !== 1 ? 's' : ''}?`}
+        type="warning"
+        confirmText="Sync Dimensions"
+      />
     </div>
   );
 }