dtoro/mule-image
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: tighten sidebars with eyebrow section headers

Browse Source 
Compact the left/right sidebars and the photo info panel: shrink panel
widths, drop header height, switch top-level tree groups and metadata
sections to small uppercase eyebrow labels, and tighten row padding,
icon sizes, and count badges throughout.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
authentik Default Admin
2026-04-09 19:03:22 +02:00
parent 12a616d4b5
commit 8f25c58b74
6 changed files with 91 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/heaps/ActiveHeapCard.tsx
View File

@@ -56,20 +56,20 @@ export function ActiveHeapCard() {
}))
return (
<div className="m-2 rounded-lg border border-border bg-surface-2 shadow-sm">
<div className="m-1.5 rounded-md border border-border bg-surface-2 shadow-sm">
{/* Header — clickable, navigates to the heap section. */}
<button
onClick={() =>
navigateToSection(`heap-${activeHeap.id}`, { heapId: activeHeap.id })
}
className="flex w-full items-center gap-2 rounded-t-lg px-3 py-2 text-left hover:bg-surface-offset"
className="flex w-full items-center gap-1.5 rounded-t-md px-2 py-1.5 text-left hover:bg-surface-offset"
title={`Open "${activeHeap.name}"`}
>
<ShoppingBasket className="h-4 w-4 flex-shrink-0 text-pick" />
<span className="min-w-0 flex-1 truncate text-sm font-semibold text-text">
<ShoppingBasket className="h-3.5 w-3.5 flex-shrink-0 text-pick" />
<span className="min-w-0 flex-1 truncate text-[12px] font-semibold text-text">
{activeHeap.name}
</span>
<span className="flex h-5 min-w-[24px] items-center justify-center rounded bg-surface px-1.5 text-[11px] font-medium text-text-muted">
<span className="flex h-4 min-w-[20px] items-center justify-center rounded bg-surface px-1 text-[10px] font-medium text-text-muted">
{orderedIds.length}
</span>
</button>
@@ -81,7 +81,7 @@ export function ActiveHeapCard() {
* so the cacti frame the photos rather than the (transparent) sky. */}
<div
key={activeHeap.id}
className="relative h-24 overflow-hidden rounded-b-lg px-3 pb-3"
className="relative h-20 overflow-hidden rounded-b-md px-2 pb-2"
style={{
backgroundImage: `url(${cardBg})`,
backgroundSize: 'cover',
@@ -117,10 +117,10 @@ export function ActiveHeapCard() {
position: 'absolute',
left: '50%',
top: '50%',
marginLeft: -32, // half of w-16
marginTop: -32, // half of h-16
marginLeft: -26, // half of w-13
marginTop: -26, // half of h-13
}}
className="h-16 w-16 rounded object-cover shadow-md ring-1 ring-black/40"
className="h-[52px] w-[52px] rounded object-cover shadow-md ring-1 ring-black/40"
/>
))}
</AnimatePresence>

30
frontend/src/components/heaps/HeapsPanel.tsx
View File

@@ -176,9 +176,10 @@ export function HeapsPanel() {
return (
<div>
{/* Section header */}
{/* Section header — eyebrow style to match the LeftSidebar
* library/folders headers. */}
<div
className="group flex cursor-pointer items-center gap-1 rounded px-2 py-1 text-sm text-text hover:bg-surface-2"
className="group mt-2 flex cursor-pointer items-center gap-1 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-text-muted hover:text-text"
onClick={() => setExpanded((v) => !v)}
>
<button className="rounded p-0.5 hover:bg-surface-offset">
@@ -188,7 +189,6 @@ export function HeapsPanel() {
<ChevronRight className="h-3 w-3" />
)}
</button>
<ShoppingBasket className="h-4 w-4 text-text-muted" />
<span className="flex-1 truncate">Heaps</span>
<button
onClick={(e) => {
@@ -196,7 +196,7 @@ export function HeapsPanel() {
setCreating(true)
setExpanded(true)
}}
className="invisible rounded p-0.5 text-text-muted hover:bg-surface-offset hover:text-text group-hover:visible"
className="invisible rounded p-0.5 hover:bg-surface-offset hover:text-text group-hover:visible"
title="New heap"
>
<Plus className="h-3 w-3" />
@@ -208,8 +208,8 @@ export function HeapsPanel() {
{/* Inline create form */}
{creating && (
<div
className="flex items-center gap-1 px-2 py-1"
style={{ paddingLeft: '32px' }}
className="flex items-center gap-1 px-2 py-0.5"
style={{ paddingLeft: '20px' }}
>
<input
autoFocus
@@ -224,12 +224,12 @@ export function HeapsPanel() {
}
}}
placeholder="Heap name"
className="flex-1 rounded border border-border bg-bg px-2 py-0.5 text-xs text-text focus:border-primary focus:outline-none"
className="flex-1 rounded border border-border bg-bg px-2 py-0.5 text-[11px] text-text focus:border-primary focus:outline-none"
/>
<button
onClick={handleCreate}
disabled={!newName.trim() || createMutation.isPending}
className="rounded bg-primary px-2 py-0.5 text-xs text-white hover:bg-primary/80 disabled:opacity-50"
className="rounded bg-primary px-2 py-0.5 text-[11px] text-white hover:bg-primary/80 disabled:opacity-50"
>
Add
</button>
@@ -238,8 +238,8 @@ export function HeapsPanel() {
{heaps.length === 0 && !creating && (
<div
className="px-2 py-1 text-xs text-text-faint"
style={{ paddingLeft: '32px' }}
className="px-2 py-0.5 text-[11px] text-text-faint"
style={{ paddingLeft: '20px' }}
>
No heaps yet
</div>
@@ -264,7 +264,7 @@ export function HeapsPanel() {
<div
key={heap.id}
className={clsx(
'group relative flex cursor-pointer items-center gap-1 rounded px-2 py-1 text-[13px]',
'group relative flex cursor-pointer items-center gap-1 rounded px-2 py-0.5 text-[12px]',
isFiltered ? 'bg-primary/20 text-primary' : 'text-text hover:bg-surface-2',
// Active-heap row gets a soft primary wash so the
// user always knows where Pick / T will land, even
@@ -272,7 +272,7 @@ export function HeapsPanel() {
isActive && !isFiltered && 'bg-primary/8 text-text',
isDropTarget && 'ring-2 ring-primary bg-primary/10'
)}
style={{ paddingLeft: '32px' }}
style={{ paddingLeft: '20px' }}
onClick={() => {
if (isRenaming) return
navigateToSection(`heap-${heap.id}`, { heapId: heap.id })
@@ -311,7 +311,7 @@ export function HeapsPanel() {
>
<ShoppingBasket
className={clsx(
'h-4 w-4 flex-shrink-0',
'h-3.5 w-3.5 flex-shrink-0',
isActive || isFiltered ? 'text-primary' : 'text-text-muted'
)}
/>
@@ -361,11 +361,11 @@ export function HeapsPanel() {
* on the name above; the standalone Target indicator
* was making heap counts sit left of the others. */}
{heap.photo_count > 0 ? (
<span className="flex h-5 min-w-[24px] flex-shrink-0 items-center justify-center rounded bg-surface-offset px-1.5 text-xs tabular-nums text-text-muted">
<span className="flex h-4 min-w-[20px] flex-shrink-0 items-center justify-center rounded bg-surface-offset px-1 text-[10px] tabular-nums text-text-muted">
{heap.photo_count}
</span>
) : (
<span className="h-5 min-w-[24px] flex-shrink-0" aria-hidden="true" />
<span className="h-4 min-w-[20px] flex-shrink-0" aria-hidden="true" />
)}
{!isActive && (
<button