modal to select project

src/lib/components/billing/alerts/projectsLimit.svelte

@@ -5,9 +5,13 @@
     import { HeaderAlert } from '$lib/layout';
     import { hideBillingHeaderRoutes, upgradeURL } from '$lib/stores/billing';
     import { currentPlan } from '$lib/stores/organization';
+    import SelectProjectCloud from '$lib/components/billing/alerts/selectProjectCloud.svelte';
     import { BillingPlan } from '@appwrite.io/console';
+    let showSelectProject = false;
 </script>
 
+<SelectProjectCloud bind:showSelectProject />
+
 {#if $currentPlan.$id === BillingPlan.Tier0 && !hideBillingHeaderRoutes.includes(page.url.pathname)}
     <HeaderAlert title="Action required: You have more than {$currentPlan.projects} projects.">
         <svelte:fragment>
@@ -15,7 +19,11 @@
             will be blocked after this date.
         </svelte:fragment>
         <svelte:fragment slot="buttons">
-            <Button text>Manage projects</Button>
+            <Button
+                text
+                on:click={() => {
+                    showSelectProject = true;
+                }}>Manage projects</Button>
             <Button
                 href={$upgradeURL}
                 on:click={() => {

src/lib/components/billing/alerts/selectProjectCloud.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+    import { type Models } from '@appwrite.io/console';
+    import { Alert, Button, Table } from '@appwrite.io/pink-svelte';
+    import { Modal } from '$lib/components';
+    import { onMount } from 'svelte';
+    import { sdk } from '$lib/stores/sdk';
+
+    export let showSelectProject: boolean;
+    export let projects: Array<Models.Project> = [];
+
+    onMount(() => {
+        sdk.forConsole.projects
+            .list()
+            .then((response) => {
+                projects = response.projects || [];
+            })
+            .catch((error) => {
+                console.error('Failed to fetch projects:', error);
+            });
+    });
+
+    let selectedProjects: Array<string> = [];
+
+    let projectsToArchive: Array<Models.Project> = [];
+
+    $: projectsToArchive = projects.filter((project) => !selectedProjects.includes(project.$id));
+
+    function updateSelected() {
+        showSelectProject = false;
+        // Here you can handle the selected project, e.g., save it to a store or navigate
+        console.log(selectedProjects);
+    }
+</script>
+
+<Modal bind:show={showSelectProject} title={'Manage projects'} onSubmit={updateSelected}>
+    <svelte:fragment slot="description">
+        Choose which two projects over will be blocked after this date.
+    </svelte:fragment>
+    <Table.Root
+        let:root
+        allowSelection
+        bind:selectedRows={selectedProjects}
+        columns={[{ id: 'name' }, { id: 'created' }]}>
+        <svelte:fragment slot="header" let:root>
+            <Table.Header.Cell column="name" {root}>Project Name</Table.Header.Cell>
+            <Table.Header.Cell column="created" {root}>Created</Table.Header.Cell>
+        </svelte:fragment>
+        {#each projects as project}
+            <Table.Row.Base {root} id={project.$id}>
+                <Table.Cell column="name" {root}>{project.name}</Table.Cell>
+                <Table.Cell column="created" {root}
+                    >{new Date(project.$createdAt).toLocaleDateString()}
+                    {new Date(project.$createdAt).toLocaleTimeString()}</Table.Cell>
+            </Table.Row.Base>
+        {/each}
+    </Table.Root>
+    {#if selectedProjects.length > 2}
+        <div class="u-text-warning u-mb-4">
+            You can only select two projects. Please deselect others to continue.
+        </div>
+    {/if}
+    {#if selectedProjects.length === 2}
+        <Alert.Inline
+            status="warning"
+            title={`${projects.length - selectedProjects.length} projects will be archived on [date]`}>
+            {#each projectsToArchive as project, index}{@const text = `<b>${project.name}</b>`}
+                {@html text}{index == projectsToArchive.length - 2
+                    ? ', and '
+                    : index < projectsToArchive.length - 1
+                      ? ', '
+                      : ''}
+            {/each} will be archived.
+        </Alert.Inline>
+    {/if}
+    <svelte:fragment slot="footer">
+        <Button.Button variant="secondary" on:click={() => (showSelectProject = false)}
+            >Cancel</Button.Button>
+        <Button.Button disabled={selectedProjects.length !== 2}>Save</Button.Button>
+    </svelte:fragment>
+</Modal>

src/routes/(console)/+layout.svelte

@@ -4,12 +4,7 @@
     import Footer from '$lib/layout/footer.svelte';
     import Shell from '$lib/layout/shell.svelte';
     import { app } from '$lib/stores/app';
-    import {
-        newOrgModal,
-        organization,
-        projectsCount,
-        type Organization
-    } from '$lib/stores/organization';
+    import { newOrgModal, organization, type Organization } from '$lib/stores/organization';
     import { database, checkForDatabaseBackupPolicies } from '$lib/stores/database';
     import { wizard } from '$lib/stores/wizard';
     import { afterUpdate, onMount } from 'svelte';