From 0a4293b735f9a1acb7de0d3977ba3d2c525a7d7e Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Sat, 18 Jul 2026 20:33:48 +0700
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=D1=86=D0=B5=D0=BD=D1=82=D1=80=D0=B8?=
 =?UTF-8?q?=D1=80=D0=BE=D0=B2=D0=B0=D1=82=D1=8C=20EmptyState=20=D0=BF?=
 =?UTF-8?q?=D0=BE=20empty-state-12?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ResourcePage оборачивает пустой список в Frame; в панелях — centered=false.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/domain-bindings-card.tsx   |  1 +
 .../domains/domain-availability-panel.tsx     |  1 +
 apps/web/src/components/empty-state.tsx       | 39 +++++++++++++++++--
 .../src/components/health/health-timeline.tsx |  1 +
 .../src/components/reui-kit/resource-page.tsx | 31 ++++++++++++---
 .../web/src/components/service-edit-sheet.tsx |  1 +
 6 files changed, 66 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/domain-bindings-card.tsx b/apps/web/src/components/domain-bindings-card.tsx
index de21207..c875b14 100644
--- a/apps/web/src/components/domain-bindings-card.tsx
+++ b/apps/web/src/components/domain-bindings-card.tsx
@@ -87,6 +87,7 @@ export function DomainBindingsCard({ bindings }: DomainBindingsCardProps) {
             icon={Link2Icon}
             title="Нет привязок"
             description="Привяжите сервис к поддомену"
+            centered={false}
           />
         ) : (
           <ItemGroup className="gap-0">
diff --git a/apps/web/src/components/domains/domain-availability-panel.tsx b/apps/web/src/components/domains/domain-availability-panel.tsx
index 71fff12..ca3a751 100644
--- a/apps/web/src/components/domains/domain-availability-panel.tsx
+++ b/apps/web/src/components/domains/domain-availability-panel.tsx
@@ -243,6 +243,7 @@ export function DomainAvailabilityPanel({
                 icon={ActivityIcon}
                 title="Мониторы не настроены"
                 description="Добавьте hostname для проверки доступности"
+                centered={false}
               />
             ) : (
               <ItemGroup className="gap-0">
diff --git a/apps/web/src/components/empty-state.tsx b/apps/web/src/components/empty-state.tsx
index cef336f..acff7ab 100644
--- a/apps/web/src/components/empty-state.tsx
+++ b/apps/web/src/components/empty-state.tsx
@@ -18,8 +18,18 @@ interface EmptyStateProps {
   className?: string
   /** Use IconStack media (empty-state-12). Default true. */
   stackedIcon?: boolean
+  /**
+   * Center in available width/height (empty-state-12).
+   * Preview: https://reui.io/preview/base/empty-state-12
+   * Set false for tight panels/sheets.
+   */
+  centered?: boolean
 }
 
+/**
+ * ReUI Empty + IconStack — adapted from empty-state-12.
+ * @see https://reui.io/preview/base/empty-state-12
+ */
 export function EmptyState({
   icon: Icon = InboxIcon,
   title,
@@ -27,9 +37,15 @@ export function EmptyState({
   action,
   className,
   stackedIcon = true,
+  centered = true,
 }: EmptyStateProps) {
-  return (
-    <Empty className={cn('max-w-md flex-none border-0 bg-transparent p-0', className)}>
+  const body = (
+    <Empty
+      className={cn(
+        'max-w-md flex-none border-0 bg-transparent p-0',
+        !centered && className,
+      )}
+    >
       <EmptyHeader className="gap-5 text-center">
         <EmptyMedia className="mb-0">
           {stackedIcon ? (
@@ -53,7 +69,24 @@ export function EmptyState({
           ) : null}
         </div>
       </EmptyHeader>
-      {action ? <EmptyContent>{action}</EmptyContent> : null}
+      {action ? (
+        <EmptyContent className="mt-1 items-center justify-center">
+          {action}
+        </EmptyContent>
+      ) : null}
     </Empty>
   )
+
+  if (!centered) return body
+
+  return (
+    <div
+      className={cn(
+        'flex w-full flex-1 items-center justify-center py-14 sm:py-16',
+        className,
+      )}
+    >
+      {body}
+    </div>
+  )
 }
diff --git a/apps/web/src/components/health/health-timeline.tsx b/apps/web/src/components/health/health-timeline.tsx
index d53b3cb..0a35290 100644
--- a/apps/web/src/components/health/health-timeline.tsx
+++ b/apps/web/src/components/health/health-timeline.tsx
@@ -36,6 +36,7 @@ export function HealthTimeline({ events }: HealthTimelineProps) {
         icon={Link2Icon}
         title="Нет событий"
         description="Результаты проверок появятся после первого прогона"
+        centered={false}
       />
     )
   }
diff --git a/apps/web/src/components/reui-kit/resource-page.tsx b/apps/web/src/components/reui-kit/resource-page.tsx
index b8209ee..d875cec 100644
--- a/apps/web/src/components/reui-kit/resource-page.tsx
+++ b/apps/web/src/components/reui-kit/resource-page.tsx
@@ -242,11 +242,32 @@ export function ResourcePage<T extends object>({
 
   if (data.length === 0 && emptyState) {
     return (
-      <EmptyState
-        title={emptyState.title}
-        description={emptyState.description}
-        action={emptyState.action}
-      />
+      <Frame dense variant="default" spacing="sm" className="w-full">
+        {!hideHeader ? (
+          <FrameHeader className="flex-row items-start justify-between gap-3">
+            <div className="flex min-w-0 flex-col gap-px">
+              <FrameTitle className="text-balance">{title}</FrameTitle>
+              {description ? (
+                <FrameDescription className="text-xs text-pretty">
+                  {description}
+                </FrameDescription>
+              ) : null}
+            </div>
+            {primaryAction ? (
+              <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
+                {primaryAction}
+              </div>
+            ) : null}
+          </FrameHeader>
+        ) : null}
+        <FramePanel className="flex min-h-[min(28rem,55svh)] w-full flex-col items-stretch justify-center p-0">
+          <EmptyState
+            title={emptyState.title}
+            description={emptyState.description}
+            action={emptyState.action}
+          />
+        </FramePanel>
+      </Frame>
     )
   }
 
diff --git a/apps/web/src/components/service-edit-sheet.tsx b/apps/web/src/components/service-edit-sheet.tsx
index 6c771e0..cc6a072 100644
--- a/apps/web/src/components/service-edit-sheet.tsx
+++ b/apps/web/src/components/service-edit-sheet.tsx
@@ -509,6 +509,7 @@ export function ServiceEditSheet({
                   icon={Link2Icon}
                   title="Нет привязок"
                   description="Необязательно. Пример: newdom.ivx.su — зона ivx.su определится автоматически."
+                  centered={false}
                   action={
                     <Button type="button" variant="outline" size="sm" onClick={handleAddBinding}>
                       <PlusIcon data-icon="inline-start" />