feat: drop node onto container node to nest it

Dropping a top-level node over any container_mode node (proxmox,
docker_host, ...) now pops a confirm modal that nests it as a child
(sets parentId), mirroring the existing drop-onto-group flow.

- store: addToContainer(containerId, childId)
- CanvasContainer: detect container_mode intersection on drag stop
  (group still wins if both intersect)
- generalize ConfirmAddToGroupModal with a container variant

ha-relevant: yes

frontend/src/components/modals/ConfirmAddToGroupModal.tsx

@@ -12,23 +12,35 @@ import { Button } from '@/components/ui/button'
 interface ConfirmAddToGroupModalProps {
   open: boolean
   nodeLabel: string
-  groupLabel: string
+  /** Label of the destination group/container. */
+  targetLabel: string
+  /** Destination kind — drives the wording. Defaults to 'group'. */
+  variant?: 'group' | 'container'
   onConfirm: () => void
   onCancel: () => void
 }
 
-export function ConfirmAddToGroupModal({ open, nodeLabel, groupLabel, onConfirm, onCancel }: ConfirmAddToGroupModalProps) {
+export function ConfirmAddToGroupModal({
+  open,
+  nodeLabel,
+  targetLabel,
+  variant = 'group',
+  onConfirm,
+  onCancel,
+}: ConfirmAddToGroupModalProps) {
+  const action = variant === 'container' ? 'Add to container' : 'Add to group'
+  const noun = variant === 'container' ? 'container' : 'group'
   return (
     <Dialog open={open} onOpenChange={(o) => { if (!o) onCancel() }}>
       <DialogContent className="max-w-sm">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Layers size={16} className="text-[#00d4ff]" />
-            Add to group
+            {action}
           </DialogTitle>
           <DialogDescription>
-            Add <span className="font-medium text-foreground">{nodeLabel}</span> to the group{' '}
-            <span className="font-medium text-foreground">{groupLabel}</span>?
+            Add <span className="font-medium text-foreground">{nodeLabel}</span> to the {noun}{' '}
+            <span className="font-medium text-foreground">{targetLabel}</span>?
           </DialogDescription>
         </DialogHeader>
         <DialogFooter>
@@ -38,7 +50,7 @@ export function ConfirmAddToGroupModal({ open, nodeLabel, groupLabel, onConfirm,
             className="bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90"
             onClick={onConfirm}
           >
-            Add to group
+            {action}
           </Button>
         </DialogFooter>
       </DialogContent>

frontend/src/components/modals/__tests__/ConfirmAddToGroupModal.test.tsx

@@ -5,14 +5,14 @@ import { ConfirmAddToGroupModal } from '../ConfirmAddToGroupModal'
 describe('ConfirmAddToGroupModal', () => {
   it('renders nothing when closed', () => {
     render(
-      <ConfirmAddToGroupModal open={false} nodeLabel="Router" groupLabel="DMZ" onConfirm={vi.fn()} onCancel={vi.fn()} />,
+      <ConfirmAddToGroupModal open={false} nodeLabel="Router" targetLabel="DMZ" onConfirm={vi.fn()} onCancel={vi.fn()} />,
     )
     expect(screen.queryByText('Add to group')).toBeNull()
   })
 
   it('shows node and group labels when open', () => {
     render(
-      <ConfirmAddToGroupModal open nodeLabel="Router" groupLabel="DMZ" onConfirm={vi.fn()} onCancel={vi.fn()} />,
+      <ConfirmAddToGroupModal open nodeLabel="Router" targetLabel="DMZ" onConfirm={vi.fn()} onCancel={vi.fn()} />,
     )
     expect(screen.getByText('Router')).toBeDefined()
     expect(screen.getByText('DMZ')).toBeDefined()
@@ -21,7 +21,7 @@ describe('ConfirmAddToGroupModal', () => {
   it('calls onConfirm when the confirm button is clicked', () => {
     const onConfirm = vi.fn()
     render(
-      <ConfirmAddToGroupModal open nodeLabel="Router" groupLabel="DMZ" onConfirm={onConfirm} onCancel={vi.fn()} />,
+      <ConfirmAddToGroupModal open nodeLabel="Router" targetLabel="DMZ" onConfirm={onConfirm} onCancel={vi.fn()} />,
     )
     fireEvent.click(screen.getByRole('button', { name: /add to group/i }))
     expect(onConfirm).toHaveBeenCalledOnce()
@@ -30,9 +30,17 @@ describe('ConfirmAddToGroupModal', () => {
   it('calls onCancel when the cancel button is clicked', () => {
     const onCancel = vi.fn()
     render(
-      <ConfirmAddToGroupModal open nodeLabel="Router" groupLabel="DMZ" onConfirm={vi.fn()} onCancel={onCancel} />,
+      <ConfirmAddToGroupModal open nodeLabel="Router" targetLabel="DMZ" onConfirm={vi.fn()} onCancel={onCancel} />,
     )
     fireEvent.click(screen.getByRole('button', { name: /cancel/i }))
     expect(onCancel).toHaveBeenCalledOnce()
   })
+
+  it('uses container wording when variant is container', () => {
+    render(
+      <ConfirmAddToGroupModal open variant="container" nodeLabel="VM" targetLabel="Proxmox" onConfirm={vi.fn()} onCancel={vi.fn()} />,
+    )
+    expect(screen.getByRole('button', { name: /add to container/i })).toBeDefined()
+    expect(screen.queryByText('Add to group')).toBeNull()
+  })
 })