refactor: lint

This commit is contained in:
Hachi-R 2025-01-29 03:46:59 -03:00
parent 5a19e9fd12
commit b56fc4d888
13 changed files with 81 additions and 63 deletions

View File

@ -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",

View File

@ -2,11 +2,11 @@ import { registerEvent } from "../register-event";
import { WindowManager } from "@main/services";
const injectCSS = async (
_event: Electron.IpcMainInvokeEvent,
cssString: string
_event: Electron.IpcMainInvokeEvent,
cssString: string
) => {
WindowManager.mainWindow?.webContents.send("css-injected", cssString);
return;
WindowManager.mainWindow?.webContents.send("css-injected", cssString);
return;
};
registerEvent("injectCSS", injectCSS);

View File

@ -3,8 +3,8 @@ import { themes } from "@main/level/sublevels/themes";
import { Theme } from "@types";
const getActiveCustomTheme = async () => {
const allThemes = await themes.values().all();
return allThemes.find((theme: Theme) => theme.isActive);
const allThemes = await themes.values().all();
return allThemes.find((theme: Theme) => theme.isActive);
};
registerEvent("getActiveCustomTheme", getActiveCustomTheme);

View File

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

View File

@ -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);
};

View File

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

View File

@ -349,11 +349,12 @@ contextBridge.exposeInMainWorld("electron", {
getActiveCustomTheme: () => ipcRenderer.invoke("getActiveCustomTheme"),
/* Editor */
openEditorWindow: (themeId: string) => ipcRenderer.invoke("openEditorWindow", themeId),
injectCSS: (cssString: string) =>
ipcRenderer.invoke("injectCSS", cssString),
openEditorWindow: (themeId: string) =>
ipcRenderer.invoke("openEditorWindow", themeId),
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);
},

View File

@ -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 {

View File

@ -1,22 +1,26 @@
import { useEffect, useState } from 'react';
import { useEffect, useState } from "react";
import "./editor.scss";
import Editor from '@monaco-editor/react';
import { Theme } from '@types';
import { useSearchParams } from 'react-router-dom';
import { Button } from '@renderer/components';
import { CheckIcon, CodeIcon, ProjectRoadmapIcon } from '@primer/octicons-react';
import { useTranslation } from 'react-i18next';
import Editor from "@monaco-editor/react";
import { Theme } from "@types";
import { useSearchParams } from "react-router-dom";
import { Button } from "@renderer/components";
import {
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 [activeTab, setActiveTab] = useState('code');
const [code, setCode] = useState("");
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 && (
<div className="editor__header__status">
</div>
)}
{hasUnsavedChanges && <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',
wordWrap: 'on',
lineNumbers: "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>

View File

@ -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] =

View File

@ -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();

View File

@ -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}