Refactor document/Access to common component, use in Project header

src/lib/components/documents/Access.svelte → src/lib/components/common/Access.svelte

@@ -22,24 +22,26 @@
     },
   ];
 
-  export function getLevel(access: Access): Level | undefined {
+  export function getLevel(access: Access): Maybe<Level> {
     return levels.find((level) => level.value === access);
   }
 </script>
 
 <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 {

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";
 

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;
 

src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap

@@ -52,6 +52,7 @@ exports[`DocumentListItem > renders 1`] = `
              
             Public
           </div>
+          
         </div>
       </div>
        

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}