oh wait. we actually already have a setting for this if you go to “My Notifications” it’s “Import detection”

4. hooks we built a simple hook to get/set the value of each filter with the same DX as useState these hooks don't need a context provider because the current values of the filters can always be computed purely from the current search params. and they're type-safe, because the types for filter definitions are generic

2. encoding & decoding there are methods on each filter definition that convert between the value of the filter & the search params equivalent of that value when updating the value of a filter we first check what the previous encoded value was to determine what to replace/remove (e.g. if the filter was setting the "status" property and it isn't for the new value, we should remove that prop from the new search params)

1. filter definitions each filter (e.g. Author, Status, etc.) is defined as a type-safe object this ensures that there's one source of truth for each filter definition & makes it easy for agents to build new filters w/o compromising on UX/DX

the new deployment filters are available now in the @vercel dashboard here's how we engineered them…

• date range these allow users to select either a common time period (e.g. "this week") or to select a custom timeframe the text in the search input is parsed when possible, and selecting the custom timeframe brings up a pointer-friendly calendar UI

• multi-select these allow users to select multiple values from an enumerated list. they use our "only" pattern to make it easy to quickly select only one value by clicking on its name, or to check off multiple using the boxes

• select these are the most common filter type. they allow users to select a single value from an enumerated list all of the other types of filters build upon this foundation

but we don't animate suggestions as soon as the user applies one we delay it if they've been moving their pointer over the filter bar recently or if they've clicked to open one of the filter menus this allows users to apply multiple suggestions w/o waiting on animations in between clicking them and ensures that filters won't move while their value is being changed

3. keyboard support all of the filters now support typing to filter their values with fuzzy logic. moreover, the "Add Filter" button functions like a specialized cmdk menu in other words, you can type the value of any of the filters immediately in the "Add Filter" menu and set it without needing to first select which filter you're trying to apply (e.g. typing "rdy" instead of selecting "Status" and then "Ready")

before: two clicks (open menu on relevant filter, select value) after: one click for common actions (click suggestion) three clicks for other actions ("add filter", select filter, select value) (there's actually also a third path that we'll get to in a moment)

so our new approach shifts from showing every possibility upfront to instead emphasizing just the active filters & what you most likely want to set next

1. progressive disclosure one of the main motivations for redesigning our filters is that as we've grown, we've added many new ways to narrow the data in our dashboard having options is great, but it takes up space

if you can describe it, you can filter it

in january I spent a couple days building a new blog w/ a window manager & a jsx-based video player …eventually I might even write something 😅