From 5a3e01a38c5396c8666f760aa8b58e54b3d7de00 Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Sat, 10 May 2025 20:29:20 +0300
Subject: [PATCH 01/14] fix: removed overlapping input borders in table filters

---
 .../src/modules/fields/pages/FieldsPage.vue   |   2 +-
 .../components/data/DataTableLayout.vue       |   2 +-
 .../shared/components/layout/MainLayout.vue   | 119 +-----------------
 .../components/providers/theme-provider.vue   |   7 +-
 frontend/src/shared/ui/input/Input.vue        |  18 ++-
 5 files changed, 19 insertions(+), 129 deletions(-)

diff --git a/frontend/src/modules/fields/pages/FieldsPage.vue b/frontend/src/modules/fields/pages/FieldsPage.vue
index 5ff8df1..fc6faac 100644
--- a/frontend/src/modules/fields/pages/FieldsPage.vue
+++ b/frontend/src/modules/fields/pages/FieldsPage.vue
@@ -83,7 +83,7 @@ onMounted(() => {
 <template>
   <div>
     <Header title="Fields" />
-    <div class="container mx-auto overflow-x-auto">
+    <div class="container mx-auto">
       <FieldsDataTable :columns="columns" :data="fields" :isLoading="isLoading" />
     </div>
 
diff --git a/frontend/src/shared/components/data/DataTableLayout.vue b/frontend/src/shared/components/data/DataTableLayout.vue
index 3092333..ae2cb6b 100644
--- a/frontend/src/shared/components/data/DataTableLayout.vue
+++ b/frontend/src/shared/components/data/DataTableLayout.vue
@@ -10,7 +10,7 @@ defineProps<{
       {{ title }}
     </div>
 
-    <div class="flex flex-wrap items-center justify-between gap-4 pb-4">
+    <div class="flex flex-wrap items-center justify-between gap-4 pb-4 pt-1">
       <div class="flex flex-nowrap items-center gap-4">
         <slot name="filters" />
       </div>
diff --git a/frontend/src/shared/components/layout/MainLayout.vue b/frontend/src/shared/components/layout/MainLayout.vue
index 39e7ceb..a8fc8d0 100644
--- a/frontend/src/shared/components/layout/MainLayout.vue
+++ b/frontend/src/shared/components/layout/MainLayout.vue
@@ -1,130 +1,23 @@
 <script setup lang="ts">
-import { RouterLink } from 'vue-router'
-import { Button } from '@/shared/ui/button'
-import { Icon } from '@iconify/vue'
-import {
-  NavigationMenu,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-} from '@/shared/ui/navigation-menu'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/shared/ui/dropdown-menu'
-import ThemeProvider from '@/shared/components/providers/theme-provider.vue'
+import MainLogo from '@/shared/components/layout/MainLogo.vue'
+import NavigationMenu from '@/shared/components/layout/NavigationMenu.vue'
+import DropdownMenu from '@/shared/components/layout/DropdownMenu.vue'
 </script>
 
 <template>
   <div class="bg-background min-h-screen">
-    <!-- Header -->
     <header class="bg-background sticky top-0 z-50 w-full border-b">
       <div class="container flex h-14 items-center">
         <div class="flex">
-          <RouterLink to="/" class="mr-6">
-            <span class="font-handwritten text-xl">Evsy</span>
-          </RouterLink>
-
-          <NavigationMenu>
-            <NavigationMenuList>
-              <NavigationMenuItem>
-                <NavigationMenuLink as-child>
-                  <RouterLink to="/events">Events</RouterLink>
-                </NavigationMenuLink>
-              </NavigationMenuItem>
-
-              <NavigationMenuItem>
-                <NavigationMenuLink as-child>
-                  <RouterLink to="/fields">Fields</RouterLink>
-                </NavigationMenuLink>
-              </NavigationMenuItem>
-
-              <NavigationMenuItem>
-                <NavigationMenuLink as-child>
-                  <RouterLink to="/tags">Tags</RouterLink>
-                </NavigationMenuLink>
-              </NavigationMenuItem>
-            </NavigationMenuList>
-          </NavigationMenu>
+          <MainLogo />
+          <NavigationMenu />
         </div>
         <div class="flex flex-1 items-center justify-end space-x-2">
-          <DropdownMenu>
-            <DropdownMenuTrigger as-child>
-              <Button
-                variant="ghost"
-                size="icon"
-                class="group relative flex h-9 w-9 cursor-pointer items-center justify-center transition-none hover:bg-transparent hover:text-inherit dark:hover:bg-transparent dark:hover:text-inherit"
-              >
-                <span class="relative h-4 w-4">
-                  <Icon
-                    icon="radix-icons:hamburger-menu"
-                    class="transition-rotate absolute inset-0 scale-100 rotate-0 opacity-100 transition-opacity transition-transform duration-300 ease-in-out group-data-[state=open]:scale-0 group-data-[state=open]:-rotate-90 group-data-[state=open]:opacity-0"
-                  />
-                  <Icon
-                    icon="radix-icons:cross-1"
-                    class="transition-rotate absolute inset-0 scale-0 rotate-90 opacity-0 transition-opacity transition-transform duration-300 ease-in-out group-data-[state=open]:scale-100 group-data-[state=open]:rotate-0 group-data-[state=open]:opacity-100"
-                  />
-                </span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent class="w-auto" align="end">
-              <DropdownMenuGroup>
-                <ThemeProvider v-slot="{ toggleTheme }">
-                  <DropdownMenuItem
-                    @click="toggleTheme"
-                    @select.prevent
-                    class="relative flex items-center justify-start"
-                  >
-                    <span class="relative mr-2 h-4 w-4">
-                      <Icon
-                        icon="radix-icons:moon"
-                        class="absolute inset-0 scale-100 rotate-0 transform opacity-100 transition duration-300 ease-in-out dark:scale-0 dark:-rotate-90 dark:opacity-0"
-                      />
-                      <Icon
-                        icon="radix-icons:sun"
-                        class="absolute inset-0 scale-0 rotate-90 transform opacity-0 transition duration-300 ease-in-out dark:scale-100 dark:rotate-0 dark:opacity-100"
-                      />
-                    </span>
-                    <span>Toggle theme</span>
-                  </DropdownMenuItem>
-                </ThemeProvider>
-              </DropdownMenuGroup>
-              <DropdownMenuSeparator />
-              <DropdownMenuGroup>
-                <DropdownMenuItem as-child>
-                  <a
-                    href="https://github.com/ivanskv2000/evsy"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="flex items-center"
-                  >
-                    <Icon icon="simple-icons:github" class="mr-2 h-4 w-4" />
-                    <span>GitHub source</span>
-                  </a>
-                </DropdownMenuItem>
-                <DropdownMenuItem as-child>
-                  <a
-                    href="https://buymeacoffee.com/ivanskv2000"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="flex items-center"
-                  >
-                    <Icon icon="simple-icons:buymeacoffee" class="mr-2 h-4 w-4" />
-                    <span>Buy me a coffee</span>
-                  </a>
-                </DropdownMenuItem>
-              </DropdownMenuGroup>
-            </DropdownMenuContent>
-          </DropdownMenu>
+          <DropdownMenu />
         </div>
       </div>
     </header>
 
-    <!-- Main Content -->
     <main class="container py-6">
       <slot />
     </main>
diff --git a/frontend/src/shared/components/providers/theme-provider.vue b/frontend/src/shared/components/providers/theme-provider.vue
index 40189a3..14269e5 100644
--- a/frontend/src/shared/components/providers/theme-provider.vue
+++ b/frontend/src/shared/components/providers/theme-provider.vue
@@ -3,15 +3,14 @@ import { provide } from 'vue'
 import { useColorMode } from '@vueuse/core'
 
 const theme = useColorMode({
-  attribute: 'class', // <- key part
-  selector: 'html', // <- ensure it adds `class="dark"` to <html>
+  attribute: 'class',
+  selector: 'html',
   emitAuto: false,
   storageKey: 'theme',
-  disableTransition: false, // <- ensure transitions aren't skipped
+  disableTransition: false,
 })
 
 const toggleTheme = () => {
-  // disableTransitionsTemporarily()
   theme.value = theme.value === 'light' ? 'dark' : 'light'
 }
 
diff --git a/frontend/src/shared/ui/input/Input.vue b/frontend/src/shared/ui/input/Input.vue
index d3f2f85..85b88dd 100644
--- a/frontend/src/shared/ui/input/Input.vue
+++ b/frontend/src/shared/ui/input/Input.vue
@@ -23,13 +23,11 @@ const modelValue = useVModel(props, 'modelValue', emits, {
   <input
     v-model="modelValue"
     data-slot="input"
-    :class="
-      cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        'focus-visible:border-ring focus-visible:border focus-visible:ring-0 focus-visible:outline-none',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-        props.class
-      )
-    "
-  />
-</template>
+    :class="cn(
+      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+      props.class,
+    )"
+  >
+</template>
\ No newline at end of file

From e8f2fead0357f687c5e145d188db79dc33efa21e Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Sat, 10 May 2025 20:55:12 +0300
Subject: [PATCH 02/14] fix: replaced default checkbox with component

---
 .../src/modules/events/components/EventForm.vue  |  2 +-
 .../fields/components/LinkedFieldsSelector.vue   | 16 ++++++++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/src/modules/events/components/EventForm.vue b/frontend/src/modules/events/components/EventForm.vue
index 23e761f..0351a37 100644
--- a/frontend/src/modules/events/components/EventForm.vue
+++ b/frontend/src/modules/events/components/EventForm.vue
@@ -157,7 +157,7 @@ function removeTag(tagId: string) {
                 <FormControl>
                   <TagsInput
                     v-model="componentField.modelValue"
-                    class="flex h-9 w-full justify-between gap-1 shadow-xs"
+                    class="flex h-9 w-full justify-between gap-1 rounded-md border border-input bg-transparent shadow-xs transition-[box-shadow,color,border] focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]"
                   >
                     <div class="h-5 w-[30%] p-0">
                       <ComboboxInput v-model="searchTerm" as-child>
diff --git a/frontend/src/modules/fields/components/LinkedFieldsSelector.vue b/frontend/src/modules/fields/components/LinkedFieldsSelector.vue
index dbfc3db..604c415 100644
--- a/frontend/src/modules/fields/components/LinkedFieldsSelector.vue
+++ b/frontend/src/modules/fields/components/LinkedFieldsSelector.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Field } from '@/modules/fields/types'
 import Skeleton from '@/shared/ui/skeleton/Skeleton.vue'
+import Checkbox from '@/shared/ui/checkbox/Checkbox.vue'
 
 defineProps<{
   fields: Field[]
@@ -22,14 +23,17 @@ const emit = defineEmits<{
     <Transition name="fade" appear>
       <div v-if="!isLoading">
         <div v-for="field in fields" :key="field.id" class="flex items-center gap-2">
-          <input
-            type="checkbox"
-            :checked="selectedIds.includes(field.id)"
-            @change="() => emit('toggle', field.id)"
+          <Checkbox 
             :id="`field-${field.id}`"
-            class="form-checkbox"
+            :model-value="selectedIds.includes(field.id)"
+            @update:model-value="() => emit('toggle', field.id)"
           />
-          <label :for="`field-${field.id}`" class="text-sm">{{ field.name }}</label>
+          <label
+            :for="`field-${field.id}`"
+            class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          >
+            {{ field.name }}
+          </label>
         </div>
       </div>
     </Transition>

From 9434bb3fc29711fdc6427fc634625e03b1888b6e Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Sat, 10 May 2025 21:06:09 +0300
Subject: [PATCH 03/14] fix: prevented vertical scroll on tagscrollarea

---
 .../src/modules/tags/components/TagScrollArea.vue    | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/modules/tags/components/TagScrollArea.vue b/frontend/src/modules/tags/components/TagScrollArea.vue
index a1510c3..7043318 100644
--- a/frontend/src/modules/tags/components/TagScrollArea.vue
+++ b/frontend/src/modules/tags/components/TagScrollArea.vue
@@ -5,12 +5,18 @@ import type { ClassValue } from 'clsx'
 
 const attrs = useAttrs()
 
-const wrapperClass = computed(() => cn('tag-scroll-wrapper max-w-60', attrs.class as ClassValue))
+const wrapperClass = computed(() => cn('tag-scroll-wrapper max-w-60 h-full', attrs.class as ClassValue))
 </script>
 
 <template>
-  <div :class="wrapperClass" v-bind="{ ...attrs, class: undefined }">
-    <div class="hide-scrollbar scroll-x-bounce flex flex-row gap-1 overflow-x-auto px-4">
+  <div
+    :class="wrapperClass"
+    v-bind="{ ...attrs, class: undefined }"
+    tabindex="-1"
+  >
+    <div
+      class="hide-scrollbar scroll-x-bounce flex flex-row gap-1 overflow-x-auto px-4 h-full"
+    >
       <slot />
     </div>
   </div>

From 5badef679f13e7124b39bd44387172e56a35a846 Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Sat, 10 May 2025 21:23:36 +0300
Subject: [PATCH 04/14] fix: removed api pagination

---
 backend/app/api/v1/routes/events.py                 |  4 ++--
 backend/app/api/v1/routes/fields.py                 |  4 ++--
 backend/app/api/v1/routes/tags.py                   |  4 ++--
 backend/app/crud.py                                 | 13 ++++++-------
 backend/app/models/__init__.py                      |  2 ++
 .../src/modules/events/components/EventForm.vue     |  2 +-
 6 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/backend/app/api/v1/routes/events.py b/backend/app/api/v1/routes/events.py
index f1d20e1..57e40a3 100644
--- a/backend/app/api/v1/routes/events.py
+++ b/backend/app/api/v1/routes/events.py
@@ -58,8 +58,8 @@ def get_event(event_id: int, db: Session = Depends(get_db)):
     description="Return a paginated list of all events with their tags and fields.",
     responses={200: {"description": "List of events returned"}},
 )
-def get_events(skip: int = 0, limit: int = 100, db: Session = Depends(get_db)):
-    events = crud.get_events(db=db, skip=skip, limit=limit)
+def get_events(db: Session = Depends(get_db)):
+    events = crud.get_events(db=db)
     return events
 
 
diff --git a/backend/app/api/v1/routes/fields.py b/backend/app/api/v1/routes/fields.py
index c0fe770..16c1fc7 100644
--- a/backend/app/api/v1/routes/fields.py
+++ b/backend/app/api/v1/routes/fields.py
@@ -31,8 +31,8 @@ def create_field(field: schemas.FieldCreate, db: Session = Depends(get_db)):
         200: {"description": "List of fields returned"},
     },
 )
-def get_fields(skip: int = 0, limit: int = 100, db: Session = Depends(get_db)):
-    fields = crud.get_fields(db=db, skip=skip, limit=limit)
+def get_fields(db: Session = Depends(get_db)):
+    fields = crud.get_fields(db=db)
     return fields
 
 
diff --git a/backend/app/api/v1/routes/tags.py b/backend/app/api/v1/routes/tags.py
index c255a3c..5791c17 100644
--- a/backend/app/api/v1/routes/tags.py
+++ b/backend/app/api/v1/routes/tags.py
@@ -31,8 +31,8 @@ def create_tag(tag: schemas.TagCreate, db: Session = Depends(get_db)):
         200: {"description": "List of tags returned"},
     },
 )
-def get_tags(skip: int = 0, limit: int = 100, db: Session = Depends(get_db)):
-    tags = crud.get_tags(db=db, skip=skip, limit=limit)
+def get_tags(db: Session = Depends(get_db)):
+    tags = crud.get_tags(db=db)
     return tags
 
 
diff --git a/backend/app/crud.py b/backend/app/crud.py
index a367737..27d9140 100644
--- a/backend/app/crud.py
+++ b/backend/app/crud.py
@@ -26,15 +26,14 @@ def get_event(db: Session, event_id: int):
     return db.query(models.Event).filter(models.Event.id == event_id).first()
 
 
-def get_events(db: Session, skip: int = 0, limit: int = 100):
+def get_events(db: Session):
     return (
         db.query(models.Event)
         .options(
             joinedload(models.Event.tags),
             joinedload(models.Event.fields),
         )
-        .offset(skip)
-        .limit(limit)
+        .order_by(models.Event.id)
         .all()
     )
 
@@ -87,8 +86,8 @@ def create_tag(db: Session, tag: schemas.TagCreate):
     return db_tag
 
 
-def get_tags(db: Session, skip: int = 0, limit: int = 100):
-    return db.query(models.Tag).offset(skip).limit(limit).all()
+def get_tags(db: Session):
+    return db.query(models.Tag).order_by(models.Tag.created_at.desc(), models.Tag.id).all()
 
 
 def get_tag(db: Session, tag_id: str):
@@ -143,8 +142,8 @@ def create_field(db: Session, field: schemas.FieldCreate):
     return db_field
 
 
-def get_fields(db: Session, skip: int = 0, limit: int = 100):
-    return db.query(models.Field).offset(skip).limit(limit).all()
+def get_fields(db: Session):
+    return db.query(models.Field).order_by(models.Field.id).all()
 
 
 def get_field(db: Session, field_id: int):
diff --git a/backend/app/models/__init__.py b/backend/app/models/__init__.py
index 3f29876..5d32441 100644
--- a/backend/app/models/__init__.py
+++ b/backend/app/models/__init__.py
@@ -44,6 +44,7 @@ class Event(Base, TimestampMixin):
         secondary="event_tags",
         back_populates="events",
         viewonly=True,
+        order_by="Tag.id.asc()"
     )
 
     field_links = relationship(
@@ -54,6 +55,7 @@ class Event(Base, TimestampMixin):
         secondary="event_fields",
         back_populates="events",
         viewonly=True,
+        order_by="Field.id.asc()"
     )
 
 
diff --git a/frontend/src/modules/events/components/EventForm.vue b/frontend/src/modules/events/components/EventForm.vue
index 0351a37..48c6d7b 100644
--- a/frontend/src/modules/events/components/EventForm.vue
+++ b/frontend/src/modules/events/components/EventForm.vue
@@ -179,7 +179,7 @@ function removeTag(tagId: string) {
 
                     <TagScrollArea>
                       <TagsInputItem
-                        v-for="item in componentField.modelValue"
+                        v-for="item in [...componentField.modelValue].reverse()"
                         :key="item"
                         :value="item"
                       >

From 60f4c4051584518d3c2ff34907857145c77c5cea Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Sat, 10 May 2025 21:33:08 +0300
Subject: [PATCH 05/14] refactor: navbar

---
 backend/app/crud.py                           |  4 +-
 backend/app/models/__init__.py                |  4 +-
 .../modules/events/components/EventForm.vue   |  2 +-
 .../src/modules/events/pages/EventsPage.vue   |  2 +-
 .../components/LinkedFieldsSelector.vue       |  4 +-
 .../modules/tags/components/TagScrollArea.vue | 14 +--
 .../components/data/DataTableLayout.vue       |  2 +-
 .../shared/components/layout/DropdownMenu.vue | 92 +++++++++++++++++++
 .../src/shared/components/layout/MainLogo.vue |  9 ++
 .../components/layout/NavigationMenu.vue      | 32 +++++++
 frontend/src/shared/ui/input/Input.vue        | 18 ++--
 11 files changed, 158 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/shared/components/layout/DropdownMenu.vue
 create mode 100644 frontend/src/shared/components/layout/MainLogo.vue
 create mode 100644 frontend/src/shared/components/layout/NavigationMenu.vue

diff --git a/backend/app/crud.py b/backend/app/crud.py
index 27d9140..89fa3be 100644
--- a/backend/app/crud.py
+++ b/backend/app/crud.py
@@ -87,7 +87,9 @@ def create_tag(db: Session, tag: schemas.TagCreate):
 
 
 def get_tags(db: Session):
-    return db.query(models.Tag).order_by(models.Tag.created_at.desc(), models.Tag.id).all()
+    return (
+        db.query(models.Tag).order_by(models.Tag.created_at.desc(), models.Tag.id).all()
+    )
 
 
 def get_tag(db: Session, tag_id: str):
diff --git a/backend/app/models/__init__.py b/backend/app/models/__init__.py
index 5d32441..284f15c 100644
--- a/backend/app/models/__init__.py
+++ b/backend/app/models/__init__.py
@@ -44,7 +44,7 @@ class Event(Base, TimestampMixin):
         secondary="event_tags",
         back_populates="events",
         viewonly=True,
-        order_by="Tag.id.asc()"
+        order_by="Tag.id.asc()",
     )
 
     field_links = relationship(
@@ -55,7 +55,7 @@ class Event(Base, TimestampMixin):
         secondary="event_fields",
         back_populates="events",
         viewonly=True,
-        order_by="Field.id.asc()"
+        order_by="Field.id.asc()",
     )
 
 
diff --git a/frontend/src/modules/events/components/EventForm.vue b/frontend/src/modules/events/components/EventForm.vue
index 48c6d7b..fea5d39 100644
--- a/frontend/src/modules/events/components/EventForm.vue
+++ b/frontend/src/modules/events/components/EventForm.vue
@@ -157,7 +157,7 @@ function removeTag(tagId: string) {
                 <FormControl>
                   <TagsInput
                     v-model="componentField.modelValue"
-                    class="flex h-9 w-full justify-between gap-1 rounded-md border border-input bg-transparent shadow-xs transition-[box-shadow,color,border] focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]"
+                    class="border-input focus-within:border-ring focus-within:ring-ring/50 flex h-9 w-full justify-between gap-1 rounded-md border bg-transparent shadow-xs transition-[box-shadow,color,border] focus-within:ring-[3px]"
                   >
                     <div class="h-5 w-[30%] p-0">
                       <ComboboxInput v-model="searchTerm" as-child>
diff --git a/frontend/src/modules/events/pages/EventsPage.vue b/frontend/src/modules/events/pages/EventsPage.vue
index 3aec065..4a35056 100644
--- a/frontend/src/modules/events/pages/EventsPage.vue
+++ b/frontend/src/modules/events/pages/EventsPage.vue
@@ -82,7 +82,7 @@ onMounted(() => {
 <template>
   <div>
     <Header title="Events" />
-    <div class="container mx-auto overflow-x-auto">
+    <div class="container mx-auto">
       <EventsDataTable :columns="columns" :data="events" :isLoading="isLoading" />
     </div>
 
diff --git a/frontend/src/modules/fields/components/LinkedFieldsSelector.vue b/frontend/src/modules/fields/components/LinkedFieldsSelector.vue
index 604c415..8e7c487 100644
--- a/frontend/src/modules/fields/components/LinkedFieldsSelector.vue
+++ b/frontend/src/modules/fields/components/LinkedFieldsSelector.vue
@@ -23,14 +23,14 @@ const emit = defineEmits<{
     <Transition name="fade" appear>
       <div v-if="!isLoading">
         <div v-for="field in fields" :key="field.id" class="flex items-center gap-2">
-          <Checkbox 
+          <Checkbox
             :id="`field-${field.id}`"
             :model-value="selectedIds.includes(field.id)"
             @update:model-value="() => emit('toggle', field.id)"
           />
           <label
             :for="`field-${field.id}`"
-            class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
           >
             {{ field.name }}
           </label>
diff --git a/frontend/src/modules/tags/components/TagScrollArea.vue b/frontend/src/modules/tags/components/TagScrollArea.vue
index 7043318..146cbbb 100644
--- a/frontend/src/modules/tags/components/TagScrollArea.vue
+++ b/frontend/src/modules/tags/components/TagScrollArea.vue
@@ -5,18 +5,14 @@ import type { ClassValue } from 'clsx'
 
 const attrs = useAttrs()
 
-const wrapperClass = computed(() => cn('tag-scroll-wrapper max-w-60 h-full', attrs.class as ClassValue))
+const wrapperClass = computed(() =>
+  cn('tag-scroll-wrapper max-w-60 h-full', attrs.class as ClassValue)
+)
 </script>
 
 <template>
-  <div
-    :class="wrapperClass"
-    v-bind="{ ...attrs, class: undefined }"
-    tabindex="-1"
-  >
-    <div
-      class="hide-scrollbar scroll-x-bounce flex flex-row gap-1 overflow-x-auto px-4 h-full"
-    >
+  <div :class="wrapperClass" v-bind="{ ...attrs, class: undefined }" tabindex="-1">
+    <div class="hide-scrollbar scroll-x-bounce flex h-full flex-row gap-1 overflow-x-auto px-4">
       <slot />
     </div>
   </div>
diff --git a/frontend/src/shared/components/data/DataTableLayout.vue b/frontend/src/shared/components/data/DataTableLayout.vue
index ae2cb6b..685755a 100644
--- a/frontend/src/shared/components/data/DataTableLayout.vue
+++ b/frontend/src/shared/components/data/DataTableLayout.vue
@@ -10,7 +10,7 @@ defineProps<{
       {{ title }}
     </div>
 
-    <div class="flex flex-wrap items-center justify-between gap-4 pb-4 pt-1">
+    <div class="flex flex-wrap items-center justify-between gap-4 pt-1 pb-4">
       <div class="flex flex-nowrap items-center gap-4">
         <slot name="filters" />
       </div>
diff --git a/frontend/src/shared/components/layout/DropdownMenu.vue b/frontend/src/shared/components/layout/DropdownMenu.vue
new file mode 100644
index 0000000..cf76b47
--- /dev/null
+++ b/frontend/src/shared/components/layout/DropdownMenu.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/shared/ui/dropdown-menu'
+import { Button } from '@/shared/ui/button'
+import { Icon } from '@iconify/vue'
+
+import { ref } from 'vue'
+import ThemeProvider from '@/shared/components/providers/theme-provider.vue'
+
+const isDropdownOpen = ref(false)
+</script>
+
+<template>
+  <DropdownMenu v-model:open="isDropdownOpen">
+    <DropdownMenuTrigger as-child>
+      <Button
+        variant="ghost"
+        size="icon"
+        class="group relative flex h-9 w-9 cursor-pointer items-center justify-center transition-none hover:bg-transparent hover:text-inherit dark:hover:bg-transparent dark:hover:text-inherit"
+      >
+        <span class="relative h-4 w-4">
+          <Icon
+            icon="radix-icons:hamburger-menu"
+            class="transition-rotate absolute inset-0 scale-100 rotate-0 opacity-100 transition-opacity transition-transform duration-300 ease-in-out group-data-[state=open]:scale-0 group-data-[state=open]:-rotate-90 group-data-[state=open]:opacity-0"
+          />
+          <Icon
+            icon="radix-icons:cross-1"
+            class="transition-rotate absolute inset-0 scale-0 rotate-90 opacity-0 transition-opacity transition-transform duration-300 ease-in-out group-data-[state=open]:scale-100 group-data-[state=open]:rotate-0 group-data-[state=open]:opacity-100"
+          />
+        </span>
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent class="w-auto" align="end">
+      <DropdownMenuGroup>
+        <ThemeProvider v-slot="{ toggleTheme }">
+          <DropdownMenuItem
+            @click="
+              () => {
+                toggleTheme()
+              }
+            "
+            @select.prevent
+            class="relative flex items-center justify-start"
+          >
+            <span class="relative mr-2 h-4 w-4">
+              <Icon
+                icon="radix-icons:moon"
+                class="absolute inset-0 scale-100 rotate-0 transform opacity-100 transition duration-300 ease-in-out dark:scale-0 dark:-rotate-90 dark:opacity-0"
+              />
+              <Icon
+                icon="radix-icons:sun"
+                class="absolute inset-0 scale-0 rotate-90 transform opacity-0 transition duration-300 ease-in-out dark:scale-100 dark:rotate-0 dark:opacity-100"
+              />
+            </span>
+            <span>Toggle theme</span>
+          </DropdownMenuItem>
+        </ThemeProvider>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        <DropdownMenuItem as-child>
+          <a
+            href="https://github.com/ivanskv2000/evsy"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex items-center"
+          >
+            <Icon icon="simple-icons:github" class="mr-2 h-4 w-4" />
+            <span>GitHub source</span>
+          </a>
+        </DropdownMenuItem>
+        <DropdownMenuItem as-child>
+          <a
+            href="https://buymeacoffee.com/ivanskv2000"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex items-center"
+          >
+            <Icon icon="simple-icons:buymeacoffee" class="mr-2 h-4 w-4" />
+            <span>Buy me a coffee</span>
+          </a>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/frontend/src/shared/components/layout/MainLogo.vue b/frontend/src/shared/components/layout/MainLogo.vue
new file mode 100644
index 0000000..87acb6b
--- /dev/null
+++ b/frontend/src/shared/components/layout/MainLogo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+</script>
+
+<template>
+  <RouterLink to="/" class="mr-6">
+    <span class="font-handwritten text-xl">Evsy</span>
+  </RouterLink>
+</template>
diff --git a/frontend/src/shared/components/layout/NavigationMenu.vue b/frontend/src/shared/components/layout/NavigationMenu.vue
new file mode 100644
index 0000000..620732d
--- /dev/null
+++ b/frontend/src/shared/components/layout/NavigationMenu.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+} from '@/shared/ui/navigation-menu'
+</script>
+
+<template>
+  <NavigationMenu>
+    <NavigationMenuList>
+      <NavigationMenuItem>
+        <NavigationMenuLink as-child>
+          <RouterLink to="/events">Events</RouterLink>
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+
+      <NavigationMenuItem>
+        <NavigationMenuLink as-child>
+          <RouterLink to="/fields">Fields</RouterLink>
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+
+      <NavigationMenuItem>
+        <NavigationMenuLink as-child>
+          <RouterLink to="/tags">Tags</RouterLink>
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+  </NavigationMenu>
+</template>
diff --git a/frontend/src/shared/ui/input/Input.vue b/frontend/src/shared/ui/input/Input.vue
index 85b88dd..0b2f074 100644
--- a/frontend/src/shared/ui/input/Input.vue
+++ b/frontend/src/shared/ui/input/Input.vue
@@ -23,11 +23,13 @@ const modelValue = useVModel(props, 'modelValue', emits, {
   <input
     v-model="modelValue"
     data-slot="input"
-    :class="cn(
-      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-      props.class,
-    )"
-  >
-</template>
\ No newline at end of file
+    :class="
+      cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        props.class
+      )
+    "
+  />
+</template>

From c5adac1cd63ba603d8ecc96c6084948094b562b5 Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Sat, 10 May 2025 22:30:25 +0300
Subject: [PATCH 06/14] feat: multiselect filter component

---
 frontend/components.json                      |   4 +-
 frontend/package-lock.json                    |  12 +-
 frontend/package.json                         |   2 +-
 .../fields/components/FieldsDataTable.vue     |  15 +-
 .../modules/fields/components/fieldColumns.ts |   4 +-
 .../data/DataTableMultiSelectFilter.vue       | 130 ++++++++++++++++++
 .../data/DataTableSingleSelectFilter.vue      |   6 +-
 .../src/shared/composables/useDataTable.ts    |   4 +
 frontend/src/shared/ui/command/Command.vue    |  93 +++++++++++++
 .../src/shared/ui/command/CommandDialog.vue   |  31 +++++
 .../src/shared/ui/command/CommandEmpty.vue    |  29 ++++
 .../src/shared/ui/command/CommandGroup.vue    |  47 +++++++
 .../src/shared/ui/command/CommandInput.vue    |  41 ++++++
 .../src/shared/ui/command/CommandItem.vue     |  79 +++++++++++
 .../src/shared/ui/command/CommandList.vue     |  28 ++++
 .../shared/ui/command/CommandSeparator.vue    |  24 ++++
 .../src/shared/ui/command/CommandShortcut.vue |  17 +++
 frontend/src/shared/ui/command/index.ts       |  25 ++++
 .../src/shared/ui/separator/Separator.vue     |  28 ++++
 frontend/src/shared/ui/separator/index.ts     |   1 +
 20 files changed, 597 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/shared/components/data/DataTableMultiSelectFilter.vue
 create mode 100644 frontend/src/shared/ui/command/Command.vue
 create mode 100644 frontend/src/shared/ui/command/CommandDialog.vue
 create mode 100644 frontend/src/shared/ui/command/CommandEmpty.vue
 create mode 100644 frontend/src/shared/ui/command/CommandGroup.vue
 create mode 100644 frontend/src/shared/ui/command/CommandInput.vue
 create mode 100644 frontend/src/shared/ui/command/CommandItem.vue
 create mode 100644 frontend/src/shared/ui/command/CommandList.vue
 create mode 100644 frontend/src/shared/ui/command/CommandSeparator.vue
 create mode 100644 frontend/src/shared/ui/command/CommandShortcut.vue
 create mode 100644 frontend/src/shared/ui/command/index.ts
 create mode 100644 frontend/src/shared/ui/separator/Separator.vue
 create mode 100644 frontend/src/shared/ui/separator/index.ts

diff --git a/frontend/components.json b/frontend/components.json
index a0bbd56..0bd40b3 100644
--- a/frontend/components.json
+++ b/frontend/components.json
@@ -12,8 +12,8 @@
   "aliases": {
     "components": "@/components",
     "composables": "@/composables",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
+    "utils": "@/shared/utils/general",
+    "ui": "@/shared/ui",
     "lib": "@/lib"
   },
   "iconLibrary": "lucide"
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index cf8cb77..7231c0b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "evsy-frontend",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "evsy-frontend",
-      "version": "0.0.0",
+      "version": "0.1.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.1.4",
         "@tanstack/vue-table": "^8.21.3",
@@ -17,7 +17,7 @@
         "clsx": "^2.1.1",
         "lucide-vue-next": "^0.488.0",
         "pinia": "^3.0.2",
-        "reka-ui": "^2.2.0",
+        "reka-ui": "^2.2.1",
         "tailwind-merge": "^3.2.0",
         "tailwindcss": "^4.1.4",
         "tw-animate-css": "^1.2.5",
@@ -3736,9 +3736,9 @@
       ]
     },
     "node_modules/reka-ui": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.2.0.tgz",
-      "integrity": "sha512-eeRrLI4LwJ6dkdwks6KFNKGs0+beqZlHO3JMHen7THDTh+yJ5Z0KNwONmOhhV/0hZC2uJCEExgG60QPzGstkQg==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.2.1.tgz",
+      "integrity": "sha512-oLHiyBn6gTIQGnTnv8G5LQuFp9j8HuUNl0qdnW3XPhFb/07hrxzFpjo2kt/jxOZive+n/XWDbOjSj2h9Hih3qA==",
       "dependencies": {
         "@floating-ui/dom": "^1.6.13",
         "@floating-ui/vue": "^1.1.6",
diff --git a/frontend/package.json b/frontend/package.json
index fc01cb3..97d7aac 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,7 +22,7 @@
     "clsx": "^2.1.1",
     "lucide-vue-next": "^0.488.0",
     "pinia": "^3.0.2",
-    "reka-ui": "^2.2.0",
+    "reka-ui": "^2.2.1",
     "tailwind-merge": "^3.2.0",
     "tailwindcss": "^4.1.4",
     "tw-animate-css": "^1.2.5",
diff --git a/frontend/src/modules/fields/components/FieldsDataTable.vue b/frontend/src/modules/fields/components/FieldsDataTable.vue
index c63372b..0136ce1 100644
--- a/frontend/src/modules/fields/components/FieldsDataTable.vue
+++ b/frontend/src/modules/fields/components/FieldsDataTable.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts" generic="TData, TValue">
 import type { ColumnDef } from '@tanstack/vue-table'
 import DataTableInputFilter from '@/shared/components/data/DataTableInputFilter.vue'
-import DataTableSingleSelectFilter from '@/shared/components/data/DataTableSingleSelectFilter.vue'
 import { Icon } from '@iconify/vue'
-import { computed } from 'vue'
 import { Button } from '@/shared/ui/button'
 import DataTablePagination from '@/shared/components/data/DataTablePagination.vue'
 import { FieldType } from '@/modules/fields/types'
@@ -11,6 +9,7 @@ import DataTable from '@/shared/components/data/DataTable.vue'
 import { useDataTable } from '@/shared/composables/useDataTable'
 import DataTableLayout from '@/shared/components/data/DataTableLayout.vue'
 import DataTableSkeleton from '@/shared/components/skeletons/DataTableSkeleton.vue'
+import DataTableMultiSelectFilter from '@/shared/components/data/DataTableMultiSelectFilter.vue'
 
 const props = defineProps<{
   columns: ColumnDef<TData, TValue>[]
@@ -18,16 +17,13 @@ const props = defineProps<{
   isLoading: boolean
 }>()
 
-const { table, columnFilters } = useDataTable({
+const { table } = useDataTable({
   data: () => props.data,
   columns: () => props.columns,
   defaultSorting: [{ id: 'id', desc: true }],
 })
 
 const fieldTypes = Object.values(FieldType)
-const isTypeFilterSet = computed(() =>
-  columnFilters.value.some(f => f.id === 'field_type' && !!f.value)
-)
 </script>
 
 <template>
@@ -41,11 +37,10 @@ const isTypeFilterSet = computed(() =>
       />
 
       <!-- Type Filter -->
-      <DataTableSingleSelectFilter
-        :column="table.getColumn('field_type')!"
-        placeholder="Select a type..."
+      <DataTableMultiSelectFilter
+        :column="table.getColumn('field_type')"
+        title="Type"
         :options="fieldTypes"
-        :show-clear-button="isTypeFilterSet"
       />
     </template>
     <template #buttons>
diff --git a/frontend/src/modules/fields/components/fieldColumns.ts b/frontend/src/modules/fields/components/fieldColumns.ts
index 050cfbe..892d4f4 100644
--- a/frontend/src/modules/fields/components/fieldColumns.ts
+++ b/frontend/src/modules/fields/components/fieldColumns.ts
@@ -73,7 +73,9 @@ export function getFieldColumns(
         const field_type = String(row.getValue('field_type'))
         return h('div', { class: 'text-left font-medium' }, field_type)
       },
-      filterFn: 'equals',
+      filterFn: (row, id, value) => {
+        return value.includes(row.getValue(id))
+      },
     },
     {
       accessorKey: 'description',
diff --git a/frontend/src/shared/components/data/DataTableMultiSelectFilter.vue b/frontend/src/shared/components/data/DataTableMultiSelectFilter.vue
new file mode 100644
index 0000000..d6e2e62
--- /dev/null
+++ b/frontend/src/shared/components/data/DataTableMultiSelectFilter.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts" generic="TData, TValue">
+import type { Column } from '@tanstack/vue-table'
+import { cn } from '@/shared/utils/general'
+import { Badge } from '@/shared/ui/badge'
+import { Button } from '@/shared/ui/button'
+
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/shared/ui/command'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/shared/ui/popover'
+import { Separator } from '@/shared/ui/separator'
+
+import { computed } from 'vue'
+import { Icon } from '@iconify/vue'
+
+interface DataTableFacetedFilter {
+  column?: Column<TData, TValue>
+  title?: string
+  options: string[]
+}
+
+const props = defineProps<DataTableFacetedFilter>()
+
+const facets = computed(() => props.column?.getFacetedUniqueValues())
+const selectedValues = computed(() => new Set(props.column?.getFilterValue() as string[]))
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button variant="outline" class="border-dashed">
+        <Icon icon="radix-icons:plus-circled" :class="cn('mr-2 h-4 w-4')" />
+        {{ title }}
+        <template v-if="selectedValues.size > 0">
+          <Separator orientation="vertical" class="mx-2 h-4" />
+          <Badge
+            variant="secondary"
+            class="rounded-sm px-1 font-normal lg:hidden"
+          >
+            {{ selectedValues.size }}
+          </Badge>
+          <div class="hidden space-x-1 lg:flex">
+            <Badge
+              v-if="selectedValues.size > 2"
+              variant="secondary"
+              class="rounded-sm px-1 font-normal"
+            >
+              {{ selectedValues.size }} selected
+            </Badge>
+
+            <template v-else>
+              <Badge
+                v-for="option in options
+                  .filter((option) => selectedValues.has(option))"
+                :key="option"
+                variant="secondary"
+                class="rounded-sm px-1 font-normal"
+              >
+                {{ option }}
+              </Badge>
+            </template>
+          </div>
+        </template>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-[200px] p-0" align="start">
+      <Command>
+        <CommandInput
+            :placeholder="title"
+        />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup>
+            <CommandItem
+              v-for="option in options"
+              :key="option"
+              :value="option"
+              class="px-2 py-1.5 text-sm h-8 items-center"
+              @select="(e) => {
+                console.log(e.detail.value)
+                const isSelected = selectedValues.has(option)
+                if (isSelected) {
+                  selectedValues.delete(option)
+                }
+                else {
+                  selectedValues.add(option)
+                }
+                const filterValues = Array.from(selectedValues)
+                column?.setFilterValue(
+                  filterValues.length ? filterValues : undefined,
+                )
+              }"
+            >
+              <div
+                :class="cn(
+                  'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                  selectedValues.has(option)
+                    ? 'bg-primary text-primary-foreground'
+                    : 'opacity-50 [&_svg]:invisible',
+                )"
+              >
+                <Icon icon="radix-icons:check" :class="cn('h-4 w-4')" />
+
+              </div>
+              <span class="truncate">{{ option }}</span>
+              <span v-if="facets?.get(option)" class="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+                {{ facets.get(option) }}
+              </span>
+            </CommandItem>
+          </CommandGroup>
+
+          <template v-if="selectedValues.size > 0">
+            <CommandSeparator />
+            <CommandGroup>
+              <CommandItem
+                :value="{ label: 'Clear filters' }"
+                class="justify-center text-center"
+                @select="column?.setFilterValue(undefined)"
+              >
+                Clear filters
+              </CommandItem>
+            </CommandGroup>
+          </template>
+        </CommandList>
+      </Command>
+    </PopoverContent>
+  </Popover>
+</template>
\ No newline at end of file
diff --git a/frontend/src/shared/components/data/DataTableSingleSelectFilter.vue b/frontend/src/shared/components/data/DataTableSingleSelectFilter.vue
index a90db90..62af7cc 100644
--- a/frontend/src/shared/components/data/DataTableSingleSelectFilter.vue
+++ b/frontend/src/shared/components/data/DataTableSingleSelectFilter.vue
@@ -30,9 +30,9 @@ export default {
         <SelectValue class="min-w-[12ch]" placeholder="Select a type..." />
       </SelectTrigger>
       <SelectContent>
-        <SelectItem v-for="option in options" :key="option" :value="option">{{
-          option
-        }}</SelectItem>
+        <SelectItem v-for="option in options" :key="option" :value="option">
+          {{ option }}
+        </SelectItem>
       </SelectContent>
     </Select>
 
diff --git a/frontend/src/shared/composables/useDataTable.ts b/frontend/src/shared/composables/useDataTable.ts
index 5439cf4..681ba2d 100644
--- a/frontend/src/shared/composables/useDataTable.ts
+++ b/frontend/src/shared/composables/useDataTable.ts
@@ -8,6 +8,8 @@ import type {
 } from '@tanstack/vue-table'
 import {
   getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
   getSortedRowModel,
   getPaginationRowModel,
   getFilteredRowModel,
@@ -53,6 +55,8 @@ export function useDataTable<TData, TValue>({
     getSortedRowModel: getSortedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
     onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
     onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),
     onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
diff --git a/frontend/src/shared/ui/command/Command.vue b/frontend/src/shared/ui/command/Command.vue
new file mode 100644
index 0000000..cdde82a
--- /dev/null
+++ b/frontend/src/shared/ui/command/Command.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'
+import { cn } from '@/shared/utils/general'
+import { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes, reactive, ref, watch } from 'vue'
+import { provideCommandContext } from '.'
+
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  modelValue: '',
+})
+
+const emits = defineEmits<ListboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: 'base' })
+const filterState = reactive({
+  search: '',
+  filtered: {
+    /** The count of all visible items. */
+    count: 0,
+    /** Map from visible item id to its search score. */
+    items: new Map() as Map<string, number>,
+    /** Set of groups with at least one visible item. */
+    groups: new Set() as Set<string>,
+  },
+})
+
+function filterItems() {
+  if (!filterState.search) {
+    filterState.filtered.count = allItems.value.size
+    // Do nothing, each item will know to show itself because search is empty
+    return
+  }
+
+  // Reset the groups
+  filterState.filtered.groups = new Set()
+  let itemCount = 0
+
+  // Check which items should be included
+  for (const [id, value] of allItems.value) {
+    const score = contains(value, filterState.search)
+    filterState.filtered.items.set(id, score ? 1 : 0)
+    if (score)
+      itemCount++
+  }
+
+  // Check which groups have at least 1 item shown
+  for (const [groupId, group] of allGroups.value) {
+    for (const itemId of group) {
+      if (filterState.filtered.items.get(itemId)! > 0) {
+        filterState.filtered.groups.add(groupId)
+        break
+      }
+    }
+  }
+
+  filterState.filtered.count = itemCount
+}
+
+function handleSelect() {
+  filterState.search = ''
+}
+
+watch(() => filterState.search, () => {
+  filterItems()
+})
+
+provideCommandContext({
+  allItems,
+  allGroups,
+  filterState,
+})
+</script>
+
+<template>
+  <ListboxRoot
+    data-slot="command"
+    v-bind="forwarded"
+    :class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
+  >
+    <slot />
+  </ListboxRoot>
+</template>
diff --git a/frontend/src/shared/ui/command/CommandDialog.vue b/frontend/src/shared/ui/command/CommandDialog.vue
new file mode 100644
index 0000000..1f70174
--- /dev/null
+++ b/frontend/src/shared/ui/command/CommandDialog.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/shared/ui/dialog'
+import { useForwardPropsEmits } from 'reka-ui'
+import Command from './Command.vue'
+
+const props = withDefaults(defineProps<DialogRootProps & {
+  title?: string
+  description?: string
+}>(), {
+  title: 'Command Palette',
+  description: 'Search for a command to run...',
+})
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <Dialog v-bind="forwarded">
+    <DialogHeader class="sr-only">
+      <DialogTitle>{{ title }}</DialogTitle>
+      <DialogDescription>{{ description }}</DialogDescription>
+    </DialogHeader>
+    <DialogContent class="overflow-hidden p-0 ">
+      <Command>
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/frontend/src/shared/ui/command/CommandEmpty.vue b/frontend/src/shared/ui/command/CommandEmpty.vue
new file mode 100644
index 0000000..29ca5d5
--- /dev/null
+++ b/frontend/src/shared/ui/command/CommandEmpty.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import { cn } from '@/shared/utils/general'
+import { Primitive } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import { useCommand } from '.'
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const { filterState } = useCommand()
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
+)
+</script>
+
+<template>
+  <Primitive
+    v-if="isRender"
+    data-slot="command-empty"
+    v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontend/src/shared/ui/command/CommandGroup.vue b/frontend/src/shared/ui/command/CommandGroup.vue
new file mode 100644
index 0000000..dc71d08
--- /dev/null
+++ b/frontend/src/shared/ui/command/CommandGroup.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { ListboxGroupProps } from 'reka-ui'
+import { cn } from '@/shared/utils/general'
+import { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'
+import { computed, type HTMLAttributes, onMounted, onUnmounted } from 'vue'
+import { provideCommandGroupContext, useCommand } from '.'
+
+const props = defineProps<ListboxGroupProps & {
+  class?: HTMLAttributes['class']
+  heading?: string
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const { allGroups, filterState } = useCommand()
+const id = useId()
+
+const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+
+provideCommandGroupContext({ id })
+onMounted(() => {
+  if (!allGroups.value.has(id))
+    allGroups.value.set(id, new Set())
+})
+onUnmounted(() => {
+  allGroups.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxGroup
+    v-bind="delegatedProps"
+    :id="id"
+    data-slot="command-group"
+    :class="cn('text-foreground overflow-hidden p-1', props.class)"
+    :hidden="isRender ? undefined : true"
+  >
+    <ListboxGroupLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
+</template>
diff --git a/frontend/src/shared/ui/command/CommandInput.vue b/frontend/src/shared/ui/command/CommandInput.vue
new file mode 100644
index 0000000..bdd81e7
--- /dev/null
+++ b/frontend/src/shared/ui/command/CommandInput.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { cn } from '@/shared/utils/general'
+import { Search } from 'lucide-vue-next'
+import { ListboxFilter, type ListboxFilterProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import { useCommand } from '.'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ListboxFilterProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+
+const { filterState } = useCommand()
+</script>
+
+<template>
+  <div
+    data-slot="command-input-wrapper"
+    class="flex items-center gap-2 border-b px-3"
+  >
+    <Search class="size-4 shrink-0 opacity-50" />
+    <ListboxFilter
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      v-model="filterState.search"
+      data-slot="command-input"
+      auto-focus
+      :class="cn('placeholder:text-muted-foreground flex w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>
diff --git a/frontend/src/shared/ui/command/CommandItem.vue b/frontend/src/shared/ui/command/CommandItem.vue
new file mode 100644
index 0000000..88dedcd
--- /dev/null
+++ b/frontend/src/shared/ui/command/CommandItem.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
+import { cn } from '@/shared/utils/general'
+import { useCurrentElement } from '@vueuse/core'
+import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'
+import { computed, type HTMLAttributes, onMounted, onUnmounted, ref } from 'vue'
+import { useCommand, useCommandGroup } from '.'
+
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ListboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const id = useId()
+const { filterState, allItems, allGroups } = useCommand()
+const groupContext = useCommandGroup()
+
+const isRender = computed(() => {
+  if (!filterState.search) {
+    return true;
+  }
+  else {
+    const filteredCurrentItem = filterState.filtered.items.get(id)
+    // If the filtered items is undefined means not in the all times map yet
+    // Do the first render to add into the map
+    if (filteredCurrentItem === undefined) {
+      return true;
+    }
+
+    // Check with filter
+    return filteredCurrentItem > 0;
+  }
+})
+
+const itemRef = ref()
+const currentElement = useCurrentElement(itemRef)
+onMounted(() => {
+  if (!(currentElement.value instanceof HTMLElement))
+    return
+
+  // textValue to perform filter
+  allItems.value.set(id, currentElement.value.textContent ?? (props.value?.toString() ?? ''))
+
+  const groupId = groupContext?.id
+  if (groupId) {
+    if (!allGroups.value.has(groupId)) {
+      allGroups.value.set(groupId, new Set([id]))
+    }
+    else {
+      allGroups.value.get(groupId)?.add(id)
+    }
+  }
+})
+onUnmounted(() => {
+  allItems.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxItem
+    v-if="isRender"
+    v-bind="forwarded"
+    :id="id"
+    ref="itemRef"
+    data-slot="command-item"
+    :class="cn(`data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-3 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
+    @select="() => {
+      filterState.search = ''
+    }"
+  >
+    <slot />
+  </ListboxItem>
+</template>
diff --git a/frontend/src/shared/ui/command/CommandList.vue b/frontend/src/shared/ui/command/CommandList.vue
new file mode 100644
index 0000000..5f7d6c3
--- /dev/null
+++ b/frontend/src/shared/ui/command/CommandList.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ListboxContentProps } from 'reka-ui'
+import { cn } from '@/shared/utils/general'
+import { ListboxContent, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ListboxContent
+    data-slot="command-list"
+    v-bind="forwarded"
+    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
+  >
+    <div role="presentation">
+      <slot />
+    </div>
+  </ListboxContent>
+</template>
diff --git a/frontend/src/shared/ui/command/CommandSeparator.vue b/frontend/src/shared/ui/command/CommandSeparator.vue
new file mode 100644
index 0000000..efa7e85
--- /dev/null
+++ b/frontend/src/shared/ui/command/CommandSeparator.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'reka-ui'
+import { cn } from '@/shared/utils/general'
+import { Separator } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Separator
+    data-slot="command-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 h-px', props.class)"
+  >
+    <slot />
+  </Separator>
+</template>
diff --git a/frontend/src/shared/ui/command/CommandShortcut.vue b/frontend/src/shared/ui/command/CommandShortcut.vue
new file mode 100644
index 0000000..b1813ee
--- /dev/null
+++ b/frontend/src/shared/ui/command/CommandShortcut.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/utils/general'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="command-shortcut"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/frontend/src/shared/ui/command/index.ts b/frontend/src/shared/ui/command/index.ts
new file mode 100644
index 0000000..cb48e1e
--- /dev/null
+++ b/frontend/src/shared/ui/command/index.ts
@@ -0,0 +1,25 @@
+import type { Ref } from 'vue'
+import { createContext } from 'reka-ui'
+
+export { default as Command } from './Command.vue'
+export { default as CommandDialog } from './CommandDialog.vue'
+export { default as CommandEmpty } from './CommandEmpty.vue'
+export { default as CommandGroup } from './CommandGroup.vue'
+export { default as CommandInput } from './CommandInput.vue'
+export { default as CommandItem } from './CommandItem.vue'
+export { default as CommandList } from './CommandList.vue'
+export { default as CommandSeparator } from './CommandSeparator.vue'
+export { default as CommandShortcut } from './CommandShortcut.vue'
+
+export const [useCommand, provideCommandContext] = createContext<{
+  allItems: Ref<Map<string, string>>
+  allGroups: Ref<Map<string, Set<string>>>
+  filterState: {
+    search: string
+    filtered: { count: number, items: Map<string, number>, groups: Set<string> }
+  }
+}>('Command')
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+  id?: string
+}>('CommandGroup')
diff --git a/frontend/src/shared/ui/separator/Separator.vue b/frontend/src/shared/ui/separator/Separator.vue
new file mode 100644
index 0000000..22db63c
--- /dev/null
+++ b/frontend/src/shared/ui/separator/Separator.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/utils/general'
+import { reactiveOmit } from '@vueuse/core'
+import { Separator, type SeparatorProps } from 'reka-ui'
+
+const props = withDefaults(defineProps<
+  SeparatorProps & { class?: HTMLAttributes['class'] }
+>(), {
+  orientation: 'horizontal',
+  decorative: true,
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <Separator
+    data-slot="separator-root"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        `bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px`,
+        props.class,
+      )
+    "
+  />
+</template>
diff --git a/frontend/src/shared/ui/separator/index.ts b/frontend/src/shared/ui/separator/index.ts
new file mode 100644
index 0000000..2287bcb
--- /dev/null
+++ b/frontend/src/shared/ui/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue'

From 855c6eef4c7a609f4c4daa8d2ebabd6e0c80c3c4 Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Sat, 10 May 2025 22:33:12 +0300
Subject: [PATCH 07/14] fix: component padding

---
 .../src/shared/components/data/DataTableMultiSelectFilter.vue   | 1 -
 frontend/src/shared/ui/command/CommandItem.vue                  | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/shared/components/data/DataTableMultiSelectFilter.vue b/frontend/src/shared/components/data/DataTableMultiSelectFilter.vue
index d6e2e62..360722c 100644
--- a/frontend/src/shared/components/data/DataTableMultiSelectFilter.vue
+++ b/frontend/src/shared/components/data/DataTableMultiSelectFilter.vue
@@ -77,7 +77,6 @@ const selectedValues = computed(() => new Set(props.column?.getFilterValue() as
               v-for="option in options"
               :key="option"
               :value="option"
-              class="px-2 py-1.5 text-sm h-8 items-center"
               @select="(e) => {
                 console.log(e.detail.value)
                 const isSelected = selectedValues.has(option)
diff --git a/frontend/src/shared/ui/command/CommandItem.vue b/frontend/src/shared/ui/command/CommandItem.vue
index 88dedcd..abfb0ff 100644
--- a/frontend/src/shared/ui/command/CommandItem.vue
+++ b/frontend/src/shared/ui/command/CommandItem.vue
@@ -69,7 +69,7 @@ onUnmounted(() => {
     :id="id"
     ref="itemRef"
     data-slot="command-item"
-    :class="cn(`data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-3 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
+    :class="cn(`data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
     @select="() => {
       filterState.search = ''
     }"

From d165de0fb54bc61581e3e6130f0aa2554096fb5d Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Sat, 10 May 2025 22:48:24 +0300
Subject: [PATCH 08/14] fix: removed ugly transitions on theme toggle

---
 frontend/src/index.css                                    | 1 -
 frontend/src/modules/tags/components/TagItem.vue          | 2 +-
 .../src/shared/components/data/DataTablePagination.vue    | 8 ++++----
 frontend/src/shared/components/layout/DropdownMenu.vue    | 8 ++++----
 .../src/shared/components/providers/theme-provider.vue    | 2 +-
 frontend/src/shared/ui/table/TableRow.vue                 | 2 +-
 6 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 02c2e78..dc6a56d 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -42,7 +42,6 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
-  --transition-bg-color: background-color, color;
 }
 
 /* Light theme */
diff --git a/frontend/src/modules/tags/components/TagItem.vue b/frontend/src/modules/tags/components/TagItem.vue
index e777923..4e66448 100644
--- a/frontend/src/modules/tags/components/TagItem.vue
+++ b/frontend/src/modules/tags/components/TagItem.vue
@@ -32,7 +32,7 @@ const handleCopyId = async () => {
 <template>
   <Transition name="fade" appear>
     <div
-      class="flex items-start justify-between gap-4 rounded-lg border p-4 transition-shadow hover:shadow-sm"
+      class="flex items-start justify-between gap-4 rounded-lg border p-4 transition hover:shadow-sm"
     >
       <div>
         <TooltipProvider :delay-duration="800">
diff --git a/frontend/src/shared/components/data/DataTablePagination.vue b/frontend/src/shared/components/data/DataTablePagination.vue
index 5e35c3d..cdcf18b 100644
--- a/frontend/src/shared/components/data/DataTablePagination.vue
+++ b/frontend/src/shared/components/data/DataTablePagination.vue
@@ -63,7 +63,7 @@ const rowsSelected = computed(() => props.table.getFilteredSelectedRowModel().ro
       <div class="flex items-center space-x-2">
         <Button
           variant="outline"
-          class="hidden h-8 w-8 p-0 transition-none lg:flex"
+          class="hidden h-8 w-8 p-0 lg:flex"
           :disabled="!table.getCanPreviousPage()"
           @click="table.setPageIndex(0)"
         >
@@ -72,7 +72,7 @@ const rowsSelected = computed(() => props.table.getFilteredSelectedRowModel().ro
         </Button>
         <Button
           variant="outline"
-          class="h-8 w-8 p-0 transition-none"
+          class="h-8 w-8 p-0"
           :disabled="!table.getCanPreviousPage()"
           @click="table.previousPage()"
         >
@@ -81,7 +81,7 @@ const rowsSelected = computed(() => props.table.getFilteredSelectedRowModel().ro
         </Button>
         <Button
           variant="outline"
-          class="h-8 w-8 p-0 transition-none"
+          class="h-8 w-8 p-0"
           :disabled="!table.getCanNextPage()"
           @click="table.nextPage()"
         >
@@ -90,7 +90,7 @@ const rowsSelected = computed(() => props.table.getFilteredSelectedRowModel().ro
         </Button>
         <Button
           variant="outline"
-          class="hidden h-8 w-8 p-0 transition-none lg:flex"
+          class="hidden h-8 w-8 p-0 lg:flex"
           :disabled="!table.getCanNextPage()"
           @click="table.setPageIndex(table.getPageCount() - 1)"
         >
diff --git a/frontend/src/shared/components/layout/DropdownMenu.vue b/frontend/src/shared/components/layout/DropdownMenu.vue
index cf76b47..33a37fb 100644
--- a/frontend/src/shared/components/layout/DropdownMenu.vue
+++ b/frontend/src/shared/components/layout/DropdownMenu.vue
@@ -17,6 +17,7 @@ const isDropdownOpen = ref(false)
 </script>
 
 <template>
+  <ThemeProvider v-slot="{ toggleTheme }">
   <DropdownMenu v-model:open="isDropdownOpen">
     <DropdownMenuTrigger as-child>
       <Button
@@ -38,7 +39,6 @@ const isDropdownOpen = ref(false)
     </DropdownMenuTrigger>
     <DropdownMenuContent class="w-auto" align="end">
       <DropdownMenuGroup>
-        <ThemeProvider v-slot="{ toggleTheme }">
           <DropdownMenuItem
             @click="
               () => {
@@ -51,16 +51,15 @@ const isDropdownOpen = ref(false)
             <span class="relative mr-2 h-4 w-4">
               <Icon
                 icon="radix-icons:moon"
-                class="absolute inset-0 scale-100 rotate-0 transform opacity-100 transition duration-300 ease-in-out dark:scale-0 dark:-rotate-90 dark:opacity-0"
+                class="absolute inset-0 scale-100 opacity-100 dark:scale-0 dark:opacity-0"
               />
               <Icon
                 icon="radix-icons:sun"
-                class="absolute inset-0 scale-0 rotate-90 transform opacity-0 transition duration-300 ease-in-out dark:scale-100 dark:rotate-0 dark:opacity-100"
+                class="absolute inset-0 scale-0 opacity-0 dark:scale-100 dark:opacity-100"
               />
             </span>
             <span>Toggle theme</span>
           </DropdownMenuItem>
-        </ThemeProvider>
       </DropdownMenuGroup>
       <DropdownMenuSeparator />
       <DropdownMenuGroup>
@@ -89,4 +88,5 @@ const isDropdownOpen = ref(false)
       </DropdownMenuGroup>
     </DropdownMenuContent>
   </DropdownMenu>
+</ThemeProvider>
 </template>
diff --git a/frontend/src/shared/components/providers/theme-provider.vue b/frontend/src/shared/components/providers/theme-provider.vue
index 14269e5..412ff10 100644
--- a/frontend/src/shared/components/providers/theme-provider.vue
+++ b/frontend/src/shared/components/providers/theme-provider.vue
@@ -7,7 +7,7 @@ const theme = useColorMode({
   selector: 'html',
   emitAuto: false,
   storageKey: 'theme',
-  disableTransition: false,
+  disableTransition: true,
 })
 
 const toggleTheme = () => {
diff --git a/frontend/src/shared/ui/table/TableRow.vue b/frontend/src/shared/ui/table/TableRow.vue
index c761a2b..eb84bcd 100644
--- a/frontend/src/shared/ui/table/TableRow.vue
+++ b/frontend/src/shared/ui/table/TableRow.vue
@@ -12,7 +12,7 @@ const props = defineProps<{
     data-slot="table-row"
     :class="
       cn(
-        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-[var(--transition-bg-color)]',
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
         props.class
       )
     "

From 6f8461de37a8666817f59fa4517c917d283e61f2 Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Sun, 11 May 2025 14:55:52 +0300
Subject: [PATCH 09/14] feat: added tag filter to the events table

---
 .../events/components/EventsDataTable.vue        | 16 +++++++++++++++-
 .../modules/events/components/eventColumns.ts    |  5 +++++
 .../data/DataTableMultiSelectFilter.vue          |  8 +++++---
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/frontend/src/modules/events/components/EventsDataTable.vue b/frontend/src/modules/events/components/EventsDataTable.vue
index 354d17e..b222803 100644
--- a/frontend/src/modules/events/components/EventsDataTable.vue
+++ b/frontend/src/modules/events/components/EventsDataTable.vue
@@ -8,6 +8,8 @@ import DataTable from '@/shared/components/data/DataTable.vue'
 import { useDataTable } from '@/shared/composables/useDataTable'
 import DataTableLayout from '@/shared/components/data/DataTableLayout.vue'
 import DataTableSkeleton from '@/shared/components/skeletons/DataTableSkeleton.vue'
+import DataTableSingleSelectFilter from '@/shared/components/data/DataTableSingleSelectFilter.vue'
+import { computed } from 'vue'
 
 const props = defineProps<{
   columns: ColumnDef<TData, TValue>[]
@@ -15,11 +17,15 @@ const props = defineProps<{
   isLoading: boolean
 }>()
 
-const { table } = useDataTable({
+const { table, columnFilters } = useDataTable({
   data: () => props.data,
   columns: () => props.columns,
   defaultSorting: [{ id: 'id', desc: true }],
 })
+
+const isTagFilterSet = computed(() =>
+  columnFilters.value.some(f => f.id === 'tags' && !!f.value)
+)
 </script>
 
 <template>
@@ -31,6 +37,14 @@ const { table } = useDataTable({
         :column="table.getColumn('name')!"
         placeholder="Filter by name..."
       />
+
+      <!-- Tag Filter -->
+      <DataTableSingleSelectFilter
+        :column="table.getColumn('tags')!"
+        placeholder="Select a tag..."
+        :options="['one', 'two', 'three']"
+        :show-clear-button="isTagFilterSet"
+      />
     </template>
     <template #buttons>
       <Button as-child>
diff --git a/frontend/src/modules/events/components/eventColumns.ts b/frontend/src/modules/events/components/eventColumns.ts
index da7d048..799ffa6 100644
--- a/frontend/src/modules/events/components/eventColumns.ts
+++ b/frontend/src/modules/events/components/eventColumns.ts
@@ -1,5 +1,6 @@
 import { h } from 'vue'
 import type { Event } from '@/modules/events/types.ts'
+import type { Tag } from '@/modules/tags/types.ts'
 import type { ColumnDef } from '@tanstack/vue-table'
 import EventsDataTableDropdown from '@/modules/events/components/EventsDataTableDropdown.vue'
 import { RouterLink } from 'vue-router'
@@ -113,6 +114,10 @@ export function getEventColumns(
           () => tags.map(tag => h(Badge, { variant: 'outline' }, { default: () => tag.id }))
         )
       },
+      filterFn: (row, id, value) => {
+        const tags = row.getValue(id) as Tag[]
+        return tags.some(tag => tag.id === value)
+      },
     },
     {
       id: 'actions',
diff --git a/frontend/src/shared/components/data/DataTableMultiSelectFilter.vue b/frontend/src/shared/components/data/DataTableMultiSelectFilter.vue
index 360722c..dcc74e4 100644
--- a/frontend/src/shared/components/data/DataTableMultiSelectFilter.vue
+++ b/frontend/src/shared/components/data/DataTableMultiSelectFilter.vue
@@ -77,8 +77,7 @@ const selectedValues = computed(() => new Set(props.column?.getFilterValue() as
               v-for="option in options"
               :key="option"
               :value="option"
-              @select="(e) => {
-                console.log(e.detail.value)
+              @select="() => {
                 const isSelected = selectedValues.has(option)
                 if (isSelected) {
                   selectedValues.delete(option)
@@ -100,13 +99,16 @@ const selectedValues = computed(() => new Set(props.column?.getFilterValue() as
                     : 'opacity-50 [&_svg]:invisible',
                 )"
               >
-                <Icon icon="radix-icons:check" :class="cn('h-4 w-4')" />
+                <Icon icon="radix-icons:check" :class="cn('h-4 w-4 text-background')" />
 
               </div>
               <span class="truncate">{{ option }}</span>
               <span v-if="facets?.get(option)" class="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
                 {{ facets.get(option) }}
               </span>
+              <span v-else class="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+                0
+              </span>
             </CommandItem>
           </CommandGroup>
 

From ea0d47f03e4f3a34c40e090d272d6430b49dd89b Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Mon, 12 May 2025 13:29:31 +0300
Subject: [PATCH 10/14] feat: tag selector

---
 .../events/components/EventsDataTable.vue     | 17 ++++++-----
 .../src/modules/events/pages/EventsPage.vue   | 15 +++++++++-
 .../data/DataTableSingleSelectFilter.vue      | 28 +++++++++++++------
 3 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/frontend/src/modules/events/components/EventsDataTable.vue b/frontend/src/modules/events/components/EventsDataTable.vue
index b222803..c1e9e88 100644
--- a/frontend/src/modules/events/components/EventsDataTable.vue
+++ b/frontend/src/modules/events/components/EventsDataTable.vue
@@ -9,23 +9,22 @@ import { useDataTable } from '@/shared/composables/useDataTable'
 import DataTableLayout from '@/shared/components/data/DataTableLayout.vue'
 import DataTableSkeleton from '@/shared/components/skeletons/DataTableSkeleton.vue'
 import DataTableSingleSelectFilter from '@/shared/components/data/DataTableSingleSelectFilter.vue'
-import { computed } from 'vue'
+import type { Tag } from '@/modules/tags/types'
 
 const props = defineProps<{
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
-  isLoading: boolean
+  tags: Tag[]
+  isLoading: boolean,
+  isLoadingTags: boolean
 }>()
 
-const { table, columnFilters } = useDataTable({
+const { table } = useDataTable({
   data: () => props.data,
   columns: () => props.columns,
   defaultSorting: [{ id: 'id', desc: true }],
 })
 
-const isTagFilterSet = computed(() =>
-  columnFilters.value.some(f => f.id === 'tags' && !!f.value)
-)
 </script>
 
 <template>
@@ -40,10 +39,10 @@ const isTagFilterSet = computed(() =>
 
       <!-- Tag Filter -->
       <DataTableSingleSelectFilter
-        :column="table.getColumn('tags')!"
+        :column="table.getColumn('tags')"
         placeholder="Select a tag..."
-        :options="['one', 'two', 'three']"
-        :show-clear-button="isTagFilterSet"
+        :options="tags.map(tag => tag.id)"
+        :disabled="isLoadingTags"
       />
     </template>
     <template #buttons>
diff --git a/frontend/src/modules/events/pages/EventsPage.vue b/frontend/src/modules/events/pages/EventsPage.vue
index 4a35056..180363e 100644
--- a/frontend/src/modules/events/pages/EventsPage.vue
+++ b/frontend/src/modules/events/pages/EventsPage.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { eventApi } from '@/modules/events/api'
+import { tagApi } from '@/modules/tags/api'
 import type { Event } from '@/modules/events/types'
+import type { Tag } from '@/modules/tags/types'
 import EventsDataTable from '../components/EventsDataTable.vue'
 import Header from '@/shared/components/layout/PageHeader.vue'
 import { useAsyncTask } from '@/shared/composables/useAsyncTask'
@@ -14,9 +16,11 @@ import DeleteModal from '@/shared/components/modals/DeleteModal.vue'
 const { run, isLoading } = useAsyncTask()
 const { run: runDeleteTask, isLoading: isDeleting } = useAsyncTask()
 const { run: runUpdateTask, isLoading: isSaving } = useAsyncTask()
+const { run: loadTags, isLoading: isLoadingTags } = useAsyncTask()
 const { showUpdated, showDeleted } = useEnhancedToast()
 
 const events = ref<Event[]>([])
+const tags = ref<Tag[]>([])
 
 const selectedEventId = ref<number | null>(null)
 const editedEvent = ref<Event | null>(null)
@@ -76,6 +80,9 @@ onMounted(() => {
       events.value = data
     }
   )
+  loadTags(async () => {
+    tags.value = await tagApi.getAll()
+  })
 })
 </script>
 
@@ -83,7 +90,13 @@ onMounted(() => {
   <div>
     <Header title="Events" />
     <div class="container mx-auto">
-      <EventsDataTable :columns="columns" :data="events" :isLoading="isLoading" />
+      <EventsDataTable
+        :columns="columns"
+        :data="events"
+        :tags="tags"
+        :isLoading="isLoading"
+        :isLoadingTags="isLoadingTags"
+      />
     </div>
 
     <!-- Modals -->
diff --git a/frontend/src/shared/components/data/DataTableSingleSelectFilter.vue b/frontend/src/shared/components/data/DataTableSingleSelectFilter.vue
index 62af7cc..5102b90 100644
--- a/frontend/src/shared/components/data/DataTableSingleSelectFilter.vue
+++ b/frontend/src/shared/components/data/DataTableSingleSelectFilter.vue
@@ -3,15 +3,19 @@ import type { Column } from '@tanstack/vue-table'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/ui/select'
 import { Button } from '@/shared/ui/button'
 import { Icon } from '@iconify/vue'
+import { computed } from 'vue';
 
 interface DataTableInputFilterProps {
-  column: Column<TData, TValue>
+  column?: Column<TData, TValue>
+  title?: string
   placeholder: string
   options: string[]
-  showClearButton: boolean
+  disabled?: boolean
 }
 
-defineProps<DataTableInputFilterProps>()
+const props = defineProps<DataTableInputFilterProps>()
+
+const selectedValue = computed(() => props.column?.getFilterValue() as string)
 </script>
 
 <script lang="ts">
@@ -23,20 +27,28 @@ export default {
 <template>
   <div class="flex items-center gap-1">
     <Select
-      :model-value="column.getFilterValue() as string"
-      @update:model-value="column.setFilterValue($event)"
+      :model-value="selectedValue"
+      @update:model-value="column?.setFilterValue($event)"
+      :disabled="disabled"
     >
       <SelectTrigger>
-        <SelectValue class="min-w-[12ch]" placeholder="Select a type..." />
+        <SelectValue
+          class="min-w-[12ch]"
+          :placeholder="placeholder"
+        >
+          <template v-if="selectedValue">
+            <span v-if="selectedValue">{{ selectedValue }}</span>
+          </template>
+        </SelectValue>
       </SelectTrigger>
-      <SelectContent>
+      <SelectContent class="max-h-[400px]">
         <SelectItem v-for="option in options" :key="option" :value="option">
           {{ option }}
         </SelectItem>
       </SelectContent>
     </Select>
 
-    <Button :disabled="!showClearButton" variant="ghost" @click="column.setFilterValue('')">
+    <Button :disabled="!selectedValue" variant="ghost" @click="column?.setFilterValue('')">
       <Icon class="h-4 w-4" icon="radix-icons:cross-2" />
       <span class="sr-only">Clear type filter</span>
     </Button>

From 5068bda7b0660bce0ffcb70a82f7c2e9fe8adbcf Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Mon, 12 May 2025 13:30:19 +0300
Subject: [PATCH 11/14] style: format lint

---
 .../events/components/EventsDataTable.vue     |   3 +-
 .../data/DataTableMultiSelectFilter.vue       |  78 +++++++-------
 .../data/DataTableSingleSelectFilter.vue      |   7 +-
 .../shared/components/layout/DropdownMenu.vue | 100 +++++++++---------
 frontend/src/shared/ui/command/Command.vue    |  19 ++--
 .../src/shared/ui/command/CommandDialog.vue   |  29 +++--
 .../src/shared/ui/command/CommandEmpty.vue    |   6 +-
 .../src/shared/ui/command/CommandGroup.vue    |  17 +--
 .../src/shared/ui/command/CommandInput.vue    |  20 ++--
 .../src/shared/ui/command/CommandItem.vue     |  32 +++---
 frontend/src/shared/ui/command/index.ts       |   2 +-
 .../src/shared/ui/separator/Separator.vue     |   6 +-
 frontend/src/shared/ui/table/TableRow.vue     |   5 +-
 13 files changed, 173 insertions(+), 151 deletions(-)

diff --git a/frontend/src/modules/events/components/EventsDataTable.vue b/frontend/src/modules/events/components/EventsDataTable.vue
index c1e9e88..c29aa83 100644
--- a/frontend/src/modules/events/components/EventsDataTable.vue
+++ b/frontend/src/modules/events/components/EventsDataTable.vue
@@ -15,7 +15,7 @@ const props = defineProps<{
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
   tags: Tag[]
-  isLoading: boolean,
+  isLoading: boolean
   isLoadingTags: boolean
 }>()
 
@@ -24,7 +24,6 @@ const { table } = useDataTable({
   columns: () => props.columns,
   defaultSorting: [{ id: 'id', desc: true }],
 })
-
 </script>
 
 <template>
diff --git a/frontend/src/shared/components/data/DataTableMultiSelectFilter.vue b/frontend/src/shared/components/data/DataTableMultiSelectFilter.vue
index dcc74e4..822f238 100644
--- a/frontend/src/shared/components/data/DataTableMultiSelectFilter.vue
+++ b/frontend/src/shared/components/data/DataTableMultiSelectFilter.vue
@@ -4,12 +4,16 @@ import { cn } from '@/shared/utils/general'
 import { Badge } from '@/shared/ui/badge'
 import { Button } from '@/shared/ui/button'
 
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/shared/ui/command'
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/shared/ui/popover'
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/shared/ui/command'
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/ui/popover'
 import { Separator } from '@/shared/ui/separator'
 
 import { computed } from 'vue'
@@ -35,10 +39,7 @@ const selectedValues = computed(() => new Set(props.column?.getFilterValue() as
         {{ title }}
         <template v-if="selectedValues.size > 0">
           <Separator orientation="vertical" class="mx-2 h-4" />
-          <Badge
-            variant="secondary"
-            class="rounded-sm px-1 font-normal lg:hidden"
-          >
+          <Badge variant="secondary" class="rounded-sm px-1 font-normal lg:hidden">
             {{ selectedValues.size }}
           </Badge>
           <div class="hidden space-x-1 lg:flex">
@@ -52,8 +53,7 @@ const selectedValues = computed(() => new Set(props.column?.getFilterValue() as
 
             <template v-else>
               <Badge
-                v-for="option in options
-                  .filter((option) => selectedValues.has(option))"
+                v-for="option in options.filter(option => selectedValues.has(option))"
                 :key="option"
                 variant="secondary"
                 class="rounded-sm px-1 font-normal"
@@ -67,9 +67,7 @@ const selectedValues = computed(() => new Set(props.column?.getFilterValue() as
     </PopoverTrigger>
     <PopoverContent class="w-[200px] p-0" align="start">
       <Command>
-        <CommandInput
-            :placeholder="title"
-        />
+        <CommandInput :placeholder="title" />
         <CommandList>
           <CommandEmpty>No results found.</CommandEmpty>
           <CommandGroup>
@@ -77,36 +75,42 @@ const selectedValues = computed(() => new Set(props.column?.getFilterValue() as
               v-for="option in options"
               :key="option"
               :value="option"
-              @select="() => {
-                const isSelected = selectedValues.has(option)
-                if (isSelected) {
-                  selectedValues.delete(option)
+              @select="
+                () => {
+                  const isSelected = selectedValues.has(option)
+                  if (isSelected) {
+                    selectedValues.delete(option)
+                  } else {
+                    selectedValues.add(option)
+                  }
+                  const filterValues = Array.from(selectedValues)
+                  column?.setFilterValue(filterValues.length ? filterValues : undefined)
                 }
-                else {
-                  selectedValues.add(option)
-                }
-                const filterValues = Array.from(selectedValues)
-                column?.setFilterValue(
-                  filterValues.length ? filterValues : undefined,
-                )
-              }"
+              "
             >
               <div
-                :class="cn(
-                  'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
-                  selectedValues.has(option)
-                    ? 'bg-primary text-primary-foreground'
-                    : 'opacity-50 [&_svg]:invisible',
-                )"
+                :class="
+                  cn(
+                    'border-primary mr-2 flex h-4 w-4 items-center justify-center rounded-sm border',
+                    selectedValues.has(option)
+                      ? 'bg-primary text-primary-foreground'
+                      : 'opacity-50 [&_svg]:invisible'
+                  )
+                "
               >
-                <Icon icon="radix-icons:check" :class="cn('h-4 w-4 text-background')" />
-
+                <Icon icon="radix-icons:check" :class="cn('text-background h-4 w-4')" />
               </div>
               <span class="truncate">{{ option }}</span>
-              <span v-if="facets?.get(option)" class="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+              <span
+                v-if="facets?.get(option)"
+                class="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs"
+              >
                 {{ facets.get(option) }}
               </span>
-              <span v-else class="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+              <span
+                v-else
+                class="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs"
+              >
                 0
               </span>
             </CommandItem>
@@ -128,4 +132,4 @@ const selectedValues = computed(() => new Set(props.column?.getFilterValue() as
       </Command>
     </PopoverContent>
   </Popover>
-</template>
\ No newline at end of file
+</template>
diff --git a/frontend/src/shared/components/data/DataTableSingleSelectFilter.vue b/frontend/src/shared/components/data/DataTableSingleSelectFilter.vue
index 5102b90..8fd4707 100644
--- a/frontend/src/shared/components/data/DataTableSingleSelectFilter.vue
+++ b/frontend/src/shared/components/data/DataTableSingleSelectFilter.vue
@@ -3,7 +3,7 @@ import type { Column } from '@tanstack/vue-table'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/ui/select'
 import { Button } from '@/shared/ui/button'
 import { Icon } from '@iconify/vue'
-import { computed } from 'vue';
+import { computed } from 'vue'
 
 interface DataTableInputFilterProps {
   column?: Column<TData, TValue>
@@ -32,10 +32,7 @@ export default {
       :disabled="disabled"
     >
       <SelectTrigger>
-        <SelectValue
-          class="min-w-[12ch]"
-          :placeholder="placeholder"
-        >
+        <SelectValue class="min-w-[12ch]" :placeholder="placeholder">
           <template v-if="selectedValue">
             <span v-if="selectedValue">{{ selectedValue }}</span>
           </template>
diff --git a/frontend/src/shared/components/layout/DropdownMenu.vue b/frontend/src/shared/components/layout/DropdownMenu.vue
index 33a37fb..28b3d66 100644
--- a/frontend/src/shared/components/layout/DropdownMenu.vue
+++ b/frontend/src/shared/components/layout/DropdownMenu.vue
@@ -18,27 +18,27 @@ const isDropdownOpen = ref(false)
 
 <template>
   <ThemeProvider v-slot="{ toggleTheme }">
-  <DropdownMenu v-model:open="isDropdownOpen">
-    <DropdownMenuTrigger as-child>
-      <Button
-        variant="ghost"
-        size="icon"
-        class="group relative flex h-9 w-9 cursor-pointer items-center justify-center transition-none hover:bg-transparent hover:text-inherit dark:hover:bg-transparent dark:hover:text-inherit"
-      >
-        <span class="relative h-4 w-4">
-          <Icon
-            icon="radix-icons:hamburger-menu"
-            class="transition-rotate absolute inset-0 scale-100 rotate-0 opacity-100 transition-opacity transition-transform duration-300 ease-in-out group-data-[state=open]:scale-0 group-data-[state=open]:-rotate-90 group-data-[state=open]:opacity-0"
-          />
-          <Icon
-            icon="radix-icons:cross-1"
-            class="transition-rotate absolute inset-0 scale-0 rotate-90 opacity-0 transition-opacity transition-transform duration-300 ease-in-out group-data-[state=open]:scale-100 group-data-[state=open]:rotate-0 group-data-[state=open]:opacity-100"
-          />
-        </span>
-      </Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent class="w-auto" align="end">
-      <DropdownMenuGroup>
+    <DropdownMenu v-model:open="isDropdownOpen">
+      <DropdownMenuTrigger as-child>
+        <Button
+          variant="ghost"
+          size="icon"
+          class="group relative flex h-9 w-9 cursor-pointer items-center justify-center transition-none hover:bg-transparent hover:text-inherit dark:hover:bg-transparent dark:hover:text-inherit"
+        >
+          <span class="relative h-4 w-4">
+            <Icon
+              icon="radix-icons:hamburger-menu"
+              class="transition-rotate absolute inset-0 scale-100 rotate-0 opacity-100 transition-opacity transition-transform duration-300 ease-in-out group-data-[state=open]:scale-0 group-data-[state=open]:-rotate-90 group-data-[state=open]:opacity-0"
+            />
+            <Icon
+              icon="radix-icons:cross-1"
+              class="transition-rotate absolute inset-0 scale-0 rotate-90 opacity-0 transition-opacity transition-transform duration-300 ease-in-out group-data-[state=open]:scale-100 group-data-[state=open]:rotate-0 group-data-[state=open]:opacity-100"
+            />
+          </span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent class="w-auto" align="end">
+        <DropdownMenuGroup>
           <DropdownMenuItem
             @click="
               () => {
@@ -60,33 +60,33 @@ const isDropdownOpen = ref(false)
             </span>
             <span>Toggle theme</span>
           </DropdownMenuItem>
-      </DropdownMenuGroup>
-      <DropdownMenuSeparator />
-      <DropdownMenuGroup>
-        <DropdownMenuItem as-child>
-          <a
-            href="https://github.com/ivanskv2000/evsy"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="flex items-center"
-          >
-            <Icon icon="simple-icons:github" class="mr-2 h-4 w-4" />
-            <span>GitHub source</span>
-          </a>
-        </DropdownMenuItem>
-        <DropdownMenuItem as-child>
-          <a
-            href="https://buymeacoffee.com/ivanskv2000"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="flex items-center"
-          >
-            <Icon icon="simple-icons:buymeacoffee" class="mr-2 h-4 w-4" />
-            <span>Buy me a coffee</span>
-          </a>
-        </DropdownMenuItem>
-      </DropdownMenuGroup>
-    </DropdownMenuContent>
-  </DropdownMenu>
-</ThemeProvider>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem as-child>
+            <a
+              href="https://github.com/ivanskv2000/evsy"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center"
+            >
+              <Icon icon="simple-icons:github" class="mr-2 h-4 w-4" />
+              <span>GitHub source</span>
+            </a>
+          </DropdownMenuItem>
+          <DropdownMenuItem as-child>
+            <a
+              href="https://buymeacoffee.com/ivanskv2000"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center"
+            >
+              <Icon icon="simple-icons:buymeacoffee" class="mr-2 h-4 w-4" />
+              <span>Buy me a coffee</span>
+            </a>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </ThemeProvider>
 </template>
diff --git a/frontend/src/shared/ui/command/Command.vue b/frontend/src/shared/ui/command/Command.vue
index cdde82a..ec2d915 100644
--- a/frontend/src/shared/ui/command/Command.vue
+++ b/frontend/src/shared/ui/command/Command.vue
@@ -50,8 +50,7 @@ function filterItems() {
   for (const [id, value] of allItems.value) {
     const score = contains(value, filterState.search)
     filterState.filtered.items.set(id, score ? 1 : 0)
-    if (score)
-      itemCount++
+    if (score) itemCount++
   }
 
   // Check which groups have at least 1 item shown
@@ -71,9 +70,12 @@ function handleSelect() {
   filterState.search = ''
 }
 
-watch(() => filterState.search, () => {
-  filterItems()
-})
+watch(
+  () => filterState.search,
+  () => {
+    filterItems()
+  }
+)
 
 provideCommandContext({
   allItems,
@@ -86,7 +88,12 @@ provideCommandContext({
   <ListboxRoot
     data-slot="command"
     v-bind="forwarded"
-    :class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
+    :class="
+      cn(
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        props.class
+      )
+    "
   >
     <slot />
   </ListboxRoot>
diff --git a/frontend/src/shared/ui/command/CommandDialog.vue b/frontend/src/shared/ui/command/CommandDialog.vue
index 1f70174..a3b9940 100644
--- a/frontend/src/shared/ui/command/CommandDialog.vue
+++ b/frontend/src/shared/ui/command/CommandDialog.vue
@@ -1,16 +1,27 @@
 <script setup lang="ts">
 import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/shared/ui/dialog'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/shared/ui/dialog'
 import { useForwardPropsEmits } from 'reka-ui'
 import Command from './Command.vue'
 
-const props = withDefaults(defineProps<DialogRootProps & {
-  title?: string
-  description?: string
-}>(), {
-  title: 'Command Palette',
-  description: 'Search for a command to run...',
-})
+const props = withDefaults(
+  defineProps<
+    DialogRootProps & {
+      title?: string
+      description?: string
+    }
+  >(),
+  {
+    title: 'Command Palette',
+    description: 'Search for a command to run...',
+  }
+)
 const emits = defineEmits<DialogRootEmits>()
 
 const forwarded = useForwardPropsEmits(props, emits)
@@ -22,7 +33,7 @@ const forwarded = useForwardPropsEmits(props, emits)
       <DialogTitle>{{ title }}</DialogTitle>
       <DialogDescription>{{ description }}</DialogDescription>
     </DialogHeader>
-    <DialogContent class="overflow-hidden p-0 ">
+    <DialogContent class="overflow-hidden p-0">
       <Command>
         <slot />
       </Command>
diff --git a/frontend/src/shared/ui/command/CommandEmpty.vue b/frontend/src/shared/ui/command/CommandEmpty.vue
index 29ca5d5..ad899c7 100644
--- a/frontend/src/shared/ui/command/CommandEmpty.vue
+++ b/frontend/src/shared/ui/command/CommandEmpty.vue
@@ -14,15 +14,15 @@ const delegatedProps = computed(() => {
 })
 
 const { filterState } = useCommand()
-const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
-)
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0)
 </script>
 
 <template>
   <Primitive
     v-if="isRender"
     data-slot="command-empty"
-    v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)"
+    v-bind="delegatedProps"
+    :class="cn('py-6 text-center text-sm', props.class)"
   >
     <slot />
   </Primitive>
diff --git a/frontend/src/shared/ui/command/CommandGroup.vue b/frontend/src/shared/ui/command/CommandGroup.vue
index dc71d08..f298bf8 100644
--- a/frontend/src/shared/ui/command/CommandGroup.vue
+++ b/frontend/src/shared/ui/command/CommandGroup.vue
@@ -5,10 +5,12 @@ import { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'
 import { computed, type HTMLAttributes, onMounted, onUnmounted } from 'vue'
 import { provideCommandGroupContext, useCommand } from '.'
 
-const props = defineProps<ListboxGroupProps & {
-  class?: HTMLAttributes['class']
-  heading?: string
-}>()
+const props = defineProps<
+  ListboxGroupProps & {
+    class?: HTMLAttributes['class']
+    heading?: string
+  }
+>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -19,12 +21,11 @@ const delegatedProps = computed(() => {
 const { allGroups, filterState } = useCommand()
 const id = useId()
 
-const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+const isRender = computed(() => (!filterState.search ? true : filterState.filtered.groups.has(id)))
 
 provideCommandGroupContext({ id })
 onMounted(() => {
-  if (!allGroups.value.has(id))
-    allGroups.value.set(id, new Set())
+  if (!allGroups.value.has(id)) allGroups.value.set(id, new Set())
 })
 onUnmounted(() => {
   allGroups.value.delete(id)
@@ -39,7 +40,7 @@ onUnmounted(() => {
     :class="cn('text-foreground overflow-hidden p-1', props.class)"
     :hidden="isRender ? undefined : true"
   >
-    <ListboxGroupLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+    <ListboxGroupLabel v-if="heading" class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
       {{ heading }}
     </ListboxGroupLabel>
     <slot />
diff --git a/frontend/src/shared/ui/command/CommandInput.vue b/frontend/src/shared/ui/command/CommandInput.vue
index bdd81e7..291ebb0 100644
--- a/frontend/src/shared/ui/command/CommandInput.vue
+++ b/frontend/src/shared/ui/command/CommandInput.vue
@@ -9,9 +9,11 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<ListboxFilterProps & {
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps<
+  ListboxFilterProps & {
+    class?: HTMLAttributes['class']
+  }
+>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -25,17 +27,19 @@ const { filterState } = useCommand()
 </script>
 
 <template>
-  <div
-    data-slot="command-input-wrapper"
-    class="flex items-center gap-2 border-b px-3"
-  >
+  <div data-slot="command-input-wrapper" class="flex items-center gap-2 border-b px-3">
     <Search class="size-4 shrink-0 opacity-50" />
     <ListboxFilter
       v-bind="{ ...forwardedProps, ...$attrs }"
       v-model="filterState.search"
       data-slot="command-input"
       auto-focus
-      :class="cn('placeholder:text-muted-foreground flex w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+      :class="
+        cn(
+          'placeholder:text-muted-foreground flex w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          props.class
+        )
+      "
     />
   </div>
 </template>
diff --git a/frontend/src/shared/ui/command/CommandItem.vue b/frontend/src/shared/ui/command/CommandItem.vue
index abfb0ff..c18a7bd 100644
--- a/frontend/src/shared/ui/command/CommandItem.vue
+++ b/frontend/src/shared/ui/command/CommandItem.vue
@@ -23,36 +23,33 @@ const groupContext = useCommandGroup()
 
 const isRender = computed(() => {
   if (!filterState.search) {
-    return true;
-  }
-  else {
+    return true
+  } else {
     const filteredCurrentItem = filterState.filtered.items.get(id)
     // If the filtered items is undefined means not in the all times map yet
     // Do the first render to add into the map
     if (filteredCurrentItem === undefined) {
-      return true;
+      return true
     }
 
     // Check with filter
-    return filteredCurrentItem > 0;
+    return filteredCurrentItem > 0
   }
 })
 
 const itemRef = ref()
 const currentElement = useCurrentElement(itemRef)
 onMounted(() => {
-  if (!(currentElement.value instanceof HTMLElement))
-    return
+  if (!(currentElement.value instanceof HTMLElement)) return
 
   // textValue to perform filter
-  allItems.value.set(id, currentElement.value.textContent ?? (props.value?.toString() ?? ''))
+  allItems.value.set(id, currentElement.value.textContent ?? props.value?.toString() ?? '')
 
   const groupId = groupContext?.id
   if (groupId) {
     if (!allGroups.value.has(groupId)) {
       allGroups.value.set(groupId, new Set([id]))
-    }
-    else {
+    } else {
       allGroups.value.get(groupId)?.add(id)
     }
   }
@@ -69,10 +66,17 @@ onUnmounted(() => {
     :id="id"
     ref="itemRef"
     data-slot="command-item"
-    :class="cn(`data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
-    @select="() => {
-      filterState.search = ''
-    }"
+    :class="
+      cn(
+        `data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        props.class
+      )
+    "
+    @select="
+      () => {
+        filterState.search = ''
+      }
+    "
   >
     <slot />
   </ListboxItem>
diff --git a/frontend/src/shared/ui/command/index.ts b/frontend/src/shared/ui/command/index.ts
index cb48e1e..5262f53 100644
--- a/frontend/src/shared/ui/command/index.ts
+++ b/frontend/src/shared/ui/command/index.ts
@@ -16,7 +16,7 @@ export const [useCommand, provideCommandContext] = createContext<{
   allGroups: Ref<Map<string, Set<string>>>
   filterState: {
     search: string
-    filtered: { count: number, items: Map<string, number>, groups: Set<string> }
+    filtered: { count: number; items: Map<string, number>; groups: Set<string> }
   }
 }>('Command')
 
diff --git a/frontend/src/shared/ui/separator/Separator.vue b/frontend/src/shared/ui/separator/Separator.vue
index 22db63c..d276ce2 100644
--- a/frontend/src/shared/ui/separator/Separator.vue
+++ b/frontend/src/shared/ui/separator/Separator.vue
@@ -4,9 +4,7 @@ import { cn } from '@/shared/utils/general'
 import { reactiveOmit } from '@vueuse/core'
 import { Separator, type SeparatorProps } from 'reka-ui'
 
-const props = withDefaults(defineProps<
-  SeparatorProps & { class?: HTMLAttributes['class'] }
->(), {
+const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>(), {
   orientation: 'horizontal',
   decorative: true,
 })
@@ -21,7 +19,7 @@ const delegatedProps = reactiveOmit(props, 'class')
     :class="
       cn(
         `bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px`,
-        props.class,
+        props.class
       )
     "
   />
diff --git a/frontend/src/shared/ui/table/TableRow.vue b/frontend/src/shared/ui/table/TableRow.vue
index eb84bcd..afb8521 100644
--- a/frontend/src/shared/ui/table/TableRow.vue
+++ b/frontend/src/shared/ui/table/TableRow.vue
@@ -11,10 +11,7 @@ const props = defineProps<{
   <tr
     data-slot="table-row"
     :class="
-      cn(
-        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
-        props.class
-      )
+      cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', props.class)
     "
   >
     <slot />

From 0900be52e419550cda0ea0a4ac59547705e664b3 Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Mon, 12 May 2025 14:04:52 +0300
Subject: [PATCH 12/14] feat: love footer

---
 frontend/src/App.vue                                 |  1 +
 frontend/src/shared/components/layout/LoveFooter.vue |  9 +++++++++
 frontend/src/shared/components/layout/MainLayout.vue | 12 +++++++++---
 3 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/shared/components/layout/LoveFooter.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index efb410d..279149f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -6,6 +6,7 @@ import { Toaster } from '@/shared/ui/sonner'
 
 <template>
   <Toaster richColors />
+  
   <MainLayout>
     <RouterView v-slot="{ Component }">
       <Transition name="page" mode="out-in" appear>
diff --git a/frontend/src/shared/components/layout/LoveFooter.vue b/frontend/src/shared/components/layout/LoveFooter.vue
new file mode 100644
index 0000000..509b42f
--- /dev/null
+++ b/frontend/src/shared/components/layout/LoveFooter.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+</script>
+
+<template>
+<footer class="bg-background border-t py-3 text-center text-xs text-muted-foreground">
+    Made with <Icon icon="radix-icons:heart-filled" class="h-lh w-lh inline" /> by <a href="https://github.com/ivanskv2000" target="_blank" class="underline underline-offset-2 hover:text-primary transition-colors">ivanskv2000</a>
+</footer>
+</template>
diff --git a/frontend/src/shared/components/layout/MainLayout.vue b/frontend/src/shared/components/layout/MainLayout.vue
index a8fc8d0..81ed321 100644
--- a/frontend/src/shared/components/layout/MainLayout.vue
+++ b/frontend/src/shared/components/layout/MainLayout.vue
@@ -2,11 +2,13 @@
 import MainLogo from '@/shared/components/layout/MainLogo.vue'
 import NavigationMenu from '@/shared/components/layout/NavigationMenu.vue'
 import DropdownMenu from '@/shared/components/layout/DropdownMenu.vue'
+import LoveFooter from './LoveFooter.vue'
 </script>
 
 <template>
-  <div class="bg-background min-h-screen">
-    <header class="bg-background sticky top-0 z-50 w-full border-b">
+  <div class="flex min-h-screen flex-col bg-background">
+    <!-- Header -->
+    <header class="bg-background sticky top-0 z-50 w-full border-b drop-shadow-accent">
       <div class="container flex h-14 items-center">
         <div class="flex">
           <MainLogo />
@@ -18,8 +20,12 @@ import DropdownMenu from '@/shared/components/layout/DropdownMenu.vue'
       </div>
     </header>
 
-    <main class="container py-6">
+    <!-- Main Content -->
+    <main class="container py-6 flex-1">
       <slot />
     </main>
+
+    <!-- Sticky Footer -->
+    <LoveFooter />
   </div>
 </template>

From 95b142390b6804cc41843d58c5441acc847ab553 Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Mon, 12 May 2025 14:06:13 +0300
Subject: [PATCH 13/14] feat: love footer

---
 frontend/src/App.vue                                 |  2 +-
 frontend/src/shared/components/layout/LoveFooter.vue | 12 +++++++++---
 frontend/src/shared/components/layout/MainLayout.vue |  6 +++---
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 279149f..b3df123 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -6,7 +6,7 @@ import { Toaster } from '@/shared/ui/sonner'
 
 <template>
   <Toaster richColors />
-  
+
   <MainLayout>
     <RouterView v-slot="{ Component }">
       <Transition name="page" mode="out-in" appear>
diff --git a/frontend/src/shared/components/layout/LoveFooter.vue b/frontend/src/shared/components/layout/LoveFooter.vue
index 509b42f..3c06841 100644
--- a/frontend/src/shared/components/layout/LoveFooter.vue
+++ b/frontend/src/shared/components/layout/LoveFooter.vue
@@ -3,7 +3,13 @@ import { Icon } from '@iconify/vue'
 </script>
 
 <template>
-<footer class="bg-background border-t py-3 text-center text-xs text-muted-foreground">
-    Made with <Icon icon="radix-icons:heart-filled" class="h-lh w-lh inline" /> by <a href="https://github.com/ivanskv2000" target="_blank" class="underline underline-offset-2 hover:text-primary transition-colors">ivanskv2000</a>
-</footer>
+  <footer class="bg-background drop-shadow-accent text-muted-foreground border-t py-3 text-center text-xs">
+    Made with <Icon icon="radix-icons:heart-filled" class="h-lh w-lh inline" /> by
+    <a
+      href="https://github.com/ivanskv2000"
+      target="_blank"
+      class="hover:text-primary underline underline-offset-2 transition-colors"
+      >ivanskv2000</a
+    >
+  </footer>
 </template>
diff --git a/frontend/src/shared/components/layout/MainLayout.vue b/frontend/src/shared/components/layout/MainLayout.vue
index 81ed321..18418cb 100644
--- a/frontend/src/shared/components/layout/MainLayout.vue
+++ b/frontend/src/shared/components/layout/MainLayout.vue
@@ -6,9 +6,9 @@ import LoveFooter from './LoveFooter.vue'
 </script>
 
 <template>
-  <div class="flex min-h-screen flex-col bg-background">
+  <div class="bg-background flex min-h-screen flex-col">
     <!-- Header -->
-    <header class="bg-background sticky top-0 z-50 w-full border-b drop-shadow-accent">
+    <header class="bg-background drop-shadow-accent sticky top-0 z-50 w-full border-b">
       <div class="container flex h-14 items-center">
         <div class="flex">
           <MainLogo />
@@ -21,7 +21,7 @@ import LoveFooter from './LoveFooter.vue'
     </header>
 
     <!-- Main Content -->
-    <main class="container py-6 flex-1">
+    <main class="container flex-1 py-6">
       <slot />
     </main>
 

From f8455dbaac35a68d57fa773da1ace3725889b781 Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Mon, 12 May 2025 14:07:17 +0300
Subject: [PATCH 14/14] style

---
 frontend/src/shared/components/layout/LoveFooter.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/shared/components/layout/LoveFooter.vue b/frontend/src/shared/components/layout/LoveFooter.vue
index 3c06841..51ed39c 100644
--- a/frontend/src/shared/components/layout/LoveFooter.vue
+++ b/frontend/src/shared/components/layout/LoveFooter.vue
@@ -3,7 +3,9 @@ import { Icon } from '@iconify/vue'
 </script>
 
 <template>
-  <footer class="bg-background drop-shadow-accent text-muted-foreground border-t py-3 text-center text-xs">
+  <footer
+    class="bg-background drop-shadow-accent text-muted-foreground border-t py-3 text-center text-xs"
+  >
     Made with <Icon icon="radix-icons:heart-filled" class="h-lh w-lh inline" /> by
     <a
       href="https://github.com/ivanskv2000"