From 5959860deb1806b995c1c58c04014a2b90f59734 Mon Sep 17 00:00:00 2001 From: pyr0ball Date: Thu, 19 Mar 2026 07:37:34 -0700 Subject: [PATCH] docs(apply): add split-pane desktop layout design spec --- .../2026-03-19-apply-split-pane-design.md | 181 ++++++++++++++++++ 1 file changed, 181 insertions(+) create mode 100644 docs/superpowers/specs/2026-03-19-apply-split-pane-design.md diff --git a/docs/superpowers/specs/2026-03-19-apply-split-pane-design.md b/docs/superpowers/specs/2026-03-19-apply-split-pane-design.md new file mode 100644 index 0000000..bfdc84b --- /dev/null +++ b/docs/superpowers/specs/2026-03-19-apply-split-pane-design.md @@ -0,0 +1,181 @@ +# Apply View — Desktop Split-Pane Design + +**Date:** 2026-03-19 +**Status:** Approved — ready for implementation planning + +--- + +## Goal + +Refactor the Apply view for desktop: replace the centered 760px list → full-page-navigation pattern with a persistent master-detail split pane. The left column holds a compact job list; clicking a job expands the cover letter workspace inline to the right. Mobile layout is unchanged. + +--- + +## Decisions Made + +| Decision | Choice | Future option | +|---|---|---| +| Split ratio | 28% list / 72% workspace (fixed) | Resizable drag handle (Option C) | +| Panel open animation | Expand from list divider edge (~200ms) | — | +| URL routing | Local state only — URL stays at `/apply` | URL-synced selection for deep linking | +| List row density | Option A: title + company + score badge, truncated | C (company+score only), D (wrapped/taller) via future layout selector | + +--- + +## Layout + +### Desktop (≥ 768px) + +``` +┌──────────────────────────────────────────────────────────────────┐ +│ [NAV 220px] │ List (28%) │ Workspace (72%) │ +│ │ ─────────────────── │ ──────────────────────── │ +│ │ 25 jobs │ Sr. Software Engineer │ +│ │ ▶ Sr. SWE Acme 87% │ Acme Corp │ +│ │ FS Dev Globex 72% │ │ +│ │ Backend Init 58% │ [Cover letter editor] │ +│ │ ... │ [Actions: Generate / PDF] │ +└──────────────────────────────────────────────────────────────────┘ +``` + +- App nav sidebar (220px fixed, existing) + split pane fills the remainder +- No job selected → right panel shows a warm empty state: `← Select a job to open the workspace` +- The `max-width: 760px` constraint on `.apply-list` is removed for desktop; it remains (full-width) on mobile + +### Mobile (< 768px) + +No changes. Existing styles, full-width list, `RouterLink` navigation to `/apply/:id`. + +--- + +## Component Architecture + +### Current + +``` +ApplyView.vue → list only, RouterLink to /apply/:id +ApplyWorkspaceView.vue → full page, reads :id from route params +``` + +### New + +``` +ApplyView.vue → split pane (desktop) OR list (mobile) + ├─ [left] NarrowJobList (inline, not a separate component — kept in ApplyView) + └─ [right] ApplyWorkspace.vue (new component, accepts :jobId prop) + +ApplyWorkspaceView.vue → unchanged route wrapper; renders +``` + +**Why extract `ApplyWorkspace.vue`?** The workspace is now rendered in two contexts: the split pane (inline) and the existing `/apply/:id` route (for mobile and any future deep-link support). Extracting it as a prop-driven component avoids duplication. + +--- + +## Narrow Job List (left panel) + +**Row layout — Option A:** + +``` +┌─────────────────────────────────────┐ +│ Sr. Software Engineer [87%]│ ← title truncated, score right-aligned +│ Acme Corp │ ← company truncated +└─────────────────────────────────────┘ +``` + +- Score badge color-coded: green ≥ 70%, blue 50–69%, yellow 30–49%, red < 30% +- `has_cover_letter` shown as a subtle `✓` prefix on the company line (no separate badge — space is tight) +- Selected row: `border-left: 3px solid var(--app-primary)` accent + tinted background (`color-mix(in srgb, var(--app-primary) 8%, var(--color-surface-raised))`) +- Hover: same border-left treatment at lower opacity +- `salary`, `location`, `is_remote` badge moved to the workspace header — not shown in the narrow list +- List scrolls independently; workspace panel is sticky + +--- + +## Panel Open Animation + +CSS Grid column transition — most reliable cross-browser approach for "grow from divider" effect: + +```css +.apply-split { + display: grid; + grid-template-columns: 28% 0fr; /* collapsed: panel has 0 width */ + transition: grid-template-columns 200ms ease-out; +} +.apply-split.has-selection { + grid-template-columns: 28% 1fr; /* expanded */ +} +``` + +The panel column itself has `overflow: hidden`, so content is clipped during expansion. A `opacity: 0 → 1` fade on the panel content (100ms delay, 150ms duration) layers on top so content doesn't flash half-rendered mid-expand. + +`prefers-reduced-motion`: skip the grid transition and opacity fade; panel appears instantly. + +--- + +## Empty State (no job selected) + +Shown in the right panel when `selectedJobId === null`: + +``` + 🦅 + Select a job to open + the workspace +``` + +Centered vertically, subdued text color, small bird emoji. Disappears the moment a job is selected (no transition needed — the panel content crossfades in). + +--- + +## Easter Eggs + +All four easter eggs are scoped to `ApplyView.vue` / `ApplyWorkspace.vue`: + +### 1. Speed Demon 🦅 +- **Trigger:** User clicks 5+ different jobs in under 3 seconds +- **Effect:** A ``-based 🦅 streaks horizontally across the panel area (left → right, 600ms), followed by a brief "you're on the hunt" toast (2s, bottom-right) +- **`prefers-reduced-motion`:** Toast only, no canvas animation + +### 2. Perfect Match ✨ +- **Trigger:** A job with `match_score ≥ 70` is opened in the workspace +- **Effect:** The score badge in the workspace header plays a golden shimmer (`box-shadow` + `background` keyframe, 800ms, runs once per job open) +- **Threshold:** Stored as `const PERFECT_MATCH_THRESHOLD = 70` — easy to tune when scoring improves +- **Note:** Current scoring rarely exceeds 40%; this easter egg may be dormant until the scoring algorithm is tuned. That's fine — it's a delight for when it does fire. + +### 3. Cover Letter Marathon 📬 +- **Trigger:** 5th cover letter generated in a single session (session-scoped counter in the Pinia store or component ref) +- **Effect:** A subtle streak badge appears in the list panel header: `📬 5 today` with a warm amber glow. Increments with each subsequent generation. Disappears on page refresh. +- **Tooltip:** "You're on a roll!" on hover + +### 4. Konami Code 🎮 +- **Trigger:** ↑↑↓↓←→←→BA (standard Konami sequence), detected anywhere on the Apply view +- **Effect:** Activates hacker mode (`document.documentElement.setAttribute('data-theme', 'hacker')`) — consistent with the cross-product Konami standard +- **Implementation:** `useKonami()` composable (shared if it exists, else add to `composables/`) + +--- + +## What Stays the Same + +- `/apply/:id` route — still exists, still works (used by mobile nav and future deep links) +- `ApplyWorkspaceView.vue` — becomes a thin wrapper around `` +- All existing mobile breakpoint styles in `ApplyView.vue` +- The `useApiFetch` data fetching pattern +- The `scoreBadgeClass()` utility + +--- + +## Future Options (do not implement now) + +- **Resizable split:** drag handle between panels, persisted in `localStorage` as `apply.splitRatio` +- **URL-synced selection:** update route to `/apply/:id` on selection; back button closes panel +- **Layout selector:** density toggle (icon buttons in list header) offering Option C (company+score only) and Option D (wrapped/taller cards). Persisted in `localStorage` as `apply.listDensity`. + +--- + +## Files + +| File | Action | +|---|---| +| `web/src/views/ApplyView.vue` | Replace: split-pane layout, narrow list, easter eggs | +| `web/src/components/ApplyWorkspace.vue` | Create: extracted from `ApplyWorkspaceView.vue`, accepts `jobId` prop | +| `web/src/views/ApplyWorkspaceView.vue` | Modify: thin wrapper — `` | +| `web/src/composables/useKonami.ts` | Create (if not exists): Konami sequence detector composable |