add more pages

src/lib/layout/navigation.svelte

@@ -94,6 +94,16 @@
 							<span class="text">API Keys</span>
 						</a>
 					</li>
+					<li class="side-nav-item">
+						<a
+							class="side-nav-link"
+							class:is-selected={$page.url.pathname.startsWith(`/console/${project}/domains`)}
+							href={`/console/${project}/domains`}
+						>
+							<span class="icon-info-circled" aria-hidden="true" />
+							<span class="text">Domains</span>
+						</a>
+					</li>
 				</ul>
 			</section>
 		</div>

src/routes/console/[project]/domains/index.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { Back, Card } from '$lib/components';
+	import { Pill } from '$lib/elements';
+	import {
+		Table,
+		TableBody,
+		TableCellHead,
+		TableCellLink,
+		TableCellText,
+		TableHeader
+	} from '$lib/elements/table';
+	import { sdkForConsole } from '$lib/stores/sdk';
+
+	const projectId = $page.params.project;
+	const request = sdkForConsole.projects.listDomains(projectId);
+</script>
+
+<Back href={`/console/${projectId}`}>Home</Back>
+<h1>API Keys</h1>
+<Card>
+	{#await request}
+		<div aria-busy="true" />
+	{:then response}
+		<Table>
+			<TableHeader>
+				<TableCellHead width={80} />
+				<TableCellHead>Domain</TableCellHead>
+				<TableCellHead>TLS</TableCellHead>
+			</TableHeader>
+			<TableBody>
+				{#each response.domains as domain}
+					<TableCellText title="Scopes">
+						<Pill failed={!domain.verification} success={domain.verification}>
+							{domain.verification ? 'Unverified' : 'Verified'}
+						</Pill>
+					</TableCellText>
+					<TableCellLink href={`/console/${projectId}/keys/${domain.$id}`} title="Domain">
+						{domain.domain}
+					</TableCellLink>
+					<TableCellText title="Scopes">
+						{#if domain.certificateId}
+							Verified
+						{:else if domain.verification}
+							In Progress
+						{:else}
+							Pending Verification
+						{/if}
+					</TableCellText>
+				{/each}
+			</TableBody>
+		</Table>
+	{/await}
+</Card>

src/routes/console/[project]/keys/[key].svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { Back } from '$lib/components';
+
+	const projectId = $page.params.project;
+</script>
+
+<Back href={`/console/${projectId}/keys`}>API Keys</Back>

src/routes/console/[project]/keys/index.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { Back, Card } from '$lib/components';
+	import {
+		Table,
+		TableBody,
+		TableCellHead,
+		TableCellLink,
+		TableCellText,
+		TableHeader
+	} from '$lib/elements/table';
+	import { sdkForConsole } from '$lib/stores/sdk';
+
+	const projectId = $page.params.project;
+	const request = sdkForConsole.projects.listKeys(projectId);
+</script>
+
+<Back href={`/console/${projectId}`}>Home</Back>
+<h1>API Keys</h1>
+<Card>
+	{#await request}
+		<div aria-busy="true" />
+	{:then response}
+		<Table>
+			<TableHeader>
+				<TableCellHead>Name</TableCellHead>
+				<TableCellHead>Scopes</TableCellHead>
+			</TableHeader>
+			<TableBody>
+				{#each response.keys as key}
+					<TableCellLink href={`/console/${projectId}/keys/${key.$id}`} title="Name"
+						>{key.name}</TableCellLink
+					>
+					<TableCellText title="Scopes">{key.scopes.length}</TableCellText>
+				{/each}
+			</TableBody>
+		</Table>
+	{/await}
+</Card>

src/routes/console/[project]/webhooks/[webhook].svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+
+	import { Back } from '$lib/components';
+
+	const projectId = $page.params.project;
+</script>
+
+<Back href={`/console/${projectId}/webhooks`}>Webhooks</Back>

src/routes/console/[project]/webhooks/index.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { Back, Card } from '$lib/components';
+	import {
+		Table,
+		TableBody,
+		TableCellHead,
+		TableCellLink,
+		TableCellText,
+		TableHeader
+	} from '$lib/elements/table';
+	import { sdkForConsole } from '$lib/stores/sdk';
+
+	const projectId = $page.params.project;
+	const request = sdkForConsole.projects.listWebhooks(projectId);
+</script>
+
+<Back href={`/console/${projectId}`}>Home</Back>
+<h1>Webhooks</h1>
+<Card>
+	{#await request}
+		<div aria-busy="true" />
+	{:then response}
+		<Table>
+			<TableHeader>
+				<TableCellHead width={80}>Name</TableCellHead>
+				<TableCellHead>URL</TableCellHead>
+				<TableCellHead width={80}>Events</TableCellHead>
+			</TableHeader>
+			<TableBody>
+				{#each response.webhooks as webhook}
+					<TableCellLink href={`/console/${projectId}/webhooks/${webhook.$id}`} title="Name">
+						{webhook.name}
+					</TableCellLink>
+					<TableCellText title="URL">{webhook.url}</TableCellText>
+					<TableCellText title="Scopes">{webhook.events.length}</TableCellText>
+				{/each}
+			</TableBody>
+		</Table>
+	{/await}
+</Card>