refactor: fix first-paint viewport check and split colliding route constants

Three deliberate behaviour changes.

1. usePlatform -> useIsMobile, with a correct initial value.

   The hook was a viewport media query wearing the name of the platform seam.
   Mantine 9.5 defaults to getInitialValueInEffect: true and ends with
   `return matches || false`, so with no initial value the first render
   reported "not desktop" everywhere - including the 800px-wide extension
   popup. Every consumer painted a mobile layout for one frame: Bookmark
   mounted each row as an <a href> and then swapped it for plain text, and
   Persons computed a mobile column count and row height.

   The fix passes `true`, not `false`. Passing `false` would be a no-op,
   since `matches || false` already yields false today. Deliberately not
   using getInitialValueInEffect: false, which reads window.matchMedia during
   render and would risk a Next.js hydration mismatch.

   Trade-off: real mobile web (<768px) now gets a one-frame desktop paint
   instead.

2. ToggleExtension: one source of truth.

   The component kept a local extState whose getIsExtensionActive() was
   exactly the store's isExtensionActive, with dispatchActionAndSetState
   existing only to write both. useExtStore now exposes
   { isExtensionActive, setIsExtensionActive } instead of the always-paired
   turnOnExtension/turnOffExtension.

   The store default stays true on purpose: Authenticate reads it on mount
   and would auto-sign-out if it started false while storage resolves.

   Trade-off: the first-paint flash moves rather than disappearing. Today a
   stored-ACTIVE user sees unchecked->checked; now a stored-INACTIVE user
   sees checked->unchecked. Removing it entirely needs the store hydrated
   before first paint.

3. Split the colliding ROUTES.

   @bypass/shared exported HOMEPAGE: '/popup.html' while the web app
   exported its own ROUTES with HOMEPAGE: '/'. The web app imported both,
   three lines apart in two files, under the same identifier - so one wrong
   auto-import was a silent 404 or a broken RESTRICTED_PATHS check with no
   type error.

   Shared ROUTES now holds only the genuinely shared panel routes. The
   extension entry route moves to POPUP_HOMEPAGE in the extension, and the
   web constant is renamed WEB_ROUTES so the two cannot be confused.

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

Author: amitsingh-007

apps/extension/src/constants/index.ts

@@ -9,3 +9,6 @@ export const MAX_PANEL_SIZE = {
 };
 
 export const TEST_AUTH_DATA_KEY = '__test_auth_data';
+
+/** Extension popup entry route. Not in @bypass/shared: meaningless on web. */
+export const POPUP_HOMEPAGE = '/popup.html';

apps/extension/src/entrypoints/popup/panels/HomePopup/components/ToggleExtension.tsx

@@ -1,43 +1,30 @@
 import { Switch } from '@bypass/ui';
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
 import { EExtensionState } from '@/constants';
 import { extStateItem } from '@/storage/items';
 import { getIsExtensionActive } from '@/utils/common';
 import useExtStore from '@store/extension';
 
 function ToggleExtension() {
-  const turnOnExtension = useExtStore((state) => state.turnOnExtension);
-  const turnOffExtension = useExtStore((state) => state.turnOffExtension);
-  const [extState, setExtState] = useState<EExtensionState>(
-    EExtensionState.INACTIVE
-  );
-
-  const dispatchActionAndSetState = useCallback(
-    (_extState: EExtensionState, isActive: boolean) => {
-      setExtState(_extState);
-      const action = isActive ? turnOnExtension : turnOffExtension;
-      action();
-    },
-    [turnOnExtension, turnOffExtension]
+  const isActive = useExtStore((state) => state.isExtensionActive);
+  const setIsExtensionActive = useExtStore(
+    (state) => state.setIsExtensionActive
   );
 
   useEffect(() => {
-    extStateItem.getValue().then((_extState) => {
-      const isActive = getIsExtensionActive(_extState);
-      dispatchActionAndSetState(_extState, isActive);
+    extStateItem.getValue().then((extState) => {
+      setIsExtensionActive(getIsExtensionActive(extState));
     });
-  }, [dispatchActionAndSetState]);
+  }, [setIsExtensionActive]);
 
   const handleToggle = (checked: boolean) => {
-    const extensionState = checked
-      ? EExtensionState.ACTIVE
-      : EExtensionState.INACTIVE;
-    extStateItem.setValue(extensionState);
-    dispatchActionAndSetState(extensionState, checked);
+    extStateItem.setValue(
+      checked ? EExtensionState.ACTIVE : EExtensionState.INACTIVE
+    );
+    setIsExtensionActive(checked);
   };
 
-  const isActive = getIsExtensionActive(extState);
   return (
     <div className="flex items-center gap-2">
       <Switch checked={isActive} onCheckedChange={handleToggle} />

apps/extension/src/entrypoints/popup/panels/HomePopup/routes/index.tsx

@@ -1,8 +1,9 @@
-import { ROUTES } from '@bypass/shared';
 import { Route } from 'wouter';
 
+import { POPUP_HOMEPAGE } from '@/constants';
+
 import PopupHome from '../containers/PopupHome';
 
 export const HomePageRoute = (
-  <Route path={ROUTES.HOMEPAGE} component={PopupHome} />
+  <Route path={POPUP_HOMEPAGE} component={PopupHome} />
 );

apps/extension/src/store/extension.ts

@@ -2,14 +2,15 @@ import { create } from 'zustand';
 
 interface State {
   isExtensionActive: boolean;
-  turnOnExtension: VoidFunction;
-  turnOffExtension: VoidFunction;
+  setIsExtensionActive: (isExtensionActive: boolean) => void;
 }
 
 const useExtStore = create<State>()((set) => ({
+  // Defaults to true: Authenticate reads this on mount and would auto-sign-out
+  // if it started false while storage is still resolving
   isExtensionActive: true,
-  turnOnExtension: () => set(() => ({ isExtensionActive: true })),
-  turnOffExtension: () => set(() => ({ isExtensionActive: false })),
+  setIsExtensionActive: (isExtensionActive: boolean) =>
+    set(() => ({ isExtensionActive })),
 }));
 
 export default useExtStore;

apps/web/src/app/components/AppHeader.tsx

@@ -6,15 +6,15 @@ import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
-import { ROUTES } from '@app/constants/routes';
+import { WEB_ROUTES } from '@app/constants/routes';
 
 function AppHeader() {
   const router = useRouter();
   const [clickCount, setClickCount] = useState(0);
 
   useEffect(() => {
     if (clickCount === 5) {
-      router.push(ROUTES.BYPASS_LINKS_WEB);
+      router.push(WEB_ROUTES.BYPASS_LINKS_WEB);
     }
   }, [clickCount, router]);
 

apps/web/src/app/constants/routes.ts

@@ -1,4 +1,8 @@
-export const ROUTES = {
+/**
+ * Web-app-only routes. Named distinctly from `ROUTES` in @bypass/shared so an
+ * auto-import cannot silently swap one for the other.
+ */
+export const WEB_ROUTES = {
   HOMEPAGE: '/',
   BYPASS_LINKS_WEB: '/web-ext',
 } as const;

apps/web/src/app/provider/AuthProvider.tsx

@@ -9,7 +9,7 @@ import {
   useState,
 } from 'react';
 
-import { ROUTES } from '../constants/routes';
+import { WEB_ROUTES } from '../constants/routes';
 import { onAuthStateChange } from '../helpers/firebase/auth';
 
 interface IAuthContext {
@@ -22,7 +22,7 @@ const AuthContext = createContext<IAuthContext>({
   isLoginIntialized: false,
 });
 
-const RESTRICTED_PATHS = new Set([ROUTES.HOMEPAGE]);
+const RESTRICTED_PATHS = new Set([WEB_ROUTES.HOMEPAGE]);
 
 export function AuthProvider({ children }: PropsWithChildren) {
   const pathname = usePathname();

packages/shared/src/components/Bookmarks/components/Bookmark.tsx

@@ -7,7 +7,7 @@ import {
   TooltipTrigger,
 } from '@bypass/ui';
 
-import usePlatform from '../../../hooks/usePlatform';
+import useIsMobile from '../../../hooks/useIsMobile';
 import useTaggedPersons from '../../Persons/hooks/useTaggedPersons';
 import Favicon from './Favicon';
 import PersonAvatars from './PersonAvatars';
@@ -36,7 +36,7 @@ function Bookmark({
   getFaviconUrl,
 }: BookmarkProps) {
   const { data: personsWithImageUrls = [] } = useTaggedPersons(taggedPersons);
-  const isMobile = usePlatform();
+  const isMobile = useIsMobile();
 
   const handleOpenLink: React.MouseEventHandler<HTMLDivElement> = (event) => {
     if (event.ctrlKey || event.metaKey) {

packages/shared/src/components/Persons/components/Persons.tsx

@@ -3,7 +3,7 @@ import { useElementSize } from '@mantine/hooks';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { type ReactNode, use, useCallback, useState } from 'react';
 
-import usePlatform from '../../../hooks/usePlatform';
+import useIsMobile from '../../../hooks/useIsMobile';
 import DynamicContext from '../../../provider/DynamicContext';
 import { deserializeQueryStringToObject } from '../../../utils/url';
 import { ScrollButton } from '../../ScrollButton';
@@ -42,7 +42,7 @@ function PersonsInner({
   personToOpenImage,
   renderPerson,
 }: InnerProps) {
-  const isMobile = usePlatform();
+  const isMobile = useIsMobile();
   const columnCount = getColumnCount(isMobile);
   const rowCount = Math.ceil(persons.length / columnCount);
   const columnDimension = (bodyWidth - 12) / columnCount; // Adjust scrollbar width

packages/shared/src/constants/routes.ts

@@ -1,5 +1,9 @@
+/**
+ * Panel routes shared by the extension popup and the web app. The extension's
+ * own entry route lives in the extension (POPUP_HOMEPAGE) since '/popup.html'
+ * is meaningless on web.
+ */
 export const ROUTES = {
-  HOMEPAGE: '/popup.html',
   SHORTCUTS_PANEL: '/shortcuts-panel/',
   BOOKMARK_PANEL: '/bookmark-panel/',
   PERSONS_PANEL: '/persons-panel/',