remco/Epicnabbo-Catalogus-Updated-Daily
1
0 Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: enforce semantic contrast across admin

Browse Source
This commit is contained in:
Simo committed 2026-07-12 15:14:15 +02:00
1 parent 45c8178cfa
commit f0b4bc1630
86 files changed
+438 -338
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/admin/ads/page.tsx
+2 -2
View File
@@ -61,10 +61,10 @@ export default async function AdminAds() {
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={ad.image} alt="" style={{ maxHeight: 40, maxWidth: 120 }} />
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
<code>{ad.image}</code>
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{ad.createdAt ? ad.createdAt.toISOString().slice(0, 10) : "—"}
</td>
<td>
src/app/admin/alerts/page.tsx
+2 -2
View File
@@ -96,7 +96,7 @@ export default async function AdminAlerts() {
<form action={sendHotelAlert} className="admin-card mb-6">
<h3 className="mt-0">{t("form.send")}</h3>
<p className="text-xs text-gray-500 dark:text-gray-400">
<p className="text-xs theme-text-muted dark:theme-text-muted">
{t.rich("form.description", {
code: (chunks) => <code>{chunks}</code>,
})}
@@ -134,7 +134,7 @@ export default async function AdminAlerts() {
<tbody>
{alerts.map((a) => (
<tr key={String(a.id)}>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{fromDate(a.createdAt)}
</td>
<td>
src/app/admin/applications/page.tsx
+1 -1
View File
@@ -89,7 +89,7 @@ export default async function AdminApplications() {
{t("rankLabel", { rank: a.rankId })}
</span>
</div>
<p className="text-xs text-gray-500 dark:text-gray-400 m-0 mb-2">
<p className="text-xs theme-text-muted dark:theme-text-muted m-0 mb-2">
{formatDate(a.createdAt)}
</p>
<p className="text-sm text-[var(--color-text)] whitespace-pre-wrap m-0 mb-3">{a.content}</p>
src/app/admin/articles/[id]/page.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ export default async function EditArticle({
</p>
</div>
</div>
{error ? <p className="text-xs text-red-600 dark:text-red-400 mb-4">Error: {error}</p> : null}
{error ? <p className="text-xs text-[var(--color-error-text-readable)] dark:text-[var(--color-error-text-readable)] mb-4">Error: {error}</p> : null}
<ArticleForm
action={async (fd) => {
"use server";
src/app/admin/articles/new/page.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export default async function NewArticle({ searchParams }: { searchParams: Promi
</p>
</div>
</div>
{error ? <p className="text-xs text-red-600 dark:text-red-400 mb-4">Error: {error}</p> : null}
{error ? <p className="text-xs text-[var(--color-error-text-readable)] dark:text-[var(--color-error-text-readable)] mb-4">Error: {error}</p> : null}
<ArticleForm action={createArticle} />
</main>
);
src/app/admin/articles/page.tsx
+3 -3
View File
@@ -35,7 +35,7 @@ export default async function AdminArticles({ searchParams }: { searchParams: Pr
</Link>
</div>
{error ? <p className="text-xs text-red-600 dark:text-red-400 mb-4">Error: {error}</p> : null}
{error ? <p className="text-xs text-[var(--color-error-text-readable)] dark:text-[var(--color-error-text-readable)] mb-4">Error: {error}</p> : null}
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label={t("articlesShown")} value={articles.length} icon="📰" />
@@ -62,10 +62,10 @@ export default async function AdminArticles({ searchParams }: { searchParams: Pr
<td>
<Link href={`/admin/articles/${a.id}`}>{a.title}</Link>
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
<code>{a.slug}</code>
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{a.createdAt ? a.createdAt.toISOString().slice(0, 10) : "—"}
</td>
<td>
src/app/admin/badges/page.tsx
+3 -3
View File
@@ -39,12 +39,12 @@ export default async function AdminBadges({
</div>
{uploaded && (
<div className="mb-4 p-3 rounded-lg bg-green-600/10 text-green-600 dark:text-green-400 text-xs">
<div className="mb-4 p-3 rounded-lg bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)] text-xs">
{t("uploadedMessage", { code: uploaded })}
</div>
)}
{error && (
<div className="mb-4 p-3 rounded-lg bg-red-600/10 text-red-600 dark:text-red-400 text-xs">
<div className="mb-4 p-3 rounded-lg bg-[var(--color-error-subtle)] text-[var(--color-error-text-readable)] dark:text-[var(--color-error-text-readable)] text-xs">
{t("errorMessage", { error })}
</div>
)}
@@ -121,7 +121,7 @@ export default async function AdminBadges({
<code>{b.badgeKey}</code>
</td>
<td>{b.badgeName}</td>
<td className="text-sm text-gray-500 dark:text-gray-400">{b.badgeDescription}</td>
<td className="text-sm theme-text-muted dark:theme-text-muted">{b.badgeDescription}</td>
<td>
<form action={giveBadge} className="flex gap-2 items-center">
<input type="hidden" name="code" value={b.badgeKey} />
src/app/admin/bans/page.tsx
+2 -2
View File
@@ -104,11 +104,11 @@ export default async function AdminBans() {
<td>{b.banReason || "—"}</td>
<td>
{b.banExpire === 0 ? (
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-red-500/22 text-[var(--color-text)]">
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-error-subtle)] text-[var(--color-text)]">
{t("permanent")}
</span>
) : (
<span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<span className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{fromUnix(b.banExpire)}
</span>
)}
src/app/admin/calendar/[id]/page.tsx
+10 -10
View File
@@ -90,7 +90,7 @@ export default async function AdminCalendarCampaign({ params }: { params: Promis
return (
<main>
<p className="text-xs text-gray-500 dark:text-gray-400 mb-4">
<p className="text-xs theme-text-muted dark:theme-text-muted mb-4">
<Link href="/admin/calendar">← {t("title")}</Link>
</p>
@@ -101,7 +101,7 @@ export default async function AdminCalendarCampaign({ params }: { params: Promis
) : null}
<div>
<h1 className="m-0 mb-1">{campaign.name || `#${campaign.id}`}</h1>
<p className="text-xs text-gray-500 dark:text-gray-400 m-0">
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">
{t("detail.campaignMeta", {
id: campaign.id,
days: campaign.totalDays,
@@ -135,36 +135,36 @@ export default async function AdminCalendarCampaign({ params }: { params: Promis
<tr key={r.id} className="border-t border-[var(--border-subtle)]">
<td>{r.id}</td>
<td>
{r.productName || <span className="text-sm text-gray-500 dark:text-gray-400">—</span>}
{r.productName || <span className="text-sm theme-text-muted dark:theme-text-muted">—</span>}
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{r.itemId > 0 ? r.itemId : "—"}
</td>
<td>
{r.credits > 0 ? (
r.credits
) : (
<span className="text-sm text-gray-500 dark:text-gray-400">—</span>
<span className="text-sm theme-text-muted dark:theme-text-muted">—</span>
)}
</td>
<td>
{r.pixels > 0 ? (
r.pixels
) : (
<span className="text-sm text-gray-500 dark:text-gray-400">—</span>
<span className="text-sm theme-text-muted dark:theme-text-muted">—</span>
)}
</td>
<td>
{r.points > 0 ? (
`${r.points} (${t("detail.typeLabel", { type: r.pointsType })})`
) : (
<span className="text-sm text-gray-500 dark:text-gray-400">—</span>
<span className="text-sm theme-text-muted dark:theme-text-muted">—</span>
)}
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{r.badge || "—"}
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{r.subscriptionType ? `${r.subscriptionType} · ${r.subscriptionDays}d` : "—"}
</td>
</tr>
@@ -173,7 +173,7 @@ export default async function AdminCalendarCampaign({ params }: { params: Promis
</table>
)}
<p className="text-xs text-gray-500 dark:text-gray-400 mt-4">
<p className="text-xs theme-text-muted dark:theme-text-muted mt-4">
{t("detail.rewardCount", { count: rewards.length })}
</p>
</main>
src/app/admin/calendar/page.tsx
+3 -3
View File
@@ -100,15 +100,15 @@ export default async function AdminCalendar() {
<div className="flex items-center justify-between gap-2 mb-1">
<h3 className="m-0">{c.name || `#${c.id}`}</h3>
<span
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${enabled ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${enabled ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
>
{enabled ? t("statusEnabled") : t("statusDisabled")}
</span>
</div>
<p className="text-xs text-gray-500 dark:text-gray-400 m-0">
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">
{t("campaignMeta", { id: c.id, days: c.totalDays, rewards: count })}
</p>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
<p className="text-xs theme-text-muted dark:theme-text-muted mt-1">
{t("startsAt", { date: fmtDate(c.startTimestamp) })}
{c.lockExpired === "1" ? ` · ${t("locksExpired")}` : ""}
</p>
src/app/admin/catalog/[id]/catalog-detail-tabs.tsx
+1 -1
View File
@@ -82,7 +82,7 @@ export function CatalogDetailTabs({
const furniSet = new Set(furniDataIdList)
const missing = baseItems.filter((b) => !furniSet.has(b.id)).length
return missing > 0 ? (
<span className="ml-1 rounded-full bg-orange-500 text-white text-[10px] px-1.5 py-0.5 leading-none font-medium">
<span className="ml-1 rounded-full bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] text-[10px] px-1.5 py-0.5 leading-none font-medium">
{missing}
</span>
) : null
src/app/admin/catalog/[id]/catalog-items-table/catalog-items-table.tsx
+5 -5
View File
@@ -943,7 +943,7 @@ export function CatalogItemsTable({
{/* Unsaved changes banner */}
{hasUnsavedChanges && (
<div className="flex items-center gap-2 rounded-md border border-yellow-300 bg-yellow-50 dark:border-yellow-700 dark:bg-yellow-950/30 px-3 py-2 text-sm text-yellow-800 dark:text-yellow-200">
<div className="flex items-center gap-2 rounded-md border border-[var(--color-warning-border)] bg-[var(--color-warning-subtle)] px-3 py-2 text-sm text-[var(--color-warning-text-readable)]">
<span className="flex-1">
You have unsaved changes (
{modifiedItems.length > 0 ? `${modifiedItems.length} item(s) modified` : ''}
@@ -1051,7 +1051,7 @@ export function CatalogItemsTable({
<SortableRow
key={item.id}
id={item.id}
className={cn(modified && 'bg-yellow-50 dark:bg-yellow-950/20')}
className={cn(modified && 'bg-[var(--color-warning-subtle)] dark:bg-[var(--color-warning-subtle)]')}
>
{({ dragHandleProps }) => (
<>
@@ -1111,7 +1111,7 @@ export function CatalogItemsTable({
className="h-8 text-xs w-16"
title="Credits"
/>
<span className="text-xs text-yellow-600">c</span>
<span className="text-xs text-[var(--color-warning-text-readable)]">c</span>
<Input
type="number"
value={edit?.costPoints ?? item.costPoints}
@@ -1132,7 +1132,7 @@ export function CatalogItemsTable({
) : (
<div className="text-xs">
{item.costCredits > 0 && (
<span className="text-yellow-600">{item.costCredits}c </span>
<span className="text-[var(--color-warning-text-readable)]">{item.costCredits}c </span>
)}
{item.costPoints > 0 && (
<span className={pts.color}>
@@ -1191,7 +1191,7 @@ export function CatalogItemsTable({
<Button
variant="ghost"
size="icon"
className="h-7 w-7 text-green-600"
className="h-7 w-7 text-[var(--color-success-text-readable)]"
onClick={() => handleSaveOne(item)}
disabled={isSaving || isPending}
title="Save this item"
src/app/admin/catalog/[id]/catalog-items-table/field-helpers.tsx
+1 -1
View File
@@ -213,7 +213,7 @@ export function MovePageCombobox({
value === page.id ? 'opacity-100' : 'opacity-0',
)}
/>
<Star className="mr-1.5 h-3 w-3 text-amber-500" />
<Star className="mr-1.5 h-3 w-3 text-[var(--color-warning-text-readable)]" />
<span className="text-muted-foreground font-mono text-xs mr-1.5">
#{page.id}
</span>
src/app/admin/catalog/[id]/catalog-items-table/types.ts
+5 -5
View File
@@ -55,12 +55,12 @@ export interface InlineEdit {
}
export const POINTS_TYPES: Record<number, { label: string; color: string }> = {
0: { label: 'Duckets', color: 'text-blue-500' },
0: { label: 'Duckets', color: 'text-[var(--color-info-text-readable)]' },
5: { label: 'Diamonds', color: 'text-purple-500' },
101: { label: 'Snowflakes', color: 'text-cyan-400' },
101: { label: 'Snowflakes', color: 'text-[var(--color-info-text-readable)]' },
103: { label: 'Hearts', color: 'text-pink-500' },
104: { label: 'Stars', color: 'text-amber-400' },
105: { label: 'Shells', color: 'text-orange-400' },
104: { label: 'Stars', color: 'text-[var(--color-warning-text-readable)]' },
105: { label: 'Shells', color: 'text-[var(--color-warning-text-readable)]' },
}
export const DEFAULT_NEW_ITEM = {
@@ -81,5 +81,5 @@ export const DEFAULT_NEW_ITEM = {
}
export function getPointsLabel(type: number) {
return POINTS_TYPES[type] || { label: `Type ${type}`, color: 'text-gray-500' }
return POINTS_TYPES[type] || { label: `Type ${type}`, color: 'theme-text-muted' }
}
src/app/admin/catalog/[id]/catalog-translate-tab.tsx
+8 -8
View File
@@ -271,7 +271,7 @@ export function CatalogTranslateTab({
</span>
</div>
{missingItems.length > 0 && (
<div className="flex items-center gap-1.5 mt-2 text-xs text-orange-600 dark:text-orange-400">
<div className="flex items-center gap-1.5 mt-2 text-xs text-[var(--color-warning-text-readable)] dark:text-[var(--color-warning-text-readable)]">
<AlertTriangle className="h-3.5 w-3.5" />
<span>
{missingItems.length} item(s) missing from FurnitureData.json — will be
@@ -399,9 +399,9 @@ export function CatalogTranslateTab({
key={item.id}
className={
isChanged
? 'bg-yellow-50 dark:bg-yellow-950/20'
? 'bg-[var(--color-warning-subtle)] dark:bg-[var(--color-warning-subtle)]'
: isMissing
? 'bg-orange-50/50 dark:bg-orange-950/10'
? 'bg-[var(--color-warning-subtle)] dark:bg-[var(--color-warning-subtle)]'
: undefined
}
>
@@ -442,7 +442,7 @@ export function CatalogTranslateTab({
value={editedNames[item.id] || ''}
onChange={(e) => handleNameChange(item.id, e.target.value)}
disabled={!canEdit}
className={`h-8 text-sm ${nameChanged ? 'border-yellow-400 dark:border-yellow-600' : ''}`}
className={`h-8 text-sm ${nameChanged ? 'border-[var(--color-warning-border)] dark:border-[var(--color-warning-border)]' : ''}`}
/>
{currentCatalogName && currentCatalogName !== item.publicName && (
<p className="text-[11px] text-muted-foreground mt-0.5 truncate">
@@ -456,7 +456,7 @@ export function CatalogTranslateTab({
onChange={(e) => handleDescChange(item.id, e.target.value)}
disabled={!canEdit}
placeholder="No description"
className={`h-8 text-sm ${descChanged ? 'border-yellow-400 dark:border-yellow-600' : ''}`}
className={`h-8 text-sm ${descChanged ? 'border-[var(--color-warning-border)] dark:border-[var(--color-warning-border)]' : ''}`}
/>
</TableCell>
<TableCell>
@@ -464,7 +464,7 @@ export function CatalogTranslateTab({
{isChanged ? (
<Badge
variant="secondary"
className="text-xs bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
className="text-xs bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)]"
>
Modified
</Badge>
@@ -474,7 +474,7 @@ export function CatalogTranslateTab({
{isMissing ? (
<Tooltip>
<TooltipTrigger asChild>
<AlertTriangle className="h-3.5 w-3.5 text-orange-500 flex-shrink-0" />
<AlertTriangle className="h-3.5 w-3.5 text-[var(--color-warning-text-readable)] flex-shrink-0" />
</TooltipTrigger>
<TooltipContent>
<p>Missing from FurnitureData.json</p>
@@ -486,7 +486,7 @@ export function CatalogTranslateTab({
) : (
<Tooltip>
<TooltipTrigger asChild>
<CheckCircle2 className="h-3.5 w-3.5 text-green-500 flex-shrink-0" />
<CheckCircle2 className="h-3.5 w-3.5 text-[var(--color-success-text-readable)] flex-shrink-0" />
</TooltipTrigger>
<TooltipContent>In FurnitureData.json</TooltipContent>
</Tooltip>
src/app/admin/catalog/builder-club/bc-manager.tsx
+2 -2
View File
@@ -124,7 +124,7 @@ export function BcPageDetail({ page, items, canEdit }: BcPageDetailProps) {
</Link>
<span className="text-muted-foreground">/</span>
<div className="flex items-center gap-2">
<HardHat className="h-5 w-5 text-amber-500" />
<HardHat className="h-5 w-5 text-[var(--color-warning-text-readable)]" />
<h1 className="text-2xl font-bold tracking-tight">{page.caption}</h1>
<Badge variant="outline" className="font-mono text-xs">
#{page.id}
@@ -306,7 +306,7 @@ export function BcPageDetail({ page, items, canEdit }: BcPageDetailProps) {
type="button"
variant="ghost"
size="sm"
className="h-6 w-6 p-0 text-red-500 hover:text-red-600"
className="h-6 w-6 p-0 text-[var(--color-error-text-readable)] hover:text-[var(--color-error-text-readable)]"
onClick={() => {
if (!confirm(`Delete item "${item.catalogName}"?`)) return
run(() => deleteBcItem({ id: item.id }), {
src/app/admin/commandocentrum/page.tsx
+5 -5
View File
@@ -565,7 +565,7 @@ export default async function CommandoCentrum() {
<tbody>
{activity.map((a) => (
<tr key={String(a.id)}>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{fromDate(a.createdAt)}
</td>
<td>{nameById.get(Number(a.userId)) ?? `#${a.userId}`}</td>
@@ -574,7 +574,7 @@ export default async function CommandoCentrum() {
{a.action}
</span>
</td>
<td className="text-sm text-gray-500 dark:text-gray-400">{a.description}</td>
<td className="text-sm theme-text-muted dark:theme-text-muted">{a.description}</td>
</tr>
))}
</tbody>
@@ -608,15 +608,15 @@ export default async function CommandoCentrum() {
: t("empty");
return (
<tr key={e.id}>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{formatTimestamp(e.timestamp)}
</td>
<td>{e.type}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{e.version}
</td>
<td>
<pre className="text-xs p-2 bg-gray-50 dark:bg-black/20 rounded overflow-auto max-h-[160px]">
<pre className="text-xs p-2 bg-[var(--color-background)] text-[var(--color-text-readable)] rounded overflow-auto max-h-[160px]">
{snippet}
</pre>
</td>
src/app/admin/email-templates/page.tsx
+3 -3
View File
@@ -50,7 +50,7 @@ export default async function AdminEmailTemplates() {
<input name="variables" placeholder={t("form.variablesPlaceholder")} className="min-w-[200px]" />
<label className="flex items-center gap-2">
<input type="checkbox" name="isActive" defaultChecked className="w-auto" />
<span className="text-sm text-gray-500 dark:text-gray-400">{t("form.active")}</span>
<span className="text-sm theme-text-muted dark:theme-text-muted">{t("form.active")}</span>
</label>
</div>
<textarea
@@ -94,7 +94,7 @@ export default async function AdminEmailTemplates() {
defaultChecked={template.isActive}
className="w-auto"
/>
<span className="text-sm text-gray-500 dark:text-gray-400">{t("form.active")}</span>
<span className="text-sm theme-text-muted dark:theme-text-muted">{t("form.active")}</span>
</label>
</div>
<textarea
@@ -109,7 +109,7 @@ export default async function AdminEmailTemplates() {
{t("save")}
</button>
{template.updatedAt ? (
<span className="text-xs text-gray-500 dark:text-gray-400">
<span className="text-xs theme-text-muted dark:theme-text-muted">
{t("updated", {
date: new Date(template.updatedAt).toISOString().slice(0, 16).replace("T", " "),
})}
src/app/admin/emulator/page.tsx
+4 -4
View File
@@ -38,7 +38,7 @@ export default async function AdminEmulator() {
return (
<main>
<h1>{t("title")}</h1>
<p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
<p className="text-xs theme-text-muted dark:theme-text-muted mb-3">
{t.rich("subtitle", {
code: (chunks) => <code>{chunks}</code>,
})}
@@ -51,7 +51,7 @@ export default async function AdminEmulator() {
<section className="mt-6">
<h2 className="admin-section-title">{t("settings")}</h2>
<p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
<p className="text-xs theme-text-muted dark:theme-text-muted mb-3">
{t("keysCount", { count: settings.length })}
</p>
@@ -93,13 +93,13 @@ export default async function AdminEmulator() {
</tbody>
</table>
{settings.length === 0 ? (
<p className="text-xs text-gray-500 dark:text-gray-400">{t("noSettings")}</p>
<p className="text-xs theme-text-muted dark:theme-text-muted">{t("noSettings")}</p>
) : null}
</section>
<section className="mt-6">
<h2 className="admin-section-title">{t("texts")}</h2>
<p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
<p className="text-xs theme-text-muted dark:theme-text-muted mb-3">
{t("keysCount", { count: textsCount })}
{textsTruncated ? ` (${t("showingFirst", { count: texts.length })})` : ""}.
</p>
src/app/admin/favicon/favicon-form.tsx
+3 -3
View File
@@ -91,7 +91,7 @@ export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
name="file"
accept=".png,.jpg,.jpeg,.gif,.webp,.ico,.svg"
required
className="block w-full text-sm text-[var(--color-text)] file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-[var(--color-primary)] file:text-white hover:file:bg-[var(--color-primary-hover)] cursor-pointer"
className="block w-full text-sm text-[var(--color-text-readable)] file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-[var(--color-primary)] file:text-[var(--color-primary-foreground-readable)] cursor-pointer"
/>
<p className="mt-1 text-xs text-[var(--color-text-muted)]">{t("uploadHint")}</p>
</div>
@@ -112,8 +112,8 @@ export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
<div
className={`mt-4 p-3 rounded-lg text-sm ${
message.type === "success"
? "bg-green-500/10 text-green-600 dark:text-green-400"
: "bg-red-500/10 text-red-600 dark:text-red-400"
? "bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]"
: "bg-[var(--color-error-subtle)] text-[var(--color-error-text-readable)] dark:text-[var(--color-error-text-readable)]"
}`}
>
{message.text}
src/app/admin/help-questions/[id]/page.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ export default async function EditHelpQuestion({
</div>
</div>
{error ? (
<p className="text-xs text-gray-500 dark:text-gray-400 mb-4" style={{ color: "#dc2626" }}>
<p className="text-xs theme-text-muted dark:theme-text-muted mb-4" style={{ color: "#dc2626" }}>
Error: {error}
</p>
) : null}
src/app/admin/help-questions/new/page.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ export default async function NewHelpQuestion({
</div>
</div>
{error ? (
<p className="text-xs text-gray-500 dark:text-gray-400 mb-4" style={{ color: "#dc2626" }}>
<p className="text-xs theme-text-muted dark:theme-text-muted mb-4" style={{ color: "#dc2626" }}>
Error: {error}
</p>
) : null}
src/app/admin/help-questions/page.tsx
+3 -3
View File
@@ -60,16 +60,16 @@ export default async function AdminHelpQuestions() {
<tbody>
{entries.map((e) => (
<tr key={String(e.id)}>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{e.position}</td>
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">{e.position}</td>
<td>
<Link href={`/admin/help-questions/${e.id}`}>{e.name}</Link>
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{e.buttonText || "—"}
</td>
<td>
<span
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${e.smallBox ? "bg-green-600/20 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${e.smallBox ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
>
{e.smallBox ? "Yes" : "No"}
</span>
src/app/admin/import/badges/import-badges-client.tsx
+3 -3
View File
@@ -202,8 +202,8 @@ export function ImportBadgesClient() {
<span className="text-muted-foreground">results</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
<CheckCircle2 className="h-4 w-4 text-emerald-500" />
<span className="font-medium text-emerald-600">{importedCount}</span>
<CheckCircle2 className="h-4 w-4 text-[var(--color-success-text-readable)]" />
<span className="font-medium text-[var(--color-success-text-readable)]">{importedCount}</span>
<span className="text-muted-foreground">imported</span>
</div>
{importableBadges.length > 0 && (
@@ -419,7 +419,7 @@ export function ImportBadgesClient() {
<div className="pt-1">
{badge.alreadyImported ? (
<div className="flex items-center gap-1">
<Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 flex-1 justify-center">
<Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0 gap-0.5 flex-1 justify-center">
<Check className="w-2.5 h-2.5" />
Imported
</Badge>
src/app/admin/import/clone/import-clone-client.tsx
+3 -3
View File
@@ -546,8 +546,8 @@ function FurniGrid({ source }: FurniGridProps) {
<span className="text-muted-foreground">total</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
<Check className="h-4 w-4 text-emerald-500" />
<span className="font-medium text-emerald-600">{stats.present}</span>
<Check className="h-4 w-4 text-[var(--color-success-text-readable)]" />
<span className="font-medium text-[var(--color-success-text-readable)]">{stats.present}</span>
<span className="text-muted-foreground">present</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
@@ -766,7 +766,7 @@ function FurniGrid({ source }: FurniGridProps) {
</div>
<div className="pt-1">
{it.present ? (
<Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 w-full justify-center">
<Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0 gap-0.5 w-full justify-center">
<Check className="w-2.5 h-2.5" />
Present
</Badge>
src/app/admin/import/clothing/import-clothing-client.tsx
+8 -8
View File
@@ -257,8 +257,8 @@ function LibsView() {
<span className="text-muted-foreground">libraries</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
<Check className="h-4 w-4 text-emerald-500" />
<span className="font-medium text-emerald-600">{importedCount}</span>
<Check className="h-4 w-4 text-[var(--color-success-text-readable)]" />
<span className="font-medium text-[var(--color-success-text-readable)]">{importedCount}</span>
<span className="text-muted-foreground">on this page</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
@@ -400,7 +400,7 @@ function LibsView() {
<div className="pt-1">
{p.nitroExists ? (
<div className="flex items-center gap-1">
<Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 flex-1 justify-center">
<Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0 gap-0.5 flex-1 justify-center">
<Check className="w-2.5 h-2.5" />
Imported
</Badge>
@@ -591,8 +591,8 @@ function SetsView() {
<span className="text-muted-foreground">sets</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
<Check className="h-4 w-4 text-emerald-500" />
<span className="font-medium text-emerald-600">{presentCount}</span>
<Check className="h-4 w-4 text-[var(--color-success-text-readable)]" />
<span className="font-medium text-[var(--color-success-text-readable)]">{presentCount}</span>
<span className="text-muted-foreground">on this page</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
@@ -737,19 +737,19 @@ function SetsView() {
{it.gender}
</Badge>
{it.club > 0 && (
<Badge className="text-[10px] px-1.5 py-0 bg-yellow-500/20 text-yellow-600 border-0">
<Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] border-0">
HC
</Badge>
)}
{it.sellable && (
<Badge className="text-[10px] px-1.5 py-0 bg-blue-500/15 text-blue-500 border-0">
<Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-info-subtle)] text-[var(--color-info-text-readable)] border-0">
$
</Badge>
)}
</div>
<div className="pt-1">
{it.present ? (
<Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 w-full justify-center">
<Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0 gap-0.5 w-full justify-center">
<Check className="w-2.5 h-2.5" />
Imported
</Badge>
src/app/admin/import/effects/import-effects-client.tsx
+4 -4
View File
@@ -185,8 +185,8 @@ export function ImportEffectsClient() {
<span className="text-muted-foreground">effects</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
<Check className="h-4 w-4 text-emerald-500" />
<span className="font-medium text-emerald-600">{importedCount}</span>
<Check className="h-4 w-4 text-[var(--color-success-text-readable)]" />
<span className="font-medium text-[var(--color-success-text-readable)]">{importedCount}</span>
<span className="text-muted-foreground">imported</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
@@ -337,7 +337,7 @@ export function ImportEffectsClient() {
)}
>
{e.type === 'dance' ? (
<Music className="w-7 h-7 text-amber-500/80" />
<Music className="w-7 h-7 text-[var(--color-warning-text-readable)]/80" />
) : (
<Sparkles className="w-7 h-7 text-violet-500/80" />
)}
@@ -351,7 +351,7 @@ export function ImportEffectsClient() {
<div className="pt-1">
{imported ? (
<div className="flex items-center gap-1">
<Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 flex-1 justify-center">
<Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0 gap-0.5 flex-1 justify-center">
<Check className="w-2.5 h-2.5" />
Imported
</Badge>
src/app/admin/import/furni/import-furni-client.tsx
+18 -18
View File
@@ -883,11 +883,11 @@ export function ImportFurniClient() {
<div className="text-[10px] text-muted-foreground">on this page</div>
</div>
<div className="rounded-lg border bg-card p-3">
<div className="flex items-center gap-2 text-xs text-amber-500">
<div className="flex items-center gap-2 text-xs text-[var(--color-warning-text-readable)]">
<FileWarning className="w-3.5 h-3.5" />
Missing .nitro
</div>
<div className="text-xl font-bold mt-1 text-amber-500">
<div className="text-xl font-bold mt-1 text-[var(--color-warning-text-readable)]">
{stats.missingNitro.toLocaleString()}
</div>
</div>
@@ -913,12 +913,12 @@ export function ImportFurniClient() {
<div className="rounded-lg border p-4 space-y-3 bg-card">
<h3 className="text-sm font-semibold">Import Complete</h3>
<div className="flex gap-4 text-sm">
<span className="text-emerald-500">{batchSummary.succeeded} succeeded</span>
<span className="text-[var(--color-success-text-readable)]">{batchSummary.succeeded} succeeded</span>
{batchSummary.failed > 0 && (
<span className="text-destructive">{batchSummary.failed} failed</span>
)}
{batchSummary.warnings > 0 && (
<span className="text-amber-500">{batchSummary.warnings} with warnings</span>
<span className="text-[var(--color-warning-text-readable)]">{batchSummary.warnings} with warnings</span>
)}
<span className="text-muted-foreground">
{(batchSummary.duration / 1000).toFixed(1)}s
@@ -937,14 +937,14 @@ export function ImportFurniClient() {
{item.status === 'failed' ? (
<XCircle className="w-3 h-3 text-destructive mt-0.5 shrink-0" />
) : (
<AlertCircle className="w-3 h-3 text-amber-500 mt-0.5 shrink-0" />
<AlertCircle className="w-3 h-3 text-[var(--color-warning-text-readable)] mt-0.5 shrink-0" />
)}
<div className="min-w-0">
<span className="font-mono">{item.classname}</span>
{item.message && <p className="text-destructive">{item.message}</p>}
{item.warnings?.map((w, i) => (
// biome-ignore lint/suspicious/noArrayIndexKey: warnings list is append-only and not reordered
<p key={i} className="text-amber-500">
<p key={i} className="text-[var(--color-warning-text-readable)]">
{w}
</p>
))}
@@ -987,7 +987,7 @@ export function ImportFurniClient() {
{progressStats.completed}/{progressStats.total} completed
</span>
{progressStats.done > 0 && (
<span className="text-emerald-500">{progressStats.done} OK</span>
<span className="text-[var(--color-success-text-readable)]">{progressStats.done} OK</span>
)}
{progressStats.failed > 0 && (
<span className="text-destructive">{progressStats.failed} failed</span>
@@ -999,7 +999,7 @@ export function ImportFurniClient() {
key={item.classname}
className="flex items-center gap-2 text-xs py-1 px-2 rounded hover:bg-muted/50"
>
{item.status === 'done' && <Check className="w-3 h-3 text-emerald-500 shrink-0" />}
{item.status === 'done' && <Check className="w-3 h-3 text-[var(--color-success-text-readable)] shrink-0" />}
{item.status === 'failed' && (
<XCircle className="w-3 h-3 text-destructive shrink-0" />
)}
@@ -1049,7 +1049,7 @@ export function ImportFurniClient() {
<span>
{completed}/{arr.length}
</span>
{done > 0 && <span className="text-emerald-500">{done} OK</span>}
{done > 0 && <span className="text-[var(--color-success-text-readable)]">{done} OK</span>}
{failed > 0 && <span className="text-destructive">{failed} failed</span>}
</div>
</div>
@@ -1062,7 +1062,7 @@ export function ImportFurniClient() {
<h3 className="text-sm font-semibold">Regeneration Complete</h3>
<div className="flex gap-4 text-sm">
{regenSummary.succeeded > 0 && (
<span className="text-emerald-500">{regenSummary.succeeded} regenerated</span>
<span className="text-[var(--color-success-text-readable)]">{regenSummary.succeeded} regenerated</span>
)}
{regenSummary.failed > 0 && (
<span className="text-destructive">{regenSummary.failed} failed</span>
@@ -1305,7 +1305,7 @@ export function ImportFurniClient() {
size="sm"
onClick={regenAllMissing}
disabled={batchRegenerating || regeneratingNitro.size > 0}
className="h-8 text-amber-500 border-amber-500/30 hover:bg-amber-500/10"
className="h-8 text-[var(--color-warning-text-readable)] border-[var(--color-warning-border)] hover:bg-[var(--color-warning-subtle)]"
>
{batchRegenerating ? (
<Loader2 className="w-4 h-4 mr-1 animate-spin" />
@@ -1428,11 +1428,11 @@ export function ImportFurniClient() {
<td className="px-2 py-1.5">
{item.alreadyImported ? (
item.nitroExists ? (
<Badge className="text-[10px] bg-emerald-500/15 text-emerald-500 border-0">
<Badge className="text-[10px] bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0">
OK
</Badge>
) : (
<Badge className="text-[10px] bg-amber-500/15 text-amber-500 border-0">
<Badge className="text-[10px] bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] border-0">
No .nitro
</Badge>
)
@@ -1471,7 +1471,7 @@ export function ImportFurniClient() {
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0 text-amber-500"
className="h-6 w-6 p-0 text-[var(--color-warning-text-readable)]"
onClick={() => regenNitro(item)}
disabled={regeneratingNitro.has(item.classname)}
>
@@ -1576,12 +1576,12 @@ export function ImportFurniClient() {
{item.alreadyImported && (
<>
{item.nitroExists ? (
<Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-emerald-500/20 gap-0.5 shrink-0">
<Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-[var(--color-success-border)] gap-0.5 shrink-0">
<Check className="w-2.5 h-2.5" />
Imported
</Badge>
) : (
<Badge className="text-[10px] px-1.5 py-0 bg-amber-500/15 text-amber-500 border-amber-500/20 gap-0.5 shrink-0">
<Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] border-[var(--color-warning-border)] gap-0.5 shrink-0">
<AlertCircle className="w-2.5 h-2.5" />
No .nitro
</Badge>
@@ -1603,7 +1603,7 @@ export function ImportFurniClient() {
<Button
variant="ghost"
size="sm"
className="h-5 w-5 p-0 shrink-0 text-amber-500"
className="h-5 w-5 p-0 shrink-0 text-[var(--color-warning-text-readable)]"
title="Regenerate .nitro file"
disabled={regeneratingNitro.has(item.classname)}
onClick={(e) => {
@@ -1770,7 +1770,7 @@ export function ImportFurniClient() {
)}
{reorgPreview.repriced > 0 && (
<div className="rounded-lg border p-3 text-center">
<p className="text-lg font-bold text-amber-500">{reorgPreview.repriced}</p>
<p className="text-lg font-bold text-[var(--color-warning-text-readable)]">{reorgPreview.repriced}</p>
<p className="text-xs text-muted-foreground">Prices to update</p>
</div>
)}
src/app/admin/import/furni/nitro-editor-dialog.tsx
+1 -1
View File
@@ -83,7 +83,7 @@ function CopyClassname({ value }: { value: string }) {
>
<span className="truncate">{value}</span>
{copied ? (
<Check className="w-3 h-3 text-green-500 shrink-0" />
<Check className="w-3 h-3 text-[var(--color-success-text-readable)] shrink-0" />
) : (
<Copy className="w-3 h-3 shrink-0" />
)}
src/app/admin/import/pets/import-pets-client.tsx
+3 -3
View File
@@ -178,8 +178,8 @@ export function ImportPetsClient() {
<span className="text-muted-foreground">pets</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
<Check className="h-4 w-4 text-emerald-500" />
<span className="font-medium text-emerald-600">{importedCount}</span>
<Check className="h-4 w-4 text-[var(--color-success-text-readable)]" />
<span className="font-medium text-[var(--color-success-text-readable)]">{importedCount}</span>
<span className="text-muted-foreground">imported</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
@@ -313,7 +313,7 @@ export function ImportPetsClient() {
<div className="pt-1">
{p.nitroExists ? (
<div className="flex items-center gap-1">
<Badge className="text-[10px] px-1.5 py-0 bg-emerald-500/15 text-emerald-500 border-0 gap-0.5 flex-1 justify-center">
<Badge className="text-[10px] px-1.5 py-0 bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-0 gap-0.5 flex-1 justify-center">
<Check className="w-2.5 h-2.5" />
Imported
</Badge>
src/app/admin/import/repair/repair-client.tsx
+5 -5
View File
@@ -435,7 +435,7 @@ export function RepairClient() {
{/* Table area */}
{summary && summary.items.length === 0 && (
<div className="rounded-md border bg-muted/30 p-10 text-center">
<CheckCircle2 className="mx-auto mb-3 h-10 w-10 text-emerald-500" />
<CheckCircle2 className="mx-auto mb-3 h-10 w-10 text-[var(--color-success-text-readable)]" />
<p className="font-medium">All imported items have their assets on disk.</p>
<p className="text-sm text-muted-foreground">
{summary.total} items scanned, nothing to repair.
@@ -615,7 +615,7 @@ function StatCard({
const tones = {
default: 'border-border',
danger: 'border-destructive/40 bg-destructive/5',
warn: 'border-amber-500/40 bg-amber-500/5',
warn: 'border-[var(--color-warning-border)] bg-[var(--color-warning-subtle)]',
info: 'border-sky-500/40 bg-sky-500/5',
}
return (
@@ -631,7 +631,7 @@ function FileBadge({ present }: { present: boolean }) {
return present ? (
<Badge
variant="secondary"
className="border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400"
className="border-[var(--color-success-border)] bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]"
>
<CheckCircle2 className="mr-1 h-3 w-3" /> On disk
</Badge>
@@ -659,7 +659,7 @@ function StatusCell({ progress }: { progress?: ItemProgress }) {
progress.iconRepaired ? 'icon ✓' : null,
].filter(Boolean)
return (
<span className="flex items-center gap-1 text-xs text-emerald-600 dark:text-emerald-400">
<span className="flex items-center gap-1 text-xs text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]">
<CheckCircle2 className="h-3 w-3" />
{parts.length > 0 ? parts.join(' · ') : 'Repaired'}
</span>
@@ -668,7 +668,7 @@ function StatusCell({ progress }: { progress?: ItemProgress }) {
if (progress.status === 'partial') {
return (
<span
className="flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400"
className="flex items-center gap-1 text-xs text-[var(--color-warning-text-readable)] dark:text-[var(--color-warning-text-readable)]"
title={progress.message}
>
<AlertCircle className="h-3 w-3" />
src/app/admin/ip/page.tsx
+4 -4
View File
@@ -104,10 +104,10 @@ export default async function AdminIp() {
{whitelist.map((w) => (
<tr key={String(w.id)}>
<td>{w.ipAddress}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{w.asn ?? "—"}
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{formatDate(w.createdAt)}
</td>
<td>
@@ -162,10 +162,10 @@ export default async function AdminIp() {
{blacklist.map((b) => (
<tr key={String(b.id)}>
<td>{b.ipAddress}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{b.asn ?? "—"}
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{formatDate(b.createdAt)}
</td>
<td>
src/app/admin/layout.tsx
+9 -9
View File
@@ -170,17 +170,17 @@ async function Sidebar({ staff }: { staff: { id: number; username: string; rank:
const navGroups = getNavGroups(t);
return (
<aside className="sticky top-0 self-start h-screen bg-gradient-to-b from-[#1e1b2e] to-[#151226] text-[#c8cbe0] shadow-xl flex flex-col">
<div className="flex items-center gap-3 px-4 py-5 border-b border-white/[0.06]">
<aside className="sticky top-0 self-start h-screen bg-[var(--admin-sidebar-background)] text-[var(--admin-sidebar-text-readable)] shadow-xl flex flex-col">
<div className="flex items-center gap-3 px-4 py-5 border-b border-[var(--border-subtle)]">
<span
className="flex-none w-10 h-10 rounded-xl grid place-items-center font-extrabold text-base text-[#1a1a2e] bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-hover)] shadow-lg shadow-[var(--color-primary)]/20"
className="flex-none w-10 h-10 rounded-xl grid place-items-center font-extrabold text-base text-[var(--color-primary-foreground-readable)] bg-[var(--color-primary)] shadow-lg shadow-[var(--color-primary)]/20"
aria-hidden
>
{initial}
</span>
<div className="min-w-0 flex-1">
<div className="font-semibold text-sm text-white truncate">{staff.username}</div>
<span className="inline-block mt-0.5 text-[0.6rem] font-bold uppercase tracking-widest text-[rgba(200,203,224,0.5)]">
<div className="font-semibold text-sm text-[var(--admin-sidebar-text-readable)] truncate">{staff.username}</div>
<span className="inline-block mt-0.5 text-[0.6rem] font-bold uppercase tracking-widest text-[var(--admin-sidebar-muted-readable)]">
{t("rankLabel", { rank: staff.rank })}
</span>
</div>
@@ -189,7 +189,7 @@ async function Sidebar({ staff }: { staff: { id: number; username: string; rank:
<nav className="flex-1 overflow-y-auto px-3 py-4 space-y-1">
{navGroups.map((group) => (
<div key={group.label}>
<div className="flex items-center gap-1.5 px-2 py-2 text-[0.6rem] font-bold uppercase tracking-[0.12em] text-[rgba(200,203,224,0.3)]">
<div className="flex items-center gap-1.5 px-2 py-2 text-[0.6rem] font-bold uppercase tracking-[0.12em] text-[var(--admin-sidebar-muted-readable)]">
{group.icon}
<span>{group.label}</span>
</div>
@@ -204,10 +204,10 @@ async function Sidebar({ staff }: { staff: { id: number; username: string; rank:
))}
</nav>
<div className="px-3 py-3 border-t border-white/[0.06]">
<div className="px-3 py-3 border-t border-[var(--border-subtle)]">
<Link
href="/"
className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-[#c8cbe0]/60 text-xs font-medium hover:text-white hover:bg-white/5 transition-all duration-150 no-underline"
className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-[var(--admin-sidebar-muted-readable)] text-xs font-medium hover:text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--color-primary)]/10 transition-all duration-150 no-underline"
>
<LogOut size={14} />
<span>{t("backToSite")}</span>
@@ -233,7 +233,7 @@ async function Topbar({ staff }: { staff: { id: number; username: string; rank:
<span className="text-xs text-[var(--color-text-muted)]">
<strong className="text-[var(--color-text)]">{staff.username}</strong>
</span>
<span className="inline-flex items-center gap-1.5 text-[0.6rem] font-bold uppercase tracking-wider text-[#1a1a2e] bg-[var(--color-primary)] rounded-full px-2.5 py-1">
<span className="inline-flex items-center gap-1.5 text-[0.6rem] font-bold uppercase tracking-wider text-[var(--color-primary-foreground-readable)] bg-[var(--color-primary)] rounded-full px-2.5 py-1">
{t("rankLabel", { rank: staff.rank })}
</span>
</div>
src/app/admin/logs/page.tsx
+6 -6
View File
@@ -140,10 +140,10 @@ export default async function AdminStaffActivities({
<tbody>
{activities.map((a) => (
<tr key={String(a.id)}>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{fromDate(a.createdAt)}
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{t("staffWithId", {
id: Number(a.userId),
name: nameById.get(Number(a.userId)) ?? "unknown",
@@ -157,14 +157,14 @@ export default async function AdminStaffActivities({
<td>{a.description}</td>
<td>
{a.targetType && a.targetId ? (
<span className="text-sm text-gray-500 dark:text-gray-400">
<span className="text-sm theme-text-muted dark:theme-text-muted">
{a.targetType === "user" ? t("userPrefix") : ""}#{String(a.targetId)}
</span>
) : (
<span className="text-sm text-gray-500 dark:text-gray-400">—</span>
<span className="text-sm theme-text-muted dark:theme-text-muted">—</span>
)}
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{a.ipAddress || "—"}
</td>
</tr>
@@ -175,7 +175,7 @@ export default async function AdminStaffActivities({
)}
</section>
<p className="text-xs text-gray-500 dark:text-gray-400">
<p className="text-xs theme-text-muted dark:theme-text-muted">
{t("pagination", { page, pages, total })}
{page < pages ? (
<>
src/app/admin/maintenance/page.tsx
+4 -4
View File
@@ -65,13 +65,13 @@ export default async function AdminMaintenance() {
<h2 className="admin-section-title">{t("currentState")}</h2>
<div className="admin-card flex items-center gap-3">
<span
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${enabled ? "bg-red-500/22 text-[var(--color-text)]" : "bg-green-600/20 text-[var(--color-text)]"}`}
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${enabled ? "bg-[var(--color-error-subtle)] text-[var(--color-text)]" : "bg-[var(--color-success-subtle)] text-[var(--color-text)]"}`}
>
{enabled ? t("enabled") : t("disabled")}
</span>
<div>
<strong>{t("maintenanceCurrently", { status: enabled ? t("enabled") : t("disabled") })}</strong>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1 m-0">
<p className="text-xs theme-text-muted dark:theme-text-muted mt-1 m-0">
{enabled ? t("onlyRankCanLogin", { rank: minRankValue }) : t("hotelOpenToEveryone")}
</p>
</div>
@@ -94,7 +94,7 @@ export default async function AdminMaintenance() {
</label>
<div className="mb-4 max-w-[220px]">
<label htmlFor="mt-min-rank" className="text-sm text-gray-500 dark:text-gray-400 block mb-1">
<label htmlFor="mt-min-rank" className="text-sm theme-text-muted dark:theme-text-muted block mb-1">
{t("minLoginRankLabel")}
</label>
<input
@@ -109,7 +109,7 @@ export default async function AdminMaintenance() {
</div>
<div className="mb-4">
<label htmlFor="mt-message" className="text-sm text-gray-500 dark:text-gray-400 block mb-1">
<label htmlFor="mt-message" className="text-sm theme-text-muted dark:theme-text-muted block mb-1">
{t("maintenanceMessageLabel")}
</label>
<textarea
src/app/admin/media/page.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ export default async function AdminMediaPage() {
</div>
<Link
href="/admin/articles"
className="text-sm text-gray-500 dark:text-gray-400"
className="text-sm theme-text-muted dark:theme-text-muted"
style={{ fontSize: "0.88rem" }}
>
← {t("articles")}
src/app/admin/navigation/page.tsx
+7 -7
View File
@@ -32,7 +32,7 @@ type PublicRow = {
function YesNo({ on }: { on: boolean }) {
return (
<span
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${on ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${on ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
>
{on ? "Yes" : "No"}
</span>
@@ -134,7 +134,7 @@ export default async function AdminNavigation() {
{/* ── navigator_flatcats ───────────────────────────────── */}
<section className="mt-6">
<h2 className="admin-section-title">{t("flatCategories")}</h2>
<p className="text-xs text-gray-500 dark:text-gray-400">
<p className="text-xs theme-text-muted dark:theme-text-muted">
<code>navigator_flatcats</code> · {flatcats.length} {t("rows")}
</p>
{flatcats.length === 0 ? (
@@ -158,9 +158,9 @@ export default async function AdminNavigation() {
<tbody>
{flatcats.map((c) => (
<tr key={c.id}>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{c.id}</td>
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">{c.id}</td>
<td>{c.caption || "—"}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{c.captionSave || "—"}
</td>
<td>{c.minRank}</td>
@@ -184,7 +184,7 @@ export default async function AdminNavigation() {
{/* ── navigator_publics ────────────────────────────────── */}
<section className="mt-6">
<h2 className="admin-section-title">{t("publicRooms")}</h2>
<p className="text-xs text-gray-500 dark:text-gray-400">
<p className="text-xs theme-text-muted dark:theme-text-muted">
<code>navigator_publics</code> · {publics.length} {t("rows")}
</p>
{publics.length === 0 ? (
@@ -204,11 +204,11 @@ export default async function AdminNavigation() {
<tr key={`${p.public_cat_id}-${p.room_id}-${i}`}>
<td>
{catNameById.get(p.public_cat_id) ?? "—"}{" "}
<span className="text-sm text-gray-500 dark:text-gray-400">#{p.public_cat_id}</span>
<span className="text-sm theme-text-muted dark:theme-text-muted">#{p.public_cat_id}</span>
</td>
<td>
{roomNameById.get(p.room_id) || t("unnamed")}{" "}
<span className="text-sm text-gray-500 dark:text-gray-400">#{p.room_id}</span>
<span className="text-sm theme-text-muted dark:theme-text-muted">#{p.room_id}</span>
</td>
<td>
<YesNo on={p.visible === "1"} />
src/app/admin/permissions/[id]/rank-edit-client.tsx
+10 -10
View File
@@ -110,10 +110,10 @@ function PermToggle({
'w-7 h-6 text-[11px] font-mono rounded transition-all font-medium',
v === value
? v === '0'
? 'bg-zinc-500 text-white shadow-sm'
? 'bg-[var(--color-text-muted)] text-[var(--color-surface-text-readable)] shadow-sm'
: v === '1'
? 'bg-emerald-500 text-white shadow-sm'
: 'bg-amber-500 text-white shadow-sm'
? 'bg-[var(--color-success)] text-[var(--color-success-foreground-readable)] shadow-sm'
: 'bg-[var(--color-warning)] text-[var(--color-warning-foreground-readable)] shadow-sm'
: 'bg-muted/60 text-muted-foreground/40 hover:bg-muted hover:text-muted-foreground',
)}
>
@@ -291,7 +291,7 @@ export function RankEditClient({
key={key}
className={cn(
'flex items-center justify-between px-3 py-2 bg-card',
(perms[key] ?? '0') !== '0' && 'bg-emerald-500/5',
(perms[key] ?? '0') !== '0' && 'bg-[var(--color-success-subtle)]',
)}
>
<span className="font-mono text-xs truncate mr-3">{key}</span>
@@ -326,9 +326,9 @@ export function RankEditClient({
</Button>
</Link>
{initialRank.id >= 7 ? (
<Crown className="h-6 w-6 text-yellow-500" />
<Crown className="h-6 w-6 text-[var(--color-warning-text-readable)]" />
) : initialRank.id >= 5 ? (
<ShieldCheck className="h-6 w-6 text-blue-500" />
<ShieldCheck className="h-6 w-6 text-[var(--color-info-text-readable)]" />
) : (
<Shield className="h-6 w-6 text-muted-foreground" />
)}
@@ -548,10 +548,10 @@ export function RankEditClient({
<span className="w-3 h-3 rounded bg-zinc-500 inline-block" /> Off
</span>
<span className="flex items-center gap-1">
<span className="w-3 h-3 rounded bg-emerald-500 inline-block" /> On
<span className="w-3 h-3 rounded bg-[var(--color-success-subtle)] inline-block" /> On
</span>
<span className="flex items-center gap-1">
<span className="w-3 h-3 rounded bg-amber-500 inline-block" /> Owner
<span className="w-3 h-3 rounded bg-[var(--color-warning-subtle)] inline-block" /> Owner
</span>
</div>
</div>
@@ -660,7 +660,7 @@ export function RankEditClient({
key={perm.id}
className={cn(
'flex items-center gap-3 rounded-lg border px-4 py-3 transition-all',
on ? 'border-emerald-500/40 bg-emerald-500/5' : 'hover:bg-muted/50',
on ? 'border-[var(--color-success-border)] bg-[var(--color-success-subtle)]' : 'hover:bg-muted/50',
)}
>
<Checkbox checked={on} onCheckedChange={() => toggleCms(perm.slug)} />
@@ -671,7 +671,7 @@ export function RankEditClient({
)}
</div>
{on && (
<Badge className="bg-emerald-500/15 text-emerald-600 border-emerald-500/30 text-[10px]">
<Badge className="bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] border-[var(--color-success-border)] text-[10px]">
Active
</Badge>
)}
src/app/admin/permissions/permissions-list.tsx
+8 -8
View File
@@ -45,17 +45,17 @@ interface Props {
}
const RANK_ICONS: Record<number, React.ReactNode> = {
7: <Crown className="h-4 w-4 text-yellow-500" />,
6: <ShieldCheck className="h-4 w-4 text-red-500" />,
5: <Shield className="h-4 w-4 text-blue-500" />,
4: <UserCheck className="h-4 w-4 text-green-500" />,
7: <Crown className="h-4 w-4 text-[var(--color-warning-text-readable)]" />,
6: <ShieldCheck className="h-4 w-4 text-[var(--color-error-text-readable)]" />,
5: <Shield className="h-4 w-4 text-[var(--color-info-text-readable)]" />,
4: <UserCheck className="h-4 w-4 text-[var(--color-success-text-readable)]" />,
}
const RANK_COLORS: Record<number, string> = {
7: 'border-yellow-500/50 bg-yellow-500/5',
6: 'border-red-500/30 bg-red-500/5',
5: 'border-blue-500/30 bg-blue-500/5',
4: 'border-green-500/30 bg-green-500/5',
7: 'border-[var(--color-warning-border)] bg-[var(--color-warning-subtle)]',
6: 'border-[var(--color-error-border)] bg-[var(--color-error-subtle)]',
5: 'border-[var(--color-info-border)] bg-[var(--color-info-subtle)]',
4: 'border-[var(--color-success-border)] bg-[var(--color-success-subtle)]',
}
export function PermissionsList({ ranks: initialRanks }: Props) {
src/app/admin/photos/page.tsx
+2 -2
View File
@@ -69,11 +69,11 @@ export default async function AdminPhotos() {
}}
>
<strong>#{String(p.id)}</strong>
<span className="text-sm text-gray-500 dark:text-gray-400">
<span className="text-sm theme-text-muted dark:theme-text-muted">
{t("colRoom")} {p.roomId}
</span>
</div>
<p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.3rem 0 0" }}>
<p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.3rem 0 0" }}>
{t("colUser")} {p.userId} ·{" "}
{new Date(p.timestamp * 1000).toISOString().slice(0, 16).replace("T", " ")}
</p>
src/app/admin/radio/api-keys/page.tsx
+9 -9
View File
@@ -67,7 +67,7 @@ export default async function AdminRadioApiKeysPage() {
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
<Link href="/admin/radio/api-keys">{t("apiKeys")}</Link> ·{" "}
@@ -90,7 +90,7 @@ export default async function AdminRadioApiKeysPage() {
{dbError ? (
<div className="admin-card" style={{ marginTop: "1rem" }}>
<p className="text-xs text-gray-500 dark:text-gray-400 m-0">{t("apiKeysForm.dbError")}</p>
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("apiKeysForm.dbError")}</p>
</div>
) : (
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
@@ -113,7 +113,7 @@ export default async function AdminRadioApiKeysPage() {
<section className="mt-6">
<h2>{t("apiKeysForm.generateKey")}</h2>
<p className="text-xs text-gray-500 dark:text-gray-400">{t("apiKeysForm.generateHint")}</p>
<p className="text-xs theme-text-muted dark:theme-text-muted">{t("apiKeysForm.generateHint")}</p>
<form action={createApiKey} className="admin-card">
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div>
@@ -186,28 +186,28 @@ export default async function AdminRadioApiKeysPage() {
<tbody>
{keys.map((k) => (
<tr key={String(k.id)}>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{String(k.id)}
</td>
<td>{k.name}</td>
<td>
<code title={t("apiKeysForm.maskedHint")}>{maskKey(k.key)}</code>
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{k.allowedIps || t("apiKeysForm.any")}
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{k.rateLimit}/min
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{formatDate(k.lastUsedAt)}
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{formatDate(k.expiresAt)}
</td>
<td>
<span
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${k.isActive ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${k.isActive ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
>
{k.isActive ? t("apiKeysForm.activeLabel") : t("apiKeysForm.inactiveLabel")}
</span>
src/app/admin/radio/autodj/page.tsx
+9 -9
View File
@@ -71,7 +71,7 @@ export default async function AdminRadioAutoDjPage() {
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
@@ -93,7 +93,7 @@ export default async function AdminRadioAutoDjPage() {
{dbError ? (
<div className="admin-card mb-6">
<p className="text-xs text-gray-500 dark:text-gray-400 m-0">{t("autoDjForm.dbError")}</p>
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("autoDjForm.dbError")}</p>
</div>
) : (
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
@@ -215,7 +215,7 @@ export default async function AdminRadioAutoDjPage() {
<tbody>
{tracks.map((track) => (
<tr key={String(track.id)}>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{track.sortOrder}
</td>
<td>
@@ -233,24 +233,24 @@ export default async function AdminRadioAutoDjPage() {
<strong>{track.title}</strong>
</span>
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{track.artist ?? "\u2014"}
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{track.album ?? "\u2014"}
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{formatDuration(track.duration)}
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{track.playCount}
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{formatDate(track.lastPlayedAt)}
</td>
<td>
<span
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${track.isActive ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${track.isActive ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
>
{track.isActive ? t("autoDjForm.activeLabel") : t("autoDjForm.inactiveLabel")}
</span>
src/app/admin/radio/banners/page.tsx
+4 -4
View File
@@ -53,7 +53,7 @@ export default async function AdminRadioBannersPage() {
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
@@ -73,7 +73,7 @@ export default async function AdminRadioBannersPage() {
{dbError ? (
<div className="admin-card mb-6">
<p className="text-xs text-gray-500 dark:text-gray-400 m-0">{t("banners.dbError")}</p>
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("banners.dbError")}</p>
</div>
) : (
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
@@ -157,10 +157,10 @@ export default async function AdminRadioBannersPage() {
<div key={String(b.id)} className="admin-card">
<div className="flex justify-between items-baseline gap-3">
<strong>#{String(b.id)}</strong>
<span className="text-sm text-gray-500 dark:text-gray-400 inline-flex gap-2 items-center">
<span className="text-sm theme-text-muted dark:theme-text-muted inline-flex gap-2 items-center">
{t("banners.byUser", { id: String(b.userId) })} · {formatDate(b.createdAt)} ·{" "}
<span
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${b.isActive ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${b.isActive ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
>
{b.isActive ? t("banners.active") : t("banners.hidden")}
</span>
src/app/admin/radio/embed/embed-snippet.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ export function EmbedSnippet({
{copied ? "Copied!" : "Copy"}
</button>
</div>
{description ? <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">{description}</p> : null}
{description ? <p className="text-xs theme-text-muted dark:theme-text-muted mb-3">{description}</p> : null}
<textarea
id={id}
readOnly
src/app/admin/radio/embed/page.tsx
+4 -4
View File
@@ -43,7 +43,7 @@ export default async function AdminRadioEmbedPage() {
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
<Link href="/admin/radio/embed">{t("embed")}</Link> ·{" "}
@@ -83,7 +83,7 @@ export default async function AdminRadioEmbedPage() {
{!hasStream ? (
<section className="mt-6">
<h2 className="admin-section-title">{t("embedPage.noStreamUrl")}</h2>
<p className="text-xs text-gray-500 dark:text-gray-400">{t("embedPage.noStreamUrlText")}</p>
<p className="text-xs theme-text-muted dark:theme-text-muted">{t("embedPage.noStreamUrlText")}</p>
<p>
<Link href="/admin/radio/settings" className="btn btn-primary">
{t("embedPage.goToSettings")}
@@ -94,14 +94,14 @@ export default async function AdminRadioEmbedPage() {
<>
<section className="mt-6">
<h2 className="admin-section-title">{t("embedPage.livePreview")}</h2>
<p className="text-xs text-gray-500 dark:text-gray-400">{t("embedPage.livePreviewText")}</p>
<p className="text-xs theme-text-muted dark:theme-text-muted">{t("embedPage.livePreviewText")}</p>
<div className="admin-card">
{}
<audio controls preload="none" src={streamUrl} style={{ width: "100%" }}>
{t("embedPage.audioUnsupported")}
</audio>
<p
className="text-xs text-gray-500 dark:text-gray-400"
className="text-xs theme-text-muted dark:theme-text-muted"
style={{ margin: "0.5rem 0 0", wordBreak: "break-all" }}
>
{t("embedPage.source")}: <code>{streamUrl}</code>
src/app/admin/radio/history/page.tsx
+7 -7
View File
@@ -73,7 +73,7 @@ export default async function AdminRadioHistoryPage() {
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
@@ -93,7 +93,7 @@ export default async function AdminRadioHistoryPage() {
{dbError ? (
<div className="admin-card mb-6">
<p className="text-xs text-gray-500 dark:text-gray-400 m-0">{t("historyPage.dbError")}</p>
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("historyPage.dbError")}</p>
</div>
) : (
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
@@ -133,25 +133,25 @@ export default async function AdminRadioHistoryPage() {
<td>{String(h.id)}</td>
<td>{names.get(String(h.userId)) ?? `#${String(h.userId)}`}</td>
<td>{h.showName ?? "\u2014"}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{formatDate(h.startedAt)}
</td>
<td>
{h.endedAt ? (
<span className="text-sm text-gray-500 dark:text-gray-400">
<span className="text-sm theme-text-muted dark:theme-text-muted">
{formatDate(h.endedAt)}
</span>
) : (
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-success-subtle)] text-[var(--color-text)]">
{t("historyPage.onAir")}
</span>
)}
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{formatDuration(h.startedAt, h.endedAt)}
</td>
<td>{h.listenersCount}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{h.notes ?? "\u2014"}
</td>
</tr>
src/app/admin/radio/moderation/page.tsx
+2 -2
View File
@@ -41,7 +41,7 @@ export default async function AdminRadioModerationPage() {
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
<Link href="/admin/radio/moderation">{t("moderation")}</Link> ·{" "}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
@@ -85,7 +85,7 @@ export default async function AdminRadioModerationPage() {
<td>{String(s.id)}</td>
<td>{String(s.userId)}</td>
<td>{s.message}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{formatDate(s.createdAt)}
</td>
<td>
src/app/admin/radio/monitoring/page.tsx
+2 -2
View File
@@ -194,7 +194,7 @@ export default async function AdminRadioMonitoringPage() {
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
<Link href="/admin/radio/monitoring">{t("monitoring.title")}</Link> ·{" "}
@@ -249,7 +249,7 @@ export default async function AdminRadioMonitoringPage() {
<section className="mt-6">
<h2 className="admin-section-title">{t("monitoring.endpointDiagnostics")}</h2>
<p className="text-xs text-gray-500 dark:text-gray-400">{t("monitoring.diagnosticsLegend")}</p>
<p className="text-xs theme-text-muted dark:theme-text-muted">{t("monitoring.diagnosticsLegend")}</p>
<div className="flex flex-col">
{endpoints.map((ep) => {
let state: "ok" | "warn" | "danger";
src/app/admin/radio/page.tsx
+10 -10
View File
@@ -108,7 +108,7 @@ export default async function AdminRadioPage() {
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
@@ -117,7 +117,7 @@ export default async function AdminRadioPage() {
</nav>
<h1>{t("title")}</h1>
<p className="text-xs text-gray-500 dark:text-gray-400">{t("subtitle")}</p>
<p className="text-xs theme-text-muted dark:theme-text-muted">{t("subtitle")}</p>
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label={t("shouts")} value={shouts.length} icon="\u{1F4E3}" />
@@ -141,7 +141,7 @@ export default async function AdminRadioPage() {
{t("shouts")} ({shouts.length})
</h2>
{shouts.length === 0 ? (
<p className="text-xs text-gray-500 dark:text-gray-400">{t("noShouts")}</p>
<p className="text-xs theme-text-muted dark:theme-text-muted">{t("noShouts")}</p>
) : (
<table>
<thead>
@@ -156,12 +156,12 @@ export default async function AdminRadioPage() {
<tbody>
{shouts.map((s) => (
<tr key={String(s.id)}>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{String(s.id)}
</td>
<td>{String(s.userId)}</td>
<td>{s.message}</td>
<td className="text-sm text-gray-500 dark:text-gray-400">{formatDate(s.createdAt)}</td>
<td className="text-sm theme-text-muted dark:theme-text-muted">{formatDate(s.createdAt)}</td>
<td>
<form action={deleteShout}>
<input type="hidden" name="id" value={String(s.id)} />
@@ -182,7 +182,7 @@ export default async function AdminRadioPage() {
{t("applications")} ({applications.length})
</h2>
{applications.length === 0 ? (
<p className="text-xs text-gray-500 dark:text-gray-400">{t("noApplications")}</p>
<p className="text-xs theme-text-muted dark:theme-text-muted">{t("noApplications")}</p>
) : (
<table>
<thead>
@@ -208,12 +208,12 @@ export default async function AdminRadioPage() {
<td>{a.discordUsername ?? "\u2014"}</td>
<td>
<span
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${statusBadgeClass(a.status) === "ok" ? "bg-green-600/20 text-[var(--color-text)]" : statusBadgeClass(a.status) === "danger" ? "bg-red-500/22 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${statusBadgeClass(a.status) === "ok" ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : statusBadgeClass(a.status) === "danger" ? "bg-[var(--color-error-subtle)] text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
>
{a.status}
</span>
</td>
<td className="text-sm text-gray-500 dark:text-gray-400">{formatDate(a.createdAt)}</td>
<td className="text-sm theme-text-muted dark:theme-text-muted">{formatDate(a.createdAt)}</td>
</tr>
))}
</tbody>
@@ -226,7 +226,7 @@ export default async function AdminRadioPage() {
{t("schedules")} ({schedules.length})
</h2>
{schedules.length === 0 ? (
<p className="text-xs text-gray-500 dark:text-gray-400">{t("noSchedules")}</p>
<p className="text-xs theme-text-muted dark:theme-text-muted">{t("noSchedules")}</p>
) : (
<table>
<thead>
@@ -251,7 +251,7 @@ export default async function AdminRadioPage() {
<td>{sc.showName ?? "\u2014"}</td>
<td>
<span
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${sc.isActive ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${sc.isActive ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
>
{sc.isActive ? t("active") : t("inactive")}
</span>
src/app/admin/radio/points/page.tsx
+7 -7
View File
@@ -57,7 +57,7 @@ export default async function AdminRadioPointsPage({
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
<Link href="/admin/radio/points">{t("points")}</Link> ·{" "}
@@ -79,7 +79,7 @@ export default async function AdminRadioPointsPage({
{saved === "1" ? (
<p>
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-success-subtle)] text-[var(--color-text)]">
{t("pointsForm.saved")}
</span>
</p>
@@ -124,7 +124,7 @@ export default async function AdminRadioPointsPage({
<option value="1">{t("pointsForm.enabled")}</option>
<option value="0">{t("pointsForm.disabled")}</option>
</select>
<p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
<p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
{t("pointsForm.pointsEnabledHint")}
</p>
</div>
@@ -145,7 +145,7 @@ export default async function AdminRadioPointsPage({
</option>
))}
</select>
<p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
<p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
{t("pointsForm.currencyHint")}
</p>
</div>
@@ -163,7 +163,7 @@ export default async function AdminRadioPointsPage({
defaultValue={perMinute}
style={{ width: "100%" }}
/>
<p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
<p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
{t("pointsForm.pointsPerMinuteHint")}
</p>
</div>
@@ -181,7 +181,7 @@ export default async function AdminRadioPointsPage({
defaultValue={maxPerDay}
style={{ width: "100%" }}
/>
<p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
<p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
{t("pointsForm.maxPerDayHint")}
</p>
</div>
@@ -199,7 +199,7 @@ export default async function AdminRadioPointsPage({
defaultValue={minListeners}
style={{ width: "100%" }}
/>
<p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
<p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
{t("pointsForm.minListenersHint")}
</p>
</div>
src/app/admin/radio/ranks/page.tsx
+3 -3
View File
@@ -41,7 +41,7 @@ export default async function AdminRadioRanksPage() {
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
@@ -61,7 +61,7 @@ export default async function AdminRadioRanksPage() {
{dbError ? (
<div className="admin-card mb-6">
<p className="text-xs text-gray-500 dark:text-gray-400 m-0">{t("ranksForm.dbError")}</p>
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("ranksForm.dbError")}</p>
</div>
) : (
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
@@ -122,7 +122,7 @@ export default async function AdminRadioRanksPage() {
<div className="flex justify-between items-baseline gap-3 mb-2">
<strong>#{String(r.id)}</strong>
<span
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${r.isActive ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${r.isActive ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
>
{r.isActive ? t("ranksForm.activeLabel") : t("ranksForm.inactiveLabel")}
</span>
src/app/admin/radio/settings/page.tsx
+3 -3
View File
@@ -216,7 +216,7 @@ export default async function AdminRadioSettingsPage() {
return (
<main>
<nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
<nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
<Link href="/admin/radio">{t("title")}</Link> ·{" "}
<Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
<Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
@@ -236,7 +236,7 @@ export default async function AdminRadioSettingsPage() {
{dbError ? (
<div className="admin-card mb-6">
<p className="text-xs text-gray-500 dark:text-gray-400 m-0">{t("settingsForm.dbError")}</p>
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("settingsForm.dbError")}</p>
</div>
) : (
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
@@ -289,7 +289,7 @@ export default async function AdminRadioSettingsPage() {
style={{ width: "100%" }}
/>
{field.comment ? (
<p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
<p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
{field.comment}
</p>
) : null}
src/app/admin/rare-values/page.tsx
+4 -4
View File
@@ -95,7 +95,7 @@ export default async function AdminRareValues() {
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">
{t("priorityLabel", { priority: cat.priority })}
</span>
<span className="text-sm text-gray-500 dark:text-gray-400">
<span className="text-sm theme-text-muted dark:theme-text-muted">
{t("itemCount", { count: rows.length })}
</span>
</div>
@@ -123,7 +123,7 @@ export default async function AdminRareValues() {
{rows.map((v) => (
<tr key={String(v.id)}>
<td>{v.name}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{v.itemId ?? "—"}
</td>
<td>{v.creditValue ?? "—"}</td>
@@ -133,7 +133,7 @@ export default async function AdminRareValues() {
{v.currencyType}
</span>
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{v.furnitureIcon}
</td>
<td>
@@ -149,7 +149,7 @@ export default async function AdminRareValues() {
</tbody>
</table>
{rows.length === 0 ? (
<p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.5rem 0 0" }}>
<p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.5rem 0 0" }}>
{t("noValuesInCategory")}
</p>
) : null}
src/app/admin/rooms/rooms-table.tsx
+1 -1
View File
@@ -78,7 +78,7 @@ function getColumns(canEdit: boolean): DataTableColumn<RoomRow>[] {
sortable: true,
render: (_, row) => (
<span className="flex items-center gap-1.5 text-sm">
{row.users > 0 && <Wifi className="h-3 w-3 text-green-500" />}
{row.users > 0 && <Wifi className="h-3 w-3 text-[var(--color-success-text-readable)]" />}
<span className={row.users > 0 ? 'font-medium' : 'text-muted-foreground'}>
{row.users}
</span>
src/app/admin/shop/page.tsx
+1 -1
View File
@@ -144,7 +144,7 @@ export default async function AdminShop() {
<td>
{o.status ? (
<span
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${state === "ok" ? "bg-green-600/20 text-[var(--color-text)]" : state === "danger" ? "bg-red-500/22 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${state === "ok" ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : state === "danger" ? "bg-[var(--color-error-subtle)] text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
>
{o.status}
</span>
src/app/admin/subscriptions/page.tsx
+3 -3
View File
@@ -88,17 +88,17 @@ export default async function AdminSubscriptions() {
const soon = s.expiresAt <= soonCutoff;
return (
<tr key={s.id}>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{s.id}</td>
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">{s.id}</td>
<td>{s.userId ?? "—"}</td>
<td>{s.subscriptionType ?? "—"}</td>
<td>
<span
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${soon ? "bg-[var(--color-primary)]/18 text-[var(--color-text)]" : "bg-green-600/20 text-[var(--color-text)]"}`}
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${soon ? "bg-[var(--color-primary)]/18 text-[var(--color-text)]" : "bg-[var(--color-success-subtle)] text-[var(--color-text)]"}`}
>
{soon ? t("statusExpiring") : t("statusActive")}
</span>
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{fmt(s.expiresAt)}
</td>
</tr>
src/app/admin/tags/page.tsx
+5 -5
View File
@@ -58,7 +58,7 @@ export default async function AdminTagsPage() {
{dbError ? (
<div className="admin-card" style={{ marginBottom: "1.5rem" }}>
<p className="text-xs text-gray-500 dark:text-gray-400 m-0">{t("databaseError")}</p>
<p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("databaseError")}</p>
</div>
) : (
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
@@ -130,7 +130,7 @@ export default async function AdminTagsPage() {
<tbody>
{tags.map((tag) => (
<tr key={String(tag.id)}>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{String(tag.id)}
</td>
<td>
@@ -146,21 +146,21 @@ export default async function AdminTagsPage() {
{tag.name}
</span>
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
<code>{tag.backgroundColor}</code>
</td>
<td>
<span
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${
(usage.get(String(tag.id)) ?? 0) > 0
? "bg-green-600/20 text-[var(--color-text)]"
? "bg-[var(--color-success-subtle)] text-[var(--color-text)]"
: "bg-[var(--color-primary)]/18 text-[var(--color-text)]"
}`}
>
{usage.get(String(tag.id)) ?? 0}
</span>
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{formatDate(tag.createdAt)}
</td>
<td>
src/app/admin/teams/page.tsx
+9 -9
View File
@@ -64,25 +64,25 @@ export default async function AdminTeams() {
<form action={createTeam} style={{ display: "grid", gap: "0.6rem" }}>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<label style={{ display: "grid", gap: "0.25rem" }}>
<span className="text-sm text-gray-500 dark:text-gray-400">{t("rankName")}</span>
<span className="text-sm theme-text-muted dark:theme-text-muted">{t("rankName")}</span>
<input name="rankName" placeholder={t("rankNamePlaceholder")} required />
</label>
<label style={{ display: "grid", gap: "0.25rem" }}>
<span className="text-sm text-gray-500 dark:text-gray-400">{t("badgeCode")}</span>
<span className="text-sm theme-text-muted dark:theme-text-muted">{t("badgeCode")}</span>
<input name="badge" placeholder={t("badgeCodePlaceholder")} />
</label>
<label style={{ display: "grid", gap: "0.25rem" }}>
<span className="text-sm text-gray-500 dark:text-gray-400">{t("jobDescription")}</span>
<span className="text-sm theme-text-muted dark:theme-text-muted">{t("jobDescription")}</span>
<input name="jobDescription" placeholder={t("jobDescriptionPlaceholder")} />
</label>
<label style={{ display: "grid", gap: "0.25rem" }}>
<span className="text-sm text-gray-500 dark:text-gray-400">{t("staffColor")}</span>
<span className="text-sm theme-text-muted dark:theme-text-muted">{t("staffColor")}</span>
<input name="staffColor" defaultValue="#327fa8" placeholder={t("staffColorPlaceholder")} />
</label>
</div>
<label style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}>
<input type="checkbox" name="hiddenRank" style={{ width: "auto" }} />
<span className="text-sm text-gray-500 dark:text-gray-400">{t("hiddenRank")}</span>
<span className="text-sm theme-text-muted dark:theme-text-muted">{t("hiddenRank")}</span>
</label>
<div>
<button type="submit" className="btn btn-primary">
@@ -113,14 +113,14 @@ export default async function AdminTeams() {
<tbody>
{teams.map((team) => (
<tr key={String(team.id)}>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{String(team.id)}
</td>
<td>{team.rankName}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{team.badge ?? "—"}
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{team.jobDescription ?? "—"}
</td>
<td>
@@ -146,7 +146,7 @@ export default async function AdminTeams() {
</td>
<td>
<span
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${team.hiddenRank ? "bg-[var(--color-primary)]/18 text-[var(--color-text)]" : "bg-green-600/20 text-[var(--color-text)]"}`}
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${team.hiddenRank ? "bg-[var(--color-primary)]/18 text-[var(--color-text)]" : "bg-[var(--color-success-subtle)] text-[var(--color-text)]"}`}
>
{team.hiddenRank ? t("hidden") : t("visible")}
</span>
src/app/admin/theme/page.tsx
+2 -2
View File
@@ -124,12 +124,12 @@ export default async function AdminTheme({
</div>
{sp.saved ? (
<div className="mb-4 p-3 rounded-lg bg-green-600/10 text-green-600 dark:text-green-400 text-xs">
<div className="mb-4 p-3 rounded-lg theme-status-success text-xs">
{t("saved")}
</div>
) : null}
{sp.preset ? (
<div className="mb-4 p-3 rounded-lg bg-green-600/10 text-green-600 dark:text-green-400 text-xs">
<div className="mb-4 p-3 rounded-lg theme-status-success text-xs">
{t("presetApplied", { preset: sp.preset })}
</div>
) : null}
src/app/admin/tickets/[id]/admin-ticket-detail.tsx
+6 -6
View File
@@ -57,17 +57,17 @@ interface StaffMember {
}
const STATUS_COLORS: Record<string, string> = {
open: 'bg-blue-500/10 text-blue-500',
in_progress: 'bg-yellow-500/10 text-yellow-500',
waiting: 'bg-orange-500/10 text-orange-500',
open: 'bg-[var(--color-info-subtle)] text-[var(--color-info-text-readable)]',
in_progress: 'bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)]',
waiting: 'bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)]',
closed: 'bg-muted text-muted-foreground',
}
const PRIORITY_COLORS: Record<string, string> = {
low: 'text-muted-foreground',
normal: 'text-blue-500',
high: 'text-orange-500',
urgent: 'text-red-500',
normal: 'text-[var(--color-info-text-readable)]',
high: 'text-[var(--color-warning-text-readable)]',
urgent: 'text-[var(--color-error-text-readable)]',
}
export function AdminTicketDetail({
src/app/admin/tickets/page.tsx
+9 -9
View File
@@ -7,17 +7,17 @@ import { canAccess, getAdminContext, PERMS } from '@/lib/permissions'
import { prisma } from '@/lib/prisma'
const STATUS_CONFIG = {
open: { label: 'Open', icon: AlertCircle, class: 'bg-blue-500/10 text-blue-500' },
in_progress: { label: 'In Progress', icon: Loader2, class: 'bg-yellow-500/10 text-yellow-500' },
waiting: { label: 'Waiting', icon: Clock, class: 'bg-orange-500/10 text-orange-500' },
open: { label: 'Open', icon: AlertCircle, class: 'bg-[var(--color-info-subtle)] text-[var(--color-info-text-readable)]' },
in_progress: { label: 'In Progress', icon: Loader2, class: 'bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)]' },
waiting: { label: 'Waiting', icon: Clock, class: 'bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)]' },
closed: { label: 'Closed', icon: CheckCircle2, class: 'bg-muted text-muted-foreground' },
} as const
const PRIORITY_COLORS = {
low: '',
normal: 'text-blue-500',
high: 'text-orange-500',
urgent: 'text-red-500 font-bold',
normal: 'text-[var(--color-info-text-readable)]',
high: 'text-[var(--color-warning-text-readable)]',
urgent: 'text-[var(--color-error-text-readable)] font-bold',
}
interface PageProps {
@@ -77,7 +77,7 @@ export default async function AdminTicketsPage({ searchParams }: PageProps) {
<div className="grid gap-4 grid-cols-2 lg:grid-cols-4">
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium text-blue-500">Open</CardTitle>
<CardTitle className="text-sm font-medium text-[var(--color-info-text-readable)]">Open</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{openCount}</div>
@@ -85,7 +85,7 @@ export default async function AdminTicketsPage({ searchParams }: PageProps) {
</Card>
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium text-yellow-500">In Progress</CardTitle>
<CardTitle className="text-sm font-medium text-[var(--color-warning-text-readable)]">In Progress</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{inProgressCount}</div>
@@ -93,7 +93,7 @@ export default async function AdminTicketsPage({ searchParams }: PageProps) {
</Card>
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium text-orange-500">Waiting</CardTitle>
<CardTitle className="text-sm font-medium text-[var(--color-warning-text-readable)]">Waiting</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{waitingCount}</div>
src/app/admin/transactions/page.tsx
+6 -6
View File
@@ -130,7 +130,7 @@ export default async function AdminTransactions({
const state = statusState(x.status);
return (
<tr key={String(x.id)}>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{String(x.id)}
</td>
<td>
@@ -141,18 +141,18 @@ export default async function AdminTransactions({
<td>
{x.status ? (
<span
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${state === "ok" ? "bg-green-600/20 text-[var(--color-text)]" : state === "danger" ? "bg-red-500/22 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${state === "ok" ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : state === "danger" ? "bg-[var(--color-error-subtle)] text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
>
{x.status}
</span>
) : (
<span className="text-sm text-gray-500 dark:text-gray-400">—</span>
<span className="text-sm theme-text-muted dark:theme-text-muted">—</span>
)}
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{x.transactionId}
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{fromDate(x.createdAt)}
</td>
</tr>
@@ -164,7 +164,7 @@ export default async function AdminTransactions({
)}
</section>
<p className="text-xs text-gray-500 dark:text-gray-400">
<p className="text-xs theme-text-muted dark:theme-text-muted">
{t("pagination", { page, pages, total })}
{page > 1 ? (
<>
src/app/admin/translations/client/client-translations.tsx
+2 -2
View File
@@ -170,7 +170,7 @@ export function ClientTranslations({ files, activeFile, entries, parseError }: P
)}
{activeFile.readOnly && (
<div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-700 dark:text-amber-400 flex items-start gap-2">
<div className="rounded-md border border-[var(--color-warning-border)] bg-[var(--color-warning-subtle)] px-3 py-2 text-xs text-[var(--color-warning-text-readable)] dark:text-[var(--color-warning-text-readable)] flex items-start gap-2">
<Lock className="w-4 h-4 flex-shrink-0 mt-0.5" />
<div>
Questo file è di sola lettura.{' '}
@@ -180,7 +180,7 @@ export function ClientTranslations({ files, activeFile, entries, parseError }: P
)}
{activeFile.hasComments && !activeFile.readOnly && (
<div className="rounded-md border border-blue-500/30 bg-blue-500/10 px-3 py-2 text-xs text-blue-700 dark:text-blue-400 flex items-start gap-2">
<div className="rounded-md border border-[var(--color-info-border)] bg-[var(--color-info-subtle)] px-3 py-2 text-xs text-[var(--color-info-text-readable)] dark:text-[var(--color-info-text-readable)] flex items-start gap-2">
<Info className="w-4 h-4 flex-shrink-0 mt-0.5" />
<div>
I commenti vengono preservati: il salvataggio modifica solo le righe dei valori
src/app/admin/users/[id]/edit/page.tsx
+4 -4
View File
@@ -63,11 +63,11 @@ export default async function AdminUserEdit({ params }: { params: Promise<{ id:
} catch {
return (
<main>
<p className="text-sm text-gray-500 dark:text-gray-400">
<p className="text-sm theme-text-muted dark:theme-text-muted">
<Link href="/admin/users">← {t("title")}</Link>
</p>
<h1>{t("title")}</h1>
<p className="text-xs text-gray-500 dark:text-gray-400">{t("loadError")}</p>
<p className="text-xs theme-text-muted dark:theme-text-muted">{t("loadError")}</p>
</main>
);
}
@@ -76,7 +76,7 @@ export default async function AdminUserEdit({ params }: { params: Promise<{ id:
return (
<main>
<p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
<p className="text-sm theme-text-muted dark:theme-text-muted mb-2">
<Link href={`/admin/users/${user.id}`}>← {user.username}</Link>
</p>
<div className="flex items-center gap-3 mb-6">
@@ -141,7 +141,7 @@ export default async function AdminUserEdit({ params }: { params: Promise<{ id:
</label>
</div>
<p className="text-xs text-gray-500 dark:text-gray-400">{t("hint")}</p>
<p className="text-xs theme-text-muted dark:theme-text-muted">{t("hint")}</p>
<div className="flex gap-2 mt-2">
<button type="submit" className="btn btn-primary">
src/app/admin/users/[id]/user-quick-actions.tsx
+2 -2
View File
@@ -127,7 +127,7 @@ export function UserQuickActions({ userId, username, isOnline }: UserQuickAction
<Unplug className="mr-2 h-4 w-4" />
Disconnect
{isOnline && (
<Badge variant="default" className="ml-auto text-[10px] bg-green-600">
<Badge variant="default" className="ml-auto text-[10px] bg-[var(--color-success-subtle)]">
Online
</Badge>
)}
@@ -209,7 +209,7 @@ export function UserQuickActions({ userId, username, isOnline }: UserQuickAction
{newPassword}
</code>
<Button variant="ghost" size="icon" onClick={copyPassword}>
{copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
{copied ? <Check className="h-4 w-4 text-[var(--color-success-text-readable)]" /> : <Copy className="h-4 w-4" />}
</Button>
</div>
</DialogContent>
src/app/admin/users/_components/user-hero.tsx
+6 -6
View File
@@ -82,10 +82,10 @@ export function UserHero({
className={`absolute -top-1 -right-1 flex h-4 w-4 ${isOnline ? '' : 'opacity-50'}`}
>
{isOnline && (
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-success)] opacity-75" />
)}
<span
className={`relative inline-flex rounded-full h-4 w-4 border-2 border-card ${isOnline ? 'bg-green-500' : 'bg-zinc-400'}`}
className={`relative inline-flex rounded-full h-4 w-4 border-2 border-card ${isOnline ? 'bg-[var(--color-success-subtle)]' : 'bg-zinc-400'}`}
/>
</span>
</div>
@@ -129,7 +129,7 @@ export function UserHero({
<Badge>{user.permission.rankName || `Rank ${user.rank}`}</Badge>
<Badge
variant={isOnline ? 'default' : 'outline'}
className={isOnline ? 'bg-green-600' : ''}
className={isOnline ? 'bg-[var(--color-success-subtle)]' : ''}
>
{isOnline ? (
<>
@@ -143,7 +143,7 @@ export function UserHero({
</Badge>
{activeBan && <Badge variant="destructive">Banned</Badge>}
{user.twoFactorConfirmed ? (
<Badge variant="outline" className="border-green-500/50 text-green-600">
<Badge variant="outline" className="border-[var(--color-success-border)] text-[var(--color-success-text-readable)]">
<Shield className="mr-1 h-3 w-3" /> 2FA
</Badge>
) : null}
@@ -152,12 +152,12 @@ export function UserHero({
{/* Currency row */}
<div className="flex flex-wrap gap-3 pt-1">
<div className="flex items-center gap-1.5 text-sm">
<Coins className="h-4 w-4 text-yellow-500" />
<Coins className="h-4 w-4 text-[var(--color-warning-text-readable)]" />
<span className="font-semibold">{user.credits.toLocaleString()}</span>
<span className="text-muted-foreground text-xs">credits</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
<Diamond className="h-4 w-4 text-blue-400" />
<Diamond className="h-4 w-4 text-[var(--color-info-text-readable)]" />
<span className="font-semibold">{diamonds.toLocaleString()}</span>
<span className="text-muted-foreground text-xs">diamonds</span>
</div>
src/app/admin/users/multi-accounts/page.tsx
+1 -1
View File
@@ -93,7 +93,7 @@ export default async function MultiAccountsPage({
<span className="text-xs text-muted-foreground">#{acc.id}</span>
{acc.rank >= 5 && <Badge variant="outline">staff</Badge>}
{acc.online === '1' && (
<span className="h-1.5 w-1.5 rounded-full bg-green-500" />
<span className="h-1.5 w-1.5 rounded-full bg-[var(--color-success-subtle)]" />
)}
</Link>
))}
src/app/admin/users/users-table.tsx
+1 -1
View File
@@ -122,7 +122,7 @@ function getColumns(canEdit: boolean): DataTableColumn<UserRow>[] {
],
render: (value) =>
value === '1' ? (
<span className="flex items-center gap-1.5 text-green-600">
<span className="flex items-center gap-1.5 text-[var(--color-success-text-readable)]">
<Wifi className="h-3.5 w-3.5" /> Online
</span>
) : (
src/app/admin/vouchers/page.tsx
+8 -8
View File
@@ -85,19 +85,19 @@ export default async function AdminVouchers() {
<h3 style={{ marginTop: 0 }}>{t("newVoucher")}</h3>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2" style={{ marginBottom: "0.75rem" }}>
<label style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
<span className="text-sm text-gray-500 dark:text-gray-400">{t("form.code")}</span>
<span className="text-sm theme-text-muted dark:theme-text-muted">{t("form.code")}</span>
<input name="code" placeholder={t("form.codePlaceholder")} maxLength={255} required />
</label>
<label style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
<span className="text-sm text-gray-500 dark:text-gray-400">{t("form.amount")}</span>
<span className="text-sm theme-text-muted dark:theme-text-muted">{t("form.amount")}</span>
<input name="amount" type="number" min={1} placeholder={t("form.amountPlaceholder")} required />
</label>
<label style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
<span className="text-sm text-gray-500 dark:text-gray-400">{t("form.maxUses")}</span>
<span className="text-sm theme-text-muted dark:theme-text-muted">{t("form.maxUses")}</span>
<input name="maxUses" type="number" min={1} defaultValue={1} required />
</label>
<label style={{ display: "flex", flexDirection: "column", gap: "0.3rem" }}>
<span className="text-sm text-gray-500 dark:text-gray-400">{t("form.expiresAt")}</span>
<span className="text-sm theme-text-muted dark:theme-text-muted">{t("form.expiresAt")}</span>
<input name="expiresAt" type="datetime-local" />
</label>
</div>
@@ -138,7 +138,7 @@ export default async function AdminVouchers() {
</td>
<td>
{expired ? (
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-red-500/22 text-[var(--color-text)]">
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-error-subtle)] text-[var(--color-text)]">
{t("statusExpired")}
</span>
) : usedUp ? (
@@ -146,15 +146,15 @@ export default async function AdminVouchers() {
{t("statusUsedUp")}
</span>
) : (
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-success-subtle)] text-[var(--color-text)]">
{t("statusActive")}
</span>
)}
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{fmtDate(v.expiresAt)}
</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{fmtDate(v.createdAt)}
</td>
<td>
src/app/admin/vpn/page.tsx
+5 -5
View File
@@ -42,7 +42,7 @@ export default async function AdminVpn({ searchParams }: { searchParams: Promise
<section className="mt-6">
{sp.saved ? (
<p className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">
<p className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-success-subtle)] text-[var(--color-text)]">
{t("settingsSaved")}
</p>
) : null}
@@ -83,7 +83,7 @@ export default async function AdminVpn({ searchParams }: { searchParams: Promise
</option>
))}
</select>
<p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
<p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
{t("providerHint")}
</p>
</div>
@@ -100,7 +100,7 @@ export default async function AdminVpn({ searchParams }: { searchParams: Promise
placeholder={t("apiKeyPlaceholder")}
style={{ width: "100%" }}
/>
<p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
<p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
{t("apiKeyHint")}
</p>
</div>
@@ -120,7 +120,7 @@ export default async function AdminVpn({ searchParams }: { searchParams: Promise
placeholder={t("blockMessagePlaceholder")}
style={{ width: "100%" }}
/>
<p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
<p className="text-xs theme-text-muted dark:theme-text-muted" style={{ margin: "0.2rem 0 0" }}>
{t("blockMessageHint")}
</p>
</div>
@@ -135,7 +135,7 @@ export default async function AdminVpn({ searchParams }: { searchParams: Promise
<section className="mt-6">
<h2 className="admin-section-title">{t("rawIpTitle")}</h2>
<p className="text-xs text-gray-500 dark:text-gray-400">
<p className="text-xs theme-text-muted dark:theme-text-muted">
{t.rich("rawIpDescription", { ipLink: (chunks) => <Link href="/admin/ip">{chunks}</Link> })}
</p>
<Link href="/admin/ip" className="btn btn-secondary">
src/app/admin/wordfilter/page.tsx
+1 -1
View File
@@ -78,7 +78,7 @@ export default async function AdminWordFilter() {
<tbody>
{words.map((w) => (
<tr key={String(w.id)}>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
{String(w.id)}
</td>
<td>
src/app/admin/writeable-boxes/page.tsx
+2 -2
View File
@@ -114,11 +114,11 @@ export default async function AdminWriteableBoxes() {
marginBottom: "0.75rem",
}}
>
<span className="text-sm text-gray-500 dark:text-gray-400">#{String(box.id)}</span>
<span className="text-sm theme-text-muted dark:theme-text-muted">#{String(box.id)}</span>
{box.icon ? <span aria-hidden>{box.icon}</span> : null}
<strong className="flex-1">{box.title}</strong>
<span
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${box.isActive ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${box.isActive ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
>
{box.isActive ? t("active") : t("hidden")}
</span>
src/app/globals.css
+17
View File
@@ -117,6 +117,23 @@ body {
-moz-osx-font-smoothing: grayscale;
}
/* Semantic colors: safe across every complete light/dark preset. */
.theme-text-muted { color: var(--color-text-muted-readable); }
.theme-text-subtle { color: var(--color-text-subtle-readable); }
.theme-text-disabled { color: var(--color-text-disabled-readable); }
.theme-status-success,
.theme-status-warning,
.theme-status-error,
.theme-status-info {
border: 1px solid var(--status-border);
background: var(--status-background);
color: var(--status-text);
}
.theme-status-success { --status-border: var(--color-success-border); --status-background: var(--color-success-subtle); --status-text: var(--color-success-text-readable); }
.theme-status-warning { --status-border: var(--color-warning-border); --status-background: var(--color-warning-subtle); --status-text: var(--color-warning-text-readable); }
.theme-status-error { --status-border: var(--color-error-border); --status-background: var(--color-error-subtle); --status-text: var(--color-error-text-readable); }
.theme-status-info { --status-border: var(--color-info-border); --status-background: var(--color-info-subtle); --status-text: var(--color-info-text-readable); }
::-webkit-scrollbar-thumb {
border-radius: 100px;
border: 4px solid transparent;
src/components/admin/admin-nav-link.tsx
+3 -3
View File
@@ -27,12 +27,12 @@ export function AdminNavLink({
href={href}
className={`flex items-center gap-2.5 px-2.5 py-2 rounded-xl text-sm font-medium no-underline transition-all duration-150 ${
active
? "bg-gradient-to-r from-[var(--color-primary)]/20 to-transparent text-white shadow-sm border-l-2 border-[var(--color-primary)]"
: "text-[#8b8fa8] hover:text-white hover:bg-white/[0.04] hover:no-underline"
? "bg-[var(--color-primary)]/15 text-[var(--admin-sidebar-text-readable)] shadow-sm border-l-2 border-[var(--color-primary)]"
: "text-[var(--admin-sidebar-muted-readable)] hover:text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--color-primary)]/10 hover:no-underline"
}`}
>
{icon ? (
<span className={`flex-none ${active ? "text-[var(--color-primary)]" : "text-[#5c5f7a]"}`}>
<span className={`flex-none ${active ? "text-[var(--color-primary-readable)]" : "text-[var(--admin-sidebar-muted-readable)]"}`}>
{icon}
</span>
) : null}
src/components/admin/catalog-manager/inline-editor.tsx
+4 -4
View File
@@ -287,7 +287,7 @@ export function InlineEditor({ pageId, onSaved }: InlineEditorProps) {
{isDirty && (
<Badge
variant="outline"
className="h-4 px-1.5 text-[9px] text-orange-600 border-orange-300 bg-orange-50 dark:bg-orange-950/30 dark:border-orange-700"
className="h-4 px-1.5 text-[9px] text-[var(--color-warning-text-readable)] border-[var(--color-warning-border)] bg-[var(--color-warning-subtle)]"
>
<AlertCircle className="h-2.5 w-2.5 mr-0.5" />
unsaved
@@ -310,7 +310,7 @@ export function InlineEditor({ pageId, onSaved }: InlineEditorProps) {
{/* Dirty banner */}
{isDirty && (
<div className="flex items-center gap-2 px-4 py-1.5 bg-yellow-50 dark:bg-yellow-950/30 border-b border-yellow-200 dark:border-yellow-800 text-xs text-yellow-800 dark:text-yellow-200 shrink-0">
<div className="flex items-center gap-2 px-4 py-1.5 bg-[var(--color-warning-subtle)] border-b border-[var(--color-warning-border)] text-xs text-[var(--color-warning-text-readable)] shrink-0">
<AlertCircle className="h-3.5 w-3.5 shrink-0" />
<span className="flex-1">
Unsaved changes — press{' '}
@@ -340,7 +340,7 @@ export function InlineEditor({ pageId, onSaved }: InlineEditorProps) {
<TabsTrigger value="settings" className="gap-1.5 text-xs">
<Settings className="h-3.5 w-3.5" />
Settings
{isDirty && <span className="ml-0.5 h-1.5 w-1.5 rounded-full bg-orange-500" />}
{isDirty && <span className="ml-0.5 h-1.5 w-1.5 rounded-full bg-[var(--color-warning)]" />}
</TabsTrigger>
<TabsTrigger value="items" className="gap-1.5 text-xs">
<Package className="h-3.5 w-3.5" />
@@ -359,7 +359,7 @@ export function InlineEditor({ pageId, onSaved }: InlineEditorProps) {
const furniSet = new Set(itemsData.furniDataIdList)
const missing = itemsData.baseItems.filter((b) => !furniSet.has(b.id)).length
return missing > 0 ? (
<span className="ml-0.5 rounded-full bg-orange-500 text-white text-[9px] px-1 py-0.5 leading-none font-medium">
<span className="ml-0.5 rounded-full bg-[var(--color-warning)] text-[var(--color-warning-foreground-readable)] text-[9px] px-1 py-0.5 leading-none font-medium">
{missing}
</span>
) : null
src/components/admin/catalog-tree.tsx
+12 -12
View File
@@ -109,17 +109,17 @@ export function CatalogIcon({ iconImage, size = 20 }: { iconImage: number; size?
/* ─── Layout label helper ────────────────────────────────── */
export const LAYOUT_COLORS: Record<string, string> = {
default_3x3: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
frontpage: 'bg-amber-500/15 text-amber-600 dark:text-amber-400',
spaces_new: 'bg-green-500/15 text-green-600 dark:text-green-400',
default_3x3: 'bg-[var(--color-info-subtle)] text-[var(--color-info-text-readable)] dark:text-[var(--color-info-text-readable)]',
frontpage: 'bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] dark:text-[var(--color-warning-text-readable)]',
spaces_new: 'bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]',
pets: 'bg-pink-500/15 text-pink-600 dark:text-pink-400',
pets2: 'bg-pink-500/15 text-pink-600 dark:text-pink-400',
pets3: 'bg-pink-500/15 text-pink-600 dark:text-pink-400',
marketplace: 'bg-purple-500/15 text-purple-600 dark:text-purple-400',
recycler: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
club_buy: 'bg-yellow-500/15 text-yellow-600 dark:text-yellow-400',
single_bundle: 'bg-indigo-500/15 text-indigo-600 dark:text-indigo-400',
room_bundle: 'bg-indigo-500/15 text-indigo-600 dark:text-indigo-400',
recycler: 'bg-[var(--color-success-subtle)] text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]',
club_buy: 'bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] dark:text-[var(--color-warning-text-readable)]',
single_bundle: 'bg-[var(--color-info-subtle)] text-[var(--color-info-text-readable)] dark:text-[var(--color-info-text-readable)]',
room_bundle: 'bg-[var(--color-info-subtle)] text-[var(--color-info-text-readable)] dark:text-[var(--color-info-text-readable)]',
}
/* ─── Highlight matched text ─────────────────────────────── */
@@ -131,7 +131,7 @@ function HighlightText({ text, query }: { text: string; query: string }) {
return (
<>
{text.slice(0, idx)}
<mark className="bg-yellow-200 dark:bg-yellow-800/60 text-inherit rounded-sm px-0.5">
<mark className="bg-[var(--color-warning-subtle)] text-[var(--color-warning-text-readable)] rounded-sm px-0.5">
{text.slice(idx, idx + query.length)}
</mark>
{text.slice(idx + query.length)}
@@ -325,7 +325,7 @@ export function CatalogTree({ rootPages, catalogType = 'normal' }: CatalogTreePr
className={cn(
'px-2 py-1 rounded text-xs font-medium transition-colors flex items-center gap-1',
filterMode === 'enabled'
? 'bg-background shadow-sm text-green-600 dark:text-green-400'
? 'bg-background shadow-sm text-[var(--color-success-text-readable)] dark:text-[var(--color-success-text-readable)]'
: 'text-muted-foreground hover:text-foreground',
)}
>
@@ -345,7 +345,7 @@ export function CatalogTree({ rootPages, catalogType = 'normal' }: CatalogTreePr
className={cn(
'px-2 py-1 rounded text-xs font-medium transition-colors flex items-center gap-1',
filterMode === 'disabled'
? 'bg-background shadow-sm text-red-600 dark:text-red-400'
? 'bg-background shadow-sm text-[var(--color-error-text-readable)] dark:text-[var(--color-error-text-readable)]'
: 'text-muted-foreground hover:text-foreground',
)}
>
@@ -643,8 +643,8 @@ function TreeItem({
className={cn(
'flex items-center justify-center h-5 w-5 shrink-0 rounded opacity-0 group-hover:opacity-100 transition-opacity',
isDisabled
? 'hover:bg-green-500/20 text-muted-foreground hover:text-green-600'
: 'hover:bg-red-500/20 text-muted-foreground hover:text-red-600',
? 'hover:bg-[var(--color-success-subtle)] text-muted-foreground hover:text-[var(--color-success-text-readable)]'
: 'hover:bg-[var(--color-error-subtle)] text-muted-foreground hover:text-[var(--color-error-text-readable)]',
)}
>
{isDisabled ? (
src/components/admin/catalog/bulk-import-items.tsx
+1 -1
View File
@@ -189,7 +189,7 @@ export function BulkImportItems({ pageId, onImported }: BulkImportItemsProps) {
<td className="px-2 py-0.5 font-mono">{row.pointsType ?? '—'}</td>
<td className="px-2 py-0.5">
{row.ok ? (
<span className="text-green-600">OK</span>
<span className="text-[var(--color-success-text-readable)]">OK</span>
) : (
<span className="text-destructive">{row.error}</span>
)}
src/components/admin/catalog/items-shop-preview.tsx
+2 -2
View File
@@ -75,7 +75,7 @@ export function ItemsShopPreview({
{/* Badges overlay */}
<div className="absolute right-1 top-1 flex flex-col gap-0.5">
{isClub && (
<Badge className="h-4 gap-0.5 border-0 bg-yellow-500/90 px-1 text-[8px] text-white">
<Badge className="h-4 gap-0.5 border-0 bg-[var(--color-warning-subtle)] px-1 text-[8px] text-white">
<Crown className="h-2.5 w-2.5" />
HC
</Badge>
@@ -110,7 +110,7 @@ export function ItemsShopPreview({
</p>
<div className="mt-0.5 flex items-center gap-1.5 text-[10px] font-mono">
{item.costCredits > 0 && (
<span className="text-yellow-600 dark:text-yellow-500">
<span className="text-[var(--color-warning-text-readable)] dark:text-[var(--color-warning-text-readable)]">
{item.costCredits}c
</span>
)}
src/components/admin/dashboard.tsx
+7 -7
View File
@@ -61,15 +61,15 @@ export function DiagnosticRow({
const text = state === "ok" ? "OK" : state === "warn" ? "WARN" : "ERROR";
const dotColor =
state === "ok"
? "bg-green-600 shadow-[0_0_0_3px_rgba(22,163,74,0.22)]"
? "bg-[var(--color-success-subtle)] shadow-[0_0_0_3px_rgba(22,163,74,0.22)]"
: state === "warn"
? "bg-[var(--color-primary)] shadow-[0_0_0_3px_rgba(238,180,37,0.22)]"
: "bg-red-500 shadow-[0_0_0_3px_rgba(239,68,68,0.22)]";
: "bg-[var(--color-error-subtle)] shadow-[0_0_0_3px_rgba(239,68,68,0.22)]";
const badgeColor =
state === "ok"
? "bg-green-600/20"
? "bg-[var(--color-success-subtle)]"
: state === "danger"
? "bg-red-500/22"
? "bg-[var(--color-error-subtle)]"
: "bg-[var(--color-primary)]/18";
return (
@@ -144,7 +144,7 @@ export function OnlineUsersWidget({
/>
{user.roomId && user.roomName && (
<div className="absolute -bottom-0.5 -right-0.5">
<span className="block w-[10px] h-[10px] bg-green-500 rounded-full border-2 border-[var(--color-surface)]" />
<span className="block w-[10px] h-[10px] bg-[var(--color-success-subtle)] rounded-full border-2 border-[var(--color-surface)]" />
</div>
)}
</div>
@@ -160,9 +160,9 @@ export function OnlineUsersWidget({
</div>
<div className="text-[0.75rem] text-[var(--color-text-muted)]">
{user.roomId && user.roomName ? (
<span className="text-green-500 font-medium">🏠 {user.roomName}</span>
<span className="text-[var(--color-success-text-readable)] font-medium">🏠 {user.roomName}</span>
) : (
<span className="text-red-500">⏱️ {formatLastSeen(user.lastActivity)}</span>
<span className="text-[var(--color-error-text-readable)]">⏱️ {formatLastSeen(user.lastActivity)}</span>
)}
</div>
</div>
src/components/admin/emulator-settings-form.tsx
+2 -2
View File
@@ -292,7 +292,7 @@ export function EmulatorSettingsForm({
<div
key={setting.key}
className={`flex items-center gap-3 px-3 py-1.5 border-l-4 ${borderColor} ${
isChanged ? 'bg-yellow-50/60 dark:bg-yellow-950/20' : ''
isChanged ? 'bg-[var(--color-warning-subtle)] dark:bg-[var(--color-warning-subtle)]' : ''
}`}
>
<code
@@ -305,7 +305,7 @@ export function EmulatorSettingsForm({
value={display}
onChange={(e) => updateValue(setting.key, e.target.value)}
className={`flex-1 h-8 text-xs font-mono ${
isChanged ? 'border-yellow-500/60' : ''
isChanged ? 'border-[var(--color-warning-border)]' : ''
}`}
/>
{isChanged && (
src/components/admin/media-grid.tsx
+2 -2
View File
@@ -103,9 +103,9 @@ export function AdminMediaGrid() {
)}
{loading ? (
<p className="text-xs text-gray-500 dark:text-gray-400">Loading…</p>
<p className="text-xs theme-text-muted dark:theme-text-muted">Loading…</p>
) : files.length === 0 ? (
<p className="text-xs text-gray-500 dark:text-gray-400">No images yet. Upload one above.</p>
<p className="text-xs theme-text-muted dark:theme-text-muted">No images yet. Upload one above.</p>
) : (
<div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-3">
{files.map((f) => (
src/components/theme-vars.test.ts
+6
View File
@@ -13,5 +13,11 @@ describe("themePaletteCss", () => {
expect(css).toContain(`--color-background:${ocean.light.color_background}`);
expect(css).toContain(`--color-background:${ocean.dark.color_background}`);
expect(ocean.dark.color_primary).toBe(ocean.light.color_primary);
for (const variable of [
"--color-text-subtle-readable", "--color-text-disabled-readable",
"--admin-sidebar-text-readable", "--color-success-text-readable",
"--color-success-foreground-readable", "--color-warning-text-readable",
"--color-error-text-readable", "--color-info-text-readable",
]) expect(css).toContain(variable);
});
});
src/lib/admin-theme-source-audit.test.ts
+34
View File
@@ -0,0 +1,34 @@
import { readdirSync, readFileSync } from "node:fs";
import { join, relative } from "node:path";
import { describe, expect, it } from "vitest";
const ROOTS = ["src/app/admin", "src/components/admin"];
const GRAPHICAL_ALLOWLIST = [
"src/app/admin/favicon/favicon-generator.tsx",
"src/app/admin/import/clone/import-clone-client.tsx",
"src/app/admin/import/furni/import-furni-client.tsx",
"src/components/admin/catalog/items-shop-preview.tsx",
];
function sourceFiles(directory: string): string[] {
return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
const path = join(directory, entry.name);
return entry.isDirectory() ? sourceFiles(path) : /\.(?:ts|tsx)$/.test(entry.name) ? [path] : [];
});
}
describe("admin theme source audit", () => {
it("keeps ordinary admin text theme-aware", () => {
const violations: string[] = [];
for (const root of ROOTS) {
for (const file of sourceFiles(root)) {
const normalized = relative(process.cwd(), file).replaceAll("\\", "/");
if (GRAPHICAL_ALLOWLIST.includes(normalized)) continue;
const source = readFileSync(file, "utf8");
const risky = source.match(/(?:text-(?:gray|slate)-(?:400|500|600|700|800|900)|text-white(?:\/\d+)?|\)\]0)/g);
if (risky) violations.push(`${normalized}: ${[...new Set(risky)].join(", ")}`);
}
}
expect(violations).toEqual([]);
});
});
src/lib/theme-contrast.test.ts
+18
View File
@@ -86,6 +86,24 @@ describe("derivePublicForegrounds", () => {
}
});
it("covers admin hierarchy and every semantic status", () => {
const required = [
"subtle", "disabled", "sidebar", "input",
"success-text", "success-solid", "warning-text", "warning-solid",
"error-text", "error-solid", "info-text", "info-solid",
];
for (const preset of Object.values(PRESETS)) {
for (const palette of [preset.light, preset.dark]) {
const result = derivePublicForegrounds(palette);
for (const name of required) {
const pair = result.pairs.find((candidate) => candidate.name === name);
expect(pair, `missing ${name}`).toBeDefined();
expect(contrastRatio(pair!.foreground, pair!.background), name).toBeGreaterThanOrEqual(4.5);
}
}
}
});
it("repairs hostile white-on-white custom colors", () => {
const result = derivePublicForegrounds({
color_background: "#ffffff", color_surface: "#ffffff", color_dropdown: "#ffffff",
src/lib/theme-contrast.ts
+11
View File
@@ -18,6 +18,10 @@ export function derivePublicForegrounds(c: PublicThemeColors) {
make("body", value("color_text", "#0f172a"), background),
make("surface", value("color_text", "#0f172a"), surface),
make("muted", value("color_text_muted", "#64748b"), surface),
make("subtle", value("color_text_muted", "#64748b"), surface),
make("disabled", value("color_text_muted", "#64748b"), surface),
make("sidebar", value("color_navbar_text", "#1e293b"), navbar),
make("input", value("color_text", "#0f172a"), dropdown),
make("link", value("link_color", primary), surface),
make("link-hover", value("link_hover_color", primary), surface),
make("navbar", value("color_navbar_text", "#1e293b"), navbar),
@@ -31,6 +35,13 @@ export function derivePublicForegrounds(c: PublicThemeColors) {
make("pill", value("color_text", "#0f172a"), surface),
make("badge", value("button_text_color", "#1e293b"), primary),
make("overlay", "#ffffff", "#111827"),
...(["success", "warning", "error", "info"] as const).flatMap((status) => {
const statusColor = value(`color_${status}`, "#0f172a");
return [
make(`${status}-text`, statusColor, surface),
make(`${status}-solid`, "#ffffff", statusColor),
];
}),
];
return { pairs, byName: Object.fromEntries(pairs.map((pair) => [pair.name, pair.foreground])) };
}
src/lib/theme-css.ts
+14
View File
@@ -27,6 +27,8 @@ export function themePaletteCss(selector: string, palette: ThemePalette): string
`--color-text-muted-readable:${readableColor(palette.color_text_muted, [palette.color_background, palette.color_surface])};`,
`--color-primary-readable:${readableColor(palette.color_primary, [palette.color_background, palette.color_surface])};`,
`--color-accent-readable:${readableColor(palette.color_accent, [palette.color_background, palette.color_surface])};`,
`--color-primary-foreground-readable:${semantic.byName.primary};`,
`--color-accent-foreground-readable:${semantic.byName.accent};`,
`--color-navbar-text-readable:${semantic.byName.navbar};`,
`--button-text-color-readable:${semantic.byName["button-primary"]};`,
`--button-secondary-text-color-readable:${semantic.byName["button-secondary"]};`,
@@ -39,6 +41,18 @@ export function themePaletteCss(selector: string, palette: ThemePalette): string
`--color-pill-text-readable:${semantic.byName.pill};`,
`--color-badge-text-readable:${semantic.byName.badge};`,
`--color-overlay-text-readable:${semantic.byName.overlay};`,
`--color-text-subtle-readable:${semantic.byName.subtle};`,
`--color-text-disabled-readable:${semantic.byName.disabled};`,
`--admin-sidebar-background:${palette.color_navbar};`,
`--admin-sidebar-text-readable:${semantic.byName.sidebar};`,
`--admin-sidebar-muted-readable:${semantic.byName.sidebar};`,
`--admin-input-text-readable:${semantic.byName.input};`,
...(["success", "warning", "error", "info"] as const).flatMap((status) => [
`--color-${status}-text-readable:${semantic.byName[`${status}-text`]};`,
`--color-${status}-foreground-readable:${semantic.byName[`${status}-solid`]};`,
`--color-${status}-subtle:color-mix(in srgb, ${palette[`color_${status}`]} 14%, ${palette.color_surface});`,
`--color-${status}-border:color-mix(in srgb, ${palette[`color_${status}`]} 38%, transparent);`,
]),
);
return `${selector}{${declarations.join("")}}`;
}