fix: add back logs component

Signed-off-by: Quentin Guidée <[email protected]>

client/.gitignore

@@ -1,5 +1,4 @@
 # Logs
-logs
 *.log
 npm-debug.log*
 yarn-debug.log*

client/src/components/Logs/Logs.module.sass

@@ -0,0 +1,27 @@
+@use "../../styles/colors"
+@use "../../styles/dimensions"
+@use "../../styles/fonts"
+
+.logs
+    line-height: 2
+    font-size: 13px
+    font-family: fonts.$font-family-code
+    border: 1px solid colors.$bg-tertiary
+    padding: 10px
+    border-radius: dimensions.$border-radius-lg
+    overflow: scroll
+    white-space: break-spaces
+
+.line
+    display: flex
+    flex-direction: row
+    gap: 10px
+    padding: 0 10px
+    border-radius: 4px
+
+    &Error
+        color: colors.$red
+
+.number
+    color: colors.$fg-primary
+    opacity: 0.4

client/src/components/Logs/Logs.tsx

@@ -0,0 +1,66 @@
+import { HTMLProps, useEffect, useRef, useState } from "react";
+
+import styles from "./Logs.module.sass";
+import classNames from "classnames";
+import useScrollPercentage from "react-scroll-percentage-hook";
+import Downloads from "../Downloads/Downloads";
+
+export type LogLine = {
+    kind: "out" | "err" | "downloads";
+    message: any;
+};
+
+function Line(props: LogLine) {
+    const { kind, message } = props;
+
+    if (kind === "downloads") {
+        return <Downloads downloads={message} />;
+    }
+
+    if (message.value === undefined) return null;
+    if (message.value === "") return null;
+
+    return (
+        <div
+            className={classNames({
+                [styles.line]: true,
+                [styles.lineError]: kind === "err",
+            })}
+        >
+            <div>{message.value}</div>
+        </div>
+    );
+}
+
+type Props = HTMLProps<HTMLDivElement> & {
+    lines: LogLine[];
+};
+
+export default function Logs(props: Readonly<Props>) {
+    const { lines } = props;
+
+    const { ref } = useScrollPercentage<HTMLDivElement>({
+        onProgress: (percentage) => {
+            setAutoScroll(percentage.vertical === 100);
+        },
+    });
+
+    const [autoScroll, setAutoScroll] = useState<boolean>(true);
+
+    const scroll = useRef();
+
+    useEffect(() => {
+        if (!autoScroll) return;
+        let s: any = scroll;
+        s.current.scrollIntoView({ behavior: "smooth" });
+    }, [autoScroll, lines]);
+
+    return (
+        <div className={styles.logs} ref={ref}>
+            {lines.map((line, i) => {
+                return <Line key={i} kind={line.kind} message={line.message} />;
+            })}
+            <div ref={scroll} />
+        </div>
+    );
+}