From 36a05ea37673294bea9108738b77455bb7a6a7d0 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@wilms.ninja>
Date: Thu, 18 Jul 2024 18:06:57 +0200
Subject: [PATCH 1/5] feat: Assignment Intelligence

---
 src/components/WithNavigation.tsx             |   4 +
 src/lang/de.json                              |   3 +-
 src/pages/learning/LearningAssignmentPage.tsx | 110 +++++++++++++++++
 src/pages/learning/LearningPage.tsx           | 116 ++++++++++++++++++
 src/pages/learning/LearningTopicPage.tsx      |  56 +++++++++
 src/routing/NavigatorLazy.tsx                 |  25 ++++
 6 files changed, 313 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/learning/LearningAssignmentPage.tsx
 create mode 100644 src/pages/learning/LearningPage.tsx
 create mode 100644 src/pages/learning/LearningTopicPage.tsx

diff --git a/src/components/WithNavigation.tsx b/src/components/WithNavigation.tsx
index 645c2e0e7..4d85e4fe5 100644
--- a/src/components/WithNavigation.tsx
+++ b/src/components/WithNavigation.tsx
@@ -79,6 +79,10 @@ const WithNavigation: React.FC<Props> = ({
             label: t('navigation.label.forPupils'),
             icon: ({ isActive }) => <LFKnowledgeIcon color={isActive ? 'white' : colors['primary']['900']} />,
         },
+        'learning': {
+            label: t('navigation.label.learning'),
+            icon: LFKnowledgeIcon
+        }
     };
 
     return (
diff --git a/src/lang/de.json b/src/lang/de.json
index 3853978c9..7f24a17e4 100644
--- a/src/lang/de.json
+++ b/src/lang/de.json
@@ -2057,7 +2057,8 @@
             "appointments": "Termine",
             "chat": "Chat",
             "forStudents": "Wissens-Center",
-            "forPupils": "Wissens-Center"
+            "forPupils": "Wissens-Center",
+            "learning": "Lernen"
         }
     },
     "screening": {
diff --git a/src/pages/learning/LearningAssignmentPage.tsx b/src/pages/learning/LearningAssignmentPage.tsx
new file mode 100644
index 000000000..db1cf2909
--- /dev/null
+++ b/src/pages/learning/LearningAssignmentPage.tsx
@@ -0,0 +1,110 @@
+import { useNavigate, useParams } from "react-router-dom";
+import WithNavigation from "../../components/WithNavigation";
+import { useQuery } from "@apollo/client";
+import CenterLoadingSpinner from "../../components/CenterLoadingSpinner";
+import { Button, HStack, Heading, Text, TextArea, VStack } from "native-base";
+import { useTranslation } from "react-i18next";
+import { Pressable } from "react-native";
+import HSection from "../../widgets/HSection";
+import { gql } from "../../gql";
+import { Learning_Note } from "../../gql/graphql";
+import useApollo from "../../hooks/useApollo";
+import { useState } from "react";
+
+type Note = Pick<Learning_Note, 'authorName' | 'type' | 'text'>;
+
+function NotesUI({ notes, assignmentId, refetch }: { notes: Note[], assignmentId: number, refetch: () => void }) {
+    const [text, setText] = useState('');
+    const { client } = useApollo();
+
+    async function ask() {
+        await client.mutate({
+            mutation: gql(`
+                mutation Ask($assignmentId: Int!, $text: String!) {
+                    learningNoteCreate(note: {
+                        assignmentId: $assignmentId
+                        type: question
+                        text: $text
+                    }) { id }
+                }
+            `),
+            variables: { text, assignmentId }
+        });
+
+        refetch();
+    }
+
+    async function addAnswer() {
+        await client.mutate({
+            mutation: gql(`
+                mutation AddAnswer($assignmentId: Int!, $text: String!) {
+                    learningNoteCreate(note: {
+                        assignmentId: $assignmentId
+                        type: answer
+                        text: $text
+                    }) { id }
+                }
+            `),
+            variables: { text, assignmentId }
+        });
+
+        refetch();
+    }
+
+    return <VStack>
+        {notes.map(note => <NoteUI note={note} />)}
+
+        <TextArea value={text} onChangeText={setText} autoCompleteType={""} />
+        <HStack space={'10px'}>
+            <Button onPress={ask}>Frage stellen</Button>
+            <Button onPress={addAnswer}>Ich habs!</Button>
+        </HStack>
+    </VStack>
+}
+
+
+function NoteUI({ note }: { note: Note }) {
+    const color = {
+        answer: 'lightgreen',
+        correct_answer: 'green',
+        wrong_answer: 'lightred',
+        question: 'lightblue',
+        comment: 'white',
+        task: 'lightorange'
+    }[note.type];
+
+    return <HStack margin='5px' padding={'10px'} style={{ backgroundColor: color }} borderRadius='5px'>
+        <Text paddingRight='5px'>{note.authorName}: </Text>
+        <Text>{note.text}</Text>
+    </HStack>
+}
+
+export function LearningAssignmentPupilPage() {
+    const { id: _assignmentID } = useParams();
+    const assignmentID = parseInt(_assignmentID!, 10);
+
+    const navigate = useNavigate();
+
+    const { loading, data, refetch } = useQuery(gql(`
+        query GetAssignment($id: Int!) {
+            learningAssignment(id: $id) {
+                task
+                
+                notes {
+                    id
+                    type
+                    authorName
+                    text
+                }
+            }
+        }
+    `), { variables: { id: assignmentID }, pollInterval: 1000 });
+
+    return <WithNavigation showBack>
+        {loading && <CenterLoadingSpinner />}
+        {!loading && <>
+            <Heading>{data?.learningAssignment.task}</Heading>
+            {data && <NotesUI refetch={refetch} assignmentId={assignmentID} notes={data.learningAssignment.notes} />}
+        </>}
+    </WithNavigation>
+}
\ No newline at end of file
diff --git a/src/pages/learning/LearningPage.tsx b/src/pages/learning/LearningPage.tsx
new file mode 100644
index 000000000..a897f839c
--- /dev/null
+++ b/src/pages/learning/LearningPage.tsx
@@ -0,0 +1,116 @@
+import { useQuery } from "@apollo/client";
+import CenterLoadingSpinner from "../../components/CenterLoadingSpinner";
+import WithNavigation from "../../components/WithNavigation";
+import { gql } from "../../gql";
+import { Button, Column, FormControl, Heading, Input, Modal, Pressable, Row, Text, VStack } from "native-base";
+import HSection from "../../widgets/HSection";
+import Card from "../../components/Card";
+import { Course_Subject_Enum, Match, Subject } from "../../gql/graphql";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import SubjectList from "../../widgets/SubjectList";
+import { SubjectSelector } from "../../widgets/SubjectSelector";
+import useApollo from "../../hooks/useApollo";
+
+function LearningTopicCard({ subject, title, onPress }: { title: string, subject?: Course_Subject_Enum, onPress: () => void }) {
+    const { t } = useTranslation();
+
+    return (
+        <Pressable onPress={onPress}>
+            <VStack width="288px" height="288px" padding="24px" backgroundColor="primary.900" borderRadius="8px" justifyContent="space-between">
+                <VStack>
+                    <Text fontSize={12} color="white" noOfLines={1}>
+                        {subject && t(`lernfair.subjects.${subject}` as unknown as TemplateStringsArray)}
+                    </Text>
+                    <Heading color="white" noOfLines={1}>
+                        {title}
+                    </Heading>
+                </VStack>
+            </VStack>
+        </Pressable>
+    )
+}
+
+type MatchInfo = { id: number, subjectsFormatted: { name?: string | null }[], student: { firstname?: string | null }};
+function CreateTopicModal({ onClose, match }: { onClose: () => void, match: MatchInfo }) {
+    const [topic, setTopic] = useState('');
+    const [subject, setSubject] = useState<Course_Subject_Enum>();
+    const { client } = useApollo();
+    async function createTopic() {
+        await client.mutate({
+            mutation: gql(`
+            mutation CreateTopic($matchId: Int!, $name: String!, $subject: String!) {
+                learningTopicCreate(matchId: $matchId, name: $name, subject: $subject) { id }
+            }
+            `),
+            variables: {
+                matchId: match.id,
+                name: topic,
+                subject: subject as string
+            }
+         });
+
+        onClose();
+    }
+    return <Modal isOpen onClose={onClose}>
+        <Modal.Content height={"500px"} maxHeight="unset" width={"500px"} maxWidth="unset" padding={6} marginY={0} borderRadius={"5px"}>
+                <Modal.CloseButton />
+                <VStack height="100%" space={6}>
+                    <Heading>Neues Thema mit {match.student.firstname}</Heading>
+                    <FormControl>
+                        <FormControl.Label>Thema</FormControl.Label>
+                        <Input value={topic} onChangeText={setTopic} />
+
+                        <FormControl.Label>Fach</FormControl.Label>
+                        <SubjectSelector 
+                            selectable={match.subjectsFormatted.map(it => it.name!)}
+                            variant="selection"
+                            removeSubject={() => {}}
+                            addSubject={it => setSubject(it as Course_Subject_Enum)}
+                            subjects={subject ? [subject] : []}
+                        />
+
+                        <Button disabled={!topic || !subject} onPress={createTopic}>Thema erstellen</Button>
+                    </FormControl>
+                </VStack>
+        </Modal.Content>         
+    </Modal>
+}
+
+export function LearningPupilPage() {
+    const { loading, data, refetch } = useQuery(gql(`
+        query Learning { 
+            me { 
+                pupil { 
+                    matches { 
+                        student { firstname }
+                        subjectsFormatted { name }
+                        id
+
+                        topics {
+                            id
+                            name
+                            subject
+                        }
+                    }
+                }
+             }
+        }
+    `));
+
+    const [createTopicFor, setCreateTopicFor] = useState<MatchInfo>();
+    const navigate = useNavigate();
+
+    return <WithNavigation>
+        <Column padding={'10px'}>
+        {loading && <CenterLoadingSpinner />}
+        {!loading && data?.me.pupil?.matches.map(match => <HSection title={`Lerne mit ${match.student.firstname}`}>
+            {match.topics.map(topic => <LearningTopicCard onPress={() => navigate(`/learning/topic/${topic.id}`)} title={topic.name} subject={topic.subject} />)}
+            <LearningTopicCard onPress={() => setCreateTopicFor(match)} title="Neues Thema"/>
+        </HSection>)}
+        </Column>
+
+        {createTopicFor && <CreateTopicModal match={createTopicFor} onClose={() => { setCreateTopicFor(undefined); refetch(); }} />}
+    </WithNavigation>
+}
\ No newline at end of file
diff --git a/src/pages/learning/LearningTopicPage.tsx b/src/pages/learning/LearningTopicPage.tsx
new file mode 100644
index 000000000..2dc084823
--- /dev/null
+++ b/src/pages/learning/LearningTopicPage.tsx
@@ -0,0 +1,56 @@
+import { useNavigate, useParams } from "react-router-dom";
+import WithNavigation from "../../components/WithNavigation";
+import { useQuery } from "@apollo/client";
+import CenterLoadingSpinner from "../../components/CenterLoadingSpinner";
+import { Heading, VStack } from "native-base";
+import { useTranslation } from "react-i18next";
+import { Pressable } from "react-native";
+import HSection from "../../widgets/HSection";
+import { gql } from "../../gql";
+
+function LearningAssignmentCard({ task, onPress }: { task: string, onPress: () => void }) {
+    return (
+        <Pressable onPress={onPress}>
+            <VStack width="288px" height="288px" padding="24px" backgroundColor="primary.900" borderRadius="8px" justifyContent="space-between">
+                <VStack>
+                    <Heading color="white" noOfLines={1}>
+                        {task}
+                    </Heading>
+                </VStack>
+            </VStack>
+        </Pressable>
+    )
+}
+
+export function LearningTopicPupilPage() {
+    const { id: _topicID } = useParams();
+    const topicID = parseInt(_topicID!, 10);
+
+    const navigate = useNavigate();
+
+    const { loading, data } = useQuery(gql(`
+        query GetTopic($id: Int!) {
+            learningTopic(id: $id) {
+                name
+                subject
+
+                assignments {
+                    id
+                    task
+                }
+            }
+        }
+    `), { variables: { id: topicID }});
+
+    return <WithNavigation showBack>
+        {loading && <CenterLoadingSpinner />}
+        {!loading && <>
+            <HSection title={`${data?.learningTopic.name}`}>
+                {data?.learningTopic.assignments.map(assignment => 
+                    <LearningAssignmentCard task={assignment.task} onPress={() => navigate(`/learning/assignment/${assignment.id}`)} />)}
+            </HSection>
+
+            
+        </>}
+    </WithNavigation>
+}
\ No newline at end of file
diff --git a/src/routing/NavigatorLazy.tsx b/src/routing/NavigatorLazy.tsx
index 1c0e7efd9..bc91aa865 100644
--- a/src/routing/NavigatorLazy.tsx
+++ b/src/routing/NavigatorLazy.tsx
@@ -73,6 +73,9 @@ import { SystemNotifications } from '../components/notifications/preferences/Sys
 import { MarketingNotifications } from '../components/notifications/preferences/MarketingNotifications';
 import ForStudents from '../pages/ForStudents';
 import ForPupils from '../pages/ForPupils';
+import { LearningPupilPage } from '../pages/learning/LearningPage';
+import { LearningTopicPupilPage } from '../pages/learning/LearningTopicPage';
+import { LearningAssignmentPupilPage } from '../pages/learning/LearningAssignmentPage';
 
 // Zoom loads a lot of large CSS and JS (and adds it inline, which breaks Datadog Session Replay),
 // so we try to load that as late as possible (when a meeting is opened)
@@ -441,6 +444,28 @@ export default function NavigatorLazy() {
                     </RequireAuth>
                 }
             />
+            <Route
+                path="/learning"
+                element={
+                    <RequireAuth>
+                        <SwitchUserType pupilComponent={<LearningPupilPage />} />
+                    </RequireAuth>
+                } />
+            <Route
+                path="/learning/topic/:id"
+                element={
+                    <RequireAuth>
+                        <SwitchUserType pupilComponent={<LearningTopicPupilPage />} />
+                    </RequireAuth>
+                } />
+            <Route
+                path="/learning/assignment/:id"
+                element={
+                    <RequireAuth>
+                        <SwitchUserType pupilComponent={<LearningAssignmentPupilPage />} />
+                    </RequireAuth>
+                } />
+            
 
             <Route path="/verify-email" element={<VerifyEmail />} />
             <Route path="/verify-email-change" element={<VerifyEmailChange />} />

From 34879d7d9851e21505eb5d61e0ab00d87403db3a Mon Sep 17 00:00:00 2001
From: Jonas <jonas@wilms.ninja>
Date: Fri, 19 Jul 2024 16:37:04 +0200
Subject: [PATCH 2/5] feat: Various

---
 src/pages/learning/LearningAssignmentPage.tsx |  8 +-
 src/pages/learning/LearningPage.tsx           | 25 ++++--
 src/pages/learning/LearningTopicPage.tsx      | 89 ++++++++++++++++---
 3 files changed, 103 insertions(+), 19 deletions(-)

diff --git a/src/pages/learning/LearningAssignmentPage.tsx b/src/pages/learning/LearningAssignmentPage.tsx
index db1cf2909..20437e6ce 100644
--- a/src/pages/learning/LearningAssignmentPage.tsx
+++ b/src/pages/learning/LearningAssignmentPage.tsx
@@ -31,6 +31,7 @@ function NotesUI({ notes, assignmentId, refetch }: { notes: Note[], assignmentId
             variables: { text, assignmentId }
         });
 
+        setText('');
         refetch();
     }
 
@@ -49,6 +50,7 @@ function NotesUI({ notes, assignmentId, refetch }: { notes: Note[], assignmentId
         });
 
         refetch();
+        setText('');
     }
 
     return <VStack>
@@ -65,9 +67,9 @@ function NotesUI({ notes, assignmentId, refetch }: { notes: Note[], assignmentId
 
 function NoteUI({ note }: { note: Note }) {
     const color = {
-        answer: 'lightgreen',
-        correct_answer: 'green',
-        wrong_answer: 'lightred',
+        answer: 'white',
+        correct_answer: '#98FF98',
+        wrong_answer: '#FFCCCB',
         question: 'lightblue',
         comment: 'white',
         task: 'lightorange'
diff --git a/src/pages/learning/LearningPage.tsx b/src/pages/learning/LearningPage.tsx
index a897f839c..68024e598 100644
--- a/src/pages/learning/LearningPage.tsx
+++ b/src/pages/learning/LearningPage.tsx
@@ -2,7 +2,7 @@ import { useQuery } from "@apollo/client";
 import CenterLoadingSpinner from "../../components/CenterLoadingSpinner";
 import WithNavigation from "../../components/WithNavigation";
 import { gql } from "../../gql";
-import { Button, Column, FormControl, Heading, Input, Modal, Pressable, Row, Text, VStack } from "native-base";
+import { Button, Column, FormControl, HStack, Heading, Input, Modal, Pressable, Row, Text, VStack } from "native-base";
 import HSection from "../../widgets/HSection";
 import Card from "../../components/Card";
 import { Course_Subject_Enum, Match, Subject } from "../../gql/graphql";
@@ -13,7 +13,7 @@ import SubjectList from "../../widgets/SubjectList";
 import { SubjectSelector } from "../../widgets/SubjectSelector";
 import useApollo from "../../hooks/useApollo";
 
-function LearningTopicCard({ subject, title, onPress }: { title: string, subject?: Course_Subject_Enum, onPress: () => void }) {
+function LearningTopicCard({ subject, title, onPress, assignments }: { title: string, subject?: Course_Subject_Enum, onPress: () => void, assignments?: { open: number, finished: number } }) {
     const { t } = useTranslation();
 
     return (
@@ -26,6 +26,12 @@ function LearningTopicCard({ subject, title, onPress }: { title: string, subject
                     <Heading color="white" noOfLines={1}>
                         {title}
                     </Heading>
+                    {assignments && <VStack paddingTop="20px">
+                        <Text color="white">
+                            {assignments.open} offene Aufgaben
+                        </Text>
+                        <Text color="white">{assignments.finished} erledigte Aufgaben</Text>
+                    </VStack>}
                 </VStack>
             </VStack>
         </Pressable>
@@ -92,6 +98,8 @@ export function LearningPupilPage() {
                             id
                             name
                             subject
+                            openAssignmentsCount
+                            finishedAssignmentsCount
                         }
                     }
                 }
@@ -105,10 +113,15 @@ export function LearningPupilPage() {
     return <WithNavigation>
         <Column padding={'10px'}>
         {loading && <CenterLoadingSpinner />}
-        {!loading && data?.me.pupil?.matches.map(match => <HSection title={`Lerne mit ${match.student.firstname}`}>
-            {match.topics.map(topic => <LearningTopicCard onPress={() => navigate(`/learning/topic/${topic.id}`)} title={topic.name} subject={topic.subject} />)}
-            <LearningTopicCard onPress={() => setCreateTopicFor(match)} title="Neues Thema"/>
-        </HSection>)}
+        {!loading && data?.me.pupil?.matches.map(match => <>
+            <HSection title={`Lerne mit ${match.student.firstname}`}>
+                {match.topics.map(topic => <LearningTopicCard onPress={() => navigate(`/learning/topic/${topic.id}`)} title={topic.name} subject={topic.subject} assignments={{ finished: topic.finishedAssignmentsCount, open: topic.openAssignmentsCount }}/>)}
+            </HSection>
+            <HStack>
+                <Button variant="outline" onPress={() => setCreateTopicFor(match)}>Neues Thema</Button> 
+            </HStack>
+        </>)}
+        
         </Column>
 
         {createTopicFor && <CreateTopicModal match={createTopicFor} onClose={() => { setCreateTopicFor(undefined); refetch(); }} />}
diff --git a/src/pages/learning/LearningTopicPage.tsx b/src/pages/learning/LearningTopicPage.tsx
index 2dc084823..3d8746d1b 100644
--- a/src/pages/learning/LearningTopicPage.tsx
+++ b/src/pages/learning/LearningTopicPage.tsx
@@ -2,41 +2,108 @@ import { useNavigate, useParams } from "react-router-dom";
 import WithNavigation from "../../components/WithNavigation";
 import { useQuery } from "@apollo/client";
 import CenterLoadingSpinner from "../../components/CenterLoadingSpinner";
-import { Heading, VStack } from "native-base";
+import { Button, CheckIcon, Circle, FormControl, HStack, Heading, Input, Modal, QuestionIcon, TextArea, VStack } from "native-base";
 import { useTranslation } from "react-i18next";
 import { Pressable } from "react-native";
 import HSection from "../../widgets/HSection";
 import { gql } from "../../gql";
+import { useState } from "react";
+import useApollo from "../../hooks/useApollo";
+import { Learning_Topic } from "../../gql/graphql";
 
-function LearningAssignmentCard({ task, onPress }: { task: string, onPress: () => void }) {
+
+function LearningAssignmentCard({ task, done, onPress }: { task: string, onPress: () => void, done?: boolean }) {
     return (
         <Pressable onPress={onPress}>
             <VStack width="288px" height="288px" padding="24px" backgroundColor="primary.900" borderRadius="8px" justifyContent="space-between">
-                <VStack>
-                    <Heading color="white" noOfLines={1}>
+                    <Circle size={'lg'} background="lightText">
+                        {done ? <CheckIcon color="primary.900" size="64px" /> : <QuestionIcon color="primary.900" size="64px" />}
+                    </Circle><Heading color="white">
                         {task}
                     </Heading>
-                </VStack>
             </VStack>
         </Pressable>
     )
 }
 
+type TopicInfo = Pick<Learning_Topic, 'id' | 'name' | 'subject'>;
+
+function CreateAssignmentModal({ onClose, topic }: { onClose: () => void, topic: TopicInfo }) {
+    const [task, setTask] = useState("");
+
+    const { client } = useApollo();
+
+    async function createAssignment() {
+        await client.mutate({
+            mutation: gql(`
+            mutation CreateAssignment($topicId: Int!, $task: String!) {
+                learningAssignmentCreate(topicId: $topicId, task: $task) { id }
+            }
+            `),
+            variables: {
+                topicId: topic.id,
+                task
+            }
+         });
+
+        onClose();
+    }
+
+    async function proposeAssignment() {
+        setTask("...");
+
+        const proposal = await client.mutate({
+            mutation: gql(`
+            mutation ProposeAssignment($topicId: Int!) {
+                learningAssignmentPropose(topicId: $topicId)
+            }
+            `),
+            variables: {
+                topicId: topic.id
+            }
+         });
+
+        setTask(proposal.data!.learningAssignmentPropose);
+    }
+
+    return <Modal isOpen onClose={onClose}>
+        <Modal.Content height={"800px"} maxHeight="unset" width={"800px"} maxWidth="unset" padding={6} marginY={0} borderRadius={"5px"}>
+                <Modal.CloseButton />
+                <VStack height="100%" space={6}>
+                    <Heading>Neue Aufgabe für {topic.subject} / {topic.name}</Heading>
+                    <FormControl>
+                        <TextArea minHeight="400px" autoCompleteType="" value={task} onChangeText={setTask} />
+
+                        <VStack>
+                            <Button variant="outline" onPress={proposeAssignment}>Vorschlag generieren</Button>
+                            <Button disabled={!task} onPress={createAssignment}>Aufgabe erstellen</Button>
+                        </VStack>
+                        
+                    </FormControl>
+                </VStack>
+        </Modal.Content>         
+    </Modal>
+}
+
 export function LearningTopicPupilPage() {
     const { id: _topicID } = useParams();
     const topicID = parseInt(_topicID!, 10);
 
+    const [newAssignmentOpen, setNewAssignmentOpen] = useState(false);
+
     const navigate = useNavigate();
 
-    const { loading, data } = useQuery(gql(`
+    const { loading, data, refetch } = useQuery(gql(`
         query GetTopic($id: Int!) {
             learningTopic(id: $id) {
+                id
                 name
                 subject
 
                 assignments {
                     id
                     task
+                    status
                 }
             }
         }
@@ -45,12 +112,14 @@ export function LearningTopicPupilPage() {
     return <WithNavigation showBack>
         {loading && <CenterLoadingSpinner />}
         {!loading && <>
-            <HSection title={`${data?.learningTopic.name}`}>
+            <HSection title={`${data?.learningTopic.subject} / ${data?.learningTopic.name}`}>
                 {data?.learningTopic.assignments.map(assignment => 
-                    <LearningAssignmentCard task={assignment.task} onPress={() => navigate(`/learning/assignment/${assignment.id}`)} />)}
+                    <LearningAssignmentCard done={assignment.status === "done"} task={assignment.task} onPress={() => navigate(`/learning/assignment/${assignment.id}`)} />)}
             </HSection>
-
-            
+            <HStack>
+                <Button variant="outline" onPress={() => setNewAssignmentOpen(true)}>Neue Aufgabe</Button> 
+            </HStack>
         </>}
+        {newAssignmentOpen && <CreateAssignmentModal onClose={() => { setNewAssignmentOpen(false); refetch(); }} topic={data?.learningTopic!} />}
     </WithNavigation>
 }
\ No newline at end of file

From 825376f2c1933027bdd2d696633e1982110ecf02 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@wilms.ninja>
Date: Sat, 20 Jul 2024 17:19:26 +0200
Subject: [PATCH 3/5] feat: Various

---
 src/pages/learning/LearningAssignmentPage.tsx | 50 ++++++-------------
 src/pages/learning/LearningPage.tsx           |  2 +-
 src/pages/learning/LearningTopicPage.tsx      |  2 +-
 3 files changed, 18 insertions(+), 36 deletions(-)

diff --git a/src/pages/learning/LearningAssignmentPage.tsx b/src/pages/learning/LearningAssignmentPage.tsx
index 20437e6ce..08094912a 100644
--- a/src/pages/learning/LearningAssignmentPage.tsx
+++ b/src/pages/learning/LearningAssignmentPage.tsx
@@ -1,6 +1,6 @@
 import { useNavigate, useParams } from "react-router-dom";
 import WithNavigation from "../../components/WithNavigation";
-import { useQuery } from "@apollo/client";
+import { useMutation, useQuery } from "@apollo/client";
 import CenterLoadingSpinner from "../../components/CenterLoadingSpinner";
 import { Button, HStack, Heading, Text, TextArea, VStack } from "native-base";
 import { useTranslation } from "react-i18next";
@@ -17,40 +17,23 @@ function NotesUI({ notes, assignmentId, refetch }: { notes: Note[], assignmentId
     const [text, setText] = useState('');
     const { client } = useApollo();
 
-    async function ask() {
-        await client.mutate({
-            mutation: gql(`
-                mutation Ask($assignmentId: Int!, $text: String!) {
-                    learningNoteCreate(note: {
-                        assignmentId: $assignmentId
-                        type: question
-                        text: $text
-                    }) { id }
-                }
-            `),
-            variables: { text, assignmentId }
-        });
-
-        setText('');
-        refetch();
-    }
+    const [ask, { loading, }] = useMutation(
+        gql(`
+        mutation Ask($assignmentId: Int!, $text: String!) {
+            learningNoteCreate(note: {
+                assignmentId: $assignmentId
+                type: comment
+                text: $text
+            }) { id }
+        }
+    `)
+    );
 
-    async function addAnswer() {
-        await client.mutate({
-            mutation: gql(`
-                mutation AddAnswer($assignmentId: Int!, $text: String!) {
-                    learningNoteCreate(note: {
-                        assignmentId: $assignmentId
-                        type: answer
-                        text: $text
-                    }) { id }
-                }
-            `),
-            variables: { text, assignmentId }
-        });
+    async function send() {
+        await ask({ variables: { text, assignmentId } });
 
-        refetch();
         setText('');
+        refetch();
     }
 
     return <VStack>
@@ -58,8 +41,7 @@ function NotesUI({ notes, assignmentId, refetch }: { notes: Note[], assignmentId
 
         <TextArea value={text} onChangeText={setText} autoCompleteType={""} />
         <HStack space={'10px'}>
-            <Button onPress={ask}>Frage stellen</Button>
-            <Button onPress={addAnswer}>Ich habs!</Button>
+            <Button disabled={loading} onPress={send}>Senden</Button>
         </HStack>
     </VStack>
 }
diff --git a/src/pages/learning/LearningPage.tsx b/src/pages/learning/LearningPage.tsx
index 68024e598..e1cbae8f0 100644
--- a/src/pages/learning/LearningPage.tsx
+++ b/src/pages/learning/LearningPage.tsx
@@ -60,7 +60,7 @@ function CreateTopicModal({ onClose, match }: { onClose: () => void, match: Matc
         onClose();
     }
     return <Modal isOpen onClose={onClose}>
-        <Modal.Content height={"500px"} maxHeight="unset" width={"500px"} maxWidth="unset" padding={6} marginY={0} borderRadius={"5px"}>
+        <Modal.Content maxW={"500px"} padding={6} marginY={0} borderRadius={"5px"}>
                 <Modal.CloseButton />
                 <VStack height="100%" space={6}>
                     <Heading>Neues Thema mit {match.student.firstname}</Heading>
diff --git a/src/pages/learning/LearningTopicPage.tsx b/src/pages/learning/LearningTopicPage.tsx
index 3d8746d1b..ecccc9f7f 100644
--- a/src/pages/learning/LearningTopicPage.tsx
+++ b/src/pages/learning/LearningTopicPage.tsx
@@ -67,7 +67,7 @@ function CreateAssignmentModal({ onClose, topic }: { onClose: () => void, topic:
     }
 
     return <Modal isOpen onClose={onClose}>
-        <Modal.Content height={"800px"} maxHeight="unset" width={"800px"} maxWidth="unset" padding={6} marginY={0} borderRadius={"5px"}>
+        <Modal.Content maxW={"800px"} padding={6} marginY={0} borderRadius={"5px"} overflowY="auto">
                 <Modal.CloseButton />
                 <VStack height="100%" space={6}>
                     <Heading>Neue Aufgabe für {topic.subject} / {topic.name}</Heading>

From c309ad2978a11fef7d943dcf1d298af74d657340 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@wilms.ninja>
Date: Mon, 22 Jul 2024 14:26:39 +0200
Subject: [PATCH 4/5] Various cleanups

---
 src/components/WithNavigation.tsx             |  4 -
 src/lang/de.json                              |  3 +-
 src/modals/learning/CreateAssignmentModal.tsx | 64 ++++++++++++++
 src/modals/learning/CreateTopicModal.tsx      | 53 +++++++++++
 src/pages/learning/LearningAssignmentPage.tsx | 64 +-------------
 src/pages/learning/LearningPage.tsx           | 84 +-----------------
 src/pages/learning/LearningTopicPage.tsx      | 87 ++-----------------
 .../learning/LearningAssignmentCard.tsx       | 21 +++++
 src/widgets/learning/LearningNoteList.tsx     | 57 ++++++++++++
 src/widgets/learning/LearningTopicCard.tsx    | 32 +++++++
 10 files changed, 241 insertions(+), 228 deletions(-)
 create mode 100644 src/modals/learning/CreateAssignmentModal.tsx
 create mode 100644 src/modals/learning/CreateTopicModal.tsx
 create mode 100644 src/widgets/learning/LearningAssignmentCard.tsx
 create mode 100644 src/widgets/learning/LearningNoteList.tsx
 create mode 100644 src/widgets/learning/LearningTopicCard.tsx

diff --git a/src/components/WithNavigation.tsx b/src/components/WithNavigation.tsx
index 4d85e4fe5..645c2e0e7 100644
--- a/src/components/WithNavigation.tsx
+++ b/src/components/WithNavigation.tsx
@@ -79,10 +79,6 @@ const WithNavigation: React.FC<Props> = ({
             label: t('navigation.label.forPupils'),
             icon: ({ isActive }) => <LFKnowledgeIcon color={isActive ? 'white' : colors['primary']['900']} />,
         },
-        'learning': {
-            label: t('navigation.label.learning'),
-            icon: LFKnowledgeIcon
-        }
     };
 
     return (
diff --git a/src/lang/de.json b/src/lang/de.json
index 7f24a17e4..3853978c9 100644
--- a/src/lang/de.json
+++ b/src/lang/de.json
@@ -2057,8 +2057,7 @@
             "appointments": "Termine",
             "chat": "Chat",
             "forStudents": "Wissens-Center",
-            "forPupils": "Wissens-Center",
-            "learning": "Lernen"
+            "forPupils": "Wissens-Center"
         }
     },
     "screening": {
diff --git a/src/modals/learning/CreateAssignmentModal.tsx b/src/modals/learning/CreateAssignmentModal.tsx
new file mode 100644
index 000000000..850e20463
--- /dev/null
+++ b/src/modals/learning/CreateAssignmentModal.tsx
@@ -0,0 +1,64 @@
+import { gql } from "@apollo/client";
+import { VStack, Heading, FormControl, TextArea, Modal, Button } from "native-base";
+import { useState } from "react";
+import { Learning_Topic } from "../../gql/graphql";
+import useApollo from "../../hooks/useApollo";
+
+type TopicInfo = Pick<Learning_Topic, 'id' | 'name' | 'subject'>;
+
+export function CreateAssignmentModal({ onClose, topic }: { onClose: () => void, topic: TopicInfo }) {
+    const [task, setTask] = useState("");
+
+    const { client } = useApollo();
+
+    async function createAssignment() {
+        await client.mutate({
+            mutation: gql(`
+            mutation CreateAssignment($topicId: Int!, $task: String!) {
+                learningAssignmentCreate(topicId: $topicId, task: $task) { id }
+            }
+            `),
+            variables: {
+                topicId: topic.id,
+                task
+            }
+         });
+
+        onClose();
+    }
+
+    async function proposeAssignment() {
+        setTask("...");
+
+        const proposal = await client.mutate({
+            mutation: gql(`
+            mutation ProposeAssignment($topicId: Int!) {
+                learningAssignmentPropose(topicId: $topicId)
+            }
+            `),
+            variables: {
+                topicId: topic.id
+            }
+         });
+
+        setTask(proposal.data!.learningAssignmentPropose);
+    }
+
+    return <Modal isOpen onClose={onClose}>
+        <Modal.Content maxW={"800px"} padding={6} marginY={0} borderRadius={"5px"} overflowY="auto">
+                <Modal.CloseButton />
+                <VStack height="100%" space={6}>
+                    <Heading>Neue Aufgabe für {topic.subject} / {topic.name}</Heading>
+                    <FormControl>
+                        <TextArea minHeight="400px" autoCompleteType="" value={task} onChangeText={setTask} />
+
+                        <VStack>
+                            <Button variant="outline" onPress={proposeAssignment}>Vorschlag generieren</Button>
+                            <Button disabled={!task} onPress={createAssignment}>Aufgabe erstellen</Button>
+                        </VStack>
+                        
+                    </FormControl>
+                </VStack>
+        </Modal.Content>         
+    </Modal>
+}
diff --git a/src/modals/learning/CreateTopicModal.tsx b/src/modals/learning/CreateTopicModal.tsx
new file mode 100644
index 000000000..d4020b3f2
--- /dev/null
+++ b/src/modals/learning/CreateTopicModal.tsx
@@ -0,0 +1,53 @@
+import { gql } from "@apollo/client";
+import { VStack, Heading, FormControl, Input, Modal, Button } from "native-base";
+import { useState } from "react";
+import { Course_Subject_Enum } from "../../gql/graphql";
+import useApollo from "../../hooks/useApollo";
+import { SubjectSelector } from "../../widgets/SubjectSelector";
+
+export type MatchInfo = { id: number, subjectsFormatted: { name?: string | null }[], student: { firstname?: string | null }};
+
+export function CreateTopicModal({ onClose, match }: { onClose: () => void, match: MatchInfo }) {
+    const [topic, setTopic] = useState('');
+    const [subject, setSubject] = useState<Course_Subject_Enum>();
+    const { client } = useApollo();
+    async function createTopic() {
+        await client.mutate({
+            mutation: gql(`
+            mutation CreateTopic($matchId: Int!, $name: String!, $subject: String!) {
+                learningTopicCreate(matchId: $matchId, name: $name, subject: $subject) { id }
+            }
+            `),
+            variables: {
+                matchId: match.id,
+                name: topic,
+                subject: subject as string
+            }
+         });
+
+        onClose();
+    }
+    return <Modal isOpen onClose={onClose}>
+        <Modal.Content maxW={"500px"} padding={6} marginY={0} borderRadius={"5px"}>
+                <Modal.CloseButton />
+                <VStack height="100%" space={6}>
+                    <Heading>Neues Thema mit {match.student.firstname}</Heading>
+                    <FormControl>
+                        <FormControl.Label>Thema</FormControl.Label>
+                        <Input value={topic} onChangeText={setTopic} />
+
+                        <FormControl.Label>Fach</FormControl.Label>
+                        <SubjectSelector 
+                            selectable={match.subjectsFormatted.map(it => it.name!)}
+                            variant="selection"
+                            removeSubject={() => {}}
+                            addSubject={it => setSubject(it as Course_Subject_Enum)}
+                            subjects={subject ? [subject] : []}
+                        />
+
+                        <Button disabled={!topic || !subject} onPress={createTopic}>Thema erstellen</Button>
+                    </FormControl>
+                </VStack>
+        </Modal.Content>         
+    </Modal>
+}
diff --git a/src/pages/learning/LearningAssignmentPage.tsx b/src/pages/learning/LearningAssignmentPage.tsx
index 08094912a..5283231da 100644
--- a/src/pages/learning/LearningAssignmentPage.tsx
+++ b/src/pages/learning/LearningAssignmentPage.tsx
@@ -1,67 +1,11 @@
 import { useNavigate, useParams } from "react-router-dom";
 import WithNavigation from "../../components/WithNavigation";
-import { useMutation, useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client";
 import CenterLoadingSpinner from "../../components/CenterLoadingSpinner";
-import { Button, HStack, Heading, Text, TextArea, VStack } from "native-base";
-import { useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
-import HSection from "../../widgets/HSection";
+import { Heading } from "native-base";
 import { gql } from "../../gql";
-import { Learning_Note } from "../../gql/graphql";
-import useApollo from "../../hooks/useApollo";
-import { useState } from "react";
+import { LearningNoteList } from "../../widgets/learning/LearningNoteList";
 
-type Note = Pick<Learning_Note, 'authorName' | 'type' | 'text'>;
-
-function NotesUI({ notes, assignmentId, refetch }: { notes: Note[], assignmentId: number, refetch: () => void }) {
-    const [text, setText] = useState('');
-    const { client } = useApollo();
-
-    const [ask, { loading, }] = useMutation(
-        gql(`
-        mutation Ask($assignmentId: Int!, $text: String!) {
-            learningNoteCreate(note: {
-                assignmentId: $assignmentId
-                type: comment
-                text: $text
-            }) { id }
-        }
-    `)
-    );
-
-    async function send() {
-        await ask({ variables: { text, assignmentId } });
-
-        setText('');
-        refetch();
-    }
-
-    return <VStack>
-        {notes.map(note => <NoteUI note={note} />)}
-
-        <TextArea value={text} onChangeText={setText} autoCompleteType={""} />
-        <HStack space={'10px'}>
-            <Button disabled={loading} onPress={send}>Senden</Button>
-        </HStack>
-    </VStack>
-}
-
-
-function NoteUI({ note }: { note: Note }) {
-    const color = {
-        answer: 'white',
-        correct_answer: '#98FF98',
-        wrong_answer: '#FFCCCB',
-        question: 'lightblue',
-        comment: 'white',
-        task: 'lightorange'
-    }[note.type];
-
-    return <HStack margin='5px' padding={'10px'} style={{ backgroundColor: color }} borderRadius='5px'>
-        <Text paddingRight='5px'>{note.authorName}: </Text>
-        <Text>{note.text}</Text>
-    </HStack>
-}
 
 export function LearningAssignmentPupilPage() {
     const { id: _assignmentID } = useParams();
@@ -88,7 +32,7 @@ export function LearningAssignmentPupilPage() {
         {loading && <CenterLoadingSpinner />}
         {!loading && <>
             <Heading>{data?.learningAssignment.task}</Heading>
-            {data && <NotesUI refetch={refetch} assignmentId={assignmentID} notes={data.learningAssignment.notes} />}
+            {data && <LearningNoteList refetch={refetch} assignmentId={assignmentID} notes={data.learningAssignment.notes} />}
         </>}
     </WithNavigation>
 }
\ No newline at end of file
diff --git a/src/pages/learning/LearningPage.tsx b/src/pages/learning/LearningPage.tsx
index e1cbae8f0..9d1fcc2f9 100644
--- a/src/pages/learning/LearningPage.tsx
+++ b/src/pages/learning/LearningPage.tsx
@@ -2,87 +2,12 @@ import { useQuery } from "@apollo/client";
 import CenterLoadingSpinner from "../../components/CenterLoadingSpinner";
 import WithNavigation from "../../components/WithNavigation";
 import { gql } from "../../gql";
-import { Button, Column, FormControl, HStack, Heading, Input, Modal, Pressable, Row, Text, VStack } from "native-base";
+import { Button, Column, HStack } from "native-base";
 import HSection from "../../widgets/HSection";
-import Card from "../../components/Card";
-import { Course_Subject_Enum, Match, Subject } from "../../gql/graphql";
-import { useTranslation } from "react-i18next";
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import SubjectList from "../../widgets/SubjectList";
-import { SubjectSelector } from "../../widgets/SubjectSelector";
-import useApollo from "../../hooks/useApollo";
+import { CreateTopicModal, MatchInfo } from "../../modals/learning/CreateTopicModal";
+import { LearningTopicCard } from "../../widgets/learning/LearningTopicCard";
 
-function LearningTopicCard({ subject, title, onPress, assignments }: { title: string, subject?: Course_Subject_Enum, onPress: () => void, assignments?: { open: number, finished: number } }) {
-    const { t } = useTranslation();
-
-    return (
-        <Pressable onPress={onPress}>
-            <VStack width="288px" height="288px" padding="24px" backgroundColor="primary.900" borderRadius="8px" justifyContent="space-between">
-                <VStack>
-                    <Text fontSize={12} color="white" noOfLines={1}>
-                        {subject && t(`lernfair.subjects.${subject}` as unknown as TemplateStringsArray)}
-                    </Text>
-                    <Heading color="white" noOfLines={1}>
-                        {title}
-                    </Heading>
-                    {assignments && <VStack paddingTop="20px">
-                        <Text color="white">
-                            {assignments.open} offene Aufgaben
-                        </Text>
-                        <Text color="white">{assignments.finished} erledigte Aufgaben</Text>
-                    </VStack>}
-                </VStack>
-            </VStack>
-        </Pressable>
-    )
-}
-
-type MatchInfo = { id: number, subjectsFormatted: { name?: string | null }[], student: { firstname?: string | null }};
-function CreateTopicModal({ onClose, match }: { onClose: () => void, match: MatchInfo }) {
-    const [topic, setTopic] = useState('');
-    const [subject, setSubject] = useState<Course_Subject_Enum>();
-    const { client } = useApollo();
-    async function createTopic() {
-        await client.mutate({
-            mutation: gql(`
-            mutation CreateTopic($matchId: Int!, $name: String!, $subject: String!) {
-                learningTopicCreate(matchId: $matchId, name: $name, subject: $subject) { id }
-            }
-            `),
-            variables: {
-                matchId: match.id,
-                name: topic,
-                subject: subject as string
-            }
-         });
-
-        onClose();
-    }
-    return <Modal isOpen onClose={onClose}>
-        <Modal.Content maxW={"500px"} padding={6} marginY={0} borderRadius={"5px"}>
-                <Modal.CloseButton />
-                <VStack height="100%" space={6}>
-                    <Heading>Neues Thema mit {match.student.firstname}</Heading>
-                    <FormControl>
-                        <FormControl.Label>Thema</FormControl.Label>
-                        <Input value={topic} onChangeText={setTopic} />
-
-                        <FormControl.Label>Fach</FormControl.Label>
-                        <SubjectSelector 
-                            selectable={match.subjectsFormatted.map(it => it.name!)}
-                            variant="selection"
-                            removeSubject={() => {}}
-                            addSubject={it => setSubject(it as Course_Subject_Enum)}
-                            subjects={subject ? [subject] : []}
-                        />
-
-                        <Button disabled={!topic || !subject} onPress={createTopic}>Thema erstellen</Button>
-                    </FormControl>
-                </VStack>
-        </Modal.Content>         
-    </Modal>
-}
 
 export function LearningPupilPage() {
     const { loading, data, refetch } = useQuery(gql(`
@@ -108,14 +33,13 @@ export function LearningPupilPage() {
     `));
 
     const [createTopicFor, setCreateTopicFor] = useState<MatchInfo>();
-    const navigate = useNavigate();
 
     return <WithNavigation>
         <Column padding={'10px'}>
         {loading && <CenterLoadingSpinner />}
         {!loading && data?.me.pupil?.matches.map(match => <>
             <HSection title={`Lerne mit ${match.student.firstname}`}>
-                {match.topics.map(topic => <LearningTopicCard onPress={() => navigate(`/learning/topic/${topic.id}`)} title={topic.name} subject={topic.subject} assignments={{ finished: topic.finishedAssignmentsCount, open: topic.openAssignmentsCount }}/>)}
+                {match.topics.map(topic => <LearningTopicCard topic={topic} />)}
             </HSection>
             <HStack>
                 <Button variant="outline" onPress={() => setCreateTopicFor(match)}>Neues Thema</Button> 
diff --git a/src/pages/learning/LearningTopicPage.tsx b/src/pages/learning/LearningTopicPage.tsx
index ecccc9f7f..b8c80ffa1 100644
--- a/src/pages/learning/LearningTopicPage.tsx
+++ b/src/pages/learning/LearningTopicPage.tsx
@@ -1,98 +1,21 @@
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import WithNavigation from "../../components/WithNavigation";
 import { useQuery } from "@apollo/client";
 import CenterLoadingSpinner from "../../components/CenterLoadingSpinner";
-import { Button, CheckIcon, Circle, FormControl, HStack, Heading, Input, Modal, QuestionIcon, TextArea, VStack } from "native-base";
-import { useTranslation } from "react-i18next";
-import { Pressable } from "react-native";
+import { Button, HStack } from "native-base";
 import HSection from "../../widgets/HSection";
 import { gql } from "../../gql";
 import { useState } from "react";
-import useApollo from "../../hooks/useApollo";
-import { Learning_Topic } from "../../gql/graphql";
+import { LearningAssignmentCard } from "../../widgets/learning/LearningAssignmentCard";
+import { CreateAssignmentModal } from "../../modals/learning/CreateAssignmentModal";
 
 
-function LearningAssignmentCard({ task, done, onPress }: { task: string, onPress: () => void, done?: boolean }) {
-    return (
-        <Pressable onPress={onPress}>
-            <VStack width="288px" height="288px" padding="24px" backgroundColor="primary.900" borderRadius="8px" justifyContent="space-between">
-                    <Circle size={'lg'} background="lightText">
-                        {done ? <CheckIcon color="primary.900" size="64px" /> : <QuestionIcon color="primary.900" size="64px" />}
-                    </Circle><Heading color="white">
-                        {task}
-                    </Heading>
-            </VStack>
-        </Pressable>
-    )
-}
-
-type TopicInfo = Pick<Learning_Topic, 'id' | 'name' | 'subject'>;
-
-function CreateAssignmentModal({ onClose, topic }: { onClose: () => void, topic: TopicInfo }) {
-    const [task, setTask] = useState("");
-
-    const { client } = useApollo();
-
-    async function createAssignment() {
-        await client.mutate({
-            mutation: gql(`
-            mutation CreateAssignment($topicId: Int!, $task: String!) {
-                learningAssignmentCreate(topicId: $topicId, task: $task) { id }
-            }
-            `),
-            variables: {
-                topicId: topic.id,
-                task
-            }
-         });
-
-        onClose();
-    }
-
-    async function proposeAssignment() {
-        setTask("...");
-
-        const proposal = await client.mutate({
-            mutation: gql(`
-            mutation ProposeAssignment($topicId: Int!) {
-                learningAssignmentPropose(topicId: $topicId)
-            }
-            `),
-            variables: {
-                topicId: topic.id
-            }
-         });
-
-        setTask(proposal.data!.learningAssignmentPropose);
-    }
-
-    return <Modal isOpen onClose={onClose}>
-        <Modal.Content maxW={"800px"} padding={6} marginY={0} borderRadius={"5px"} overflowY="auto">
-                <Modal.CloseButton />
-                <VStack height="100%" space={6}>
-                    <Heading>Neue Aufgabe für {topic.subject} / {topic.name}</Heading>
-                    <FormControl>
-                        <TextArea minHeight="400px" autoCompleteType="" value={task} onChangeText={setTask} />
-
-                        <VStack>
-                            <Button variant="outline" onPress={proposeAssignment}>Vorschlag generieren</Button>
-                            <Button disabled={!task} onPress={createAssignment}>Aufgabe erstellen</Button>
-                        </VStack>
-                        
-                    </FormControl>
-                </VStack>
-        </Modal.Content>         
-    </Modal>
-}
-
 export function LearningTopicPupilPage() {
     const { id: _topicID } = useParams();
     const topicID = parseInt(_topicID!, 10);
 
     const [newAssignmentOpen, setNewAssignmentOpen] = useState(false);
 
-    const navigate = useNavigate();
-
     const { loading, data, refetch } = useQuery(gql(`
         query GetTopic($id: Int!) {
             learningTopic(id: $id) {
@@ -114,7 +37,7 @@ export function LearningTopicPupilPage() {
         {!loading && <>
             <HSection title={`${data?.learningTopic.subject} / ${data?.learningTopic.name}`}>
                 {data?.learningTopic.assignments.map(assignment => 
-                    <LearningAssignmentCard done={assignment.status === "done"} task={assignment.task} onPress={() => navigate(`/learning/assignment/${assignment.id}`)} />)}
+                    <LearningAssignmentCard assignment={assignment} />)}
             </HSection>
             <HStack>
                 <Button variant="outline" onPress={() => setNewAssignmentOpen(true)}>Neue Aufgabe</Button> 
diff --git a/src/widgets/learning/LearningAssignmentCard.tsx b/src/widgets/learning/LearningAssignmentCard.tsx
new file mode 100644
index 000000000..ea1708dcf
--- /dev/null
+++ b/src/widgets/learning/LearningAssignmentCard.tsx
@@ -0,0 +1,21 @@
+import { VStack, CheckIcon, QuestionIcon, Heading, Pressable, Circle } from "native-base";
+import { Learning_Assignment } from "../../gql/graphql";
+import { useNavigate } from "react-router-dom";
+
+export type AssignmentInfo = Pick<Learning_Assignment, 'id' | 'task' | 'status'>;
+
+export function LearningAssignmentCard({ assignment }: { assignment: AssignmentInfo }) {
+    const navigate = useNavigate();
+
+    return (
+        <Pressable onPress={() => navigate(`/learning/assignment/${assignment.id}`)}>
+            <VStack width="288px" height="288px" padding="24px" backgroundColor="primary.900" borderRadius="8px" justifyContent="space-between">
+                    <Circle size={'lg'} background="lightText">
+                        {assignment.status === "done" ? <CheckIcon color="primary.900" size="64px" /> : <QuestionIcon color="primary.900" size="64px" />}
+                    </Circle><Heading color="white">
+                        {assignment.task}
+                    </Heading>
+            </VStack>
+        </Pressable>
+    )
+}
diff --git a/src/widgets/learning/LearningNoteList.tsx b/src/widgets/learning/LearningNoteList.tsx
new file mode 100644
index 000000000..bdc64e01f
--- /dev/null
+++ b/src/widgets/learning/LearningNoteList.tsx
@@ -0,0 +1,57 @@
+import { useMutation, gql } from "@apollo/client";
+import { VStack, TextArea, HStack, Button, Text } from "native-base";
+import { useState } from "react";
+import { Learning_Note } from "../../gql/graphql";
+import useApollo from "../../hooks/useApollo";
+
+type Note = Pick<Learning_Note, 'authorName' | 'type' | 'text'>;
+
+export function LearningNoteList({ notes, assignmentId, refetch }: { notes: Note[], assignmentId: number, refetch: () => void }) {
+    const [text, setText] = useState('');
+    const { client } = useApollo();
+
+    const [ask, { loading, }] = useMutation(
+        gql(`
+        mutation Ask($assignmentId: Int!, $text: String!) {
+            learningNoteCreate(note: {
+                assignmentId: $assignmentId
+                type: comment
+                text: $text
+            }) { id }
+        }
+    `)
+    );
+
+    async function send() {
+        await ask({ variables: { text, assignmentId } });
+
+        setText('');
+        refetch();
+    }
+
+    return <VStack>
+        {notes.map(note => <LearningNoteRow note={note} />)}
+
+        <TextArea value={text} onChangeText={setText} autoCompleteType={""} />
+        <HStack space={'10px'}>
+            <Button disabled={loading} onPress={send}>Senden</Button>
+        </HStack>
+    </VStack>
+}
+
+
+export function LearningNoteRow({ note }: { note: Note }) {
+    const color = {
+        answer: 'white',
+        correct_answer: '#98FF98',
+        wrong_answer: '#FFCCCB',
+        question: 'lightblue',
+        comment: 'white',
+        task: 'lightorange'
+    }[note.type];
+
+    return <HStack margin='5px' padding={'10px'} style={{ backgroundColor: color }} borderRadius='5px'>
+        <Text paddingRight='5px'>{note.authorName}: </Text>
+        <Text>{note.text}</Text>
+    </HStack>
+}
diff --git a/src/widgets/learning/LearningTopicCard.tsx b/src/widgets/learning/LearningTopicCard.tsx
new file mode 100644
index 000000000..e08376dc9
--- /dev/null
+++ b/src/widgets/learning/LearningTopicCard.tsx
@@ -0,0 +1,32 @@
+import { VStack, Heading, Text, Pressable } from "native-base";
+import { useTranslation } from "react-i18next";
+import { Course_Subject_Enum, Learning_Topic } from "../../gql/graphql";
+import { useNavigate } from "react-router-dom";
+
+export type TopicInfo = Pick<Learning_Topic, 'id' | 'finishedAssignmentsCount' | 'openAssignmentsCount' | 'subject' | 'name'>;
+
+export function LearningTopicCard({ topic }: { topic: TopicInfo }) {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+
+    return (
+        <Pressable onPress={() => navigate(`/learning/topic/${topic.id}`)}>
+            <VStack width="288px" height="288px" padding="24px" backgroundColor="primary.900" borderRadius="8px" justifyContent="space-between">
+                <VStack>
+                    <Text fontSize={12} color="white" noOfLines={1}>
+                        {t(`lernfair.subjects.${topic.subject}` as unknown as TemplateStringsArray)}
+                    </Text>
+                    <Heading color="white" noOfLines={1}>
+                        {topic.name}
+                    </Heading>
+                    <VStack paddingTop="20px">
+                        <Text color="white">
+                            {topic.openAssignmentsCount} offene Aufgaben
+                        </Text>
+                        <Text color="white">{topic.finishedAssignmentsCount} erledigte Aufgaben</Text>
+                    </VStack>
+                </VStack>
+            </VStack>
+        </Pressable>
+    )
+}

From cc17e9d16c44a441e7ece7543fe2d6aa9b147a68 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@wilms.ninja>
Date: Mon, 22 Jul 2024 14:27:52 +0200
Subject: [PATCH 5/5] prettier

---
 src/modals/learning/CreateAssignmentModal.tsx | 51 +++++++------
 src/modals/learning/CreateTopicModal.tsx      | 42 ++++++-----
 src/pages/learning/LearningAssignmentPage.tsx | 42 ++++++-----
 src/pages/learning/LearningPage.tsx           | 73 ++++++++++++-------
 src/pages/learning/LearningTopicPage.tsx      | 71 +++++++++++-------
 src/routing/NavigatorLazy.tsx                 | 10 ++-
 .../learning/LearningAssignmentCard.tsx       | 17 ++---
 src/widgets/learning/LearningNoteList.tsx     | 47 +++++++-----
 src/widgets/learning/LearningTopicCard.tsx    | 14 ++--
 9 files changed, 212 insertions(+), 155 deletions(-)

diff --git a/src/modals/learning/CreateAssignmentModal.tsx b/src/modals/learning/CreateAssignmentModal.tsx
index 850e20463..131a9e601 100644
--- a/src/modals/learning/CreateAssignmentModal.tsx
+++ b/src/modals/learning/CreateAssignmentModal.tsx
@@ -1,13 +1,13 @@
-import { gql } from "@apollo/client";
-import { VStack, Heading, FormControl, TextArea, Modal, Button } from "native-base";
-import { useState } from "react";
-import { Learning_Topic } from "../../gql/graphql";
-import useApollo from "../../hooks/useApollo";
+import { gql } from '@apollo/client';
+import { VStack, Heading, FormControl, TextArea, Modal, Button } from 'native-base';
+import { useState } from 'react';
+import { Learning_Topic } from '../../gql/graphql';
+import useApollo from '../../hooks/useApollo';
 
 type TopicInfo = Pick<Learning_Topic, 'id' | 'name' | 'subject'>;
 
-export function CreateAssignmentModal({ onClose, topic }: { onClose: () => void, topic: TopicInfo }) {
-    const [task, setTask] = useState("");
+export function CreateAssignmentModal({ onClose, topic }: { onClose: () => void; topic: TopicInfo }) {
+    const [task, setTask] = useState('');
 
     const { client } = useApollo();
 
@@ -20,15 +20,15 @@ export function CreateAssignmentModal({ onClose, topic }: { onClose: () => void,
             `),
             variables: {
                 topicId: topic.id,
-                task
-            }
-         });
+                task,
+            },
+        });
 
         onClose();
     }
 
     async function proposeAssignment() {
-        setTask("...");
+        setTask('...');
 
         const proposal = await client.mutate({
             mutation: gql(`
@@ -37,28 +37,35 @@ export function CreateAssignmentModal({ onClose, topic }: { onClose: () => void,
             }
             `),
             variables: {
-                topicId: topic.id
-            }
-         });
+                topicId: topic.id,
+            },
+        });
 
         setTask(proposal.data!.learningAssignmentPropose);
     }
 
-    return <Modal isOpen onClose={onClose}>
-        <Modal.Content maxW={"800px"} padding={6} marginY={0} borderRadius={"5px"} overflowY="auto">
+    return (
+        <Modal isOpen onClose={onClose}>
+            <Modal.Content maxW={'800px'} padding={6} marginY={0} borderRadius={'5px'} overflowY="auto">
                 <Modal.CloseButton />
                 <VStack height="100%" space={6}>
-                    <Heading>Neue Aufgabe für {topic.subject} / {topic.name}</Heading>
+                    <Heading>
+                        Neue Aufgabe für {topic.subject} / {topic.name}
+                    </Heading>
                     <FormControl>
                         <TextArea minHeight="400px" autoCompleteType="" value={task} onChangeText={setTask} />
 
                         <VStack>
-                            <Button variant="outline" onPress={proposeAssignment}>Vorschlag generieren</Button>
-                            <Button disabled={!task} onPress={createAssignment}>Aufgabe erstellen</Button>
+                            <Button variant="outline" onPress={proposeAssignment}>
+                                Vorschlag generieren
+                            </Button>
+                            <Button disabled={!task} onPress={createAssignment}>
+                                Aufgabe erstellen
+                            </Button>
                         </VStack>
-                        
                     </FormControl>
                 </VStack>
-        </Modal.Content>         
-    </Modal>
+            </Modal.Content>
+        </Modal>
+    );
 }
diff --git a/src/modals/learning/CreateTopicModal.tsx b/src/modals/learning/CreateTopicModal.tsx
index d4020b3f2..4f6724123 100644
--- a/src/modals/learning/CreateTopicModal.tsx
+++ b/src/modals/learning/CreateTopicModal.tsx
@@ -1,13 +1,13 @@
-import { gql } from "@apollo/client";
-import { VStack, Heading, FormControl, Input, Modal, Button } from "native-base";
-import { useState } from "react";
-import { Course_Subject_Enum } from "../../gql/graphql";
-import useApollo from "../../hooks/useApollo";
-import { SubjectSelector } from "../../widgets/SubjectSelector";
+import { gql } from '@apollo/client';
+import { VStack, Heading, FormControl, Input, Modal, Button } from 'native-base';
+import { useState } from 'react';
+import { Course_Subject_Enum } from '../../gql/graphql';
+import useApollo from '../../hooks/useApollo';
+import { SubjectSelector } from '../../widgets/SubjectSelector';
 
-export type MatchInfo = { id: number, subjectsFormatted: { name?: string | null }[], student: { firstname?: string | null }};
+export type MatchInfo = { id: number; subjectsFormatted: { name?: string | null }[]; student: { firstname?: string | null } };
 
-export function CreateTopicModal({ onClose, match }: { onClose: () => void, match: MatchInfo }) {
+export function CreateTopicModal({ onClose, match }: { onClose: () => void; match: MatchInfo }) {
     const [topic, setTopic] = useState('');
     const [subject, setSubject] = useState<Course_Subject_Enum>();
     const { client } = useApollo();
@@ -21,14 +21,15 @@ export function CreateTopicModal({ onClose, match }: { onClose: () => void, matc
             variables: {
                 matchId: match.id,
                 name: topic,
-                subject: subject as string
-            }
-         });
+                subject: subject as string,
+            },
+        });
 
         onClose();
     }
-    return <Modal isOpen onClose={onClose}>
-        <Modal.Content maxW={"500px"} padding={6} marginY={0} borderRadius={"5px"}>
+    return (
+        <Modal isOpen onClose={onClose}>
+            <Modal.Content maxW={'500px'} padding={6} marginY={0} borderRadius={'5px'}>
                 <Modal.CloseButton />
                 <VStack height="100%" space={6}>
                     <Heading>Neues Thema mit {match.student.firstname}</Heading>
@@ -37,17 +38,20 @@ export function CreateTopicModal({ onClose, match }: { onClose: () => void, matc
                         <Input value={topic} onChangeText={setTopic} />
 
                         <FormControl.Label>Fach</FormControl.Label>
-                        <SubjectSelector 
-                            selectable={match.subjectsFormatted.map(it => it.name!)}
+                        <SubjectSelector
+                            selectable={match.subjectsFormatted.map((it) => it.name!)}
                             variant="selection"
                             removeSubject={() => {}}
-                            addSubject={it => setSubject(it as Course_Subject_Enum)}
+                            addSubject={(it) => setSubject(it as Course_Subject_Enum)}
                             subjects={subject ? [subject] : []}
                         />
 
-                        <Button disabled={!topic || !subject} onPress={createTopic}>Thema erstellen</Button>
+                        <Button disabled={!topic || !subject} onPress={createTopic}>
+                            Thema erstellen
+                        </Button>
                     </FormControl>
                 </VStack>
-        </Modal.Content>         
-    </Modal>
+            </Modal.Content>
+        </Modal>
+    );
 }
diff --git a/src/pages/learning/LearningAssignmentPage.tsx b/src/pages/learning/LearningAssignmentPage.tsx
index 5283231da..91bc70b38 100644
--- a/src/pages/learning/LearningAssignmentPage.tsx
+++ b/src/pages/learning/LearningAssignmentPage.tsx
@@ -1,11 +1,10 @@
-import { useNavigate, useParams } from "react-router-dom";
-import WithNavigation from "../../components/WithNavigation";
-import { useQuery } from "@apollo/client";
-import CenterLoadingSpinner from "../../components/CenterLoadingSpinner";
-import { Heading } from "native-base";
-import { gql } from "../../gql";
-import { LearningNoteList } from "../../widgets/learning/LearningNoteList";
-
+import { useNavigate, useParams } from 'react-router-dom';
+import WithNavigation from '../../components/WithNavigation';
+import { useQuery } from '@apollo/client';
+import CenterLoadingSpinner from '../../components/CenterLoadingSpinner';
+import { Heading } from 'native-base';
+import { gql } from '../../gql';
+import { LearningNoteList } from '../../widgets/learning/LearningNoteList';
 
 export function LearningAssignmentPupilPage() {
     const { id: _assignmentID } = useParams();
@@ -13,7 +12,8 @@ export function LearningAssignmentPupilPage() {
 
     const navigate = useNavigate();
 
-    const { loading, data, refetch } = useQuery(gql(`
+    const { loading, data, refetch } = useQuery(
+        gql(`
         query GetAssignment($id: Int!) {
             learningAssignment(id: $id) {
                 task
@@ -26,13 +26,19 @@ export function LearningAssignmentPupilPage() {
                 }
             }
         }
-    `), { variables: { id: assignmentID }, pollInterval: 1000 });
+    `),
+        { variables: { id: assignmentID }, pollInterval: 1000 }
+    );
 
-    return <WithNavigation showBack>
-        {loading && <CenterLoadingSpinner />}
-        {!loading && <>
-            <Heading>{data?.learningAssignment.task}</Heading>
-            {data && <LearningNoteList refetch={refetch} assignmentId={assignmentID} notes={data.learningAssignment.notes} />}
-        </>}
-    </WithNavigation>
-}
\ No newline at end of file
+    return (
+        <WithNavigation showBack>
+            {loading && <CenterLoadingSpinner />}
+            {!loading && (
+                <>
+                    <Heading>{data?.learningAssignment.task}</Heading>
+                    {data && <LearningNoteList refetch={refetch} assignmentId={assignmentID} notes={data.learningAssignment.notes} />}
+                </>
+            )}
+        </WithNavigation>
+    );
+}
diff --git a/src/pages/learning/LearningPage.tsx b/src/pages/learning/LearningPage.tsx
index 9d1fcc2f9..885a9b6a0 100644
--- a/src/pages/learning/LearningPage.tsx
+++ b/src/pages/learning/LearningPage.tsx
@@ -1,16 +1,16 @@
-import { useQuery } from "@apollo/client";
-import CenterLoadingSpinner from "../../components/CenterLoadingSpinner";
-import WithNavigation from "../../components/WithNavigation";
-import { gql } from "../../gql";
-import { Button, Column, HStack } from "native-base";
-import HSection from "../../widgets/HSection";
-import { useState } from "react";
-import { CreateTopicModal, MatchInfo } from "../../modals/learning/CreateTopicModal";
-import { LearningTopicCard } from "../../widgets/learning/LearningTopicCard";
-
+import { useQuery } from '@apollo/client';
+import CenterLoadingSpinner from '../../components/CenterLoadingSpinner';
+import WithNavigation from '../../components/WithNavigation';
+import { gql } from '../../gql';
+import { Button, Column, HStack } from 'native-base';
+import HSection from '../../widgets/HSection';
+import { useState } from 'react';
+import { CreateTopicModal, MatchInfo } from '../../modals/learning/CreateTopicModal';
+import { LearningTopicCard } from '../../widgets/learning/LearningTopicCard';
 
 export function LearningPupilPage() {
-    const { loading, data, refetch } = useQuery(gql(`
+    const { loading, data, refetch } = useQuery(
+        gql(`
         query Learning { 
             me { 
                 pupil { 
@@ -30,24 +30,41 @@ export function LearningPupilPage() {
                 }
              }
         }
-    `));
+    `)
+    );
 
     const [createTopicFor, setCreateTopicFor] = useState<MatchInfo>();
 
-    return <WithNavigation>
-        <Column padding={'10px'}>
-        {loading && <CenterLoadingSpinner />}
-        {!loading && data?.me.pupil?.matches.map(match => <>
-            <HSection title={`Lerne mit ${match.student.firstname}`}>
-                {match.topics.map(topic => <LearningTopicCard topic={topic} />)}
-            </HSection>
-            <HStack>
-                <Button variant="outline" onPress={() => setCreateTopicFor(match)}>Neues Thema</Button> 
-            </HStack>
-        </>)}
-        
-        </Column>
+    return (
+        <WithNavigation>
+            <Column padding={'10px'}>
+                {loading && <CenterLoadingSpinner />}
+                {!loading &&
+                    data?.me.pupil?.matches.map((match) => (
+                        <>
+                            <HSection title={`Lerne mit ${match.student.firstname}`}>
+                                {match.topics.map((topic) => (
+                                    <LearningTopicCard topic={topic} />
+                                ))}
+                            </HSection>
+                            <HStack>
+                                <Button variant="outline" onPress={() => setCreateTopicFor(match)}>
+                                    Neues Thema
+                                </Button>
+                            </HStack>
+                        </>
+                    ))}
+            </Column>
 
-        {createTopicFor && <CreateTopicModal match={createTopicFor} onClose={() => { setCreateTopicFor(undefined); refetch(); }} />}
-    </WithNavigation>
-}
\ No newline at end of file
+            {createTopicFor && (
+                <CreateTopicModal
+                    match={createTopicFor}
+                    onClose={() => {
+                        setCreateTopicFor(undefined);
+                        refetch();
+                    }}
+                />
+            )}
+        </WithNavigation>
+    );
+}
diff --git a/src/pages/learning/LearningTopicPage.tsx b/src/pages/learning/LearningTopicPage.tsx
index b8c80ffa1..8e152a716 100644
--- a/src/pages/learning/LearningTopicPage.tsx
+++ b/src/pages/learning/LearningTopicPage.tsx
@@ -1,14 +1,13 @@
-import { useParams } from "react-router-dom";
-import WithNavigation from "../../components/WithNavigation";
-import { useQuery } from "@apollo/client";
-import CenterLoadingSpinner from "../../components/CenterLoadingSpinner";
-import { Button, HStack } from "native-base";
-import HSection from "../../widgets/HSection";
-import { gql } from "../../gql";
-import { useState } from "react";
-import { LearningAssignmentCard } from "../../widgets/learning/LearningAssignmentCard";
-import { CreateAssignmentModal } from "../../modals/learning/CreateAssignmentModal";
-
+import { useParams } from 'react-router-dom';
+import WithNavigation from '../../components/WithNavigation';
+import { useQuery } from '@apollo/client';
+import CenterLoadingSpinner from '../../components/CenterLoadingSpinner';
+import { Button, HStack } from 'native-base';
+import HSection from '../../widgets/HSection';
+import { gql } from '../../gql';
+import { useState } from 'react';
+import { LearningAssignmentCard } from '../../widgets/learning/LearningAssignmentCard';
+import { CreateAssignmentModal } from '../../modals/learning/CreateAssignmentModal';
 
 export function LearningTopicPupilPage() {
     const { id: _topicID } = useParams();
@@ -16,7 +15,8 @@ export function LearningTopicPupilPage() {
 
     const [newAssignmentOpen, setNewAssignmentOpen] = useState(false);
 
-    const { loading, data, refetch } = useQuery(gql(`
+    const { loading, data, refetch } = useQuery(
+        gql(`
         query GetTopic($id: Int!) {
             learningTopic(id: $id) {
                 id
@@ -30,19 +30,36 @@ export function LearningTopicPupilPage() {
                 }
             }
         }
-    `), { variables: { id: topicID }});
+    `),
+        { variables: { id: topicID } }
+    );
 
-    return <WithNavigation showBack>
-        {loading && <CenterLoadingSpinner />}
-        {!loading && <>
-            <HSection title={`${data?.learningTopic.subject} / ${data?.learningTopic.name}`}>
-                {data?.learningTopic.assignments.map(assignment => 
-                    <LearningAssignmentCard assignment={assignment} />)}
-            </HSection>
-            <HStack>
-                <Button variant="outline" onPress={() => setNewAssignmentOpen(true)}>Neue Aufgabe</Button> 
-            </HStack>
-        </>}
-        {newAssignmentOpen && <CreateAssignmentModal onClose={() => { setNewAssignmentOpen(false); refetch(); }} topic={data?.learningTopic!} />}
-    </WithNavigation>
-}
\ No newline at end of file
+    return (
+        <WithNavigation showBack>
+            {loading && <CenterLoadingSpinner />}
+            {!loading && (
+                <>
+                    <HSection title={`${data?.learningTopic.subject} / ${data?.learningTopic.name}`}>
+                        {data?.learningTopic.assignments.map((assignment) => (
+                            <LearningAssignmentCard assignment={assignment} />
+                        ))}
+                    </HSection>
+                    <HStack>
+                        <Button variant="outline" onPress={() => setNewAssignmentOpen(true)}>
+                            Neue Aufgabe
+                        </Button>
+                    </HStack>
+                </>
+            )}
+            {newAssignmentOpen && (
+                <CreateAssignmentModal
+                    onClose={() => {
+                        setNewAssignmentOpen(false);
+                        refetch();
+                    }}
+                    topic={data?.learningTopic!}
+                />
+            )}
+        </WithNavigation>
+    );
+}
diff --git a/src/routing/NavigatorLazy.tsx b/src/routing/NavigatorLazy.tsx
index bc91aa865..e2e4cfeae 100644
--- a/src/routing/NavigatorLazy.tsx
+++ b/src/routing/NavigatorLazy.tsx
@@ -450,22 +450,24 @@ export default function NavigatorLazy() {
                     <RequireAuth>
                         <SwitchUserType pupilComponent={<LearningPupilPage />} />
                     </RequireAuth>
-                } />
+                }
+            />
             <Route
                 path="/learning/topic/:id"
                 element={
                     <RequireAuth>
                         <SwitchUserType pupilComponent={<LearningTopicPupilPage />} />
                     </RequireAuth>
-                } />
+                }
+            />
             <Route
                 path="/learning/assignment/:id"
                 element={
                     <RequireAuth>
                         <SwitchUserType pupilComponent={<LearningAssignmentPupilPage />} />
                     </RequireAuth>
-                } />
-            
+                }
+            />
 
             <Route path="/verify-email" element={<VerifyEmail />} />
             <Route path="/verify-email-change" element={<VerifyEmailChange />} />
diff --git a/src/widgets/learning/LearningAssignmentCard.tsx b/src/widgets/learning/LearningAssignmentCard.tsx
index ea1708dcf..69e4f0c01 100644
--- a/src/widgets/learning/LearningAssignmentCard.tsx
+++ b/src/widgets/learning/LearningAssignmentCard.tsx
@@ -1,6 +1,6 @@
-import { VStack, CheckIcon, QuestionIcon, Heading, Pressable, Circle } from "native-base";
-import { Learning_Assignment } from "../../gql/graphql";
-import { useNavigate } from "react-router-dom";
+import { VStack, CheckIcon, QuestionIcon, Heading, Pressable, Circle } from 'native-base';
+import { Learning_Assignment } from '../../gql/graphql';
+import { useNavigate } from 'react-router-dom';
 
 export type AssignmentInfo = Pick<Learning_Assignment, 'id' | 'task' | 'status'>;
 
@@ -10,12 +10,11 @@ export function LearningAssignmentCard({ assignment }: { assignment: AssignmentI
     return (
         <Pressable onPress={() => navigate(`/learning/assignment/${assignment.id}`)}>
             <VStack width="288px" height="288px" padding="24px" backgroundColor="primary.900" borderRadius="8px" justifyContent="space-between">
-                    <Circle size={'lg'} background="lightText">
-                        {assignment.status === "done" ? <CheckIcon color="primary.900" size="64px" /> : <QuestionIcon color="primary.900" size="64px" />}
-                    </Circle><Heading color="white">
-                        {assignment.task}
-                    </Heading>
+                <Circle size={'lg'} background="lightText">
+                    {assignment.status === 'done' ? <CheckIcon color="primary.900" size="64px" /> : <QuestionIcon color="primary.900" size="64px" />}
+                </Circle>
+                <Heading color="white">{assignment.task}</Heading>
             </VStack>
         </Pressable>
-    )
+    );
 }
diff --git a/src/widgets/learning/LearningNoteList.tsx b/src/widgets/learning/LearningNoteList.tsx
index bdc64e01f..eced4aaaa 100644
--- a/src/widgets/learning/LearningNoteList.tsx
+++ b/src/widgets/learning/LearningNoteList.tsx
@@ -1,16 +1,16 @@
-import { useMutation, gql } from "@apollo/client";
-import { VStack, TextArea, HStack, Button, Text } from "native-base";
-import { useState } from "react";
-import { Learning_Note } from "../../gql/graphql";
-import useApollo from "../../hooks/useApollo";
+import { useMutation, gql } from '@apollo/client';
+import { VStack, TextArea, HStack, Button, Text } from 'native-base';
+import { useState } from 'react';
+import { Learning_Note } from '../../gql/graphql';
+import useApollo from '../../hooks/useApollo';
 
 type Note = Pick<Learning_Note, 'authorName' | 'type' | 'text'>;
 
-export function LearningNoteList({ notes, assignmentId, refetch }: { notes: Note[], assignmentId: number, refetch: () => void }) {
+export function LearningNoteList({ notes, assignmentId, refetch }: { notes: Note[]; assignmentId: number; refetch: () => void }) {
     const [text, setText] = useState('');
     const { client } = useApollo();
 
-    const [ask, { loading, }] = useMutation(
+    const [ask, { loading }] = useMutation(
         gql(`
         mutation Ask($assignmentId: Int!, $text: String!) {
             learningNoteCreate(note: {
@@ -29,17 +29,22 @@ export function LearningNoteList({ notes, assignmentId, refetch }: { notes: Note
         refetch();
     }
 
-    return <VStack>
-        {notes.map(note => <LearningNoteRow note={note} />)}
+    return (
+        <VStack>
+            {notes.map((note) => (
+                <LearningNoteRow note={note} />
+            ))}
 
-        <TextArea value={text} onChangeText={setText} autoCompleteType={""} />
-        <HStack space={'10px'}>
-            <Button disabled={loading} onPress={send}>Senden</Button>
-        </HStack>
-    </VStack>
+            <TextArea value={text} onChangeText={setText} autoCompleteType={''} />
+            <HStack space={'10px'}>
+                <Button disabled={loading} onPress={send}>
+                    Senden
+                </Button>
+            </HStack>
+        </VStack>
+    );
 }
 
-
 export function LearningNoteRow({ note }: { note: Note }) {
     const color = {
         answer: 'white',
@@ -47,11 +52,13 @@ export function LearningNoteRow({ note }: { note: Note }) {
         wrong_answer: '#FFCCCB',
         question: 'lightblue',
         comment: 'white',
-        task: 'lightorange'
+        task: 'lightorange',
     }[note.type];
 
-    return <HStack margin='5px' padding={'10px'} style={{ backgroundColor: color }} borderRadius='5px'>
-        <Text paddingRight='5px'>{note.authorName}: </Text>
-        <Text>{note.text}</Text>
-    </HStack>
+    return (
+        <HStack margin="5px" padding={'10px'} style={{ backgroundColor: color }} borderRadius="5px">
+            <Text paddingRight="5px">{note.authorName}: </Text>
+            <Text>{note.text}</Text>
+        </HStack>
+    );
 }
diff --git a/src/widgets/learning/LearningTopicCard.tsx b/src/widgets/learning/LearningTopicCard.tsx
index e08376dc9..c423029bb 100644
--- a/src/widgets/learning/LearningTopicCard.tsx
+++ b/src/widgets/learning/LearningTopicCard.tsx
@@ -1,7 +1,7 @@
-import { VStack, Heading, Text, Pressable } from "native-base";
-import { useTranslation } from "react-i18next";
-import { Course_Subject_Enum, Learning_Topic } from "../../gql/graphql";
-import { useNavigate } from "react-router-dom";
+import { VStack, Heading, Text, Pressable } from 'native-base';
+import { useTranslation } from 'react-i18next';
+import { Course_Subject_Enum, Learning_Topic } from '../../gql/graphql';
+import { useNavigate } from 'react-router-dom';
 
 export type TopicInfo = Pick<Learning_Topic, 'id' | 'finishedAssignmentsCount' | 'openAssignmentsCount' | 'subject' | 'name'>;
 
@@ -20,13 +20,11 @@ export function LearningTopicCard({ topic }: { topic: TopicInfo }) {
                         {topic.name}
                     </Heading>
                     <VStack paddingTop="20px">
-                        <Text color="white">
-                            {topic.openAssignmentsCount} offene Aufgaben
-                        </Text>
+                        <Text color="white">{topic.openAssignmentsCount} offene Aufgaben</Text>
                         <Text color="white">{topic.finishedAssignmentsCount} erledigte Aufgaben</Text>
                     </VStack>
                 </VStack>
             </VStack>
         </Pressable>
-    )
+    );
 }