fixed verification

src/components/layout/Navigation/ActionSearch/index.tsx

@@ -6,38 +6,19 @@ import {useState} from "react";
 import classes from './index.module.css';
 import {useParams} from "react-router-dom";
 import {usePB} from "../../../../lib/pocketbase.tsx";
-import {useQuery} from "@tanstack/react-query";
+import {useMutation, useQuery} from "@tanstack/react-query";
 import {ProjectModel, TaskModel} from "../../../../lib/models.ts";
 import {useCustomNavigate} from "../Custom/util.ts";
 import Html from '../../../Html/index.tsx';
 
-const newMsgAction = (msg?: string) => ({
-    id: 'newMsg',
-    description: <span className={classes.group}>
-        <Kbd size={"xs"}>{">"}</Kbd> {msg || "Nachricht"}
-    </span>,
-    label: 'Nachricht schreiben',
-    onClick: () => console.log('newMsg'),
-    leftSection: IconMessagePlus
-})
-
-const newTaskAction = (task?: string) => ({
-    id: 'newTask',
-    description: <span className={classes.group}>
-        <Kbd size={"xs"}>{"-"}</Kbd> {task || "Aufgabe"}
-    </span>,
-    label: 'Aufgabe erstellen',
-    onClick: () => console.log('newMsg'),
-    leftSection: IconSquarePlus,
-})
 
 export default function ActionSearch() {
 
     const [query, setQuery] = useState('')
 
     const {projectId} = useParams() as { projectId?: string }
 
-    const {pb} = usePB()
+    const {pb, user} = usePB()
     const navigate = useCustomNavigate()
 
     const parseMsg = {
@@ -72,7 +53,44 @@ export default function ActionSearch() {
         retry: false
     })
 
-    // todo create actions from search results
+    const sendMessagesMutation = useMutation({
+        mutationFn: async () => {
+            return await pb.collection('messages').create({
+                author: user!.id,
+                text: `<p>${parseMsg.data}</p>`,
+                project: projectId,
+            })
+        }
+    })
+
+    const createTaskMutation = useMutation({
+        mutationFn: async () => {
+            return await pb.collection('tasks').create({
+                description: `<p>${parseTask.data}</p>`,
+                project: projectId,
+            })
+        }
+    })
+
+    const newMsgAction = (msg?: string) => ({
+        id: 'newMsg',
+        description: <span className={classes.group}>
+        <Kbd size={"xs"}>{">"}</Kbd> {msg || "Nachricht"}
+    </span>,
+        label: 'Nachricht schreiben',
+        onClick: sendMessagesMutation.mutate,
+        leftSection: IconMessagePlus
+    })
+
+    const newTaskAction = (task?: string) => ({
+        id: 'newTask',
+        description: <span className={classes.group}>
+        <Kbd size={"xs"}>{"-"}</Kbd> {task || "Aufgabe"}
+    </span>,
+        label: 'Aufgabe erstellen',
+        onClick: createTaskMutation.mutate,
+        leftSection: IconSquarePlus,
+    })
 
     const actions = []
     if (projectId) {
@@ -96,7 +114,7 @@ export default function ActionSearch() {
     const items = actions
         .map((item) => (
             <Spotlight.Action
-                key={item.id} onClick={item.onClick}
+                key={item.id} onClick={() => item.onClick()}
                 className={classes.searchResultContainer}
             >
                 {<item.leftSection style={{width: rem(24), height: rem(24)}} stroke={1.5}/>}

src/routes/account/confirm/verification.tsx

@@ -11,16 +11,16 @@ export default function Verification() {
     const {token} = useParams()
     const {pb, refresh, user} = usePB()
 
-
     // query to verify the token automatically if it is present
     const verifyQuery = useQuery({
         queryKey: ['verify', token],
         queryFn: async () => {
             await pb.collection('users').confirmVerification(token || "")
             await refresh()
+            return true
         },
         retry: false,
-        enabled: !!token,
+        enabled: token !== undefined,
     })
 
     // mutation to resend the verification email
@@ -51,7 +51,7 @@ export default function Verification() {
         })}
     >
         {/*Display loading overlay is the query is loading*/}
-        <LoadingOverlay visible={verifyQuery.isPending}/>
+        <LoadingOverlay visible={verifyQuery.isPending && token !== undefined}/>
         <Box
             p={"lg"}
             style={(theme) => ({
@@ -65,7 +65,7 @@ export default function Verification() {
             })}
         >
             { /* case no token, prompt user to check email for link */
-                token === null && <>
+                token === undefined && <>
                     <Image maw={300} mx="auto" src="/man-waving.svg" alt="Man waving" mb={"xl"}/>
                     <Text
                         size="xl"

src/routes/project/index.tsx

@@ -0,0 +1,66 @@
+import {useQuery} from "@tanstack/react-query";
+import {ProjectModel, UserModel} from "../../lib/models.ts";
+import {usePB} from "../../lib/pocketbase.tsx";
+import Header from "../../components/layout/Header";
+import {CustomLink} from "../../components/layout/Navigation/Custom/CustomLink.tsx";
+import classes from "./:id/index.module.css";
+import ProjectIcon from "../../components/ProjectIcon.tsx";
+import {Avatar, ThemeIcon, Tooltip} from "@mantine/core/lib";
+import {IconPencil} from "@tabler/icons-react";
+import UserAvatar from "../../components/UserAvatar.tsx";
+
+export default function ProjectOverview() {
+
+    const {pb} = usePB()
+
+    const projectsQuery = useQuery({
+        queryKey: ['projects'],
+        queryFn: async () => {
+            return await pb.collection('projects').getList<ProjectModel>(1, 100, {
+                expand: 'members'
+            })
+        }
+    })
+
+    return <>
+         <Header
+                    label={projectQuery.data.name}
+                    href={`/project/${projectId}`}
+                    leftSection={
+                        <CustomLink replace to={"e/icon"}>
+                            <div className={classes.iconContainer}>
+                                <ProjectIcon
+                                    project={projectQuery.data}
+                                />
+                                <ThemeIcon
+                                    className={classes.iconEditBtn}
+                                    size={"xs"}
+                                    variant={"filled"}
+                                    color={"blue"}
+                                    radius={"xl"}
+                                >
+                                    <IconPencil/>
+                                </ThemeIcon>
+                            </div>
+                        </CustomLink>
+                    }
+                    rightSection={
+                        <Avatar.Group>
+                            {projectQuery.data.expand!.members!.slice(0, showNoOfMembers).map((member: UserModel) =>
+                                <Tooltip label={`@${member.username}`} key={member.id}>
+                                    <UserAvatar user={member} color={"blue"}/>
+                                </Tooltip>
+                            )}
+
+                            {projectQuery.data.expand!.members!.length > showNoOfMembers &&
+                                <Tooltip
+                                    label={`${projectQuery.data.expand!.members!.length - showNoOfMembers} weitere Teilnehmende`}>
+                                    <Avatar
+                                        color={"blue"}>+{projectQuery.data.expand!.members!.length - showNoOfMembers}</Avatar>
+                                </Tooltip>
+                            }
+                        </Avatar.Group>
+                    }
+                />
+    </>
+}

src/routes/register/index.tsx

@@ -118,6 +118,7 @@ export default function Register() {
                 flexDirection: "column",
                 alignItems: "center",
             })}
+            className={"scrollbar"}
         >
             <Image maw={200} mx="auto" src="/woman-waving.svg" alt="Man waving" mb={"xl"}/>