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

20
frontend/src/components/layout/RightSidebar.tsx
View File

@@ -149,26 +149,28 @@ export function RightSidebar({ onCollapse }: RightSidebarProps) {
: `${selectedPhotos.length} Photos Selected`
const Header = () => (
<div className="flex h-11 flex-shrink-0 items-center justify-between border-b border-border px-4">
<h2 className="text-sm font-semibold text-text">{headerTitle}</h2>
<div className="flex items-center gap-1">
<div className="flex h-9 flex-shrink-0 items-center justify-between border-b border-border px-3">
<h2 className="text-[11px] font-semibold uppercase tracking-[0.14em] text-text-muted">
{headerTitle}
</h2>
<div className="flex items-center gap-0.5">
{selectedPhotos.length > 0 && (
<button
onClick={clearSelection}
className="rounded p-1 text-text-muted hover:bg-surface-2 hover:text-text"
className="rounded p-0.5 text-text-muted hover:bg-surface-2 hover:text-text"
title="Clear selection (Esc)"
aria-label="Clear selection"
>
<X className="h-4 w-4" />
<X className="h-3.5 w-3.5" />
</button>
)}
<button
onClick={onCollapse}
className="rounded p-1 text-text-muted hover:bg-surface-2 hover:text-text"
className="rounded p-0.5 text-text-muted hover:bg-surface-2 hover:text-text"
title="Collapse panel (I)"
aria-label="Collapse panel"
>
<PanelRightClose className="h-4 w-4" />
<PanelRightClose className="h-3.5 w-3.5" />
</button>
</div>
</div>
@@ -206,8 +208,8 @@ export function RightSidebar({ onCollapse }: RightSidebarProps) {
<div className="flex h-full flex-col bg-surface">
<Header />
<div className="space-y-3 border-b border-border p-4">
<p className="text-xs text-text-muted">
<div className="space-y-2.5 border-b border-border p-3">
<p className="text-[11px] text-text-muted">
Rating, color, and flag apply to all {selectedPhotos.length} selected.
</p>