refactor: add features and widget, fix: styles

src/entities/board/model/types.ts

@@ -6,6 +6,8 @@ type DateParams = {
   deletedAt?: Date;
 };
 
+export type Status = 'work' | 'archive' | 'closed' | 'not active';
+
 export interface BoardPreview extends DateParams {
   _id: string;
   title: string;
@@ -17,8 +19,9 @@ export interface Board extends DateParams {
   _id: string;
   columns?: Column[];
   name: string;
+  color?: string;
   users: User[];
-  status: 'work' | 'archive' | 'closed' | 'not active';
+  status: Status;
 }
 
 type Tag = {
@@ -41,3 +44,9 @@ export interface Column extends DateParams {
   title: string;
   cards?: Card[];
 }
+
+export interface StatusBadge {
+  _id: string;
+  indicator: string;
+  status: Status;
+}

src/features/kanban/ui/ChangeName.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useDark } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import { UiBadge, UiInput } from '@/shared/ui';
+import { Check } from 'lucide-vue-next';
+
+const props = defineProps<{
+  name: string;
+  projColor: string;
+  colors: readonly string[];
+}>();
+
+const emits = defineEmits<{
+  (e: 'updateColor', color: string): void;
+}>();
+
+const { t } = useI18n();
+const isDark = useDark();
+
+const modelName = defineModel<string>();
+
+const isCurrentColor = computed(() => {
+  return (color: string) => props.projColor === color;
+});
+</script>
+
+<template>
+  <div :class="$style.about">
+    <div :class="$style.name">
+      <div :class="$style.indicator_bg" :style="{ backgroundColor: projColor }">S</div>
+      <UiInput v-model="modelName" placeholder="name ?" :class="$style.input" />
+      <UiBadge :variant="isDark ? 'default' : 'default'">free</UiBadge>
+    </div>
+    <div :class="$style.colors">
+      <div
+        v-for="(color, index) in colors"
+        :key="index"
+        :class="$style.color"
+        :style="{ backgroundColor: color }"
+        @click="emits('updateColor', color)"
+      >
+        <Check v-if="isCurrentColor(color)" :size="14" color="white" />
+      </div>
+    </div>
+  </div>
+  <p :class="[$style.desc, 'text-sm']">
+    {{ t('kanban.configuration.name') }}
+  </p>
+</template>
+
+<style module lang="scss">
+.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;
+    }
+  }
+}
+
+.desc {
+  color: var(--zinc-500);
+  margin: 10px 0;
+}
+
+:global(html.dark) {
+  .desc {
+    color: var(--zinc-300);
+  }
+}
+</style>

src/features/kanban/ui/ChooseStatus.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import type { StatusBadge } from '@/entities/board';
+import { computed } from 'vue';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+const props = defineProps<{
+  statuses: StatusBadge[];
+  projStatus: StatusBadge['status'];
+}>();
+const emits = defineEmits<{
+  (e: 'updateStatus', status: StatusBadge['status']): void;
+}>();
+
+const { t } = useI18n();
+
+const activeStatus = computed(() => {
+  return (s: string) => {
+    return props.projStatus === s && [s, true];
+  };
+});
+</script>
+
+<template>
+  <div :class="$style.badges">
+    <div
+      v-for="b in statuses"
+      v-bind="$attrs"
+      :key="b._id"
+      :class="[$style.badge, { [$style.active]: activeStatus(b.status) }]"
+      @click="emits('updateStatus', b.status)"
+    >
+      <div :class="$style.indicator" :style="{ backgroundColor: b.indicator }" />
+      <span class="text-sm">{{ b.status }}</span>
+    </div>
+  </div>
+  <p :class="[$style.status_p, 'text-sm']">
+    {{ t('kanban.configuration.status') }}
+  </p>
+</template>
+
+<style module lang="scss">
+.badges {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+
+  .badge {
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 20px;
+    padding: 5px 10px;
+    background: var(--zinc-100);
+    border: 1px solid var(--zinc-200);
+    border-radius: 4px;
+    cursor: pointer;
+
+    .indicator {
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+    }
+  }
+
+  .active {
+    border: 1px solid var(--zinc-300);
+  }
+}
+
+.status_p {
+  color: var(--zinc-500);
+  margin: 10px 0;
+}
+
+:global(html.dark) {
+  .status_p {
+    color: var(--zinc-300);
+  }
+  .badges {
+    .badge {
+      background-color: var(--zinc-600);
+      border: 1px solid var(--zinc-600);
+    }
+  }
+}
+</style>