create popout quickcss

i18n/en-US.json

@@ -70,6 +70,9 @@
     "REPLUGGED_PLUGIN": "Plugin",
     "REPLUGGED_PLUGINS": "Plugins",
     "REPLUGGED_QUICKCSS": "Quick CSS",
+    "REPLUGGED_QUICKCSS_CHANGES_APPLY": "Apply Changes",
+    "REPLUGGED_QUICKCSS_FOLDER_OPEN": "Open Quick CSS Folder",
+    "REPLUGGED_QUICKCSS_POPPED_OUT": "Quick CSS Editor has been popped out",
     "REPLUGGED_SETTINGS_ADVANCED_DESC": "Don't touch stuff in here if you don't know what you're doing. Unexpected things can happen to your cat.",
     "REPLUGGED_SETTINGS_BACKEND": "Backend URL",
     "REPLUGGED_SETTINGS_BACKEND_DESC": "URL used to fetch some assets and to query Replugged's REST API.",
@@ -175,7 +178,6 @@
     "REPLUGGED_LIST_RESULTS": "{count, plural, =1 {# match} other {# matches}}",
     "REPLUGGED_NO_ADDON_RESULTS": "No {type} matched your search.",
     "REPLUGGED_NO_ADDONS_INSTALLED": "No {type} installed.",
-    "REPLUGGED_QUICKCSS_CHANGES_APPLY": "Apply Changes",
     "REPLUGGED_SEARCH_FOR_ADDON": "Search for a {type}",
     "REPLUGGED_TOAST_ADDON_DISABLE_SUCCESS": "Disabled {name}",
     "REPLUGGED_TOAST_ADDON_ENABLE_SUCCESS": "Enabled {name}",
@@ -197,7 +199,6 @@
     "REPLUGGED_TOAST_INSTALLER_ADDON_INSTALL_SUCCESS": "{name} installed successfully.",
     "REPLUGGED_TOAST_INSTALLER_ADDON_FETCH_INFO_FAILED": "Failed to get info for addon.",
     "REPLUGGED_TOAST_INSTALLER_ADDON_CANCELED_INSTALL": "Install canceled.",
-    "REPLUGGED_QUICKCSS_FOLDER_OPEN": "Open Quick CSS Folder",
     "REPLUGGED_ADDON_AUTHORS_ONE": "by {author1}",
     "REPLUGGED_ADDON_AUTHORS_TWO": "by {author1} and {author2}",
     "REPLUGGED_ADDON_AUTHORS_THREE": "by {author1}, {author2}, and {author3}",

src/renderer/coremods/settings/icons/Pin.tsx

@@ -0,0 +1,5 @@
+export default (): React.ReactElement => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path fill="currentColor" d="M19 3H5V5H7V12H5V14H11V22H13V14H19V12H17V5H19V3Z" />
+  </svg>
+);

src/renderer/coremods/settings/icons/Popout.tsx

@@ -0,0 +1,5 @@
+export default (): React.ReactElement => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M10 5V3H5.375C4.06519 3 3 4.06519 3 5.375V18.625C3 19.936 4.06519 21 5.375 21H18.625C19.936 21 21 19.936 21 18.625V14H19V19H5V5H10Z M21 2.99902H14V4.99902H17.586L9.29297 13.292L10.707 14.706L19 6.41302V9.99902H21V2.99902Z" />
+  </svg>
+);

src/renderer/coremods/settings/icons/Unpin.tsx

@@ -0,0 +1,18 @@
+export default (): React.ReactElement => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <g fill="none" fillRule="evenodd">
+      <path
+        fill="#f04747"
+        d="M21.47,3.39,20.14,2.05,2.53,19.66,3.86,21l4.41-4.4,1.3-1.31,1.75-1.74,3.83-3.83Z"
+      />
+    </g>
+    <g fill="none">
+      <polygon
+        points="17 11.14 16.55 11.59 14.14 14 19 14 19 12 17 12 17 11.14"
+        fill="currentColor"
+      />
+      <polygon points="16.91 3 5 3 5 5 7 5 7 12 5 12 5 14 5.91 14 16.91 3" fill="currentColor" />
+      <polygon points="12.72 15.42 11 17.14 11 22 13 22 13 15.14 12.72 15.42" fill="currentColor" />
+    </g>
+  </svg>
+);

src/renderer/coremods/settings/icons/index.ts

@@ -4,6 +4,9 @@ import Link from "./Link";
 import Reload from "./Reload";
 import Settings from "./Settings";
 import Trash from "./Trash";
+import Popout from "./Popout";
+import Pin from "./Pin";
+import Unpin from "./Unpin";
 
 export default {
   Discord,
@@ -12,4 +15,7 @@ export default {
   Reload,
   Settings,
   Trash,
+  Popout,
+  Pin,
+  Unpin,
 };

src/renderer/coremods/settings/index.tsx

@@ -2,7 +2,7 @@ import { Messages } from "@common/i18n";
 import { Text } from "@components";
 import { Injector } from "@replugged";
 import { Divider, Header, Section, insertSections, settingsTools } from "./lib";
-import { General, Plugins, QuickCSS, Themes, Updater } from "./pages";
+import { ConnectedQuickCSS, General, Plugins, Themes, Updater } from "./pages";
 
 const injector = new Injector();
 
@@ -28,7 +28,7 @@ export function start(): void {
     Section({
       name: "rp-quickcss",
       label: () => Messages.REPLUGGED_QUICKCSS,
-      elem: QuickCSS,
+      elem: ConnectedQuickCSS as unknown as (args: unknown) => React.ReactElement,
     }),
     Section({
       name: "rp-plugins",

src/renderer/coremods/settings/pages/QuickCSS.css

@@ -21,6 +21,10 @@
 /* Scrollbar */
 #replugged-quickcss-wrapper .cm-scroller {
   overflow: auto;
+  max-height: 75vh;
+}
+#replugged-quickcss-wrapper[data-popout="true"] .cm-scroller {
+  max-height: 100vh;
 }
 #replugged-quickcss-wrapper .cm-scroller::-webkit-scrollbar {
   width: 16px;
@@ -183,3 +187,28 @@
 #replugged-quickcss-wrapper .cm-specialChar {
   color: var(--red-400);
 }
+
+.replugged-quickcss-header {
+  height: 30px;
+  color: var(--text-normal);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding: 7px 15px;
+  background-color: var(--background-secondary);
+}
+
+#replugged-quickcss-wrapper[data-popout="true"] .replugged-quickcss-header {
+  height: 16px;
+}
+
+.replugged-quickcss-header span,
+.replugged-quickcss-header div,
+.replugged-quickcss-header svg {
+  width: 100%;
+  height: 100%;
+}
+[class^="content"]:has(> #replugged-quickcss-wrapper) {
+  display: block;
+}

src/renderer/coremods/settings/pages/QuickCSS.tsx

@@ -1,13 +1,16 @@
-import { React, toast } from "@common";
+import { React, flux, toast } from "@common";
 import { Messages } from "@common/i18n";
 import { EditorView, basicSetup } from "codemirror";
 import { EditorState } from "@codemirror/state";
 import { css } from "@codemirror/lang-css";
 import { githubDark, githubLight } from "./codemirror-github";
 import { webpack } from "@replugged";
-import { Button, Divider, Flex, Text } from "@components";
-import "./QuickCSS.css";
+import { Button, ButtonItem, Clickable, Divider, Flex, Text, Tooltip } from "@components";
 import { generalSettings } from "./General";
+import { Store } from "@common/flux";
+import Icons from "../icons";
+
+import "./QuickCSS.css";
 
 interface UseCodeMirrorOptions {
   value?: string;
@@ -22,6 +25,29 @@ type ThemeModule = {
   removeChangeListener: (listener: () => unknown) => unknown;
 };
 
+const PopoutModule = await webpack.waitForModule(
+  webpack.filters.bySource('type:"POPOUT_WINDOW_OPEN"'),
+)!;
+const openPopout = webpack.getFunctionBySource<
+  (key: string, render: React.ComponentType, features: Record<string, string>) => void
+>(PopoutModule, "POPOUT_WINDOW_OPEN")!;
+const closePopout = webpack.getFunctionBySource<(key: string) => void>(
+  PopoutModule,
+  "POPOUT_WINDOW_CLOSE",
+)!;
+const setAlwaysOnTop = webpack.getFunctionBySource<(key: string, alwaysOnTop: boolean) => void>(
+  PopoutModule,
+  "POPOUT_WINDOW_SET_ALWAYS_ON_TOP",
+)!;
+const PopoutWindowStore = webpack.getByStoreName<
+  Store & {
+    getWindow: (key: string) => Window;
+    getWindowOpen: (key: string) => boolean;
+    getIsAlwaysOnTop: (key: string) => boolean;
+  }
+>("PopoutWindowStore")!;
+let PopoutWindow = webpack.getBySource<React.ComponentType>(".EMBEDDED_ACTIVITIES_ARE_YOU_SURE_WANT_TO_LEAVE");
+
 function useTheme(): "light" | "dark" {
   const [theme, setTheme] = React.useState<"light" | "dark">("dark");
 
@@ -109,7 +135,7 @@ function useCodeMirror({ value: initialValueParam, onChange, container }: UseCod
   return { value, setValue: customSetValue };
 }
 
-export const QuickCSS = (): React.ReactElement => {
+const QuickCSS = (props: { popout: boolean } & Record<string, boolean>): React.ReactElement => {
   const ref = React.useRef<HTMLDivElement>(null);
   const { value, setValue } = useCodeMirror({
     container: ref.current,
@@ -169,24 +195,98 @@ export const QuickCSS = (): React.ReactElement => {
     if (autoApply) setReloadTimer(setTimeout(reload, 500));
   }, [value]);
 
+  if (props.popout) {
+    React.useEffect(() => {
+      const window = PopoutWindowStore.getWindow("DISCORD_REPLUGGED_QUICKCSS");
+      let el = window.document.createElement("link");
+      el.rel = "stylesheet";
+      el.href = `replugged://renderer.css?t=${Date.now()}`;
+      window.document.head.appendChild(el);
+    }, [])
+  }
+  const [alwaysOnTop, setAlwaysOnTop_] = React.useState(props.popoutOnTop);
+
   return (
     <>
-      <Flex justify={Flex.Justify.BETWEEN} align={Flex.Align.START}>
-        <Text.H2>{Messages.REPLUGGED_QUICKCSS}</Text.H2>
-        <div style={{ display: "flex" }}>
-          {autoApply ? null : (
-            <Button onClick={reloadAndToast}>{Messages.REPLUGGED_QUICKCSS_CHANGES_APPLY}</Button>
-          )}
-          <Button
-            onClick={() => window.RepluggedNative.quickCSS.openFolder()}
-            color={Button.Colors.PRIMARY}
-            look={Button.Looks.LINK}>
-            {Messages.REPLUGGED_QUICKCSS_FOLDER_OPEN}
-          </Button>
+      {!props.popout ? <>
+        <Flex justify={Flex.Justify.BETWEEN} align={Flex.Align.START}>
+          <Text.H2>{Messages.REPLUGGED_QUICKCSS}</Text.H2>
+          <div style={{ display: "flex" }}>
+            {autoApply ? null : (
+              <Button onClick={reloadAndToast}>{Messages.REPLUGGED_QUICKCSS_CHANGES_APPLY}</Button>
+            )}
+            <Button
+              onClick={() => window.RepluggedNative.quickCSS.openFolder()}
+              color={Button.Colors.PRIMARY}
+              look={Button.Looks.LINK}>
+              {Messages.REPLUGGED_QUICKCSS_FOLDER_OPEN}
+            </Button>
+          </div>
+        </Flex>
+        <Divider style={{ margin: "20px 0px" }} />
+      </> : null}
+
+      {!props.popout && props.isPopoutOpen ? (
+        <ButtonItem
+          button={Messages.POPOUT_RETURN}
+          onClick={() => {
+            closePopout("DISCORD_REPLUGGED_QUICKCSS");
+          }}>
+          {Messages.REPLUGGED_QUICKCSS_POPPED_OUT}
+        </ButtonItem>
+      ) : (
+        <div id="replugged-quickcss-wrapper" data-popout={props.popout}>
+          <div className="replugged-quickcss-header">
+            {props.popout ? (
+              <Tooltip
+                text={alwaysOnTop ? Messages.POPOUT_REMOVE_FROM_TOP : Messages.POPOUT_STAY_ON_TOP}>
+                <Clickable
+                  onClick={() => {
+                    setAlwaysOnTop("DISCORD_REPLUGGED_QUICKCSS", !alwaysOnTop);
+                    setAlwaysOnTop_(!alwaysOnTop);
+                  }}>
+                  {alwaysOnTop ? <Icons.Unpin /> : <Icons.Pin />}
+                </Clickable>
+              </Tooltip>
+            ) : (
+              <Tooltip text={Messages.POPOUT_PLAYER}>
+                <Clickable
+                  onClick={() => {
+                    if (!PopoutWindow)
+                      PopoutWindow = webpack.getBySource(".EMBEDDED_ACTIVITIES_ARE_YOU_SURE_WANT_TO_LEAVE");
+                    openPopout(
+                      "DISCORD_REPLUGGED_QUICKCSS",
+                      () => (
+                        <PopoutWindow
+                          ref={React.createRef()}
+                          withTitleBar={true}
+                          windowKey="DISCORD_REPLUGGED_QUICKCSS"
+                          title={Messages.REPLUGGED_QUICKCSS}>
+                          <QuickCSS popout={true}></QuickCSS>
+                        </PopoutWindow>
+                      ),
+                      {},
+                    );
+                  }}>
+                  <Icons.Popout />
+                </Clickable>
+              </Tooltip>
+            )}
+          </div>
+          <div ref={ref}></div>
         </div>
-      </Flex>
-      <Divider style={{ margin: "20px 0px" }} />
-      <div ref={ref} id="replugged-quickcss-wrapper" />
+      )}
     </>
   );
 };
+console.log("omg")
+export const ConnectedQuickCSS = flux.connectStores<
+  { popout: boolean },
+  { popout: boolean; isPopoutOpen: boolean }
+>([PopoutWindowStore], (props) => {
+  return {
+    isPopoutOpen: PopoutWindowStore.getWindowOpen("DISCORD_REPLUGGED_QUICKCSS"),
+    popoutOnTop: PopoutWindowStore.getIsAlwaysOnTop("DISCORD_REPLUGGED_QUICKCSS"),
+    ...props,
+  };
+})(QuickCSS);