Move forms to sidepanel

表单组件迁移到 SidePanel
原 Popup 引导打开 SidePanel
优化表单组件和 Hooks，获取 Form 组件 Ref

popup/index.tsx

@@ -1,7 +1,5 @@
 import { useState } from "react";
 import Menu from "./menu";
-import Read from "./read";
-import Toy from "./bili";
 import Message from "~components/ui/message";
 import { clsn } from "~utils";
 import "assets/global.less";
@@ -17,6 +15,7 @@ function IndexPopup() {
   const onClickMenu = (value: string) => {
     if (value === "options") {
       chrome.runtime.openOptionsPage();
+
       return;
     }
     else if (value === "home") {
@@ -29,24 +28,20 @@ function IndexPopup() {
       return;
     }
 
-    setTab(value);
-  }
+    chrome.tabs.query({ active: true, lastFocusedWindow: true }).then((tabs) => {
+      const { id, windowId } = tabs[0];
 
-  const renderBody = () => {
-    if (tab === "read") {
-      return <Read onBack={onBack} />;
-    }
-    if (tab === "toy") {
-      return <Toy onBack={onBack} />;
-    }
+      chrome.sidePanel.setOptions({ path: `sidepanel.html?type=${value}` })
+      chrome.sidePanel.open({ tabId: id, windowId });
 
-    return <Menu onClick={onClickMenu} />;
+      window.close();
+    });
   }
 
   return (
     <>
       <div className={clsn(styles.root, tab && styles.hasTab)}>
-        {renderBody()}
+        <Menu onClick={onClickMenu} />
       </div>
       <Message />
     </>