cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

fix: dark mode toggle and search auth headers (#102)

Browse Source 
Dark mode:
- Toggle now applies data-theme='dark' attribute to <html>
- Theme applied immediately on page load to prevent FOUC
- Comprehensive dark mode CSS covering all UI components:
  sidebar, top bar, search, file cards, list view, context
  menus, modals, dialogs, notifications, user menu, etc.

Search:
- Add Authorization headers to all search API fetch calls
  (searchFiles, advancedSearch, clearSearchCache)
- Fix missing checkbox column in search results list header
This commit is contained in:
Dionisio
2026-02-14 00:45:45 +01:00
parent 67968ed22d
commit 516b8727d2
5 changed files with 564 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/app.js
+7 -4
View File
@@ -188,11 +188,14 @@ function setupUserMenu() {
});
}
// Theme toggle (dark mode placeholder — toggles pill visually)
// Theme toggle (dark mode)
if (themeBtn) {
const pill = document.getElementById('theme-toggle-pill');
const isDark = localStorage.getItem('oxicloud_theme') === 'dark';
if (isDark && pill) pill.classList.add('active');
if (isDark) {
if (pill) pill.classList.add('active');
document.documentElement.setAttribute('data-theme', 'dark');
}
themeBtn.addEventListener('click', (e) => {
e.stopPropagation();
@@ -200,10 +203,10 @@ function setupUserMenu() {
pill.classList.toggle('active');
const dark = pill.classList.contains('active');
localStorage.setItem('oxicloud_theme', dark ? 'dark' : 'light');
// Theme switching could be expanded here in the future
document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
window.ui.showNotification(
dark ? '🌙' : '☀️',
dark ? 'Dark mode enabled (coming soon)' : 'Light mode enabled'
dark ? 'Dark mode enabled' : 'Light mode enabled'
);
}
});
static/js/search.js
+8 -3
View File
@@ -34,7 +34,9 @@ const search = {
console.log(`Performing search with URL: ${url}`);
// Perform the search request
const response = await fetch(url);
const response = await fetch(url, {
headers: getAuthHeaders()
});
if (response.ok) {
return await response.json();
@@ -70,7 +72,8 @@ const search = {
const response = await fetch('/api/search', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
...getAuthHeaders()
},
body: JSON.stringify(criteria)
});
@@ -109,6 +112,7 @@ const search = {
filesGrid.innerHTML = '';
filesListView.innerHTML = `
<div class="list-header">
<div class="list-header-checkbox"><input type="checkbox" id="select-all-checkbox" title="Select all"></div>
<div data-i18n="files.name">Name</div>
<div data-i18n="files.type">Type</div>
<div data-i18n="files.size">Size</div>
@@ -174,7 +178,8 @@ const search = {
async clearSearchCache() {
try {
const response = await fetch('/api/search/cache', {
method: 'DELETE'
method: 'DELETE',
headers: getAuthHeaders()
});
if (response.ok) {