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

12
extension/src/popup/styles.css
View File

@@ -1244,3 +1244,15 @@ textarea {
width: 20px;
text-align: center;
}
/* --- Setup wizard mode picker (Step 0) --- */
.mode-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.mode-card {
text-align: left; padding: 16px; border: 1px solid #30363d;
border-radius: 8px; background: transparent; cursor: pointer;
font: inherit; color: inherit; transition: border-color 0.15s, background 0.15s;
}
.mode-card:hover { border-color: #58a6ff; }
.mode-card.active { border-color: #58a6ff; background: rgba(88,166,255,0.08); }
.mode-card-title { font-weight: 600; margin-bottom: 4px; font-size: 14px; }
.mode-card-blurb { color: #8b949e; font-size: 12px; margin: 0; line-height: 1.5; }

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';