Add debug component

src/components/Debug/Debug.tsx

@@ -1,34 +1,30 @@
 import { useQuery } from "@tanstack/react-query";
 import Loader from "../../assets/loader.svg";
 import { CodexSdk } from "../../sdk/codex";
-import { Card } from "@codex/marketplace-ui-components";
+import { Card, Spinner } from "@codex/marketplace-ui-components";
+import { Promises } from "../../utils/promises";
 
 export function Debug() {
   const { data, isPending } = useQuery({
-    queryFn: () => CodexSdk.debug().then((debug) => debug.info()),
+    queryFn: () =>
+      CodexSdk.debug()
+        .then((debug) => debug.info())
+        .then((s) => Promises.rejectOnError(s)),
     queryKey: ["debug"],
   });
 
   if (isPending) {
     return (
-      <Card title="Debug">
-        <img src={Loader} width={24} height={24} alt="Loader" />
-      </Card>
-    );
-  }
-
-  if (data?.error) {
-    // TODO display error
-    return (
-      <Card title="Debug">
-        <p>{data?.data.message || ""}</p>
-      </Card>
+      <div className="settings-debug-loader">
+        <Spinner width="3rem" />
+      </div>
     );
   }
 
   return (
-    <Card title="Debug">
+    <>
+      <h3>Debug</h3>
       <pre>{JSON.stringify(data, null, 2)}</pre>
-    </Card>
+    </>
   );
 }

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -46,8 +46,6 @@ export class ErrorBoundary extends React.Component<Props, State> {
       );
     }
 
-    console.info("couc");
-
     return this.props.children;
   }
 }

src/routes/dashboard/settings.css

@@ -16,3 +16,7 @@
 .settings-input {
   margin-bottom: 0.75rem;
 }
+
+.settings-debug-loader {
+  margin: auto;
+}

src/routes/dashboard/settings.tsx

@@ -3,6 +3,7 @@ import { ErrorBoundary } from "../../components/ErrorBoundary/ErrorBoundary";
 import "./settings.css";
 import { LogLevel } from "../../components/LogLevel/LogLevel";
 import { CodexUrlSettings } from "../../CodexUrllSettings/CodexUrlSettings";
+import { Debug } from "../../components/Debug/Debug";
 
 export const Route = createFileRoute("/dashboard/settings")({
   component: () => (
@@ -19,6 +20,12 @@ export const Route = createFileRoute("/dashboard/settings")({
         </ErrorBoundary>
       </div>
 
+      <div className="settings">
+        <ErrorBoundary card={true}>
+          <Debug />
+        </ErrorBoundary>
+      </div>
+
       {/* <div className="input-floating">
               <input
                 className="input input-floating-input"