feat: add collapsible console log in footer

#25

Author: xendarboh

src/App.tsx

@@ -37,15 +37,15 @@ function App() {
 
   return (
     <MemoryRouter>
-      <div className="flex flex-col min-h-screen">
+      <div className="flex flex-col min-h-screen gap-y-4">
         <Header />
-        <main className="flex-grow mt-10">
+        <main className="flex-grow flex flex-col gap-y-4">
           <Routes>
             <Route path="/" element={<Networks />} />
             <Route path="/settings" element={<Settings />} />
           </Routes>
+          <Message />
         </main>
-        <Message />
         <Footer />
       </div>
     </MemoryRouter>

src/components/Footer.tsx

@@ -1,16 +1,40 @@
+import { useState } from "react";
 import { useStore } from "../store";
+import { IconCommandLine } from ".";
 
 export function Footer() {
+  const [collapsed, setCollapsed] = useState(true as boolean);
+
   const appVersion = useStore((s) => s.appVersion);
   const platformArch = useStore((s) => s.platformArch);
+  const consoleLines = useStore((s) => s.consoleLines);
+
   return (
-    <footer className="footer footer-center bg-base-200 text-base-content/30 p-4">
-      <div className="flex flex-row">
-        <span>ZKNetwork Client</span>
-        <span className="mx-2">|</span>
-        <span>Version: {appVersion}</span>
-        <span className="mx-2">|</span>
-        <span>Platform: {platformArch}</span>
+    <footer
+      tabIndex={0}
+      className="collapse-arrow collapse bg-base-200 text-base-content/30 border-t border-base-300 rounded-none"
+    >
+      <input
+        type="checkbox"
+        checked={!collapsed}
+        onChange={() => setCollapsed(!collapsed)}
+      />
+      <div className="collapse-title flex w-full items-center">
+        <IconCommandLine />
+        <div className="mx-auto flex gap-x-4 text-sm">
+          <span>ZKNetwork Client</span>
+          <span>|</span>
+          <span>Version: {appVersion}</span>
+          <span>|</span>
+          <span>Platform: {platformArch}</span>
+        </div>
+      </div>
+      <div className="collapse-content border-t border-base-300 px-4">
+        <div className="flex h-36 flex-col-reverse overflow-y-scroll text-xs sm:text-xs md:text-sm lg:text-base text-base-content/50">
+          {consoleLines.map((v, i) => (
+            <span key={i}>{v}</span>
+          ))}
+        </div>
       </div>
     </footer>
   );

src/components/Header.tsx

@@ -71,7 +71,7 @@ export function Header() {
 
   // https://v5.daisyui.com/components/navbar/#navbar-with-dropdown-center-logo-and-icon
   return (
-    <div className="navbar bg-base-200 shadow-sm">
+    <div className="navbar bg-base-200 shadow-sm border-b border-base-300">
       <div className="navbar-start">
         <SideBar />
       </div>

src/components/Message.tsx

@@ -14,7 +14,7 @@ export function Message() {
   return (
     <>
       {msg && (
-        <div className="flex justify-center my-5">
+        <div className="flex justify-center">
           <p className={`alert ${msgClass}`}>{msg}</p>
         </div>
       )}

src/components/icons.tsx

@@ -30,6 +30,21 @@ export const IconCog = () => (
   </svg>
 );
 
+export const IconCommandLine = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    className="size-6"
+  >
+    <path
+      fillRule="evenodd"
+      d="M2.25 6a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V6Zm3.97.97a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 0 1 0 1.06l-2.25 2.25a.75.75 0 0 1-1.06-1.06l1.72-1.72-1.72-1.72a.75.75 0 0 1 0-1.06Zm4.28 4.28a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5h-3Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
 export const IconGlobe = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

src/pages/Networks.tsx

@@ -27,6 +27,7 @@ export function Networks() {
     (s) => s.walletshieldListenAddress,
   );
 
+  const consoleAddLine = useStore((s) => s.consoleAddLine);
   const setClientPid = useStore((s) => s.setClientPid);
   const setIsConnected = useStore((s) => s.setIsConnected);
   const setMessage = useStore((s) => s.setMessage);
@@ -156,21 +157,30 @@ export function Networks() {
         PATH: dirNetwork,
       },
     });
+    const o = (d: string) => `${d.trim()}`;
     log.debug(`spawning command: ${cmd} ${args.join(" ")}`);
     command.on("close", (data) => {
       log.debug(`closed: ${cmd} code=${data.code} signal=${data.signal}`);
       setMessage("info", "Network client stopped.");
     });
-    command.on("error", (e) => log.error(`${cmd}: ${e.trim()}`));
-    command.stdout.on("data", (d) => log.info(`${cmd}: ${d.trim()}`));
-    command.stderr.on("data", (d) => log.error(`${cmd}: ${d.trim()}`));
+    command.on("error", (e) => log.error(o(e)));
+
+    command.stdout.on("data", (d) => {
+      log.info(o(d));
+      if (d.match(/client2/) === null) consoleAddLine(o(d));
+    });
+
+    command.stderr.on("data", (d) => {
+      log.error(o(d));
+      if (d.match(/client2/) === null) consoleAddLine(o(d));
+    });
 
     const child = await command.spawn();
     return child.pid;
   }
 
   return (
-    <div className="flex flex-col items-center justify-center gap-5">
+    <div className="flex flex-col items-center justify-center gap-4">
       <img
         src="/zkn.svg"
         alt="ZKN"

src/store/index.ts

@@ -9,6 +9,8 @@ export const useStore = create(
     {
       appVersion: "",
       clientPid: 0,
+      consoleLines: [] as string[],
+      consoleLinesLimit: 100,
       isConnected: false,
       isPlatformSupported: false,
       message: "",
@@ -19,6 +21,12 @@ export const useStore = create(
       walletshieldListenAddress: "",
     },
     (set) => ({
+      consoleAddLine: (line: string) =>
+        set(({ consoleLines, consoleLinesLimit }) => {
+          const next = [line, ...consoleLines].slice(0, consoleLinesLimit);
+          return { consoleLines: next };
+        }),
+
       setAppVersion: (appVersion: string) => set({ appVersion }),
       setClientPid: (clientPid: number) => set({ clientPid }),
       setIsConnected: (isConnected: boolean) => set({ isConnected }),