improvement: tasks feature UX fully overhauled.

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

@@ -0,0 +1,36 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { Badge } from '@/components/ui/shared/Badge';
+import { formatToothList, prosthesisTypeBadgeStyleFromCatalog } from '@/components/treatment/prosthesisTypeDisplay';
+import type { ProsthesisTaskGroup } from '@/components/lab/taskListGrouping';
+import type { ProsthesisCatalogEntry } from '@/types/treatment-catalog';
+
+interface TaskProsthesisGroupHeaderProps {
+  group: ProsthesisTaskGroup;
+  prosthesisCatalog: readonly ProsthesisCatalogEntry[];
+}
+
+export function TaskProsthesisGroupHeader({
+  group,
+  prosthesisCatalog,
+}: TaskProsthesisGroupHeaderProps) {
+  const t = useTranslations('tasks');
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 px-3 py-1.5 bg-background-secondary/30 border-b border-border/40">
+      <Badge
+        fixedWidth={false}
+        truncate
+        title={group.prosthesisTypeLabel}
+        style={prosthesisTypeBadgeStyleFromCatalog(group.prosthesisTypeCode, prosthesisCatalog)}
+        className="max-w-[10rem]"
+      >
+        {group.prosthesisTypeLabel}
+      </Badge>
+      <span className="text-xs text-text-secondary">
+        {t('teethLabel', { teeth: formatToothList(group.teeth) })}
+      </span>
+    </div>
+  );
+}