Fix UI issues

src/hooks.client.ts

@@ -0,0 +1,13 @@
+import { AppwriteException } from '@appwrite.io/console';
+import type { HandleClientError } from '@sveltejs/kit';
+
+export const handleError: HandleClientError = async ({ error, message, status }) => {
+    if (error instanceof AppwriteException && error.code === 0) {
+        status = undefined;
+        message = error.message;
+    }
+    return {
+        message,
+        status
+    };
+};

src/lib/components/filters/content.svelte

@@ -134,7 +134,7 @@
                 bind:value={operatorKey} />
         </ul>
         {#if column && operator && !operator?.hideInput}
-            <div class="u-margin-block-start-8">
+            <ul class="u-margin-block-start-8">
                 {#if column.type === 'integer' || column.type === 'double'}
                     <InputNumber id="value" bind:value placeholder="Enter value" />
                 {:else if column.type === 'boolean'}
@@ -150,7 +150,7 @@
                 {:else}
                     <InputText id="value" bind:value placeholder="Enter value" />
                 {/if}
-            </div>
+            </ul>
         {/if}
         <Button text disabled={isDisabled} class="u-margin-block-start-4" submit>
             <i class="icon-plus" />

src/routes/+error.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <Unauthenticated>
-    <Heading size="1" tag="h3">{$page.status}</Heading>
+    <Heading size="1" tag="h3">{$page.error.status || 'Invalid Argument'}</Heading>
     <Heading size="3" tag="h4">{$page.error.message}</Heading>
     <Button href="/">Back to the console</Button>
 </Unauthenticated>

src/routes/+layout.ts

@@ -13,9 +13,10 @@ export const ssr = false;
 export const load: LayoutLoad = async ({ depends, url }) => {
     depends(Dependencies.ACCOUNT);
 
-    redirectTo.set(url.searchParams.get('forceRedirect') || null);
-
-    url.searchParams.delete('forceRedirect');
+    if (url.searchParams.has('forceRedirect')) {
+        redirectTo.set(url.searchParams.get('forceRedirect') || null);
+        url.searchParams.delete('forceRedirect');
+    }
 
     try {
         const account = await sdk.forConsole.account.get<{ organization?: string }>();

src/routes/console/+error.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <Container>
-    <Heading size="1" tag="h3">{$page.status}</Heading>
+    <Heading size="1" tag="h3">{$page.error.status || 'Invalid Argument'}</Heading>
     <Heading size="3" tag="h4">{$page.error.message}</Heading>
     <Button href="/console">Back to the console</Button>
 </Container>

src/routes/console/organization-[organization]/+layout.ts

@@ -10,6 +10,7 @@ import { headerAlert } from '$lib/stores/headerAlert';
 import ProjectsAtRisk from '$lib/components/billing/alerts/projectsAtRisk.svelte';
 import { get } from 'svelte/store';
 import { preferences } from '$lib/stores/preferences';
+import type { Organization } from '$lib/stores/organization';
 
 export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.ORGANIZATION);
@@ -37,7 +38,9 @@ export const load: LayoutLoad = async ({ params, depends }) => {
         return {
             header: Header,
             breadcrumbs: Breadcrumbs,
-            organization: await sdk.forConsole.teams.get(params.organization),
+            organization: await (sdk.forConsole.teams.get(
+                params.organization
+            ) as Promise<Organization>),
             members: await sdk.forConsole.teams.listMemberships(params.organization)
         };
     } catch (e) {

src/routes/console/project-[project]/+error.svelte

@@ -5,6 +5,6 @@
 </script>
 
 <Container>
-    <Heading size="1" tag="h3">{$page.status}</Heading>
+    <Heading size="1" tag="h3">{$page.error.status || 'Invalid Argument'}</Heading>
     <p class="body-text-2 u-bold u-margin-block-start-4">{$page.error.message}</p>
 </Container>

src/routes/console/project-[project]/+layout.ts

@@ -5,6 +5,7 @@ import type { LayoutLoad } from './$types';
 import { preferences } from '$lib/stores/preferences';
 import { failedInvoice } from '$lib/stores/billing';
 import { isCloud } from '$lib/system';
+import type { Organization } from '$lib/stores/organization';
 
 export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.PROJECT);
@@ -22,7 +23,7 @@ export const load: LayoutLoad = async ({ params, depends }) => {
 
         return {
             project,
-            organization: await sdk.forConsole.teams.get(project.teamId)
+            organization: await (sdk.forConsole.teams.get(project.teamId) as Promise<Organization>)
         };
     } catch (e) {
         error(e.code, e.message);

src/routes/console/project-[project]/settings/usage/[[invoice]]/+page.ts

@@ -1,24 +1,22 @@
+import type { Aggregation, Invoice } from '$lib/sdk/billing';
+import { accumulateUsage } from '$lib/sdk/usage';
 import { getSdkForProject, sdk } from '$lib/stores/sdk';
 import { Query } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
-import type { Organization } from '$lib/stores/organization';
-import type { Aggregation, Invoice } from '$lib/sdk/billing';
-import { accumulateUsage } from '$lib/sdk/usage';
 
 export const load: PageLoad = async ({ params, parent }) => {
     const { invoice, project } = params;
-    const parentData = await parent();
-    const org = parentData.organization as Organization;
+    const { organization } = await parent();
 
-    let startDate: string = org.billingCurrentInvoiceDate;
-    let endDate: string = org.billingNextInvoiceDate;
+    let startDate: string = organization.billingCurrentInvoiceDate;
+    let endDate: string = organization.billingNextInvoiceDate;
     let currentInvoice: Invoice = undefined;
     let currentAggregation: Aggregation = undefined;
 
     if (invoice) {
-        currentInvoice = await sdk.forConsole.billing.getInvoice(org.$id, invoice);
+        currentInvoice = await sdk.forConsole.billing.getInvoice(organization.$id, invoice);
         currentAggregation = await sdk.forConsole.billing.getAggregation(
-            org.$id,
+            organization.$id,
             currentInvoice.aggregationId
         );
 
@@ -27,7 +25,7 @@ export const load: PageLoad = async ({ params, parent }) => {
     }
 
     const [invoices, usage] = await Promise.all([
-        sdk.forConsole.billing.listInvoices(org.$id, [Query.orderDesc('from')]),
+        sdk.forConsole.billing.listInvoices(organization.$id, [Query.orderDesc('from')]),
         /**
          * Workaround because project id might not be populated yet.
          */