Add (i) info button to every tab, explained for the average user

New InfoPanel.svelte: shared (i) button next to each module's h2, toggling
a plain-language explainer with three sections — what this tab is, how to
use it, what to enter in each field. One component so tone stays
consistent across all 10 tabs instead of each screen inventing its own
help pattern.

Deliberately avoids fiqh/legal jargon in favor of concrete, everyday
framing (e.g. Hibah explained as "a gift you give right now, while you're
alive" rather than leading with the Arabic term) — written for someone
with no prior estate-planning or Islamic finance background, consistent
with the "convince a 100-year-old grandmother" usability bar already
established for this product.

Wired into: Coverage, Faraid, Assets, Wassiyah, Hibah, Family Waqf,
Nominate, Trigger, Claims (H2), Settings.

e2e-info.cjs: new suite verifying the info button appears, opens a
non-trivial explanation, and closes again on every one of the 10 tabs.
31/31 passing. Re-verified all five prior suites (32/32, 16/16, 12/12,
10/10, 10/10) — 111/111 total, no regressions.
This commit is contained in:
wmj
2026-08-13 18:14:28 +08:00
parent 07b9f4f07a
commit 4d244db6d0
12 changed files with 260 additions and 19 deletions
+16 -2
View File
@@ -17,6 +17,7 @@
// 1-2 week window instead of stacking behind a 2-year probate queue.
import { load, save } from './storage.js';
import { computeCoverage } from './nonprobate.js';
import InfoPanel from './InfoPanel.svelte';
const coverage = computeCoverage();
@@ -96,7 +97,19 @@
</script>
<div class="module">
<h2>Death Trigger &amp; Execution</h2>
<div class="module-header">
<h2>Death Trigger &amp; Execution</h2>
<InfoPanel
title="Death Trigger & Execution"
what="This is what actually fires when someone passes away. It can't be triggered by one person alone (to prevent fraud or a mistake) — you need at least two trusted people to confirm the death, plus a death certificate reference. Once confirmed, the app generates ready-to-file paperwork for every asset you've already covered, so your family can start claiming things within days instead of waiting on a court."
how="Set this up now, while everyone is healthy — name your executor and at least two attestors (people who will confirm the death when it happens). When the time comes, those attestors log in and confirm, someone enters the death certificate number, and the trigger fires — generating a downloadable packet for each covered asset."
fields={[
{ label: 'Executor', hint: 'The person responsible for carrying out your wishes.' },
{ label: 'Attestors', hint: 'At least two people who will confirm the death actually happened — this is a safety check, not a formality.' },
{ label: 'Date of death & death certificate reference', hint: 'Required before the trigger can fire — this ties everything to an official record.' }
]}
/>
</div>
<p class="sub">Set up now, fires at death. This is the mechanism that turns "arranged" into "distributed" — target: days, not the ~2-year Faraid/probate route.</p>
{#if !triggered}
@@ -153,7 +166,8 @@
<style>
.module { padding: 4px 0 40px; }
h2 { font-family: 'DM Serif Display', serif; font-size: 24px; color: #E8E4DC; margin-bottom: 4px; }
.module-header { display: flex; align-items: center; margin-bottom: 4px; }
h2 { font-family: 'DM Serif Display', serif; font-size: 24px; color: #E8E4DC; margin-bottom: 0; }
.sub { font-size: 13px; color: #8A8478; margin-bottom: 18px; line-height: 1.5; }
.setup-card { background: rgba(255,255,255,0.03); border-radius: 12px; padding: 16px; }
.setup-card h3 { font-size: 14px; color: #C9A84C; margin: 16px 0 8px; }