From 47f494038e31a3898374faefebf1cc37b9a026a5 Mon Sep 17 00:00:00 2001
From: jaem1n207 <tech.jmtt@gmail.com>
Date: Thu, 16 May 2024 02:16:45 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20sidebar,=20popup=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 e2e/basic.spec.ts                |  5 -----
 playwright.config.ts             |  2 +-
 scripts/prepare.ts               |  2 +-
 src/background/main.ts           |  4 ++++
 src/contentScripts/index.ts      |  2 +-
 src/contentScripts/pages/App.tsx | 33 ++++++++------------------------
 src/contentScripts/render.tsx    |  6 +++---
 src/manifest.ts                  |  1 -
 src/popup/index.html             | 12 ------------
 src/popup/main.tsx               | 13 -------------
 src/popup/popup.tsx              | 23 ----------------------
 src/sidebar/index.html           | 12 ------------
 src/sidebar/main.tsx             | 13 -------------
 src/sidebar/sidebar.tsx          |  9 ---------
 vite.config.mts                  |  2 --
 15 files changed, 18 insertions(+), 121 deletions(-)
 delete mode 100644 src/popup/index.html
 delete mode 100644 src/popup/main.tsx
 delete mode 100644 src/popup/popup.tsx
 delete mode 100644 src/sidebar/index.html
 delete mode 100644 src/sidebar/main.tsx
 delete mode 100644 src/sidebar/sidebar.tsx

diff --git a/e2e/basic.spec.ts b/e2e/basic.spec.ts
index 560c722..1270d7a 100644
--- a/e2e/basic.spec.ts
+++ b/e2e/basic.spec.ts
@@ -9,11 +9,6 @@ test('example test', async ({ page }, testInfo) => {
   await expect(page.locator(`#${name} h1`)).toHaveText('Dynamic Scrollbar WebExt');
 });
 
-test('popup page', async ({ page, extensionId }) => {
-  await page.goto(`chrome-extension://${extensionId}/dist/popup/index.html`);
-  await expect(page.locator('button')).toHaveText('Open Options');
-});
-
 test('options page', async ({ page, extensionId }) => {
   await page.goto(`chrome-extension://${extensionId}/dist/options/index.html`);
   await expect(page.locator('img')).toHaveAttribute('alt', 'extension icon');
diff --git a/playwright.config.ts b/playwright.config.ts
index 4815a65..5f51762 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -9,7 +9,7 @@ export default defineConfig({
   webServer: {
     command: 'npm run dev',
     // start e2e test after the Vite server is fully prepared
-    url: 'http://localhost:3303/popup/main.ts',
+    url: 'http://localhost:3303/options/main.ts',
     reuseExistingServer: true,
   },
 });
diff --git a/scripts/prepare.ts b/scripts/prepare.ts
index 621e277..82f9b3c 100644
--- a/scripts/prepare.ts
+++ b/scripts/prepare.ts
@@ -10,7 +10,7 @@ import { isDev, log, port, r } from './utils';
  * Stub index.html to use Vite in development
  */
 async function stubIndexHtml() {
-  const views = ['options', 'popup', 'background', 'sidebar'];
+  const views = ['options', 'background'];
 
   for (const view of views) {
     await fs.ensureDir(r(`extension/dist/${view}`));
diff --git a/src/background/main.ts b/src/background/main.ts
index 9870620..12298d3 100644
--- a/src/background/main.ts
+++ b/src/background/main.ts
@@ -14,6 +14,10 @@ browser.runtime.onInstalled.addListener((): void => {
   console.log('Extension installed');
 });
 
+browser.action.onClicked.addListener(() => {
+  browser.runtime.openOptionsPage();
+});
+
 let previousTabId = 0;
 
 // communication example: send previous tab title from background page
diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts
index 4f311d1..7169fe8 100644
--- a/src/contentScripts/index.ts
+++ b/src/contentScripts/index.ts
@@ -25,5 +25,5 @@ import { renderApp } from './render';
   shadowDOM.appendChild(root);
   document.body.appendChild(container);
   const appRoot = createRoot(root);
-  renderApp({ root: appRoot, frameUrl: browser.runtime.getURL('dist/sidebar/index.html') });
+  renderApp({ root: appRoot });
 })();
diff --git a/src/contentScripts/pages/App.tsx b/src/contentScripts/pages/App.tsx
index 14a40e2..c1c4952 100644
--- a/src/contentScripts/pages/App.tsx
+++ b/src/contentScripts/pages/App.tsx
@@ -1,33 +1,16 @@
-import IconPower from '~icons/pixelarticons/power';
-
+import IconCat from '~icons/arcticons/cats-and-soup';
 import 'uno.css';
 
-export default function App({ frameUrl }: { frameUrl: string }) {
-  const [open, setOpen] = useState(false);
-  const [openedOnce, setOpenedOnce] = useState(false);
+import { Button } from '~/shared/ui';
 
+export const App = () => {
   return (
     <div>
-      <div className="fixed left-0 bottom-0 m-5 z-100 flex font-sans select-none leading-1em">
-        <div
-          className="flex justify-center items-center w-10 h-10 rounded-full shadow cursor-pointer bg-blue-400 hover:bg-blue-600"
-          onClick={() => {
-            setOpen((open) => !open);
-            setOpenedOnce(true);
-          }}
-        >
-          <IconPower />
-        </div>
+      <div className="fixed right-0 bottom-0 m-5 z-99999 select-none">
+        <Button className="rounded-full">
+          <IconCat />
+        </Button>
       </div>
-      {openedOnce && (
-        <div
-          className={`fixed top-0 right-0 h-full w-1/4 z-50 drop-shadow-xl transition-transform ${
-            open ? 'translate-x-0' : 'translate-x-full'
-          }`}
-        >
-          <iframe src={frameUrl} className="w-full h-full border-0" />
-        </div>
-      )}
     </div>
   );
-}
+};
diff --git a/src/contentScripts/render.tsx b/src/contentScripts/render.tsx
index 6ce72d1..1de68a2 100644
--- a/src/contentScripts/render.tsx
+++ b/src/contentScripts/render.tsx
@@ -1,12 +1,12 @@
 import { StrictMode } from 'react';
 import type { Root } from 'react-dom/client';
 
-import App from './pages/App';
+import { App } from './pages/App';
 
-export const renderApp = ({ root, frameUrl }: { root: Root; frameUrl: string }) => {
+export const renderApp = ({ root }: { root: Root }) => {
   return root.render(
     <StrictMode>
-      <App frameUrl={frameUrl} />
+      <App />
     </StrictMode>,
   );
 };
diff --git a/src/manifest.ts b/src/manifest.ts
index a8b1752..22b5fd9 100644
--- a/src/manifest.ts
+++ b/src/manifest.ts
@@ -16,7 +16,6 @@ export async function getManifest(): Promise<Manifest.WebExtensionManifest> {
     default_locale: 'en',
     action: {
       default_icon: './assets/icon-512.png',
-      default_popup: './dist/popup/index.html',
     },
     options_ui: {
       page: './dist/options/index.html',
diff --git a/src/popup/index.html b/src/popup/index.html
deleted file mode 100644
index eb8ce59..0000000
--- a/src/popup/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <base target="_blank" />
-    <title>Popup</title>
-  </head>
-  <body style="min-width: 100px">
-    <div id="app"></div>
-    <script type="module" src="./main.tsx"></script>
-  </body>
-</html>
diff --git a/src/popup/main.tsx b/src/popup/main.tsx
deleted file mode 100644
index 4d87502..0000000
--- a/src/popup/main.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-
-import '../shared/styles';
-import App from './popup';
-
-const container = document.getElementById('app');
-const root = createRoot(container!);
-root.render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-);
diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
deleted file mode 100644
index 8131548..0000000
--- a/src/popup/popup.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import browser from 'webextension-polyfill';
-
-import { Timer } from '~/features/timer';
-import { Button } from '~/shared/ui';
-
-const openOptionsPage = () => {
-  browser.runtime.openOptionsPage();
-};
-
-const Popup = () => {
-  return (
-    <main className="w-[300px] px-4 py-5 text-center">
-      <div>Popup</div>
-      <p className="mt-2 opacity-50">This is the popup page</p>
-      <Button size="sm" onClick={openOptionsPage}>
-        Open Options
-      </Button>
-      <Timer />
-    </main>
-  );
-};
-
-export default Popup;
diff --git a/src/sidebar/index.html b/src/sidebar/index.html
deleted file mode 100644
index f2df974..0000000
--- a/src/sidebar/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <base target="_blank" />
-    <title>Sidebar</title>
-  </head>
-  <body style="min-width: 100px">
-    <div id="app"></div>
-    <script type="module" src="./main.tsx"></script>
-  </body>
-</html>
diff --git a/src/sidebar/main.tsx b/src/sidebar/main.tsx
deleted file mode 100644
index c69d277..0000000
--- a/src/sidebar/main.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-
-import '~/shared/styles';
-import App from './sidebar';
-
-const container = document.getElementById('app');
-const root = createRoot(container!);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
diff --git a/src/sidebar/sidebar.tsx b/src/sidebar/sidebar.tsx
deleted file mode 100644
index 1f5600d..0000000
--- a/src/sidebar/sidebar.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-const Sidebar = () => {
-  return (
-    <main className="w-[300px] px-4 py-5 text-center">
-      <p className="mt-2">This is the sidebar page</p>
-    </main>
-  );
-};
-
-export default Sidebar;
diff --git a/vite.config.mts b/vite.config.mts
index 561c1d4..d5a08b4 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -74,8 +74,6 @@ export default defineConfig(({ command }) => ({
     rollupOptions: {
       input: {
         options: r('src/options/index.html'),
-        popup: r('src/popup/index.html'),
-        sidebar: r('src/sidebar/index.html'),
       },
     },
   },