Show warning when VCS integration is not authorized for auto-deployments

src/lib/components/git/deploymentSource.svelte

@@ -1,35 +1,96 @@
 <script lang="ts">
     import { Trim } from '$lib/components';
     import { Link } from '$lib/elements';
-    import type { Models } from '@appwrite.io/console';
+    import { sdk } from '$lib/stores/sdk';
+    import { type Models } from '@appwrite.io/console';
     import {
         IconCode,
+        IconExclamation,
         IconGitBranch,
         IconGitCommit,
         IconGithub,
         IconTerminal
     } from '@appwrite.io/pink-icons-svelte';
-    import { ActionMenu, Layout, Popover, Icon } from '@appwrite.io/pink-svelte';
+    import {
+        ActionMenu,
+        Layout,
+        Popover,
+        Icon,
+        Skeleton,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import Button from '$lib/elements/forms/button.svelte';
 
     let {
-        deployment
+        deployment,
+        resource,
+        region,
+        project
     }: {
         deployment: Models.Deployment;
+        resource?: Models.Site | Models.Function;
+        region?: string;
+        project?: string;
     } = $props();
+
+    let repository = $state<Models.ProviderRepository | null>(null);
+
+    async function loadRepository() {
+        if (!resource?.installationId || !resource?.providerRepositoryId || !region || !project) {
+            return;
+        }
+
+        try {
+            repository = await sdk.forProject(region, project).vcs.getRepository({
+                installationId: resource.installationId,
+                providerRepositoryId: resource.providerRepositoryId
+            });
+        } catch (err) {
+            console.warn(err);
+        }
+    }
 </script>
 
 {#if deployment.type === 'vcs'}
     <Popover padding="none" let:toggle>
         <div>
-            <Link
-                on:click={(e) => {
-                    e.preventDefault();
-                    toggle(e);
-                }}>
+            {#await loadRepository()}
+                <Layout.Stack direction="row" gap="xs" alignItems="center">
+                    <Skeleton variant="line" width={100} height={20} />
+                </Layout.Stack>
+            {:then}
                 <Layout.Stack direction="row" gap="xs" alignItems="center">
-                    <Icon icon={IconGithub} size="s" /> GitHub
+                    <Link
+                        on:click={(e) => {
+                            e.preventDefault();
+                            toggle(e);
+                        }}>
+                        <Layout.Stack direction="row" gap="xs" alignItems="center">
+                            <Icon icon={IconGithub} size="s" /> GitHub
+                        </Layout.Stack>
+                    </Link>
+                    {#if repository?.authorized === false}
+                        <Popover let:toggle placement="bottom-start">
+                            <Button extraCompact on:click={toggle}>
+                                <Icon icon={IconExclamation} size="s" color="--bgcolor-warning" />
+                            </Button>
+                            <svelte:fragment slot="tooltip">
+                                <Typography.Text
+                                    variant="m-400"
+                                    color="--fgcolor-neutral-secondary">
+                                    Integration not authorized for auto deployments.<br />
+                                    To enable, add the repository to the installation settings on <Link
+                                        variant="muted"
+                                        external
+                                        href={`https://github.com/settings/installations/${repository.providerInstallationId}`}>
+                                        GitHub
+                                    </Link>.
+                                </Typography.Text>
+                            </svelte:fragment>
+                        </Popover>
+                    {/if}
                 </Layout.Stack>
-            </Link>
+            {/await}
         </div>
         <svelte:fragment slot="tooltip">
             <ActionMenu.Root>

src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/deploymentCard.svelte

@@ -187,7 +187,11 @@
                     {@render titleSnippet('Source')}
                     <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                         <div>
-                            <DeploymentSource {deployment} />
+                            <DeploymentSource
+                                {deployment}
+                                resource={$func}
+                                region={page.params.region}
+                                project={page.params.project} />
                         </div>
                     </Typography.Text>
                 </Layout.Stack>

src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte

@@ -29,12 +29,14 @@
     import type { Snippet } from 'svelte';
 
     let {
+        site,
         deployment,
         proxyRuleList,
         hideQRCode = false,
         variant = 'primary',
         footer
     }: {
+        site?: Models.Site;
         deployment: Models.Deployment;
         proxyRuleList: Models.ProxyRuleList;
         hideQRCode?: boolean;
@@ -208,7 +210,11 @@
                         Source
                     </Typography.Text>
                     <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
-                        <DeploymentSource {deployment} />
+                        <DeploymentSource
+                            {deployment}
+                            resource={site}
+                            region={page.params.region}
+                            project={page.params.project} />
                     </Typography.Text>
                 </Layout.Stack>
             </Layout.Stack>

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

@@ -32,7 +32,10 @@
 <Container>
     <Layout.Stack gap="xxxl">
         {#if data?.deployment && data.deployment.status === 'ready'}
-            <SiteCard deployment={data.deployment} proxyRuleList={data.proxyRuleList}>
+            <SiteCard
+                site={data.site}
+                deployment={data.deployment}
+                proxyRuleList={data.proxyRuleList}>
                 {#snippet footer()}
                     {#if data.proxyRuleList.total}
                         <Button