feat(demo): typing splash + intro on every fresh visit; neutral desktop Cloud tabs

- Demo boots at '/' (first visit or a browser refresh) always start with
  the typing splash into the onboarding intro — the per-calendar-day
  gate is gone. In-session SPA navigation never replays it, and
  deep-route refreshes keep the visitor's place.
- Cloud top-level tabs return to the standard mode-switcher style on
  desktop; the orange full-width switcher stays mobile-only.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-07-15 11:12:49 +01:00
co-authored by Claude Fable 5
parent 6e5a99ef71
commit c13ee58edf
5 changed files with 25 additions and 48 deletions
+6 -5
View File
@@ -6,12 +6,12 @@
<!-- Desktop: page tabs + category tabs + search on one row -->
<div class="app-header-desktop items-center gap-4">
<div class="flex-shrink-0">
<div class="cloud-tab-switcher hidden md:inline-flex">
<div class="mode-switcher hidden md:inline-flex">
<button
v-for="tab in TABS"
:key="tab.id"
class="cloud-tab-btn"
:class="{ 'cloud-tab-btn-active': activeTab === tab.id }"
class="mode-switcher-btn"
:class="{ 'mode-switcher-btn-active': activeTab === tab.id }"
@click="activeTab = tab.id"
>{{ tab.name }}</button>
</div>
@@ -789,8 +789,9 @@ defineExpose({ loadPeers })
</script>
<style scoped>
/* Top-level tab switcher — deliberately a DIFFERENT look from the neutral
category pills below it: orange-tinted container + active state. */
/* Mobile-only top-level tab switcher — deliberately a DIFFERENT look from the
neutral category pills below it (orange tint). Desktop keeps the standard
mode-switcher styling. */
.cloud-tab-switcher {
gap: 2px;
padding: 3px;
+1 -4
View File
@@ -56,16 +56,13 @@ import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import AnimatedLogo from '@/components/AnimatedLogo.vue'
import { playNavSound } from '@/composables/useNavSounds'
import { IS_DEMO, markDemoIntroSeen } from '@/composables/useDemoIntro'
import { IS_DEMO } from '@/composables/useDemoIntro'
const router = useRouter()
const ctaButton = ref<HTMLButtonElement | null>(null)
const isDemo = IS_DEMO
onMounted(() => {
// Demo: once the visitor has seen the intro today, don't auto-replay it again
// until tomorrow (they can still use "Replay Intro" on the login screen).
if (IS_DEMO) markDemoIntroSeen()
// Auto-focus after entry animation completes (1.4s animation delay + 0.6s duration)
setTimeout(() => {
ctaButton.value?.focus({ preventScroll: true })
+6 -6
View File
@@ -16,20 +16,20 @@
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { isOnboardingComplete } from '@/composables/useOnboarding'
import { IS_DEMO, demoIntroSeenToday } from '@/composables/useDemoIntro'
import { IS_DEMO } from '@/composables/useDemoIntro'
import BootScreen from '@/components/BootScreen.vue'
const router = useRouter()
const showBootScreen = ref(false)
/**
* Public demo: replay the intro on every visit, but at most once per calendar
* day per browser. If already seen today → straight to login; otherwise → intro.
* Public demo: every fresh boot of the app (first visit OR browser refresh at
* the root) replays the intro for the full effect. In-session SPA navigation
* never re-triggers it — this only runs when the app boots at '/'.
*/
function demoRoute() {
const dest = demoIntroSeenToday() ? '/login' : '/onboarding/intro'
log('demoRoute', { dest })
router.replace(dest).catch(() => {})
log('demoRoute', { dest: '/onboarding/intro' })
router.replace('/onboarding/intro').catch(() => {})
}
function log(msg: string, data?: unknown) {