Merge pull request #2038 from appwrite/misc-fixes

Author: ItzNotABug

package.json

@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@973fff2",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@d521606",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",

pnpm-lock.yaml

@@ -341,7 +341,7 @@
                                     <ActionMenu.Root>
                                         <ActionMenu.Item.Anchor
                                             href={`${base}/project-${project.region}-${project.$id}/overview/platforms`}>
-                                            {project.name}
+                                            <span class="projectName dropdown">{project.name}</span>
                                         </ActionMenu.Item.Anchor>
                                     </ActionMenu.Root>
                                 </div>
@@ -421,6 +421,15 @@
         @media (min-width: 1024px) {
             max-width: 150px;
         }
+
+        &.dropdown {
+            max-width: 200px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+            vertical-align: middle;
+        }
     }
 
     .noProjects {

src/lib/components/breadcrumbs.svelte

@@ -26,7 +26,7 @@
             {#if verified === true}
                 <Badge variant="secondary" type="success" size="xs" content="Verified" />
             {:else if verified === false}
-                <Badge variant="secondary" type="error" size="xs" content="Verification failed" />
+                <Badge variant="secondary" type="warning" size="xs" content="Verification failed" />
             {/if}
         </Layout.Stack>
         <Typography.Text variant="m-400">

src/lib/components/domains/cnameTable.svelte

@@ -40,7 +40,7 @@
             {#if verified === true}
                 <Badge variant="secondary" type="success" size="xs" content="Verified" />
             {:else if verified === false}
-                <Badge variant="secondary" type="error" size="xs" content="Verification failed" />
+                <Badge variant="secondary" type="warning" size="xs" content="Verification failed" />
             {/if}
         </Layout.Stack>
         <Typography.Text variant="m-400">

src/lib/components/domains/recordTable.svelte

@@ -85,7 +85,8 @@
             return options[0]?.value ?? null;
         }
 
-        let result = 'custom';
+        let result = null;
+
         for (const option of options) {
             if (!isValidDate(option.value)) continue;
 
@@ -95,6 +96,12 @@
             }
         }
 
+        // no matching date, check if 'custom' is available
+        if (result === null) {
+            const hasCustomOption = options.some((option) => option.value === 'custom');
+            result = hasCustomOption ? 'custom' : (options[0]?.value ?? null);
+        }
+
         return result;
     }
 
@@ -108,8 +115,18 @@
     let expirationSelect = initExpirationSelect();
     let expirationCustom: string | null = value ? splitDateValue(value) : null;
 
+    let initialized = false;
+    let hasUserInteracted = false;
+
     $: {
-        if (!isSameDay(new Date(expirationSelect), new Date(value))) {
+        // Set initial value if value is null on first load
+        if (!initialized && value === null && expirationSelect !== null) {
+            value = expirationSelect === 'custom' ? expirationCustom : expirationSelect;
+            initialized = true;
+        }
+
+        // Only update value after user interaction
+        if (hasUserInteracted && !isSameDay(new Date(expirationSelect), new Date(value))) {
             value = expirationSelect === 'custom' ? expirationCustom : expirationSelect;
         }
     }
@@ -126,13 +143,15 @@
     {options}
     id="preset"
     label={selectorLabel}
-    bind:value={expirationSelect} />
+    bind:value={expirationSelect}
+    on:change={() => (hasUserInteracted = true)} />
 
 {#if expirationSelect === 'custom'}
     <InputDateTime
         required
         type="date"
         id="expire"
         label={dateSelectorLabel}
-        bind:value={expirationCustom} />
+        bind:value={expirationCustom}
+        on:change={() => (hasUserInteracted = true)} />
 {/if}

src/lib/components/expirationInput.svelte

@@ -3,8 +3,16 @@
     import { Link } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import type { Models } from '@appwrite.io/console';
-    import { IconExternalLink, IconQrcode } from '@appwrite.io/pink-icons-svelte';
-    import { ActionMenu, Icon, Layout, Popover, Tag, Typography } from '@appwrite.io/pink-svelte';
+    import { IconExclamation, IconExternalLink, IconQrcode } from '@appwrite.io/pink-icons-svelte';
+    import {
+        ActionMenu,
+        Icon,
+        Layout,
+        Popover,
+        Tag,
+        Tooltip,
+        Typography
+    } from '@appwrite.io/pink-svelte';
     import { regionalProtocol } from '$routes/(console)/project-[region]-[project]/store';
 
     let {
@@ -34,9 +42,19 @@
         <Link external href={`${$regionalProtocol}${sortedDomains[0]?.domain}`} variant="muted">
             <Layout.Stack gap="xxs" direction="row" alignItems="center">
                 <Trim alternativeTrim>
-                    <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
-                        {sortedDomains[0]?.domain}
-                    </Typography.Text>
+                    <Layout.Stack gap="xxs" direction="row" alignItems="flex-end">
+                        <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                            {sortedDomains[0]?.domain}
+                        </Typography.Text>
+
+                        {#if sortedDomains[0]?.status !== 'verified'}
+                            <Tooltip>
+                                <Icon icon={IconExclamation} size="s" color="--bgcolor-warning" />
+
+                                <div slot="tooltip">Not verified</div>
+                            </Tooltip>
+                        {/if}
+                    </Layout.Stack>
                 </Trim>
             </Layout.Stack>
         </Link>

src/lib/components/git/deploymentDomains.svelte

@@ -60,8 +60,9 @@ export type TableRootProp = {
     selectedAll: boolean;
     selectedNone: boolean;
     selectedSome: boolean;
-    columns: Array<PinkColumn> | number;
-    columnsMap: Record<PinkColumn['id'], PinkColumn>;
+    // columns: Array<Column> | number;
+    columns: Record<PinkColumn['id'], PinkColumn>;
+    // columnsMap: Record<PinkColumn['id'], PinkColumn>;
     toggle: (id: string) => void;
     toggleAll: () => void;
     addAvailableId: (id: string) => void;

src/lib/helpers/types.ts

@@ -44,11 +44,11 @@
                 message: e.message
             });
         } finally {
-            isLoading = false;
             if (organization) {
                 loadAvailableRegions(organization?.$id).then();
                 await goto(`${base}/organization-${organization.$id}`);
             }
+            isLoading = false;
         }
     }
 </script>

src/routes/(console)/onboarding/create-organization/+page.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
     import { sdk } from '$lib/stores/sdk';
     import { onDestroy } from 'svelte';
-    import { addNotification } from '$lib/stores/notifications';
-    import { goto } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { ID, type Models, Region as ConsoleRegion, Region } from '@appwrite.io/console';
     import { base } from '$app/paths';
     import CreateProject from '$lib/layout/createProject.svelte';
     import { Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
+    import { Dependencies } from '$lib/constants';
 
     export let showCreateProjectCloud: boolean;
     export let regions: Array<Models.ConsoleRegion> = [];
@@ -22,30 +22,26 @@
     let showSubmissionLoader = false;
     const teamId = page.params.organization;
 
-    function onFinish() {
-        addNotification({ type: 'success', message: `${name} has been created` });
-        trackEvent(Submit.ProjectCreate, { customId: !!id, teamId, region: region });
-    }
-
     async function create() {
+        let project: Models.Project;
+
         showSubmissionLoader = true;
 
         try {
-            // TODO: fix typing once SDK is updated
-            const project = await sdk.forConsole.projects.create(
-                id ?? ID.unique(),
-                name,
-                teamId,
-                region
-            );
+            project = await sdk.forConsole.projects.create(id ?? ID.unique(), name, teamId, region);
 
-            onFinish();
             await goto(`${base}/project-${project.region}-${project.$id}`);
+            trackEvent(Submit.ProjectCreate, { customId: !!id, teamId, region: region });
         } catch (e) {
             error = e.message;
             trackError(e, Submit.ProjectCreate);
         } finally {
             showSubmissionLoader = false;
+
+            if (project) {
+                // reload projects for nav breadcrumb!
+                await invalidate(Dependencies.ORGANIZATION);
+            }
         }
     }