fix: custom expiration info, inline one component for expiration.

src/lib/components/empty.svelte

@@ -36,7 +36,6 @@
                     size="s"
                     ariaLabel="create {target}">Documentation</Button>
                 <Button
-                    {href}
                     secondary
                     on:mousedown
                     on:click

src/lib/components/expirationInput.svelte

@@ -83,8 +83,14 @@
 
         return result;
     }
+
+    // dd/mm/yy format for selecting dates only!
+    function splitDateValue(value: string): string {
+        return value.slice(0, 10);
+    }
+
     let expirationSelect = initExpirationSelect();
-    let expirationCustom: string | null = value ?? null;
+    let expirationCustom: string | null = value ? splitDateValue(value) : null;
 
     $: {
         if (!isSameDay(new Date(expirationSelect), new Date(value))) {

src/lib/elements/forms/inputDateTime.svelte

@@ -48,6 +48,7 @@
         {value}
         {step}
         helper={error}
+        on:change={(event) => (value = event.target.value)}
         autocomplete={autocomplete ? 'on' : 'off'}>
         {#if nullable}
             <Selector.Checkbox

src/routes/(console)/project-[region]-[project]/overview/(components)/create.svelte

@@ -3,7 +3,7 @@
     import { InputText } from '$lib/elements/forms/index.js';
     import { Wizard } from '$lib/layout';
     import { Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
-    import ExpirationInput from './expirationInput.svelte';
+    import { ExpirationInput } from '$lib/components';
     import Button from '$lib/elements/forms/button.svelte';
     import Form from '$lib/elements/forms/form.svelte';
     import { sdk } from '$lib/stores/sdk';

src/routes/(console)/project-[region]-[project]/overview/(components)/expirationInput.svelte

@@ -1,111 +0,0 @@
-<script lang="ts">
-    import { InputDateTime, InputSelect } from '$lib/elements/forms';
-    import { isSameDay, isValidDate, toLocaleDate } from '$lib/helpers/date';
-
-    function incrementToday(value: number, type: 'day' | 'month' | 'year'): string {
-        const date = new Date();
-        switch (type) {
-            case 'day':
-                date.setDate(date.getDate() + value);
-                break;
-            case 'month':
-                date.setMonth(date.getMonth() + value);
-                break;
-            case 'year':
-                date.setMonth(date.getMonth() + value * 12);
-                break;
-        }
-
-        return date.toISOString();
-    }
-
-    const defaultOptions = [
-        {
-            label: 'Never',
-            value: null
-        },
-        {
-            label: '7 Days',
-            value: incrementToday(7, 'day')
-        },
-        {
-            label: '30 days',
-            value: incrementToday(30, 'day')
-        },
-        {
-            label: '90 days',
-            value: incrementToday(90, 'day')
-        },
-        {
-            label: '1 Year',
-            value: incrementToday(1, 'year')
-        },
-        {
-            label: 'Custom Date',
-            value: 'custom'
-        }
-    ];
-
-    const limitedOptions = [
-        {
-            label: '1 Day',
-            value: incrementToday(1, 'day')
-        },
-        {
-            label: '7 Days',
-            value: incrementToday(7, 'day')
-        },
-        {
-            label: '30 days',
-            value: incrementToday(30, 'day')
-        }
-    ];
-
-    export let value: string | null = null;
-    export let keyType: 'api' | 'dev' = 'api';
-
-    const options = keyType === 'api' ? defaultOptions : limitedOptions;
-
-    function initExpirationSelect() {
-        if (value === null || !isValidDate(value)) {
-            return options[0]?.value ?? null;
-        }
-
-        let result = 'custom';
-        for (const option of options) {
-            if (!isValidDate(option.value)) continue;
-
-            if (isSameDay(new Date(option.value), new Date(value))) {
-                result = option.value;
-                break;
-            }
-        }
-
-        return result;
-    }
-    let expirationSelect = initExpirationSelect();
-    let expirationCustom: string | null = value ?? null;
-
-    $: {
-        if (!isSameDay(new Date(expirationSelect), new Date(value))) {
-            value = expirationSelect === 'custom' ? expirationCustom : expirationSelect;
-        }
-    }
-
-    $: helper =
-        expirationSelect !== 'custom' && expirationSelect !== null
-            ? `Your key will expire in ${toLocaleDate(value)}`
-            : undefined;
-</script>
-
-<InputSelect
-    required
-    {helper}
-    {options}
-    id="preset"
-    label="Expiration date"
-    bind:value={expirationSelect} />
-
-{#if expirationSelect === 'custom'}
-    <InputDateTime required id="expire" label="" bind:value={expirationCustom} />
-{/if}

src/routes/(console)/project-[region]-[project]/overview/(components)/updateExpirationDate.svelte

@@ -8,7 +8,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { Alert } from '@appwrite.io/pink-svelte';
-    import ExpirationInput from './expirationInput.svelte';
+    import { ExpirationInput } from '$lib/components';
     import type { Models } from '@appwrite.io/console';
     import { page } from '$app/stores';
 

src/routes/(console)/project-[region]-[project]/overview/dev-keys/action.svelte

@@ -4,7 +4,7 @@
     import { Icon, Modal, Layout } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { Form, InputText } from '$lib/elements/forms/index.js';
-    import ExpirationInput from '../(components)/expirationInput.svelte';
+    import { ExpirationInput } from '$lib/components';
     import { sdk } from '$lib/stores/sdk';
     import { goto } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';

src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte

@@ -222,7 +222,11 @@
         <Empty
             single
             target="file"
-            href={`${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${page.params.bucket}/create`} />
+            href="https://appwrite.io/docs/products/storage/upload-download"
+            on:click={() =>
+                goto(
+                    `${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${page.params.bucket}/create`
+                )} />
     {/if}
 </Container>
 

src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte

@@ -173,14 +173,14 @@
         }
     }
 
-    function getPermissionGroups(permissions: string[]): string {
+    function getPermissionGroups(token: Models.ResourceToken): string {
         const map = {
             read: 'Read',
             update: 'Update',
             delete: 'Delete'
         };
 
-        const groups = permissions.reduce((set, perm) => {
+        const groups = token.$permissions.reduce((set, perm) => {
             const match = perm.match(/^(\w+)\(/);
             const key = match?.[1];
             if (key && map[key]) set.add(map[key]);
@@ -304,7 +304,7 @@
                                 <Table.Cell column="permissions" {root}>
                                     {#if token.$permissions.length}
                                         <Typography.Text truncate slot="tooltip">
-                                            {getPermissionGroups(token.$permissions)}
+                                            {getPermissionGroups(token)}
                                         </Typography.Text>
                                     {:else}
                                         none