updates

Author: tannerlinsley

public/Algolia-logo-blue.svg

@@ -63,7 +63,15 @@ export function FeedPage({
       const saved = localStorage.getItem('feedFilters')
       if (saved) {
         try {
-          setSavedFilters(JSON.parse(saved))
+          const parsed = JSON.parse(saved)
+          // Convert null values back to undefined (they were nullified for JSON serialization)
+          const restored = Object.fromEntries(
+            Object.entries(parsed).map(([k, v]) => [
+              k,
+              v === null ? undefined : v,
+            ]),
+          )
+          setSavedFilters(restored as typeof search)
         } catch {
           // Ignore parse errors
         }
@@ -75,9 +83,11 @@ export function FeedPage({
     }
   }, [mounted])
 
-  // Merge saved filters with URL params (URL params take precedence)
+  // Use search params directly - savedFilters is only used to restore preferences
+  // when navigating back to the page (the filters are already in the URL from the
+  // previous save). We only fall back to savedFilters for viewMode since that's
+  // not always in the URL.
   const effectiveFilters = {
-    ...savedFilters,
     ...search,
     viewMode:
       search.viewMode ??
@@ -156,9 +166,22 @@ export function FeedPage({
     })
 
     // Save to localStorage
+    // Note: JSON.stringify strips undefined values, so we need to explicitly
+    // null out fields that are being cleared to overwrite saved values
     if (typeof window !== 'undefined') {
-      const updatedFilters = { ...search, ...newFilters, page: 1 }
-      localStorage.setItem('feedFilters', JSON.stringify(updatedFilters))
+      const updatedFilters = {
+        ...search,
+        ...newFilters,
+        page: 1,
+      }
+      // Convert undefined to null for JSON serialization, then back on parse
+      const forStorage = Object.fromEntries(
+        Object.entries(updatedFilters).map(([k, v]) => [
+          k,
+          v === undefined ? null : v,
+        ]),
+      )
+      localStorage.setItem('feedFilters', JSON.stringify(forStorage))
       setSavedFilters(updatedFilters)
     }
   }

public/Algolia-logo-white.svg

@@ -79,6 +79,7 @@ export function FeedTopBarFilters({
 
   React.useEffect(() => {
     onFiltersChange({ search: debouncedSearch || undefined })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedSearch])
 
   React.useEffect(() => {

src/components/FeedPage.tsx

@@ -41,6 +41,21 @@ export function TopBarFilter({
 }: TopBarFilterProps) {
   const [mobileExpanded, setMobileExpanded] = useState(false)
 
+  // Separate AddFilterButton from other children (chips)
+  const childArray = React.Children.toArray(children)
+  const addFilterButton = childArray.find(
+    (child) =>
+      React.isValidElement(child) &&
+      (child.type as { displayName?: string }).displayName ===
+        'AddFilterButton',
+  )
+  const filterChips = childArray.filter(
+    (child) =>
+      !React.isValidElement(child) ||
+      (child.type as { displayName?: string }).displayName !==
+        'AddFilterButton',
+  )
+
   return (
     <div
       className={twMerge(
@@ -115,7 +130,8 @@ export function TopBarFilter({
               size="sm"
             />
           )}
-          {children}
+          {addFilterButton}
+          {filterChips}
           {hasActiveFilters && onClearAll && (
             <button
               onClick={onClearAll}

src/components/FeedTopBarFilters.tsx

@@ -777,28 +777,18 @@ export function SearchModal() {
                   href="https://www.algolia.com/developers/?utm_medium=referral&utm_content=powered_by&utm_source=tanstack.com&utm_campaign=docsearch"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="inline-flex items-center gap-1 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+                  className="inline-flex items-center gap-1 hover:opacity-70 transition-opacity"
                 >
-                  <svg
-                    width="77"
-                    height="19"
-                    aria-label="Algolia"
-                    className="h-4 w-auto"
-                  >
-                    <path
-                      d="M2.5067 0h14.0245c1.384 0 2.5066 1.1226 2.5066 2.5067V16.5c0 1.3775-1.1227 2.5-2.5066 2.5H2.5067C1.1226 19 0 17.8775 0 16.5V2.5067C0 1.1226 1.1226 0 2.5067 0z"
-                      fill="#5468FF"
-                    />
-                    <path
-                      d="M9.5173 3.7573c-2.9477 0-5.3395 2.3883-5.3395 5.3315 0 2.9432 2.3918 5.3315 5.3395 5.3315 2.9478 0 5.3396-2.3883 5.3396-5.3315 0-2.9432-2.3918-5.3315-5.3396-5.3315zm0 8.9448c-1.993 0-3.6113-1.6148-3.6113-3.6133 0-1.9984 1.6183-3.6133 3.6113-3.6133 1.993 0 3.6113 1.6149 3.6113 3.6133 0 1.9985-1.6183 3.6133-3.6113 3.6133zm0-6.3423c-1.5019 0-2.7234 1.2193-2.7234 2.729 0 1.5095 1.2215 2.7289 2.7234 2.7289 1.5019 0 2.7234-1.2194 2.7234-2.7289 0-1.5097-1.2215-2.729-2.7234-2.729zm0 4.5761c-1.0148 0-1.8395-.823-1.8395-1.8471 0-1.0242.8247-1.8472 1.8395-1.8472 1.0148 0 1.8395.823 1.8395 1.8472 0 1.024-.8247 1.8471-1.8395 1.8471zm0-3.0107c-.6378 0-1.1556.517-1.1556 1.1636 0 .6465.5178 1.1636 1.1556 1.1636.6378 0 1.1556-.5171 1.1556-1.1636 0-.6466-.5178-1.1636-1.1556-1.1636zM9.5173 3.7573v1.7283m0-1.7283c-2.9477 0-5.3395 2.3883-5.3395 5.3315m5.3395-5.3315c2.9478 0 5.3396 2.3883 5.3396 5.3315m-5.3396 3.6133c1.993 0 3.6113-1.6148 3.6113-3.6133m-3.6113 3.6133c-1.993 0-3.6113-1.6148-3.6113-3.6133m7.2226 0c0 1.9985-1.6183 3.6133-3.6113 3.6133m3.6113-3.6133c0-1.9984-1.6183-3.6133-3.6113-3.6133m0 0c1.5019 0 2.7234 1.2193 2.7234 2.729m-2.7234-2.729c-1.5019 0-2.7234 1.2193-2.7234 2.729m5.4468 0c0 1.5095-1.2215 2.7289-2.7234 2.7289m2.7234-2.7289c0-1.5097-1.2215-2.729-2.7234-2.729m0 4.5761c-1.5019 0-2.7234-1.2194-2.7234-2.7289m2.7234 2.7289c1.0148 0 1.8395-.823 1.8395-1.8471m-1.8395 1.8471c-1.0148 0-1.8395-.823-1.8395-1.8471m3.679 0c0 1.024-.8247 1.8471-1.8395 1.8471m1.8395-1.8471c0-1.0242-.8247-1.8472-1.8395-1.8472m0 3.6943c-.6378 0-1.1556-.5171-1.1556-1.1636m1.1556 1.1636c.6378 0 1.1556-.5171 1.1556-1.1636m-2.3112 0c0 .6465.5178 1.1636 1.1556 1.1636m-1.1556-1.1636c0-.6466.5178-1.1636 1.1556-1.1636m1.1556 1.1636c0-.6466-.5178-1.1636-1.1556-1.1636"
-                      fill="#FFF"
-                      fillRule="evenodd"
-                    />
-                    <path
-                      d="M35.143 10.857h-1.88l-.294-.504a3.37 3.37 0 01-1.792.504c-1.596 0-2.989-1.169-2.989-2.989 0-1.82 1.393-2.989 2.989-2.989.798 0 1.533.252 2.03.644v-.476h1.936v5.81zm-2.989-4.272c-.728 0-1.26.476-1.26 1.283 0 .812.532 1.288 1.26 1.288.728 0 1.26-.476 1.26-1.288 0-.807-.532-1.283-1.26-1.283zM39.223 2.95v7.907H37.28V2.95h1.943zM47.556 10.766c0 .056-.007.091-.007.091h-4.566c.084.448.476.798 1.12.798.476 0 .826-.168 1.022-.448l1.582.924c-.518.728-1.386 1.148-2.604 1.148-1.848 0-3.108-1.232-3.108-2.933 0-1.701 1.26-2.94 3.108-2.94 1.75 0 2.933 1.148 3.108 2.758.028.168.049.336.042.504.007.035.007.07.007.098h-.704zm-1.932-1.064c-.084-.462-.476-.826-1.127-.826-.651 0-1.043.364-1.127.826h2.254zM53.576 10.857h-1.944V7.672c0-.686-.42-1.008-.952-1.008-.532 0-.952.322-.952 1.008v3.185h-1.944V5.048h1.944v.476c.49-.392 1.19-.644 1.96-.644 1.4 0 2.394.91 2.394 2.394v3.583h-.506zM55.877 5.048h1.944v5.81h-1.944v-5.81zm.966-2.16c.644 0 1.176.525 1.176 1.176 0 .644-.532 1.176-1.176 1.176-.644 0-1.176-.532-1.176-1.176 0-.651.532-1.176 1.176-1.176zM64.883 10.857h-1.88l-.294-.504a3.37 3.37 0 01-1.792.504c-1.596 0-2.989-1.169-2.989-2.989 0-1.82 1.393-2.989 2.989-2.989.798 0 1.533.252 2.03.644v-.476H64.883v5.81zm-2.989-4.272c-.728 0-1.26.476-1.26 1.283 0 .812.532 1.288 1.26 1.288.728 0 1.26-.476 1.26-1.288 0-.807-.532-1.283-1.26-1.283z"
-                      fill="currentColor"
-                    />
-                  </svg>
+                  <img
+                    src="/Algolia-logo-blue.svg"
+                    alt="Algolia"
+                    className="h-4 w-auto dark:hidden"
+                  />
+                  <img
+                    src="/Algolia-logo-white.svg"
+                    alt="Algolia"
+                    className="h-4 w-auto hidden dark:block"
+                  />
                 </a>
               </div>
             </SearchFiltersProvider>