diff --git a/interface/src/components/BackgroundSelector.tsx b/interface/src/components/BackgroundSelector.tsx index b4c925b6..94564b91 100644 --- a/interface/src/components/BackgroundSelector.tsx +++ b/interface/src/components/BackgroundSelector.tsx @@ -17,10 +17,11 @@ export interface Background { interface BackgroundSelectorProps { selectedType: "background" | "theme"; + setSelectedType: (type: "background" | "theme") => void; isEditMode: boolean; } -export default function BackgroundSelector({ selectedType, isEditMode }: BackgroundSelectorProps) { +export default function BackgroundSelector({ selectedType, setSelectedType, isEditMode }: BackgroundSelectorProps) { const [backgrounds, setBackgrounds] = useState([]); const [selectedBackground, setSelectedBackground] = useState(localStorage.getItem('selectedBackground')); const [downloadedPresetIds, setDownloadedPresetIds] = useState([]); @@ -75,6 +76,7 @@ export default function BackgroundSelector({ selectedType, isEditMode }: Backgro const selectBackground = (fileId: string): void => { disableTheme(); + setSelectedType('background'); setSelectedBackground(fileId); localStorage.setItem('selectedBackground', fileId); }; diff --git a/interface/src/components/ThemeSelector.tsx b/interface/src/components/ThemeSelector.tsx index de19c1e9..f15cd4aa 100644 --- a/interface/src/components/ThemeSelector.tsx +++ b/interface/src/components/ThemeSelector.tsx @@ -10,13 +10,19 @@ interface Theme { coverImage: JSX.Element; } -const ThemeSelector = () => { +interface ThemeSelectorProps { + selectedType: "background" | "theme"; + setSelectedType: (type: "background" | "theme") => void; + isEditMode: boolean; +} + +const ThemeSelector = ({ selectedType, setSelectedType, isEditMode }: ThemeSelectorProps) => { const [themes, setThemes] = useState([]); const [enabledThemeName, setEnabledThemeName] = useState(''); useEffect(() => { const initializeThemes = async () => { - const downloaded = await listThemes(); + const downloaded = (await listThemes()).themes; const initializedThemes = themesList.map(theme => ({ ...theme, @@ -31,7 +37,6 @@ const ThemeSelector = () => { }, []); const handleThemeAction = async (themeName: string, themeURL: string) => { - // Start loading for the selected theme. const startLoading = (name: string) => ( setThemes(prevThemes => prevThemes.map(theme => theme.name === name ? { ...theme, isLoading: true } : theme @@ -51,7 +56,7 @@ const ThemeSelector = () => { theme.name === name ? { ...theme, isDownloaded: true } : theme )) ); - + startLoading(themeName); // Early return if theme is not found. @@ -60,11 +65,14 @@ const ThemeSelector = () => { stopLoading(themeName); return; } + + console.log("Theme: ", theme); // If theme is downloaded and is the currently enabled theme, disable it. if (theme.isDownloaded && themeName === enabledThemeName) { await disableTheme(); setEnabledThemeName(''); + setSelectedType('background'); stopLoading(themeName); return; } @@ -73,6 +81,7 @@ const ThemeSelector = () => { if (theme.isDownloaded && themeName !== enabledThemeName) { await setTheme(themeName, themeURL); setEnabledThemeName(themeName); + setSelectedType('theme'); stopLoading(themeName); return; } @@ -81,6 +90,7 @@ const ThemeSelector = () => { if (!theme.isDownloaded) { await downloadTheme(themeName, themeURL); markAsDownloaded(themeName); + setSelectedType('theme'); setEnabledThemeName(themeName); } @@ -94,11 +104,17 @@ const ThemeSelector = () => { {themes.map((theme) => ( diff --git a/interface/src/hooks/ThemeManagment.tsx b/interface/src/hooks/ThemeManagment.tsx index 71d36679..9fc214ff 100644 --- a/interface/src/hooks/ThemeManagment.tsx +++ b/interface/src/hooks/ThemeManagment.tsx @@ -1,5 +1,6 @@ interface ThemeList { themes: string[]; + selectedTheme: string; } export const downloadTheme = async (themeName: string, themeURL: string) => { @@ -34,14 +35,13 @@ export const listThemes = async () => { // send message to the background script const response: ThemeList = await chrome.runtime.sendMessage({ type: 'currentTab', - info: 'ListThemes', - body: {} + info: 'ListThemes' }); // response.themes is an array of strings that are identical to the theme names that we loop over. Use this list to see which ones are downloaded and which ones need to see the download icon. console.log("Response: ", response); - return response.themes; + return response; } export const disableTheme = async () => { diff --git a/interface/src/pages/Themes.tsx b/interface/src/pages/Themes.tsx index 9dc42583..fc9838d5 100644 --- a/interface/src/pages/Themes.tsx +++ b/interface/src/pages/Themes.tsx @@ -1,22 +1,29 @@ import { FC, useEffect, useState } from 'react'; import BackgroundSelector from '../components/BackgroundSelector'; import ThemeSelector from '../components/ThemeSelector'; +import { listThemes } from '../hooks/ThemeManagment'; const Themes: FC = () => { const [isEditMode, setIsEditMode] = useState(false); const [selectedType, setSelectedType] = useState<'background' | 'theme'>('background'); useEffect(() => { - setSelectedType('background'); + listThemes().then(themes => { + if (themes.selectedTheme) { + setSelectedType('theme'); + } else { + setSelectedType('background'); + } + }); }, []) return (
- - - + +
); }; diff --git a/src/SEQTA.js b/src/SEQTA.js index cc5a4313..c1e23fe0 100644 --- a/src/SEQTA.js +++ b/src/SEQTA.js @@ -772,9 +772,9 @@ document.addEventListener( link.rel = "stylesheet"; document.getElementsByTagName("html")[0].appendChild(link); + enableCurrentTheme(); chrome.storage.local.get(null, function (items) { main(items); - enableCurrentTheme(); }); } if ( diff --git a/src/seqta/ui/Themes.js b/src/seqta/ui/Themes.js index 5853237b..074d4d70 100644 --- a/src/seqta/ui/Themes.js +++ b/src/seqta/ui/Themes.js @@ -84,9 +84,14 @@ const applyTheme = async (themeName) => { ); } }; + export const listThemes = async () => { const themes = await localforage.keys(); - return themes.filter((key) => key.startsWith("css_")).map((key) => key.replace("css_", "")); + console.log("Themes in IndexedDB:", themes); + return { + themes: themes.filter((key) => key.startsWith("css_")).map((key) => key.replace("css_", "")), + selectedTheme: await localforage.getItem("selectedTheme") + }; }; export const downloadTheme = async (themeName, themeUrl) => { @@ -101,14 +106,15 @@ export const setTheme = async (themeName, themeUrl) => { await downloadTheme(themeName, themeUrl); } - localforage.setItem("selectedTheme", themeName); + await localforage.setItem("selectedTheme", themeName); await applyTheme(themeName).catch((error) => { console.error(`Failed to apply theme: ${error}`); }); }; export const enableCurrentTheme = async () => { - const currentTheme = localforage.getItem("selectedTheme"); + console.log("Enabling current theme..."); + const currentTheme = await localforage.getItem("selectedTheme"); if (currentTheme) { console.log(`Enabling current theme: ${currentTheme}`); @@ -136,7 +142,7 @@ export const disableTheme = async () => { } // Remove any applied image URLs from the root element - const currentTheme = localforage.getItem("selectedTheme"); + const currentTheme = await localforage.getItem("selectedTheme"); if (currentTheme) { const themeData = await localforage.getItem(`css_${currentTheme}`); if (themeData && themeData.images) { diff --git a/src/seqta/utils/MessageListener.js b/src/seqta/utils/MessageListener.js index 8e1a13d6..f4933839 100644 --- a/src/seqta/utils/MessageListener.js +++ b/src/seqta/utils/MessageListener.js @@ -14,6 +14,8 @@ export class MessageHandler { case "EditSidebar": this.editSidebar(); break; + + /* Theme related */ case "SetTheme": console.log(request); setTheme(request.body.themeName, request.body.themeURL).then(() => { @@ -26,8 +28,8 @@ export class MessageHandler { }); return true; case "ListThemes": - listThemes().then((themes) => { - sendResponse({ themes }); + listThemes().then((response) => { + sendResponse(response); }); return true; case "DisableTheme":