From 57ee231417b93dd1d3b6c1c8e0ae34c9bccb26f3 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Fri, 17 Jul 2026 13:48:42 +0700
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20=D0=B7=D0=B0=D0=BC=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D1=82=D1=8C=20Badge=20=D0=B8=20Alert=20=D0=BD=D0=B0=20Re?=
 =?UTF-8?q?UI=20semantic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Перевести AppBadge/AppAlert и потребители на @/components/reui; EmptyState — IconStack в духе empty-state-12.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/web/src/components/app-alert.tsx         |  8 ++++-
 apps/web/src/components/app-badge.tsx         |  3 +-
 apps/web/src/components/domain-ip-badges.tsx  |  8 ++---
 apps/web/src/components/empty-state.tsx       | 35 +++++++++++++++----
 apps/web/src/components/query-state.tsx       | 25 +++++++------
 .../src/components/reui-kit/resource-page.tsx |  9 +++--
 apps/web/src/components/tagged-input.tsx      |  6 ++--
 7 files changed, 63 insertions(+), 31 deletions(-)

diff --git a/apps/web/src/components/app-alert.tsx b/apps/web/src/components/app-alert.tsx
index 3980798..ba9d862 100644
--- a/apps/web/src/components/app-alert.tsx
+++ b/apps/web/src/components/app-alert.tsx
@@ -1,5 +1,10 @@
 import type { ComponentProps } from 'react'
-import { Alert, AlertAction, AlertDescription, AlertTitle } from '@cfdm/ui/components/alert'
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+} from '@/components/reui/alert'
 import { cn } from '@cfdm/ui/lib/utils'
 
 export type AppAlertProps = ComponentProps<typeof Alert>
@@ -7,6 +12,7 @@ export type AppAlertTitleProps = ComponentProps<typeof AlertTitle>
 export type AppAlertDescriptionProps = ComponentProps<typeof AlertDescription>
 export type AppAlertActionProps = ComponentProps<typeof AlertAction>
 
+/** Thin alias over ReUI Alert — prefer importing from `@/components/reui/alert` in new code. */
 export function AppAlert({ className, ...props }: AppAlertProps) {
   return <Alert className={cn(className)} {...props} />
 }
diff --git a/apps/web/src/components/app-badge.tsx b/apps/web/src/components/app-badge.tsx
index 87afd45..5bbfdaa 100644
--- a/apps/web/src/components/app-badge.tsx
+++ b/apps/web/src/components/app-badge.tsx
@@ -1,9 +1,10 @@
 import type { ComponentProps } from 'react'
-import { Badge } from '@cfdm/ui/components/badge'
+import { Badge } from '@/components/reui/badge'
 import { cn } from '@cfdm/ui/lib/utils'
 
 export type AppBadgeProps = ComponentProps<typeof Badge>
 
+/** Thin alias over ReUI Badge — prefer importing Badge/StatusBadge directly in new code. */
 export function AppBadge({ className, ...props }: AppBadgeProps) {
   return <Badge className={cn(className)} {...props} />
 }
diff --git a/apps/web/src/components/domain-ip-badges.tsx b/apps/web/src/components/domain-ip-badges.tsx
index 1048a05..60b7a0d 100644
--- a/apps/web/src/components/domain-ip-badges.tsx
+++ b/apps/web/src/components/domain-ip-badges.tsx
@@ -1,4 +1,4 @@
-import { AppBadge } from '@/components/app-badge'
+import { Badge } from '@/components/reui/badge'
 import {
   AppItem,
   AppItemContent,
@@ -19,9 +19,9 @@ interface DomainIpBadgesProps {
 
 function IpBadge({ ip }: { ip: string }) {
   return (
-    <AppBadge variant="secondary" className="font-mono">
+    <Badge variant="secondary" className="font-mono">
       {ip}
-    </AppBadge>
+    </Badge>
   )
 }
 
@@ -43,7 +43,7 @@ export function DomainIpBadges({ ips }: DomainIpBadgesProps) {
         <Tooltip>
           <TooltipTrigger
             render={
-              <AppBadge variant="outline" className="cursor-default font-mono tabular-nums" />
+              <Badge variant="outline" className="cursor-default font-mono tabular-nums" />
             }
           >
             +{rest.length}
diff --git a/apps/web/src/components/empty-state.tsx b/apps/web/src/components/empty-state.tsx
index 2ee2174..cef336f 100644
--- a/apps/web/src/components/empty-state.tsx
+++ b/apps/web/src/components/empty-state.tsx
@@ -1,4 +1,5 @@
 import { InboxIcon, type LucideIcon } from 'lucide-react'
+import { IconStack } from '@/components/reui/icon-stack'
 import {
   Empty,
   EmptyContent,
@@ -7,6 +8,7 @@ import {
   EmptyMedia,
   EmptyTitle,
 } from '@cfdm/ui/components/empty'
+import { cn } from '@cfdm/ui/lib/utils'
 
 interface EmptyStateProps {
   icon?: LucideIcon
@@ -14,6 +16,8 @@ interface EmptyStateProps {
   description?: string
   action?: React.ReactNode
   className?: string
+  /** Use IconStack media (empty-state-12). Default true. */
+  stackedIcon?: boolean
 }
 
 export function EmptyState({
@@ -22,17 +26,34 @@ export function EmptyState({
   description,
   action,
   className,
+  stackedIcon = true,
 }: EmptyStateProps) {
   return (
-    <Empty className={className ?? 'border-0'}>
-      <EmptyHeader>
-        <EmptyMedia variant="icon">
-          <Icon />
+    <Empty className={cn('max-w-md flex-none border-0 bg-transparent p-0', className)}>
+      <EmptyHeader className="gap-5 text-center">
+        <EmptyMedia className="mb-0">
+          {stackedIcon ? (
+            <IconStack aria-hidden="true" className="h-14 w-12">
+              <Icon strokeWidth={1.9} aria-hidden="true" className="size-5" />
+            </IconStack>
+          ) : (
+            <span className="bg-muted text-muted-foreground flex size-10 items-center justify-center rounded-lg [&_svg]:size-5">
+              <Icon aria-hidden="true" />
+            </span>
+          )}
         </EmptyMedia>
-        <EmptyTitle>{title}</EmptyTitle>
-        {description && <EmptyDescription>{description}</EmptyDescription>}
+        <div className="flex flex-col items-center gap-2">
+          <EmptyTitle className="text-base font-semibold tracking-tight">
+            {title}
+          </EmptyTitle>
+          {description ? (
+            <EmptyDescription className="max-w-sm text-sm/relaxed">
+              {description}
+            </EmptyDescription>
+          ) : null}
+        </div>
       </EmptyHeader>
-      {action && <EmptyContent>{action}</EmptyContent>}
+      {action ? <EmptyContent>{action}</EmptyContent> : null}
     </Empty>
   )
 }
diff --git a/apps/web/src/components/query-state.tsx b/apps/web/src/components/query-state.tsx
index 9380b57..7edd942 100644
--- a/apps/web/src/components/query-state.tsx
+++ b/apps/web/src/components/query-state.tsx
@@ -1,5 +1,9 @@
 import { CircleAlertIcon } from 'lucide-react'
-import { Alert, AlertDescription, AlertTitle } from '@cfdm/ui/components/alert'
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from '@/components/reui/alert'
 import { Button } from '@cfdm/ui/components/button'
 import { Skeleton } from '@cfdm/ui/components/skeleton'
 
@@ -39,19 +43,14 @@ export function QueryState({
       <Alert variant="destructive">
         <CircleAlertIcon />
         <AlertTitle>Не удалось загрузить данные</AlertTitle>
-        <AlertDescription>
-          {error?.message ?? 'Произошла ошибка при загрузке.'}
+        <AlertDescription className="flex flex-col gap-2">
+          <span>{error?.message ?? 'Произошла ошибка при загрузке.'}</span>
+          {onRetry ? (
+            <Button variant="outline" size="sm" onClick={onRetry}>
+              Повторить
+            </Button>
+          ) : null}
         </AlertDescription>
-        {onRetry && (
-          <Button
-            variant="outline"
-            size="sm"
-            className="mt-2"
-            onClick={onRetry}
-          >
-            Повторить
-          </Button>
-        )}
       </Alert>
     )
   }
diff --git a/apps/web/src/components/reui-kit/resource-page.tsx b/apps/web/src/components/reui-kit/resource-page.tsx
index 90c4084..b8209ee 100644
--- a/apps/web/src/components/reui-kit/resource-page.tsx
+++ b/apps/web/src/components/reui-kit/resource-page.tsx
@@ -9,7 +9,7 @@ import {
   type RowSelectionState,
   type SortingState,
 } from '@tanstack/react-table'
-import { FilterIcon, FunnelXIcon } from 'lucide-react'
+import { CircleAlertIcon, FilterIcon, FunnelXIcon } from 'lucide-react'
 
 import { CountedLineTabs } from '@/components/counted-line-tabs'
 import { Badge } from '@/components/reui/badge'
@@ -33,7 +33,11 @@ import {
 import { Button } from '@cfdm/ui/components/button'
 import { Separator } from '@cfdm/ui/components/separator'
 import { Skeleton } from '@cfdm/ui/components/skeleton'
-import { Alert, AlertDescription, AlertTitle } from '@cfdm/ui/components/alert'
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from '@/components/reui/alert'
 import { EmptyState } from '@/components/empty-state'
 import { applyFiltersToData } from './filter-utils'
 
@@ -222,6 +226,7 @@ export function ResourcePage<T extends object>({
   if (isError) {
     return (
       <Alert variant="destructive">
+        <CircleAlertIcon />
         <AlertTitle>Ошибка загрузки</AlertTitle>
         <AlertDescription className="flex flex-col gap-2">
           <span>{error?.message ?? 'Не удалось загрузить данные'}</span>
diff --git a/apps/web/src/components/tagged-input.tsx b/apps/web/src/components/tagged-input.tsx
index a0d6468..6d8a7dd 100644
--- a/apps/web/src/components/tagged-input.tsx
+++ b/apps/web/src/components/tagged-input.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { XIcon } from 'lucide-react'
-import { AppBadge } from '@/components/app-badge'
+import { Badge } from '@/components/reui/badge'
 import {
   InputGroup,
   InputGroupButton,
@@ -78,7 +78,7 @@ export function TaggedInput({
       )}
     >
       {value.map((tag) => (
-        <AppBadge key={tag} variant="secondary" className="gap-1 pr-1">
+        <Badge key={tag} variant="secondary" className="gap-1 pr-1">
           {tag}
           <InputGroupButton
             type="button"
@@ -90,7 +90,7 @@ export function TaggedInput({
           >
             <XIcon />
           </InputGroupButton>
-        </AppBadge>
+        </Badge>
       ))}
       <InputGroupInput
         id={id}