fix(web): Modernize contex usage for React 19

warning  In React 19, you can render '<Context>' as a provider instead of '<Context.Provider>'  @eslint-react/no-context-provider
warning  In React 19, 'use' is preferred over 'useContext' because it is more flexible          @eslint-react/no-use-context

Author: fliiiix

web/src/data-providers/ConfigDataProvider.tsx

@@ -3,7 +3,7 @@
   We need any, because we don't know the type of the children
 */
 
-import { createContext, useContext, useEffect, useState, JSX } from 'react'
+import { createContext, use, useEffect, useState, JSX } from 'react'
 
 export interface Config {
   headerHTML?: string
@@ -31,7 +31,7 @@ export const ConfigDataProvider = ({ children }: any): JSX.Element => {
     })()
   }, [])
 
-  return <Context.Provider value={config}>{children}</Context.Provider>
+  return <Context value={config}>{children}</Context>
 }
 
-export const useConfig = (): Config => useContext(Context)
+export const useConfig = (): Config => use(Context)

web/src/data-providers/MessageBannerProvider.tsx

@@ -3,7 +3,7 @@
   We need any, because we don't know the type of the children
 */
 
-import React, { useState, useCallback, useContext, JSX } from 'react'
+import React, { useState, useCallback, use, JSX } from 'react'
 import Banner from '../components/InfoBanner'
 
 export interface Message {
@@ -72,11 +72,11 @@ export function MessageBannerProvider({ children }: any): JSX.Element {
   }, [])
 
   return (
-    <Context.Provider value={{ showMessage, clearMessages }}>
+    <Context value={{ showMessage, clearMessages }}>
       <Banner message={message} />
       {children}
-    </Context.Provider>
+    </Context>
   )
 }
 
-export const useMessageBanner = (): MessageBannerState => useContext(Context)
+export const useMessageBanner = (): MessageBannerState => use(Context)

web/src/data-providers/ProjectDataProvider.tsx

@@ -3,7 +3,7 @@
   We need any, because we don't know the type of the children
 */
 
-import React, { createContext, useContext, useEffect, useState, JSX } from 'react'
+import React, { createContext, use, useEffect, useState, JSX } from 'react'
 import { type Project } from '../models/ProjectsResponse'
 import type ProjectsResponse from '../models/ProjectsResponse'
 import { useMessageBanner } from './MessageBannerProvider'
@@ -77,7 +77,7 @@ export function ProjectDataProvider({ children }: any): JSX.Element {
     loadData()
   }, [])
 
-  return <Context.Provider value={state}>{children}</Context.Provider>
+  return <Context value={state}>{children}</Context>
 }
 
-export const useProjects = (): ProjectState => useContext(Context)
+export const useProjects = (): ProjectState => use(Context)

web/src/data-providers/SearchProvider.tsx

@@ -3,7 +3,7 @@
   We need any, because we don't know the type of the children
 */
 
-import React, { createContext, useContext, useEffect, useState, JSX } from 'react'
+import React, { createContext, use, useEffect, useState, JSX } from 'react'
 import { type Project } from '../models/ProjectsResponse'
 import { useProjects } from './ProjectDataProvider'
 import Fuse from 'fuse.js'
@@ -68,7 +68,7 @@ export function SearchProvider({ children }: any): JSX.Element {
     })
   }, [projects])
 
-  return <Context.Provider value={state}>{children}</Context.Provider>
+  return <Context value={state}>{children}</Context>
 }
 
-export const useSearch = (): SearchState => useContext(Context)
+export const useSearch = (): SearchState => use(Context)

web/src/data-providers/StatsDataProvider.tsx

@@ -3,7 +3,7 @@
   We need any, because we don't know the type of the children
 */
 
-import { createContext, useContext, useEffect, useState, JSX } from 'react'
+import { createContext, use, useEffect, useState, JSX } from 'react'
 import { useMessageBanner } from './MessageBannerProvider'
 
 
@@ -79,7 +79,7 @@ export function StatsDataProvider({ children }: any): JSX.Element {
     loadData()
   }, [])
 
-  return <Context.Provider value={state}>{children}</Context.Provider>
+  return <Context value={state}>{children}</Context>
 }
 
-export const useStats = (): StatsState => useContext(Context)
+export const useStats = (): StatsState => use(Context)