From f543fa18750ad84c28b617ea042956b89c74145e Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Mon, 18 May 2026 20:05:11 +0200
Subject: [PATCH 1/6] feat(frontend): improve CompactDataTablePagination with
 compact text sizing

---
 .../src/shared/components/data/CompactDataTablePagination.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/shared/components/data/CompactDataTablePagination.vue b/frontend/src/shared/components/data/CompactDataTablePagination.vue
index 44477cc..b39d051 100644
--- a/frontend/src/shared/components/data/CompactDataTablePagination.vue
+++ b/frontend/src/shared/components/data/CompactDataTablePagination.vue
@@ -20,7 +20,7 @@ defineProps<{
       <Icon icon="radix-icons:chevron-left" class="h-4 w-4" />
     </Button>
 
-    <span class="text-muted-foreground text-sm">
+    <span class="text-muted-foreground text-xs">
       Page {{ table.getState().pagination.pageIndex + 1 }} of {{ table.getPageCount() }}
     </span>
 

From a51911f91ba60a2c3ea33d8341afdcde7c1f386a Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Mon, 18 May 2026 20:05:20 +0200
Subject: [PATCH 2/6] feat(frontend): upgrade LinkedFieldsSelector to paginated
 data table interface

---
 .../modules/events/components/EventForm.vue   |  43 ++++--
 .../components/LinkedFieldsSelector.vue       | 134 ++++++++++++++----
 2 files changed, 137 insertions(+), 40 deletions(-)

diff --git a/frontend/src/modules/events/components/EventForm.vue b/frontend/src/modules/events/components/EventForm.vue
index bc75b95..65dbbfe 100644
--- a/frontend/src/modules/events/components/EventForm.vue
+++ b/frontend/src/modules/events/components/EventForm.vue
@@ -53,18 +53,6 @@ const { handleSubmit, values, setValues, setFieldValue } = useForm<EventFormValu
   validationSchema: toTypedSchema(eventSchema),
 })
 
-function toggleFieldSelection(id: number) {
-  const current = values.fields || []
-  if (current.includes(id)) {
-    setFieldValue(
-      'fields',
-      current.filter(f => f !== id)
-    )
-  } else {
-    setFieldValue('fields', [...current, id])
-  }
-}
-
 watchEffect(() => {
   if (props.event) {
     setValues({
@@ -115,6 +103,7 @@ function removeTag(tagId: string) {
             autocapitalize="off"
             autocomplete="off"
             spellcheck="false"
+            name="event-name"
             v-bind="componentField"
           />
         </FormControl>
@@ -131,6 +120,7 @@ function removeTag(tagId: string) {
             type="text"
             placeholder="Optional description"
             autocomplete="off"
+            name="event-description"
             v-bind="componentField"
           />
         </FormControl>
@@ -230,16 +220,39 @@ function removeTag(tagId: string) {
     </FormField>
 
     <!-- Linked Fields -->
-    <FormField name="fields">
+    <FormField name="fields" v-slot="{ componentField }">
       <FormItem>
         <FormLabel>Linked Fields</FormLabel>
         <FormDescription>Choose one or more fields this event uses.</FormDescription>
         <FormControl>
           <LinkedFieldsSelector
             :fields="availableFields"
-            :selected-ids="values.fields"
+            :selected-ids="componentField.modelValue || []"
             :is-loading="isLoadingFields"
-            @toggle="toggleFieldSelection"
+            @toggle="
+              (id: number) => {
+                const current: number[] = componentField.modelValue || []
+                const updated = current.includes(id)
+                  ? current.filter((f: number) => f !== id)
+                  : [...current, id]
+                componentField.onChange(updated)
+              }
+            "
+            @toggle-all="
+              (ids: number[], selected: boolean) => {
+                const current: number[] = componentField.modelValue || []
+                let updated: number[]
+                if (selected) {
+                  // Add all missing IDs
+                  const toAdd = ids.filter(id => !current.includes(id))
+                  updated = [...current, ...toAdd]
+                } else {
+                  // Remove all provided IDs
+                  updated = current.filter(id => !ids.includes(id))
+                }
+                componentField.onChange(updated)
+              }
+            "
           />
         </FormControl>
         <FormMessage />
diff --git a/frontend/src/modules/fields/components/LinkedFieldsSelector.vue b/frontend/src/modules/fields/components/LinkedFieldsSelector.vue
index 0b8fb00..ec1c75b 100644
--- a/frontend/src/modules/fields/components/LinkedFieldsSelector.vue
+++ b/frontend/src/modules/fields/components/LinkedFieldsSelector.vue
@@ -1,41 +1,125 @@
 <script setup lang="ts">
+import { h, computed } from 'vue'
 import type { Field } from '@/modules/fields/types'
-import Skeleton from '@/shared/ui/skeleton/Skeleton.vue'
-import Checkbox from '@/shared/ui/checkbox/Checkbox.vue'
+import type { ColumnDef } from '@tanstack/vue-table'
+import { Checkbox } from '@/shared/ui/checkbox'
+import { Input } from '@/shared/ui/input'
+import { useDataTable } from '@/shared/composables/useDataTable'
+import DataTable from '@/shared/components/data/DataTable.vue'
+import DataTableSkeleton from '@/shared/components/skeletons/DataTableSkeleton.vue'
+import CompactDataTablePagination from '@/shared/components/data/CompactDataTablePagination.vue'
+import DataTableColumnHeader from '@/shared/components/data/DataTableColumnHeader.vue'
 
-defineProps<{
+const props = defineProps<{
   fields: Field[]
-  selectedIds: number[]
+  selectedIds?: number[]
   isLoading?: boolean
 }>()
 
 const emit = defineEmits<{
   (e: 'toggle', id: number): void
+  (e: 'toggleAll', ids: number[], selected: boolean): void
 }>()
+
+const safeSelectedIds = computed(() => props.selectedIds || [])
+
+const columns = computed<ColumnDef<Field>[]>(() => [
+  {
+    accessorKey: 'id',
+    enableHiding: false,
+    meta: {
+      class: 'w-[6ch] text-center',
+      headerClass: 'w-[6ch] text-center',
+    },
+    header: ({ column }) =>
+      h(DataTableColumnHeader<Field, unknown>, {
+        column,
+        title: 'ID',
+        align: 'center',
+      }),
+    cell: ({ row }) => h('div', { class: 'text-center font-medium' }, row.original.id),
+  },
+  {
+    accessorKey: 'name',
+    enableHiding: false,
+    header: ({ column }) => h(DataTableColumnHeader<Field, unknown>, { column, title: 'Name' }),
+    cell: ({ row }) =>
+      h(
+        'div',
+        {
+          class: 'truncate whitespace-nowrap overflow-hidden text-left font-medium',
+          title: row.original.name,
+        },
+        row.original.name
+      ),
+  },
+  {
+    id: 'selection',
+    enableHiding: false,
+    header: ({ table }) => {
+      const rows = table.getFilteredRowModel().rows
+      const allIds = rows.map(r => r.original.id)
+      const isAllSelected =
+        allIds.length > 0 && allIds.every(id => safeSelectedIds.value.includes(id))
+      const isSomeSelected = allIds.some(id => safeSelectedIds.value.includes(id))
+
+      return h(
+        'div',
+        { class: 'flex justify-end pr-6' },
+        h(Checkbox, {
+          modelValue: isAllSelected || (isSomeSelected && 'indeterminate'),
+          'onUpdate:modelValue': (value: boolean | 'indeterminate') =>
+            emit('toggleAll', allIds, value === true),
+          ariaLabel: 'Select all',
+        })
+      )
+    },
+    cell: ({ row }) =>
+      h(
+        'div',
+        { class: 'flex justify-end pr-6' },
+        h(Checkbox, {
+          modelValue: safeSelectedIds.value.includes(row.original.id),
+          'onUpdate:modelValue': () => emit('toggle', row.original.id),
+          ariaLabel: 'Select field',
+        })
+      ),
+  },
+])
+
+const { table } = useDataTable({
+  data: () => props.fields,
+  columns: () => columns.value,
+  defaultPageSize: 5,
+})
 </script>
 
 <template>
-  <div class="max-h-24 space-y-2 overflow-y-auto rounded-md border p-4 shadow-xs">
-    <template v-if="isLoading">
-      <Skeleton v-for="i in 4" :key="i" class="h-5 w-[70%] rounded-md shadow-xs" />
-    </template>
-
-    <Transition name="fade" appear>
-      <div v-if="!isLoading" class="space-y-2">
-        <div v-for="field in fields" :key="field.id" class="flex items-center gap-2">
-          <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 leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-          >
-            {{ field.name }}
-          </label>
-        </div>
+  <div class="flex flex-col gap-3">
+    <!-- Full-width Search -->
+    <div class="relative w-full">
+      <Input
+        class="h-9 w-full"
+        placeholder="Search fields..."
+        :model-value="table.getColumn('name')?.getFilterValue() as string"
+        @update:model-value="table.getColumn('name')?.setFilterValue($event)"
+        autocomplete="off"
+        name="field-search"
+      />
+    </div>
+
+    <!-- Table Container -->
+    <div class="rounded-md border shadow-xs">
+      <DataTableSkeleton v-if="isLoading" :columns="3" :rows="5" />
+      <DataTable v-else :table="table" class="border-none shadow-none" />
+    </div>
+
+    <!-- Footer with Pagination and Summary -->
+    <div class="flex items-center justify-between px-1">
+      <div class="text-muted-foreground text-xs font-medium">
+        {{ safeSelectedIds.length }} field(s) selected
       </div>
-    </Transition>
+      <CompactDataTablePagination v-if="table.getPageCount() > 1" :table="table" />
+    </div>
   </div>
 </template>

From c97e99affee8a59c33bcdb42057595c2490af3d5 Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Mon, 18 May 2026 20:05:44 +0200
Subject: [PATCH 3/6] refactor(frontend): polish form layouts and improve input
 attributes for security

---
 frontend/src/modules/events/pages/EventCreatePage.vue | 2 +-
 frontend/src/modules/fields/components/FieldForm.vue  | 4 ++--
 frontend/src/modules/tags/components/TagForm.vue      | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/modules/events/pages/EventCreatePage.vue b/frontend/src/modules/events/pages/EventCreatePage.vue
index fdf3fc0..7ce20f7 100644
--- a/frontend/src/modules/events/pages/EventCreatePage.vue
+++ b/frontend/src/modules/events/pages/EventCreatePage.vue
@@ -45,7 +45,7 @@ const onSubmit = (values: EventFormValues) => {
   <div>
     <Header title="Create new event" backLink fallbackBackLink="/events" />
 
-    <Card class="mx-auto max-w-md">
+    <Card class="mx-auto max-w-lg">
       <CardContent>
         <EventForm
           :availableFields="fields ?? []"
diff --git a/frontend/src/modules/fields/components/FieldForm.vue b/frontend/src/modules/fields/components/FieldForm.vue
index c116297..9998d5a 100644
--- a/frontend/src/modules/fields/components/FieldForm.vue
+++ b/frontend/src/modules/fields/components/FieldForm.vue
@@ -44,7 +44,7 @@ const fieldTypeOptions = Object.entries(FieldType).map(([key, value]) => ({
 <template>
   <form @submit="onSubmit" class="mt-2 space-y-6">
     <!-- Name -->
-    <FormField name="name" v-slot="{ componentField }">
+    <FormField name="field-name" v-slot="{ componentField }">
       <FormItem>
         <FormLabel>Name</FormLabel>
         <FormControl>
@@ -86,7 +86,7 @@ const fieldTypeOptions = Object.entries(FieldType).map(([key, value]) => ({
     </FormField>
 
     <!-- Description -->
-    <FormField name="description" v-slot="{ componentField }">
+    <FormField name="field-description" v-slot="{ componentField }">
       <FormItem>
         <FormLabel>Description</FormLabel>
         <FormControl>
diff --git a/frontend/src/modules/tags/components/TagForm.vue b/frontend/src/modules/tags/components/TagForm.vue
index 48fbdc6..73923af 100644
--- a/frontend/src/modules/tags/components/TagForm.vue
+++ b/frontend/src/modules/tags/components/TagForm.vue
@@ -45,7 +45,7 @@ const onSubmit = handleSubmit(values => {
 <template>
   <form @submit="onSubmit" class="mt-2 space-y-6">
     <!-- Tag ID -->
-    <FormField name="id" v-slot="{ componentField }">
+    <FormField name="tag-id" v-slot="{ componentField }">
       <FormItem>
         <FormLabel>Tag ID</FormLabel>
         <FormControl>
@@ -67,7 +67,7 @@ const onSubmit = handleSubmit(values => {
     </FormField>
 
     <!-- Description -->
-    <FormField name="description" v-slot="{ componentField }">
+    <FormField name="tag-description" v-slot="{ componentField }">
       <FormItem>
         <FormLabel>Description</FormLabel>
         <FormControl>

From e3ff456cf211690024904ea65a55d63ea56e1ad8 Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Mon, 18 May 2026 20:05:50 +0200
Subject: [PATCH 4/6] fix(frontend): enable Vite polling for reliable Docker
 HMR on macOS

---
 frontend/vite.config.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index ea88f18..40c8716 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -11,6 +11,9 @@ export default defineConfig({
   server: {
     host: true,
     port: 5173,
+    watch: {
+      usePolling: true,
+    },
   },
 
   resolve: {

From 676f52967dbf3f83e39b68448e0f2dc4f4b08cad Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Mon, 18 May 2026 20:09:40 +0200
Subject: [PATCH 5/6] fix(frontend): resolve build errors and remove deprecated
 tsconfig options

---
 frontend/src/modules/events/components/EventForm.vue | 6 ++----
 frontend/tsconfig.app.json                           | 1 -
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/frontend/src/modules/events/components/EventForm.vue b/frontend/src/modules/events/components/EventForm.vue
index 65dbbfe..8410f34 100644
--- a/frontend/src/modules/events/components/EventForm.vue
+++ b/frontend/src/modules/events/components/EventForm.vue
@@ -93,7 +93,7 @@ function removeTag(tagId: string) {
 <template>
   <form @submit="onSubmit" class="mt-2 space-y-6">
     <!-- Event Name -->
-    <FormField name="name" v-slot="{ componentField }">
+    <FormField name="event-name" v-slot="{ componentField }">
       <FormItem>
         <FormLabel>Event Name</FormLabel>
         <FormControl>
@@ -103,7 +103,6 @@ function removeTag(tagId: string) {
             autocapitalize="off"
             autocomplete="off"
             spellcheck="false"
-            name="event-name"
             v-bind="componentField"
           />
         </FormControl>
@@ -112,7 +111,7 @@ function removeTag(tagId: string) {
     </FormField>
 
     <!-- Description -->
-    <FormField name="description" v-slot="{ componentField }">
+    <FormField name="event-description" v-slot="{ componentField }">
       <FormItem>
         <FormLabel>Description</FormLabel>
         <FormControl>
@@ -120,7 +119,6 @@ function removeTag(tagId: string) {
             type="text"
             placeholder="Optional description"
             autocomplete="off"
-            name="event-description"
             v-bind="componentField"
           />
         </FormControl>
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
index b133d1e..263fd43 100644
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -9,7 +9,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
     }

From 5cff71674503934c5a434a5c4677da4e0ad38d9a Mon Sep 17 00:00:00 2001
From: Ivan Skvortsov <ivanskv2000@gmail.com>
Date: Tue, 19 May 2026 10:35:09 +0200
Subject: [PATCH 6/6] fix(frontend): restore FormField names for correct data
 pre-filling

---
 frontend/src/modules/events/components/EventForm.vue | 4 ++--
 frontend/src/modules/fields/components/FieldForm.vue | 4 ++--
 frontend/src/modules/tags/components/TagForm.vue     | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/modules/events/components/EventForm.vue b/frontend/src/modules/events/components/EventForm.vue
index 8410f34..aa0f4af 100644
--- a/frontend/src/modules/events/components/EventForm.vue
+++ b/frontend/src/modules/events/components/EventForm.vue
@@ -93,7 +93,7 @@ function removeTag(tagId: string) {
 <template>
   <form @submit="onSubmit" class="mt-2 space-y-6">
     <!-- Event Name -->
-    <FormField name="event-name" v-slot="{ componentField }">
+    <FormField name="name" v-slot="{ componentField }">
       <FormItem>
         <FormLabel>Event Name</FormLabel>
         <FormControl>
@@ -111,7 +111,7 @@ function removeTag(tagId: string) {
     </FormField>
 
     <!-- Description -->
-    <FormField name="event-description" v-slot="{ componentField }">
+    <FormField name="description" v-slot="{ componentField }">
       <FormItem>
         <FormLabel>Description</FormLabel>
         <FormControl>
diff --git a/frontend/src/modules/fields/components/FieldForm.vue b/frontend/src/modules/fields/components/FieldForm.vue
index 9998d5a..c116297 100644
--- a/frontend/src/modules/fields/components/FieldForm.vue
+++ b/frontend/src/modules/fields/components/FieldForm.vue
@@ -44,7 +44,7 @@ const fieldTypeOptions = Object.entries(FieldType).map(([key, value]) => ({
 <template>
   <form @submit="onSubmit" class="mt-2 space-y-6">
     <!-- Name -->
-    <FormField name="field-name" v-slot="{ componentField }">
+    <FormField name="name" v-slot="{ componentField }">
       <FormItem>
         <FormLabel>Name</FormLabel>
         <FormControl>
@@ -86,7 +86,7 @@ const fieldTypeOptions = Object.entries(FieldType).map(([key, value]) => ({
     </FormField>
 
     <!-- Description -->
-    <FormField name="field-description" v-slot="{ componentField }">
+    <FormField name="description" v-slot="{ componentField }">
       <FormItem>
         <FormLabel>Description</FormLabel>
         <FormControl>
diff --git a/frontend/src/modules/tags/components/TagForm.vue b/frontend/src/modules/tags/components/TagForm.vue
index 73923af..48fbdc6 100644
--- a/frontend/src/modules/tags/components/TagForm.vue
+++ b/frontend/src/modules/tags/components/TagForm.vue
@@ -45,7 +45,7 @@ const onSubmit = handleSubmit(values => {
 <template>
   <form @submit="onSubmit" class="mt-2 space-y-6">
     <!-- Tag ID -->
-    <FormField name="tag-id" v-slot="{ componentField }">
+    <FormField name="id" v-slot="{ componentField }">
       <FormItem>
         <FormLabel>Tag ID</FormLabel>
         <FormControl>
@@ -67,7 +67,7 @@ const onSubmit = handleSubmit(values => {
     </FormField>
 
     <!-- Description -->
-    <FormField name="tag-description" v-slot="{ componentField }">
+    <FormField name="description" v-slot="{ componentField }">
       <FormItem>
         <FormLabel>Description</FormLabel>
         <FormControl>