alee/relicario
1
0
Fork 0
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

feat(ext/setup): Step 0 mode picker (new vs attach) + Step 1 back button

Browse Source 
Replace the placeholder Step 0 with two clickable mode-card buttons (create
new vault / attach this device). Picking a card highlights it and enables
the next button; the back button on Step 1 returns to Step 0 without losing
state. Add .mode-card CSS using the existing dark palette (#30363d, #58a6ff).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken
2026-04-27 18:20:24 -04:00
parent 7fa1f2990f
commit a182c1ac5a
2 changed files with 56 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
extension/src/setup/setup.ts
View File

@@ -273,19 +273,50 @@ function render(): void {
}
}
// --- Step 0: Mode picker (placeholder; filled in Task 5) ---
// --- Step 0: Mode picker ---
function renderStep0(): string {
return '<div class="wizard-step"><p>Step 0 (placeholder)</p><button class="btn btn-primary" id="next-btn">next</button></div>';
const isNew = state.mode === 'new';
const isAttach = state.mode === 'attach';
return `
<div class="wizard-step">
<h3>set up relicario</h3>
<p class="muted" style="margin-bottom:16px;">
How are you using relicario on this device?
</p>
<div class="mode-cards">
<button class="mode-card ${isNew ? 'active' : ''}" data-mode="new">
<div class="mode-card-title">create new vault</div>
<p class="mode-card-blurb">
I'm setting up relicario for the first time. This will create a fresh
encrypted vault on a new or empty git repository.
</p>
</button>
<button class="mode-card ${isAttach ? 'active' : ''}" data-mode="attach">
<div class="mode-card-title">attach this device</div>
<p class="mode-card-blurb">
I already have a vault on another device. Connect this browser to it
using my passphrase and reference image.
</p>
</button>
</div>
<div class="form-actions" style="margin-top:24px;">
<button class="btn btn-primary" id="next-btn" ${state.mode ? '' : 'disabled'}>next</button>
</div>
</div>
`;
}
function attachStep0(): void {
// Temporary: jump straight to Step 1 so the wizard remains operable
// for users who already have it open during the refactor. Real Step 0
// is filled in by Task 5.
document.querySelectorAll('.mode-card').forEach((btn) => {
btn.addEventListener('click', () => {
state.mode = (btn as HTMLElement).dataset.mode as 'new' | 'attach';
render();
});
});
document.getElementById('next-btn')?.addEventListener('click', () => {
if (!state.mode) return;
state.step = 1;
state.mode = 'new'; // safe default while picker is stubbed
state.error = null;
render();
});
@@ -338,6 +369,7 @@ function renderStep1(): string {
</div>
${state.hostType === 'gitea' ? giteaInstructions : githubInstructions}
<div class="form-actions">
<button class="btn" id="back-btn">back</button>
<button class="btn btn-primary" id="next-btn">next</button>
</div>
</div>
@@ -345,6 +377,12 @@ function renderStep1(): string {
}
function attachStep1(): void {
document.getElementById('back-btn')?.addEventListener('click', () => {
state.step = 0;
state.error = null;
render();
});
document.querySelectorAll('.toggle-group button').forEach(btn => {
btn.addEventListener('click', () => {
state.hostType = (btn as HTMLElement).dataset.host as 'gitea' | 'github';