feat: removing crypto from level

src/renderer/src/app.tsx

@@ -30,7 +30,6 @@ import { HydraCloudModal } from "./pages/shared-modals/hydra-cloud/hydra-cloud-m
 
 import { injectCustomCss } from "./helpers";
 import "./app.scss";
-import { Theme } from "@types";
 
 export interface AppProps {
   children: React.ReactNode;
@@ -214,22 +213,22 @@ export function App() {
     const id = crypto.randomUUID();
     const channel = new BroadcastChannel(`download_sources:sync:${id}`);
 
-    channel.onmessage = (event: MessageEvent<number>) => {
+    channel.onmessage = async (event: MessageEvent<number>) => {
       const newRepacksCount = event.data;
       window.electron.publishNewRepacksNotification(newRepacksCount);
       updateRepacks();
 
-      downloadSourcesTable.toArray().then((downloadSources) => {
-        downloadSources
-          .filter((source) => !source.fingerprint)
-          .forEach((downloadSource) => {
-            window.electron
-              .putDownloadSource(downloadSource.objectIds)
-              .then(({ fingerprint }) => {
-                downloadSourcesTable.update(downloadSource.id, { fingerprint });
-              });
-          });
-      });
+      const downloadSources = await downloadSourcesTable.toArray();
+
+      downloadSources
+        .filter((source) => !source.fingerprint)
+        .forEach(async (downloadSource) => {
+          const { fingerprint } = await window.electron.putDownloadSource(
+            downloadSource.objectIds
+          );
+
+          downloadSourcesTable.update(downloadSource.id, { fingerprint });
+        });
     };
 
     downloadSourcesWorker.postMessage(["SYNC_DOWNLOAD_SOURCES", id]);
@@ -237,9 +236,9 @@ export function App() {
 
   useEffect(() => {
     const loadAndApplyTheme = async () => {
-      const activeTheme: Theme = await window.electron.getActiveCustomTheme();
+      const activeTheme = await window.electron.getActiveCustomTheme();
 
-      if (activeTheme.code) {
+      if (activeTheme?.code) {
         injectCustomCss(activeTheme.code);
       }
     };

src/renderer/src/main.tsx

@@ -33,7 +33,9 @@ const Profile = React.lazy(() => import("./pages/profile/profile"));
 const Achievements = React.lazy(
   () => import("./pages/achievements/achievements")
 );
-const Editor = React.lazy(() => import("./pages/editor/editor"));
+const ThemeEditor = React.lazy(
+  () => import("./pages/theme-editor/theme-editor")
+);
 
 import * as Sentry from "@sentry/react";
 
@@ -107,8 +109,8 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
           </Route>
 
           <Route
-            path="/editor"
-            element={<SuspenseWrapper Component={Editor} />}
+            path="/theme-editor"
+            element={<SuspenseWrapper Component={ThemeEditor} />}
           />
         </Routes>
       </HashRouter>

src/renderer/src/pages/downloads/delete-game-modal.tsx

@@ -12,7 +12,7 @@ export function DeleteGameModal({
   onClose,
   visible,
   deleteGame,
-}: DeleteGameModalProps) {
+}: Readonly<DeleteGameModalProps>) {
   const { t } = useTranslation("downloads");
 
   const handleDeleteGame = () => {

src/renderer/src/pages/theme-editor/theme-editor.scss

@@ -1,22 +1,25 @@
-@use "../../scss/globals.scss" as globals;
+@use "../../scss/globals.scss";
 
-.editor {
+.theme-editor {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
 
   &__header {
-    height: 35px;
     display: flex;
     align-items: center;
-    padding: 10px;
+    padding: calc(globals.$spacing-unit * 2);
     background-color: globals.$dark-background-color;
     font-size: 8px;
     z-index: 50;
     -webkit-app-region: drag;
     gap: 8px;
 
+    &--darwin {
+      padding-top: calc(globals.$spacing-unit * 6);
+    }
+
     h1 {
       margin: 0;
       line-height: 1;

src/renderer/src/pages/theme-editor/theme-editor.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
-import "./editor.scss";
+import { useCallback, useEffect, useState } from "react";
+import "./theme-editor.scss";
 import Editor from "@monaco-editor/react";
 import { Theme } from "@types";
 import { useSearchParams } from "react-router-dom";
@@ -10,8 +10,9 @@ import {
   ProjectRoadmapIcon,
 } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
+import cn from "classnames";
 
-const EditorPage = () => {
+export default function ThemeEditor() {
   const [searchParams] = useSearchParams();
   const [theme, setTheme] = useState<Theme | null>(null);
   const [code, setCode] = useState("");
@@ -37,29 +38,7 @@ const EditorPage = () => {
     }
   }, [themeId]);
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event.ctrlKey || event.metaKey) && event.key === "s") {
-        event.preventDefault();
-        handleSave();
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [code, theme]);
-
-  const handleEditorChange = (value: string | undefined) => {
-    if (value !== undefined) {
-      setCode(value);
-      setHasUnsavedChanges(true);
-    }
-  };
-
-  const handleSave = async () => {
+  const handleSave = useCallback(async () => {
     if (theme) {
       const updatedTheme = {
         ...theme,
@@ -74,13 +53,41 @@ const EditorPage = () => {
         window.electron.injectCSS(code);
       }
     }
+  }, [code, theme]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === "s") {
+        event.preventDefault();
+        handleSave();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [code, handleSave, theme]);
+
+  const handleEditorChange = (value: string | undefined) => {
+    if (value !== undefined) {
+      setCode(value);
+      setHasUnsavedChanges(true);
+    }
   };
 
   return (
-    <div className="editor">
-      <div className="editor__header">
+    <div className="theme-editor">
+      <div
+        className={cn("theme-editor__header", {
+          "theme-editor__header--darwin": window.electron.platform === "darwin",
+        })}
+      >
         <h1>{theme?.name}</h1>
-        {hasUnsavedChanges && <div className="editor__header__status"></div>}
+        {hasUnsavedChanges && (
+          <div className="theme-editor__header__status"></div>
+        )}
       </div>
 
       {activeTab === "code" && (
@@ -100,15 +107,15 @@ const EditorPage = () => {
       )}
 
       {activeTab === "info" && (
-        <div className="editor__info">
+        <div className="theme-editor__info">
           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">
+      <div className="theme-editor__footer">
+        <div className="theme-editor__footer-actions">
+          <div className="theme-editor__footer-actions__tabs">
             <Button
               onClick={() => handleTabChange("code")}
               theme="dark"
@@ -135,6 +142,4 @@ const EditorPage = () => {
       </div>
     </div>
   );
-};
-
-export default EditorPage;
+}