From f01c41188efb66a21b7bfe0a15b5f65c65b5c1eb Mon Sep 17 00:00:00 2001
From: ArmanNik <arman@appwrite.io>
Date: Wed, 11 Jun 2025 15:07:38 +0200
Subject: [PATCH] feat: add missing responsive headers

---
 .../layout/responsiveContainerHeader.svelte   |  2 +-
 .../database-[database]/+page.svelte          | 36 +++++-------
 .../messaging/+page.svelte                    | 38 +++++--------
 .../messaging/topics/+page.svelte             | 55 ++++++++-----------
 4 files changed, 55 insertions(+), 76 deletions(-)

diff --git a/src/lib/layout/responsiveContainerHeader.svelte b/src/lib/layout/responsiveContainerHeader.svelte
index 247564f86f..e84caf048d 100644
--- a/src/lib/layout/responsiveContainerHeader.svelte
+++ b/src/lib/layout/responsiveContainerHeader.svelte
@@ -17,7 +17,7 @@
 
     let {
         columns,
-        view = View.Table,
+        view = $bindable(View.Table),
         hideView = false,
         hideColumns = false,
         hasSearch = false,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
index b7e886be57..989916cf9a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
@@ -1,37 +1,31 @@
 <script lang="ts">
-    import { Empty, PaginationWithLimit, SearchQuery, ViewSelector } from '$lib/components';
+    import { Empty, PaginationWithLimit } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import { Container } from '$lib/layout';
+    import { Container, ResponsiveContainerHeader } from '$lib/layout';
     import { columns, showCreate } from './store';
     import Table from './table.svelte';
     import Grid from './grid.svelte';
     import type { PageData } from './$types';
     import { canWriteCollections } from '$lib/stores/roles';
-    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data: PageData;
 </script>
 
 <Container>
-    <Layout.Stack direction="row" justifyContent="space-between">
-        <Layout.Stack direction="row" alignItems="center">
-            <SearchQuery placeholder="Search by name or ID" />
-        </Layout.Stack>
-        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            <ViewSelector
-                {columns}
-                view={data.view}
-                hideColumns={!data.collections.total}
-                hideView={!data.collections.total} />
-            {#if $canWriteCollections}
-                <Button on:click={() => ($showCreate = true)} event="create_collection">
-                    <Icon icon={IconPlus} slot="start" size="s" />
-                    Create collection
-                </Button>
-            {/if}
-        </Layout.Stack>
-    </Layout.Stack>
+    <ResponsiveContainerHeader
+        bind:view={data.view}
+        {columns}
+        hasSearch
+        searchPlaceholder="Search by name or ID">
+        {#if $canWriteCollections}
+            <Button on:click={() => ($showCreate = true)} event="create_collection">
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create collection
+            </Button>
+        {/if}
+    </ResponsiveContainerHeader>
 
     {#if data.collections.total}
         {#if data.view === 'grid'}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
index 0ed4c8b4c9..12821a0bf0 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
@@ -1,19 +1,11 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/state';
-    import {
-        Empty,
-        EmptyFilter,
-        EmptySearch,
-        Id,
-        PaginationWithLimit,
-        SearchQuery,
-        ViewSelector
-    } from '$lib/components';
-    import { Filters, hasPageQueries } from '$lib/components/filters';
+    import { Empty, EmptyFilter, EmptySearch, Id, PaginationWithLimit } from '$lib/components';
+    import { hasPageQueries } from '$lib/components/filters';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { Container } from '$lib/layout';
+    import { Container, ResponsiveContainerHeader } from '$lib/layout';
     import { MessagingProviderType } from '@appwrite.io/console';
     import CreateMessageDropdown from './createMessageDropdown.svelte';
     import FailedModal from './failedModal.svelte';
@@ -105,18 +97,18 @@
 </script>
 
 <Container>
-    <Layout.Stack direction="row" justifyContent="space-between">
-        <Layout.Stack direction="row" alignItems="center">
-            <SearchQuery placeholder="Search by description, type, status, or ID" />
-        </Layout.Stack>
-        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            <Filters query={data.query} {columns} analyticsSource="messaging_messages" />
-            <ViewSelector view={data.view} {columns} hideView />
-            {#if $canWriteMessages}
-                <CreateMessageDropdown />
-            {/if}
-        </Layout.Stack>
-    </Layout.Stack>
+    <ResponsiveContainerHeader
+        {columns}
+        bind:view={data.view}
+        hideView
+        hasFilters
+        hasSearch
+        analyticsSource="messaging_messages"
+        searchPlaceholder="Search by description, type, status, or ID">
+        {#if $canWriteMessages}
+            <CreateMessageDropdown />
+        {/if}
+    </ResponsiveContainerHeader>
 
     {#if data.messages.total}
         <Table.Root
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
index c8f5a49b2e..2833293ac4 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
@@ -1,27 +1,20 @@
 <script lang="ts">
     import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
-    import {
-        Empty,
-        EmptySearch,
-        SearchQuery,
-        PaginationWithLimit,
-        EmptyFilter,
-        ViewSelector
-    } from '$lib/components';
+    import { Empty, EmptySearch, PaginationWithLimit, EmptyFilter } from '$lib/components';
     import Create from './create.svelte';
     import { goto } from '$app/navigation';
-    import { Container } from '$lib/layout';
+    import { Container, ResponsiveContainerHeader } from '$lib/layout';
     import { base } from '$app/paths';
     import type { Models } from '@appwrite.io/console';
     import type { PageData } from './$types';
     import { showCreate } from './store';
-    import { Filters, hasPageQueries } from '$lib/components/filters';
+    import { hasPageQueries } from '$lib/components/filters';
     import Table from './table.svelte';
     import type { Column } from '$lib/helpers/types';
     import { writable } from 'svelte/store';
     import { canWriteTopics } from '$lib/stores/roles';
-    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
     import { View } from '$lib/helpers/load';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
@@ -72,26 +65,26 @@
 </script>
 
 <Container>
-    <Layout.Stack direction="row" justifyContent="space-between">
-        <Layout.Stack direction="row" alignItems="center">
-            <SearchQuery placeholder="Search by name or ID" />
-        </Layout.Stack>
-        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            <Filters query={data.query} {columns} analyticsSource="messaging_topics_filter" />
-            <ViewSelector view={View.Table} {columns} hideView />
-            {#if $canWriteTopics}
-                <Button
-                    on:click={() => {
-                        $showCreate = true;
-                        trackEvent(Click.MessagingTopicCreateClick);
-                    }}
-                    event="create_topic">
-                    <Icon icon={IconPlus} slot="start" size="s" />
-                    Create topic
-                </Button>
-            {/if}
-        </Layout.Stack>
-    </Layout.Stack>
+    <ResponsiveContainerHeader
+        {columns}
+        view={View.Table}
+        hideView
+        hasFilters
+        hasSearch
+        analyticsSource="messaging_topics_filter"
+        searchPlaceholder="Search by name or ID">
+        {#if $canWriteTopics}
+            <Button
+                on:click={() => {
+                    $showCreate = true;
+                    trackEvent(Click.MessagingTopicCreateClick);
+                }}
+                event="create_topic">
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create topic
+            </Button>
+        {/if}
+    </ResponsiveContainerHeader>
 
     {#if data.topics.total}
         <Table columns={$columns} {data} />