From 910c85b1c0f95df177ab8c8d60a8dfcde5fa7624 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 21 May 2024 13:06:17 -0500
Subject: [PATCH] Clean up config editor (#11474)

* clean up config editor

* remove unneeded size
---
 web/src/pages/ConfigEditor.tsx | 76 ++++++++++++++++++++--------------
 1 file changed, 46 insertions(+), 30 deletions(-)

diff --git a/web/src/pages/ConfigEditor.tsx b/web/src/pages/ConfigEditor.tsx
index d09c5ad68..ea89d32fb 100644
--- a/web/src/pages/ConfigEditor.tsx
+++ b/web/src/pages/ConfigEditor.tsx
@@ -11,6 +11,8 @@ import copy from "copy-to-clipboard";
 import { useTheme } from "@/context/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
+import { LuCopy, LuSave } from "react-icons/lu";
+import { MdOutlineRestartAlt } from "react-icons/md";
 
 type SaveOptions = "saveonly" | "restart";
 
@@ -69,6 +71,7 @@ function ConfigEditor() {
     }
 
     copy(editorRef.current.getValue());
+    toast.success("Config copied to clipboard.", { position: "top-center" });
   }, [editorRef]);
 
   useEffect(() => {
@@ -117,7 +120,6 @@ function ConfigEditor() {
 
     return () => {
       configRef.current = null;
-      editorRef.current = null;
       modelRef.current = null;
     };
   });
@@ -127,37 +129,51 @@ function ConfigEditor() {
   }
 
   return (
-    <div className="absolute bottom-16 left-0 right-0 top-2 md:left-2">
-      <div className="mr-1 justify-between lg:flex">
-        <Heading as="h2">Config</Heading>
-        <div>
-          <Button size="sm" className="mx-1" onClick={() => handleCopyConfig()}>
-            Copy Config
-          </Button>
-          <Button
-            size="sm"
-            className="mx-1"
-            onClick={() => onHandleSaveConfig("restart")}
-          >
-            Save & Restart
-          </Button>
-          <Button
-            size="sm"
-            className="mx-1"
-            onClick={() => onHandleSaveConfig("saveonly")}
-          >
-            Save Only
-          </Button>
+    <div className="absolute bottom-2 left-0 right-0 top-2 md:left-2">
+      <div className="relative h-full overflow-hidden">
+        <div className="mr-1 flex items-center justify-between">
+          <Heading as="h2" className="mb-0 ml-1 md:ml-0">
+            Config Editor
+          </Heading>
+          <div className="flex flex-row gap-1">
+            <Button
+              size="sm"
+              className="flex items-center gap-2"
+              onClick={() => handleCopyConfig()}
+            >
+              <LuCopy className="text-secondary-foreground" />
+              <span className="hidden md:block">Copy Config</span>
+            </Button>
+            <Button
+              size="sm"
+              className="flex items-center gap-2"
+              onClick={() => onHandleSaveConfig("restart")}
+            >
+              <div className="relative size-5">
+                <LuSave className="absolute left-0 top-0 size-3 text-secondary-foreground" />
+                <MdOutlineRestartAlt className="absolute size-4 translate-x-1 translate-y-1/2 text-secondary-foreground" />
+              </div>
+              <span className="hidden md:block">Save & Restart</span>
+            </Button>
+            <Button
+              size="sm"
+              className="flex items-center gap-2"
+              onClick={() => onHandleSaveConfig("saveonly")}
+            >
+              <LuSave className="text-secondary-foreground" />
+              <span className="hidden md:block">Save Only</span>
+            </Button>
+          </div>
         </div>
+
+        {error && (
+          <div className="mt-2 max-h-[30%] overflow-auto whitespace-pre-wrap border-2 border-muted bg-background_alt p-4 text-sm text-danger md:max-h-full">
+            {error}
+          </div>
+        )}
+
+        <div ref={configRef} className="mt-2 h-[calc(100%-2.75rem)]" />
       </div>
-
-      {error && (
-        <div className="overflow-scroll whitespace-pre-wrap p-4 text-danger">
-          {error}
-        </div>
-      )}
-
-      <div ref={configRef} className="mt-2 h-full" />
       <Toaster closeButton={true} />
     </div>
   );