diff --git a/apps/web/src/components/reui-kit/settings-shell.tsx b/apps/web/src/components/reui-kit/settings-shell.tsx
index a7b59c5..e0a40bf 100644
--- a/apps/web/src/components/reui-kit/settings-shell.tsx
+++ b/apps/web/src/components/reui-kit/settings-shell.tsx
@@ -9,7 +9,7 @@ import { PageHeader } from '@/components/page-header'
export interface SettingsTabConfig {
id: string
- to: string
+ to: '/settings' | '/tenant-settings'
label: string
icon?: ReactNode
}
@@ -72,19 +72,35 @@ export function SettingsShell({
>
{tabs.map((tab) => {
const isActive = pathname.startsWith(tab.to)
+ const className = cn(
+ 'flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
+ isMobile && 'shrink-0',
+ !isMobile && 'w-full',
+ isActive
+ ? 'bg-muted text-foreground font-medium shadow-sm ring-1 ring-border/60'
+ : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground',
+ )
+ if (tab.to === '/tenant-settings') {
+ return (
+
+ {tab.icon}
+ {tab.label}
+
+ )
+ }
return (
{tab.icon}
{tab.label}
diff --git a/apps/web/src/components/reui/icon-tile.tsx b/apps/web/src/components/reui/icon-tile.tsx
new file mode 100644
index 0000000..cc2d209
--- /dev/null
+++ b/apps/web/src/components/reui/icon-tile.tsx
@@ -0,0 +1,125 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+/**
+ * CSS variable architecture:
+ *
+ * The root owns four variables so every part of the tile stays in proportion
+ * and stays overridable from a single `className`:
+ *
+ * --icon-tile-size tile width/height
+ * --icon-tile-icon-size glyph size applied to child svgs
+ * --icon-tile-radius corner radius (also drives the nested inner card)
+ * --icon-tile-inset gap between the outer ring and the inner card
+ *
+ * The `frame` and `soft` variants paint their inner card with an `::after`
+ * pseudo element instead of a wrapper node. `isolate` makes the root a stacking
+ * context, so the negative z-index pseudo paints above the root background but
+ * below the in-flow icon - no extra DOM, and `render` composition keeps working.
+ *
+ * Tone: `soft` and `solid` derive every fill and border from `currentColor`, so
+ * a single text color class (e.g. `text-success`) retints the whole tile. They
+ * default to `text-primary`; override it to recolor without touching internals.
+ */
+const iconTileVariants = cva(
+ [
+ "relative inline-flex shrink-0 items-center justify-center align-middle",
+ "size-(--icon-tile-size) rounded-(--icon-tile-radius)",
+ "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-(--icon-tile-icon-size)",
+ ],
+ {
+ variants: {
+ variant: {
+ /** Plain bordered surface. The quiet default for list rows and toolbars. */
+ outline: "border border-border bg-background dark:bg-input/32",
+ /** Raised muted fill with a background-colored ring. Reads as a physical chip. */
+ elevated:
+ "border-2 border-background bg-muted text-accent-foreground shadow-[0_1px_3px_0_rgb(0_0_0/0.14)] dark:border",
+ /**
+ * Tinted double container: an opacity-filled outer ring with no border
+ * around a bordered inner card, all derived from `currentColor`. The
+ * quiet, colorful sibling of `frame`. Retint with a text color class.
+ */
+ soft: [
+ "isolate p-(--icon-tile-inset) text-primary bg-current/10",
+ "after:absolute after:-z-10 after:inset-(--icon-tile-inset)",
+ "after:rounded-[calc(var(--icon-tile-radius)-var(--icon-tile-inset))]",
+ "after:border after:border-current/20 after:bg-current/5",
+ ],
+ /** Filled tone with a contrasting glyph. Retint with `bg-*` + a text color. */
+ solid: "bg-primary text-primary-foreground",
+ /** Double container - a muted ring around an inset card, matching Frame. */
+ frame: [
+ "isolate border border-border bg-muted/50 p-(--icon-tile-inset)",
+ "after:absolute after:-z-10 after:inset-(--icon-tile-inset)",
+ "after:rounded-[calc(var(--icon-tile-radius)-var(--icon-tile-inset))]",
+ "after:border after:border-border after:bg-card after:shadow-xs",
+ ],
+ },
+ size: {
+ xs: "[--icon-tile-size:--spacing(6)] [--icon-tile-icon-size:--spacing(3.5)] [--icon-tile-inset:--spacing(0.5)]",
+ sm: "[--icon-tile-size:--spacing(8)] [--icon-tile-icon-size:--spacing(4)] [--icon-tile-inset:--spacing(0.5)]",
+ default:
+ "[--icon-tile-size:--spacing(10)] [--icon-tile-icon-size:--spacing(4.5)] [--icon-tile-inset:--spacing(0.75)]",
+ lg: "[--icon-tile-size:--spacing(12)] [--icon-tile-icon-size:--spacing(5.5)] [--icon-tile-inset:--spacing(0.75)]",
+ xl: "[--icon-tile-size:--spacing(14)] [--icon-tile-icon-size:--spacing(7)] [--icon-tile-inset:--spacing(1)]",
+ },
+ /**
+ * `default`: active style radius. `full`: circular.
+ * The plain value is the fallback outside a style scope; the `style-*`
+ * tokens win by specificity inside one, and survive the registry
+ * transform as the single resolved value per generated style.
+ *
+ * Each style token is clamped to a fraction of the tile. A flat radius
+ * is a circle once it reaches half the box, so the soft styles used to
+ * render `xs` (24px) and `sm` (32px) as plain circles and swallow the
+ * `full` variant's meaning. Clamping keeps one corner ratio at every
+ * size instead, so a tile still reads as the same shape when it scales.
+ * Luma and Rhea take the gentler quarter ratio; Maia stays at a third.
+ */
+ radius: {
+ default:
+ "[--icon-tile-radius:min(var(--radius-md),calc(var(--icon-tile-size)/3))] [--icon-tile-radius:min(var(--radius-md),calc(var(--icon-tile-size)/3))]",
+ full: "[--icon-tile-radius:calc(infinity*1px)]",
+ },
+ },
+ defaultVariants: {
+ variant: "outline",
+ size: "default",
+ radius: "default",
+ },
+ }
+)
+
+interface IconTileProps extends useRender.ComponentProps<"span"> {
+ variant?: VariantProps
["variant"]
+ size?: VariantProps["size"]
+ radius?: VariantProps["radius"]
+}
+
+function IconTile({
+ className,
+ variant = "outline",
+ size = "default",
+ radius = "default",
+ render,
+ ...props
+}: IconTileProps) {
+ const defaultProps = {
+ "data-slot": "icon-tile",
+ "data-variant": variant,
+ "data-size": size,
+ className: cn(iconTileVariants({ variant, size, radius, className })),
+ }
+
+ return useRender({
+ defaultTagName: "span",
+ render,
+ props: mergeProps<"span">(defaultProps, props),
+ })
+}
+
+export { IconTile, iconTileVariants, type IconTileProps }
\ No newline at end of file
diff --git a/apps/web/src/components/settings/appearance-settings-tab.tsx b/apps/web/src/components/settings/appearance-settings-tab.tsx
index 9bb186c..7e6502b 100644
--- a/apps/web/src/components/settings/appearance-settings-tab.tsx
+++ b/apps/web/src/components/settings/appearance-settings-tab.tsx
@@ -3,9 +3,9 @@ import { useTheme } from 'next-themes'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { toast } from 'sonner'
-import { SettingRow } from '@/components/blocks/settings-7/components/setting-row'
-import { SettingsCard } from '@/components/blocks/settings-7/components/settings-card'
-import { SettingsFieldGroup } from '@/components/blocks/settings-7/components/settings-field-group'
+import { SettingRow } from '@/components/settings/setting-row'
+import { SettingsCard } from '@/components/settings/settings-card'
+import { SettingsFieldGroup } from '@/components/settings/settings-field-group'
import { Badge } from '@/components/reui/badge'
import {
ToggleGroup,
diff --git a/apps/web/src/components/settings/connection-settings-tab.tsx b/apps/web/src/components/settings/connection-settings-tab.tsx
index 0508fe9..9ad302c 100644
--- a/apps/web/src/components/settings/connection-settings-tab.tsx
+++ b/apps/web/src/components/settings/connection-settings-tab.tsx
@@ -4,9 +4,9 @@ import { Save } from 'lucide-react'
import { useEffect, useState } from 'react'
import { toast } from 'sonner'
-import { SettingRow } from '@/components/blocks/settings-7/components/setting-row'
-import { SettingsCard } from '@/components/blocks/settings-7/components/settings-card'
-import { SettingsFieldGroup } from '@/components/blocks/settings-7/components/settings-field-group'
+import { SettingRow } from '@/components/settings/setting-row'
+import { SettingsCard } from '@/components/settings/settings-card'
+import { SettingsFieldGroup } from '@/components/settings/settings-field-group'
import { Badge } from '@/components/reui/badge'
import { LoadingButton } from '@/components/loading-button'
import {
diff --git a/apps/web/src/components/settings/sections-settings-tab.tsx b/apps/web/src/components/settings/sections-settings-tab.tsx
index e1cb265..abf8024 100644
--- a/apps/web/src/components/settings/sections-settings-tab.tsx
+++ b/apps/web/src/components/settings/sections-settings-tab.tsx
@@ -6,7 +6,7 @@ import {
} from 'lucide-react'
import { Fragment } from 'react'
-import { SettingsCard } from '@/components/blocks/settings-7/components/settings-card'
+import { SettingsCard } from '@/components/settings/settings-card'
import { Badge } from '@/components/reui/badge'
import { Button } from '@evobgp/ui/components/button'
import {
diff --git a/apps/web/src/components/settings/session-settings-tab.tsx b/apps/web/src/components/settings/session-settings-tab.tsx
index a6c8dd7..5b10e60 100644
--- a/apps/web/src/components/settings/session-settings-tab.tsx
+++ b/apps/web/src/components/settings/session-settings-tab.tsx
@@ -1,9 +1,9 @@
import { useQuery } from '@tanstack/react-query'
import { MonitorIcon } from 'lucide-react'
-import { SettingRow } from '@/components/blocks/settings-7/components/setting-row'
-import { SettingsCard } from '@/components/blocks/settings-7/components/settings-card'
-import { SettingsFieldGroup } from '@/components/blocks/settings-7/components/settings-field-group'
+import { SettingRow } from '@/components/settings/setting-row'
+import { SettingsCard } from '@/components/settings/settings-card'
+import { SettingsFieldGroup } from '@/components/settings/settings-field-group'
import { Badge } from '@/components/reui/badge'
import { QueryState } from '@/components/query-state'
import { TOKEN_STORAGE_KEY } from '@/lib/api-client'
diff --git a/apps/web/src/components/settings/setting-row.tsx b/apps/web/src/components/settings/setting-row.tsx
new file mode 100644
index 0000000..fa79498
--- /dev/null
+++ b/apps/web/src/components/settings/setting-row.tsx
@@ -0,0 +1,63 @@
+import { type ReactNode } from 'react'
+
+import { cn } from '@evobgp/ui/lib/utils'
+import {
+ Field,
+ FieldContent,
+ FieldDescription,
+ FieldLabel,
+ FieldSeparator,
+ FieldTitle,
+} from '@evobgp/ui/components/field'
+
+interface SettingRowProps {
+ title: string
+ description?: ReactNode
+ children: ReactNode
+ last?: boolean
+ labelFor?: string
+ contentClassName?: string
+ titleAddon?: ReactNode
+}
+
+/** Settings row — settings-3 DNA. Preview: https://reui.io/preview/base/settings-3 */
+export function SettingRow({
+ title,
+ description,
+ children,
+ last,
+ labelFor,
+ contentClassName,
+ titleAddon,
+}: SettingRowProps) {
+ return (
+ <>
+
+
+
+ {labelFor ? (
+ {title}
+ ) : (
+ {title}
+ )}
+ {titleAddon}
+
+
+ {description ? (
+
{description}
+ ) : null}
+
+ {children}
+
+
+
+
+ {!last ? : null}
+
+ )
+}
diff --git a/apps/web/src/components/settings/settings-card.tsx b/apps/web/src/components/settings/settings-card.tsx
new file mode 100644
index 0000000..6b6139b
--- /dev/null
+++ b/apps/web/src/components/settings/settings-card.tsx
@@ -0,0 +1,53 @@
+import { type ReactNode } from 'react'
+
+import { cn } from '@evobgp/ui/lib/utils'
+import {
+ Frame,
+ FrameDescription,
+ FrameFooter,
+ FrameHeader,
+ FramePanel,
+ FrameTitle,
+} from '@/components/reui/frame'
+
+interface SettingsCardProps {
+ title: string
+ description?: string
+ children: ReactNode
+ footer?: ReactNode
+ className?: string
+ contentClassName?: string
+ footerClassName?: string
+}
+
+/** Settings section — Frame surface. Preview: https://reui.io/preview/base/settings-16 · https://reui.io/preview/base/settings-3 */
+export function SettingsCard({
+ title,
+ description,
+ children,
+ footer,
+ className,
+ contentClassName,
+ footerClassName,
+}: SettingsCardProps) {
+ return (
+
+
+
+ {title}
+ {description ? {description} : null}
+
+
+ {children}
+
+ {footer ? (
+
+ {footer}
+
+ ) : null}
+
+
+ )
+}
diff --git a/apps/web/src/components/settings/settings-field-group.tsx b/apps/web/src/components/settings/settings-field-group.tsx
new file mode 100644
index 0000000..11315b5
--- /dev/null
+++ b/apps/web/src/components/settings/settings-field-group.tsx
@@ -0,0 +1,36 @@
+import { type ReactNode } from 'react'
+
+import { cn } from '@evobgp/ui/lib/utils'
+import {
+ FieldDescription,
+ FieldGroup,
+ FieldLegend,
+ FieldSet,
+} from '@evobgp/ui/components/field'
+
+interface SettingsFieldGroupProps {
+ legend: string
+ description: string
+ children: ReactNode
+ className?: string
+ fieldGroupClassName?: string
+}
+
+/** Settings field group — settings-3 DNA. Preview: https://reui.io/preview/base/settings-3 */
+export function SettingsFieldGroup({
+ legend,
+ description,
+ children,
+ className,
+ fieldGroupClassName,
+}: SettingsFieldGroupProps) {
+ return (
+
+ )
+}
diff --git a/apps/web/src/lib/ui-surface.ts b/apps/web/src/lib/ui-surface.ts
index 1ef0101..fae28ee 100644
--- a/apps/web/src/lib/ui-surface.ts
+++ b/apps/web/src/lib/ui-surface.ts
@@ -12,6 +12,10 @@
*/
export const UI_SURFACE = 'frame' as const
+/** Skip link — keyboard: first Tab. */
+export const SKIP_TO_CONTENT_CLASS =
+ 'bg-background text-foreground ring-ring sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:rounded-md focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:shadow-sm focus:ring-2'
+
/** Grid for ReUI stats-12 KPI rows (3–6 tiles). */
export const kpiStatGridClassName = '@container w-full'
diff --git a/apps/web/src/routes/_auth/_settings.tsx b/apps/web/src/routes/_auth/_settings.tsx
new file mode 100644
index 0000000..3ca4cf5
--- /dev/null
+++ b/apps/web/src/routes/_auth/_settings.tsx
@@ -0,0 +1,7 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { SettingsShell } from '@/components/reui-kit/settings-shell'
+
+export const Route = createFileRoute('/_auth/_settings')({
+ component: SettingsShell,
+})
diff --git a/apps/web/src/routes/_auth/settings.tsx b/apps/web/src/routes/_auth/_settings/settings.tsx
similarity index 55%
rename from apps/web/src/routes/_auth/settings.tsx
rename to apps/web/src/routes/_auth/_settings/settings.tsx
index 99bbac4..f7c2cb9 100644
--- a/apps/web/src/routes/_auth/settings.tsx
+++ b/apps/web/src/routes/_auth/_settings/settings.tsx
@@ -1,11 +1,8 @@
import { createFileRoute } from '@tanstack/react-router'
import { z } from 'zod'
-import { PageHeader } from '@/components/page-header'
import { SettingsPageShell } from '@/components/settings/settings-page-shell'
-import {
- type SettingsTab,
-} from '@/components/settings/settings-tabs-data'
+import { type SettingsTab } from '@/components/settings/settings-tabs-data'
const settingsSearchSchema = z.object({
tab: z
@@ -14,7 +11,7 @@ const settingsSearchSchema = z.object({
reason: z.enum(['token-required']).optional(),
})
-export const Route = createFileRoute('/_auth/settings')({
+export const Route = createFileRoute('/_auth/_settings/settings')({
component: SettingsComponent,
validateSearch: (search) => settingsSearchSchema.parse(search),
})
@@ -35,17 +32,10 @@ function SettingsComponent() {
}
return (
-
+
)
}
diff --git a/apps/web/src/routes/_auth/tenant-settings.tsx b/apps/web/src/routes/_auth/_settings/tenant-settings.tsx
similarity index 97%
rename from apps/web/src/routes/_auth/tenant-settings.tsx
rename to apps/web/src/routes/_auth/_settings/tenant-settings.tsx
index 593611f..03c73f3 100644
--- a/apps/web/src/routes/_auth/tenant-settings.tsx
+++ b/apps/web/src/routes/_auth/_settings/tenant-settings.tsx
@@ -12,7 +12,6 @@ import { FrameDataGrid } from '@/components/reui-kit'
import { SelectField } from '@/components/select-field'
import { SettingsKvGrid } from '@/components/settings/settings-kv-grid'
import { SettingsSettingField } from '@/components/settings/settings-setting-field'
-import { PageHeader } from '@/components/page-header'
import { QueryState } from '@/components/query-state'
import { LoadingButton } from '@/components/loading-button'
@@ -28,7 +27,7 @@ import {
} from '@/queries/settings'
import { apiMutate } from '@/lib/api-client'
-export const Route = createFileRoute('/_auth/tenant-settings')({
+export const Route = createFileRoute('/_auth/_settings/tenant-settings')({
component: TenantSettingsComponent,
validateSearch: (search: Record) => ({
tab: (search.tab === 'revision' || search.tab === 'runtime-logs' || search.tab === 'additional'
@@ -74,7 +73,7 @@ const BIRD_HINTS: Partial> = {
}
function TenantSettingsComponent() {
- const search = useSearch({ from: '/_auth/tenant-settings' })
+ const search = useSearch({ from: '/_auth/_settings/tenant-settings' })
const navigate = Route.useNavigate()
const settingsQ = useQuery(settingsQueryOptions())
const qc = useQueryClient()
@@ -116,11 +115,6 @@ function TenantSettingsComponent() {
return (
-
-
diff --git a/apps/web/src/routes/_auth/modules/new.tsx b/apps/web/src/routes/_auth/modules/new.tsx
index 1c9e1fd..40a17bb 100644
--- a/apps/web/src/routes/_auth/modules/new.tsx
+++ b/apps/web/src/routes/_auth/modules/new.tsx
@@ -1,7 +1,13 @@
import { createFileRoute, Link } from '@tanstack/react-router'
-import { Card, CardContent } from '@evobgp/ui/components/card'
import { Button } from '@evobgp/ui/components/button'
import { PageHeader } from '@/components/page-header'
+import {
+ Frame,
+ FrameDescription,
+ FrameHeader,
+ FramePanel,
+ FrameTitle,
+} from '@/components/reui/frame'
export const Route = createFileRoute('/_auth/modules/new')({
component: NewModuleComponent,
@@ -14,11 +20,14 @@ function NewModuleComponent() {
title="Новый модуль"
description="Создание модуля — через API или будущая форма"
/>
-
-
-
- Форма создания модуля будет добавлена позже. Сейчас модули можно создать через API:
-
+
+
+ Создание через API
+
+ Форма в UI появится позже. Сейчас модуль можно создать запросом ниже.
+
+
+
{`POST /v1/modules
{ "type": "DOMAINS", "name": "Мой список" }`}
@@ -26,8 +35,8 @@ function NewModuleComponent() {
}>
Назад к списку
-
-
+
+
{children}
@@ -254,7 +254,7 @@ function SidebarTrigger({
onClick,
...props
}: React.ComponentProps) {
- const { toggleSidebar } = useSidebar()
+ const { toggleSidebar, open, openMobile, isMobile } = useSidebar()
return (
)
}
@@ -282,10 +285,10 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {