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

src/lib/components/git/deploymentSource.svelte

@@ -1,35 +1,77 @@
 <script lang="ts">
     import { Trim } from '$lib/components';
     import { Link } from '$lib/elements';
+    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, Tooltip } from '@appwrite.io/pink-svelte';
+    import { onMount } from 'svelte';
 
     let {
-        deployment
+        deployment,
+        resource,
+        region,
+        project
     }: {
         deployment: Models.Deployment;
+        resource?: Models.Site | Models.Function;
+        region?: string;
+        project?: string;
     } = $props();
+
+    let authorized = $state<boolean | null>(null);
+
+    async function loadAuthorized() {
+        if (!resource?.installationId || !resource?.providerRepositoryId || !region || !project) {
+            return;
+        }
+
+        try {
+            const repository = await sdk.forProject(region, project).vcs.getRepository({
+                installationId: resource.installationId,
+                providerRepositoryId: resource.providerRepositoryId
+            });
+            authorized = repository.authorized;
+        } catch (err) {
+            console.warn(err);
+        }
+    }
+
+    onMount(() => {
+        loadAuthorized();
+    });
 </script>
 
 {#if deployment.type === 'vcs'}
     <Popover padding="none" let:toggle>
         <div>
-            <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>
+            <Layout.Stack direction="row" gap="xs" alignItems="center">
+                <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 authorized === false}
+                    <Tooltip>
+                        <Icon icon={IconExclamation} size="s" color="--bgcolor-warning" />
+                        <span slot="tooltip">
+                            Integration not authorized for auto deployments.<br />
+                            To enable, add the repository to the installation settings.
+                        </span>
+                    </Tooltip>
+                {/if}
+            </Layout.Stack>
         </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