New onboarding flow + console navigation #1517
Conversation
# Conflicts: # package.json # pnpm-lock.yaml
|
The preview deployment is in progress. 🟡 Last updated at: 2025-01-27 13:33:52 CET |
# Conflicts: # package.json # pnpm-lock.yaml
Feat: New mobile onboarding flows
# Conflicts: # package.json # pnpm-lock.yaml # src/routes/(console)/project-[project]/overview/onboard.svelte # src/themes/dark.json # src/themes/light.json
| <style lang="scss"> | ||
| .menu-title { | ||
| padding: var(--space-3) var(--space-5); | ||
| display: block; | ||
| text-transform: uppercase; | ||
| font-size: var(--font-size-xs, 12px); | ||
| line-height: 130%; /* 15.6px */ | ||
| letter-spacing: 0.96px; | ||
| } | ||
| </style> |
There was a problem hiding this comment.
does it make sense for this to be park of pink itself?
There was a problem hiding this comment.
haha, it was. Arman requested it to be in Console because it was to console specific
| @@ -31,11 +33,25 @@ export const load: LayoutLoad = async ({ fetch, depends, parent }) => { | |||
| }, new Map<Tier, Plan>()); | |||
| } | |||
|
|
|||
| let projects = []; | |||
| const currentOrgId = params.organization ? params.organization : prefs.organization; | |||
There was a problem hiding this comment.
this feel a bit "workaroundy" - in what case do we need all projects of an org from the prefs?
There was a problem hiding this comment.
When you are on a /project-[projectId] url the organization Id cannot be fetched from the url right? And for the new breadcrumbs we need to have all the organisations and the current one all the time.
There was a problem hiding this comment.
When you are on a /project-[projectId] url the organization Id cannot be fetched from the url right? And for the new breadcrumbs we need to have all the organisations and the current one all the time.
but even prefs is not right then here, in this case we'd need to fetch the projects by the project we fetch 👍🏻
we probably have to fetch the projects under /project-[projectId] anyway by the projects teamId, since prefs is logic on the frontend and can be out of sync.
| if (isCloud) { | ||
| regions = await sdk.forConsole.billing.listRegions(); | ||
| regions.regions.forEach((region) => { | ||
| const img = new Image(); | ||
| img.src = getFlagUrl(region.flag); | ||
| }); | ||
| } |
There was a problem hiding this comment.
you could just fetch the url, no need to create dom elements 👍🏻
...utes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte
Show resolved
Hide resolved
...utes/(console)/project-[project]/overview/platforms/components/OnboardingPlatformCard.svelte
Show resolved
Hide resolved
| {#if selectedOrg} | ||
| <div use:melt={$itemOrganizations}> | ||
| <ActionMenu.Root> | ||
| <ActionMenu.Item.Anchor href={`/console/organization-${selectedOrg?.$id}`} |
There was a problem hiding this comment.
what if I am already on the main org page? wouldn't this just reload the page?
There was a problem hiding this comment.
No the page loading we do with the loading indicator is smart enough to do nothing when you are on the same page as you would navigate to :)
|
|
||
| .overlay { | ||
| position: fixed; | ||
| width: calc(100vw - 200px); |
There was a problem hiding this comment.
looks weird on mobile, the gap is very prominent and visible.
There was a problem hiding this comment.
I might have already fixed this. It isn't happening to me locally anymore. What exact viewport are you using?
| <Typography.Title color="--color-fgcolor-neutral-primary" size="xl" | ||
| >Functions</Typography.Title> |
There was a problem hiding this comment.
this is almost same for other product dashboards too. can we rather make the Cover include a title instead if its a part of Console and not Pink2?
There was a problem hiding this comment.
Yeah might be good, but I think for a future improvement? It was already like this. Wdyt?
There was a problem hiding this comment.
Hmm, maybe in a different task/PR but we can definitely avoid code duplicacy. A simple title var in Cover goes fine.
There was a problem hiding this comment.
inline looks a bit off on small devices -
Co-authored-by: Torsten Dittmann <[email protected]>
…eat-new-onboarding-flow
…to feat-new-onboarding-flow
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?
✅