feat:Update pnpm-lock.yaml to link shared package; modify API routes to utilize new schemas for domain and service management; enhance DNS record handling with CNAME support; refactor service and subdomain routes for improved functionality; implement confirm dialog for domain deletion in the frontend; clean up unused components and improve UI consistency.

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

@@ -0,0 +1,95 @@
+import { useEffect, useMemo, useState } from 'react'
+import { DragContextProvider } from '@/components/board/drag-context-provider'
+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'
+
+interface GroupsBoardProps {
+  board: BoardState
+  activeDomain?: DomainListItem
+  dragDisabled?: boolean
+  onDragStart: Parameters<typeof DragContextProvider>[0]['onDragStart']
+  onDragEnd: Parameters<typeof DragContextProvider>[0]['onDragEnd']
+  onEditGroup?: (group: Group) => void
+  onDeleteGroup?: (group: Group) => void
+  serviceLabelsByDomain?: Map<number, string[]>
+}
+
+export function GroupsBoard({
+  board,
+  activeDomain,
+  dragDisabled = false,
+  onDragStart,
+  onDragEnd,
+  onEditGroup,
+  onDeleteGroup,
+  serviceLabelsByDomain,
+}: GroupsBoardProps) {
+  const columnIds = useMemo(
+    () => board.columns.map((column) => column.id),
+    [board.columns],
+  )
+  const columnIdsKey = columnIds.join(',')
+
+  const [openColumns, setOpenColumns] = useState<string[]>([])
+
+  useEffect(() => {
+    setOpenColumns((prev) => {
+      const preserved = prev.filter((id) => columnIds.includes(id))
+      const added = columnIds.filter((id) => !preserved.includes(id))
+      if (preserved.length === 0 && added.length > 0) {
+        return columnIds
+      }
+      return [...preserved, ...added]
+    })
+  }, [columnIdsKey, columnIds])
+
+  const isDragging = activeDomain != null
+
+  function handleExpandColumn(columnId: string) {
+    setOpenColumns((prev) =>
+      prev.includes(columnId) ? prev : [...prev, columnId],
+    )
+  }
+
+  return (
+    <DragContextProvider
+      disabled={dragDisabled}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      overlay={
+        activeDomain ? (
+          <DomainRow
+            domain={activeDomain}
+            serviceLabels={serviceLabelsByDomain?.get(activeDomain.id)}
+            dragDisabled
+            overlay
+          />
+        ) : null
+      }
+    >
+      <Accordion
+        multiple
+        value={openColumns}
+        onValueChange={setOpenColumns}
+        className="grid w-full grid-cols-1 gap-2 lg:grid-cols-2"
+      >
+        {board.columns.map((column) => (
+          <DomainGroupItem
+            key={column.id}
+            column={column}
+            isOpen={openColumns.includes(column.id)}
+            isDragging={isDragging}
+            onExpandColumn={handleExpandColumn}
+            onEditGroup={onEditGroup}
+            onDeleteGroup={onDeleteGroup}
+            dragDisabled={dragDisabled}
+            serviceLabelsByDomain={serviceLabelsByDomain}
+          />
+        ))}
+      </Accordion>
+    </DragContextProvider>
+  )
+}