Add Mobile Filters #154

CharlyMartin · 2025-12-01T16:40:36Z

📝 Description

This PR adds mobile-responsive table filters to the Service Providers table and refactors the filtering implementation for better maintainability.

[UXIT-3675]

🛠️ Key Changes

Added MobileTableFilters component with slide-over panel using SlideOver from ui-filecoin
Added DesktopTableFilters component extracted from original TableFilters implementation
Updated TableFilters to conditionally render desktop/mobile variants based on screen size using responsive classes
Extracted individual filter components for better reusability:
- CountryFilter - handles country checkbox filtering
- CapacityFilter - handles capacity min/max range inputs
- ProvingPeriodFilter - handles proving period min/max range inputs
- StatusFilter - handles status checkbox filtering
- InpiFilter - handles IPNI checkbox filtering
Extracted shared UI components:
- CheckboxContainer - wrapper for checkbox lists
- CheckboxWithLabel - reusable checkbox with label component
- FiltersSectionHeading - consistent section headings for filters
- InputContainer - wrapper for input groups
- NumberInput - reusable number input with accessibility labels
Extracted utility functions to ../app/service-providers/utils/:
- parse-numeric-input.ts - parses string input to numeric values
- toggle-value-in-array.ts - toggles values in filter arrays
Refactored TableFilters component props to only accept options (removed state and setState)
Updated ServiceProvidersTable to remove setFilterQueries prop from TableFilters
Migrated components to use useBackground hook (replacing deprecated useBackgroundVariant):
Updated @filecoin-foundation/ui-filecoin dependency to v0.5.4

📸 Screenshots

vercel · 2025-12-01T16:40:40Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
filecoin-cloud	Ready	Preview	Comment	Dec 8, 2025 6:48pm

src/app/service-providers/components/MobileTableFilters.tsx

src/app/service-providers/hooks/useFilterQueryState.ts

src/app/service-providers/components/CountryFilter.tsx

…Period filters Removed duplicated useCallback handlers and parseNumericInput logic from CapacityFilter.tsx and ProvingPeriodFilter.tsx. Updated to use the new updateNumberQuery function from useFilterQueryState hook for consistent numeric input parsing and state updates, reducing code duplication.

Introduce new `FilterHeading` component as a simple, reusable h3 for filter sections. Update `CapacityFilter`, `CountryFilter`, `InpiFilter`, `ProvingPeriodFilter`, and `StatusFilter` to use it instead of the deprecated `FiltersSectionHeading`, improving consistency and reducing duplication in styling.

Updated prop interface names in CheckboxesContainer, InputsContainer, and NumberInputWithLabel to match their respective component names for better consistency and readability. Minor formatting adjustments in NumberInputWithLabel for destructuring.

Restructured Popover in DesktopTableFilters to include a "Reset Filters" button that clears query state and closes the panel. Updated styling for better layout. Applied similar import and structure changes to MobileTableFilters for consistency.

…ng period filters Introduce utility function `isMinAboveMax` to detect invalid min > max values in filter queries. Update `CapacityFilter` and `ProvingPeriodFilter` components to use Headless UI `Fieldset` for semantic structure, conditionally render `ErrorMessage` component when validation fails, and display user-friendly error for min exceeding max. This improves UX by providing immediate feedback on invalid range inputs without breaking form functionality.

Introduce `hasActiveFilters` in `useFilterQueryState` hook using `useMemo` to detect if any filter queries have values (non-empty arrays or non-null). Update `DesktopTableFilters` and `MobileTableFilters` to destructure and use `hasActiveFilters`, disabling the clear/reset buttons when false. This improves UX by preventing redundant reset actions when no filters are applied.

…ries Replace direct state updates with functional form in toggleFilterQuery and updateNumberQuery to avoid stale closures. Remove filterQueries from useCallback dependencies, as prev state is now used internally, improving performance and preventing unnecessary re-renders.

…ading to Location Renamed the `options` prop destructuring from `countryOptions` to `options` for clarity, and changed the filter heading from "Country" to "Location" to better reflect the intended usage in service providers filtering.

…lter, StatusFilter Updated CountryFilter, InpiFilter, and StatusFilter components to use Headless UI's Fieldset for the outer container instead of a plain div. This improves semantic HTML and accessibility for form groupings in the service providers filters.

…tainer Adjust layout to prevent wrapping of search and filter elements, ensuring they stay in a single row for better responsiveness on medium screens and up.

mirhamasala · 2025-12-09T09:31:44Z

src/app/service-providers/components/MobileTableFilters.tsx

+          {ipniOptions.length > 1 && <InpiFilter options={ipniOptions} />}
+
+          <div className="pt-8 flex flex-col gap-4">
+            <Button variant="primary" onClick={() => setOpen(false)}>


Slack Thread

mirhamasala · 2025-12-09T09:34:41Z

src/app/service-providers/components/ErrorMessage.tsx

@@ -0,0 +1,3 @@
+export function ErrorMessage({ message }: { message: string }) {


I'm guessing Warm Storage Service will also have an ErrorMessage and this and other components might move?

I'm also wondering whether this error text color should be moved to UI-Filecoin. Or, at least, the local globals.css?

Perhaps no action needed - just things I was considering.

mirhamasala · 2025-12-09T09:38:26Z

src/app/service-providers/components/InputsContainer.tsx

+}
+
+export function InputsContainer({ children }: InputsContainerProps) {
+  return <div className="flex gap-4 flex-wrap @sm:flex-nowrap">{children}</div>


To be able to use container queries, wouldn't the parent need to have an @ prefix?

And you can't really guarantee this context by just looking at this component, right? They're separated from each other..

mirhamasala · 2025-12-09T09:40:01Z

src/app/service-providers/components/InpiFilter.tsx

+  options: Array<string>
+}
+
+export function InpiFilter({ options }: InpiFilterProps) {


Spelling error. Same for filename, etc?

Suggested change

export function InpiFilter({ options }: InpiFilterProps) {

export function IpniFilter({ options }: IpniFilterProps) {

mirhamasala · 2025-12-09T09:48:51Z

src/app/service-providers/components/CapacityFilter.tsx

+        />
+      </InputsContainer>
+      {minAboveMax && (
+        <ErrorMessage message="Minimum shouldn't be above maximum" />


Could be more actionable

Suggested change

<ErrorMessage message="Minimum shouldn't be above maximum" />

<ErrorMessage message="Minimum capacity must be less than or equal to maximum capacity" />

mirhamasala · 2025-12-09T09:56:39Z

src/app/service-providers/components/ProvingPeriodFilter.tsx

+        />
+      </InputsContainer>
+      {minAboveMax && (
+        <ErrorMessage message="Minimum shouldn't be above maximum" />


Maybe

Suggested change

<ErrorMessage message="Minimum shouldn't be above maximum" />

<ErrorMessage message="Minimum period must be less than or equal to maximum" />

mirhamasala · 2025-12-09T10:02:33Z

src/app/service-providers/utils/is-min-above-max.ts

@@ -0,0 +1,6 @@
+export function isMinAboveMax(min: number | null, max: number | null) {
+  if (min === null || max === null) return false
+  if (min === max) return false


min > max already returns false when they're equal..

Suggested change

if (min === max) return false

Copilot

Pull request overview

This PR adds mobile-responsive table filters to the Service Providers table through a comprehensive refactoring that improves code maintainability and reusability. The implementation splits the original monolithic TableFilters component into separate desktop and mobile variants, with desktop using a popover panel and mobile using a slide-over drawer. The refactoring extracts individual filter components (Country, Capacity, ProvingPeriod, Status, IPNI) and shared UI primitives (checkboxes, inputs, headings, containers) into reusable components, while also extracting utility functions for common operations.

Key Changes:

Added responsive mobile/desktop filter UI with MobileTableFilters (slide-over) and DesktopTableFilters (popover panel)
Extracted individual filter components and shared UI primitives for better reusability
Enhanced the useFilterQueryState hook with toggleFilterQuery, updateNumberQuery, and hasActiveFilters utilities

Reviewed changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
`src/app/service-providers/utils/toggle-value-in-array.ts`	New utility function to toggle values in filter arrays
`src/app/service-providers/utils/parse-numeric-input.ts`	New utility to parse string inputs to numbers (changed from parseInt to Number)
`src/app/service-providers/utils/is-min-above-max.ts`	New utility to validate min/max range inputs
`src/app/service-providers/hooks/useFilterQueryState.ts`	Enhanced with helper methods and active filters check
`src/app/service-providers/components/TableFilters.tsx`	Refactored to conditionally render desktop/mobile variants
`src/app/service-providers/components/DesktopTableFilters.tsx`	New desktop popover variant with backdrop
`src/app/service-providers/components/MobileTableFilters.tsx`	New mobile slide-over variant with FilterButton trigger
`src/app/service-providers/components/CountryFilter.tsx`	Extracted country filter (heading changed from "Country" to "Location")
`src/app/service-providers/components/CapacityFilter.tsx`	Extracted capacity range filter with validation
`src/app/service-providers/components/ProvingPeriodFilter.tsx`	Extracted proving period range filter with validation
`src/app/service-providers/components/StatusFilter.tsx`	Extracted status checkbox filter
`src/app/service-providers/components/InpiFilter.tsx`	Extracted IPNI filter (component name has typo: should be IpniFilter)
`src/app/service-providers/components/CheckboxWithLabel.tsx`	Reusable checkbox with label component
`src/app/service-providers/components/CheckboxesContainer.tsx`	Container wrapper for checkbox lists
`src/app/service-providers/components/FilterHeading.tsx`	Consistent heading component for filter sections
`src/app/service-providers/components/NumberInputWithLabel.tsx`	Reusable number input with visible label
`src/app/service-providers/components/InputsContainer.tsx`	Container for input groups with responsive flex layout
`src/app/service-providers/components/ErrorMessage.tsx`	Error message component for validation feedback
`src/app/service-providers/components/ServiceProvidersTable.tsx`	Updated to remove setFilterQueries prop and adjust responsive widths

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-09T10:04:21Z

src/app/service-providers/components/ServiceProvidersTable.tsx

+            <TableFilters options={filterOptions} />
          </div>
-          <div className="md:w-56 w-full">
+          <div className="md:w-56">


The w-full class was removed from the NetworkSelector wrapper. This changes the mobile layout behavior. Ensure this is intentional and that the NetworkSelector still displays correctly on mobile devices without the full-width styling.

Suggested change

<div className="md:w-56">

<div className="md:w-56 w-full">

Copilot · 2025-12-09T10:04:21Z

src/app/service-providers/components/ErrorMessage.tsx

@@ -0,0 +1,3 @@
+export function ErrorMessage({ message }: { message: string }) {
+  return <p className="text-red-500 text-sm pt-2">{message}</p>


The error message lacks ARIA attributes to announce it to screen readers. Consider adding role="alert" or aria-live="polite" to ensure users with assistive technology are notified when validation errors appear.

Suggested change

return <p className="text-red-500 text-sm pt-2">{message}</p>

return <p className="text-red-500 text-sm pt-2" role="alert">{message}</p>

Copilot · 2025-12-09T10:04:21Z

src/app/service-providers/utils/parse-numeric-input.ts

@@ -0,0 +1,4 @@
+export function parseNumericInput(value: string) {
+  const parsed = value === '' ? null : Number(value)


Using Number(value) instead of Number.parseInt(value, 10) changes the parsing behavior. Number() accepts decimal values like "123.45", while the original implementation used parseInt which would truncate decimals. For capacity (TiB) and proving period (epochs) values, this could lead to unintended decimal inputs. Consider using Number.parseInt(value, 10) to maintain the original integer-only behavior, or document that decimal values are now intentionally supported.

Suggested change

const parsed = value === '' ? null : Number(value)

const parsed = value === '' ? null : Number.parseInt(value, 10)

src/app/service-providers/components/MobileTableFilters.tsx

src/app/service-providers/components/DesktopTableFilters.tsx

Copilot · 2025-12-09T10:04:22Z

src/app/service-providers/components/CountryFilter.tsx

+
+  return (
+    <Fieldset>
+      <FilterHeading>Location</FilterHeading>


The heading text changed from "Country" (in the original TableFilters) to "Location". While this might be intentional, it creates a mismatch with the component name CountryFilter, the prop name countryOptions, and the filter query key country. Consider either changing the heading back to "Country" or renaming all related identifiers to use "Location" for consistency.

Suggested change

<FilterHeading>Location</FilterHeading>

<FilterHeading>Country</FilterHeading>

Copilot · 2025-12-09T10:04:23Z

src/app/service-providers/components/DesktopTableFilters.tsx

+            anchor={{ to: 'bottom', gap: 16 }}
+            className={clsx(
+              backgroundVariants[theme],
+              '@container bg-white w-[640px] max-h-[80vh] overflow-y-auto p-6 rounded-2xl border border-(--color-listbox-border) shadow-xs',


The bg-white class is redundant here since backgroundVariants[theme] already controls the background color. This could lead to conflicting styles if the theme is not the default white background.

Suggested change

'@container bg-white w-[640px] max-h-[80vh] overflow-y-auto p-6 rounded-2xl border border-(--color-listbox-border) shadow-xs',

'@container w-[640px] max-h-[80vh] overflow-y-auto p-6 rounded-2xl border border-(--color-listbox-border) shadow-xs',

src/app/service-providers/components/InpiFilter.tsx

src/app/service-providers/components/MobileTableFilters.tsx

src/app/service-providers/components/DesktopTableFilters.tsx

mirhamasala · 2025-12-09T10:06:35Z

src/app/service-providers/utils/parse-numeric-input.ts

+export function parseNumericInput(value: string) {
+  const parsed = value === '' ? null : Number(value)
+  return Number.isNaN(parsed) ? null : parsed
+}


console.log(parseNumericInput(' ')) // 0
console.log(parseNumericInput('\t')) // 0

Suggested change

export function parseNumericInput(value: string) {

const parsed = value === '' ? null : Number(value)

return Number.isNaN(parsed) ? null : parsed

}

export function parseNumericInput(value: string) {

const trimmed = value.trim()

const parsed = trimmed === '' ? null : Number(trimmed)

return Number.isNaN(parsed) ? null : parsed

}

mirhamasala · 2025-12-09T10:13:26Z

src/app/service-providers/utils/parse-numeric-input.ts

From Claude Code:

// Current: Uses Number() which allows decimals const parsed = value === '' ? null : Number(value) // But filterParsers uses parseAsInteger capacityMin: parseAsInteger, Issue: Number("1.5") returns 1.5 but parseAsInteger would parse it as 1. This could cause sync issues between local state and URL state. Recommendation: Use Number.parseInt(value, 10) to match the parseAsInteger behavior.

mirhamasala · 2025-12-09T10:16:39Z

src/app/service-providers/utils/toggle-value-in-array.ts

+  const updated = current.includes(value)
+    ? current.filter((v) => v !== value)
+    : [...current, value]
+
+  return updated


Suggested change

const updated = current.includes(value)

? current.filter((v) => v !== value)

: [...current, value]

return updated

return current.includes(value)

? current.filter((v) => v !== value)

: [...current, value]

mirhamasala

@CharlyMartin This is mega clean! Love it. ✨

There are some renaming that need to happen before merge. And I'd definitely look at this comment.

Other than that mainly nits for you to decide what to implement and what not.

Also left a GitHub Co-Pilot review because we can.

❤️

FilOzzy added this to FS Dec 1, 2025

github-actions bot added the stacked PR label Dec 1, 2025

github-project-automation bot moved this to 📌 Triage in FS Dec 1, 2025

CharlyMartin changed the title ~~UXIT-3675/add-mobile-filters~~ [UXIT-3675] Add Mobile Filters Dec 1, 2025

vercel bot deployed to Preview – filecoin-cloud December 1, 2025 16:41 View deployment

vercel bot deployed to Preview – filecoin-cloud December 1, 2025 17:24 View deployment

CharlyMartin commented Dec 1, 2025

View reviewed changes

src/app/service-providers/components/MobileTableFilters.tsx Outdated Show resolved Hide resolved

vercel bot deployed to Preview – filecoin-cloud December 2, 2025 11:27 View deployment

vercel bot deployed to Preview – filecoin-cloud December 2, 2025 12:02 View deployment

CharlyMartin marked this pull request as ready for review December 2, 2025 12:02

CharlyMartin requested a review from mirhamasala December 2, 2025 12:02

vercel bot deployed to Preview – filecoin-cloud December 2, 2025 12:08 View deployment

mirhamasala changed the title ~~[UXIT-3675] Add Mobile Filters~~ Add Mobile Filters Dec 2, 2025

CharlyMartin commented Dec 3, 2025

View reviewed changes

src/app/service-providers/hooks/useFilterQueryState.ts Show resolved Hide resolved

CharlyMartin mentioned this pull request Dec 3, 2025

Add Desktop Filters #149

Merged

CharlyMartin commented Dec 3, 2025

View reviewed changes

src/app/service-providers/components/CountryFilter.tsx Outdated Show resolved Hide resolved

CharlyMartin force-pushed the UXIT-3675/add-mobile-filters branch from dce493e to 3466c3b Compare December 3, 2025 15:21

vercel bot deployed to Preview – filecoin-cloud December 3, 2025 15:22 View deployment

vercel bot deployed to Preview – filecoin-cloud December 3, 2025 15:30 View deployment

vercel bot deployed to Preview – filecoin-cloud December 3, 2025 15:45 View deployment

vercel bot deployed to Preview – filecoin-cloud December 3, 2025 15:55 View deployment

CharlyMartin force-pushed the UXIT-3675/add-mobile-filters branch from 4c10aa9 to c637ed8 Compare December 3, 2025 16:19

vercel bot deployed to Preview – filecoin-cloud December 3, 2025 16:20 View deployment

vercel bot deployed to Preview – filecoin-cloud December 3, 2025 16:33 View deployment

vercel bot deployed to Preview – filecoin-cloud December 3, 2025 16:34 View deployment

vercel bot deployed to Preview – filecoin-cloud December 3, 2025 16:35 View deployment

rjan90 moved this from 📌 Triage to 🔎 Awaiting review in FS Dec 4, 2025

CharlyMartin force-pushed the UXIT-3675/add-mobile-filters branch from 75eb901 to d25a31c Compare December 8, 2025 18:09

vercel bot had a problem deploying to Preview – filecoin-cloud December 8, 2025 18:10 Failure

CharlyMartin added 10 commits December 8, 2025 18:45

refactor(service-providers): remove flex-wrap from table controls con…

32e0383

…tainer Adjust layout to prevent wrapping of search and filter elements, ensuring they stay in a single row for better responsiveness on medium screens and up.

CharlyMartin force-pushed the UXIT-3675/add-mobile-filters branch from d25a31c to 32e0383 Compare December 8, 2025 18:46

github-actions bot added size/L and removed stacked PR labels Dec 8, 2025

vercel bot deployed to Preview – filecoin-cloud December 8, 2025 18:48 View deployment

mirhamasala reviewed Dec 9, 2025

View reviewed changes

mirhamasala requested a review from Copilot December 9, 2025 09:57

Copilot started reviewing on behalf of mirhamasala December 9, 2025 09:57 View session

mirhamasala reviewed Dec 9, 2025

View reviewed changes

Copilot AI reviewed Dec 9, 2025

View reviewed changes

mirhamasala reviewed Dec 9, 2025

View reviewed changes

mirhamasala approved these changes Dec 9, 2025

View reviewed changes

github-project-automation bot moved this from 🔎 Awaiting review to ✔️ Approved by reviewer in FS Dec 9, 2025

		@@ -0,0 +1,3 @@
		export function ErrorMessage({ message }: { message: string }) {

	export function InpiFilter({ options }: InpiFilterProps) {
	export function IpniFilter({ options }: IpniFilterProps) {

	<ErrorMessage message="Minimum shouldn't be above maximum" />
	<ErrorMessage message="Minimum capacity must be less than or equal to maximum capacity" />

	<ErrorMessage message="Minimum shouldn't be above maximum" />
	<ErrorMessage message="Minimum period must be less than or equal to maximum" />

		@@ -0,0 +1,3 @@
		export function ErrorMessage({ message }: { message: string }) {
		return <p className="text-red-500 text-sm pt-2">{message}</p>

		@@ -0,0 +1,4 @@
		export function parseNumericInput(value: string) {
		const parsed = value === '' ? null : Number(value)

	<FilterHeading>Location</FilterHeading>
	<FilterHeading>Country</FilterHeading>

	'@container bg-white w-[640px] max-h-[80vh] overflow-y-auto p-6 rounded-2xl border border-(--color-listbox-border) shadow-xs',
	'@container w-[640px] max-h-[80vh] overflow-y-auto p-6 rounded-2xl border border-(--color-listbox-border) shadow-xs',

Add Mobile Filters #154

Are you sure you want to change the base?

Add Mobile Filters #154

Conversation

CharlyMartin commented Dec 1, 2025 • edited by mirhamasala Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 Description

🛠️ Key Changes

📸 Screenshots

Uh oh!

vercel bot commented Dec 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mirhamasala Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

mirhamasala Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mirhamasala Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mirhamasala Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mirhamasala Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

mirhamasala Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

mirhamasala Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mirhamasala Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

mirhamasala Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

mirhamasala Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mirhamasala left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

CharlyMartin commented Dec 1, 2025 •

edited by mirhamasala

Loading

vercel bot commented Dec 1, 2025 •

edited

Loading

mirhamasala Dec 9, 2025 •

edited

Loading

mirhamasala Dec 9, 2025 •

edited

Loading

mirhamasala Dec 9, 2025 •

edited

Loading

mirhamasala Dec 9, 2025 •

edited

Loading

mirhamasala Dec 9, 2025 •

edited

Loading