refactor: Replace legacy UI components with new App components across various files for improved consistency and maintainability

apps/web/src/components/groups-board/domain-group-header.tsx

@@ -1,9 +1,9 @@
 import { FolderTreeIcon, MoreHorizontalIcon, PencilIcon, Trash2Icon } from 'lucide-react'
 import type { BoardColumn } from '@/components/groups-board/types'
 import type { Group } from '@/lib/schemas'
-import { AccordionTrigger } from '@cfdm/ui/components/accordion'
-import { Badge } from '@cfdm/ui/components/badge'
-import { Button } from '@cfdm/ui/components/button'
+import { AppAccordionTrigger } from '@/components/app-accordion'
+import { AppBadge } from '@/components/app-badge'
+import { AppButton } from '@/components/app-button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -31,7 +31,7 @@ export function DomainGroupHeader({
 }: DomainGroupHeaderProps) {
   return (
     <div className="flex items-center gap-1 px-1">
-      <AccordionTrigger className="min-h-10 flex-1 items-center gap-2 rounded-md py-2 hover:bg-muted/40 hover:no-underline">
+      <AppAccordionTrigger className="min-h-10 flex-1 items-center gap-2 rounded-md py-2 hover:bg-muted/40 hover:no-underline">
         <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
           {column.groupId !== null ? (
             <span className="flex size-7 shrink-0 items-center justify-center rounded-md bg-background/80 text-muted-foreground">
@@ -39,19 +39,19 @@ export function DomainGroupHeader({
             </span>
           ) : null}
           <span className="font-medium">{column.title}</span>
-          <Badge variant="secondary">{column.items.length}</Badge>
+          <AppBadge variant="secondary">{column.items.length}</AppBadge>
           {column.slug ? (
-            <Badge variant="outline" className="font-mono">
+            <AppBadge variant="outline" className="font-mono">
               {column.slug}
-            </Badge>
+            </AppBadge>
           ) : null}
           {!isOpen && isDragging && !dragDisabled ? (
-            <Badge variant="default" className="font-normal">
+            <AppBadge variant="default" className="font-normal">
               Отпустите для переноса
-            </Badge>
+            </AppBadge>
           ) : null}
         </div>
-      </AccordionTrigger>
+      </AppAccordionTrigger>
 
       {column.groupId !== null && column.group ? (
         <div
@@ -62,7 +62,7 @@ export function DomainGroupHeader({
           <DropdownMenu>
             <DropdownMenuTrigger
               render={
-                <Button
+                <AppButton
                   type="button"
                   variant="ghost"
                   size="icon-sm"

apps/web/src/components/groups-board/domain-group-item.tsx

@@ -5,16 +5,16 @@ import { DomainRow } from '@/components/groups-board/domain-row'
 import type { BoardColumn } from '@/components/groups-board/types'
 import type { Group } from '@/lib/schemas'
 import {
-  AccordionContent,
-  AccordionItem,
-} from '@cfdm/ui/components/accordion'
+  AppAccordionContent,
+  AppAccordionItem,
+} from '@/components/app-accordion'
 import {
   Empty,
   EmptyDescription,
   EmptyHeader,
   EmptyTitle,
 } from '@cfdm/ui/components/empty'
-import { ItemGroup, ItemSeparator } from '@cfdm/ui/components/item'
+import { AppItemGroup, AppItemSeparator } from '@/components/app-item'
 import { cn } from '@cfdm/ui/lib/utils'
 
 interface DomainGroupItemProps {
@@ -50,7 +50,7 @@ export function DomainGroupItem({
   }, [isOver, isDragging, dragDisabled, column.id, onExpandColumn])
 
   return (
-    <AccordionItem
+    <AppAccordionItem
       value={column.id}
       className={cn(
         'not-last:border-b-0 overflow-hidden rounded-lg border border-border transition-colors',
@@ -68,13 +68,13 @@ export function DomainGroupItem({
         onDeleteGroup={onDeleteGroup}
       />
 
-      <AccordionContent className="px-1 pb-2">
+      <AppAccordionContent className="px-1 pb-2">
         <div ref={setNodeRef}>
           {column.items.length > 0 ? (
-            <ItemGroup className="gap-0 py-1">
+            <AppItemGroup className="gap-0 py-1">
               {column.items.map((domain, index) => (
                 <div key={domain.id}>
-                  {index > 0 ? <ItemSeparator className="my-0" /> : null}
+                  {index > 0 ? <AppItemSeparator className="my-0" /> : null}
                   <DomainRow
                     domain={domain}
                     serviceLabels={serviceLabelsByDomain?.get(domain.id)}
@@ -82,7 +82,7 @@ export function DomainGroupItem({
                   />
                 </div>
               ))}
-            </ItemGroup>
+            </AppItemGroup>
           ) : (
             <Empty
               className={cn(
@@ -99,7 +99,7 @@ export function DomainGroupItem({
             </Empty>
           )}
         </div>
-      </AccordionContent>
-    </AccordionItem>
+      </AppAccordionContent>
+    </AppAccordionItem>
   )
 }

apps/web/src/components/groups-board/domain-row.tsx

@@ -10,9 +10,9 @@ import {
 } from 'lucide-react'
 import { StatusBadge } from '@/components/status-badge'
 import type { DomainListItem } from '@/lib/schemas'
-import { Badge } from '@cfdm/ui/components/badge'
-import { Button } from '@cfdm/ui/components/button'
-import { Card, CardContent } from '@cfdm/ui/components/card'
+import { AppBadge } from '@/components/app-badge'
+import { AppButton } from '@/components/app-button'
+import { AppCard, AppCardContent } from '@/components/app-card'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -45,15 +45,15 @@ function DomainServiceList({
 
   if (labels.length === 1) {
     return (
-      <Badge variant="secondary" className="max-w-full truncate font-normal">
+      <AppBadge variant="secondary" className="max-w-full truncate font-normal">
         {labels[0]}
-      </Badge>
+      </AppBadge>
     )
   }
 
   return (
-    <Card size="sm" className="w-full shadow-none">
-      <CardContent className="flex flex-col gap-1 py-0">
+    <AppCard size="sm" className="w-full shadow-none">
+      <AppCardContent className="flex flex-col gap-1 py-0">
         {labels.map((label) => (
           <div
             key={label}
@@ -63,8 +63,8 @@ function DomainServiceList({
             <span className="truncate">{label}</span>
           </div>
         ))}
-      </CardContent>
-    </Card>
+      </AppCardContent>
+    </AppCard>
   )
 }
 
@@ -97,7 +97,7 @@ export const DomainRow = memo(function DomainRow({
       )}
     >
       {!dragDisabled && !overlay ? (
-        <Button
+        <AppButton
           type="button"
           variant="ghost"
           size="icon-sm"
@@ -110,7 +110,7 @@ export const DomainRow = memo(function DomainRow({
           {...attributes}
         >
           <GripVerticalIcon />
-        </Button>
+        </AppButton>
       ) : null}
 
       <div
@@ -138,15 +138,15 @@ export const DomainRow = memo(function DomainRow({
         <StatusBadge status={domain.status} />
         <DropdownMenu>
           <DropdownMenuTrigger
-            render={
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon-sm"
-                aria-label={`Действия для ${domain.zone_name}`}
-                onPointerDown={(event) => event.stopPropagation()}
-              />
-            }
+              render={
+                <AppButton
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label={`Действия для ${domain.zone_name}`}
+                  onPointerDown={(event) => event.stopPropagation()}
+                />
+              }
           >
             <MoreHorizontalIcon />
           </DropdownMenuTrigger>

apps/web/src/components/groups-board/groups-board.tsx

@@ -4,7 +4,7 @@ import { DomainGroupItem } from '@/components/groups-board/domain-group-item'
 import { DomainRow } from '@/components/groups-board/domain-row'
 import type { BoardState } from '@/components/groups-board/types'
 import type { DomainListItem, Group } from '@/lib/schemas'
-import { Accordion } from '@cfdm/ui/components/accordion'
+import { AppAccordion } from '@/components/app-accordion'
 
 interface GroupsBoardProps {
   board: BoardState
@@ -70,7 +70,7 @@ export function GroupsBoard({
         ) : null
       }
     >
-      <Accordion
+      <AppAccordion
         multiple
         value={openColumns}
         onValueChange={setOpenColumns}
@@ -89,7 +89,7 @@ export function GroupsBoard({
             serviceLabelsByDomain={serviceLabelsByDomain}
           />
         ))}
-      </Accordion>
+      </AppAccordion>
     </DragContextProvider>
   )
 }