From c2cefb6bc96bd7001a848fa4c3d69a8958a80d0c Mon Sep 17 00:00:00 2001
From: yiling ji <njjyl723@gmail.com>
Date: Mon, 16 Feb 2026 19:13:27 +0800
Subject: [PATCH] ui update

---
 src/ui/components/ExtractorDialog.tsx         |  2 +-
 src/ui/components/PageHeader.tsx              |  2 +-
 .../components/extractor/SelectionStage.tsx   | 60 +++++--------------
 3 files changed, 17 insertions(+), 47 deletions(-)

diff --git a/src/ui/components/ExtractorDialog.tsx b/src/ui/components/ExtractorDialog.tsx
index 82d0c5c..cc41273 100644
--- a/src/ui/components/ExtractorDialog.tsx
+++ b/src/ui/components/ExtractorDialog.tsx
@@ -190,7 +190,7 @@ export const ExtractorDialog: React.FC<ExtractorDialogProps> = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-[98vw] w-full h-[95vh] p-0 overflow-hidden bg-slate-50 border-none shadow-2xl rounded-2xl flex flex-col">
+      <DialogContent className="max-w-[98vw] w-full max-h-fit p-0 overflow-hidden bg-slate-50 border-none shadow-2xl rounded-2xl flex flex-col">
         <DialogTitle className="sr-only">Extractor</DialogTitle>
 
         {/* Top Navigation / Branding Bar (Optional, matches App feel) */}
diff --git a/src/ui/components/PageHeader.tsx b/src/ui/components/PageHeader.tsx
index e64ceb5..4befd75 100644
--- a/src/ui/components/PageHeader.tsx
+++ b/src/ui/components/PageHeader.tsx
@@ -44,7 +44,7 @@ export function PageHeader({
               </div>
             )}
             <h1 className="text-3xl md:text-5xl font-display font-black uppercase text-slate-900 tracking-tighter">
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-600 to-blue-600">
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-600 to-blue-600 pr-1">
                 {title}
               </span>
             </h1>
diff --git a/src/ui/components/extractor/SelectionStage.tsx b/src/ui/components/extractor/SelectionStage.tsx
index dfac9cd..8d1b04f 100644
--- a/src/ui/components/extractor/SelectionStage.tsx
+++ b/src/ui/components/extractor/SelectionStage.tsx
@@ -1,7 +1,9 @@
-import { ArrowRight, Check, Grid2X2 } from 'lucide-react'
+import { Check } from 'lucide-react'
 import React, { useState } from 'react'
 import { cn } from '../../lib/utils'
 import { CandidateAsset } from '../../types'
+import { Button } from '../ui/button'
+import { ScrollArea } from '../ui/scroll-area'
 
 interface SelectionStageProps {
   candidates: CandidateAsset[]
@@ -29,27 +31,10 @@ export const SelectionStage: React.FC<SelectionStageProps> = ({
   }
 
   return (
-    <div className="flex flex-col h-full w-full max-w-6xl mx-auto px-4 py-6">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-6 animate-fade-in-up">
-        <div>
-          <h2 className="text-2xl font-bold text-slate-800 flex items-center gap-2">
-            <Grid2X2 className="text-cyan-500" />
-            Select Candidates
-          </h2>
-          <p className="text-slate-500 text-sm mt-1">
-            Unselect any items you wish to exclude from refinement.
-          </p>
-        </div>
-        <div className="px-4 py-2 bg-white rounded-lg border border-slate-200 shadow-sm flex items-center gap-2">
-          <span className="text-cyan-600 font-bold text-lg">{selectedIndices.length}</span>
-          <span className="text-slate-500 text-sm">Selected</span>
-        </div>
-      </div>
-
+    <div className="flex flex-col max-h-[80vh] w-full max-w-6xl mx-auto px-4 py-2">
       {/* Grid */}
-      <div className="flex-1 overflow-y-auto min-h-0 pr-2 custom-scrollbar">
-        <div className="flex flex-wrap gap-4 pb-24 justify-center">
+      <ScrollArea className="h-full">
+        <div className="grid grid-cols-3 gap-2 p-1 h-full">
           {candidates.map((item, index) => {
             const isSelected = selectedIndices.includes(index)
             return (
@@ -57,22 +42,13 @@ export const SelectionStage: React.FC<SelectionStageProps> = ({
                 key={index}
                 onClick={() => toggleSelection(index)}
                 className={cn(
-                  'group relative w-[140px] h-[140px] rounded-xl overflow-hidden cursor-pointer transition-all duration-300 border-2 bg-white animate-fade-in-up flex-shrink-0',
+                  'group relative rounded-xl overflow-hidden cursor-pointer transition-all duration-300 border-2 bg-white animate-fade-in-up flex-shrink-0',
                   isSelected
                     ? 'border-cyan-500 shadow-lg shadow-cyan-100 scale-[1.02]'
                     : 'border-slate-200 opacity-80 hover:opacity-100 hover:border-slate-300',
                 )}
                 style={{ animationDelay: `${index * 50}ms` }}
               >
-                {/* Checkerboard bg */}
-                <div
-                  className="absolute inset-0 opacity-10 pointer-events-none"
-                  style={{
-                    backgroundImage: 'radial-gradient(#000 1px, transparent 1px)',
-                    backgroundSize: '8px 8px',
-                  }}
-                ></div>
-
                 <img
                   src={item.base64}
                   alt={item.name}
@@ -100,7 +76,7 @@ export const SelectionStage: React.FC<SelectionStageProps> = ({
                 </div>
 
                 {/* Label */}
-                <div className="absolute bottom-0 left-0 right-0 p-2 bg-white/90 backdrop-blur-sm border-t border-slate-100">
+                <div className="absolute bottom-0 left-0 right-0 p-2 bg-white/50 backdrop-blur-sm border-t border-slate-100">
                   <p className="text-xs font-bold text-slate-700 truncate">{item.name}</p>
                   <p className="text-[10px] text-slate-400 truncate uppercase">{item.category}</p>
                 </div>
@@ -108,30 +84,24 @@ export const SelectionStage: React.FC<SelectionStageProps> = ({
             )
           })}
         </div>
-      </div>
+      </ScrollArea>
 
       {/* Footer Actions */}
       <div className="absolute bottom-0 left-0 right-0 p-6 bg-white/80 backdrop-blur-md border-t border-slate-200 z-50">
         <div className="max-w-6xl mx-auto flex justify-end items-center gap-4">
-          <button
-            onClick={onCancel}
-            className="px-6 py-3 rounded-xl text-slate-500 font-medium hover:text-slate-800 hover:bg-slate-100 transition-colors"
-          >
-            Cancel
-          </button>
-          <button
+          <Button onClick={onCancel}>Cancel</Button>
+          <Button
             onClick={handleConfirm}
             disabled={selectedIndices.length === 0}
             className={cn(
-              'flex items-center gap-2 px-8 py-3 rounded-xl font-bold uppercase tracking-wide transition-all shadow-lg',
+              'flex items-center gap-2 px-8 py-3 font-bold uppercase tracking-wide transition-all shadow-lg',
               selectedIndices.length > 0
-                ? 'bg-gradient-to-r from-cyan-500 to-cyan-600 text-white shadow-cyan-200 hover:shadow-cyan-300 hover:-translate-y-0.5'
+                ? 'bg-gradient-to-r from-cyan-500 to-cyan-600 text-white'
                 : 'bg-slate-200 text-slate-400 cursor-not-allowed',
             )}
           >
-            Start Refining
-            <ArrowRight className="w-5 h-5" />
-          </button>
+            Start Refining ({selectedIndices.length})
+          </Button>
         </div>
       </div>
     </div>