feat: add popout window

Author: Seldszar

locales/en/messages.json

@@ -269,6 +269,9 @@
   "optionValue_popout": {
     "message": "Popout"
   },
+  "optionValue_popoutWindow": {
+    "message": "Popout"
+  },
   "optionValue_schedule": {
     "message": "Schedule"
   },

src/browser/components/ProfileBadge.tsx

@@ -1,4 +1,10 @@
-import { IconHeart, IconInfoCircle, IconPower, IconSettings } from "@tabler/icons-react";
+import {
+  IconExternalLink,
+  IconHeart,
+  IconInfoCircle,
+  IconPower,
+  IconSettings,
+} from "@tabler/icons-react";
 import { useState } from "react";
 import tw, { styled } from "twin.macro";
 
@@ -29,12 +35,20 @@ function ProfileBadge(props: ProfileBadgeProps) {
       <DropdownMenu
         placement="right-end"
         items={[
+          {
+            type: "normal",
+            title: t("optionValue_popoutWindow"),
+            icon: <IconExternalLink size="1.25rem" />,
+            onClick() {
+              open("popup.html?popout=true", "_blank", "width=440,height=639");
+            },
+          },
           {
             type: "normal",
             title: t("optionValue_settings"),
             icon: <IconSettings size="1.25rem" />,
             onClick() {
-              open(browser.runtime.getURL("settings.html"), "_blank");
+              open("settings.html", "_blank");
             },
           },
           {

src/browser/views/popup/Root.tsx

@@ -2,6 +2,7 @@ import { css, Global } from "@emotion/react";
 import { IconBrandTwitch } from "@tabler/icons-react";
 import { useMemo } from "react";
 import { isRouteErrorResponse, Outlet, useRouteError } from "react-router";
+import { useSearchParam } from "react-use";
 import tw, { styled } from "twin.macro";
 
 import { sendRuntimeMessage, t } from "~/common/helpers";
@@ -63,14 +64,16 @@ export function ChildComponent() {
 }
 
 export function Component() {
+  const popout = useSearchParam("popout");
+
   return (
     <HistoryProvider>
       <SearchProvider>
         <Global
           styles={css`
             #app-root {
-              height: 600px;
-              width: 420px;
+              height: ${popout ? "100vh" : "600px"};
+              width: ${popout ? "100vw" : "420px"};
             }
           `}
         />