From f1cbda66c115be136c58a4077fc5a2194dc425a7 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Tue, 21 May 2024 17:07:12 -0400
Subject: [PATCH] Everything but the excerpt

---
 src/lib/api/documents.ts                      |   2 +-
 .../fixtures/documents/document-expanded.json | 180 ++++++++++++++++--
 src/lib/components/documents/Note.svelte      | 116 ++++++++++-
 .../documents/stories/Note.stories.svelte     |   6 +-
 4 files changed, 279 insertions(+), 25 deletions(-)

diff --git a/src/lib/api/documents.ts b/src/lib/api/documents.ts
index 4b42cf080..268bf2681 100644
--- a/src/lib/api/documents.ts
+++ b/src/lib/api/documents.ts
@@ -70,7 +70,7 @@ export async function get(
     "projects",
     "revisions",
     "sections",
-    "notes",
+    "notes.user",
   ];
   endpoint.searchParams.set("expand", expand.join(","));
 
diff --git a/src/lib/api/fixtures/documents/document-expanded.json b/src/lib/api/fixtures/documents/document-expanded.json
index 9b51b69a0..758eb2dcd 100644
--- a/src/lib/api/fixtures/documents/document-expanded.json
+++ b/src/lib/api/fixtures/documents/document-expanded.json
@@ -74,7 +74,17 @@
   "notes": [
     {
       "id": 551,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 0,
       "access": "public",
@@ -90,7 +100,17 @@
     },
     {
       "id": 549,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 0,
       "access": "public",
@@ -106,7 +126,17 @@
     },
     {
       "id": 550,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 0,
       "access": "public",
@@ -122,7 +152,17 @@
     },
     {
       "id": 552,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 0,
       "access": "public",
@@ -138,7 +178,17 @@
     },
     {
       "id": 554,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 1,
       "access": "public",
@@ -154,7 +204,17 @@
     },
     {
       "id": 553,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 1,
       "access": "public",
@@ -170,7 +230,17 @@
     },
     {
       "id": 556,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 2,
       "access": "public",
@@ -186,7 +256,17 @@
     },
     {
       "id": 555,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 2,
       "access": "public",
@@ -202,7 +282,17 @@
     },
     {
       "id": 557,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 2,
       "access": "public",
@@ -218,7 +308,17 @@
     },
     {
       "id": 558,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 2,
       "access": "public",
@@ -234,7 +334,17 @@
     },
     {
       "id": 560,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 4,
       "access": "public",
@@ -250,7 +360,17 @@
     },
     {
       "id": 559,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 4,
       "access": "public",
@@ -266,7 +386,17 @@
     },
     {
       "id": 562,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 5,
       "access": "public",
@@ -282,7 +412,17 @@
     },
     {
       "id": 561,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 5,
       "access": "public",
@@ -298,7 +438,17 @@
     },
     {
       "id": 563,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 6,
       "access": "public",
diff --git a/src/lib/components/documents/Note.svelte b/src/lib/components/documents/Note.svelte
index 12ed83840..d4ef56aac 100644
--- a/src/lib/components/documents/Note.svelte
+++ b/src/lib/components/documents/Note.svelte
@@ -4,22 +4,56 @@
   It has two states, focused and normal.
 -->
 <script lang="ts">
+  import type { User } from "@/api/types/orgAndUser";
   import type { Note } from "$lib/api/types";
 
+  import DOMPurify from "isomorphic-dompurify";
   import { _ } from "svelte-i18n";
-  import { Pencil16, Trash16 } from "svelte-octicons";
+  import {
+    Globe16,
+    Lock16,
+    Pencil16,
+    People16,
+    Trash16,
+  } from "svelte-octicons";
   import Action from "../common/Action.svelte";
-  import SignedIn from "../common/SignedIn.svelte";
 
   import { noteHashUrl, width, height } from "$lib/api/notes";
   import { pageHashUrl } from "$lib/api/documents";
+  import { not } from "ajv/dist/compile/codegen";
 
   export let note: Note;
   export let focused = false;
 
+  const access = {
+    private: {
+      value: $_("access.private.value"),
+      title: $_("access.private.title"),
+      icon: Lock16,
+    },
+    organization: {
+      value: $_("access.organization.value"),
+      title: $_("access.organization.title"),
+      icon: People16,
+    },
+    public: {
+      value: $_("access.public.value"),
+      title: $_("access.public.title"),
+      icon: Globe16,
+    },
+  };
+
   $: id = noteHashUrl(note).replace("#", "");
   $: href = noteHashUrl(note);
   $: page_number = note.page_number + 1; // note pages are 0-indexed
+  $: user = typeof note.user === "object" ? (note.user as User) : null;
+
+  function clean(html: string) {
+    return DOMPurify.sanitize(html, {
+      USE_PROFILES: { html: true },
+      ALLOWED_TAGS: ["a", "strong", "em", "b", "i"],
+    });
+  }
 </script>
 
 {#if focused}
@@ -27,12 +61,12 @@
     <header>
       <h3>{note.title}</h3>
       <div class="actions">
-        <SignedIn>
+        {#if note.edit_access}
           <Action icon={Pencil16}>Edit</Action>
           <Action --color="var(--red)" --fill="var(--red)" icon={Trash16}
             >Delete</Action
           >
-        </SignedIn>
+        {/if}
       </div>
     </header>
     <div class="excerpt">
@@ -46,9 +80,32 @@
       <div class="highlight"></div>
     </div>
     <div class="content">
-      {note.content}
+      <p>{@html clean(note.content)}</p>
     </div>
-    <footer></footer>
+    <footer>
+      {#if note.edit_access}
+        <label class="access">
+          <svelte:component this={access[note.access].icon} />
+          <span class="sr-only">{$_("access.access")}</span>
+          <select name="access" value={note.access}>
+            {#each Object.values(access) as opt}
+              <option value={opt.value}>{opt.title}</option>
+            {/each}
+          </select>
+        </label>
+      {:else}
+        <span class="access {note.access}">
+          <svelte:component this={access[note.access].icon} />
+          {$_(`access.${access[note.access].value}.title`)}
+        </span>
+      {/if}
+
+      {#if user}
+        <p class="author">
+          {$_("annotation.by", { values: { name: user.name } })}
+        </p>
+      {/if}
+    </footer>
   </div>
 {:else}
   <a
@@ -140,4 +197,51 @@
   h4 a:hover {
     text-decoration: underline;
   }
+
+  footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+  }
+
+  footer p {
+    color: var(--gray-4, #5c717c);
+    font-size: var(--font-s);
+  }
+
+  label.access {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  label.access select {
+    border: none;
+    font-family: var(--font-sans);
+    font-size: var(--font-s);
+  }
+
+  span.access {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: var(--font-s);
+  }
+
+  /*   
+  span.access.public {
+    background-color: var(--note-public);
+  }
+
+  span.access.organization {
+    color: var(--note-org);
+    fill: var(--note-org);
+  }
+
+  span.access.private {
+    color: var(--note-private);
+    fill: var(--note-private);
+  }
+ */
 </style>
diff --git a/src/lib/components/documents/stories/Note.stories.svelte b/src/lib/components/documents/stories/Note.stories.svelte
index 8114a61a0..fdd042091 100644
--- a/src/lib/components/documents/stories/Note.stories.svelte
+++ b/src/lib/components/documents/stories/Note.stories.svelte
@@ -15,10 +15,10 @@
   };
 </script>
 
-<Story name="small">
+<Story name="default">
   <Note focused note={notes[0]} />
 </Story>
 
-<Story name="bigger">
-  <Note focused note={notes[1]} />
+<Story name="editable">
+  <Note focused note={{ ...notes[1], edit_access: true }} />
 </Story>