Repository: supabase/supabase
File: apps/studio/components/interfaces/HomePageActions.tsx (TypeScript)

Code before:
import { Grid, List, Loader2, Plus, Search, X } from 'lucide-react'
import Link from 'next/link'
import { parseAsArrayOf, parseAsString, parseAsStringLiteral, useQueryState } from 'nuqs'
import { useEffect } from 'react'
import { Button, ToggleGroup, ToggleGroupItem } from 'ui'
import { Input } from 'ui-patterns/DataInputs/Input'

import { FilterPopover } from '../ui/FilterPopover'

interface HomePageActionsProps {
  slug?: string
  hideNewProject?: boolean
  showViewToggle?: boolean
}

export const HomePageActions = ({
  slug: _slug,
  hideNewProject = false,
  showViewToggle = false,
}: HomePageActionsProps) => {
  const { slug: urlSlug } = useParams()
  const projectCreationEnabled = useIsFeatureEnabled('projects:create')

  const slug = _slug ?? urlSlug
  const [search, setSearch] = useQueryState('search', parseAsString.withDefault(''))
  const debouncedSearch = useDebounce(search, 500)
  const [filterStatus, setFilterStatus] = useQueryState(
    'status',
    parseAsArrayOf(parseAsString, ',').withDefault([])
  )
  const [sort, setSort] = useQueryState(
    'sort',
    parseAsStringLiteral<ProjectListSort>(PROJECT_LIST_SORT_VALUES).withDefault('name_asc')
  )
  const [viewMode, setViewMode] = useLocalStorageQuery(LOCAL_STORAGE_KEYS.PROJECTS_VIEW, 'grid')

  const [filterStatusStorage, setFilterStatusStorage, { isSuccess }] = useLocalStorageQuery<
    string[]
  >(LOCAL_STORAGE_KEYS.PROJECTS_FILTER, [])

  const { isFetching: isFetchingProjects } = useOrgProjectsInfiniteQuery(
    {
      slug,
      sort,
      search: search.length === 0 ? search : debouncedSearch,
      statuses: filterStatus,
    },
    { placeholderData: keepPreviousData }
  )

  useEffect(() => {

Review comment (suggestion):
we should also persist this in local storage and load it up when the user comes back to the projects page

similar for how we handle the project status filter

Code after:
import Link from 'next/link'
import { parseAsArrayOf, parseAsString, parseAsStringLiteral, useQueryState } from 'nuqs'
import { useEffect } from 'react'
import { Button, ToggleGroup, ToggleGroupItem } from 'ui'
import { Input } from 'ui-patterns/DataInputs/Input'

import { FilterPopover } from '../ui/FilterPopover'
import { SortDropdown } from '../ui/SortDropdown'

interface HomePageActionsProps {
  slug?: string
  hideNewProject?: boolean
}

export const HomePageActions = ({ slug: _slug, hideNewProject = false }: HomePageActionsProps) => {
  const { slug: urlSlug } = useParams()
  const projectCreationEnabled = useIsFeatureEnabled('projects:create')

  const slug = _slug ?? urlSlug
  const [search, setSearch] = useQueryState('search', parseAsString.withDefault(''))
  const debouncedSearch = useDebounce(search, 500)
  const [filterStatus, setFilterStatus] = useQueryState(
    'status',
    parseAsArrayOf(parseAsString, ',').withDefault([])
  )
  const [sort, setSort] = useQueryState(
    'sort',
    parseAsStringLiteral(PROJECT_LIST_SORT_VALUES).withDefault('name_asc')
  )
  const [viewMode, setViewMode] = useLocalStorageQuery(LOCAL_STORAGE_KEYS.PROJECTS_VIEW, 'grid')

  const [filterStatusStorage, setFilterStatusStorage, { isSuccess: isSuccessFilterStatusStorage }] =
    useLocalStorageQuery<string[]>(LOCAL_STORAGE_KEYS.PROJECTS_FILTER, [])

  const [sortStorage, setSortStorage, { isSuccess: isSuccessSortStorage }] =
    useLocalStorageQuery<ProjectListSort>(LOCAL_STORAGE_KEYS.PROJECTS_SORT, 'name_asc')

  const { isFetching: isFetchingProjects } = useOrgProjectsInfiniteQuery(
    {
      slug,
      sort,
      search: search.length === 0 ? search : debouncedSearch,
      statuses: filterStatus,
    },
    { placeholderData: keepPreviousData }
  )

  useEffect(() => {
    if (isSuccessFilterStatusStorage && !!slug) setFilterStatus(filterStatusStorage)
  }, [filterStatusStorage, isSuccessFilterStatusStorage, setFilterStatus, slug])