mirror of
https://github.com/kilyabin/psysonic.git
synced 2026-07-21 22:15:40 +00:00
Psychotoxical
cfc9419de7
* 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.
112 lines
2.4 KiB
CSS
112 lines
2.4 KiB
CSS
/* ─ What's New — banner + page ────────────────────────────────────────────
|
|
The banner sits in the sidebar just above Now Playing; the page opens in
|
|
the main content area. Both follow the active theme. */
|
|
|
|
.sidebar-bottom-spacer {
|
|
margin-top: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.whats-new-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
margin: 0 0 6px 0;
|
|
background: var(--bg-card);
|
|
color: var(--text-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
font: inherit;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: background 0.15s, border-color 0.15s;
|
|
position: relative;
|
|
}
|
|
|
|
.whats-new-banner:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.whats-new-banner__icon {
|
|
flex-shrink: 0;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.whats-new-banner__text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.whats-new-banner__title {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.whats-new-banner__version {
|
|
font-size: 10.5px;
|
|
color: var(--text-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.whats-new-banner__dismiss {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 4px;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
}
|
|
.whats-new-banner__dismiss:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.whats-new-banner--collapsed {
|
|
width: 34px;
|
|
height: 34px;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 6px;
|
|
}
|
|
|
|
/* Theme-update sidebar notice — reuses the What's New banner styling, plus a
|
|
count chip on the right (expanded) or a corner dot (collapsed). */
|
|
.theme-update-banner__count {
|
|
flex-shrink: 0;
|
|
min-width: 18px;
|
|
height: 18px;
|
|
padding: 0 5px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 9px;
|
|
background: var(--accent);
|
|
color: var(--text-on-accent, #fff);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.theme-update-banner__count--dot {
|
|
position: absolute;
|
|
top: -2px;
|
|
right: -2px;
|
|
min-width: 16px;
|
|
height: 16px;
|
|
padding: 0 4px;
|
|
font-size: 10px;
|
|
border: 2px solid var(--bg-sidebar, var(--bg-app));
|
|
}
|