[FE] Resizable divider between the associations and content panels #930

This is a suggested approach, not the source of truth. The User Story, Description, and Acceptance Criteria define what must be true when the work is done.

Approach

1. Add a vertical split component beside ResizableBox in src/generic/resizable/. It renders a top slot, the bar, and a bottom slot in a flex column that fills its parent. ResizableBox only resizes a width with mouse events, so it cannot be reused as is. Reuse its pattern of clamping the preferred value on render.
2. State is the top panel's share of the available height, a fraction in the range 0 to 1. Clamp it on every render so each panel keeps at least a minimum height (a constant of about 120px, the implementer's choice), measured against the container's current height.
3. Drag with Pointer Events (onPointerDown, then setPointerCapture, pointermove, pointerup) so mouse and touch share one code path and the drag continues when the pointer leaves the bar. Set touch-action: none on the bar so a touch drag does not scroll the page. Commit the value to storage on release, not on every move.
4. Make the bar a focusable element with role="separator", aria-orientation="horizontal", aria-valuenow, aria-valuemin, aria-valuemax, and an aria-label, following the WAI-ARIA window splitter pattern. Up and down arrows change the split by a fixed step. Add the visible focus style. Strings go in messages.ts through defineMessages.
5. Persist with useStickyState from src/hooks.ts, under one key not tied to a competency. That hook calls localStorage.getItem and JSON.parse without a guard, so a blocked store or a corrupt value throws on first render. Wrap the read and write in a guard, or add a safe variant, and validate that the stored value is a finite number between 0 and 1.
6. The two panels are the course-search-browse__associations and course-search-browse__container sections of CourseSearchBrowse.tsx; they become the top and bottom slots. Keep the panel area's height as it is today, set by --competency-panel-height in CompetencyAssociationsPanel.scss. The split fills that height. Give each slot min-height: 0 and overflow: auto so each panel scrolls internally.
7. Style with Paragon tokens, and take the bar's look from the Figma component named ResizeBar. If the design needs a value no token supplies, flag it before implementation.

Test cases the implementation must cover:

• Pointer drag and arrow keys change the split in the right direction by the same amount for both panels.
• The split clamps at each panel's minimum height, through both the drag and the keyboard paths.
• The split is read from storage on mount and written on release.
• Missing, unparsable, non-numeric, and out-of-range stored values fall back to 0.5.
• A throwing localStorage does not break rendering.
• The separator exposes the ARIA role, orientation, and value attributes.

Files to create and modify

Additional context

• src/generic/resizable/Resizable.tsx: the existing horizontal ResizableBox, the precedent for clamping and the drag handle.
• src/taxonomy/competency-management/associations/CompetencyAssociationsPanel.scss: defines --competency-panel-height, the fixed height the split fills.