From 2f3baeeebdf5cdcdcef411e4ed08511f6236b2df Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Mon, 25 Nov 2024 11:14:53 -0500
Subject: [PATCH] Refactor document/Access to common component, use in Project
 header

---
 .../{documents => common}/Access.svelte          | 16 +++++++++-------
 .../components/documents/DocumentListItem.svelte |  3 +--
 src/lib/components/documents/Header.svelte       |  2 +-
 .../__snapshots__/DocumentListItem.test.ts.snap  |  1 +
 src/lib/components/projects/ProjectHeader.svelte |  5 +++--
 5 files changed, 15 insertions(+), 12 deletions(-)
 rename src/lib/components/{documents => common}/Access.svelte (81%)

diff --git a/src/lib/components/documents/Access.svelte b/src/lib/components/common/Access.svelte
similarity index 81%
rename from src/lib/components/documents/Access.svelte
rename to src/lib/components/common/Access.svelte
index a8c106197..bd8f56e13 100644
--- a/src/lib/components/documents/Access.svelte
+++ b/src/lib/components/common/Access.svelte
@@ -22,7 +22,7 @@
     },
   ];
 
-  export function getLevel(access: Access): Level | undefined {
+  export function getLevel(access: Access): Maybe<Level> {
     return levels.find((level) => level.value === access);
   }
 </script>
@@ -30,16 +30,18 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
 
-  import type { Access } from "$lib/api/types";
+  import type { Access, Maybe } from "$lib/api/types";
   import type { Level } from "$lib/components/inputs/AccessLevel.svelte";
 
-  export let level: Level;
+  export let level: Maybe<Level> = undefined;
 </script>
 
-<div class="access {level.value}">
-  <svelte:component this={level.icon} height="1em" width="1em" />
-  {$_(level.title)}
-</div>
+{#if level}
+  <div class="access {level.value}">
+    <svelte:component this={level.icon} height="1em" width="1em" />
+    {$_(level.title)}
+  </div>
+{/if}
 
 <style>
   .access {
diff --git a/src/lib/components/documents/DocumentListItem.svelte b/src/lib/components/documents/DocumentListItem.svelte
index 4623a7583..b7bfe3c06 100644
--- a/src/lib/components/documents/DocumentListItem.svelte
+++ b/src/lib/components/documents/DocumentListItem.svelte
@@ -13,8 +13,7 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
   import { _ } from "svelte-i18n";
   import { Alert24, Hourglass24, File24 } from "svelte-octicons";
 
-  import DocAccess, { getLevel } from "../documents/Access.svelte";
-  import Flex from "../common/Flex.svelte";
+  import DocAccess, { getLevel } from "../common/Access.svelte";
   import KV from "../common/KV.svelte";
   import NoteTab from "../viewer/NoteTab.svelte";
 
diff --git a/src/lib/components/documents/Header.svelte b/src/lib/components/documents/Header.svelte
index f25af09b7..c654105bb 100644
--- a/src/lib/components/documents/Header.svelte
+++ b/src/lib/components/documents/Header.svelte
@@ -12,7 +12,7 @@
 
   import { ALLOWED_TAGS, ALLOWED_ATTR } from "@/config/config.js";
   import { remToPx } from "@/lib/utils/layout";
-  import Access, { getLevel } from "./Access.svelte";
+  import Access, { getLevel } from "../common/Access.svelte";
 
   export let document: Document;
 
diff --git a/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap b/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
index 5ea5be0ac..b99bbaaac 100644
--- a/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
+++ b/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
@@ -52,6 +52,7 @@ exports[`DocumentListItem > renders 1`] = `
              
             Public
           </div>
+          
         </div>
       </div>
        
diff --git a/src/lib/components/projects/ProjectHeader.svelte b/src/lib/components/projects/ProjectHeader.svelte
index 4a1d3391b..b96016d36 100644
--- a/src/lib/components/projects/ProjectHeader.svelte
+++ b/src/lib/components/projects/ProjectHeader.svelte
@@ -5,6 +5,7 @@
   import Flex from "$lib/components/common/Flex.svelte";
   import { remToPx } from "$lib/utils/layout";
   import ProjectPin from "./ProjectPin.svelte";
+  import Access, { getLevel } from "../common/Access.svelte";
 
   export let project: Project;
   export let show = {
@@ -29,9 +30,9 @@
     {#if show.access}
       <div class="access">
         {#if project.private}
-          <Flex align="center"><Lock16 /> {$_("projects.access.private")}</Flex>
+          <Access level={getLevel("private")} />
         {:else}
-          <Flex align="center"><Globe16 /> {$_("projects.access.public")}</Flex>
+          <Access level={getLevel("public")} />
         {/if}
       </div>
     {/if}