added dashboard

src/components/layout/Navigation/Custom/util.ts

@@ -41,7 +41,7 @@ export const useCustomNavigate = () => {
         }
 
         if (typeof to === "number" && to == -1) {
-            navigate(user ? "/project" : "/")
+            navigate(user ? "/project" : "/", {})
             return
         }
 

src/main.tsx

@@ -3,13 +3,27 @@ import '@mantine/dates/styles.css';
 import '@mantine/tiptap/styles.css';
 import React from "react";
 import ReactDOM from "react-dom/client";
-import AppRoutes from "./AppRoutes.tsx";
 import {createTheme, DEFAULT_THEME, MantineProvider, mergeMantineTheme} from "@mantine/core";
 import {registerSW} from "virtual:pwa-register";
-import {PocketBaseProvider} from "./lib/pocketbase.tsx";
+import {PocketBaseProvider, usePB} from "./lib/pocketbase.tsx";
 import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
 import "./global.css"
 import {RecoilRoot} from "recoil";
+import {LoadingOverlay} from "@mantine/core";
+import {createBrowserRouter, createRoutesFromElements, Route, RouterProvider} from "react-router-dom";
+import {CustomNavigate} from "./components/layout/Navigation/Custom/CustomNavigate.tsx";
+import Navigation from "./components/layout/Navigation";
+import Home from "./routes/index";
+import Login from "./routes/login";
+import Register from "./routes/register";
+import Verification from "./routes/account/confirm/verification.tsx";
+import PasswordReset from "./routes/account/confirm/password-reset.tsx";
+import ConnectWithUser from "./components/ConnectWithUser.tsx";
+import Account from "./routes/account";
+import ProjectOverview from "./routes/project";
+import NewProject from "./routes/project/new";
+import Project from "./routes/project/:id";
+import NotFound from "./components/NotFound.tsx";
 
 const updateSW = registerSW({
     onNeedRefresh() {
@@ -31,6 +45,45 @@ const themeOverride = createTheme({
 
 const theme = mergeMantineTheme(DEFAULT_THEME, themeOverride);
 
+/**
+ * ProtectedRoutes component that redirects to /login if the user is not logged in
+ * and to the account verification page if the user is loggend in but not verified.
+ *
+ * If the user is logged in and verified, the Navigation component is rendered with an outlet.
+ */
+const ProtectedRoutes = () => {
+    const {user} = usePB()
+    if (user == null) {
+        return <CustomNavigate to={"/login"}/>
+    }
+    if (!user.verified) {
+        return <CustomNavigate to={"/account/confirm/verification"}/>
+    }
+    return <Navigation/>
+}
+
+// Create the router
+export const router = createBrowserRouter(
+    createRoutesFromElements(
+        <>
+            <Route index element={<Home/>}/>
+            <Route path="/login" element={<Login/>}/>
+            <Route path="/register" element={<Register/>}/>
+            <Route path="/account/confirm/verification/:token?" element={<Verification/>}/>
+            <Route path="/account/confirm/password-reset/:token?" element={<PasswordReset/>}/>
+            <Route path="/c/:username" element={<ConnectWithUser/>}/>
+            <Route element={<ProtectedRoutes/>}>
+                <Route path="/account/*" element={<Account/>}/>
+                <Route path="/project">
+                    <Route index element={<ProjectOverview/>}/>
+                    <Route path="new/*" element={<NewProject/>}/>
+                    <Route path=":projectId/*" element={<Project/>}/>
+                </Route>
+            </Route>
+            <Route path={"*"} element={<NotFound/>}/>
+        </>
+    )
+)
 
 export const queryClient = new QueryClient()
 
@@ -40,7 +93,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
             <QueryClientProvider client={queryClient}>
                 <PocketBaseProvider baseUrl={"https://backend.stroodle.me"}>
                     <MantineProvider theme={theme}>
-                        <AppRoutes/>
+                        <RouterProvider router={router} fallbackElement={<LoadingOverlay/>}/>
                     </MantineProvider>
                 </PocketBaseProvider>
             </QueryClientProvider>

src/routes/project/index.module.css

@@ -0,0 +1,36 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mantine-spacing-sm)
+}
+
+.content {
+    display: flex;
+    flex-direction: row;
+    gap: var(--mantine-spacing-xs);
+    flex-wrap: wrap;
+}
+
+.projectLink {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mantine-spacing-xs);
+    border-radius: var(--mantine-radius-sm);
+    padding: var(--mantine-radius-sm);
+
+    &:hover{
+        box-shadow: var(--mantine-shadow-sm);
+    }
+
+    align-items: center;
+
+    justify-content: center;
+
+    min-width: 10%;
+    min-height: 20%;
+}
+
+.projectName {
+    font-size: var(--mantine-font-size-lg);
+    font-weight: 600;
+}

src/routes/project/index.tsx

@@ -3,23 +3,55 @@ import {ProjectModel} from "../../lib/models.ts";
 import {usePB} from "../../lib/pocketbase.tsx";
 import Header from "../../components/layout/Header";
 
+import classes from './index.module.css';
+import ProjectIcon from "../../components/ProjectIcon.tsx";
+import {CustomLink} from "../../components/layout/Navigation/Custom/CustomLink.tsx";
+import {Loader} from "@mantine/core";
+
 export default function ProjectOverview() {
 
     const {pb} = usePB()
 
-    useQuery({
-        queryKey: ['projects'],
+    const query = useQuery({
+        queryKey: ['all', 'projects'],
         queryFn: async () => {
-            return await pb.collection('projects').getList<ProjectModel>(1, 100, {
-                expand: 'members'
-            })
+            return await pb.collection('projects').getFullList<ProjectModel>()
         }
     })
 
-    return <>
+    return <div className={classes.container}>
         <Header
             label={"Dashboard"}
             href={`/project`}
         />
-    </>
+
+        <div className={classes.content}>
+
+            {query.data?.map((project) => (
+
+                <CustomLink
+                    to={`/project/${project.id}`}
+                    key={project.id}
+                    className={classes.projectLink}
+                >
+
+                    <ProjectIcon project={project}/>
+
+                    <div className={classes.projectName}>
+                        {project.name}
+                    </div>
+
+                </CustomLink>
+
+            ))}
+
+            {query.isPending && <Loader size={"sm"} ml={"md"} mt={"md"}/>}
+
+            {query.data?.length === 0 &&
+                <div className={"center"}>
+                    Es wurden noch keine Projekte erstellt. Erstelle ein neues Projekt.
+                </div>
+            }
+        </div>
+    </div>
 }