@checkstack/catalog-frontend 0.4.2 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @checkstack/catalog-frontend
 
+## 0.5.0
+
+### Minor Changes
+
+- 0ebbe56: Replace dropdown-based system-to-group assignment with drag-and-drop.
+
+  - Systems panel now shows a grip handle on each row for drag-and-drop onto groups
+  - Group panel cards highlight as valid drop zones when a system is dragged over them
+  - Dragging a system onto a group it already belongs to is blocked with a visual indicator
+  - Added a `+` popover button on each system row as a mobile-friendly alternative (no drag required on small screens)
+  - Touch sensor activated with 250ms delay to avoid conflicts with scrolling
+  - Removed the "Add System to Group" card with dropdowns
+  - Systems not assigned to any group display an `unassigned` badge
+
+### Patch Changes
+
+- Updated dependencies [0ebbe56]
+- Updated dependencies [a340781]
+- Updated dependencies [8d2660d]
+  - @checkstack/auth-common@0.5.6
+  - @checkstack/common@0.6.3
+  - @checkstack/ui@1.1.1
+  - @checkstack/auth-frontend@0.5.11
+  - @checkstack/catalog-common@1.2.8
+  - @checkstack/frontend-api@0.3.6
+  - @checkstack/notification-common@0.2.6
+
 ## 0.4.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/catalog-frontend",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "type": "module",
   "main": "src/index.tsx",
   "scripts": {
@@ -10,15 +10,17 @@
   },
   "dependencies": {
     "@checkstack/auth-common": "0.5.5",
+    "@checkstack/auth-frontend": "0.5.10",
     "@checkstack/catalog-common": "1.2.7",
-    "@checkstack/frontend-api": "0.3.5",
-    "@checkstack/auth-frontend": "0.5.9",
     "@checkstack/common": "0.6.2",
+    "@checkstack/frontend-api": "0.3.5",
     "@checkstack/notification-common": "0.2.5",
-    "@checkstack/ui": "1.0.0",
+    "@checkstack/ui": "1.1.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/utilities": "^3.2.2",
+    "lucide-react": "^0.344.0",
     "react": "^18.2.0",
-    "react-router-dom": "^6.22.0",
-    "lucide-react": "^0.344.0"
+    "react-router-dom": "^6.22.0"
   },
   "devDependencies": {
     "typescript": "^5.0.0",

package/src/components/CatalogConfigPage.tsx

@@ -1,16 +1,23 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { useSearchParams } from "react-router-dom";
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  type DragStartEvent,
+  type DragEndEvent,
+  type DragOverEvent,
+} from "@dnd-kit/core";
 import {
   useApi,
   accessApiRef,
-  ExtensionSlot,
   usePluginClient,
 } from "@checkstack/frontend-api";
 import { System, CatalogApi } from "../api";
-import {
-  CatalogSystemActionsSlot,
-  catalogAccess,
-} from "@checkstack/catalog-common";
+import { catalogAccess } from "@checkstack/catalog-common";
 import {
   PageLayout,
   Card,
@@ -19,15 +26,15 @@ import {
   CardTitle,
   CardContent,
   Button,
-  Label,
   EmptyState,
-  EditableText,
   ConfirmationModal,
   useToast,
 } from "@checkstack/ui";
-import { Plus, Trash2, LayoutGrid, Server, Edit } from "lucide-react";
+import { Plus, FolderPlus, LayoutGrid, Server } from "lucide-react";
 import { SystemEditor } from "./SystemEditor";
 import { GroupEditor } from "./GroupEditor";
+import { DraggableSystem, SystemDragOverlay } from "./DraggableSystem";
+import { DroppableGroup } from "./DroppableGroup";
 
 export const CatalogConfigPage = () => {
   const catalogClient = usePluginClient(CatalogApi);
@@ -38,9 +45,6 @@ export const CatalogConfigPage = () => {
     catalogAccess.system.manage,
   );
 
-  const [selectedGroupId, setSelectedGroupId] = useState("");
-  const [selectedSystemToAdd, setSelectedSystemToAdd] = useState("");
-
   // Dialog state
   const [isSystemEditorOpen, setIsSystemEditorOpen] = useState(false);
   const [editingSystem, setEditingSystem] = useState<System | undefined>();
@@ -59,6 +63,12 @@ export const CatalogConfigPage = () => {
     onConfirm: () => {},
   });
 
+  // Drag-and-drop state
+  const [activeSystemId, setActiveSystemId] = useState<string | undefined>();
+  const [overGroupId, setOverGroupId] = useState<string | undefined>();
+  // Tracks which system was most recently added to which group (for glow animation)
+  const [recentlyAdded, setRecentlyAdded] = useState<{ systemId: string; groupId: string } | undefined>();
+
   // Fetch systems with useQuery
   const {
     data: systemsData,
@@ -77,13 +87,6 @@ export const CatalogConfigPage = () => {
   const groups = groupsData ?? [];
   const loading = systemsLoading || groupsLoading;
 
-  // Set initial group selection
-  useEffect(() => {
-    if (groups.length > 0 && !selectedGroupId) {
-      setSelectedGroupId(groups[0].id);
-    }
-  }, [groups, selectedGroupId]);
-
   // Handle ?action=create URL parameter (from command palette)
   useEffect(() => {
     if (searchParams.get("action") === "create" && canManage) {
@@ -94,6 +97,18 @@ export const CatalogConfigPage = () => {
     }
   }, [searchParams, canManage, setSearchParams]);
 
+  // DnD sensors — pointer for desktop, touch for mobile
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      // 8px movement tolerance prevents accidental drags on clicks
+      activationConstraint: { distance: 8 },
+    }),
+    useSensor(TouchSensor, {
+      // 250ms delay for touch to avoid conflicts with scrolling
+      activationConstraint: { delay: 250, tolerance: 8 },
+    }),
+  );
+
   // Mutations
   const createSystemMutation = catalogClient.createSystem.useMutation({
     onSuccess: () => {
@@ -175,9 +190,10 @@ export const CatalogConfigPage = () => {
   });
 
   const addSystemToGroupMutation = catalogClient.addSystemToGroup.useMutation({
-    onSuccess: () => {
+    onSuccess: (_data, variables) => {
       toast.success("System added to group successfully");
-      setSelectedSystemToAdd("");
+      setRecentlyAdded({ systemId: variables.systemId, groupId: variables.groupId });
+      setTimeout(() => setRecentlyAdded(undefined), 1500);
       void refetchGroups();
     },
     onError: (error) => {
@@ -244,12 +260,8 @@ export const CatalogConfigPage = () => {
     });
   };
 
-  const handleAddSystemToGroup = () => {
-    if (!selectedGroupId || !selectedSystemToAdd) return;
-    addSystemToGroupMutation.mutate({
-      groupId: selectedGroupId,
-      systemId: selectedSystemToAdd,
-    });
+  const handleAddSystemToGroup = (systemId: string, groupId: string) => {
+    addSystemToGroupMutation.mutate({ groupId, systemId });
   };
 
   const handleRemoveSystemFromGroup = (groupId: string, systemId: string) => {
@@ -260,10 +272,49 @@ export const CatalogConfigPage = () => {
     updateGroupMutation.mutate({ id, data: { name: newName } });
   };
 
-  const selectedGroup = groups.find((g) => g.id === selectedGroupId);
-  const availableSystems = systems.filter(
-    (s) => !selectedGroup?.systemIds?.includes(s.id),
-  );
+  // DnD event handlers
+  const handleDragStart = ({ active }: DragStartEvent) => {
+    setActiveSystemId(String(active.id));
+  };
+
+  const handleDragOver = ({ over }: DragOverEvent) => {
+    setOverGroupId(over ? String(over.id) : undefined);
+  };
+
+  const handleDragEnd = ({ active, over }: DragEndEvent) => {
+    setActiveSystemId(undefined);
+    setOverGroupId(undefined);
+
+    if (!over) return;
+
+    const systemId = String(active.id);
+    const groupId = String(over.id);
+    const targetGroup = groups.find((g) => g.id === groupId);
+
+    // Block if already assigned to this group
+    if (targetGroup?.systemIds?.includes(systemId)) return;
+
+    handleAddSystemToGroup(systemId, groupId);
+  };
+
+  const handleDragCancel = () => {
+    setActiveSystemId(undefined);
+    setOverGroupId(undefined);
+  };
+
+  const activeSystem = activeSystemId
+    ? systems.find((s) => s.id === activeSystemId)
+    : undefined;
+
+  // Build a map of systemId → groupIds for quick lookup
+  const systemGroupMap = new Map<string, string[]>();
+  for (const group of groups) {
+    for (const sysId of group.systemIds ?? []) {
+      const existing = systemGroupMap.get(sysId) ?? [];
+      existing.push(group.id);
+      systemGroupMap.set(sysId, existing);
+    }
+  }
 
   return (
     <PageLayout
@@ -273,213 +324,116 @@ export const CatalogConfigPage = () => {
       loading={loading || accessLoading}
       allowed={canManage}
     >
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-        {/* Systems Management */}
-        <Card>
-          <CardHeader>
-            <CardHeaderRow>
-              <CardTitle className="flex items-center gap-2">
-                <Server className="w-5 h-5 text-muted-foreground" />
-                Systems
-              </CardTitle>
-              <Button size="sm" onClick={() => setIsSystemEditorOpen(true)}>
-                <Plus className="w-4 h-4 mr-2" />
-                Add System
-              </Button>
-            </CardHeaderRow>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {systems.length === 0 ? (
-              <EmptyState title="No systems created yet." />
-            ) : (
-              <div className="space-y-2">
-                {systems.map((system) => (
-                  <div
-                    key={system.id}
-                    className="flex items-start justify-between p-3 bg-muted/30 rounded-lg border border-border"
-                  >
-                    <div className="flex-1 space-y-1">
-                      <div className="flex items-center justify-between">
-                        <span className="font-medium text-foreground">
-                          {system.name}
-                        </span>
-                        <ExtensionSlot
-                          slot={CatalogSystemActionsSlot}
-                          context={{
-                            systemId: system.id,
-                            systemName: system.name,
-                          }}
-                        />
-                      </div>
-                      <p className="text-xs text-muted-foreground">
-                        {system.description || "No description"}
-                      </p>
-                    </div>
-                    <div className="flex gap-1">
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="h-8 w-8 p-0"
-                        onClick={() => {
-                          setEditingSystem(system);
-                          setIsSystemEditorOpen(true);
-                        }}
-                      >
-                        <Edit className="w-4 h-4" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        className="text-destructive hover:text-destructive/90 hover:bg-destructive/10 h-8 w-8 p-0"
-                        onClick={() => handleDeleteSystem(system.id)}
-                      >
-                        <Trash2 className="w-4 h-4" />
-                      </Button>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </CardContent>
-        </Card>
-
-        {/* Groups Management */}
-        <Card>
-          <CardHeader>
-            <CardHeaderRow>
-              <CardTitle className="flex items-center gap-2">
-                <LayoutGrid className="w-5 h-5 text-muted-foreground" />
-                Groups
-              </CardTitle>
-              <Button size="sm" onClick={() => setIsGroupEditorOpen(true)}>
-                <Plus className="w-4 h-4 mr-2" />
-                Add Group
-              </Button>
-            </CardHeaderRow>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {groups.length === 0 ? (
-              <EmptyState title="No groups created yet." />
-            ) : (
-              <div className="space-y-2">
-                {groups.map((group) => (
-                  <div
-                    key={group.id}
-                    className="p-3 bg-muted/30 rounded-lg border border-border space-y-2"
-                  >
-                    <div className="flex items-center justify-between">
-                      <div className="flex-1">
-                        <EditableText
-                          value={group.name}
-                          onSave={(newName) =>
-                            handleUpdateGroupName(group.id, newName)
-                          }
-                          className="font-medium text-foreground"
-                        />
-                        <p className="text-xs text-muted-foreground font-mono">
-                          {group.id}
-                        </p>
-                      </div>
-                      <Button
-                        variant="ghost"
-                        className="text-destructive hover:text-destructive/90 hover:bg-destructive/10 h-8 w-8 p-0"
-                        onClick={() => handleDeleteGroup(group.id)}
-                      >
-                        <Trash2 className="w-4 h-4" />
-                      </Button>
-                    </div>
-
-                    {/* Systems in this group */}
-                    {group.systemIds && group.systemIds.length > 0 && (
-                      <div className="pl-4 space-y-1">
-                        {group.systemIds
-                          .map((sysId) => systems.find((s) => s.id === sysId))
-                          .filter((sys): sys is System => !!sys)
-                          .map((sys) => (
-                            <div
-                              key={sys.id}
-                              className="flex items-center justify-between text-sm bg-background p-2 rounded border border-border"
-                            >
-                              <span className="text-foreground">
-                                {sys.name}
-                              </span>
-                              <Button
-                                variant="ghost"
-                                className="text-destructive/60 hover:text-destructive h-6 w-6 p-0"
-                                onClick={() =>
-                                  handleRemoveSystemFromGroup(group.id, sys.id)
-                                }
-                              >
-                                <Trash2 className="w-3 h-3" />
-                              </Button>
-                            </div>
-                          ))}
-                      </div>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Add System to Group Section */}
-      {groups.length > 0 && systems.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle>Add System to Group</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              <div className="space-y-2">
-                <Label>Select Group</Label>
-                <select
-                  className="w-full flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                  value={selectedGroupId}
-                  onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
-                    setSelectedGroupId(e.target.value)
-                  }
-                >
-                  {groups.map((g) => (
-                    <option key={g.id} value={g.id}>
-                      {g.name}
-                    </option>
-                  ))}
-                </select>
-              </div>
-
-              <div className="space-y-2">
-                <Label>Select System</Label>
-                <select
-                  className="w-full flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                  value={selectedSystemToAdd}
-                  onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
-                    setSelectedSystemToAdd(e.target.value)
-                  }
-                >
-                  <option value="">Select a system</option>
-                  {availableSystems.map((s) => (
-                    <option key={s.id} value={s.id}>
-                      {s.name}
-                    </option>
+      <DndContext
+        sensors={sensors}
+        onDragStart={handleDragStart}
+        onDragOver={handleDragOver}
+        onDragEnd={handleDragEnd}
+        onDragCancel={handleDragCancel}
+      >
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          {/* Systems Management */}
+          <Card>
+            <CardHeader>
+              <CardHeaderRow>
+                <CardTitle className="flex items-center gap-2">
+                  <Server className="w-5 h-5 text-muted-foreground" />
+                  Systems
+                </CardTitle>
+                <Button size="sm" onClick={() => setIsSystemEditorOpen(true)}>
+                  <Plus className="w-4 h-4 mr-2" />
+                  Add System
+                </Button>
+              </CardHeaderRow>
+              {systems.length > 0 && groups.length > 0 && (
+                <p className="text-xs text-muted-foreground mt-1">
+                  Drag a system onto a group, or use the{" "}
+                  <FolderPlus className="w-3 h-3 inline" /> button to assign it.
+                </p>
+              )}
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {systems.length === 0 ? (
+                <EmptyState title="No systems created yet." />
+              ) : (
+                <div className="space-y-2">
+                  {systems.map((system) => (
+                    <DraggableSystem
+                      key={system.id}
+                      system={system}
+                      groups={groups}
+                      assignedGroupIds={systemGroupMap.get(system.id) ?? []}
+                      onEdit={(s) => {
+                        setEditingSystem(s);
+                        setIsSystemEditorOpen(true);
+                      }}
+                      onDelete={handleDeleteSystem}
+                      onAddToGroup={handleAddSystemToGroup}
+                    />
                   ))}
-                </select>
-              </div>
-
-              <div className="flex items-end">
-                <Button
-                  onClick={handleAddSystemToGroup}
-                  disabled={!selectedSystemToAdd}
-                  className="w-full"
-                >
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Groups Management */}
+          <Card>
+            <CardHeader>
+              <CardHeaderRow>
+                <CardTitle className="flex items-center gap-2">
+                  <LayoutGrid className="w-5 h-5 text-muted-foreground" />
+                  Groups
+                </CardTitle>
+                <Button size="sm" onClick={() => setIsGroupEditorOpen(true)}>
                   <Plus className="w-4 h-4 mr-2" />
-                  Add to Group
+                  Add Group
                 </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      )}
+              </CardHeaderRow>
+              {groups.length > 0 && systems.length > 0 && (
+                <p className="text-xs text-muted-foreground mt-1">
+                  Drop systems here to assign them to a group.
+                </p>
+              )}
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {groups.length === 0 ? (
+                <EmptyState title="No groups created yet." />
+              ) : (
+                <div className="space-y-2">
+                  {groups.map((group) => (
+                    <DroppableGroup
+                      key={group.id}
+                      group={group}
+                      systems={systems}
+                      isOver={overGroupId === group.id}
+                      isDragging={activeSystemId !== undefined}
+                      draggingSystemAlreadyInGroup={
+                        activeSystemId !== undefined &&
+                        (group.systemIds ?? []).includes(activeSystemId)
+                      }
+                      newlyAddedSystemId={
+                        recentlyAdded?.groupId === group.id
+                          ? recentlyAdded.systemId
+                          : undefined
+                      }
+                      onDeleteGroup={handleDeleteGroup}
+                      onUpdateGroupName={handleUpdateGroupName}
+                      onRemoveSystem={handleRemoveSystemFromGroup}
+                    />
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Drag overlay — the floating ghost shown while dragging */}
+        {/* dropAnimation must be null (not undefined) per @dnd-kit API to disable the fly-back animation */}
+        {/* eslint-disable-next-line unicorn/no-null */}
+        <DragOverlay dropAnimation={null}>
+          {activeSystem ? <SystemDragOverlay system={activeSystem} /> : undefined}
+        </DragOverlay>
+      </DndContext>
 
       {/* Dialogs */}
       <SystemEditor

package/src/components/DraggableSystem.tsx

@@ -0,0 +1,178 @@
+import { useState } from "react";
+import { useDraggable } from "@dnd-kit/core";
+import { GripVertical, Edit, Trash2, FolderPlus } from "lucide-react";
+import { Button } from "@checkstack/ui";
+import { ExtensionSlot } from "@checkstack/frontend-api";
+import { CatalogSystemActionsSlot } from "@checkstack/catalog-common";
+import type { Group, System } from "../api";
+
+interface DraggableSystemProps {
+  system: System;
+  groups: Group[];
+  assignedGroupIds: string[];
+  onEdit: (system: System) => void;
+  onDelete: (id: string) => void;
+  onAddToGroup: (systemId: string, groupId: string) => void;
+}
+
+/**
+ * A draggable system card for the Catalog Management page.
+ *
+ * Layout: two-row design so the system name is never truncated.
+ *   Row 1: grip handle + full-width name + description
+ *   Row 2 (footer): extension slot (Health Checks etc.) + action buttons
+ *
+ * On touch / small screens, the + button opens an inline group picker
+ * since drag-and-drop can be imprecise on small viewports.
+ *
+ * We intentionally do NOT apply the useDraggable transform to the element —
+ * DragOverlay handles the moving visual, keeping the original in-place.
+ */
+export const DraggableSystem = ({
+  system,
+  groups,
+  assignedGroupIds,
+  onEdit,
+  onDelete,
+  onAddToGroup,
+}: DraggableSystemProps) => {
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+
+  const { attributes, listeners, setNodeRef } = useDraggable({
+    id: system.id,
+  });
+
+  const availableGroups = groups.filter((g) => !assignedGroupIds.includes(g.id));
+
+  return (
+    <div
+      ref={setNodeRef}
+      className="bg-muted/30 rounded-lg border border-border transition-all duration-150"
+    >
+      {/* Main row: grip + name/description */}
+      <div className="flex items-start gap-2 p-3 pb-2">
+        {/* Grip handle — only this element triggers the drag */}
+        <div
+          {...listeners}
+          {...attributes}
+          className="flex-shrink-0 mt-0.5 cursor-grab active:cursor-grabbing text-muted-foreground/40 hover:text-muted-foreground touch-none"
+          aria-label={`Drag ${system.name}`}
+        >
+          <GripVertical className="w-4 h-4" />
+        </div>
+
+        {/* Name + description — gets all remaining width, never truncated */}
+        <div className="flex-1 min-w-0">
+          <p className="font-medium text-foreground leading-snug">
+            {system.name}
+          </p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            {system.description || "No description"}
+          </p>
+        </div>
+      </div>
+
+      {/* Footer row: unassigned badge (left) + all action buttons (right) */}
+      <div className="flex items-center justify-between gap-2 px-3 pb-2 pl-9">
+        {/* Left: unassigned badge */}
+        <div className="min-w-0">
+          {assignedGroupIds.length === 0 && (
+            <span className="flex-shrink-0 text-[10px] px-1.5 py-0.5 rounded bg-warning/15 text-warning-foreground font-mono">
+              unassigned
+            </span>
+          )}
+        </div>
+
+        {/* Right: extension slot + action buttons, all grouped together */}
+        <div className="flex items-center gap-1 flex-shrink-0">
+          <ExtensionSlot
+            slot={CatalogSystemActionsSlot}
+            context={{ systemId: system.id, systemName: system.name }}
+          />
+
+          {/* Group picker */}
+          <div className="relative">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0"
+              title={`Add ${system.name} to a group`}
+              onClick={() => setIsPickerOpen((v) => !v)}
+              disabled={availableGroups.length === 0}
+              aria-expanded={isPickerOpen}
+              aria-haspopup="listbox"
+              aria-label={`Add ${system.name} to group`}
+            >
+              <FolderPlus className="w-3.5 h-3.5" />
+            </Button>
+
+            {isPickerOpen && availableGroups.length > 0 && (
+              <>
+                {/* Backdrop */}
+                <div
+                  className="fixed inset-0 z-40"
+                  onClick={() => setIsPickerOpen(false)}
+                />
+                <div
+                  role="listbox"
+                  aria-label="Select a group"
+                  className="absolute right-0 bottom-full mb-1 z-50 min-w-[160px] rounded-md border border-border bg-popover shadow-md py-1"
+                >
+                  {availableGroups.map((group) => (
+                    <button
+                      key={group.id}
+                      role="option"
+                      aria-selected={false}
+                      className="w-full text-left px-3 py-2 text-sm hover:bg-muted transition-colors"
+                      onClick={() => {
+                        onAddToGroup(system.id, group.id);
+                        setIsPickerOpen(false);
+                      }}
+                    >
+                      {group.name}
+                    </button>
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 w-7 p-0"
+            onClick={() => onEdit(system)}
+            aria-label={`Edit ${system.name}`}
+          >
+            <Edit className="w-3.5 h-3.5" />
+          </Button>
+
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-destructive hover:text-destructive/90 hover:bg-destructive/10 h-7 w-7 p-0"
+            onClick={() => onDelete(system.id)}
+            aria-label={`Delete ${system.name}`}
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * A non-interactive ghost card shown in the DragOverlay while dragging.
+ */
+export const SystemDragOverlay = ({ system }: { system: System }) => (
+  <div className="flex items-center gap-2 p-3 bg-card rounded-lg border border-primary/50 shadow-lg cursor-grabbing w-full">
+    <GripVertical className="w-4 h-4 text-muted-foreground/40 flex-shrink-0" />
+    <div className="flex-1 min-w-0">
+      <p className="font-medium text-foreground">{system.name}</p>
+      <p className="text-xs text-muted-foreground">
+        {system.description || "No description"}
+      </p>
+    </div>
+  </div>
+);

package/src/components/DroppableGroup.tsx

@@ -0,0 +1,133 @@
+import { useDroppable } from "@dnd-kit/core";
+import { EditableText, Button } from "@checkstack/ui";
+import { Trash2 } from "lucide-react";
+import type { Group, System } from "../api";
+
+interface DroppableGroupProps {
+  group: Group;
+  systems: System[];
+  isOver: boolean;
+  isDragging: boolean;
+  draggingSystemAlreadyInGroup: boolean;
+  newlyAddedSystemId?: string;
+  onDeleteGroup: (id: string) => void;
+  onUpdateGroupName: (id: string, name: string) => void;
+  onRemoveSystem: (groupId: string, systemId: string) => void;
+}
+
+/**
+ * A droppable group card for the Catalog Management page.
+ *
+ * When a system is being dragged over, the card highlights. If the system
+ * is already assigned to this group, the drop zone shows a "Already in group"
+ * indicator and the drop is blocked visually.
+ */
+export const DroppableGroup = ({
+  group,
+  systems,
+  isOver,
+  isDragging,
+  draggingSystemAlreadyInGroup,
+  newlyAddedSystemId,
+  onDeleteGroup,
+  onUpdateGroupName,
+  onRemoveSystem,
+}: DroppableGroupProps) => {
+  const { setNodeRef } = useDroppable({ id: group.id });
+
+  const groupSystems = (group.systemIds ?? [])
+    .map((sysId) => systems.find((s) => s.id === sysId))
+    .filter((sys): sys is System => !!sys);
+
+  const dropzoneActive = isDragging;
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={`p-3 rounded-lg border space-y-2 transition-all duration-150 ${
+        isOver && !draggingSystemAlreadyInGroup
+          ? "border-primary bg-primary/5 shadow-md shadow-primary/10"
+          : isOver && draggingSystemAlreadyInGroup
+            ? "border-muted-foreground/40 bg-muted/10"
+            : dropzoneActive
+              ? "border-border/60 bg-muted/20 border-dashed"
+              : "border-border bg-muted/30"
+      }`}
+    >
+      {/* Group header */}
+      <div className="flex items-center justify-between">
+        <div className="flex-1">
+          <EditableText
+            value={group.name}
+            onSave={(newName) => onUpdateGroupName(group.id, newName)}
+            className="font-medium text-foreground"
+          />
+          <p className="text-xs text-muted-foreground font-mono">{group.id}</p>
+        </div>
+        <Button
+          variant="ghost"
+          className="text-destructive hover:text-destructive/90 hover:bg-destructive/10 h-8 w-8 p-0"
+          onClick={() => onDeleteGroup(group.id)}
+          aria-label={`Delete group ${group.name}`}
+        >
+          <Trash2 className="w-4 h-4" />
+        </Button>
+      </div>
+
+      {/* Drop zone label */}
+      {isOver && (
+        <div
+          className={`text-xs text-center py-1 rounded transition-colors ${
+            draggingSystemAlreadyInGroup
+              ? "text-muted-foreground"
+              : "text-primary font-medium"
+          }`}
+        >
+          {draggingSystemAlreadyInGroup
+            ? "Already in this group"
+            : "Drop to add"}
+        </div>
+      )}
+
+      {/* Systems in this group */}
+      {groupSystems.length > 0 ? (
+        <div className="pl-2 space-y-1">
+          {groupSystems.map((sys) => {
+            const isNew = newlyAddedSystemId === sys.id;
+            return (
+              <div
+                key={sys.id}
+                className={`flex items-center justify-between text-sm bg-background p-2 rounded border transition-all duration-700 ${
+                  isNew
+                    ? "border-green-500/60 shadow-sm shadow-green-500/30"
+                    : "border-border shadow-none"
+                }`}
+              >
+                <span className="text-foreground truncate">{sys.name}</span>
+                <Button
+                  variant="ghost"
+                  className="text-destructive/60 hover:text-destructive h-6 w-6 p-0 flex-shrink-0"
+                  onClick={() => onRemoveSystem(group.id, sys.id)}
+                  aria-label={`Remove ${sys.name} from ${group.name}`}
+                >
+                  <Trash2 className="w-3 h-3" />
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        /* Empty drop zone hint */
+        <div
+          className={`text-xs text-center py-3 rounded border border-dashed transition-colors ${
+            dropzoneActive
+              ? "border-primary/40 text-primary/60"
+              : "border-border text-muted-foreground/60"
+          }`}
+        >
+          {dropzoneActive ? "Drag a system here" : "No systems assigned"}
+        </div>
+      )}
+    </div>
+  );
+};