feat: add plugin/theme disable gates and move policy controls to their admin pages

- Add `pluginsEnabled` and `themesEnabled` master feature gates to FeatureGates
- Move theme policy UI (default theme, built-in/admin theme toggles, user uploads toggle) from policy page to themes admin page
- Add plugin policy UI (plugins enabled toggle) to plugins admin page
- Remove theme policy section and plugin/theme gates from policy page (with note directing to respective pages)
- Hide Themes and Plugins settings tabs when their feature gate is disabled
- Fix dark mode visibility of all admin toggle switches (bg-white → bg-background, increase off-state track opacity)
This commit is contained in:
Linus Rath
2026-03-25 00:44:04 +01:00
parent 76b21147e4
commit 29a222eef4
24 changed files with 1729 additions and 42 deletions
+16 -2
View File
@@ -1,6 +1,6 @@
import { create } from 'zustand';
import type { SettingsPolicy, FeatureGates, SettingRestriction } from '@/lib/admin/types';
import { DEFAULT_POLICY } from '@/lib/admin/types';
import type { SettingsPolicy, FeatureGates, SettingRestriction, ThemePolicy } from '@/lib/admin/types';
import { DEFAULT_POLICY, DEFAULT_THEME_POLICY } from '@/lib/admin/types';
interface PolicyState {
policy: SettingsPolicy;
@@ -11,6 +11,8 @@ interface PolicyState {
isFeatureEnabled: (feature: keyof FeatureGates) => boolean;
getRestriction: (key: string) => SettingRestriction | undefined;
getEffectiveDefault: (key: string) => unknown;
getThemePolicy: () => ThemePolicy;
isThemeDisabled: (themeId: string, isBuiltIn: boolean) => boolean;
}
export const usePolicyStore = create<PolicyState>()((set, get) => ({
@@ -52,4 +54,16 @@ export const usePolicyStore = create<PolicyState>()((set, get) => ({
getEffectiveDefault: (key) => {
return get().policy.defaults[key];
},
getThemePolicy: () => {
return get().policy.themePolicy || { ...DEFAULT_THEME_POLICY };
},
isThemeDisabled: (themeId, isBuiltIn) => {
const tp = get().policy.themePolicy || DEFAULT_THEME_POLICY;
if (isBuiltIn) {
return (tp.disabledBuiltinThemes || []).includes(themeId);
}
return (tp.disabledThemes || []).includes(themeId);
},
}));
+17 -4
View File
@@ -5,6 +5,7 @@ import { pluginStorage } from '@/lib/plugin-storage';
import { injectThemeCSS, removeThemeCSS, sanitizeThemeCSS } from '@/lib/theme-loader';
import { extractTheme } from '@/lib/plugin-validator';
import { BUILTIN_THEMES } from '@/lib/builtin-themes';
import { usePolicyStore } from '@/stores/policy-store';
type Theme = 'light' | 'dark' | 'system';
@@ -87,21 +88,33 @@ export const useThemeStore = create<ThemeState>()(
applyTheme(resolvedTheme);
set({ resolvedTheme, hydrated: true });
// Determine effective theme: user choice > policy default > none
let effectiveThemeId = activeThemeId;
if (!effectiveThemeId) {
const policyState = usePolicyStore.getState();
const tp = policyState.policy.themePolicy;
if (tp?.defaultThemeId) {
effectiveThemeId = tp.defaultThemeId;
// Persist so we don't re-check every time
set({ activeThemeId: effectiveThemeId });
}
}
// Apply active custom theme on boot
if (activeThemeId) {
const t = installedThemes.find(t => t.id === activeThemeId);
if (effectiveThemeId) {
const t = installedThemes.find(t => t.id === effectiveThemeId);
if (t) {
// Load CSS from IndexedDB (may have been stripped from localStorage)
if (t.css) {
applyCustomThemeCSS(t, resolvedTheme);
} else {
pluginStorage.getThemeCSS(activeThemeId).then(css => {
pluginStorage.getThemeCSS(effectiveThemeId).then(css => {
if (css) {
injectThemeCSS(css);
// Update the in-memory cache
set({
installedThemes: installedThemes.map(
it => it.id === activeThemeId ? { ...it, css } : it
it => it.id === effectiveThemeId ? { ...it, css } : it
),
});
}