Removes unused var

src/lib/components/viewSelector.svelte

@@ -4,6 +4,7 @@
         title: string;
         show: boolean;
         width?: number;
+        transform?: (value: unknown) => string;
     };
 </script>
 

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

@@ -1,19 +1,10 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { tooltip } from '$lib/actions/tooltip';
-    import {
-        CardContainer,
-        Empty,
-        GridItem1,
-        Heading,
-        Id,
-        PaginationWithLimit
-    } from '$lib/components';
+    // import { tooltip } from '$lib/actions/tooltip';
+    import { Empty, PaginationWithLimit } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import { toLocaleDateTime } from '$lib/helpers/date';
-    import { Container } from '$lib/layout';
-    import { app } from '$lib/stores/app';
+    import { Container, GridHeader } from '$lib/layout';
+    // import { app } from '$lib/stores/app';
     import { wizard } from '$lib/stores/wizard';
     import { onMount } from 'svelte';
     import Initial from '$lib/wizards/functions/cover.svelte';
@@ -24,12 +15,18 @@
         template as templateStore
     } from '$lib/wizards/functions/store.js';
     import { marketplace } from '$lib/stores/marketplace.js';
+    import type { PageData } from './$types';
+    import Grid from './grid.svelte';
+    import Table from './table.svelte';
+
+    import { columns } from './store';
+    // import { vi } from 'vitest';
 
-    export let data;
+    export let data: PageData;
 
     let offset = 0;
 
-    const project = $page.params.project;
+    // const project = $page.params.project;
 
     onMount(() => {
         const from = $page.url.searchParams.get('from');
@@ -72,55 +69,24 @@
 </script>
 
 <Container>
-    <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <Heading tag="h2" size="5">Functions</Heading>
-        <Button on:click={openWizard} event="create_function">
+    <GridHeader
+        title="Functions"
+        view={data.view}
+        {columns}
+        hideColumns={!data.functions.total}
+        hideView={!data.functions.total}>
+        <Button on:click={openWizard}>
             <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Create function</span>
+            <span class="text">Create Function</span>
         </Button>
-    </div>
+    </GridHeader>
 
     {#if data.functions.total}
-        <CardContainer
-            {offset}
-            event="functions"
-            total={data.functions.total}
-            on:click={openWizard}>
-            {#each data.functions.functions as func}
-                <GridItem1
-                    href={`${base}/console/project-${project}/functions/function-${func.$id}`}>
-                    <svelte:fragment slot="title">
-                        <div class="u-flex u-gap-16 u-cross-center">
-                            <div class="avatar is-medium">
-                                <img
-                                    src={`${base}/icons/${$app.themeInUse}/color/${
-                                        func.runtime.split('-')[0]
-                                    }.svg`}
-                                    alt="technology" />
-                            </div>
-                            <span class="text">{func.name}</span>
-                        </div>
-                    </svelte:fragment>
-                    <svelte:fragment slot="icons">
-                        {#if func.schedule}
-                            <li>
-                                <span
-                                    class="icon-clock"
-                                    aria-hidden="true"
-                                    use:tooltip={{
-                                        content: `Next execution: 
-                                        ${toLocaleDateTime(func.schedule)}`
-                                    }} />
-                            </li>
-                        {/if}
-                    </svelte:fragment>
-                    <Id value={func.$id} event="function">{func.$id}</Id>
-                </GridItem1>
-            {/each}
-            <svelte:fragment slot="empty">
-                <p>Create a new function</p>
-            </svelte:fragment>
-        </CardContainer>
+        {#if data.view === 'grid'}
+            <Grid {data} {offset} {openWizard} />
+        {:else}
+            <Table {data} />
+        {/if}
 
         <PaginationWithLimit
             name="Functions"

src/routes/console/project-[project]/functions/+page.ts

@@ -1,19 +1,21 @@
 import { Query } from '@appwrite.io/console';
 import { sdk } from '$lib/stores/sdk';
-import { getLimit, getPage, pageToOffset } from '$lib/helpers/load';
+import { getLimit, getPage, pageToOffset, getView, View } from '$lib/helpers/load';
 import { CARD_LIMIT, Dependencies } from '$lib/constants';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ url, depends, route }) => {
     depends(Dependencies.FUNCTIONS);
 
     const page = getPage(url);
+    const view = getView(url, route, View.Grid);
     const limit = getLimit(url, route, CARD_LIMIT);
     const offset = pageToOffset(page, limit);
 
     return {
         offset,
         limit,
+        view,
         functions: await sdk.forProject.functions.list([
             Query.limit(limit),
             Query.offset(offset),

src/routes/console/project-[project]/functions/grid.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { CardContainer, GridItem1, Id } from '$lib/components';
+    import type { PageData } from './$types';
+    import { app } from '$lib/stores/app';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { tooltip } from '$lib/actions/tooltip';
+
+    export let data: PageData;
+    export let offset = 0;
+    export let openWizard;
+
+    // let showCreate = false;
+
+    const project = $page.params.project;
+</script>
+
+<CardContainer {offset} event="functions" total={data.functions.total} on:click={openWizard}>
+    {#each data.functions.functions as func}
+        <GridItem1 href={`${base}/console/project-${project}/functions/function-${func.$id}`}>
+            <svelte:fragment slot="title">
+                <div class="u-flex u-gap-16 u-cross-center">
+                    <div class="avatar is-medium">
+                        <img
+                            src={`${base}/icons/${$app.themeInUse}/color/${
+                                func.runtime.split('-')[0]
+                            }.svg`}
+                            alt="technology" />
+                    </div>
+                    <span class="text">{func.name}</span>
+                </div>
+            </svelte:fragment>
+            <svelte:fragment slot="icons">
+                {#if func.schedule}
+                    <li>
+                        <span
+                            class="icon-clock"
+                            aria-hidden="true"
+                            use:tooltip={{
+                                content: `Next execution: 
+                            ${toLocaleDateTime(func.schedule)}`
+                            }} />
+                    </li>
+                {/if}
+            </svelte:fragment>
+            <Id value={func.$id} event="function">{func.$id}</Id>
+        </GridItem1>
+    {/each}
+    <svelte:fragment slot="empty">
+        <p>Create a new function</p>
+    </svelte:fragment>
+</CardContainer>

src/routes/console/project-[project]/functions/store.ts

@@ -1,6 +1,9 @@
 import { page } from '$app/stores';
 import { derived } from 'svelte/store';
 import type { Models } from '@appwrite.io/console';
+import type { Column } from '$lib/components/viewSelector.svelte';
+import { toLocaleDateTime } from '$lib/helpers/date';
+import { writable } from 'svelte/store';
 
 export const runtimesList = derived(
     page,
@@ -15,3 +18,32 @@ export const baseRuntimesList = derived(runtimesList, async ($runtimesList) => {
     }
     return { runtimes: [...baseRuntimes.values()] };
 });
+
+export const columns = writable<Column[]>([
+    {
+        id: '$id',
+        title: 'Function ID',
+        show: true,
+        width: 150
+    },
+    {
+        id: 'name',
+        title: 'Name',
+        show: true,
+        width: 120
+    },
+    {
+        id: '$createdAt',
+        title: 'Created',
+        show: true,
+        width: 120,
+        transform: toLocaleDateTime
+    },
+    {
+        id: '$updatedAt',
+        title: 'Updated',
+        show: true,
+        width: 120,
+        transform: toLocaleDateTime
+    }
+]);

src/routes/console/project-[project]/functions/table.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+    // import { invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    // import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Id /*Modal*/ } from '$lib/components';
+    import FloatingActionBar from '$lib/components/floatingActionBar.svelte';
+    // import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+    import {
+        TableBody,
+        TableCell,
+        TableCellHead,
+        TableCellHeadCheck,
+        TableCellText,
+        TableHeader,
+        TableRowLink,
+        TableScroll,
+        TableCellCheck
+    } from '$lib/elements/table';
+    // import { addNotification } from '$lib/stores/notifications';
+    // import { sdk } from '$lib/stores/sdk';
+    import type { PageData } from './$types';
+    import { columns } from './store';
+
+    export let data: PageData;
+
+    const project = $page.params.project;
+
+    let selected: string[] = [];
+    let showDelete: boolean;
+    // let deleting = false;
+</script>
+
+<TableScroll>
+    <TableHeader>
+        <TableCellHeadCheck
+            bind:selected
+            pageItemsIds={data.functions.functions.map((c) => c.$id)} />
+        {#each $columns as column}
+            {#if column.show}
+                <TableCellHead width={column.width}>{column.title}</TableCellHead>
+            {/if}
+        {/each}
+    </TableHeader>
+    <TableBody>
+        {#each data.functions.functions as fn}
+            <TableRowLink href={`${base}/console/project-${project}/functions/function-${fn.$id}`}>
+                <TableCellCheck bind:selectedIds={selected} id={fn.$id} />
+                {#each $columns as column}
+                    {#if column.show}
+                        {#if column.id === '$id'}
+                            {#key $columns}
+                                <TableCell width={column.width} title={column.title}>
+                                    <Id value={fn.$id}>
+                                        {fn.$id}
+                                    </Id>
+                                </TableCell>
+                            {/key}
+                        {:else}
+                            <TableCellText width={column.width} title={column.title}>
+                                {#if column.transform}
+                                    {column.transform(fn[column.id])}
+                                {:else}
+                                    {fn[column.id]}
+                                {/if}
+                            </TableCellText>
+                        {/if}
+                    {/if}
+                {/each}
+            </TableRowLink>
+        {/each}
+    </TableBody>
+</TableScroll>
+
+<FloatingActionBar show={selected.length > 0}>
+    <div class="u-flex u-cross-center u-main-space-between actions">
+        <div class="u-flex u-cross-center u-gap-8">
+            <span class="indicator body-text-2 u-bold">{selected.length}</span>
+            <p>
+                <span class="is-only-desktop">
+                    {selected.length > 1 ? 'functions' : 'function'}
+                </span>
+                selected
+            </p>
+        </div>
+
+        <div class="u-flex u-cross-center u-gap-8">
+            <Button text on:click={() => (selected = [])}>Cancel</Button>
+            <Button secondary on:click={() => (showDelete = true)}>
+                <p>Delete</p>
+            </Button>
+        </div>
+    </div>
+</FloatingActionBar>
+
+<style lang="scss">
+    .actions {
+        .indicator {
+            border-radius: 0.25rem;
+            background: hsl(var(--color-information-100));
+            color: hsl(var(--color-neutral-0));
+
+            padding: 0rem 0.375rem;
+            display: inline-block;
+        }
+    }
+</style>

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

@@ -4,7 +4,6 @@
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import { BucketsPanel } from '$lib/commandCenter/panels';
     import { project } from '../store';
-    import { showCreateBucket } from './+page.svelte';
 
     $: $registerCommands([
         {
@@ -13,7 +12,6 @@
                 if (!$page.url.pathname.endsWith('storage')) {
                     goto(`/console/project-${$project.$id}/storage`);
                 }
-                $showCreateBucket = true;
             },
             keys: $page.url.pathname.endsWith('storage') ? ['c'] : ['c', 'b'],
             icon: 'plus',