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:
+11
-1
@@ -10,6 +10,7 @@
|
||||
import DigitalClaims from './lib/horizon2/DigitalClaims.svelte';
|
||||
import { exportAll, deleteAll } from './lib/storage.js';
|
||||
import { lang, setLang } from './lib/i18n.js';
|
||||
import InfoPanel from './lib/InfoPanel.svelte';
|
||||
|
||||
let currentLang = $state('en');
|
||||
lang.subscribe(v => currentLang = v);
|
||||
@@ -73,7 +74,15 @@
|
||||
{:else if activeTab === 8}<DigitalClaims />
|
||||
{:else if activeTab === 9}
|
||||
<div class="module">
|
||||
<h2>Settings</h2>
|
||||
<div class="module-header">
|
||||
<h2>Settings</h2>
|
||||
<InfoPanel
|
||||
title="Settings"
|
||||
what="Where you control your data and the app's language. Everything you enter in this app stays only on this device — nothing is sent anywhere unless you export it yourself."
|
||||
how="Switch between English and Bahasa Malaysia here. If you ever want a full backup of everything you've entered, export it. If you want to start completely fresh, delete everything — this cannot be undone, so only use it if you really mean it."
|
||||
fields={[]}
|
||||
/>
|
||||
</div>
|
||||
<p class="sub">Your data is stored locally on this device. Nothing is sent to a third party.</p>
|
||||
|
||||
<div class="lang-switch">
|
||||
@@ -132,6 +141,7 @@
|
||||
:global(.btn-danger) { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid rgba(239,68,68,0.4); background: rgba(239,68,68,0.1); color: #EF4444; font-weight: 600; cursor: pointer; margin-top: 12px; }
|
||||
:global(.btn-secondary) { width: 100%; padding: 12px; border-radius: 8px; border: none; background: rgba(255,255,255,0.08); color: #E8E4DC; font-weight: 600; cursor: pointer; }
|
||||
|
||||
.module-header { display: flex; align-items: center; margin-bottom: 4px; }
|
||||
.lang-switch { margin-bottom: 16px; }
|
||||
.lang-label { display: block; font-size: 12px; color: #B8B2A6; margin-bottom: 8px; }
|
||||
.lang-buttons { display: flex; gap: 8px; }
|
||||
|
||||
Reference in New Issue
Block a user