QuickCSS "Redesign"

i18n/en-US.messages.d.ts

@@ -1269,6 +1269,19 @@ export declare const messages: {
    * Missing translations: `bg`, `da`, `el`, `es-419`, `hi`, `hr`, `lt`, `no`, `ro`, `th`
    */
   'REPLUGGED_QUICKCSS_CHANGES_APPLY': TypedIntlMessageGetter<{}>,
+  /**
+   * Key: `NNLlfn`
+   * 
+   * ### Definition
+   * ```text
+   * You've popped out the editor to another window.
+   * ```
+   * 
+   * ### Problems
+   * 
+   * Missing translations: `bg`, `cs`, `da`, `de`, `el`, `en-GB`, `es-419`, `es-ES`, `fi`, `fr`, `hi`, `hr`, `hu`, `it`, `ja`, `ko`, `lt`, `nl`, `no`, `pl`, `pt-BR`, `ro`, `ru`, `sv-SE`, `th`, `tr`, `uk`, `vi`, `zh-CN`, `zh-TW`
+   */
+  'REPLUGGED_QUICKCSS_EDITOR_POPPED_OUT': TypedIntlMessageGetter<{}>,
   /**
    * Key: `Nk3LNj`
    * 
@@ -1643,7 +1656,7 @@ export declare const messages: {
    * 
    * ### Problems
    * 
-   * Missing translations: `bg`, `cs`, `da`, `de`, `el`, `en-GB`, `es-419`, `es-ES`, `fi`, `fr`, `hi`, `hr`, `hu`, `it`, `ja`, `ko`, `lt`, `nl`, `no`, `pl`, `pt-BR`, `ro`, `ru`, `sv-SE`, `th`, `tr`, `uk`, `vi`, `zh-CN`, `zh-TW`
+   * Missing translations: `bg`, `cs`, `da`, `de`, `el`, `en-GB`, `es-419`, `es-ES`, `fi`, `fr`, `hi`, `hr`, `hu`, `it`, `ja`, `ko`, `lt`, `no`, `pl`, `pt-BR`, `ro`, `ru`, `sv-SE`, `th`, `tr`, `uk`, `vi`, `zh-CN`, `zh-TW`
    */
   'REPLUGGED_SETTINGS_QUICKCSS_ENABLE': TypedIntlMessageGetter<{}>,
   /**
@@ -1656,7 +1669,7 @@ export declare const messages: {
    * 
    * ### Problems
    * 
-   * Missing translations: `bg`, `cs`, `da`, `de`, `el`, `en-GB`, `es-419`, `es-ES`, `fi`, `fr`, `hi`, `hr`, `hu`, `it`, `ja`, `ko`, `lt`, `nl`, `no`, `pl`, `pt-BR`, `ro`, `ru`, `sv-SE`, `th`, `tr`, `uk`, `vi`, `zh-CN`, `zh-TW`
+   * Missing translations: `bg`, `cs`, `da`, `de`, `el`, `en-GB`, `es-419`, `es-ES`, `fi`, `fr`, `hi`, `hr`, `hu`, `it`, `ja`, `ko`, `lt`, `no`, `pl`, `pt-BR`, `ro`, `ru`, `sv-SE`, `th`, `tr`, `uk`, `vi`, `zh-CN`, `zh-TW`
    */
   'REPLUGGED_SETTINGS_QUICKCSS_ENABLE_DESC': TypedIntlMessageGetter<{}>,
   /**

i18n/en-US.messages.js

@@ -239,5 +239,6 @@ export default defineMessages({
   "REPLUGGED_SETTINGS_DISCORD_DEVTOOLS": "Enable Discord Internal DevTools",
   "REPLUGGED_SETTINGS_DISCORD_DEVTOOLS_DESC": "Replaces the help button in the title bar with Discord's internal developer tools (different from Chrome DevTools). This setting requires Discord experiments to be enabled first. **Requires restart**.",
   "REPLUGGED_SETTINGS_QUICKCSS_ENABLE": "Enable Quick CSS",
-  "REPLUGGED_SETTINGS_QUICKCSS_ENABLE_DESC": "Apply custom styles to Discord instantly. Change colors, layout, and appearance in real time without installing themes."
-});
+  "REPLUGGED_SETTINGS_QUICKCSS_ENABLE_DESC": "Apply custom styles to Discord instantly. Change colors, layout, and appearance in real time without installing themes.",
+  "REPLUGGED_QUICKCSS_EDITOR_POPPED_OUT": "You've popped out the editor to another window."
+});

src/globals.d.ts

@@ -30,6 +30,9 @@ declare global {
       relaunch: () => void;
     };
     window: {
+      close(key: string): void;
+      maximize(key: string): void;
+      minimize(key: string): void;
       setDevtoolsCallbacks(onOpened?: (() => void) | null, onClosed?: (() => void) | null): void;
       focus(): void;
     };

src/main/index.ts

@@ -50,6 +50,27 @@ class BrowserWindow extends electron.BrowserWindow {
 
     super(opts);
     (this.webContents as RepluggedWebContents).originalPreload = originalPreload;
+    const defaultWindowOpenHandler = this.webContents.setWindowOpenHandler.bind(this.webContents);
+    this.webContents.setWindowOpenHandler = (cb) => {
+      defaultWindowOpenHandler(({ url, frameName, features, ...args }) => {
+        const ret = cb({ url, frameName, features, ...args });
+        if (frameName.startsWith("DISCORD_REPLUGGED") && ret.action === "allow") {
+          const trafficLightPosition = features.split(",").reduce(
+            (pos, pair) => {
+              const [key, value] = pair.split("=");
+              if (key === "trafficLightPositionX") pos.x = Number(value);
+              if (key === "trafficLightPositionY") pos.y = Number(value);
+              return pos;
+            },
+            { x: -1, y: -1 },
+          );
+          if (trafficLightPosition.x !== -1 && trafficLightPosition.y !== -1) {
+            ret.overrideBrowserWindowOptions!.trafficLightPosition = trafficLightPosition;
+          }
+        }
+        return ret;
+      });
+    };
   }
 }
 

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

@@ -0,0 +1,8 @@
+export default (): React.ReactElement => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path
+      fill="currentColor"
+      d="M17.3 18.7a1 1 0 0 0 1.4-1.4L13.42 12l5.3-5.3a1 1 0 0 0-1.42-1.4L12 10.58l-5.3-5.3a1 1 0 0 0-1.4 1.42L10.58 12l-5.3 5.3a1 1 0 1 0 1.42 1.4L12 13.42l5.3 5.3Z"
+    />
+  </svg>
+);

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

@@ -0,0 +1,8 @@
+export default (): React.ReactElement => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path
+      fill="currentColor"
+      d="M3.3 15.7a1 1 0 0 0 1.4 0L12 8.42l7.3 7.3a1 1 0 0 0 1.4-1.42l-8-8a1 1 0 0 0-1.4 0l-8 8a1 1 0 0 0 0 1.42Z"
+    />
+  </svg>
+);

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

@@ -0,0 +1,8 @@
+export default (): React.ReactElement => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path
+      fill="currentColor"
+      d="M3.3 8.3a1 1 0 0 1 1.4 0l7.3 7.29 7.3-7.3a1 1 0 1 1 1.4 1.42l-8 8a1 1 0 0 1-1.4 0l-8-8a1 1 0 0 1 0-1.42Z"
+    />
+  </svg>
+);

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

@@ -0,0 +1,8 @@
+export default (): React.ReactElement => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path
+      fill="currentColor"
+      d="M16.91 5C18.61 5 20 3.48 20 1.6v-.1a.5.5 0 0 0-.5-.5h-15a.5.5 0 0 0-.5.5v.1C4 3.49 5.38 5 7.09 5H8v4.35l-3.39 3.26A2 2 0 0 0 4 14.05V15a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-.95a2 2 0 0 0-.61-1.44L16 9.35V5h.91ZM13.37 17.25c.33 0 .56.3.5.61l-1.08 4.75a.5.5 0 0 1-.49.39h-.6a.5.5 0 0 1-.49-.39l-1.07-4.75a.5.5 0 0 1 .49-.61h2.74Z"
+    />
+  </svg>
+);

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

@@ -0,0 +1,12 @@
+export default (): React.ReactElement => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path
+      fill="currentColor"
+      d="M15 2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V4.41l-4.3 4.3a1 1 0 1 1-1.4-1.42L19.58 3H16a1 1 0 0 1-1-1Z"
+    />
+    <path
+      fill="currentColor"
+      d="M5 2a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 1 0-2 0v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 1 0 0-2H5Z"
+    />
+  </svg>
+);

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

@@ -0,0 +1,7 @@
+// copied from discord popout
+export default (): React.ReactElement => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M15 2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V4.41l-4.3 4.3a1 1 0 1 1-1.4-1.42L19.58 3H16a1 1 0 0 1-1-1Z" />
+    <path d="M5 2a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 1 0-2 0v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 1 0 0-2H5Z" />
+  </svg>
+);

src/renderer/coremods/settings/icons/Unpin.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="M22.7 2.7a1 1 0 0 0-1.4-1.4l-20 20a1 1 0 1 0 1.4 1.4l20-20ZM4.5 1h13.17a.5.5 0 0 1 .36.85L4.62 15.25c-.2.22-.56.2-.6-.1A1 1 0 0 1 4 15v-.95a2 2 0 0 1 .61-1.44L8 9.35V5h-.91C5.39 5 4 3.48 4 1.6v-.1c0-.28.22-.5.5-.5ZM17.77 11.05a.5.5 0 0 0-.7 0l-4.1 4.1a.5.5 0 0 0 .36.85H19a1 1 0 0 0 1-1v-.95a2 2 0 0 0-.61-1.44l-1.62-1.56ZM11.08 17.25a.5.5 0 0 0-.36.15l-.36.37a.5.5 0 0 0-.14.46l.99 4.38a.5.5 0 0 0 .49.39h.6a.5.5 0 0 0 .49-.39l1.07-4.75a.5.5 0 0 0-.49-.61h-2.3Z" />
+  </svg>
+);

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

@@ -1,15 +1,29 @@
+import Close from "./Close";
 import Discord from "./Discord";
 import GitHub from "./GitHub";
 import Link from "./Link";
+import Maximize from "./Maximize";
+import Minimize from "./Minimize";
+import Pin from "./Pin";
+import Popout from "./Popout";
+import Preview from "./Preview";
 import Reload from "./Reload";
 import Settings from "./Settings";
 import Trash from "./Trash";
+import Unpin from "./Unpin";
 
 export default {
+  Close,
   Discord,
   GitHub,
   Link,
+  Maximize,
+  Minimize,
+  Pin,
+  Popout,
+  Preview,
   Reload,
   Settings,
   Trash,
+  Unpin,
 };

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

@@ -3,16 +3,100 @@
 #replugged-quickcss-wrapper {
   height: 100%;
 }
+#rp-quickcss-tab {
+  display: flex;
+  flex-direction: column;
+}
+
+.platform-win #replugged-quickcss-wrapper {
+  max-height: calc(100% - var(--custom-app-top-bar-height) - 20px);
+}
+
+#rp-quickcss-tab #replugged-quickcss-wrapper {
+  height: auto;
+}
+#replugged-quickcss-wrapper {
+  max-height: calc(100% - 20px);
+  background-color: var(--background-base-lower);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+}
+
+#replugged-quickcss-wrapper .replugged-quickcss-header h2 {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.platform-osx
+  .replugged-quickcss-popout-root
+  #replugged-quickcss-wrapper
+  .replugged-quickcss-header
+  h2 {
+  opacity: 0;
+}
+
+.platform-osx
+  .replugged-quickcss-popout-root
+  #replugged-quickcss-wrapper
+  .replugged-quickcss-popout-navigation-container
+  replugged-quickcss-popout-navigation-minimize,
+.platform-osx
+  .replugged-quickcss-popout-root
+  #replugged-quickcss-wrapper
+  .replugged-quickcss-popout-navigation-container
+  replugged-quickcss-popout-navigation-maximize,
+.platform-osx
+  .replugged-quickcss-popout-root
+  #replugged-quickcss-wrapper
+  .replugged-quickcss-popout-navigation-container
+  replugged-quickcss-popout-navigation-close {
+  display: none;
+}
+
+.replugged-quickcss-popout-root {
+  height: 100%;
+  width: 100%;
+}
+.replugged-quickcss-popout-root #replugged-quickcss-wrapper {
+  max-height: 100%;
+  border-radius: unset;
+}
+
+.replugged-quickcss-popout-root #replugged-quickcss-wrapper .replugged-quickcss-header {
+  -webkit-app-region: drag;
+}
+#replugged-quickcss-wrapper .replugged-quickcss-header {
+  margin: 0 var(--space-8) 0 var(--space-16);
+}
+#replugged-quickcss-wrapper .replugged-quickcss-header .replugged-quickcss-header-buttons {
+  overflow: hidden;
+  flex-flow: row-reverse;
+  flex-grow: unset !important;
+  margin: var(--space-6) 0 var(--space-6);
+  gap: 5px;
+  -webkit-app-region: no-drag;
+}
+
 #replugged-quickcss-wrapper .cm-editor {
   max-height: calc(100% - 20px);
   background: var(--bg-overlay-2, var(--background-base-lower));
-  border: 1px solid var(--background-secondary-alt);
-  border-radius: 4px;
+  border-top: 1px solid var(--background-secondary-alt);
+  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
   outline: none !important;
 }
 .platform-win #replugged-quickcss-wrapper .cm-editor {
   max-height: calc(100% - var(--custom-app-top-bar-height) - 20px);
 }
+
+.replugged-quickcss-popout-root #replugged-quickcss-wrapper .cm-editor {
+  height: 100%;
+  max-height: calc(100% - 25px);
+}
+.platform-win .replugged-quickcss-popout-root #replugged-quickcss-wrapper .cm-editor {
+  max-height: calc(100% - var(--custom-app-top-bar-height) - 25px);
+}
 #replugged-quickcss-wrapper .cm-content {
   padding: 0px;
 }
@@ -187,3 +271,39 @@
 #replugged-quickcss-wrapper .cm-specialChar {
   color: var(--red-400);
 }
+
+#replugged-quickcss-wrapper .replugged-quickcss-popout-navigation-container {
+  display: flex;
+  gap: 5px;
+}
+
+#replugged-quickcss-wrapper .replugged-quickcss-popout-navigation-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--interactive-normal);
+  border: 1px solid var(--button-outline-primary-border);
+  border-radius: var(--radius-sm);
+  min-width: 38px;
+  min-height: 38px;
+}
+#replugged-quickcss-wrapper .replugged-quickcss-popout-navigation-button > svg {
+  width: 20px;
+  height: 20px;
+}
+
+#replugged-quickcss-wrapper .replugged-quickcss-popout-navigation-button:hover {
+  color: var(--interactive-hover);
+}
+
+#replugged-quickcss-wrapper
+  .replugged-quickcss-popout-navigation-button.replugged-quickcss-close-popout:active,
+#replugged-quickcss-wrapper
+  .replugged-quickcss-popout-navigation-button.replugged-quickcss-close-popout:hover {
+  color: var(--status-danger);
+  border-color: var(--status-danger);
+}
+
+#replugged-quickcss-wrapper .replugged-quickcss-popout-navigation-button:active {
+  color: var(--interactive-active);
+}