feat: track last used framework

Author: tannerlinsley

src/auth/auth.server.ts

@@ -110,6 +110,7 @@ export class AuthService implements IAuthService {
       capabilities,
       adsDisabled: user.adsDisabled,
       interestedInHidingAds: user.interestedInHidingAds,
+      lastUsedFramework: user.lastUsedFramework,
     }
   }
 }

src/auth/repositories.server.ts

@@ -115,6 +115,7 @@ export class DrizzleUserRepository implements IUserRepository {
       capabilities: user.capabilities as Capability[],
       adsDisabled: user.adsDisabled,
       interestedInHidingAds: user.interestedInHidingAds,
+      lastUsedFramework: user.lastUsedFramework,
       sessionVersion: user.sessionVersion,
       createdAt: user.createdAt,
       updatedAt: user.updatedAt,

src/auth/types.ts

@@ -69,6 +69,7 @@ export interface AuthUser {
   capabilities: Capability[]
   adsDisabled: boolean | null
   interestedInHidingAds: boolean | null
+  lastUsedFramework: string | null
 }
 
 /**
@@ -83,6 +84,7 @@ export interface DbUser {
   capabilities: Capability[]
   adsDisabled: boolean | null
   interestedInHidingAds: boolean | null
+  lastUsedFramework: string | null
   sessionVersion: number
   createdAt: Date
   updatedAt: Date
@@ -116,6 +118,7 @@ export interface IUserRepository {
       capabilities: Capability[]
       adsDisabled: boolean
       interestedInHidingAds: boolean
+      lastUsedFramework: string
       sessionVersion: number
       updatedAt: Date
     }>,

src/components/DocsLayout.tsx

@@ -343,8 +343,8 @@ export function DocsLayout({
             {children}
           </div>
           <AdGate>
-            <div className="px-2 xl:px-4">
-              <div className="mb-8 !py-0! mx-auto max-w-full">
+            <div className="px-2 xl:px-4 flex">
+              <div className="mb-8 !py-0! mx-auto max-w-full justify-center">
                 <GamFooter popupPosition="top" />
               </div>
             </div>

src/components/FrameworkSelect.tsx

@@ -4,6 +4,8 @@ import { useNavigate, useParams } from '@tanstack/react-router'
 import { Select } from './Select'
 import { Framework, getLibrary, LibraryId } from '~/libraries'
 import { getFrameworkOptions } from '~/libraries/frameworks'
+import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
+import { updateLastUsedFramework } from '~/utils/users.server'
 
 export function FrameworkSelect({ libraryId }: { libraryId: LibraryId }) {
   const library = getLibrary(libraryId)
@@ -24,7 +26,7 @@ export function FrameworkSelect({ libraryId }: { libraryId: LibraryId }) {
 // Let's use zustand to wrap the local storage logic. This way
 // we'll get subscriptions for free and we can use it in other
 // components if we need to.
-const useLocalCurrentFramework = create<{
+export const useLocalCurrentFramework = create<{
   currentFramework?: string
   setCurrentFramework: (framework: string) => void
 }>((set) => ({
@@ -38,6 +40,38 @@ const useLocalCurrentFramework = create<{
   },
 }))
 
+/**
+ * Get the stored framework preference from localStorage.
+ * Safe to call during SSR (returns undefined).
+ */
+export function getStoredFrameworkPreference(): string | undefined {
+  if (typeof window === 'undefined') return undefined
+  return localStorage.getItem('framework') || undefined
+}
+
+/**
+ * Hook to persist framework preference.
+ * Saves to localStorage always, and to DB if user is logged in.
+ */
+export function usePersistFrameworkPreference() {
+  const userQuery = useCurrentUserQuery()
+  const localCurrentFramework = useLocalCurrentFramework()
+
+  return React.useCallback(
+    (framework: string) => {
+      // Always update localStorage as fallback
+      localCurrentFramework.setCurrentFramework(framework)
+      // Update DB for logged-in users (fire-and-forget)
+      if (userQuery.data) {
+        updateLastUsedFramework({ data: { framework } }).catch(() => {
+          // Silently ignore errors - localStorage is the fallback
+        })
+      }
+    },
+    [localCurrentFramework, userQuery.data],
+  )
+}
+
 function useFrameworkConfig({ frameworks }: { frameworks: Framework[] }) {
   const currentFramework = useCurrentFramework(frameworks)
 
@@ -59,19 +93,24 @@ function useFrameworkConfig({ frameworks }: { frameworks: Framework[] }) {
 
 /**
  * Use framework in URL path
+ * Otherwise use framework from user's DB preference (if logged in)
  * Otherwise use framework in localStorage if it exists for this project
  * Otherwise fallback to react
  */
 export function useCurrentFramework(frameworks: Framework[]) {
   const navigate = useNavigate()
+  const userQuery = useCurrentUserQuery()
 
   const { framework: paramsFramework } = useParams({
     strict: false,
   })
 
   const localCurrentFramework = useLocalCurrentFramework()
 
+  // Priority: URL params > DB (logged-in) > localStorage > 'react'
+  const userFramework = userQuery.data?.lastUsedFramework
   let framework = (paramsFramework ||
+    userFramework ||
     localCurrentFramework.currentFramework ||
     'react') as Framework
 
@@ -82,9 +121,16 @@ export function useCurrentFramework(frameworks: Framework[]) {
       navigate({
         params: { framework } as any,
       })
+      // Always update localStorage as fallback
       localCurrentFramework.setCurrentFramework(framework)
+      // Update DB for logged-in users (fire-and-forget)
+      if (userQuery.data) {
+        updateLastUsedFramework({ data: { framework } }).catch(() => {
+          // Silently ignore errors - localStorage is the fallback
+        })
+      }
     },
-    [localCurrentFramework, navigate],
+    [localCurrentFramework, navigate, userQuery.data],
   )
 
   React.useEffect(() => {

src/components/SearchModal.tsx

@@ -17,6 +17,11 @@ import { useSearchContext } from '~/contexts/SearchContext'
 import { libraries } from '~/libraries'
 import { frameworkOptions } from '~/libraries/frameworks'
 import { capitalize } from '~/utils/utils'
+import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
+import {
+  getStoredFrameworkPreference,
+  usePersistFrameworkPreference,
+} from './FrameworkSelect'
 
 function decodeHtmlEntities(str: string): string {
   const textarea = document.createElement('textarea')
@@ -87,8 +92,20 @@ function useSearchFilters() {
 }
 
 function SearchFiltersProvider({ children }: { children: React.ReactNode }) {
+  const userQuery = useCurrentUserQuery()
   const [selectedLibrary, setSelectedLibrary] = React.useState('')
-  const [selectedFramework, setSelectedFramework] = React.useState('')
+
+  // Get initial framework from user preference (DB if logged in, localStorage otherwise)
+  const getInitialFramework = React.useCallback(() => {
+    if (userQuery.data?.lastUsedFramework) {
+      return userQuery.data.lastUsedFramework
+    }
+    return getStoredFrameworkPreference() || ''
+  }, [userQuery.data?.lastUsedFramework])
+
+  const [selectedFramework, setSelectedFramework] = React.useState(
+    getInitialFramework,
+  )
 
   const { items: rawLibraryItems, refine: refineLibrary } = useMenu({
     attribute: 'library',
@@ -100,6 +117,27 @@ function SearchFiltersProvider({ children }: { children: React.ReactNode }) {
     limit: 50,
   })
 
+  // Pre-filter by stored framework preference on mount (only if no URL framework)
+  const hasPrefiltered = React.useRef(false)
+  const pathname = useRouterState({
+    select: (state) => state.location.pathname,
+  })
+  const hasUrlFramework = pathname.includes('/framework/')
+
+  React.useEffect(() => {
+    // Don't pre-filter if URL already specifies a framework (let FrameworkRefinement handle it)
+    if (hasPrefiltered.current || hasUrlFramework) return
+    const storedFramework = getInitialFramework()
+    if (storedFramework && rawFrameworkItems.length > 0) {
+      const item = rawFrameworkItems.find((i) => i.value === storedFramework)
+      if (item && !item.isRefined) {
+        refineFramework(storedFramework)
+        setSelectedFramework(storedFramework)
+        hasPrefiltered.current = true
+      }
+    }
+  }, [rawFrameworkItems, refineFramework, getInitialFramework, hasUrlFramework])
+
   // Sort items by their defined order
   const libraryItems = [...rawLibraryItems].sort((a, b) => {
     const aIndex = libraries.findIndex((l) => l.id === a.value)
@@ -456,6 +494,7 @@ function FrameworkRefinement() {
     frameworkItems: items,
   } = useSearchFilters()
 
+  const persistFramework = usePersistFrameworkPreference()
   const hasAutoRefined = React.useRef(false)
 
   // Auto-refine based on current page
@@ -476,6 +515,10 @@ function FrameworkRefinement() {
   const handleChange = (value: string) => {
     setSelectedFramework(value)
     refineFramework(value)
+    // Persist the framework preference (localStorage + DB if logged in)
+    if (value) {
+      persistFramework(value)
+    }
   }
 
   const currentFramework = frameworkOptions.find(
@@ -777,6 +820,8 @@ function SearchResults({ focusedIndex }: { focusedIndex: number }) {
     frameworkItems,
   } = useSearchFilters()
 
+  const persistFramework = usePersistFrameworkPreference()
+
   const algoliaRefinedLibrary =
     libraryItems.find((item) => item.isRefined)?.value || null
   const algoliaRefinedFramework =
@@ -879,6 +924,7 @@ function SearchResults({ focusedIndex }: { focusedIndex: number }) {
                       onClick={() => {
                         setSelectedFramework(fw.value)
                         refineFramework(fw.value)
+                        persistFramework(fw.value)
                       }}
                       className="flex items-center gap-1.5 px-2 py-1 text-xs font-bold rounded bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
                     >

src/db/schema.ts

@@ -94,6 +94,7 @@ export const users = pgTable(
     capabilities: capabilityEnum('capabilities').array().notNull().default([]),
     adsDisabled: boolean('ads_disabled').default(false),
     interestedInHidingAds: boolean('interested_in_hiding_ads').default(false),
+    lastUsedFramework: varchar('last_used_framework', { length: 50 }),
     sessionVersion: integer('session_version').notNull().default(0),
     createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' })
       .notNull()

src/routes/$libraryId/$version.docs.framework.$framework.$.tsx

@@ -1,4 +1,9 @@
-import { createFileRoute, useLocation } from '@tanstack/react-router'
+import {
+  createFileRoute,
+  isNotFound,
+  redirect,
+  useLocation,
+} from '@tanstack/react-router'
 import { seo } from '~/utils/seo'
 import { Doc } from '~/components/Doc'
 import { loadDocs } from '~/utils/docs'
@@ -10,20 +15,36 @@ export const Route = createFileRoute(
   '/$libraryId/$version/docs/framework/$framework/$',
 )({
   staleTime: 1000 * 60 * 5,
-  loader: (ctx) => {
+  loader: async (ctx) => {
     const { _splat: docsPath, framework, version, libraryId } = ctx.params
 
     const library = getLibrary(libraryId)
 
-    return loadDocs({
-      repo: library.repo,
-      branch: getBranch(library, version),
-      docsPath: `${
-        library.docsRoot || 'docs'
-      }/framework/${framework}/${docsPath}`,
-      currentPath: ctx.location.pathname,
-      redirectPath: `/${library.id}/${version}/docs/overview`,
-    })
+    try {
+      return await loadDocs({
+        repo: library.repo,
+        branch: getBranch(library, version),
+        docsPath: `${
+          library.docsRoot || 'docs'
+        }/framework/${framework}/${docsPath}`,
+        currentPath: ctx.location.pathname,
+        redirectPath: `/${library.id}/${version}/docs/overview`,
+      })
+    } catch (error) {
+      // If doc not found, redirect to framework docs root instead of showing 404
+      // This handles cases like switching frameworks where the same doc path doesn't exist
+      // Check both isNotFound() and the serialized form from server functions
+      const isNotFoundError =
+        isNotFound(error) ||
+        (error && typeof error === 'object' && 'isNotFound' in error)
+      if (isNotFoundError) {
+        throw redirect({
+          to: '/$libraryId/$version/docs/framework/$framework',
+          params: { libraryId, version, framework },
+        })
+      }
+      throw error
+    }
   },
   component: Docs,
   head: (ctx) => {

src/utils/users.server.ts

@@ -341,6 +341,23 @@ export const setInterestedInHidingAds = createServerFn({ method: 'POST' })
     return { success: true }
   })
 
+// Server function to update user's last used framework preference
+export const updateLastUsedFramework = createServerFn({ method: 'POST' })
+  .inputValidator(z.object({ framework: z.string().min(1).max(50) }))
+  .handler(async ({ data }) => {
+    const user = await getAuthenticatedUser()
+
+    await db
+      .update(users)
+      .set({
+        lastUsedFramework: data.framework,
+        updatedAt: new Date(),
+      })
+      .where(eq(users.id, user.userId))
+
+    return { success: true }
+  })
+
 // Server function wrapper for updateUserCapabilities (admin only)
 export const updateUserCapabilities = createServerFn({ method: 'POST' })
   .inputValidator(