sticky popout

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

@@ -2,6 +2,9 @@ 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="M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6"></path>
+    <path
+      fill="currentColor"
+      d="M19 3H5V5H7V12H5V14H11V22H13V14H19V12H17V5H19V3Z"
+    />
   </svg>
-)
+);

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

@@ -0,0 +1,14 @@
+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,8 +4,9 @@ import Link from "./Link";
 import Reload from "./Reload";
 import Settings from "./Settings";
 import Trash from "./Trash";
-import Close from "./Close";
 import Popout from "./Popout";
+import Pin from "./Pin";
+import Unpin from "./Unpin";
 
 export default {
   Discord,
@@ -14,6 +15,7 @@ export default {
   Reload,
   Settings,
   Trash,
-  Close,
   Popout,
+  Pin,
+  Unpin
 };

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

@@ -11,10 +11,9 @@ import { generalSettings } from "./General";
 import { ReactComponent } from "src/types";
 import { Store } from "@common/flux";
 import Settings from "../icons/Settings";
-import Close from "../icons/Close";
 import Popout from "../icons/Popout";
-
-const { connectStores } = flux;
+import Unpin from "../icons/Unpin";
+import Pin from "../icons/Pin";
 
 interface UseCodeMirrorOptions {
   value?: string;
@@ -42,10 +41,18 @@ const openPopout = webpack.getFunctionBySource(PopoutModule, "POPOUT_WINDOW_OPEN
 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
@@ -212,6 +219,8 @@ const QuickCSS = (props: { popout: boolean } & Record<string, boolean>): React.R
     }, []);
   }
 
+  const [ alwaysOnTop, setAlwaysOnTop_ ] = React.useState(props.popoutOnTop);
+
   return (
     <>
       {!props.popout ? (
@@ -251,25 +260,28 @@ const QuickCSS = (props: { popout: boolean } & Record<string, boolean>): React.R
               <Settings />
             </Tooltip>
 
-            <Tooltip text={props.popout ? Messages.CLOSE : Messages.POPOUT_PLAYER}>
-              {!props.popout ? (
-                <Popout onClick={() => {
-                  openPopout(
-                    "DISCORD_REPLUGGED_QUICKCSS",
-                    () => (
-                      <DnDProvider windowKey="DISCORD_REPLUGGED_QUICKCSS">
-                        <QuickCSS popout={true}></QuickCSS>
-                      </DnDProvider>
-                    ),
-                    {},
-                  );
-                }} />
-              ) : (
-                <Close onClick={() => {
-                  closePopout("DISCORD_REPLUGGED_QUICKCSS");
-                }} />
-              )}
-            </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>
@@ -278,9 +290,10 @@ const QuickCSS = (props: { popout: boolean } & Record<string, boolean>): React.R
   );
 };
 
-export const ConnectedQuickCSS = connectStores<{ popout: boolean }, { popout: boolean; isPopoutOpen: boolean }>([PopoutWindowStore], (props) => {
+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);