fix(pagination): enhance DataGridPagination to dynamically populate Select items

Updated the DataGridPagination component to map available sizes into Select items for better user experience. This change allows for dynamic selection of page sizes based on the provided props.

apps/web/src/components/reui/data-grid/data-grid-pagination.tsx

@@ -153,6 +153,10 @@ function DataGridPagination(props: DataGridPaginationProps): React.JSX.Element {
               {mergedProps.rowsPerPageLabel}
             </div>
             <Select
+              items={mergedProps?.sizes?.map((size: number) => ({
+                value: `${size}`,
+                label: `${size}`,
+              }))}
               value={`${pageSize}`}
               onValueChange={(value) => {
                 const newPageSize = Number(value)

apps/web/src/routes/_auth/operations.tsx

@@ -2,7 +2,7 @@ import { createFileRoute, useSearch } from '@tanstack/react-router'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { AlertTriangle, Clock, Activity, Info, RefreshCw } from 'lucide-react'
 import { toast } from 'sonner'
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
 
 import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
 import { Button } from '@evobgp/ui/components/button'
@@ -368,6 +368,14 @@ function DiffTab({ revisions }: { revisions: import('@/types/api').RevisionRow[]
   const [a, setA] = useState('')
   const [b, setB] = useState('')
   const diffQ = useQuery(operationsDiffQueryOptions(a, b))
+  const revisionItems = useMemo(
+    () =>
+      revisions.map((r) => ({
+        value: r.id,
+        label: `${r.id.slice(0, 12)}…`,
+      })),
+    [revisions],
+  )
 
   return (
     <Card>
@@ -378,7 +386,7 @@ function DiffTab({ revisions }: { revisions: import('@/types/api').RevisionRow[]
         <div className="flex flex-wrap items-end gap-3">
           <div className="flex w-full max-w-xs flex-col gap-1">
             <span className="text-xs text-muted-foreground">Ревизия A</span>
-            <Select value={a} onValueChange={(v) => v && setA(v)}>
+            <Select items={revisionItems} value={a} onValueChange={(v) => v && setA(v)}>
               <SelectTrigger>
                 <SelectValue placeholder="Выберите" />
               </SelectTrigger>
@@ -393,7 +401,7 @@ function DiffTab({ revisions }: { revisions: import('@/types/api').RevisionRow[]
           </div>
           <div className="flex w-full max-w-xs flex-col gap-1">
             <span className="text-xs text-muted-foreground">Ревизия B</span>
-            <Select value={b} onValueChange={(v) => v && setB(v)}>
+            <Select items={revisionItems} value={b} onValueChange={(v) => v && setB(v)}>
               <SelectTrigger>
                 <SelectValue placeholder="Выберите" />
               </SelectTrigger>

apps/web/src/routes/_auth/settings.tsx

@@ -25,6 +25,12 @@ export const Route = createFileRoute('/_auth/settings')({
   component: SettingsComponent,
 })
 
+const THEME_SELECT_ITEMS = [
+  { value: 'light', label: 'Светлая' },
+  { value: 'dark', label: 'Тёмная' },
+  { value: 'system', label: 'Как в системе' },
+] as const
+
 function SettingsComponent() {
   const { data: session } = useQuery(authSessionQueryOptions())
   const { theme, setTheme } = useTheme()
@@ -90,7 +96,11 @@ function SettingsComponent() {
         </CardHeader>
         <CardContent className="flex flex-col gap-2">
           <Label htmlFor="theme-select">Тема</Label>
-          <Select value={theme ?? 'system'} onValueChange={(v) => v && setTheme(v)}>
+          <Select
+            items={[...THEME_SELECT_ITEMS]}
+            value={theme ?? 'system'}
+            onValueChange={(v) => v && setTheme(v)}
+          >
             <SelectTrigger id="theme-select" className="w-full max-w-xs">
               <SelectValue placeholder="Выберите тему" />
             </SelectTrigger>

apps/web/src/routes/_auth/tenant-settings.tsx

@@ -49,6 +49,16 @@ export const Route = createFileRoute('/_auth/tenant-settings')({
   }),
 })
 
+const RUNTIME_LOGS_ENABLED_ITEMS = [
+  { value: 'true', label: 'Вкл' },
+  { value: 'false', label: 'Выкл' },
+] as const
+
+const RUNTIME_LOGS_MODE_ITEMS = [
+  { value: 'truncate', label: 'truncate — обнулить' },
+  { value: 'delete', label: 'delete — удалить файл' },
+] as const
+
 const BIRD_LABELS: Record<BirdSettingKey, string> = {
   bird_router_id: 'Router ID',
   bird_local_ipv4: 'Локальный IPv4',
@@ -242,6 +252,7 @@ function TenantSettingsComponent() {
                     <div className="flex flex-col gap-1.5">
                       <Label>Авто-очистка включена</Label>
                       <Select
+                        items={[...RUNTIME_LOGS_ENABLED_ITEMS]}
                         value={runtimeLogsForm.runtime_logs_auto_enabled ?? 'false'}
                         onValueChange={(v) =>
                           v &&
@@ -299,6 +310,7 @@ function TenantSettingsComponent() {
                     <div className="flex flex-col gap-1.5">
                       <Label>Режим очистки</Label>
                       <Select
+                        items={[...RUNTIME_LOGS_MODE_ITEMS]}
                         value={runtimeLogsForm.runtime_logs_auto_mode ?? ''}
                         onValueChange={(v) =>
                           v &&

packages/ui/src/components/select.tsx

@@ -111,11 +111,15 @@ function SelectLabel({
 function SelectItem({
   className,
   children,
+  label,
   ...props
 }: SelectPrimitive.Item.Props) {
+  const resolvedLabel = label ?? (typeof children === "string" ? children : undefined)
+
   return (
     <SelectPrimitive.Item
       data-slot="select-item"
+      label={resolvedLabel}
       className={cn(
         "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className