refactor: convert admin panel to Tailwind CSS

- Convert admin layout, sidebar, and navigation to Tailwind classes
- Convert dashboard components (StatusCard, DiagnosticRow, etc.) to Tailwind
- Convert all ~48 admin page files from admin CSS classes to Tailwind
- Remove unused admin CSS from globals.css (973 → 712 lines)
- Convert developers page badges to Tailwind
- Remove <style jsx> block from OnlineUsersWidget
This commit is contained in:
remco committed 2026-07-02 15:23:07 +02:00
1 parent 64f50b2dde
commit bd299be55d
52 files changed
+277 -644

No files matched your search

+5 -5
View File
@@ -76,7 +76,7 @@ export default async function AdminRadioAutoDjPage() {
<Link href="/admin/radio/autodj">AutoDJ</Link>
</nav>
<section className="admin-section">
<section className="mt-6">
<h2>Radio AutoDJ</h2>
<p className="muted" style={{ marginTop: '-0.4rem' }}>
Fallback playlist (<code>radio_auto_dj_playlist</code>) the radio rotates
@@ -90,7 +90,7 @@ export default async function AdminRadioAutoDjPage() {
</p>
</div>
) : (
<div className="admin-stats">
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Tracks" value={tracks.length} icon="🎵" />
<StatusCard
label="Active"
@@ -108,7 +108,7 @@ export default async function AdminRadioAutoDjPage() {
)}
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Add track</h2>
<form action={createTrack} className="card">
<div className="grid cols-2">
@@ -186,7 +186,7 @@ export default async function AdminRadioAutoDjPage() {
</form>
</section>
<section className="admin-section">
<section className="mt-6">
<h2>Playlist ({tracks.length})</h2>
{tracks.length === 0 ? (
<p className="muted">No AutoDJ tracks yet — add one above.</p>
@@ -232,7 +232,7 @@ export default async function AdminRadioAutoDjPage() {
<td className="muted">{t.playCount}</td>
<td className="muted">{formatDate(t.lastPlayedAt)}</td>
<td>
<span className={`admin-badge ${t.isActive ? 'ok' : 'danger'}`}>
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${t.isActive ? 'bg-green-600/20 text-[var(--color-text)]' : 'bg-red-500/22 text-[var(--color-text)]'}`}>
{t.isActive ? 'active' : 'inactive'}
</span>
</td>