Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Saved Filters Comments Block for Svelte

A thread inbox with Status, Author and Has filters, a Save preset button that makes a chip with its own result count, and a Copy link button that writes a real filter string.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Build a filter once and keep it with these saved filters for Svelte with Ark UI. A compact header names the inbox, and one hairline frame stacks three bands over the results. The first is the builder: a Status Native Select, an Author select and a "Has" Toggle Group of Attachment, Code and Mention, which narrow twelve threads live. The second holds your presets as chips with their own result counts (the chip is pressed while the filter matches it, and its cross deletes it) and a "Clear filters" button. The third is a field with Save preset, the one primary, and a Copy Button whose "Copy link" writes a real ?filter= string for the current filter to the clipboard. The results sit in a held scroll region with an Empty state that does not change the frame's height. On a phone the controls stack and the presets scroll sideways. For inboxes, ticket queues and any list people filter the same way every day.

FAQ

How do I fill it with my own threads and filters?

Edit THREADS (the title, the author id, an ISO at, a status and the three has flags), PEOPLE, STATUSES and HAS. START_PRESETS is the list of presets that exist on load, LIMIT the most presets and BASE_LINK the address the copied link starts with. Filtering is one function, resultsOf, so a real query replaces it in one place.

What does Save preset refuse?

An empty name, a name you already use, a filter with nothing set and a sixth preset. The reason appears under the field and in the status line, and the field keeps your text. A saved preset records the filter and shows how many threads it finds right now; the count follows the data, not the day you saved it.

What stays local?

The filters, the presets and their counts live in the page, and nothing is saved or shared. To make it real, store presets per person on the server and load them with the inbox; a shared preset is a separate feature with its own permissions. Keep the link's format stable, because people paste it into chats.

Is it accessible?

The builder is a labelled group, each select has a visible label, and the Has toggles report their pressed state. A preset chip is a pressed button named for the preset, and its delete button names the preset too. Results and presets announce what changed in the polite status line, and the reason for a refused save is also in an alert under the field.

How does it look on a phone?

The two selects and the Has group stack, the presets become one row that scrolls sideways (so the frame never grows), and the field, Save preset and Copy link wrap onto two lines.