Skip to content

Update: cleanups, improvements #1966

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 42 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
2a50e11
update: cleanups, improvements.
ItzNotABug Jun 2, 2025
f3adfe1
fix: protocol usage.
ItzNotABug Jun 2, 2025
9842a79
update: load failed invoice as non-blocking.
ItzNotABug Jun 2, 2025
6f6135d
address comments, make stuff faster!
ItzNotABug Jun 2, 2025
1112258
fix: missing type on org loads.
ItzNotABug Jun 2, 2025
8f3edf6
fix: connect button shown on org. page.
ItzNotABug Jun 2, 2025
24b4c3f
fix: error check.
ItzNotABug Jun 2, 2025
0a53bf6
update: comment, just ocd things.
ItzNotABug Jun 2, 2025
125704f
update: flip `localStorage` check after `browser` check.
ItzNotABug Jun 2, 2025
0a27ec1
update: comment.
ItzNotABug Jun 2, 2025
aec8b14
perf: parallelize fetch for faster loads [↓49%]
ItzNotABug Jun 2, 2025
787cd52
update: compute things later.
ItzNotABug Jun 2, 2025
73303b7
update: don't rely on dependency or reload if scope doesn't allow.
ItzNotABug Jun 2, 2025
b8b8069
update: simplify.
ItzNotABug Jun 2, 2025
3306ac9
update: do not load credits if the organization plan does not support…
ItzNotABug Jun 2, 2025
9d0248c
update: just some cleaning.
ItzNotABug Jun 2, 2025
9d59d3c
address comments for promise handling.
ItzNotABug Jun 3, 2025
f37b277
address comments; remove: unused api calls!!!
ItzNotABug Jun 3, 2025
ffb2073
address comments;
ItzNotABug Jun 3, 2025
e269a3e
address comment.
ItzNotABug Jun 3, 2025
aeb87aa
misc.
ItzNotABug Jun 3, 2025
402cb1d
cleaner endpoint creation.
ItzNotABug Jun 3, 2025
0508be1
Merge branch 'main' into supposed-improvements
ItzNotABug Jun 3, 2025
4fbd787
fix: required to optional.
ItzNotABug Jun 3, 2025
68e39d1
update: url to quick load.
ItzNotABug Jun 3, 2025
538e25f
address comments.
ItzNotABug Jun 7, 2025
bfe20b5
update: load payments on ui.
ItzNotABug Jun 7, 2025
70b9bf2
update: load non-urgent calls on UI.
ItzNotABug Jun 7, 2025
e5a3052
fix: unnecessary runs of root layout.
ItzNotABug Jun 7, 2025
e99c430
reduce: calls to countries, locale api.
ItzNotABug Jun 7, 2025
70794c5
reduce: calls to countries, locale api in org settings.
ItzNotABug Jun 7, 2025
865d021
update: simplify api calls and data passing.
ItzNotABug Jun 7, 2025
4e81cc6
Merge branch 'main' into 'supposed-improvements'.
ItzNotABug Jun 7, 2025
405a5a8
address comments.
ItzNotABug Jun 8, 2025
f390288
remove: id from `UsageProjectInfo`.
ItzNotABug Jun 8, 2025
1f99755
update: make api call only when needed.
ItzNotABug Jun 8, 2025
0f24aa0
fix: text.
ItzNotABug Jun 8, 2025
2cb5742
fix: endpoint flag design <> verified by design.
ItzNotABug Jun 8, 2025
c0db715
fix: `inline` inner stack so project name has enough space.
ItzNotABug Jun 8, 2025
af646f3
fix: tests.
ItzNotABug Jun 8, 2025
2c51de8
update: improve orgs loading?
ItzNotABug Jun 8, 2025
658c7a1
update: misc.
ItzNotABug Jun 9, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/lib/components/billing/selectPaymentMethod.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@
import { invalidate } from '$app/navigation';
import { Dependencies } from '$lib/constants';

export let methods: PaymentList;
export let value: string;
export let taxId = '';
export let methods: PaymentList;

let showTaxId = false;
let showPaymentModal = false;
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/bottom-sheet/SheetMenuBlock.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
{#if menu?.title}
<span class="menu-title">{menu.title}</span>
{/if}
<ActionMenu.Root>
<ActionMenu.Root width="100%">
{#each menu.items as menuItem}
{#if menuItem.href}
<ActionMenu.Item.Anchor
Expand Down
202 changes: 107 additions & 95 deletions src/lib/components/breadcrumbs.svelte
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
<script lang="ts">
import { createMenubar, melt } from '@melt-ui/svelte';
import { Badge, Icon, type SheetMenu, ActionMenu, Card } from '@appwrite.io/pink-svelte';
import {
Badge,
Icon,
type SheetMenu,
Layout,
ActionMenu,
Card,
Skeleton
} from '@appwrite.io/pink-svelte';
import {
IconChevronDown,
IconChevronRight,
Expand All @@ -14,20 +22,13 @@
import { base } from '$app/paths';
import { newOrgModal } from '$lib/stores/organization';
import { Click, trackEvent } from '$lib/actions/analytics';
import { page } from '$app/stores';
import type { Models } from '@appwrite.io/console';

type Project = {
name: string;
$id: string;
isSelected: boolean;
region: string;
};
type Organization = {
name: string;
$id: string;
tierName: string;
isSelected: boolean;
projects: Array<Project>;
};

const {
Expand Down Expand Up @@ -62,13 +63,15 @@
}
} = createMenu();

export let organizations: Organization[] = [];
let isLoadingProjects = true;
let loadedProjects: Models.ProjectList = { total: 0, projects: [] };

$: selectedOrg = organizations.find((organization) => organization.isSelected);
$: selectedProject = $page.data.project;
export let organizations: Organization[] = [];
export let currentProject: Models.Project | null = null;
export let projects: Promise<Models.ProjectList> = Promise.resolve(loadedProjects);

let organisationBottomSheetOpen = false;
let projectsBottomSheetOpen = false;
let organisationBottomSheetOpen = false;

function createOrg() {
trackEvent(Click.OrganizationClickCreate, { source: 'breadcrumbs' });
Expand Down Expand Up @@ -96,92 +99,89 @@
}
};

$: organizationsBottomSheet = !selectedOrg
? switchOrganization
: ({
top: {
items: [
{
name: 'Organization overview',
href: `${base}/organization-${selectedOrg?.$id}`
}
]
},
bottom:
organizations.length > 1
? {
items: [
{
name: 'Switch organization',
trailingIcon: IconChevronRight,
subMenu: switchOrganization
}
]
}
: {
items: [
{
name: 'Create organization',
leadingIcon: IconPlus,
onClick: createOrg
}
]
}
} satisfies SheetMenu);

$: projectsBottomSheet = {
top:
selectedOrg?.projects.length > 1
? {
title: 'Switch project',
items: !selectedOrg
? []
: selectedOrg?.projects
.map((project, index) => {
if (index < 4) {
return {
name: project.name,
href: `${base}/project-${project.region}-${project.$id}/overview`
};
} else if (index === 4) {
return {
name: 'All projects',
href: `${base}/organization-${selectedOrg?.$id}`
};
}
return null;
})
.filter((project) => project !== null)
}
: {
async function createProjectsBottomSheet(organization: Organization): Promise<SheetMenu> {
isLoadingProjects = true;
loadedProjects = await projects;
isLoadingProjects = false;

const createProjectItem = {
name: 'Create project',
trailingIcon: IconPlus,
href: `${base}/organization-${organization?.$id}?create-project`
};

if (loadedProjects.total > 1 && selectedOrg) {
const projectLinks = loadedProjects.projects.slice(0, 4).map((project) => ({
name: project.name,
href: `${base}/project-${project.region}-${project.$id}/overview/platforms`
}));

if (loadedProjects.projects.length > 4) {
projectLinks.push({
name: 'All projects',
href: `${base}/organization-${selectedOrg.$id}`
});
}

return {
top: { title: 'Switch project', items: projectLinks },
bottom: { items: [createProjectItem] }
};
}

return {
top: { items: [createProjectItem] },
bottom: { items: [createProjectItem] }
};
}

function createOrganizationBottomSheet(organization: Organization) {
return !organization
? switchOrganization
: ({
top: {
items: [
{
name: 'Create project',
trailingIcon: IconPlus,
href: `${base}/organization-${selectedOrg?.$id}?create-project`
name: 'Organization overview',
href: `${base}/organization-${organization?.$id}`
}
]
},
bottom:
selectedOrg?.projects.length > 1
? {
items: [
{
name: 'Create project',
trailingIcon: IconPlus,
href: `${base}/organization-${selectedOrg?.$id}?create-project`
}
]
}
: undefined
} satisfies SheetMenu;
bottom:
organizations.length > 1
? {
items: [
{
name: 'Switch organization',
trailingIcon: IconChevronRight,
subMenu: switchOrganization
}
]
}
: {
items: [
{
name: 'Create organization',
leadingIcon: IconPlus,
onClick: createOrg
}
]
}
} satisfies SheetMenu);
}

function onResize() {
if ((organisationBottomSheetOpen || projectsBottomSheetOpen) && !$isSmallViewport) {
organisationBottomSheetOpen = false;
projectsBottomSheetOpen = false;
}
}

$: selectedOrg = organizations.find((org) => org.isSelected);

$: projectsBottomSheet = createProjectsBottomSheet(selectedOrg);

$: organizationsBottomSheet = createOrganizationBottomSheet(selectedOrg);
</script>

<svelte:window on:resize={onResize} />
Expand All @@ -208,7 +208,7 @@
organisationBottomSheetOpen = true;
}}
aria-label="Open organizations tab">
<span class="orgName" class:noProjects={!selectedProject}
<span class="orgName" class:noProjects={!currentProject}
>{selectedOrg?.name ?? 'Organization'}</span>
<span class="not-mobile"
><Badge variant="secondary" content={selectedOrg?.tierName ?? ''} /></span>
Expand Down Expand Up @@ -288,15 +288,15 @@
</Card.Base>
</div>

{#if selectedOrg && selectedProject}
{#if selectedOrg && currentProject}
<span class="breadcrumb-separator">/</span>
{#if !$isSmallViewport}
<button
type="button"
class="trigger"
use:melt={$triggerProjects}
aria-label="Open projects tab">
<span class="projectName">{selectedProject.name}</span>
<span class="projectName">{currentProject.name}</span>
<Icon icon={IconChevronDown} size="s" />
</button>
{:else}
Expand All @@ -305,20 +305,28 @@
class="trigger"
on:click={() => (projectsBottomSheetOpen = true)}
aria-label="Open projects tab">
<span class="projectName">{selectedProject.name}</span>
<span class="projectName">{currentProject.name}</span>
<Icon icon={IconChevronDown} size="s" />
</button>
{/if}

<div class="menu" use:melt={$menuProjects}>
<Card.Base padding="xxxs" shadow={true}>
{#if selectedOrg.projects.length > 1}
{#each selectedOrg.projects as project, index}
{#if isLoadingProjects}
<div style:margin-inline="0.25rem" style:margin-block="0.25rem">
<Layout.Stack gap="s">
<!-- 2 should be enough -->
<Skeleton width="100%" height={30} variant="line" />
<Skeleton width="100%" height={30} variant="line" />
</Layout.Stack>
</div>
{:else if loadedProjects.total > 1}
{#each loadedProjects.projects as project, index}
{#if index < 4}
<div use:melt={$itemProjects}>
<ActionMenu.Root>
<ActionMenu.Item.Anchor
href={`${base}/project-${project.region}-${project.$id}`}>
href={`${base}/project-${project.region}-${project.$id}/overview/platforms`}>
{project.name}
</ActionMenu.Item.Anchor>
</ActionMenu.Root>
Expand Down Expand Up @@ -348,8 +356,12 @@
</div>
{/if}
</div>

<BottomSheet.Menu bind:isOpen={organisationBottomSheetOpen} menu={organizationsBottomSheet} />
<BottomSheet.Menu bind:isOpen={projectsBottomSheetOpen} menu={projectsBottomSheet} />

{#await projectsBottomSheet then menu}
<BottomSheet.Menu bind:isOpen={projectsBottomSheetOpen} {menu} />
{/await}

<style lang="scss">
.menu {
Expand Down
8 changes: 6 additions & 2 deletions src/lib/components/copy.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,12 @@
style:cursor="pointer"
on:click|preventDefault|stopPropagation={handleClick}
on:keyup={clickOnEnter}
on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}>
on:mouseenter={() => setTimeout(() => (content = copyText))}>
<slot />
</span>
<p slot="tooltip">{content}</p>
<p slot="tooltip" let:showing>
{#if showing}
{content}
{/if}
</p>
</Tooltip>
19 changes: 12 additions & 7 deletions src/lib/components/navbar.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<script lang="ts" context="module">
import type { HTMLAttributes } from 'svelte/elements';

export type NavbarProject = {
name: string;
$id: string;
Expand Down Expand Up @@ -54,8 +56,9 @@
import { isCloud } from '$lib/system.js';
import { user } from '$lib/stores/user';
import { Click, trackEvent } from '$lib/actions/analytics';
import type { HTMLAttributes } from 'svelte/elements';
import { beforeNavigate } from '$app/navigation';
import { page } from '$app/state';
import type { Models } from '@appwrite.io/console';

let showSupport = false;

Expand All @@ -67,7 +70,6 @@
isSelected: boolean;
showUpgrade: boolean;
tierName: string;
projects: Array<NavbarProject>;
}>;
showAccountMenu: boolean;
};
Expand Down Expand Up @@ -104,6 +106,8 @@
export let avatar: $$Props['avatar'];
export let sideBarIsOpen: $$Props['sideBarIsOpen'] = false;
export let showAccountMenu = false;
export let currentProject: Models.Project = undefined;
export let projects: Promise<Models.ProjectList> = undefined;

let activeTheme = $app.theme;
let shouldAnimateThemeToggle = false;
Expand All @@ -115,7 +119,7 @@
}

$: currentOrg = organizations.find((org) => org.isSelected);
$: selectedProject = currentOrg?.projects.find((project) => project.isSelected);

beforeNavigate(() => (showAccountMenu = false));
</script>

Expand All @@ -135,13 +139,14 @@
class="only-desktop">
<img src={logo.src} alt={logo.alt} />
</a>
<Breadcrumbs {organizations} />
{#if selectedProject && selectedProject.pingCount === 0}
<Breadcrumbs {organizations} {projects} {currentProject} />
{#if page.route?.id?.includes('project-') && currentProject && currentProject.pingCount === 0}
<div class="only-desktop" style:margin-inline-start="-16px">
<Button.Anchor
href={`${base}/project-${selectedProject.region}-${selectedProject.$id}/get-started`}
size="xs"
variant="secondary"
size="xs">Connect</Button.Anchor>
href={`${base}/project-${currentProject.region}-${currentProject.$id}/get-started`}
>Connect</Button.Anchor>
</div>
{/if}
</div>
Expand Down
Loading