improvement: treatment UX fully overhauled.

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

@@ -0,0 +1,46 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { LabCaseCommentsPanel } from '@/components/ui/lab/LabCaseCommentsPanel';
+import { treatmentsApi } from '@/lib/api/treatments';
+import type { TreatmentDetailDraft } from '@/types/treatment';
+
+interface DetailLabCaseCommentsSectionProps {
+  detail: TreatmentDetailDraft;
+  canPost: boolean;
+  onError?: (message: string) => void;
+}
+
+export function DetailLabCaseCommentsSection({
+  detail,
+  canPost,
+  onError,
+}: DetailLabCaseCommentsSectionProps) {
+  const t = useTranslations('treatment');
+  const caseId = detail.labCaseId;
+
+  if (!caseId) return null;
+
+  return (
+    <div className="space-y-2 border-t border-border/60 pt-4">
+      <div>
+        <p className="text-xs font-medium text-text-secondary">{t('labCaseCommentsTitle')}</p>
+        <p className="text-[11px] text-text-muted mt-0.5">{t('labCaseCommentsHint')}</p>
+      </div>
+      <LabCaseCommentsPanel
+        caseId={caseId}
+        canPost={canPost}
+        canToggleVisibility={false}
+        loadComments={async () => {
+          const response = await treatmentsApi.listLabCaseComments(caseId);
+          return response.data;
+        }}
+        onPost={async (body) => {
+          const response = await treatmentsApi.addLabCaseComment(caseId, { body });
+          return response.data;
+        }}
+        onError={onError}
+      />
+    </div>
+  );
+}