diff --git a/src/seqta/ui/themes/getTheme.ts b/src/seqta/ui/themes/getTheme.ts index 762010bd..d608cfb4 100644 --- a/src/seqta/ui/themes/getTheme.ts +++ b/src/seqta/ui/themes/getTheme.ts @@ -1,10 +1,10 @@ import localforage from 'localforage'; -import type { CustomTheme } from '@/types/CustomThemes'; +import type { LoadedCustomTheme } from '@/types/CustomThemes'; -export const getTheme = async (themeId: string): Promise => { +export const getTheme = async (themeId: string): Promise => { try { - const theme = await localforage.getItem(themeId) as CustomTheme; + const theme = await localforage.getItem(themeId) as LoadedCustomTheme; return theme; } catch (error) { diff --git a/src/seqta/ui/themes/saveTheme.ts b/src/seqta/ui/themes/saveTheme.ts index e986ddac..134ac23b 100644 --- a/src/seqta/ui/themes/saveTheme.ts +++ b/src/seqta/ui/themes/saveTheme.ts @@ -1,6 +1,7 @@ import localforage from 'localforage'; import type { LoadedCustomTheme } from '@/types/CustomThemes'; import { disableTheme } from './disableTheme'; +import { themeUpdates } from '@/svelte-interface/hooks/ThemeUpdates'; export const saveTheme = async (theme: LoadedCustomTheme) => { @@ -9,9 +10,7 @@ export const saveTheme = async (theme: LoadedCustomTheme) => { console.debug('Theme to save:', theme); - console.log('stage 1') await localforage.setItem(theme.id, theme); - console.log('stage 2') await localforage.getItem('customThemes').then((themes: unknown) => { const themeList = themes as string[] | null; if (themeList) { @@ -24,6 +23,7 @@ export const saveTheme = async (theme: LoadedCustomTheme) => { } }); console.debug('Theme saved successfully!'); + themeUpdates.triggerUpdate(); } catch (error) { console.error('Error saving theme:', error); } diff --git a/src/svelte-interface/components/themes/ThemeSelector.svelte b/src/svelte-interface/components/themes/ThemeSelector.svelte index f688cc95..488ce548 100644 --- a/src/svelte-interface/components/themes/ThemeSelector.svelte +++ b/src/svelte-interface/components/themes/ThemeSelector.svelte @@ -143,8 +143,8 @@ {#if !isEditMode}
{ event.stopPropagation(); OpenThemeCreator(theme.id) }} - onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') OpenThemeCreator(theme.id) }} + onclick={(event) => { event.stopPropagation(); OpenThemeCreator(theme.id); closeExtensionPopup() }} + onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') OpenThemeCreator(theme.id); closeExtensionPopup() }} role="button" tabindex="-1" > diff --git a/src/svelte-interface/pages/themeCreator.svelte b/src/svelte-interface/pages/themeCreator.svelte index 52991334..e566cf62 100644 --- a/src/svelte-interface/pages/themeCreator.svelte +++ b/src/svelte-interface/pages/themeCreator.svelte @@ -26,6 +26,7 @@ import { saveTheme } from '@/seqta/ui/themes/saveTheme' import { CloseThemeCreator } from '@/seqta/ui/ThemeCreator' import { themeUpdates } from '../hooks/ThemeUpdates' + import { disableTheme } from '@/seqta/ui/themes/disableTheme' const { themeID } = $props<{ themeID: string }>() let theme = $state({ @@ -54,6 +55,8 @@ } onMount(async () => { + disableTheme(); + if (themeID) { const tempTheme = await getTheme(themeID) @@ -65,7 +68,8 @@ CustomImages: tempTheme.CustomImages.map(image => ({ ...image, url: image.blob ? URL.createObjectURL(image.blob) : null - })) + })), + coverImageUrl: tempTheme.coverImage ? URL.createObjectURL(tempTheme.coverImage) : undefined } if (tempTheme) { @@ -75,6 +79,8 @@ } else { themeLoaded = true } + + themeUpdates.triggerUpdate(); }); async function onImageUpload(event: Event) { @@ -94,7 +100,6 @@ } function submitTheme() { - console.log('saving theme', theme) const themeClone = JSON.parse(JSON.stringify(theme)); // re-insert blobs into themeClone