1  <script lang="ts" context="module">
 2      import type { Shelf, Annotation } from '@jet-app/app-store/api/models';
 3  
 4      interface AnnotationShelf extends Shelf {
 5          items: Annotation[];
 6      }
 7  
 8      export function isAnnotationShelf(shelf: Shelf): shelf is AnnotationShelf {
 9          const { contentType, items } = shelf;
10  
11          return contentType === 'annotation' && Array.isArray(items);
12      }
13  </script>
14  
15  <script lang="ts">
16      import Grid from '~/components/Grid.svelte';
17      import CollapsableContent from '~/components/CollapsableContent.svelte';
18      import AnnotationItem from '~/components/jet/item/Annotation/AnnotationItem.svelte';
19      import ShelfWrapper from '~/components/Shelf/Wrapper.svelte';
20  
21      export let shelf: AnnotationShelf;
22  </script>
23  
24  <ShelfWrapper {shelf}>
25      <dl>
26          <Grid items={shelf.items} gridType="F" let:item>
27              <dt>{item.title}</dt>
28  
29              {#if item.summary}
30                  <CollapsableContent>
31                      <svelte:fragment slot="summary">
32                          {item.summary}
33                      </svelte:fragment>
34  
35                      <AnnotationItem {item} />
36                  </CollapsableContent>
37              {:else}
38                  <AnnotationItem {item} />
39              {/if}
40          </Grid>
41      </dl>
42  </ShelfWrapper>
43  
44  <style>
45      dt {
46          color: var(--systemSecondary);
47          margin-bottom: 4px;
48      }
49  </style>