feat: add appwrite domain modal domain

src/routes/(console)/project-[project]/sites/site-[site]/domains/+page.svelte

@@ -28,6 +28,7 @@
     import SearchQuery from '$lib/components/searchQuery.svelte';
     import { app } from '$lib/stores/app';
     import { RuleType } from '$lib/stores/sdk';
+    import CreateAppwriteDomainModal from './createAppwriteDomainModal.svelte';
 
     export let data;
 
@@ -180,9 +181,13 @@
 </Container>
 
 {#if showDelete}
-    <DeleteDomainModal show={showDelete} {selectedDomain} />
+    <DeleteDomainModal bind:show={showDelete} {selectedDomain} />
 {/if}
 
 {#if showRetry}
-    <RetryDomainModal show={showRetry} {selectedDomain} />
+    <RetryDomainModal bind:show={showRetry} {selectedDomain} />
+{/if}
+
+{#if showAppwriteDomainModal}
+    <CreateAppwriteDomainModal bind:show={showAppwriteDomainModal} />
 {/if}

src/routes/(console)/project-[project]/sites/site-[site]/domains/createAppwriteDomainModal.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button, InputText } from '$lib/elements/forms';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import { consoleVariables } from '$routes/(console)/store';
+    import { page } from '$app/stores';
+    import { Layout, Status, Typography } from '@appwrite.io/pink-svelte';
+    import { ConsoleResourceType, ID } from '@appwrite.io/console';
+    import { debounce } from '$lib/helpers/debounce';
+
+    export let show = false;
+
+    let baseDomain = ID.unique();
+    let domain = baseDomain;
+    let domainStatus: 'complete' | 'failed' | 'pending' = 'complete';
+
+    let error = null;
+    async function onSubmit() {
+        try {
+            await sdk.forProject.proxy.createSiteRule(
+                `${domain}.${$consoleVariables._APP_DOMAIN_SITES}`,
+                $page.params.site
+            );
+
+            await invalidate(Dependencies.SITES_DOMAINS);
+            show = false;
+            addNotification({
+                type: 'success',
+                message: 'Appwrite domain has been added'
+            });
+            trackEvent(Submit.DomainCreate);
+        } catch (e) {
+            error = e;
+            trackError(e, Submit.DomainCreate);
+        }
+    }
+
+    function setDomainLabel(status: typeof domainStatus) {
+        switch (status) {
+            case 'complete':
+                return 'Domain is available';
+            case 'failed':
+                return 'Domain is not available';
+            case 'pending':
+                return 'Checking domain availability';
+        }
+    }
+
+    const checkDomain = debounce(async (value: string) => {
+        if (!value) {
+            domainStatus = 'failed';
+            return;
+        }
+        try {
+            await sdk.forConsole.console.getResource(
+                `${value}.${$consoleVariables._APP_DOMAIN_SITES}`,
+                ConsoleResourceType.Rules
+            );
+            domainStatus = 'complete';
+            baseDomain = domain;
+        } catch {
+            domainStatus = 'failed';
+        } finally {
+            baseDomain = domain;
+        }
+    }, 500);
+
+    $: if (domain !== baseDomain) {
+        domainStatus = 'pending';
+        checkDomain(domain);
+    }
+
+    $: if (!show) {
+        error = null;
+    }
+</script>
+
+<Modal title="Add Appwrite domain" bind:show {onSubmit} bind:error>
+    <span slot="description">
+        Get an auto-generated domain to quickly access your project. You can customize its prefix.
+    </span>
+
+    <Layout.Stack>
+        <Layout.Stack gap="s">
+            <InputText id="domain" placeholder="my-domain" bind:value={domain}>
+                <svelte:fragment slot="end">
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                        .{$consoleVariables._APP_DOMAIN_SITES}
+                    </Typography.Text>
+                </svelte:fragment>
+            </InputText>
+            <Status status={domainStatus} label={setDomainLabel(domainStatus)}></Status>
+        </Layout.Stack>
+    </Layout.Stack>
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button submit>Add</Button>
+    </svelte:fragment>
+</Modal>

src/routes/(console)/project-[project]/sites/site-[site]/domains/deleteDomainModal.svelte

@@ -21,7 +21,7 @@
             show = false;
             addNotification({
                 type: 'success',
-                message: `${selectedDomain.domain} has been deleted`
+                message: `Domain has been deleted`
             });
             trackEvent(Submit.DomainDelete);
         } catch (e) {