Skip to content

fix: filters in messaging screen #2839

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HarshMN2345 merged 1 commit into from
Feb 6, 2026
+46 −15
Merged

fix: filters in messaging screen #2839

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 22 additions & 8 deletions src/lib/components/filters/quickFilters.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,36 @@
let {
columns,
filterCols,
analyticsSource
analyticsSource,
buttonVariant = 'ghost'
}: {
columns: Writable<Column[]>;
filterCols: FilterData[];
analyticsSource?: string;
buttonVariant?: 'ghost' | 'secondary';
} = $props();
</script>

<Menu>
<Button
ariaLabel="Filters"
text
icon
badge={$parsedTags?.length ? `${$parsedTags.length}` : undefined}>
<Icon icon={IconFilterLine} size="s" />
</Button>
{#if buttonVariant === 'secondary'}
<Button
ariaLabel="Filters"
secondary
size="s"
badge={$parsedTags?.length ? `${$parsedTags.length}` : undefined}>
<Icon icon={IconFilterLine} size="s" slot="start" />
<span class="text">Filters</span>
</Button>
{:else}
<Button
ariaLabel="Filters"
text
icon
size="s"
badge={$parsedTags?.length ? `${$parsedTags.length}` : undefined}>
<Icon icon={IconFilterLine} size="s" />
</Button>
{/if}
<svelte:fragment slot="menu">
{#each filterCols.filter((f) => f?.options) as filter (filter.title + filter.id)}
{#if filter.options}
Expand Down
28 changes: 21 additions & 7 deletions src/lib/layout/responsiveContainerHeader.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script lang="ts">
import { SearchQuery, ViewSelector } from '$lib/components';
import { FiltersBottomSheet, ParsedTagList, queryParamToMap } from '$lib/components/filters';
import QuickFilters from '$lib/components/filters/quickFilters.svelte';

import Button from '$lib/elements/forms/button.svelte';
import { View } from '$lib/helpers/load';
Expand All @@ -23,6 +24,7 @@
hasSearch = false,
searchPlaceholder = 'Search by ID',
hasFilters = false,
filtersStyle = 'chips',
analyticsSource = '',
children
}: {
Expand All @@ -33,6 +35,7 @@
hasSearch?: boolean;
searchPlaceholder?: string;
hasFilters?: boolean;
filtersStyle?: 'chips' | 'dropdown';
analyticsSource?: string;
children?: Snippet;
} = $props();
Expand Down Expand Up @@ -99,28 +102,32 @@
{#if showSearch && hasSearch}
<SearchQuery placeholder={searchPlaceholder} />
{/if}
<div style="overflow-x: auto;">
<ParsedTagList {columns} {analyticsSource} />
</div>
{#if hasFilters && filtersStyle === 'chips'}
<div style="overflow-x: auto;">
<ParsedTagList {columns} {analyticsSource} />
</div>
{/if}
Comment on lines +105 to +109
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Small viewport in 'dropdown' mode has no visual indicator for active filters.

When filtersStyle === 'dropdown', this guard hides the ParsedTagList chips on small viewports. However, the small viewport path doesn't render QuickFilters (which carries the active-filter badge) either — it only shows the generic filtersButton snippet (Line 195), which has no badge. This means users on mobile won't see any indication that filters are currently applied.

Consider either:

  1. Adding a badge to the filtersButton snippet when filtersStyle === 'dropdown', or
  2. Rendering QuickFilters on small viewports in dropdown mode as well.
#!/bin/bash
# Check if filtersButton snippet or the small viewport filter path has any badge/indicator logic
rg -n 'filtersButton\|showFilters\|parsedTags' src/lib/layout/responsiveContainerHeader.svelte
🤖 Prompt for AI Agents 
In `@src/lib/layout/responsiveContainerHeader.svelte` around lines 105 - 109, The
mobile path currently renders the generic filtersButton without any
active-filter indicator when filtersStyle === 'dropdown' and hasFilters is true;
update the filtersButton snippet (the element/render block referenced by
filtersButton) to conditionally show a badge/indicator whenever hasFilters is
true and filtersStyle === 'dropdown' (use the same badge markup/props used by
QuickFilters/ParsedTagList to keep visuals consistent), or alternatively render
<QuickFilters> on small viewports when filtersStyle === 'dropdown' by reusing
the existing QuickFilters component logic; focus your change on the
filtersButton/QuickFilters conditional logic around filtersStyle, hasFilters,
ParsedTagList and showFilters so mobile users see the active-filter badge.

</Layout.Stack>
{:else}
<Layout.Stack direction="row" justifyContent="space-between" alignItems="flex-start">
<Layout.Stack
direction="row"
alignItems="center"
alignItems="flex-start"
gap="m"
style="min-width: 0; flex: 1 1 auto;">
{#if hasSearch}
<SearchQuery placeholder={searchPlaceholder} />
<div style="flex: 0 0 auto; max-width: 360px; min-width: 0;">
<SearchQuery placeholder={searchPlaceholder} />
</div>
{/if}
{#if hasFilters}
{#if hasFilters && filtersStyle === 'chips'}
<!-- Tags with Filters button (rendered inside ParsedTagList) -->
<Layout.Stack
direction="row"
alignItems="center"
gap="s"
wrap="wrap"
style="min-width: 0;">
style="min-width: 0; flex: 1 1 auto;">
<ParsedTagList {columns} {analyticsSource} />
</Layout.Stack>
{/if}
Expand All @@ -130,6 +137,13 @@
alignItems="center"
justifyContent="flex-end"
style="align-self: flex-start; white-space: nowrap;">
{#if hasFilters && filtersStyle === 'dropdown'}
<QuickFilters
{columns}
{analyticsSource}
buttonVariant="secondary"
filterCols={filterCols.filter((f) => f?.options)} />
{/if}
{#if hasDisplaySettings}
<ViewSelector ui="new" {view} {columns} {hideView} {hideColumns} />
{/if}
Expand Down
1 change: 1 addition & 0 deletions src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@
hideView
hasSearch
hasFilters
filtersStyle="dropdown"
bind:view={data.view}
analyticsSource="messaging_messages"
searchPlaceholder="Search by description, type, status, or ID">
Expand Down
1 change: 1 addition & 0 deletions src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
hideView
hasFilters
hasSearch
filtersStyle="dropdown"
analyticsSource="messaging_providers"
searchPlaceholder="Search by name or ID">
{#if $canWriteProviders}
Expand Down
1 change: 1 addition & 0 deletions src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@
hideView
hasFilters
hasSearch
filtersStyle="dropdown"
analyticsSource="messaging_topics_filter"
searchPlaceholder="Search by name or ID">
{#if $canWriteTopics}
Expand Down