-
-
{theme.name}
+ <>
+
setDeleteThemeModalVisible(false)}
+ onThemeDeleted={onListUpdated}
+ themeId={theme.id}
+ />
-
- {Object.entries(theme.colors).map(([key, color]) => (
-
+
+
{theme.name}
+
+
+ {Object.entries(theme.colors).map(([key, color]) => (
+
+ {/* color circle */}
+
+ ))}
+
+
+
+ {theme.author && theme.author && (
+
+ {t("by")}
+
+ navigate(`/profile/${theme.author}`)}
>
- {/* color circle */}
-
- ))}
-
-
+ {theme.author}
+
+
+ )}
- {theme.author && theme.authorId && (
-
- {t("by")}
+
+
+ {theme.isActive ? (
+
+ ) : (
+
+ )}
+
-
navigate(`/profile/${theme.authorId}`)}
- >
- {theme.author}
-
-
- )}
-
-
-
- {theme.isActive ? (
-
- ) : (
-
-
+ >
);
};
diff --git a/src/renderer/src/pages/settings/aparence/components/theme-placeholder.tsx b/src/renderer/src/pages/settings/aparence/components/theme-placeholder.tsx
index 2f10877e..7904bfe4 100644
--- a/src/renderer/src/pages/settings/aparence/components/theme-placeholder.tsx
+++ b/src/renderer/src/pages/settings/aparence/components/theme-placeholder.tsx
@@ -1,26 +1,36 @@
import { AlertIcon } from "@primer/octicons-react";
import { useTranslation } from "react-i18next";
import "./theme-placeholder.scss";
+import { AddThemeModal } from "../modals/add-theme-modal";
+import { useState } from "react";
interface ThemePlaceholderProps {
- setAddThemeModalVisible: (visible: boolean) => void;
+ onListUpdated: () => void;
}
-export const ThemePlaceholder = ({
- setAddThemeModalVisible,
-}: ThemePlaceholderProps) => {
- const { t } = useTranslation();
+export const ThemePlaceholder = ({ onListUpdated }: ThemePlaceholderProps) => {
+ const { t } = useTranslation("settings");
+
+ const [addThemeModalVisible, setAddThemeModalVisible] = useState(false);
return (
-
setAddThemeModalVisible(true)}
- >
-
+ <>
+ setAddThemeModalVisible(false)}
+ onThemeAdded={onListUpdated}
+ />
- {t("no_themes")}
-
+
setAddThemeModalVisible(true)}
+ >
+
+
+ {t("no_themes")}
+
+ >
);
};
diff --git a/src/renderer/src/pages/settings/aparence/modals/add-theme-modal.tsx b/src/renderer/src/pages/settings/aparence/modals/add-theme-modal.tsx
index 7f7d0440..c1005510 100644
--- a/src/renderer/src/pages/settings/aparence/modals/add-theme-modal.tsx
+++ b/src/renderer/src/pages/settings/aparence/modals/add-theme-modal.tsx
@@ -1,19 +1,54 @@
import { Modal } from "@renderer/components/modal/modal";
import { TextField } from "@renderer/components/text-field/text-field";
-import { useTranslation } from "react-i18next";
-import "./modals.scss";
import { Button } from "@renderer/components/button/button";
+import { useTranslation } from "react-i18next";
import { useState } from "react";
+import "./modals.scss";
interface AddThemeModalProps {
visible: boolean;
onClose: () => void;
+ onThemeAdded: () => void;
}
-export const AddThemeModal = ({ visible, onClose }: AddThemeModalProps) => {
+export const AddThemeModal = ({
+ visible,
+ onClose,
+ onThemeAdded,
+}: AddThemeModalProps) => {
const { t } = useTranslation("settings");
+ const [name, setName] = useState("");
+ const [error, setError] = useState("");
- const [themeName, setThemeName] = useState("");
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ if (event.key === "Enter") {
+ handleSubmit();
+ }
+ };
+
+ const handleSubmit = async () => {
+ if (!name || name.length < 3) {
+ setError(t("theme_name_error_hint"));
+ return;
+ }
+
+ const theme = {
+ id: crypto.randomUUID(),
+ name,
+ isActive: false,
+ colors: {
+ accent: "#c0c1c7",
+ background: "#1c1c1c",
+ surface: "#151515",
+ },
+ };
+
+ await window.electron.addCustomTheme(theme);
+ setName("");
+ setError("");
+ onThemeAdded();
+ onClose();
+ };
return (
{
setThemeName(e.target.value)}
+ value={name}
+ onChange={(e) => setName(e.target.value)}
+ hint={error}
+ error={!!error}
+ onKeyDown={handleKeyDown}
/>
-
+
{t("add_theme")}
diff --git a/src/renderer/src/pages/settings/aparence/modals/delete-all-themes-modal.tsx b/src/renderer/src/pages/settings/aparence/modals/delete-all-themes-modal.tsx
index 48c17efb..47c58221 100644
--- a/src/renderer/src/pages/settings/aparence/modals/delete-all-themes-modal.tsx
+++ b/src/renderer/src/pages/settings/aparence/modals/delete-all-themes-modal.tsx
@@ -6,14 +6,22 @@ import "./modals.scss";
interface DeleteAllThemesModalProps {
visible: boolean;
onClose: () => void;
+ onThemesDeleted: () => void;
}
export const DeleteAllThemesModal = ({
visible,
onClose,
+ onThemesDeleted,
}: DeleteAllThemesModalProps) => {
const { t } = useTranslation("settings");
+ const handleDeleteAllThemes = async () => {
+ await window.electron.deleteAllCustomThemes();
+ onClose();
+ onThemesDeleted();
+ };
+
return (