Fix: shift+click preserves input value, Ctrl+click adopts value, stable highlight layout

- shift+click now only sets fromUnitId; inputValue is unchanged so all outputs
  recalculate correctly from the original user input
- Ctrl+click is a new gesture that sets both fromUnitId and inputValue to the
  tile's displayed converted value (the "pivot" action)
- highlighted-result block always renders with min-height:8rem so the page
  below it never jumps when a highlight is added or cleared
- hotkey hint updated to document all three click gestures

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Falkan
2026-03-16 22:21:22 -04:00
parent d9489a5db2
commit af5f10a4ec
4 changed files with 27 additions and 11 deletions

View File

@@ -89,9 +89,14 @@
function handleSetInput(id: string) {
// Shift+click: promote result unit to from-unit.
// Re-express the current value in terms of the new from-unit.
// inputValue is NOT changed — outputs recalculate from the same inputValue with the new fromUnitId.
// highlightedUnitId is NOT cleared — the two states are independent.
const convertedValue = convertById(inputValue, fromUnitId, id, units);
fromUnitId = id;
}
function handleCtrlClick(id: string, convertedValue: import('big.js').Big) {
// Ctrl+click: adopt this tile's displayed value as the new inputValue and promote it to from-unit.
// This is the "pivot" gesture.
inputValue = parseFloat(convertedValue.toFixed(FRACTIONAL_DIGITS));
fromUnitId = id;
}
@@ -101,8 +106,8 @@
<title>Humor Units — Converter</title>
</svelte:head>
{#if highlightedResult !== null}
<div class="highlighted-result">
<div class="highlighted-result" aria-live="polite">
{#if highlightedResult !== null}
<button
class="highlight-dismiss"
aria-label="Remove highlight"
@@ -111,8 +116,8 @@
<span class="highlighted-value">{formatBig(highlightedResult.convertedValue)}</span>
<span class="highlighted-label">{highlightedResult.unit.labelPlural}</span>
<span class="highlighted-symbol">{highlightedResult.unit.symbol}</span>
</div>
{/if}
{/if}
</div>
<ConverterCard
{units}
@@ -124,4 +129,5 @@
onunitchange={handleUnitChange}
onhighlight={handleHighlight}
onsetinput={handleSetInput}
onctrlclick={handleCtrlClick}
/>