From 14f516d5cc64b38a8ac9185702ad0b74a3fc2059 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Tue, 21 Jul 2026 01:06:59 +0700
Subject: [PATCH] feat(web): refactor list selection components for improved
 maintainability

- Introduced constants for selection items in both list detail and lists pages to enhance code readability and maintainability.
- Updated the Select components to utilize the new constants, streamlining the rendering of options for 'add mode' and 'create source'.
- Improved user experience by ensuring consistent labeling and structure across selection interfaces.
---
 apps/web/src/routes/_auth/lists/$id.tsx   | 23 +++++++++++++++++------
 apps/web/src/routes/_auth/lists/index.tsx | 19 +++++++++++++------
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/routes/_auth/lists/$id.tsx b/apps/web/src/routes/_auth/lists/$id.tsx
index 8cc0ec9..575da59 100644
--- a/apps/web/src/routes/_auth/lists/$id.tsx
+++ b/apps/web/src/routes/_auth/lists/$id.tsx
@@ -77,6 +77,11 @@ type ListItem = {
   resolved_cidrs: string[]
 }
 
+const ADD_MODE_ITEMS = [
+  { value: 'plaintext', label: 'Значения (автоопределение)' },
+  { value: 'nested', label: 'Вложенный список' },
+] as const
+
 /**
  * List detail — DetailPanel + KpiStatGrid + entries ResourcePage.
  * KPI: https://reui.io/preview/base/stats-12
@@ -513,19 +518,21 @@ function ListDetailPage() {
               <Field>
                 <FieldLabel>Режим</FieldLabel>
                 <Select
+                  items={[...ADD_MODE_ITEMS]}
                   value={addMode}
                   onValueChange={(v) => {
                     if (v === 'plaintext' || v === 'nested') setAddMode(v)
                   }}
                 >
-                  <SelectTrigger>
+                  <SelectTrigger className="w-full">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="plaintext">
-                      Значения (автоопределение)
-                    </SelectItem>
-                    <SelectItem value="nested">Вложенный список</SelectItem>
+                    {ADD_MODE_ITEMS.map((item) => (
+                      <SelectItem key={item.value} value={item.value}>
+                        {item.label}
+                      </SelectItem>
+                    ))}
                   </SelectContent>
                 </Select>
               </Field>
@@ -533,12 +540,16 @@ function ListDetailPage() {
                 <Field>
                   <FieldLabel>Список</FieldLabel>
                   <Select
+                    items={nestedCandidates.map((l) => ({
+                      value: l.id,
+                      label: l.name,
+                    }))}
                     value={addListRef || null}
                     onValueChange={(v) => {
                       if (v) setAddListRef(v)
                     }}
                   >
-                    <SelectTrigger>
+                    <SelectTrigger className="w-full">
                       <SelectValue placeholder="Выберите список" />
                     </SelectTrigger>
                     <SelectContent>
diff --git a/apps/web/src/routes/_auth/lists/index.tsx b/apps/web/src/routes/_auth/lists/index.tsx
index b696717..790dfaf 100644
--- a/apps/web/src/routes/_auth/lists/index.tsx
+++ b/apps/web/src/routes/_auth/lists/index.tsx
@@ -42,6 +42,12 @@ export const Route = createFileRoute('/_auth/lists/')({
 
 type CreateSource = 'static' | 'json_url' | 'evobgp_community'
 
+const CREATE_SOURCE_ITEMS = [
+  { value: 'static', label: 'Ручной' },
+  { value: 'json_url', label: 'JSON по URL' },
+  { value: 'evobgp_community', label: 'EvoBGP community' },
+] as const
+
 /**
  * Lists catalog — ResourcePage (Frame + tabs + Filters + DataGrid).
  * Preview: https://reui.io/preview/base/data-grid-filtering-2
@@ -219,20 +225,21 @@ function ListsPage() {
               <Field>
                 <FieldLabel>Источник</FieldLabel>
                 <Select
+                  items={[...CREATE_SOURCE_ITEMS]}
                   value={source}
                   onValueChange={(v) => {
                     if (v) setSource(v as CreateSource)
                   }}
                 >
-                  <SelectTrigger>
+                  <SelectTrigger className="w-full">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="static">Ручной</SelectItem>
-                    <SelectItem value="json_url">JSON по URL</SelectItem>
-                    <SelectItem value="evobgp_community">
-                      EvoBGP community
-                    </SelectItem>
+                    {CREATE_SOURCE_ITEMS.map((item) => (
+                      <SelectItem key={item.value} value={item.value}>
+                        {item.label}
+                      </SelectItem>
+                    ))}
                   </SelectContent>
                 </Select>
               </Field>