Вынес стили для красивой скролл ленты + вынес компонент карточку в отдельный компонент

src/components/DroneParts.vue

@@ -6,22 +6,16 @@
     </button>
 
     <!-- Левая панель - список компонентов -->
-    <div class="parts-list">
+    <div class="parts-list scroll-strip">
-      <div 
+      <ListCard
         v-for="part in parts"
         :key="part.id"
-        class="part-item"
+        :title="part.name"
-        :class="{ active: selectedPart?.id === part.id }"
+        :subtitle="part.category"
+        :image="part.image"
+        :active="selectedPart?.id === part.id"
         @click="selectPart(part)"
-      >
+      />
-        <div class="part-image-wrapper">
-          <img :src="part.image" :alt="part.name" class="part-thumb" />
-        </div>
-        <div class="part-info">
-          <span class="part-name">{{ part.name }}</span>
-          <span class="part-category">{{ part.category }}</span>
-        </div>
-      </div>
     </div>
 
     <!-- Правая часть - детали -->
@@ -76,6 +70,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import ListCard from '@/components/UI/ListCard.vue'
 
 const emit = defineEmits(['back'])
 let db = null
@@ -273,85 +268,12 @@ onMounted(async () => {
 .parts-list {
   width: 300px;
   height: 100%;
-  overflow-y: auto;
   background: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(10px);
   border-right: 1px solid rgba(255, 255, 255, 0.1);
   margin-top: 0;
 }
 
-.parts-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.parts-list::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 3px;
-}
-
-.parts-list::-webkit-scrollbar-thumb {
-  background: #23aae3;
-  border-radius: 3px;
-}
-
-.part-item {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  padding: 15px;
-  margin: 8px 12px;
-  border-radius: 12px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  background: rgba(255, 255, 255, 0.05);
-}
-
-.part-item:hover {
-  background: rgba(35, 170, 227, 0.2);
-  transform: translateX(5px);
-}
-
-.part-item.active {
-  background: linear-gradient(135deg, #23aae3, #1a6d8f);
-  box-shadow: 0 4px 15px rgba(35, 170, 227, 0.3);
-}
-
-.part-image-wrapper {
-  width: 50px;
-  height: 50px;
-  flex-shrink: 0;
-}
-
-.part-thumb {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.part-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.part-name {
-  display: block;
-  font-size: 14px;
-  font-weight: 600;
-  color: #fff;
-  margin-bottom: 4px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.part-category {
-  display: block;
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.6);
-}
-
 /* Правая область */
 .main-area {
   flex: 1;

src/components/UI/ListCard.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { computed } from 'vue'
+
+const APP_LOGO = '/images/drone.png'
+
+const props = defineProps({
+    title: {
+        type: String,
+        required: true,
+    },
+    subtitle: {
+        type: String,
+        default: '',
+    },
+    image: {
+        type: String,
+        default: '',
+    },
+    active: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+defineEmits(['click'])
+
+const imageSrc = computed(() => props.image || APP_LOGO)
+</script>
+
+<template>
+    <div
+        class="list-card"
+        :class="{ 'list-card--active': active }"
+        :title="title"
+        @click="$emit('click')"
+    >
+        <div class="list-card__media">
+            <img
+                :src="imageSrc"
+                :alt="title"
+                :title="title"
+                class="list-card__image"
+            />
+        </div>
+        <div class="list-card__body">
+            <span class="list-card__title">{{ title }}</span>
+            <span v-if="subtitle" class="list-card__subtitle">{{ subtitle }}</span>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.list-card {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    padding: 15px;
+    margin: 8px 12px;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.list-card:hover {
+    background: rgba(35, 170, 227, 0.2);
+    transform: translateX(5px);
+}
+
+.list-card--active {
+    background: linear-gradient(135deg, #23aae3, #1a6d8f);
+    box-shadow: 0 4px 15px rgba(35, 170, 227, 0.3);
+}
+
+.list-card__media {
+    width: 50px;
+    height: 50px;
+    flex-shrink: 0;
+}
+
+.list-card__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.list-card__body {
+    flex: 1;
+    min-width: 0;
+}
+
+.list-card__title {
+    display: block;
+    font-size: 14px;
+    font-weight: 600;
+    color: #fff;
+    margin-bottom: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.list-card__subtitle {
+    display: block;
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.6);
+}
+</style>

src/renderer.js

@@ -3,6 +3,7 @@ import App from './App.vue';
 import router from './router';
 import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
 import 'prismjs/themes/prism-okaidia.css'
+import '@/styles/scroll-strip.css'
 
 import ContextMenu from '@imengyu/vue3-context-menu'
 

src/styles/scroll-strip.css

@@ -0,0 +1,30 @@
+/*
+ * Переиспользуемая скролл-лента.
+ * Подключение: import '@/styles/scroll-strip.css' (или через renderer.js).
+ * Использование: добавьте класс scroll-strip на прокручиваемый контейнер.
+ *
+ * Кастомизация через CSS-переменные на элементе или родителе:
+ *   --scroll-strip-width
+ *   --scroll-strip-track
+ *   --scroll-strip-thumb
+ *   --scroll-strip-radius
+ */
+.scroll-strip {
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--scroll-strip-thumb, #23aae3) var(--scroll-strip-track, rgba(255, 255, 255, 0.1));
+}
+
+.scroll-strip::-webkit-scrollbar {
+  width: var(--scroll-strip-width, 6px);
+}
+
+.scroll-strip::-webkit-scrollbar-track {
+  background: var(--scroll-strip-track, rgba(255, 255, 255, 0.1));
+  border-radius: var(--scroll-strip-radius, 3px);
+}
+
+.scroll-strip::-webkit-scrollbar-thumb {
+  background: var(--scroll-strip-thumb, #23aae3);
+  border-radius: var(--scroll-strip-radius, 3px);
+}