refactor: tighten sidebars with eyebrow section headers

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>

frontend/src/components/sidebar/PhotoInfoPanel.tsx

@@ -301,7 +301,7 @@ export function PhotoInfoPanel({ photoId, darkTheme = false }: PhotoInfoPanelPro
   return (
     <div className="flex h-full flex-col">
       {/* Edit fields */}
-      <div className="space-y-3 border-b border-border p-4">
+      <div className="space-y-2.5 border-b border-border p-3">
         <div>
           <label className="mb-1 block text-xs text-text-muted">Filename</label>
           <input
@@ -594,16 +594,16 @@ function Section({
     <div className="border-b border-border">
       <button
         onClick={onToggle}
-        className="flex w-full items-center justify-between px-4 py-2 text-sm hover:bg-surface-2"
+        className="flex w-full items-center justify-between px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-text-muted hover:bg-surface-2 hover:text-text"
       >
-        <span className="font-medium text-text">{title}</span>
+        <span>{title}</span>
         {expanded ? (
-          <ChevronDown className="h-4 w-4 text-text-muted" />
+          <ChevronDown className="h-3 w-3" />
         ) : (
-          <ChevronRight className="h-4 w-4 text-text-muted" />
+          <ChevronRight className="h-3 w-3" />
         )}
       </button>
-      {expanded && <div className="px-4 pb-3">{children}</div>}
+      {expanded && <div className="px-3 pb-2.5">{children}</div>}
     </div>
   )
 }