fix(frontend): fix hide zeros filter

src/frontend/src/lib/components/tokens/TokensDisplayHandler.svelte

@@ -4,24 +4,36 @@
 	import { showZeroBalances } from '$lib/derived/settings.derived';
 	import type { TokenUi } from '$lib/types/token';
 	import type { TokenUiOrGroupUi } from '$lib/types/token-group';
-	import { groupTokensByTwin } from '$lib/utils/token-group.utils';
+	import { groupTokensByTwin, isTokenUiGroup } from '$lib/utils/token-group.utils';
 
 	// We start it as undefined to avoid showing an empty list before the first update.
 	export let tokens: TokenUiOrGroupUi[] | undefined = undefined;
 
-	let sortedTokens: TokenUi[];
-	$: sortedTokens = $combinedDerivedSortedNetworkTokensUi.filter(
-		({ balance, usdBalance }) => Number(balance ?? 0n) || (usdBalance ?? 0) || $showZeroBalances
-	);
-
 	let groupedTokens: TokenUiOrGroupUi[];
-	$: groupedTokens = groupTokensByTwin(sortedTokens);
+	$: groupedTokens = groupTokensByTwin($combinedDerivedSortedNetworkTokensUi);
+
+	let sortedTokensOrGroups: TokenUiOrGroupUi[];
+	$: {
+		const hasBalance = (token: TokenUiOrGroupUi) => {
+			const checks = [
+				() => Number(token.balance ?? 0n) !== 0,
+				() => token.usdBalance && token.usdBalance !== 0,
+				() => $showZeroBalances
+			];
+
+			return checks.some((check) => check());
+		};
+
+		sortedTokensOrGroups = groupedTokens.filter((t: TokenUiOrGroupUi) =>
+			isTokenUiGroup(t) ? t.tokens.some((tok: TokenUi) => hasBalance(tok)) : hasBalance(t)
+		);
+	}
 
-	const updateTokensToDisplay = () => (tokens = [...groupedTokens]);
+	const updateTokensToDisplay = () => (tokens = [...sortedTokensOrGroups]);
 
 	const debounceUpdateTokensToDisplay = debounce(updateTokensToDisplay, 500);
 
-	$: sortedTokens, debounceUpdateTokensToDisplay();
+	$: sortedTokensOrGroups, debounceUpdateTokensToDisplay();
 </script>
 
 <slot />