Migrate bookmarks panel

.prettierignore

@@ -0,0 +1 @@
+packages/ui/src

apps/extension/package.json

@@ -24,6 +24,7 @@
     "@mantine/notifications": "8.3.14",
     "@mantine/nprogress": "8.3.14",
     "@t3-oss/env-core": "0.13.8",
+    "@tanstack/react-form": "1.28.3",
     "@tanstack/react-virtual": "3.13.18",
     "@trpc/client": "11.9.0",
     "@trpc/server": "11.9.0",

apps/extension/src/entrypoints/background/misc/forumPageLinks.ts

@@ -1,5 +1,4 @@
 import { websitesItem } from '@/storage/items';
-import scripting from '@/utils/scripting';
 
 const getForum_1_2_LinksFunc = () => {
   const unreadRows = document.querySelectorAll(
@@ -85,7 +84,7 @@ export const getForumPageLinks = async (
     }
   }
 
-  const [{ result }] = await scripting.executeScript({
+  const [{ result }] = await browser.scripting.executeScript({
     target: { tabId },
     func: executor,
   });

apps/extension/src/entrypoints/background/misc/turnOffInputSuggestions.ts

@@ -1,13 +1,11 @@
-import scripting from '@/utils/scripting';
-
 const turnOffAutocomplete = () => {
   document
     .querySelectorAll('input')
     .forEach((ele) => ele.setAttribute('autocomplete', 'off'));
 };
 
 const turnOffInputSuggestions = (tabId: number) => {
-  scripting.executeScript({
+  browser.scripting.executeScript({
     target: { tabId },
     func: turnOffAutocomplete,
   });

apps/extension/src/entrypoints/popup/components/ContextMenu.tsx

@@ -1,80 +1,73 @@
+import { HugeiconsIcon } from '@hugeicons/react';
 import {
-  Box,
-  type MantineColor,
-  type MantineStyleProps,
-  useMantineTheme,
-} from '@mantine/core';
-import {
-  type ContextMenuItemOptions,
-  useContextMenu,
-} from 'mantine-contextmenu';
-import { type PropsWithChildren, useMemo, useRef } from 'react';
-import { type IconType } from 'react-icons';
-import styles from './styles/ContextMenu.module.css';
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from '@bypass/ui';
+import { useMemo, useRef } from 'react';
 
 export interface IMenuOption {
   text: string;
-  icon: IconType;
+  icon: React.ComponentProps<typeof HugeiconsIcon>['icon'];
   onClick: (id: string) => void;
-  color?: MantineColor;
+  variant?: 'default' | 'destructive';
   id: string;
 }
 
-type Props = PropsWithChildren<{
-  wrapperHeight?: MantineStyleProps['h'];
+interface Props {
   options: IMenuOption[];
   children: React.ReactNode;
-}>;
+}
 
-function ContextMenu({ wrapperHeight = '100%', options, children }: Props) {
-  const theme = useMantineTheme();
-  const { showContextMenu } = useContextMenu();
+function ContextMenuWrapper({ options, children }: Props) {
   const idRef = useRef('');
 
   const menuOptions = useMemo(() => {
-    return options.map<ContextMenuItemOptions>((option) => {
-      const {
-        text,
-        onClick,
-        icon: Icon,
-        color = theme.colors.blue[8],
-        id,
-      } = option;
-      const isRedColor = theme.colors.red.includes(color);
-      const className = `context-menu-item-${id}`;
+    return options.map((option) => {
+      const { text, onClick, icon, variant } = option;
 
       return {
         key: text,
         title: text,
-        className,
-        icon: <Icon size="0.875rem" color={color} />,
-        color: isRedColor ? 'red' : undefined,
+        icon,
+        variant,
         onClick() {
           onClick(idRef.current);
           idRef.current = '';
         },
       };
     });
-  }, [options, theme.colors]);
-
-  const contextMenuHandler = showContextMenu(menuOptions, {
-    classNames: {
-      root: styles.root,
-      item: styles.item,
-    },
-  });
+  }, [options]);
 
-  const handleContextMenu: React.MouseEventHandler<HTMLDivElement> = (e) => {
+  const handleContextMenu = (e: React.MouseEvent) => {
     const dataCtxId = (e.target as HTMLElement).dataset.contextId ?? '';
     idRef.current = dataCtxId;
-    contextMenuHandler(e);
   };
 
   return (
-    <Box w="100%" h={wrapperHeight} onContextMenu={handleContextMenu}>
-      {children}
-    </Box>
+    <ContextMenu>
+      <ContextMenuTrigger
+        className="h-full w-full"
+        onContextMenu={handleContextMenu}
+      >
+        {children}
+      </ContextMenuTrigger>
+      <ContextMenuContent className="min-w-40">
+        {menuOptions.map((option) => (
+          <ContextMenuItem
+            key={option.key}
+            className="gap-2"
+            variant={option.variant}
+            onClick={option.onClick}
+          >
+            <HugeiconsIcon icon={option.icon} className="size-4" />
+            <span>{option.title}</span>
+          </ContextMenuItem>
+        ))}
+      </ContextMenuContent>
+    </ContextMenu>
   );
 }
 
-export default ContextMenu;
+export default ContextMenuWrapper;

apps/extension/src/entrypoints/popup/hooks/useCurrentTab.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { getCurrentTab } from '@/utils/tabs';
+import { getCurrentTab } from '@popup/utils/tabs';
 
 const useCurrentTab = () => {
   const [tab, setTab] = useState<Browser.tabs.Tab>();

apps/extension/src/entrypoints/popup/index.tsx

@@ -1,13 +1,12 @@
 // !NOTE: maintain below order of css
 // import '@mantine/core/styles.css';
 // import 'mantine-contextmenu/styles.css';
-import { mantineTheme } from '@bypass/shared';
+import '@bypass/ui/styles/globals.css';
 import { TooltipProvider } from '@bypass/ui';
 import { MantineProvider } from '@mantine/core';
 import { ContextMenuProvider } from 'mantine-contextmenu';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import './index.css';
 import AsyncFontLoader from './components/AsyncFontLoader';
 import Global from './components/Global';
 import PopupRoutes from './components/PopupRoutes';
@@ -16,7 +15,7 @@ import DynamicProvider from './provider/DynamicProvider';
 function App() {
   return (
     <StrictMode>
-      <MantineProvider defaultColorScheme="dark" theme={mantineTheme}>
+      <MantineProvider>
         <ContextMenuProvider shadow="md" borderRadius="md">
           <TooltipProvider>
             <DynamicProvider>