Add search and view controls to sites page

Adds SearchQuery input and ViewSelector components with create site
button to provide filtering and display options for the sites list.

Author: TorstenDittmann

src/routes/(console)/project-[region]-[project]/sites/+page.svelte

@@ -72,6 +72,24 @@
 
 <Container>
     {#if data.sitesLive}
+        <Layout.Stack direction="row" justifyContent="space-between">
+            <Layout.Stack direction="row" alignItems="center">
+                <SearchQuery placeholder="Search by name" />
+            </Layout.Stack>
+            <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+                <ViewSelector
+                    {columns}
+                    view={data.view}
+                    hideColumns
+                    hideView={!data.siteList.total} />
+                {#if $canWriteSites}
+                    <Button on:mousedown={() => (show = true)} event="create_site" size="s">
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Create site
+                    </Button>
+                {/if}
+            </Layout.Stack>
+        </Layout.Stack>
         {#if data.siteList.total}
             {#if data.view === View.Grid}
                 <Grid siteList={data.siteList} />

src/routes/(console)/project-[region]-[project]/sites/+page.ts

@@ -1,4 +1,4 @@
-import { Query } from '@appwrite.io/console';
+import { Query, type Models } from '@appwrite.io/console';
 import { sdk } from '$lib/stores/sdk';
 import { getLimit, getPage, getSearch, getView, pageToOffset, View } from '$lib/helpers/load';
 import { CARD_LIMIT, Dependencies } from '$lib/constants';
@@ -19,7 +19,11 @@ export const load = async ({ url, depends, route, params }) => {
             offset,
             limit,
             search,
-            view
+            view,
+            siteList: {
+                total: 0,
+                sites: []
+            } as Models.SiteList
         };
 
     const siteList = await sdk