Merge branch 'main' of https://github.com/TanStack/tanstack.com

Author: tannerlinsley

AGENTS.md

@@ -180,6 +180,7 @@ Agents cannot:
 - ❌ Test API endpoints that require browser context
 
 For runtime testing and verification, developers should:
+
 1. Review the code changes
 2. Start the dev server manually (`pnpm dev`)
 3. Test the functionality in a browser

src/components/BlockWithFeedback.tsx

@@ -83,7 +83,9 @@ export function BlockWithFeedback({
         onMouseLeave={handleMouseLeave}
         data-feedback-wrapper="true"
         style={{
-          anchorName: blockSelector ? `--feedback-${blockSelector.replace(/[^a-zA-Z0-9]/g, '-')}` : undefined,
+          anchorName: blockSelector
+            ? `--feedback-${blockSelector.replace(/[^a-zA-Z0-9]/g, '-')}`
+            : undefined,
         }}
       >
         {children}
@@ -111,11 +113,7 @@ export function BlockWithFeedback({
       {/* Note display - inline in document flow */}
       {note && blockSelector && (
         <div className="my-4">
-          <DocFeedbackNote
-            note={note}
-            anchorName=""
-            inline={true}
-          />
+          <DocFeedbackNote note={note} anchorName="" inline={true} />
         </div>
       )}
     </>

src/components/DocFeedbackContext.tsx

@@ -10,7 +10,11 @@ interface DocFeedbackContextValue {
   toggleNote: (noteId: string) => void
 
   // Actions
-  onAddFeedback: (blockSelector: string, blockContentHash: string | undefined, type: 'note' | 'improvement') => void
+  onAddFeedback: (
+    blockSelector: string,
+    blockContentHash: string | undefined,
+    type: 'note' | 'improvement',
+  ) => void
   onEditNote: (note: DocFeedback) => void
   onShowNote: (noteId: string) => void
 
@@ -20,7 +24,9 @@ interface DocFeedbackContextValue {
   libraryVersion: string
 }
 
-const DocFeedbackContext = React.createContext<DocFeedbackContextValue | null>(null)
+const DocFeedbackContext = React.createContext<DocFeedbackContextValue | null>(
+  null,
+)
 
 export function useDocFeedback() {
   const context = React.useContext(DocFeedbackContext)

src/components/DocFeedbackFloatingButton.tsx

@@ -138,7 +138,9 @@ export function DocFeedbackFloatingButton({
                   </div>
                 </div>
               </button>
-              {!hasImprovement && <div className="h-px bg-gray-200 dark:bg-gray-700" />}
+              {!hasImprovement && (
+                <div className="h-px bg-gray-200 dark:bg-gray-700" />
+              )}
             </>
           )}
           {!hasImprovement && (

src/components/DocFeedbackNote.tsx

@@ -1,8 +1,20 @@
 import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
-import { FaComment, FaLightbulb, FaTrash, FaChevronDown, FaChevronUp, FaSave, FaTimes } from 'react-icons/fa'
+import {
+  FaComment,
+  FaLightbulb,
+  FaTrash,
+  FaChevronDown,
+  FaChevronUp,
+  FaSave,
+  FaTimes,
+} from 'react-icons/fa'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { deleteDocFeedback, updateDocFeedback, updateDocFeedbackCollapsed } from '~/utils/docFeedback.functions'
+import {
+  deleteDocFeedback,
+  updateDocFeedback,
+  updateDocFeedbackCollapsed,
+} from '~/utils/docFeedback.functions'
 import { useToast } from '~/components/ToastProvider'
 import type { DocFeedback } from '~/db/schema'
 
@@ -12,7 +24,11 @@ interface DocFeedbackNoteProps {
   inline?: boolean
 }
 
-export function DocFeedbackNote({ note, anchorName, inline = false }: DocFeedbackNoteProps) {
+export function DocFeedbackNote({
+  note,
+  anchorName,
+  inline = false,
+}: DocFeedbackNoteProps) {
   const queryClient = useQueryClient()
   const [isDeleting, setIsDeleting] = React.useState(false)
   const [deleteError, setDeleteError] = React.useState<string | null>(null)
@@ -57,7 +73,8 @@ export function DocFeedbackNote({ note, anchorName, inline = false }: DocFeedbac
 
   // Extract first line for preview
   const firstLine = note.content.split('\n')[0]
-  const preview = firstLine.length > 60 ? firstLine.substring(0, 60) + '...' : firstLine
+  const preview =
+    firstLine.length > 60 ? firstLine.substring(0, 60) + '...' : firstLine
 
   const deleteMutation = useMutation({
     mutationFn: deleteDocFeedback,
@@ -66,33 +83,32 @@ export function DocFeedbackNote({ note, anchorName, inline = false }: DocFeedbac
       await queryClient.cancelQueries({ queryKey: ['docFeedback'] })
 
       // Snapshot the previous value
-      const previousData = queryClient.getQueriesData({ queryKey: ['docFeedback'] })
+      const previousData = queryClient.getQueriesData({
+        queryKey: ['docFeedback'],
+      })
 
       // Optimistically remove the note from all matching queries
-      queryClient.setQueriesData(
-        { queryKey: ['docFeedback'] },
-        (old: any) => {
-          if (!old) return old
-
-          // Handle doc page structure (userFeedback)
-          if ('userFeedback' in old && Array.isArray(old.userFeedback)) {
-            return {
-              ...old,
-              userFeedback: old.userFeedback.filter((f: any) => f.id !== note.id),
-            }
+      queryClient.setQueriesData({ queryKey: ['docFeedback'] }, (old: any) => {
+        if (!old) return old
+
+        // Handle doc page structure (userFeedback)
+        if ('userFeedback' in old && Array.isArray(old.userFeedback)) {
+          return {
+            ...old,
+            userFeedback: old.userFeedback.filter((f: any) => f.id !== note.id),
           }
+        }
 
-          // Handle account/notes page structure (feedback)
-          if ('feedback' in old && Array.isArray(old.feedback)) {
-            return {
-              ...old,
-              feedback: old.feedback.filter((f: any) => f.id !== note.id),
-            }
+        // Handle account/notes page structure (feedback)
+        if ('feedback' in old && Array.isArray(old.feedback)) {
+          return {
+            ...old,
+            feedback: old.feedback.filter((f: any) => f.id !== note.id),
           }
-
-          return old
         }
-      )
+
+        return old
+      })
 
       return { previousData }
     },
@@ -118,41 +134,48 @@ export function DocFeedbackNote({ note, anchorName, inline = false }: DocFeedbac
       await queryClient.cancelQueries({ queryKey: ['docFeedback'] })
 
       // Snapshot the previous value
-      const previousData = queryClient.getQueriesData({ queryKey: ['docFeedback'] })
+      const previousData = queryClient.getQueriesData({
+        queryKey: ['docFeedback'],
+      })
 
       // Optimistically update the note content
-      queryClient.setQueriesData(
-        { queryKey: ['docFeedback'] },
-        (old: any) => {
-          if (!old) return old
-
-          // Handle doc page structure (userFeedback)
-          if ('userFeedback' in old && Array.isArray(old.userFeedback)) {
-            return {
-              ...old,
-              userFeedback: old.userFeedback.map((f: any) =>
-                f.id === note.id
-                  ? { ...f, content: variables.data.content, updatedAt: new Date() }
-                  : f
-              ),
-            }
+      queryClient.setQueriesData({ queryKey: ['docFeedback'] }, (old: any) => {
+        if (!old) return old
+
+        // Handle doc page structure (userFeedback)
+        if ('userFeedback' in old && Array.isArray(old.userFeedback)) {
+          return {
+            ...old,
+            userFeedback: old.userFeedback.map((f: any) =>
+              f.id === note.id
+                ? {
+                    ...f,
+                    content: variables.data.content,
+                    updatedAt: new Date(),
+                  }
+                : f,
+            ),
           }
+        }
 
-          // Handle account/notes page structure (feedback)
-          if ('feedback' in old && Array.isArray(old.feedback)) {
-            return {
-              ...old,
-              feedback: old.feedback.map((f: any) =>
-                f.id === note.id
-                  ? { ...f, content: variables.data.content, updatedAt: new Date() }
-                  : f
-              ),
-            }
+        // Handle account/notes page structure (feedback)
+        if ('feedback' in old && Array.isArray(old.feedback)) {
+          return {
+            ...old,
+            feedback: old.feedback.map((f: any) =>
+              f.id === note.id
+                ? {
+                    ...f,
+                    content: variables.data.content,
+                    updatedAt: new Date(),
+                  }
+                : f,
+            ),
           }
-
-          return old
         }
-      )
+
+        return old
+      })
 
       return { previousData }
     },
@@ -182,41 +205,40 @@ export function DocFeedbackNote({ note, anchorName, inline = false }: DocFeedbac
       await queryClient.cancelQueries({ queryKey: ['docFeedback'] })
 
       // Snapshot the previous value
-      const previousData = queryClient.getQueriesData({ queryKey: ['docFeedback'] })
+      const previousData = queryClient.getQueriesData({
+        queryKey: ['docFeedback'],
+      })
 
       // Optimistically toggle collapsed state
-      queryClient.setQueriesData(
-        { queryKey: ['docFeedback'] },
-        (old: any) => {
-          if (!old) return old
-
-          // Handle doc page structure (userFeedback)
-          if ('userFeedback' in old && Array.isArray(old.userFeedback)) {
-            return {
-              ...old,
-              userFeedback: old.userFeedback.map((f: any) =>
-                f.id === note.id
-                  ? { ...f, isCollapsed: variables.data.isCollapsed }
-                  : f
-              ),
-            }
+      queryClient.setQueriesData({ queryKey: ['docFeedback'] }, (old: any) => {
+        if (!old) return old
+
+        // Handle doc page structure (userFeedback)
+        if ('userFeedback' in old && Array.isArray(old.userFeedback)) {
+          return {
+            ...old,
+            userFeedback: old.userFeedback.map((f: any) =>
+              f.id === note.id
+                ? { ...f, isCollapsed: variables.data.isCollapsed }
+                : f,
+            ),
           }
+        }
 
-          // Handle account/notes page structure (feedback)
-          if ('feedback' in old && Array.isArray(old.feedback)) {
-            return {
-              ...old,
-              feedback: old.feedback.map((f: any) =>
-                f.id === note.id
-                  ? { ...f, isCollapsed: variables.data.isCollapsed }
-                  : f
-              ),
-            }
+        // Handle account/notes page structure (feedback)
+        if ('feedback' in old && Array.isArray(old.feedback)) {
+          return {
+            ...old,
+            feedback: old.feedback.map((f: any) =>
+              f.id === note.id
+                ? { ...f, isCollapsed: variables.data.isCollapsed }
+                : f,
+            ),
           }
-
-          return old
         }
-      )
+
+        return old
+      })
 
       return { previousData }
     },
@@ -316,7 +338,8 @@ export function DocFeedbackNote({ note, anchorName, inline = false }: DocFeedbac
         <div
           className={twMerge(
             `flex flex-col gap-1 p-2 ${colors.header}`,
-            note.isCollapsed && 'cursor-pointer hover:opacity-80 transition-opacity'
+            note.isCollapsed &&
+              'cursor-pointer hover:opacity-80 transition-opacity',
           )}
           onClick={note.isCollapsed ? handleToggle : undefined}
         >
@@ -364,9 +387,17 @@ export function DocFeedbackNote({ note, anchorName, inline = false }: DocFeedbac
                   handleToggle()
                 }}
                 className={`p-1 ${colors.icon} ${colors.deleteHover} transition-colors`}
-                title={note.isCollapsed ? `Expand ${isImprovement ? 'improvement' : 'note'}` : `Collapse ${isImprovement ? 'improvement' : 'note'}`}
+                title={
+                  note.isCollapsed
+                    ? `Expand ${isImprovement ? 'improvement' : 'note'}`
+                    : `Collapse ${isImprovement ? 'improvement' : 'note'}`
+                }
               >
-                {note.isCollapsed ? <FaChevronDown className="text-xs" /> : <FaChevronUp className="text-xs" />}
+                {note.isCollapsed ? (
+                  <FaChevronDown className="text-xs" />
+                ) : (
+                  <FaChevronUp className="text-xs" />
+                )}
               </button>
             </div>
           </div>
@@ -428,7 +459,9 @@ export function DocFeedbackNote({ note, anchorName, inline = false }: DocFeedbac
             )}
 
             {/* Timestamp and Points */}
-            <div className={`mt-2 flex items-center justify-between text-xs ${colors.timestamp}`}>
+            <div
+              className={`mt-2 flex items-center justify-between text-xs ${colors.timestamp}`}
+            >
               <div>
                 {new Date(note.createdAt).toLocaleDateString('en-US', {
                   month: 'short',

src/components/FeedPage.tsx

@@ -300,7 +300,10 @@ export function FeedPage({
       <div className="flex-1 space-y-2 sm:space-y-4 w-full max-w-7xl mx-auto flex flex-col lg:flex-row gap-2 min-h-0">
         <aside className="lg:w-64 flex-shrink-0 lg:self-start sticky top-[calc(var(--navbar-height)+1rem)] z-10">
           <FeedFilters
-            libraries={libraries.filter((lib): lib is import('~/libraries/types').Library => 'tagline' in lib)}
+            libraries={libraries.filter(
+              (lib): lib is import('~/libraries/types').Library =>
+                'tagline' in lib,
+            )}
             partners={partners}
             selectedSources={effectiveFilters.sources}
             selectedLibraries={effectiveFilters.libraries}

src/components/FeedPageLayout.tsx

@@ -212,7 +212,9 @@ function FeedPageLayoutFilters() {
   return (
     <aside className="lg:w-64 flex-shrink-0 lg:self-start">
       <FeedFilters
-        libraries={libraries.filter((lib): lib is import('~/libraries/types').Library => 'tagline' in lib)}
+        libraries={libraries.filter(
+          (lib): lib is import('~/libraries/types').Library => 'tagline' in lib,
+        )}
         partners={partners}
         selectedSources={filters.sources}
         selectedLibraries={filters.libraries}

src/components/FeedTicker.tsx

@@ -101,7 +101,8 @@ export function FeedTicker() {
       const libraryName = library?.name || libraryId || ''
 
       // Get version from metadata
-      const version = (entry.metadata as { version?: string } | null)?.version || ''
+      const version =
+        (entry.metadata as { version?: string } | null)?.version || ''
 
       return (
         <Link