From 2cfc042724a8b5bcd420735d306b7eaa4fcd78ea Mon Sep 17 00:00:00 2001
From: "Ishan S. Patel" <ispatel@live.com>
Date: Sat, 7 Mar 2026 11:41:53 -0500
Subject: [PATCH] YACWC

---
 SearchFrontend/search_ui/src/App.jsx | 160 +++++++++++++++++----------
 1 file changed, 99 insertions(+), 61 deletions(-)

diff --git a/SearchFrontend/search_ui/src/App.jsx b/SearchFrontend/search_ui/src/App.jsx
index 58c9293..13622ca 100644
--- a/SearchFrontend/search_ui/src/App.jsx
+++ b/SearchFrontend/search_ui/src/App.jsx
@@ -601,17 +601,29 @@ function App() {
                 </div>
             )}
 
-            <div className="controls-section">
-                <div className="control-group">
+            <div className="controls-section" style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "16px",
+                flexWrap: "wrap",
+                padding: "12px 16px"
+            }}>
+                <div className="control-group" style={{ margin: 0 }}>
                     <button
                         className="drawer-toggle"
                         onClick={() => setDrawerOpen(!drawerOpen)}
+                        style={{
+                            padding: "8px 12px",
+                            fontSize: "0.9em",
+                            minWidth: "70px"
+                        }}
                     >
                         {drawerOpen ? "✕" : "Options"}
                     </button>
                 </div>
 
-                <div className="control-group">
+                <div className="control-group" style={{ margin: 0, flexShrink: 0 }}>
                     <CustomDateRangePicker
                         startDate={startRange}
                         endDate={endRange}
@@ -619,7 +631,8 @@ function App() {
                         setEndRange={setEndRange}
                     />
                 </div>
-                <div className="control-group">
+
+                <div className="control-group" style={{ margin: 0, flex: "1 1 200px", minWidth: "200px" }}>
                     <input
                         type="text"
                         placeholder="Enter query"
@@ -629,23 +642,27 @@ function App() {
                             if (e.key === "Enter") handleResubmit();
                         }}
                         style={{
-                            //     padding: "8px",
-                            //     borderRadius: "4px",
-                            //     border: "1px solid #343a40",
-                            //     color: "#fff",
-                            //     backgroundColor: "#23272f",
-                            //     width: "100%",
-                            //     minWidth: 0,
-                            //     boxSizing: "border-box",
-                            fontSize: "1.1em",
-                            //     transition: "width 0.2s",
+                            padding: "8px 12px",
+                            borderRadius: "4px",
+                            border: "1px solid #343a40",
+                            color: "#fff",
+                            backgroundColor: "#1a1d23",
+                            width: "100%",
+                            boxSizing: "border-box",
+                            fontSize: "0.9em"
                         }}
                         ref={inputRef}
-                        size={Math.max(queryText.length, 25)}
                     />
                 </div>
 
-                <div className="control-group">
+                <div className="control-group" style={{ 
+                    margin: 0, 
+                    display: "flex", 
+                    alignItems: "center", 
+                    gap: "6px",
+                    color: "#fff",
+                    fontSize: "0.9em"
+                }}>
                     <input
                         type="checkbox"
                         name="do_high_res"
@@ -657,24 +674,16 @@ function App() {
                             )
                         }
                     />
-                    HD Video
+                    <span>HD Video</span>
                 </div>
-                <div
-                    className="control-group"
-                    style={{ visibility: queryChanged ? "hidden" : "visible" }}
-                >
-                    <label style={{ color: "#fff" }}>Threshold:</label>
-                </div>
-                <div
-                    className="control-group"
-                    style={{
-                        display: "inline-block",
-                        verticalAlign: "middle",
-                        margin: "0 8px",
-                        width: "120px",
-                        visibility: queryChanged ? "hidden" : "visible",
-                    }}
-                >
+
+                <div style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px",
+                    visibility: queryChanged ? "hidden" : "visible"
+                }}>
+                    <label style={{ color: "#fff", fontSize: "0.9em", whiteSpace: "nowrap" }}>Threshold:</label>
                     <input
                         type="range"
                         min={sliderMin}
@@ -683,47 +692,76 @@ function App() {
                         value={sliderValue}
                         onChange={(e) => updateDataAndValue(e.target.value)}
                         style={{
-                            width: "100%",
-                            color: "#fff",
-                            backgroundColor: "#23272f",
-                            minWidth: 0,
+                            width: "100px",
+                            margin: "0 4px"
                         }}
                     />
-                </div>
-                <div
-                    className="control-group"
-                    style={{ visibility: queryChanged ? "hidden" : "visible" }}
-                >
-                    <span style={{ color: "#fff" }}>
+                    <span style={{ 
+                        color: "#fff", 
+                        fontSize: "0.9em", 
+                        minWidth: "40px",
+                        textAlign: "right" 
+                    }}>
                         {sliderValue.toFixed(2)}
                     </span>
                 </div>
-                <div
-                    className="control-group"
-                    style={{ visibility: queryChanged ? "visible" : "hidden" }}
-                >
+
+                <div className="control-group" style={{
+                    margin: 0,
+                    visibility: queryChanged ? "visible" : "hidden"
+                }}>
                     <button
                         onClick={handleResubmit}
                         style={{
-                            width: "100%",
-                            padding: "12px 0",
-                            fontSize: "1.1em",
-                            marginTop: "8px",
+                            padding: "8px 16px",
+                            fontSize: "0.9em",
+                            backgroundColor: "#007acc",
+                            color: "white",
+                            border: "none",
+                            borderRadius: "4px",
+                            cursor: "pointer"
                         }}
                     >
                         Resubmit
                     </button>
                 </div>
-                {videoPlaying && (
-                    <div className="control-group">
-                        <button onClick={() => window.open("api/media_download/low")}>Download Low-Res</button>
-                    </div>
-                )}
-                {videoPlaying && (
-                    <div className="control-group">
-                        <button onClick={() => window.open("api/media_download/high")}>Download High-Res</button>
-                    </div>
-                )}		
+
+                <div className="control-group" style={{ margin: 0 }}>
+                    <button 
+                        onClick={videoPlaying ? () => window.open("api/media_download/low") : undefined}
+                        disabled={!videoPlaying}
+                        style={{
+                            padding: "6px 10px",
+                            fontSize: "0.8em",
+                            backgroundColor: videoPlaying ? "#28a745" : "#6c757d",
+                            color: videoPlaying ? "white" : "#adb5bd",
+                            border: "none",
+                            borderRadius: "4px",
+                            cursor: videoPlaying ? "pointer" : "not-allowed",
+                            opacity: videoPlaying ? 1 : 0.6
+                        }}
+                    >
+                        DL Low-Res
+                    </button>
+                </div>
+                <div className="control-group" style={{ margin: 0 }}>
+                    <button 
+                        onClick={videoPlaying ? () => window.open("api/media_download/high") : undefined}
+                        disabled={!videoPlaying}
+                        style={{
+                            padding: "6px 10px",
+                            fontSize: "0.8em",
+                            backgroundColor: videoPlaying ? "#17a2b8" : "#6c757d",
+                            color: videoPlaying ? "white" : "#adb5bd",
+                            border: "none",
+                            borderRadius: "4px",
+                            cursor: videoPlaying ? "pointer" : "not-allowed",
+                            opacity: videoPlaying ? 1 : 0.6
+                        }}
+                    >
+                        DL High-Res
+                    </button>
+                </div>		
             </div>
 
             <div className="status-section">