feat: add instructions dialog to form

Author: joshunrau

packages/instrument-renderer/src/components/FormContent/FormContent.tsx

@@ -1,5 +1,7 @@
-import { Form, Heading } from '@douglasneuroinformatics/libui/components';
+import { Button, Dialog, Form, Heading } from '@douglasneuroinformatics/libui/components';
+import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import type { AnyUnilingualFormInstrument, FormInstrument } from '@opendatacapture/runtime-core';
+import { InfoIcon } from 'lucide-react';
 import type { Promisable } from 'type-fest';
 
 export type FormContentProps = {
@@ -8,9 +10,33 @@ export type FormContentProps = {
 };
 
 export const FormContent = ({ instrument, onSubmit }: FormContentProps) => {
+  const { t } = useTranslation();
+  const instructions = instrument.clientDetails?.instructions ?? instrument.details.instructions;
   return (
     <div className="space-y-6">
-      <Heading variant="h4">{instrument.details.title}</Heading>
+      <div className="flex gap-2">
+        <Heading variant="h4">{instrument.clientDetails?.title ?? instrument.details.title}</Heading>
+        <Dialog>
+          <Dialog.Trigger asChild>
+            <Button disabled={!instructions?.length} size="icon" variant="ghost">
+              <InfoIcon />
+            </Button>
+          </Dialog.Trigger>
+          <Dialog.Content className="sm:max-w-[425px]">
+            <Dialog.Header>
+              <Dialog.Title>
+                {t({
+                  en: 'Instructions',
+                  fr: 'Instructions'
+                })}
+              </Dialog.Title>
+            </Dialog.Header>
+            <Dialog.Body className="py-2">
+              <p className="text-muted-foreground text-sm">{instructions?.join(', ')}</p>
+            </Dialog.Body>
+          </Dialog.Content>
+        </Dialog>
+      </div>
       <Form
         preventResetValuesOnReset
         content={instrument.content}