@allurereport/web-awesome 3.0.0 → 3.1.0

package/dist/single/{app-6199dc1c2fd3bddc2526.js.LICENSE.txt → app-3ca67f29d0f1166c08ca.js.LICENSE.txt}

@@ -8,3 +8,10 @@
      * @namespace
      * @public
      */
+
+/**!
+ * Sortable 1.15.6
+ * @author	RubaXa   <trash@rubaxa.org>
+ * @author	owenm    <owen23355@gmail.com>
+ * @license MIT
+ */

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-6199dc1c2fd3bddc2526.js"
+  "main.js": "app-3ca67f29d0f1166c08ca.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -31,17 +31,17 @@
     "IE 11"
   ],
   "dependencies": {
-    "@allurereport/charts-api": "3.0.0",
-    "@allurereport/core-api": "3.0.0",
-    "@allurereport/plugin-api": "3.0.0",
-    "@allurereport/web-commons": "3.0.0",
-    "@allurereport/web-components": "3.0.0",
-    "@preact/signals": "^1.3.0",
+    "@allurereport/charts-api": "3.1.0",
+    "@allurereport/core-api": "3.1.0",
+    "@allurereport/plugin-api": "3.1.0",
+    "@allurereport/web-commons": "3.1.0",
+    "@allurereport/web-components": "3.1.0",
+    "@preact/signals": "^2.6.1",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "i18next": "^24.0.2",
     "md5": "^2.3.0",
-    "preact": "^10.24.0",
+    "preact": "^10.28.2",
     "prismjs": "^1.30.0",
     "reset.css": "^2.0.2"
   },

package/src/assets/scss/palette.scss

@@ -98,13 +98,13 @@
   --gray-neutral-0: #ffffffff;
   --gray-neutral-alpha-day-25: #36799b08;
   --gray-neutral-alpha-day-50: #1d4f810a;
-  --gray-neutral-alpha-day-75: #1658790f;
+  --gray-neutral-alpha-day-75: #165879f;
   --gray-neutral-alpha-day-100: #1d4f8114;
   --gray-neutral-alpha-day-150: #1a4c751a;
   --gray-neutral-alpha-day-200: #092f5d21;
   --gray-neutral-alpha-day-250: #0b305629;
   --gray-neutral-alpha-day-300: #05264d3d;
-  --gray-neutral-alpha-day-350: #07254654;
+  --gray-neutral-alpha-day-350: #072546547;
   --gray-neutral-alpha-day-400: #031c3a6b;
   --gray-neutral-alpha-day-450: #0316308f;
   --gray-neutral-alpha-day-500: #02132c99;
@@ -124,7 +124,7 @@
   --gray-neutral-alpha-night-200: #f5f9ffe8;
   --gray-neutral-alpha-night-250: #f2f7fde3;
   --gray-neutral-alpha-night-300: #ecf4fdd1;
-  --gray-neutral-alpha-night-350: #e3effdbd;
+  --gray-neutral-alpha-night-350: #e3efffbd;
   --gray-neutral-alpha-night-400: #deecfca6;
   --gray-neutral-alpha-night-450: #d2e4fe80;
   --gray-neutral-alpha-night-500: #d1e5ff73;
@@ -138,69 +138,69 @@
   --gray-neutral-alpha-night-950: #769ac108;
   --gray-neutral-alpha-day-850: #000714db;
   --gray-neutral-alpha-night-850: #afc5f31f;
-  --capella-day-base: #eb5c46ff;
-  --capella-day-darken-1: #e8452cff;
-  --capella-day-darken-2: #df3319ff;
-  --capella-day-darken-3: #cf2f17ff;
-  --capella-day-darken-4: #c62e16ff;
-  --capella-day-darken-5: #ba2b15ff;
-  --capella-day-darken-6: #a52612ff;
-  --capella-night-base: #ff8c7aff;
-  --capella-night-darken-1: #ff6b55ff;
-  --capella-night-darken-2: #f66751ff;
-  --capella-night-darken-3: #ff4b2fff;
-  --capella-night-darken-4: #f44c32ff;
-  --capella-night-darken-5: #e8452cff;
-  --capella-night-darken-6: #df3319ff;
-  --capella-night-darken-7: #c62e16ff;
-  --capella-day-darken-1-8: #e8452c14;
-  --capella-night-darken-5-12: #e8452c1f;
-  --capella-day-darken-1-16: #e8452c29;
-  --capella-day-darken-1-24: #e8452c3d;
-  --capella-night-darken-5-20: #e8452c33;
-  --capella-night-darken-5-28: #e8452c47;
-  --gliese-day-base: #eb4672ff;
-  --gliese-day-darken-1: #e82b5eff;
-  --gliese-day-darken-2: #df194eff;
-  --gliese-day-darken-3: #cf1648ff;
-  --gliese-day-darken-4: #c61645ff;
-  --gliese-day-darken-5: #bb1440ff;
-  --gliese-day-darken-6: #a61139ff;
-  --gliese-day-darken-1-8: #e82b5e14;
-  --gliese-day-darken-1-16: #e82b5e29;
-  --gliese-day-darken-1-24: #e82b5e3d;
-  --gliese-night-base: #ff7a9eff;
-  --gliese-night-darken-1: #ff5582ff;
-  --gliese-night-darken-2: #f6517dff;
-  --gliese-night-darken-3: #ff2f66ff;
-  --gliese-night-darken-4: #f43265ff;
-  --gliese-night-darken-5: #e82c5eff;
-  --gliese-night-darken-6: #df194eff;
-  --gliese-night-darken-7: #c61645ff;
-  --gliese-night-darken-5-12: #e82c5e1f;
-  --gliese-night-darken-5-20: #e82c5e33;
-  --gliese-night-darken-5-28: #e82c5e47;
-  --antares-day-base: #eb468bff;
-  --antares-day-darken-1: #e82c7aff;
-  --antares-day-darken-2: #df196bff;
-  --antares-day-darken-3: #cf1764ff;
-  --antares-day-darken-4: #c6165fff;
-  --antares-day-darken-5: #ba155aff;
-  --antares-day-darken-6: #a51250ff;
-  --antares-day-darken-1-8: #e82c7a14;
-  --antares-day-darken-1-16: #e82c7a29;
-  --antares-day-darken-1-24: #e82c7a3d;
-  --antares-night-base: #ff7ab1ff;
-  --antares-night-darken-1: #ff559cff;
-  --antares-night-darken-2: #f65195ff;
-  --antares-night-darken-3: #ff2f86ff;
-  --antares-night-darken-4: #f43283ff;
-  --antares-night-darken-5: #e82c7aff;
-  --antares-night-darken-6: #df196bff;
-  --antares-night-darken-7: #c6165fff;
-  --antares-night-darken-5-12: #e82c7a1f;
-  --antares-night-darken-5-20: #e82c7a33;
-  --antares-night-darken-5-28: #e82c7a47;
+  --capella-day-base: #eb5146ff;
+  --capella-day-darken-1: #e8392cff;
+  --capella-day-darken-2: #df2619ff;
+  --capella-day-darken-3: #cf2317ff;
+  --capella-day-darken-4: #c62216ff;
+  --capella-day-darken-5: #ba2015ff;
+  --capella-day-darken-6: #a51c12ff;
+  --capella-night-base: #ff584dff;
+  --capella-night-darken-1: #f55c51ff;
+  --capella-night-darken-2: #ff392bff;
+  --capella-night-darken-3: #f34033ff;
+  --capella-night-darken-4: #e8392cff;
+  --capella-night-darken-5: #ff1b0aff;
+  --capella-night-darken-6: #df2619ff;
+  --capella-night-darken-7: #c62216ff;
+  --capella-day-darken-1-8: #e8392c14;
+  --capella-night-darken-4-12: #e8392c1f;
+  --capella-day-darken-1-16: #e8392c29;
+  --capella-day-darken-1-24: #e8392c3d;
+  --capella-night-darken-4-20: #e8392c33;
+  --capella-night-darken-4-28: #e8392c47;
+  --gliese-day-base: #eb467dff;
+  --gliese-day-darken-1: #e82c6aff;
+  --gliese-day-darken-2: #df195bff;
+  --gliese-day-darken-3: #cf1753ff;
+  --gliese-day-darken-4: #c61651ff;
+  --gliese-day-darken-5: #ba154cff;
+  --gliese-day-darken-6: #a51243ff;
+  --gliese-day-darken-1-8: #e82c6a14;
+  --gliese-day-darken-1-16: #e82c6a29;
+  --gliese-day-darken-1-24: #e82c6a3d;
+  --gliese-night-base: #ff4d87ff;
+  --gliese-night-darken-1: #f55187ff;
+  --gliese-night-darken-2: #ff2b72ff;
+  --gliese-night-darken-3: #f33373ff;
+  --gliese-night-darken-4: #e82c6aff;
+  --gliese-night-darken-5: #ff0a5cff;
+  --gliese-night-darken-6: #df195bff;
+  --gliese-night-darken-7: #c61651ff;
+  --gliese-night-darken-4-12: #e82c6a1f;
+  --gliese-night-darken-4-20: #e82c6a33;
+  --gliese-night-darken-4-28: #e82c6a47;
+  --antares-day-base: #e846ebff;
+  --antares-day-darken-1: #e42ce8ff;
+  --antares-day-darken-2: #dc19dfff;
+  --antares-day-darken-3: #cb17cfff;
+  --antares-day-darken-4: #c316c6ff;
+  --antares-day-darken-5: #b715baff;
+  --antares-day-darken-6: #a312a5ff;
+  --antares-day-darken-1-8: #e42ce814;
+  --antares-day-darken-1-16: #e42ce829;
+  --antares-day-darken-1-24: #e42ce83d;
+  --antares-night-base: #fc4dffff;
+  --antares-night-darken-1: #f251f5ff;
+  --antares-night-darken-2: #fb2bffff;
+  --antares-night-darken-3: #f033f3ff;
+  --antares-night-darken-4: #e52ce8ff;
+  --antares-night-darken-5: #fb0affff;
+  --antares-night-darken-6: #dc19dfff;
+  --antares-night-darken-7: #c316c6ff;
+  --antares-night-darken-4-12: #e52ce81f;
+  --antares-night-darken-4-20: #e52ce833;
+  --antares-night-darken-4-28: #e52ce847;
   --atlas-day-base: #eb9b46ff;
   --atlas-day-darken-1: #e88d2cff;
   --atlas-day-darken-2: #df7f19ff;
@@ -211,17 +211,17 @@
   --atlas-day-darken-1-8: #e88d2c14;
   --atlas-day-darken-1-16: #e88d2c29;
   --atlas-day-darken-1-24: #e88d2c3d;
-  --atlas-night-base: #ffbf7aff;
-  --atlas-night-darken-1: #ffad55ff;
-  --atlas-night-darken-2: #f6a651ff;
-  --atlas-night-darken-3: #ff9a2fff;
-  --atlas-night-darken-4: #f49632ff;
-  --atlas-night-darken-5: #e88d2cff;
+  --atlas-night-base: #ffa94dff;
+  --atlas-night-darken-1: #f6a651ff;
+  --atlas-night-darken-2: #ff992bff;
+  --atlas-night-darken-3: #f49632ff;
+  --atlas-night-darken-4: #e88d2cff;
+  --atlas-night-darken-5: #ff890aff;
   --atlas-night-darken-6: #df7f19ff;
   --atlas-night-darken-7: #c67116ff;
-  --atlas-night-darken-5-12: #e88d2c1f;
-  --atlas-night-darken-5-20: #e88d2c33;
-  --atlas-night-darken-5-28: #e88d2c47;
+  --atlas-night-darken-4-12: #e88d2c1f;
+  --atlas-night-darken-4-20: #e88d2c33;
+  --atlas-night-darken-4-28: #e88d2c47;
   --rigel-day-base: #ebc746ff;
   --rigel-day-darken-1: #e8bf2cff;
   --rigel-day-darken-2: #dfb419ff;
@@ -232,17 +232,17 @@
   --rigel-day-darken-1-8: #e8bf2c14;
   --rigel-day-darken-1-16: #e8bf2c29;
   --rigel-day-darken-1-24: #e8bf2c3d;
-  --rigel-night-base: #ffe27aff;
-  --rigel-night-darken-1: #ffda55ff;
-  --rigel-night-darken-2: #f6d251ff;
-  --rigel-night-darken-3: #ffd22fff;
-  --rigel-night-darken-4: #f4ca32ff;
-  --rigel-night-darken-5: #e8bf2cff;
+  --rigel-night-base: #ffd84dff;
+  --rigel-night-darken-1: #f6d251ff;
+  --rigel-night-darken-2: #ffd12bff;
+  --rigel-night-darken-3: #f4ca32ff;
+  --rigel-night-darken-4: #e8bf2cff;
+  --rigel-night-darken-5: #ffca0aff;
   --rigel-night-darken-6: #dfb419ff;
   --rigel-night-darken-7: #c6a016ff;
-  --rigel-night-darken-5-12: #e8bf2c1f;
-  --rigel-night-darken-5-20: #e8bf2c33;
-  --rigel-night-darken-5-28: #e8bf2c47;
+  --rigel-night-darken-4-12: #e8bf2c1f;
+  --rigel-night-darken-4-20: #e8bf2c33;
+  --rigel-night-darken-4-28: #e8bf2c47;
   --castor-day-base: #09a232ff;
   --castor-day-darken-1: #099337ff;
   --castor-day-darken-2: #098632ff;
@@ -253,9 +253,9 @@
   --castor-day-darken-1-8: #09933714;
   --castor-day-darken-1-16: #09933729;
   --castor-day-darken-1-24: #0993373d;
-  --castor-night-base: #40dd75ff;
-  --castor-night-darken-1: #28d963ff;
-  --castor-night-darken-2: #22c258ff;
+  --castor-night-base: #45e57bff;
+  --castor-night-darken-1: #2ae167ff;
+  --castor-night-darken-2: #1ecf59ff;
   --castor-night-darken-3: #40bf6aff;
   --castor-night-darken-4: #39ac60ff;
   --castor-night-darken-5: #29a352ff;
@@ -274,9 +274,9 @@
   --mirach-day-darken-1-8: #09937814;
   --mirach-day-darken-1-16: #09937829;
   --mirach-day-darken-1-24: #0993783d;
-  --mirach-night-base: #40ddbeff;
-  --mirach-night-darken-1: #28d9b6ff;
-  --mirach-night-darken-2: #22c2a2ff;
+  --mirach-night-base: #45e5c5ff;
+  --mirach-night-darken-1: #2ae1bcff;
+  --mirach-night-darken-2: #1ecfacff;
   --mirach-night-darken-3: #40bfa6ff;
   --mirach-night-darken-4: #39ac95ff;
   --mirach-night-darken-5: #29a38bff;
@@ -295,10 +295,10 @@
   --aldebaran-day-darken-1-8: #2c67e814;
   --aldebaran-day-darken-1-16: #2c67e829;
   --aldebaran-day-darken-1-24: #2c67e83d;
-  --aldebaran-night-base: #99bdffff;
-  --aldebaran-night-darken-1: #70a2ffff;
+  --aldebaran-night-base: #7aa8ffff;
+  --aldebaran-night-darken-1: #5590ffff;
   --aldebaran-night-darken-2: #518af6ff;
-  --aldebaran-night-darken-3: #4788ffff;
+  --aldebaran-night-darken-3: #2f78ffff;
   --aldebaran-night-darken-4: #3276f4ff;
   --aldebaran-night-darken-5: #2c6de8ff;
   --aldebaran-night-darken-6: #195edfff;
@@ -316,10 +316,10 @@
   --sirius-day-darken-1-8: #2c99e814;
   --sirius-day-darken-1-16: #2c99e829;
   --sirius-day-darken-1-24: #2c99e83d;
-  --sirius-night-base: #99d4ffff;
-  --sirius-night-darken-1: #70c4ffff;
+  --sirius-night-base: #7ac7ffff;
+  --sirius-night-darken-1: #55b8ffff;
   --sirius-night-darken-2: #51b0f6ff;
-  --sirius-night-darken-3: #47b3ffff;
+  --sirius-night-darken-3: #2fa8ffff;
   --sirius-night-darken-4: #32a3f4ff;
   --sirius-night-darken-5: #2c99e8ff;
   --sirius-night-darken-6: #198cdfff;
@@ -337,10 +337,10 @@
   --betelgeuse-day-darken-1-8: #7a2ce814;
   --betelgeuse-day-darken-1-16: #7a2ce829;
   --betelgeuse-day-darken-1-24: #7a2ce83d;
-  --betelgeuse-night-base: #c399ffff;
-  --betelgeuse-night-darken-1: #ac70ffff;
+  --betelgeuse-night-base: #b17affff;
+  --betelgeuse-night-darken-1: #9c55ffff;
   --betelgeuse-night-darken-2: #9551f6ff;
-  --betelgeuse-night-darken-3: #9447ffff;
+  --betelgeuse-night-darken-3: #862fffff;
   --betelgeuse-night-darken-4: #8332f4ff;
   --betelgeuse-night-darken-5: #7a2ce8ff;
   --betelgeuse-night-darken-6: #6b19dfff;
@@ -358,10 +358,10 @@
   --skat-day-darken-1-8: #b92ce814;
   --skat-day-darken-1-16: #b92ce829;
   --skat-day-darken-1-24: #b92ce83d;
-  --skat-night-base: #e599ffff;
-  --skat-night-darken-1: #db70ffff;
+  --skat-night-base: #dd7affff;
+  --skat-night-darken-1: #d455ffff;
   --skat-night-darken-2: #cc51f6ff;
-  --skat-night-darken-3: #d147ffff;
+  --skat-night-darken-3: #cb2fffff;
   --skat-night-darken-4: #c432f4ff;
   --skat-night-darken-5: #b82ce8ff;
   --skat-night-darken-6: #ae19dfff;

package/src/assets/scss/vars.scss

@@ -1,6 +1,9 @@
 :root {
   --shadow-small: 0px 2px 10px 0px rgba(48, 57, 64, 0.08);
+  --shadow-small-01: 0px 1px 2px 0px rgba(16, 24, 40, 0.1);
+  --shadow-small-02: 0px 1px 3px 0px rgba(16, 24, 40, 0.06);
   --shadow-medium: 0px 8px 24px 0px rgba(48, 57, 64, 0.12);
+  --shadow-large: 0px 2px 24px 0px rgba(48, 57, 64, 0.12);
   --shadow-raised: 0px 2px 6px 0px rgba(48, 57, 64, 0.08);
 
   --color-change-transition-duration: 0.15s;

package/src/components/BaseLayout/index.tsx

@@ -1,7 +1,7 @@
 import { Loadable, PageLoader } from "@allurereport/web-components";
 import MainReport from "@/components/MainReport";
 import TestResult from "@/components/TestResult";
-import { route } from "@/stores/router";
+import { testResultRoute } from "@/stores/router";
 import { testResultStore } from "@/stores/testResults";
 import { treeStore } from "@/stores/tree";
 import * as styles from "./styles.scss";
@@ -11,30 +11,34 @@ export type BaseLayoutProps = {
 };
 
 export const BaseLayout = () => {
-  const testResultId = route.value.params?.testResultId ?? null;
+  const { matches, params } = testResultRoute.value;
 
-  const content = testResultId ? (
-    <Loadable
-      source={testResultStore}
-      renderLoader={() => <PageLoader />}
-      transformData={(data) => data[testResultId]}
-      renderData={(testResult) => (
-        <>
-          <div className={styles.wrapper} key={testResult?.id}>
-            <TestResult testResult={testResult} />
-          </div>
-        </>
-      )}
-    />
-  ) : (
-    <div className={styles.wrapper}>
-      <Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <MainReport />} />
-    </div>
-  );
+  if (matches) {
+    const testResultId = params.testResultId;
+
+    return (
+      <div className={styles.layout} data-testid="base-layout">
+        <Loadable
+          source={testResultStore}
+          renderLoader={() => <PageLoader />}
+          transformData={(data) => data[testResultId]}
+          renderData={(testResult) => (
+            <>
+              <div className={styles.wrapper} key={testResult?.id}>
+                <TestResult testResult={testResult} />
+              </div>
+            </>
+          )}
+        />
+      </div>
+    );
+  }
 
   return (
     <div className={styles.layout} data-testid="base-layout">
-      {content}
+      <div className={styles.wrapper}>
+        <Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <MainReport />} />
+      </div>
     </div>
   );
 };

package/src/components/BaseLayout/styles.scss

@@ -6,6 +6,7 @@
   font-size: 14px;
   height: 100%;
   overflow: auto;
+  scrollbar-width: thin;
 }
 
 .wrapper {

package/src/components/Charts/index.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { ChartType } from "@allurereport/charts-api";
 import { type UIChartData } from "@allurereport/web-commons";
+import { themeStore } from "@allurereport/web-commons";
 import {
   CurrentStatusChartWidget,
   DurationDynamicsChartWidget,
@@ -20,13 +21,15 @@ import {
   TrSeveritiesChartWidget,
   TreeMapChartWidget,
 } from "@allurereport/web-components";
+import { computed } from "@preact/signals";
 import { useEffect } from "preact/hooks";
-import { themeStore } from "@/stores";
 import { chartsStore, fetchChartsData } from "@/stores/chart";
 import { currentEnvironment } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
 import * as styles from "./styles.scss";
 
+const currentTheme = computed(() => themeStore.value.current);
+
 const getChartWidgetByType = (
   chartData: UIChartData,
   { t, empty }: Record<string, (key: string, options?: any) => string>,
@@ -210,7 +213,7 @@ export const Charts = () => {
   }, []);
 
   return (
-    <ThemeProvider theme={themeStore.value}>
+    <ThemeProvider theme={currentTheme.value}>
       <Loadable
         source={chartsStore}
         renderLoader={() => <PageLoader />}

package/src/components/Footer/FooterVersion.tsx

@@ -1,23 +1,29 @@
 import { getReportOptions } from "@allurereport/web-commons";
 import { Text } from "@allurereport/web-components";
-import { useEffect, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
 import type { AwesomeReportOptions } from "types";
 import { currentLocaleIso } from "@/stores";
 import * as styles from "./styles.scss";
 
 export const FooterVersion = () => {
-  const [createdAt, setCreatedAt] = useState<number | null>(null);
-  const [currentVersion, setCurrentVersion] = useState<string>();
-
-  useEffect(() => {
+  const [createdAt] = useState(() => {
     const reportOptions = getReportOptions<AwesomeReportOptions>();
     if (reportOptions?.createdAt) {
-      setCreatedAt(Number(reportOptions.createdAt));
+      return Number(reportOptions.createdAt);
     }
+
+    return undefined;
+  });
+
+  const [currentVersion] = useState<string>(() => {
+    const reportOptions = getReportOptions<AwesomeReportOptions>();
+
     if (reportOptions?.allureVersion) {
-      setCurrentVersion(reportOptions.allureVersion as string);
+      return reportOptions.allureVersion as string;
     }
-  }, []);
+
+    return undefined;
+  });
 
   const formattedCreatedAt = new Date(createdAt as number).toLocaleDateString(currentLocaleIso.value as string, {
     month: "numeric",

package/src/components/Header/index.tsx

@@ -1,10 +1,11 @@
+import { computed } from "@preact/signals";
 import type { ClassValue } from "clsx";
 import clsx from "clsx";
 import { HeaderControls } from "@/components/HeaderControls";
 import { SectionPicker } from "@/components/SectionPicker";
 import { TrBreadcrumbs } from "@/components/TestResult/TrHeader/TrBreadcrumbs";
-import { route } from "@/stores/router";
-import { availableSections } from "@/stores/sections";
+import { testResultRoute } from "@/stores/router";
+import { currentTrId } from "@/stores/testResult";
 import { testResultStore } from "@/stores/testResults";
 import { CiInfo } from "./CiInfo";
 import * as styles from "./styles.scss";
@@ -13,14 +14,15 @@ interface HeaderProps {
   className?: ClassValue;
 }
 
-export const Header = ({ className }: HeaderProps) => {
-  const testResultId = route.value.params?.testResultId;
+const isTestResultRoute = computed(() => testResultRoute.value.matches);
+const testResult = computed(() => testResultStore.value?.data?.[currentTrId.value]);
 
+export const Header = ({ className }: HeaderProps) => {
   return (
     <div className={clsx(styles.above, className)}>
-      {Boolean(availableSections.value?.length) && <SectionPicker />}
-      {!testResultId && <CiInfo />}
-      {testResultId && <TrBreadcrumbs testResult={testResultStore.value?.data?.[testResultId]} />}
+      <SectionPicker />
+      {!isTestResultRoute.value && <CiInfo />}
+      {isTestResultRoute.value && <TrBreadcrumbs testResult={testResult.value} />}
       <HeaderControls className={styles.right} />
     </div>
   );

package/src/components/HeaderControls/index.tsx

@@ -1,20 +1,23 @@
+import { themeStore, toggleUserTheme } from "@allurereport/web-commons";
 import { LanguagePicker, ThemeButton } from "@allurereport/web-components";
+import { computed } from "@preact/signals";
 import { EnvironmentPicker } from "@/components/EnvironmentPicker";
 import ToggleLayout from "@/components/ToggleLayout";
 import { currentLocale, setLocale } from "@/stores/locale";
-import { getTheme, themeStore, toggleTheme } from "@/stores/theme";
 
 interface HeaderControlsProps {
   className?: string;
 }
 
+const selectedTheme = computed(() => themeStore.value.selected);
+
 export const HeaderControls = ({ className }: HeaderControlsProps) => {
   return (
     <div className={className}>
       <EnvironmentPicker />
       <LanguagePicker locale={currentLocale.value} setLocale={setLocale} />
       <ToggleLayout />
-      <ThemeButton theme={themeStore.value} toggleTheme={toggleTheme} getTheme={getTheme} />
+      <ThemeButton theme={selectedTheme.value} toggleTheme={toggleUserTheme} />
     </div>
   );
 };

package/src/components/MainReport/styles.scss

@@ -9,6 +9,7 @@
   overflow: auto;
   height: 100%;
   border-radius: 0;
+  scrollbar-width: thin;
 }
 
 .main-report-tabs {

package/src/components/Metadata/index.tsx

@@ -1,10 +1,11 @@
-import { Button, Menu, Text, allureIcons } from "@allurereport/web-components";
+import { Button, ButtonLink, Menu, Text, allureIcons } from "@allurereport/web-components";
 import clsx from "clsx";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import { MetadataButton } from "@/components/MetadataButton";
 import type { MetadataProps } from "@/components/ReportMetadata";
 import { useI18n } from "@/stores/locale";
+import { getTagsFilterUrl } from "@/stores/treeFilters/utils";
 import { copyToClipboard } from "@/utils/copyToClipboard";
 import * as styles from "./styles.scss";
 
@@ -50,8 +51,22 @@ export const Metadata: FunctionalComponent<MetadataProps> = ({ envInfo }) => {
   );
 };
 
-const MetadataTooltip = (props: { value: string }) => {
-  const { value } = props;
+const OpenFilterUrlButton: FunctionalComponent<{ url: string }> = ({ url }) => {
+  const { t } = useI18n("filters");
+
+  return (
+    <ButtonLink
+      href={url}
+      target="_blank"
+      style="ghost"
+      icon={allureIcons.lineGeneralLinkExternal}
+      text={t("goto_filter")}
+    />
+  );
+};
+
+const MetadataTooltip = (props: { value: string; name: string }) => {
+  const { value, name } = props;
   const { t } = useI18n("ui");
 
   return (
@@ -59,6 +74,7 @@ const MetadataTooltip = (props: { value: string }) => {
       <div className={styles["metadata-tooltip-value"]}>
         <Text>{value}</Text>
       </div>
+      {name === "tag" && <OpenFilterUrlButton url={getTagsFilterUrl([value])} />}
       <Button
         style={"outline"}
         icon={allureIcons.lineGeneralCopy3}
@@ -70,9 +86,10 @@ const MetadataTooltip = (props: { value: string }) => {
 };
 
 const MetaDataKeyLabel: FunctionalComponent<{
+  name: string;
   size?: "s" | "m";
   value: string;
-}> = ({ size = "s", value }) => {
+}> = ({ name, size = "s", value }) => {
   return (
     <Menu
       size="xl"
@@ -85,7 +102,7 @@ const MetaDataKeyLabel: FunctionalComponent<{
       )}
     >
       <Menu.Section>
-        <MetadataTooltip value={value} />
+        <MetadataTooltip value={value} name={name} />
       </Menu.Section>
     </Menu>
   );
@@ -110,12 +127,12 @@ const MetadataKeyValue: FunctionalComponent<{
       {values?.length ? (
         <div className={styles["report-metadata-values"]} data-testid={"metadata-item-value"}>
           {values.map((item) => (
-            <MetaDataKeyLabel key={item} value={item} />
+            <MetaDataKeyLabel key={item} value={item} name={title} />
           ))}
         </div>
       ) : (
         <div className={styles["report-metadata-values"]} data-testid={"metadata-item-value"}>
-          <MetaDataKeyLabel value={value} />
+          <MetaDataKeyLabel value={value} name={title} />
         </div>
       )}
     </div>