diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index ef4e3b56..f1e85019 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -328,7 +328,11 @@ "torbox_description": "TorBox is your premium seedbox service rivaling even the best servers on the market.", "torbox_account_linked": "TorBox account linked", "real_debrid_account_linked": "Real-Debrid account linked", - "name_min_length": "Theme name must be at least 3 characters long" + "name_min_length": "Theme name must be at least 3 characters long", + "import_theme": "Import theme", + "import_theme_description": "You will import {{theme}} from the theme store", + "error_importing_theme": "Error importing theme", + "theme_imported": "Theme imported successfully" }, "notifications": { "download_complete": "Download complete", diff --git a/src/main/index.ts b/src/main/index.ts index 0792f826..01818b3d 100644 --- a/src/main/index.ts +++ b/src/main/index.ts @@ -101,11 +101,12 @@ const handleDeepLinkPath = (uri?: string) => { if (url.host === "install-theme") { const themeName = url.searchParams.get("theme"); - const authorCode = url.searchParams.get("author"); + const authorId = url.searchParams.get("authorId"); + const authorName = url.searchParams.get("authorName"); - if (themeName && authorCode) { + if (themeName && authorId && authorName) { WindowManager.redirect( - `settings?theme=${themeName}&author=${authorCode}` + `settings?theme=${themeName}&authorId=${authorId}&authorName=${authorName}` ); } } diff --git a/src/renderer/src/context/settings/settings.context.tsx b/src/renderer/src/context/settings/settings.context.tsx index 95c8623f..77e78bce 100644 --- a/src/renderer/src/context/settings/settings.context.tsx +++ b/src/renderer/src/context/settings/settings.context.tsx @@ -14,7 +14,8 @@ export interface SettingsContext { blockedUsers: UserBlocks["blocks"]; fetchBlockedUsers: () => Promise; appearanceTheme: string | null; - appearanceAuthor: string | null; + appearanceAuthorId: string | null; + appearanceAuthorName: string | null; } export const settingsContext = createContext({ @@ -26,7 +27,8 @@ export const settingsContext = createContext({ blockedUsers: [], fetchBlockedUsers: async () => {}, appearanceTheme: null, - appearanceAuthor: null, + appearanceAuthorId: null, + appearanceAuthorName: null, }); const { Provider } = settingsContext; @@ -42,7 +44,12 @@ export function SettingsContextProvider({ const dispatch = useAppDispatch(); const [sourceUrl, setSourceUrl] = useState(null); const [appearanceTheme, setAppearanceTheme] = useState(null); - const [appearanceAuthor, setAppearanceAuthor] = useState(null); + const [appearanceAuthorId, setAppearanceAuthorId] = useState( + null + ); + const [appearanceAuthorName, setAppearanceAuthorName] = useState< + string | null + >(null); const [currentCategoryIndex, setCurrentCategoryIndex] = useState(0); const [blockedUsers, setBlockedUsers] = useState([]); @@ -50,7 +57,8 @@ export function SettingsContextProvider({ const [searchParams] = useSearchParams(); const defaultSourceUrl = searchParams.get("urls"); const defaultAppearanceTheme = searchParams.get("theme"); - const defaultAppearanceAuthor = searchParams.get("author"); + const defaultAppearanceAuthorId = searchParams.get("authorId"); + const defaultAppearanceAuthorName = searchParams.get("authorName"); useEffect(() => { if (sourceUrl) setCurrentCategoryIndex(2); @@ -67,11 +75,20 @@ export function SettingsContextProvider({ }, [appearanceTheme]); useEffect(() => { - if (defaultAppearanceTheme && defaultAppearanceAuthor) { + if ( + defaultAppearanceTheme && + defaultAppearanceAuthorId && + defaultAppearanceAuthorName + ) { setAppearanceTheme(defaultAppearanceTheme); - setAppearanceAuthor(defaultAppearanceAuthor); + setAppearanceAuthorId(defaultAppearanceAuthorId); + setAppearanceAuthorName(defaultAppearanceAuthorName); } - }, [defaultAppearanceTheme, defaultAppearanceAuthor]); + }, [ + defaultAppearanceTheme, + defaultAppearanceAuthorId, + defaultAppearanceAuthorName, + ]); const fetchBlockedUsers = useCallback(async () => { const blockedUsers = await window.electron.getBlockedUsers(12, 0); @@ -102,7 +119,8 @@ export function SettingsContextProvider({ sourceUrl, blockedUsers, appearanceTheme, - appearanceAuthor, + appearanceAuthorId, + appearanceAuthorName, }} > {children} diff --git a/src/renderer/src/pages/settings/aparence/modals/import-theme-modal.tsx b/src/renderer/src/pages/settings/aparence/modals/import-theme-modal.tsx index 7f40f8f1..db4abe8c 100644 --- a/src/renderer/src/pages/settings/aparence/modals/import-theme-modal.tsx +++ b/src/renderer/src/pages/settings/aparence/modals/import-theme-modal.tsx @@ -2,7 +2,7 @@ import { Button } from "@renderer/components/button/button"; import { Modal } from "@renderer/components/modal/modal"; import { useTranslation } from "react-i18next"; import "./modals.scss"; -import { Theme, UserProfile } from "@types"; +import { Theme } from "@types"; import { injectCustomCss, removeCustomCss } from "@renderer/helpers"; import { useToast } from "@renderer/hooks"; import { THEME_WEB_STORE_URL } from "@renderer/constants"; @@ -13,7 +13,8 @@ interface ImportThemeModalProps { onClose: () => void; onThemeImported: () => void; themeName: string; - authorCode: string; + authorId: string; + authorName: string; } export const ImportThemeModal = ({ @@ -21,23 +22,19 @@ export const ImportThemeModal = ({ onClose, onThemeImported, themeName, - authorCode, + authorId, + authorName, }: ImportThemeModalProps) => { const { t } = useTranslation("settings"); const { showSuccessToast, showErrorToast } = useToast(); - let author: UserProfile | null = null; - window.electron.getUser(authorCode).then((user) => { - author = user; - }); - const handleImportTheme = async () => { const theme: Theme = { id: crypto.randomUUID(), name: themeName, isActive: false, - author: author?.id, - authorName: author?.displayName, + author: authorId, + authorName: authorName, code: `${THEME_WEB_STORE_URL}/themes/${themeName.toLowerCase()}/theme.css`, createdAt: new Date(), updatedAt: new Date(), diff --git a/src/renderer/src/pages/settings/aparence/settings-appearance.tsx b/src/renderer/src/pages/settings/aparence/settings-appearance.tsx index d14b4fe7..9cd0e52e 100644 --- a/src/renderer/src/pages/settings/aparence/settings-appearance.tsx +++ b/src/renderer/src/pages/settings/aparence/settings-appearance.tsx @@ -6,19 +6,22 @@ import { ImportThemeModal } from "./modals/import-theme-modal"; interface SettingsAppearanceProps { appearanceTheme: string | null; - appearanceAuthor: string | null; + appearanceAuthorId: string | null; + appearanceAuthorName: string | null; } export const SettingsAppearance = ({ appearanceTheme, - appearanceAuthor, + appearanceAuthorId, + appearanceAuthorName, }: SettingsAppearanceProps) => { const [themes, setThemes] = useState([]); const [isImportThemeModalVisible, setIsImportThemeModalVisible] = useState(false); const [importTheme, setImportTheme] = useState<{ theme: string; - author: string; + authorId: string; + authorName: string; } | null>(null); const loadThemes = async () => { @@ -39,14 +42,15 @@ export const SettingsAppearance = ({ }, []); useEffect(() => { - if (appearanceTheme && appearanceAuthor) { + if (appearanceTheme && appearanceAuthorId && appearanceAuthorName) { setIsImportThemeModalVisible(true); setImportTheme({ theme: appearanceTheme, - author: appearanceAuthor, + authorId: appearanceAuthorId, + authorName: appearanceAuthorName, }); } - }, [appearanceTheme, appearanceAuthor]); + }, [appearanceTheme, appearanceAuthorId, appearanceAuthorName]); return (
@@ -81,7 +85,8 @@ export const SettingsAppearance = ({ loadThemes(); }} themeName={importTheme.theme} - authorCode={importTheme.author} + authorId={importTheme.authorId} + authorName={importTheme.authorName} /> )}
diff --git a/src/renderer/src/pages/settings/settings.tsx b/src/renderer/src/pages/settings/settings.tsx index 4fa7821c..1cfd499f 100644 --- a/src/renderer/src/pages/settings/settings.tsx +++ b/src/renderer/src/pages/settings/settings.tsx @@ -39,7 +39,11 @@ export default function Settings() { { tabLabel: ( <> - TorBox + TorBox{" "} Torbox ), @@ -65,7 +69,8 @@ export default function Settings() { currentCategoryIndex, setCurrentCategoryIndex, appearanceTheme, - appearanceAuthor, + appearanceAuthorId, + appearanceAuthorName, }) => { const renderCategory = () => { if (currentCategoryIndex === 0) { @@ -84,7 +89,8 @@ export default function Settings() { return ( ); }