Added 2 column

src/components/PreviewStep.tsx

@@ -5,7 +5,7 @@ import * as THREE from 'three';
 import JSZip from 'jszip';
 import { AppConfig, GeneratedPart, LayoutSplits } from '../types';
 import { createBinGeometry, generateSTL, exportSTL } from '../services/geometryGenerator';
-import { Download, Package, Info, Loader2, Share2, Check, Ruler } from 'lucide-react';
+import { Download, Package, Info, Loader2, Share2, Check, Ruler, MousePointer2 } from 'lucide-react';
 import { generateShareUrl } from '../utils/share';
 
 // --- DrawerFrame (Каркас) ---
@@ -42,17 +42,15 @@ const BinMesh: React.FC<BinMeshProps> = ({ part, thickness, cornerRadius, isSele
 
   return (
     <group position={[part.x + part.width/2, 0, part.y + part.depth/2]}>
-       {/* Модель */}
        <mesh geometry={geometry} onClick={(e) => { e.stopPropagation(); onClick(); }}>
          <meshStandardMaterial 
             color={isSelected ? '#f59e0b' : part.color} 
             roughness={0.5} 
             metalness={0.1}
-            side={THREE.DoubleSide} // <--- ИСПРАВЛЕНИЕ: Рисуем обе стороны стенки
+            side={THREE.DoubleSide}
          />
        </mesh>
        
-       {/* Белая обводка */}
        {isSelected && (
          <lineSegments geometry={edgesGeometry}>
             <lineBasicMaterial color="white" linewidth={2} />
@@ -145,6 +143,7 @@ export const PreviewStep: React.FC<Props> = ({ parts, config, splits }) => {
 
   return (
     <div className="flex flex-col h-full">
+      {/* Верхняя панель */}
       <div className="flex flex-col xl:flex-row justify-between items-center bg-slate-800/80 p-4 rounded-xl border border-slate-700 mb-4 gap-4 backdrop-blur-sm shadow-lg">
           <div className="flex flex-wrap items-center gap-6 justify-center md:justify-start">
               <div className="hidden md:flex items-center gap-2 text-gray-300 mr-2">
@@ -183,6 +182,7 @@ export const PreviewStep: React.FC<Props> = ({ parts, config, splits }) => {
       </div>
 
       <div className="flex flex-col lg:flex-row h-full gap-6 relative flex-1 min-h-0">
+        {/* 3D Viewer */}
         <div className="flex-1 bg-slate-900 rounded-xl overflow-hidden shadow-2xl border border-slate-800 relative min-h-[400px]">
           <div className="absolute top-4 right-4 z-10 bg-black/60 p-3 rounded-lg text-xs text-gray-300 backdrop-blur pointer-events-none border border-slate-700">
              <div className="flex items-center gap-2 mb-1 text-primary font-bold">
@@ -230,6 +230,7 @@ export const PreviewStep: React.FC<Props> = ({ parts, config, splits }) => {
           </Canvas>
         </div>
 
+        {/* Sidebar List (Grid Layout) */}
         <div className="w-full lg:w-96 bg-slate-900 p-6 rounded-xl border border-slate-800 flex flex-col h-full shadow-xl">
           <div className="flex justify-between items-center mb-6 shrink-0">
                <h2 className="text-xl font-bold flex items-center gap-2 text-primary">
@@ -245,27 +246,47 @@ export const PreviewStep: React.FC<Props> = ({ parts, config, splits }) => {
               </button>
           </div>
 
-          <div className="flex-1 overflow-y-auto pr-2 space-y-3 custom-scrollbar">
+          <div className="flex-1 overflow-y-auto pr-1 custom-scrollbar">
-              {parts.map(part => (
+              {/* --- GRID LAYOUT --- */}
-                  <div 
+              <div className="grid grid-cols-2 gap-3 pb-4">
-                      key={part.id} 
+                  {parts.map(part => (
-                      ref={(el) => { itemRefs.current[part.id] = el }}
+                      <div 
-                      className={`p-4 rounded-lg border transition-all cursor-pointer group ${selectedId === part.id ? 'bg-slate-800 border-accent shadow-md shadow-accent/10 ring-1 ring-accent' : 'bg-slate-800/50 border-slate-700 hover:border-slate-500 hover:bg-slate-800'}`}
+                          key={part.id} 
-                      onClick={() => setSelectedId(part.id)}
+                          ref={(el) => { itemRefs.current[part.id] = el }}
-                  >
+                          className={`
-                      <div className="flex justify-between items-center mb-2">
+                            p-3 rounded-lg border transition-all cursor-pointer group flex flex-col gap-3 relative overflow-hidden
-                          <span className="font-semibold text-gray-200">{part.name}</span>
+                            ${selectedId === part.id 
-                          <div className="w-3 h-3 rounded-full border border-white/10" style={{ backgroundColor: part.color }} />
+                                ? 'bg-slate-800 border-accent shadow-md shadow-accent/10 ring-1 ring-accent' 
-                      </div>
+                                : 'bg-slate-800/50 border-slate-700 hover:border-slate-500 hover:bg-slate-800'
-                      
+                            }
-                      <button 
+                          `}
-                          onClick={(e) => { e.stopPropagation(); handleDownload(part); }}
+                          onClick={() => setSelectedId(part.id)}
-                          className="w-full py-2.5 bg-slate-700 hover:bg-primary hover:text-white text-gray-300 rounded text-sm flex items-center justify-center gap-2 transition-colors font-medium mt-2"
                       >
-                          <Download size={16} /> Скачать STL
+                          {/* Цветной индикатор на фоне */}
-                      </button>
+                          <div 
-                  </div>
+                              className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-white/5 to-transparent rounded-bl-3xl pointer-events-none" 
-              ))}
+                              style={{ backgroundColor: part.color, opacity: 0.1 }} 
+                          />
+
+                          <div className="flex items-center justify-between z-10">
+                              <span className="font-bold text-gray-200 text-xs truncate" title={part.name}>
+                                  {part.name}
+                              </span>
+                              <div 
+                                  className="w-2.5 h-2.5 rounded-full border border-white/20 shadow-sm" 
+                                  style={{ backgroundColor: part.color }} 
+                              />
+                          </div>
+                          
+                          <button 
+                              onClick={(e) => { e.stopPropagation(); handleDownload(part); }}
+                              className="w-full py-1.5 bg-slate-700 hover:bg-primary hover:text-white text-gray-300 rounded text-xs flex items-center justify-center gap-1.5 transition-colors font-medium border border-slate-600 hover:border-primary"
+                          >
+                              <Download size={12} /> STL
+                          </button>
+                      </div>
+                  ))}
+              </div>
           </div>
         </div>
       </div>