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

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