Gonçalo Rodrigues 4b7c01e632 feat(finance): i18n — TOML-based translations for all personal finance templates
Adds a full translation layer (English + European Portuguese) using
BurntSushi/toml with go:embed. Locale detection reads the lang cookie,
falls back to Accept-Language, then defaults to "en". A language switcher
in the nav writes the cookie and redirects back. All 20 personal finance
templates now use {{.T.Get "key"}} for every UI string.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-17 22:32:49 +01:00

171 lines
7.6 KiB
HTML

{{template "base" .}}
{{define "content"}}
{{$d := .}}
<style>
.tab-bar { display:flex; gap:4px; border-bottom:2px solid var(--border); margin-bottom:24px; }
.tab-bar a { padding:8px 18px; font-size:0.9rem; font-weight:600; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all 0.15s; }
.tab-bar a.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-bar a:hover:not(.active) { color:var(--text); }
.people-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:22px 24px; margin-bottom:16px; }
.people-card h3 { margin:0 0 14px; font-size:0.95rem; font-weight:700; }
.form-row { display:flex; gap:10px; }
.form-row input { flex:1; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-size:0.9rem; }
.btn { padding:8px 18px; border:none; border-radius:8px; font-size:0.875rem; font-weight:600; cursor:pointer; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-danger { background:#f44336; color:#fff; font-size:0.8rem; padding:5px 12px; }
.viewer-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:0.875rem; }
.viewer-row:last-child { border-bottom:none; }
.empty-state { padding:32px; text-align:center; color:var(--muted); font-size:0.875rem; }
.stat-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.stat { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:14px 18px; flex:1; min-width:130px; }
.stat label { display:block; font-size:0.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.stat .val { font-size:1.3rem; font-weight:700; }
.goals-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.goal-item { padding:8px 12px; border-bottom:1px solid var(--border); font-size:0.875rem; display:flex; justify-content:space-between; }
.goal-item:last-child { border-bottom:none; }
.badge-committed { display:inline-block; padding:2px 7px; border-radius:20px; font-size:0.7rem; font-weight:600; background:rgba(76,175,80,0.15); color:#4caf50; }
</style>
<h1 style="margin:0 0 20px;">{{$d.T.Get "people.title"}}</h1>
<div class="tab-bar">
<a href="/people?tab=sharing" class="{{if eq $d.Tab "sharing"}}active{{end}}">{{$d.T.Get "people.tab_sharing"}}</a>
<a href="/people?tab=household" class="{{if eq $d.Tab "household"}}active{{end}}">{{$d.T.Get "people.tab_household"}}</a>
</div>
{{if eq $d.Tab "sharing"}}
<div class="people-card">
<h3>{{$d.T.Get "people.sharing.grant_title"}}</h3>
<p style="font-size:0.83rem; color:var(--muted); margin:0 0 14px;">{{$d.T.Get "people.sharing.grant_desc"}}</p>
<form method="post" action="/people?tab=sharing">
<input type="hidden" name="_action" value="share">
<div class="form-row">
<input type="text" name="viewer_id" placeholder="{{$d.T.Get "people.sharing.placeholder_viewer"}}" required>
<button type="submit" class="btn btn-primary">{{$d.T.Get "people.sharing.btn_add"}}</button>
</div>
</form>
</div>
{{if $d.Viewers}}
<div class="people-card">
<h3>{{$d.T.Get "people.sharing.viewers_title"}}</h3>
{{range $d.Viewers}}
<div class="viewer-row">
<span>{{.Email}}</span>
<button class="btn btn-danger" onclick="revokeShare('{{.ID}}')">{{$d.T.Get "people.sharing.btn_revoke"}}</button>
</div>
{{end}}
</div>
{{end}}
{{if $d.Granted}}
<div class="people-card">
<h3>{{$d.T.Get "people.sharing.granted_title"}}</h3>
{{range $d.Granted}}
<div class="viewer-row">
<span style="color:var(--muted);">{{.OwnerID}}</span>
<a href="/?as={{.OwnerID}}" style="font-size:0.8rem; color:var(--accent);">{{$d.T.Get "people.sharing.view_link"}}</a>
</div>
{{end}}
</div>
{{end}}
{{if and (not $d.Viewers) (not $d.Granted)}}
<div class="people-card"><div class="empty-state">{{$d.T.Get "people.sharing.no_sharing_msg"}}</div></div>
{{end}}
{{else}}{{/* household tab */}}
{{if not $d.HasHousehold}}
<div class="people-card" style="max-width:480px;">
<h3>{{$d.T.Get "people.household.link_title"}}</h3>
<p style="font-size:0.83rem; color:var(--muted); margin:0 0 16px;">{{$d.T.Get "people.household.link_desc"}}</p>
<form method="post" action="/people?tab=household">
<input type="hidden" name="_action" value="household">
<div class="form-row">
<input type="email" name="partner_email" placeholder="{{$d.T.Get "people.household.placeholder_email"}}" required>
<button type="submit" class="btn btn-primary">{{$d.T.Get "people.household.btn_link"}}</button>
</div>
</form>
</div>
{{else}}
<div class="people-card" style="display:flex; align-items:center; gap:14px;">
<div style="flex:1;">
<div style="font-size:0.78rem; color:var(--muted); margin-bottom:2px;">{{$d.T.Get "people.household.linked_partner"}}</div>
<div style="font-weight:600;">{{$d.PartnerEmail}}</div>
</div>
<button class="btn btn-danger" onclick="unlinkHousehold()">{{$d.T.Get "people.household.btn_unlink"}}</button>
</div>
<div class="stat-row">
<div class="stat">
<label>{{$d.T.Get "people.household.stat_combined_income"}}</label>
<div class="val" style="color:#4caf50;">€{{cents $d.CombinedIncomeCents}}</div>
</div>
<div class="stat">
<label>{{$d.T.Get "people.household.stat_my_income"}}</label>
<div class="val">€{{cents $d.MyIncomeCents}}</div>
</div>
<div class="stat">
<label>{{$d.T.Get "people.household.stat_partner_income"}}</label>
<div class="val">€{{cents $d.PartnerIncomeCents}}</div>
</div>
<div class="stat">
<label>{{$d.T.Get "people.household.stat_combined_expenses"}}</label>
<div class="val" style="color:#f44336;">€{{cents $d.CombinedExpenseCents}}</div>
</div>
<div class="stat">
<label>{{$d.T.Get "people.household.stat_disposable"}}</label>
<div class="val" style="{{if ge $d.CombinedDisposable 0}}color:#4caf50{{else}}color:#f44336{{end}};">
{{if lt $d.CombinedDisposable 0}}-{{end}}€{{cents (centsAbs $d.CombinedDisposable)}}
</div>
</div>
</div>
{{if or $d.MyGoals $d.PartnerGoals}}
<div class="goals-grid">
<div class="people-card" style="margin-bottom:0;">
<h3>{{$d.T.Get "people.household.your_goals"}}</h3>
{{range $d.MyGoals}}
<div class="goal-item">
<span>{{.Name}}</span>
{{if .Committed}}<span class="badge-committed">{{$d.T.Get "people.household.committed_badge"}}</span>{{end}}
</div>
{{else}}<div style="color:var(--muted); font-size:0.83rem;">{{$d.T.Get "people.household.no_goals"}}</div>{{end}}
</div>
<div class="people-card" style="margin-bottom:0;">
<h3>{{$d.T.Get "people.household.partner_goals"}}</h3>
{{range $d.PartnerGoals}}
<div class="goal-item">
<span>{{.Name}}</span>
{{if .Committed}}<span class="badge-committed">{{$d.T.Get "people.household.committed_badge"}}</span>{{end}}
</div>
{{else}}<div style="color:var(--muted); font-size:0.83rem;">{{$d.T.Get "people.household.no_goals"}}</div>{{end}}
</div>
</div>
{{end}}
{{end}}{{/* HasHousehold */}}
{{end}}{{/* tab */}}
<script>
const CONFIRM_REVOKE = {{$d.T.Get "people.sharing.confirm_revoke" | printf "%q"}};
const CONFIRM_UNLINK = {{$d.T.Get "people.household.confirm_unlink" | printf "%q"}};
function revokeShare(id) {
if (!confirm(CONFIRM_REVOKE)) return;
fetch('/people/' + id + '?kind=share', { method: 'DELETE' })
.then(r => { if (r.ok) location.reload(); });
}
function unlinkHousehold() {
if (!confirm(CONFIRM_UNLINK)) return;
fetch('/people/_?kind=household', { method: 'DELETE' })
.then(r => { if (r.ok) location.href = '/people?tab=household'; });
}
</script>
{{end}}