improvement: treatment plan turned into a wizard. shift+click control added to FDI tooth chart for cunnected prosthesises.

frontend/src/components/ui/lab/LabCaseProsthesisGroupsList.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { ConnectedSelectionBadge } from '@/components/ui/treatment/ConnectedSelectionBadge';
 import {
   formatToothList,
   prosthesisTypeColorFromCatalog,
@@ -9,6 +10,8 @@ import type { ProsthesisCatalogEntry } from '@/types/treatment-catalog';
 export type LabCaseProsthesisGroup = {
   prosthesisTypeCode: string;
   teeth: string[];
+  connected?: boolean;
+  selectionGroupId?: string;
 };
 
 interface LabCaseProsthesisGroupsListProps {
@@ -31,12 +34,15 @@ export function LabCaseProsthesisGroupsList({
       <ul className="space-y-0.5">
         {groups.map((group) => (
           <li
-            key={group.prosthesisTypeCode}
+            key={`${group.selectionGroupId ?? ''}-${group.prosthesisTypeCode}-${group.teeth.join(',')}`}
             className="text-[11px] leading-snug"
             style={{
               color: prosthesisTypeColorFromCatalog(group.prosthesisTypeCode, prosthesisCatalog),
             }}
           >
+            {group.connected ? (
+              <ConnectedSelectionBadge className="me-1 align-middle text-[9px] px-1 py-px" />
+            ) : null}
             <span className="font-medium">
               {prosthesisLabel(group.prosthesisTypeCode, prosthesisCatalog)}
             </span>