Closes #1: Implement marked and dompurify into new component to displ…

…ay notes built with markdown syntax

package.json

@@ -15,6 +15,7 @@
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/kit": "^1.20.4",
     "@tailwindcss/typography": "^0.5.10",
+    "@types/dompurify": "^3.0.5",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "autoprefixer": "^10.4.14",
@@ -40,8 +41,10 @@
     "bits-ui": "^0.9.2",
     "clsx": "^2.0.0",
     "cmdk-sv": "^0.0.6",
+    "dompurify": "^3.0.6",
     "formsnap": "^0.4.1",
     "lucide-svelte": "^0.290.0",
+    "marked": "^9.1.5",
     "mode-watcher": "^0.0.5",
     "moment": "^2.29.4",
     "pocketbase": "^0.19.0",

src/lib/components/forms/TimeEntryForm.svelte

@@ -42,7 +42,18 @@
     <Form.Item class="flex flex-col">
       <Form.Label>Notes</Form.Label>
       <Form.Textarea class="resize-y" />
-      <Form.Description>Markdown support coming soon...</Form.Description>
+      <Form.Description>
+        Markdown syntax is supported. Click
+        <a
+          href="https://www.markdownguide.org/cheat-sheet/"
+          target="_blank"
+          rel="noreferrer"
+          class="underline hover:text-muted-foreground/80"
+        >
+          here
+        </a>
+        for more info.
+      </Form.Description>
       <Form.Validation />
     </Form.Item>
   </Form.Field>

src/lib/components/ui/NotesDisplay.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import DOMPurify from 'dompurify';
+  import { marked } from 'marked';
+
+  export let notes: string;
+</script>
+
+<div class="prose prose-zinc dark:prose-invert">
+  {@html DOMPurify.sanitize(marked(notes))}
+</div>

src/lib/components/ui/TimeTableActions.svelte

@@ -10,6 +10,7 @@
   import * as DropdownMenu from '../ui/dropdown-menu';
   import * as Form from '../ui/form';
   import { Button } from './button';
+  import NotesDisplay from './NotesDisplay.svelte';
 
   export let id: string;
   export let name: string;
@@ -61,14 +62,12 @@
 </DropdownMenu.Root>
 
 <Dialog.Root bind:open={noteDialogOpen}>
-  <Dialog.Content>
+  <Dialog.Content class="max-w-3xl">
     <Dialog.Header>
       <Dialog.Title>{name}</Dialog.Title>
       <Dialog.Description>{customer} • {humanize(elapsed_time)}</Dialog.Description>
     </Dialog.Header>
-    <div class="prose prose-zinc dark:prose-invert">
-      {notes}
-    </div>
+    <NotesDisplay {notes} />
   </Dialog.Content>
 </Dialog.Root>