Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feat-new-onboarding-flow' into mobile-onboarding-flows

Browse Source
This commit is contained in:
Darshan
2025-01-22 15:10:31 +05:30
parent dac374ffba 0609a7c315
commit da0ffa6334
12 changed files with 89 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -2
View File
@@ -22,8 +22,8 @@
"@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193",
"@appwrite.io/pink": "0.25.0",
"@appwrite.io/pink-icons": "0.25.0",
"@appwrite.io/pink-icons-svelte": "1.0.0-next.7",
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@28b6051",
"@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@72b1958",
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1fe7674",
"@popperjs/core": "^2.11.8",
"@sentry/sveltekit": "^8.38.0",
"@stripe/stripe-js": "^3.5.0",
pnpm-lock.yaml
Generated
+15 -14
View File
@@ -18,11 +18,11 @@ importers:
specifier: 0.25.0
version: 0.25.0
'@appwrite.io/pink-icons-svelte':
specifier: 1.0.0-next.7
version: 1.0.0-next.7(svelte@4.2.19)
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@72b1958
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@72b1958(svelte@4.2.19)
'@appwrite.io/pink-svelte':
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@28b6051
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@28b6051(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1fe7674
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1fe7674(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
'@popperjs/core':
specifier: ^2.11.8
version: 2.11.8
@@ -218,13 +218,14 @@ packages:
resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193}
version: 1.2.1
'@appwrite.io/pink-icons-svelte@1.0.0-next.7':
resolution: {integrity: sha512-Bmff3YGEliIetqc3UyjzJNLg88FIC6UXYwTzGqHm+0QLCRJxwAFpTkfTCLIqMe5PUqGshq6jM9SPyCCSVVS3aw==}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1fe7674343bab0dc86d4cbc98c74055c9e87be0b':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1fe7674343bab0dc86d4cbc98c74055c9e87be0b}
version: 1.0.0-next.7
peerDependencies:
svelte: ^4.0.0
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@28b6051f819c0d832e1edfa77d9e3cc8850f7428':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@28b6051f819c0d832e1edfa77d9e3cc8850f7428}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@72b1958':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@72b1958}
version: 1.0.0-next.7
peerDependencies:
svelte: ^4.0.0
@@ -232,8 +233,8 @@ packages:
'@appwrite.io/pink-icons@0.25.0':
resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==}
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@28b6051':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@28b6051}
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1fe7674':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1fe7674}
version: 1.0.0-next.85
peerDependencies:
react-dom: ^18.0.0
@@ -4040,19 +4041,19 @@ snapshots:
'@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193': {}
'@appwrite.io/pink-icons-svelte@1.0.0-next.7(svelte@4.2.19)':
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1fe7674343bab0dc86d4cbc98c74055c9e87be0b(svelte@4.2.19)':
dependencies:
svelte: 4.2.19
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@28b6051f819c0d832e1edfa77d9e3cc8850f7428(svelte@4.2.19)':
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@72b1958(svelte@4.2.19)':
dependencies:
svelte: 4.2.19
'@appwrite.io/pink-icons@0.25.0': {}
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@28b6051(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1fe7674(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
dependencies:
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@28b6051f819c0d832e1edfa77d9e3cc8850f7428(svelte@4.2.19)
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1fe7674343bab0dc86d4cbc98c74055c9e87be0b(svelte@4.2.19)
'@floating-ui/dom': 1.6.12
'@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.2(svelte@4.2.19))(svelte@4.2.19)
'@melt-ui/svelte': 0.86.2(svelte@4.2.19)
src/lib/components/breadcrumbsConsole.svelte → src/lib/components/breadcrumbs.svelte
+16 -29
View File
@@ -2,7 +2,6 @@
import { createMenubar, melt } from '@melt-ui/svelte';
import { Badge, Icon, BottomSheet, type SheetMenu } from '@appwrite.io/pink-svelte';
import { IconChevronDown, IconChevronRight, IconPlus } from '@appwrite.io/pink-icons-svelte';
import { onMount } from 'svelte';
type Project = {
name: string;
@@ -132,25 +131,12 @@
}
};
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);
};
}
});
function updateViewport() {
isSmallViewport = window.matchMedia('(max-width: 768px)').matches;
}
</script>
<svelte:window on:resize={updateViewport} />
<div use:melt={$menubar}>
{#if !isSmallViewport}
<span class="breadcrumb-separator">/</span>
@@ -159,7 +145,7 @@
class="trigger"
use:melt={$triggerOrganizations}
aria-label="Open organizations tab">
<span class="orgNameProject">{selectedOrg?.name ?? 'Organization'}</span>
<span class="orgName">{selectedOrg?.name ?? 'Organization'}</span>
<span class="not-mobile"
>{#if selectedOrg?.tierName}<Badge
variant="secondary"
@@ -174,7 +160,7 @@
organisationBottomSheetOpen = true;
}}
aria-label="Open organizations tab">
<span class="orgNameProject">{selectedOrg?.name ?? 'Organization'}</span>
<span class="orgName">{selectedOrg?.name ?? 'Organization'}</span>
<span class="not-mobile"
><Badge variant="secondary" content={selectedOrg?.tierName ?? ''} /></span>
<Icon icon={IconChevronDown} size="s" />
@@ -239,7 +225,7 @@
class="trigger"
use:melt={$triggerProjects}
aria-label="Open projects tab">
<span class="orgNameProject">{selectedProject.name}</span>
<span class="projectName">{selectedProject.name}</span>
<Icon icon={IconChevronDown} size="s" />
</button>
{:else}
@@ -250,7 +236,7 @@
projectsBottomSheetOpen = true;
}}
aria-label="Open projects tab">
<span class="orgNameProject">{selectedProject.name}</span>
<span class="projectName">{selectedProject.name}</span>
<Icon icon={IconChevronDown} size="s" />
</button>
{/if}
@@ -295,7 +281,7 @@
flex-direction: column;
outline: none !important;
min-width: 220px;
border-radius: 12px;
border-radius: var(--border-radius-m, 12px);
border: 1px solid var(--color-border-neutral, #ededf0);
background: var(--color-bgcolor-neutral-primary, #fff);
z-index: 20;
@@ -328,7 +314,7 @@
outline: none;
display: flex;
align-items: center;
cursor: default;
cursor: pointer;
margin: 0 4px;
padding: var(--space-3, 6px) var(--space-4, 8px) var(--space-3, 6px) var(--space-5, 10px);
@@ -343,7 +329,8 @@
letter-spacing: -0.063px;
}
.orgNameProject {
.orgName,
.projectName {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -353,7 +340,7 @@
max-width: 95px;
}
@media (min-width: 390px) {
@media (min-width: 400px) {
max-width: 105px;
}
@@ -374,7 +361,7 @@
margin-bottom: 4px;
}
.item[data-highlighted] {
:global(.item[data-highlighted]) {
border-radius: var(--border-radius-S, 8px);
background: var(--color-overlay-neutral-hover, rgba(25, 25, 28, 0.03));
}
@@ -404,12 +391,12 @@
background: var(--color-overlay-neutral-hover, rgba(25, 25, 28, 0.03));
}
.trigger[data-highlighted] {
:global(.trigger[data-highlighted]) {
outline: none;
background: var(--color-bgcolor-neutral-secondary, #f4f4f7);
}
.trigger[data-highlighted]:focus {
:global(.trigger[data-highlighted]:focus) {
outline: none;
box-shadow: 0 0 0 2px var(--color-bgcolor-neutral-secondary, #f4f4f7);
}
src/lib/components/index.ts
+1 -1
View File
@@ -78,5 +78,5 @@ export { default as ImagePreview } from './imagePreview.svelte';
export { default as MfaChallengeFormList } from './mfaChallengeFormList.svelte';
export { default as BottomModalAlert } from './bottomModalAlert.svelte';
export { default as Navbar } from './navbar.svelte';
export { default as BreadcrumbsConsole } from './breadcrumbsConsole.svelte';
export { default as Breadcrumbs } from './breadcrumbs.svelte';
export { default as Sidebar } from './sidebar.svelte';
src/lib/components/navbar.svelte
+12 -36
View File
@@ -22,14 +22,13 @@
IconSun,
IconUser
} from '@appwrite.io/pink-icons-svelte';
import { DropList, Support, BreadcrumbsConsole } from '$lib/components';
import { DropList, Support, Breadcrumbs } from '$lib/components';
import { Feedback } from '$lib/components/feedback';
import { feedback } from '$lib/stores/feedback';
import { isMac } from '$lib/helpers/platform';
import { base } from '$app/paths';
import { logout } from '$lib/helpers/logout';
import { app } from '$lib/stores/app';
import { onMount } from 'svelte';
let showSupport = false;
let isSmallViewport = false;
@@ -38,32 +37,17 @@
links: Array<{ label: string; href: string }>;
organizations: Array<{
name: string;
id: string;
isSelected?: boolean;
tier: string;
projects: Array<{ name: string; id: string }>;
$id: string;
isSelected: boolean;
tierName: string;
projects: Array<{ name: string; $id: string; isSelected: boolean }>;
}>;
showSideNavigation: boolean;
showAccountMenu: boolean;
};
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);
};
}
});
function updateViewport() {
isSmallViewport = window.matchMedia('(max-width: 768px)').matches;
}
function updateTheme(theme: 'light' | 'dark' | 'system') {
const themeInUse =
@@ -91,10 +75,10 @@
export let organizations: $$Props['organizations'];
export let avatar: $$Props['avatar'];
export let sideBarIsOpen: $$Props['sideBarIsOpen'] = false;
export let showSideNavigation: boolean;
export let showAccountMenu = false;
</script>
<svelte:window on:resize={updateViewport} />
<Navbar.Base {...$$props}>
<div slot="left" class="left">
<div class="only-mobile">
@@ -105,7 +89,7 @@
}}><Icon icon={IconMenuAlt4} /></button>
</div>
<img src={logo.src} alt={logo.alt} class="only-desktop" />
<BreadcrumbsConsole {organizations} />
<Breadcrumbs {organizations} />
</div>
<div slot="right" class="only-desktop">
<div class="right">
@@ -235,7 +219,8 @@
}
}
]
}
},
bottom: undefined
}
}
]
@@ -292,10 +277,6 @@
display: none;
}
.only-mobile-tablet {
display: block;
}
@media (min-width: 768px) {
.only-desktop {
display: block;
@@ -305,11 +286,6 @@
}
}
@media (min-width: 1024px) {
.only-mobile-tablet {
display: none;
}
}
:global(.icons div:first-of-type:not(:has(.progress-card))) {
height: 20px;
}
src/lib/components/sidebar.svelte
+6 -6
View File
@@ -43,7 +43,7 @@
export let state: $$Props['state'] = 'closed';
export let project: $$Props['project'];
export let avatar: $$Props['avatar'];
export let progressCard: $$Props['progressCard'];
export let progressCard: $$Props['progressCard'] = undefined;
export let sideBarIsOpen: boolean;
export let showAccountMenu: boolean;
export let subNavigation = undefined;
@@ -91,7 +91,7 @@
<Tooltip inline={false} placement="right" disabled={state !== 'icons'}>
<a
class="progress-card"
href={`/console/project-${project.$id}/getstarted`}
href={`/console/project-${project.$id}/get-started`}
on:click={() => {
sideBarIsOpen = false;
}}>
@@ -370,10 +370,10 @@
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
margin-bottom: 12px;
gap: var(--space-5, 10px);
margin-block-end: var(--space-6, 12px);
align-self: stretch;
border-radius: 8px;
border-radius: var(--border-radius-s, 8px);
border: 1px solid var(--color-border-neutral, #ededf0);
background: var(--color-bgcolor-neutral-default, #fafafb);
transition: all 0.2s ease-in-out;
@@ -412,7 +412,7 @@
}
.icons .progress-card {
width: 32px;
width: var(--base-32, 32px);
border-color: transparent;
background: transparent;
}
src/lib/layout/shell.svelte
+13 -46
View File
@@ -5,7 +5,7 @@
import { log } from '$lib/stores/logs';
import { wizard } from '$lib/stores/wizard';
import { activeHeaderAlert } from '$routes/(console)/store';
import { type ComponentType, onMount, setContext } from 'svelte';
import { type ComponentType, setContext } from 'svelte';
import { writable } from 'svelte/store';
import { showSubNavigation } from '$lib/stores/layout';
import { organization, organizationList } from '$lib/stores/organization';
@@ -74,54 +74,27 @@
$: state = sideBarIsOpen ? 'open' : 'closed';
$: state = subNavigation && !isSmallViewport ? 'icons' : sideBarIsOpen ? 'open' : 'closed';
onMount(() => {
if (window) {
const mediaQuery = window.matchMedia('(max-width: 768px)');
const updateViewport = () => (isSmallViewport = mediaQuery.matches);
const handleResize = () => {
sideBarIsOpen = false;
showAccountMenu = false;
};
// Initial check
updateViewport();
handleResize();
// Listen for changes
mediaQuery.addEventListener('change', updateViewport);
window.addEventListener('resize', handleResize);
return () => {
// Cleanup listener
mediaQuery.removeEventListener('change', updateViewport);
window.removeEventListener('resize', handleResize);
};
}
});
function handleResize() {
isSmallViewport = window.matchMedia('(max-width: 768px)').matches;
sideBarIsOpen = false;
showAccountMenu = false;
}
$: progressCard = function getProgressCard() {
if (selectedProject) {
const currentProject = projects.find((project) => project.$id === selectedProject.$id);
if (currentProject && currentProject.platforms.length === 0) {
return {
title: 'Get started',
percentage: 33
};
} else {
return {
title: 'Get started',
percentage: 100
};
}
return {
title: 'Get started',
percentage: currentProject && currentProject.platforms.length ? 33 : 100
};
}
return undefined;
};
</script>
<svelte:window bind:scrollY={y} />
<svelte:window bind:scrollY={y} on:resize={handleResize} />
<main
class:grid-with-side={showSideNavigation}
class:is-open={$showSubNavigation}
@@ -129,12 +102,7 @@
class:is-fixed-layout={$activeHeaderAlert?.show}
style:--p-side-size={sideSize}>
{#if showHeader}
<Navbar
{...navbarProps}
bind:sideBarIsOpen
bind:showSideNavigation
bind:showAccountMenu
projects={loadedProjects} />
<Navbar {...navbarProps} bind:sideBarIsOpen bind:showAccountMenu />
{/if}
<Sidebar
project={selectedProject}
@@ -156,7 +124,6 @@
{#if $page.data?.header}
<svelte:component this={$page.data.header} />
{/if}
<slot />
{#if showFooter && showSideNavigation}
<slot name="footer" />
@@ -178,7 +145,7 @@
.content {
width: 100%;
margin-top: 30px;
margin-block-start: 30px;
@media (min-width: 1024px) {
width: 100%;
src/routes/(console)/+layout.ts
+2 -1
View File
@@ -51,6 +51,7 @@ export const load: LayoutLoad = async ({ params, fetch, depends, parent }) => {
roles: [],
scopes: [],
projects: projects,
currentProjectId: params.project ?? ''
currentProjectId: params.project ?? '',
organizations: await sdk.forConsole.teams.list()
};
};
src/routes/(console)/onboarding/+page.svelte
+1 -1
View File
@@ -103,7 +103,7 @@
<Container overlapCover size="large">
<Card>
<Heading size="4" tag="h2">Create a new organization!</Heading>
<Heading size="4" tag="h2">Create a new organization</Heading>
<Form onSubmit={handleSubmit}>
<FormList gap={16}>
<InputText
src/routes/(console)/onboarding/create-project/+page.svelte
+20 -16
View File
@@ -71,6 +71,25 @@
isLoading = false;
}
}
function getRegions() {
return regions.regions
.filter((region) => region.$id !== 'default')
.sort((regionA, regionB) => {
if (regionA.disabled && !regionB.disabled) {
return 1;
}
return regionA.name > regionB.name ? 1 : -1;
})
.map((region) => {
return {
label: region.name,
value: region.$id,
leadingHtml: `<img src='${getFlagUrl(region.flag)}' alt='Region flag'/>`,
disabled: region.disabled
};
});
}
</script>
<div
@@ -119,22 +138,7 @@
{#if regions}
<Input.Select
placeholder="Select a region"
options={regions.regions
.filter((region) => region.$id !== 'default')
.sort((regionA, regionB) => {
if (regionA.disabled && !regionB.disabled) {
return 1;
}
return regionA.name > regionB.name ? 1 : -1;
})
.map((region) => {
return {
label: region.name,
value: region.$id,
leadingHtml: `<img src='${getFlagUrl(region.flag)}' alt='Region flag'/>`,
disabled: region.disabled
};
})}
options={getRegions()}
label="Region" />
{/if}
<div class="u-flex u-main-end">
src/routes/(console)/project-[project]/getstarted/+page.svelte → src/routes/(console)/project-[project]/get-started/+page.svelte
View File
src/routes/(console)/project-[project]/overview/onboard.svelte
+1 -1
View File
@@ -46,7 +46,7 @@
size="s"
on:click={() => {
setHasOnboardingDismissed(projectId);
if (location.href.endsWith('getstarted')) {
if (location.href.endsWith('get-started')) {
goto(`${base}/project-${projectId}`);
} else {
location.reload();