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

apps/web/src/components/services-board/service-group-item.tsx

@@ -10,10 +10,10 @@ import { ServiceRow } from '@/components/services-board/service-row'
 import type { BoardColumn } from '@/components/services-board/types'
 import type { ServiceGroupView, ServiceView } from '@/lib/schemas'
 import {
-  AccordionContent,
-  AccordionItem,
-} from '@cfdm/ui/components/accordion'
-import { Button } from '@cfdm/ui/components/button'
+  AppAccordionContent,
+  AppAccordionItem,
+} from '@/components/app-accordion'
+import { AppButton } from '@/components/app-button'
 import {
   Empty,
   EmptyContent,
@@ -21,7 +21,7 @@ import {
   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 ServiceGroupItemProps {
@@ -88,7 +88,7 @@ export function ServiceGroupItem({
   }, [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',
@@ -114,17 +114,17 @@ export function ServiceGroupItem({
         onDeleteGroup={onDeleteGroup}
       />
 
-      <AccordionContent className="px-1 pb-2">
+      <AppAccordionContent className="px-1 pb-2">
         <div ref={setNodeRef}>
           <SortableContext
             items={column.items.map((service) => String(service.id))}
             strategy={verticalListSortingStrategy}
           >
             {column.items.length > 0 ? (
-              <ItemGroup className="gap-0 py-1">
+              <AppItemGroup className="gap-0 py-1">
                 {column.items.map((service, index) => (
                   <div key={service.id}>
-                    {index > 0 ? <ItemSeparator className="my-0" /> : null}
+                    {index > 0 ? <AppItemSeparator className="my-0" /> : null}
                     <ServiceRow
                       service={service}
                       onToggle={onServiceToggle}
@@ -141,7 +141,7 @@ export function ServiceGroupItem({
                     />
                   </div>
                 ))}
-              </ItemGroup>
+              </AppItemGroup>
             ) : (
               <Empty
                 className={cn(
@@ -159,7 +159,7 @@ export function ServiceGroupItem({
                 </EmptyHeader>
                 {onAddService ? (
                   <EmptyContent>
-                    <Button
+                    <AppButton
                       type="button"
                       variant="link"
                       size="sm"
@@ -167,7 +167,7 @@ export function ServiceGroupItem({
                     >
                       <PlusIcon data-icon="inline-start" />
                       Добавить сервис
-                    </Button>
+                    </AppButton>
                   </EmptyContent>
                 ) : null}
               </Empty>
@@ -175,7 +175,7 @@ export function ServiceGroupItem({
           </SortableContext>
 
           {column.items.length > 0 && onAddService ? (
-            <Button
+            <AppButton
               type="button"
               variant="ghost"
               size="sm"
@@ -184,10 +184,10 @@ export function ServiceGroupItem({
             >
               <PlusIcon data-icon="inline-start" />
               Добавить сервис
-            </Button>
+            </AppButton>
           ) : null}
         </div>
-      </AccordionContent>
-    </AccordionItem>
+      </AppAccordionContent>
+    </AppAccordionItem>
   )
 }