refactor(backend): split log files into separate file

routes/admin/log/index.tsx

@@ -1,13 +1,13 @@
 import { MainLayout } from "@components/layouts/main.tsx";
 import { Handlers, PageProps } from "$fresh/server.ts";
 import { AccessDeniedError } from "@lib/errors.ts";
-import { getLogs, Log } from "@lib/logs.ts";
+import { getLogs, Log } from "@lib/log/index.ts";
 import { formatDate } from "@lib/string.ts";
 import { renderMarkdown } from "@lib/documents.ts";
 
 const renderLog = (t: unknown) =>
   renderMarkdown(`\`\`\`js
-${typeof t === "string" ? t : JSON.stringify(t).trim()}
+${typeof t === "string" ? t : JSON.stringify(t, null, 2).trim()}
 \`\`\``);
 
 export const handler: Handlers = {
@@ -16,11 +16,12 @@ export const handler: Handlers = {
     if (!("session" in ctx.state)) {
       throw new AccessDeniedError();
     }
+    console.log({ logs });
     return ctx.render({
       logs: logs.map((l) => {
         return {
           ...l,
-          html: l.args.map(renderLog).join("\n"),
+          html: l.args.map(renderLog).join("<br/>"),
         };
       }),
     });
@@ -34,7 +35,7 @@ function LogLine(
 ) {
   return (
     <div
-      class="mt-4 flex flex-col gap-2 bg-gray-900 px-4 py-2 rounded-2xl"
+      class="mt-4 flex flex-col gap-2 bg-gray-900 px-4 py-2 rounded-2xl max-w-3xl"
       style={{ background: "var(--light)" }}
     >
       <div class="flex gap-2">
@@ -51,13 +52,9 @@ function LogLine(
         </span>
       </div>
       <div
-        class="flex gap-1 text-white"
+        class="text-white"
         dangerouslySetInnerHTML={{ __html: log.html }}
-      >
-        <pre>
-          {log.html}
-        </pre>
-      </div>
+      />
     </div>
   );
 }
@@ -67,7 +64,7 @@ export default function Greet(
 ) {
   return (
     <MainLayout url={url}>
-      <h1 class="text-white text-4xl ">Performance</h1>
+      <h1 class="text-white text-4xl">Logs</h1>
 
       {logs.map((r) => {
         return (