UI consolidation: always-editable cards, shared card parts, Settings list with upgrades panel

[ToothyDev]

What this does

Cards on every tab are now always editable and built from shared parts, and Settings is now a property list with a panel for the picked property's upgrades. Properties come in order of how often they're used.

• Always-editable cards (Businesses, Safes):
  • There is no Edit button and no separate edit view. You can click any value to type it, and drag any bar. The drag handle shows only while the pointer is over the card.
  • At 0% or 100% the handle can be grabbed anywhere on it, including the half that sticks out past the bar.
  • Units, "of $cap" and goods values stay next to the editable values.
  • The Full, Raided and popularity Maxed buttons are gone. Sold, Supplies bought, Collected and the popularity boosts stay.
• Gear in the title bar: a small settings button at the right end of each card's title bar. Cards no longer have a footer.
• Undo where you pressed: "Boost started. [Undo]" shows for 15 seconds under the Acid Lab boost. The Timers cards and the Overview use the same shared UndoStatus. Undo puts back what the press replaced.
• Money Fronts: each front's bar has its three actions right under it, as small buttons in one row: +10% Laundering, +10% Faber, Legal job.
• Order by use (USE_ORDER in data/properties.ts): Settings and the default card order on each tab.
  • Acid Lab, Bunker and Nightclub first.
  • Then the MC businesses by money per hour at full upgrades: Cocaine, Meth, Cash, Weed, Documents.
  • Then the fronts and the safes. The Mansion and the Bail Enforcement Office are last.
  • Card orders you've already saved stay as they are.
• Shared parts:
  • Hint: two sizes.
  • Note: warn, quiet and good tones.
  • MarkOwned: the "Mark what you own in Settings" line. The link opens Settings on the right property.
  • Button small.
  • --card-width: one width for every card grid.
  • One checkbox style, in app.css.
• Settings:
  • Every property gets a row that keeps its height, with a gear in front of the name, a one-line upgrade summary, and Owned/Running buttons that keep their width and place.
  • The picked property's upgrades open in a panel next to the list, level with the row, with an arrow pointing at it. On phones they open under the row.
  • A property you don't own shows its upgrades greyed out.
  • The other settings form a narrow column on the right.
• Decision 029 (amends 010). upgradeSummary moved to lib/properties.ts. Tests cover both and check that USE_ORDER names every property.

Follow-up: #69 (entering crates for nightclub goods that no technician makes).

Closes #60

How to check it

• Businesses: hover a card and the drag handles appear. Drag a handle that sits at 0% from its outer edge. Start the Acid Lab boost, then press Undo.
• Safes: the Money Fronts heat rows each take three lines. Collected sits next to the safe value. The Nightclub popularity has only its boost buttons.
• Settings: the list starts with Acid Lab, Bunker, Nightclub and ends with Mansion, Bail Enforcement Office. Mark properties owned and nothing moves. Click a row and its upgrades show next to it.
• Timers → Mansion card (Mansion not owned) → the Settings link opens on the Mansion.

Checklist

• npm run verify passes
• Game data added or changed here has a source (the order is derived from the sourced rates; only the unused Raided event and raids flag were removed)
• README / CLAUDE.md updated if usage or workflow changed

🤖 Generated with Claude Code

[cloudflare-workers-and-pages]

Deploying lsos with    Cloudflare Pages

Latest commit:	b4e54f9
Status:	✅  Deploy successful!
Preview URL:	https://5784371c.lsos-2qs.pages.dev
Branch Preview URL:	https://claude-60-ui-consolidation.lsos-2qs.pages.dev

View logs