UI(PG): filter card polish & sort select fixes

Refs ENG-83

Author: sofi-bel

client/src/sites/pg/components/PgAlgoliaFacetsActive.tsx

@@ -19,7 +19,7 @@ const tagStyle = {
   fontSize: "sm",
   color: "#908989",
   cursor: "pointer",
-  css: { "&:hover .close-icon": { color: "red" } },
+  css: { "&:hover .close-icon": { color: "brand.black" } },
 } as const;
 
 export type FacetsActiveConfig = {

client/src/sites/pg/components/PgAlgoliaFilterCard.tsx

@@ -1,5 +1,5 @@
 import { Box, Collapsible, Flex, HStack, Icon, Stack } from "@chakra-ui/react";
-import React, { useEffect, useRef, type ReactNode, type RefObject } from "react";
+import { useEffect, useRef, type ReactNode } from "react";
 import { LuChevronDown, LuSquareX } from "react-icons/lu";
 import { useClearRefinements } from "react-instantsearch";
 import {
@@ -8,42 +8,32 @@ import {
 } from "@/sites/pg/components/PgAlgoliaFacetsActive";
 import { useStateValtio } from "@neuronhub/shared/utils/useStateValtio";
 
-export function PgFilterCardWithSplitBg(props: {
-  children: ReactNode;
-  isOpenRef: RefObject<boolean>;
-}) {
-  const rootRef = useRef<HTMLDivElement>(null);
+export function PgFilterCardWithSplitBg(props: { children: ReactNode }) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    const rootElement = rootRef.current;
-    if (!rootElement) {
-      return;
-    }
-    const observer = new ResizeObserver(() => {
-      if (!props.isOpenRef.current) {
+    function measureSplitHeight() {
+      const rootElement = rootRef.current;
+      if (rootElement) {
         rootElement.style.setProperty("--split-bg-h", `${rootElement.offsetHeight / 2}px`);
       }
-    });
-    observer.observe(rootElement);
-    return () => observer.disconnect();
+    }
+    measureSplitHeight();
+    window.addEventListener("resize", measureSplitHeight);
+    return () => window.removeEventListener("resize", measureSplitHeight);
   }, []);
 
   return (
-    <Box
-      position="relative"
-      ref={rootRef}
-      style={{ "--split-bg-h": "50%" } as React.CSSProperties}
-    >
+    <Box ref={rootRef} pos="relative">
       <Box
-        position="absolute"
+        pos="absolute"
         top="0"
         left="-9999px"
         right="-9999px"
         h="var(--split-bg-h)"
         bg="brand.green"
       />
-      <Box position="absolute" top="var(--split-bg-h)" left="-9999px" right="-9999px" bg="bg" />
-      <Box position="relative">{props.children}</Box>
+      <Box pos="relative">{props.children}</Box>
     </Box>
   );
 }
@@ -75,7 +65,6 @@ export function PgMobileCollapsible(props: {
   cta?: ReactNode;
   facetsTopbar: ReactNode;
   facetsActive: FacetsActiveConfig;
-  onOpenChange?: (open: boolean) => void;
 }) {
   const state = useStateValtio({ isOpen: false });
 
@@ -84,7 +73,6 @@ export function PgMobileCollapsible(props: {
       open={state.snap.isOpen}
       onOpenChange={details => {
         state.mutable.isOpen = details.open;
-        props.onOpenChange?.(details.open);
       }}
     >
       {!state.snap.isOpen && (

client/src/sites/pg/components/PgAlgoliaList.tsx

@@ -1,5 +1,5 @@
 import { Box, Grid, HStack, Stack } from "@chakra-ui/react";
-import { useRef, type ReactNode } from "react";
+import { type ReactNode } from "react";
 import { InstantSearch } from "react-instantsearch";
 import type { ID } from "@/gql-tada";
 import type { FacetsActiveConfig } from "@/sites/pg/components/PgAlgoliaFacetsActive";
@@ -33,8 +33,6 @@ export function PgAlgoliaList<TItem extends { id: ID }, TData = unknown>(props:
 }) {
   const algolia = useAlgoliaSearchClient();
 
-  const pgFilterCardIsOpenRef = useRef(false);
-
   const indexName = algolia[props.index];
 
   if (algolia.loading || !algolia.client || !indexName) {
@@ -66,7 +64,7 @@ export function PgAlgoliaList<TItem extends { id: ID }, TData = unknown>(props:
       {props.children}
 
       <Stack gap="gap.sm" w="full">
-        <PgFilterCardWithSplitBg isOpenRef={pgFilterCardIsOpenRef}>
+        <PgFilterCardWithSplitBg>
           {/* Mobile */}
           <Box
             hideFrom="md"
@@ -87,9 +85,6 @@ export function PgAlgoliaList<TItem extends { id: ID }, TData = unknown>(props:
                 cta={props.ctaMobile ?? props.cta}
                 facetsTopbar={props.facetsTopbar}
                 facetsActive={props.facetsActive}
-                onOpenChange={open => {
-                  pgFilterCardIsOpenRef.current = open;
-                }}
               />
             </Stack>
           </Box>
@@ -115,9 +110,9 @@ export function PgAlgoliaList<TItem extends { id: ID }, TData = unknown>(props:
 
               <Box>{props.cta}</Box>
 
-              <PgFacetsActive facetsActive={props.facetsActive} />
-
               <Box gridColumn="span 5">{props.facetsTopbar}</Box>
+
+              <PgFacetsActive facetsActive={props.facetsActive} />
             </Grid>
           </Box>
         </PgFilterCardWithSplitBg>

client/src/sites/pg/components/PgAlgoliaListSkeleton.tsx

@@ -6,7 +6,7 @@ import { PgHitSkeletons } from "@/sites/pg/components/PgAlgoliaInfiniteHits";
 export function PgAlgoliaListSkeleton() {
   return (
     <Stack gap="gap.sm" w="full">
-      <PgFilterCardWithSplitBg isOpenRef={{ current: false }}>
+      <PgFilterCardWithSplitBg>
         <Box
           hideFrom="md"
           borderWidth="1px"

client/src/sites/pg/components/PgAlgoliaSortSelect.tsx

@@ -17,17 +17,17 @@ export function PgAlgoliaSortSelect(props: { items: Array<{ value: string; label
       <Select.HiddenSelect />
       <Select.Control>
         <Select.Trigger
-          ps="0"
-          fontWeight="500"
-          fontSize="sm"
           bg="bg"
+          px="0"
           color="brand.black"
+          fontWeight="500"
+          fontSize="sm"
           cursor="pointer"
-          _hover={{ bg: "bg" }}
+          _hover={{ bg: "bg", color: "brand.green.light" }}
           _focusVisible={{ outline: "none", boxShadow: "none" }}
         >
           <Select.ValueText />
-          <Select.Indicator ms="gap.sm" color="brand.black" />
+          <Select.Indicator ms="gap.sm" color="currentColor" />
         </Select.Trigger>
       </Select.Control>
       <Select.Positioner>
@@ -37,8 +37,9 @@ export function PgAlgoliaSortSelect(props: { items: Array<{ value: string; label
           borderWidth="1px"
           borderRadius="sm"
           p="3"
-          w="fit-content"
+          w="var(--select-trigger-width)"
           minW="unset"
+          css={{ "& [role='option']": { paddingInline: "0", justifyContent: "flex-start" } }}
         >
           {collection.items.map(item => (
             <Select.Item