Feature/migration to scss

package.json

@@ -36,6 +36,7 @@
     "@electron-toolkit/utils": "^3.0.0",
     "@fontsource/noto-sans": "^5.1.0",
     "@hookform/resolvers": "^3.9.1",
+    "@monaco-editor/react": "^4.6.0",
     "@primer/octicons-react": "^19.9.0",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@reduxjs/toolkit": "^2.2.3",

src/locales/pt-BR/translation.json

@@ -7,7 +7,7 @@
     "featured": "Destaques",
     "hot": "Populares",
     "weekly": "📅 Mais baixados da semana",
-    "achievements": "🏆 Pra platinar",
+    "achievements": "🏆 Para platinar",
     "surprise_me": "Surpreenda-me",
     "no_results": "Nenhum resultado encontrado",
     "start_typing": "Comece a digitar para pesquisar…"

src/main/events/aparence/open-editor-window.ts

@@ -0,0 +1,7 @@
+import { registerEvent } from "../register-event";
+import { WindowManager } from "@main/services";
+
+const openEditorWindow = async (_event: Electron.IpcMainInvokeEvent) =>
+  WindowManager.openEditorWindow();
+
+registerEvent("openEditorWindow", openEditorWindow);

src/main/events/index.ts

@@ -49,6 +49,7 @@ import "./user-preferences/authenticate-real-debrid";
 import "./download-sources/put-download-source";
 import "./auth/sign-out";
 import "./auth/open-auth-window";
+import "./aparence/open-editor-window";
 import "./auth/get-session-hash";
 import "./user/get-user";
 import "./user/get-blocked-users";

src/main/services/window-manager.ts

@@ -190,6 +190,52 @@ export class WindowManager {
     }
   }
 
+  public static openEditorWindow() {
+    if (this.mainWindow) {
+      const editorWindow = new BrowserWindow({
+        width: 600,
+        height: 720,
+        minWidth: 600,
+        minHeight: 720,
+        backgroundColor: "#1c1c1c",
+        titleBarStyle: process.platform === "linux" ? "default" : "hidden",
+        ...(process.platform === "linux" ? { icon } : {}),
+        trafficLightPosition: { x: 16, y: 16 },
+        titleBarOverlay: {
+          symbolColor: "#DADBE1",
+          color: "#151515",
+          height: 34,
+        },
+        parent: this.mainWindow,
+        modal: true,
+        show: false,
+        maximizable: true,
+        resizable: true,
+        minimizable: true,
+        webPreferences: {
+          sandbox: false,
+          preload: path.join(__dirname, "../preload/index.mjs"),
+        },
+      });
+
+      editorWindow.removeMenu();
+
+      if (is.dev && process.env["ELECTRON_RENDERER_URL"]) {
+        editorWindow.loadURL(`${process.env["ELECTRON_RENDERER_URL"]}#/editor`);
+      } else {
+        editorWindow.loadFile(path.join(__dirname, "../renderer/index.html"), {
+          hash: "editor",
+        });
+      }
+
+      editorWindow.once("ready-to-show", () => {
+        editorWindow.show();
+      });
+
+      if (!app.isPackaged) editorWindow.webContents.openDevTools();
+    }
+  }
+
   public static redirect(hash: string) {
     if (!this.mainWindow) this.createMainWindow();
     this.loadMainWindowURL(hash);

src/preload/index.ts

@@ -313,4 +313,7 @@ contextBridge.exposeInMainWorld("electron", {
   /* Notifications */
   publishNewRepacksNotification: (newRepacksCount: number) =>
     ipcRenderer.invoke("publishNewRepacksNotification", newRepacksCount),
+
+  /* Editor */
+  openEditorWindow: () => ipcRenderer.invoke("openEditorWindow"),
 });

src/renderer/src/_theme.scss

@@ -0,0 +1,21 @@
+$spacing-unit: 8px;
+
+$color-background: #1c1c1c;
+$color-dark-background: #151515;
+$color-muted: #c0c1c7;
+$color-body: #8e919b;
+$color-border: rgba(255, 255, 255, 0.15);
+$color-success: #1c9749;
+$color-danger: #e11d48;
+$color-warning: #ffc107;
+
+$opacity-disabled: 0.5;
+$opacity-active: 0.7;
+
+$size-body: 14px;
+$size-small: 12px;
+
+$z-index-toast: 5;
+$z-index-bottom-panel: 3;
+$z-index-title-bar: 4;
+$z-index-backdrop: 4;

src/renderer/src/app.scss

@@ -0,0 +1,136 @@
+@use "./scss/variables" as vars;
+
+* {
+  box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+  width: 9px;
+  background-color: vars.$dark-background-color;
+}
+
+::-webkit-scrollbar-track {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-radius: 24px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255, 255, 255, 0.16);
+}
+
+html,
+body,
+#root,
+main {
+  height: 100%;
+}
+
+body {
+  overflow: hidden;
+  user-select: none;
+  font-family: "Noto Sans", sans-serif;
+  font-size: vars.$body-font-size;
+  color: vars.$body-color;
+  margin: 0;
+}
+
+button {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  font-family: inherit;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0;
+}
+
+p {
+  line-height: 20px;
+}
+
+#root,
+main {
+  display: flex;
+}
+
+#root {
+  flex-direction: column;
+}
+
+main {
+  overflow: hidden;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+label {
+  font-size: vars.$body-font-size;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+img {
+  -webkit-user-drag: none;
+}
+
+progress[value] {
+  -webkit-appearance: none;
+}
+
+.app-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-container__content {
+  overflow-y: auto;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+  background: linear-gradient(
+    0deg,
+    vars.$dark-background-color 50%,
+    vars.$background-color 100%
+  );
+}
+
+.app-container__title-bar {
+  display: flex;
+  width: 100%;
+  height: 35px;
+  min-height: 35px;
+  background-color: vars.$dark-background-color;
+  align-items: center;
+  padding: 0 vars.$spacing-unit * 2;
+  -webkit-app-region: drag;
+  z-index: vars.$title-bar-z-index;
+  border-bottom: 1px solid vars.$border-color;
+}
+
+.app-container__cloud-text {
+  background: linear-gradient(270deg, #16b195 50%, #3e62c0 100%);
+  background-clip: text;
+  color: transparent;
+}