lfg2025/archy
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases 44 Wiki Activity

fix: mobile onboarding viewport + filebrowser demo fixes

Browse Source 
Onboarding:
- Fixed viewport to use dvh units with position:fixed container
- All views use scrollable glass containers that fit within viewport
- Responsive typography and spacing (mobile-first breakpoints)
- Tighter padding/margins on small screens
- RootRedirect checks localStorage first for instant redirect
- Spinner only appears after 500ms delay to avoid flash

Filebrowser:
- Fix CloudFolder null initialPath crash (watch both useNativeUI + section)
- Remove unused `host` computed (was causing TS error)
- Add mock GET /app/filebrowser/ landing page
- Increase express.json limit to 50mb

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian 2026-03-09 19:32:28 +00:00
parent 4bc0c4b483
commit a6c1820a83
13 changed files with 153 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
neode-ui/mock-backend.js
View File

@ -40,7 +40,7 @@ const corsOptions = {
}
app.use(cors(corsOptions))
app.use(express.json())
app.use(express.json({ limit: '50mb' }))
app.use(cookieParser())
// Mock session storage
@ -1340,6 +1340,15 @@ const MOCK_FILE_CONTENTS = {
'/Documents/backup-log.json': JSON.stringify({ backups: [{ id: 'bkp-2025-03-01', timestamp: '2025-03-01T02:00:00Z', type: 'full', apps: ['bitcoin-knots', 'lnd', 'mempool'], size_mb: 2340, status: 'success' }] }, null, 2),
}
// FileBrowser UI (demo placeholder when launched directly)
app.get('/app/filebrowser/', (req, res) => {
res.type('html').send(`<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>File Browser</title><style>*{margin:0;padding:0;box-sizing:border-box}body{background:#1a1a2e;color:#e0e0e0;font-family:system-ui,sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh}
.card{background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:48px;text-align:center;max-width:400px;backdrop-filter:blur(20px)}
h1{font-size:24px;margin-bottom:12px}p{color:rgba(255,255,255,0.6);font-size:14px;line-height:1.6}</style></head>
<body><div class="card"><h1>File Browser</h1><p>File Browser is running. Use the Cloud page in Archipelago to manage your files.</p></div></body></html>`)
})
// FileBrowser login - return mock JWT
app.post('/app/filebrowser/api/login', (req, res) => {
res.send('"mock-filebrowser-token-demo"')

37
neode-ui/src/style.css
View File

@ -446,6 +446,28 @@ input[type="radio"]:active + * {
overflow-x: hidden;
}
/* Onboarding scroll container — constrains to viewport and scrolls */
.onb-scroll-container {
max-height: calc(100dvh - 2rem);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
/* Mobile: tighter padding and margins for onboarding containers */
@media (max-width: 639px) {
.path-glass-container {
width: calc(100% - 24px);
margin: 12px auto;
padding: 12px;
border-radius: 20px;
gap: 8px;
}
.onb-scroll-container {
max-height: calc(100dvh - 1.5rem);
}
}
/* Choose Your Path - Option Cards */
.path-option-card {
position: relative;
@ -585,6 +607,21 @@ input[type="radio"]:active + * {
font-weight: 600;
}
@media (max-width: 639px) {
.path-action-button {
font-size: 15px;
border-radius: 14px;
}
.path-action-button--skip {
padding: 10px 24px;
font-size: 14px;
}
.path-action-button--continue {
padding: 12px 28px;
font-size: 15px;
}
}
.path-action-button::before {
content: '';
position: absolute;

7
neode-ui/src/views/CloudFolder.vue
View File

@ -217,7 +217,6 @@ interface ContentSection {
initialPath: string
}
const host = computed(() => window.location.hostname)
const origin = computed(() => window.location.origin)
const sections: Record<string, () => ContentSection> = {
@ -285,12 +284,12 @@ const useNativeUI = computed(() => section.value?.nativeUI === true && appRunnin
const iframeUrl = computed(() => section.value?.iframeUrl || '')
// Initialize native file browser when entering a native-UI section
watch(useNativeUI, async (native) => {
if (native && section.value) {
watch([useNativeUI, section], async ([native, sec]) => {
if (native && sec) {
cloudStore.reset()
const ok = await cloudStore.init()
if (ok) {
await cloudStore.navigate(section.value.initialPath)
await cloudStore.navigate(sec.initialPath)
}
}
}, { immediate: true })

4
neode-ui/src/views/OnboardingBackup.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="h-screen flex items-center justify-center p-3 sm:p-4 md:p-6 overflow-hidden">
<div class="min-h-full flex items-center justify-center p-3 sm:p-4 md:p-6">
<!-- Main Glass Container - Scrollable -->
<div class="max-w-[800px] w-full relative z-10 path-glass-container max-h-[calc(100vh-2rem)] sm:max-h-[calc(100vh-3rem)] overflow-y-auto overflow-x-hidden">
<div class="max-w-[800px] w-full relative z-10 path-glass-container onb-scroll-container">
<!-- Header -->
<div class="text-center mb-4 sm:mb-6 flex-shrink-0 px-3 sm:px-4 pt-4 sm:pt-6">
<h1 class="text-xl sm:text-2xl md:text-[26px] font-semibold text-white/96 mb-2 drop-shadow-[0_2px_6px_rgba(0,0,0,0.4)]">

8
neode-ui/src/views/OnboardingDid.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="min-h-screen flex items-center justify-center p-4">
<div class="min-h-full flex items-center justify-center p-3 sm:p-4 md:p-6">
<!-- Main Glass Container -->
<div class="max-w-[800px] w-full relative z-10 path-glass-container">
<div class="max-w-[800px] w-full relative z-10 path-glass-container onb-scroll-container">
<!-- Header (before DID is retrieved) -->
<div v-if="!generatedDid" class="text-center flex-shrink-0">
<h1 class="text-[26px] font-semibold text-white/96 mb-6 drop-shadow-[0_2px_6px_rgba(0,0,0,0.4)]">
<h1 class="text-xl sm:text-2xl md:text-[26px] font-semibold text-white/96 mb-3 sm:mb-6 drop-shadow-[0_2px_6px_rgba(0,0,0,0.4)]">
Your node's identity
</h1>
<p class="text-[20px] text-white/75 leading-relaxed max-w-[600px] mx-auto mb-6">
<p class="text-sm sm:text-base md:text-[20px] text-white/75 leading-relaxed max-w-[600px] mx-auto mb-4 sm:mb-6">
Your node has a Decentralized Identifier (DID) for secure, passwordless authentication.
</p>
</div>

4
neode-ui/src/views/OnboardingDone.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="h-screen flex items-center justify-center p-3 sm:p-4 md:p-6 overflow-hidden">
<div class="min-h-full flex items-center justify-center p-3 sm:p-4 md:p-6">
<!-- Main Glass Container - Scrollable -->
<div class="max-w-[800px] w-full relative z-10 path-glass-container max-h-[calc(100vh-2rem)] sm:max-h-[calc(100vh-3rem)] overflow-y-auto overflow-x-hidden">
<div class="max-w-[800px] w-full relative z-10 path-glass-container onb-scroll-container">
<!-- Success Content -->
<div class="text-center space-y-4 sm:space-y-6 px-3 sm:px-4 py-4 sm:py-6">
<!-- Success Icon -->

20
neode-ui/src/views/OnboardingIdentity.vue
View File

@ -1,21 +1,21 @@
<template>
<div class="min-h-screen flex items-center justify-center p-4">
<div class="max-w-[800px] w-full relative z-10 path-glass-container">
<div class="min-h-full flex items-center justify-center p-3 sm:p-4 md:p-6">
<div class="max-w-[800px] w-full relative z-10 path-glass-container onb-scroll-container">
<!-- Header -->
<div class="text-center flex-shrink-0">
<h1 class="text-[26px] font-semibold text-white/96 mb-6 drop-shadow-[0_2px_6px_rgba(0,0,0,0.4)]">
<div class="text-center flex-shrink-0 px-3 sm:px-4 pt-4 sm:pt-6">
<h1 class="text-xl sm:text-2xl md:text-[26px] font-semibold text-white/96 mb-2 sm:mb-4 drop-shadow-[0_2px_6px_rgba(0,0,0,0.4)]">
Name your identity
</h1>
<p class="text-[20px] text-white/75 leading-relaxed max-w-[600px] mx-auto mb-6">
<p class="text-sm sm:text-base md:text-[20px] text-white/75 leading-relaxed max-w-[600px] mx-auto mb-4 sm:mb-6">
Give your first identity a name and choose how you'll use it. You can create more identities later.
</p>
</div>
<!-- Content -->
<div class="flex flex-col items-center gap-6 mb-6">
<div class="w-full max-w-[600px] space-y-6">
<div class="flex flex-col items-center gap-4 sm:gap-6 mb-4 sm:mb-6 px-3 sm:px-4">
<div class="w-full max-w-[600px] space-y-4 sm:space-y-6">
<!-- Name Input -->
<div class="path-option-card cursor-default px-6 py-6">
<div class="path-option-card cursor-default px-4 py-4 sm:px-6 sm:py-6">
<label class="block text-sm font-semibold text-white/80 mb-3 uppercase tracking-wide">Identity Name</label>
<input
v-model="identityName"
@ -26,7 +26,7 @@
</div>
<!-- Purpose Selection -->
<div class="path-option-card cursor-default px-6 py-6">
<div class="path-option-card cursor-default px-4 py-4 sm:px-6 sm:py-6">
<label class="block text-sm font-semibold text-white/80 mb-3 uppercase tracking-wide">Purpose</label>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
<button
@ -57,7 +57,7 @@
<p v-if="errorMessage" class="text-red-400 text-sm text-center mb-4">{{ errorMessage }}</p>
<!-- Action Buttons -->
<div class="flex gap-4 max-w-[600px] mx-auto flex-shrink-0">
<div class="flex gap-3 sm:gap-4 max-w-[600px] mx-auto flex-shrink-0 px-3 sm:px-4 pb-4 sm:pb-6">
<button
@click="skip"
class="path-action-button path-action-button--skip"

14
neode-ui/src/views/OnboardingIntro.vue
View File

@ -1,25 +1,25 @@
<template>
<div class="min-h-screen flex items-center justify-center p-4">
<div class="min-h-full flex items-center justify-center p-4 sm:p-6">
<div class="max-w-2xl w-full">
<div class="glass-card p-12 pt-20 text-center relative overflow-visible onb-card">
<div class="glass-card p-8 pt-16 sm:p-12 sm:pt-20 text-center relative overflow-visible onb-card">
<!-- Logo - half in, half out of container -->
<div class="absolute -top-10 left-0 right-0 flex justify-center z-10 onb-logo">
<div class="logo-gradient-border w-20 h-20">
<div class="absolute -top-8 sm:-top-10 left-0 right-0 flex justify-center z-10 onb-logo">
<div class="logo-gradient-border w-16 h-16 sm:w-20 sm:h-20">
<AnimatedLogo no-border fit />
</div>
</div>
<h1 class="text-4xl font-bold text-white mb-4 onb-title">
<h1 class="text-2xl sm:text-4xl font-bold text-white mb-3 sm:mb-4 onb-title">
Welcome to Archipelago
</h1>
<p class="text-xl text-white/80 mb-12 max-w-2xl mx-auto onb-tagline">
<p class="text-base sm:text-xl text-white/80 mb-8 sm:mb-12 max-w-2xl mx-auto onb-tagline">
Your personal server for a sovereign digital life
</p>
<button
@click="goToOptions"
class="glass-button px-8 py-4 rounded-lg text-lg font-medium transition-all hover:bg-black/70 hover:border-white/30 onb-cta"
class="glass-button px-6 py-3 sm:px-8 sm:py-4 rounded-lg text-base sm:text-lg font-medium transition-all hover:bg-black/70 hover:border-white/30 onb-cta"
>
Unlock your sovereignty →
</button>

68
neode-ui/src/views/OnboardingOptions.vue
View File

@ -1,81 +1,77 @@
<template>
<div class="min-h-screen flex items-center justify-center p-4 overflow-x-hidden">
<div class="max-w-6xl w-full overflow-x-hidden">
<div class="text-center mb-8">
<div class="logo-gradient-border inline-block mb-8">
<div class="min-h-full flex items-center justify-center p-3 sm:p-4 md:p-6">
<div class="max-w-[1200px] w-full relative z-10 path-glass-container onb-scroll-container">
<div class="text-center mb-4 sm:mb-6 flex-shrink-0 px-3 sm:px-4 pt-4 sm:pt-6">
<div class="logo-gradient-border inline-block mb-4 sm:mb-6">
<img
src="/assets/icon/favico-black-v2.svg"
alt="Archipelago"
class="w-20 h-20"
class="w-16 h-16 sm:w-20 sm:h-20"
/>
</div>
<h1 class="text-4xl font-bold text-white mb-4">Choose Your Setup</h1>
<p class="text-xl text-white/80">How would you like to get started?</p>
<h1 class="text-2xl sm:text-4xl font-bold text-white mb-2 sm:mb-4">Choose Your Setup</h1>
<p class="text-base sm:text-xl text-white/80">How would you like to get started?</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-6 px-3 sm:px-4">
<!-- Fresh Start -->
<button
@click="selectOption('fresh')"
class="glass-card p-8 text-center transition-all hover:-translate-y-1 hover:shadow-glass"
:class="{ 'bg-white/12 shadow-[0_12px_32px_rgba(0,0,0,0.6),0_0_30px_rgba(255,255,255,0.2)]': selected === 'fresh' }"
class="path-option-card text-center"
:class="{ 'path-option-card--selected': selected === 'fresh' }"
>
<div class="mb-6">
<div class="w-16 h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center">
<svg class="w-8 h-8 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="mb-3 sm:mb-4">
<div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center">
<svg class="w-6 h-6 sm:w-8 sm:h-8 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</div>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Fresh Start</h3>
<p class="text-white/70 text-sm">
<h3 class="text-lg sm:text-xl font-semibold text-white mb-1 sm:mb-2">Fresh Start</h3>
<p class="text-white/70 text-xs sm:text-sm">
Set up a new server from scratch
</p>
</button>
<!-- Restore Backup (Coming Soon) -->
<div
class="glass-card p-8 text-center opacity-40 cursor-not-allowed"
>
<div class="mb-6">
<div class="w-16 h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center">
<svg class="w-8 h-8 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="path-option-card text-center opacity-40 cursor-not-allowed">
<div class="mb-3 sm:mb-4">
<div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center">
<svg class="w-6 h-6 sm:w-8 sm:h-8 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
</svg>
</div>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Restore Backup</h3>
<p class="text-white/70 text-sm">
<h3 class="text-lg sm:text-xl font-semibold text-white mb-1 sm:mb-2">Restore Backup</h3>
<p class="text-white/70 text-xs sm:text-sm">
Restore from a previous backup
</p>
<span class="text-xs text-white/50 mt-2 block">(Coming Soon)</span>
<span class="text-xs text-white/50 mt-1 block">(Coming Soon)</span>
</div>
<!-- Connect Existing (Coming Soon) -->
<div
class="glass-card p-8 text-center opacity-40 cursor-not-allowed"
>
<div class="mb-6">
<div class="w-16 h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center">
<svg class="w-8 h-8 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="path-option-card text-center opacity-40 cursor-not-allowed">
<div class="mb-3 sm:mb-4">
<div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center">
<svg class="w-6 h-6 sm:w-8 sm:h-8 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
</svg>
</div>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Connect Existing</h3>
<p class="text-white/70 text-sm">
<h3 class="text-lg sm:text-xl font-semibold text-white mb-1 sm:mb-2">Connect Existing</h3>
<p class="text-white/70 text-xs sm:text-sm">
Connect to an existing Archipelago server
</p>
<span class="text-xs text-white/50 mt-2 block">(Coming Soon)</span>
<span class="text-xs text-white/50 mt-1 block">(Coming Soon)</span>
</div>
</div>
<div class="mt-12 text-center">
<div class="flex justify-center flex-shrink-0 px-3 sm:px-4 pb-4 sm:pb-6 mt-4 sm:mt-8">
<button
@click="proceed"
class="glass-button px-8 py-4 rounded-lg text-lg font-medium transition-all hover:bg-black/70 hover:border-white/30"
class="path-action-button path-action-button--continue"
>
Continue →
Continue
</button>
</div>
</div>

4
neode-ui/src/views/OnboardingPath.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="h-screen flex items-center justify-center p-3 sm:p-4 md:p-6 relative overflow-hidden">
<div class="min-h-full flex items-center justify-center p-3 sm:p-4 md:p-6 relative">
<!-- Main Glass Container - Scrollable -->
<div class="max-w-[1200px] w-full relative z-10 path-glass-container max-h-[calc(100vh-2rem)] sm:max-h-[calc(100vh-3rem)] overflow-y-auto overflow-x-hidden">
<div class="max-w-[1200px] w-full relative z-10 path-glass-container onb-scroll-container">
<!-- Header -->
<div class="text-center mb-4 md:mb-6 flex-shrink-0 px-3 sm:px-4 pt-4 sm:pt-6">
<h1 class="text-xl md:text-[26px] font-semibold text-white/96 mb-2 drop-shadow-[0_2px_6px_rgba(0,0,0,0.4)]">Your Node, Your Possibilities</h1>

12
neode-ui/src/views/OnboardingVerify.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="min-h-screen flex items-center justify-center p-4">
<div class="min-h-full flex items-center justify-center p-3 sm:p-4 md:p-6">
<!-- Main Glass Container -->
<div class="max-w-[800px] w-full relative z-10 path-glass-container">
<div class="max-w-[800px] w-full relative z-10 path-glass-container onb-scroll-container">
<!-- Header -->
<div v-if="!verified" class="text-center mb-6 flex-shrink-0">
<h1 class="text-[26px] font-semibold text-white/96 mb-2 drop-shadow-[0_2px_6px_rgba(0,0,0,0.4)]">
<div v-if="!verified" class="text-center mb-4 sm:mb-6 flex-shrink-0 px-3 sm:px-4 pt-4 sm:pt-6">
<h1 class="text-xl sm:text-2xl md:text-[26px] font-semibold text-white/96 mb-2 drop-shadow-[0_2px_6px_rgba(0,0,0,0.4)]">
Verify Your Identity
</h1>
<p class="text-[20px] text-white/75 leading-relaxed max-w-[600px] mx-auto">
<p class="text-sm sm:text-base md:text-[20px] text-white/75 leading-relaxed max-w-[600px] mx-auto">
Sign a challenge to verify your decentralized identity is working correctly.
</p>
</div>
@ -62,7 +62,7 @@
</div>
<!-- Action Buttons -->
<div class="flex gap-4 max-w-[600px] mx-auto flex-shrink-0">
<div class="flex gap-3 sm:gap-4 max-w-[600px] mx-auto flex-shrink-0 px-3 sm:px-4 pb-4 sm:pb-6">
<button
@click="skipForNow"
class="path-action-button path-action-button--skip"

19
neode-ui/src/views/OnboardingWrapper.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="min-h-screen relative overflow-hidden">
<div class="onb-viewport relative overflow-hidden">
<!-- Background layers with 3D perspective and zoom effect -->
<div class="bg-perspective-container">
<!-- Video background for intro/login routes (smooth transition from splash) -->
@ -356,11 +356,20 @@ onMounted(() => {
</script>
<style scoped>
/* Fixed viewport container — locks to screen on mobile, no bounce/overflow */
.onb-viewport {
height: 100vh;
height: 100dvh;
width: 100%;
position: fixed;
inset: 0;
}
/* Wrapper to contain perspective without clipping */
.perspective-container-wrapper {
position: relative;
overflow: hidden;
min-height: 100vh;
height: 100%;
}
/* Perspective container for 3D depth effect */
@ -368,7 +377,7 @@ onMounted(() => {
perspective: 1200px;
perspective-origin: 50% 50%;
position: relative;
min-height: 100vh;
height: 100%;
overflow: hidden;
}
@ -379,10 +388,14 @@ onMounted(() => {
transform-style: preserve-3d;
backface-visibility: hidden;
will-change: transform, opacity;
overflow: hidden;
}
.view-container {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
/* 2advanced-style: fluid depth transitions */

28
neode-ui/src/views/RootRedirect.vue
View File

@ -1,11 +1,10 @@
<template>
<div class="min-h-screen flex items-center justify-center bg-black/40">
<div class="flex flex-col items-center gap-4">
<svg class="animate-spin h-10 w-10 text-white/80" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<div class="min-h-full flex items-center justify-center">
<div class="flex flex-col items-center gap-4 opacity-0 root-redirect-fade">
<svg class="animate-spin h-8 w-8 text-white/60" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<p class="text-white/60 text-sm">Loading...</p>
</div>
</div>
</template>
@ -24,16 +23,33 @@ onMounted(async () => {
return
}
// Check localStorage first for instant redirect (avoids 5s timeout)
const localComplete = localStorage.getItem('neode_onboarding_complete') === '1'
if (localComplete) {
router.replace('/login').catch(() => {})
return
}
let seenOnboarding = false
try {
const result = await Promise.race([
isOnboardingComplete(),
new Promise<boolean>((resolve) => setTimeout(() => resolve(false), 5000)),
new Promise<boolean>((resolve) => setTimeout(() => resolve(false), 3000)),
])
seenOnboarding = result
} catch {
seenOnboarding = localStorage.getItem('neode_onboarding_complete') === '1'
seenOnboarding = false
}
router.replace(seenOnboarding ? '/login' : '/onboarding/intro').catch(() => {})
})
</script>
<style scoped>
/* Only show spinner after 500ms delay — most redirects happen instantly */
.root-redirect-fade {
animation: root-fade-in 0.3s ease 0.5s forwards;
}
@keyframes root-fade-in {
to { opacity: 1; }
}
</style>