Feat/eid wallet redesign

.gitignore

@@ -50,3 +50,6 @@ evault-cache.json
 
 .pnpm-store
 .pnpm-store/
+
+# Per-developer Claude Code permission grants
+.claude/settings.local.json

infrastructure/eid-wallet/package.json

@@ -22,34 +22,30 @@
     "license": "MIT",
     "dependencies": {
         "@auvo/tauri-plugin-crypto-hw-api": "^0.1.0",
+        "@choochmeque/tauri-plugin-notifications-api": "^0.4.3",
         "@didit-protocol/sdk-web": "^0.1.6",
+        "@fontsource-variable/roboto": "^5.2.10",
+        "@fontsource-variable/roboto-condensed": "^5.2.8",
         "@hugeicons/core-free-icons": "^1.0.13",
         "@hugeicons/svelte": "^1.0.2",
-        "@iconify/svelte": "^5.0.1",
-        "@ngneat/falso": "^7.3.0",
         "@tailwindcss/container-queries": "^0.1.1",
         "@tauri-apps/api": "^2.9.0",
         "@tauri-apps/plugin-barcode-scanner": "^2.4.2",
         "@tauri-apps/plugin-biometric": "^2.3.2",
         "@tauri-apps/plugin-deep-link": "^2.4.5",
-        "@choochmeque/tauri-plugin-notifications-api": "^0.4.3",
         "@tauri-apps/plugin-opener": "^2.5.2",
         "@tauri-apps/plugin-store": "^2.4.1",
-        "@veriff/incontext-sdk": "^2.4.0",
-        "@veriff/js-sdk": "^1.5.1",
         "axios": "^1.6.7",
         "blindvote": "workspace:*",
         "clsx": "^2.1.1",
         "dotenv": "^16.5.0",
         "flag-icons": "^7.3.2",
         "graphql-request": "^6.1.0",
         "html5-qrcode": "^2.3.8",
-        "import": "^0.0.6",
         "jose": "^5.2.0",
         "svelte-loading-spinners": "^0.3.6",
         "svelte-qrcode": "^1.0.1",
         "tailwind-merge": "^3.0.2",
-        "ts-md5": "^2.0.1",
         "uuid": "^11.1.0",
         "wallet-sdk": "workspace:*"
     },

infrastructure/eid-wallet/src-tauri/Cargo.toml

@@ -17,6 +17,10 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 [build-dependencies]
 tauri-build = { version = "2", features = [] }
 
+[features]
+default = []
+devtools = ["tauri/devtools"]
+
 [dependencies]
 tauri = { version = "2", features = [] }
 tauri-plugin-opener = "2"

infrastructure/eid-wallet/src-tauri/capabilities/desktop.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "desktop-capability",
+  "description": "Capability for the main window on desktop",
+  "windows": [
+    "main"
+  ],
+  "permissions": [
+    "core:default",
+    "opener:default",
+    "store:default",
+    "deep-link:default",
+    "notifications:default",
+    "process:default",
+    "opener:allow-default-urls"
+  ],
+  "platforms": [
+    "windows",
+    "macOS",
+    "linux"
+  ]
+}

infrastructure/eid-wallet/src-tauri/tauri.conf.json

@@ -19,7 +19,8 @@
         ],
         "security": {
             "capabilities": [
-                "mobile-capability"
+                "mobile-capability",
+                "desktop-capability"
             ],
             "csp": null
         }

infrastructure/eid-wallet/src/app.css

@@ -1,12 +1,7 @@
 @import "tailwindcss";
 @import "flag-icons/css/flag-icons.min.css";
-
-@font-face {
-    font-family: "Archivo";
-    src: url("/fonts/Archivo-VariableFont_wdth,wght.ttf") format("truetype");
-    font-weight: 100 900;
-    font-style: normal;
-}
+@import "@fontsource-variable/roboto";
+@import "@fontsource-variable/roboto-condensed";
 
 @layer base {
     /* Typography */
@@ -15,34 +10,35 @@
     }
 
     h2 {
-        @apply text-6xl/[1.5] text-black font-semibold;
+        @apply text-6xl/normal text-black font-semibold;
     }
 
     h3 {
-        @apply text-3xl/[1.5] text-black font-semibold;
+        @apply text-3xl/normal text-black font-semibold;
     }
 
     h4 {
-        @apply text-xl/[1.5] text-black font-semibold;
+        @apply text-xl/normal text-black font-semibold;
     }
 
     p {
-        @apply text-base/[1.5] text-black font-normal;
+        @apply text-base/normal text-black font-normal;
     }
 
     .small {
-        @apply text-xs/[1.5] text-black font-normal;
+        @apply text-xs/normal text-black font-normal;
     }
 }
 
 @theme {
     /* Custom theme */
-    --color-primary: #8e52ff;
-    --color-primary-100: #e8dcff;
-    --color-primary-200: #d2baff;
-    --color-primary-300: #bb97ff;
-    --color-primary-400: #a575ff;
-    --color-primary-500: #8e52ff;
+    --color-primary: #8968ff;
+    --color-primary-50: #cec1ff66;
+    --color-primary-100: #e7e1ff;
+    --color-primary-200: #d0c3ff;
+    --color-primary-300: #b8a4ff;
+    --color-primary-400: #a186ff;
+    --color-primary-500: #8968ff;
 
     --color-secondary: #73efd5;
     --color-secondary-100: #e3fcf7;
@@ -54,41 +50,63 @@
     --color-white: #ffffff;
     --color-gray: #f5f5f5;
 
-    --color-black: #1f1f1f;
-    --color-black-100: #d2d2d2;
-    --color-black-300: #a5a5a5;
-    --color-black-500: #797979;
-    --color-black-700: #4c4c4c;
-    --color-black-900: #1f1f1f;
+    --color-black: #1d2636;
+    --color-black-50: #ebeff5;
+    --color-black-100: #dce0e8;
+    --color-black-300: #b8c0cb;
+    --color-black-500: #788292;
+    --color-black-700: #364052;
+    --color-black-900: #1d2636;
 
     --color-danger: #ff5255;
     --color-danger-100: #ffdcdd;
     --color-danger-200: #ffb1a7;
     --color-danger-300: #ff968e;
     --color-danger-400: #ff7b77;
     --color-danger-500: #ff5255;
+
+    --color-card-alternative: #f2f5fa;
+
+    /* Success / verified-state palette — used by the verified-ID chip and
+       the Legal ID accordion. Mirrors the lime scale we were reaching for. */
+    --color-success: #84cc16;
+    --color-success-100: #ecfccb;
+    --color-success-200: #d9f99d;
+    --color-success-300: #c0f77c;
+    --color-success-500: #84cc16;
+    --color-success-900: #365314;
+
+    /* Typography */
+    --font-sans: "Roboto Variable", sans-serif;
+    --font-condensed: "Roboto Condensed Variable", sans-serif;
+
+    /* Display size — Greeting h1/h2 and the NameInput field. */
+    --text-display: 40px;
+    --text-display--line-height: 1;
+
+    /* Micro chip / badge label — verified/unverified pills, notification
+       count, the small checkmark on the Legal ID avatar. */
+    --text-chip: 10px;
+    --text-chip--line-height: 1.2;
+
+    /* Pill button label — ADD / INVITE / REPLACE buttons. */
+    --text-pill: 13px;
+    --text-pill--line-height: 1.2;
+
+    /* Standard elevation used across the main-page cards. */
+    --shadow-card: 0px 4px 19.9px 0px #00000024;
 }
 
 body {
-    font-family: "Archivo", sans-serif;
-    /* padding-top: env(safe-area-inset-top); */
-    /* padding-bottom: env(safe-area-inset-bottom); */
     padding-left: env(safe-area-inset-left);
     padding-right: env(safe-area-inset-right);
-    background-color: var(--color-primary);
 }
 
 /* Ensure background remains correct during transitions */
 :root[data-transition]::view-transition-group(root),
 :root[data-transition]::view-transition-old(root),
 :root[data-transition]::view-transition-new(root) {
-    background-color: white !important; /* Default to white */
-}
-
-.dark:root[data-transition]::view-transition-group(root),
-.dark:root[data-transition]::view-transition-old(root),
-.dark:root[data-transition]::view-transition-new(root) {
-    background-color: #0b0d13 !important; /* Use dark background in dark mode */
+    background-color: white !important;
 }
 
 /* Prevent flickering */
@@ -155,18 +173,24 @@ body {
     }
 }
 
-:root[data-transition]::view-transition-old(root) {
-    animation: 400ms ease-out both fade-out;
+/* Forward (data-transition="left"): the NEW page slides in from the right,
+   covering the OLD which stays put. */
+:root[data-transition="left"]::view-transition-old(root) {
+    animation: none;
 }
-
-:root[data-transition="right"]::view-transition-new(root) {
+:root[data-transition="left"]::view-transition-new(root) {
     animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
     position: relative;
     z-index: 1;
 }
 
-:root[data-transition="left"]::view-transition-new(root) {
-    animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+/* Backward (data-transition="right"): the OLD page slides out to the right,
+   revealing the NEW page underneath which stays put. */
+:root[data-transition="right"]::view-transition-new(root) {
+    animation: none;
+}
+:root[data-transition="right"]::view-transition-old(root) {
+    animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
     position: relative;
     z-index: 1;
 }

infrastructure/eid-wallet/src/app.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1.0, user-scalable=no"/>
-    <link rel="preload" href="/fonts/Archivo-VariableFont_wdth,wght.ttf" as="font" type="truetype" crossorigin="anonymous">
     <title>Tauri + SvelteKit + Typescript App</title>
     %sveltekit.head%
   </head>

infrastructure/eid-wallet/src/lib/actions/keyboardInset.ts

@@ -0,0 +1,47 @@
+/** Exposes the soft keyboard's height as `--kb-inset` on the node, and locks
+ *  document scroll while mounted so the page can't be panned when the
+ *  keyboard pushes the layout viewport past the visual viewport. */
+export function keyboardInset(node: HTMLElement) {
+    const vv = window.visualViewport;
+
+    const update = () => {
+        if (!vv) {
+            node.style.setProperty("--kb-inset", "0px");
+            return;
+        }
+        const inset = Math.max(0, window.innerHeight - vv.height);
+        node.style.setProperty("--kb-inset", `${inset}px`);
+    };
+
+    const html = document.documentElement;
+    const body = document.body;
+    const prevHtmlOverflow = html.style.overflow;
+    const prevBodyOverflow = body.style.overflow;
+    const prevHtmlOverscroll = html.style.overscrollBehavior;
+    const prevBodyOverscroll = body.style.overscrollBehavior;
+    html.style.overflow = "hidden";
+    body.style.overflow = "hidden";
+    html.style.overscrollBehavior = "none";
+    body.style.overscrollBehavior = "none";
+
+    const blockTouchMove = (e: TouchEvent) => {
+        if (e.touches.length === 1) e.preventDefault();
+    };
+    document.addEventListener("touchmove", blockTouchMove, { passive: false });
+
+    vv?.addEventListener("resize", update);
+    vv?.addEventListener("scroll", update);
+    update();
+
+    return {
+        destroy() {
+            vv?.removeEventListener("resize", update);
+            vv?.removeEventListener("scroll", update);
+            document.removeEventListener("touchmove", blockTouchMove);
+            html.style.overflow = prevHtmlOverflow;
+            body.style.overflow = prevBodyOverflow;
+            html.style.overscrollBehavior = prevHtmlOverscroll;
+            body.style.overscrollBehavior = prevBodyOverscroll;
+        },
+    };
+}

infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.svelte

@@ -1,33 +1,53 @@
 <script lang="ts">
-import * as Button from "$lib/ui/Button";
+import ChevronIcon from "$lib/ui/icons/ChevronIcon.svelte";
 import { cn } from "$lib/utils";
-import { ArrowLeft01Icon, Settings02Icon } from "@hugeicons/core-free-icons";
 import type { HTMLAttributes } from "svelte/elements";
 interface IHeroProps extends HTMLAttributes<HTMLElement> {
     title?: string;
+    /** Optional secondary line under the title (e.g. "App Version 1.0.2"). */
+    subtitle?: string;
     titleClasses?: string;
+    /** Back-chevron color — used by /scan-qr where the nav sits on a dark
+     *  camera surface. */
     iconColor?: string;
+    /** Optional override for the back chevron. Defaults to window.history.back(). */
+    onback?: () => void;
 }
 const {
     title,
+    subtitle,
     titleClasses,
-    iconColor = "black",
+    iconColor,
+    onback,
     ...restProps
 }: IHeroProps = $props();
-const baseClasses = "w-full relative flex justify-center h-14 items-center";
+
+function handleBack() {
+    if (onback) onback();
+    else window.history.back();
+}
+const baseClasses = "w-full relative flex justify-center items-center py-2";
 </script>
-    
+
 <nav {...restProps} class={cn(baseClasses, restProps.class)}>
-    <Button.Icon 
-        icon={ArrowLeft01Icon}
-        iconSize="md"
-        {iconColor}
-        class="absolute left-2"
-        onclick={() => window.history.back()}
-    />
-    <h4 class={cn(titleClasses)}>
-        {title}
-    </h4>
+    <button class="absolute left-0 top-2 p-4 bg-black-50 rounded-full"
+        onclick={handleBack}
+    >
+        <ChevronIcon size={13} color={iconColor} />
+    </button>
+    <div class="flex flex-col items-center">
+        <h4 class={cn(["text-2xl leading-tight", titleClasses])}>
+            {title}
+        </h4>
+        <!-- Always rendered so the nav keeps a constant height. Pages
+             without a subtitle pass undefined and we render an nbsp to
+             reserve the line. Without this, navigating from a page with
+             a subtitle (e.g. /settings) to one without (e.g. /settings/pin)
+             would shift the content up. -->
+        <p class="text-black-500 leading-tight mt-0.5">
+            {subtitle ?? " "}
+        </p>
+    </div>
 </nav>
 
 <!-- 
@@ -40,4 +60,4 @@ const baseClasses = "w-full relative flex justify-center h-14 items-center";
 @usage
 ```svelte
 <AppNav title="My Title" />
- -->
+ -->