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

Polish Studio visuals

Browse Source 
- Card-shaped loading skeletons with shimmer text lines
- Hover lift and accent shadow on furni cards
- Subtle dotted floor pattern behind previews and detail image
- Sticky action footer in the detail drawer
- Theme-aware slim scrollbars inside the admin panel
- Nicer empty state with icon tile
This commit is contained in:
openhands committed 2026-08-18 19:22:32 +02:00
1 parent f18735cf3e
commit 8a6c596727
2 files changed
+60 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/globals.css
+20
View File
@@ -211,6 +211,26 @@ summary,
background: transparent;
}
/* Theme-aware scrollbars inside the admin panel */
[data-admin] ::-webkit-scrollbar {
width: 10px;
height: 10px;
}
[data-admin] ::-webkit-scrollbar-thumb {
background-color: color-mix(
in srgb,
var(--admin-text-muted) 32%,
transparent
);
}
[data-admin] ::-webkit-scrollbar-thumb:hover {
background-color: color-mix(
in srgb,
var(--admin-text-muted) 55%,
transparent
);
}
/* ── Atom theme components ────────────────────────────────── */
@layer components {
.nav-item {
src/components/admin/studio/studio-client.tsx
+40 -8
View File
@@ -849,8 +849,14 @@ export function StudioClient({
{Array.from({ length: 10 }, (_, i) => i).map((n) => (
<div
key={`skeleton-${n}`}
className="h-40 animate-pulse rounded-lg bg-[var(--admin-accent)]/10"
/>
className="overflow-hidden rounded-xl border border-[var(--admin-border)] bg-[var(--admin-surface)]"
>
<div className="h-24 animate-pulse bg-[var(--admin-accent)]/10" />
<div className="space-y-2 border-t border-[var(--admin-border)] p-2.5">
<div className="h-3 w-3/4 animate-pulse rounded bg-[var(--admin-accent)]/10" />
<div className="h-2.5 w-1/2 animate-pulse rounded bg-[var(--admin-accent)]/10" />
</div>
</div>
))}
</div>
) : error ? (
@@ -858,11 +864,21 @@ export function StudioClient({
{error}
</div>
) : filteredItems.length === 0 ? (
<div className="py-16 text-center">
<Search className="mx-auto mb-2 text-[var(--admin-text-muted)]" />
<p className="text-sm text-[var(--admin-text-muted)]">
<div className="flex flex-col items-center py-16 text-center">
<div className="mb-3 grid h-14 w-14 place-items-center rounded-2xl border border-[var(--admin-border)] bg-[var(--admin-surface)]">
<Search
size={22}
className="text-[var(--admin-text-muted)]"
/>
</div>
<p className="text-sm font-semibold text-[var(--admin-text)]">
{activeSearch
? `No furni found for "${activeSearch}"`
: "No furni to show yet"}
</p>
<p className="mt-1 text-xs text-[var(--admin-text-muted)]">
{activeSearch
? "Try a different search or clear your filters."
: "Search a furni library to get started."}
</p>
</div>
@@ -882,10 +898,17 @@ export function StudioClient({
"flex w-full flex-col overflow-hidden rounded-xl border text-left transition-all outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]",
isSel
? "border-[var(--admin-accent)] bg-[var(--admin-accent)]/10"
: "border-[var(--admin-border)] bg-[var(--admin-surface)] hover:border-[var(--admin-accent)]/60",
: "border-[var(--admin-border)] bg-[var(--admin-surface)] hover:-translate-y-0.5 hover:border-[var(--admin-accent)]/60 hover:shadow-lg hover:shadow-[var(--admin-accent)]/10",
)}
>
<div className="relative flex h-24 items-center justify-center overflow-hidden bg-gradient-to-br from-[var(--admin-surface)] to-[var(--admin-canvas)]">
<div
className="relative flex h-24 items-center justify-center overflow-hidden"
style={{
backgroundImage:
"radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--admin-text-muted) 14%, transparent) 1px, transparent 0)",
backgroundSize: "14px 14px",
}}
>
<img
src={getFurniImageUrl(item)}
alt={item.name}
@@ -1176,7 +1199,14 @@ export function StudioClient({
</div>
<div className="min-h-0 flex-1 overflow-y-auto p-4">
<div className="mb-4 grid h-40 place-items-center rounded-xl border border-[var(--admin-border)] bg-gradient-to-br from-[var(--admin-surface)] to-[var(--admin-canvas)]">
<div
className="mb-4 grid h-40 place-items-center overflow-hidden rounded-xl border border-[var(--admin-border)]"
style={{
backgroundImage:
"radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--admin-text-muted) 14%, transparent) 1px, transparent 0)",
backgroundSize: "14px 14px",
}}
>
<img
src={getFurniImageUrl(detail)}
alt={detail.name}
@@ -1248,7 +1278,9 @@ export function StudioClient({
</div>
</div>
)}
</div>
<div className="shrink-0 border-t border-[var(--admin-border)] bg-[var(--admin-surface)] p-3">
<div className="space-y-2">
{!detail.alreadyImported ? (
<Button