feat: add info kanban + filters, fix: colors + types, refactoring

src/entities/board/model/types.ts

@@ -1,4 +1,4 @@
-import type { UserType } from '@/entities/user/model';
+import type { User } from '@/entities/user/model';
 
 type DateParams = {
   createdAt?: Date;
@@ -10,12 +10,15 @@ export interface BoardPreview extends DateParams {
   _id: string;
   title: string;
   description: string;
-  users: UserType[];
+  users: User[];
 }
 
 export interface Board extends DateParams {
   _id: string;
   columns?: Column[];
+  name: string;
+  users: User[];
+  status: 'work' | 'archive' | 'closed';
 }
 
 type Tag = {
@@ -29,7 +32,8 @@ export interface Card extends DateParams {
   priority: 'none' | 'low' | 'medium' | 'high';
   tags?: Tag[];
   chat?: boolean;
-  users: UserType[];
+  chatCount?: number;
+  users: User[];
 }
 
 export interface Column extends DateParams {

src/entities/board/ui/BoardPreviewCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import type { UserType } from '@/entities/user/model';
+import type { User} from '@/entities/user/model';
 import { UserAvatar } from '@/entities/user';
 import type { BoardPreview } from '../model';
 
@@ -12,7 +12,7 @@ defineProps<{
 const { t } = useI18n();
 
 const userPosition = computed(() => {
-  return (board: BoardPreview, user: UserType) => {
+  return (board: BoardPreview, user: User) => {
     return (board.users.length - 1 - +user._id!) * 12;
   };
 });

src/entities/board/ui/CardItem.vue

@@ -39,7 +39,7 @@ const priority = computed(() => {
         <span> #{{ card._id }}</span>
         <div v-if="card.chat" :class="$style.messages">
           <MessagesSquare :size="14" />
-          <span>2</span>
+          <span>{{ card.chatCount }}</span>
         </div>
       </div>
       <div :class="$style.right_container">

src/entities/board/ui/ColumnItem.vue

@@ -2,6 +2,7 @@
 import { useDark } from '@vueuse/core';
 import { Ellipsis, Plus } from 'lucide-vue-next';
 import type { Column } from '../model';
+import { useI18n } from 'vue-i18n';
 
 defineProps<{
   column: Column;
@@ -11,6 +12,7 @@ defineOptions({
 });
 
 const isDark = useDark();
+const { t } = useI18n();
 
 defineSlots<{
   content: () => any;
@@ -31,9 +33,9 @@ defineSlots<{
       <slot name="content" />
     </div>
     <div :class="$style.bottom">
-      <div :class="$style.add">
+      <div class="text-sm" :class="$style.add">
         <Plus :size="16" :color="isDark ? 'var(--zinc-300)' : 'var(--zinc-500)'" />
-        Add card
+        {{ t('kanban.cards.add') }}
       </div>
     </div>
   </div>
@@ -56,9 +58,12 @@ defineSlots<{
   scroll-margin: 8px;
 
   .top_part {
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 999;
     padding: 0.8rem;
     border-radius: 12px 12px 0 0;
-    // border-bottom: 1px solid #ddd;
     background-color: #f9f9f9;
     cursor: grab;
     display: flex;
@@ -70,9 +75,12 @@ defineSlots<{
 
   .content {
     padding: 6px;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
+
+    & > div {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
   }
 
   .name {

src/entities/user/model/types.ts

@@ -4,13 +4,13 @@ type DateParams = {
   deletedAt?: Date;
 };
 
-export interface UserType extends DateParams {
+export interface User extends DateParams {
   _id?: string;
   email: string;
   photoUrl?: string;
   role?: string;
 }
 
-export interface UserAuth extends UserType {
+export interface UserAuth extends User {
   token: string;
 }

src/entities/user/model/user.store.ts

@@ -1,9 +1,9 @@
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
-import type { UserType } from './types';
+import type { User } from './types';
 
 export const useUserStore = defineStore('user', () => {
-  const user = ref({} as UserType);
+  const user = ref({} as User);
 
   return {
     user

src/features/boards/add-board/ui/CreationBoard.vue

@@ -40,7 +40,7 @@ const open = () => {
   min-width: 220px;
   height: 120px;
   border-radius: 15px;
-  color: var(--purple-main);
+  color: var(--zinc-600);
   cursor: pointer;
   display: flex;
   align-items: center;

src/features/filter/ui/SearchFilter.vue

@@ -31,7 +31,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div :class="$style.search_container">
+  <div :class="$style.search_container" :style="{ marginBottom: isExpanded ? '15px' : '16px' }">
     <Search
       :class="[isExpanded ? $style.icon : $style.icon_no_expanded]"
       :color="iconColor"
@@ -45,7 +45,11 @@ const { t } = useI18n();
       :placeholder="t('sidebar.input')"
       :class="$style.input_filter"
     />
-    <UiBadge v-show="isExpanded" variant="secondary" :class="$style.badge">
+    <UiBadge
+      variant="secondary"
+      :class="$style.badge"
+      :style="{ top: isExpanded ? '50%' : '20%', right: isExpanded ? '8px' : '-2px' }"
+    >
       <span>⌘</span>
       <span>K</span>
     </UiBadge>
@@ -56,7 +60,6 @@ const { t } = useI18n();
 .search_container {
   position: relative;
   height: 32px;
-  margin-bottom: 15px;
 
   .icon {
     position: absolute;
@@ -89,8 +92,6 @@ const { t } = useI18n();
 
   .badge {
     position: absolute;
-    right: 8px;
-    top: 50%;
     height: 16px;
     transform: translateY(-50%);
     padding-left: 4px;

src/features/kanban/ui/AddColumn.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { useDark } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
 import { Plus } from 'lucide-vue-next';
 
 const isDark = useDark();
+const { t } = useI18n();
 </script>
 
 <template>
-  <div :class="$style.block">
+  <div class="text-sm" :class="$style.block">
     <Plus :size="16" :color="isDark ? 'var(--zinc-300)' : 'var(--zinc-500)'" />
-    Add new column
+    {{ t('kanban.new') }}
   </div>
 </template>
 
@@ -26,6 +28,7 @@ const isDark = useDark();
   border-radius: 12px;
   padding: 0.8rem;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  font-weight: 500;
 }
 
 :global(html.dark) {

src/features/kanban/ui/DragColumns.vue

@@ -50,6 +50,7 @@ const dragOptions = ref({
   flex-direction: row;
   list-style: none;
   gap: 15px;
+  max-height: 100%;
 }
 
 .flip-list-move {

src/features/kanban/ui/RemoveBoard.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { UiButton } from '@/shared/ui';
+import { Trash2 } from 'lucide-vue-next';
+</script>
+
+<template>
+  <UiButton :variant="'dashed'" :size="'sm'" :class="$style.trash">
+    <Trash2 :size="16" />
+  </UiButton>
+</template>
+
+<style module lang="scss">
+.trash {
+  height: 30px;
+  gap: 8px;
+
+  & > svg {
+    color: var(--zinc-500);
+  }
+}
+
+:global(html.dark) {
+  .trash {
+    background-color: transparent;
+    &:hover {
+      background-color: transparent;
+      border-color: var(--zinc-500);
+    }
+    & > svg {
+      color: var(--zinc-300);
+    }
+  }
+}
+</style>

src/features/kanban/ui/SettingsSheet.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { UiButton, UiSheet } from '@/shared/ui';
+import type { SheetElement } from '@/shared/ui';
+import { Settings2 } from 'lucide-vue-next';
+
+const sheet = ref<SheetElement | null>(null);
+
+const open = () => {
+  if (sheet.value) {
+    sheet.value.open();
+  }
+};
+</script>
+
+<template>
+  <UiButton :variant="'dashed'" :size="'sm'" :class="$style.settings" @click="open">
+    <Settings2 :size="16" />
+  </UiButton>
+  <UiSheet ref="sheet"> settings </UiSheet>
+</template>
+
+<style module lang="scss">
+.settings {
+  height: 30px;
+  gap: 8px;
+
+  & > svg {
+    color: var(--zinc-500);
+  }
+}
+
+:global(html.dark) {
+  .settings {
+    background-color: transparent;
+    &:hover {
+      background-color: transparent;
+      border-color: var(--zinc-500);
+    }
+    & > svg {
+      color: var(--zinc-300);
+    }
+  }
+}
+</style>

src/features/kanban/ui/SortingItems.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { UiButton } from '@/shared/ui';
+import { AlignEndHorizontal, ArrowDown10 } from 'lucide-vue-next';
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <UiButton :variant="'dashed'" :size="'sm'" :class="$style.sort_button">
+    <AlignEndHorizontal :size="16" />
+    {{ t('kanban.sorting.activity') }}
+  </UiButton>
+  <UiButton :variant="'dashed'" :size="'sm'" :class="$style.sort_button">
+    <ArrowDown10 :size="16" />
+    {{ t('kanban.sorting.workload') }}
+  </UiButton>
+</template>
+
+<style module lang="scss">
+.sort_button {
+  height: 30px;
+  gap: 8px;
+
+  & > svg {
+    color: var(--zinc-400);
+  }
+}
+
+:global(html.dark) {
+  .sort_button {
+    background-color: transparent;
+    &:hover {
+      background-color: transparent;
+      border-color: var(--zinc-500);
+    }
+    & > svg {
+      color: var(--zinc-300);
+    }
+  }
+}
+</style>

src/features/kanban/ui/index.ts

@@ -1,5 +1,8 @@
 import AddColumn from './AddColumn.vue';
 import DragCards from './DragCards.vue';
 import DragColumns from './DragColumns.vue';
+import SettingsSheet from './SettingsSheet.vue';
+import SortingItems from './SortingItems.vue';
+import RemoveBoard from './RemoveBoard.vue';
 
-export { AddColumn, DragCards, DragColumns };
+export { AddColumn, DragCards, DragColumns, SortingItems, SettingsSheet, RemoveBoard };