Add asset ID to asset box as capsule

src/lib/AssetBox.svelte

@@ -2,27 +2,38 @@
     import type { AssetData } from "$src/types";
 	import Box from "./Box.svelte";
     import SvelteMarkdown from '@humanspeak/svelte-markdown'
+	import Capsule from "./Capsule.svelte";
 
     interface Props {
         data: AssetData;
     }
 
     let { data }: Props = $props();
 </script>
+
 <Box>
     <div class="asset">
         <div>
             <div class="asset-name">
-                <a href="{ data.inventory_url }"> { data.name }</a>
+                <a href="{ data.inventory_url }">
+                    {#if data.id}
+                        <Capsule>
+                            HH{data.id}
+                        </Capsule>
+                    {/if}
+                </a>
+                <a href="{ data.inventory_url }">
+                    { data.name }
+                </a>
             </div>
             <p>
                 <SvelteMarkdown source={data.description} />
             </p>
         </div>
         {#if data.picture.url}
-            <div class="asset-photo">
+            <a href="{ data.inventory_url }" class="asset-photo">
                 <img src="{ data.picture.url }" class="asset-img" alt="">
-            </div>
+            </a>
         {/if}
     </div>
 </Box>
@@ -39,7 +50,7 @@
     }
 
     .asset-photo {
-        width: 350px;
+        display: block;
         margin-right: 4px;
         margin-left: 16px;
         flex-shrink: 0;
@@ -52,7 +63,8 @@
         width: 334px;
         height: 200px;
         object-fit: cover;
-    }    
+    }
+
 
     @media only screen and (max-width: 600px) {
         .asset {

src/lib/Capsule.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+    let props: {
+        children?: Snippet;
+    } = $props();
+</script>
+
+<span class="capsule">
+    {@render props.children?.()}
+</span>
+
+<style>
+    .capsule {
+        background-color: var(--color-secondary);
+        color: white;
+        padding: 2px 4px;
+        border-radius: 4px;
+        font-size: 0.9em;
+        /* margin-left: 8px; */
+        font-size: 18px;
+
+        display: inline-block;
+        vertical-align: middle;
+        margin-bottom: 3px;
+
+    }
+</style>

src/lib/InterviewBox.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { InterviewData } from "$src/types";
 	import Box from "./Box.svelte";
+	import Capsule from "./Capsule.svelte";
 
     interface Props {
         data: InterviewData;
@@ -16,7 +17,10 @@
             <h3>
                 <a href={data.complete ? "/interviews/" + data.slug : undefined}>{ data.title }</a>
                 {#if !data.complete}
-                    <br><span class="in-progress">připravujeme</span>
+                    <br>
+                    <Capsule>
+                        připravujeme
+                    </Capsule>
                 {/if}
             </h3>
             {#if compact}
@@ -82,21 +86,6 @@
         color: black;
     }
 
-    .in-progress {
-        background-color: var(--color-secondary);
-        color: white;
-        padding: 2px 4px;
-        border-radius: 4px;
-        font-size: 0.9em;
-        margin-left: 8px;
-        font-size: 18px;
-
-        display: inline-block;
-        vertical-align: middle;
-        margin-bottom: 3px;
-
-    }
-
     .compact h3 {
         font-size: 1.2em;
     }

src/lib/rhinventory_api.ts

@@ -34,6 +34,7 @@ export async function loadRHInventoryAssetData(
 
     const assets = apiAssets.assets.map(APIAsset => {
         return {
+            id: APIAsset.id,
             name: APIAsset.name,
             picture: {url: APIAsset.primary_image_path},
             description: APIAsset.description,

src/types.ts

@@ -47,6 +47,7 @@ export interface InterviewData {
 }
 
 export interface AssetData {
+    id?: string;
     name: string;
     picture: Photo;
     description: string;