perf: remove redundant reads, refreshes and re-renders

Seven efficiency fixes. No behaviour change intended.

shared:
- useTaggedBookmarks read and re-parsed the entire bookmarks object 2N+2
  times for a person with N tagged bookmarks: getPersonTaggedUrls read it
  once, then getBookmarkFromHash and getFolderFromHash each read it again
  per url, then getDefaultOrRootFolderUrls once more. It now reads once and
  indexes locally. On web that read is a synchronous JSON.parse of the whole
  DB, so N=50 went from ~102 parses to 1.
- getPersonsWithImageUrl called getPersonImageUrls() and caches.open() once
  per person. Both are hoisted out of the map via a new
  getBlobUrlFromOpenCache that takes an already-open Cache. The early return
  when there are no image urls is preserved, so a list still renders when
  CacheStorage is unavailable rather than rejecting the whole batch.

extension:
- processPostLogin awaited cachePersonImagesInStorage() then
  cacheBookmarkFavicons() sequentially. They read different storage items and
  neither consumes the other's output, so sign-in now costs max() rather than
  sum() of two network-bound passes. addAllToCache shares one pLimit(20), so
  peak concurrency is unchanged, and the progress step count stays at 3.
- BookmarksPanel re-ran the full context-bookmark filter on every render.
  The component subscribes to selectedBookmarks/cutBookmarks, so that was
  once per row click, and the new array identity churned useVirtualizer's
  getItemKey. Now memoised on [contextBookmarks, searchText]. Same for the
  web bookmark panel.

web:
- getAuthIdToken forced a token refresh on every call, and it feeds the
  httpBatchLink headers() hook, so every tRPC request paid a securetoken
  round trip even with ~55 mins of validity left. The SDK already refreshes
  within 5 mins of expiry. The extension already did this correctly.
- The upload route buffered the file twice (once to sniff the type, once to
  compress), up to 5 MB each. It now buffers once. The single-case
  switch(true) collapses to an if.

tests:
- sharedBackground was the only shared fixture missing { scope: 'worker' }.
  background-navigation.spec is describe.serial and every test calls
  ensureActiveState/clearHistoryStartTime, so it is self-resetting and does
  not need a profile copy plus Chromium launch per test.
  Measured on that spec: 17.6s -> 11.4s.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: amitsingh-007

apps/extension/src/entrypoints/popup/panels/BookmarksPanel/components/BookmarksPanel.tsx

@@ -8,7 +8,7 @@ import {
 } from '@bypass/shared';
 import { ScrollArea } from '@bypass/ui';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 
 import { MAX_PANEL_SIZE } from '@/constants';
@@ -45,9 +45,12 @@ function BookmarksPanel({ folderId, operation, bmUrl }: BMPanelQueryParams) {
   );
   const scrollAreaRef = useRef<HTMLDivElement>(null);
   const [searchText, setSearchText] = useState('');
-  const filteredContextBookmarks = getFilteredContextBookmarks(
-    contextBookmarks,
-    searchText
+  // This component re-renders on every row click (selected/cut state), so
+  // without memoing, the whole list is re-filtered and getItemKey's identity
+  // churns on each one
+  const filteredContextBookmarks = useMemo(
+    () => getFilteredContextBookmarks(contextBookmarks, searchText),
+    [contextBookmarks, searchText]
   );
   const virtualizer = useVirtualizer({
     count: filteredContextBookmarks.length,

apps/extension/src/entrypoints/popup/panels/HomePopup/utils/sync.ts

@@ -63,10 +63,11 @@ export const processPostLogin = async () => {
   // Sync remote firebase to storage
   await syncFirebaseToStorage();
   incrementProgress(SIGN_IN_TOTAL_STEPS);
-  // Then do other processes
-  await cachePersonImagesInStorage();
+  // Independent network-bound cache warms: person images come from personsItem,
+  // favicons from bookmarksItem. addAllToCache shares one pLimit(20), so running
+  // them together costs max() instead of sum() without raising peak concurrency.
+  await Promise.all([cachePersonImagesInStorage(), cacheBookmarkFavicons()]);
   incrementProgress(SIGN_IN_TOTAL_STEPS);
-  await cacheBookmarkFavicons();
   incrementProgress(SIGN_IN_TOTAL_STEPS);
 };
 

apps/extension/tests/fixtures/background-fixture.ts

@@ -116,10 +116,10 @@ const createBackgroundEnv = async (
   };
 };
 
-export const test = base.extend<{
-  isolatedBackground: BaseBackgroundEnv;
-  sharedBackground: BaseBackgroundEnv;
-}>({
+export const test = base.extend<
+  { isolatedBackground: BaseBackgroundEnv },
+  { sharedBackground: BaseBackgroundEnv }
+>({
   async isolatedBackground({}, use, testInfo) {
     const userDataDir = await fs.mkdtemp(
       path.join(os.tmpdir(), 'chrome-background-profile-')
@@ -142,22 +142,29 @@ export const test = base.extend<{
     }
   },
 
-  async sharedBackground({}, use, testInfo) {
-    const { browserContext, userDataDir } = await createSharedContext({
-      headless: testInfo.project.use?.headless ?? true,
-    });
+  // Worker-scoped like every other shared fixture: background-navigation.spec
+  // is describe.serial and each test calls ensureActiveState /
+  // clearHistoryStartTime, so it is self-resetting and does not need a fresh
+  // profile copy + Chromium launch per test.
+  sharedBackground: [
+    async ({}, use, testInfo) => {
+      const { browserContext, userDataDir } = await createSharedContext({
+        headless: testInfo.project.use?.headless ?? true,
+      });
 
-    try {
-      const backgroundSW = await createSharedBackgroundSW(browserContext);
-      const extensionId = await getExtensionId(backgroundSW);
-      const env = await createBackgroundEnv(browserContext, extensionId);
-
-      await use(env);
-    } finally {
-      await browserContext.close();
-      await fs.rm(userDataDir, { recursive: true, force: true });
-    }
-  },
+      try {
+        const backgroundSW = await createSharedBackgroundSW(browserContext);
+        const extensionId = await getExtensionId(backgroundSW);
+        const env = await createBackgroundEnv(browserContext, extensionId);
+
+        await use(env);
+      } finally {
+        await browserContext.close();
+        await fs.rm(userDataDir, { recursive: true, force: true });
+      }
+    },
+    { scope: 'worker' },
+  ],
 });
 
 export const { expect } = test;

apps/web/src/app/api/upload-file/utils.ts

@@ -1,12 +1,12 @@
 import { fileTypeFromBuffer } from 'file-type';
 import sharp from 'sharp';
 
-const getCompressedImage = async (file: File) => {
+const getCompressedImage = async (buffer: Buffer, fileSize: number) => {
   return (
-    sharp(Buffer.from(await file.arrayBuffer()))
+    sharp(buffer)
       // When changing this width, change on client app as well
       .resize({ width: 250, withoutEnlargement: true })
-      .jpeg({ quality: file.size < 50 * 1024 ? 100 : 90 })
+      .jpeg({ quality: fileSize < 50 * 1024 ? 100 : 90 })
       .toBuffer()
   );
 };
@@ -19,21 +19,15 @@ export const validateAndProccessFile = async (file: File) => {
     return null;
   }
 
+  // Buffer once and reuse: sniffing and compressing both need the bytes, and
+  // this can be up to 5 MB
+  const buffer = Buffer.from(await file.arrayBuffer());
+
   // Actual file type validation
-  const fileTypeRes = await fileTypeFromBuffer(
-    Buffer.from(await file.arrayBuffer())
-  );
-  if (!fileTypeRes) {
+  const fileTypeRes = await fileTypeFromBuffer(buffer);
+  if (!fileTypeRes?.mime.startsWith('image/')) {
     return null;
   }
 
-  // Process the file
-  switch (true) {
-    case fileTypeRes.mime.startsWith('image/'): {
-      return getCompressedImage(file);
-    }
-    default: {
-      return null;
-    }
-  }
+  return getCompressedImage(buffer, file.size);
 };

apps/web/src/app/bookmark-panel/page.tsx

@@ -14,7 +14,7 @@ import {
 import { ScrollArea } from '@bypass/ui';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useSearchParams } from 'next/navigation';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { getFromLocalStorage } from '@app/utils/storage';
 
@@ -30,9 +30,9 @@ export default function BookmarksPage() {
   );
   const [folders, setFolders] = useState<IBookmarksObj['folders']>({});
   const [searchText, setSearchText] = useState('');
-  const filteredContextBookmarks = getFilteredContextBookmarks(
-    contextBookmarks,
-    searchText
+  const filteredContextBookmarks = useMemo(
+    () => getFilteredContextBookmarks(contextBookmarks, searchText),
+    [contextBookmarks, searchText]
   );
   const virtualizer = useVirtualizer({
     count: filteredContextBookmarks.length,

apps/web/src/app/helpers/firebase/auth.ts

@@ -38,7 +38,10 @@ export const googleSignOut = async () => signOut(auth);
 export const onAuthStateChange = (callback: (user: User | null) => void) =>
   onAuthStateChanged(auth, callback);
 
-export const getAuthIdToken = async () => auth.currentUser?.getIdToken(true);
+// No force-refresh: this runs before every tRPC request and the SDK already
+// refreshes within 5 mins of expiry, so forcing it added a securetoken round
+// trip to each call
+export const getAuthIdToken = async () => auth.currentUser?.getIdToken();
 
 export const emailAndPasswordSignIn = async (
   email: string,

packages/shared/src/components/Persons/hooks/usePerson.ts

@@ -2,7 +2,11 @@ import { useCallback } from 'react';
 
 import { ECacheBucketKeys } from '../../../constants/cache';
 import useStorage from '../../../hooks/useStorage';
-import { getBlobUrlFromCache } from '../../../utils/cache';
+import {
+  getBlobUrlFromCache,
+  getBlobUrlFromOpenCache,
+  getCacheObj,
+} from '../../../utils/cache';
 import { type IPerson, type IPersonWithImage } from '../interfaces/persons';
 import { decodePersons } from '../utils';
 
@@ -29,17 +33,27 @@ const usePerson = () => {
 
   const getPersonsWithImageUrl = useCallback(
     async (persons: IPerson[]): Promise<IPersonWithImage[]> => {
-      if (!persons) {
+      if (!persons?.length) {
         return [];
       }
+      const personImages = await getPersonImageUrls();
+      if (!personImages) {
+        // Matches resolvePersonImageFromUid: bail before touching CacheStorage
+        return persons.map((person) => ({ ...person, imageUrl: '' }));
+      }
+      // Open the bucket once for the whole list rather than once per person
+      const cache = await getCacheObj(ECacheBucketKeys.person);
       return Promise.all(
         persons.map(async (person) => ({
           ...person,
-          imageUrl: await resolvePersonImageFromUid(person.uid),
+          imageUrl: await getBlobUrlFromOpenCache(
+            cache,
+            personImages[person.uid]
+          ),
         }))
       );
     },
-    [resolvePersonImageFromUid]
+    [getPersonImageUrls]
   );
 
   const getPersonTaggedUrls = useCallback(

packages/shared/src/components/Persons/hooks/useTaggedBookmarks.ts

@@ -1,36 +1,49 @@
 import useSWR from 'swr';
 
-import useBookmark from '../../Bookmarks/hooks/useBookmark';
-import { getDecryptedBookmark } from '../../Bookmarks/utils';
+import useStorage from '../../../hooks/useStorage';
+import { ROOT_FOLDER_ID } from '../../Bookmarks/constants';
+import {
+  getDecryptedBookmark,
+  getDecryptedFolder,
+  getDefaultFolder,
+} from '../../Bookmarks/utils';
 import { type IBookmarkWithFolder } from '../interfaces/bookmark';
 import { getOrderedBookmarksList } from '../utils/bookmark';
-import usePerson from './usePerson';
 
 const useTaggedBookmarks = (personUid = '') => {
-  const { getBookmarkFromHash, getFolderFromHash, getDefaultOrRootFolderUrls } =
-    useBookmark();
-  const { getPersonTaggedUrls } = usePerson();
+  const { getBookmarks } = useStorage();
 
   return useSWR(
     personUid ? ['tagged-bookmarks', personUid] : null,
     async () => {
-      const taggedUrls = await getPersonTaggedUrls(personUid);
-      if (!taggedUrls?.length) {
+      // One read of the whole bookmarks object for the entire list. Resolving
+      // each tagged url through useBookmark/usePerson would re-read and
+      // re-parse it twice per bookmark.
+      const bookmarks = await getBookmarks();
+      if (!bookmarks?.urlList) {
         return [];
       }
+      const { urlList, folderList, folders } = bookmarks;
 
-      const fetchedBookmarks = await Promise.all(
-        taggedUrls.map(async (urlHash) => {
-          const bookmark = await getBookmarkFromHash(urlHash);
-          const parent = await getFolderFromHash(bookmark.parentHash);
-          const decodedBookmark = getDecryptedBookmark(bookmark);
-          return Object.assign(decodedBookmark, {
+      const fetchedBookmarks = Object.entries(urlList)
+        .filter(([, bookmark]) => bookmark.taggedPersons.includes(personUid))
+        .map(([, bookmark]) => {
+          const parent = getDecryptedFolder(folderList[bookmark.parentHash]);
+          return Object.assign(getDecryptedBookmark(bookmark), {
             parentName: parent.name,
             parentId: parent.id,
           }) satisfies IBookmarkWithFolder;
-        })
-      );
-      const defaultUrls = await getDefaultOrRootFolderUrls();
+        });
+      if (!fetchedBookmarks.length) {
+        return [];
+      }
+
+      const parentHash =
+        getDefaultFolder(Object.values(folderList))?.id ?? ROOT_FOLDER_ID;
+      const defaultUrls = Object.values(folders[parentHash])
+        .filter((bookmark) => !bookmark.isDir)
+        .map((urlData) => urlList[urlData.hash]);
+
       return getOrderedBookmarksList(fetchedBookmarks, defaultUrls);
     }
   );

packages/shared/src/utils/cache.ts

@@ -47,6 +47,19 @@ const getFromCache = async (cacheBucketKey: ECacheBucketKeys, url: string) => {
   return cache.match(url);
 };
 
+/**
+ * Takes an already-open Cache so callers resolving many urls can open the
+ * bucket once instead of per url.
+ */
+export const getBlobUrlFromOpenCache = async (cache: Cache, url: string) => {
+  const response = await cache.match(url);
+  const blob = await response?.blob();
+  if (!blob) {
+    return '';
+  }
+  return URL.createObjectURL(blob);
+};
+
 export const getBlobUrlFromCache = async (
   cacheBucketKey: ECacheBucketKeys,
   url: string