[pull] master from supabase:master

apps/studio/components/interfaces/HomePageActions.tsx

@@ -5,21 +5,15 @@ import { useOrgProjectsInfiniteQuery } from 'data/projects/org-projects-infinite
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
 import { PROJECT_STATUS } from 'lib/constants'
-import { Filter, Grid, List, Loader2, Plus, Search, X } from 'lucide-react'
+import { Grid, List, Loader2, Plus, Search, X } from 'lucide-react'
 import Link from 'next/link'
 import { parseAsArrayOf, parseAsString, useQueryState } from 'nuqs'
-import {
-  Button,
-  Checkbox_Shadcn_,
-  Label_Shadcn_,
-  Popover_Shadcn_,
-  PopoverContent_Shadcn_,
-  PopoverTrigger_Shadcn_,
-  ToggleGroup,
-  ToggleGroupItem,
-} from 'ui'
+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
@@ -43,6 +37,10 @@ export const HomePageActions = ({
   )
   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,
@@ -52,6 +50,10 @@ export const HomePageActions = ({
     { placeholderData: keepPreviousData }
   )
 
+  useEffect(() => {
+    if (isSuccess && !!urlSlug) setFilterStatus(filterStatusStorage)
+  }, [filterStatusStorage, isSuccess, urlSlug, setFilterStatus])
+
   return (
     <div className="flex items-center justify-between">
       <div className="flex items-center gap-2">
@@ -76,44 +78,18 @@ export const HomePageActions = ({
           ]}
         />
 
-        <Popover_Shadcn_>
-          <PopoverTrigger_Shadcn_ asChild>
-            <Button
-              type={filterStatus.length === 0 ? 'dashed' : 'secondary'}
-              className="h-[26px] w-[26px]"
-              icon={<Filter />}
-            />
-          </PopoverTrigger_Shadcn_>
-          <PopoverContent_Shadcn_ className="p-0 w-56" side="bottom" align="center" sideOffset={6}>
-            <div className="px-3 pt-3 pb-2 flex flex-col gap-y-2">
-              <p className="text-xs">Filter projects by status</p>
-              <div className="flex flex-col">
-                {[
-                  { key: PROJECT_STATUS.ACTIVE_HEALTHY, label: 'Active' },
-                  { key: PROJECT_STATUS.INACTIVE, label: 'Paused' },
-                ].map(({ key, label }) => (
-                  <div className="flex items-center gap-x-2 py-1" key={key}>
-                    <Checkbox_Shadcn_
-                      id={key}
-                      name={key}
-                      checked={filterStatus.includes(key)}
-                      onCheckedChange={() => {
-                        if (filterStatus.includes(key)) {
-                          setFilterStatus(filterStatus.filter((y) => y !== key))
-                        } else {
-                          setFilterStatus(filterStatus.concat([key]))
-                        }
-                      }}
-                    />
-                    <Label_Shadcn_ htmlFor={key} className="capitalize text-xs w-full">
-                      {label}
-                    </Label_Shadcn_>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </PopoverContent_Shadcn_>
-        </Popover_Shadcn_>
+        <FilterPopover
+          name="Status"
+          title="Filter projects by status"
+          options={[
+            { key: PROJECT_STATUS.ACTIVE_HEALTHY, label: 'Active' },
+            { key: PROJECT_STATUS.INACTIVE, label: 'Paused' },
+          ]}
+          activeOptions={filterStatus}
+          valueKey="key"
+          labelKey="label"
+          onSaveFilters={(options) => setFilterStatusStorage(options)}
+        />
 
         {isFetchingProjects && <Loader2 className="animate-spin" size={14} />}
       </div>

apps/studio/components/ui/FilterPopover.tsx

@@ -1,8 +1,7 @@
 import { useIntersectionObserver } from '@uidotdev/usehooks'
 import { noop } from 'lodash'
-import { X } from 'lucide-react'
+import { ChevronDown, X } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
-
 import {
   Button,
   Checkbox_Shadcn_,
@@ -12,9 +11,6 @@ import {
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
   ScrollArea,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
 } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
@@ -185,6 +181,7 @@ export const FilterPopover = <T extends Record<string, any>>({
           type={buttonType ?? (activeOptions.length > 0 ? 'default' : 'dashed')}
           onClick={() => setOpen(false)}
           className={variant === 'rounded' ? 'rounded-full' : ''}
+          iconRight={<ChevronDown />}
         >
           <div>
             <span>{name}</span>
@@ -259,10 +256,12 @@ export const FilterPopover = <T extends Record<string, any>>({
             )}
           </div>
           <div ref={sentinelRef} className="h-1 -mt-1" />
-          {hasNextPage && (
+          {hasNextPage ? (
             <div className="px-3 py-2">
               <ShimmeringLoader className="py-2" />
             </div>
+          ) : (
+            <div className="py-1.5" />
           )}
         </ScrollArea>
         <div className="flex items-center justify-end gap-2 border-t border-overlay bg-surface-200 py-2 px-3">

packages/common/constants/local-storage.ts

@@ -7,6 +7,7 @@ export const LOCAL_STORAGE_KEYS = {
   SIDEBAR_BEHAVIOR: 'supabase-sidebar-behavior',
   EDITOR_PANEL_STATE: 'supabase-editor-panel-state',
   PROJECTS_VIEW: 'projects-view',
+  PROJECTS_FILTER: 'projects-filter',
   FEEDBACK_WIDGET_CONTENT: 'feedback-widget-content',
   FEEDBACK_WIDGET_SCREENSHOT: 'feedback-widget-screenshot',
   INCIDENT_BANNER_DISMISSED: (id: string) => `incident-banner-dismissed-${id}`,