@allurereport/web-awesome 3.0.0 → 3.1.0

package/src/components/TestResult/TrNavigation/styles.scss

@@ -1,11 +1,10 @@
-.test-result-nav {
+.nav {
   display: flex;
   justify-content: space-between;
   margin-bottom: 12px;
 }
 
-.test-result-fullName {
-  font-weight: 400;
+.fullName {
   display: flex;
   gap: 4px;
   align-items: center;
@@ -13,36 +12,27 @@
   text-overflow: ellipsis;
   overflow: hidden;
   min-height: 32px;
-}
+  margin-left: -4px;
 
-.test-result-fullName-text {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  width: 100%;
-  font-weight: 400;
-  color: var(--on-text-secondary);
-}
-
-.test-result-fullName-icon {
-  --allure-btn-icon-color: var(--on-icon-secondary);
+  & .text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 100%;
+    color: var(--on-text-secondary);
+  }
 }
 
-.test-result-navigator {
+.controls {
   display: flex;
   gap: 4px;
   align-items: center;
   margin-left: auto;
+  margin-right: -18px;
 }
 
-.test-result-navigator-numbers {
+.counter {
   color: var(--on-text-secondary);
-  font-weight: 400;
-}
-
-.test-result-nav-prev {
-  transform: rotate(-180deg);
-  &:active {
-    transform: scale(var(--allure-btn-pressed-scale)) rotate(-180deg);
-  }
+  padding-left: 4px;
+  padding-right: 4px;
 }

package/src/components/TestResult/TrPwTraces/PwTraceButton.tsx

@@ -1,17 +1,10 @@
 import type { AttachmentTestStepResult } from "@allurereport/core-api";
-import type { Attachments } from "@allurereport/web-commons";
-import { fetchReportAttachment } from "@allurereport/web-commons";
+import { fetchFromUrl } from "@allurereport/web-commons";
 import { IconButton, TooltipWrapper, allureIcons } from "@allurereport/web-components";
 import { PwTrace } from "@/components/TestResult/TrPwTraces/PwTrace";
 import { useI18n } from "@/stores";
 import { openModal } from "@/stores/modal";
 
-export const fetchFromUrl = async ({ id, ext, contentType }: Attachments) => {
-  const fileName = `${id || "-"}${ext || ""}`;
-
-  return fetchReportAttachment(`data/attachments/${fileName}?attachment`, contentType);
-};
-
 export const PwTraceButton = ({ link }: Pick<AttachmentTestStepResult, "link">) => {
   const { t } = useI18n("ui");
   const openPw = async () => {

package/src/components/TestResult/TrRetriesView/TrRetriesItem.tsx

@@ -6,7 +6,7 @@ import type { AwesomeTestResult } from "types";
 import { TrError } from "@/components/TestResult/TrError";
 import * as styles from "@/components/TestResult/TrRetriesView/styles.scss";
 import { useI18n } from "@/stores/locale";
-import { navigateTo } from "@/stores/router";
+import { navigateToTestResult } from "@/stores/router";
 import { timestampToDate } from "@/utils/time";
 
 export type TrRetriesItemProps = {
@@ -26,7 +26,6 @@ export const TrRetriesItem: FunctionalComponent<TrRetriesItemProps> = ({ testRes
   const retryTitle = convertedStop ? `${retryTitlePrefix} – ${convertedStop}` : retryTitlePrefix;
 
   const formattedDuration = typeof duration === "number" ? formatDuration(duration) : undefined;
-  const navigateUrl = id;
 
   return (
     <div data-testid="test-result-retries-item">
@@ -55,7 +54,7 @@ export const TrRetriesItem: FunctionalComponent<TrRetriesItemProps> = ({ testRes
               size={"s"}
               className={styles["test-result-retries-item-link"]}
               data-testid="test-result-retries-item-open-button"
-              onClick={() => navigateTo(navigateUrl)}
+              onClick={() => navigateToTestResult({ testResultId: id })}
             />
           </div>
         </div>

package/src/components/TestResult/TrRetriesView/index.tsx

@@ -1,8 +1,9 @@
+import { EmptyView } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import type { AwesomeTestResult } from "types";
-import * as styles from "@/components/TestResult/TrHistory/styles.scss";
 import { TrRetriesItem } from "@/components/TestResult/TrRetriesView/TrRetriesItem";
 import { useI18n } from "@/stores";
+import * as styles from "./styles.scss";
 
 export const TrRetriesView: FunctionalComponent<{
   testResult: AwesomeTestResult;
@@ -11,7 +12,7 @@ export const TrRetriesView: FunctionalComponent<{
   const { t } = useI18n("empty");
 
   return (
-    <div className={styles["test-result-history"]}>
+    <div className={styles["test-result-retries"]}>
       {retries.length ? (
         retries?.map((item, key) => (
           <TrRetriesItem
@@ -22,7 +23,7 @@ export const TrRetriesView: FunctionalComponent<{
           />
         ))
       ) : (
-        <div className={styles["test-result-empty"]}>{t("no-retries-results")}</div>
+        <EmptyView description={t("no-retries-results")} />
       )}
     </div>
   );

package/src/components/TestResult/TrSteps/TrAttachment.tsx

@@ -6,6 +6,7 @@ import type { FunctionComponent } from "preact";
 import { useState } from "preact/hooks";
 import { TrAttachmentInfo } from "@/components/TestResult/TrSteps/TrAttachmentInfo";
 import * as styles from "@/components/TestResult/TrSteps/styles.scss";
+import { useI18n } from "@/stores";
 import { openModal } from "@/stores/modal";
 
 const { lineImagesImage, lineFilesFileAttachment2, playwrightLogo } = allureIcons;
@@ -56,14 +57,15 @@ export const TrAttachment: FunctionComponent<{
   className?: string;
 }> = ({ item, stepIndex }) => {
   const [isOpened, setIsOpen] = useState(false);
+  const { t: tAttachments } = useI18n("attachments");
   const { link } = item;
   const { missed } = link;
   const componentType = attachmentType(link.contentType);
-  const isValidComponentType = !["archive", null].includes(componentType.type as string);
+  const isValidComponentType = !["archive", null].includes(componentType);
 
   const expandAttachment = (event: Event) => {
     event.stopPropagation();
-    if (componentType.type !== "image") {
+    if (componentType !== "image") {
       return;
     }
     openModal({
@@ -109,7 +111,7 @@ export const TrAttachment: FunctionComponent<{
       {isOpened && isValidComponentType && (
         <div className={styles["test-result-attachment-content-wrapper"]}>
           <div className={styles["test-result-attachment-content"]} role={"button"} onClick={expandAttachment}>
-            <Attachment item={item} />
+            <Attachment item={item} i18n={{ imageDiff: (key: string) => tAttachments(`imageDiff.${key}`) }} />
           </div>
         </div>
       )}

package/src/components/TestResult/TrSteps/TrAttachmentInfo.tsx

@@ -16,6 +16,7 @@ interface TrAttachmentInfo {
 
 export const TrAttachmentInfo: FunctionalComponent<TrAttachmentInfo> = ({ item, shouldExpand }) => {
   const { t: tooltip } = useI18n("controls");
+  const { t: tAttachments } = useI18n("attachments");
   const { id, ext, contentType } = item.link;
   const isPwTrace = contentType === "application/vnd.allure.playwright-trace";
   const contentLength = item.link.missed === false ? item.link.contentLength : undefined;
@@ -30,7 +31,13 @@ export const TrAttachmentInfo: FunctionalComponent<TrAttachmentInfo> = ({ item,
     event.stopPropagation();
     openModal({
       data: item,
-      component: <Attachment item={item} previewable={true} />,
+      component: (
+        <Attachment
+          item={item}
+          previewable={true}
+          i18n={{ imageDiff: (key: string) => tAttachments(`imageDiff.${key}`) }}
+        />
+      ),
     });
   };
 
@@ -39,10 +46,10 @@ export const TrAttachmentInfo: FunctionalComponent<TrAttachmentInfo> = ({ item,
       openModal({
         isModalOpen: true,
         data: item,
-        component: <Attachment item={item} />,
+        component: <Attachment item={item} i18n={{ imageDiff: (key: string) => tAttachments(`imageDiff.${key}`) }} />,
       });
     }
-  }, [item]);
+  }, [item, tAttachments]);
 
   const downloadData = async (e: MouseEvent) => {
     e.stopPropagation();

package/src/components/TestResult/TrSteps/TrStep.tsx

@@ -1,5 +1,5 @@
-import type { DefaultTestStepResult, TestStatus, TestStepResult } from "@allurereport/core-api";
-import { ArrowButton, Code, SvgIcon, Text, TreeItemIcon, allureIcons } from "@allurereport/web-components";
+import type { DefaultTestStepResult, TestStepResult } from "@allurereport/core-api";
+import { ArrowButton, Code, Text, TreeItemIcon, allureIcons } from "@allurereport/web-components";
 import type { FunctionComponent } from "preact";
 import { useState } from "preact/hooks";
 import { MetadataList } from "@/components/Metadata";
@@ -26,7 +26,7 @@ export const TrStepsContent = (props: { item: DefaultTestStepResult }) => {
   return (
     <div data-testid={"test-result-step-content"} className={styles["test-result-step-content"]}>
       {Boolean(item?.parameters?.length) && <TrStepParameters parameters={item.parameters} />}
-      {Boolean(item?.message && item?.trace && !item?.hasSimilarErrorInSubSteps) && <TrError {...item} />}
+      {Boolean((item?.message || item?.trace) && !item?.hasSimilarErrorInSubSteps) && <TrError {...item} />}
       {Boolean(item?.steps?.length) && (
         <>
           {item.steps?.map((subItem, key) => {

package/src/components/TestResult/TrTabs/index.tsx

@@ -1,38 +1,22 @@
 import { type ComponentChildren } from "preact";
-import { useEffect } from "preact/hooks";
-import { NavTab, NavTabs, NavTabsList, useNavTabsContext } from "@/components/NavTabs";
-import { activeSubTab, navigateTo, route } from "@/stores/router";
+import { NavTab, NavTabs, NavTabsList } from "@/components/NavTabs";
+import { navigateToTestResultTab } from "@/stores/router";
+import { currentTrId, trCurrentTab } from "@/stores/testResult";
 
 export const TrTabs = NavTabs;
 export const TrTabsList = NavTabsList;
-export const useTestResultTabsContext = useNavTabsContext;
 
 export const TrTab = (props: { id: string; children: ComponentChildren }) => {
-  const { testResultId } = route.value.params;
-  const { currentTab, setCurrentTab } = useNavTabsContext();
   const { id, children } = props;
-  const isActiveFromUrl = activeSubTab.value === id;
+  const isCurrentTab = trCurrentTab.value === id;
+
   const handleTabClick = () => {
-    const isCurrentTab = isActiveFromUrl ? isActiveFromUrl : currentTab === id;
     if (isCurrentTab) {
       return;
     }
-    setCurrentTab(id);
-    navigateTo({
-      ...route.value,
-      params: {
-        testResultId,
-        subTab: id || null,
-      },
-    });
-  };
-  const isCurrentTab = isActiveFromUrl ? isActiveFromUrl : currentTab === id;
 
-  useEffect(() => {
-    if (isActiveFromUrl) {
-      setCurrentTab(id);
-    }
-  }, [activeSubTab.value, id, setCurrentTab]);
+    navigateToTestResultTab({ testResultId: currentTrId.value, tab: id });
+  };
 
   return (
     <NavTab id={id} onClick={handleTabClick} data-testid={`test-result-tab-${id}`} isCurrentTab={isCurrentTab}>

package/src/components/TestResult/index.tsx

@@ -1,3 +1,4 @@
+import { computed } from "@preact/signals";
 import clsx from "clsx";
 import type { FunctionComponent, FunctionalComponent } from "preact";
 import { useEffect } from "preact/hooks";
@@ -9,9 +10,10 @@ import TrHistoryView from "@/components/TestResult/TrHistory";
 import { TrInfo } from "@/components/TestResult/TrInfo";
 import { TrOverview } from "@/components/TestResult/TrOverview";
 import { TrRetriesView } from "@/components/TestResult/TrRetriesView";
-import { TrTabs, useTestResultTabsContext } from "@/components/TestResult/TrTabs";
+import { TrTabs } from "@/components/TestResult/TrTabs";
 import { fetchTestEnvGroup } from "@/stores/env";
 import { isSplitMode } from "@/stores/layout";
+import { trCurrentTab } from "@/stores/testResult";
 import * as styles from "./styles.scss";
 
 export type TrViewProps = {
@@ -26,8 +28,7 @@ export type TrProps = {
   testResult?: AwesomeTestResult;
 };
 
-const TrView: FunctionalComponent<TrViewProps> = ({ testResult }) => {
-  const { currentTab } = useTestResultTabsContext();
+const view = computed(() => {
   const viewMap: Record<string, any> = {
     overview: TrOverview,
     history: TrHistoryView,
@@ -35,7 +36,11 @@ const TrView: FunctionalComponent<TrViewProps> = ({ testResult }) => {
     retries: TrRetriesView,
     environments: TrEnvironmentsView,
   };
-  const ViewComponent = viewMap[currentTab];
+  return viewMap[trCurrentTab.value];
+});
+
+const TrView: FunctionalComponent<TrViewProps> = ({ testResult }) => {
+  const ViewComponent = view.value;
 
   return <ViewComponent testResult={testResult} />;
 };

package/src/components/TestResult/styles.scss

@@ -9,4 +9,5 @@
   overflow: auto;
   height: 100%;
   border-radius: 0;
+  scrollbar-width: thin;
 }

package/src/components/Tree/index.tsx

@@ -1,34 +1,31 @@
 import { Button, Loadable, PageLoader, Text, Tree, TreeStatusBar } from "@allurereport/web-components";
 import { useMemo } from "preact/hooks";
-import type { AwesomeStatus } from "types";
 import { MetadataButton } from "@/components/MetadataButton";
-import { useTabsContext } from "@/components/Tabs";
 import { reportStatsStore, statsByEnvStore } from "@/stores";
 import { collapsedEnvironments, currentEnvironment, environmentsStore } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
-import { navigateTo, route } from "@/stores/router";
-import {
-  clearTreeFilters,
-  collapsedTrees,
-  filteredTree,
-  noTests,
-  noTestsFound,
-  toggleTree,
-  treeStore,
-} from "@/stores/tree";
+import { navigateToTestResult } from "@/stores/router";
+import { currentTrId } from "@/stores/testResult";
+import { collapsedTrees, filteredTree, noTests, noTestsFound, toggleTree, treeStore } from "@/stores/tree";
+import { clearTreeFilters, treeStatus } from "@/stores/treeFilters/store";
 import { createTreeLocalizer } from "@/utils/tree";
 import * as styles from "./styles.scss";
 
+const treeNavigateTo = (id: string) => {
+  navigateToTestResult({ testResultId: id });
+};
+
 export const TreeList = () => {
   const { t } = useI18n("empty");
   const { t: tEnvironments } = useI18n("environments");
   const { t: tooltip } = useI18n("transitions");
-  const { currentTab } = useTabsContext();
-  const routeId = route.value.params?.testResultId;
+  const trId = currentTrId.value;
+
+  const currentTreeStatus = treeStatus.value;
 
   const localizers = useMemo(
     () => ({
-      tooltip: (key: string) => t(`description.${key}`),
+      tooltip: (key: string, options: Record<string, string>) => tooltip(`description.${key}`, options),
     }),
     [tooltip],
   );
@@ -80,10 +77,10 @@ export const TreeList = () => {
                 statistic={statsByEnvStore.value.data[currentEnvironment.value]}
                 collapsedTrees={collapsedTrees.value}
                 toggleTree={toggleTree}
-                navigateTo={navigateTo}
+                navigateTo={treeNavigateTo}
                 tree={treeLocalizer(filteredTree.value.default)}
-                statusFilter={currentTab as AwesomeStatus}
-                routeId={routeId}
+                statusFilter={currentTreeStatus}
+                routeId={trId}
                 root
               />
             </div>
@@ -100,10 +97,10 @@ export const TreeList = () => {
                 statistic={statsByEnvStore.value.data[currentEnvironment.value]}
                 collapsedTrees={collapsedTrees.value}
                 toggleTree={toggleTree}
-                navigateTo={navigateTo}
+                navigateTo={treeNavigateTo}
                 tree={treeLocalizer(currentTree)}
-                statusFilter={currentTab as AwesomeStatus}
-                routeId={routeId}
+                statusFilter={currentTreeStatus}
+                routeId={trId}
                 root
               />
             </div>
@@ -141,7 +138,7 @@ export const TreeList = () => {
                     <TreeStatusBar
                       statistic={stats}
                       reportStatistic={reportStatsStore.value.data}
-                      statusFilter={currentTab}
+                      statusFilter={currentTreeStatus}
                     />
                   </div>
                   {isOpened && (
@@ -151,10 +148,10 @@ export const TreeList = () => {
                         reportStatistic={reportStatsStore.value.data}
                         collapsedTrees={collapsedTrees.value}
                         toggleTree={toggleTree}
-                        statusFilter={currentTab}
-                        navigateTo={navigateTo}
+                        statusFilter={currentTreeStatus}
+                        navigateTo={treeNavigateTo}
                         tree={treeLocalizer(value)}
-                        routeId={routeId}
+                        routeId={trId}
                         root
                       />
                     </div>

package/src/index.html

@@ -4,33 +4,18 @@
     <title>Allure Awesome</title>
     <link rel="icon" href="data:image/svg+xml,%3Csvg width='32' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.232 4.662a3.6 3.6 0 0 1 5.09.035c2.855 2.894 4.662 6.885 4.662 11.295a3.6 3.6 0 0 1-7.2 0c0-2.406-.981-4.61-2.587-6.24a3.6 3.6 0 0 1 .035-5.09Z' fill='url(%23a)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.392 3.6a3.6 3.6 0 0 1 3.6-3.6c4.41 0 8.401 1.807 11.296 4.662a3.6 3.6 0 1 1-5.056 5.126C20.602 8.18 18.398 7.2 15.992 7.2a3.6 3.6 0 0 1-3.6-3.6Z' fill='url(%23b)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 15.992C0 7.157 7.157 0 15.992 0a3.6 3.6 0 0 1 0 7.2A8.789 8.789 0 0 0 7.2 15.992c0 2.406.981 4.61 2.588 6.24a3.6 3.6 0 0 1-5.126 5.056C1.807 24.393 0 20.402 0 15.992Z' fill='url(%23c)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.661 22.232a3.6 3.6 0 0 1 5.091-.035c1.63 1.606 3.834 2.587 6.24 2.587a3.6 3.6 0 0 1 0 7.2c-4.41 0-8.401-1.807-11.295-4.661a3.6 3.6 0 0 1-.036-5.091Z' fill='url(%23d)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M28.384 12.392a3.6 3.6 0 0 1 3.6 3.6c0 8.835-7.157 15.992-15.992 15.992a3.6 3.6 0 0 1 0-7.2 8.789 8.789 0 0 0 8.792-8.792 3.6 3.6 0 0 1 3.6-3.6Z' fill='url(%23e)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M28.385 12.392a3.6 3.6 0 0 1 3.6 3.6v12.392a3.6 3.6 0 0 1-7.2 0V15.992a3.6 3.6 0 0 1 3.6-3.6Z' fill='url(%23f)'/%3E%3Cg clip-path='url(%23g)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.232 4.662a3.6 3.6 0 0 1 5.091.035c2.855 2.894 4.662 6.885 4.662 11.295a3.6 3.6 0 0 1-7.2 0c0-2.406-.982-4.61-2.588-6.24a3.6 3.6 0 0 1 .035-5.09Z' fill='url(%23h)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='a' x1='26.4' y1='9.6' x2='28.8' y2='15' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%237E22CE'/%3E%3Cstop offset='1' stop-color='%238B5CF6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='26.8' y1='9.4' x2='17.8' y2='3.6' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23EF4444'/%3E%3Cstop offset='1' stop-color='%23DC2626'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='3.6' y1='14' x2='5.4' y2='24.8' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2322C55E'/%3E%3Cstop offset='1' stop-color='%2315803D'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='4.8' y1='22.2' x2='14.4' y2='29.2' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2394A3B8'/%3E%3Cstop offset='.958' stop-color='%2364748B'/%3E%3Cstop offset='1' stop-color='%2364748B'/%3E%3C/linearGradient%3E%3ClinearGradient id='e' x1='28.4' y1='22.173' x2='22.188' y2='28.384' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D97706'/%3E%3Cstop offset='1' stop-color='%23FBBF24'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='29.2' y1='54.4' x2='30.626' y2='54.256' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FBBF24'/%3E%3Cstop offset='1' stop-color='%23FBBF24'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='26.4' y1='9.6' x2='28.8' y2='15' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%237E22CE'/%3E%3Cstop offset='1' stop-color='%238B5CF6'/%3E%3C/linearGradient%3E%3CclipPath id='g'%3E%3Cpath fill='%23fff' transform='translate(24.8 12)' d='M0 0h7.2v8H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E" />
     <base href="http://localhost:8080" />
-  </head>
-  <body>
-    <div id="app"></div>
-    <script>
-      window.allure = window.allure || {};
-    </script>
-
-    <script>
-      const { origin, pathname } = window.location;
-      const url = new URL(pathname, origin);
-      const baseEl = document.createElement("base");
-
-      baseEl.href = url.toString();
-
-      window.document.head.appendChild(baseEl);
-    </script>
     <script>
       window.allureReportOptions = {
         "reportName": "Allure Report",
         "logo": "",
-        "theme": "light",
+        "theme": "auto",
         "reportLanguage": "en",
         "createdAt": 1739819870336,
         "reportUuid": "51b36daf-614b-409c-b6a1-e8e401b2c144",
         "groupBy": ["parentSuite", "suite", "subSuite"],
         "layout": "split",
-        "allureVersion": "3.0.0-beta.8",
+        "allureVersion": "3.0.1-develop",
+        "sections": ["charts", "timeline"],
         "ci": {
           "type": "github",
           "detected": true,
@@ -46,6 +31,22 @@
         }
       };
     </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script>
+      window.allure = window.allure || {};
+    </script>
+
+    <script>
+      const { origin, pathname } = window.location;
+      const url = new URL(pathname, origin);
+      const baseEl = document.createElement("base");
+
+      baseEl.href = url.toString();
+
+      window.document.head.appendChild(baseEl);
+    </script>
     <script async>
       window.allureReportDataReady = true;
     </script>

package/src/index.tsx

@@ -1,27 +1,30 @@
 import { ensureReportDataReady } from "@allurereport/web-commons";
 import { Spinner, SvgIcon, allureIcons } from "@allurereport/web-components";
 import "@allurereport/web-components/index.css";
+import { computed, useSignalEffect } from "@preact/signals";
 import clsx from "clsx";
 import { render } from "preact";
-import "preact/debug";
 import { useEffect, useState } from "preact/hooks";
 import "@/assets/scss/index.scss";
 import { Footer } from "@/components/Footer";
 import { Header } from "@/components/Header";
 import { ModalComponent } from "@/components/Modal";
 import { SectionSwitcher } from "@/components/SectionSwitcher";
-import { fetchEnvStats, fetchReportStats, getLocale, getTheme, waitForI18next } from "@/stores";
+import { fetchEnvStats, fetchReportStats, getLocale, waitForI18next } from "@/stores";
 import { fetchPieChartData } from "@/stores/chart";
 import { currentEnvironment, environmentsStore, fetchEnvironments } from "@/stores/env";
 import { fetchEnvInfo } from "@/stores/envInfo";
 import { fetchGlobals } from "@/stores/globals";
-import { getLayout, isLayoutLoading, layoutStore } from "@/stores/layout";
-import { handleHashChange, route } from "@/stores/router";
-import { currentSection, getSection } from "@/stores/sections";
+import { isLayoutLoading, layoutStore } from "@/stores/layout";
 import { fetchTestResult, fetchTestResultNav } from "@/stores/testResults";
 import { fetchEnvTreesData } from "@/stores/tree";
 import { isMac } from "@/utils/isMac";
 import { fetchQualityGateResults } from "./stores/qualityGate";
+import { testResultRoute } from "./stores/router";
+import { currentSection } from "./stores/sections";
+import { currentTrId } from "./stores/testResult";
+import { fetchTreeFiltersData } from "./stores/treeFilters/actions";
+import { migrateFilterParam } from "./stores/treeFilters/utils";
 import * as styles from "./styles.scss";
 
 const Loader = () => {
@@ -33,10 +36,12 @@ const Loader = () => {
   );
 };
 
+const isTestResultRoute = computed(() => testResultRoute.value.matches);
+
 const App = () => {
-  const className = styles[`layout-${currentSection.value !== "" ? currentSection.value : layoutStore.value}`];
+  const className = styles[`layout-${currentSection.value !== "default" ? currentSection.value : layoutStore.value}`];
   const [prefetched, setPrefetched] = useState(false);
-  const testResultId = route.value.params?.testResultId ?? null;
+
   const prefetchData = async () => {
     const fns = [
       ensureReportDataReady,
@@ -49,12 +54,7 @@ const App = () => {
     ];
 
     if (globalThis) {
-      fns.unshift(
-        getSection as () => Promise<void>,
-        getLocale,
-        getLayout as () => Promise<void>,
-        getTheme as () => Promise<void>,
-      );
+      fns.unshift(getLocale);
     }
 
     await waitForI18next;
@@ -75,22 +75,16 @@ const App = () => {
     prefetchData();
   }, [currentEnvironment.value]);
 
-  useEffect(() => {
-    if (testResultId) {
+  useSignalEffect(() => {
+    const testResultId = currentTrId.value;
+    if (isTestResultRoute.value && testResultId) {
       fetchTestResult(testResultId);
       fetchTestResultNav(currentEnvironment.value);
     }
-  }, [testResultId, currentEnvironment]);
+  });
 
   useEffect(() => {
-    const onHashChange = () => handleHashChange();
-
-    handleHashChange();
-    globalThis.addEventListener("hashchange", onHashChange);
-
-    return () => {
-      globalThis.removeEventListener("hashchange", onHashChange);
-    };
+    fetchTreeFiltersData();
   }, []);
 
   return (
@@ -108,10 +102,6 @@ const App = () => {
   );
 };
 
-export const openInNewTab = (path: string) => {
-  window.open(`#${path}`, "_blank");
-};
-
 const rootElement = document.getElementById("app");
 
 document.addEventListener("DOMContentLoaded", () => {
@@ -120,4 +110,6 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 });
 
+migrateFilterParam();
+
 render(<App />, rootElement);