Fix circular dependency warning from Rollup in TopBar.tsx

Extract the `TopBarToggleButton` component that causes the warning into
a separate module.

src/sidebar/components/TopBar.tsx

-import type { IconButtonProps } from '@hypothesis/frontend-shared';
 import { LinkButton, HelpIcon, ShareIcon } from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
 
@@ -10,8 +9,8 @@ import type { FrameSyncService } from '../services/frame-sync';
 import { useSidebarStore } from '../store';
 import GroupList from './GroupList';
 import PendingUpdatesButton from './PendingUpdatesButton';
-import PressableIconButton from './PressableIconButton';
 import SortMenu from './SortMenu';
+import TopBarToggleButton from './TopBarToggleButton';
 import UserMenu from './UserMenu';
 import SearchIconButton from './search/SearchIconButton';
 import StreamSearchInput from './search/StreamSearchInput';
@@ -34,26 +33,6 @@ export type TopBarProps = {
   settings: SidebarSettings;
 };
 
-/**
- * Toggle button for the top bar, with a background to indicate its "pressed"
- * state.
- */
-export function TopBarToggleButton(buttonProps: IconButtonProps) {
-  return (
-    <PressableIconButton
-      // The containing form has a white background. The top bar is only
-      // 40px high. If we allow standard touch-minimum height here (44px),
-      // the visible white background exceeds the height of the top bar in
-      // touch contexts. Disable touch sizing via `size="custom"`, then
-      // add back the width rule and padding to keep horizontal spacing
-      // consistent.
-      size="custom"
-      classes="touch:min-w-touch-minimum p-1"
-      {...buttonProps}
-    />
-  );
-}
-
 /**
  * The toolbar which appears at the top of the sidebar providing actions
  * to switch groups, view account information, sort/filter annotations etc.

src/sidebar/components/TopBarToggleButton.tsx

+import type { IconButtonProps } from '@hypothesis/frontend-shared';
+
+import PressableIconButton from './PressableIconButton';
+
+/**
+ * Toggle button for the top bar, with a background to indicate its "pressed"
+ * state.
+ */
+export default function TopBarToggleButton(buttonProps: IconButtonProps) {
+  return (
+    <PressableIconButton
+      // The containing form has a white background. The top bar is only
+      // 40px high. If we allow standard touch-minimum height here (44px),
+      // the visible white background exceeds the height of the top bar in
+      // touch contexts. Disable touch sizing via `size="custom"`, then
+      // add back the width rule and padding to keep horizontal spacing
+      // consistent.
+      size="custom"
+      classes="touch:min-w-touch-minimum p-1"
+      {...buttonProps}
+    />
+  );
+}

src/sidebar/components/search/SearchIconButton.tsx

@@ -5,7 +5,7 @@ import { useShortcut } from '../../../shared/shortcut';
 import { isMacOS } from '../../../shared/user-agent';
 import type { SidebarStore } from '../../store';
 import { useSidebarStore } from '../../store';
-import { TopBarToggleButton } from '../TopBar';
+import TopBarToggleButton from '../TopBarToggleButton';
 
 /**
  * Respond to keydown events on the document (shortcut keys):

src/sidebar/components/test/TopBar-test.js

@@ -38,9 +38,9 @@ describe('TopBar', () => {
       '../config/service-config': { serviceConfig: fakeServiceConfig },
     });
     $imports.$restore({
-      // `PressableIconButton` is a presentation-only component. Not mocking it
+      // `TopBarToggleButton` is a presentation-only component. Not mocking it
       // allows to get it covered.
-      './PressableIconButton': true,
+      './TopBarToggleButton': true,
     });
   });
 
@@ -51,7 +51,7 @@ describe('TopBar', () => {
   // Helper to retrieve an `Button` by test ID, for convenience
   function getButton(wrapper, testId) {
     return wrapper
-      .find('PressableIconButton')
+      .find('TopBarToggleButton')
       .filterWhere(n => n.find(`[data-testid="${testId}"]`).exists());
   }