From 35cd174c8b34f2765629ad65a9a6d997e61da4a8 Mon Sep 17 00:00:00 2001
From: taDuc <tranduc.wsp@gmail.com>
Date: Thu, 4 Jun 2026 19:49:25 +0700
Subject: [PATCH] feat: add replay button to TimelineBar and implement
 responsive search bar layout with 100svh height support

---
 src/app/page.tsx                              |  2 +-
 .../components/preview/PreviewMapShell.tsx    | 46 ++----------
 .../preview/PublicPreviewClientPage.tsx       | 56 +++++++++++----
 src/uhm/components/ui/TimelineBar.tsx         | 70 +++++++++++++++++++
 4 files changed, 118 insertions(+), 56 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 93fa387..d177664 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -20,7 +20,7 @@ const srOnlyStyle: React.CSSProperties = {
 
 export default function Page() {
     return (
-        <div style={{ position: "relative", width: "100%", height: "100vh", overflow: "hidden", backgroundColor: "#0b1220" }}>
+        <div style={{ position: "relative", width: "100%", height: "100svh", overflow: "hidden", backgroundColor: "#0b1220" }}>
             {/* Preload LCP image */}
             <link rel="preload" as="image" href="/images/map_placeholder.webp" fetchPriority="high" />
 
diff --git a/src/uhm/components/preview/PreviewMapShell.tsx b/src/uhm/components/preview/PreviewMapShell.tsx
index 3b7b2d8..ac1dd30 100644
--- a/src/uhm/components/preview/PreviewMapShell.tsx
+++ b/src/uhm/components/preview/PreviewMapShell.tsx
@@ -153,8 +153,8 @@ export default function PreviewMapShell({
     };
 
     return (
-        <div className="relative min-h-screen overflow-hidden bg-gray-950 text-gray-100">
-            <div className="relative min-h-screen">
+        <div className="relative overflow-hidden bg-gray-950 text-gray-100" style={{ minHeight: "100svh", height: "100svh" }}>
+            <div className="relative" style={{ minHeight: "100svh", height: "100svh" }}>
                 <Map
                     ref={mapHandleRef}
                     mode="preview"
@@ -175,6 +175,7 @@ export default function PreviewMapShell({
                     onPlayPreviewReplay={onPlayPreviewReplay}
                     onLoad={onLoad}
                     showViewportControls={false}
+                    height="100svh"
                 />
 
                 <TimelineBar
@@ -188,6 +189,7 @@ export default function PreviewMapShell({
                     filterEnabled={timelineFilterEnabled}
                     onFilterEnabledChange={onTimelineFilterEnabledChange}
                     style={timelineStyle}
+                    onPlayReplay={onPlayPreviewReplay}
                 />
 
                 <style dangerouslySetInnerHTML={{ __html: `
@@ -408,45 +410,7 @@ export default function PreviewMapShell({
                     )}
                 </aside>
 
-                {onPlayPreviewReplay ? (
-                    <button
-                        type="button"
-                        onClick={onPlayPreviewReplay}
-                        style={{
-                            position: "absolute",
-                            top: 10,
-                            right: 18,
-                            width: 46,
-                            height: 46,
-                            backgroundColor: "#1e293b",
-                            border: "1px solid rgba(56, 189, 248, 0.3)",
-                            borderRadius: "50%",
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            cursor: "pointer",
-                            color: "#38bdf8",
-                            transition: "all 0.2s ease",
-                            boxShadow: "0 4px 12px rgba(56, 189, 248, 0.15)",
-                            backdropFilter: "blur(8px)",
-                            zIndex: 22,
-                        }}
-                        title="Play replay của geometry đang chọn"
-                        aria-label="Play selected replay"
-                    >
-                        <span
-                            aria-hidden="true"
-                            style={{
-                                width: 0,
-                                height: 0,
-                                borderTop: "6px solid transparent",
-                                borderBottom: "6px solid transparent",
-                                borderLeft: "9px solid currentColor",
-                                marginLeft: "3px",
-                            }}
-                        />
-                    </button>
-                ) : null}
+
                 
                 {overlay}
 
diff --git a/src/uhm/components/preview/PublicPreviewClientPage.tsx b/src/uhm/components/preview/PublicPreviewClientPage.tsx
index 7c67883..467149e 100644
--- a/src/uhm/components/preview/PublicPreviewClientPage.tsx
+++ b/src/uhm/components/preview/PublicPreviewClientPage.tsx
@@ -404,6 +404,46 @@ export default function PublicPreviewClientPage({
         };
     }, [isLayerPanelVisible, displayedActiveEntity, isLargeScreen, sidebarWidth, sidebarHeight]);
 
+    const searchBarWidth = useMemo(() => {
+        if (isLargeScreen) {
+            return "min(392px, calc(100vw - 120px))";
+        }
+        if (isLayerPanelVisible) {
+            return `calc(100vw - 104px)`;
+        } else {
+            return `calc(100vw - 36px)`;
+        }
+    }, [isLargeScreen, isLayerPanelVisible]);
+
+    const searchBarWrapperStyle = useMemo(() => {
+        if (isLargeScreen) {
+            return {
+                position: "absolute" as const,
+                top: 10,
+                left: "50%",
+                transform: "translateX(-50%)",
+                right: "auto",
+                zIndex: 18,
+                display: "flex",
+                gap: "10px",
+                alignItems: "flex-start",
+                pointerEvents: "auto" as const,
+            };
+        }
+        return {
+            position: "absolute" as const,
+            top: 10,
+            left: "auto",
+            right: 18,
+            transform: "none",
+            zIndex: 18,
+            display: "flex",
+            gap: "10px",
+            alignItems: "flex-start",
+            pointerEvents: "auto" as const,
+        };
+    }, [isLargeScreen]);
+
     return (
         <>
             {isBackgroundVisibilityReady && loadInteractiveMap && (
@@ -470,19 +510,7 @@ export default function PublicPreviewClientPage({
                         ) : null
                     }
                 >
-                    <div
-                        style={{
-                            position: "absolute",
-                            top: 10,
-                            left: "50%",
-                            transform: "translateX(-50%)",
-                            zIndex: 18,
-                            display: "flex",
-                            gap: "10px",
-                            alignItems: "flex-start",
-                            pointerEvents: "auto",
-                        }}
-                    >
+                    <div style={searchBarWrapperStyle}>
                         <PresentPlaceSearch
                             focusedPlace={focusedPresentPlace}
                             onFocusPlace={handleFocusPresentPlace}
@@ -493,7 +521,7 @@ export default function PublicPreviewClientPage({
                                 top: 0,
                                 left: 0,
                                 transform: "none",
-                                width: "min(392px, calc(100vw - 120px))",
+                                width: searchBarWidth,
                             }}
                         />
                     </div>
diff --git a/src/uhm/components/ui/TimelineBar.tsx b/src/uhm/components/ui/TimelineBar.tsx
index f1d8984..75000b3 100644
--- a/src/uhm/components/ui/TimelineBar.tsx
+++ b/src/uhm/components/ui/TimelineBar.tsx
@@ -15,6 +15,7 @@ type Props = {
     filterEnabled?: boolean;
     onFilterEnabledChange?: (enabled: boolean) => void;
     style?: React.CSSProperties;
+    onPlayReplay?: () => void;
 };
 
 export default function TimelineBar({
@@ -28,6 +29,7 @@ export default function TimelineBar({
     filterEnabled,
     onFilterEnabledChange,
     style,
+    onPlayReplay,
 }: Props) {
     const lower = FIXED_TIMELINE_START_YEAR;
     const upper = FIXED_TIMELINE_END_YEAR;
@@ -272,6 +274,40 @@ export default function TimelineBar({
                     >
                         +
                     </button>
+
+                    {onPlayReplay ? (
+                        <>
+                            <div style={{ width: 1, height: 16, backgroundColor: "rgba(255, 255, 255, 0.15)" }} />
+                            <button
+                                type="button"
+                                onClick={onPlayReplay}
+                                style={{
+                                    width: 32,
+                                    height: 32,
+                                    borderRadius: "50%",
+                                    backgroundColor: "#2563eb",
+                                    border: "1px solid rgba(255, 255, 255, 0.2)",
+                                    color: "white",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    cursor: "pointer",
+                                    transition: "all 0.2s ease",
+                                    flexShrink: 0,
+                                }}
+                                title="Xem diễn biến lịch sử (Replay)"
+                            >
+                                <svg
+                                    width="14"
+                                    height="14"
+                                    viewBox="0 0 24 24"
+                                    fill="currentColor"
+                                >
+                                    <polygon points="5 3 19 12 5 21 5 3" />
+                                </svg>
+                            </button>
+                        </>
+                    ) : null}
                 </div>
 
                 {/* Ruler row below: full width */}
@@ -336,6 +372,7 @@ export default function TimelineBar({
                     maxYear={upper}
                     disabled={effectiveDisabled}
                 />
+
                 <div className={styles.numberWrapper}>
                     <input
                         type="number"
@@ -385,6 +422,39 @@ export default function TimelineBar({
                         </button>
                     </div>
                 </div>
+
+                {onPlayReplay ? (
+                    <button
+                        type="button"
+                        onClick={onPlayReplay}
+                        style={{
+                            width: 32,
+                            height: 32,
+                            borderRadius: "50%",
+                            backgroundColor: "#2563eb",
+                            border: "1px solid rgba(255, 255, 255, 0.2)",
+                            color: "white",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            cursor: "pointer",
+                            transition: "all 0.2s ease",
+                            marginLeft: 8,
+                            marginRight: 8,
+                            flexShrink: 0,
+                        }}
+                        title="Xem diễn biến lịch sử (Replay)"
+                    >
+                        <svg
+                            width="14"
+                            height="14"
+                            viewBox="0 0 24 24"
+                            fill="currentColor"
+                        >
+                            <polygon points="5 3 19 12 5 21 5 3" />
+                        </svg>
+                    </button>
+                ) : null}
                 {typeof timeRange === "number" && onTimeRangeChange ? (
                     <label
                         title="time_range (0-30)"