Add user onboarding, keyboard overlay, and DB support

Introduce first-time user onboarding and a navigable on-screen keyboard, plus persistent user storage via a bundled rusqlite database and Tauri API. Backend: add rusqlite dependency, DB initialization in tauri setup, schema migration/backfill for users, and two Tauri commands (get_first_user, create_user) with input sanitization and structured UserRecord. Frontend: add core/users.js (invoke + localStorage fallback), integrate user state initialization, add user setup view/styles and keyboard overlay (JS/CSS), wire views and navigation to show onboarding when needed, and update lock view behavior to coordinate onboarding and passkey flow. Also add @tauri-apps/api dependency and update package/Cargo lock files accordingly.
This commit is contained in:
2026-04-08 21:39:18 +12:00
parent c890636f03
commit f41768c6a9
15 changed files with 1022 additions and 13 deletions
+12
View File
@@ -6,10 +6,12 @@
<link rel="stylesheet" href="/styles/base.css" />
<link rel="stylesheet" href="/styles/components.css" />
<link rel="stylesheet" href="/views/lock/lock.css" />
<link rel="stylesheet" href="/views/onboarding/userSetup.css" />
<link rel="stylesheet" href="/views/home/home.css" />
<link rel="stylesheet" href="/views/settings/settings.css" />
<link rel="stylesheet" href="/views/library/library.css" />
<link rel="stylesheet" href="/views/overlays/powerMenu.css" />
<link rel="stylesheet" href="/views/overlays/keyboard.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nebula Shell</title>
<script type="module" src="/main.js" defer></script>
@@ -27,6 +29,7 @@
</div>
<main id="app" class="app-shell"></main>
<div id="overlay-root"></div>
<div id="keyboard-root"></div>
<footer class="app-footer" id="app-footer"></footer>
<template id="global-hints-template">
@@ -43,5 +46,14 @@
<span class="hint"><span data-glyph="menu"></span> Power Menu</span>
</div>
</template>
<template id="keyboard-hints-template">
<div class="hint-row">
<span class="hint"><span data-glyph="accept"></span> Type</span>
<span class="hint"><span data-glyph="back"></span> Backspace</span>
<span class="hint"><span data-glyph="l1"></span>/<span data-glyph="r1"></span> Field</span>
<span class="hint"><span data-glyph="menu"></span> Done</span>
</div>
</template>
</body>
</html>