finish refactor pre merge

components/TimelineBar.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { FIXED_TIMELINE_END_YEAR, FIXED_TIMELINE_START_YEAR, clampYearValue } from "@/lib/timeline";
+
 type Props = {
     year: number;
     onYearChange: (year: number) => void;
@@ -8,9 +10,6 @@ type Props = {
     statusText?: string | null;
 };
 
-const FIXED_TIMELINE_START_YEAR = -2000;
-const FIXED_TIMELINE_END_YEAR = 2000;
-
 export default function TimelineBar({
     year,
     onYearChange,
@@ -21,14 +20,14 @@ export default function TimelineBar({
     const lower = FIXED_TIMELINE_START_YEAR;
     const upper = FIXED_TIMELINE_END_YEAR;
     const effectiveDisabled = disabled;
-    const safeYear = clampYear(year, lower, upper);
+    const safeYear = clampYearValue(year, lower, upper);
 
     const helperText = isLoading
         ? "Đang tải geometry theo mốc thời gian..."
         : statusText || "Kéo thanh hoặc nhập số năm để query chính xác.";
 
     const handleYearChange = (nextYear: number) => {
-        onYearChange(clampYear(Math.trunc(nextYear), lower, upper));
+        onYearChange(clampYearValue(Math.trunc(nextYear), lower, upper));
     };
 
     return (
@@ -75,22 +74,22 @@ export default function TimelineBar({
                     gap: "10px",
                 }}
             >
-            <input
-                type="range"
-                min={lower}
-                max={upper}
-                step={1}
-                value={safeYear}
+                <input
+                    type="range"
+                    min={lower}
+                    max={upper}
+                    step={1}
+                    value={safeYear}
                     onChange={(event) => handleYearChange(Number(event.target.value))}
-                disabled={effectiveDisabled}
-                aria-label="Timeline year"
-                style={{
-                    width: "100%",
-                    accentColor: "#22c55e",
-                    cursor: effectiveDisabled ? "not-allowed" : "pointer",
-                    opacity: effectiveDisabled ? 0.6 : 1,
-                }}
-            />
+                    disabled={effectiveDisabled}
+                    aria-label="Timeline year"
+                    style={{
+                        width: "100%",
+                        accentColor: "#22c55e",
+                        cursor: effectiveDisabled ? "not-allowed" : "pointer",
+                        opacity: effectiveDisabled ? 0.6 : 1,
+                    }}
+                />
                 <input
                     type="number"
                     min={lower}
@@ -133,12 +132,6 @@ export default function TimelineBar({
     );
 }
 
-function clampYear(year: number, minYear: number, maxYear: number): number {
-    if (year < minYear) return minYear;
-    if (year > maxYear) return maxYear;
-    return year;
-}
-
 function formatYear(year: number): string {
     if (year < 0) {
         return `${Math.abs(year)} TCN`;