louiswhit/familyHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor settings UI for improved first-time setup experience

Browse Source 
- Introduced conditional display logic for the first-time setup section based on the presence of household members.
- Enhanced navigation with tabbed interface for settings, allowing easier access to different configuration areas.
- Maintained existing functionality while improving layout and user interaction for profile creation.
This commit is contained in:
Louis Whittington 2026-03-31 11:29:57 -05:00
parent 6d10cb4726
commit c9828d8ff3
1 changed files with 240 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
tabs/settings.php
View File

@ -17,6 +17,8 @@ $canManage = count($people) === 0
&& ($activePerson['role'] ?? '') === ROLE_HEAD && ($activePerson['role'] ?? '') === ROLE_HEAD
&& isHohVerified() && isHohVerified()
); );
$hasPeople = count($people) > 0;
$showSetup = !$hasPeople;
$permanenceOptions = [ $permanenceOptions = [
'permanent' => 'Permanent', 'permanent' => 'Permanent',
@ -32,8 +34,25 @@ $permanenceOptions = [
<h2 class="mb-3">Family settings</h2> <h2 class="mb-3">Family settings</h2>
<p class="text-muted">People and chore currency defaults apply across the whole hub. Heads of household verify with a PIN when switching profiles at the top of the page.</p> <p class="text-muted">People and chore currency defaults apply across the whole hub. Heads of household verify with a PIN when switching profiles at the top of the page.</p>
<?php if (count($people) === 0): ?> <div class="row g-4 align-items-start">
<div class="card mb-4 border-primary" id="firstSetupCard"> <div class="col-lg-3">
<div class="nav nav-pills flex-lg-column gap-2" id="settingsSectionTabs" role="tablist" aria-orientation="vertical">
<?php if ($showSetup): ?>
<button class="nav-link active text-start" id="settings-tab-setup" data-bs-toggle="pill" data-bs-target="#settings-pane-setup" type="button" role="tab" aria-controls="settings-pane-setup" aria-selected="true">First-time setup</button>
<?php endif; ?>
<button class="nav-link text-start <?= !$showSetup ? 'active' : '' ?>" id="settings-tab-calendar" data-bs-toggle="pill" data-bs-target="#settings-pane-calendar" type="button" role="tab" aria-controls="settings-pane-calendar" aria-selected="<?= !$showSetup ? 'true' : 'false' ?>">Calendar and dates</button>
<button class="nav-link text-start" id="settings-tab-economy" data-bs-toggle="pill" data-bs-target="#settings-pane-economy" type="button" role="tab" aria-controls="settings-pane-economy" aria-selected="false">Chore economy</button>
<button class="nav-link text-start" id="settings-tab-stores" data-bs-toggle="pill" data-bs-target="#settings-pane-stores" type="button" role="tab" aria-controls="settings-pane-stores" aria-selected="false">Grocery stores</button>
<?php if ($hasPeople): ?>
<button class="nav-link text-start" id="settings-tab-people" data-bs-toggle="pill" data-bs-target="#settings-pane-people" type="button" role="tab" aria-controls="settings-pane-people" aria-selected="false">People</button>
<?php endif; ?>
</div>
</div>
<div class="col-lg-9">
<div class="tab-content" id="settingsSectionTabContent">
<?php if ($showSetup): ?>
<div class="tab-pane fade show active" id="settings-pane-setup" role="tabpanel" aria-labelledby="settings-tab-setup" tabindex="0">
<div class="card border-primary">
<div class="card-header bg-primary text-white">First-time setup</div> <div class="card-header bg-primary text-white">First-time setup</div>
<div class="card-body"> <div class="card-body">
<p>Create the first <strong>Head of household</strong> profile so you can manage family members and settings.</p> <p>Create the first <strong>Head of household</strong> profile so you can manage family members and settings.</p>
@ -59,13 +78,14 @@ $permanenceOptions = [
</form> </form>
</div> </div>
</div> </div>
</div>
<?php endif; ?> <?php endif; ?>
<div class="tab-pane fade <?= !$showSetup ? 'show active' : '' ?>" id="settings-pane-calendar" role="tabpanel" aria-labelledby="settings-tab-calendar" tabindex="0">
<div class="card mb-4"> <div class="card">
<div class="card-header">Calendar and dates</div> <div class="card-header">Calendar and dates</div>
<div class="card-body"> <div class="card-body">
<p class="text-muted small">Used for the <strong>Calendar</strong> tab agenda (today, due dates, and bill reminders). US timezones only.</p> <p class="text-muted small">Used for the <strong>Calendar</strong> tab agenda (today, due dates, and bill reminders). US timezones only.</p>
<?php if (!$canManage && count($people) > 0): ?> <?php if (!$canManage && $hasPeople): ?>
<p class="text-muted">Switch to a verified Head of household to edit these settings.</p> <p class="text-muted">Switch to a verified Head of household to edit these settings.</p>
<?php endif; ?> <?php endif; ?>
<form id="calendarSettingsForm" class="row g-3"> <form id="calendarSettingsForm" class="row g-3">
@ -128,11 +148,12 @@ $permanenceOptions = [
</form> </form>
</div> </div>
</div> </div>
</div>
<div class="card mb-4"> <div class="tab-pane fade" id="settings-pane-economy" role="tabpanel" aria-labelledby="settings-tab-economy" tabindex="0">
<div class="card">
<div class="card-header">Chore economy</div> <div class="card-header">Chore economy</div>
<div class="card-body"> <div class="card-body">
<?php if (!$canManage && count($people) > 0): ?> <?php if (!$canManage && $hasPeople): ?>
<p class="text-muted">Switch to a verified Head of household to edit these settings.</p> <p class="text-muted">Switch to a verified Head of household to edit these settings.</p>
<?php endif; ?> <?php endif; ?>
<form id="familySettingsForm" class="row g-3"> <form id="familySettingsForm" class="row g-3">
@ -249,11 +270,13 @@ $permanenceOptions = [
</form> </form>
</div> </div>
</div> </div>
</div>
<?php <?php
$storesList = normalizeStoresList(readJsonFile('stores.json')); $storesList = normalizeStoresList(readJsonFile('stores.json'));
?> ?>
<div class="card mb-4"> <div class="tab-pane fade" id="settings-pane-stores" role="tabpanel" aria-labelledby="settings-tab-stores" tabindex="0">
<div class="card">
<div class="card-header">Grocery stores</div> <div class="card-header">Grocery stores</div>
<div class="card-body"> <div class="card-body">
<p class="small text-muted">Each store has its own list in the <strong>Grocery list</strong> tab.</p> <p class="small text-muted">Each store has its own list in the <strong>Grocery list</strong> tab.</p>
@ -293,9 +316,11 @@ $permanenceOptions = [
<?php endif; ?> <?php endif; ?>
</div> </div>
</div> </div>
</div>
<?php if (count($people) > 0): ?> <?php if ($hasPeople): ?>
<div class="card mb-4"> <div class="tab-pane fade" id="settings-pane-people" role="tabpanel" aria-labelledby="settings-tab-people" tabindex="0">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center"> <div class="card-header d-flex justify-content-between align-items-center">
<span>People</span> <span>People</span>
</div> </div>
@ -368,5 +393,9 @@ $permanenceOptions = [
</div> </div>
</div> </div>
</div> </div>
</div>
<?php endif; ?> <?php endif; ?>
</div> </div>
</div>
</div>
</div>