awesome wip split view

packages/web-awesome/package.json

@@ -89,6 +89,7 @@
     "rimraf": "^6.0.1",
     "sass": "^1.79.1",
     "sass-loader": "^16.0.1",
+    "split.js": "^1.6.5",
     "style-loader": "^4.0.0",
     "svg-sprite-loader": "^6.0.11",
     "typescript": "^5.6.3",

packages/web-awesome/src/components/BaseLayout--/index.tsx

@@ -0,0 +1,61 @@
+import { ensureReportDataReady } from "@allurereport/web-commons";
+import { Loadable, PageLoader } from "@allurereport/web-components";
+import { useEffect } from "preact/compat";
+import { Footer } from "@/components/Footer";
+import MainReport from "@/components/MainReport";
+import Modal from "@/components/Modal";
+import TestResult from "@/components/TestResult";
+import { fetchStats, getLocale, getTheme } from "@/stores";
+import { fetchPieChartData } from "@/stores/chart";
+import { fetchEnvInfo } from "@/stores/envInfo";
+import { fetchTestResult, fetchTestResultNav, testResultStore } from "@/stores/testResults";
+import { fetchTreeData, treeStore } from "@/stores/tree";
+import * as styles from "./styles.scss";
+
+export type BaseLayoutProps = {
+  testResultId?: string;
+};
+
+export const BaseLayout = ({ testResultId }: BaseLayoutProps) => {
+  useEffect(() => {
+    getTheme();
+    getLocale();
+  }, []);
+
+  useEffect(() => {
+    if (testResultId) {
+      fetchTestResult(testResultId);
+      fetchTestResultNav();
+    } else {
+      ensureReportDataReady();
+      fetchStats();
+      fetchPieChartData();
+      fetchTreeData();
+      fetchEnvInfo();
+    }
+  }, [testResultId]);
+
+  const content = testResultId ? (
+    <Loadable
+      source={testResultStore}
+      renderLoader={() => <PageLoader />}
+      transformData={(data) => data[testResultId]}
+      renderData={(testResult) => (
+        <>
+          <Modal testResult={testResult} />
+          <div className={styles.wrapper} key={testResult?.id}>
+            <TestResult testResult={testResult} />
+            <Footer />
+          </div>
+        </>
+      )}
+    />
+  ) : (
+    <div className={styles.wrapper}>
+      <Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <MainReport />} />
+      <Footer />
+    </div>
+  );
+
+  return <div className={styles.layout}>{content}</div>;
+};

packages/web-awesome/src/components/BaseLayout--/styles.scss

@@ -0,0 +1,60 @@
+.layout {
+  margin: auto;
+  padding: 12px 32px;
+  background: var(--bg-base-secondary);
+  color: var(--on-text-primary);
+  font-size: 14px;
+  min-height: 100vh;
+}
+
+.wrapper {
+  max-width: 920px;
+  width: 100%;
+  flex-direction: column;
+  margin: auto;
+}
+
+.content {
+  box-shadow: var(--shadow-small);
+  background: var(--bg-base-primary);
+  border-radius: 12px;
+  width: 100%;
+}
+
+.test-results {
+  min-height: 320px;
+  padding-bottom: 32px;
+  padding-top: 12px;
+}
+
+.logo {
+  display: inline-block;
+  margin-bottom: 12px;
+}
+
+.title {
+  font-size: 14px;
+  line-height: 1.25;
+  color: var(--on-text-primary);
+  margin-bottom: 8px;
+}
+
+.above {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding-bottom: 12px;
+  align-items: center;
+}
+
+.below {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 16px;
+  align-items: center;
+}
+
+.test-result-errors {
+  padding: 0 24px;
+  margin-top: 12px;
+}

packages/web-awesome/src/components/BaseLayout/index.tsx

@@ -4,8 +4,8 @@ import { useEffect } from "preact/compat";
 import { Footer } from "@/components/Footer";
 import MainReport from "@/components/MainReport";
 import Modal from "@/components/Modal";
+import SideBySide from "@/components/SideBySide";
 import TestResult from "@/components/TestResult";
-import TestResultEmpty from "@/components/TestResult/TestResultEmpty";
 import { fetchStats, getLocale, getTheme } from "@/stores";
 import { fetchPieChartData } from "@/stores/chart";
 import { fetchEnvInfo } from "@/stores/envInfo";
@@ -36,7 +36,7 @@ export const BaseLayout = ({ testResultId }: BaseLayoutProps) => {
     }
   }, [testResultId]);
 
-  const content = testResultId ? (
+  const testResult = testResultId ? (
     <Loadable
       source={testResultStore}
       renderLoader={() => <PageLoader />}
@@ -52,11 +52,40 @@ export const BaseLayout = ({ testResultId }: BaseLayoutProps) => {
       )}
     />
   ) : (
+    <div>notest</div>
+  );
+
+  const Main = () => (
     <div className={styles.wrapper}>
       <Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <MainReport />} />
       <Footer />
     </div>
   );
 
-  return <div className={styles.layout}>{content}</div>;
+  // const content = testResultId ? (
+  //   <Loadable
+  //     source={testResultStore}
+  //     renderLoader={() => <PageLoader />}
+  //     transformData={(data) => data[testResultId]}
+  //     renderData={(testResult) => (
+  //       <>
+  //         <Modal testResult={testResult} />
+  //         <div className={styles.wrapper} key={testResult?.id}>
+  //           <TestResult testResult={testResult} />
+  //           <Footer />
+  //         </div>
+  //       </>
+  //     )}
+  //   />
+  // ) : (
+  //   <div className={styles.wrapper}>
+  //     <Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <MainReport />} />
+  //     <Footer />
+  //   </div>
+  // );
+  return <SideBySide left={<Main />} right={testResult} />;
+
+  // {
+  /* return <div className={styles.layout}>{content}</div>;*/
+  // }
 };

packages/web-awesome/src/components/SideBySide/index.tsx

@@ -0,0 +1,54 @@
+import type { ComponentChild, FunctionalComponent } from "preact";
+import { useEffect, useRef } from "preact/hooks";
+import Split from "split.js";
+import * as styles from "./styles.scss";
+
+interface SideBySideProps {
+  left: ComponentChild;
+  right?: ComponentChild;
+}
+
+const SideBySide: FunctionalComponent<SideBySideProps> = ({ left, right }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const sizes = JSON.parse(localStorage.getItem("sideBySidePosition") || "[50, 50]");
+
+    const splitter = Split([`.${styles["side-left"]}`, `.${styles["side-right"]}`], {
+      sizes,
+      gutterSize: 7,
+      gutter: (): HTMLElement => {
+        const gutter = document.createElement("div");
+        gutter.className = `${styles.gutter}`;
+        gutter.addEventListener("dblclick", () => {
+          const currentSizes = splitter.getSizes();
+          if (JSON.stringify(currentSizes) === "[50,50]") {
+            splitter.setSizes([30, 70]);
+            localStorage.setItem("sideBySidePosition", JSON.stringify([30, 70]));
+            return;
+          }
+          splitter.setSizes([50, 50]);
+          localStorage.setItem("sideBySidePosition", JSON.stringify([50, 50]));
+        });
+        return gutter;
+      },
+      onDragEnd: () => {
+        const newSizes = splitter.getSizes();
+        localStorage.setItem("sideBySidePosition", JSON.stringify(newSizes));
+      },
+    });
+
+    return () => {
+      splitter.destroy();
+    };
+  }, []);
+
+  return (
+    <div class={styles.side} ref={containerRef}>
+      <div class={styles["side-left"]}>{left}</div>
+      <div class={styles["side-right"]}>{right}</div>
+    </div>
+  );
+};
+
+export default SideBySide;

packages/web-awesome/src/components/SideBySide/styles.scss

@@ -0,0 +1,59 @@
+.side {
+  height: 100vh;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  display: flex;
+}
+
+.side-left {
+  padding: 8px;
+  overflow: auto;
+  flex: 0 0 auto;
+}
+
+.side-right {
+  overflow: auto;
+  flex: 1 1 auto;
+  padding: 8px;
+}
+
+[dir="ltr"] {
+  .side {
+    direction: ltr;
+    flex-direction: row;
+  }
+}
+
+[dir="rtl"] {
+  .side {
+    direction: ltr;
+    flex-direction: row-reverse;
+  }
+
+  .side-left {
+    direction: rtl;
+  }
+
+  .side-right {
+    direction: rtl;
+  }
+}
+
+.tree-ctrl {
+  overflow: hidden;
+}
+
+.gutter {
+  background: var(--bg-base-secondary) no-repeat 50%;
+  min-height: 100vh;
+}
+
+.gutter:hover {
+  cursor: ew-resize;
+}
+
+.gutter-horizontal {
+  //background-image: url("vertical.png");
+}

yarn.lock

@@ -673,6 +673,7 @@ __metadata:
     rimraf: "npm:^6.0.1"
     sass: "npm:^1.79.1"
     sass-loader: "npm:^16.0.1"
+    split.js: "npm:^1.6.5"
     style-loader: "npm:^4.0.0"
     svg-sprite-loader: "npm:^6.0.11"
     typescript: "npm:^5.6.3"