slightly de-emphasise map and hash files in code browser (#2394)

Author: Simek

components/Icons/index.tsx

@@ -1616,3 +1616,26 @@ export function CodeIcon({ width = 24, height = 24, style }: IconProps) {
     </Svg>
   );
 }
+
+export function FileMetadataIcon({ width = 24, height = 24, style }: IconProps) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
+      <polyline
+        points="168 128 216 176 168 224"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <polyline
+        points="72 32 72 176 216 176"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+    </Svg>
+  );
+}

components/Package/CodeBrowser/CodeBrowserFileRow.tsx

@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react';
 import { Pressable, View } from 'react-native';
 
 import { P } from '~/common/styleguide';
-import { FileIcon, FolderIcon, WarningBlockquote } from '~/components/Icons';
+import { FileIcon, FileMetadataIcon, FolderIcon, WarningBlockquote } from '~/components/Icons';
 import Tooltip from '~/components/Tooltip';
 import { getFileWarning } from '~/util/codeBrowser';
 import tw from '~/util/tailwind';
@@ -12,6 +12,7 @@ type Props = {
   depth?: number;
   isActive?: boolean;
   isDirectory?: boolean;
+  isNested?: boolean;
   onPress?: () => void;
 };
 
@@ -20,30 +21,37 @@ export default function CodeBrowserFileRow({
   depth = 0,
   isActive = false,
   isDirectory = false,
+  isNested = false,
   onPress,
 }: Props) {
   const [isHovered, setIsHovered] = useState(false);
   const warning = isDirectory ? undefined : getFileWarning(label);
 
-  const Icon = useMemo(() => (isDirectory ? FolderIcon : FileIcon), [isDirectory]);
+  const Icon = useMemo(
+    () => (isDirectory ? FolderIcon : isNested ? FileMetadataIcon : FileIcon),
+    [isDirectory, isNested]
+  );
 
   const rowStyle = [
     tw`flex flex-row items-center gap-1.5 px-3 py-[3px] last:mb-20`,
-    { paddingLeft: 12 + depth * 8 },
+    { paddingLeft: (isNested ? 6 : 10) + depth * 8 },
   ];
 
   const content = (
     <>
       <Icon
         style={[
           tw`size-4 shrink-0 text-icon`,
+          isNested && tw`size-3 text-palette-gray5`,
           isActive && tw`text-primary-darker dark:text-primary-dark`,
           isDirectory && tw`text-tertiary dark:text-accented`,
         ]}
       />
       <P
         style={[
           tw`font-mono select-none text-[12px] font-light tracking-normal`,
+          isNested &&
+            tw`text-[11px] font-extralight text-palette-gray6 dark:font-thin dark:text-palette-gray3`,
           isDirectory && tw`font-extralight text-palette-gray5 dark:text-palette-gray4`,
           isActive && tw`text-primary-darker dark:text-primary`,
           { wordBreak: 'break-word' },

components/Package/CodeBrowser/CodeBrowserFileTree.tsx

@@ -33,13 +33,24 @@ export default function CodeBrowserFileTree({ tree, activeFile, onSelectFile, de
         );
       })}
       {files.map(file => (
-        <CodeBrowserFileRow
-          key={file.path}
-          label={file.name}
-          depth={depth}
-          onPress={() => onSelectFile(file.path)}
-          isActive={file.path === activeFile}
-        />
+        <View key={file.path}>
+          <CodeBrowserFileRow
+            label={file.name}
+            depth={depth}
+            onPress={() => onSelectFile(file.path)}
+            isActive={file.path === activeFile}
+          />
+          {file.nestedFiles?.map(nestedFile => (
+            <CodeBrowserFileRow
+              isNested
+              key={nestedFile.path}
+              label={nestedFile.name}
+              depth={depth + 1}
+              onPress={() => onSelectFile(nestedFile.path)}
+              isActive={nestedFile.path === activeFile}
+            />
+          ))}
+        </View>
       ))}
     </>
   );

scenes/PackageCodeScene.tsx

@@ -15,7 +15,11 @@ import ThreeDotsLoader from '~/components/Package/ThreeDotsLoader';
 import PageMeta from '~/components/PageMeta';
 import { type UnpkgMeta } from '~/types';
 import { type PackageCodePageProps } from '~/types/pages';
-import { buildCodeBrowserFileTree, getCodeBrowserFilePath } from '~/util/codeBrowser';
+import {
+  buildCodeBrowserFileTree,
+  getCodeBrowserFilePath,
+  getCodeBrowserNestedFileParentPath,
+} from '~/util/codeBrowser';
 import { TimeRange } from '~/util/datetime';
 import { formatBytes } from '~/util/formatBytes';
 import { pluralize } from '~/util/strings';
@@ -52,9 +56,49 @@ export default function PackageCodeScene({ apiData, packageName }: PackageCodePa
       return files;
     }
 
-    return files.filter(file =>
-      getCodeBrowserFilePath(file.path, data?.prefix).toLowerCase().includes(normalizedSearch)
-    );
+    const filesByPath = new Map<string, (typeof files)[number]>();
+    const relatedPaths = new Map<string, Set<string>>();
+    const matchedPaths: string[] = [];
+    const visiblePaths = new Set<string>();
+
+    for (const file of files) {
+      filesByPath.set(file.path, file);
+
+      const nestedFileParentPath = getCodeBrowserNestedFileParentPath(file.path);
+
+      if (nestedFileParentPath) {
+        relatedPaths.set(
+          file.path,
+          (relatedPaths.get(file.path) ?? new Set()).add(nestedFileParentPath)
+        );
+        relatedPaths.set(
+          nestedFileParentPath,
+          (relatedPaths.get(nestedFileParentPath) ?? new Set()).add(file.path)
+        );
+      }
+
+      const relativePath = getCodeBrowserFilePath(file.path, data?.prefix).toLowerCase();
+
+      if (relativePath.includes(normalizedSearch)) {
+        matchedPaths.push(file.path);
+      }
+    }
+
+    const queue = [...matchedPaths];
+
+    while (queue.length > 0) {
+      const currentPath = queue.shift();
+
+      if (!currentPath || visiblePaths.has(currentPath) || !filesByPath.has(currentPath)) {
+        continue;
+      }
+
+      visiblePaths.add(currentPath);
+
+      queue.push(...(relatedPaths.get(currentPath) ?? []));
+    }
+
+    return files.filter(file => visiblePaths.has(file.path));
   }, [data?.files, data?.prefix, normalizedSearch]);
 
   const visibleFilePaths = useMemo(

types/index.ts

@@ -361,6 +361,7 @@ export type GitHubUser = {
 export type CodeBrowserTreeFile = {
   name: string;
   path: string;
+  nestedFiles?: CodeBrowserTreeFile[];
 };
 
 export type CodeBrowserTreeDirectory = {

util/codeBrowser.ts

@@ -93,6 +93,19 @@ const FILE_WARNING_MATCHERS = FILE_WARNINGS.map(warning => ({
   matchers: warning.fileNames.map(createFileWarningMatcher),
 }));
 
+const SOURCE_MAP_PARENT_EXTENSIONS = new Set([
+  'cjs',
+  'cts',
+  'js',
+  'jsx',
+  'mjs',
+  'mts',
+  'ts',
+  'tsx',
+]);
+
+const HASH_FILE_EXTENSIONS = new Set(['md5', 'sha1', 'sha3', 'sha256', 'sha512']);
+
 export function getFileWarning(fileName?: string) {
   if (!fileName) {
     return undefined;
@@ -104,6 +117,32 @@ export function getCodeBrowserFilePath(path: string, prefix?: string) {
   return prefix ? path.replace(prefix, '') : path;
 }
 
+export function getCodeBrowserNestedFileParentPath(path: string) {
+  const nestedFileExtension = path.split('.').pop()?.toLowerCase();
+
+  if (!nestedFileExtension) {
+    return null;
+  }
+
+  const nestedFileParentPath = path.slice(0, -(nestedFileExtension.length + 1));
+
+  if (nestedFileExtension === 'map') {
+    const sourceMapParentExtension = nestedFileParentPath.split('.').pop()?.toLowerCase();
+
+    if (!sourceMapParentExtension || !SOURCE_MAP_PARENT_EXTENSIONS.has(sourceMapParentExtension)) {
+      return null;
+    }
+
+    return nestedFileParentPath;
+  }
+
+  if (HASH_FILE_EXTENSIONS.has(nestedFileExtension)) {
+    return nestedFileParentPath;
+  }
+
+  return null;
+}
+
 export function buildCodeBrowserFileTree(
   files: UnpkgMeta['files'],
   prefix?: string
@@ -139,6 +178,8 @@ export function buildCodeBrowserFileTree(
     });
   });
 
+  nestCodeBrowserSidecarFiles(root);
+
   return root;
 }
 
@@ -151,6 +192,33 @@ function createCodeBrowserTreeDirectory(name: string, path: string): CodeBrowser
   };
 }
 
+function nestCodeBrowserSidecarFiles(directory: CodeBrowserTreeDirectory) {
+  const filesByPath = new Map(directory.files.map(file => [file.path, file]));
+  const nestedFilePaths = new Set<string>();
+
+  directory.files.forEach(file => {
+    const nestedFileParentPath = getCodeBrowserNestedFileParentPath(file.path);
+
+    if (!nestedFileParentPath) {
+      return;
+    }
+
+    const nestedFileParent = filesByPath.get(nestedFileParentPath);
+
+    if (!nestedFileParent) {
+      return;
+    }
+
+    nestedFileParent.nestedFiles ??= [];
+    nestedFileParent.nestedFiles.push(file);
+    nestedFilePaths.add(file.path);
+  });
+
+  directory.files = directory.files.filter(file => !nestedFilePaths.has(file.path));
+
+  Object.values(directory.directories).forEach(nestCodeBrowserSidecarFiles);
+}
+
 function createFileWarningMatcher(pattern: string) {
   if (!pattern.includes('*')) {
     return (fileName: string) => fileName === pattern;