Session 2026-05-28: profile page overhaul, nav fixes, dashboard activity links

- Fix nav links not working from profile page (useEffect infinite re-render via unstable profile object ref)
- Fix nav hover/active: gold icon highlight, no background change; active links non-clickable
- Fix hover layout shift: add border: 1px solid transparent to all interactive elements
- Header icon buttons (search, theme toggle) now highlight gold on hover
- Profile page: replace calendar with activity feed (60/40 grid), add stat cards (tasks completed, active projects, revision requests, submissions)
- Profile card: title field, icon rows for location/email/linkedin, member since + role bottom-right, edit button top-right
- Profile portrait: remove wrapper column, fix left-gap alignment
- Add profiles.title migration
- Dashboard recent activity: name → /profile/{id}, task → /requests/{id} (clickable links)
- Icon-only sidebar with gold active/hover state, pointer-events: none on active links
- layout.md updated with profile page geometry rules

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

layout.md

@@ -0,0 +1,171 @@
+# Fourge Portal Layout System
+
+This is the single source of truth for dashboard/profile visual structure and UI geometry.
+
+## 1) Global Frame
+- Viewport app shell: `height: 100vh`, `overflow: hidden`
+- Main content gutter: `24px` all sides
+- Sidebar: `width: 76px`, `top: 24px`, `left: 24px`, `height: calc(100vh - 48px)`, `border-radius: 8px`
+- Main wrapper offset from sidebar: `margin-left: 100px`
+- Page rhythm unit: `24px` (header spacing, card gaps, section gaps)
+
+## 2) Theme + Background
+- Background ownership is `body` via `background: var(--bg)`.
+- Dark base token `--bg` is full gradient:
+  - radial glow + vertical dark gradient.
+- Light base token `--bg` is full gradient:
+  - gray radial glow + white vertical gradient.
+- Do not use `html` theme-gradient scripting for Safari chrome behavior.
+
+## 3) Tokens
+- Accent: `#F5A523`
+- Card bg dark: `rgba(255,255,255,0.02)`
+- Card bg light: `rgba(0,0,0,0.02)`
+- Secondary card tone dark: `rgba(255,255,255,0.08)`
+- Secondary card tone light: `rgba(0,0,0,0.08)`
+- Border dark: `rgba(245,165,35,0.15)`
+- Border light: `rgba(0,0,0,0.1)`
+- Text primary dark/light: `#ffffff / #0d0d0d`
+- Text secondary dark/light: `#a8a8a8 / rgba(0,0,0,0.6)`
+- Text muted dark/light: `#666666 / rgba(0,0,0,0.38)`
+
+## 4) Typography
+- Font family: `Fourge`, then `-apple-system`, `BlinkMacSystemFont`, `'Segoe UI'`, `sans-serif`
+- Base font size: `14px`
+- Header title: `28px`, `500`, `line-height: 1.2`
+- Header subtitle: `13px`
+- Widget title: `11px`, `500`, uppercase, `letter-spacing: 0.8px`
+- Body table text: `12px/13px` by column importance
+
+## 5) Card System
+- Default widget shell:
+  - `background: var(--card-bg)`
+  - `border: 1px solid var(--border)`
+  - `border-radius: 8px`
+  - `padding: 18px 21px`
+  - `backdrop-filter: blur(12px)` + `-webkit-backdrop-filter`
+- Compact card radius (legacy generic `.card`): `4px` (do not use for new dashboard widgets)
+
+## 6) Header + Top Right Controls
+- Site header: `padding-top: 24px`, `padding-bottom: 24px`
+- Right control row:
+  - Search icon button: `32x32`
+  - Search button to theme toggle space: `7px` (`search-wrap margin-right`)
+  - Theme toggle: `32x32`
+  - Theme toggle to avatar: `14px` (`avatar-wrap margin-left`)
+  - Avatar button: `49x49`, circle, `2px` inner ring + `2px` accent outline
+
+## 7) Dashboard Grids (Team)
+- Stat row: `grid-template-columns: 1fr 1fr 1fr 1.5fr`, `gap: 24`, `margin-bottom: 0`
+- Row 2: `grid-template-columns: 1fr 280px`, `gap: 24`, `margin-top: 24`
+- Row 3: `grid-template-columns: 1fr 1fr`, `gap: 24`, `margin-top: 24`
+- Row 4 full-width: `margin-top: 24`
+
+## 8) Stat Cards
+- Card min height: `120px`
+- Internal row gap: `21px`
+- Label/value/sub spacing:
+  - Label: `margin-bottom: 5px`
+  - Value: `30px`, `400`, `letter-spacing: -0.5`, `line-height: 1.1`
+  - Sub: `12px`, `margin-top: 5px`
+- Icon badge: `27x27`, circle
+- Icon glyph: `13x13`
+
+## 9) Calendar
+- Card uses widget shell
+- Header-to-grid gap: `14px`
+- Weekday label: `10px`, `600`, `letter-spacing: 0.5`
+- Day cell button: `28x28`, circular
+- Day number: `12px`
+- Today style: bg `#F5A523`, text `#0d0d0d`, `700`
+- Dots: up to 3, each `3x3`, gap `2`
+- Popover:
+  - Anchored left of cell: `right: calc(100% + 8px)`, vertical centered
+  - `width: 210px`, `padding: 10px 12px`, `border-radius: 8px`
+  - shadow `0 12px 32px rgba(0,0,0,0.45)`
+  - row dot `6x6`, row text `12px`
+
+## 10) Activity + Performance Rows
+- Visible rows target: 5
+- Row layout: `display:flex`, `align-items:center`, `gap:10px`
+- Row spacing: `margin-top: 10px` from second row onward
+- Name text: `13px`
+- Meta/date text: `11px`
+- Progress track: `height: 4px`, `radius: 2px`
+- Percentage width slot: `min-width: 28px`
+
+## 11) Tables
+- General table layout in dashboard cards: `table-layout: fixed`, `border-collapse: collapse`
+- Header cells:
+  - `font-size: 10px`, `font-weight: 500`, uppercase, `letter-spacing: 0.6px`
+  - bottom spacing: `padding-bottom: 12px`
+- Body cells:
+  - primary text: `13px`
+  - secondary/metrics text: `12px`
+  - row vertical spacing via cell padding: typically `5px`
+- Hot Items column widths:
+  - check `10%`, task `40%`, requested by `35%`, due by `15%`
+- Client Highlight column widths:
+  - icon `5%`, company `22%`, contact `23%`, projects `13%`, open `13%`, outstanding `12%`, paid `12%`
+- Sorting rule:
+  - Every visible data column header must be sortable.
+  - Use clickable header controls (`SortTh`) with ascending/descending indicator.
+  - Exclude only non-data utility/action columns (checkbox-only, icon-only status marker, action buttons).
+
+## 12) Profile Page
+- Container: full available content width, column, `gap: 24`
+- Top row: `grid-template-columns: 1fr 280px`, `gap: 24`
+- At `<=1200px`: top row stacks to one column
+- Main profile card uses widget shell
+- Internal card layout:
+  - row `gap: 20px`
+  - portrait column `width: 160px`, portrait max `140x140`, circle
+  - detail grid `140px 1fr`, `row-gap: 8`, `column-gap: 12`, `margin-top: 14`
+  - social row `margin-top: 14`, `gap: 8`
+  - self-only edit button: `position: absolute`, `top: 18px`, `right: 21px` (aligns to card padding), `border-radius: 8px` (matches card), `height: 30px`, `font-size: 12px`
+- Right calendar card shows only tasks/events assigned to the viewed profile user
+- Modal:
+  - overlay: fixed inset, `z-index: 1200`, bg `rgba(0,0,0,0.58)`, blur `6px`
+  - overlay padding: `24px`
+  - modal width: `min(620px, 100%)`
+  - modal max-height: `calc(100vh - 48px)`, `overflow-y: auto`
+
+## 13) Radius + Geometry Rules
+- Dashboard/profile widgets: `8px` radius
+- Sidebar: `8px` radius
+- Buttons/input/dropdowns mostly `4px` radius
+- Circular elements (avatar/day/icon badges): `50%`
+
+## 14) Z-Index Stack
+- Sidebar: `200`
+- Header dropdowns/tooltips: `300`
+- Calendar hover popover: `1002` within card context (`card can be 1001 active`)
+- Modal overlay: `1200`
+
+## 15) Motion
+- Motion vars:
+  - fast `160ms`
+  - base `220ms`
+  - easing `cubic-bezier(0.22, 1, 0.36, 1)`
+- Dropdown animation: `ui-fade-up` from `translateY(4px)` + opacity 0 -> 1
+
+## 17) Hover Interaction Contract
+- Sidebar, header icon buttons, dropdown items, and avatar menu items must show a visible hover surface before click.
+- Single hover source-of-truth block controls these elements.
+- Dark hover surface baseline: `#1f1f1f`.
+- Light hover surface baseline: `rgba(0,0,0,0.08)`.
+- Nav icon opacity must lift from muted to full on hover (`opacity: 1`).
+- Hover and active must be visually distinct:
+  - hover uses stronger temporary contrast (`bg` + thin border),
+  - active remains persistent selected-state background.
+
+## 16) Non-Negotiable Implementation Rules
+- Keep gradient backgrounds on `html`, not `body`
+- Keep widget shell values (`18px 21px`, `8px`, blur 12, border token) consistent
+- Maintain global `24px` spacing rhythm for page/frame/grid gaps
+- Keep team dashboard card order:
+  1. Open Tasks
+  2. Active Projects
+  3. Net Profit
+  4. Revenue (wide)
+- Keep row 2 order: Recent Activity (left), Calendar (right)