@allurereport/web-awesome 3.0.0 → 3.0.1

package/dist/single/manifest.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "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.0.1",
+    "@allurereport/core-api": "3.0.1",
+    "@allurereport/plugin-api": "3.0.1",
+    "@allurereport/web-commons": "3.0.1",
+    "@allurereport/web-components": "3.0.1",
+    "@preact/signals": "^2.5.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/components/ReportBody/Filters.tsx

@@ -1,6 +1,17 @@
 import { Button, Menu, Toggle, TooltipWrapper, allureIcons } from "@allurereport/web-components";
+import { computed } from "@preact/signals";
+import { For } from "@preact/signals/utils";
+import { useEffect } from "preact/hooks";
 import { useI18n } from "@/stores/locale";
-import { type TreeFilters, setTreeFilter, treeFiltersStore } from "@/stores/tree";
+import {
+  type TreeFilters,
+  setFilters,
+  setTestTypeFilter,
+  setTransitionFilter,
+  testTypeFilters,
+  transitionFilters,
+} from "@/stores/treeFilters";
+import { filtersList } from "@/stores/treeFilters/constants";
 import * as styles from "./styles.scss";
 
 const filterIcons: Record<TreeFilters, string> = {
@@ -12,45 +23,64 @@ const filterIcons: Record<TreeFilters, string> = {
   malfunctioned: allureIcons.lineAlertsMalfunctioned,
 };
 
-const MENU_KEYS = ["flaky", "retry", "new", "fixed", "regressed", "malfunctioned"] as TreeFilters[];
+const FilterItem = (props: { filter: TreeFilters; value: boolean; onChange: (value: boolean) => void }) => {
+  const { filter, value, onChange } = props;
+  const { t: tooltip } = useI18n("filters.description");
+  const { t } = useI18n("filters");
+
+  return (
+    <TooltipWrapper data-testid="filter-tooltip" tooltipText={tooltip(filter)}>
+      <Menu.Item
+        closeMenuOnClick={false}
+        ariaLabel={t("enable-filter", { filter: t(filter) })}
+        onClick={() => onChange(!value)}
+        leadingIcon={filterIcons[filter]}
+        rightSlot={
+          <div className={styles.filterToggle}>
+            <Toggle
+              focusable={false}
+              value={value}
+              label={t("enable-filter", { filter: t(filter) })}
+              data-testid={`${filter}-filter`}
+              onChange={(changeValue) => onChange(changeValue)}
+            />
+          </div>
+        }
+      >
+        {t(filter)}
+      </Menu.Item>
+    </TooltipWrapper>
+  );
+};
+
+const hasFilter = computed(
+  () => transitionFilters.value.some(([, value]) => value) || testTypeFilters.value.some(([, value]) => value),
+);
 
 export const Filters = () => {
   const { t } = useI18n("filters");
-  const { t: tooltip } = useI18n("filters.description");
-  const hasFilter = MENU_KEYS.some((key) => treeFiltersStore.value.filter[key]);
 
-  const renderFilterItem = (filter: TreeFilters, value: boolean) => {
-    return (
-      <TooltipWrapper data-testid="filter-tooltip" tooltipText={tooltip(filter)}>
-        <Menu.Item
-          closeMenuOnClick={false}
-          ariaLabel={t("enable-filter", { filter: t(filter) })}
-          onClick={() => {
-            setTreeFilter(filter, !value);
-          }}
-          leadingIcon={filterIcons[filter]}
-          rightSlot={
-            <div className={styles.filterToggle}>
-              <Toggle
-                focusable={false}
-                value={value}
-                label={t("enable-filter", { filter: t(filter) })}
-                data-testid={`${filter}-filter`}
-                onChange={(changeValue) => setTreeFilter(filter, changeValue)}
-              />
-            </div>
-          }
-        >
-          {t(filter)}
-        </Menu.Item>
-      </TooltipWrapper>
-    );
-  };
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const filtersParams = params.getAll("filter");
+
+    if (filtersParams.length > 0) {
+      const activeFilters = filtersList.reduce(
+        (acc, key) => ({
+          ...acc,
+          [key]: filtersParams.includes(key),
+        }),
+        {} as Record<string, boolean>,
+      );
+
+      setFilters(activeFilters);
+    }
+  }, []);
 
   return (
     <Menu
       menuTrigger={({ isOpened, onClick }) => (
-        <div className={hasFilter && styles.filtersBtnWithFilters}>
+        <div className={hasFilter.value && styles.filtersBtnWithFilters}>
           <Button
             icon={allureIcons.lineGeneralSettings1}
             text={t("more-filters")}
@@ -63,8 +93,29 @@ export const Filters = () => {
         </div>
       )}
     >
+      <Menu.Section>
+        <For each={testTypeFilters}>
+          {([filter, value]) => (
+            <FilterItem
+              key={filter}
+              filter={filter}
+              value={value}
+              onChange={(newValue) => setTestTypeFilter(filter, newValue)}
+            />
+          )}
+        </For>
+      </Menu.Section>
       <Menu.Section data-testid="filters-menu">
-        {MENU_KEYS.map((key: TreeFilters) => renderFilterItem(key, treeFiltersStore.value.filter[key]))}
+        <For each={transitionFilters}>
+          {([filter, value]) => (
+            <FilterItem
+              key={filter}
+              filter={filter}
+              value={value}
+              onChange={(newValue) => setTransitionFilter(filter, newValue)}
+            />
+          )}
+        </For>
       </Menu.Section>
     </Menu>
   );

package/src/components/ReportBody/HeaderActions.tsx

@@ -1,12 +1,12 @@
 import { SearchBox } from "@allurereport/web-components";
 import { useI18n } from "@/stores/locale";
-import { setTreeQuery, treeFiltersStore } from "@/stores/tree";
+import { setTreeQuery, treeQuery } from "@/stores/treeFilters";
 import { Filters } from "./Filters";
 import * as styles from "./styles.scss";
 
 const Search = () => {
-  const { query } = treeFiltersStore.value;
   const { t } = useI18n("search");
+  const query = treeQuery.value;
 
   return <SearchBox placeholder={t("search-placeholder")} value={query} onChange={setTreeQuery} />;
 };

package/src/components/ReportBody/SortBy.tsx

@@ -1,12 +1,8 @@
-import { DropdownButton, allureIcons } from "@allurereport/web-components";
-import { Link } from "@allurereport/web-components";
-import { Menu } from "@allurereport/web-components";
-import { SvgIcon } from "@allurereport/web-components";
-import { Text } from "@allurereport/web-components";
+import { DropdownButton, Link, Menu, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import clsx from "clsx";
 import type { ComponentChildren } from "preact";
 import { useI18n } from "@/stores/locale";
-import { setTreeDirection, setTreeSortBy, treeFiltersStore } from "@/stores/tree";
+import { setTreeDirection, setTreeSortBy, treeDirection, treeSortBy } from "@/stores/treeFilters";
 import * as styles from "./styles.scss";
 
 const BtnWrapper = ({ children }: { children: ComponentChildren }) => {
@@ -17,7 +13,8 @@ export const SortBy = () => {
   const { t: sortByLocale } = useI18n("sort-by");
   const { t: sortByValuesLocale } = useI18n("sort-by.values");
   const { t: sortByDirectionsLocale } = useI18n("sort-by.directions");
-  const { sortBy, direction } = treeFiltersStore.value;
+  const sortBy = treeSortBy.value;
+  const direction = treeDirection.value;
 
   const displayedSortByValue = sortByValuesLocale(sortBy);
   const displayedDirection = sortByDirectionsLocale(`${sortBy}-${direction}-short`);

package/src/components/ReportBody/index.tsx

@@ -3,8 +3,8 @@ import { Counter, Loadable } from "@allurereport/web-components";
 import { reportStatsStore, statsByEnvStore } from "@/stores";
 import { currentEnvironment } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
-import { setTreeStatus, treeFiltersStore } from "@/stores/tree";
-import { Tab, Tabs, TabsList, useTabsContext } from "../Tabs";
+import { setTreeStatus, treeStatus } from "@/stores/treeFilters";
+import { ReportTab, ReportTabsList } from "../ReportTabs";
 import { TreeList } from "../Tree";
 import { HeaderActions } from "./HeaderActions";
 import { SortBy } from "./SortBy";
@@ -15,13 +15,12 @@ const ALL_TAB = "total";
 
 const Header = () => {
   const { t } = useI18n("statuses");
-  const { currentTab, setCurrentTab } = useTabsContext();
 
   return (
     <header className={styles.header}>
       <HeaderActions />
       <div className={styles.headerRow}>
-        <TabsList>
+        <ReportTabsList>
           <Loadable
             source={statsByEnvStore}
             renderData={(stats) => {
@@ -31,29 +30,28 @@ const Header = () => {
                   return { status, value: currentEnv[status] };
                 })
                 .filter(({ value }) => value);
-              const isStatListHaveCurrentTab = statList.filter(({ status }) => status === currentTab);
-              if (!isStatListHaveCurrentTab.length && currentTab !== "total") {
-                setCurrentTab("total");
+              const isStatListHaveCurrentTab = statList.filter(({ status }) => status === treeStatus.value);
+              if (!isStatListHaveCurrentTab.length && treeStatus.value !== "total") {
                 setTreeStatus("total");
               }
 
               const allStatuses = statList.map(({ status, value }) => (
-                <Tab data-testid={`tab-${status}`} key={status} id={status}>
+                <ReportTab data-testid={`tab-${status}`} key={status} id={status}>
                   {capitalize(t(status) ?? status)} <Counter count={value} size="s" status={status} />
-                </Tab>
+                </ReportTab>
               ));
 
               return (
                 <>
-                  <Tab data-testid="tab-all" id={ALL_TAB}>
+                  <ReportTab data-testid="tab-all" id={ALL_TAB}>
                     {capitalize(t("total"))} <Counter count={currentEnv?.total ?? 0} size="s" />
-                  </Tab>
+                  </ReportTab>
                   {allStatuses}
                 </>
               );
             }}
           />
-        </TabsList>
+        </ReportTabsList>
         <SortBy />
       </div>
     </header>
@@ -69,14 +67,11 @@ const Body = () => {
 };
 
 export const ReportBody = () => {
-  const initialTab = treeFiltersStore.value.status;
   return (
     <ReportContentProvider>
       <section>
-        <Tabs initialTab={initialTab}>
-          <Header />
-          <Body />
-        </Tabs>
+        <Header />
+        <Body />
       </section>
     </ReportContentProvider>
   );

package/src/components/ReportTabs/index.tsx

@@ -0,0 +1,37 @@
+import { Text } from "@allurereport/web-components";
+import { useComputed } from "@preact/signals";
+import { type ComponentChildren } from "preact";
+import { useCallback } from "preact/hooks";
+import { setTreeStatus, treeStatus } from "@/stores/treeFilters";
+import type { AwesomeStatus } from "../../../types.js";
+import * as styles from "./styles.scss";
+
+export const ReportTabsList = (props: { children: ComponentChildren }) => {
+  return <div className={styles.tabsList}>{props.children}</div>;
+};
+
+export const ReportTab = (props: { id: AwesomeStatus; children: ComponentChildren }) => {
+  const { id, children, ...rest } = props;
+  const isCurrentTab = useComputed(() => treeStatus.value === id);
+
+  const handleCurrentTabClick = useCallback(() => {
+    setTreeStatus("total");
+  }, []);
+
+  const handleTabClick = useCallback(() => {
+    setTreeStatus(id);
+  }, [id]);
+
+  return (
+    <button
+      {...rest}
+      className={styles.tab}
+      onClick={isCurrentTab.value ? handleCurrentTabClick : handleTabClick}
+      aria-current={isCurrentTab.value || undefined}
+    >
+      <Text type="paragraph" size="m" bold>
+        {children}
+      </Text>
+    </button>
+  );
+};

package/src/components/SplitLayout/index.tsx

@@ -1,8 +1,6 @@
 import { Loadable, PageLoader, Text } from "@allurereport/web-components";
 import type { JSX } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
-import { Footer } from "@/components/Footer";
-import { Header } from "@/components/Header";
 import MainReport from "@/components/MainReport";
 import SideBySide from "@/components/SideBySide";
 import TestResult from "@/components/TestResult";

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

@@ -7,13 +7,7 @@ const TrStepsEmpty = () => {
   return (
     <div className={styles["test-steps-empty"]}>
       <div className={styles["test-steps-empty-wrapper"]}>
-        <SvgIcon
-          size={"m"}
-          width={"32px"}
-          height={"32px"}
-          id={allureIcons.lineDevCodeSquare}
-          className={styles["test-steps-empty-icon"]}
-        />
+        <SvgIcon size={"xl"} id={allureIcons.lineDevCodeSquare} className={styles["test-steps-empty-icon"]} />
         <Text className={styles["test-steps-empty-text"]}>{t("no-test-steps-results")}</Text>
       </div>
     </div>