Accessing debug from settings

components/DebugView.tsx

@@ -9,6 +9,8 @@ interface DebugViewProps {
   promptInputs: PromptInput[];
   inferenceResults: InferenceResult[];
   nowPlayingResult: InferenceResult;
+  open: boolean ;
+  setOpen: (open: boolean) => void;
 }
 
 const ModalContainer = styled.div`
@@ -27,33 +29,16 @@ export default function DebugView({
   promptInputs,
   inferenceResults,
   nowPlayingResult,
+  open,
+  setOpen,
 }: DebugViewProps) {
-  const [open, setOpen] = useState(false);
-
-  let buttonClassName = "";
-  if (open) {
-    buttonClassName =
-      "fixed z-20 bottom-16 right-4 md:bottom-16 md:right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl";
-  } else {
-    buttonClassName =
-      "fixed z-20 bottom-16 right-4 md:bottom-16 md:right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl";
-  }
-
   return (
     <>
-      <button
-        title="Debug"
-        className={buttonClassName}
-        onClick={() => setOpen(true)}
-      >
-        <ImStatsBars />
-      </button>
-
       <Dialog
         open={open}
         onClose={() => setOpen(false)}
         as="div"
-        className="fixed inset-0 z-20"
+        className="fixed inset-0 z-30"
       >
         <ModalContainer>
           <div className="px-4 text-center text-sm whitespace-nowrap h-[40rem] w-[70rem] overflow-x-scroll">

components/Settings.tsx

@@ -1,7 +1,10 @@
 import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
 import { FiSettings } from "react-icons/fi";
+import { ImStatsBars } from "react-icons/im";
 import styled, { css } from "styled-components";
+import { InferenceResult, PromptInput } from "../types";
+import DebugView from "./DebugView";
 
 const ModalContainer = styled.div`
 position: absolute;
@@ -15,7 +18,17 @@ align-items: center;
 justify-content: center;
 `;
 
-export default function Settings() {
+interface DebugViewProps {
+  promptInputs: PromptInput[];
+  inferenceResults: InferenceResult[];
+  nowPlayingResult: InferenceResult;
+}
+
+export default function Settings({
+  promptInputs,
+  inferenceResults,
+  nowPlayingResult,
+}: DebugViewProps) {
   const [open, setOpen] = useState(false);
 
   var classNameCondition = ""
@@ -89,6 +102,12 @@ export default function Settings() {
 
                       {denoisingSelector()}
 
+                      {debugButton(
+                        promptInputs,
+                        inferenceResults,
+                        nowPlayingResult
+                      )}
+
                     </p>
                   </div>
 
@@ -178,3 +197,42 @@ export function denoisingSelector() {
     </div>
   )
 }
+
+export function debugButton(
+  promptInputs,
+  inferenceResults,
+  nowPlayingResult
+) {
+  let buttonClassName = "";
+  if (open) {
+    buttonClassName =
+      "fixed z-20 top-4 right-6 bg-sky-400 w-10 h-10 rounded-full flex justify-center items-center text-white text-xl hover:bg-sky-500 hover:drop-shadow-2xl";
+  } else {
+    buttonClassName =
+      "fixed z-20 top-4 right-6 bg-sky-100 w-10 h-10 rounded-full flex justify-center items-center text-sky-900 text-xl hover:text-white hover:bg-sky-500 hover:drop-shadow-2xl";
+  }
+
+  const [debugOpen, debugSetOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        title="Debug"
+        className={buttonClassName}
+        onClick={() => {
+          debugSetOpen(true);
+        }}
+      >
+        <ImStatsBars />
+      </button>
+
+      <DebugView
+        promptInputs={promptInputs}
+        inferenceResults={inferenceResults}
+        nowPlayingResult={nowPlayingResult}
+        open={debugOpen}
+        setOpen={debugSetOpen}
+      />
+    </>
+  );
+}

pages/index.tsx

@@ -243,15 +243,11 @@ export default function Home() {
           nowPlayingResult={nowPlayingResult}
         />
 
-        {/* <Info /> */}
-
-        <DebugView
+        <Settings 
           promptInputs={promptInputs} 
           inferenceResults={inferenceResults} 
           nowPlayingResult={nowPlayingResult} 
         />
-
-        <Settings />
       </div>
     </>
   );