QuickCSS improvements

i18n/en-US.json

@@ -62,6 +62,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.",
@@ -167,7 +170,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}",
@@ -189,7 +191,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,11 @@
+import { MouseEventHandler } from "react";
+
+export default (props: { onClick?: MouseEventHandler }): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    onClick={props.onClick}>
+    <path fill="currentColor" d="M19 3H5V5H7V12H5V14H11V22H13V14H19V12H17V5H19V3Z" />
+  </svg>
+);

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

@@ -0,0 +1,11 @@
+import { MouseEventHandler } from "react";
+
+export default (props: { onClick?: MouseEventHandler }): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    onClick={props.onClick}>
+    <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/Settings.tsx

@@ -1,5 +1,11 @@
-export default (): React.ReactElement => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
+import { MouseEventHandler } from "react";
+
+export default (props: { onClick?: MouseEventHandler }): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    fill="currentColor"
+    onClick={props.onClick}>
     {/* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
     <path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336c44.2 0 80-35.8 80-80s-35.8-80-80-80s-80 35.8-80 80s35.8 80 80 80z" />
   </svg>

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

@@ -0,0 +1,24 @@
+import { MouseEventHandler } from "react";
+
+export default (props: { onClick?: MouseEventHandler }): React.ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    onClick={props.onClick}>
+    <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

@@ -4,7 +4,7 @@ import { Injector } from "@replugged";
 import { filters, waitForModule } from "src/renderer/modules/webpack";
 import type { Section as SectionType } from "src/types/coremods/settings";
 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();
 
@@ -47,7 +47,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

@@ -1,3 +1,11 @@
+#replugged-quickcss-wrapper {
+  color: var(--text-normal);
+}
+
+#replugged-quickcss-wrapper[data-popout="true"] {
+  width: 100% !important;
+}
+
 #replugged-quickcss-wrapper .cm-editor {
   border: 1px solid transparent;
   border-radius: 4px;
@@ -25,4 +33,42 @@
 
 #replugged-quickcss-wrapper .cm-scroller {
   overflow: auto;
+  max-height: 75vh;
+}
+
+/* TODO: Fix the height not working in popout */
+#replugged-quickcss-wrapper[data-popout="true"] .cm-scroller {
+  max-height: 95vh;
+}
+
+#replugged-quickcss-wrapper .cm-scroller::-webkit-scrollbar {
+  width: 10px;
+  height: 0px;
+  padding: 10px;
+}
+
+#replugged-quickcss-wrapper .cm-scroller::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thin-thumb);
+  border-radius: 10px;
+}
+
+.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);
+}
+/* Why do these have to be different in different windows.. */
+#replugged-quickcss-wrapper[data-popout="true"] .replugged-quickcss-header {
+  height: 16px;
+}
+
+.replugged-quickcss-header span,
+.replugged-quickcss-header svg {
+  width: 100%;
+  height: 100%;
 }

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

@@ -1,13 +1,19 @@
-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 { Button, ButtonItem, Divider, Flex, Text, Tooltip } from "@components";
 import "./QuickCSS.css";
 import { generalSettings } from "./General";
+import { ReactComponent } from "src/types";
+import { Store } from "@common/flux";
+import Settings from "../icons/Settings";
+import Popout from "../icons/Popout";
+import Unpin from "../icons/Unpin";
+import Pin from "../icons/Pin";
 
 interface UseCodeMirrorOptions {
   value?: string;
@@ -22,6 +28,38 @@ type ThemeModule = {
   removeChangeListener: (listener: () => unknown) => unknown;
 };
 
+const PopoutModule = await webpack.waitForModule(
+  webpack.filters.bySource('type:"POPOUT_WINDOW_OPEN"'),
+);
+// eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
+const openPopout = webpack.getFunctionBySource(PopoutModule, "POPOUT_WINDOW_OPEN") as (
+  key: string,
+  render: ReactComponent<unknown>,
+  features: Record<string, string>,
+) => void;
+// eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
+const closePopout = webpack.getFunctionBySource(PopoutModule, "POPOUT_WINDOW_CLOSE") as (
+  key: string,
+) => void;
+
+// eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
+const setAlwaysOnTop = webpack.getFunctionBySource(
+  PopoutModule,
+  "POPOUT_WINDOW_SET_ALWAYS_ON_TOP",
+) as (key: string, alwaysOnTop: boolean) => void;
+
+// eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
+const PopoutWindowStore = webpack.getByStoreName("PopoutWindowStore") as Store & {
+  getWindow: (key: string) => Window;
+  getWindowOpen: (key: string) => boolean;
+  getIsAlwaysOnTop: (key: string) => boolean;
+};
+
+// eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
+const DnDProvider = webpack.getBySource(
+  ".EMBEDDED_ACTIVITIES_ARE_YOU_SURE_WANT_TO_LEAVE",
+) as ReactComponent<unknown>;
+
 function useTheme(): "light" | "dark" {
   const [theme, setTheme] = React.useState<"light" | "dark">("dark");
 
@@ -110,7 +148,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,
@@ -170,24 +208,109 @@ 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="Close Popout"
+          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">
+            <Tooltip text={Messages.SETTINGS}>
+              <Settings />
+            </Tooltip>
+
+            {props.popout ? (
+              <Tooltip
+                text={alwaysOnTop ? Messages.POPOUT_REMOVE_FROM_TOP : Messages.POPOUT_STAY_ON_TOP}>
+                {alwaysOnTop ? (
+                  <Unpin
+                    onClick={() => {
+                      setAlwaysOnTop("DISCORD_REPLUGGED_QUICKCSS", false);
+                      setAlwaysOnTop_(false);
+                    }}
+                  />
+                ) : (
+                  <Pin
+                    onClick={() => {
+                      setAlwaysOnTop("DISCORD_REPLUGGED_QUICKCSS", true);
+                      setAlwaysOnTop_(true);
+                    }}
+                  />
+                )}
+              </Tooltip>
+            ) : (
+              <Tooltip text={Messages.POPOUT_PLAYER}>
+                <Popout
+                  onClick={() => {
+                    openPopout(
+                      "DISCORD_REPLUGGED_QUICKCSS",
+                      () => (
+                        <DnDProvider windowKey="DISCORD_REPLUGGED_QUICKCSS">
+                          <QuickCSS popout={true}></QuickCSS>
+                        </DnDProvider>
+                      ),
+                      {},
+                    );
+                  }}
+                />
+              </Tooltip>
+            )}
+          </div>
+          <div ref={ref}></div>
         </div>
-      </Flex>
-      <Divider style={{ margin: "20px 0px" }} />
-      <div ref={ref} id="replugged-quickcss-wrapper" />
+      )}
     </>
   );
 };
+
+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);

src/renderer/managers/quick-css.ts

@@ -12,6 +12,5 @@ export function unload(): void {
 }
 
 export function reload(): void {
-  unload();
-  load();
+  if (el) el.href = `replugged://quickcss/main.css?t=${Date.now()}`;
 }