refactor: Phase 14 UI/UX polish pass

- Section index: doc-title-based tree, folder doc counts, active+parent highlighting, recent list with dates, doc counter badge
- Folder index: rich card listing with doc titles (not path slugs), dates, tags, subfolder grid with doc counts, breadcrumb
- Doc page: metadata card (bg-[#0f1011] border), structured header with author/date/tags, badge title tooltips, improved FolderIndex breadcrumb
- Sidebar: recursive hierarchical tree with depth indentation + 16px/level, folder doc counts, section icons, active parent highlighting, alphabetical sort
- DocForm: clean 2-column grid layout, no duplicate slug field, edit-mode loads existing custom fields
- Homepage: inline folder tree per section card
- Header nav: added Writeups/Research/Notes links
- Deleted duplicate apps/web/app/docs/page.tsx (superseded by generic [section]/page.tsx)
- Added CSS vars: --color-border-subtle, --color-border-standard, --color-text-tertiary, --color-text-quaternary

.hermes/plans/ui-ux-polish.md

@@ -0,0 +1,80 @@
+# Phase 15 — UI/UX Polish Pass
+
+> User: "perbagus ui ux nya"
+
+## Audit
+
+### Current issues
+1. **Section index** (`[section]/page.tsx`):
+   - `buildFolderTree` uses path segments instead of doc titles for leaf nodes
+   - Folder tree + flat list at bottom is redundant
+   - No folder icons (📁), no doc type indicators, no dates
+   - Tree rendering is very basic (no visual hierarchy)
+
+2. **Doc page** (`[section]/[...slug]/page.tsx`):
+   - CustomFieldBadges shows key=value but labels all badges with key name as title
+   - No structured metadata card layout
+   - Related docs cards are functional but visually flat
+
+3. **Folder index** (`FolderIndexPage` in `[...slug]/page.tsx`):
+   - Shows doc slug parts (e.g. "pwn-100-ret2win-alignment") instead of titles
+   - No date, no tags, no description
+   - Subfolders are plain text links, no folder count or doc count
+
+4. **Homepage** (`page.tsx`):
+   - Folder tree inside cards is cramped (text-xs, no spacing)
+   - Section cards show "View all (N)" but folder tree duplicates that
+
+5. **Sidebar** (`Sidebar.tsx`):
+   - Tree uses indentation via inline style but no visual depth cues
+   - No hover expand for folders
+   - Active state only on exact match, not parent folders
+
+## Plan
+
+### 1. Section index — enhanced tree
+- Use doc titles for leaf nodes (already have `doc` reference in tree)
+- Add 📁 for folders, 📄 for docs
+- Show doc count per folder
+- Remove flat list (redundant with tree)
+- Add "View all" link per section
+- Better visual hierarchy: folder headers with counts, doc titles with dates
+
+### 2. Doc page — metadata card
+- Replace inline badge row with a structured metadata card
+- Show custom fields as labeled badges (key → value with color)
+- Keep CustomFieldBadges for backward compat but improve layout
+- Add metadata card with: author, date, tags, and all custom fields
+
+### 3. Folder index — rich listing
+- Show doc titles (fetch from listDocuments, match by path)
+- Show update date per doc
+- Show tags per doc
+- Add doc count for subfolders
+- Better visual separation between subfolders and docs
+
+### 4. Homepage — cleaner tree
+- Increase font size for tree items
+- Show section icon + label in tree header
+- Better spacing between sections
+
+### 5. Sidebar — depth cues
+- Use ml-4 per level instead of inline style
+- Add section divider lines
+- Highlight active section + parent folders
+
+## Files to change
+```
+mod: apps/web/app/[section]/page.tsx          # enhanced tree, use doc titles
+mod: apps/web/app/[section]/[...slug]/page.tsx # FolderIndexPage + metadata card
+mod: apps/web/app/page.tsx                    # cleaner section tree cards
+mod: apps/web/app/components/Sidebar.tsx       # depth + active parent highlight
+mod: apps/web/app/globals.css                 # additional CSS vars if needed
+```
+
+## Verification
+- All endpoints still 200
+- `bun run test` green
+- `turbo run typecheck` green
+- `next build` succeeds
+- Live visual check of folder index, section index, doc page