Fetch and display plan snapshot tags

src/components/plan/PlanSnapshot.svelte

@@ -10,13 +10,27 @@
   import MenuItem from '../menus/MenuItem.svelte';
   import Card from '../ui/Card.svelte';
   import StatusBadge from '../ui/StatusBadge.svelte';
+  import Tag from '../ui/Tags/Tag.svelte';
 
-  export let planSnapshot: PlanSnapshot;
   export let activePlanSnapshotId: PlanSnapshot['snapshot_id'] | null;
+  export let maxVisibleTags: number = 4;
+  export let planSnapshot: PlanSnapshot;
 
   let menu: Menu;
+  let showMoreTags: boolean = false;
+
+  $: moreTagsAvailable = planSnapshot.tags.length > maxVisibleTags;
+  $: visibleTags =
+    moreTagsAvailable && showMoreTags
+      ? planSnapshot.tags.map(tag => tag.tag)
+      : planSnapshot.tags.map(tag => tag.tag).slice(0, maxVisibleTags);
 
   const dispatch = createEventDispatcher();
+
+  function onShowMoreClick(event: MouseEvent) {
+    event.stopPropagation();
+    showMoreTags = !showMoreTags;
+  }
 </script>
 
 <Card
@@ -47,6 +61,20 @@
       </div>
     </div>
   </div>
+  <div class="plan-snapshot--tags">
+    {#each visibleTags as tag (tag.id)}
+      <Tag {tag} removable={false} />
+    {/each}
+    {#if moreTagsAvailable}
+      <button class="st-button tertiary plan-snapshot--tags-show-more" on:click={onShowMoreClick}>
+        {#if showMoreTags}
+          Show less
+        {:else}
+          +{planSnapshot.tags.length - maxVisibleTags} more
+        {/if}
+      </button>
+    {/if}
+  </div>
 </Card>
 
 <style>
@@ -67,4 +95,26 @@
     padding: 0;
     width: 24px;
   }
+
+  .plan-snapshot--tags {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    gap: 2px;
+    margin: 0;
+    margin-top: 4px;
+    padding: 0;
+  }
+
+  .plan-snapshot--tags-show-more {
+    color: var(--st-gray-60);
+    height: 20px;
+    margin-left: 4px;
+    padding: 0px 0px;
+  }
+
+  .plan-snapshot--tags-show-more:hover {
+    background: unset;
+    color: var(--st-gray-100);
+  }
 </style>

src/types/plan-snapshot.ts

@@ -1,5 +1,6 @@
 import type { UserId } from './app';
 import type { SimulationDataset } from './simulation';
+import type { Tag } from './tags';
 
 export type PlanSnapshot = {
   description: string;
@@ -8,6 +9,7 @@ export type PlanSnapshot = {
   simulation: SimulationDataset | null;
   snapshot_id: number;
   snapshot_name: string;
+  tags: { tag: Tag }[];
   taken_at: string;
   taken_by: UserId;
 };

src/utilities/gql.ts

@@ -1685,6 +1685,13 @@ const gql = {
         description
         taken_by
         taken_at
+        tags {
+          tag {
+            color
+            id
+            name
+          }
+        }
       }
     }
   `,