[@mnenie] refactor this part

[github-actions[bot]]

https://github.com/mnenie/jenda/blob/784475efda10810a57ec1d3d0275b050443cb15c/src/features/kanban/ui/SettingsSheet.vue#L28

    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">
    <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">

[github-actions[bot]]

Closed in eb6df2866b7fef2bcf452fc8c34e74120dd9a6fb