Frontend update and improvements

Author: Isti01

frontend/.env.example

@@ -10,7 +10,6 @@ VITE_PASS_TEMPLATE=generic
 VITE_THEME_COLOR="#ffffff"
 VITE_OFFICIAL_LANGUAGE=false
 VITE_NEW_RIDDLE_ENDPOINTS=true
-VITE_INITIAL_BG_IMAGE=https://example.com
 VITE_FIREBASE_PROJECT_ID="Set if you need push notifications"
 VITE_FIREBASE_API_KEY="Set if you need push notifications"
 VITE_FIREBASE_SENDER_ID="Set if you need push notifications"

frontend/package.json

@@ -6,37 +6,36 @@
   "type": "module",
   "dependencies": {
     "@chakra-ui/icons": "2.2.4",
-    "@chakra-ui/react": "^2.10.5",
+    "@chakra-ui/react": "^2.10.9",
     "@chakra-ui/styled-system": "2.12.0",
     "@chakra-ui/theme-tools": "2.2.6",
     "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.0",
-    "@firebase/app": "0.10.18",
-    "@firebase/messaging": "0.12.16",
-    "@nivo/bar": "^0.88.0",
-    "@tanstack/react-query": "5.66.0",
-    "@tanstack/react-query-devtools": "^5.64.2",
+    "@emotion/styled": "11.14.1",
+    "@firebase/app": "0.13.2",
+    "@firebase/messaging": "0.12.22",
+    "@nivo/bar": "^0.99.0",
+    "@tanstack/react-query": "5.81.5",
+    "@tanstack/react-query-devtools": "^5.81.5",
     "@zxing/browser": "^0.1.5",
     "@zxing/library": "^0.21.3",
-    "axios": "1.7.9",
+    "axios": "1.10.0",
     "date-fns": "4.1.0",
     "deepmerge": "^4.3.1",
-    "framer-motion": "12.0.6",
+    "framer-motion": "12.20.2",
     "js-cookie": "3.0.5",
-    "lodash": "4.17.21",
     "pigeon-maps": "^0.22.1",
-    "prismjs": "1.29.0",
+    "prismjs": "1.30.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-geolocated": "^4.3.0",
     "react-helmet-async": "2.0.5",
-    "react-hook-form": "7.54.2",
-    "react-icons": "5.4.0",
-    "react-markdown": "9.0.3",
-    "react-qr-code": "^2.0.15",
-    "react-router-dom": "7.1.5",
+    "react-hook-form": "7.59.0",
+    "react-icons": "5.5.0",
+    "react-markdown": "10.1.0",
+    "react-qr-code": "^2.0.16",
+    "react-router": "7.6.3",
     "react-simple-code-editor": "0.14.1",
-    "remark-gfm": "4.0.0",
+    "remark-gfm": "4.0.1",
     "values.js": "2.1.1"
   },
   "resolutions": {

frontend/src/App.tsx

@@ -1,13 +1,12 @@
 import { Suspense } from 'react'
-import { Route, Routes } from 'react-router-dom'
+import { Route, Routes } from 'react-router'
 import { CmschLayout } from './common-components/layout/CmschLayout'
 import { ErrorPage } from './pages/error/error.page'
 import HomePage from './pages/home/home.page'
 import LoginPage from './pages/login/login.page'
 import CountdownPage from './pages/countdown/countdown.page'
 import IndexPage from './pages/index/index.page'
 import { l } from './util/language'
-import { AppBackground } from './common-components/layout/AppBackground'
 import { Paths } from './util/paths.ts'
 import AccessKeyPage from './pages/access-key/accessKey.page.tsx'
 import CommunityPage from './pages/communities/community.page.tsx'
@@ -49,7 +48,6 @@ import DebtPage from './pages/debt/debt.page.tsx'
 
 export function App() {
   return (
-    <AppBackground>
       <CountdownPage>
         <CmschLayout>
           <Suspense>
@@ -142,6 +140,5 @@ export function App() {
           </Suspense>
         </CmschLayout>
       </CountdownPage>
-    </AppBackground>
   )
 }

frontend/src/api/contexts/config/ConfigContext.tsx

@@ -45,4 +45,4 @@ export const useConfigContext = () => {
   return ctx
 }
 
-export const useStyleFromContext = () => useContext(ConfigContext)?.components?.style
+export const useStyle = () => useContext(ConfigContext)?.components?.style || usePersistentStyleSetting().persistentStyle

frontend/src/api/contexts/service/ServiceContext.tsx

@@ -1,6 +1,6 @@
 import { useToast } from '@chakra-ui/react'
 import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { AbsolutePaths } from '../../../util/paths'
 import { l } from '../../../util/language'
 

frontend/src/common-components/BoardStat.tsx

@@ -1,5 +1,5 @@
 import { Stat, StatHelpText, StatLabel, StatNumber, StatProps } from '@chakra-ui/react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { useOpaqueBackground } from '../util/core-functions.util'
 
 interface BoardStatProps extends StatProps {

frontend/src/common-components/CmschLink.tsx

@@ -1,5 +1,5 @@
 import { Link as ChakraLink, LinkProps, useColorModeValue } from '@chakra-ui/react'
-import { Link as RouterLink } from 'react-router-dom'
+import { Link as RouterLink } from 'react-router'
 
 type Props = {
   isExternal?: boolean

frontend/src/common-components/CollapsableTableRow.tsx

@@ -1,6 +1,6 @@
 import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons'
 import { useDisclosure, Link as ChakraLink, Grid, GridItem, Box } from '@chakra-ui/react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { joinPath, useOpaqueBackground } from '../util/core-functions.util'
 import { AbsolutePaths } from '../util/paths'
 import { LeaderBoardItemView } from '../util/views/leaderBoardView'

frontend/src/common-components/ComponentUnavailable.tsx

@@ -1,5 +1,5 @@
 import { l } from '../util/language'
-import { Navigate } from 'react-router-dom'
+import { Navigate } from 'react-router'
 import { AbsolutePaths } from '../util/paths'
 import { useServiceContext } from '../api/contexts/service/ServiceContext'
 import { useEffect } from 'react'

frontend/src/common-components/CurrentEventCard.tsx

@@ -2,7 +2,7 @@ import { Box, Flex, useColorModeValue } from '@chakra-ui/react'
 import { useEventListQuery } from '../api/hooks/event/useEventListQuery'
 import { isCurrentEvent, useOpaqueBackground } from '../util/core-functions.util'
 import { AbsolutePaths } from '../util/paths'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { PulsingDot } from './PulsingDot'
 
 export default function CurrentEventCard() {