diff --git a/package-lock.json b/package-lock.json index af21257..90df296 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.34.tgz", - "integrity": "sha512-WRSgQU/OiERKBqpUIq95tgz1jKizM8fd28hottD4Ra8Z0gHkFZThxoVGad2pq96ha7U/Q/U+VEW+f+t4Z251rg==", + "version": "0.0.35", + "resolved": "file:../storybook/codex-storage-marketplace-ui-components-0.0.35.tgz", + "integrity": "sha512-wHh+oDRAt2NoIDxehzogDxowKEOwg6xxDHT3KkXfwawBhcmZIrfff9melJ4/hdAXRPo9IPTO/Zpi6Yj0KmlyWQ==", "dependencies": { "lucide-react": "^0.453.0" }, diff --git a/package.json b/package.json index 58b3f5f..6117fdc 100644 --- a/package.json +++ b/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", diff --git a/public/img/assistance.png b/public/img/assistance.png new file mode 100644 index 0000000..306c513 Binary files /dev/null and b/public/img/assistance.png differ diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx index abb52d2..91f7f40 100644 --- a/src/components/AppBar/AppBar.tsx +++ b/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 = { dashboard: , peers: , settings: , + files: , + logs: , }; const descriptions: Record = { - dashboard: "Get Overview of your Codex Vault", - peers: "Monitor your Codex peer connections", - settings: "Manage your Codex Vault", + dashboard: "Get Overview of your Codex Vault.", + peers: "Monitor your Codex peer connections.", + 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) { diff --git a/src/components/LogLevel/LogLevel.css b/src/components/LogLevel/LogLevel.css index a544411..86ad747 100644 --- a/src/components/LogLevel/LogLevel.css +++ b/src/components/LogLevel/LogLevel.css @@ -1,7 +1,26 @@ -.logLevel { +.log-level { flex-grow: 1; -} + display: flex; + gap: 16px; + margin-top: 14px; -.logLevel-select { - margin-bottom: 0.75rem; + > div { + 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; + } } diff --git a/src/components/LogLevel/LogLevel.tsx b/src/components/LogLevel/LogLevel.tsx index c2f3978..5e3926a 100644 --- a/src/components/LogLevel/LogLevel.tsx +++ b/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"], - ["TRACE", "TRACE"], - ["INFO", "INFO"], - ["NOTICE", "NOTICE"], - ["WARN", "WARN"], - ["ERROR", "ERROR"], - ["FATAL", "FATAL"], + ["DEBUG", "Debug"], + ["TRACE", "Trace"], + ["INFO", "Info"], + ["NOTICE", "Notice"], + ["WARN", "Warn"], + ["ERROR", "Error"], + ["FATAL", "Fatal"], ] satisfies [string, string][]; return ( - <> - +
+
+ + +
+ - +
); } diff --git a/src/components/LogLevel/SaveIcon.tsx b/src/components/LogLevel/SaveIcon.tsx new file mode 100644 index 0000000..d8ad9ea --- /dev/null +++ b/src/components/LogLevel/SaveIcon.tsx @@ -0,0 +1,15 @@ +export function SaveIcon() { + return ( + + + + ); +} diff --git a/src/components/RequireAssitance/RequireAssitance.css b/src/components/RequireAssitance/RequireAssitance.css new file mode 100644 index 0000000..0573a41 --- /dev/null +++ b/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; + } +} diff --git a/src/components/RequireAssitance/RequireAssitance.tsx b/src/components/RequireAssitance/RequireAssitance.tsx new file mode 100644 index 0000000..fc19870 --- /dev/null +++ b/src/components/RequireAssitance/RequireAssitance.tsx @@ -0,0 +1,20 @@ +import { DiscordIcon } from "../Welcome/DiscordIcon"; +import "./RequireAssitance.css"; + +export function RequireAssitance() { + return ( + +
Require Assistance?
+ + + +
+
Join Codex Discord
+ Get direct access to the Core Team. +
+ + ); +} diff --git a/src/components/Welcome/WelcomeCard.tsx b/src/components/Welcome/WelcomeCard.tsx index ee92998..d8a7ed2 100644 --- a/src/components/Welcome/WelcomeCard.tsx +++ b/src/components/Welcome/WelcomeCard.tsx @@ -62,7 +62,7 @@ export function WelcomeCard() { Learn more - + Join Codex Discord diff --git a/src/routes/dashboard/logs.css b/src/routes/dashboard/logs.css new file mode 100644 index 0000000..0bc65a6 --- /dev/null +++ b/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; + } + } +} diff --git a/src/routes/dashboard/logs.tsx b/src/routes/dashboard/logs.tsx index 2a08145..86be869 100644 --- a/src/routes/dashboard/logs.tsx +++ b/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: () =>
Hello /dashboard/logs!
, + component: () => { + const { data } = useDebug(throwOnError); + + const { table, ...rest } = data ?? {}; + + return ( +
+
+
+
Log level
+ + Manage the type of logs being displayed on your CLI for Codex + Node. + + +
+ +
+ +
+
+
+ +
Node
+
+
+
+ 
{JSON.stringify(rest, null, 2)}
+
+
+
+ ); + }, }); diff --git a/src/routes/dashboard/settings.tsx b/src/routes/dashboard/settings.tsx index 460c656..7b5c28c 100644 --- a/src/routes/dashboard/settings.tsx +++ b/src/routes/dashboard/settings.tsx @@ -82,31 +82,6 @@ export const Route = createFileRoute("/dashboard/settings")({ */} - - {/*
- - -
- -
- - -
*/} ), }); diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index bb5e7a0..1d3bb0f 100644 --- a/src/vite-env.d.ts +++ b/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 {