New onboarding flow + console navigation #1517
Conversation
# Conflicts: # package.json # pnpm-lock.yaml
|
The preview deployment is ready. 🟢 Open Preview | Open Build Logs Last updated at: 2025-01-16 19:28:38 CET |
# Conflicts: # package.json # pnpm-lock.yaml
ernstmul
changed the title
There was a problem hiding this comment.
we can rename to just breadcrumbs, its anyway only used on the console.
| } | ||
| }; | ||
| let projectsBottomSheet: SheetMenu; | ||
| $: projectsBottomSheet = { |
There was a problem hiding this comment.
why reactive ($:)? is it required like that?
if not we could use the variable declared right above it.
| } | ||
| }; | ||
| $: organizationsBottomSheet = !selectedOrg |
| onMount(() => { | ||
| if (window) { | ||
| const mediaQuery = window.matchMedia('(max-width: 768px)'); | ||
| const updateViewport = () => (isSmallViewport = mediaQuery.matches); | ||
| // Initial check | ||
| updateViewport(); | ||
| // Listen for changes | ||
| mediaQuery.addEventListener('change', updateViewport); | ||
| return () => { | ||
| // Cleanup listener | ||
| mediaQuery.removeEventListener('change', updateViewport); | ||
| }; | ||
| } | ||
| }); |
There was a problem hiding this comment.
what do you think about using - <svelte:window on:resize={updateViewport} />? That way we don't have to manage the window and cleanups.
| class="trigger" | ||
| use:melt={$triggerOrganizations} | ||
| aria-label="Open organizations tab"> | ||
| <span class="orgNameProject">{selectedOrg?.name ?? 'Organization'}</span> |
There was a problem hiding this comment.
Lets separate out the classes for orgNameProject with orgName & projectName, I see same classes for org and project name. Can get a little confusing.
| } else { | ||
| location.reload(); | ||
| } | ||
| }}>Dismiss this page</Button.Button> |
There was a problem hiding this comment.
Would Skip or something else look better? Haven't seen the design on this one yet so.
| class="onboarding-card platform-card" | ||
| on:click={() => addPlatform(2)}> | ||
| <img | ||
| src={$app.themeInUse == 'dark' |
There was a problem hiding this comment.
| src={$app.themeInUse == 'dark' | |
| src={$app.themeInUse === 'dark' |
| class="onboarding-card platform-card" | ||
| on:click={() => addPlatform(1)}> | ||
| <img | ||
| src={$app.themeInUse == 'dark' |
There was a problem hiding this comment.
| src={$app.themeInUse == 'dark' | |
| src={$app.themeInUse === 'dark' |
src/lib/helpers/onboarding.ts
Outdated
There was a problem hiding this comment.
What if I use a different browser, incognito mode or a different device?
The onboarding would show each and every time. Lets use the team prefs instead.
There was a problem hiding this comment.
I think I saw a logo url set as https://appwrite.io/images/logos/logo.svg somewhere, lets use the local svg instead.
| outline: none; | ||
| display: flex; | ||
| align-items: center; | ||
| cursor: default; |
There was a problem hiding this comment.
This seems to make the buttons that use trigger class show arrow on hover instead of the pointer cursor.
What does this PR do?
New onboarding flow for users after registering.
The first FREE organisation is automatically created ("Personal projects"). The user only has to provide the name of their first project:
A loading and welcome animation is shown, before the user is brought to the dashboard:
Screen.Recording.2025-01-09.at.14.29.50.mov
Also in this PR is the new console navigation:
As well as get started pages:
Have you read the Contributing Guidelines on issues?
✅