Various small fixes (#16)

* hint loading

* linkes order and formatting

* zindex of header & footer

* remove one comming soon item

* progress bar fix

* ZIndex refix

* tooltips for grammar

Author: The-Ray-Man

frontend/src/lib/components/createExercise.tsx

@@ -26,6 +26,7 @@ import {
   IconCheck,
   IconCirclePlus,
   IconCircleX,
+  IconHelp,
   IconInfoCircle,
   IconPlus,
   IconX,
@@ -51,7 +52,9 @@ import { Identifier } from "./formula/formulaParts";
 const CreateExerciseForm = () => {
   const [opened, { open, close }] = useDisclosure(false);
 
-  const [[lhsFormulaStr, rhsFormulaStr], setFormulaStr] = useState<[string, string]>(["", ""]);
+  const [[lhsFormulaStr, rhsFormulaStr], setFormulaStr] = useState<
+    [string, string]
+  >(["", ""]);
   const [debouncedLhsFormulaStr] = useDebouncedValue(lhsFormulaStr, 150);
   const [debouncedRhsFormulaStr] = useDebouncedValue(rhsFormulaStr, 150);
 
@@ -146,12 +149,12 @@ const CreateExerciseForm = () => {
   useEffect(() => {
     if (!debouncedLhsFormulaStr) return;
     parseFormulaRequest(debouncedLhsFormulaStr, true);
-  }, [debouncedLhsFormulaStr])
+  }, [debouncedLhsFormulaStr]);
 
   useEffect(() => {
     if (!debouncedRhsFormulaStr) return;
     parseFormulaRequest(debouncedRhsFormulaStr, false);
-  }, [debouncedRhsFormulaStr])
+  }, [debouncedRhsFormulaStr]);
 
   const parseFormulaRequest = async (formula: string, lhs: boolean) => {
     if (lhs) {
@@ -231,7 +234,14 @@ const CreateExerciseForm = () => {
           </ListItem>
         </List>
         <Divider mt={"md"} />
-        <Stack justify="center" align="stretch" gap={10}>
+        <Stack justify="center" align="stretch" gap={0}>
+          <Group>
+            <Title order={4}>Statement</Title>
+            <Tooltip label={<GrammarTooltip />}>
+              <IconHelp />
+            </Tooltip>
+          </Group>
+
           <Group justify="center">
             <Card withBorder miw={"50%"} mih={125} mt={"xl"}>
               <Card.Section h={"100%"}>
@@ -264,7 +274,6 @@ const CreateExerciseForm = () => {
               </Card.Section>
             </Card>
           </Group>
-
           <Grid pt={"xl"} align="center" grow columns={26}>
             <Grid.Col span={12}>
               <Group justify="right" align="center">
@@ -280,7 +289,9 @@ const CreateExerciseForm = () => {
                 ))}
                 <TextInput
                   placeholder="Enter Formula"
-                  onChange={(e) => setFormulaStr(([_, rhs]) => [e?.currentTarget?.value, rhs])}
+                  onChange={(e) =>
+                    setFormulaStr(([_, rhs]) => [e?.currentTarget?.value, rhs])
+                  }
                   rightSection={
                     <ActionIcon
                       variant="transparent"
@@ -310,7 +321,12 @@ const CreateExerciseForm = () => {
                 ) : (
                   <TextInput
                     placeholder="Enter Formula"
-                    onChange={(e) => setFormulaStr(([lhs, _]) => [lhs, e?.currentTarget?.value])}
+                    onChange={(e) =>
+                      setFormulaStr(([lhs, _]) => [
+                        lhs,
+                        e?.currentTarget?.value,
+                      ])
+                    }
                     rightSection={
                       <ActionIcon
                         variant="transparent"
@@ -329,6 +345,7 @@ const CreateExerciseForm = () => {
             </Grid.Col>
           </Grid>
           <Divider my={"md"} />
+          <Title order={4}>Side Conditions</Title>
           <Stack align="center">
             {sideCon.map((sc, i) => (
               <Group key={i} gap={1}>
@@ -391,7 +408,8 @@ const CreateExerciseForm = () => {
             </Group>
           </Stack>
           <Divider my={"md"} />
-          <Group justify="center">
+          {/* <Title order={4}>Side Conditions</Title> */}
+          <Group justify="center" pb={"md"}>
             {hasRhs ? (
               <Text>✅ Structure</Text>
             ) : (

frontend/src/lib/components/exercise/hint.tsx

@@ -77,15 +77,13 @@ type HintProps = {
 };
 
 const Hint = ({ statement, opened, close }: HintProps) => {
-  const [getHint] = useGetTippMutation();
+  const [getHint, refetch] = useGetTippMutation();
   const [hints, hintsHandler] = useListState<Tipp>([]);
 
   useEffect(() => {
+    console.log("load hint");
     loadHint();
-  }, []);
-  useEffect(() => {
-    loadHint();
-  }, []);
+  }, [opened]);
 
   const loadHint = async () => {
     try {

frontend/src/lib/components/exercise/matcher.tsx

@@ -31,6 +31,7 @@ import {
 import { useListState } from "@mantine/hooks";
 import {
   IconCheck,
+  IconHelp,
   IconInfoCircle,
   IconPlus,
   IconX,
@@ -344,7 +345,7 @@ const Matcher = () => {
               click={handleClick}
             />
           </Center>
-          <Group>
+          <Group wrap="nowrap" gap={"xs"}>
             <TextInput
               value={customFormula}
               onChange={(event) => setCustomFormula(event.currentTarget.value)}
@@ -356,6 +357,9 @@ const Matcher = () => {
                 </ActionIcon>
               }
             />
+            <Tooltip label={<GrammarTooltip />}>
+              <IconHelp />
+            </Tooltip>
           </Group>
           {parseError.length > 0 && (
             <Textarea disabled value={parseError} rows={6} bg={"#ff8787"} />

frontend/src/lib/components/exerciseListElement.tsx

@@ -6,6 +6,7 @@ import {
   Grid,
   Group,
   Indicator,
+  SimpleGrid,
   Text,
   Tooltip,
 } from "@mantine/core";
@@ -45,14 +46,21 @@ const ExerciseListElment = ({ exercise }: exerciseListElementProps) => {
     <Card withBorder>
       <Grid grow align="center" pb={"md"}>
         <Grid.Col span={1}>
-          <Group gap={3} p={0} m={0}>
-            <Text pr={5}>{exercise.likes}</Text>
+          <SimpleGrid cols={2} spacing={0} verticalSpacing={0}>
+            {/* <SimpleGi gap={3} p={0} m={0} wrap="nowrap"> */}
+            <Text pr={5} styles={{ root: { textAlign: "right" } }}>
+              {exercise.likes}
+            </Text>
             <IconThumbUp />
-          </Group>
-          <Group gap={3}>
-            <Text pr={5}> {exercise.dislikes}</Text>
+            {/* </Group> */}
+            {/* <Group gap={3}> */}
+            <Text pr={5} styles={{ root: { textAlign: "right" } }}>
+              {" "}
+              {exercise.dislikes}
+            </Text>
             <IconThumbDown />
-          </Group>
+          </SimpleGrid>
+          {/* </Group> */}
         </Grid.Col>
         <Grid.Col span={7}>
           <Difficulty
@@ -96,6 +104,7 @@ const ExerciseListElment = ({ exercise }: exerciseListElementProps) => {
           style={{ textDecoration: "none" }}
         >
           <Indicator
+            styles={{ indicator: { zIndex: 1 } }}
             color="lightgray"
             label={<IconBulb size={20} color="black" />}
             size={"lg"}

frontend/src/lib/components/exerciseOverview.tsx

@@ -60,10 +60,12 @@ const ExerciseOverview = () => {
   const likeCompare = (a: Exercise, b: Exercise) => {
     if (a.likes == 0 && a.dislikes == 0) {
       return 1;
-    } else if (b.likes == 0 && b.dislikes == 0) {
+    } else if (a.likes > b.likes) {
+      return -1;
+    } else if (a.dislikes <= b.dislikes) {
       return -1;
     }
-    return b.likes / (b.likes + b.dislikes) - a.likes / (a.likes + a.dislikes);
+    return 1;
   };
 
   return (

frontend/src/lib/components/info.tsx

@@ -24,7 +24,12 @@ const Info = () => {
   };
 
   return (
-    <Accordion value={value} onChange={changeCollapse} variant="filled">
+    <Accordion
+      value={value}
+      onChange={changeCollapse}
+      variant="filled"
+      styles={{ control: { cursor: "default" } }}
+    >
       <Accordion.Item value="info">
         <Accordion.Control>
           <Group mr={"md"} align="center">
@@ -113,9 +118,6 @@ const Info = () => {
             <List.Item>
               <Text>🤖 Automated exercise generation</Text>
             </List.Item>
-            <List.Item>
-              <Text>💡 Hints for which rule to apply</Text>
-            </List.Item>
           </List>
 
           <Title order={4}>⚠️ Disclaimer</Title>

frontend/src/lib/components/semesterProgress.tsx

@@ -13,12 +13,18 @@ const SemsterProgress = () => {
     (dates[dates.length - 1][0] as Date).getTime() -
     (dates[0][0] as Date).getTime();
 
+  const now = new Date();
+  const current_progress = Math.min(
+    100,
+    ((now.getTime() - (dates[0][0] as Date).getTime()) / duration) * 100,
+  );
+
   return (
     <Slider
       ml={100}
       mr={"md"}
       style={{ flexGrow: "1", pointerEvents: "none" }}
-      value={10}
+      value={current_progress}
       marks={dates.map(([date, label]) => {
         return {
           value:

frontend/src/lib/utils/export.ts

@@ -13,7 +13,7 @@ export function exportToTypst(root: NodeType, nodes: Array<NodeType>): string {
       return `$${element.value} "not occuring freely in" ${placeholder.value}$`;
     },
   );
-  
+
   conditions.push(...footnotes.map(([id, note]) => `$"${id}:" ${note}$`));
 
   let typstStr = `${imp}\n${page}\n${prooftree}`;