fix: qa

package.json

@@ -20,8 +20,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^10.0.0",
-        "@aw-labs/icons": "0.0.0-75",
-        "@aw-labs/ui": "0.0.0-75",
+        "@aw-labs/icons": "0.0.0-76",
+        "@aw-labs/ui": "0.0.0-76",
         "@popperjs/core": "^2.11.6",
         "echarts": "^5.4.0",
         "pretty-bytes": "^6.0.0",

src/lib/components/empty.svelte

@@ -15,9 +15,9 @@
         <div class="u-flex u-flex-vertical u-cross-center u-gap-24">
             <button type="button" on:click|preventDefault>
                 {#if $app.themeInUse === 'dark'}
-                    <img src={EmptyDark} alt="create" aria-hidden="true" />
+                    <img src={EmptyDark} alt="create" aria-hidden="true" height="124" />
                 {:else}
-                    <img src={EmptyLight} alt="create" aria-hidden="true" />
+                    <img src={EmptyLight} alt="create" aria-hidden="true" height="124" />
                 {/if}
             </button>
             <slot>

src/lib/components/heading.svelte

@@ -2,8 +2,9 @@
     export let tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     export let size: '1' | '2' | '3' | '4' | '5' | '6' | '7';
     export let trimmed = true;
+    export let id: string = null;
 </script>
 
-<svelte:element this={tag} class={`heading-level-${size}`} class:u-trim-1={trimmed}>
+<svelte:element this={tag} class={`heading-level-${size}`} class:u-trim-1={trimmed} {id}>
     <slot />
 </svelte:element>

src/lib/components/output.svelte

@@ -6,7 +6,7 @@
 
 <Copy {value}>
     <div class="interactive-text-output is-textarea">
-        <span class="text u-line-height-1-5 u-break-word"><slot /></span>
+        <span class="text u-line-height-1-5 u-break-all"><slot /></span>
 
         <div class="u-flex u-cross-child-start u-gap-8">
             <button class="interactive-text-output-button" aria-label="copy text">

src/lib/components/secret.svelte

@@ -7,7 +7,7 @@
 
 <div class="interactive-text-output" class:is-textarea={show}>
     {#if show}
-        <span class="text u-line-height-1-5 u-break-word">{value}</span>
+        <span class="text u-line-height-1-5 u-break-all">{value}</span>
     {:else}
         <span class="text">••••••••••••</span>
     {/if}

src/lib/elements/forms/inputFile.svelte

@@ -4,6 +4,7 @@
     export let label: string = null;
     export let files: FileList;
     export let list = new DataTransfer();
+    export let allowedFileExtensions: string[] = [];
 
     let input: HTMLInputElement;
     let hovering = false;
@@ -28,7 +29,12 @@
     }
 </script>
 
-<input bind:files bind:this={input} type="file" style="display: none" />
+<input
+    bind:files
+    bind:this={input}
+    accept={allowedFileExtensions.map((n) => `.${n}`).join(',')}
+    type="file"
+    style="display: none" />
 
 <div>
     {#if label}

src/routes/console/onboarding/+page.svelte

@@ -15,6 +15,7 @@
     let id: string;
     let showCustomId = false;
     let loading = false;
+
     async function createProject() {
         try {
             loading = true;
@@ -28,12 +29,11 @@
             await invalidate(Dependencies.ACCOUNT);
             goto(`/console/project-${project.$id}`);
         } catch ({ message }) {
+            loading = false;
             addNotification({
                 message,
                 type: 'error'
             });
-        } finally {
-            loading = false;
         }
     }
 

src/routes/console/organization-[organization]/createProject.svelte

@@ -18,7 +18,7 @@
     let error: string;
     let isCreating = false;
 
-    const create = async () => {
+    async function create() {
         try {
             isCreating = true;
             const project = await sdkForConsole.projects.create(
@@ -34,11 +34,10 @@
             });
             await goto(`/console/project-${project.$id}`);
         } catch ({ message }) {
-            error = message;
-        } finally {
             isCreating = false;
+            error = message;
         }
-    };
+    }
 </script>
 
 <Modal {error} on:submit={create} size="big" bind:show>

src/routes/console/project-[project]/overview/+layout.svelte

@@ -180,7 +180,7 @@
             {/if}
 
             <section class="common-section u-margin-block-start-100">
-                <Heading tag="h2" size="5">Integrations</Heading>
+                <Heading tag="h2" size="5" id="integrations">Integrations</Heading>
                 <div class="tabs u-margin-block-start-24 u-sep-block-end">
                     <button
                         class="tabs-button-scroll is-start u-hide"

src/routes/console/project-[project]/settings/+page.svelte

@@ -77,7 +77,9 @@
                     </FormList>
                 </svelte:fragment>
                 <svelte:fragment slot="actions">
-                    <Button secondary href={`${base}/console/project-${projectId}/overview/keys`}>
+                    <Button
+                        secondary
+                        href={`${base}/console/project-${projectId}/overview/keys#integrations`}>
                         View API Keys
                     </Button>
                 </svelte:fragment>

src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte

@@ -54,7 +54,7 @@
     <svelte:fragment slot="header">Create File</svelte:fragment>
     <FormList>
         <div>
-            <InputFile bind:files />
+            <InputFile bind:files allowedFileExtensions={$bucket.allowedFileExtensions} />
             <p>Max file size: {calculateSize($bucket.maximumFileSize)}</p>
         </div>
 

src/routes/console/project-[project]/storage/bucket-[bucket]/store.ts

@@ -1,4 +1,5 @@
 import { derived } from 'svelte/store';
 import { page } from '$app/stores';
+import type { Models } from '@aw-labs/appwrite-console';
 
-export const bucket = derived(page, ($page) => $page.data.bucket);
+export const bucket = derived(page, ($page) => $page.data.bucket as Models.Bucket);

src/routes/login/+page.svelte

@@ -14,10 +14,11 @@
     import { Unauthenticated } from '$lib/layout';
     import { Dependencies } from '$lib/constants';
 
-    let mail: string, pass: string;
+    let mail: string, pass: string, disabled: boolean;
 
-    const login = async () => {
+    async function login() {
         try {
+            disabled = true;
             await sdkForConsole.account.createEmailSession(mail, pass);
             await invalidate(Dependencies.ACCOUNT);
             addNotification({
@@ -26,12 +27,13 @@
             });
             await goto(`${base}/console`);
         } catch (error) {
+            disabled = false;
             addNotification({
                 type: 'error',
                 message: error.message
             });
         }
-    };
+    }
 </script>
 
 <svelte:head>
@@ -59,7 +61,7 @@
                     showPasswordButton={true}
                     bind:value={pass} />
                 <FormItem>
-                    <Button fullWidth submit>Sign in</Button>
+                    <Button fullWidth submit {disabled}>Sign in</Button>
                 </FormItem>
             </FormList>
         </Form>

src/routes/register/+page.svelte

@@ -16,22 +16,24 @@
     import FormList from '$lib/elements/forms/formList.svelte';
     import { Dependencies } from '$lib/constants';
 
-    let name: string, mail: string, pass: string;
+    let name: string, mail: string, pass: string, disabled: boolean;
     let terms = false;
 
-    const register = async () => {
+    async function register() {
         try {
+            disabled = true;
             await sdkForConsole.account.create('unique()', mail, pass, name ?? '');
             await sdkForConsole.account.createEmailSession(mail, pass);
             await invalidate(Dependencies.ACCOUNT);
             await goto(`${base}/console`);
         } catch (error) {
+            disabled = false;
             addNotification({
                 type: 'error',
                 message: error.message
             });
         }
-    };
+    }
 </script>
 
 <svelte:head>
@@ -77,7 +79,7 @@
                         rel="noopener noreferrer">General Terms of Use</a
                     >.</InputChoice>
                 <FormItem>
-                    <Button fullWidth submit>Sign up</Button>
+                    <Button fullWidth submit {disabled}>Sign up</Button>
                 </FormItem>
             </FormList>
         </Form>