created the SimilarIssue component

packages/webext/src/components.d.ts

@@ -9,5 +9,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     Logo: typeof import('./components/Logo.vue')['default']
     SharedSubtitle: typeof import('./components/SharedSubtitle.vue')['default']
+    SimilarIssue: typeof import('./components/SimilarIssue.vue')['default']
   }
 }

packages/webext/src/components/SimilarIssue.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+interface Issue {
+  id: number
+  dateTime: string
+  title: string
+  repository: string
+  similarityPercentage: number
+  description?: string
+}
+
+defineProps<{
+  issue: Issue
+}>()
+
+function generateIssueUrl(issue: Issue): string {
+  return new URL(`/${issue.repository}/issues/${issue.id}`, 'https://github.com').toString()
+}
+
+function generateUnsightDotDevUrl(issue: Issue): string {
+  return new URL(`/${issue.repository}/issue/${issue.id}`, 'https://unsight.dev').toString()
+}
+</script>
+
+<template>
+  <article class="flex flex-row gap-2 leading-tightest">
+    <span class="flex-shrink-0 inline-block w-5 h-5 i-tabler-circle-dot text-green-500" />
+    <div class="flex flex-row gap-2 flex-wrap md:flex-nowrap md:pb-6 flex-grow">
+      <a
+        :href="generateIssueUrl(issue)" target="_blank"
+        class="line-clamp-1 flex-grow text-sm md:text-base lg:flex-grow-0 no-underline color-current hover:underline"
+      >{{
+        issue.title
+      }}</a>
+      <div class="text-xs relative md:absolute md:mt-6 text-gray-400 mb-1">
+        <a aria-current="page" :href="generateIssueUrl(issue)" class="no-underline hover:underline color-current">{{
+          issue.repository }}</a>
+        · updated <time :datetime="issue.dateTime">{{ issue.dateTime }}</time> · <a
+          :href="generateUnsightDotDevUrl(issue)" class="no-underline hover:underline color-current"
+        >{{
+          issue.similarityPercentage }}% similar </a>
+      </div>
+      <div class="flex flex-row gap-1 items-baseline flex-wrap md:flex-nowrap" />
+    </div>
+  </article>
+</template>

packages/webext/src/contentScripts/index.ts

@@ -13,8 +13,9 @@ import { setupApp } from '~/logic/common-setup'
     // We can check the path, but a getElementById is a fast check
     // Note that with GitHub, they change the UI occasionally so this might break
     const issueHeader = document.getElementById('partial-discussion-header')
-    if (!issueHeader)
+    if (!issueHeader) {
       return
+    }
 
     // communication example: send previous tab title from background page
     onMessage('tab-prev', ({ data }) => {

packages/webext/src/contentScripts/views/App.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import 'uno.css'
+import SimilarIssue from '~/components/SimilarIssue.vue'
+
+const issues = [
+  { id: 1, repository: 'nickytonline/yoyo', title: 'First Issue', description: 'This is the first issue', similarityPercentage: 90, dateTime: '2021-10-01T00:00:00Z' },
+  { id: 2, repository: 'bobbyt/amazer', title: 'Second Issue', description: 'This is the second issue', similarityPercentage: 80, dateTime: '2024-07-08T00:00:00Z' },
+  { id: 3, repository: 'jam/booya', title: 'Third Issue', description: 'This is the third issue', similarityPercentage: 70, dateTime: '2024-12-10T00:00:00Z' },
+]
 </script>
 
-<!-- This is hard-coded mock data for the time being. Just figuring my way around Vue and unsight.dev still -->
 <template>
   <details class="grid gap-2">
     <summary>Similar issues</summary>
-    <article class="flex flex-row gap-2 leading-tightest" data-v-acbad306="" data-v-9a90de38="">
-      <span class="flex-shrink-0 inline-block w-5 h-5 i-tabler-circle-dot text-green-500" data-v-9a90de38="" /><div class="flex flex-row gap-2 flex-wrap md:flex-nowrap md:pb-6 flex-grow" data-v-9a90de38="">
-        <a href="https://github.com/nickytonline/test-repo-for-unsight-dev/issues/1" rel="noopener noreferrer" target="_blank" class="line-clamp-1 flex-grow text-sm md:text-base lg:flex-grow-0 no-underline color-current hover:underline" data-v-9a90de38="">CI Fails</a><div class="text-xs relative md:absolute md:mt-6 text-gray-400 mb-1" data-v-9a90de38="">
-          <a aria-current="page" href="/nickytonline/test-repo-for-unsight-dev" class="router-link-active router-link-exact-active no-underline hover:underline color-current" data-v-9a90de38="">nickytonline/test-repo-for-unsight-dev</a> · updated <time data-relative="true" datetime="2024-12-12T20:05:26.000Z" data-prehydrate-id=":J6wLYSE7Rv:" data-v-9a90de38="">56 hours ago</time> · <a href="/nickytonline/test-repo-for-unsight-dev/1" class="no-underline hover:underline color-current" data-v-9a90de38="">79% similar </a>
-        </div><div class="flex flex-row gap-1 items-baseline flex-wrap md:flex-nowrap" />
-      </div>
-    </article>
+    <SimilarIssue v-for="issue in issues" :key="issue.id" :issue="issue" />
   </details>
 </template>