kodi/webmanager-mvp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: theme

Browse Source
This commit is contained in:
kodi
2026-03-12 18:26:29 +01:00
parent 939a7fd191
commit ab83ee3f20
13 changed files with 374 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/backend/app/api/__pycache__/schemas.cpython-313.pyc
BIN
View File
Binary file not shown.
webui/backend/app/api/schemas.py
+4
View File
@@ -98,12 +98,16 @@ class SettingsResponse(BaseModel):
show_thumbnails: bool
preferred_startup_path_left: str | None = None
preferred_startup_path_right: str | None = None
selected_theme: str
selected_color_mode: str
class SettingsUpdateRequest(BaseModel):
show_thumbnails: bool | None = None
preferred_startup_path_left: str | None = None
preferred_startup_path_right: str | None = None
selected_theme: str | None = None
selected_color_mode: str | None = None
class TaskListItem(BaseModel):
webui/backend/app/services/__pycache__/settings_service.cpython-313.pyc
BIN
View File
Binary file not shown.
webui/backend/app/services/settings_service.py
+47
View File
@@ -1,10 +1,15 @@
from __future__ import annotations
from backend.app.api.errors import AppError
from backend.app.api.schemas import SettingsResponse, SettingsUpdateRequest
from backend.app.db.settings_repository import SettingsRepository
from backend.app.security.path_guard import PathGuard
VALID_THEMES = {"default"}
VALID_COLOR_MODES = {"dark", "light"}
class SettingsService:
def __init__(self, repository: SettingsRepository, path_guard: PathGuard):
self._repository = repository
@@ -15,10 +20,14 @@ class SettingsService:
preferred_left = self._as_optional_str(values.get("preferred_startup_path_left"))
preferred_right = self._as_optional_str(values.get("preferred_startup_path_right"))
legacy_preferred = self._as_optional_str(values.get("preferred_startup_path"))
selected_theme = self._normalize_theme(values.get("selected_theme"))
selected_color_mode = self._normalize_color_mode(values.get("selected_color_mode"))
return SettingsResponse(
show_thumbnails=self._as_bool(values.get("show_thumbnails"), default=False),
preferred_startup_path_left=preferred_left or legacy_preferred,
preferred_startup_path_right=preferred_right,
selected_theme=selected_theme,
selected_color_mode=selected_color_mode,
)
def update_settings(self, request: SettingsUpdateRequest) -> SettingsResponse:
@@ -31,6 +40,12 @@ class SettingsService:
if request.preferred_startup_path_right is not None:
self._set_directory_setting("preferred_startup_path_right", request.preferred_startup_path_right)
if request.selected_theme is not None:
self._repository.set_setting("selected_theme", self._validate_theme(request.selected_theme))
if request.selected_color_mode is not None:
self._repository.set_setting("selected_color_mode", self._validate_color_mode(request.selected_color_mode))
return self.get_settings()
def _set_directory_setting(self, key: str, value: str) -> None:
@@ -53,3 +68,35 @@ class SettingsService:
return None
normalized = value.strip()
return normalized or None
@staticmethod
def _normalize_theme(value: str | None) -> str:
normalized = (value or "").strip()
return normalized if normalized in VALID_THEMES else "default"
@staticmethod
def _normalize_color_mode(value: str | None) -> str:
normalized = (value or "").strip().lower()
return normalized if normalized in VALID_COLOR_MODES else "dark"
@staticmethod
def _validate_theme(value: str) -> str:
normalized = value.strip()
if normalized not in VALID_THEMES:
raise AppError(
status_code=400,
code="invalid_request",
message="Theme must be one of: default",
)
return normalized
@staticmethod
def _validate_color_mode(value: str) -> str:
normalized = value.strip().lower()
if normalized not in VALID_COLOR_MODES:
raise AppError(
status_code=400,
code="invalid_request",
message="Color mode must be one of: dark, light",
)
return normalized
webui/backend/data/tasks.db
BIN
View File
Binary file not shown.
webui/backend/tests/golden/__pycache__/test_api_settings_golden.cpython-313.pyc
BIN
View File
Binary file not shown.
webui/backend/tests/golden/__pycache__/test_ui_smoke_golden.cpython-313.pyc
BIN
View File
Binary file not shown.
webui/backend/tests/golden/test_api_settings_golden.py
+40
View File
@@ -59,6 +59,8 @@ class SettingsApiGoldenTest(unittest.TestCase):
"show_thumbnails": False,
"preferred_startup_path_left": None,
"preferred_startup_path_right": None,
"selected_theme": "default",
"selected_color_mode": "dark",
},
)
@@ -75,6 +77,8 @@ class SettingsApiGoldenTest(unittest.TestCase):
"show_thumbnails": False,
"preferred_startup_path_left": "storage1/docs",
"preferred_startup_path_right": None,
"selected_theme": "default",
"selected_color_mode": "dark",
},
)
@@ -96,6 +100,8 @@ class SettingsApiGoldenTest(unittest.TestCase):
"show_thumbnails": True,
"preferred_startup_path_left": "storage1/docs",
"preferred_startup_path_right": "storage1/docs",
"selected_theme": "default",
"selected_color_mode": "dark",
},
)
self.assertEqual(
@@ -104,6 +110,8 @@ class SettingsApiGoldenTest(unittest.TestCase):
"show_thumbnails": True,
"preferred_startup_path_left": "storage1/docs",
"preferred_startup_path_right": "storage1/docs",
"selected_theme": "default",
"selected_color_mode": "dark",
},
)
@@ -113,6 +121,8 @@ class SettingsApiGoldenTest(unittest.TestCase):
self.assertEqual(response.status_code, 200)
self.assertEqual(response.json()["preferred_startup_path_left"], "storage1/docs")
self.assertEqual(response.json()["preferred_startup_path_right"], None)
self.assertEqual(response.json()["selected_theme"], "default")
self.assertEqual(response.json()["selected_color_mode"], "dark")
def test_settings_preferred_startup_path_right_persistence(self) -> None:
response = self._request("POST", "/api/settings", {"preferred_startup_path_right": "storage1/docs"})
@@ -120,6 +130,8 @@ class SettingsApiGoldenTest(unittest.TestCase):
self.assertEqual(response.status_code, 200)
self.assertEqual(response.json()["preferred_startup_path_left"], None)
self.assertEqual(response.json()["preferred_startup_path_right"], "storage1/docs")
self.assertEqual(response.json()["selected_theme"], "default")
self.assertEqual(response.json()["selected_color_mode"], "dark")
def test_settings_preferred_startup_path_empty_string_resets_only_left_to_null(self) -> None:
self._request(
@@ -135,6 +147,34 @@ class SettingsApiGoldenTest(unittest.TestCase):
self.assertEqual(response.status_code, 200)
self.assertEqual(response.json()["preferred_startup_path_left"], None)
self.assertEqual(response.json()["preferred_startup_path_right"], "storage1/docs")
self.assertEqual(response.json()["selected_theme"], "default")
self.assertEqual(response.json()["selected_color_mode"], "dark")
def test_settings_selected_theme_persistence(self) -> None:
response = self._request("POST", "/api/settings", {"selected_theme": "default"})
self.assertEqual(response.status_code, 200)
self.assertEqual(response.json()["selected_theme"], "default")
self.assertEqual(response.json()["selected_color_mode"], "dark")
def test_settings_selected_color_mode_persistence(self) -> None:
response = self._request("POST", "/api/settings", {"selected_color_mode": "light"})
self.assertEqual(response.status_code, 200)
self.assertEqual(response.json()["selected_theme"], "default")
self.assertEqual(response.json()["selected_color_mode"], "light")
def test_settings_rejects_invalid_selected_theme(self) -> None:
response = self._request("POST", "/api/settings", {"selected_theme": "unknown"})
self.assertEqual(response.status_code, 400)
self.assertEqual(response.json()["error"]["code"], "invalid_request")
def test_settings_rejects_invalid_selected_color_mode(self) -> None:
response = self._request("POST", "/api/settings", {"selected_color_mode": "sepia"})
self.assertEqual(response.status_code, 400)
self.assertEqual(response.json()["error"]["code"], "invalid_request")
def test_settings_preferred_startup_path_left_rejects_file_path(self) -> None:
response = self._request("POST", "/api/settings", {"preferred_startup_path_left": "storage1/file.txt"})
webui/backend/tests/golden/test_ui_smoke_golden.py
+17 -3
View File
@@ -65,14 +65,19 @@ class UiSmokeGoldenTest(unittest.TestCase):
self.assertIn('id="rename-input"', body)
self.assertIn('id="rename-apply-btn"', body)
self.assertIn('id="settings-general-tab"', body)
self.assertIn('id="settings-interface-tab"', body)
self.assertIn('id="settings-logs-tab"', body)
self.assertIn('id="settings-show-thumbnails"', body)
self.assertIn("Show thumbnails", body)
self.assertIn('id="settings-selected-theme"', body)
self.assertIn("Theme", body)
self.assertNotIn('id="settings-selected-color-mode"', body)
self.assertIn('id="settings-startup-path-left"', body)
self.assertIn('id="settings-startup-path-right"', body)
self.assertIn("Preferred startup path (left)", body)
self.assertIn("Preferred startup path (right)", body)
self.assertIn('id="settings-general-save-btn"', body)
self.assertIn('id="settings-interface-save-btn"', body)
self.assertIn('id="settings-logs-list"', body)
self.assertIn('id="viewer-content"', body)
self.assertIn('id="editor-modal"', body)
@@ -119,7 +124,9 @@ class UiSmokeGoldenTest(unittest.TestCase):
self.assertTrue((static_root / "style.css").exists())
app_js = (static_root / "app.js").read_text(encoding="utf-8")
self.assertIn('currentPath: "/Volumes"', app_js)
self.assertIn('const THEME_STORAGE_KEY = "webmanager-theme"', app_js)
self.assertIn('selectedTheme: "default"', app_js)
self.assertIn('selectedColorMode: "dark"', app_js)
self.assertIn('function effectiveThemeKey(theme, colorMode)', app_js)
self.assertIn("document.documentElement.dataset.theme", app_js)
self.assertIn('document.getElementById("theme-toggle").onclick = toggleTheme;', app_js)
self.assertIn('document.getElementById("settings-btn").onclick = () => openSettings("general");', app_js)
@@ -127,12 +134,19 @@ class UiSmokeGoldenTest(unittest.TestCase):
self.assertIn('await loadSettings();', app_js)
self.assertIn('settings.showThumbnailsInput.onchange = handleShowThumbnailsChange;', app_js)
self.assertIn('settings.generalSaveButton.onclick = handlePreferredStartupPathSave;', app_js)
self.assertIn('settings.interfaceSaveButton.onclick = handleInterfaceSave;', app_js)
self.assertIn('preferredStartupPathLeft', app_js)
self.assertIn('preferredStartupPathRight', app_js)
self.assertIn('selected_theme', app_js)
self.assertIn('selected_color_mode', app_js)
self.assertNotIn("localStorage", app_js)
self.assertNotIn("THEME_STORAGE_KEY", app_js)
self.assertIn('preferred_startup_path_left', app_js)
self.assertIn('preferred_startup_path_right', app_js)
self.assertIn('paneState("left").currentPath = settingsState.preferredStartupPathLeft || "/Volumes";', app_js)
self.assertIn('paneState("right").currentPath = settingsState.preferredStartupPathRight || "/Volumes";', app_js)
self.assertIn('applyTheme(settingsState.selectedTheme, settingsState.selectedColorMode);', app_js)
self.assertIn('settings.interfaceTab.onclick = () => setSettingsTab("interface");', app_js)
self.assertIn('"/api/settings"', app_js)
self.assertIn('`/api/files/thumbnail?', app_js)
self.assertIn("function iconTypeForEntry(entry)", app_js)
@@ -180,8 +194,8 @@ class UiSmokeGoldenTest(unittest.TestCase):
self.assertIn("function rootKeyFromPath(path)", app_js)
self.assertIn("function isNestedPath(sourcePath, destinationPath)", app_js)
style_css = (static_root / "style.css").read_text(encoding="utf-8")
self.assertIn(':root[data-theme="dark"]', style_css)
self.assertIn(':root[data-theme="light"]', style_css)
self.assertIn(':root[data-theme="default-dark"]', style_css)
self.assertIn(':root[data-theme="default-light"]', style_css)
self.assertIn('#theme-toggle', style_css)
self.assertIn('.settings-card', style_css)
self.assertIn('.settings-tabs', style_css)
webui/html/app.js
+73 -29
View File
@@ -57,47 +57,51 @@ let settingsState = {
showThumbnails: false,
preferredStartupPathLeft: null,
preferredStartupPathRight: null,
selectedTheme: "default",
selectedColorMode: "dark",
};
let searchState = {
pane: "left",
path: "/Volumes",
query: "",
};
const THEME_STORAGE_KEY = "webmanager-theme";
function preferredTheme() {
const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
if (stored === "light" || stored === "dark") {
return stored;
}
if (window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches) {
return "light";
}
return "dark";
function effectiveThemeKey(theme, colorMode) {
const family = theme === "default" ? "default" : "default";
const mode = colorMode === "light" ? "light" : "dark";
return `${family}-${mode}`;
}
function applyTheme(theme) {
const nextTheme = theme === "light" ? "light" : "dark";
function currentColorMode() {
return (document.documentElement.dataset.theme || "").endsWith("-light") ? "light" : "dark";
}
function applyTheme(theme, colorMode) {
const nextTheme = effectiveThemeKey(theme, colorMode);
const mode = colorMode === "light" ? "light" : "dark";
document.documentElement.dataset.theme = nextTheme;
const icon = document.getElementById("theme-toggle-icon");
const button = document.getElementById("theme-toggle");
if (icon) {
icon.textContent = nextTheme === "dark" ? "☾" : "☀";
icon.textContent = mode === "dark" ? "☾" : "☀";
}
if (button) {
button.setAttribute("aria-label", `Switch to ${nextTheme === "dark" ? "light" : "dark"} mode`);
button.setAttribute("title", `Switch to ${nextTheme === "dark" ? "light" : "dark"} mode`);
button.setAttribute("aria-label", `Switch to ${mode === "dark" ? "light" : "dark"} mode`);
button.setAttribute("title", `Switch to ${mode === "dark" ? "light" : "dark"} mode`);
}
if (monacoState.module) {
monacoState.module.editor.setTheme(nextTheme === "light" ? "vs" : "vs-dark");
monacoState.module.editor.setTheme(mode === "light" ? "vs" : "vs-dark");
}
}
function toggleTheme() {
const current = document.documentElement.dataset.theme === "light" ? "light" : "dark";
async function toggleTheme() {
const current = settingsState.selectedColorMode === "light" ? "light" : "dark";
const next = current === "dark" ? "light" : "dark";
applyTheme(next);
window.localStorage.setItem(THEME_STORAGE_KEY, next);
try {
const data = await saveSettings({ selected_color_mode: next });
applyTheme(data.selected_theme, data.selected_color_mode);
} catch (err) {
setError("actions-error", `Theme: ${err.message}`);
}
}
function paneState(pane) {
@@ -223,13 +227,18 @@ function settingsElements() {
overlay: document.getElementById("settings-modal"),
closeButton: document.getElementById("settings-close-btn"),
generalTab: document.getElementById("settings-general-tab"),
interfaceTab: document.getElementById("settings-interface-tab"),
logsTab: document.getElementById("settings-logs-tab"),
generalPanel: document.getElementById("settings-general-panel"),
interfacePanel: document.getElementById("settings-interface-panel"),
showThumbnailsInput: document.getElementById("settings-show-thumbnails"),
startupPathLeftInput: document.getElementById("settings-startup-path-left"),
startupPathRightInput: document.getElementById("settings-startup-path-right"),
generalError: document.getElementById("settings-general-error"),
generalSaveButton: document.getElementById("settings-general-save-btn"),
selectedThemeInput: document.getElementById("settings-selected-theme"),
interfaceError: document.getElementById("settings-interface-error"),
interfaceSaveButton: document.getElementById("settings-interface-save-btn"),
logsPanel: document.getElementById("settings-logs-panel"),
logsList: document.getElementById("settings-logs-list"),
logsError: document.getElementById("settings-logs-error"),
@@ -507,6 +516,8 @@ async function loadSettings() {
settingsState.showThumbnails = !!data.show_thumbnails;
settingsState.preferredStartupPathLeft = data.preferred_startup_path_left || null;
settingsState.preferredStartupPathRight = data.preferred_startup_path_right || null;
settingsState.selectedTheme = data.selected_theme || "default";
settingsState.selectedColorMode = data.selected_color_mode || "dark";
const elements = settingsElements();
if (elements.showThumbnailsInput) {
elements.showThumbnailsInput.checked = settingsState.showThumbnails;
@@ -517,6 +528,9 @@ async function loadSettings() {
if (elements.startupPathRightInput) {
elements.startupPathRightInput.value = settingsState.preferredStartupPathRight || "";
}
if (elements.selectedThemeInput) {
elements.selectedThemeInput.value = settingsState.selectedTheme;
}
}
async function saveSettings(update) {
@@ -524,6 +538,8 @@ async function saveSettings(update) {
settingsState.showThumbnails = !!data.show_thumbnails;
settingsState.preferredStartupPathLeft = data.preferred_startup_path_left || null;
settingsState.preferredStartupPathRight = data.preferred_startup_path_right || null;
settingsState.selectedTheme = data.selected_theme || "default";
settingsState.selectedColorMode = data.selected_color_mode || "dark";
const elements = settingsElements();
if (elements.showThumbnailsInput) {
elements.showThumbnailsInput.checked = settingsState.showThumbnails;
@@ -534,6 +550,10 @@ async function saveSettings(update) {
if (elements.startupPathRightInput) {
elements.startupPathRightInput.value = settingsState.preferredStartupPathRight || "";
}
if (elements.selectedThemeInput) {
elements.selectedThemeInput.value = settingsState.selectedTheme;
}
applyTheme(settingsState.selectedTheme, settingsState.selectedColorMode);
renderPaneItems("left");
renderPaneItems("right");
return data;
@@ -1323,7 +1343,7 @@ async function loadMonacoModule() {
monacoState.loadPromise = import("https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/+esm")
.then((module) => {
monacoState.module = module;
module.editor.setTheme(document.documentElement.dataset.theme === "light" ? "vs" : "vs-dark");
module.editor.setTheme(currentColorMode() === "light" ? "vs" : "vs-dark");
return module;
});
}
@@ -1359,7 +1379,7 @@ async function ensureMonacoEditor(path, content) {
const model = monaco.editor.createModel(content, monacoLanguageForName(baseName(path)));
const instance = monaco.editor.create(editor.host, {
model,
theme: document.documentElement.dataset.theme === "light" ? "vs" : "vs-dark",
theme: currentColorMode() === "light" ? "vs" : "vs-dark",
language: monacoLanguageForName(baseName(path)),
automaticLayout: false,
lineNumbers: "on",
@@ -1868,14 +1888,19 @@ async function submitSearch() {
function setSettingsTab(tab) {
const elements = settingsElements();
settingsState.activeTab = tab === "logs" ? "logs" : "general";
settingsState.activeTab = tab === "logs" ? "logs" : (tab === "interface" ? "interface" : "general");
const isGeneral = settingsState.activeTab === "general";
const isInterface = settingsState.activeTab === "interface";
const isLogs = settingsState.activeTab === "logs";
elements.generalTab.classList.toggle("is-active", isGeneral);
elements.generalTab.setAttribute("aria-selected", isGeneral ? "true" : "false");
elements.logsTab.classList.toggle("is-active", !isGeneral);
elements.logsTab.setAttribute("aria-selected", !isGeneral ? "true" : "false");
elements.interfaceTab.classList.toggle("is-active", isInterface);
elements.interfaceTab.setAttribute("aria-selected", isInterface ? "true" : "false");
elements.logsTab.classList.toggle("is-active", isLogs);
elements.logsTab.setAttribute("aria-selected", isLogs ? "true" : "false");
elements.generalPanel.classList.toggle("hidden", !isGeneral);
elements.logsPanel.classList.toggle("hidden", isGeneral);
elements.interfacePanel.classList.toggle("hidden", !isInterface);
elements.logsPanel.classList.toggle("hidden", !isLogs);
}
function formatHistoryLine(item) {
@@ -1965,6 +1990,18 @@ async function handlePreferredStartupPathSave() {
}
}
async function handleInterfaceSave() {
const settings = settingsElements();
const themeValue = settings.selectedThemeInput ? settings.selectedThemeInput.value : "default";
settings.interfaceError.textContent = "";
try {
await saveSettings({ selected_theme: themeValue });
setStatus("Theme saved");
} catch (err) {
settings.interfaceError.textContent = err.message;
}
}
function closeSettings() {
settingsElements().overlay.classList.add("hidden");
}
@@ -1977,7 +2014,11 @@ async function openSettings(tab = "general") {
if (settingsState.activeTab === "logs") {
await loadHistoryForSettings();
}
(settingsState.activeTab === "logs" ? elements.logsTab : elements.generalTab).focus();
(settingsState.activeTab === "logs"
? elements.logsTab
: settingsState.activeTab === "interface"
? elements.interfaceTab
: elements.generalTab).focus();
}
function editorIsDirty() {
@@ -2469,12 +2510,14 @@ function setupEvents() {
const settings = settingsElements();
settings.closeButton.onclick = closeSettings;
settings.generalTab.onclick = () => setSettingsTab("general");
settings.interfaceTab.onclick = () => setSettingsTab("interface");
settings.logsTab.onclick = async () => {
setSettingsTab("logs");
await loadHistoryForSettings();
};
settings.showThumbnailsInput.onchange = handleShowThumbnailsChange;
settings.generalSaveButton.onclick = handlePreferredStartupPathSave;
settings.interfaceSaveButton.onclick = handleInterfaceSave;
settings.overlay.onclick = (event) => {
if (event.target === settings.overlay) {
closeSettings();
@@ -2582,10 +2625,11 @@ function setupEvents() {
async function init() {
setError("actions-error", "");
applyTheme(preferredTheme());
applyTheme("default", "dark");
setActivePane("left");
setupEvents();
await loadSettings();
applyTheme(settingsState.selectedTheme, settingsState.selectedColorMode);
paneState("left").currentPath = settingsState.preferredStartupPathLeft || "/Volumes";
paneState("right").currentPath = settingsState.preferredStartupPathRight || "/Volumes";
await loadBrowsePane("left");
webui/html/index.html
+14
View File
@@ -86,6 +86,7 @@
<h3 id="settings-title">Settings</h3>
<div class="settings-tabs" role="tablist" aria-label="Settings tabs">
<button id="settings-general-tab" class="settings-tab is-active" type="button" role="tab" aria-selected="true">General</button>
<button id="settings-interface-tab" class="settings-tab" type="button" role="tab" aria-selected="false">Interface</button>
<button id="settings-logs-tab" class="settings-tab" type="button" role="tab" aria-selected="false">Logs</button>
</div>
<section id="settings-general-panel" class="settings-panel" role="tabpanel" aria-labelledby="settings-general-tab">
@@ -108,6 +109,19 @@
<button id="settings-general-save-btn" type="button">Save</button>
</div>
</section>
<section id="settings-interface-panel" class="settings-panel hidden" role="tabpanel" aria-labelledby="settings-interface-tab">
<div class="settings-placeholder-title">Interface</div>
<label class="settings-field" for="settings-selected-theme">
<span>Theme</span>
<select id="settings-selected-theme">
<option value="default">Default</option>
</select>
</label>
<div id="settings-interface-error" class="error"></div>
<div class="settings-actions">
<button id="settings-interface-save-btn" type="button">Save</button>
</div>
</section>
<section id="settings-logs-panel" class="settings-panel hidden" role="tabpanel" aria-labelledby="settings-logs-tab">
<div id="settings-logs-error" class="error"></div>
<div id="settings-logs-list" class="settings-log-list"></div>
webui/html/style.css
+2 -2
View File
@@ -6,7 +6,7 @@
--shadow-panel: 0 2px 8px rgba(8, 14, 22, 0.06);
}
:root[data-theme="dark"] {
:root[data-theme="default-dark"] {
--color-page-bg: #161c25;
--color-surface: #1d2531;
--color-surface-elevated: #222c39;
@@ -31,7 +31,7 @@
--color-overlay-bg: rgba(8, 12, 18, 0.62);
}
:root[data-theme="light"] {
:root[data-theme="default-light"] {
--color-page-bg: #eef3f9;
--color-surface: #ffffff;
--color-surface-elevated: #f8fbff;