# 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 |
| 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 (≥ 1024px)
The split pane activates at 1024px — the same breakpoint where the app nav sidebar collapses (`App.vue` `max-width: 1023px`). This ensures the two-column layout never renders without its sidebar, avoiding an uncomfortably narrow list column.
```
┌──────────────────────────────────────────────────────────────────┐
│ [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] │
└──────────────────────────────────────────────────────────────────┘
```
- No job selected → right panel shows a warm empty state: `← Select a job to open the workspace` (desktop-only — the empty state element is conditionally rendered only inside the split layout, not the mobile list)
- The `max-width: 760px` constraint on `.apply-list` is removed for desktop
### Mobile (< 1024px)
No changes. Existing full-width list + `RouterLink` navigation to `/apply/:id`. All existing mobile breakpoint styles are preserved.
---
## 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] Narrow job list (inline in ApplyView — not a separate component)
└─ [right] ApplyWorkspace.vue (new component, :job-id prop)
ApplyWorkspaceView.vue → thin wrapper:
ApplyWorkspace.vue → extracted workspace content; accepts jobId: number prop
```
**Why extract `ApplyWorkspace.vue`?** The workspace now renders in two contexts: the split pane (inline, `jobId` from local state) and the existing `/apply/:id` route (for mobile + future deep links). Extracting it as a prop-driven component avoids duplication.
**`jobId` prop type:** `number`. The wrapper in `ApplyWorkspaceView.vue` does `Number(route.params.id)` before passing it. `ApplyWorkspace.vue` receives a `number` and never touches `route.params` directly.
**`declare module` augmentation:** The `declare module '@/stores/review'` block in the current `ApplyWorkspaceView.vue` (if present) moves into `ApplyWorkspace.vue`, not the thin wrapper.
---
## Narrow Job List (left panel)
**Row layout — Option A:**
```
┌─────────────────────────────────────┐
│ Sr. Software Engineer [87%]│ ← title truncated, score right-aligned
│ Acme Corp ✓ │ ← company truncated; ✓ if has_cover_letter
└─────────────────────────────────────┘
```
- The existing `cl-badge` (`✓ Draft` / `○ No draft`) badge row is **removed** from the narrow list. Cover letter status is indicated by a subtle `✓` suffix on the company line only when `has_cover_letter === true`. No badge for "no draft" — the absence of `✓` is sufficient signal at this density.
- **Score badge color thresholds (unified — replaces old 3-tier system in the apply flow):**
- Green `score-badge--high`: ≥ 70%
- Blue `score-badge--mid-high`: 50–69%
- Amber `score-badge--mid`: 30–49%
- Red `score-badge--low`: < 30%
- This 4-tier scheme applies in both the narrow list and the workspace header, replacing the previous `≥80 / ≥60 / else` thresholds. The `.score-badge--mid-high` class is new and needs adding to the shared badge CSS.
- Selected row: `border-left: 3px solid var(--app-primary)` accent + tinted background. Use `var(--app-primary-light)` as the primary fallback; `color-mix(in srgb, var(--app-primary) 8%, var(--color-surface-raised))` as the enhancement for browsers that support it (Chrome 111+, Firefox 113+, Safari 16.2+).
- Hover: same border-left treatment at 40% opacity
- `salary`, `location`, `is_remote` badge: shown in the workspace header only — not in the narrow list
- List scrolls independently within its column
---
## Panel Open Animation
CSS Grid column transition on the `.apply-split` root element:
```css
.apply-split {
display: grid;
grid-template-columns: 28% 0fr;
transition: grid-template-columns 200ms ease-out;
}
.apply-split.has-selection {
grid-template-columns: 28% 1fr;
}
/* Required: prevent intrinsic min-content from blocking collapse */
.apply-split__panel {
min-width: 0;
overflow: clip; /* clip (not hidden) — hidden creates a new stacking context
and blocks position:sticky children inside the workspace */
}
```
`min-width: 0` on `.apply-split__panel` is required — without it, the panel's intrinsic content width prevents the `0fr` column from collapsing to zero.
Panel content fades in on top of the expand: `opacity: 0 → 1` with a 100ms delay and 150ms duration, so content doesn't flash half-rendered mid-expand.
**Panel height:** The right panel uses `height: calc(100vh - var(--app-header-height, 4rem))` with `overflow-y: auto` so the workspace scrolls independently within the column. Use a CSS variable rather than a bare literal so height stays correct if the nav height changes.
**`prefers-reduced-motion`:** Skip the grid transition and opacity fade; panel appears and content shows instantly.
---
## Post-Action Behavior (Mark Applied / Reject)
In the current `ApplyWorkspaceView.vue`, both `markApplied()` and `rejectListing()` call `router.push('/apply')` after success — fine for a full-page route.
In the embedded split-pane context, `router.push('/apply')` is a no-op (already there), but `selectedJobId` must also be cleared and the job list refreshed. `ApplyWorkspace.vue` emits a `job-removed` event when either action completes. `ApplyView.vue` handles it:
```
@job-removed="onJobRemoved()" → selectedJobId = null + re-fetch job list
```
The thin `ApplyWorkspaceView.vue` wrapper can handle `@job-removed` by calling `router.push('/apply')` as before (same behavior, different mechanism).
---
## Empty State (no job selected)
Shown in the right panel when `selectedJobId === null` on desktop only:
```
🦅
Select a job to open
the workspace
```
Centered vertically, subdued text color. Disappears when a job is selected.
---
## Easter Eggs
### 1. Speed Demon 🦅
- **Trigger:** User clicks 5+ different jobs in under 3 seconds
- **Effect:** A `