improvement: treatment preview and treatment history components overhauled. draft & completed status for treatment plan completely removed from the flow.

frontend/src/components/ui/treatment/TreatmentHistoryDetailLine.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { TreatmentTypeBadge } from '@/components/ui/treatment/TreatmentTypeBadge';
+import type { PastTreatmentDetail } from '@/types/treatment';
+
+interface TreatmentHistoryDetailLineProps {
+  detail: PastTreatmentDetail;
+  detailNumber: number;
+}
+
+export function TreatmentHistoryDetailLine({
+  detail,
+  detailNumber,
+}: TreatmentHistoryDetailLineProps) {
+  const t = useTranslations('treatment');
+  const teeth = detail.teeth.length ? [...detail.teeth].sort().join(', ') : t('teethNone');
+  const attachmentCount = detail.attachmentMetas?.length ?? 0;
+
+  return (
+    <div className="flex items-center gap-2 min-w-0 text-[11px] leading-tight">
+      <span className="text-text-muted tabular-nums shrink-0">{detailNumber}.</span>
+      <TreatmentTypeBadge type={detail.treatmentType} />
+      <span className="text-text-secondary truncate min-w-0">{teeth}</span>
+      {attachmentCount > 0 && (
+        <span className="text-text-muted shrink-0 tabular-nums">
+          {t('detailAttachmentCount', { n: attachmentCount })}
+        </span>
+      )}
+    </div>
+  );
+}