asepharyana
26a900a030
CI / typecheck + build (turbo) (push) Canceled after 0s
- 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
81 lines
2.9 KiB
Markdown
81 lines
2.9 KiB
Markdown
# 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
|