hexolan · hexolan · May 14, 2026 · May 14, 2026 · May 14, 2026
diff --git a/services/frontend/package.json b/services/frontend/package.json
@@ -12,31 +12,31 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@mantine/core": "^6.0.19",
-    "@mantine/form": "^6.0.20",
-    "@mantine/hooks": "^6.0.19",
-    "@reduxjs/toolkit": "^1.9.5",
-    "@tabler/icons-react": "^3.0.0",
+    "@emotion/react": "^11.14.0",
+    "@mantine/core": "^9.2.0",
+    "@mantine/form": "^9.2.0",
+    "@mantine/hooks": "^9.2.0",
+    "@reduxjs/toolkit": "^2.11.2",
+    "@tabler/icons-react": "^3.44.0",
     "localforage": "^1.10.0",
-    "match-sorter": "^6.3.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-redux": "^8.1.2",
-    "react-router-dom": "^6.15.0",
+    "match-sorter": "^8.3.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.15.0",
     "sort-by": "^1.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react": "^4.0.3",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "typescript": "^5.0.2",
-    "vite": "^6.4.2"
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.59.3",
+    "@typescript-eslint/parser": "^8.59.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.13"
   },
   "homepage": "https://github.com/hexolan/panels"
 }
diff --git a/services/frontend/src/components/AppHeader.tsx b/services/frontend/src/components/AppHeader.tsx
@@ -26,9 +26,9 @@ function AppHeader() {
           <Menu>
             <Menu.Target>
               <Button color='teal' variant='outline'>
-                <Group spacing={7}>
+                <Group gap={7}>
                   <Avatar color='teal' radius='xl' size={25} />
-                  <Text weight={500} size='sm' sx={{ lineHeight: 1 }} mr={3}>
+                  <Text fw={500} size='sm' mr={3}> {/* sx={{ lineHeight: 1 }} */}
                     {currentUser.username}
                   </Text>
                   <IconChevronDown size={20} />

diff --git a/services/frontend/src/components/AppNavbar.tsx b/services/frontend/src/components/AppNavbar.tsx
@@ -36,7 +36,7 @@ function AppNavbar() {
   return (
     <Navbar width={{ base: 300 }} p='xs'>
       <Navbar.Section py='xs'>
-        <Text size='xs' color='dimmed' my='xs' weight={500}>Browse</Text>
+        <Text size='xs' color='dimmed' my='xs' fw={500}>Browse</Text>
         <NavbarButton text='Feed' page='/' icon={IconTrendingUp} />
         <NavbarButton text='Find Panels' page='/panels' icon={IconSearch} />
       </Navbar.Section>
@@ -48,7 +48,7 @@ function AppNavbar() {
           borderTop: `${rem(1)} solid ${theme.colors.gray[3]}`
         })}
       >
-        <Text size='xs' color='dimmed' m='xs' weight={500}>Suggested Panels</Text>
+        <Text size='xs' color='dimmed' m='xs' fw={500}>Suggested Panels</Text>
         <NavbarButton text='panel/Panel' page='/panel/Panel' icon={IconMessages} />
       </Navbar.Section>
     </Navbar>

diff --git a/services/frontend/src/components/CommentsFeed.tsx b/services/frontend/src/components/CommentsFeed.tsx
@@ -5,7 +5,7 @@ import type { Comment } from '../app/types/common'
 
 function CommentsFeed({ comments }: { comments: Comment[] }) {
   return (
-    <Stack spacing='sm'>
+    <Stack gap='sm'>
       {Object.values(comments).map(comment => <FeedComment key={comment.id} comment={comment} />)}
     </Stack>
   )

diff --git a/services/frontend/src/components/FeedComment.tsx b/services/frontend/src/components/FeedComment.tsx
@@ -12,7 +12,7 @@ import type { UpdateCommentData } from '../app/types/comments'
 
 const FeedCommentBase = ({ children, extraChildren }: { children: React.ReactNode, extraChildren?: React.ReactNode }) => (
   <Paper shadow='sm' radius='md' p='md' withBorder>
-    <Group w='100%' position='apart'>
+    <Group w='100%' justify='apart'>
       <Group>
         <ThemeIcon color='teal' variant='light' size='xl'><IconMessage /></ThemeIcon>
         {children}

diff --git a/services/frontend/src/components/FeedPost.tsx b/services/frontend/src/components/FeedPost.tsx
@@ -63,12 +63,12 @@ const FeedPost = ({ post, hidePanel, hideAuthor }: { post: Post, hidePanel?: boo
 
   return (
     <Paper shadow='xl' radius='lg' p='lg' withBorder>
-      <Group spacing='xs'>
+      <Group gap='xs'>
         {panelElement}
         {authorElement}
       </Group>
       <Box component={Link} to={panelData ? `/panel/${panelData.name}/post/${post.id}` : '#'} style={{ textDecoration: 'none', color: 'inherit' }}>
-        <Text mt={3} weight={600} lineClamp={1}>{post.title}</Text>
+        <Text mt={3} fw={600} lineClamp={1}>{post.title}</Text>
         <Text size='sm' lineClamp={2}>{post.content}</Text>
         <Text size='xs' color='dimmed' mt={3}>Click to View</Text>
       </Box>

diff --git a/services/frontend/src/components/HomePostFeed.tsx b/services/frontend/src/components/HomePostFeed.tsx
@@ -9,10 +9,10 @@ function HomePostFeed() {
   if (isLoading) {
     return <SkeletonPostFeed />
   } else if (!data) {
-    return <Text align='center' color='red'>Failed to Load Posts</Text>
+    return <Text ta='center' color='red'>Failed to Load Posts</Text>
   } else if (!data.length) {
     // Check that there are posts.
-    return <Text align='center'>No Posts Found!</Text>
+    return <Text ta='center'>No Posts Found!</Text>
   }
 
   return (

diff --git a/services/frontend/src/components/LoadingBar.tsx b/services/frontend/src/components/LoadingBar.tsx
@@ -1,5 +1,6 @@
 import { Progress } from '@mantine/core'
 
-const LoadingBar = () => <Progress color='lime' radius='xs' size='sm' value={100} striped animate />
+// animate
+const LoadingBar = () => <Progress color='lime' radius='xs' size='sm' value={100} striped />
 
 export default LoadingBar
diff --git a/services/frontend/src/components/PagePost.tsx b/services/frontend/src/components/PagePost.tsx
@@ -133,14 +133,14 @@ const PagePostItem = ({ post, setPost }: { post: Post, setPost: React.Dispatch<P
       )}
 
       {modifying ? <ModifyPostForm post={post} setModifying={setModifying} setPost={setPost} /> : (
-        <Stack align='flex-start' mt={2} spacing={1}>
-          <Text weight={600}>{post.title}</Text>
+        <Stack align='flex-start' mt={2} gap={1}>
+          <Text fw={600}>{post.title}</Text>
           <Text size='sm'>{post.content}</Text>
           <Text size='xs' color='dimmed' mt={3}>Created {post.createdAt}</Text>
         </Stack>
       )}
 
-      {errorMsg && <Text color='red' align='center' size='xs' mt='md'>{'Error: ' + errorMsg}</Text>}
+      {errorMsg && <Text color='red' ta='center' size='xs' mt='md'>{'Error: ' + errorMsg}</Text>}
     </Paper>
   )
 }

diff --git a/services/frontend/src/components/PanelLayout.tsx b/services/frontend/src/components/PanelLayout.tsx
@@ -24,13 +24,13 @@ const PanelLayoutComponent = ({ panel, setPanel }: { panel: Panel, setPanel: Rea
     <>
       <Paper py={rem(50)} shadow='md' sx={{ borderBottom: '1px' }}>
         <Container>
-          <Group position='apart'>
+          <Group gap='apart'>
             <Box component={Link} to={`/panel/${panel.name}`} style={{ textDecoration: 'none' }}>
               <Text size='lg' color='black'>{panel.name}</Text>
               <Text size='sm' color='dimmed'>{panel.description}</Text>
             </Box>
 
-            <Group spacing='sm'>
+            <Group gap='sm'>
               {currentUser && <Button size='xs' variant='filled' color='teal' component={Link} to={`/panel/${panel.name}/posts/new`}>Create Post</Button>}
               {currentUser && currentUser.isAdmin && <Button size='xs' variant='outline' color='green' component={Link} to={`/panel/${panel.name}/settings`}>Manage Panel</Button>}
             </Group>

diff --git a/services/frontend/src/components/PanelPostFeed.tsx b/services/frontend/src/components/PanelPostFeed.tsx
@@ -10,10 +10,10 @@ function PanelPostFeed({ panel }: { panel: Panel }) {
   if (isLoading) {
     return <SkeletonPostFeed />
   } else if (!data) {
-    return <Text align='center'>Failed to Load Posts</Text>
+    return <Text ta='center'>Failed to Load Posts</Text>
   } else if (!data.length) {
     // Check that there are posts.
-    return <Text align='center'>No Posts Found!</Text>
+    return <Text ta='center'>No Posts Found!</Text>
   }
 
   return (

diff --git a/services/frontend/src/components/PostCommentsFeed.tsx b/services/frontend/src/components/PostCommentsFeed.tsx
@@ -13,7 +13,7 @@ function PostCommentsFeed({ post }: { post: Post }) {
       </Center>
     )
   } else if (!data) {
-    return <Text color='red' align='center'>Failed to Load Comments</Text>
+    return <Text color='red' ta='center'>Failed to Load Comments</Text>
   } else if (!data.length) {
     return null
   }

diff --git a/services/frontend/src/components/SkeletonFeedPost.tsx b/services/frontend/src/components/SkeletonFeedPost.tsx
@@ -2,11 +2,11 @@ import { Paper, Skeleton, Box, Stack, Group } from '@mantine/core'
 
 const SkeletonFeedPost = () => (
   <Paper shadow='xl' radius='lg' p='lg' withBorder>
-    <Group spacing='xs'>
+    <Group gap='xs'>
       <Skeleton height={8} mt={6} width='20%' radius='xl' />
       <Skeleton height={8} mt={6} width='20%' radius='xl' />
     </Group>
-    <Stack mt={2} spacing={1}>
+    <Stack mt={2} gap={1}>
       <Box>
         <Skeleton h='md' radius='xl' w='60%' />
         <Skeleton h='md' radius='xl' mt='sm' />

diff --git a/services/frontend/src/components/UserLayout.tsx b/services/frontend/src/components/UserLayout.tsx
@@ -61,7 +61,7 @@ function UserLayout() {
             <Paper w='100%'>
               <Box h='100%' pos='relative'>
                 <Center h='100%'>
-                  <Text weight={600} mr={3}>User:</Text>
+                  <Text fw={600} mr={3}>User:</Text>
                   <Text>{data.username}</Text>
                 </Center>
 

diff --git a/services/frontend/src/components/UserPostFeed.tsx b/services/frontend/src/components/UserPostFeed.tsx
@@ -10,10 +10,10 @@ function UserPostFeed({ user }: { user: User }) {
   if (isLoading) {
     return <SkeletonPostFeed />
   } else if (!data) {
-    return <Text align='center' color='red'>Failed to Load Posts</Text>
+    return <Text ta='center' color='red'>Failed to Load Posts</Text>
   } else if (!data.length) {
     // Check that there are posts.
-    return <Text align='center'>No Posts Found!</Text>
+    return <Text ta='center'>No Posts Found!</Text>
   }
 
   return (

diff --git a/services/frontend/src/pages/Error.tsx b/services/frontend/src/pages/Error.tsx
@@ -17,22 +17,22 @@ const ErrorPage = () => {
     <Center h='100%'>
       <Container>
         <Title
-          align='center'
-          weight={800}
-          sx={(theme) => ({
-            fontSize: rem(38),
-            [theme.fn.smallerThan('sm')]: {
-              fontSize: rem(32),
-            },
-          })}
+          ta='center'
+          fw={800}
+          // sx={(theme) => ({
+          //   fontSize: rem(38),
+          //   [theme.fn.smallerThan('sm')]: {
+          //     fontSize: rem(32),
+          //   },
+          // })}
         >
           {title}
         </Title>
-        <Text size='lg' color='dimmed' maw={rem(250)} align='center' my='xl'>
+        <Text size='lg' color='dimmed' maw={rem(250)} ta='center' my='xl'>
           {subTitle}
         </Text>
 
-        <Group position='center'>
+        <Group justify='center'>
           <Button component={Link} to='/' variant='subtle' size='md'>
             Back to Home
           </Button>

diff --git a/services/frontend/src/pages/ExplorePanels.tsx b/services/frontend/src/pages/ExplorePanels.tsx
@@ -17,12 +17,12 @@ const ExplorePanelsPage = () => {
       )}
       <Divider my='md' variant='dotted' />
 
-      <Stack spacing='sm' align='stretch'>
+      <Stack gap='sm' align='stretch'>
         <Paper shadow='xl' radius='md' p='md' withBorder component={Link} to='/panel/Panel'>
           <Group>
             <ThemeIcon color='teal' variant='light' size='xl'><IconMessages /></ThemeIcon>
             <Box>
-              <Text weight={600}>Panel</Text>
+              <Text fw={600}>Panel</Text>
               <Text>The first and therefore defacto primary panel.</Text>
               <Text color='dimmed' size='xs' mt={3}>Click to View</Text>
             </Box>
@@ -33,7 +33,7 @@ const ExplorePanelsPage = () => {
           <Group>
             <ThemeIcon color='red' variant='light' size='xl'><IconTableOff /></ThemeIcon>
             <Box>
-              <Text weight={600}>Note</Text>
+              <Text fw={600}>Note</Text>
               <Text>This page is exemplary as this feature is currently unimplemented.</Text>
               <Text color='dimmed' size='xs' mt={3}>Planned Functionality</Text>
             </Box>

diff --git a/services/frontend/src/pages/Home.tsx b/services/frontend/src/pages/Home.tsx
@@ -7,7 +7,7 @@ const Homepage = () => {
     <Container mt='xl'>
       <Title>Feed</Title>
       <Divider my='md' variant='dotted' />
-      <Stack my='lg' spacing='md'>
+      <Stack my='lg' gap='md'>
         <HomePostFeed />
       </Stack>
     </Container>

diff --git a/services/frontend/src/pages/NewPanel.tsx b/services/frontend/src/pages/NewPanel.tsx
@@ -46,11 +46,11 @@ const NewPanelPage = () => {
   return (
     <Center h='95%'>
       <Container>
-        <Title align='center' weight={900}>Create a Panel</Title>
+        <Title ta='center' fw={900}>Create a Panel</Title>
 
         <Paper withBorder shadow='md' radius='md' p={30} mt={30}>
           <form onSubmit={panelForm.onSubmit(submitPanelForm)}>
-            <Stack spacing='md'>
+            <Stack gap='md'>
               <TextInput 
                 label='Name'
                 placeholder='e.g. music, programming, football'
@@ -63,7 +63,7 @@ const NewPanelPage = () => {
                 {...panelForm.getInputProps('description')}
               />
 
-              { errorMsg && <Text color='red' align='center'>{'Error: ' + errorMsg}</Text> }
+              { errorMsg && <Text color='red' ta='center'>{'Error: ' + errorMsg}</Text> }
 
               <Button type='submit' variant='outline' color='teal' disabled={isLoading} fullWidth>Create Panel</Button>
             </Stack>

diff --git a/services/frontend/src/pages/NewPanelPost.tsx b/services/frontend/src/pages/NewPanelPost.tsx
@@ -49,7 +49,7 @@ const NewPanelPostPage = () => {
   return (
     <Paper shadow='md' radius='md' p='lg' withBorder>
       <form onSubmit={createPostForm.onSubmit(submitPost)}>
-        <Stack spacing='md'>
+        <Stack gap='md'>
           <TextInput 
             label='Title'
             placeholder='Post Title'
@@ -62,7 +62,7 @@ const NewPanelPostPage = () => {
             {...createPostForm.getInputProps('content')}
           />
 
-          { errorMsg && <Text color='red' align='center'>{'Error: ' + errorMsg}</Text> }
+          { errorMsg && <Text color='red' ta='center'>{'Error: ' + errorMsg}</Text> }
 
           <Button type='submit' variant='outline' color='teal' disabled={isLoading} fullWidth>
             Create Post

diff --git a/services/frontend/src/pages/Panel.tsx b/services/frontend/src/pages/Panel.tsx
@@ -8,7 +8,7 @@ function PanelPage() {
   const { panel } = useOutletContext<PanelContext>()
 
   return (
-    <Stack my='lg' spacing='md'>
+    <Stack my='lg' gap='md'>
       <PanelPostFeed panel={panel} />
     </Stack>
   )

diff --git a/services/frontend/src/pages/PanelPost.tsx b/services/frontend/src/pages/PanelPost.tsx
@@ -53,7 +53,7 @@ function PanelPostPage() {
     <Box mb='lg'>
       <PagePost post={data} />
       <Divider my='md' variant='none' />
-      <Stack spacing='sm'>
+      <Stack gap='sm'>
         { currentUser && <CreateComment post={data} addNewComment={addNewComment} /> }
         { newComments.length > 0 && <CommentsFeed comments={newComments} /> }
         <PostCommentsFeed post={data} />

diff --git a/services/frontend/src/pages/PanelSettings.tsx b/services/frontend/src/pages/PanelSettings.tsx
@@ -51,7 +51,7 @@ const UpdatePanelForm = ({
 
   return (
     <form onSubmit={panelForm.onSubmit(submitUpdatePanel)}>
-      <Stack spacing='md'>
+      <Stack gap='md'>
         <TextInput label='Name' {...panelForm.getInputProps('name')} />
         <Textarea label='Description' {...panelForm.getInputProps('description')} />
 
@@ -90,7 +90,7 @@ function PanelSettingsPage() {
   return (
     <Paper mt='md' radius='lg' shadow='md' p='lg' withBorder>
       <Center>
-        <Group spacing='sm'>
+        <Group gap='sm'>
           {modifying 
             ? <Button color='teal' onClick={() => { setModifying(false); setErrorMsg('') }}>Stop Modifying</Button>
             : <Button color='teal' onClick={() => setModifying(true)}>Modify Panel</Button>