all info menu to top of settings

frontend/src/pages/settings/core-info.tsx

@@ -0,0 +1,71 @@
+import { MonacoEditor } from "@components/monaco";
+import { CopyButton } from "@components/util";
+import { useRead } from "@lib/hooks";
+import { Button } from "@ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@ui/dialog";
+import { Input } from "@ui/input";
+import { Info, Loader2 } from "lucide-react";
+import { useState } from "react";
+
+export const CoreInfo = () => {
+  const info = useRead("GetCoreInfo", {}).data;
+  return (
+    <div className="flex gap-4 items-center flex-wrap">
+      <div className="font-mono bg-secondary px-2 py-1 rounded-md">
+        {info?.title}
+      </div>
+      |
+      <div className="flex gap-3 items-center justify-between">
+        Public Key
+        <Input
+          className="w-72 bg-secondary"
+          value={info?.public_key}
+          disabled
+        />
+        <CopyButton content={info?.public_key} />
+      </div>
+      |
+      <AllInfo />
+    </div>
+  );
+};
+
+const AllInfo = () => {
+  const [open, setOpen] = useState(false);
+  const info = useRead("GetCoreInfo", {}).data;
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="secondary"
+          size="icon"
+          className="flex gap-2 items-center"
+        >
+          <Info className="w-4 h-4" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="w-[900px] max-w-[95vw]">
+        <DialogHeader>
+          <DialogTitle>Core Info</DialogTitle>
+        </DialogHeader>
+        {info ? (
+          <MonacoEditor
+            value={JSON.stringify(info, undefined, 2)}
+            language="json"
+            readOnly
+          />
+        ) : (
+          <div className="w-full h-full flex justify-center items-center">
+            <Loader2 className="w-8 h-8 animate-spin" />
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

frontend/src/pages/settings/index.tsx

@@ -1,5 +1,5 @@
 import { lazy } from "react";
-import { useRead, useSettingsView, useUser } from "@lib/hooks";
+import { useSettingsView, useUser } from "@lib/hooks";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@ui/tabs";
 import { Page } from "@components/layouts";
 import { ExportButton } from "@components/export";
@@ -9,15 +9,13 @@ import { UsersPage } from "./users";
 import { Profile } from "./profile";
 import { ProvidersPage } from "./providers";
 import { Onboarding } from "./onboarding";
-import { Input } from "@ui/input";
-import { CopyButton } from "@components/util";
+import { CoreInfo } from "./core-info";
 
 const Resources = lazy(() => import("@pages/resources"));
 
 export default function Settings() {
   const user = useUser().data;
   const [view, setView] = useSettingsView();
-  const info = useRead("GetCoreInfo", {}).data;
   const currentView =
     (view === "Users" || view === "Providers") && !user?.admin
       ? "Variables"
@@ -25,21 +23,7 @@ export default function Settings() {
   return (
     <Page>
       <div className="flex flex-col gap-4">
-        <div className="flex gap-4 items-center flex-wrap">
-          <div className="font-mono bg-secondary px-2 py-1 rounded-md">
-            {info?.title}
-          </div>
-          |
-          <div className="flex gap-3 items-center justify-between">
-            Public Key
-            <Input
-              className="w-72 bg-secondary"
-              value={info?.public_key}
-              disabled
-            />
-            <CopyButton content={info?.public_key} />
-          </div>
-        </div>
+        <CoreInfo />
         <Tabs
           value={currentView}
           onValueChange={setView as any}