feat: add filter select + base settings sheet

src/app/providers/router/index.ts

@@ -86,9 +86,9 @@ export const router = createRouter({
 router.beforeEach((to, from) => {
   // TODO(@mnenie): Add guards logic
   // Needs to add guard auth logic in router
-  if (to.meta.requiresAuth === true) {
-    return router.push({ name: RouteNames.login });
-  }
+  // if (to.meta.requiresAuth === true) {
+  //   return router.push({ name: RouteNames.login });
+  // }
 });
 
 router.beforeEach(layoutResolverMiddleware);

src/entities/board/model/types.ts

@@ -18,7 +18,7 @@ export interface Board extends DateParams {
   columns?: Column[];
   name: string;
   users: User[];
-  status: 'work' | 'archive' | 'closed';
+  status: 'work' | 'archive' | 'closed' | 'not active';
 }
 
 type Tag = {

src/features/kanban/ui/FilterTasks.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
+import { useLocalStorage } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import { UiSelect } from '@/shared/ui';
+
+const { t, locale } = useI18n();
+
+const filterStore = useLocalStorage('kanban-sort-condition', 'all');
+const options = reactive([
+  { name: `📄 ${t('kanban.sorting.all')}`, value: 'all' },
+  { name: `💬 ${t('kanban.sorting.activity')}`, value: 'activity' },
+  { name: `👥 ${t('kanban.sorting.workload')}`, value: 'workload' }
+]);
+
+const filter = computed({
+  get() {
+    const selected = options.find((option) => option.value === filterStore.value);
+    return selected && selected.name;
+  },
+  set(newValue) {
+    const selected = options.find((option) => option.name === newValue);
+    if (selected) {
+      filterStore.value = selected.value;
+    }
+  }
+});
+const width = computed(() => (locale.value === 'ru-RU' ? '168px' : '152px'));
+</script>
+
+<template>
+  <UiSelect v-model="filter" :options="options" :class="$style.filter_tasks" />
+</template>
+
+<style module lang="scss">
+.filter_tasks {
+  position: relative;
+  height: 30px;
+  width: v-bind('width');
+  border: 1px dashed var(--zinc-200);
+}
+
+:global(html.dark) {
+  .filter_tasks {
+    border: 1px dashed var(--zinc-600);
+    background-color: transparent;
+  }
+}
+</style>

src/features/kanban/ui/RemoveBoard.vue

@@ -10,25 +10,37 @@ import { Trash2 } from 'lucide-vue-next';
 </template>
 
 <style module lang="scss">
+@import '@/app/styles/mixins';
+
 .trash {
   height: 30px;
   gap: 8px;
 
   & > svg {
     color: var(--zinc-500);
   }
+  @include transition;
+
+  @include on-hover {
+    & > svg {
+      color: var(--destructive) !important;
+    }
+  }
 }
 
 :global(html.dark) {
   .trash {
     background-color: transparent;
-    &:hover {
-      background-color: transparent;
-      border-color: var(--zinc-500);
-    }
     & > svg {
       color: var(--zinc-300);
     }
+    @include on-hover {
+      background-color: transparent;
+      border-color: var(--zinc-500);
+      & > svg {
+        color: var(--dark-destructive) !important;
+      }
+    }
   }
 }
 </style>

src/features/kanban/ui/SettingsSheet.vue

@@ -1,8 +1,21 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { UiButton, UiSheet } from '@/shared/ui';
+import { computed, ref, shallowReactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { UiBadge, UiButton, UiInput, UiSheet } from '@/shared/ui';
 import type { SheetElement } from '@/shared/ui';
 import { Settings2 } from 'lucide-vue-next';
+import { UserAvatar } from '@/entities/user';
+import type { Board } from '@/entities/board';
+import { Check } from 'lucide-vue-next';
+import { useDark } from '@vueuse/core';
+
+type Status = Board['status'];
+
+interface StatusBadge {
+  _id: string;
+  indicator: string;
+  status: Status;
+}
 
 const sheet = ref<SheetElement | null>(null);
 
@@ -11,13 +24,82 @@ const open = () => {
     sheet.value.open();
   }
 };
+
+//TODO(@mnenie): refactor this part
+
+const { t } = useI18n();
+const isDark = useDark();
+
+const name = ref('Startup');
+const projColor = ref('#b156db');
+
+const colors = ['#ffd45e', '#45ad2d', '#3b54c4', '#b156db', '#a6a2a3', '#ff7a97', '#a1612a'] as const;
+const statuses = shallowReactive<StatusBadge[]>([
+  { _id: '0', indicator: '#acb1c2', status: 'not active' },
+  { _id: '1', indicator: '#359f39', status: 'work' },
+  { _id: '2', indicator: '#fde50c', status: 'archive' },
+  { _id: '3', indicator: '#d01f1f', status: 'closed' }
+]);
+
+const isCurrentColor = computed(() => {
+  return (color: string) => projColor.value === color;
+});
 </script>
 
 <template>
   <UiButton :variant="'dashed'" :size="'sm'" :class="$style.settings" @click="open">
     <Settings2 :size="16" />
   </UiButton>
-  <UiSheet ref="sheet"> settings </UiSheet>
+  <UiSheet ref="sheet">
+    <template #header>
+      <p class="text-lg" style="font-weight: 500">{{ t('kanban.configuration.title') }}</p>
+      <span :class="[$style.desc, 'text-sm']">
+        {{ t('kanban.configuration.description') }}
+      </span>
+    </template>
+    <template #default>
+      <div :class="$style.about">
+        <div :class="$style.name">
+          <div :class="$style.indicator_bg" :style="{ backgroundColor: projColor }">S</div>
+          <UiInput v-model="name" placeholder="name ?" :class="$style.input" />
+          <UiBadge :variant="isDark ? 'default' : 'outline'">free</UiBadge>
+        </div>
+        <div :class="$style.colors">
+          <div
+            v-for="(color, index) in colors"
+            :key="index"
+            :class="$style.color"
+            :style="{ backgroundColor: color }"
+            @click="projColor = color"
+          >
+            <Check v-if="isCurrentColor(color)" :size="14" color="white" />
+          </div>
+        </div>
+      </div>
+      <p :class="[$style.desc, 'text-sm']">
+        {{ t('kanban.configuration.name') }}
+      </p>
+      <div :class="$style.users">
+        <p>Participants:</p>
+        <UserAvatar style="width: 24px; height: 24px">
+          <img style="width: 100%" src="https://avatars.githubusercontent.com/u/121057011?v=4" />
+        </UserAvatar>
+      </div>
+      <div :class="$style.badges">
+        <div v-for="b in statuses" :key="b._id" :class="$style.badge">
+          <div :class="$style.indicator" :style="{ backgroundColor: b.indicator }" />
+          <span class="text-sm">{{ b.status }}</span>
+        </div>
+      </div>
+      <p :class="[$style.desc, 'text-sm']">
+        {{ t('kanban.configuration.status') }}
+      </p>
+      <div :class="$style.btns">
+        <UiButton>{{ t('kanban.configuration.update') }}</UiButton>
+        <UiButton variant="destructive">{{ t('kanban.configuration.clear') }}</UiButton>
+      </div>
+    </template>
+  </UiSheet>
 </template>
 
 <style module lang="scss">
@@ -30,6 +112,101 @@ const open = () => {
   }
 }
 
+.desc {
+  color: var(--zinc-500);
+  margin: 10px 0;
+}
+
+.about {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 15px;
+
+  .name {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    .indicator_bg {
+      min-width: 30px;
+      min-height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--zinc-50);
+    }
+
+    .input {
+      padding: 0;
+      background-color: transparent;
+      box-shadow: none;
+      border: none;
+      max-width: 80px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-size: 22px;
+
+      &::placeholder {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .colors {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    .color {
+      width: 20px;
+      height: 20px;
+      border-radius: 20%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+}
+
+.badges {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+
+  .badge {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 20px;
+    padding: 5px 10px;
+    background: var(--zinc-200);
+    border-radius: 4px;
+
+    .indicator {
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+    }
+  }
+}
+
+.users {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 25px;
+}
+
+.btns {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 18px;
+}
+
 :global(html.dark) {
   .settings {
     background-color: transparent;
@@ -41,5 +218,14 @@ const open = () => {
       color: var(--zinc-300);
     }
   }
+  .desc {
+    color: var(--zinc-300);
+  }
+
+  .badges {
+    .badge {
+      background-color: var(--zinc-600);
+    }
+  }
 }
 </style>

src/features/kanban/ui/add-column/AddColumn.vue

@@ -48,7 +48,7 @@ const open = () => {
   width: 260px;
   height: fit-content;
   border-radius: 12px;
-  padding: 0.8rem;
+  padding: 0.7rem 0.8rem;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   font-weight: 500;
 }