Dashboard filters with cross-tab sync
Keep dashboard filters synchronized across browser tabs.
Dashboard filters with cross-tab sync#
import { createPersistedModel, signal } from "@kamod-ch/signals";
type FiltersSnapshot = {
range: "today" | "week" | "month";
region: "all" | "ch" | "eu";
};
export const DashboardFiltersModel = createPersistedModel(
{
key: "dashboard-filters",
storage: "local",
sync: "tabs",
select: (model): FiltersSnapshot => ({
range: model.range.value,
region: model.region.value,
}),
apply(model, snapshot) {
model.range.value = snapshot.range;
model.region.value = snapshot.region;
},
},
() => {
const range = signal<FiltersSnapshot["range"]>("week");
const region = signal<FiltersSnapshot["region"]>("all");
return {
range,
region,
setRange(value: FiltersSnapshot["range"]) {
range.value = value;
},
setRegion(value: FiltersSnapshot["region"]) {
region.value = value;
},
};
},
);
sync: "tabs" uses BroadcastChannel when available and a storage event fallback otherwise.