Merge pull request #219 from mp-access/small-fixes-and-improvements

Small fixes and improvements

Author: sealexan

src/components/Hooks.tsx

@@ -1,6 +1,7 @@
 import { useMonaco } from "@monaco-editor/react"
 import { useMutation, useQuery, UseQueryOptions } from "@tanstack/react-query"
 import axios, { AxiosError } from "axios"
+import { useMotionValue } from "framer-motion"
 import { compact, concat, flatten } from "lodash"
 import * as monaco from "monaco-editor"
 import {
@@ -523,3 +524,38 @@ export const useLocalStorage = <T,>(
 
   return [value, setValue]
 }
+
+export const usePersistentMotionValue = (
+  key: string,
+  fallback: number,
+  delay = 1000,
+) => {
+  const value = useMotionValue(fallback)
+
+  useEffect(() => {
+    const saved = localStorage.getItem(key)
+    if (saved !== null) {
+      const parsed = parseFloat(saved)
+      if (!isNaN(parsed)) value.set(parsed)
+    }
+  }, [key, value])
+
+  useEffect(() => {
+    // debounce for local storage
+    let timeout: NodeJS.Timeout | null = null
+
+    const unsubscribe = value.on("change", (latest) => {
+      if (timeout) clearTimeout(timeout)
+      timeout = setTimeout(() => {
+        localStorage.setItem(key, String(latest))
+      }, delay)
+    })
+
+    return () => {
+      unsubscribe()
+      if (timeout) clearTimeout(timeout)
+    }
+  }, [key, value, delay])
+
+  return value
+}

src/components/Panels.tsx

@@ -27,7 +27,6 @@ import {
   AnimatePresence,
   AnimatePresenceProps,
   motion,
-  useMotionValue,
   useTransform,
 } from "framer-motion"
 import "katex/dist/katex.min.css"
@@ -49,6 +48,7 @@ import { atomOneLight } from "react-syntax-highlighter/dist/cjs/styles/hljs"
 import rehypeKatex from "rehype-katex"
 import remarkGfm from "remark-gfm"
 import RemarkMathPlugin from "remark-math"
+import { usePersistentMotionValue } from "./Hooks"
 
 const MotionBox = motion(Box)
 const swap = (to: number) => (r: number) => ({
@@ -63,9 +63,8 @@ type TaskViewProps = {
 
 export const TaskView = ({ children }: TaskViewProps) => {
   const size = useWindowSize()
-  const x = useMotionValue(700)
+  const x = usePersistentMotionValue("TaskView-sidebar-width", size[0] * 0.3)
   const width = useTransform(x, (value) => size[0] - 224 - value)
-
   return (
     <Flex
       flex={1}
@@ -115,8 +114,7 @@ type TaskIOProps = {
 
 export const TaskIO = ({ children }: TaskIOProps) => {
   const size = useWindowSize()
-  const maxHeight = useMotionValue(size[1])
-  const y = useTransform(maxHeight, (value) => value * 0.7)
+  const y = usePersistentMotionValue("TaskIO-height", size[0] * 0.3)
 
   return (
     <>
@@ -130,7 +128,11 @@ export const TaskIO = ({ children }: TaskIOProps) => {
         }}
       >
         <motion.div
-          style={{ height: y, display: "flex", position: "relative" }}
+          style={{
+            height: y,
+            display: "flex",
+            position: "relative",
+          }}
         >
           {children[1]}
           {children[2]}
@@ -144,7 +146,7 @@ export const TaskIO = ({ children }: TaskIOProps) => {
           bg="purple.600"
           w="full"
           h={2}
-          dragConstraints={{ top: 200, bottom: size[1] - 150 }}
+          dragConstraints={{ top: 100, bottom: size[1] - 150 }}
           style={{ y }}
           cursor="row-resize"
           key={JSON.stringify(size)}
@@ -237,8 +239,10 @@ const MarkdownOrderedList = ({ children }: OrderedListProps) => (
 const MarkdownBlock = ({ children }: { children: React.ReactNode }) => (
   <Stack bg="blackAlpha.100" p={2} m={2} children={children} />
 )
-const MarkdownCode = ({ inline, children, className }: CodeProps) =>
-  inline ? (
+const MarkdownCode = ({ inline, children, className }: CodeProps) => {
+  const language = className?.replace("language-", "") || ""
+
+  return inline ? (
     <Code
       colorScheme="gray"
       bg="gray.175"
@@ -249,11 +253,12 @@ const MarkdownCode = ({ inline, children, className }: CodeProps) =>
     <SyntaxHighlighter
       children={String(children).replace(/\n$/, "")}
       style={atomOneLight}
-      language={className}
+      language={language}
       wrapLines
       customStyle={{ fontSize: "85%" }}
     />
   )
+}
 const MarkdownListItem = ({ checked, children }: LiProps) => (
   <ListItem pb={1} display="flex">
     <ListIcon as={checked === null ? RxDotFilled : Checkbox} mt={1} />

src/pages/PrivateDashboard.tsx

@@ -1096,7 +1096,7 @@ export function PrivateDashboard() {
         </Tabs>
       </Flex>
       <Flex gap={2} flexDirection={"column"} minWidth={0} flex={2}>
-        <Flex direction={"column"} flex={1}>
+        <Flex direction={"column"} flex={1} overflow={"auto"}>
           {!submissions || submissions.length < 1 ? (
             <TaskDescription
               instructionContent={instructionsContent}
@@ -1132,6 +1132,7 @@ export function PrivateDashboard() {
           alignContent={"space-between"}
           p={2}
           overflow={"auto"}
+          minH={"70px"}
         >
           <GeneralInformation
             exampleState={exampleState}

src/pages/Task.tsx

@@ -84,7 +84,7 @@ import { TaskController } from "./Supervisor"
 export default function Task({ type }: { type: "task" | "example" }) {
   const { i18n, t } = useTranslation()
   const currentLanguage = i18n.language
-  const editor = useCodeEditor({ disablePasting: type === "example" })
+  const editor = useCodeEditor({ disablePasting: false })
   const navigate = useNavigate()
   const toast = useToast()
   const { courseSlug } = useParams()