add files list details, mix padding bump dependencies (#2383)

Author: Simek

bun.lock

@@ -2,20 +2,36 @@ import { type PropsWithChildren } from 'react';
 import { View } from 'react-native';
 
 import { P } from '~/common/styleguide';
+import { WarningBlockquote } from '~/components/Icons';
+import Tooltip from '~/components/Tooltip';
+import { getFileWarning } from '~/util/codeBrowser';
 import tw from '~/util/tailwind';
 
 type Props = PropsWithChildren<{
   filePath: string;
 }>;
 
 export default function CodeBrowserContentHeader({ filePath, children }: Props) {
+  const warning = getFileWarning(filePath.split('/').at(-1));
   return (
     <View
       style={[
         tw`flex min-h-[45px] flex-row items-center justify-between gap-3 border-b border-palette-gray2 bg-default px-4 py-3 dark:border-default`,
         !children && tw`pr-20`,
       ]}>
-      <P style={[tw`font-mono text-[13px]`, { wordBreak: 'break-all' }]}>{filePath}</P>
+      <P style={[tw`font-mono flex items-center gap-1.5 text-[13px]`, { wordBreak: 'break-all' }]}>
+        {filePath}
+        {warning && (
+          <Tooltip
+            trigger={
+              <View style={tw`ml-auto`}>
+                <WarningBlockquote style={tw`size-3.5 text-warning-dark dark:text-warning`} />
+              </View>
+            }>
+            <P style={tw`text-[12px] font-light`}>{warning.message}</P>
+          </Tooltip>
+        )}
+      </P>
       {children}
     </View>
   );

components/Package/CodeBrowser/CodeBrowserContentHeader.tsx

@@ -57,7 +57,7 @@ export default function CodeBrowserFileRow({
               <WarningBlockquote style={tw`size-3.5 text-warning-dark dark:text-warning`} />
             </View>
           }>
-          <span style={tw`text-[12px]`}>{warning.message}</span>
+          <P style={tw`text-[12px] font-light`}>{warning.message}</P>
         </Tooltip>
       )}
     </>

components/Package/CodeBrowser/CodeBrowserFileRow.tsx

@@ -21,21 +21,21 @@
     "precommit": "simple-git-hooks && lint-staged"
   },
   "dependencies": {
-    "@expo/html-elements": "^56.0.0-canary-20260414-e3dbafd",
+    "@expo/html-elements": "^56.0.0-canary-20260417-141204f",
     "@expo/match-media": "^0.4.0",
     "@m2d/react-markdown": "^1.0.0",
     "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@react-native-picker/picker": "^2.11.4",
     "@sentry/react": "^10.49.0",
-    "@videojs/react": "^10.0.0-beta.21",
+    "@videojs/react": "^10.0.0-beta.22",
     "@visx/gradient": "^3.12.0",
     "@visx/responsive": "^3.12.0",
     "@visx/xychart": "^3.12.0",
     "crypto-js": "^4.2.0",
     "es-toolkit": "^1.45.1",
-    "expo": "^56.0.0-canary-20260414-e3dbafd",
-    "expo-font": "^56.0.0-canary-20260414-e3dbafd",
+    "expo": "^56.0.0-canary-20260417-141204f",
+    "expo-font": "^56.0.0-canary-20260417-141204f",
     "next": "^16.2.4",
     "node-emoji": "^2.2.0",
     "postcss": "^8.5.10",
@@ -77,7 +77,7 @@
     "oxlint": "^1.60.0",
     "oxlint-tsgolint": "^0.21.1",
     "simple-git-hooks": "^2.13.1",
-    "typescript": "^6.0.2",
+    "typescript": "^6.0.3",
     "user-agent-data-types": "^0.4.3"
   },
   "simple-git-hooks": {

package.json

@@ -16,6 +16,8 @@ import { type UnpkgMeta } from '~/types';
 import { type PackageCodePageProps } from '~/types/pages';
 import { buildCodeBrowserFileTree, getCodeBrowserFilePath } from '~/util/codeBrowser';
 import { TimeRange } from '~/util/datetime';
+import { formatBytes } from '~/util/formatBytes';
+import { pluralize } from '~/util/strings';
 import tw from '~/util/tailwind';
 
 export default function PackageCodeScene({ apiData, packageName }: PackageCodePageProps) {
@@ -70,6 +72,11 @@ export default function PackageCodeScene({ apiData, packageName }: PackageCodePa
     [filteredFiles, data?.prefix]
   );
 
+  const totalFilesSize = useMemo(
+    () => filteredFiles.reduce((total, file) => total + (file.size ?? 0), 0),
+    [filteredFiles]
+  );
+
   if (!library) {
     return <NotFound />;
   }
@@ -147,19 +154,37 @@ export default function PackageCodeScene({ apiData, packageName }: PackageCodePa
                         ? tw`h-[320px] flex-grow-0 border-b`
                         : tw`w-[320px] flex-grow border-r`,
                     ]}
-                    contentContainerStyle={tw`flex-0 py-2`}>
+                    contentContainerStyle={tw`pt-2`}>
                     {filteredFiles.length > 0 ? (
-                      <CodeBrowserFileTree
-                        tree={fileTree}
-                        activeFile={activeFile}
-                        onSelectFile={setActiveFile}
-                      />
+                      <>
+                        <CodeBrowserFileTree
+                          tree={fileTree}
+                          activeFile={activeFile}
+                          onSelectFile={setActiveFile}
+                        />
+                        <View style={tw`h-2`} />
+                      </>
                     ) : (
                       <View style={tw`px-3 py-2`}>
                         <Label style={tw`text-center`}>No files match this search.</Label>
                       </View>
                     )}
                   </ScrollView>
+                  {filteredFiles.length > 0 && (
+                    <View
+                      style={[
+                        tw`relative flex min-h-[26px] flex-row items-center justify-between gap-3 border-r border-t border-palette-gray2 bg-default px-3 pb-px dark:border-default`,
+                        isSmallScreen && tw`border-r-0`,
+                      ]}>
+                      <Label style={tw`font-light text-secondary`}>
+                        <span style={tw`font-medium`}>{filteredFiles.length}</span>{' '}
+                        {pluralize('file', filteredFiles.length)}
+                      </Label>
+                      <Label style={tw`font-light text-secondary`}>
+                        <span style={tw`font-medium`}>{formatBytes(totalFilesSize)}</span>
+                      </Label>
+                    </View>
+                  )}
                 </View>
                 <View
                   style={[

scenes/PackageCodeScene.tsx

@@ -90,7 +90,10 @@ const FILE_WARNING_MATCHERS = FILE_WARNINGS.map(warning => ({
   matchers: warning.fileNames.map(createFileWarningMatcher),
 }));
 
-export function getFileWarning(fileName: string) {
+export function getFileWarning(fileName?: string) {
+  if (!fileName) {
+    return undefined;
+  }
   return FILE_WARNING_MATCHERS.find(warning => warning.matchers.some(matcher => matcher(fileName)));
 }