admin/snakkimo-cmt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Veröffentlichen-Seite, Einstellungen (TTS-Stimmen), klarere Navigation

Browse Source 
- Navigation: Dashboard/Inhalte/Audio/Veröffentlichen/Datenbank/Einstellungen mit Active-State
- Veröffentlichen (/publish): Pairs sortiert nach 'am wenigsten fehlt', 1-Klick-Publish je Sprache
- Einstellungen (/settings): TTS-Stimme + Parameter pro Sprache bearbeiten
- tts-settings in DB-Admin; Dashboard-Kacheln ergänzt

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
admin
2026-06-02 22:02:18 +02:00
parent 465c6e4954
commit 9eecee9ace
6 changed files with 303 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/Layout.jsx
View File

@@ -1,8 +1,18 @@
import { useNavigate } from 'react-router-dom';
import { useNavigate, useLocation } from 'react-router-dom';
import { getUser, logout } from '../lib/api';
const NAV = [
{ label: 'Dashboard', path: '/', match: p => p === '/' },
{ label: 'Inhalte', path: '/content', match: p => p.startsWith('/content') },
{ label: 'Audio', path: '/audio', match: p => p.startsWith('/audio') },
{ label: 'Veröffentlichen',path: '/publish', match: p => p.startsWith('/publish') },
{ label: 'Datenbank', path: '/db', match: p => p.startsWith('/db') },
{ label: 'Einstellungen', path: '/settings',match: p => p.startsWith('/settings') },
];
export default function Layout({ children, back, fullHeight = false }) {
const navigate = useNavigate();
const location = useLocation();
const user = getUser();
function handleLogout() {
@@ -11,30 +21,36 @@ export default function Layout({ children, back, fullHeight = false }) {
}
return (
<div className={fullHeight ? 'h-screen flex flex-col bg-slate-100 overflow-hidden' : 'min-h-screen bg-slate-100'}>
<header className="bg-indigo-700 text-white px-6 py-3 flex items-center justify-between shadow flex-shrink-0">
<div className="flex items-center gap-3">
<div className={fullHeight ? 'h-screen flex flex-col bg-slate-50 overflow-hidden' : 'min-h-screen bg-slate-50'}>
<header className="bg-white border-b border-slate-200 px-6 py-2.5 flex items-center justify-between flex-shrink-0">
<div className="flex items-center gap-4">
{back && (
<button
onClick={() => navigate(back)}
className="text-indigo-200 hover:text-white text-sm mr-1"
>
← Zurück
</button>
<button onClick={() => navigate(back)} className="text-slate-400 hover:text-slate-700 text-sm">←</button>
)}
<span className="text-xl font-bold tracking-tight">🐟 snakkimo CMT</span>
<button onClick={() => navigate('/')} className="text-lg font-bold tracking-tight text-indigo-700 shrink-0">
🐟 snakkimo
</button>
<nav className="hidden md:flex items-center gap-1 text-sm ml-2">
{NAV.map(item => {
const active = item.match(location.pathname);
return (
<button
key={item.path}
onClick={() => navigate(item.path)}
className={`px-3 py-1.5 rounded-lg font-medium transition-colors ${
active ? 'bg-indigo-50 text-indigo-700' : 'text-slate-500 hover:text-slate-800 hover:bg-slate-100'
}`}
>
{item.label}
</button>
);
})}
</nav>
</div>
<nav className="flex items-center gap-1 text-sm">
<button onClick={() => navigate('/')} className="text-indigo-200 hover:text-white px-3 py-1 rounded-lg transition-colors">Dashboard</button>
<button onClick={() => navigate('/db')} className="text-indigo-200 hover:text-white px-3 py-1 rounded-lg transition-colors">Datenbank</button>
<button onClick={() => navigate('/content')} className="text-indigo-200 hover:text-white px-3 py-1 rounded-lg transition-colors">Content</button>
</nav>
<div className="flex items-center gap-4 text-sm">
<span className="text-indigo-200">{user?.email}</span>
<button
onClick={handleLogout}
className="bg-indigo-600 hover:bg-indigo-500 px-3 py-1 rounded-lg transition-colors"
>
<div className="flex items-center gap-3 text-sm">
<span className="text-slate-400 hidden sm:inline">{user?.email}</span>
<button onClick={handleLogout}
className="text-slate-500 hover:text-red-600 px-2 py-1 rounded-lg transition-colors">
Logout
</button>
</div>