KQ-1636 · SAVED/LENSES

Saved Lenses

A row of saved views over a chip bar and a results list where switching views is a shared-element move: chips the two views have in common are the same elements and keep their slots, arriving chips take the slots departing ones leave, the differing ones slide out on the exit ease and in on springs.snap a cascade apart, and later chips glide on springs.glide only when a replaced chip is a different width. The tab mark slides on snap. Removing a chip or adding one from Filter makes a draft whose tab earns a modified dot on snap while Save, Save as new and Revert slide in on glide; views are a tablist with arrows, Home and End, and digits 1 to 9 pick a view from anywhere in the surface.

KQ-1636 · SAVED/LENSES

Support queue

9 tickets

SUP-462Bulk edit times outFernworks · me · normalInes Park3d overdue
SUP-498Roles reset after updateBasinworks · me · normalInes Park3d overdue
SUP-449Webhook retries flood the logFieldline · me · highInes Park2d overdue
SUP-409SSO login loopsBasinworks · me · highInes Parkdue today
SUP-476Timezone shifts due datesFieldline · me · normalInes Parkdue in 2d
SUP-480Gauge sync drops overnightFieldline · me · highInes Parkdue in 2d
SUP-485Mobile app logs out hourlyFieldline · me · urgentInes Parkdue in 3d
SUP-427Map tiles fail to loadBasinworks · me · lowInes Parkdue in 7d
SUP-435CSV import skips headersFieldline · me · lowInes Parkdue in 9d

my open · switch views · shared chips stay put

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/saved-lenses

Props

views: LensView[]; default defaultLensViews; Seeds the saved views ({ id, name, filters: { field, value }[] }); the surface owns saves after that and reports them.
rows: LensRow[]; default defaultLensRows; The records each view filters: { id, code, title, due, ...fields }.
fields: LensField[]; default defaultLensFields; The filterable fields and their values offered by Filter; a field of kind "due" reads due dates against now (overdue, today, this week).
value / defaultValue: string; default — / the first view; The active view id, controlled or initial.
onValueChange: (id: string) => void; default —; Fires with the new view id from the tab, arrow or digit that chose it.
onViewChange: (view, previous) => void; default —; Fires with the view switched to (including unsaved edits) and the one left.
onSaveView: (view, { asNew }) => void; default —; Fires from Save (asNew false) or Save as new (asNew true) with the saved view.
onRevert: (viewId: string) => void; default —; Fires from Revert with the view whose edits were dropped.
status: "ready" | "loading" | "error"; default "ready"; Whether the active view's results have arrived; loading, empty and failed views each get a quiet panel.
onRetry: () => void; default —; Try again was pressed on a failed view.
tabStyle: "underline" | "pill" | "boxed"; default "underline"; How the active tab is marked: an underline, a tinted pill, or a raised box; the mark slides between tabs.
chipStyle: "soft" | "outline" | "solid"; default "soft"; Chip look: a soft wash, a hairline outline, or a solid fill.
cornerRadius: number; default 8; Corner radius of chips, tabs, the menu and buttons, px (0 to 16).
accent: string; default "var(--accent-bright)"; The tab mark, chips and Save, any CSS colour.
now: number; default defaultLensNow; Today in ms, for due dates.
me: string; default "Ines Park"; Whose queue this is: an assignee chip with this value reads "Me".
title: string; default "Support queue"; The heading over the views and the surface's accessible name.
height: number; default 520; Height of the surface in px; the results scroll inside it.
disabled: boolean; default false; Views, chips and actions are inert; the surface dims.
className: string; default —; Classes for the outer surface.

Prop	Type	Default	Description
views	LensView[]	defaultLensViews	Seeds the saved views ({ id, name, filters: { field, value }[] }); the surface owns saves after that and reports them.
rows	LensRow[]	defaultLensRows	The records each view filters: { id, code, title, due, ...fields }.
fields	LensField[]	defaultLensFields	The filterable fields and their values offered by Filter; a field of kind "due" reads due dates against now (overdue, today, this week).
value / defaultValue	string	— / the first view	The active view id, controlled or initial.
onValueChange	(id: string) => void	—	Fires with the new view id from the tab, arrow or digit that chose it.
onViewChange	(view, previous) => void	—	Fires with the view switched to (including unsaved edits) and the one left.
onSaveView	(view, { asNew }) => void	—	Fires from Save (asNew false) or Save as new (asNew true) with the saved view.
onRevert	(viewId: string) => void	—	Fires from Revert with the view whose edits were dropped.
status	"ready" \| "loading" \| "error"	"ready"	Whether the active view's results have arrived; loading, empty and failed views each get a quiet panel.
onRetry	() => void	—	Try again was pressed on a failed view.
tabStyle	"underline" \| "pill" \| "boxed"	"underline"	How the active tab is marked: an underline, a tinted pill, or a raised box; the mark slides between tabs.
chipStyle	"soft" \| "outline" \| "solid"	"soft"	Chip look: a soft wash, a hairline outline, or a solid fill.
cornerRadius	number	8	Corner radius of chips, tabs, the menu and buttons, px (0 to 16).
accent	string	"var(--accent-bright)"	The tab mark, chips and Save, any CSS colour.
now	number	defaultLensNow	Today in ms, for due dates.
me	string	"Ines Park"	Whose queue this is: an assignee chip with this value reads "Me".
title	string	"Support queue"	The heading over the views and the surface's accessible name.
height	number	520	Height of the surface in px; the results scroll inside it.
disabled	boolean	false	Views, chips and actions are inert; the surface dims.
className	string	—	Classes for the outer surface.