feature: a minor refactor in folder structure done.

2026-05-07 03:46:18 +03:30
parent a70cbc7860
commit 58cb35e26d
9 changed files with 6 additions and 6 deletions
--- a/frontend/src/components/ui/treatment/FdiToothChart.tsx
+++ b/frontend/src/components/ui/treatment/FdiToothChart.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import { useId } from 'react';
+import { FDI_LOWER_LEFT_TO_RIGHT, FDI_UPPER_LEFT_TO_RIGHT, getToothShapeKind } from '@/components/treatment/fdiToothMeta';
+import { ToothGlyph } from '@/components/ui/treatment/ToothGlyph';
+import type { FdiToothId } from '@/types/treatment';
+
+function quadrantMirrored(fdi: FdiToothId): boolean {
+  const q = fdi[0];
+  return q === '2' || q === '3';
+}
+
+interface FdiToothChartProps {
+  selected: ReadonlySet<FdiToothId>;
+  onToggle: (fdi: FdiToothId) => void;
+  disabled?: boolean;
+}
+
+export function FdiToothChart({ selected, onToggle, disabled }: FdiToothChartProps) {
+  const uid = useId().replace(/:/g, '');
+
+  const Row = ({ teeth }: { teeth: FdiToothId[] }) => (
+    <div className="flex flex-wrap justify-center gap-x-1 gap-y-2">
+      {teeth.map((fdi, i) => {
+        const kind = getToothShapeKind(fdi);
+        const gid = `${uid}-g-${fdi}-${i}`;
+        const isSel = selected.has(fdi);
+        return (
+          <div key={fdi} className="flex flex-col items-center w-[2.25rem]">
+            <button
+              type="button"
+              disabled={disabled}
+              onClick={() => onToggle(fdi)}
+              className={`
+                rounded-[var(--radius-sm)] p-0.5 transition-transform
+                focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50
+                ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:scale-105 active:scale-95'}
+              `}
+              aria-pressed={isSel}
+              aria-label={`FDI tooth ${fdi}${isSel ? ', selected' : ''}`}
+            >
+              <ToothGlyph kind={kind} gradientId={gid} selected={isSel} mirrored={quadrantMirrored(fdi)} />
+            </button>
+            <span
+              className={`text-[10px] tabular-nums leading-none mt-0.5 font-medium ${
+                isSel ? 'text-primary' : 'text-text-muted'
+              }`}
+            >
+              {fdi}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  return (
+    <div className="surface-card p-4 space-y-6">
+      <div className="flex items-start justify-between gap-3 flex-wrap">
+        <div>
+          <h3 className="text-sm font-semibold text-text-primary">FDI tooth chart</h3>
+          <p className="text-xs text-text-muted mt-0.5">
+            Tap teeth to multi-select (FDI). Selection applies to the active treatment record until you save.
+          </p>
+        </div>
+        <p className="text-xs text-text-secondary tabular-nums">
+          Selected: {selected.size === 0 ? '—' : [...selected].sort().join(', ')}
+        </p>
+      </div>
+
+      <div className="space-y-6">
+        <div>
+          <p className="text-[11px] uppercase tracking-wide text-text-muted mb-2 text-center">Upper arch</p>
+          <Row teeth={FDI_UPPER_LEFT_TO_RIGHT} />
+        </div>
+        <div className="border-t border-border/60 pt-4">
+          <p className="text-[11px] uppercase tracking-wide text-text-muted mb-2 text-center">Lower arch</p>
+          <Row teeth={FDI_LOWER_LEFT_TO_RIGHT} />
+        </div>
+      </div>
+    </div>
+  );
+}