From eb37772697173785b100483b64bac017754de992 Mon Sep 17 00:00:00 2001
From: Todti <hello@iamtodt.com>
Date: Tue, 18 Feb 2025 15:38:01 +0100
Subject: [PATCH] split improvements and bugfixes

---
 packages/web-components/src/components/Tree/Tree.tsx  |  7 ++++---
 .../web-components/src/components/Tree/TreeHeader.tsx | 11 ++++++-----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/web-components/src/components/Tree/Tree.tsx b/packages/web-components/src/components/Tree/Tree.tsx
index 2aa24a0..062cacb 100644
--- a/packages/web-components/src/components/Tree/Tree.tsx
+++ b/packages/web-components/src/components/Tree/Tree.tsx
@@ -1,4 +1,5 @@
 import type { Statistic } from "@allurereport/core-api";
+import type { Signal } from "@preact/signals";
 import cx from "clsx";
 import type { AllureAwesomeRecursiveTree, AllureAwesomeStatus, TreeFiltersState } from "global";
 import type { FunctionComponent } from "preact";
@@ -18,8 +19,8 @@ interface TreeProps {
   toggleTree: (id: string) => void;
   navigateTo: (id: string) => void;
   routeId?: string;
-  statsStore: StoreSignalState<Statistic>;
-  treeFiltersStore: TreeFiltersState;
+  statsStore: Signal<StoreSignalState<Statistic>>;
+  treeFiltersStore: Signal<TreeFiltersState>;
 }
 
 export const Tree: FunctionComponent<TreeProps> = ({
@@ -92,7 +93,7 @@ export const Tree: FunctionComponent<TreeProps> = ({
     <div className={styles.tree}>
       {name && (
         <TreeHeader
-          treeFiltersStore={treeFiltersStore}
+          treeFiltersStore={treeFiltersStore.value}
           statsStore={statsStore}
           categoryTitle={name}
           isOpened={isOpened}
diff --git a/packages/web-components/src/components/Tree/TreeHeader.tsx b/packages/web-components/src/components/Tree/TreeHeader.tsx
index 02dcc61..b231444 100644
--- a/packages/web-components/src/components/Tree/TreeHeader.tsx
+++ b/packages/web-components/src/components/Tree/TreeHeader.tsx
@@ -1,8 +1,10 @@
 import { type Statistic, statusesList } from "@allurereport/core-api";
+import type { Signal } from "@preact/signals";
 import { clsx } from "clsx";
 import type { TreeFiltersState } from "global";
 import { type FunctionComponent } from "preact";
 import { ArrowButton } from "@/components/ArrowButton";
+import type { StoreSignalState } from "@/components/Loadable";
 import { Loadable } from "@/components/Loadable";
 import { Text } from "@/components/Typography";
 import styles from "./styles.scss";
@@ -12,7 +14,7 @@ interface TreeHeaderProps {
   categoryTitle: string;
   isOpened: boolean;
   toggleTree: () => void;
-  statsStore: any;
+  statsStore: Signal<StoreSignalState<Statistic>>;
   treeFiltersStore: TreeFiltersState;
 }
 
@@ -50,10 +52,9 @@ export const TreeHeader: FunctionComponent<TreeHeaderProps> = ({
         const treeHeaderBar = statistic
           ? statusesList
               .map((status) => ({ status, value: statistic[status] }))
-              .filter(
-                ({ status, value }) =>
-                  value !== undefined && (statusFilter === "total" || (statusFilter === status && value > 0)),
-              )
+              .filter(({ status, value }) => {
+                return value !== undefined && (statusFilter === "total" || (statusFilter === status && value > 0));
+              })
               .map(({ status, value }) => {
                 const className = clsx(styles["tree-header-bar-item"], styles[status]);
                 const style = { flexGrow: value };