nvrl/narlblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui redesign, markdown fix + metadata and auth header

Browse Source
This commit is contained in:
Nils Pukropp
2026-05-09 05:09:07 +02:00
parent 7f8a66f360
commit bc6a34cf1f
42 changed files with 3093 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/react/ThemeSwitcher.tsx
+19 -4
View File
@@ -1,4 +1,4 @@
import { useState, useEffect } from 'react';
import { useState, useEffect, useRef } from 'react';
const THEMES = [
{ value: 'mocha', label: 'Mocha' },
@@ -19,10 +19,23 @@ export default function ThemeSwitcher({ defaultTheme = 'mocha' }: Props) {
}
return defaultTheme;
});
const [toast, setToast] = useState<string | null>(null);
const isFirst = useRef(true);
useEffect(() => {
document.documentElement.className = theme;
const html = document.documentElement;
THEMES.forEach(t => html.classList.remove(t.value));
html.classList.add(theme);
localStorage.setItem('user-theme', theme);
if (isFirst.current) {
isFirst.current = false;
return;
}
const label = THEMES.find(t => t.value === theme)?.label ?? theme;
setToast(`Theme: ${label}`);
const id = setTimeout(() => setToast(null), 1200);
return () => clearTimeout(id);
}, [theme]);
return (
@@ -30,15 +43,17 @@ export default function ThemeSwitcher({ defaultTheme = 'mocha' }: Props) {
<select
value={theme}
onChange={(e) => setTheme(e.target.value)}
className="appearance-none bg-surface0/50 text-text border border-surface1 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:border-mauve transition-all cursor-pointer hover:bg-surface0 pr-8 shadow-sm"
aria-label="Theme"
className="appearance-none bg-surface0/50 text-text border border-surface1 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:border-mauve transition-colors cursor-pointer hover:bg-surface0 pr-8 shadow-sm"
>
{THEMES.map(t => (
<option key={t.value} value={t.value}>{t.label}</option>
))}
</select>
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-subtext0">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-9"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</div>
{toast && <div className="toast" role="status">{toast}</div>}
</div>
);
}