fixes: as per designs.

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

@@ -8,23 +8,16 @@
     import Button from '$lib/elements/forms/button.svelte';
     import Form from '$lib/elements/forms/form.svelte';
     import { sdk } from '$lib/stores/sdk';
-    import { onboarding } from '$routes/(console)/project-[project]/store';
+    import { onboarding } from '../../store';
     import { goto, invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { writable } from 'svelte/store';
-    import Scopes from '$routes/(console)/project-[project]/overview/keys/scopes.svelte';
-
-    export let keyType: 'api' | 'dev' = 'api';
+    import Scopes from '../keys/scopes.svelte';
 
     const projectId = $page.params.project;
 
-    const isApiKey = keyType === 'api';
-    const label = isApiKey ? 'API' : 'Dev';
-    const slug = isApiKey ? 'keys' : 'dev-keys';
-    const event = isApiKey ? Submit.KeyCreate : Submit.DevKeyCreate;
-
     let showExitModal = false;
     let formComponent: Form;
     let isSubmitting = writable(false);
@@ -35,22 +28,21 @@
 
     async function create() {
         try {
-            const { $id } = isApiKey
-                ? await sdk.forConsole.projects.createKey(
-                      projectId,
-                      name,
-                      scopes,
-                      expire || undefined
-                  )
-                : await sdk.forConsole.projects.createDevKey(projectId, name, expire || undefined);
+            const { $id } = await sdk.forConsole.projects.createKey(
+                projectId,
+                name,
+                scopes,
+                expire || undefined
+            );
 
-            if ($onboarding && isApiKey) {
+            if ($onboarding) {
                 await invalidate(Dependencies.PROJECT);
             }
-            trackEvent(event);
-            goto(`${base}/project-${projectId}/overview/${slug}/${$id}`);
+
+            trackEvent(Submit.KeyCreate);
+            await goto(`${base}/project-${projectId}/overview/keys/${$id}`);
             addNotification({
-                message: `${label} key has been created`,
+                message: `API key has been created`,
                 type: 'success'
             });
         } catch (error) {
@@ -58,14 +50,14 @@
                 type: 'error',
                 message: error.message
             });
-            trackError(error, event);
+            trackError(error, Submit.KeyCreate);
         }
     }
 </script>
 
 <Wizard
-    title="Create {label} key"
-    href={`${base}/project-${projectId}/overview/${slug}/`}
+    title="Create API key"
+    href={`${base}/project-${projectId}/overview/keys/`}
     bind:showExitModal
     column
     confirmExit>
@@ -76,26 +68,23 @@
                     <InputText
                         id="name"
                         label="Name"
-                        placeholder="{label} key name"
+                        placeholder="API key name"
                         required
                         bind:value={name} />
 
-                    <ExpirationInput bind:value={expire} {keyType} />
+                    <ExpirationInput bind:value={expire} keyType="api" />
                 </Layout.Stack>
             </Fieldset>
 
-            {#if isApiKey}
-                <Fieldset legend="Scopes">
-                    <Layout.Stack gap="xl">
-                        <Typography.Text>
-                            Choose which permission scopes to grant your application. It is best
-                            practice to allow only the permissions you need to meet your project
-                            goals.
-                        </Typography.Text>
-                        <Scopes bind:scopes />
-                    </Layout.Stack>
-                </Fieldset>
-            {/if}
+            <Fieldset legend="Scopes">
+                <Layout.Stack gap="xl">
+                    <Typography.Text>
+                        Choose which permission scopes to grant your application. It is best
+                        practice to allow only the permissions you need to meet your project goals.
+                    </Typography.Text>
+                    <Scopes bind:scopes />
+                </Layout.Stack>
+            </Fieldset>
         </Layout.Stack>
     </Form>
 

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

@@ -1,8 +1,8 @@
 <script lang="ts">
     import { Empty } from '$lib/components';
-    import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
+    import { diffDays, toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
     import { canWriteKeys } from '$lib/stores/roles';
-    import { Table } from '@appwrite.io/pink-svelte';
+    import { Badge, Layout, Table } from '@appwrite.io/pink-svelte';
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
@@ -18,10 +18,23 @@
     function asApiKey(key: Models.Key | Models.DevKey) {
         return key as Models.Key;
     }
+
+    function getExpiryDetails(key: Models.Key | Models.DevKey): {
+        status: 'success' | 'warning' | 'error' | null;
+        message: string | null;
+    } {
+        const isExpired = key.expire !== null && new Date(key.expire) < new Date();
+        const isExpiring = key.expire && diffDays(new Date(), new Date(key.expire)) < 14;
+
+        return {
+            status: isExpired ? 'error' : isExpiring ? 'warning' : null,
+            message: isExpired ? 'Expired' : isExpiring ? 'Expires soon' : null
+        };
+    }
 </script>
 
 {#if keys.total}
-    <Table.Root columns={4} let:root>
+    <Table.Root columns={isApiKey ? 4 : 3} let:root>
         <svelte:fragment slot="header" let:root>
             <Table.Header.Cell {root}>Name</Table.Header.Cell>
             <Table.Header.Cell {root}>Last accessed</Table.Header.Cell>
@@ -31,7 +44,7 @@
             {/if}
         </svelte:fragment>
         {#each keys.keys as key}
-            <Table.Row.Link href={`dev-keys/${key.$id}`} {root}>
+            <Table.Row.Link href={`${slug}/${key.$id}`} {root}>
                 <Table.Cell {root}>
                     {key.name}
                 </Table.Cell>
@@ -39,7 +52,18 @@
                     {key.accessedAt ? toLocaleDate(key.accessedAt) : 'never'}
                 </Table.Cell>
                 <Table.Cell {root}>
-                    {key.expire ? toLocaleDateTime(key.expire) : 'never'}
+                    {@const expiration = getExpiryDetails(key)}
+                    <Layout.Stack gap="s" direction="row">
+                        {key.expire ? toLocaleDateTime(key.expire) : 'never'}
+
+                        {#if expiration.status}
+                            <Badge
+                                size="s"
+                                variant="secondary"
+                                type={expiration.status}
+                                content={expiration.message} />
+                        {/if}
+                    </Layout.Stack>
                 </Table.Cell>
                 {#if isApiKey}
                     <Table.Cell {root}>

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

@@ -1,15 +1,80 @@
-<script>
+<script lang="ts">
     import Button from '$lib/elements/forms/button.svelte';
     import { canWriteKeys } from '$lib/stores/roles';
-    import { Icon } from '@appwrite.io/pink-svelte';
+    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 { sdk } from '$lib/stores/sdk';
+    import { goto } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { base } from '$app/paths';
+    import { addNotification } from '$lib/stores/notifications';
     import { page } from '$app/stores';
+
+    let showModal = false;
+    let isSubmitting = false;
+    let name = '',
+        expire = '';
+
+    const projectId = $page.params.project;
+
+    async function create() {
+        try {
+            isSubmitting = true;
+            const { $id } = await sdk.forConsole.projects.createDevKey(
+                projectId,
+                name,
+                expire || undefined
+            );
+
+            showModal = false;
+            trackEvent(Submit.DevKeyCreate);
+            goto(`${base}/project-${projectId}/overview/dev-keys/${$id}`);
+            addNotification({
+                message: `Dev key has been created`,
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.DevKeyCreate);
+        } finally {
+            isSubmitting = false;
+        }
+    }
 </script>
 
 {#if $canWriteKeys}
-    <Button href={`${base}/project-${$page.params.project}/overview/dev-keys/create`}>
+    <Button on:click={() => (showModal = true)}>
         <Icon icon={IconPlus} slot="start" size="s" />
         Create Dev key
     </Button>
+
+    <Form onSubmit={create} isModal>
+        <Modal title="Create Dev key" bind:open={showModal}>
+            <span slot="description">
+                Test your app without rate limits and more detailed error messages.
+            </span>
+
+            <Layout.Stack>
+                <InputText
+                    id="name"
+                    label="Name"
+                    placeholder="Dev key name"
+                    required
+                    bind:value={name} />
+
+                <ExpirationInput bind:value={expire} keyType="dev" />
+            </Layout.Stack>
+
+            <Layout.Stack direction="row" justifyContent="flex-end" slot="footer">
+                <Button fullWidthMobile secondary on:click={() => (showModal = false)}
+                    >Cancel</Button>
+                <Button fullWidthMobile submit disabled={isSubmitting}>Create</Button>
+            </Layout.Stack>
+        </Modal>
+    </Form>
 {/if}

src/routes/(console)/project-[project]/overview/dev-keys/create/+page.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-    import CreateKey from '../../components/create.svelte';
-</script>
-
-<CreateKey keyType="dev" />