Display bomRef in details and allow searching for bomRef

Author: twwd

src/lib/components/ComponentInfo.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Component } from '$lib/cyclonedx/models';
-	import { Tile } from 'carbon-components-svelte';
+	import { CodeSnippet, Tile } from 'carbon-components-svelte';
 
 	const { component }: { component: Component } = $props();
 </script>
@@ -27,7 +27,13 @@
 			{#if component.purl}
 				<tr>
 					<th>PURL</th>
-					<td>{component.purl}</td>
+					<td><CodeSnippet type="inline" code={component.purl} /></td>
+				</tr>
+			{/if}
+			{#if component['bom-ref']}
+				<tr>
+					<th>BomRef</th>
+					<td><CodeSnippet type="inline" code={component['bom-ref']} /></td>
 				</tr>
 			{/if}
 		</tbody>

src/lib/components/ComponentsTable.svelte

@@ -28,7 +28,8 @@
 				name: component.name,
 				group: component.group,
 				version: component.version,
-				purl: component.purl
+				purl: component.purl,
+				bomRef: component['bom-ref']
 			};
 		});
 	});