From 12918b2ffdc3d1396f2d64287ad3a9c4c1464010 Mon Sep 17 00:00:00 2001
From: Cedric van Putten <github@cedric.dev>
Date: Wed, 16 Oct 2024 13:13:51 +0200
Subject: [PATCH] fix(ui): realign filtered bundle stats and only render when
 filters are enabled

---
 .../expo-atlas-ui/app/(atlas)/[bundle].tsx    | 21 ++++++++-----------
 .../components/PropertySummary.tsx            |  9 ++++++--
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/expo-atlas-ui/app/(atlas)/[bundle].tsx b/packages/expo-atlas-ui/app/(atlas)/[bundle].tsx
index e625c29..5b16767 100644
--- a/packages/expo-atlas-ui/app/(atlas)/[bundle].tsx
+++ b/packages/expo-atlas-ui/app/(atlas)/[bundle].tsx
@@ -25,9 +25,6 @@ export default function BundlePage() {
   const modules = useModuleGraphData(bundle.id, filters);
 
   const treeHasData = !!modules.data?.data?.children?.length;
-  const modulesAreFiltered = modules.data
-    ? modules.data.filtered.moduleFiles !== modules.data.bundle.moduleFiles
-    : null;
 
   return (
     <Layout variant="viewport">
@@ -41,16 +38,16 @@ export default function BundlePage() {
             <BundleTag platform={bundle.platform} environment={bundle.environment} />
             {!!modules.data && <span>{modules.data.bundle.moduleFiles} modules</span>}
             {!!modules.data && <FileSize byteSize={modules.data.bundle.moduleSize} />}
-            {!!modules.data && modulesAreFiltered && (
-              <PropertySummary
-                className="text-tertiary italic"
-                prefix={<span className="select-none mr-2">visible:</span>}
-              >
-                <span>{modules.data.filtered.moduleFiles} modules</span>
-                <FileSize byteSize={modules.data.filtered.moduleSize} />
-              </PropertySummary>
-            )}
           </PropertySummary>
+          {!!modules.data && filtersEnabled && (
+            <PropertySummary
+              className="text-tertiary italic"
+              prefix={<span className="select-none mr-2">visible:</span>}
+            >
+              <span>{modules.data.filtered.moduleFiles} modules</span>
+              <FileSize byteSize={modules.data.filtered.moduleSize} />
+            </PropertySummary>
+          )}
         </LayoutTitle>
         <ModuleFiltersForm />
       </LayoutHeader>
diff --git a/packages/expo-atlas-ui/components/PropertySummary.tsx b/packages/expo-atlas-ui/components/PropertySummary.tsx
index ad43c60..980e35a 100644
--- a/packages/expo-atlas-ui/components/PropertySummary.tsx
+++ b/packages/expo-atlas-ui/components/PropertySummary.tsx
@@ -9,14 +9,19 @@ export function PropertySummary(
   props: PropsWithChildren<{ className?: string; prefix?: ReactNode }>
 ) {
   return (
-    <div className={cx('inline font-sm text-secondary', props.className)}>
+    <div
+      className={cx(
+        'inline-flex items-center font-sm text-secondary gap-2 text-nowrap',
+        props.className
+      )}
+    >
       {props.prefix}
       {Children.map(props.children, (child, index) => {
         if (index === 0) return child;
         if (!child) return null;
         return (
           <>
-            <span className="text-tertiary mx-2 select-none">-</span>
+            <span className="text-tertiary select-none">-</span>
             {child}
           </>
         );