feat: add similarity view

Author: danielroe

app/components/GitHubIssue.vue

@@ -15,7 +15,7 @@ defineProps({
     type: Number,
     required: true,
   },
-  labels: Array as () => Array<string | { name: string, color: string }>,
+  labels: Array as () => Array<string | { name: string, color?: string }>,
   // eslint-disable-next-line vue/prop-name-casing
   updated_at: {
     type: String,
@@ -47,7 +47,7 @@ function labelColors(color: string) {
         :href="url"
         target="_blank"
       >
-        {{ title }}
+        {{ title?.trim() }}
       </NuxtLink>
       <div
         class="text-xs relative md:absolute md:mt-6 text-gray-400 mb-1"
@@ -72,7 +72,19 @@ function labelColors(color: string) {
           relative
         />
         &middot;
-        {{ Math.floor(avgSimilarity * 100) }}% similar
+        <NuxtLink
+          class="no-underline hover:underline color-current"
+          :to="owner && repository ? {
+            name: 'owner-repo-issue',
+            params: {
+              owner: owner,
+              repo: repository,
+              issue: number,
+            },
+          } : ''"
+        >
+          {{ Math.floor(avgSimilarity * 100) }}% similar
+        </NuxtLink>
       </div>
       <div class="flex flex-row gap-1 items-baseline flex-wrap md:flex-nowrap">
         <span

app/components/GitHubIssueLoading.vue

@@ -0,0 +1,8 @@
+<template>
+  <article>
+    <div class="flex flex-row gap-2 leading-tightest no-underline color-current">
+      <div class="flex-shrink-0 text-gray-500 i-tabler-circle-dot inline-block w-5 h-5" />
+      <div class="rounded-full h-4 bg-gray-500 w-70" />
+    </div>
+  </article>
+</template>

app/pages/[owner]/[repo]/[issue].vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+const route = useRoute('owner-repo-issue')
+const { data: issues, status } = useFetch(`/api/similarity/${route.params.owner}/${route.params.repo}/${route.params.issue}`, {
+  baseURL: useRuntimeConfig().public.remote,
+  default: () => [],
+  transform: data => data.filter((i): i is NonNullable<typeof i> => !!(i && i.url)),
+})
+</script>
+
+<template>
+  <div>
+    <section
+      v-if="status === 'pending' || status === 'idle'"
+      class="flex flex-col gap-4 md:rounded-md md:border-solid border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid animate-pulse"
+      :style="{ '--section-index': 1 }"
+    >
+      <h2 class="flex items-center">
+        <span class="text-gray-500 inline-block mr-1 font-normal">#</span>
+        <span class="inline-block rounded-md h-5 bg-gray-500 w-5" />
+      </h2>
+      <GitHubIssueLoading
+        v-for="s in Math.round(Math.random() * 4) + 1"
+        :key="s"
+      />
+    </section>
+    <section
+      v-else
+      class="flex flex-col gap-4 md:rounded-md md:border-solid border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
+      :style="{ '--section-index': 1 }"
+    >
+      <h2 class="flex items-center">
+        <span class="text-gray-500 inline-block mr-1 font-normal">#</span>
+        {{ issues[0]?.title }}
+      </h2>
+      <GitHubIssue
+        v-for="issue in issues"
+        :key="issue.url"
+        :url="issue.url"
+        :title="issue.title"
+        :owner="issue.owner"
+        :repository="issue.repository"
+        :number="issue.number"
+        :avg-similarity="1 - issue.score"
+        :labels="issue.labels"
+        :updated_at="issue.updated_at"
+      />
+    </section>
+  </div>
+</template>
+
+<style scoped>
+section:first-of-type {
+  view-transition-name: var(--section-index);
+}
+</style>

app/pages/[owner]/[repo]/index.vue

@@ -34,8 +34,10 @@ const openState = reactive<Record<string, boolean>>({})
 <template>
   <div>
     <form @submit.prevent="() => refresh()">
-      <p class="flex gap-2 items-center">
-        {{ selectedRepo }}
+      <div class="flex gap-2 items-center">
+        <h2 class="text-base font-normal">
+          {{ selectedRepo }}
+        </h2>
         <button
           class="rounded-full w-7 h-7 flex items-center justify-center border-solid border border-gray-700 bg-transparent color-gray-400 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors flex-shrink-0"
           :class="{ 'animate-spin opacity-50 pointer-events-none': status === 'pending' || status === 'idle' }"
@@ -47,7 +49,7 @@ const openState = reactive<Record<string, boolean>>({})
           />
           <span class="sr-only">refresh data</span>
         </button>
-      </p>
+      </div>
       <label class="w-full border-solid border border-gray-600 rounded-md flex flex-row items-center relative">
         <span class="sr-only">pick a repository to cluster issues</span>
         <select
@@ -79,16 +81,10 @@ const openState = reactive<Record<string, boolean>>({})
           <span class="text-gray-500 inline-block mr-1 font-normal">#</span>
           <span class="inline-block rounded-md h-5 bg-gray-500 w-5" />
         </h2>
-        <article>
-          <div
-            class="flex flex-row gap-2 leading-tightest no-underline color-current"
-          >
-            <span
-              class="flex-shrink-0 text-gray-500 i-tabler-circle-dot inline-block w-5 h-5"
-            />
-            <div class="rounded-full h-4 bg-gray-500 w-70" />
-          </div>
-        </article>
+        <GitHubIssueLoading
+          v-for="s in Math.round(Math.random() * 3) + 1"
+          :key="s"
+        />
       </section>
     </template>
     <template v-else-if="!clusters.length">