Skip to content

fix(native): match the web app's cards, tables, sidebar, chart tooltips and sankey - #440

Closed
EraPartner wants to merge 1 commit into
mainfrom
claude/project-thread-8jt6md
Closed

fix(native): match the web app's cards, tables, sidebar, chart tooltips and sankey#440
EraPartner wants to merge 1 commit into
mainfrom
claude/project-thread-8jt6md

Conversation

@EraPartner

@EraPartner EraPartner commented Nov 13, 2026

Copy link
Copy Markdown
Owner

Requested by EraPartner · project thread

Summary

Visual parity fixes for the SwiftUI app against the Electron app, from a walk through both Demo apps.

  • Cards: the Core Animation card drew an opaque black shadow under its glass (shadowColor = nil with opacity 1), which made cards dark and non-transparent. Shadows are now cut out under the card as CSS box-shadow is.
  • Background: the aurora wash radius was twice the web value, and the grain was a blotchy low-frequency tile. Both now follow the web values.
  • Sidebar: the system List selection and hover highlight (accent blue) is replaced by the web row states: emerald active pill, neutral hover.
  • Tables: new VisionTable layout fills the card like table.w-full with automatic column widths. Used by data source health, database maintenance, endpoints, exchange rates and the monthly returns heat map. Planned payments, tax and research compare tables fill their cards too.
  • Bar chart hover: the insights charts show the web floating tooltip instead of a readout panel under the chart.
  • Forecast diagnostics: rebuilt to the web layout (accuracy table, rank badge, sparkline, ensemble weight bars).
  • Sankey: only the hovered node or link highlights, the hit area is the bar itself, and hovering no longer redraws the page.
  • Ticker: the portfolio ticker follows the web tape (visible by default, natural tile widths, manage popover).

Type of change

  • fix — bug fix

Checklist

  • Lint is clean for the native sources (bun scripts/native-lint.ts: native-lint ok)
  • Conventional Commit title
  • No leftover debug code
  • i18n: nav.hideSection and nav.showSection added to apps/native/i18n-keys.txt, string catalog regenerated

Architecture & data

  • No architectural change
  • No API change
  • No schema change

Verification

  • bun scripts/native-lint.ts: native-lint ok
  • bun run native:test-generators: 74 pass, 0 fail
  • The Swift sources were not compiled locally (no macOS toolchain in the cloud). The swift CI job is the compile check.
  • Not yet looked at on a Mac.

Residual risk & follow-ups

  • The web card's backdrop saturation has no SwiftUI equivalent and is not reproduced.
  • The Demo seed has only manual price providers, so the ticker shows nothing in either Demo app.

Generated by Claude Code

@claude
fix(native): match the web app's cards, tables, sidebar, chart toolti…
0fb8dfc 
…ps and sankey

Cards no longer draw an opaque shadow under their glass, the aurora wash and
grain follow the web values, the sidebar uses the web row states instead of
the system list highlight, tables fill their cards through a shared
VisionTable layout, the insights bar chart shows the web floating tooltip,
the sankey highlights only the hovered element, the forecast diagnostics
follow the web layout and the portfolio ticker follows the web tape.

Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaKt8X8tTpztJkkqNjD
@EraPartner EraPartner self-assigned this Nov 13, 2026
@EraPartner EraPartner mentioned this pull request Nov 14, 2026
Merged
3 of 4 tasks
EraPartner added a commit that referenced this pull request Nov 14, 2026
@EraPartner @claude
fix(native): make the broken Swift controls from the UI audit work (#441
6ab5605 
)

- Compare: the symbol search popup now sits above the empty-state card,
  so its rows take clicks; results carry the web's leading plus icon.
- Payees and other paged LocalDataTables: an end marker asks for the next
  page again after each page, so the table no longer stops at 50 of 53.
- Analysis workspace: the Refine card renders without a result, as on the
  web, so Prepare and Calculate have sections to open; Present is enabled.
- Forecast diagnostics: take the web layout from draft PR #440 (accuracy
  table with method colours, rank badges and MAE sparklines; multicolour
  ensemble weight bars).
- Tooltips: the anchor view is transparent to the mouse, so it cannot take
  a click meant for the control (Planned header menu).
- Insights: a tab click selects the tab at once, before the route change.
- Disclosures: a click anywhere on the title row toggles, like <details>.

Claude-Session: https://claude.ai/code/session_018QJtaJarBqP17meJGcCBkv

Co-authored-by: Claude <noreply@anthropic.com>
@EraPartner EraPartner mentioned this pull request Nov 14, 2026
Merged
4 tasks done
EraPartner added a commit that referenced this pull request Nov 14, 2026
@EraPartner @claude
fix(native): match the web app's hover, tables, sidebar and menus (UI…
78f19ce 
… audit batch 2) (#442)

* fix(native): sidebar row states, full-width tables, chart hover cards and sankey hover from #440

Takes the parts of draft PR #440 that are in this audit batch (K5, K6, K7, K9):
sidebar rows with the web's emerald active pill and neutral hover, VisionTable
layouts that fill their cards, the floating ChartTooltip on the timeline charts,
and the Sankey hover. Leaves out #440's card, aurora and ticker changes.
The expanded sidebar rows and the collapse/logo buttons lose their tooltip, as
on the web (tooltips only on the collapsed rail).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaJCKqt1ZHb1c3miwSJ

* fix(native): hover cards, row hover, in-page menus, settings rows and sheet scrim

UI audit batch 2 (TS app is the reference):
- Forecast "Projected value range": floating ChartTooltip with ring markers
  instead of a readout under the chart (S-49).
- Insights categories donut: hovered slice worked out from the pointer and
  written straight to the selection; centre shows swatch, name and amount (S-33).
- VisionTable and LocalDataTable rows get the TableRow hover band (S-42, S-59).
- New VisionMenu: the web DropdownMenu as an in-page glass popover with item
  icons, destructive items in red and helper lines; used for the row and
  header "..." menus (S-61, S-62).
- Settings rows keep the control right of the label; rows with a footnote
  no longer fall back to the stacked layout (S-60).
- A page's dialog or sheet now dims and blurs the sidebar and hides the API
  pill (S-10, S-11).
- Database maintenance rows use the web cell padding (S-57).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaJCKqt1ZHb1c3miwSJ

* refactor(native): drop the unused sidebar selection pill

The sidebar rows draw their own surface (SidebarRowButtonStyle) since the
List was replaced, so SidebarSelectionPill had no caller left.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaJCKqt1ZHb1c3miwSJ

---------

Co-authored-by: Claude <noreply@anthropic.com>
@EraPartner EraPartner mentioned this pull request Nov 14, 2026
Merged
5 tasks done
EraPartner added a commit that referenced this pull request Nov 14, 2026
@EraPartner @claude
fix(native): match the web aurora, glass cards, ticker and remaining …
1e20e0c 
…UI audit rows (batch 3) (#444)

* fix(native): match the web aurora, glass cards, ticker tape and Full effects default

UI audit batch 3 (K1, K2, K3, S-48), TS app as the reference:
- Aurora wash ends at the web radius and the grain is fine per-pixel noise (from #440).
- Card shadows are cut out under the card like a CSS box-shadow; Full effects cards use the
  same Core Animation layers with the glass-regular gradient on the CSS gradient line, and
  the dark Full-effects frame is --glass-border/0.08 as in the cascade.
- Ticker starts active (it never fetched quotes before the scroll view reported it), natural
  tile widths, edge fade mask, liquid-glass box, hover pauses only the tape, and an empty
  provider id falls back to the symbol as in the model.
- fullEffects reads the ADR-255 auto/on/off value; auto is on for the chosen Standard tier.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaMPi3Hb3LQWjLZBk1B

* fix(native): match web page icons, topbar trigger and title, field focus and report controls

UI audit batch 3: S-06, S-07, S-08, S-65, S-66 and K4 system-colour leaks.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaMPi3Hb3LQWjLZBk1B

* fix(native): match web asset-class tiles, heat map cells, customize dialog height and sankey header

UI audit batch 3: S-36, S-40, S-41, S-68, S-88, S-89 (tile order).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaMPi3Hb3LQWjLZBk1B

* fix(native): match the web About identity card

UI audit batch 3: S-107 (Vision mark, product name, external-link icons).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaMPi3Hb3LQWjLZBk1B

* docs(native): record the auto Full effects default in the shell parity inventory

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaMPi3Hb3LQWjLZBk1B

* fix(native): read the Full effects choice from the JSON settings blob

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaMPi3Hb3LQWjLZBk1B

* fix(native): lay out savings and bond cards like the web SavingsPage

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaMPi3Hb3LQWjLZBk1B

* fix(native): match the portfolio news feed rows to the web NewsItem

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaMPi3Hb3LQWjLZBk1B

* fix(native): write the Last 6 months axis with the web's length-aware compact amounts

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaMPi3Hb3LQWjLZBk1B

* fix(native): show the tax year menu with the web's label, status icons and badges

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaMPi3Hb3LQWjLZBk1B

* fix(native): draw the transactions filter and view menus as the web dropdowns

VisionMenu gains checkbox and radio items (Toggle) and VisionMenuLabel.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaMPi3Hb3LQWjLZBk1B

* fix(native): scroll the net worth daily breakdown rows under a fixed header

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaMPi3Hb3LQWjLZBk1B

* fix(native): animate donut hover like the web DonutChart

The hovered arc grows 4.5 % over 0.42 s out-expo and the centre swaps through a
0.15 s fade out then a 0.15 s fade and scale in; nothing moves under Reduce Motion.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaMPi3Hb3LQWjLZBk1B

* fix(native): style the API inspector pill and panel like the web devtools

Outline pill with elevation-2, monospaced footnote and hover/open colours; opaque
card panel with border and elevation-4, underline tabs, ghost icon buttons, theme
method colours. The Queries tab stays.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaMPi3Hb3LQWjLZBk1B

* fix(native): fade chart tooltips in and out like the web ChartTooltip

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaMPi3Hb3LQWjLZBk1B

* fix(native): hover each Sankey bar and band on its own shape like the SVG

The chart-wide tracker tested node rectangles first and lit a node's whole
section from the band beside it. Each bar and band now tracks its own hover,
bars drawn over bands, labels take no pointer.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaMPi3Hb3LQWjLZBk1B

* fix(native): match the web topbar and traffic-light position

Traffic lights at Electron's trafficLightPosition (20, 20), the 56 pt h-14
topbar with a ghost h-7 sidebar trigger on that centre line, the .app-topbar
veil (gradient, border, highlight, shadow, glide fade), and no system
scroll-edge band under the titlebar.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018QJtaMPi3Hb3LQWjLZBk1B

---------

Co-authored-by: Claude <noreply@anthropic.com>
@EraPartner Claude

EraPartner commented Nov 14, 2026

Copy link
Copy Markdown
Owner Author

Superseded by #444 (merged): its aurora and ticker files were taken over there and the card shadow fix was re-implemented in VisionCardLayers; the rest of this draft landed in #441 and #442. Closing.

Generated by Claude Code

@EraPartner EraPartner closed this Nov 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@EraPartner EraPartner

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@EraPartner @claude