init

frontend/src/components/MaterialPicker.vue

@@ -16,7 +16,7 @@
         <button
           v-for="mat in materialsByCategory(cat)"
           :key="mat.id"
-          @click="selectMaterial(mat.id)"
+          @click="selectMaterial(mat)"
           :class="[
             'flex flex-col rounded-lg border-2 p-3.5 text-left transition-all',
             store.materialId === mat.id
@@ -29,6 +29,18 @@
             <span class="text-xs font-medium text-gray-500">{{ mat.price_per_gram }} &#8381;/г</span>
           </div>
           <p class="mt-1 text-xs leading-relaxed text-gray-500">{{ mat.description }}</p>
+
+          <!-- Color palette -->
+          <div v-if="mat.color_options && mat.color_options.length" class="mt-2 flex flex-wrap gap-1">
+            <span
+              v-for="c in mat.color_options"
+              :key="c.hex || c"
+              class="h-4 w-4 rounded-full border border-gray-300"
+              :style="{ backgroundColor: c.hex || c }"
+              :title="c.name || c"
+            ></span>
+          </div>
+
           <div class="mt-2 flex flex-wrap gap-1.5">
             <span v-if="mat.properties.food_safe" class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-medium text-green-700">
               Food safe
@@ -43,11 +55,35 @@
         </button>
       </div>
     </div>
+
+    <!-- Color selection (shown when material is selected) -->
+    <div v-if="selectedMaterial && selectedMaterial.color_options && selectedMaterial.color_options.length" class="mt-5 rounded-lg border border-gray-200 bg-gray-50 p-4">
+      <h3 class="mb-3 text-sm font-semibold text-gray-700">Выберите цвет</h3>
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="c in selectedMaterial.color_options"
+          :key="c.hex || c"
+          @click="selectColor(c)"
+          :class="[
+            'flex items-center gap-2 rounded-lg border-2 px-3 py-1.5 text-xs font-medium transition-all',
+            store.color === (c.name || c)
+              ? 'border-primary-500 bg-white ring-1 ring-primary-500'
+              : 'border-gray-200 bg-white hover:border-gray-300',
+          ]"
+        >
+          <span
+            class="h-5 w-5 rounded-full border border-gray-300 flex-shrink-0"
+            :style="{ backgroundColor: c.hex || c }"
+          ></span>
+          <span class="text-gray-700">{{ c.name || c }}</span>
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
+import { computed, onMounted } from 'vue'
 import { useCalculatorStore } from '../stores/calculator'
 import { useMaterialsStore } from '../stores/materials'
 
@@ -63,8 +99,19 @@ function materialsByCategory(cat) {
   return materialsStore.materials.filter((m) => m.category === cat)
 }
 
-function selectMaterial(id) {
-  store.materialId = id
+const selectedMaterial = computed(() => {
+  if (!store.materialId) return null
+  return materialsStore.materials.find((m) => m.id === store.materialId)
+})
+
+function selectMaterial(mat) {
+  store.materialId = mat.id
+  store.color = null
+  store.result = null
+}
+
+function selectColor(c) {
+  store.color = c.name || c
   store.result = null
 }