Merge branch 'main' into chore/setup-router-eslint-plugin

Author: Balastrong

convex/schema.ts

@@ -31,6 +31,7 @@ const schema = defineSchema({
     capabilities: v.array(
       v.union(...validCapabilities.map((cap) => v.literal(cap)))
     ),
+    adsDisabled: v.optional(v.boolean()),
   }),
 })
 

convex/users.ts

@@ -2,6 +2,7 @@ import { v } from 'convex/values'
 import { mutation, query, QueryCtx } from './_generated/server'
 import { Capability, CapabilitySchema } from './schema'
 import { getCurrentUserConvex } from './auth'
+import { Id } from './_generated/dataModel'
 
 export const updateUserCapabilities = mutation({
   args: {
@@ -22,8 +23,6 @@ export const updateUserCapabilities = mutation({
 
     let capabilities = args.capabilities
 
-    console.log('targetUser', targetUser)
-
     // Ensure that tannerlinsley@gmail.com always has the admin capability
     // as a fail safe
     if (targetUser.email === 'tannerlinsley@gmail.com') {
@@ -32,8 +31,6 @@ export const updateUserCapabilities = mutation({
       ]
     }
 
-    console.log(capabilities)
-
     // Validate capabilities using schema helper
     const validatedCapabilities = CapabilitySchema.array().parse(capabilities)
 
@@ -84,3 +81,21 @@ async function requireCapability(ctx: QueryCtx, capability: Capability) {
 
   return { currentUser }
 }
+
+// Toggle ad preference (only for users with disableAds capability)
+export const updateAdPreference = mutation({
+  args: {
+    adsDisabled: v.boolean(),
+  },
+  handler: async (ctx, args) => {
+    // Validate admin capability
+    const { currentUser } = await requireCapability(ctx, 'disableAds')
+
+    // Update target user's capabilities
+    await ctx.db.patch(currentUser.userId as Id<'users'>, {
+      adsDisabled: args.adsDisabled,
+    })
+
+    return { success: true }
+  },
+})

package.json

@@ -51,7 +51,6 @@
     "@visx/hierarchy": "^2.10.0",
     "@visx/responsive": "^2.10.0",
     "@vitejs/plugin-react": "^4.3.3",
-    "airtable": "^0.12.2",
     "algoliasearch": "^5.23.4",
     "axios": "^1.6.7",
     "better-auth": "^1.3.7",

pnpm-lock.yaml

@@ -2,9 +2,9 @@ import { Link } from '@tanstack/react-router'
 
 const footerLinks = [
   { label: 'Blog', to: '/blog' },
-  { label: '@Tan_Stack Twitter', to: 'https://twitter.com/tan_stack' },
+  { label: '@Tan_Stack on X.com', to: 'https://x.com/tan_stack' },
   {
-    label: '@TannerLinsley Twitter',
+    label: '@TannerLinsley on X.com',
     to: 'https://twitter.com/tannerlinsley',
   },
   { label: 'GitHub', to: 'https://github.com/tanstack' },

src/components/Footer.tsx

@@ -61,18 +61,20 @@ const NpmDownloadCounter = ({
   return <StableCounter value={count} intervalMs={intervalMs} />
 }
 
+export function ossStatsQuery({ library }: { library?: Library } = {}) {
+  return convexQuery(api.stats.getStats, {
+    library: library
+      ? {
+          id: library.id,
+          repo: library.repo,
+          frameworks: library.frameworks,
+        }
+      : undefined,
+  })
+}
+
 export function _OssStats({ library }: { library?: Library }) {
-  const { data: stats } = useSuspenseQuery(
-    convexQuery(api.stats.getStats, {
-      library: library
-        ? {
-            id: library.id,
-            repo: library.repo,
-            frameworks: library.frameworks,
-          }
-        : undefined,
-    })
-  )
+  const { data: stats } = useSuspenseQuery(ossStatsQuery({ library }))
 
   return (
     <div>

src/components/OpenSourceStats.tsx

@@ -2,8 +2,17 @@ import React from 'react'
 import { Pack, hierarchy } from '@visx/hierarchy'
 import { ParentSize } from '@visx/responsive'
 import { twMerge } from 'tailwind-merge'
+import { getSponsorsForSponsorPack, Sponsor } from '~/server/sponsors'
 
-export default function SponsorPack({ sponsors }: { sponsors: any }) {
+type DisplaySponsor = Awaited<
+  ReturnType<typeof getSponsorsForSponsorPack>
+>[number]
+
+export default function SponsorPack({
+  sponsors,
+}: {
+  sponsors: DisplaySponsor[]
+}) {
   const pack = React.useMemo(
     () => ({
       children: sponsors,
@@ -17,21 +26,11 @@ export default function SponsorPack({ sponsors }: { sponsors: any }) {
   const root = React.useMemo(
     () =>
       hierarchy(pack)
-        .sum((d) => 1 + d?.tier?.monthlyPriceInDollars)
-        .sort(
-          (a, b) =>
-            (b.data.tier?.monthlyPriceInDollars ?? 0) -
-            (a.data.tier?.monthlyPriceInDollars ?? 0)
-        ),
+        .sum((d) => 0.0007 + d.size)
+        .sort((a, b) => (b.data.size ?? 0) - (a.data.size ?? 0)),
     [pack]
   )
 
-  // const [show, setShow] = React.useState(false)
-
-  // React.useEffect(() => {
-  //   setShow(true)
-  // }, [])
-
   return (
     <ParentSize>
       {({ width = 800 }) => {

src/components/SponsorPack.tsx

@@ -0,0 +1,19 @@
+import { useCurrentUserQuery } from './useCurrentUser'
+
+// Legacy hook for backward compatibility - now uses current user query
+export function useAdsPreference() {
+  const userQuery = useCurrentUserQuery()
+
+  if (userQuery.isLoading || !userQuery.data) {
+    return { adsEnabled: true } // Default to showing ads while loading or not authenticated
+  }
+
+  const user = userQuery.data
+  const adsDisabled = user.adsDisabled ?? false
+  const canDisableAds = user.capabilities.includes('disableAds')
+
+  // Ads are enabled if user can't disable them OR if they haven't disabled them
+  const adsEnabled = !canDisableAds || !adsDisabled
+
+  return { adsEnabled }
+}

src/hooks/useAdPreference.ts

@@ -1,20 +1,40 @@
-import { useUserSettingsStore } from '~/stores/userSettings'
 import { FaSignOutAlt } from 'react-icons/fa'
-import { Authenticated, Unauthenticated } from 'convex/react'
+import { Authenticated, Unauthenticated, useMutation } from 'convex/react'
 import { Link, redirect } from '@tanstack/react-router'
 import { authClient } from '~/utils/auth.client'
 import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
+import { api } from 'convex/_generated/api'
 
 export const Route = createFileRoute({
   component: AccountPage,
 })
 
 function UserSettings() {
   const userQuery = useCurrentUserQuery()
-  const adsDisabled = useUserSettingsStore((s) => s.settings.adsDisabled)
-  const toggleAds = useUserSettingsStore((s) => s.toggleAds)
+  // Use current user query directly instead of separate ad preference query
+  const updateAdPreferenceMutation = useMutation(
+    api.users.updateAdPreference
+  ).withOptimisticUpdate((localStore, args) => {
+    const { adsDisabled } = args
+    const currentValue = localStore.getQuery(api.auth.getCurrentUser)
+    if (currentValue !== undefined) {
+      localStore.setQuery(api.auth.getCurrentUser, {}, {
+        ...currentValue,
+        adsDisabled: adsDisabled,
+      } as any)
+    }
+  })
 
-  const canDisableAds = userQuery.data?.capabilities.includes('disableAds')
+  // Get values directly from the current user data
+  const adsDisabled = userQuery.data?.adsDisabled ?? false
+  const canDisableAds =
+    userQuery.data?.capabilities.includes('disableAds') ?? false
+
+  const handleToggleAds = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateAdPreferenceMutation({
+      adsDisabled: e.target.checked,
+    })
+  }
 
   const signOut = async () => {
     await authClient.signOut()
@@ -53,7 +73,7 @@ function UserSettings() {
                     type="checkbox"
                     className="h-4 w-4 accent-blue-600 my-1"
                     checked={adsDisabled}
-                    onChange={toggleAds}
+                    onChange={handleToggleAds}
                     disabled={userQuery.isLoading}
                     aria-label="Disable Ads"
                   />

src/routes/_libraries/account.tsx

@@ -11,10 +11,15 @@ import { seo } from '~/utils/seo'
 import LandingPageGad from '~/components/LandingPageGad'
 import { PartnershipCallout } from '~/components/PartnershipCallout'
 import { PartnersSection } from '~/components/PartnersSection'
-import OpenSourceStats from '~/components/OpenSourceStats'
+import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
+
+const library = getLibrary('config')
 
 export const Route = createFileRoute({
   component: FormVersionIndex,
+  loader: async ({ context: { queryClient } }) => {
+    await queryClient.ensureQueryData(ossStatsQuery({ library }))
+  },
   head: () => ({
     meta: seo({
       title: configProject.name,
@@ -27,7 +32,6 @@ const librariesRouteApi = getRouteApi('/_libraries')
 
 export default function FormVersionIndex() {
   const { sponsorsPromise } = librariesRouteApi.useLoaderData()
-  const library = getLibrary('config')
 
   return (
     <>