From 22e6bdf8b8a67ef9f6d76b17fc262a988a4caf6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9?=
 <donnalee11681676@gmail.com>
Date: Tue, 12 May 2026 10:19:21 +0300
Subject: [PATCH] =?UTF-8?q?feat(redesign):=20Task=2016=20=E2=80=94=20Kanba?=
 =?UTF-8?q?nView=20StatusPill=20+=20hover=20lift=20(motion=20#4)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../js/components/kanban/KanbanCard.vue       |  7 +++-
 .../js/components/kanban/KanbanColumn.vue     |  2 +-
 app/tests/Frontend/KanbanRedesign.spec.ts     | 39 +++++++++++++++++++
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 app/tests/Frontend/KanbanRedesign.spec.ts

diff --git a/app/resources/js/components/kanban/KanbanCard.vue b/app/resources/js/components/kanban/KanbanCard.vue
index 375c14a5..f0a28f68 100644
--- a/app/resources/js/components/kanban/KanbanCard.vue
+++ b/app/resources/js/components/kanban/KanbanCard.vue
@@ -18,7 +18,12 @@ function formatCost(cost: number): string {
 </script>
 
 <template>
-    <v-card variant="outlined" class="kanban-card pa-3 mb-2" density="compact" @click="emit('open', deal.id)">
+    <v-card
+        variant="outlined"
+        class="kanban-card ld-hover-lift pa-3 mb-2"
+        density="compact"
+        @click="emit('open', deal.id)"
+    >
         <div class="card-name">{{ deal.name }}</div>
         <div class="card-phone text-caption text-medium-emphasis">{{ deal.phone }}</div>
         <div class="card-meta mt-2">
diff --git a/app/resources/js/components/kanban/KanbanColumn.vue b/app/resources/js/components/kanban/KanbanColumn.vue
index a9ab89a6..0f925a08 100644
--- a/app/resources/js/components/kanban/KanbanColumn.vue
+++ b/app/resources/js/components/kanban/KanbanColumn.vue
@@ -54,7 +54,7 @@ function onDraggableChange(event: DraggableChangeEvent) {
     <div class="kanban-column">
         <header class="column-head" :style="{ '--accent': status.colorHex }">
             <div class="column-head-row">
-                <span class="column-name">{{ status.nameRu }}</span>
+                <span class="column-name ld-label">{{ status.nameRu }}</span>
                 <span class="column-count">{{ deals.length }}</span>
             </div>
             <div class="column-total">{{ formatTotal(total) }}</div>
diff --git a/app/tests/Frontend/KanbanRedesign.spec.ts b/app/tests/Frontend/KanbanRedesign.spec.ts
new file mode 100644
index 00000000..fb7d90ce
--- /dev/null
+++ b/app/tests/Frontend/KanbanRedesign.spec.ts
@@ -0,0 +1,39 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { createVuetify } from 'vuetify';
+import { createMemoryHistory, createRouter } from 'vue-router';
+import KanbanView from '../../resources/js/views/KanbanView.vue';
+
+// KanbanView содержит DealDetailDrawer (VNavigationDrawer) — требует
+// injected layout от v-app, недоступной в Vitest. Stub'им как в KanbanView.spec.ts.
+function setup() {
+    setActivePinia(createPinia());
+    const router = createRouter({
+        history: createMemoryHistory(),
+        routes: [{ path: '/', component: KanbanView }],
+    });
+    router.push('/');
+    return mount(KanbanView, {
+        global: {
+            plugins: [router, createVuetify()],
+            stubs: { RouterLink: true, DealDetailDrawer: true, NewDealDialog: true },
+        },
+    });
+}
+
+describe('KanbanView — redesigned', () => {
+    beforeEach(() => setActivePinia(createPinia()));
+
+    it('card containers have ld-hover-lift class', async () => {
+        const w = setup();
+        await flushPromises();
+        expect(w.html()).toMatch(/ld-hover-lift/);
+    });
+
+    it('column headers use ld-label class', async () => {
+        const w = setup();
+        await flushPromises();
+        expect(w.html()).toMatch(/ld-label/);
+    });
+});