Feat: Introduce content display to practice

.husky/pre-commit

@@ -1,4 +1,6 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
+yarn sync-translations 
+git add src/i18n/locales/*.ts
 npx lint-staged --allow-empty

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "semantic-release": "semantic-release",
     "predev": "yarn de-instrument-code",
+    "sync-translations": "yarn tsx --conditions=react-server src/i18n/scripts/prepare-i18n_ally-locales.ts",
     "dev": "concurrently 'NEXT_PUBLIC_MODE=development next dev --turbopack' 'nodemon --exec \"yarn tsx --conditions=react-server src/i18n/scripts/prepare-i18n_ally-locales.ts\" --watch src/i18n/locales/*.json'",
     "-------- build & start --------": "--------",
     "instrument-code": "cp ./config/.babelrc.json .babelrc.json",
@@ -15,6 +16,7 @@
     "build:instrumented": "next build",
     "postbuild:instrumented": "yarn postbuild && yarn de-instrument-code",
     "                                                                                                    ": "",
+    "build:dev": "__NEXT_TEST_MODE=true next build",
     "build": "next build",
     "postbuild": "cp -r public .next/standalone/ && cp -r .next/static .next/standalone/.next/",
     "                                                                                                     ": "",

src/app/[locale]/courses/[share_token]/practice/page.tsx

@@ -64,8 +64,17 @@ export default async function PracticePage({ params, searchParams }: { params: P
   }
 
   return (
-    <PracticeStoreProvider initialStoreProps={{ questions: unfilteredQuestions, practiceQuestions, courseId: course.id }} key={category}>
-      <PracticeBreadcrumbs className={cn('mb-2', categories.length === 1 && 'hidden')} share_token={share_token} categories={categories} selectedCategory={category} />
+    <PracticeStoreProvider
+      initialStoreProps={{ questions: unfilteredQuestions, practiceQuestions, courseId: course.id, contents: course.contents, categories: course.questionCategories }}
+      key={category}>
+      <PracticeBreadcrumbs
+        courseId={course.id}
+        courseName={course.name}
+        className={cn('mb-2', categories.length === 1 && 'hidden')}
+        share_token={share_token}
+        categories={categories}
+        selectedCategory={category}
+      />
 
       <PageHeading title='Practice' />
 
@@ -74,7 +83,7 @@ export default async function PracticePage({ params, searchParams }: { params: P
           <PracticeQuestionNavigation />
         </div>
         <div className='flex justify-center @[60rem]:order-first'>
-          <div className='flex max-w-11/12 flex-1 flex-col 2xl:max-w-4/5'>
+          <div className='flex max-w-11/12 flex-1 flex-col 2xl:max-w-[50vw]'>
             <PracticeProgress />
             <RenderPracticeQuestion />
             <div className={cn('flex justify-between', practiceQuestions.length <= 1 && 'hidden')}>

src/app/[locale]/courses/edit/[id]/layout.tsx

@@ -0,0 +1,36 @@
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { getCourseById } from '@/database/course/select'
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/src/components/shadcn/breadcrumb'
+
+export default async function EditLayout({ children, params }: { children: React.ReactNode; params: Promise<{ id: string }> }) {
+  const { id } = await params
+  const course = await getCourseById(id)
+
+  if (!course) notFound()
+
+  return (
+    <>
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbLink asChild>
+            <Link href={`/`}>Home</Link>
+          </BreadcrumbLink>
+          <BreadcrumbSeparator />
+
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link href={`/courses`}>Courses</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>Edit</BreadcrumbItem>
+
+          <BreadcrumbSeparator />
+          <BreadcrumbPage>{course.name}</BreadcrumbPage>
+        </BreadcrumbList>
+      </Breadcrumb>
+      {children}
+    </>
+  )
+}

src/components/Shared/Breadcrumb/GenericBreadcrumb.tsx

@@ -5,11 +5,13 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { Fragment } from 'react/jsx-runtime'
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/src/components/shadcn/breadcrumb'
-import { useCurrentLocale } from '@/src/i18n/client-localization'
+import { useCurrentLocale, useScopedI18n } from '@/src/i18n/client-localization'
 import { cn } from '@/src/lib/Shared/utils'
+import { Any } from '@/types'
 
 export function GenericBreadcrumb({ show = true }: { show?: boolean }) {
   const [breadcrumbExists, setBreadcrumbExists] = useState(false)
+  const t = useScopedI18n('Shared.Breadcrumbs')
   const locale = useCurrentLocale()
   const pathname = usePathname()
   const pages = pathname.split('?').at(0)!.split('/')!
@@ -34,20 +36,20 @@ export function GenericBreadcrumb({ show = true }: { show?: boolean }) {
         <BreadcrumbItem>
           <BreadcrumbLink asChild>
             <Link href={'/'} className='capitalize'>
-              Home
+              {t('root')}
             </Link>
           </BreadcrumbLink>
         </BreadcrumbItem>
 
-        {pages?.map((p, i) => (
-          <Fragment key={p + i}>
+        {pages?.map((segment, i) => (
+          <Fragment key={segment + i}>
             <BreadcrumbSeparator />
             <BreadcrumbItem className='capitalize'>
               {isCurrentPage(i) ? (
-                <BreadcrumbPage>{p}</BreadcrumbPage>
+                <BreadcrumbPage>{t(segment as Any)}</BreadcrumbPage>
               ) : (
                 <BreadcrumbLink asChild>
-                  <Link href={'/' + pages.slice(0, i + 1).join('/')}>{p}</Link>
+                  <Link href={'/' + pages.slice(0, i + 1).join('/')}>{t(segment as Any)}</Link>
                 </BreadcrumbLink>
               )}
             </BreadcrumbItem>

src/components/Shared/StopwatchTime.tsx

@@ -2,6 +2,8 @@
 
 import { useCallback, useEffect, useState } from 'react'
 import { differenceInMilliseconds, formatDuration } from 'date-fns'
+import { de, enUS } from 'date-fns/locale'
+import { useCurrentLocale } from '@/src/i18n/client-localization'
 
 /**
  * This component essentially returns / displays the time that a user e.g. spents on a page.
@@ -10,6 +12,7 @@ import { differenceInMilliseconds, formatDuration } from 'date-fns'
  * @returns The time that has passed since the `start`
  */
 export function StopwatchTime({ start: rawStartDate, delimiter = ' and ' }: { start: Date; delimiter?: string }) {
+  const currentLocale = useCurrentLocale()
   const [timeSpent, setTimeSpent] = useState<string | null>(null)
   const [startDate] = useState(new Date(Date.parse(rawStartDate.toString()))) //* ensure date-object even if stringified
 
@@ -18,9 +21,12 @@ export function StopwatchTime({ start: rawStartDate, delimiter = ' and ' }: { st
     const differenceDate = new Date(difference)
 
     setTimeSpent(
-      formatDuration({ seconds: differenceDate.getSeconds(), minutes: differenceDate.getMinutes() || undefined, hours: differenceDate.getHours() - 1 || undefined }, { zero: true, delimiter }),
+      formatDuration(
+        { seconds: differenceDate.getSeconds(), minutes: differenceDate.getMinutes() || undefined, hours: differenceDate.getHours() - 1 || undefined },
+        { zero: true, delimiter, locale: currentLocale === 'de' ? de : enUS },
+      ),
     )
-  }, [startDate, setTimeSpent, delimiter])
+  }, [startDate, setTimeSpent, delimiter, currentLocale])
 
   useEffect(() => {
     // eslint-disable-next-line react-hooks/set-state-in-effect

src/components/Shared/Tooltip.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 import { Tooltip as ShadcnTooltip, TooltipContent, TooltipTrigger } from '@/src/components/shadcn/tooltip'
 import { cn } from '@/src/lib/Shared/utils'
@@ -12,9 +13,29 @@ export type TooltipProps = Omit<React.ComponentProps<typeof TooltipPrimitive.Con
 }
 
 export default function Tooltip({ disabled, config = {}, delay = 250, variant = 'normal', content, children, ...props }: TooltipProps) {
+  const [isHovered, setIsHovered] = useState(false)
+  const [isPinned, setPinned] = useState(config.open ?? false)
+
+  useEffect(() => {
+    if (config.open === undefined || config.open === isPinned) return
+
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setPinned(config.open)
+  }, [config.open])
+
   return (
-    <ShadcnTooltip delayDuration={delay} {...config} open={disabled === true ? false : config.open}>
-      <TooltipTrigger asChild>{children}</TooltipTrigger>
+    <ShadcnTooltip
+      delayDuration={delay}
+      {...config}
+      open={disabled === true ? false : isHovered || isPinned}
+      onOpenChange={(isOpen) => {
+        if (!isPinned) setIsHovered(isOpen)
+
+        config.onOpenChange?.(isOpen)
+      }}>
+      <TooltipTrigger asChild onClick={() => setPinned((prev) => !prev)} aria-label='toggle tooltip'>
+        {children}
+      </TooltipTrigger>
       <TooltipContent
         {...props}
         className={cn(

src/components/Shared/form/Field.tsx

@@ -1,18 +1,45 @@
-import { ChangeEvent, useEffect, useRef, useState } from 'react'
+import { ChangeEvent, ComponentProps, JSX, useEffect, useRef, useState } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
 import { InfoIcon, TriangleAlertIcon } from 'lucide-react'
 import { FieldValues, UseFormReturn } from 'react-hook-form'
 import { FormControl, FormField, FormLabel, FormMessage } from '@/src/components/shadcn/form'
 import { Input as ShadcnInput } from '@/src/components/shadcn/input'
+import { Textarea } from '@/src/components/shadcn/textarea'
 import Tooltip from '@/src/components/Shared/Tooltip'
 import { cn } from '@/src/lib/Shared/utils'
 import { DescriptionMap, getDescriptionForRhfName } from '@/src/schemas/utils/extractDescriptions'
 import { Any } from '@/types'
+type BaseFieldProps<Values extends FieldValues> = {
+  form: UseFormReturn<Values>
+  name: Parameters<typeof FormField<Values>>['0']['name']
+  label?: string
+  descriptions?: DescriptionMap
+  showLabel?: boolean
+  labelClassname?: string
+  children?: React.ReactNode
+  containerClassname?: string
+  modifyValue?: (value: Any) => Any
+}
+
+type InputFieldProps = {
+  variant?: 'input'
+  onChange?: (values: ChangeEvent<HTMLInputElement>['target']) => unknown
+} & Omit<ComponentProps<'input'>, 'onChange' | 'name' | 'form'>
+
+type TextareaFieldProps = {
+  variant: 'textarea'
+  onChange?: (values: ChangeEvent<HTMLTextAreaElement>['target']) => unknown
+} & Omit<ComponentProps<typeof Textarea>, 'onChange' | 'name' | 'form' | 'children' | 'type'>
 
+type FieldProps<Values extends FieldValues> = BaseFieldProps<Values> & (InputFieldProps | TextareaFieldProps)
+
+export default function Field<Values extends FieldValues>(props: BaseFieldProps<Values> & InputFieldProps): JSX.Element
+export default function Field<Values extends FieldValues>(props: BaseFieldProps<Values> & TextareaFieldProps): JSX.Element
 export default function Field<Values extends FieldValues>({
   form,
   name,
   onChange,
+  variant = 'input',
   label,
   descriptions,
   showLabel = true,
@@ -21,18 +48,7 @@ export default function Field<Values extends FieldValues>({
   children,
   modifyValue,
   ...props
-}: {
-  form: UseFormReturn<Values>
-  name: Parameters<typeof FormField<Values>>['0']['name']
-  label?: string
-  descriptions?: DescriptionMap
-  showLabel?: boolean
-  labelClassname?: string
-  children?: React.ReactNode
-  containerClassname?: string
-  onChange?: (values: ChangeEvent<HTMLInputElement>['target']) => unknown
-  modifyValue?: (value: Any) => Any
-} & Omit<React.ComponentProps<'input'>, 'onChange' | 'name' | 'form'>) {
+}: FieldProps<Values>) {
   const [isFocused, setIsFocused] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
   const previousFocusState = useRef(false)
@@ -53,21 +69,23 @@ export default function Field<Values extends FieldValues>({
         const showDescription = (isFocused && !hasError) || isHovered
         const description = descriptions ? getDescriptionForRhfName(descriptions, field.name) : undefined
 
+        const ControlledComponent = variant === 'textarea' ? Textarea : ShadcnInput
+
         // when true --> prevents layout shifts when switching between error / description by setting min-h to animation-container. Note this "feature" is only enabled when there is something to switch between (thus, when there is a description (&& !!description))
         const keepAnimationContainerSize = previousFocusState.current && (showDescription || hasError) && !!description
 
-        const fieldOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+        const fieldOnChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
           // use 'custom' onChange to override value
           if (onChange) {
             return field.onChange({
               ...e,
-              target: { value: onChange(e.target) },
+              target: { value: onChange(e.target as Any) },
             })
           }
 
           // auto-support number inputs to use `valueAsNumber`
-          if (props.type === 'number') {
-            return field.onChange({ ...e, target: { ...e.target, value: e.target.valueAsNumber } })
+          if (variant === 'input' && (props as InputFieldProps).type === 'number') {
+            return field.onChange({ ...e, target: { ...e.target, value: (e as ChangeEvent<HTMLInputElement>).target.valueAsNumber } })
           }
 
           return field.onChange(e)
@@ -79,22 +97,19 @@ export default function Field<Values extends FieldValues>({
 
             <div className={cn('relative grid', containerClassname)}>
               <FormControl>
-                <ShadcnInput
-                  autoComplete={field.name.includes('password') ? 'current-password' : field.name}
-                  // 'pr-8' moves input indicators like 'number' | 'date' to the left to make room for the info / error icon and ensures text does not cover info icon
-                  className={cn('peer hover:cursor-text', (description || hasError) && 'pr-8')}
+                <ControlledComponent
                   {...field}
+                  {...(props as Any)}
                   value={modifyValue ? modifyValue(field.value) : field.value}
-                  {...props}
                   disabled={field.disabled || props.disabled}
+                  className={cn('peer hover:cursor-text', (description || hasError) && 'pr-8', props.className)}
                   onFocus={(e) => {
-                    // this prevents the description from being shown when the checkbox is clicked --> thus has focus
-                    if (props.type !== 'checkbox') setIsFocused(true)
-                    props.onFocus?.(e)
+                    setIsFocused(true)
+                    props.onFocus?.(e as Any)
                   }}
                   onBlur={(e) => {
                     setIsFocused(false)
-                    props.onBlur?.(e)
+                    props.onBlur?.(e as Any)
                     field.onBlur()
                   }}
                   onChange={fieldOnChange}
@@ -120,7 +135,7 @@ export default function Field<Values extends FieldValues>({
                         // disabled state styles
                         'data-[disabled=true]:text-muted-foreground/60 data-[disabled=true]:hover:text-muted-foreground/70 dark:data-[disabled=true]:hover:text-muted-foreground',
                         // positions the icon next to the checkbox
-                        props.type === 'checkbox' && 'inset-y-0 right-auto left-7 items-center',
+                        variant === 'input' && (props as InputFieldProps).type === 'checkbox' && 'inset-y-0 right-auto left-7 items-center',
                         !description && 'hidden',
                       )}>
                       <InfoIcon className={cn('size-4')} />
@@ -137,7 +152,7 @@ export default function Field<Values extends FieldValues>({
                     className={cn(
                       'absolute inset-y-0 top-2.5 right-3 z-10 flex items-baseline text-destructive',
                       // positions the icon next to the checkbox
-                      props.type === 'checkbox' && 'top-0.5 right-auto bottom-0 left-7 items-baseline',
+                      variant === 'input' && (props as InputFieldProps).type === 'checkbox' && 'top-0.5 right-auto bottom-0 left-7 items-baseline',
                     )}>
                     <TriangleAlertIcon className={cn('size-4')} />
                   </motion.div>

src/components/courses/(hamburger-menu)/CourseActionMenu.tsx

@@ -165,7 +165,11 @@ export default function CourseActionMenu({ id, questions, share_key, owner_id, c
             {t('clone_course.label')}
             <CopyPlusIcon className='size-4 text-neutral-600 group-data-disabled:text-inherit dark:text-neutral-400 dark:group-data-disabled:text-inherit' />
           </DropdownMenuItem>
-          <DropdownMenuItem disabled>{t('inspect_statistics.label')}</DropdownMenuItem>
+          <DropdownMenuItem>
+            <Link href={`/checks/${share_key}/results`} className='flex flex-1 justify-between'>
+              {t('inspect_statistics.label')}
+            </Link>
+          </DropdownMenuItem>
         </DropdownMenuGroup>
         <DropdownMenuSeparator />