From d09784f24e1e724b5587ec3533167eead518643d Mon Sep 17 00:00:00 2001
From: Adam Shiervani <adam.shiervani@gmail.com>
Date: Tue, 15 Jul 2025 21:49:20 +0200
Subject: [PATCH 1/2] feat(ui): Enhance EDID settings with loading state and
 Fieldset component

---
 ui/src/routes/devices.$id.settings.video.tsx | 113 ++++++++++---------
 1 file changed, 61 insertions(+), 52 deletions(-)

diff --git a/ui/src/routes/devices.$id.settings.video.tsx b/ui/src/routes/devices.$id.settings.video.tsx
index 9e888ab..ace443a 100644
--- a/ui/src/routes/devices.$id.settings.video.tsx
+++ b/ui/src/routes/devices.$id.settings.video.tsx
@@ -8,6 +8,7 @@ import { useSettingsStore } from "@/hooks/stores";
 
 import notifications from "../notifications";
 import { SelectMenuBasic } from "../components/SelectMenuBasic";
+import Fieldset from "../components/Fieldset";
 
 import { SettingsItem } from "./devices.$id.settings";
 const defaultEdid =
@@ -45,6 +46,7 @@ export default function SettingsVideoRoute() {
   const [streamQuality, setStreamQuality] = useState("1");
   const [customEdidValue, setCustomEdidValue] = useState<string | null>(null);
   const [edid, setEdid] = useState<string | null>(null);
+  const [edidLoading, setEdidLoading] = useState(false);
 
   // Video enhancement settings from store
   const videoSaturation = useSettingsStore(state => state.videoSaturation);
@@ -55,12 +57,14 @@ export default function SettingsVideoRoute() {
   const setVideoContrast = useSettingsStore(state => state.setVideoContrast);
 
   useEffect(() => {
+    setEdidLoading(true);
     send("getStreamQualityFactor", {}, resp => {
       if ("error" in resp) return;
       setStreamQuality(String(resp.result));
     });
 
     send("getEDID", {}, resp => {
+      setEdidLoading(false);
       if ("error" in resp) {
         notifications.error(`Failed to get EDID: ${resp.error.data || "Unknown error"}`);
         return;
@@ -99,7 +103,9 @@ export default function SettingsVideoRoute() {
   };
 
   const handleEDIDChange = (newEdid: string) => {
+    setEdidLoading(true);
     send("setEDID", { edid: newEdid }, resp => {
+      setEdidLoading(false);
       if ("error" in resp) {
         notifications.error(`Failed to set EDID: ${resp.error.data || "Unknown error"}`);
         return;
@@ -141,7 +147,7 @@ export default function SettingsVideoRoute() {
               title="Video Enhancement"
               description="Adjust color settings to make the video output more vibrant and colorful"
             />
-            
+
             <div className="space-y-4 pl-4">
               <SettingsItem
                 title="Saturation"
@@ -202,59 +208,62 @@ export default function SettingsVideoRoute() {
               </div>
             </div>
 
-            <SettingsItem
-              title="EDID"
-              description="Adjust the EDID settings for the display"
-            >
-              <SelectMenuBasic
-                size="SM"
-                label=""
-                fullWidth
-                value={customEdidValue ? "custom" : edid || "asd"}
-                onChange={e => {
-                  if (e.target.value === "custom") {
-                    setEdid("custom");
-                    setCustomEdidValue("");
-                  } else {
-                    setCustomEdidValue(null);
-                    handleEDIDChange(e.target.value as string);
-                  }
-                }}
-                options={[...edids, { value: "custom", label: "Custom" }]}
-              />
-            </SettingsItem>
-            {customEdidValue !== null && (
-              <>
-                <SettingsItem
-                  title="Custom EDID"
-                  description="EDID details video mode compatibility. Default settings works in most cases, but unique UEFI/BIOS might need adjustments."
-                />
-                <TextAreaWithLabel
-                  label="EDID File"
-                  placeholder="00F..."
-                  rows={3}
-                  value={customEdidValue}
-                  onChange={e => setCustomEdidValue(e.target.value)}
-                />
-                <div className="flex justify-start gap-x-2">
-                  <Button
-                    size="SM"
-                    theme="primary"
-                    text="Set Custom EDID"
-                    onClick={() => handleEDIDChange(customEdidValue)}
-                  />
-                  <Button
-                    size="SM"
-                    theme="light"
-                    text="Restore to default"
-                    onClick={() => {
+            <Fieldset disabled={edidLoading}>
+              <SettingsItem
+                title="EDID"
+                description="Adjust the EDID settings for the display"
+                loading={edidLoading}
+              >
+                <SelectMenuBasic
+                  size="SM"
+                  label=""
+                  fullWidth
+                  value={customEdidValue ? "custom" : edid || "asd"}
+                  onChange={e => {
+                    if (e.target.value === "custom") {
+                      setEdid("custom");
+                      setCustomEdidValue("");
+                    } else {
                       setCustomEdidValue(null);
-                      handleEDIDChange(defaultEdid);
-                    }}
+                      handleEDIDChange(e.target.value as string);
+                    }
+                  }}
+                  options={[...edids, { value: "custom", label: "Custom" }]}
+                />
+              </SettingsItem>
+              {customEdidValue !== null && (
+                <>
+                  <SettingsItem
+                    title="Custom EDID"
+                    description="EDID details video mode compatibility. Default settings works in most cases, but unique UEFI/BIOS might need adjustments."
                   />
-                </div>
-              </>
-            )}
+                  <TextAreaWithLabel
+                    label="EDID File"
+                    placeholder="00F..."
+                    rows={3}
+                    value={customEdidValue}
+                    onChange={e => setCustomEdidValue(e.target.value)}
+                  />
+                  <div className="flex justify-start gap-x-2">
+                    <Button
+                      size="SM"
+                      theme="primary"
+                      text="Set Custom EDID"
+                      onClick={() => handleEDIDChange(customEdidValue)}
+                    />
+                    <Button
+                      size="SM"
+                      theme="light"
+                      text="Restore to default"
+                      onClick={() => {
+                        setCustomEdidValue(null);
+                        handleEDIDChange(defaultEdid);
+                      }}
+                    />
+                  </div>
+                </>
+              )}
+            </Fieldset>
           </div>
         </div>
       </div>

From fecd40b45dbe6cf5b2c498a57e4e27be0ff5dfcb Mon Sep 17 00:00:00 2001
From: Adam Shiervani <adam.shiervani@gmail.com>
Date: Tue, 15 Jul 2025 21:54:54 +0200
Subject: [PATCH 2/2] fix(ui): Improve notifications and adjust styling in
 custom EDID component

---
 ui/src/routes/devices.$id.settings.video.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/ui/src/routes/devices.$id.settings.video.tsx b/ui/src/routes/devices.$id.settings.video.tsx
index ace443a..f0485ef 100644
--- a/ui/src/routes/devices.$id.settings.video.tsx
+++ b/ui/src/routes/devices.$id.settings.video.tsx
@@ -97,7 +97,9 @@ export default function SettingsVideoRoute() {
         return;
       }
 
-      notifications.success(`Stream quality set to ${streamQualityOptions.find(x => x.value === factor)?.label}`);
+      notifications.success(
+        `Stream quality set to ${streamQualityOptions.find(x => x.value === factor)?.label}`,
+      );
       setStreamQuality(factor);
     });
   };
@@ -112,7 +114,7 @@ export default function SettingsVideoRoute() {
       }
 
       notifications.success(
-        `EDID set successfully to ${edids.find(x => x.value === newEdid)?.label}`,
+        `EDID set successfully to ${edids.find(x => x.value === newEdid)?.label || "custom"}`,
       );
       // Update the EDID value in the UI
       setEdid(newEdid);
@@ -160,7 +162,7 @@ export default function SettingsVideoRoute() {
                   step="0.1"
                   value={videoSaturation}
                   onChange={e => setVideoSaturation(parseFloat(e.target.value))}
-                  className="w-32 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+                  className="h-2 w-32 cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
                 />
               </SettingsItem>
 
@@ -175,7 +177,7 @@ export default function SettingsVideoRoute() {
                   step="0.1"
                   value={videoBrightness}
                   onChange={e => setVideoBrightness(parseFloat(e.target.value))}
-                  className="w-32 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+                  className="h-2 w-32 cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
                 />
               </SettingsItem>
 
@@ -190,7 +192,7 @@ export default function SettingsVideoRoute() {
                   step="0.1"
                   value={videoContrast}
                   onChange={e => setVideoContrast(parseFloat(e.target.value))}
-                  className="w-32 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+                  className="h-2 w-32 cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
                 />
               </SettingsItem>
 
@@ -208,7 +210,7 @@ export default function SettingsVideoRoute() {
               </div>
             </div>
 
-            <Fieldset disabled={edidLoading}>
+            <Fieldset disabled={edidLoading} className="space-y-4">
               <SettingsItem
                 title="EDID"
                 description="Adjust the EDID settings for the display"
@@ -249,12 +251,14 @@ export default function SettingsVideoRoute() {
                       size="SM"
                       theme="primary"
                       text="Set Custom EDID"
+                      loading={edidLoading}
                       onClick={() => handleEDIDChange(customEdidValue)}
                     />
                     <Button
                       size="SM"
                       theme="light"
                       text="Restore to default"
+                      loading={edidLoading}
                       onClick={() => {
                         setCustomEdidValue(null);
                         handleEDIDChange(defaultEdid);