itlxrd/Psychotoxical-psysonic
1
0
Fork 0
mirror of https://github.com/Psychotoxical/psysonic.git synced 2026-07-21 23:05:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(themes): sidebar notice when an installed theme has an update (#1041)

Browse Source 
* feat(themes): sidebar notice when an installed theme has an update

Adds a dismissible sidebar pill (sibling of the What's New banner) shown
while an installed community theme has a newer version in the store. Clicking
opens Settings -> Themes; dismiss hides it until a new update changes the set.

The theme registry is now refreshed from source once per app launch instead
of only when the Theme Store tab is opened, so newly published themes and
updates surface without a manual refresh -- and feed this notice.

* docs: add CHANGELOG entry for PR #1041

* feat(themes): in-place update control on installed theme cards

Themes with a newer version in the store now show a centered update icon on
their card in Settings -> Themes; clicking it fetches and reinstalls in place.
Extracts the shared installThemeFromRegistry helper (fetch -> validate ->
install) used by both the store list and the card control, and surfaces the
full registry entry from useThemeUpdates so the card can update directly.
This commit is contained in:
Psychotoxical
2026-06-09 01:02:32 +02:00
committed by GitHub
parent c6298d8c25
commit cfc9419de7
23 changed files with 422 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/settings/InstalledThemes.tsx
+49 -1
View File
@@ -1,9 +1,13 @@
import { Check, X } from 'lucide-react';
import { useMemo, useState } from 'react';
import { Check, RefreshCw, X } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { useThemeStore } from '../../store/themeStore';
import { useInstalledThemesStore } from '../../store/installedThemesStore';
import { uninstallTheme } from '../../utils/themes/uninstallTheme';
import { installThemeFromRegistry } from '../../utils/themes/installThemeFromRegistry';
import { useThemeUpdates } from '../../hooks/useThemeUpdates';
import { useThemeAnimationRisk } from '../../hooks/useThemeAnimationRisk';
import { showToast } from '../../utils/ui/toast';
import { AnimatedThemeBadge } from './AnimatedThemeBadge';
import { FIXED_THEMES } from './fixedThemes';
@@ -43,6 +47,18 @@ export function InstalledThemes() {
const setTheme = useThemeStore(s => s.setTheme);
const installed = useInstalledThemesStore(s => s.themes);
const animRisk = useThemeAnimationRisk();
const updates = useThemeUpdates();
const updateById = useMemo(() => new Map(updates.map(u => [u.id, u])), [updates]);
const [updatingId, setUpdatingId] = useState<string | null>(null);
const handleUpdate = async (id: string) => {
const th = updateById.get(id);
if (!th) return;
setUpdatingId(id);
const result = await installThemeFromRegistry(th);
setUpdatingId(null);
if (result !== 'ok') showToast(t('settings.themeStoreInstallFailed'), 4000, 'error');
};
const cards: Card[] = [
...FIXED_THEMES.map(f => ({ id: f.id, label: f.label, bg: f.bg, card: f.card, accent: f.accent, fixed: true, accessibility: !!f.accessibility, animated: false })),
@@ -133,6 +149,38 @@ export function InstalledThemes() {
<X size={11} />
</button>
)}
{updateById.has(c.id) && (
<button
type="button"
onClick={() => handleUpdate(c.id)}
disabled={updatingId === c.id}
data-tooltip={updatingId === c.id ? t('settings.themeStoreUpdating') : t('settings.themeStoreUpdate')}
data-tooltip-pos="top"
aria-label={t('settings.themeStoreUpdate')}
// Big centered icon overlay across the whole 46px preview so an
// available update is impossible to miss; click updates in place.
// Icon (not text) so it fits the small card in any language.
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
height: 46,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 8,
border: 'none',
overflow: 'hidden',
background: 'var(--accent)',
color: 'var(--text-on-accent, #fff)',
cursor: updatingId === c.id ? 'default' : 'pointer',
opacity: updatingId === c.id ? 0.7 : 1,
}}
>
<RefreshCw size={20} strokeWidth={2.5} className={updatingId === c.id ? 'spin' : undefined} />
</button>
)}
</div>
);
})}
src/components/settings/ThemeStoreSection.tsx
+4 -27
View File
@@ -13,10 +13,9 @@ import { useInstalledThemesStore, type InstalledTheme } from '../../store/instal
import {
cdnUrl,
fetchRegistry,
fetchThemeCss,
type RegistryTheme,
} from '../../utils/themes/themeRegistry';
import { validateThemeCss } from '../../utils/themes/themeInjection';
import { installThemeFromRegistry } from '../../utils/themes/installThemeFromRegistry';
import { uninstallTheme } from '../../utils/themes/uninstallTheme';
import { isNewer } from '../../utils/componentHelpers/appUpdaterHelpers';
@@ -52,7 +51,6 @@ export function ThemeStoreSection() {
const activeTheme = useThemeStore(s => s.theme);
const setTheme = useThemeStore(s => s.setTheme);
const installed = useInstalledThemesStore(s => s.themes);
const install = useInstalledThemesStore(s => s.install);
const animRisk = useThemeAnimationRisk();
const [themes, setThemes] = useState<RegistryTheme[] | null>(null);
@@ -150,30 +148,9 @@ export function ThemeStoreSection() {
const handleInstall = async (th: RegistryTheme) => {
setBusyId(th.id);
setFailedId(null);
try {
const css = await fetchThemeCss(th.css);
// Don't persist CSS that won't inject — otherwise the theme would show as
// installed/active but render nothing. Validate before storing.
if (validateThemeCss(css, th.id) == null) {
setFailedId(th.id);
return;
}
install({
id: th.id,
name: th.name,
author: th.author,
version: th.version,
description: th.description,
mode: th.mode,
tags: th.tags,
css,
installedAt: Date.now(),
});
} catch {
setFailedId(th.id);
} finally {
setBusyId(null);
}
const result = await installThemeFromRegistry(th);
if (result !== 'ok') setFailedId(th.id);
setBusyId(null);
};