pyr0ball
e0828677a4
- WizardLayout.vue: full-page card, progress bar, crash-recovery via loadStatus(isCloud); auto-skips steps 1/2/5 in cloud mode - wizard.css: shared step styles (headings, banners, radio cards, chip lists, form fields, expandables, nav buttons) - Step 1 — Hardware: GPU detection, profile select, mismatch warning - Step 2 — Tier: Free/Paid/Premium radio cards - Step 3 — Resume: upload (PDF/DOCX/ODT) or manual experience builder; pre-fills identity fields from parsed resume data - Step 4 — Identity: name/email/phone/LinkedIn/career summary; full validation before saveStep - Step 5 — Inference: remote API keys vs local Ollama; advanced service-host/port expandable; soft-fail connection test - Step 6 — Search: chip-style job title + location input with comma/Enter commit; remote-only checkbox - Step 7 — Integrations: optional tile-grid (Notion/Calendar/Slack/ Discord/Drive); paid-tier badge for gated items; calls wizard.complete() on Finish - wizard.ts Pinia store: loadStatus, detectHardware, saveStep, testInference, complete; cloud auto-skip logic - wizardGuard.ts: gates all routes behind /setup until wizard_complete; redirects complete users away from /setup - router/index.ts: /setup nested route tree; unified beforeEach guard (wizard gate → setup branch → settings tier gate) - App.vue: hide AppNav + strip sidebar margin on /setup routes
110 lines
2.9 KiB
Vue
110 lines
2.9 KiB
Vue
<template>
|
|
<!-- Root uses .app-root class, NOT id="app" — index.html owns #app.
|
|
Nested #app elements cause ambiguous CSS specificity. Gotcha #1. -->
|
|
<div class="app-root" :class="{ 'rich-motion': motion.rich.value, 'app-root--wizard': isWizard }">
|
|
<AppNav v-if="!isWizard" />
|
|
<main class="app-main" :class="{ 'app-main--wizard': isWizard }" id="main-content" tabindex="-1">
|
|
<!-- Skip to main content link (screen reader / keyboard nav) -->
|
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
<RouterView />
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted } from 'vue'
|
|
import { RouterView, useRoute } from 'vue-router'
|
|
import { useMotion } from './composables/useMotion'
|
|
import { useHackerMode, useKonamiCode } from './composables/useEasterEgg'
|
|
import AppNav from './components/AppNav.vue'
|
|
import { useDigestStore } from './stores/digest'
|
|
|
|
const motion = useMotion()
|
|
const route = useRoute()
|
|
const { toggle, restore } = useHackerMode()
|
|
const digestStore = useDigestStore()
|
|
|
|
const isWizard = computed(() => route.path.startsWith('/setup'))
|
|
|
|
useKonamiCode(toggle)
|
|
|
|
onMounted(() => {
|
|
restore() // re-apply hacker mode from localStorage on hard reload
|
|
digestStore.fetchAll() // populate badge immediately, before user visits Digest tab
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
/* Global resets — unscoped, applied once to document */
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-body, sans-serif);
|
|
color: var(--color-text, #1a2338);
|
|
background: var(--color-surface, #eaeff8);
|
|
overflow-x: clip; /* no BFC side effects. Gotcha #3. */
|
|
}
|
|
|
|
body {
|
|
min-height: 100dvh; /* dynamic viewport — mobile chrome-aware. Gotcha #13. */
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
#app { min-height: 100dvh; }
|
|
|
|
/* Layout root — sidebar pushes content right on desktop */
|
|
.app-root {
|
|
display: flex;
|
|
min-height: 100dvh;
|
|
}
|
|
|
|
/* Main content area */
|
|
.app-main {
|
|
flex: 1;
|
|
min-width: 0; /* prevents flex blowout */
|
|
/* Desktop: offset by sidebar width */
|
|
margin-left: var(--sidebar-width, 220px);
|
|
/* Mobile: no sidebar, leave room for bottom tab bar */
|
|
}
|
|
|
|
/* Skip-to-content link — visible only on keyboard focus */
|
|
.skip-link {
|
|
position: absolute;
|
|
top: -999px;
|
|
left: var(--space-4);
|
|
background: var(--app-primary);
|
|
color: white;
|
|
padding: var(--space-2) var(--space-4);
|
|
border-radius: var(--radius-md);
|
|
font-weight: 600;
|
|
z-index: 9999;
|
|
text-decoration: none;
|
|
transition: top 0ms;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
top: var(--space-4);
|
|
}
|
|
|
|
/* Mobile: no sidebar margin, add bottom tab bar clearance */
|
|
@media (max-width: 1023px) {
|
|
.app-main {
|
|
margin-left: 0;
|
|
padding-bottom: calc(56px + env(safe-area-inset-bottom));
|
|
}
|
|
}
|
|
|
|
/* Wizard: full-bleed, no sidebar offset, no tab-bar clearance */
|
|
.app-root--wizard {
|
|
display: block;
|
|
}
|
|
|
|
.app-main--wizard {
|
|
margin-left: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
</style>
|