Skip to content

v3.2.1 — Frontend Architecture Refactoring & UI Polish

Latest
Latest

Choose a tag to compare

View all tags
@programmishka programmishka released this 08 Sep 18:16
3.2.1
f9c43fd

Version 3.2.1 focuses on internal frontend quality. The Watchlist UI has been restructured into smaller, clearly defined responsibilities while preserving existing product behavior.

The goal of this release is improved readability, traceability, testability, and maintainability for human developers.

Clearer Frontend Architecture

The main SvelteKit page previously combined page composition with a growing amount of reactive state and workflow lifecycle management.

The frontend now follows a clearer responsibility model:

+page.svelte
    ↓
WatchlistWorkspace
    ↓
watchlistShell
    ↓
watchlistApi
    ↓
HTTP

Presentation remains separated into focused Svelte components, while deterministic filtering, sorting, formatting, and validation continue to live in pure helpers.

Dedicated Watchlist Workspace

A new Svelte 5 rune-based WatchlistWorkspace owns the reactive lifecycle of a single Watchlist workspace, including:

  • server-derived Watchlist state;
  • filter and sort state;
  • investment allocation state;
  • operation and error states;
  • derived visible stock data;
  • busy-state aggregation;
  • Watchlist transition rules;
  • mutation and invalidation workflows.

The Workspace is instantiated per page instance rather than implemented as global mutable state, preserving clear SvelteKit/SSR isolation.

watchlistShell remains stateless application orchestration, while watchlistApi remains responsible solely for HTTP communication.

Directly Testable State Transitions

Important frontend state transitions that were previously exercised mainly through end-to-end tests can now be tested directly through the Workspace API.

This includes behavior such as:

  • filter and sort resets when changing the active Watchlist;
  • allocation invalidation after relevant mutations;
  • state preservation after failed operations;
  • Target Price partial-success handling;
  • mutation serialization;
  • successful and failed Watchlist/stock operations.

The new Workspace has dedicated unit coverage while the existing Playwright suite continues to verify full browser integration.

Smaller, Cohesive Components

Several UI responsibilities were extracted from the route into focused components:

  • StockAddForm
  • InvestmentAllocationControls
  • StockPresentation

StockPresentation now owns the responsive switch between the desktop table and Stock Cards, including the established 1120px breakpoint.

Local interaction state remains local where appropriate—for example Target Price editing, Watchlist navigation disclosure, and responsive presentation state.

As a result, +page.svelte is now primarily a composition root rather than the implementation location for the complete workspace lifecycle.

Stable Destructive Action Icons

Font- and emoji-dependent delete symbols have been replaced with deterministic SVG icons.

This improves rendering consistency for:

  • stock removal in Table and Card views;
  • active Watchlist removal.

The controls retain their existing accessible names, busy states, keyboard behavior, focus styling, and destructive-action semantics while providing more reliable sizing and centering across platforms.

No Product Behavior Changes

This release is intentionally focused on maintainability and presentation robustness.

It does not change:

  • Watchlist business rules;
  • investment-allocation calculations;
  • market-data or FX behavior;
  • REST API contracts;
  • persistence;
  • authentication.

The existing unit and Playwright test suites continue to protect the application's established behavior.

Assets 2
Loading