Add logs page

package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.0.7",
       "license": "MIT",
       "dependencies": {
-        "@codex-storage/marketplace-ui-components": "^0.0.34",
+        "@codex-storage/marketplace-ui-components": "^0.0.35",
         "@codex-storage/sdk-js": "^0.0.15",
         "@sentry/browser": "^8.32.0",
         "@sentry/react": "^8.31.0",
@@ -379,9 +379,9 @@
       "peer": true
     },
     "node_modules/@codex-storage/marketplace-ui-components": {
-      "version": "0.0.34",
+      "version": "0.0.35",
-      "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.34.tgz",
+      "resolved": "file:../storybook/codex-storage-marketplace-ui-components-0.0.35.tgz",
-      "integrity": "sha512-WRSgQU/OiERKBqpUIq95tgz1jKizM8fd28hottD4Ra8Z0gHkFZThxoVGad2pq96ha7U/Q/U+VEW+f+t4Z251rg==",
+      "integrity": "sha512-wHh+oDRAt2NoIDxehzogDxowKEOwg6xxDHT3KkXfwawBhcmZIrfff9melJ4/hdAXRPo9IPTO/Zpi6Yj0KmlyWQ==",
       "dependencies": {
         "lucide-react": "^0.453.0"
       },

package.json

@@ -25,7 +25,7 @@
     "React"
   ],
   "dependencies": {
-    "@codex-storage/marketplace-ui-components": "^0.0.34",
+    "@codex-storage/marketplace-ui-components": "^0.0.35",
     "@codex-storage/sdk-js": "^0.0.15",
     "@sentry/browser": "^8.32.0",
     "@sentry/react": "^8.31.0",

src/components/AppBar/AppBar.tsx

@@ -11,6 +11,8 @@ import { usePersistence } from "../../hooks/usePersistence";
 import { useLocation, useNavigate } from "@tanstack/react-router";
 import { PeersIcon } from "../Menu/PeersIcon";
 import { SettingsIcon } from "../Menu/SettingsIcon";
+import { FilesIcon } from "../FilesIcon/FilesIcon";
+import { LogsIcon } from "../Menu/LogsIcon";
 
 type Props = {
   onIconClick: () => void;
@@ -20,12 +22,16 @@ const icons: Record<string, ReactElement> = {
   dashboard: <DashboardIcon />,
   peers: <PeersIcon />,
   settings: <SettingsIcon />,
+  files: <FilesIcon />,
+  logs: <LogsIcon />,
 };
 
 const descriptions: Record<string, string> = {
-  dashboard: "Get Overview of your Codex Vault",
+  dashboard: "Get Overview of your Codex Vault.",
-  peers: "Monitor your Codex peer connections",
+  peers: "Monitor your Codex peer connections.",
-  settings: "Manage your Codex Vault",
+  settings: "Manage your Codex Vault.",
+  files: "Manage your files in your local vault.",
+  logs: "Manage your logs and debug console.",
 };
 
 export function AppBar({ onIconClick }: Props) {

src/components/LogLevel/LogLevel.css

@@ -1,7 +1,26 @@
-.logLevel {
+.log-level {
   flex-grow: 1;
-}
+  display: flex;
+  gap: 16px;
+  margin-top: 14px;
 
-.logLevel-select {
+  > div {
-  margin-bottom: 0.75rem;
+    position: relative;
+
+    svg {
+      position: absolute;
+      top: 12px;
+      left: 16px;
+      color: #969696;
+    }
+  }
+
+  .select {
+    background-position: url(/icons/logs.svg);
+  }
+
+  select {
+    border-color: #969696;
+    padding-left: 40px;
+  }
 }

src/components/LogLevel/LogLevel.tsx

@@ -9,6 +9,8 @@ import {
   Toast,
 } from "@codex-storage/marketplace-ui-components";
 import { Promises } from "../../utils/promises";
+import { LogsIcon } from "../Menu/LogsIcon";
+import { SaveIcon } from "./SaveIcon";
 
 export function LogLevel() {
   const queryClient = useQueryClient();
@@ -52,34 +54,39 @@ export function LogLevel() {
   };
 
   const levels = [
-    ["DEBUG", "DEBUG"],
+    ["DEBUG", "Debug"],
-    ["TRACE", "TRACE"],
+    ["TRACE", "Trace"],
-    ["INFO", "INFO"],
+    ["INFO", "Info"],
-    ["NOTICE", "NOTICE"],
+    ["NOTICE", "Notice"],
-    ["WARN", "WARN"],
+    ["WARN", "Warn"],
-    ["ERROR", "ERROR"],
+    ["ERROR", "Error"],
-    ["FATAL", "FATAL"],
+    ["FATAL", "Fatal"],
   ] satisfies [string, string][];
 
   return (
-    <>
+    <div className="log-level">
-      <Select
+      <div>
-        className="logLevel-select"
+        <Select
-        id="level"
+          id="level"
-        label="Log level"
+          label=""
-        options={levels}
+          options={levels}
-        value={level}
+          value={level}
-        onChange={onChange}></Select>
+          onChange={onChange}></Select>
+        <LogsIcon></LogsIcon>
+      </div>
+
       <Button
-        variant="primary"
+        variant="outline"
-        label="Save changes"
+        label="Save"
+        Icon={SaveIcon}
         fetching={isPending}
+        size="small"
         onClick={onClick}></Button>
       <Toast
         message={toast.message}
         time={toast.time}
         variant={toast.variant}
       />
-    </>
+    </div>
   );
 }

src/components/LogLevel/SaveIcon.tsx

@@ -0,0 +1,15 @@
+export function SaveIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M11.5 13.75V7.75H2.5V13.75H1C0.801088 13.75 0.610322 13.671 0.46967 13.5303C0.329018 13.3897 0.25 13.1989 0.25 13V1C0.25 0.801088 0.329018 0.610322 0.46967 0.46967C0.610322 0.329018 0.801088 0.25 1 0.25H10.75L13.75 3.25V13C13.75 13.1989 13.671 13.3897 13.5303 13.5303C13.3897 13.671 13.1989 13.75 13 13.75H11.5ZM10 13.75H4V9.25H10V13.75Z"
+        fill="#99A0AE"
+      />
+    </svg>
+  );
+}

src/components/RequireAssitance/RequireAssitance.css

@@ -0,0 +1,38 @@
+.require-assistance {
+  background-color: #0a1410;
+  box-sizing: border-box;
+  padding: 16px;
+  border-radius: 16px;
+  border-left: 4px solid #6ccc93;
+  height: 144px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  background-image: url(/img/assistance.png);
+  background-position: right;
+  background-repeat: no-repeat;
+  width: 500px;
+  flex: 1 1 auto;
+  cursor: pointer;
+  text-decoration: none;
+
+  h5 {
+    font-family: Azeret Mono;
+    font-size: 10px;
+    font-weight: 400;
+    line-height: 20px;
+    text-align: left;
+    color: #6ccc93;
+  }
+
+  h6 {
+    font-family: Inter;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 19.36px;
+    letter-spacing: 0.01em;
+    text-align: left;
+    color: #7bfbaf;
+    margin-bottom: 4px;
+  }
+}

src/components/RequireAssitance/RequireAssitance.tsx

@@ -0,0 +1,20 @@
+import { DiscordIcon } from "../Welcome/DiscordIcon";
+import "./RequireAssitance.css";
+
+export function RequireAssitance() {
+  return (
+    <a
+      href={import.meta.env.VITE_DISCORD_LINK}
+      className="require-assistance"
+      target="_blank">
+      <h5>Require Assistance?</h5>
+
+      <DiscordIcon></DiscordIcon>
+
+      <div>
+        <h6>Join Codex Discord</h6>
+        <small>Get direct access to the Core Team.</small>
+      </div>
+    </a>
+  );
+}

src/components/Welcome/WelcomeCard.tsx

@@ -62,7 +62,7 @@ export function WelcomeCard() {
             <Link to="/dashboard/help" className="welcome-link">
               Learn more<ArrowRight></ArrowRight>
             </Link>
-            <a href="">
+            <a href={import.meta.env.VITE_DISCORD_LINK}>
               <DiscordIcon></DiscordIcon>
               Join Codex Discord
             </a>

src/routes/dashboard/logs.css

@@ -0,0 +1,49 @@
+.logs-card {
+  display: flex;
+  justify-content: space-between;
+  border: 1px solid #96969633;
+  border-radius: 16px;
+  margin-bottom: 16px;
+
+  > div:first-child {
+    padding: 16px;
+  }
+
+  h5 {
+    font-family: Inter;
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: -0.015em;
+    text-align: left;
+    margin-bottom: 16px;
+  }
+
+  small {
+    font-family: Inter;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+    text-align: left;
+    color: #969696cc;
+  }
+
+  .button {
+    width: 187px;
+    gap: 8px;
+  }
+}
+
+.logs {
+  .node {
+    pre {
+      font-family: Inter;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      letter-spacing: -0.011em;
+      text-align: left;
+      color: #757575;
+    }
+  }
+}

src/routes/dashboard/logs.tsx

@@ -1,5 +1,44 @@
 import { createFileRoute } from "@tanstack/react-router";
+import "./logs.css";
+import { RequireAssitance } from "../../components/RequireAssitance/RequireAssitance";
+import { LogLevel } from "../../components/LogLevel/LogLevel";
+import { LogsIcon } from "../../components/Menu/LogsIcon";
+import { useDebug } from "../../hooks/useDebug";
+
+const throwOnError = false;
 
 export const Route = createFileRoute("/dashboard/logs")({
-  component: () => <div>Hello /dashboard/logs!</div>,
+  component: () => {
+    const { data } = useDebug(throwOnError);
+
+    const { table, ...rest } = data ?? {};
+
+    return (
+      <div className="logs">
+        <div className="logs-card">
+          <div>
+            <h5>Log level</h5>
+            <small>
+              Manage the type of logs being displayed on your CLI for Codex
+              Node.
+            </small>
+            <LogLevel></LogLevel>
+          </div>
+          <RequireAssitance></RequireAssitance>
+        </div>
+
+        <div className="card node">
+          <header>
+            <div>
+              <LogsIcon></LogsIcon>
+              <h5>Node</h5>
+            </div>
+          </header>
+          <main>
+            <pre>{JSON.stringify(rest, null, 2)}</pre>
+          </main>
+        </div>
+      </div>
+    );
+  },
 });

src/routes/dashboard/settings.tsx

@@ -82,31 +82,6 @@ export const Route = createFileRoute("/dashboard/settings")({
           <Debug />
         </ErrorBoundary>
       </div> */}
-
-      {/* <div className="input-floating">
-              <input
-                className="input input-floating-input"
-                id="input-floating"
-                placeholder=""
-              />
-              <label className="input-floating-label" htmlFor="input-floating">
-                Floating
-              </label>
-            </div>
-
-            <div className="input-floating">
-              <input
-                className="input input-floating-input"
-                id="input-floating-with-value"
-                placeholder=""
-                value="Some value"
-              />
-              <label
-                className="input-floating-label"
-                htmlFor="input-floating-with-value">
-                Floating
-              </label>
-            </div> */}
     </div>
   ),
 });

src/vite-env.d.ts

@@ -3,6 +3,7 @@
 interface ImportMetaEnv {
   VITE_CODEX_API_URL: string;
   VITE_GEO_IP_URL: string;
+  VITE_DISCORD_LINK: string;
 }
 
 interface ImportMeta {