fix: ux issues

Author: coodos

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

@@ -67,10 +67,10 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
                     className="text-secondary"
                     icon={CheckmarkBadge02Icon}
                 />
-                <Button.Icon
+                        <Button.Icon
                     icon={Copy01Icon}
-                    iconColor={"white"}
-                    strokeWidth={2}
+                            iconColor={"white"}
+                            strokeWidth={2}
                     onclick={async () => {
                         if (userId) {
                             try {
@@ -82,7 +82,7 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
                             }
                         }
                     }}
-                />
+                        />
             {:else if variant === "ePassport"}
                 <p
                     class="bg-white text-black flex items-center leading-0 justify-center rounded-full h-7 px-5 text-xs font-medium"

infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte

@@ -11,7 +11,6 @@ interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
     children?: Snippet;
     handleSwipe?: (isOpen: boolean | undefined) => void;
     dismissible?: boolean;
-    fullScreen?: boolean;
 }
 
 let drawerElem: HTMLDivElement;
@@ -22,7 +21,6 @@ let {
     children = undefined,
     handleSwipe,
     dismissible = true,
-    fullScreen = false,
     ...restProps
 }: IDrawerProps = $props();
 
@@ -50,20 +48,11 @@ const swipe = swipeResult.swipe as any;
 //     isPaneOpen = false;
 // };
 
-// Initialize pane - destroy and recreate when fullScreen changes
+// Initialize pane
 $effect(() => {
     if (!drawerElem) return;
     
-    // Destroy existing pane if it exists
-    if (pane) {
-        pane.destroy();
-    }
-    
-    const screenHeight = window.innerHeight;
-    const fullScreenHeight = Math.floor(screenHeight * 0.8); // 80vh
-    
     pane = new CupertinoPane(drawerElem, {
-        fitHeight: fullScreen,
         backdrop: true,
         backdropOpacity: dismissible ? 0.5 : 0.8,
         backdropBlur: true,
@@ -77,31 +66,12 @@ $effect(() => {
                 isPaneOpen = false;
             },
         },
-        breaks: fullScreen
-            ? {
-                  top: { enabled: true, height: fullScreenHeight },
-              }
-            : {
-                  bottom: { enabled: true, height: 250 },
-              },
-        initialBreak: fullScreen ? "top" : "bottom",
+        breaks: {
+            bottom: { enabled: true, height: 250 },
+        },
+        initialBreak: "bottom",
     });
 
-    // Add class to pane element based on fullScreen prop
-    // Use setTimeout to ensure pane element is created
-    setTimeout(() => {
-        const paneElement = document.querySelector(".pane") as HTMLElement;
-        if (paneElement) {
-            if (fullScreen) {
-                paneElement.classList.add("drawer-fullscreen");
-                paneElement.classList.remove("drawer-normal");
-            } else {
-                paneElement.classList.add("drawer-normal");
-                paneElement.classList.remove("drawer-fullscreen");
-            }
-        }
-    }, 0);
-
     return () => {
         if (pane) {
             pane.destroy();
@@ -114,53 +84,7 @@ $effect(() => {
     if (!pane || !drawerElem) return;
 
     if (isPaneOpen) {
-        // Ensure pane exists before presenting
-        if (!pane.pane || !document.querySelector(".pane")) {
-            // Recreate pane if it was destroyed
-            const screenHeight = window.innerHeight;
-            const fullScreenHeight = Math.floor(screenHeight * 0.8);
-            pane.destroy();
-            pane = new CupertinoPane(drawerElem, {
-                fitHeight: fullScreen,
-                backdrop: true,
-                backdropOpacity: dismissible ? 0.5 : 0.8,
-                backdropBlur: true,
-                bottomClose: dismissible,
-                buttonDestroy: false,
-                showDraggable: dismissible,
-                upperThanTop: true,
-                events: {
-                    onBackdropTap: () => {
-                        pane?.destroy();
-                        isPaneOpen = false;
-                    },
-                },
-                breaks: fullScreen
-                    ? {
-                          top: { enabled: true, height: fullScreenHeight },
-                      }
-                    : {
-                          bottom: { enabled: true, height: 250 },
-                      },
-                initialBreak: fullScreen ? "top" : "bottom",
-            });
-        }
-        
         pane.present({ animate: true });
-        
-        // Update class after presenting
-        setTimeout(() => {
-            const paneEl = document.querySelector(".pane") as HTMLElement;
-            if (paneEl) {
-                if (fullScreen) {
-                    paneEl.classList.add("drawer-fullscreen");
-                    paneEl.classList.remove("drawer-normal");
-                } else {
-                    paneEl.classList.add("drawer-normal");
-                    paneEl.classList.remove("drawer-fullscreen");
-                }
-            }
-        }, 0);
     } else {
         // Don't destroy, just hide - this keeps the pane available
         if (pane.pane) {
@@ -174,7 +98,7 @@ $effect(() => {
     {...restProps}
     use:swipe
     bind:this={drawerElem}
-    class={cn(restProps.class, fullScreen ? "drawer-fullscreen" : "drawer-normal")}
+    class={cn(restProps.class)}
 >
     <div class="px-6">
         {@render children?.()}
@@ -187,13 +111,9 @@ $effect(() => {
         left: 50% !important;
         transform: translateX(-50%) !important;
         background-color: var(--color-white) !important;
-        overflow-y: auto !important; /* vertical scroll if needed */
-        overflow-x: hidden !important; /* prevent sideways scroll */
-        -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
-    }
-
-    :global(.pane.drawer-normal),
-    :global(.pane:not(.drawer-fullscreen)) {
+        overflow-y: auto !important;
+        overflow-x: hidden !important;
+        -webkit-overflow-scrolling: touch;
         width: 95% !important;
         max-height: 600px !important;
         min-height: 250px !important;
@@ -204,18 +124,6 @@ $effect(() => {
         padding-block-end: 20px !important;
     }
 
-    :global(.pane.drawer-fullscreen) {
-        width: 100% !important;
-        max-height: 80vh !important;
-        min-height: 80vh !important;
-        height: 80vh !important;
-        bottom: 0 !important;
-        top: auto !important;
-        border-radius: 0 !important;
-        padding-block-start: 0 !important;
-        padding-block-end: 0 !important;
-    }
-
     :global(.move) {
         display: none !important;
         margin-block: 6px !important;

infrastructure/eid-wallet/src/routes/(app)/scan-qr/+page.svelte

@@ -100,8 +100,8 @@ $effect(() => {
 
 async function handleAuthDrawerDecline() {
     // Cancel button always navigates to main dashboard
-    setCodeScannedDrawerOpen(false);
-    await goto("/main");
+        setCodeScannedDrawerOpen(false);
+        await goto("/main");
 }
 
 function handleAuthDrawerOpenChange(value: boolean) {
@@ -121,8 +121,8 @@ function handleLoggedInDrawerOpenChange(value: boolean) {
 
 async function handleSigningDrawerDecline() {
     // Cancel button always navigates to main dashboard
-    setSigningDrawerOpen(false);
-    await goto("/main");
+        setSigningDrawerOpen(false);
+        await goto("/main");
 }
 
 function handleSigningDrawerOpenChange(value: boolean) {

infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte

@@ -170,9 +170,8 @@ function watchEventStream(id: string) {
             SelfiePic.set(null);
         }
         verifStep.set(3);
-        // Navigate to verify page and show drawer with results immediately
-        showVeriffModal = true;
-        goto("/verify");
+        // Data is now available in stores for selfie page to use
+        // Don't navigate - stay on selfie page which will show results
     };
 }
 
@@ -254,11 +253,6 @@ onMount(async () => {
     globalState = getContext<() => GlobalState>("globalState")();
     // handle verification logic + sec user data in the store
 
-    // If verification is complete (step 3), show drawer immediately
-    if ($verifStep === 3) {
-        showVeriffModal = true;
-    }
-
     // Provide showVeriffModal context to child components
     setContext("showVeriffModal", {
         get value() {
@@ -269,6 +263,19 @@ onMount(async () => {
         },
     });
 
+    // Provide verification data context for selfie page
+    setContext("verifyData", {
+        get person() {
+            return person;
+        },
+        get document() {
+            return document;
+        },
+        get websocketData() {
+            return websocketData;
+        },
+    });
+
     // Check hardware key support first
     await checkHardwareKeySupport();
 
@@ -411,54 +418,6 @@ onMount(async () => {
         <div>
             {#if $verifStep === 0}
                 <DocumentType />
-            {:else if loading}
-                <div class="my-20">
-                    <div
-                        class="align-center flex w-full flex-col items-center justify-center gap-6"
-                    >
-                        <Shadow size={40} color="rgb(142, 82, 255);" />
-                        <h3>Generating your eName</h3>
-                    </div>
-                </div>
-            {:else}
-                <div class="flex flex-col gap-6">
-                    {#if $status === "approved"}
-                        <div>
-                            <h3>Your verification was a success</h3>
-                            <p>You can now continue on to create your eName</p>
-                        </div>
-                    {:else if $status === "duplicate"}
-                        <div>
-                            <h3>Old eVault Found</h3>
-                            <p>
-                                We found an existing eVault associated with your
-                                identity. You can claim it back to continue
-                                using your account.
-                            </p>
-                        </div>
-                    {:else if $status === "resubmission_requested"}
-                        <h3>Your verification failed due to the reason</h3>
-                        <p>{$reason}</p>
-                    {:else}
-                        <h3>Your verification failed</h3>
-
-                        <p>{$reason}</p>
-                    {/if}
-                </div>
-                <div class="flex w-full flex-col pt-4">
-                    {#if $status !== "declined"}
-                        <ButtonAction
-                            class="w-[100%]"
-                            callback={handleContinue}
-                            color="primary"
-                            >{$status === "approved"
-                                ? "Continue"
-                                : $status === "duplicate"
-                                  ? "Claim old eVault"
-                                  : "Retry"}</ButtonAction
-                        >
-                    {/if}
-                </div>
             {/if}
         </div>
     </Drawer>

infrastructure/eid-wallet/src/routes/(auth)/verify/steps/document-type.svelte

@@ -44,8 +44,8 @@ function goBack() {
             <span>go back</span>
         </button>
         <div class="flex-1">
-            <h3>Choose Document Type</h3>
-            <p>Select the type of identity document you will be presenting</p>
+        <h3>Choose Document Type</h3>
+        <p>Select the type of identity document you will be presenting</p>
         </div>
     </div>
 

infrastructure/eid-wallet/src/routes/(auth)/verify/steps/passport.svelte

@@ -246,7 +246,7 @@ onMount(() => {
                         <span>go back</span>
                     </button>
                     <div>
-                        <h3>
+                <h3>
                     {#if $documentType === "passport"}
                         Present your Passport
                     {:else if $documentType === "id"}