refactor: lint

src/locales/en/translation.json

@@ -315,7 +315,8 @@
     "delete_all_themes": "Delete all themes",
     "delete_all_themes_description": "This will delete all your custom themes",
     "delete_theme_description": "This will delete the theme {{theme}}",
-    "cancel": "Cancel"
+    "cancel": "Cancel",
+    "appearance": "Appearance"
   },
   "notifications": {
     "download_complete": "Download complete",

src/main/events/themes/get-custom-theme-by-id.ts

@@ -1,7 +1,10 @@
 import { themes } from "@main/level/sublevels/themes";
 import { registerEvent } from "../register-event";
 
-const getCustomThemeById = async (_event: Electron.IpcMainInvokeEvent, themeId: string) => {
+const getCustomThemeById = async (
+  _event: Electron.IpcMainInvokeEvent,
+  themeId: string
+) => {
   return await themes.get(themeId);
 };
 

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

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

src/main/services/window-manager.ts

@@ -230,15 +230,10 @@ export class WindowManager {
           `${process.env["ELECTRON_RENDERER_URL"]}#/editor?themeId=${themeId}`
         );
       } else {
-        editorWindow.loadFile(
+        editorWindow.loadFile(path.join(__dirname, "../renderer/index.html"), {
-          path.join(__dirname, "../renderer/index.html"),
-          {
           hash: "editor",
+        });
       }
-        );
-      }
-
-
 
       editorWindow.once("ready-to-show", () => {
         editorWindow.show();

src/preload/index.ts

@@ -349,11 +349,12 @@ contextBridge.exposeInMainWorld("electron", {
   getActiveCustomTheme: () => ipcRenderer.invoke("getActiveCustomTheme"),
 
   /* Editor */
-  openEditorWindow: (themeId: string) => ipcRenderer.invoke("openEditorWindow", themeId),
+  openEditorWindow: (themeId: string) =>
-  injectCSS: (cssString: string) =>
+    ipcRenderer.invoke("openEditorWindow", themeId),
-    ipcRenderer.invoke("injectCSS", cssString),
+  injectCSS: (cssString: string) => ipcRenderer.invoke("injectCSS", cssString),
   onCssInjected: (cb: (cssString: string) => void) => {
-    const listener = (_event: Electron.IpcRendererEvent, cssString: string) => cb(cssString);
+    const listener = (_event: Electron.IpcRendererEvent, cssString: string) =>
+      cb(cssString);
     ipcRenderer.on("css-injected", listener);
     return () => ipcRenderer.removeListener("css-injected", listener);
   },

src/renderer/src/declaration.d.ts

@@ -282,7 +282,9 @@ declare global {
     /* Editor */
     openEditorWindow: (themeId: string) => Promise<void>;
     injectCSS: (cssString: string) => Promise<void>;
-    onCssInjected: (cb: (cssString: string) => void) => () => Electron.IpcRenderer;
+    onCssInjected: (
+      cb: (cssString: string) => void
+    ) => () => Electron.IpcRenderer;
   }
 
   interface Window {

src/renderer/src/pages/editor/editor.tsx

@@ -1,22 +1,26 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 import "./editor.scss";
-import Editor from '@monaco-editor/react';
+import Editor from "@monaco-editor/react";
-import { Theme } from '@types';
+import { Theme } from "@types";
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from "react-router-dom";
-import { Button } from '@renderer/components';
+import { Button } from "@renderer/components";
-import { CheckIcon, CodeIcon, ProjectRoadmapIcon } from '@primer/octicons-react';
+import {
-import { useTranslation } from 'react-i18next';
+  CheckIcon,
+  CodeIcon,
+  ProjectRoadmapIcon,
+} from "@primer/octicons-react";
+import { useTranslation } from "react-i18next";
 
 const EditorPage = () => {
   const [searchParams] = useSearchParams();
   const [theme, setTheme] = useState<Theme | null>(null);
-  const [code, setCode] = useState('');
+  const [code, setCode] = useState("");
-  const [activeTab, setActiveTab] = useState('code');
+  const [activeTab, setActiveTab] = useState("code");
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
-  const themeId = searchParams.get('themeId');
+  const themeId = searchParams.get("themeId");
 
-  const { t } = useTranslation('settings');
+  const { t } = useTranslation("settings");
 
   const handleTabChange = (tab: string) => {
     setActiveTab(tab);
@@ -24,7 +28,7 @@ const EditorPage = () => {
 
   useEffect(() => {
     if (themeId) {
-      window.electron.getCustomThemeById(themeId).then(loadedTheme => {
+      window.electron.getCustomThemeById(themeId).then((loadedTheme) => {
         if (loadedTheme) {
           setTheme(loadedTheme);
           setCode(loadedTheme.code);
@@ -35,16 +39,16 @@ const EditorPage = () => {
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event.ctrlKey || event.metaKey) && event.key === 's') {
+      if ((event.ctrlKey || event.metaKey) && event.key === "s") {
         event.preventDefault();
         handleSave();
       }
     };
 
-    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener("keydown", handleKeyDown);
 
     return () => {
-      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener("keydown", handleKeyDown);
     };
   }, [code, theme]);
 
@@ -60,7 +64,7 @@ const EditorPage = () => {
       const updatedTheme = {
         ...theme,
         code: code,
-        updatedAt: new Date()
+        updatedAt: new Date(),
       };
 
       await window.electron.updateCustomTheme(theme.id, updatedTheme);
@@ -76,13 +80,10 @@ const EditorPage = () => {
     <div className="editor">
       <div className="editor__header">
         <h1>{theme?.name}</h1>
-        {hasUnsavedChanges && (
+        {hasUnsavedChanges && <div className="editor__header__status"></div>}
-          <div className="editor__header__status">
-          </div>
-        )}
       </div>
 
-      {activeTab === 'code' && (
+      {activeTab === "code" && (
         <Editor
           theme="vs-dark"
           defaultLanguage="css"
@@ -91,37 +92,45 @@ const EditorPage = () => {
           options={{
             minimap: { enabled: false },
             fontSize: 14,
-            lineNumbers: 'on',
+            lineNumbers: "on",
-            wordWrap: 'on',
+            wordWrap: "on",
             automaticLayout: true,
           }}
         />
       )}
 
-      {activeTab === 'info' && (
+      {activeTab === "info" && (
         <div className="editor__info">
-          entao mano eu ate fiz isso aqui mas tava feio dms ai deu vergonha e removi kkkk
+          entao mano eu ate fiz isso aqui mas tava feio dms ai deu vergonha e
+          removi kkkk
         </div>
       )}
 
       <div className="editor__footer">
         <div className="editor__footer-actions">
           <div className="editor__footer-actions__tabs">
-            <Button onClick={() => handleTabChange('code')} theme='dark' className={activeTab === 'code' ? 'active' : ''}>
+            <Button
+              onClick={() => handleTabChange("code")}
+              theme="dark"
+              className={activeTab === "code" ? "active" : ""}
+            >
               <CodeIcon />
-              {t('editor_tab_code')}
+              {t("editor_tab_code")}
             </Button>
-            <Button onClick={() => handleTabChange('info')} theme='dark' className={activeTab === 'info' ? 'active' : ''}>
+            <Button
+              onClick={() => handleTabChange("info")}
+              theme="dark"
+              className={activeTab === "info" ? "active" : ""}
+            >
               <ProjectRoadmapIcon />
-              {t('editor_tab_info')}
+              {t("editor_tab_info")}
             </Button>
           </div>
 
           <Button onClick={handleSave}>
             <CheckIcon />
-            {t('editor_tab_save')}
+            {t("editor_tab_save")}
           </Button>
-
         </div>
       </div>
     </div>

src/renderer/src/pages/settings/aparence/components/theme-actions.tsx

@@ -11,7 +11,7 @@ interface ThemeActionsProps {
 }
 
 export const ThemeActions = ({ onListUpdated }: ThemeActionsProps) => {
-  const { t } = useTranslation('settings');
+  const { t } = useTranslation("settings");
 
   const [addThemeModalVisible, setAddThemeModalVisible] = useState(false);
   const [deleteAllThemesModalVisible, setDeleteAllThemesModalVisible] =

src/renderer/src/pages/settings/aparence/components/theme-card.tsx

@@ -14,7 +14,7 @@ interface ThemeCardProps {
 }
 
 export const ThemeCard = ({ theme, onListUpdated }: ThemeCardProps) => {
-  const { t } = useTranslation('settings');
+  const { t } = useTranslation("settings");
   const navigate = useNavigate();
 
   const [deleteThemeModalVisible, setDeleteThemeModalVisible] = useState(false);
@@ -31,14 +31,14 @@ export const ThemeCard = ({ theme, onListUpdated }: ThemeCardProps) => {
         removeCustomCss();
         await window.electron.updateCustomTheme(activeTheme.id, {
           ...activeTheme,
-          isActive: false
+          isActive: false,
         });
       }
 
       injectCustomCss(currentTheme.code);
       await window.electron.updateCustomTheme(currentTheme.id, {
         ...currentTheme,
-        isActive: true
+        isActive: true,
       });
 
       onListUpdated();
@@ -52,7 +52,7 @@ export const ThemeCard = ({ theme, onListUpdated }: ThemeCardProps) => {
       removeCustomCss();
       await window.electron.updateCustomTheme(theme.id, {
         ...theme,
-        isActive: false
+        isActive: false,
       });
 
       onListUpdated();

src/renderer/src/pages/settings/aparence/settings-appearance.tsx

@@ -26,7 +26,11 @@ export const SettingsAppearance = () => {
           <ThemePlaceholder onListUpdated={loadThemes} />
         ) : (
           [...themes]
-            .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
+            .sort(
+              (a, b) =>
+                new Date(b.updatedAt).getTime() -
+                new Date(a.updatedAt).getTime()
+            )
             .map((theme) => (
               <ThemeCard
                 key={theme.id}