From 0e2b3263f3947aadc93100a1ab2e9cff9f2dc15a Mon Sep 17 00:00:00 2001
From: Brandon Hurrington <brandon.hurrington@lotto24.de>
Date: Sat, 15 Mar 2025 18:34:36 +0000
Subject: [PATCH 01/12] feat(web): [Issue-19] Alternative repo and cluster view
 initial commit

---
 packages/web/app/components/GitHubIssue.vue     | 8 ++++----
 packages/web/app/pages/[owner]/[repo]/index.vue | 6 ++++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/web/app/components/GitHubIssue.vue b/packages/web/app/components/GitHubIssue.vue
index c4c32e82..b7fe619e 100644
--- a/packages/web/app/components/GitHubIssue.vue
+++ b/packages/web/app/components/GitHubIssue.vue
@@ -39,9 +39,9 @@ function labelColors(color: string) {
 </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">
+  <article class="border-solid border border-gray-600 rounded-md max-w-full overflow-hidden flex flex-row gap-2 leading-tightest">
+    <span class="flex-shrink-0 inline-block h-5 i-tabler-circle-dot text-green-500" />
+    <div class="flex flex-col flex-wrap md:flex-nowrap md:pb-2 flex-grow">
       <NuxtLink
         class="line-clamp-1 flex-grow text-sm md:text-base lg:flex-grow-0 no-underline color-current hover:underline"
         :href="url"
@@ -50,7 +50,7 @@ function labelColors(color: string) {
         {{ title?.trim() }}
       </NuxtLink>
       <div
-        class="text-xs relative md:absolute md:mt-6 text-gray-400 mb-1"
+        class=" text-xs relative md:mt-1 text-gray-400 mb-1 break-words"
       >
         <NuxtLink
           v-if="owner && repository"
diff --git a/packages/web/app/pages/[owner]/[repo]/index.vue b/packages/web/app/pages/[owner]/[repo]/index.vue
index 45cd73da..b6c9d349 100644
--- a/packages/web/app/pages/[owner]/[repo]/index.vue
+++ b/packages/web/app/pages/[owner]/[repo]/index.vue
@@ -160,13 +160,14 @@ const openState = reactive<Record<string, boolean>>({})
       </section>
     </template>
     <template v-else>
+      <section class="grid grid-cols-4 gap-4 ">
       <section
         v-for="(cluster, c) of clusters"
         :key="c"
         :style="{ '--section-index': c }"
-        class="flex flex-col gap-4 md:rounded-md md:border-solid md:border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
+        class=" overflow-hidden flex flex-col gap-4 md:rounded-md md:border-solid md:border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
       >
-        <h2 class="my-4 font-bold text-2xl flex items-baseline">
+        <h2 class=" my-4 font-bold text-2xl flex items-baseline">
           <span class="text-gray-500 inline-block mr-1 font-normal">#</span>{{ c + 1 }}
           <span class="ml-2 font-normal text-lg color-gray-300">&mdash; {{ cluster.title }}</span>
           <span class="ml-auto text-white bg-gray-700 text-sm font-normal rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 border-gray-700 inline-block leading-tight flex items-center">
@@ -195,6 +196,7 @@ const openState = reactive<Record<string, boolean>>({})
           show {{ cluster.issues.length - 5 }} more
         </button>
       </section>
+      </section>
     </template>
   </div>
 </template>

From 124f166ba11ceba71961fe0ecd3596ea9bc4d6d9 Mon Sep 17 00:00:00 2001
From: Brandon Hurrington <brandon.hurrington@lotto24.de>
Date: Wed, 26 Mar 2025 00:59:15 +0000
Subject: [PATCH 02/12] feat: Significant amount of the scaffolding and
 PaperStack work done

---
 packages/web/app/app.vue                      |   2 +-
 packages/web/app/components/ClusterView.vue   |  15 ++
 .../app/components/ClusterViewJunction.vue    |  36 +++
 .../web/app/components/CommandConsole.vue     |  53 +++++
 .../web/app/components/DuplicatesView.vue     |  69 ++++++
 packages/web/app/components/GitHubIssue.vue   |   3 +-
 .../web/app/components/GitHubIssueSketon.vue  |  17 ++
 .../web/app/components/NoClustersView.vue     |  21 ++
 .../web/app/components/RepoViewLayout.vue     |   8 +
 packages/web/app/components/ViewToggle.vue    |  54 +++++
 .../components/column-cell/ClusterItem.vue    |  69 ++++++
 .../app/components/grid-cell/ClusterItem.vue  |  52 +++++
 .../components/paper-stack/ClusterItem.vue    |  76 +++++++
 .../components/paper-stack/ClusterSummary.vue |  36 +++
 .../components/paper-stack/GithubIssue.vue    |  98 ++++++++
 .../components/paper-stack/ShowMoreIssues.vue |  30 +++
 .../web/app/components/svg/ColumnCell.vue     |   9 +
 packages/web/app/components/svg/GridCell.vue  |   9 +
 .../web/app/components/svg/PaperStack.vue     |   9 +
 .../app/composables/command-console-plane.ts  |  27 +++
 .../web/app/composables/fetch-clusters.ts     |   8 +
 .../web/app/composables/fetch-duplicates.ts   |   8 +
 .../composables/{repos.ts => fetch-repos.ts}  |   6 +-
 packages/web/app/composables/selected-repo.ts |   8 +
 packages/web/app/composables/toggle-view.ts   |  19 ++
 .../web/app/pages/[owner]/[repo]/index.vue    | 209 ++----------------
 packages/web/app/pages/index.vue              |   2 +-
 packages/web/app/utils/label-colors.ts        |  16 ++
 .../server/api/clusters/[owner]/[repo].get.ts |   3 +-
 .../api/duplicates/[owner]/[repo].get.ts      |   3 +-
 .../similarity/[owner]/[repo]/[number].get.ts |   2 +-
 packages/web/server/utils/embeddings.ts       |  11 -
 packages/web/shared/models/github-metadata.ts |  17 ++
 33 files changed, 790 insertions(+), 215 deletions(-)
 create mode 100644 packages/web/app/components/ClusterView.vue
 create mode 100644 packages/web/app/components/ClusterViewJunction.vue
 create mode 100644 packages/web/app/components/CommandConsole.vue
 create mode 100644 packages/web/app/components/DuplicatesView.vue
 create mode 100644 packages/web/app/components/GitHubIssueSketon.vue
 create mode 100644 packages/web/app/components/NoClustersView.vue
 create mode 100644 packages/web/app/components/RepoViewLayout.vue
 create mode 100644 packages/web/app/components/ViewToggle.vue
 create mode 100644 packages/web/app/components/column-cell/ClusterItem.vue
 create mode 100644 packages/web/app/components/grid-cell/ClusterItem.vue
 create mode 100644 packages/web/app/components/paper-stack/ClusterItem.vue
 create mode 100644 packages/web/app/components/paper-stack/ClusterSummary.vue
 create mode 100644 packages/web/app/components/paper-stack/GithubIssue.vue
 create mode 100644 packages/web/app/components/paper-stack/ShowMoreIssues.vue
 create mode 100644 packages/web/app/components/svg/ColumnCell.vue
 create mode 100644 packages/web/app/components/svg/GridCell.vue
 create mode 100644 packages/web/app/components/svg/PaperStack.vue
 create mode 100644 packages/web/app/composables/command-console-plane.ts
 create mode 100644 packages/web/app/composables/fetch-clusters.ts
 create mode 100644 packages/web/app/composables/fetch-duplicates.ts
 rename packages/web/app/composables/{repos.ts => fetch-repos.ts} (52%)
 create mode 100644 packages/web/app/composables/selected-repo.ts
 create mode 100644 packages/web/app/composables/toggle-view.ts
 create mode 100644 packages/web/app/utils/label-colors.ts
 create mode 100644 packages/web/shared/models/github-metadata.ts

diff --git a/packages/web/app/app.vue b/packages/web/app/app.vue
index c3601bda..4e905700 100644
--- a/packages/web/app/app.vue
+++ b/packages/web/app/app.vue
@@ -15,7 +15,7 @@ useServerSeoMeta({
   description: 'Detect duplicate GitHub issues, areas of concern and more across related repositories',
 })
 
-const { data: repos } = useRepos()
+const { data: repos } = useFetchRepos()
 </script>
 
 <template>
diff --git a/packages/web/app/components/ClusterView.vue b/packages/web/app/components/ClusterView.vue
new file mode 100644
index 00000000..5c50044a
--- /dev/null
+++ b/packages/web/app/components/ClusterView.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+    import type { IssueMetadata } from '~~/shared/models/github-metadata'
+
+    interface ClusterViewProps {
+        cluster: IssueMetadata;
+    }
+
+    const { cluster } = defineProps<ClusterViewProps>()
+</script>
+
+<template >
+    <div class="border-solid border-2 border-gray-700 rounded-md p-2" >
+        {{ cluster }}
+    </div>
+</template>
diff --git a/packages/web/app/components/ClusterViewJunction.vue b/packages/web/app/components/ClusterViewJunction.vue
new file mode 100644
index 00000000..9facad28
--- /dev/null
+++ b/packages/web/app/components/ClusterViewJunction.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const OWNER_REPO = 'owner-repo'
+
+const route = useRoute(OWNER_REPO)
+
+const { selectedRepo } = useSelectedRepo(route.params.owner, route.params.repo)
+
+const { data: clusters, status } = useFetchClusters(selectedRepo)
+
+const { selectedView } = useToggleViewState()
+</script>
+
+<template>
+    <template v-if="status === 'idle' || status === 'pending'">
+      <GitHubIssueSkeleton />
+    </template>
+
+    <template v-else-if="!clusters.length">
+      <NoClustersView />
+    </template>
+
+    <template v-else>
+        <template v-if="selectedView === 'PaperStack'">
+            <PaperStackClusterItem :clusters="clusters" />
+        </template>
+
+        <template v-if="selectedView === 'GridCell'" >
+            <GridCellClusterItem :clusters="clusters" />            
+        </template>
+
+        <template v-if="selectedView === 'ColumnCell'">
+            <ColumnCellClusterItem :clusters="clusters" />
+        </template>
+    </template>
+</template>
+ 
\ No newline at end of file
diff --git a/packages/web/app/components/CommandConsole.vue b/packages/web/app/components/CommandConsole.vue
new file mode 100644
index 00000000..946886ed
--- /dev/null
+++ b/packages/web/app/components/CommandConsole.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+    import type { RepoMetadata } from '~~/shared/models/github-metadata'
+
+    const REFRESH_DATA = 'refresh data'
+    const PICK_A_REPOSITORY = 'pick a repository to cluster issues'
+    
+    const { selectedRepo, allowedRepos, navigateToRepo, refresh, status } = useCommandConsolePlane()
+</script>
+
+<template>
+    <section class="w-full flex gap-2 justify-between justify-center items-center border-solid border border-gray-700 p-2 rounded-md">
+
+    <form class="flex gap-2  items-center" @submit.prevent="() => refresh()" >
+      <div class="flex gap-2 items-center">
+        <h2 class="text-base my-3 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' }"
+          type="submit"
+        >
+          <span
+            size="medium"
+            class="text-gray-400 flex-shrink-0 i-tabler-refresh inline-block w-4 h-4"
+          />
+          <span class="sr-only">{{ REFRESH_DATA }}</span>
+        </button>
+      </div>
+      <label class="w-full text-xs border-solid border border-gray-600 rounded-md flex flex-row items-center relative">
+        <span class="sr-only">{{ PICK_A_REPOSITORY }}</span>
+        <select
+          :value="selectedRepo"
+          class="pl-8 bg-shark-500 rounded-md pr-2 py-2 color-white border-0 w-full appearance-none"
+          @change="navigateToRepo"
+        >
+          <option
+            v-for="repo in allowedRepos.filter((repo: RepoMetadata) => repo.issuesIndexed > 0)"
+            :key="repo.repo"
+            :selected="repo.repo === selectedRepo"
+          >
+            {{ repo.repo }}
+          </option>
+        </select>
+        <span
+          class="absolute ml-2 text-gray-400 flex-shrink-0 i-tabler-search inline-block w-5 h-5"
+        />
+      </label>
+    </form>
+
+    <ViewToggle />
+  </section>
+</template>
diff --git a/packages/web/app/components/DuplicatesView.vue b/packages/web/app/components/DuplicatesView.vue
new file mode 100644
index 00000000..9dd9632a
--- /dev/null
+++ b/packages/web/app/components/DuplicatesView.vue
@@ -0,0 +1,69 @@
+
+<script setup lang="ts">
+    import type { IssueMetadata } from '~~/shared/models/github-metadata'
+
+    const OWNER_REPO = 'owner-repo'
+    const LOADING_DUPLICATES = 'loading duplicates'
+    const POSSIBLE_DUPLICATE = 'possible duplicate'
+
+    const route = useRoute(OWNER_REPO)
+
+    const { selectedRepo } = useSelectedRepo(route.params.owner, route.params.repo)
+
+    const { data: duplicates, status: duplicateStatus } = useFetchDuplicates(selectedRepo)
+
+    const showDuplicates = ref(false)
+    
+    const typedDuplicates = computed<IssueMetadata[]>(() => {
+        return showDuplicates ? duplicates.value?.map(cluster => cluster) : []}
+    )
+</script>
+
+<template >
+    <div
+      v-if="duplicateStatus !== 'success' && duplicateStatus !== 'error'"
+      class="mt-6 rounded-md border-solid border border-gray-700 bg-transparent color-gray-400 py-2 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 items-center gap-2 justify-center pointer-events-none animate-pulse"
+    >
+      <span
+        size="medium"
+        class="text-gray-400 flex-shrink-0 i-tabler-refresh inline-block w-4 h-4 animate-spin"
+      />
+      {{ LOADING_DUPLICATES }}
+    </div>
+
+    <button
+          v-else-if="!showDuplicates && duplicates.length"
+          class="mt-6 rounded-md border-solid border border-gray-700 bg-transparent color-gray-400 py-2 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 items-center gap-2 justify-center w-full"
+          type="button"
+          @click="showDuplicates = true"
+      >
+          show {{ duplicates?.length }} possible duplicates
+      </button>  
+  <template v-if="showDuplicates">
+      <section
+        v-for="(cluster, i) of typedDuplicates"
+        class="flex flex-col gap-4 md:rounded-md md:border-solid md:border md:border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 flex-wrap border-b-solid"
+      >
+        <h2 class="my-4 font-bold text-2xl flex items-baseline">
+          <span class="text-gray-500 inline-block mr-1 font-normal">#</span>
+          <span>{{ i + 1 }}</span>
+          <span class="ml-auto text-white bg-gray-700 text-sm font-normal rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 border-gray-700 inline-block leading-tight flex items-center">
+            <span class="i-tabler-wash-dryclean-off inline-block w-4 h-4"></span>
+            {{ POSSIBLE_DUPLICATE }}
+          </span>
+        </h2>
+        <GitHubIssue
+          v-for="(issue, j) of cluster"
+          :key="j"
+          :url="issue.url"
+          :title="issue.title"
+          :owner="issue.owner"
+          :repository="issue.repository"
+          :number="issue.number"
+          :avg-similarity="issue.score"
+          :labels="issue.labels"
+          :updated_at="issue.updated_at"
+        />
+      </section>
+  </template>
+</template>
diff --git a/packages/web/app/components/GitHubIssue.vue b/packages/web/app/components/GitHubIssue.vue
index b7fe619e..f7074218 100644
--- a/packages/web/app/components/GitHubIssue.vue
+++ b/packages/web/app/components/GitHubIssue.vue
@@ -39,7 +39,7 @@ function labelColors(color: string) {
 </script>
 
 <template>
-  <article class="border-solid border border-gray-600 rounded-md max-w-full overflow-hidden flex flex-row gap-2 leading-tightest">
+  <article class="border-solid border border-gray-600 rounded-md max-w-full overflow-hidden flex flex-row gap-2 leading-tightest ">
     <span class="flex-shrink-0 inline-block h-5 i-tabler-circle-dot text-green-500" />
     <div class="flex flex-col flex-wrap md:flex-nowrap md:pb-2 flex-grow">
       <NuxtLink
@@ -97,6 +97,7 @@ function labelColors(color: string) {
         </span>
       </div>
     </div>
+  
   </article>
 </template>
 
diff --git a/packages/web/app/components/GitHubIssueSketon.vue b/packages/web/app/components/GitHubIssueSketon.vue
new file mode 100644
index 00000000..e2599020
--- /dev/null
+++ b/packages/web/app/components/GitHubIssueSketon.vue
@@ -0,0 +1,17 @@
+<template >
+    <section
+    v-for="i in 7"
+    :key="i"
+    :style="{ '--section-index': i }"
+    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"
+    >
+    <h2 class="flex items-center my-4 font-bold text-2xl">
+        <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() * 3) + 1"
+        :key="s"
+    />
+    </section>
+</template>
diff --git a/packages/web/app/components/NoClustersView.vue b/packages/web/app/components/NoClustersView.vue
new file mode 100644
index 00000000..7775e626
--- /dev/null
+++ b/packages/web/app/components/NoClustersView.vue
@@ -0,0 +1,21 @@
+
+<script setup lang="ts">
+    const NO_CLUSTERS = 'no clusters could be identified'
+
+</script>
+
+<template >
+      <section
+        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"
+      >
+        <h2 class="flex items-center my-4 font-bold text-2xl">
+          <span class="text-gray-500 inline-block mr-1 font-normal">#</span>
+        </h2>
+        <p class="flex flex-row gap-2 leading-tightest">
+          <span
+            class="flex-shrink-0 text-gray-400 i-tabler-alert-triangle inline-block w-5 h-5"
+          />
+          {{ NO_CLUSTERS }}
+        </p>
+      </section>
+</template>
diff --git a/packages/web/app/components/RepoViewLayout.vue b/packages/web/app/components/RepoViewLayout.vue
new file mode 100644
index 00000000..017dfc91
--- /dev/null
+++ b/packages/web/app/components/RepoViewLayout.vue
@@ -0,0 +1,8 @@
+<!-- TODO: Probably no longer necessary -->
+<template>
+    <slot name="console"></slot> 
+
+    <slot name="duplicates"></slot> 
+
+    <slot name="clusters" ></slot> 
+</template>
diff --git a/packages/web/app/components/ViewToggle.vue b/packages/web/app/components/ViewToggle.vue
new file mode 100644
index 00000000..e0e79062
--- /dev/null
+++ b/packages/web/app/components/ViewToggle.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+
+const { selectedView, toggleViewState, } = useToggleViewState()
+
+</script>
+
+<template>
+    <section class="flex gap-2 items-center p-2 border-solid border border-gray-700 rounded-sm bg-slate-700">
+        <button
+            class="rounded-sm p-0.5 text-md border-solid border bg-slate-950 color-gray-400 transition-colors"
+            :class="[
+                selectedView === 'PaperStack'
+                ? 'border-cyan-400  color-cyan-400 bg-cyan-700 '
+                : 'border-cyan-200 hover:color-cyan-200 hover:bg-cyan-500'
+            ]"
+            type="button"
+            value="PaperStack"
+            @click="toggleViewState($event)"
+            aria-label="PaperStack"
+        >
+            <SvgPaperStack />
+        </button>
+
+        <button
+            class="rounded-sm p-0.5 text-md border-solid border bg-slate-950 color-gray-400 transition-colors"
+            :class="[
+                selectedView === 'GridCell'
+                ? 'border-red-400 color-red-400 bg-red-700'
+                : 'border-red-200 hover:color-red-200 hover:bg-red-500'
+            ]"
+            type="button"
+            value="GridCell"
+            @click="toggleViewState($event)"
+            aria-label="GridCell"
+        >
+            <SvgGridCell />
+        </button>
+
+        <button
+            class="rounded-sm p-0.5 text-md border-solid border border-gray-700 bg-slate-950 color-gray-400 transition-colors"
+            :class="[
+                selectedView === 'ColumnCell'
+                ? 'border-green-400 color-green-400 bg-green-700'
+                : 'border-green-200 hover:color-green-200 hover:bg-green-500'
+            ]"
+            type="button"
+            value="ColumnCell"
+            @click="toggleViewState($event)"
+            aria-label="ColumnCell"
+        >
+            <SvgColumnCell />
+        </button>
+  </section>
+</template>
diff --git a/packages/web/app/components/column-cell/ClusterItem.vue b/packages/web/app/components/column-cell/ClusterItem.vue
new file mode 100644
index 00000000..42f63557
--- /dev/null
+++ b/packages/web/app/components/column-cell/ClusterItem.vue
@@ -0,0 +1,69 @@
+
+<script setup lang="ts">
+    import type { IssueMetadata } from '~~/shared/models/github-metadata'
+
+    interface ClusterViewProps {
+        clusters: IssueMetadata[];
+    }
+
+    const { clusters } = defineProps<ClusterViewProps>()
+
+    const openState = reactive<Record<string, boolean>>({})
+
+    onMounted(async () => {
+        if ('startViewTransition' in document) {
+            let finishTransition: () => void
+            const promise = new Promise<void>((resolve) => {
+            finishTransition = resolve
+            })
+            watch(() => clusters, () => document.startViewTransition(() => promise), { flush: 'pre' })
+            watch(() => clusters, () => nextTick(finishTransition), { flush: 'post' })
+        }
+    })
+</script>
+
+<template >
+    <div class="grid grid-cols-4 gap-4" >
+        <section
+        v-for="(cluster, c) of clusters"
+        :key="c"
+        :style="{ '--section-index': c }"
+        class=" overflow-hidden flex flex-col gap-4 md:rounded-md md:border-solid md:border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
+        >
+            <h2 class=" my-4 font-bold text-2xl flex items-baseline">
+                <span class="text-gray-500 inline-block mr-1 font-normal">#</span>{{ c + 1 }}
+                <span class="ml-2 font-normal text-lg color-gray-300">&mdash; {{ cluster.title }}</span>
+                <span class="ml-auto text-white bg-gray-700 text-sm font-normal rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 border-gray-700 inline-block leading-tight flex items-center">
+                <span class="i-tabler:copy inline-block w-4 h-4"></span>
+                cluster
+                </span>
+            </h2>
+            <GitHubIssue
+                v-for="(issue, i) of openState[c] !== true ? cluster.issues?.slice(0, 5) : cluster.issues"
+                :key="i"
+                :url="issue.url"
+                :title="issue.title"
+                :owner="issue.owner"
+                :repository="issue.repository"
+                :number="issue.number"
+                :avg-similarity="issue.avgSimilarity"
+                :labels="issue.labels"
+                :updated_at="issue.updated_at"
+            />
+            <button
+                v-if="cluster.issues?.length > 5 && openState[c] !== true"
+                class="rounded-md text-sm border-solid border border-gray-700 bg-transparent color-gray-400 py-2 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
+                type="button"
+                @click="openState[c] = !openState[c]"
+            >
+                show {{ cluster.issues?.length - 5 }} more
+            </button>
+        </section>
+    </div>
+</template>
+
+<style scoped>
+section:first-of-type {
+  view-transition-name: var(--section-index);
+}
+</style>
diff --git a/packages/web/app/components/grid-cell/ClusterItem.vue b/packages/web/app/components/grid-cell/ClusterItem.vue
new file mode 100644
index 00000000..e896b7d0
--- /dev/null
+++ b/packages/web/app/components/grid-cell/ClusterItem.vue
@@ -0,0 +1,52 @@
+
+<script setup lang="ts">
+    import type { IssueMetadata } from '~~/shared/models/github-metadata'
+
+    interface ClusterViewProps {
+        clusters: IssueMetadata[];
+    }
+
+    const { clusters } = defineProps<ClusterViewProps>()
+
+    const openState = reactive<Record<string, boolean>>({})
+</script>
+
+<template >
+    <div class="grid grid-cols-4 gap-4" >
+        <section
+        v-for="(cluster, c) of clusters"
+        :key="c"
+        :style="{ '--section-index': c }"
+        class=" overflow-hidden flex flex-col gap-4 md:rounded-md md:border-solid md:border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
+        >
+            <h2 class=" my-4 font-bold text-2xl flex items-baseline">
+                <span class="text-gray-500 inline-block mr-1 font-normal">#</span>{{ c + 1 }}
+                <span class="ml-2 font-normal text-lg color-gray-300">&mdash; {{ cluster.title }}</span>
+                <span class="ml-auto text-white bg-gray-700 text-sm font-normal rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 border-gray-700 inline-block leading-tight flex items-center">
+                <span class="i-tabler:copy inline-block w-4 h-4"></span>
+                cluster
+                </span>
+            </h2>
+            <GitHubIssue
+                v-for="(issue, i) of openState[c] !== true ? cluster.issues?.slice(0, 5) : cluster.issues"
+                :key="i"
+                :url="issue.url"
+                :title="issue.title"
+                :owner="issue.owner"
+                :repository="issue.repository"
+                :number="issue.number"
+                :avg-similarity="issue.avgSimilarity"
+                :labels="issue.labels"
+                :updated_at="issue.updated_at"
+            />
+            <button
+                v-if="cluster.issues?.length > 5 && openState[c] !== true"
+                class="rounded-md text-sm border-solid border border-gray-700 bg-transparent color-gray-400 py-2 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
+                type="button"
+                @click="openState[c] = !openState[c]"
+            >
+                show {{ cluster.issues?.length - 5 }} more
+            </button>
+        </section>
+    </div>
+</template>
diff --git a/packages/web/app/components/paper-stack/ClusterItem.vue b/packages/web/app/components/paper-stack/ClusterItem.vue
new file mode 100644
index 00000000..7195b7b8
--- /dev/null
+++ b/packages/web/app/components/paper-stack/ClusterItem.vue
@@ -0,0 +1,76 @@
+
+<script setup lang="ts">
+    import type { IssueMetadata } from '~~/shared/models/github-metadata'
+
+    interface ClusterViewLayoutProps {
+        clusters: IssueMetadata[];
+    }
+
+    const { clusters } = defineProps<ClusterViewLayoutProps>()
+
+    const openState = reactive<Record<string, boolean>>({})
+
+    const zIndex = ['z-8', 'z-6', 'z-4']
+</script>
+
+<template >
+    <div class="grid grid-cols-4 gap-4 pt-4">
+        <section 
+            v-for="(cluster, index) of clusters" 
+            :key="index"
+            :style="{ '--section-index': index }"   
+            class="flex flex-col "
+        >
+            <PaperStackClusterSummary :clusterIndex="index" :clusterTitle="cluster.title" />
+
+            <div 
+                v-for="(issue, idx) of cluster.issues?.slice(0, 3)"
+                class="h-20 p-2 p-r-none border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 whitespace-nowrap overflow-hidden text-ellipsis -mt-2"
+                :class="zIndex[idx]"
+            >
+                <PaperStackGithubIssue
+                    class="github-issues relative"
+                    :key="idx"
+                    :url="issue.url"
+                    :title="issue.title"
+                    :owner="issue.owner"
+                    :repository="issue.repository"
+                    :number="issue.number"
+                    :avg-similarity="issue.avgSimilarity"
+                    :labels="issue.labels"
+                    :updated_at="issue.updated_at"
+                />
+            </div>
+
+            <div 
+                class="h-10 p-2 border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 whitespace-nowrap overflow-hidden text-ellipsis -mt-2 z-2"
+            >
+                <!-- TODO: Remove open state logic -->
+                <PaperStackShowMoreIssues :clusterIndex="index" :clusterLength="cluster.issues?.length || 0" v-model:openState="openState" />
+            </div>
+        </section>
+    </div>
+</template>
+
+<!-- TODO: Improve naive gradient approach -->
+ <!-- .github-issues {
+  mask-image: linear-gradient(to right, black 80%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
+} -->
+<style scoped>
+.github-issues  {
+  position: relative; 
+  overflow: hidden;    
+}
+
+.github-issues::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 5rem;         
+  height: 100%;        
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), #6b7280); 
+  pointer-events: none; 
+}  
+</style>
diff --git a/packages/web/app/components/paper-stack/ClusterSummary.vue b/packages/web/app/components/paper-stack/ClusterSummary.vue
new file mode 100644
index 00000000..2a1c8f9c
--- /dev/null
+++ b/packages/web/app/components/paper-stack/ClusterSummary.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+    interface ClusterSummaryProps {
+        clusterIndex: number;
+        clusterTitle: string;
+    }
+
+    const CLUSTER_ICON = 'cluster'
+    const CLUSTER_SUMMARY = 'Cluster Summary'
+
+    const { clusterIndex, clusterTitle } = defineProps<ClusterSummaryProps>()
+</script>
+
+<template >
+    <div class="h-40 md:p-2 md:border-3 md:border-solid border-gray-600 md:rounded-md bg-shark-500 relative z-10">
+        <div class="flex justify-between items-baseline gap-1">
+            <div class="font-bold text-2xl flex items-baseline">
+                <h2 class="text-gray-500 inline-block mr-1 font-normal">#</h2>{{ clusterIndex + 1 }}
+            </div>
+
+            <div>
+                <h1 class="text-lg text-gray-300 inline-block font-bold">{{ CLUSTER_SUMMARY }}</h1>
+            </div>
+
+            <div>
+                <span class="ml-auto text-white bg-gray-700 text-sm font-normal rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 border-gray-700 inline-block leading-tight flex items-center">
+                    <span class="i-tabler:copy inline-block w-4 h-4" />
+                    {{ CLUSTER_ICON}}
+                </span>
+            </div>
+        </div>
+            
+        <h1>
+            <span class="text-lg color-gray-400 overflow-hidden text-wrap"> {{ clusterTitle }}</span>
+        </h1>
+    </div>
+</template>
diff --git a/packages/web/app/components/paper-stack/GithubIssue.vue b/packages/web/app/components/paper-stack/GithubIssue.vue
new file mode 100644
index 00000000..3e064bb7
--- /dev/null
+++ b/packages/web/app/components/paper-stack/GithubIssue.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+    interface GithubIssueProps {
+        url: string;
+        title: string;
+        owner: string;
+        repository: string;
+        number: number;
+        avgSimilarity: number;
+        labels: Array<string | { name: string, color?: string }>;
+        updated_at: string;
+    }
+
+    const UPDATED = 'updated'
+    const PERCENT_SIMILAR = '% similar'
+
+    const { url, title, owner, repository, number, avgSimilarity, labels, updated_at } = defineProps<GithubIssueProps>()
+</script>
+
+<template>
+  <article class="max-w-full overflow-hidden flex flex-row gap-1 ">
+    <span class="flex-shrink-0 inline-block h-5 i-tabler-circle-dot text-green-500 mt-1" />
+
+    <div class="flex flex-col flex-wrap md:flex-nowrap flex-grow">
+      <NuxtLink
+        class="line-clamp-1 flex-grow text-sm md:text-base lg:flex-grow-0 no-underline color-current hover:underline"
+        :href="url"
+        target="_blank"
+      >
+        {{ title?.trim() }}
+      </NuxtLink>
+
+      <div
+        class="text-xs relative text-gray-400 mb-1 break-words"
+      >
+        <NuxtLink
+          v-if="owner && repository"
+          class="no-underline hover:underline color-current"
+          :to="{
+            name: 'owner-repo',
+            params: {
+              owner: owner,
+              repo: repository,
+            },
+          }"
+        >
+          {{ owner }}/{{ repository }}
+        </NuxtLink>
+
+        &middot;
+        {{ UPDATED }}
+
+        <NuxtTime
+          :datetime="updated_at"
+          relative
+        />
+
+        &middot;
+
+        <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) }}{{ PERCENT_SIMILAR }}
+        </NuxtLink>
+      </div>
+
+      <div class="flex flex-row gap-1 items-baseline flex-wrap md:flex-nowrap">
+        <span
+          v-for="(label, j) of labels"
+          :key="j"
+          class="label rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 text-xs inline-block leading-tight"
+          :style="labelColors(typeof label === 'string' ? '000000' : label.color || '000000')"
+        >
+          {{ typeof label === 'string' ? label : label.name }}
+        </span>
+      </div>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.label {
+  --lightness-threshold: 0.6;
+  --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
+  --lightness-switch: max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1));
+  --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
+  background: rgba(var(--label-r), var(--label-g), var(--label-b), 0.18);
+  color: hsl(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) + var(--lighten-by)) * 1%));
+  border-color: rgba(var(--label-r), var(--label-g), var(--label-b), 0.7);
+}
+</style>
diff --git a/packages/web/app/components/paper-stack/ShowMoreIssues.vue b/packages/web/app/components/paper-stack/ShowMoreIssues.vue
new file mode 100644
index 00000000..2e995580
--- /dev/null
+++ b/packages/web/app/components/paper-stack/ShowMoreIssues.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+    interface ShowMoreIssuesProps {
+        clusterIndex: number;
+        clusterLength: number;
+    }
+
+    const { clusterIndex, clusterLength } = defineProps<ShowMoreIssuesProps>()
+
+    // TODO: Modify this to be open the cluster view
+    const openState = defineModel<Record<string, boolean>>('openState', {
+        required: true
+    })
+
+    const NO_MORE_ISSUES = 'No More Issues...'
+</script>
+
+<template >
+    <div class="grid grid-cols-4 gap-4" >
+        <!-- TODO: Needs to launch the popover/route/whatever to the ClusterView -->
+        <button
+            v-if="clusterLength > 3 && openState[clusterIndex] !== true"
+            class=" text-sm bg-transparent color-gray-400 py-2 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
+            type="button"
+        >
+            show {{ clusterLength - 3 }} more issues...
+        </button>
+        <!-- TODO: Improve the alternate state for the show more button -->
+        <div v-else>{{ NO_MORE_ISSUES}}</div>
+    </div>
+</template>
diff --git a/packages/web/app/components/svg/ColumnCell.vue b/packages/web/app/components/svg/ColumnCell.vue
new file mode 100644
index 00000000..8b1e025a
--- /dev/null
+++ b/packages/web/app/components/svg/ColumnCell.vue
@@ -0,0 +1,9 @@
+    <script lang="ts">
+    export default {
+      name: 'MaterialSymbolsViewColumnRounded'
+    }
+    </script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M4 19q-.425 0-.712-.288T3 18V6q0-.425.288-.712T4 5h3.325q.425 0 .713.288T8.325 6v12q0 .425-.287.713T7.325 19H4Zm6.325 0q-.425 0-.712-.288T9.324 18V6q0-.425.288-.712T10.325 5h3.325q.425 0 .713.288T14.65 6v12q0 .425-.288.713T13.65 19h-3.325Zm6.325 0q-.425 0-.712-.288T15.65 18V6q0-.425.288-.712T16.65 5h3.325q.425 0 .713.288t.287.712v12q0 .425-.288.713t-.712.287H16.65Z"></path></svg>
+</template>
diff --git a/packages/web/app/components/svg/GridCell.vue b/packages/web/app/components/svg/GridCell.vue
new file mode 100644
index 00000000..4e72b045
--- /dev/null
+++ b/packages/web/app/components/svg/GridCell.vue
@@ -0,0 +1,9 @@
+  <script lang="ts">
+  export default {
+    name: 'BiGrid3x3GapFill'
+  }
+  </script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zM1 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zM1 12a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1z"></path></svg>
+</template>
diff --git a/packages/web/app/components/svg/PaperStack.vue b/packages/web/app/components/svg/PaperStack.vue
new file mode 100644
index 00000000..5cdeccc1
--- /dev/null
+++ b/packages/web/app/components/svg/PaperStack.vue
@@ -0,0 +1,9 @@
+  <script lang="ts">
+  export default {
+    name: 'GisLayers'
+  }
+  </script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 100 100"><!-- Icon from Font-GIS by Jean-Marc Viglino - https://github.com/Viglino/font-gis/blob/main/LICENSE-CC-BY.md --><path fill="currentColor" d="M28.135 10.357a3.5 3.5 0 0 0-2.668 1.235L.832 40.607a3.5 3.5 0 0 0 2.67 5.766l93-.064a3.5 3.5 0 0 0 2.666-5.766L74.59 11.592a3.5 3.5 0 0 0-2.668-1.235zM89.91 51.313l-9.178.007l8.211 9.67l-77.875.053l8.22-9.682l-9.188.008L.832 62.283a3.5 3.5 0 0 0 2.67 5.766l93-.065a3.5 3.5 0 0 0 2.666-5.765zm0 21.593l-9.178.008l8.211 9.67l-77.875.053l8.22-9.682l-9.188.008L.832 83.877a3.5 3.5 0 0 0 2.67 5.766l93-.065a3.5 3.5 0 0 0 2.666-5.766z" color="currentColor"></path></svg>
+</template>
diff --git a/packages/web/app/composables/command-console-plane.ts b/packages/web/app/composables/command-console-plane.ts
new file mode 100644
index 00000000..2ad6cd31
--- /dev/null
+++ b/packages/web/app/composables/command-console-plane.ts
@@ -0,0 +1,27 @@
+export function useCommandConsolePlane() {
+  const OWNER_REPO = 'owner-repo'
+
+  const route = useRoute(OWNER_REPO)
+
+  const { data: allowedRepos } = useFetchRepos()
+
+  const { selectedRepo } = useSelectedRepo(route.params.owner, route.params.repo)
+
+  const { refresh, status } = useFetchClusters(selectedRepo)
+
+  function navigateToRepo(event: Event) {
+    const [owner, repo] = (event.target as HTMLSelectElement).value.split('/') as [string, string]
+    return navigateTo({
+      name: OWNER_REPO,
+      params: { owner, repo },
+    })
+  }
+
+  return {
+    selectedRepo,
+    allowedRepos,
+    status,
+    refresh,
+    navigateToRepo,
+  }
+}
diff --git a/packages/web/app/composables/fetch-clusters.ts b/packages/web/app/composables/fetch-clusters.ts
new file mode 100644
index 00000000..3067c529
--- /dev/null
+++ b/packages/web/app/composables/fetch-clusters.ts
@@ -0,0 +1,8 @@
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
+
+export function useFetchClusters(selectedRepo: Ref<string>) {
+  return useFetch<IssueMetadata[]>(() => `/api/clusters/${selectedRepo.value}`, {
+    baseURL: useRuntimeConfig().public.remote,
+    default: () => [],
+  })
+}
diff --git a/packages/web/app/composables/fetch-duplicates.ts b/packages/web/app/composables/fetch-duplicates.ts
new file mode 100644
index 00000000..5b4b9fa5
--- /dev/null
+++ b/packages/web/app/composables/fetch-duplicates.ts
@@ -0,0 +1,8 @@
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
+
+export function useFetchDuplicates(selectedRepo: Ref<string>) {
+  return useFetch<IssueMetadata[]>(() => `/api/duplicates/${selectedRepo.value}`, {
+    baseURL: useRuntimeConfig().public.remote,
+    default: () => [],
+  })
+}
diff --git a/packages/web/app/composables/repos.ts b/packages/web/app/composables/fetch-repos.ts
similarity index 52%
rename from packages/web/app/composables/repos.ts
rename to packages/web/app/composables/fetch-repos.ts
index fd37261b..c6ef589a 100644
--- a/packages/web/app/composables/repos.ts
+++ b/packages/web/app/composables/fetch-repos.ts
@@ -1,5 +1,7 @@
-export function useRepos() {
-  return useFetch('/api/repos', {
+import type { RepoMetadata } from '~~/shared/models/github-metadata'
+
+export function useFetchRepos() {
+  return useFetch<RepoMetadata[]>('/api/repos', {
     baseURL: useRuntimeConfig().public.remote,
     getCachedData: (key, nuxtApp) => nuxtApp.payload.data[key] || nuxtApp.static.data[key],
     default: () => [],
diff --git a/packages/web/app/composables/selected-repo.ts b/packages/web/app/composables/selected-repo.ts
new file mode 100644
index 00000000..1e25afa4
--- /dev/null
+++ b/packages/web/app/composables/selected-repo.ts
@@ -0,0 +1,8 @@
+const DEFAULT_REPO = 'nuxt/nuxt'
+
+const selectedRepo = ref<string>(DEFAULT_REPO)
+
+export function useSelectedRepo(owner: string, repo: string) {
+  selectedRepo.value = owner && repo ? `${owner}/${repo}` : DEFAULT_REPO
+  return { selectedRepo }
+}
diff --git a/packages/web/app/composables/toggle-view.ts b/packages/web/app/composables/toggle-view.ts
new file mode 100644
index 00000000..0d0ef551
--- /dev/null
+++ b/packages/web/app/composables/toggle-view.ts
@@ -0,0 +1,19 @@
+export type ViewToggleState =
+  'PaperStack' |
+  'GridCell' |
+  'ColumnCell'
+
+const selectedView = ref<ViewToggleState>('PaperStack')
+
+export function useToggleViewState() {
+  const toggleViewState = (event: PointerEvent) => {
+    event.preventDefault()
+    const button = event.currentTarget as HTMLButtonElement
+    selectedView.value = button.value as ViewToggleState
+  }
+
+  return {
+    selectedView,
+    toggleViewState,
+  }
+}
diff --git a/packages/web/app/pages/[owner]/[repo]/index.vue b/packages/web/app/pages/[owner]/[repo]/index.vue
index b6c9d349..a87ab0b2 100644
--- a/packages/web/app/pages/[owner]/[repo]/index.vue
+++ b/packages/web/app/pages/[owner]/[repo]/index.vue
@@ -1,208 +1,25 @@
 <script setup lang="ts">
-const route = useRoute('owner-repo')
+const OWNER_REPO = 'owner-repo'
+
+const route = useRoute(OWNER_REPO)
 
 useSeoMeta({
   title: () => `Issue clusters - ${route.params.owner}/${route.params.repo}`
 })
-
-const { data: allowedRepos } = useRepos()
-
-const selectedRepo = computed(() => route.params.owner && route.params.repo ? `${route.params.owner}/${route.params.repo}` as 'nuxt/nuxt' : 'nuxt/nuxt')
-
-const { data: clusters, refresh, status } = useFetch(() => `/api/clusters/${selectedRepo.value}`, {
-  baseURL: useRuntimeConfig().public.remote,
-  default: () => [],
-})
-
-const showDuplicates = ref(false)
-const { data: duplicates, status: duplicateStatus } = useFetch(() => `/api/duplicates/${selectedRepo.value}`, {
-  baseURL: useRuntimeConfig().public.remote,
-  default: () => [],
-})
-
-onMounted(async () => {
-  if ('startViewTransition' in document) {
-    let finishTransition: () => void
-    const promise = new Promise<void>((resolve) => {
-      finishTransition = resolve
-    })
-    watch(clusters, () => document.startViewTransition(() => promise), { flush: 'pre' })
-    watch(clusters, () => nextTick(finishTransition), { flush: 'post' })
-  }
-})
-
-function navigateToRepo(event: Event) {
-  const [owner, repo] = (event.target as HTMLSelectElement).value.split('/') as [string, string]
-  return navigateTo({
-    name: 'owner-repo',
-    params: { owner, repo },
-  })
-}
-
-const openState = reactive<Record<string, boolean>>({})
 </script>
 
 <template>
-  <div>
-    <form @submit.prevent="() => refresh()">
-      <div class="flex gap-2 items-center">
-        <h2 class="text-base my-3 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' }"
-          type="submit"
-        >
-          <span
-            size="medium"
-            class="text-gray-400 flex-shrink-0 i-tabler-refresh inline-block w-4 h-4"
-          />
-          <span class="sr-only">refresh data</span>
-        </button>
-      </div>
-      <label class="w-full text-xs 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
-          :value="selectedRepo"
-          class="pl-8 bg-shark-500 rounded-md pr-2 py-2 color-white border-0 w-full appearance-none"
-          @change="navigateToRepo"
-        >
-          <option
-            v-for="repo in allowedRepos.filter((repo) => repo.issuesIndexed > 0)"
-            :key="repo.repo"
-            :selected="repo.repo === selectedRepo"
-          >
-            {{ repo.repo }}
-          </option>
-        </select>
-        <span
-          class="absolute ml-2 text-gray-400 flex-shrink-0 i-tabler-search inline-block w-5 h-5"
-        />
-      </label>
-    </form>
-    <div
-      v-if="duplicateStatus !== 'success' && duplicateStatus !== 'error'"
-      class="mt-6 rounded-md border-solid border border-gray-700 bg-transparent color-gray-400 py-2 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 items-center gap-2 justify-center pointer-events-none animate-pulse"
-    >
-      <span
-        size="medium"
-        class="text-gray-400 flex-shrink-0 i-tabler-refresh inline-block w-4 h-4 animate-spin"
-      />
-      loading duplicates
-    </div>
-    <button
-      v-else-if="!showDuplicates && duplicates.length"
-      class="mt-6 rounded-md border-solid border border-gray-700 bg-transparent color-gray-400 py-2 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 items-center gap-2 justify-center w-full"
-      type="button"
-      @click="showDuplicates = true"
-    >
-      show {{ duplicates?.length }} possible duplicates
-    </button>
-    <template v-if="showDuplicates">
-      <section
-        v-for="(cluster, i) of showDuplicates ? duplicates : []"
-        class="flex flex-col gap-4 md:rounded-md md:border-solid md:border md:border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 flex-wrap border-b-solid"
-      >
-        <h2 class="my-4 font-bold text-2xl flex items-baseline">
-          <span class="text-gray-500 inline-block mr-1 font-normal">#</span>
-          <span>{{ i + 1 }}</span>
-          <span class="ml-auto text-white bg-gray-700 text-sm font-normal rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 border-gray-700 inline-block leading-tight flex items-center">
-            <span class="i-tabler-wash-dryclean-off inline-block w-4 h-4"></span>
-            possible duplicate
-          </span>
-        </h2>
-        <GitHubIssue
-          v-for="(issue, j) of cluster"
-          :key="j"
-          :url="issue.url"
-          :title="issue.title"
-          :owner="issue.owner"
-          :repository="issue.repository"
-          :number="issue.number"
-          :avg-similarity="issue.score"
-          :labels="issue.labels"
-          :updated_at="issue.updated_at"
-        />
-      </section>
-
+  <RepoViewLayout>
+    <template #console>
+      <CommandConsole />
     </template>
-    <template v-if="status === 'idle' || status === 'pending'">
-      <section
-        v-for="i in 7"
-        :key="i"
-        :style="{ '--section-index': i }"
-        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"
-      >
-        <h2 class="flex items-center my-4 font-bold text-2xl">
-          <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() * 3) + 1"
-          :key="s"
-        />
-      </section>
-    </template>
-    <template v-else-if="!clusters.length">
-      <section
-        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"
-      >
-        <h2 class="flex items-center my-4 font-bold text-2xl">
-          <span class="text-gray-500 inline-block mr-1 font-normal">#</span>
-        </h2>
-        <p class="flex flex-row gap-2 leading-tightest">
-          <span
-            class="flex-shrink-0 text-gray-400 i-tabler-alert-triangle inline-block w-5 h-5"
-          />
-          no clusters could be identified
-        </p>
-      </section>
+
+    <template #duplicates>
+      <DuplicatesView />
     </template>
-    <template v-else>
-      <section class="grid grid-cols-4 gap-4 ">
-      <section
-        v-for="(cluster, c) of clusters"
-        :key="c"
-        :style="{ '--section-index': c }"
-        class=" overflow-hidden flex flex-col gap-4 md:rounded-md md:border-solid md:border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
-      >
-        <h2 class=" my-4 font-bold text-2xl flex items-baseline">
-          <span class="text-gray-500 inline-block mr-1 font-normal">#</span>{{ c + 1 }}
-          <span class="ml-2 font-normal text-lg color-gray-300">&mdash; {{ cluster.title }}</span>
-          <span class="ml-auto text-white bg-gray-700 text-sm font-normal rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 border-gray-700 inline-block leading-tight flex items-center">
-            <span class="i-tabler:copy inline-block w-4 h-4"></span>
-            cluster
-          </span>
-        </h2>
-        <GitHubIssue
-          v-for="(issue, i) of openState[c] !== true ? cluster.issues.slice(0, 5) : cluster.issues"
-          :key="i"
-          :url="issue.url"
-          :title="issue.title"
-          :owner="issue.owner"
-          :repository="issue.repository"
-          :number="issue.number"
-          :avg-similarity="issue.avgSimilarity"
-          :labels="issue.labels"
-          :updated_at="issue.updated_at"
-        />
-        <button
-          v-if="cluster.issues.length > 5 && openState[c] !== true"
-          class="rounded-md text-sm border-solid border border-gray-700 bg-transparent color-gray-400 py-2 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
-          type="button"
-          @click="openState[c] = !openState[c]"
-        >
-          show {{ cluster.issues.length - 5 }} more
-        </button>
-      </section>
-      </section>
+
+    <template #clusters >
+      <ClusterViewJunction />
     </template>
-  </div>
+  </RepoViewLayout>
 </template>
-
-<style scoped>
-section:first-of-type {
-  view-transition-name: var(--section-index);
-}
-</style>
diff --git a/packages/web/app/pages/index.vue b/packages/web/app/pages/index.vue
index 79004b95..8df87aeb 100644
--- a/packages/web/app/pages/index.vue
+++ b/packages/web/app/pages/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const config = useRuntimeConfig()
 
-const { data: allowedRepos, refresh } = useRepos()
+const { data: allowedRepos, refresh } = useFetchRepos()
 
 const installationURL = `https://github.com/apps/${config.public.github.appSlug}/installations/new`
 
diff --git a/packages/web/app/utils/label-colors.ts b/packages/web/app/utils/label-colors.ts
new file mode 100644
index 00000000..c95b4907
--- /dev/null
+++ b/packages/web/app/utils/label-colors.ts
@@ -0,0 +1,16 @@
+import hexRgb from 'hex-rgb'
+import rgbToHSL from 'rgb-to-hsl'
+
+export function labelColors(color: string) {
+  const value = hexRgb(color)
+  const [hue, saturation, lightness] = rgbToHSL(value.red, value.green, value.blue)
+
+  return {
+    '--label-r': Math.round(value.red),
+    '--label-g': Math.round(value.green),
+    '--label-b': Math.round(value.blue),
+    '--label-h': Math.round(hue),
+    '--label-s': Math.round(Number.parseInt(saturation)),
+    '--label-l': Math.round(Number.parseInt(lightness)),
+  }
+}
diff --git a/packages/web/server/api/clusters/[owner]/[repo].get.ts b/packages/web/server/api/clusters/[owner]/[repo].get.ts
index fa7cd90e..bbec0796 100644
--- a/packages/web/server/api/clusters/[owner]/[repo].get.ts
+++ b/packages/web/server/api/clusters/[owner]/[repo].get.ts
@@ -1,6 +1,7 @@
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
 import { defineCachedCorsEventHandler } from '~~/server/utils/cached-cors'
 import { clusterEmbeddings, generateClusterName } from '~~/server/utils/cluster'
-import { getStoredEmbeddingsForRepo, type IssueMetadata } from '~~/server/utils/embeddings'
+import { getStoredEmbeddingsForRepo } from '~~/server/utils/embeddings'
 
 export default defineCachedCorsEventHandler(async (event) => {
   const { owner, repo } = getRouterParams(event)
diff --git a/packages/web/server/api/duplicates/[owner]/[repo].get.ts b/packages/web/server/api/duplicates/[owner]/[repo].get.ts
index ec99d92b..4f0ea84b 100644
--- a/packages/web/server/api/duplicates/[owner]/[repo].get.ts
+++ b/packages/web/server/api/duplicates/[owner]/[repo].get.ts
@@ -1,6 +1,7 @@
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
 import { defineCachedCorsEventHandler } from '~~/server/utils/cached-cors'
 import { findDuplicates } from '~~/server/utils/cluster'
-import { getStoredEmbeddingsForRepo, type IssueMetadata } from '~~/server/utils/embeddings'
+import { getStoredEmbeddingsForRepo } from '~~/server/utils/embeddings'
 
 export default defineCachedCorsEventHandler(async (event) => {
   const { owner, repo } = getRouterParams(event)
diff --git a/packages/web/server/api/similarity/[owner]/[repo]/[number].get.ts b/packages/web/server/api/similarity/[owner]/[repo]/[number].get.ts
index 501d64c6..14321d80 100644
--- a/packages/web/server/api/similarity/[owner]/[repo]/[number].get.ts
+++ b/packages/web/server/api/similarity/[owner]/[repo]/[number].get.ts
@@ -1,4 +1,4 @@
-import type { IssueMetadata } from '~~/server/utils/embeddings'
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
 import { defineCachedCorsEventHandler } from '~~/server/utils/cached-cors'
 import { storageKeyForIssue } from '~~/server/utils/embeddings'
 
diff --git a/packages/web/server/utils/embeddings.ts b/packages/web/server/utils/embeddings.ts
index cc53a638..8b7b4bb0 100644
--- a/packages/web/server/utils/embeddings.ts
+++ b/packages/web/server/utils/embeddings.ts
@@ -109,17 +109,6 @@ export async function indexIssue(issue: Issue | RestIssue, repository: { owner:
   return embeddings
 }
 
-export interface IssueMetadata {
-  owner: string
-  repository: string
-  number: number
-  title: string
-  url: string
-  updated_at: string
-  labels: string[]
-  [key: string]: string | number | boolean | string[]
-}
-
 export interface StoredEmbeddings {
   mtime: number
   hash: string
diff --git a/packages/web/shared/models/github-metadata.ts b/packages/web/shared/models/github-metadata.ts
new file mode 100644
index 00000000..b360d6e1
--- /dev/null
+++ b/packages/web/shared/models/github-metadata.ts
@@ -0,0 +1,17 @@
+export interface RepoMetadata {
+  repo: string
+  issuesIndexed: number
+  indexed: boolean
+}
+
+export interface IssueMetadata {
+  url: string
+  title: string
+  owner: string
+  repository: string
+  updated_at: string
+  number: number
+  score: number
+  labels: string[]
+  [key: string]: string | number | boolean | string[]
+}

From f0f1b23c437291a232a558bb6b400a0a37fe02f0 Mon Sep 17 00:00:00 2001
From: Brandon Hurrington <brandon.hurrington@lotto24.de>
Date: Thu, 27 Mar 2025 13:45:38 +0000
Subject: [PATCH 03/12] Lifted useFetch calls up to the page level

---
 .../app/components/ClusterViewJunction.vue    | 14 +++++----
 .../web/app/components/CommandConsole.vue     | 30 +++++++++++++++----
 .../web/app/components/DuplicatesView.vue     | 27 +++++++++--------
 .../components/paper-stack/ClusterItem.vue    | 14 ++++-----
 .../app/composables/command-console-plane.ts  | 27 -----------------
 .../web/app/composables/fetch-clusters.ts     |  1 +
 .../web/app/composables/fetch-duplicates.ts   |  1 +
 packages/web/app/composables/fetch-repos.ts   |  1 +
 packages/web/app/composables/selected-repo.ts |  2 +-
 .../web/app/pages/[owner]/[repo]/index.vue    | 27 +++++++++++++++--
 10 files changed, 82 insertions(+), 62 deletions(-)
 delete mode 100644 packages/web/app/composables/command-console-plane.ts

diff --git a/packages/web/app/components/ClusterViewJunction.vue b/packages/web/app/components/ClusterViewJunction.vue
index 9facad28..4a0d3830 100644
--- a/packages/web/app/components/ClusterViewJunction.vue
+++ b/packages/web/app/components/ClusterViewJunction.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-const OWNER_REPO = 'owner-repo'
+import type { AsyncDataRequestStatus } from '#app'
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
 
-const route = useRoute(OWNER_REPO)
-
-const { selectedRepo } = useSelectedRepo(route.params.owner, route.params.repo)
-
-const { data: clusters, status } = useFetchClusters(selectedRepo)
+interface ClusterViewJunctionProps {
+    clusters: IssueMetadata[];
+    status: AsyncDataRequestStatus;
+}
 
 const { selectedView } = useToggleViewState()
+
+const { clusters, status } = defineProps<ClusterViewJunctionProps>()
 </script>
 
 <template>
diff --git a/packages/web/app/components/CommandConsole.vue b/packages/web/app/components/CommandConsole.vue
index 946886ed..72f59323 100644
--- a/packages/web/app/components/CommandConsole.vue
+++ b/packages/web/app/components/CommandConsole.vue
@@ -1,10 +1,30 @@
 <script setup lang="ts">
-    import type { RepoMetadata } from '~~/shared/models/github-metadata'
+import type { AsyncDataRequestStatus } from '#app'
+import type { RepoMetadata } from '~~/shared/models/github-metadata'
 
-    const REFRESH_DATA = 'refresh data'
-    const PICK_A_REPOSITORY = 'pick a repository to cluster issues'
-    
-    const { selectedRepo, allowedRepos, navigateToRepo, refresh, status } = useCommandConsolePlane()
+interface CommandConsoleProps {
+  allowedRepos: RepoMetadata[];
+  status: AsyncDataRequestStatus;
+  selectedRepo: string;
+}
+
+const OWNER_REPO = 'owner-repo'
+const REFRESH_DATA = 'refresh data'
+const PICK_A_REPOSITORY = 'pick a repository to cluster issues'
+
+const { allowedRepos, status, selectedRepo } = defineProps<CommandConsoleProps>()
+
+const refresh = defineModel<() => Promise<void>>('refresh', {
+    required: true
+})
+
+function navigateToRepo(event: Event) {
+  const [owner, repo] = (event.target as HTMLSelectElement).value.split('/') as [string, string]
+  return navigateTo({
+    name: OWNER_REPO,
+    params: { owner, repo },
+  })
+}
 </script>
 
 <template>
diff --git a/packages/web/app/components/DuplicatesView.vue b/packages/web/app/components/DuplicatesView.vue
index 9dd9632a..2dfc7e37 100644
--- a/packages/web/app/components/DuplicatesView.vue
+++ b/packages/web/app/components/DuplicatesView.vue
@@ -1,27 +1,28 @@
 
 <script setup lang="ts">
-    import type { IssueMetadata } from '~~/shared/models/github-metadata'
+import type { AsyncDataRequestStatus } from '#app'
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
 
-    const OWNER_REPO = 'owner-repo'
-    const LOADING_DUPLICATES = 'loading duplicates'
-    const POSSIBLE_DUPLICATE = 'possible duplicate'
+interface DuplicatesrViewProps {
+    duplicates: IssueMetadata[];
+    status: AsyncDataRequestStatus;
+}
 
-    const route = useRoute(OWNER_REPO)
+const LOADING_DUPLICATES = 'loading duplicates'
+const POSSIBLE_DUPLICATE = 'possible duplicate'
 
-    const { selectedRepo } = useSelectedRepo(route.params.owner, route.params.repo)
+const { duplicates, status } = defineProps<DuplicatesrViewProps>()
 
-    const { data: duplicates, status: duplicateStatus } = useFetchDuplicates(selectedRepo)
+const showDuplicates = ref(false)
 
-    const showDuplicates = ref(false)
-    
-    const typedDuplicates = computed<IssueMetadata[]>(() => {
-        return showDuplicates ? duplicates.value?.map(cluster => cluster) : []}
-    )
+const typedDuplicates = computed<IssueMetadata[]>(() => {
+    return showDuplicates ? duplicates.value?.map(cluster => cluster) : []}
+)
 </script>
 
 <template >
     <div
-      v-if="duplicateStatus !== 'success' && duplicateStatus !== 'error'"
+      v-if="status !== 'success' && status !== 'error'"
       class="mt-6 rounded-md border-solid border border-gray-700 bg-transparent color-gray-400 py-2 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 items-center gap-2 justify-center pointer-events-none animate-pulse"
     >
       <span
diff --git a/packages/web/app/components/paper-stack/ClusterItem.vue b/packages/web/app/components/paper-stack/ClusterItem.vue
index 7195b7b8..778a4ceb 100644
--- a/packages/web/app/components/paper-stack/ClusterItem.vue
+++ b/packages/web/app/components/paper-stack/ClusterItem.vue
@@ -1,16 +1,16 @@
 
 <script setup lang="ts">
-    import type { IssueMetadata } from '~~/shared/models/github-metadata'
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
 
-    interface ClusterViewLayoutProps {
-        clusters: IssueMetadata[];
-    }
+interface ClusterItemProps {
+    clusters: IssueMetadata[];
+}
 
-    const { clusters } = defineProps<ClusterViewLayoutProps>()
+const { clusters } = defineProps<ClusterItemProps>()
 
-    const openState = reactive<Record<string, boolean>>({})
+const openState = reactive<Record<string, boolean>>({})
 
-    const zIndex = ['z-8', 'z-6', 'z-4']
+const zIndex = ['z-8', 'z-6', 'z-4']
 </script>
 
 <template >
diff --git a/packages/web/app/composables/command-console-plane.ts b/packages/web/app/composables/command-console-plane.ts
deleted file mode 100644
index 2ad6cd31..00000000
--- a/packages/web/app/composables/command-console-plane.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export function useCommandConsolePlane() {
-  const OWNER_REPO = 'owner-repo'
-
-  const route = useRoute(OWNER_REPO)
-
-  const { data: allowedRepos } = useFetchRepos()
-
-  const { selectedRepo } = useSelectedRepo(route.params.owner, route.params.repo)
-
-  const { refresh, status } = useFetchClusters(selectedRepo)
-
-  function navigateToRepo(event: Event) {
-    const [owner, repo] = (event.target as HTMLSelectElement).value.split('/') as [string, string]
-    return navigateTo({
-      name: OWNER_REPO,
-      params: { owner, repo },
-    })
-  }
-
-  return {
-    selectedRepo,
-    allowedRepos,
-    status,
-    refresh,
-    navigateToRepo,
-  }
-}
diff --git a/packages/web/app/composables/fetch-clusters.ts b/packages/web/app/composables/fetch-clusters.ts
index 3067c529..586f6e1d 100644
--- a/packages/web/app/composables/fetch-clusters.ts
+++ b/packages/web/app/composables/fetch-clusters.ts
@@ -2,6 +2,7 @@ import type { IssueMetadata } from '~~/shared/models/github-metadata'
 
 export function useFetchClusters(selectedRepo: Ref<string>) {
   return useFetch<IssueMetadata[]>(() => `/api/clusters/${selectedRepo.value}`, {
+    key: 'clusters',
     baseURL: useRuntimeConfig().public.remote,
     default: () => [],
   })
diff --git a/packages/web/app/composables/fetch-duplicates.ts b/packages/web/app/composables/fetch-duplicates.ts
index 5b4b9fa5..1a02ea0a 100644
--- a/packages/web/app/composables/fetch-duplicates.ts
+++ b/packages/web/app/composables/fetch-duplicates.ts
@@ -2,6 +2,7 @@ import type { IssueMetadata } from '~~/shared/models/github-metadata'
 
 export function useFetchDuplicates(selectedRepo: Ref<string>) {
   return useFetch<IssueMetadata[]>(() => `/api/duplicates/${selectedRepo.value}`, {
+    key: 'duplicates',
     baseURL: useRuntimeConfig().public.remote,
     default: () => [],
   })
diff --git a/packages/web/app/composables/fetch-repos.ts b/packages/web/app/composables/fetch-repos.ts
index c6ef589a..1c40910f 100644
--- a/packages/web/app/composables/fetch-repos.ts
+++ b/packages/web/app/composables/fetch-repos.ts
@@ -2,6 +2,7 @@ import type { RepoMetadata } from '~~/shared/models/github-metadata'
 
 export function useFetchRepos() {
   return useFetch<RepoMetadata[]>('/api/repos', {
+    key: 'repos',
     baseURL: useRuntimeConfig().public.remote,
     getCachedData: (key, nuxtApp) => nuxtApp.payload.data[key] || nuxtApp.static.data[key],
     default: () => [],
diff --git a/packages/web/app/composables/selected-repo.ts b/packages/web/app/composables/selected-repo.ts
index 1e25afa4..d1a7a198 100644
--- a/packages/web/app/composables/selected-repo.ts
+++ b/packages/web/app/composables/selected-repo.ts
@@ -4,5 +4,5 @@ const selectedRepo = ref<string>(DEFAULT_REPO)
 
 export function useSelectedRepo(owner: string, repo: string) {
   selectedRepo.value = owner && repo ? `${owner}/${repo}` : DEFAULT_REPO
-  return { selectedRepo }
+  return selectedRepo
 }
diff --git a/packages/web/app/pages/[owner]/[repo]/index.vue b/packages/web/app/pages/[owner]/[repo]/index.vue
index a87ab0b2..65e9f251 100644
--- a/packages/web/app/pages/[owner]/[repo]/index.vue
+++ b/packages/web/app/pages/[owner]/[repo]/index.vue
@@ -6,20 +6,41 @@ const route = useRoute(OWNER_REPO)
 useSeoMeta({
   title: () => `Issue clusters - ${route.params.owner}/${route.params.repo}`
 })
+
+const { data: allowedRepos } = useFetchRepos()
+
+const selectedRepo = useSelectedRepo(route.params.owner, route.params.repo)
+
+const { data: clusters, refresh, status } = useFetchClusters(selectedRepo)
+
+const { data: duplicates, status: duplicatesStatus } = useFetchDuplicates(selectedRepo)
+
+const refreshClusters = () => refresh()
 </script>
 
 <template>
   <RepoViewLayout>
     <template #console>
-      <CommandConsole />
+      <CommandConsole 
+        :allowedRepos="allowedRepos" 
+        :status="status" 
+        :selectedRepo="selectedRepo" 
+        v-model:refresh="refreshClusters"
+      />
     </template>
 
     <template #duplicates>
-      <DuplicatesView />
+      <DuplicatesView 
+        :duplicates="duplicates" 
+        :status="duplicatesStatus" 
+      />
     </template>
 
     <template #clusters >
-      <ClusterViewJunction />
+      <ClusterViewJunction 
+        :clusters="clusters" 
+        :status="status" 
+      />
     </template>
   </RepoViewLayout>
 </template>

From 47aba8d6667b512ba12fabed15e143d44a707569 Mon Sep 17 00:00:00 2001
From: Brandon Hurrington <brandon.hurrington@lotto24.de>
Date: Sat, 5 Apr 2025 23:44:58 +0000
Subject: [PATCH 04/12] feat(web): Implemented  cluster view overlay

---
 packages/web/app/components/ClusterView.vue   | 52 ++++++++--
 .../app/components/ClusterViewJunction.vue    |  4 +-
 .../web/app/components/ClusterViewModal.vue   | 99 +++++++++++++++++++
 .../web/app/components/RepoViewLayout.vue     |  6 +-
 .../components/column-cell/ClusterItem.vue    | 29 ++----
 .../app/components/grid-cell/ClusterItem.vue  | 15 ++-
 .../components/paper-stack/ClusterItem.vue    | 19 ++--
 .../components/paper-stack/ClusterSummary.vue | 32 +++---
 .../components/paper-stack/GithubIssue.vue    | 29 +++---
 .../components/paper-stack/ShowMoreIssues.vue | 52 ++++++----
 .../web/app/composables/fetch-clusters.ts     |  4 +-
 .../web/app/composables/selected-cluster.ts   | 16 +++
 .../web/app/pages/[owner]/[repo]/index.vue    |  4 +
 packages/web/shared/models/github-metadata.ts |  7 ++
 14 files changed, 269 insertions(+), 99 deletions(-)
 create mode 100644 packages/web/app/components/ClusterViewModal.vue
 create mode 100644 packages/web/app/composables/selected-cluster.ts

diff --git a/packages/web/app/components/ClusterView.vue b/packages/web/app/components/ClusterView.vue
index 5c50044a..75a9dbd4 100644
--- a/packages/web/app/components/ClusterView.vue
+++ b/packages/web/app/components/ClusterView.vue
@@ -1,15 +1,51 @@
 <script setup lang="ts">
-    import type { IssueMetadata } from '~~/shared/models/github-metadata'
+import type { ClusterMetadata } from '~~/shared/models/github-metadata'
 
-    interface ClusterViewProps {
-        cluster: IssueMetadata;
-    }
+interface ClusterViewProps {
+    cluster: ClusterMetadata;
+    clusterIndex: number;
+}
+
+const { cluster, clusterIndex } = defineProps<ClusterViewProps>()
+
+const { data: clusters } = useNuxtData('clusters')
+
+const clus = clusters.value[clusterIndex]
 
-    const { cluster } = defineProps<ClusterViewProps>()
 </script>
 
+<!-- TODO: Props or useNuxtData to access correct cluster? -->
+<!-- TODO: Convert these ClusterView fields into slots in order to pass the issues from PaperStackClusterItem directly into them -->
 <template >
-    <div class="border-solid border-2 border-gray-700 rounded-md p-2" >
-        {{ cluster }}
-    </div>
+        <section
+            class=" overflow-hidden flex flex-col md:rounded-md md:border-solid md:border border-gray-700 md:p-8 columns-1 lg:columns-2 border-b-solid"
+        >
+            <PaperStackClusterSummary :clusterIndex="clusterIndex" :clusterLength="cluster.issues.length || 0" :clusterTitle="cluster.title" />
+
+            <div
+                v-for="(issue, index) of clus.issues"
+                :key="index"
+                class="issue-row h-24 p-3 p-r-none border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 whitespace-nowrap overflow-hidden text-ellipsis"
+            >
+                <PaperStackGithubIssue
+                    class=""
+                    :key="index"
+                    :url="issue.url"
+                    :title="issue.title"
+                    :owner="issue.owner"
+                    :repository="issue.repository"
+                    :number="issue.number"
+                    :avg-similarity="issue.avgSimilarity"
+                    :labels="issue.labels"
+                    :updated_at="issue.updated_at"
+                />
+            </div>
+        </section>
 </template>
+
+<style scoped>
+.issue-row {
+  /* position: relative; */
+  /* z-index: calc(var(--stack-index)); */
+}
+</style>
diff --git a/packages/web/app/components/ClusterViewJunction.vue b/packages/web/app/components/ClusterViewJunction.vue
index 4a0d3830..9bb1dac8 100644
--- a/packages/web/app/components/ClusterViewJunction.vue
+++ b/packages/web/app/components/ClusterViewJunction.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { AsyncDataRequestStatus } from '#app'
-import type { IssueMetadata } from '~~/shared/models/github-metadata'
+import type { ClusterMetadata } from '~~/shared/models/github-metadata'
 
 interface ClusterViewJunctionProps {
-    clusters: IssueMetadata[];
+    clusters: ClusterMetadata[];
     status: AsyncDataRequestStatus;
 }
 
diff --git a/packages/web/app/components/ClusterViewModal.vue b/packages/web/app/components/ClusterViewModal.vue
new file mode 100644
index 00000000..e2282fb7
--- /dev/null
+++ b/packages/web/app/components/ClusterViewModal.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+// import type { onClickOutside } from '@vueuse/core'
+import type { ClusterMetadata } from '~~/shared/models/github-metadata'
+
+interface ShowMoreIssuesProps {
+    cluster: ClusterMetadata;
+
+}
+
+const { cluster } = defineProps<ShowMoreIssuesProps>()
+
+const dialogRef = useTemplateRef('dialogRef')
+
+const isOpen = ref(false)
+
+const handleEscape = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && isOpen.value) {
+    closeModal()
+  }
+}
+
+const toggleBGScroll = (scrollLock: boolean) => {
+  if (scrollLock) {
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.body.style.overflow = ''
+  }
+}
+
+// TODO: Maybe just pass the index to identify the cluster down to this component instead and then I can useNuxtData inside of the modal?
+
+// const setSelectedCluster = useSelectedCluster()
+
+const openModal = () => {
+  isOpen.value = true
+  toggleBGScroll(true)
+}
+
+const closeModal = () => {
+  isOpen.value = false
+  toggleBGScroll(false)
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', handleEscape)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleEscape)
+
+  if (isOpen.value) {
+    toggleBGScroll(false)
+  }
+})
+
+// console.log('ClusterViewModal.issues', cluster.issues)
+
+defineExpose({
+  openModal,
+})
+</script>
+
+<template >
+     <Transition name="slide-fade">
+      <div 
+        ref="dialogRef" 
+        v-if="isOpen" 
+        class="fixed inset-0 h-dvh w-dvw min-h-screen min-w-screen bg-gray-900/60 backdrop-blur-sm z-20" 
+      > 
+        <div 
+          class="relative h-full w-full flex flex-col p-4 justify-center items-center" >         
+          <div class="bg-gray-800 border-solid border border-gray-700 rounded-md w-full max-w-3xl max-h-[80vh] overflow-y-auto" >
+            <slot name="modal-content" /> 
+          </div>
+          
+          <button class="text-lg bg-transparent color-gray-400 py-1 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors" type="button" @click="closeModal" >
+            Close
+          </button>     
+        </div>      
+      </div>
+    </Transition >    
+</template>
+
+<style >
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.3s ease;
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+    transform: scale(1.1);
+    opacity: 0;
+}
+
+
+
+
+</style>
diff --git a/packages/web/app/components/RepoViewLayout.vue b/packages/web/app/components/RepoViewLayout.vue
index 017dfc91..b79e7be7 100644
--- a/packages/web/app/components/RepoViewLayout.vue
+++ b/packages/web/app/components/RepoViewLayout.vue
@@ -1,8 +1,8 @@
 <!-- TODO: Probably no longer necessary -->
 <template>
-    <slot name="console"></slot> 
+    <slot name="console" /> 
 
-    <slot name="duplicates"></slot> 
+    <slot name="duplicates" /> 
 
-    <slot name="clusters" ></slot> 
+    <slot name="clusters" /> 
 </template>
diff --git a/packages/web/app/components/column-cell/ClusterItem.vue b/packages/web/app/components/column-cell/ClusterItem.vue
index 42f63557..0da53db9 100644
--- a/packages/web/app/components/column-cell/ClusterItem.vue
+++ b/packages/web/app/components/column-cell/ClusterItem.vue
@@ -1,25 +1,15 @@
 
 <script setup lang="ts">
-    import type { IssueMetadata } from '~~/shared/models/github-metadata'
+import type { ClusterMetadata } from '~~/shared/models/github-metadata'
 
-    interface ClusterViewProps {
-        clusters: IssueMetadata[];
-    }
+interface ClusterItemProps {
+    clusters: ClusterMetadata[];
+}
 
-    const { clusters } = defineProps<ClusterViewProps>()
+const { clusters } = defineProps<ClusterItemProps>()
 
-    const openState = reactive<Record<string, boolean>>({})
+const openState = reactive<Record<string, boolean>>({})
 
-    onMounted(async () => {
-        if ('startViewTransition' in document) {
-            let finishTransition: () => void
-            const promise = new Promise<void>((resolve) => {
-            finishTransition = resolve
-            })
-            watch(() => clusters, () => document.startViewTransition(() => promise), { flush: 'pre' })
-            watch(() => clusters, () => nextTick(finishTransition), { flush: 'post' })
-        }
-    })
 </script>
 
 <template >
@@ -27,7 +17,6 @@
         <section
         v-for="(cluster, c) of clusters"
         :key="c"
-        :style="{ '--section-index': c }"
         class=" overflow-hidden flex flex-col gap-4 md:rounded-md md:border-solid md:border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
         >
             <h2 class=" my-4 font-bold text-2xl flex items-baseline">
@@ -56,14 +45,12 @@
                 type="button"
                 @click="openState[c] = !openState[c]"
             >
-                show {{ cluster.issues?.length - 5 }} more
+                show {{ cluster.issues?.length - 3 }} more
             </button>
         </section>
     </div>
 </template>
 
 <style scoped>
-section:first-of-type {
-  view-transition-name: var(--section-index);
-}
+
 </style>
diff --git a/packages/web/app/components/grid-cell/ClusterItem.vue b/packages/web/app/components/grid-cell/ClusterItem.vue
index e896b7d0..bd4e9cd2 100644
--- a/packages/web/app/components/grid-cell/ClusterItem.vue
+++ b/packages/web/app/components/grid-cell/ClusterItem.vue
@@ -1,14 +1,14 @@
 
 <script setup lang="ts">
-    import type { IssueMetadata } from '~~/shared/models/github-metadata'
+import type { ClusterMetadata } from '~~/shared/models/github-metadata'
 
-    interface ClusterViewProps {
-        clusters: IssueMetadata[];
-    }
+interface ClusterItemProps {
+    clusters: ClusterMetadata[];
+}
 
-    const { clusters } = defineProps<ClusterViewProps>()
+const { clusters } = defineProps<ClusterItemProps>()
 
-    const openState = reactive<Record<string, boolean>>({})
+const openState = reactive<Record<string, boolean>>({})
 </script>
 
 <template >
@@ -16,7 +16,6 @@
         <section
         v-for="(cluster, c) of clusters"
         :key="c"
-        :style="{ '--section-index': c }"
         class=" overflow-hidden flex flex-col gap-4 md:rounded-md md:border-solid md:border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
         >
             <h2 class=" my-4 font-bold text-2xl flex items-baseline">
@@ -45,7 +44,7 @@
                 type="button"
                 @click="openState[c] = !openState[c]"
             >
-                show {{ cluster.issues?.length - 5 }} more
+                show {{ cluster.issues?.length - 3 }} more
             </button>
         </section>
     </div>
diff --git a/packages/web/app/components/paper-stack/ClusterItem.vue b/packages/web/app/components/paper-stack/ClusterItem.vue
index 778a4ceb..6eb4be67 100644
--- a/packages/web/app/components/paper-stack/ClusterItem.vue
+++ b/packages/web/app/components/paper-stack/ClusterItem.vue
@@ -1,16 +1,19 @@
 
 <script setup lang="ts">
-import type { IssueMetadata } from '~~/shared/models/github-metadata'
+import type { ClusterMetadata } from '~~/shared/models/github-metadata'
+
+const zIndex = ['z-8', 'z-6', 'z-4']
 
 interface ClusterItemProps {
-    clusters: IssueMetadata[];
+    clusters: ClusterMetadata[];
 }
 
 const { clusters } = defineProps<ClusterItemProps>()
 
-const openState = reactive<Record<string, boolean>>({})
+// const openState = reactive<Record<string, boolean>>({})
+
+// console.log('ClusterItemProps.clusters', clusters)
 
-const zIndex = ['z-8', 'z-6', 'z-4']
 </script>
 
 <template >
@@ -18,13 +21,12 @@ const zIndex = ['z-8', 'z-6', 'z-4']
         <section 
             v-for="(cluster, index) of clusters" 
             :key="index"
-            :style="{ '--section-index': index }"   
             class="flex flex-col "
         >
-            <PaperStackClusterSummary :clusterIndex="index" :clusterTitle="cluster.title" />
+            <PaperStackClusterSummary :clusterIndex="index" :clusterLength="cluster.issues.length || 0" :clusterTitle="cluster.title" />
 
             <div 
-                v-for="(issue, idx) of cluster.issues?.slice(0, 3)"
+                v-for="(issue, idx) of cluster.issues.slice(0, 3)"
                 class="h-20 p-2 p-r-none border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 whitespace-nowrap overflow-hidden text-ellipsis -mt-2"
                 :class="zIndex[idx]"
             >
@@ -45,8 +47,7 @@ const zIndex = ['z-8', 'z-6', 'z-4']
             <div 
                 class="h-10 p-2 border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 whitespace-nowrap overflow-hidden text-ellipsis -mt-2 z-2"
             >
-                <!-- TODO: Remove open state logic -->
-                <PaperStackShowMoreIssues :clusterIndex="index" :clusterLength="cluster.issues?.length || 0" v-model:openState="openState" />
+                <PaperStackShowMoreIssues :cluster="cluster" :clusterIndex="index" :clusterLength="cluster.issues.length || 0" />
             </div>
         </section>
     </div>
diff --git a/packages/web/app/components/paper-stack/ClusterSummary.vue b/packages/web/app/components/paper-stack/ClusterSummary.vue
index 2a1c8f9c..9aa66cba 100644
--- a/packages/web/app/components/paper-stack/ClusterSummary.vue
+++ b/packages/web/app/components/paper-stack/ClusterSummary.vue
@@ -1,36 +1,38 @@
 <script setup lang="ts">
-    interface ClusterSummaryProps {
-        clusterIndex: number;
-        clusterTitle: string;
-    }
+interface ClusterSummaryProps {
+    clusterIndex: number;
+    clusterLength: number;
+    clusterTitle: string;
+}
 
-    const CLUSTER_ICON = 'cluster'
-    const CLUSTER_SUMMARY = 'Cluster Summary'
+const CLUSTER_ICON = 'cluster'
+const CLUSTER_SUMMARY = 'Cluster Summary'
+const TOTAL_ISSUES = 'Total number of issues: '
 
-    const { clusterIndex, clusterTitle } = defineProps<ClusterSummaryProps>()
+const { clusterIndex, clusterLength, clusterTitle } = defineProps<ClusterSummaryProps>()
 </script>
 
 <template >
-    <div class="h-40 md:p-2 md:border-3 md:border-solid border-gray-600 md:rounded-md bg-shark-500 relative z-10">
+    <section class="h-40 md:p-2 md:border-3 md:border-solid border-gray-600 md:rounded-md bg-shark-500 relative z-10">
         <div class="flex justify-between items-baseline gap-1">
             <div class="font-bold text-2xl flex items-baseline">
-                <h2 class="text-gray-500 inline-block mr-1 font-normal">#</h2>{{ clusterIndex + 1 }}
+                <p class="text-gray-500 inline-block mr-1 font-normal">#</p>{{ clusterIndex + 1 }}
             </div>
 
             <div>
-                <h1 class="text-lg text-gray-300 inline-block font-bold">{{ CLUSTER_SUMMARY }}</h1>
+                <p class="text-lg text-gray-300 inline-block font-bold">{{ CLUSTER_SUMMARY }}</p>
             </div>
 
             <div>
                 <span class="ml-auto text-white bg-gray-700 text-sm font-normal rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 border-gray-700 inline-block leading-tight flex items-center">
-                    <span class="i-tabler:copy inline-block w-4 h-4" />
+                    <SvgPaperStack class="inline-block w-4 h-4" />
                     {{ CLUSTER_ICON}}
                 </span>
             </div>
         </div>
             
-        <h1>
-            <span class="text-lg color-gray-400 overflow-hidden text-wrap"> {{ clusterTitle }}</span>
-        </h1>
-    </div>
+        <div class="text-lg color-gray-400 overflow-hidden text-wrap"> {{ clusterTitle }}</div>
+
+        <div class="text-lg color-gray-400 overflow-hidden text-wrap"> {{ TOTAL_ISSUES + clusterLength }}</div>
+    </section>
 </template>
diff --git a/packages/web/app/components/paper-stack/GithubIssue.vue b/packages/web/app/components/paper-stack/GithubIssue.vue
index 3e064bb7..c8d989ba 100644
--- a/packages/web/app/components/paper-stack/GithubIssue.vue
+++ b/packages/web/app/components/paper-stack/GithubIssue.vue
@@ -1,24 +1,25 @@
 <script setup lang="ts">
-    interface GithubIssueProps {
-        url: string;
-        title: string;
-        owner: string;
-        repository: string;
-        number: number;
-        avgSimilarity: number;
-        labels: Array<string | { name: string, color?: string }>;
-        updated_at: string;
-    }
+interface GithubIssueProps {
+    url: string;
+    title: string;
+    owner: string;
+    repository: string;
+    number: number;
+    avgSimilarity: number;
+    labels: Array<string | { name: string, color?: string }>;
+    updated_at: string;
+}
 
-    const UPDATED = 'updated'
-    const PERCENT_SIMILAR = '% similar'
+const UPDATED = 'updated'
+const PERCENT_SIMILAR = '% similar'
 
-    const { url, title, owner, repository, number, avgSimilarity, labels, updated_at } = defineProps<GithubIssueProps>()
+const { url, title, owner, repository, number, avgSimilarity, labels, updated_at } = defineProps<GithubIssueProps>()
 </script>
 
 <template>
   <article class="max-w-full overflow-hidden flex flex-row gap-1 ">
-    <span class="flex-shrink-0 inline-block h-5 i-tabler-circle-dot text-green-500 mt-1" />
+    <!-- TODO: Margin on this isn't ideal, could be slightly nicer -->
+    <span class="flex-shrink-0 inline-block h-5 i-tabler-circle-dot text-green-500 mt-.5" />
 
     <div class="flex flex-col flex-wrap md:flex-nowrap flex-grow">
       <NuxtLink
diff --git a/packages/web/app/components/paper-stack/ShowMoreIssues.vue b/packages/web/app/components/paper-stack/ShowMoreIssues.vue
index 2e995580..59a01bf4 100644
--- a/packages/web/app/components/paper-stack/ShowMoreIssues.vue
+++ b/packages/web/app/components/paper-stack/ShowMoreIssues.vue
@@ -1,30 +1,48 @@
 <script setup lang="ts">
-    interface ShowMoreIssuesProps {
-        clusterIndex: number;
-        clusterLength: number;
-    }
+import type ClusterViewModal from '../ClusterViewModal.vue'
+import type { ClusterMetadata } from '~~/shared/models/github-metadata'
 
-    const { clusterIndex, clusterLength } = defineProps<ShowMoreIssuesProps>()
+const NO_MORE_ISSUES = 'No More Issues...'
 
-    // TODO: Modify this to be open the cluster view
-    const openState = defineModel<Record<string, boolean>>('openState', {
-        required: true
-    })
+interface ShowMoreIssuesProps {
+    cluster: ClusterMetadata;
+    clusterIndex: number;
+    clusterLength: number;
+}
 
-    const NO_MORE_ISSUES = 'No More Issues...'
+const { cluster, clusterIndex, clusterLength } = defineProps<ShowMoreIssuesProps>()
+
+const modalRef = useTemplateRef<InstanceType<typeof ClusterViewModal>>('modalRef')
+    
+// TODO: Change the name of this component
+
+const openModal = () => modalRef.value?.openModal()
 </script>
 
 <template >
-    <div class="grid grid-cols-4 gap-4" >
-        <!-- TODO: Needs to launch the popover/route/whatever to the ClusterView -->
+    <div class="text-center " >
+    <div v-if="clusterLength > 3 " >
         <button
-            v-if="clusterLength > 3 && openState[clusterIndex] !== true"
-            class=" text-sm bg-transparent color-gray-400 py-2 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
+            class=" text-sm bg-transparent color-gray-400 py-1 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
             type="button"
+            @click="openModal"
         >
             show {{ clusterLength - 3 }} more issues...
         </button>
-        <!-- TODO: Improve the alternate state for the show more button -->
-        <div v-else>{{ NO_MORE_ISSUES}}</div>
+
+        <Teleport to="#teleports" class=" ">
+            <ClusterViewModal ref="modalRef" :cluster="cluster">
+                <template #modal-content>
+                    <ClientOnly>
+                        <ClusterView :cluster="cluster" :clusterIndex="clusterIndex" />
+                    </ClientOnly>
+                </template>
+            </ClusterViewModal>
+        </Teleport>
+    </div>
+   
+    <!-- TODO: Improve the alternate state for the show more button -->
+    <div v-else>{{ NO_MORE_ISSUES}}</div>
+    
     </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/packages/web/app/composables/fetch-clusters.ts b/packages/web/app/composables/fetch-clusters.ts
index 586f6e1d..6ef333f4 100644
--- a/packages/web/app/composables/fetch-clusters.ts
+++ b/packages/web/app/composables/fetch-clusters.ts
@@ -1,7 +1,7 @@
-import type { IssueMetadata } from '~~/shared/models/github-metadata'
+import type { ClusterMetadata } from '~~/shared/models/github-metadata'
 
 export function useFetchClusters(selectedRepo: Ref<string>) {
-  return useFetch<IssueMetadata[]>(() => `/api/clusters/${selectedRepo.value}`, {
+  return useFetch<ClusterMetadata[]>(() => `/api/clusters/${selectedRepo.value}`, {
     key: 'clusters',
     baseURL: useRuntimeConfig().public.remote,
     default: () => [],
diff --git a/packages/web/app/composables/selected-cluster.ts b/packages/web/app/composables/selected-cluster.ts
new file mode 100644
index 00000000..5d2cc8ad
--- /dev/null
+++ b/packages/web/app/composables/selected-cluster.ts
@@ -0,0 +1,16 @@
+import type { ClusterMetadata } from '~~/shared/models/github-metadata'
+
+const selectedCluster = ref<ClusterMetadata>()
+
+export function useSelectedCluster() {
+  const { data: clusters } = useNuxtData('clusters')
+
+  const setSelectedCluster = (clusterIndex: number) => {
+    selectedCluster.value = clusters.value[clusterIndex]
+  }
+
+  return {
+    selectedCluster,
+    setSelectedCluster,
+  }
+}
diff --git a/packages/web/app/pages/[owner]/[repo]/index.vue b/packages/web/app/pages/[owner]/[repo]/index.vue
index 65e9f251..64b654d8 100644
--- a/packages/web/app/pages/[owner]/[repo]/index.vue
+++ b/packages/web/app/pages/[owner]/[repo]/index.vue
@@ -9,6 +9,10 @@ useSeoMeta({
 
 const { data: allowedRepos } = useFetchRepos()
 
+//  TODO: useNuxtData() here or somewhere
+//  TODO: wrap it in a composable
+
+
 const selectedRepo = useSelectedRepo(route.params.owner, route.params.repo)
 
 const { data: clusters, refresh, status } = useFetchClusters(selectedRepo)
diff --git a/packages/web/shared/models/github-metadata.ts b/packages/web/shared/models/github-metadata.ts
index b360d6e1..f3db28d3 100644
--- a/packages/web/shared/models/github-metadata.ts
+++ b/packages/web/shared/models/github-metadata.ts
@@ -2,6 +2,13 @@ export interface RepoMetadata {
   repo: string
   issuesIndexed: number
   indexed: boolean
+  // TODO: Add clusters to server response
+  // clusters: ClusterMetadata[]
+}
+
+export interface ClusterMetadata {
+  issues: IssueMetadata[]
+  title: string
 }
 
 export interface IssueMetadata {

From dd773db57b26deb37fa9bac643321f7451243fae Mon Sep 17 00:00:00 2001
From: Brandon Hurrington <brandon.hurrington@lotto24.de>
Date: Mon, 7 Apr 2025 08:09:17 +0000
Subject: [PATCH 05/12] feat(web): Refactored cluster view structure

---
 packages/web/app/components/ClusterView.vue   | 51 -----------
 .../app/components/ClusterViewJunction.vue    | 26 +++---
 .../web/app/components/ClusterViewModal.vue   | 22 +----
 packages/web/app/components/ViewToggle.vue    |  2 +-
 .../components/column-cell/ClusterItem.vue    |  2 -
 .../app/components/grid-cell/ClusterItem.vue  |  2 -
 .../components/paper-stack/ClusterItem.vue    | 77 ----------------
 .../components/paper-stack/ClusterLayout.vue  | 22 +++++
 .../components/paper-stack/ClusterView.vue    | 89 +++++++++++++++++++
 .../components/paper-stack/ShowMoreIssues.vue |  8 +-
 .../{toggle-view.ts => selected-view.ts}      |  2 +-
 .../web/app/pages/[owner]/[repo]/index.vue    |  4 -
 12 files changed, 135 insertions(+), 172 deletions(-)
 delete mode 100644 packages/web/app/components/ClusterView.vue
 delete mode 100644 packages/web/app/components/paper-stack/ClusterItem.vue
 create mode 100644 packages/web/app/components/paper-stack/ClusterLayout.vue
 create mode 100644 packages/web/app/components/paper-stack/ClusterView.vue
 rename packages/web/app/composables/{toggle-view.ts => selected-view.ts} (90%)

diff --git a/packages/web/app/components/ClusterView.vue b/packages/web/app/components/ClusterView.vue
deleted file mode 100644
index 75a9dbd4..00000000
--- a/packages/web/app/components/ClusterView.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import type { ClusterMetadata } from '~~/shared/models/github-metadata'
-
-interface ClusterViewProps {
-    cluster: ClusterMetadata;
-    clusterIndex: number;
-}
-
-const { cluster, clusterIndex } = defineProps<ClusterViewProps>()
-
-const { data: clusters } = useNuxtData('clusters')
-
-const clus = clusters.value[clusterIndex]
-
-</script>
-
-<!-- TODO: Props or useNuxtData to access correct cluster? -->
-<!-- TODO: Convert these ClusterView fields into slots in order to pass the issues from PaperStackClusterItem directly into them -->
-<template >
-        <section
-            class=" overflow-hidden flex flex-col md:rounded-md md:border-solid md:border border-gray-700 md:p-8 columns-1 lg:columns-2 border-b-solid"
-        >
-            <PaperStackClusterSummary :clusterIndex="clusterIndex" :clusterLength="cluster.issues.length || 0" :clusterTitle="cluster.title" />
-
-            <div
-                v-for="(issue, index) of clus.issues"
-                :key="index"
-                class="issue-row h-24 p-3 p-r-none border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 whitespace-nowrap overflow-hidden text-ellipsis"
-            >
-                <PaperStackGithubIssue
-                    class=""
-                    :key="index"
-                    :url="issue.url"
-                    :title="issue.title"
-                    :owner="issue.owner"
-                    :repository="issue.repository"
-                    :number="issue.number"
-                    :avg-similarity="issue.avgSimilarity"
-                    :labels="issue.labels"
-                    :updated_at="issue.updated_at"
-                />
-            </div>
-        </section>
-</template>
-
-<style scoped>
-.issue-row {
-  /* position: relative; */
-  /* z-index: calc(var(--stack-index)); */
-}
-</style>
diff --git a/packages/web/app/components/ClusterViewJunction.vue b/packages/web/app/components/ClusterViewJunction.vue
index 9bb1dac8..783849c9 100644
--- a/packages/web/app/components/ClusterViewJunction.vue
+++ b/packages/web/app/components/ClusterViewJunction.vue
@@ -7,7 +7,7 @@ interface ClusterViewJunctionProps {
     status: AsyncDataRequestStatus;
 }
 
-const { selectedView } = useToggleViewState()
+const { selectedView } = useSelectedView()
 
 const { clusters, status } = defineProps<ClusterViewJunctionProps>()
 </script>
@@ -22,17 +22,19 @@ const { clusters, status } = defineProps<ClusterViewJunctionProps>()
     </template>
 
     <template v-else>
-        <template v-if="selectedView === 'PaperStack'">
-            <PaperStackClusterItem :clusters="clusters" />
-        </template>
-
-        <template v-if="selectedView === 'GridCell'" >
-            <GridCellClusterItem :clusters="clusters" />            
-        </template>
-
-        <template v-if="selectedView === 'ColumnCell'">
-            <ColumnCellClusterItem :clusters="clusters" />
-        </template>
+        <div class="grid grid-cols-4 gap-4 pt-4">
+            <template v-if="selectedView === 'PaperStack'">
+                <PaperStackClusterLayout :clusters="clusters" />
+            </template>
+
+            <template v-if="selectedView === 'GridCell'" >
+                <GridCellClusterItem :clusters="clusters" />            
+            </template>
+
+            <template v-if="selectedView === 'ColumnCell'">
+                <ColumnCellClusterItem :clusters="clusters" />
+            </template>
+        </div>
     </template>
 </template>
  
\ No newline at end of file
diff --git a/packages/web/app/components/ClusterViewModal.vue b/packages/web/app/components/ClusterViewModal.vue
index e2282fb7..da7a55ff 100644
--- a/packages/web/app/components/ClusterViewModal.vue
+++ b/packages/web/app/components/ClusterViewModal.vue
@@ -1,13 +1,5 @@
 <script setup lang="ts">
-// import type { onClickOutside } from '@vueuse/core'
-import type { ClusterMetadata } from '~~/shared/models/github-metadata'
-
-interface ShowMoreIssuesProps {
-    cluster: ClusterMetadata;
-
-}
-
-const { cluster } = defineProps<ShowMoreIssuesProps>()
+const CLOSE = 'Close'
 
 const dialogRef = useTemplateRef('dialogRef')
 
@@ -27,10 +19,6 @@ const toggleBGScroll = (scrollLock: boolean) => {
   }
 }
 
-// TODO: Maybe just pass the index to identify the cluster down to this component instead and then I can useNuxtData inside of the modal?
-
-// const setSelectedCluster = useSelectedCluster()
-
 const openModal = () => {
   isOpen.value = true
   toggleBGScroll(true)
@@ -53,8 +41,6 @@ onUnmounted(() => {
   }
 })
 
-// console.log('ClusterViewModal.issues', cluster.issues)
-
 defineExpose({
   openModal,
 })
@@ -64,8 +50,8 @@ defineExpose({
      <Transition name="slide-fade">
       <div 
         ref="dialogRef" 
-        v-if="isOpen" 
-        class="fixed inset-0 h-dvh w-dvw min-h-screen min-w-screen bg-gray-900/60 backdrop-blur-sm z-20" 
+        v-show="isOpen" 
+        class="fixed inset-0 h-dvh w-dvw min-h-screen min-w-screen bg-gray-900/60 backdrop-blur-sm z-200" 
       > 
         <div 
           class="relative h-full w-full flex flex-col p-4 justify-center items-center" >         
@@ -74,7 +60,7 @@ defineExpose({
           </div>
           
           <button class="text-lg bg-transparent color-gray-400 py-1 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors" type="button" @click="closeModal" >
-            Close
+            {{ CLOSE }}
           </button>     
         </div>      
       </div>
diff --git a/packages/web/app/components/ViewToggle.vue b/packages/web/app/components/ViewToggle.vue
index e0e79062..f69b1a2b 100644
--- a/packages/web/app/components/ViewToggle.vue
+++ b/packages/web/app/components/ViewToggle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-const { selectedView, toggleViewState, } = useToggleViewState()
+const { selectedView, toggleViewState, } = useSelectedView()
 
 </script>
 
diff --git a/packages/web/app/components/column-cell/ClusterItem.vue b/packages/web/app/components/column-cell/ClusterItem.vue
index 0da53db9..a6afbc4a 100644
--- a/packages/web/app/components/column-cell/ClusterItem.vue
+++ b/packages/web/app/components/column-cell/ClusterItem.vue
@@ -13,7 +13,6 @@ const openState = reactive<Record<string, boolean>>({})
 </script>
 
 <template >
-    <div class="grid grid-cols-4 gap-4" >
         <section
         v-for="(cluster, c) of clusters"
         :key="c"
@@ -48,7 +47,6 @@ const openState = reactive<Record<string, boolean>>({})
                 show {{ cluster.issues?.length - 3 }} more
             </button>
         </section>
-    </div>
 </template>
 
 <style scoped>
diff --git a/packages/web/app/components/grid-cell/ClusterItem.vue b/packages/web/app/components/grid-cell/ClusterItem.vue
index bd4e9cd2..68357838 100644
--- a/packages/web/app/components/grid-cell/ClusterItem.vue
+++ b/packages/web/app/components/grid-cell/ClusterItem.vue
@@ -12,7 +12,6 @@ const openState = reactive<Record<string, boolean>>({})
 </script>
 
 <template >
-    <div class="grid grid-cols-4 gap-4" >
         <section
         v-for="(cluster, c) of clusters"
         :key="c"
@@ -47,5 +46,4 @@ const openState = reactive<Record<string, boolean>>({})
                 show {{ cluster.issues?.length - 3 }} more
             </button>
         </section>
-    </div>
 </template>
diff --git a/packages/web/app/components/paper-stack/ClusterItem.vue b/packages/web/app/components/paper-stack/ClusterItem.vue
deleted file mode 100644
index 6eb4be67..00000000
--- a/packages/web/app/components/paper-stack/ClusterItem.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-
-<script setup lang="ts">
-import type { ClusterMetadata } from '~~/shared/models/github-metadata'
-
-const zIndex = ['z-8', 'z-6', 'z-4']
-
-interface ClusterItemProps {
-    clusters: ClusterMetadata[];
-}
-
-const { clusters } = defineProps<ClusterItemProps>()
-
-// const openState = reactive<Record<string, boolean>>({})
-
-// console.log('ClusterItemProps.clusters', clusters)
-
-</script>
-
-<template >
-    <div class="grid grid-cols-4 gap-4 pt-4">
-        <section 
-            v-for="(cluster, index) of clusters" 
-            :key="index"
-            class="flex flex-col "
-        >
-            <PaperStackClusterSummary :clusterIndex="index" :clusterLength="cluster.issues.length || 0" :clusterTitle="cluster.title" />
-
-            <div 
-                v-for="(issue, idx) of cluster.issues.slice(0, 3)"
-                class="h-20 p-2 p-r-none border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 whitespace-nowrap overflow-hidden text-ellipsis -mt-2"
-                :class="zIndex[idx]"
-            >
-                <PaperStackGithubIssue
-                    class="github-issues relative"
-                    :key="idx"
-                    :url="issue.url"
-                    :title="issue.title"
-                    :owner="issue.owner"
-                    :repository="issue.repository"
-                    :number="issue.number"
-                    :avg-similarity="issue.avgSimilarity"
-                    :labels="issue.labels"
-                    :updated_at="issue.updated_at"
-                />
-            </div>
-
-            <div 
-                class="h-10 p-2 border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 whitespace-nowrap overflow-hidden text-ellipsis -mt-2 z-2"
-            >
-                <PaperStackShowMoreIssues :cluster="cluster" :clusterIndex="index" :clusterLength="cluster.issues.length || 0" />
-            </div>
-        </section>
-    </div>
-</template>
-
-<!-- TODO: Improve naive gradient approach -->
- <!-- .github-issues {
-  mask-image: linear-gradient(to right, black 80%, transparent 100%);
-  -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
-} -->
-<style scoped>
-.github-issues  {
-  position: relative; 
-  overflow: hidden;    
-}
-
-.github-issues::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 5rem;         
-  height: 100%;        
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), #6b7280); 
-  pointer-events: none; 
-}  
-</style>
diff --git a/packages/web/app/components/paper-stack/ClusterLayout.vue b/packages/web/app/components/paper-stack/ClusterLayout.vue
new file mode 100644
index 00000000..f8f1ab13
--- /dev/null
+++ b/packages/web/app/components/paper-stack/ClusterLayout.vue
@@ -0,0 +1,22 @@
+
+<script setup lang="ts">
+import type { ClusterMetadata } from '~~/shared/models/github-metadata'
+
+interface ClusterItemProps {
+    clusters: ClusterMetadata[];
+}
+
+const { clusters } = defineProps<ClusterItemProps>()
+
+</script>
+
+<template >
+    <section 
+        v-for="(cluster, index) of clusters" 
+        :key="index"
+    >
+        <PaperStackClusterView :cluster="cluster" :clusterIndex="index" :clusterLength="3" :clusterTitle="cluster.title" />
+
+        <PaperStackShowMoreIssues :cluster="cluster" :clusterIndex="index" :clusterLength="cluster.issues.length || 0" />
+    </section>
+</template>
\ No newline at end of file
diff --git a/packages/web/app/components/paper-stack/ClusterView.vue b/packages/web/app/components/paper-stack/ClusterView.vue
new file mode 100644
index 00000000..9faf0af9
--- /dev/null
+++ b/packages/web/app/components/paper-stack/ClusterView.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { ClusterMetadata } from '~~/shared/models/github-metadata'
+
+interface ClusterViewProps {
+    cluster: ClusterMetadata;
+    clusterTitle: string;
+    clusterIndex: number;
+    clusterLength?: number;
+}
+
+const { cluster, clusterIndex, clusterLength, clusterTitle } = defineProps<ClusterViewProps>()
+
+const issuesStack = computed(() => {
+    return (clusterLength) ? cluster.issues.slice(0, clusterLength) : cluster.issues
+})
+
+</script>
+
+<!-- TODO: Find a solution other than z-index -->
+
+<template >
+        <section
+            class="flex flex-col rounded-md border-solid border border-gray-700 columns-1 "
+        >
+            <PaperStackClusterSummary 
+                :clusterIndex="clusterIndex" 
+                :clusterLength="clusterLength || cluster.issues.length" 
+                :clusterTitle="clusterTitle"
+                :style="{
+                    zIndex: cluster.issues.length + 1,
+                }"
+            />
+
+            <div
+                v-for="(issue, index) of issuesStack"
+                :key="index"
+                :style="{
+                    zIndex: cluster.issues.length - index,
+                }"
+                class="relative -mt-2 h-25 py-4 p-l-3 p-r-none border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 
+                scrollbar scrollbar-rounded scrollbar-w-2 scrollbar-thumb-gray-500 scrollbar-track-gray-700 hover:scrollbar-thumb-gray-400"
+            >
+                <!-- TODO: Fix scrollbar styling -->
+            <!-- class="h-20 p-2 p-r-none border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 whitespace-nowrap overflow-hidden text-ellipsis -mt-2" -->
+
+                <PaperStackGithubIssue
+                    class="issue-row relative"
+                    :key="index"
+                    :url="issue.url"
+                    :title="issue.title"
+                    :owner="issue.owner"
+                    :repository="issue.repository"
+                    :number="issue.number"
+                    :avg-similarity="issue.avgSimilarity"
+                    :labels="issue.labels"
+                    :updated_at="issue.updated_at"
+                />
+            </div>
+        </section>
+</template>
+
+<!-- TODO: Find a solution for gradient -->
+<!-- TODO: whitespace-nowrap overflow-hidden text-ellipsis -->
+<!-- TODO: Improve naive gradient approach -->
+<!-- TODO: Need to split some of the behaviors between here and the ClusterLayout in order to get the correct width -->
+
+<style scoped>
+/* .issue-row {
+    margin-top: -0.25rem; 
+  position: relative;
+   z-index: calc(var(--stack-index));
+} */
+
+/* .github-issues  {
+  position: relative; 
+  overflow: hidden;    
+}
+
+.github-issues::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 5rem;         
+  height: 100%;        
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), #6b7280); 
+  pointer-events: none; 
+}   */
+</style>
diff --git a/packages/web/app/components/paper-stack/ShowMoreIssues.vue b/packages/web/app/components/paper-stack/ShowMoreIssues.vue
index 59a01bf4..97370c00 100644
--- a/packages/web/app/components/paper-stack/ShowMoreIssues.vue
+++ b/packages/web/app/components/paper-stack/ShowMoreIssues.vue
@@ -14,13 +14,13 @@ const { cluster, clusterIndex, clusterLength } = defineProps<ShowMoreIssuesProps
 
 const modalRef = useTemplateRef<InstanceType<typeof ClusterViewModal>>('modalRef')
     
-// TODO: Change the name of this component
-
 const openModal = () => modalRef.value?.openModal()
 </script>
 
+<!-- TODO: Change the name of this component -->
+
 <template >
-    <div class="text-center " >
+    <div class=" h-10 p-2 border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 whitespace-nowrap overflow-hidden text-ellipsis -mt-2 z-2 text-center " >
     <div v-if="clusterLength > 3 " >
         <button
             class=" text-sm bg-transparent color-gray-400 py-1 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
@@ -34,7 +34,7 @@ const openModal = () => modalRef.value?.openModal()
             <ClusterViewModal ref="modalRef" :cluster="cluster">
                 <template #modal-content>
                     <ClientOnly>
-                        <ClusterView :cluster="cluster" :clusterIndex="clusterIndex" />
+                        <PaperStackClusterView :cluster="cluster" :clusterIndex="clusterIndex" :clusterTitle="cluster.title" />
                     </ClientOnly>
                 </template>
             </ClusterViewModal>
diff --git a/packages/web/app/composables/toggle-view.ts b/packages/web/app/composables/selected-view.ts
similarity index 90%
rename from packages/web/app/composables/toggle-view.ts
rename to packages/web/app/composables/selected-view.ts
index 0d0ef551..1fb245f4 100644
--- a/packages/web/app/composables/toggle-view.ts
+++ b/packages/web/app/composables/selected-view.ts
@@ -5,7 +5,7 @@ export type ViewToggleState =
 
 const selectedView = ref<ViewToggleState>('PaperStack')
 
-export function useToggleViewState() {
+export function useSelectedView() {
   const toggleViewState = (event: PointerEvent) => {
     event.preventDefault()
     const button = event.currentTarget as HTMLButtonElement
diff --git a/packages/web/app/pages/[owner]/[repo]/index.vue b/packages/web/app/pages/[owner]/[repo]/index.vue
index 64b654d8..65e9f251 100644
--- a/packages/web/app/pages/[owner]/[repo]/index.vue
+++ b/packages/web/app/pages/[owner]/[repo]/index.vue
@@ -9,10 +9,6 @@ useSeoMeta({
 
 const { data: allowedRepos } = useFetchRepos()
 
-//  TODO: useNuxtData() here or somewhere
-//  TODO: wrap it in a composable
-
-
 const selectedRepo = useSelectedRepo(route.params.owner, route.params.repo)
 
 const { data: clusters, refresh, status } = useFetchClusters(selectedRepo)

From 0e7c2a271cf3f09ba067c8aac4fa0218ad37f817 Mon Sep 17 00:00:00 2001
From: Brandon Hurrington <brandon.hurrington@lotto24.de>
Date: Sat, 12 Apr 2025 19:53:31 +0000
Subject: [PATCH 06/12] feat(web): Implemented WindowPane cluster view

---
 .../app/components/ClusterViewJunction.vue    | 40 --------
 .../web/app/components/ClusterViewModal.vue   | 16 +--
 .../web/app/components/CommandConsole.vue     |  3 +-
 .../web/app/components/GitHubIssueLoading.vue |  2 +
 .../app/components/GitHubIssueSkeleton.vue    | 20 ++++
 .../web/app/components/GitHubIssueSketon.vue  | 17 ----
 .../web/app/components/NoClustersView.vue     |  2 +-
 .../web/app/components/RepoViewLayout.vue     | 44 ++++++++-
 .../{ViewToggle.vue => RepoViewToggle.vue}    |  8 +-
 .../app/components/grid-cell/ClusterItem.vue  | 49 ----------
 .../{ShowMoreIssues.vue => ClusterAction.vue} | 16 +--
 .../components/paper-stack/ClusterLayout.vue  |  4 +-
 .../components/paper-stack/ClusterSummary.vue | 14 +--
 .../components/paper-stack/ClusterView.vue    | 13 ++-
 .../components/paper-stack/GithubIssue.vue    |  1 -
 packages/web/app/components/svg/GridCell.vue  |  9 --
 .../web/app/components/svg/PaperStack.vue     |  2 +-
 .../web/app/components/svg/WindowPane.vue     |  9 ++
 .../components/window-pane/ClusterAction.vue  | 49 ++++++++++
 .../components/window-pane/ClusterLayout.vue  | 22 +++++
 .../components/window-pane/ClusterSummary.vue | 38 +++++++
 .../components/window-pane/ClusterView.vue    | 52 ++++++++++
 .../components/window-pane/GithubIssue.vue    | 98 +++++++++++++++++++
 packages/web/app/composables/selected-view.ts |  2 +-
 .../web/app/pages/[owner]/[repo]/index.vue    | 12 +--
 25 files changed, 375 insertions(+), 167 deletions(-)
 delete mode 100644 packages/web/app/components/ClusterViewJunction.vue
 create mode 100644 packages/web/app/components/GitHubIssueSkeleton.vue
 delete mode 100644 packages/web/app/components/GitHubIssueSketon.vue
 rename packages/web/app/components/{ViewToggle.vue => RepoViewToggle.vue} (92%)
 delete mode 100644 packages/web/app/components/grid-cell/ClusterItem.vue
 rename packages/web/app/components/paper-stack/{ShowMoreIssues.vue => ClusterAction.vue} (73%)
 delete mode 100644 packages/web/app/components/svg/GridCell.vue
 create mode 100644 packages/web/app/components/svg/WindowPane.vue
 create mode 100644 packages/web/app/components/window-pane/ClusterAction.vue
 create mode 100644 packages/web/app/components/window-pane/ClusterLayout.vue
 create mode 100644 packages/web/app/components/window-pane/ClusterSummary.vue
 create mode 100644 packages/web/app/components/window-pane/ClusterView.vue
 create mode 100644 packages/web/app/components/window-pane/GithubIssue.vue

diff --git a/packages/web/app/components/ClusterViewJunction.vue b/packages/web/app/components/ClusterViewJunction.vue
deleted file mode 100644
index 783849c9..00000000
--- a/packages/web/app/components/ClusterViewJunction.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import type { AsyncDataRequestStatus } from '#app'
-import type { ClusterMetadata } from '~~/shared/models/github-metadata'
-
-interface ClusterViewJunctionProps {
-    clusters: ClusterMetadata[];
-    status: AsyncDataRequestStatus;
-}
-
-const { selectedView } = useSelectedView()
-
-const { clusters, status } = defineProps<ClusterViewJunctionProps>()
-</script>
-
-<template>
-    <template v-if="status === 'idle' || status === 'pending'">
-      <GitHubIssueSkeleton />
-    </template>
-
-    <template v-else-if="!clusters.length">
-      <NoClustersView />
-    </template>
-
-    <template v-else>
-        <div class="grid grid-cols-4 gap-4 pt-4">
-            <template v-if="selectedView === 'PaperStack'">
-                <PaperStackClusterLayout :clusters="clusters" />
-            </template>
-
-            <template v-if="selectedView === 'GridCell'" >
-                <GridCellClusterItem :clusters="clusters" />            
-            </template>
-
-            <template v-if="selectedView === 'ColumnCell'">
-                <ColumnCellClusterItem :clusters="clusters" />
-            </template>
-        </div>
-    </template>
-</template>
- 
\ No newline at end of file
diff --git a/packages/web/app/components/ClusterViewModal.vue b/packages/web/app/components/ClusterViewModal.vue
index da7a55ff..bb3ed88b 100644
--- a/packages/web/app/components/ClusterViewModal.vue
+++ b/packages/web/app/components/ClusterViewModal.vue
@@ -54,12 +54,13 @@ defineExpose({
         class="fixed inset-0 h-dvh w-dvw min-h-screen min-w-screen bg-gray-900/60 backdrop-blur-sm z-200" 
       > 
         <div 
-          class="relative h-full w-full flex flex-col p-4 justify-center items-center" >         
-          <div class="bg-gray-800 border-solid border border-gray-700 rounded-md w-full max-w-3xl max-h-[80vh] overflow-y-auto" >
+          class="relative h-full w-full flex flex-col p-4 justify-center items-center" 
+        >         
+          <div class="modal-content bg-gray-800 border-solid border border-gray-700 rounded-md w-full max-w-3xl max-h-[80vh] overflow-y-auto p-8" >
             <slot name="modal-content" /> 
           </div>
           
-          <button class="text-lg bg-transparent color-gray-400 py-1 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors" type="button" @click="closeModal" >
+          <button class="text-xl bg-transparent color-gray-400 py-3 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors" type="button" @click="closeModal" >
             {{ CLOSE }}
           </button>     
         </div>      
@@ -79,7 +80,10 @@ defineExpose({
     opacity: 0;
 }
 
-
-
-
+.modal-content {
+  scrollbar-color: #808080B3 transparent;
+  scrollbar-width: thin;
+}
 </style>
+<!-- TODO: Test these inline: -->
+<!-- "scrollbar scrollbar-rounded scrollbar-w-2 scrollbar-thumb-gray-500 scrollbar-track-gray-700 hover:scrollbar-thumb-gray-400" -->
\ No newline at end of file
diff --git a/packages/web/app/components/CommandConsole.vue b/packages/web/app/components/CommandConsole.vue
index 72f59323..9eab13ee 100644
--- a/packages/web/app/components/CommandConsole.vue
+++ b/packages/web/app/components/CommandConsole.vue
@@ -47,6 +47,7 @@ function navigateToRepo(event: Event) {
           <span class="sr-only">{{ REFRESH_DATA }}</span>
         </button>
       </div>
+    <!-- TODO: Improve select button styling, maybe a full component -->
       <label class="w-full text-xs border-solid border border-gray-600 rounded-md flex flex-row items-center relative">
         <span class="sr-only">{{ PICK_A_REPOSITORY }}</span>
         <select
@@ -68,6 +69,6 @@ function navigateToRepo(event: Event) {
       </label>
     </form>
 
-    <ViewToggle />
+    <RepoViewToggle />
   </section>
 </template>
diff --git a/packages/web/app/components/GitHubIssueLoading.vue b/packages/web/app/components/GitHubIssueLoading.vue
index ddeebd6f..c00f29a3 100644
--- a/packages/web/app/components/GitHubIssueLoading.vue
+++ b/packages/web/app/components/GitHubIssueLoading.vue
@@ -1,3 +1,5 @@
+<!-- TODO: Implement different loading isues for each view -->
+
 <template>
   <article>
     <div class="flex flex-row gap-2 leading-tightest no-underline color-current">
diff --git a/packages/web/app/components/GitHubIssueSkeleton.vue b/packages/web/app/components/GitHubIssueSkeleton.vue
new file mode 100644
index 00000000..c2f76146
--- /dev/null
+++ b/packages/web/app/components/GitHubIssueSkeleton.vue
@@ -0,0 +1,20 @@
+<!-- TODO: Implement different skeletons for each view -->
+
+<template >
+    <section
+        v-for="i in 7"
+        :key="i"
+        :style="{ '--section-index': i }"
+        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"
+    >
+        <h2 class="flex items-center my-4 font-bold text-2xl">
+            <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() * 3) + 1"
+            :key="s"
+        />
+    </section>
+</template>
diff --git a/packages/web/app/components/GitHubIssueSketon.vue b/packages/web/app/components/GitHubIssueSketon.vue
deleted file mode 100644
index e2599020..00000000
--- a/packages/web/app/components/GitHubIssueSketon.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template >
-    <section
-    v-for="i in 7"
-    :key="i"
-    :style="{ '--section-index': i }"
-    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"
-    >
-    <h2 class="flex items-center my-4 font-bold text-2xl">
-        <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() * 3) + 1"
-        :key="s"
-    />
-    </section>
-</template>
diff --git a/packages/web/app/components/NoClustersView.vue b/packages/web/app/components/NoClustersView.vue
index 7775e626..13e9dac2 100644
--- a/packages/web/app/components/NoClustersView.vue
+++ b/packages/web/app/components/NoClustersView.vue
@@ -1,7 +1,6 @@
 
 <script setup lang="ts">
     const NO_CLUSTERS = 'no clusters could be identified'
-
 </script>
 
 <template >
@@ -11,6 +10,7 @@
         <h2 class="flex items-center my-4 font-bold text-2xl">
           <span class="text-gray-500 inline-block mr-1 font-normal">#</span>
         </h2>
+        
         <p class="flex flex-row gap-2 leading-tightest">
           <span
             class="flex-shrink-0 text-gray-400 i-tabler-alert-triangle inline-block w-5 h-5"
diff --git a/packages/web/app/components/RepoViewLayout.vue b/packages/web/app/components/RepoViewLayout.vue
index b79e7be7..0e2ca98e 100644
--- a/packages/web/app/components/RepoViewLayout.vue
+++ b/packages/web/app/components/RepoViewLayout.vue
@@ -1,8 +1,44 @@
-<!-- TODO: Probably no longer necessary -->
+<script setup lang="ts">
+import type { AsyncDataRequestStatus } from '#app'
+import type { ClusterMetadata } from '~~/shared/models/github-metadata'
+
+interface ClusterViewJunctionProps {
+    clusters: ClusterMetadata[];
+    status: AsyncDataRequestStatus;
+}
+
+const { selectedView } = useSelectedView()
+
+const { clusters, status } = defineProps<ClusterViewJunctionProps>()
+</script>
+
 <template>
-    <slot name="console" /> 
+    <template v-if="status === 'idle' || status === 'pending'">
+      <GitHubIssueSkeleton />
+    </template>
+
+    <template v-else-if="!clusters.length">
+      <NoClustersView />
+    </template>
+
+    <template v-else>
+        <div class="grid grid-cols-4 gap-4 pt-4">
+            <template v-if="selectedView === 'PaperStack'">
+                <PaperStackClusterLayout :clusters="clusters" />
+            </template>
+        </div>
 
-    <slot name="duplicates" /> 
+        <div class="grid grid-cols-3 gap-4 pt-4">
+            <template v-if="selectedView === 'WindowPane'" >
+                <WindowPaneClusterLayout :clusters="clusters" />            
+            </template>
+        </div>
 
-    <slot name="clusters" /> 
+        <div class="grid grid-cols-4 gap-4 pt-4">
+            <template v-if="selectedView === 'ColumnCell'">
+                <ColumnCellClusterItem :clusters="clusters" />
+            </template>
+        </div>
+    </template>
 </template>
+ 
\ No newline at end of file
diff --git a/packages/web/app/components/ViewToggle.vue b/packages/web/app/components/RepoViewToggle.vue
similarity index 92%
rename from packages/web/app/components/ViewToggle.vue
rename to packages/web/app/components/RepoViewToggle.vue
index f69b1a2b..a81383c5 100644
--- a/packages/web/app/components/ViewToggle.vue
+++ b/packages/web/app/components/RepoViewToggle.vue
@@ -24,16 +24,16 @@ const { selectedView, toggleViewState, } = useSelectedView()
         <button
             class="rounded-sm p-0.5 text-md border-solid border bg-slate-950 color-gray-400 transition-colors"
             :class="[
-                selectedView === 'GridCell'
+                selectedView === 'WindowPane'
                 ? 'border-red-400 color-red-400 bg-red-700'
                 : 'border-red-200 hover:color-red-200 hover:bg-red-500'
             ]"
             type="button"
-            value="GridCell"
+            value="WindowPane"
             @click="toggleViewState($event)"
-            aria-label="GridCell"
+            aria-label="WindowPane"
         >
-            <SvgGridCell />
+            <SvgWindowPane />
         </button>
 
         <button
diff --git a/packages/web/app/components/grid-cell/ClusterItem.vue b/packages/web/app/components/grid-cell/ClusterItem.vue
deleted file mode 100644
index 68357838..00000000
--- a/packages/web/app/components/grid-cell/ClusterItem.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-
-<script setup lang="ts">
-import type { ClusterMetadata } from '~~/shared/models/github-metadata'
-
-interface ClusterItemProps {
-    clusters: ClusterMetadata[];
-}
-
-const { clusters } = defineProps<ClusterItemProps>()
-
-const openState = reactive<Record<string, boolean>>({})
-</script>
-
-<template >
-        <section
-        v-for="(cluster, c) of clusters"
-        :key="c"
-        class=" overflow-hidden flex flex-col gap-4 md:rounded-md md:border-solid md:border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
-        >
-            <h2 class=" my-4 font-bold text-2xl flex items-baseline">
-                <span class="text-gray-500 inline-block mr-1 font-normal">#</span>{{ c + 1 }}
-                <span class="ml-2 font-normal text-lg color-gray-300">&mdash; {{ cluster.title }}</span>
-                <span class="ml-auto text-white bg-gray-700 text-sm font-normal rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 border-gray-700 inline-block leading-tight flex items-center">
-                <span class="i-tabler:copy inline-block w-4 h-4"></span>
-                cluster
-                </span>
-            </h2>
-            <GitHubIssue
-                v-for="(issue, i) of openState[c] !== true ? cluster.issues?.slice(0, 5) : cluster.issues"
-                :key="i"
-                :url="issue.url"
-                :title="issue.title"
-                :owner="issue.owner"
-                :repository="issue.repository"
-                :number="issue.number"
-                :avg-similarity="issue.avgSimilarity"
-                :labels="issue.labels"
-                :updated_at="issue.updated_at"
-            />
-            <button
-                v-if="cluster.issues?.length > 5 && openState[c] !== true"
-                class="rounded-md text-sm border-solid border border-gray-700 bg-transparent color-gray-400 py-2 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
-                type="button"
-                @click="openState[c] = !openState[c]"
-            >
-                show {{ cluster.issues?.length - 3 }} more
-            </button>
-        </section>
-</template>
diff --git a/packages/web/app/components/paper-stack/ShowMoreIssues.vue b/packages/web/app/components/paper-stack/ClusterAction.vue
similarity index 73%
rename from packages/web/app/components/paper-stack/ShowMoreIssues.vue
rename to packages/web/app/components/paper-stack/ClusterAction.vue
index 97370c00..02fd265b 100644
--- a/packages/web/app/components/paper-stack/ShowMoreIssues.vue
+++ b/packages/web/app/components/paper-stack/ClusterAction.vue
@@ -2,7 +2,7 @@
 import type ClusterViewModal from '../ClusterViewModal.vue'
 import type { ClusterMetadata } from '~~/shared/models/github-metadata'
 
-const NO_MORE_ISSUES = 'No More Issues...'
+const NO_MORE_ISSUES = 'no more issues...'
 
 interface ShowMoreIssuesProps {
     cluster: ClusterMetadata;
@@ -17,13 +17,11 @@ const modalRef = useTemplateRef<InstanceType<typeof ClusterViewModal>>('modalRef
 const openModal = () => modalRef.value?.openModal()
 </script>
 
-<!-- TODO: Change the name of this component -->
-
 <template >
     <div class=" h-10 p-2 border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 whitespace-nowrap overflow-hidden text-ellipsis -mt-2 z-2 text-center " >
     <div v-if="clusterLength > 3 " >
         <button
-            class=" text-sm bg-transparent color-gray-400 py-1 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
+            class="text-sm bg-transparent color-gray-400 py-1 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
             type="button"
             @click="openModal"
         >
@@ -34,15 +32,19 @@ const openModal = () => modalRef.value?.openModal()
             <ClusterViewModal ref="modalRef" :cluster="cluster">
                 <template #modal-content>
                     <ClientOnly>
-                        <PaperStackClusterView :cluster="cluster" :clusterIndex="clusterIndex" :clusterTitle="cluster.title" />
+                        <PaperStackClusterView :cluster="cluster" :clusterIndex="clusterIndex" :clusterTitle="cluster.title" :isModal="true" />
                     </ClientOnly>
                 </template>
             </ClusterViewModal>
         </Teleport>
     </div>
    
-    <!-- TODO: Improve the alternate state for the show more button -->
-    <div v-else>{{ NO_MORE_ISSUES}}</div>
+    <div 
+        v-else
+        class="text-sm bg-transparent color-gray-400 py-1"
+    >
+        {{ NO_MORE_ISSUES}}
+    </div>
     
     </div>
 </template>
\ No newline at end of file
diff --git a/packages/web/app/components/paper-stack/ClusterLayout.vue b/packages/web/app/components/paper-stack/ClusterLayout.vue
index f8f1ab13..f0393886 100644
--- a/packages/web/app/components/paper-stack/ClusterLayout.vue
+++ b/packages/web/app/components/paper-stack/ClusterLayout.vue
@@ -15,8 +15,8 @@ const { clusters } = defineProps<ClusterItemProps>()
         v-for="(cluster, index) of clusters" 
         :key="index"
     >
-        <PaperStackClusterView :cluster="cluster" :clusterIndex="index" :clusterLength="3" :clusterTitle="cluster.title" />
+        <PaperStackClusterView :cluster="cluster" :clusterIndex="index" :clusterTitle="cluster.title" :isModal="false"/>
 
-        <PaperStackShowMoreIssues :cluster="cluster" :clusterIndex="index" :clusterLength="cluster.issues.length || 0" />
+        <PaperStackClusterAction :cluster="cluster" :clusterIndex="index" :clusterLength="cluster.issues.length || 0" />
     </section>
 </template>
\ No newline at end of file
diff --git a/packages/web/app/components/paper-stack/ClusterSummary.vue b/packages/web/app/components/paper-stack/ClusterSummary.vue
index 9aa66cba..dd140b4e 100644
--- a/packages/web/app/components/paper-stack/ClusterSummary.vue
+++ b/packages/web/app/components/paper-stack/ClusterSummary.vue
@@ -13,19 +13,19 @@ const { clusterIndex, clusterLength, clusterTitle } = defineProps<ClusterSummary
 </script>
 
 <template >
-    <section class="h-40 md:p-2 md:border-3 md:border-solid border-gray-600 md:rounded-md bg-shark-500 relative z-10">
-        <div class="flex justify-between items-baseline gap-1">
-            <div class="font-bold text-2xl flex items-baseline">
-                <p class="text-gray-500 inline-block mr-1 font-normal">#</p>{{ clusterIndex + 1 }}
+    <section class="h-40 relative p-2 border-3 border-solid border-gray-600 rounded-md bg-shark-500 z-10">
+        <div class="flex justify-between items-baseline gap-1 font-bold ">
+            <div class="text-2xl flex items-baseline">
+                <p class="text-gray-500 mr-1 font-normal">#</p>{{ clusterIndex + 1 }}
             </div>
 
             <div>
-                <p class="text-lg text-gray-300 inline-block font-bold">{{ CLUSTER_SUMMARY }}</p>
+                <p class="text-lg text-gray-300 ">{{ CLUSTER_SUMMARY }}</p>
             </div>
 
             <div>
-                <span class="ml-auto text-white bg-gray-700 text-sm font-normal rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 border-gray-700 inline-block leading-tight flex items-center">
-                    <SvgPaperStack class="inline-block w-4 h-4" />
+                <span class="text-white bg-gray-700 text-sm font-normal rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 border-gray-700 leading-tight flex items-center">
+                    <SvgPaperStack class="w-4 h-4" />
                     {{ CLUSTER_ICON}}
                 </span>
             </div>
diff --git a/packages/web/app/components/paper-stack/ClusterView.vue b/packages/web/app/components/paper-stack/ClusterView.vue
index 9faf0af9..98473f6b 100644
--- a/packages/web/app/components/paper-stack/ClusterView.vue
+++ b/packages/web/app/components/paper-stack/ClusterView.vue
@@ -5,13 +5,15 @@ interface ClusterViewProps {
     cluster: ClusterMetadata;
     clusterTitle: string;
     clusterIndex: number;
-    clusterLength?: number;
+    isModal: boolean;
 }
 
-const { cluster, clusterIndex, clusterLength, clusterTitle } = defineProps<ClusterViewProps>()
+const NUMBER_OF_ISSUES = 3
+
+const { cluster, clusterIndex, clusterTitle, isModal } = defineProps<ClusterViewProps>()
 
 const issuesStack = computed(() => {
-    return (clusterLength) ? cluster.issues.slice(0, clusterLength) : cluster.issues
+    return (isModal) ? cluster.issues : cluster.issues.slice(0, NUMBER_OF_ISSUES)
 })
 
 </script>
@@ -24,7 +26,7 @@ const issuesStack = computed(() => {
         >
             <PaperStackClusterSummary 
                 :clusterIndex="clusterIndex" 
-                :clusterLength="clusterLength || cluster.issues.length" 
+                :clusterLength="cluster.issues.length" 
                 :clusterTitle="clusterTitle"
                 :style="{
                     zIndex: cluster.issues.length + 1,
@@ -40,9 +42,6 @@ const issuesStack = computed(() => {
                 class="relative -mt-2 h-25 py-4 p-l-3 p-r-none border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 
                 scrollbar scrollbar-rounded scrollbar-w-2 scrollbar-thumb-gray-500 scrollbar-track-gray-700 hover:scrollbar-thumb-gray-400"
             >
-                <!-- TODO: Fix scrollbar styling -->
-            <!-- class="h-20 p-2 p-r-none border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 whitespace-nowrap overflow-hidden text-ellipsis -mt-2" -->
-
                 <PaperStackGithubIssue
                     class="issue-row relative"
                     :key="index"
diff --git a/packages/web/app/components/paper-stack/GithubIssue.vue b/packages/web/app/components/paper-stack/GithubIssue.vue
index c8d989ba..9245973a 100644
--- a/packages/web/app/components/paper-stack/GithubIssue.vue
+++ b/packages/web/app/components/paper-stack/GithubIssue.vue
@@ -18,7 +18,6 @@ const { url, title, owner, repository, number, avgSimilarity, labels, updated_at
 
 <template>
   <article class="max-w-full overflow-hidden flex flex-row gap-1 ">
-    <!-- TODO: Margin on this isn't ideal, could be slightly nicer -->
     <span class="flex-shrink-0 inline-block h-5 i-tabler-circle-dot text-green-500 mt-.5" />
 
     <div class="flex flex-col flex-wrap md:flex-nowrap flex-grow">
diff --git a/packages/web/app/components/svg/GridCell.vue b/packages/web/app/components/svg/GridCell.vue
deleted file mode 100644
index 4e72b045..00000000
--- a/packages/web/app/components/svg/GridCell.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-  <script lang="ts">
-  export default {
-    name: 'BiGrid3x3GapFill'
-  }
-  </script>
-
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zM1 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zM1 12a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1z"></path></svg>
-</template>
diff --git a/packages/web/app/components/svg/PaperStack.vue b/packages/web/app/components/svg/PaperStack.vue
index 5cdeccc1..cc45e0a2 100644
--- a/packages/web/app/components/svg/PaperStack.vue
+++ b/packages/web/app/components/svg/PaperStack.vue
@@ -5,5 +5,5 @@
   </script>
 
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 100 100"><!-- Icon from Font-GIS by Jean-Marc Viglino - https://github.com/Viglino/font-gis/blob/main/LICENSE-CC-BY.md --><path fill="currentColor" d="M28.135 10.357a3.5 3.5 0 0 0-2.668 1.235L.832 40.607a3.5 3.5 0 0 0 2.67 5.766l93-.064a3.5 3.5 0 0 0 2.666-5.766L74.59 11.592a3.5 3.5 0 0 0-2.668-1.235zM89.91 51.313l-9.178.007l8.211 9.67l-77.875.053l8.22-9.682l-9.188.008L.832 62.283a3.5 3.5 0 0 0 2.67 5.766l93-.065a3.5 3.5 0 0 0 2.666-5.765zm0 21.593l-9.178.008l8.211 9.67l-77.875.053l8.22-9.682l-9.188.008L.832 83.877a3.5 3.5 0 0 0 2.67 5.766l93-.065a3.5 3.5 0 0 0 2.666-5.766z" color="currentColor"></path></svg>
+  <svg aria-label="paper-stack-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 100 100"><!-- Icon from Font-GIS by Jean-Marc Viglino - https://github.com/Viglino/font-gis/blob/main/LICENSE-CC-BY.md --><path fill="currentColor" d="M28.135 10.357a3.5 3.5 0 0 0-2.668 1.235L.832 40.607a3.5 3.5 0 0 0 2.67 5.766l93-.064a3.5 3.5 0 0 0 2.666-5.766L74.59 11.592a3.5 3.5 0 0 0-2.668-1.235zM89.91 51.313l-9.178.007l8.211 9.67l-77.875.053l8.22-9.682l-9.188.008L.832 62.283a3.5 3.5 0 0 0 2.67 5.766l93-.065a3.5 3.5 0 0 0 2.666-5.765zm0 21.593l-9.178.008l8.211 9.67l-77.875.053l8.22-9.682l-9.188.008L.832 83.877a3.5 3.5 0 0 0 2.67 5.766l93-.065a3.5 3.5 0 0 0 2.666-5.766z" color="currentColor"></path></svg>
 </template>
diff --git a/packages/web/app/components/svg/WindowPane.vue b/packages/web/app/components/svg/WindowPane.vue
new file mode 100644
index 00000000..e038ee08
--- /dev/null
+++ b/packages/web/app/components/svg/WindowPane.vue
@@ -0,0 +1,9 @@
+  <script lang="ts">
+  export default {
+    name: 'BiGrid3x3GapFill'
+  }
+  </script>
+
+<template>
+  <svg aria-label="window-pane-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zM1 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zM1 12a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1z"></path></svg>
+</template>
diff --git a/packages/web/app/components/window-pane/ClusterAction.vue b/packages/web/app/components/window-pane/ClusterAction.vue
new file mode 100644
index 00000000..56054e46
--- /dev/null
+++ b/packages/web/app/components/window-pane/ClusterAction.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type ClusterViewModal from '../ClusterViewModal.vue'
+import type { ClusterMetadata } from '~~/shared/models/github-metadata'
+
+const NO_MORE_ISSUES = 'no more issues...'
+
+interface ShowMoreIssuesProps {
+    cluster: ClusterMetadata;
+    clusterIndex: number;
+    clusterLength: number;
+}
+
+const { cluster, clusterIndex, clusterLength } = defineProps<ShowMoreIssuesProps>()
+
+const modalRef = useTemplateRef<InstanceType<typeof ClusterViewModal>>('modalRef')
+    
+const openModal = () => modalRef.value?.openModal()
+</script>
+
+<template >
+    <section class="w-full h-10 p-2 text-sm text-center rounded-md border-solid border border-gray-700 color-gray-400">
+        <div v-if="clusterLength > 9" >
+            <button
+                class=" bg-transparent hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
+                type="button"
+                @click="openModal"
+            >
+                show {{ clusterLength - 9 }} more issues...
+            </button>
+
+            <Teleport to="#teleports" class=" ">
+                <ClusterViewModal ref="modalRef" :cluster="cluster">
+                    <template #modal-content>
+                        <ClientOnly>
+                            <WindowPaneClusterView :cluster="cluster" :clusterIndex="clusterIndex" :clusterTitle="cluster.title" :isModal="true" />
+                        </ClientOnly>
+                    </template>
+                </ClusterViewModal>
+            </Teleport>
+        </div>
+    
+        <div 
+            v-else
+            class=" bg-transparent"
+        >
+            {{ NO_MORE_ISSUES}}
+        </div>
+    </section>
+</template>
diff --git a/packages/web/app/components/window-pane/ClusterLayout.vue b/packages/web/app/components/window-pane/ClusterLayout.vue
new file mode 100644
index 00000000..33c0b9b7
--- /dev/null
+++ b/packages/web/app/components/window-pane/ClusterLayout.vue
@@ -0,0 +1,22 @@
+
+<script setup lang="ts">
+import type { ClusterMetadata } from '~~/shared/models/github-metadata'
+
+interface ClusterItemProps {
+    clusters: ClusterMetadata[];
+}
+
+const { clusters } = defineProps<ClusterItemProps>()
+</script>
+
+<template >
+    <section 
+        v-for="(cluster, index) of clusters" 
+        :key="index"
+        class=" overflow-hidden flex flex-col gap-4 justify-between p-4 rounded-md border-solid border border-gray-700 columns-1 border-b-solid"
+    >
+        <WindowPaneClusterView :cluster="cluster" :clusterIndex="index" :clusterTitle="cluster.title" :isModal="false"/>
+
+        <WindowPaneClusterAction :cluster="cluster" :clusterIndex="index" :clusterLength="cluster.issues.length || 0" />
+    </section>
+</template>
diff --git a/packages/web/app/components/window-pane/ClusterSummary.vue b/packages/web/app/components/window-pane/ClusterSummary.vue
new file mode 100644
index 00000000..0152dd1a
--- /dev/null
+++ b/packages/web/app/components/window-pane/ClusterSummary.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+interface ClusterSummaryProps {
+    clusterIndex: number;
+    clusterLength: number;
+    clusterTitle: string;
+}
+
+const CLUSTER_ICON = 'cluster'
+const CLUSTER_SUMMARY = 'Cluster Summary'
+const TOTAL_ISSUES = 'Total number of issues: '
+
+const { clusterIndex, clusterLength, clusterTitle } = defineProps<ClusterSummaryProps>()
+</script>
+
+<template >
+    <section class="h-30 bg-transparent">
+        <div class="flex justify-between items-baseline gap-1 font-bold ">
+            <div class="text-2xl flex items-baseline">
+                <p class="text-gray-500 mr-1 font-normal">#</p>{{ clusterIndex + 1 }}
+            </div>
+
+            <div>
+                <p class="text-lg text-gray-300 ">{{ CLUSTER_SUMMARY }}</p>
+            </div>
+
+            <div>
+                <span class="flex px-2 py-0.5 leading-tight items-center text-white bg-gray-700 text-sm font-normal rounded-full whitespace-pre border-solid border-1 border-gray-700 ">
+                    <SvgWindowPane class=" w-4 h-4" />
+                    {{ CLUSTER_ICON}}
+                </span>
+            </div>
+        </div>
+            
+        <div class="text-lg color-gray-400 overflow-hidden text-wrap"> {{ clusterTitle }}</div>
+
+        <div class="text-lg color-gray-400 overflow-hidden text-wrap"> {{ TOTAL_ISSUES + clusterLength }}</div>
+    </section>
+</template>
diff --git a/packages/web/app/components/window-pane/ClusterView.vue b/packages/web/app/components/window-pane/ClusterView.vue
new file mode 100644
index 00000000..0d073c64
--- /dev/null
+++ b/packages/web/app/components/window-pane/ClusterView.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { ClusterMetadata } from '~~/shared/models/github-metadata'
+
+interface ClusterViewProps {
+    cluster: ClusterMetadata;
+    clusterTitle: string;
+    clusterIndex: number;
+    isModal: boolean;
+}
+
+const NUMBER_OF_ISSUES = 9
+
+const { cluster, clusterIndex, clusterTitle, isModal } = defineProps<ClusterViewProps>()
+
+const issuesStack = computed(() => {
+    return (isModal) ? cluster.issues : cluster.issues.slice(0, NUMBER_OF_ISSUES)
+})
+
+</script>
+
+<template >
+        <section
+            class="w-full"
+        >
+            <WindowPaneClusterSummary 
+                :clusterIndex="clusterIndex" 
+                :clusterLength="cluster.issues.length" 
+                :clusterTitle="clusterTitle"
+            />
+
+            <div class="grid grid-cols-3 grid-rows-3 gap-4 ">
+                <div
+                    v-for="(issue, index) of issuesStack"
+                    :key="index"
+                    class="h-30 border-solid border-2 border-gray-700 rounded-md bg-shark-500 p-2 overflow-hidden"
+                >
+                    <WindowPaneGithubIssue
+                        class="issue-row relative"
+                        :key="index"
+                        :url="issue.url"
+                        :title="issue.title"
+                        :owner="issue.owner"
+                        :repository="issue.repository"
+                        :number="issue.number"
+                        :avg-similarity="issue.avgSimilarity"
+                        :labels="issue.labels"
+                        :updated_at="issue.updated_at"
+                    />
+                </div>
+            </div>
+        </section>
+</template>
diff --git a/packages/web/app/components/window-pane/GithubIssue.vue b/packages/web/app/components/window-pane/GithubIssue.vue
new file mode 100644
index 00000000..c6a67ad5
--- /dev/null
+++ b/packages/web/app/components/window-pane/GithubIssue.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+interface GithubIssueProps {
+    url: string;
+    title: string;
+    owner: string;
+    repository: string;
+    number: number;
+    avgSimilarity: number;
+    labels: Array<string | { name: string, color?: string }>;
+    updated_at: string;
+}
+
+const UPDATED = 'updated'
+const PERCENT_SIMILAR = '% similar'
+
+const { url, title, owner, repository, number, avgSimilarity, labels, updated_at } = defineProps<GithubIssueProps>()
+</script>
+
+<template>
+  <article class="overflow-hidden flex flex-row gap-1 ">
+    <span class="flex-shrink-0 inline-block h-3 i-tabler-circle-dot text-green-500 mt-1" />
+
+    <div class="flex flex-col flex-wrap gap-2 ">
+      <NuxtLink
+        class="line-clamp-1 text-sm text-base no-underline color-current hover:underline"
+        :href="url"
+        target="_blank"
+      >
+        {{ title?.trim() }}
+      </NuxtLink>
+
+      <div
+        class="text-xs text-gray-400 break-words"
+      >
+        <NuxtLink
+          v-if="owner && repository"
+          class="no-underline hover:underline color-current"
+          :to="{
+            name: 'owner-repo',
+            params: {
+              owner: owner,
+              repo: repository,
+            },
+          }"
+        >
+          {{ owner }}/{{ repository }}
+        </NuxtLink>
+
+        &middot;
+        {{ UPDATED }}
+
+        <NuxtTime
+          :datetime="updated_at"
+          relative
+        />
+
+        &middot;
+
+        <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) }}{{ PERCENT_SIMILAR }}
+        </NuxtLink>
+      </div>
+
+      <div class="flex flex-row gap-1 items-baseline flex-nowrap">
+        <span
+          v-for="(label, j) of labels"
+          :key="j"
+          class="label rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 text-xs inline-block leading-tight"
+          :style="labelColors(typeof label === 'string' ? '000000' : label.color || '000000')"
+        >
+          {{ typeof label === 'string' ? label : label.name }}
+        </span>
+      </div>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.label {
+  --lightness-threshold: 0.6;
+  --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
+  --lightness-switch: max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1));
+  --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
+  background: rgba(var(--label-r), var(--label-g), var(--label-b), 0.18);
+  color: hsl(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) + var(--lighten-by)) * 1%));
+  border-color: rgba(var(--label-r), var(--label-g), var(--label-b), 0.7);
+}
+</style>
diff --git a/packages/web/app/composables/selected-view.ts b/packages/web/app/composables/selected-view.ts
index 1fb245f4..43361a07 100644
--- a/packages/web/app/composables/selected-view.ts
+++ b/packages/web/app/composables/selected-view.ts
@@ -1,6 +1,6 @@
 export type ViewToggleState =
   'PaperStack' |
-  'GridCell' |
+  'WindowPane' |
   'ColumnCell'
 
 const selectedView = ref<ViewToggleState>('PaperStack')
diff --git a/packages/web/app/pages/[owner]/[repo]/index.vue b/packages/web/app/pages/[owner]/[repo]/index.vue
index 65e9f251..ee2e91f2 100644
--- a/packages/web/app/pages/[owner]/[repo]/index.vue
+++ b/packages/web/app/pages/[owner]/[repo]/index.vue
@@ -19,28 +19,20 @@ const refreshClusters = () => refresh()
 </script>
 
 <template>
-  <RepoViewLayout>
-    <template #console>
       <CommandConsole 
         :allowedRepos="allowedRepos" 
         :status="status" 
         :selectedRepo="selectedRepo" 
         v-model:refresh="refreshClusters"
       />
-    </template>
 
-    <template #duplicates>
       <DuplicatesView 
         :duplicates="duplicates" 
         :status="duplicatesStatus" 
       />
-    </template>
-
-    <template #clusters >
-      <ClusterViewJunction 
+   
+      <RepoViewLayout 
         :clusters="clusters" 
         :status="status" 
       />
-    </template>
-  </RepoViewLayout>
 </template>

From 34569da77d7317a6d33d2ed3a21493943f679bbb Mon Sep 17 00:00:00 2001
From: Brandon Hurrington <brandon.hurrington@lotto24.de>
Date: Sun, 13 Apr 2025 09:38:57 +0000
Subject: [PATCH 07/12] feat(web): Implemented gradient for issues

---
 .../components/paper-stack/ClusterView.vue    |  29 -----
 .../components/paper-stack/GithubIssue.vue    | 113 ++++++++++--------
 .../components/window-pane/ClusterView.vue    |   1 -
 .../components/window-pane/GithubIssue.vue    | 113 ++++++++++--------
 4 files changed, 120 insertions(+), 136 deletions(-)

diff --git a/packages/web/app/components/paper-stack/ClusterView.vue b/packages/web/app/components/paper-stack/ClusterView.vue
index 98473f6b..b3fadc15 100644
--- a/packages/web/app/components/paper-stack/ClusterView.vue
+++ b/packages/web/app/components/paper-stack/ClusterView.vue
@@ -57,32 +57,3 @@ const issuesStack = computed(() => {
             </div>
         </section>
 </template>
-
-<!-- TODO: Find a solution for gradient -->
-<!-- TODO: whitespace-nowrap overflow-hidden text-ellipsis -->
-<!-- TODO: Improve naive gradient approach -->
-<!-- TODO: Need to split some of the behaviors between here and the ClusterLayout in order to get the correct width -->
-
-<style scoped>
-/* .issue-row {
-    margin-top: -0.25rem; 
-  position: relative;
-   z-index: calc(var(--stack-index));
-} */
-
-/* .github-issues  {
-  position: relative; 
-  overflow: hidden;    
-}
-
-.github-issues::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 5rem;         
-  height: 100%;        
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), #6b7280); 
-  pointer-events: none; 
-}   */
-</style>
diff --git a/packages/web/app/components/paper-stack/GithubIssue.vue b/packages/web/app/components/paper-stack/GithubIssue.vue
index 9245973a..dcc35e1c 100644
--- a/packages/web/app/components/paper-stack/GithubIssue.vue
+++ b/packages/web/app/components/paper-stack/GithubIssue.vue
@@ -17,75 +17,82 @@ const { url, title, owner, repository, number, avgSimilarity, labels, updated_at
 </script>
 
 <template>
-  <article class="max-w-full overflow-hidden flex flex-row gap-1 ">
+  <article class="overflow-hidden flex flex-row gap-1 ">
     <span class="flex-shrink-0 inline-block h-5 i-tabler-circle-dot text-green-500 mt-.5" />
 
-    <div class="flex flex-col flex-wrap md:flex-nowrap flex-grow">
-      <NuxtLink
-        class="line-clamp-1 flex-grow text-sm md:text-base lg:flex-grow-0 no-underline color-current hover:underline"
-        :href="url"
-        target="_blank"
-      >
-        {{ title?.trim() }}
-      </NuxtLink>
-
-      <div
-        class="text-xs relative text-gray-400 mb-1 break-words"
-      >
+    <div class="issue-fade w-full">
+      <div class="flex flex-col flex-nowrap gap-1">
         <NuxtLink
-          v-if="owner && repository"
-          class="no-underline hover:underline color-current"
-          :to="{
-            name: 'owner-repo',
-            params: {
-              owner: owner,
-              repo: repository,
-            },
-          }"
+          class="line-clamp-1 flex-grow text-sm md:text-base lg:flex-grow-0 no-underline color-current hover:underline"
+          :href="url"
+          target="_blank"
         >
-          {{ owner }}/{{ repository }}
+          {{ title?.trim() }}
         </NuxtLink>
 
-        &middot;
-        {{ UPDATED }}
+        <div
+          class="text-xs relative text-gray-400 mb-1 break-words"
+        >
+          <NuxtLink
+            v-if="owner && repository"
+            class="no-underline hover:underline color-current"
+            :to="{
+              name: 'owner-repo',
+              params: {
+                owner: owner,
+                repo: repository,
+              },
+            }"
+          >
+            {{ owner }}/{{ repository }}
+          </NuxtLink>
 
-        <NuxtTime
-          :datetime="updated_at"
-          relative
-        />
+          &middot;
+          {{ UPDATED }}
 
-        &middot;
+          <NuxtTime
+            :datetime="updated_at"
+            relative
+          />
 
-        <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) }}{{ PERCENT_SIMILAR }}
-        </NuxtLink>
-      </div>
+          &middot;
 
-      <div class="flex flex-row gap-1 items-baseline flex-wrap md:flex-nowrap">
-        <span
-          v-for="(label, j) of labels"
-          :key="j"
-          class="label rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 text-xs inline-block leading-tight"
-          :style="labelColors(typeof label === 'string' ? '000000' : label.color || '000000')"
-        >
-          {{ typeof label === 'string' ? label : label.name }}
-        </span>
+          <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) }}{{ PERCENT_SIMILAR }}
+          </NuxtLink>
+        </div>
+
+        <div class="flex flex-row gap-1 items-baseline flex-wrap md:flex-nowrap">
+          <span
+            v-for="(label, j) of labels"
+            :key="j"
+            class="label rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 text-xs inline-block leading-tight"
+            :style="labelColors(typeof label === 'string' ? '000000' : label.color || '000000')"
+          >
+            {{ typeof label === 'string' ? label : label.name }}
+          </span>
+        </div>
       </div>
     </div>
   </article>
 </template>
 
 <style scoped>
+.issue-fade {
+  mask-image: linear-gradient(to right, black 40%, transparent);
+  -webkit-mask-image: linear-gradient(to right, black 40%, transparent);
+}
+
 .label {
   --lightness-threshold: 0.6;
   --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
diff --git a/packages/web/app/components/window-pane/ClusterView.vue b/packages/web/app/components/window-pane/ClusterView.vue
index 0d073c64..182ad02c 100644
--- a/packages/web/app/components/window-pane/ClusterView.vue
+++ b/packages/web/app/components/window-pane/ClusterView.vue
@@ -35,7 +35,6 @@ const issuesStack = computed(() => {
                     class="h-30 border-solid border-2 border-gray-700 rounded-md bg-shark-500 p-2 overflow-hidden"
                 >
                     <WindowPaneGithubIssue
-                        class="issue-row relative"
                         :key="index"
                         :url="issue.url"
                         :title="issue.title"
diff --git a/packages/web/app/components/window-pane/GithubIssue.vue b/packages/web/app/components/window-pane/GithubIssue.vue
index c6a67ad5..27ef29b7 100644
--- a/packages/web/app/components/window-pane/GithubIssue.vue
+++ b/packages/web/app/components/window-pane/GithubIssue.vue
@@ -19,73 +19,80 @@ const { url, title, owner, repository, number, avgSimilarity, labels, updated_at
 <template>
   <article class="overflow-hidden flex flex-row gap-1 ">
     <span class="flex-shrink-0 inline-block h-3 i-tabler-circle-dot text-green-500 mt-1" />
-
-    <div class="flex flex-col flex-wrap gap-2 ">
-      <NuxtLink
-        class="line-clamp-1 text-sm text-base no-underline color-current hover:underline"
-        :href="url"
-        target="_blank"
-      >
-        {{ title?.trim() }}
-      </NuxtLink>
-
-      <div
-        class="text-xs text-gray-400 break-words"
-      >
+    
+    <div class="issue-fade w-full">
+      <div class=" flex flex-col flex-wrap gap-2 ">
         <NuxtLink
-          v-if="owner && repository"
-          class="no-underline hover:underline color-current"
-          :to="{
-            name: 'owner-repo',
-            params: {
-              owner: owner,
-              repo: repository,
-            },
-          }"
+          class="line-clamp-1 text-sm text-base no-underline color-current hover:underline"
+          :href="url"
+          target="_blank"
         >
-          {{ owner }}/{{ repository }}
+          {{ title?.trim() }}
         </NuxtLink>
 
-        &middot;
-        {{ UPDATED }}
+        <div
+          class="text-xs text-gray-400 break-words"
+        >
+          <NuxtLink
+            v-if="owner && repository"
+            class="no-underline hover:underline color-current"
+            :to="{
+              name: 'owner-repo',
+              params: {
+                owner: owner,
+                repo: repository,
+              },
+            }"
+          >
+            {{ owner }}/{{ repository }}
+          </NuxtLink>
 
-        <NuxtTime
-          :datetime="updated_at"
-          relative
-        />
+          &middot;
+          {{ UPDATED }}
 
-        &middot;
+          <NuxtTime
+            :datetime="updated_at"
+            relative
+          />
 
-        <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) }}{{ PERCENT_SIMILAR }}
-        </NuxtLink>
-      </div>
+          &middot;
 
-      <div class="flex flex-row gap-1 items-baseline flex-nowrap">
-        <span
-          v-for="(label, j) of labels"
-          :key="j"
-          class="label rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 text-xs inline-block leading-tight"
-          :style="labelColors(typeof label === 'string' ? '000000' : label.color || '000000')"
-        >
-          {{ typeof label === 'string' ? label : label.name }}
-        </span>
+          <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) }}{{ PERCENT_SIMILAR }}
+          </NuxtLink>
+        </div>
+
+        <div class="flex flex-row gap-1 items-baseline flex-nowrap">
+          <span
+            v-for="(label, j) of labels"
+            :key="j"
+            class="label rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 text-xs inline-block leading-tight"
+            :style="labelColors(typeof label === 'string' ? '000000' : label.color || '000000')"
+          >
+            {{ typeof label === 'string' ? label : label.name }}
+          </span>
+        </div>
       </div>
     </div>
   </article>
 </template>
 
 <style scoped>
+.issue-fade {
+  mask-image: linear-gradient(to right, black 40%, transparent);
+  -webkit-mask-image: linear-gradient(to right, black 40%, transparent);
+}
+
 .label {
   --lightness-threshold: 0.6;
   --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);

From 0f3801531fb3573d5b3147f58eda42a111b0f0b5 Mon Sep 17 00:00:00 2001
From: Brandon Hurrington <brandon.hurrington@lotto24.de>
Date: Sun, 13 Apr 2025 09:38:57 +0000
Subject: [PATCH 08/12] feat(web): Implemented gradient for Github issues

---
 packages/web/app/components/paper-stack/ClusterView.vue | 4 +---
 packages/web/app/components/paper-stack/GithubIssue.vue | 2 +-
 packages/web/app/components/window-pane/ClusterView.vue | 2 +-
 packages/web/app/components/window-pane/GithubIssue.vue | 2 +-
 4 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/web/app/components/paper-stack/ClusterView.vue b/packages/web/app/components/paper-stack/ClusterView.vue
index b3fadc15..89ba2f59 100644
--- a/packages/web/app/components/paper-stack/ClusterView.vue
+++ b/packages/web/app/components/paper-stack/ClusterView.vue
@@ -39,11 +39,9 @@ const issuesStack = computed(() => {
                 :style="{
                     zIndex: cluster.issues.length - index,
                 }"
-                class="relative -mt-2 h-25 py-4 p-l-3 p-r-none border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 
-                scrollbar scrollbar-rounded scrollbar-w-2 scrollbar-thumb-gray-500 scrollbar-track-gray-700 hover:scrollbar-thumb-gray-400"
+                class="overflow-hidden -mt-2 h-25 py-4 p-l-3 p-r-none border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 "
             >
                 <PaperStackGithubIssue
-                    class="issue-row relative"
                     :key="index"
                     :url="issue.url"
                     :title="issue.title"
diff --git a/packages/web/app/components/paper-stack/GithubIssue.vue b/packages/web/app/components/paper-stack/GithubIssue.vue
index dcc35e1c..3564f919 100644
--- a/packages/web/app/components/paper-stack/GithubIssue.vue
+++ b/packages/web/app/components/paper-stack/GithubIssue.vue
@@ -17,7 +17,7 @@ const { url, title, owner, repository, number, avgSimilarity, labels, updated_at
 </script>
 
 <template>
-  <article class="overflow-hidden flex flex-row gap-1 ">
+  <article class="flex flex-row gap-1 ">
     <span class="flex-shrink-0 inline-block h-5 i-tabler-circle-dot text-green-500 mt-.5" />
 
     <div class="issue-fade w-full">
diff --git a/packages/web/app/components/window-pane/ClusterView.vue b/packages/web/app/components/window-pane/ClusterView.vue
index 182ad02c..8ea22f62 100644
--- a/packages/web/app/components/window-pane/ClusterView.vue
+++ b/packages/web/app/components/window-pane/ClusterView.vue
@@ -32,7 +32,7 @@ const issuesStack = computed(() => {
                 <div
                     v-for="(issue, index) of issuesStack"
                     :key="index"
-                    class="h-30 border-solid border-2 border-gray-700 rounded-md bg-shark-500 p-2 overflow-hidden"
+                    class="overflow-hidden h-30 border-solid border-2 border-gray-700 rounded-md bg-shark-500 p-2 overflow-hidden"
                 >
                     <WindowPaneGithubIssue
                         :key="index"
diff --git a/packages/web/app/components/window-pane/GithubIssue.vue b/packages/web/app/components/window-pane/GithubIssue.vue
index 27ef29b7..ea3f7f6c 100644
--- a/packages/web/app/components/window-pane/GithubIssue.vue
+++ b/packages/web/app/components/window-pane/GithubIssue.vue
@@ -21,7 +21,7 @@ const { url, title, owner, repository, number, avgSimilarity, labels, updated_at
     <span class="flex-shrink-0 inline-block h-3 i-tabler-circle-dot text-green-500 mt-1" />
     
     <div class="issue-fade w-full">
-      <div class=" flex flex-col flex-wrap gap-2 ">
+      <div class=" flex flex-col flex-wrap gap-1 ">
         <NuxtLink
           class="line-clamp-1 text-sm text-base no-underline color-current hover:underline"
           :href="url"

From 32420ec574870df869bbc018e508e3f01e2690d0 Mon Sep 17 00:00:00 2001
From: Brandon Hurrington <brandon.hurrington@lotto24.de>
Date: Sun, 13 Apr 2025 20:02:37 +0000
Subject: [PATCH 09/12] feat(web): Replaced icon for Book Shelf view

---
 packages/web/app/components/RepoViewLayout.vue       |  4 ++--
 packages/web/app/components/RepoViewToggle.vue       |  8 ++++----
 .../{column-cell => book-shelf}/ClusterItem.vue      |  0
 .../web/app/components/paper-stack/GithubIssue.vue   |  4 ++--
 packages/web/app/components/svg/BookShelf.vue        |  9 +++++++++
 packages/web/app/components/svg/ColumnCell.vue       |  9 ---------
 packages/web/app/components/svg/PaperStack.vue       | 10 +++++-----
 packages/web/app/components/svg/WindowPane.vue       | 10 +++++-----
 .../web/app/components/window-pane/ClusterAction.vue |  9 ++++++---
 .../web/app/components/window-pane/GithubIssue.vue   | 12 ++++++++++--
 packages/web/app/composables/selected-view.ts        |  2 +-
 11 files changed, 44 insertions(+), 33 deletions(-)
 rename packages/web/app/components/{column-cell => book-shelf}/ClusterItem.vue (100%)
 create mode 100644 packages/web/app/components/svg/BookShelf.vue
 delete mode 100644 packages/web/app/components/svg/ColumnCell.vue

diff --git a/packages/web/app/components/RepoViewLayout.vue b/packages/web/app/components/RepoViewLayout.vue
index 0e2ca98e..8971e60a 100644
--- a/packages/web/app/components/RepoViewLayout.vue
+++ b/packages/web/app/components/RepoViewLayout.vue
@@ -35,8 +35,8 @@ const { clusters, status } = defineProps<ClusterViewJunctionProps>()
         </div>
 
         <div class="grid grid-cols-4 gap-4 pt-4">
-            <template v-if="selectedView === 'ColumnCell'">
-                <ColumnCellClusterItem :clusters="clusters" />
+            <template v-if="selectedView === 'BookShelf'">
+                <BookShelfClusterItem :clusters="clusters" />
             </template>
         </div>
     </template>
diff --git a/packages/web/app/components/RepoViewToggle.vue b/packages/web/app/components/RepoViewToggle.vue
index a81383c5..409a7b64 100644
--- a/packages/web/app/components/RepoViewToggle.vue
+++ b/packages/web/app/components/RepoViewToggle.vue
@@ -39,16 +39,16 @@ const { selectedView, toggleViewState, } = useSelectedView()
         <button
             class="rounded-sm p-0.5 text-md border-solid border border-gray-700 bg-slate-950 color-gray-400 transition-colors"
             :class="[
-                selectedView === 'ColumnCell'
+                selectedView === 'BookShelf'
                 ? 'border-green-400 color-green-400 bg-green-700'
                 : 'border-green-200 hover:color-green-200 hover:bg-green-500'
             ]"
             type="button"
-            value="ColumnCell"
+            value="BookShelf"
             @click="toggleViewState($event)"
-            aria-label="ColumnCell"
+            aria-label="BookShelf"
         >
-            <SvgColumnCell />
+            <SvgBookShelf />
         </button>
   </section>
 </template>
diff --git a/packages/web/app/components/column-cell/ClusterItem.vue b/packages/web/app/components/book-shelf/ClusterItem.vue
similarity index 100%
rename from packages/web/app/components/column-cell/ClusterItem.vue
rename to packages/web/app/components/book-shelf/ClusterItem.vue
diff --git a/packages/web/app/components/paper-stack/GithubIssue.vue b/packages/web/app/components/paper-stack/GithubIssue.vue
index 3564f919..0ba4f107 100644
--- a/packages/web/app/components/paper-stack/GithubIssue.vue
+++ b/packages/web/app/components/paper-stack/GithubIssue.vue
@@ -21,7 +21,7 @@ const { url, title, owner, repository, number, avgSimilarity, labels, updated_at
     <span class="flex-shrink-0 inline-block h-5 i-tabler-circle-dot text-green-500 mt-.5" />
 
     <div class="issue-fade w-full">
-      <div class="flex flex-col flex-nowrap gap-1">
+      <div class="flex flex-col gap-1">
         <NuxtLink
           class="line-clamp-1 flex-grow text-sm md:text-base lg:flex-grow-0 no-underline color-current hover:underline"
           :href="url"
@@ -31,7 +31,7 @@ const { url, title, owner, repository, number, avgSimilarity, labels, updated_at
         </NuxtLink>
 
         <div
-          class="text-xs relative text-gray-400 mb-1 break-words"
+          class="line-clamp-1 text-xs relative text-gray-400 mb-1 break-words"
         >
           <NuxtLink
             v-if="owner && repository"
diff --git a/packages/web/app/components/svg/BookShelf.vue b/packages/web/app/components/svg/BookShelf.vue
new file mode 100644
index 00000000..b10eebb8
--- /dev/null
+++ b/packages/web/app/components/svg/BookShelf.vue
@@ -0,0 +1,9 @@
+<script lang="ts">
+export default {
+  name: 'IconoirTableRows'
+}
+</script>
+
+<template>
+  <svg aria-label="book-shelf-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><!-- Icon from Iconoir by Luca Burgio - https://github.com/iconoir-icons/iconoir/blob/main/LICENSE --><path fill="none" stroke="currentColor" stroke-width="1.5" d="M3 12h18M3 12v4.5M3 12V7.5M21 12v4.5m0-4.5V7.5m-18 9v3.9a.6.6 0 0 0 .6.6h16.8a.6.6 0 0 0 .6-.6v-3.9m-18 0h18m0-9V3.6a.6.6 0 0 0-.6-.6H3.6a.6.6 0 0 0-.6.6v3.9m18 0H3"></path></svg>
+</template>
\ No newline at end of file
diff --git a/packages/web/app/components/svg/ColumnCell.vue b/packages/web/app/components/svg/ColumnCell.vue
deleted file mode 100644
index 8b1e025a..00000000
--- a/packages/web/app/components/svg/ColumnCell.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-    <script lang="ts">
-    export default {
-      name: 'MaterialSymbolsViewColumnRounded'
-    }
-    </script>
-
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M4 19q-.425 0-.712-.288T3 18V6q0-.425.288-.712T4 5h3.325q.425 0 .713.288T8.325 6v12q0 .425-.287.713T7.325 19H4Zm6.325 0q-.425 0-.712-.288T9.324 18V6q0-.425.288-.712T10.325 5h3.325q.425 0 .713.288T14.65 6v12q0 .425-.288.713T13.65 19h-3.325Zm6.325 0q-.425 0-.712-.288T15.65 18V6q0-.425.288-.712T16.65 5h3.325q.425 0 .713.288t.287.712v12q0 .425-.288.713t-.712.287H16.65Z"></path></svg>
-</template>
diff --git a/packages/web/app/components/svg/PaperStack.vue b/packages/web/app/components/svg/PaperStack.vue
index cc45e0a2..4472ace1 100644
--- a/packages/web/app/components/svg/PaperStack.vue
+++ b/packages/web/app/components/svg/PaperStack.vue
@@ -1,8 +1,8 @@
-  <script lang="ts">
-  export default {
-    name: 'GisLayers'
-  }
-  </script>
+<script lang="ts">
+export default {
+  name: 'GisLayers'
+}
+</script>
 
 <template>
   <svg aria-label="paper-stack-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 100 100"><!-- Icon from Font-GIS by Jean-Marc Viglino - https://github.com/Viglino/font-gis/blob/main/LICENSE-CC-BY.md --><path fill="currentColor" d="M28.135 10.357a3.5 3.5 0 0 0-2.668 1.235L.832 40.607a3.5 3.5 0 0 0 2.67 5.766l93-.064a3.5 3.5 0 0 0 2.666-5.766L74.59 11.592a3.5 3.5 0 0 0-2.668-1.235zM89.91 51.313l-9.178.007l8.211 9.67l-77.875.053l8.22-9.682l-9.188.008L.832 62.283a3.5 3.5 0 0 0 2.67 5.766l93-.065a3.5 3.5 0 0 0 2.666-5.765zm0 21.593l-9.178.008l8.211 9.67l-77.875.053l8.22-9.682l-9.188.008L.832 83.877a3.5 3.5 0 0 0 2.67 5.766l93-.065a3.5 3.5 0 0 0 2.666-5.766z" color="currentColor"></path></svg>
diff --git a/packages/web/app/components/svg/WindowPane.vue b/packages/web/app/components/svg/WindowPane.vue
index e038ee08..f5fe2269 100644
--- a/packages/web/app/components/svg/WindowPane.vue
+++ b/packages/web/app/components/svg/WindowPane.vue
@@ -1,8 +1,8 @@
-  <script lang="ts">
-  export default {
-    name: 'BiGrid3x3GapFill'
-  }
-  </script>
+<script lang="ts">
+export default {
+  name: 'BiGrid3x3GapFill'
+}
+</script>
 
 <template>
   <svg aria-label="window-pane-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><!-- Icon from Bootstrap Icons by The Bootstrap Authors - https://github.com/twbs/icons/blob/main/LICENSE.md --><path fill="currentColor" d="M1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zM1 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zM1 12a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1z"></path></svg>
diff --git a/packages/web/app/components/window-pane/ClusterAction.vue b/packages/web/app/components/window-pane/ClusterAction.vue
index 56054e46..959f733e 100644
--- a/packages/web/app/components/window-pane/ClusterAction.vue
+++ b/packages/web/app/components/window-pane/ClusterAction.vue
@@ -18,10 +18,13 @@ const openModal = () => modalRef.value?.openModal()
 </script>
 
 <template >
-    <section class="w-full h-10 p-2 text-sm text-center rounded-md border-solid border border-gray-700 color-gray-400">
-        <div v-if="clusterLength > 9" >
+    <section class="text-sm text-center color-gray-400">
+        <div 
+            v-if="clusterLength > 9" 
+            class="flex h-10 p-2 justify-center w-full rounded-md border-solid border border-gray-700 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
+        >
             <button
-                class=" bg-transparent hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
+                class=" bg-transparent "
                 type="button"
                 @click="openModal"
             >
diff --git a/packages/web/app/components/window-pane/GithubIssue.vue b/packages/web/app/components/window-pane/GithubIssue.vue
index ea3f7f6c..11e09939 100644
--- a/packages/web/app/components/window-pane/GithubIssue.vue
+++ b/packages/web/app/components/window-pane/GithubIssue.vue
@@ -17,7 +17,7 @@ const { url, title, owner, repository, number, avgSimilarity, labels, updated_at
 </script>
 
 <template>
-  <article class="overflow-hidden flex flex-row gap-1 ">
+  <article class="flex flex-row gap-1 ">
     <span class="flex-shrink-0 inline-block h-3 i-tabler-circle-dot text-green-500 mt-1" />
     
     <div class="issue-fade w-full">
@@ -31,7 +31,7 @@ const { url, title, owner, repository, number, avgSimilarity, labels, updated_at
         </NuxtLink>
 
         <div
-          class="text-xs text-gray-400 break-words"
+          class="line-clamp-1 text-xs text-gray-400 break-words"
         >
           <NuxtLink
             v-if="owner && repository"
@@ -91,8 +91,16 @@ const { url, title, owner, repository, number, avgSimilarity, labels, updated_at
 .issue-fade {
   mask-image: linear-gradient(to right, black 40%, transparent);
   -webkit-mask-image: linear-gradient(to right, black 40%, transparent);
+/*   
+  mask-image: linear-gradient(to right, black 40%, transparent),
+              linear-gradient(to bottom, black 70%, transparent);
+  -webkit-mask-image: linear-gradient(to right, black 40%, transparent),
+                      linear-gradient(to bottom, black 70%, transparent);
+  -webkit-mask-composite: source-over;
+  mask-composite: intersect; */
 }
 
+
 .label {
   --lightness-threshold: 0.6;
   --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
diff --git a/packages/web/app/composables/selected-view.ts b/packages/web/app/composables/selected-view.ts
index 43361a07..80aab1e8 100644
--- a/packages/web/app/composables/selected-view.ts
+++ b/packages/web/app/composables/selected-view.ts
@@ -1,7 +1,7 @@
 export type ViewToggleState =
   'PaperStack' |
   'WindowPane' |
-  'ColumnCell'
+  'BookShelf'
 
 const selectedView = ref<ViewToggleState>('PaperStack')
 

From 1a7bfba0f9acbc45c5e99ade63448e67ff944439 Mon Sep 17 00:00:00 2001
From: Brandon Hurrington <brandon.hurrington@lotto24.de>
Date: Sun, 13 Apr 2025 21:19:30 +0000
Subject: [PATCH 10/12] feat(web): Imoplemented Book Shelf view

---
 .../web/app/components/RepoViewLayout.vue     |   2 +-
 .../components/book-shelf/ClusterAction.vue   |  53 +++++++++
 .../app/components/book-shelf/ClusterItem.vue |  54 ---------
 .../components/book-shelf/ClusterLayout.vue   |  23 ++++
 .../components/book-shelf/ClusterSummary.vue  |  38 +++++++
 .../app/components/book-shelf/ClusterView.vue |  59 ++++++++++
 .../app/components/book-shelf/GithubIssue.vue | 105 ++++++++++++++++++
 .../components/paper-stack/ClusterAction.vue  |  60 +++++-----
 .../components/paper-stack/ClusterLayout.vue  |   4 +-
 .../components/paper-stack/GithubIssue.vue    |   8 +-
 .../components/window-pane/ClusterAction.vue  |  13 ++-
 .../components/window-pane/ClusterLayout.vue  |   6 +-
 .../components/window-pane/ClusterView.vue    |   2 +-
 .../components/window-pane/GithubIssue.vue    |   2 +-
 14 files changed, 327 insertions(+), 102 deletions(-)
 create mode 100644 packages/web/app/components/book-shelf/ClusterAction.vue
 delete mode 100644 packages/web/app/components/book-shelf/ClusterItem.vue
 create mode 100644 packages/web/app/components/book-shelf/ClusterLayout.vue
 create mode 100644 packages/web/app/components/book-shelf/ClusterSummary.vue
 create mode 100644 packages/web/app/components/book-shelf/ClusterView.vue
 create mode 100644 packages/web/app/components/book-shelf/GithubIssue.vue

diff --git a/packages/web/app/components/RepoViewLayout.vue b/packages/web/app/components/RepoViewLayout.vue
index 8971e60a..78c45b21 100644
--- a/packages/web/app/components/RepoViewLayout.vue
+++ b/packages/web/app/components/RepoViewLayout.vue
@@ -36,7 +36,7 @@ const { clusters, status } = defineProps<ClusterViewJunctionProps>()
 
         <div class="grid grid-cols-4 gap-4 pt-4">
             <template v-if="selectedView === 'BookShelf'">
-                <BookShelfClusterItem :clusters="clusters" />
+                <BookShelfClusterLayout :clusters="clusters" />
             </template>
         </div>
     </template>
diff --git a/packages/web/app/components/book-shelf/ClusterAction.vue b/packages/web/app/components/book-shelf/ClusterAction.vue
new file mode 100644
index 00000000..c812d3b9
--- /dev/null
+++ b/packages/web/app/components/book-shelf/ClusterAction.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type ClusterViewModal from '../ClusterViewModal.vue'
+import type { ClusterMetadata } from '~~/shared/models/github-metadata'
+
+interface ClusterActionProps {
+    cluster: ClusterMetadata;
+    clusterIndex: number;
+    clusterLength: number;
+}
+
+const NO_MORE_ISSUES = 'no more issues...'
+const NUMBER_OF_ISSUES = 5
+
+const { cluster, clusterIndex, clusterLength } = defineProps<ClusterActionProps>()
+
+const modalRef = useTemplateRef<InstanceType<typeof ClusterViewModal>>('modalRef')
+    
+const openModal = () => modalRef.value?.openModal()
+</script>
+
+<template >
+    <section class="text-sm text-center color-gray-400">
+        <div 
+            v-if="clusterLength > NUMBER_OF_ISSUES" 
+            class="flex h-10 p-2 justify-center w-full rounded-md border-solid border border-gray-700 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
+        >
+            <button
+                class=" bg-transparent "
+                type="button"
+                @click="openModal"
+            >
+                show {{ clusterLength - NUMBER_OF_ISSUES }} more issues...
+            </button>
+
+            <Teleport to="#teleports" class=" ">
+                <ClusterViewModal ref="modalRef" :cluster="cluster">
+                    <template #modal-content>
+                        <ClientOnly>
+                            <BookShelfClusterView :cluster="cluster" :clusterIndex="clusterIndex" :clusterTitle="cluster.title" :isModal="true" />
+                        </ClientOnly>
+                    </template>
+                </ClusterViewModal>
+            </Teleport>
+        </div>
+    
+        <div 
+            v-else
+            class=" bg-transparent"
+        >
+            {{ NO_MORE_ISSUES}}
+        </div>
+    </section>
+</template>
\ No newline at end of file
diff --git a/packages/web/app/components/book-shelf/ClusterItem.vue b/packages/web/app/components/book-shelf/ClusterItem.vue
deleted file mode 100644
index a6afbc4a..00000000
--- a/packages/web/app/components/book-shelf/ClusterItem.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-
-<script setup lang="ts">
-import type { ClusterMetadata } from '~~/shared/models/github-metadata'
-
-interface ClusterItemProps {
-    clusters: ClusterMetadata[];
-}
-
-const { clusters } = defineProps<ClusterItemProps>()
-
-const openState = reactive<Record<string, boolean>>({})
-
-</script>
-
-<template >
-        <section
-        v-for="(cluster, c) of clusters"
-        :key="c"
-        class=" overflow-hidden flex flex-col gap-4 md:rounded-md md:border-solid md:border border-gray-700 md:px-4 pb-8 mt-6 columns-1 lg:columns-2 border-b-solid"
-        >
-            <h2 class=" my-4 font-bold text-2xl flex items-baseline">
-                <span class="text-gray-500 inline-block mr-1 font-normal">#</span>{{ c + 1 }}
-                <span class="ml-2 font-normal text-lg color-gray-300">&mdash; {{ cluster.title }}</span>
-                <span class="ml-auto text-white bg-gray-700 text-sm font-normal rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 border-gray-700 inline-block leading-tight flex items-center">
-                <span class="i-tabler:copy inline-block w-4 h-4"></span>
-                cluster
-                </span>
-            </h2>
-            <GitHubIssue
-                v-for="(issue, i) of openState[c] !== true ? cluster.issues?.slice(0, 5) : cluster.issues"
-                :key="i"
-                :url="issue.url"
-                :title="issue.title"
-                :owner="issue.owner"
-                :repository="issue.repository"
-                :number="issue.number"
-                :avg-similarity="issue.avgSimilarity"
-                :labels="issue.labels"
-                :updated_at="issue.updated_at"
-            />
-            <button
-                v-if="cluster.issues?.length > 5 && openState[c] !== true"
-                class="rounded-md text-sm border-solid border border-gray-700 bg-transparent color-gray-400 py-2 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
-                type="button"
-                @click="openState[c] = !openState[c]"
-            >
-                show {{ cluster.issues?.length - 3 }} more
-            </button>
-        </section>
-</template>
-
-<style scoped>
-
-</style>
diff --git a/packages/web/app/components/book-shelf/ClusterLayout.vue b/packages/web/app/components/book-shelf/ClusterLayout.vue
new file mode 100644
index 00000000..dbfba27d
--- /dev/null
+++ b/packages/web/app/components/book-shelf/ClusterLayout.vue
@@ -0,0 +1,23 @@
+
+<script setup lang="ts">
+import type { ClusterMetadata } from '~~/shared/models/github-metadata'
+
+interface ClusterLayoutProps {
+    clusters: ClusterMetadata[];
+}
+
+const { clusters } = defineProps<ClusterLayoutProps>()
+
+</script>
+
+<template >
+    <section 
+        v-for="(cluster, index) of clusters" 
+        :key="index"
+        class=" flex flex-col gap-4 justify-between p-4 rounded-md border-solid border border-gray-700 columns-1 border-b-solid"
+    >
+        <BookShelfClusterView :cluster="cluster" :clusterIndex="index" :clusterTitle="cluster.title" :isModal="false"/>
+
+        <BookShelfClusterAction :cluster="cluster" :clusterIndex="index" :clusterLength="cluster.issues.length || 0" />
+    </section>
+</template>
\ No newline at end of file
diff --git a/packages/web/app/components/book-shelf/ClusterSummary.vue b/packages/web/app/components/book-shelf/ClusterSummary.vue
new file mode 100644
index 00000000..0aaa9542
--- /dev/null
+++ b/packages/web/app/components/book-shelf/ClusterSummary.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+interface ClusterSummaryProps {
+    clusterIndex: number;
+    clusterLength: number;
+    clusterTitle: string;
+}
+
+const CLUSTER_ICON = 'cluster'
+const CLUSTER_SUMMARY = 'Cluster Summary'
+const TOTAL_ISSUES = 'Total number of issues: '
+
+const { clusterIndex, clusterLength, clusterTitle } = defineProps<ClusterSummaryProps>()
+</script>
+
+<template >
+    <section class="h-30 bg-transparent">
+        <div class="flex justify-between items-baseline gap-1 font-bold ">
+            <div class="text-2xl flex items-baseline">
+                <p class="text-gray-500 mr-1 font-normal">#</p>{{ clusterIndex + 1 }}
+            </div>
+
+            <div>
+                <p class="text-lg text-gray-300 ">{{ CLUSTER_SUMMARY }}</p>
+            </div>
+
+            <div>
+                <span class="flex px-2 py-0.5 leading-tight items-center text-white bg-gray-700 text-sm font-normal rounded-full whitespace-pre border-solid border-1 border-gray-700 ">
+                    <SvgBookShelf class=" w-4 h-4" />
+                    {{ CLUSTER_ICON}}
+                </span>
+            </div>
+        </div>
+            
+        <div class="text-lg color-gray-400 overflow-hidden text-wrap"> {{ clusterTitle }}</div>
+
+        <div class="text-lg color-gray-400 overflow-hidden text-wrap"> {{ TOTAL_ISSUES + clusterLength }}</div>
+    </section>
+</template>
diff --git a/packages/web/app/components/book-shelf/ClusterView.vue b/packages/web/app/components/book-shelf/ClusterView.vue
new file mode 100644
index 00000000..e9c0f7d6
--- /dev/null
+++ b/packages/web/app/components/book-shelf/ClusterView.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { ClusterMetadata } from '~~/shared/models/github-metadata'
+
+interface ClusterViewProps {
+    cluster: ClusterMetadata;
+    clusterTitle: string;
+    clusterIndex: number;
+    isModal: boolean;
+}
+
+const NUMBER_OF_ISSUES = 5
+
+const { cluster, clusterIndex, clusterTitle, isModal } = defineProps<ClusterViewProps>()
+
+const issuesStack = computed(() => {
+    return (isModal) ? cluster.issues : cluster.issues.slice(0, NUMBER_OF_ISSUES)
+})
+
+</script>
+
+<!-- TODO: Find a solution other than z-index -->
+
+<template >
+        <section
+            class="w-full"
+        >
+            <BookShelfClusterSummary 
+                :clusterIndex="clusterIndex" 
+                :clusterLength="cluster.issues.length" 
+                :clusterTitle="clusterTitle"
+                :style="{
+                    zIndex: cluster.issues.length + 1,
+                }"
+            />
+
+            <div class="flex flex-col gap-4 columns-1">
+                <div
+                    v-for="(issue, index) of issuesStack"
+                    :key="index"
+                    :style="{
+                        zIndex: cluster.issues.length - index,
+                    }"
+                    class="overflow-hidden h-30 border-solid border-2 border-gray-700 rounded-md bg-shark-500 p-2 "
+                >
+                    <BookShelfGithubIssue
+                        :key="index"
+                        :url="issue.url"
+                        :title="issue.title"
+                        :owner="issue.owner"
+                        :repository="issue.repository"
+                        :number="issue.number"
+                        :avg-similarity="issue.avgSimilarity"
+                        :labels="issue.labels"
+                        :updated_at="issue.updated_at"
+                    />
+                </div>
+            </div>
+        </section>
+</template>
diff --git a/packages/web/app/components/book-shelf/GithubIssue.vue b/packages/web/app/components/book-shelf/GithubIssue.vue
new file mode 100644
index 00000000..1cfafe95
--- /dev/null
+++ b/packages/web/app/components/book-shelf/GithubIssue.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+interface GithubIssueProps {
+    url: string;
+    title: string;
+    owner: string;
+    repository: string;
+    number: number;
+    avgSimilarity: number;
+    labels: Array<string | { name: string, color?: string }>;
+    updated_at: string;
+}
+
+const UPDATED = 'updated'
+const PERCENT_SIMILAR = '% similar'
+
+const { url, title, owner, repository, number, avgSimilarity, labels, updated_at } = defineProps<GithubIssueProps>()
+</script>
+
+<template>
+  <article class="flex flex-row gap-1 ">
+    <span class="flex-shrink-0 inline-block h-5 i-tabler-circle-dot text-green-500" />
+    
+    <div class="issue-fade w-full">
+      <div class="h-22 flex flex-col flex-wrap justify-between">
+        <NuxtLink
+          class="line-clamp-1 text-sm text-base no-underline color-current hover:underline"
+          :href="url"
+          target="_blank"
+        >
+          {{ title?.trim() }}
+        </NuxtLink>
+
+        <div
+          class="line-clamp-1 text-xs text-gray-400 break-words"
+        >
+          <NuxtLink
+            v-if="owner && repository"
+            class="no-underline hover:underline color-current"
+            :to="{
+              name: 'owner-repo',
+              params: {
+                owner: owner,
+                repo: repository,
+              },
+            }"
+          >
+            {{ owner }}/{{ repository }}
+          </NuxtLink>
+
+          &middot;
+          {{ UPDATED }}
+
+          <NuxtTime
+            :datetime="updated_at"
+            relative
+          />
+
+          &middot;
+
+          <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) }}{{ PERCENT_SIMILAR }}
+          </NuxtLink>
+        </div>
+
+        <div class="flex flex-row gap-1 items-baseline flex-nowrap">
+          <span
+            v-for="(label, j) of labels"
+            :key="j"
+            class="label rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 text-xs inline-block leading-tight"
+            :style="labelColors(typeof label === 'string' ? '000000' : label.color || '000000')"
+          >
+            {{ typeof label === 'string' ? label : label.name }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.issue-fade {
+  mask-image: linear-gradient(to right, black 40%, transparent);
+  -webkit-mask-image: linear-gradient(to right, black 40%, transparent);
+}
+
+.label {
+  --lightness-threshold: 0.6;
+  --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
+  --lightness-switch: max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1));
+  --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
+  background: rgba(var(--label-r), var(--label-g), var(--label-b), 0.18);
+  color: hsl(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) + var(--lighten-by)) * 1%));
+  border-color: rgba(var(--label-r), var(--label-g), var(--label-b), 0.7);
+}
+</style>
diff --git a/packages/web/app/components/paper-stack/ClusterAction.vue b/packages/web/app/components/paper-stack/ClusterAction.vue
index 02fd265b..3f43d5aa 100644
--- a/packages/web/app/components/paper-stack/ClusterAction.vue
+++ b/packages/web/app/components/paper-stack/ClusterAction.vue
@@ -2,15 +2,16 @@
 import type ClusterViewModal from '../ClusterViewModal.vue'
 import type { ClusterMetadata } from '~~/shared/models/github-metadata'
 
-const NO_MORE_ISSUES = 'no more issues...'
-
-interface ShowMoreIssuesProps {
+interface ClusterActionProps {
     cluster: ClusterMetadata;
     clusterIndex: number;
     clusterLength: number;
 }
 
-const { cluster, clusterIndex, clusterLength } = defineProps<ShowMoreIssuesProps>()
+const NO_MORE_ISSUES = 'no more issues...'
+const NUMBER_OF_ISSUES = 3
+
+const { cluster, clusterIndex, clusterLength } = defineProps<ClusterActionProps>()
 
 const modalRef = useTemplateRef<InstanceType<typeof ClusterViewModal>>('modalRef')
     
@@ -18,33 +19,32 @@ const openModal = () => modalRef.value?.openModal()
 </script>
 
 <template >
-    <div class=" h-10 p-2 border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 whitespace-nowrap overflow-hidden text-ellipsis -mt-2 z-2 text-center " >
-    <div v-if="clusterLength > 3 " >
-        <button
-            class="text-sm bg-transparent color-gray-400 py-1 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
-            type="button"
-            @click="openModal"
-        >
-            show {{ clusterLength - 3 }} more issues...
-        </button>
+    <div class=" h-10 p-2 border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 whitespace-nowrap -mt-2 z-2 text-center " >
+        <div v-if="clusterLength > NUMBER_OF_ISSUES" >
+            <button
+                class="text-sm bg-transparent color-gray-400 py-1 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
+                type="button"
+                @click="openModal"
+            >
+                show {{ clusterLength - NUMBER_OF_ISSUES }} more issues...
+            </button>
 
-        <Teleport to="#teleports" class=" ">
-            <ClusterViewModal ref="modalRef" :cluster="cluster">
-                <template #modal-content>
-                    <ClientOnly>
-                        <PaperStackClusterView :cluster="cluster" :clusterIndex="clusterIndex" :clusterTitle="cluster.title" :isModal="true" />
-                    </ClientOnly>
-                </template>
-            </ClusterViewModal>
-        </Teleport>
-    </div>
-   
-    <div 
-        v-else
-        class="text-sm bg-transparent color-gray-400 py-1"
-    >
-        {{ NO_MORE_ISSUES}}
-    </div>
+            <Teleport to="#teleports" class=" ">
+                <ClusterViewModal ref="modalRef" :cluster="cluster">
+                    <template #modal-content>
+                        <ClientOnly>
+                            <PaperStackClusterView :cluster="cluster" :clusterIndex="clusterIndex" :clusterTitle="cluster.title" :isModal="true" />
+                        </ClientOnly>
+                    </template>
+                </ClusterViewModal>
+            </Teleport>
+        </div>
     
+        <div 
+            v-else
+            class="text-sm bg-transparent color-gray-400 py-1"
+        >
+            {{ NO_MORE_ISSUES}}
+        </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/packages/web/app/components/paper-stack/ClusterLayout.vue b/packages/web/app/components/paper-stack/ClusterLayout.vue
index f0393886..ad8c498f 100644
--- a/packages/web/app/components/paper-stack/ClusterLayout.vue
+++ b/packages/web/app/components/paper-stack/ClusterLayout.vue
@@ -2,11 +2,11 @@
 <script setup lang="ts">
 import type { ClusterMetadata } from '~~/shared/models/github-metadata'
 
-interface ClusterItemProps {
+interface ClusterLayoutProps {
     clusters: ClusterMetadata[];
 }
 
-const { clusters } = defineProps<ClusterItemProps>()
+const { clusters } = defineProps<ClusterLayoutProps>()
 
 </script>
 
diff --git a/packages/web/app/components/paper-stack/GithubIssue.vue b/packages/web/app/components/paper-stack/GithubIssue.vue
index 0ba4f107..c5c45050 100644
--- a/packages/web/app/components/paper-stack/GithubIssue.vue
+++ b/packages/web/app/components/paper-stack/GithubIssue.vue
@@ -18,12 +18,12 @@ const { url, title, owner, repository, number, avgSimilarity, labels, updated_at
 
 <template>
   <article class="flex flex-row gap-1 ">
-    <span class="flex-shrink-0 inline-block h-5 i-tabler-circle-dot text-green-500 mt-.5" />
+    <span class="flex-shrink-0 inline-block h-5 i-tabler-circle-dot text-green-500" />
 
     <div class="issue-fade w-full">
-      <div class="flex flex-col gap-1">
+      <div class="h-18 flex flex-col flex-wrap justify-between">        
         <NuxtLink
-          class="line-clamp-1 flex-grow text-sm md:text-base lg:flex-grow-0 no-underline color-current hover:underline"
+          class="line-clamp-1 flex-grow text-sm text-base flex-grow-0 no-underline color-current hover:underline"
           :href="url"
           target="_blank"
         >
@@ -72,7 +72,7 @@ const { url, title, owner, repository, number, avgSimilarity, labels, updated_at
           </NuxtLink>
         </div>
 
-        <div class="flex flex-row gap-1 items-baseline flex-wrap md:flex-nowrap">
+        <div class="flex flex-row gap-1 items-baseline flex-nowrap">
           <span
             v-for="(label, j) of labels"
             :key="j"
diff --git a/packages/web/app/components/window-pane/ClusterAction.vue b/packages/web/app/components/window-pane/ClusterAction.vue
index 959f733e..6da2fb14 100644
--- a/packages/web/app/components/window-pane/ClusterAction.vue
+++ b/packages/web/app/components/window-pane/ClusterAction.vue
@@ -2,15 +2,16 @@
 import type ClusterViewModal from '../ClusterViewModal.vue'
 import type { ClusterMetadata } from '~~/shared/models/github-metadata'
 
-const NO_MORE_ISSUES = 'no more issues...'
-
-interface ShowMoreIssuesProps {
+interface ClusterActionProps {
     cluster: ClusterMetadata;
     clusterIndex: number;
     clusterLength: number;
 }
 
-const { cluster, clusterIndex, clusterLength } = defineProps<ShowMoreIssuesProps>()
+const NO_MORE_ISSUES = 'no more issues...'
+const NUMBER_OF_ISSUES = 9
+
+const { cluster, clusterIndex, clusterLength } = defineProps<ClusterActionProps>()
 
 const modalRef = useTemplateRef<InstanceType<typeof ClusterViewModal>>('modalRef')
     
@@ -20,7 +21,7 @@ const openModal = () => modalRef.value?.openModal()
 <template >
     <section class="text-sm text-center color-gray-400">
         <div 
-            v-if="clusterLength > 9" 
+            v-if="clusterLength > NUMBER_OF_ISSUES" 
             class="flex h-10 p-2 justify-center w-full rounded-md border-solid border border-gray-700 hover:color-gray-200 active:color-white focus:color-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
         >
             <button
@@ -28,7 +29,7 @@ const openModal = () => modalRef.value?.openModal()
                 type="button"
                 @click="openModal"
             >
-                show {{ clusterLength - 9 }} more issues...
+                show {{ clusterLength - NUMBER_OF_ISSUES }} more issues...
             </button>
 
             <Teleport to="#teleports" class=" ">
diff --git a/packages/web/app/components/window-pane/ClusterLayout.vue b/packages/web/app/components/window-pane/ClusterLayout.vue
index 33c0b9b7..dadaf9e3 100644
--- a/packages/web/app/components/window-pane/ClusterLayout.vue
+++ b/packages/web/app/components/window-pane/ClusterLayout.vue
@@ -2,18 +2,18 @@
 <script setup lang="ts">
 import type { ClusterMetadata } from '~~/shared/models/github-metadata'
 
-interface ClusterItemProps {
+interface ClusterLayoutProps {
     clusters: ClusterMetadata[];
 }
 
-const { clusters } = defineProps<ClusterItemProps>()
+const { clusters } = defineProps<ClusterLayoutProps>()
 </script>
 
 <template >
     <section 
         v-for="(cluster, index) of clusters" 
         :key="index"
-        class=" overflow-hidden flex flex-col gap-4 justify-between p-4 rounded-md border-solid border border-gray-700 columns-1 border-b-solid"
+        class=" flex flex-col gap-4 justify-between p-4 rounded-md border-solid border border-gray-700 columns-1 border-b-solid"
     >
         <WindowPaneClusterView :cluster="cluster" :clusterIndex="index" :clusterTitle="cluster.title" :isModal="false"/>
 
diff --git a/packages/web/app/components/window-pane/ClusterView.vue b/packages/web/app/components/window-pane/ClusterView.vue
index 8ea22f62..e7576be6 100644
--- a/packages/web/app/components/window-pane/ClusterView.vue
+++ b/packages/web/app/components/window-pane/ClusterView.vue
@@ -32,7 +32,7 @@ const issuesStack = computed(() => {
                 <div
                     v-for="(issue, index) of issuesStack"
                     :key="index"
-                    class="overflow-hidden h-30 border-solid border-2 border-gray-700 rounded-md bg-shark-500 p-2 overflow-hidden"
+                    class="overflow-hidden h-30 border-solid border-2 border-gray-700 rounded-md bg-shark-500 p-2 "
                 >
                     <WindowPaneGithubIssue
                         :key="index"
diff --git a/packages/web/app/components/window-pane/GithubIssue.vue b/packages/web/app/components/window-pane/GithubIssue.vue
index 11e09939..84e5338b 100644
--- a/packages/web/app/components/window-pane/GithubIssue.vue
+++ b/packages/web/app/components/window-pane/GithubIssue.vue
@@ -21,7 +21,7 @@ const { url, title, owner, repository, number, avgSimilarity, labels, updated_at
     <span class="flex-shrink-0 inline-block h-3 i-tabler-circle-dot text-green-500 mt-1" />
     
     <div class="issue-fade w-full">
-      <div class=" flex flex-col flex-wrap gap-1 ">
+      <div class="h-22 flex flex-col flex-wrap justify-between">
         <NuxtLink
           class="line-clamp-1 text-sm text-base no-underline color-current hover:underline"
           :href="url"

From be108243746c06687da97fe7c6dad2ba0ee612e3 Mon Sep 17 00:00:00 2001
From: Brandon Hurrington <brandon.hurrington@lotto24.de>
Date: Thu, 17 Apr 2025 16:13:02 +0000
Subject: [PATCH 11/12] feat(web): Implemented Similar Issues pages

---
 .../web/app/components/ClusterViewModal.vue   |   2 -
 .../web/app/components/CommandConsole.vue     |  11 +-
 .../web/app/components/DuplicatesView.vue     |   3 +-
 .../app/components/GitHubIssueSkeleton.vue    |   3 -
 .../web/app/components/RepoViewLayout.vue     |  42 ++++----
 .../web/app/components/RepoViewToggle.vue     |  30 +++---
 .../components/SimilarIssuesViewLayout.vue    |  33 ++++++
 .../components/book-shelf/ClusterAction.vue   |   5 +-
 .../components/book-shelf/ClusterLayout.vue   |   4 +-
 .../components/book-shelf/ClusterSummary.vue  |   7 +-
 .../app/components/book-shelf/ClusterView.vue |  20 +---
 .../app/components/book-shelf/GithubIssue.vue |  94 ++++++++--------
 .../book-shelf/SimilarIssuesSummary.vue       |  28 +++++
 .../book-shelf/SimilarIssuesView.vue          |  44 ++++++++
 .../components/paper-stack/ClusterAction.vue  |   2 +-
 .../components/paper-stack/ClusterLayout.vue  |   2 +-
 .../components/paper-stack/ClusterSummary.vue |   9 +-
 .../components/paper-stack/ClusterView.vue    |  10 +-
 .../components/paper-stack/GithubIssue.vue    |  92 ++++++++--------
 .../paper-stack/SimilarIssuesSummary.vue      |  28 +++++
 .../paper-stack/SimilarIssuesView.vue         |  44 ++++++++
 packages/web/app/components/svg/BackArrow.vue |  14 +++
 .../web/app/components/svg/SimilarIssues.vue  |   9 ++
 .../components/window-pane/ClusterAction.vue  |   5 +-
 .../components/window-pane/ClusterLayout.vue  |   3 +-
 .../components/window-pane/ClusterSummary.vue |   7 +-
 .../components/window-pane/ClusterView.vue    |  10 +-
 .../components/window-pane/GithubIssue.vue    | 100 +++++++++---------
 .../window-pane/SimilarIssuesSummary.vue      |  28 +++++
 .../window-pane/SimilarIssuesView.vue         |  44 ++++++++
 packages/web/app/composables/fetch-similar.ts |  10 ++
 packages/web/app/composables/selected-view.ts |   4 +-
 .../web/app/pages/[owner]/[repo]/[issue].vue  |  48 +--------
 .../web/app/pages/[owner]/[repo]/index.vue    |  10 ++
 34 files changed, 523 insertions(+), 282 deletions(-)
 create mode 100644 packages/web/app/components/SimilarIssuesViewLayout.vue
 create mode 100644 packages/web/app/components/book-shelf/SimilarIssuesSummary.vue
 create mode 100644 packages/web/app/components/book-shelf/SimilarIssuesView.vue
 create mode 100644 packages/web/app/components/paper-stack/SimilarIssuesSummary.vue
 create mode 100644 packages/web/app/components/paper-stack/SimilarIssuesView.vue
 create mode 100644 packages/web/app/components/svg/BackArrow.vue
 create mode 100644 packages/web/app/components/svg/SimilarIssues.vue
 create mode 100644 packages/web/app/components/window-pane/SimilarIssuesSummary.vue
 create mode 100644 packages/web/app/components/window-pane/SimilarIssuesView.vue
 create mode 100644 packages/web/app/composables/fetch-similar.ts

diff --git a/packages/web/app/components/ClusterViewModal.vue b/packages/web/app/components/ClusterViewModal.vue
index bb3ed88b..0c051708 100644
--- a/packages/web/app/components/ClusterViewModal.vue
+++ b/packages/web/app/components/ClusterViewModal.vue
@@ -85,5 +85,3 @@ defineExpose({
   scrollbar-width: thin;
 }
 </style>
-<!-- TODO: Test these inline: -->
-<!-- "scrollbar scrollbar-rounded scrollbar-w-2 scrollbar-thumb-gray-500 scrollbar-track-gray-700 hover:scrollbar-thumb-gray-400" -->
\ No newline at end of file
diff --git a/packages/web/app/components/CommandConsole.vue b/packages/web/app/components/CommandConsole.vue
index 9eab13ee..80bc4fab 100644
--- a/packages/web/app/components/CommandConsole.vue
+++ b/packages/web/app/components/CommandConsole.vue
@@ -7,17 +7,16 @@ interface CommandConsoleProps {
   status: AsyncDataRequestStatus;
   selectedRepo: string;
 }
-
-const OWNER_REPO = 'owner-repo'
-const REFRESH_DATA = 'refresh data'
-const PICK_A_REPOSITORY = 'pick a repository to cluster issues'
-
 const { allowedRepos, status, selectedRepo } = defineProps<CommandConsoleProps>()
 
 const refresh = defineModel<() => Promise<void>>('refresh', {
     required: true
 })
 
+const OWNER_REPO = 'owner-repo'
+const REFRESH_DATA = 'refresh data'
+const PICK_A_REPOSITORY = 'pick a repository to cluster issues'
+
 function navigateToRepo(event: Event) {
   const [owner, repo] = (event.target as HTMLSelectElement).value.split('/') as [string, string]
   return navigateTo({
@@ -27,6 +26,8 @@ function navigateToRepo(event: Event) {
 }
 </script>
 
+  <!-- TODO: Can extract some of these further -->
+
 <template>
     <section class="w-full flex gap-2 justify-between justify-center items-center border-solid border border-gray-700 p-2 rounded-md">
 
diff --git a/packages/web/app/components/DuplicatesView.vue b/packages/web/app/components/DuplicatesView.vue
index 2dfc7e37..bd71dd6a 100644
--- a/packages/web/app/components/DuplicatesView.vue
+++ b/packages/web/app/components/DuplicatesView.vue
@@ -7,12 +7,11 @@ interface DuplicatesrViewProps {
     duplicates: IssueMetadata[];
     status: AsyncDataRequestStatus;
 }
+const { duplicates, status } = defineProps<DuplicatesrViewProps>()
 
 const LOADING_DUPLICATES = 'loading duplicates'
 const POSSIBLE_DUPLICATE = 'possible duplicate'
 
-const { duplicates, status } = defineProps<DuplicatesrViewProps>()
-
 const showDuplicates = ref(false)
 
 const typedDuplicates = computed<IssueMetadata[]>(() => {
diff --git a/packages/web/app/components/GitHubIssueSkeleton.vue b/packages/web/app/components/GitHubIssueSkeleton.vue
index c2f76146..1c18f118 100644
--- a/packages/web/app/components/GitHubIssueSkeleton.vue
+++ b/packages/web/app/components/GitHubIssueSkeleton.vue
@@ -2,9 +2,6 @@
 
 <template >
     <section
-        v-for="i in 7"
-        :key="i"
-        :style="{ '--section-index': i }"
         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"
     >
         <h2 class="flex items-center my-4 font-bold text-2xl">
diff --git a/packages/web/app/components/RepoViewLayout.vue b/packages/web/app/components/RepoViewLayout.vue
index 78c45b21..b426432c 100644
--- a/packages/web/app/components/RepoViewLayout.vue
+++ b/packages/web/app/components/RepoViewLayout.vue
@@ -1,20 +1,24 @@
 <script setup lang="ts">
-import type { AsyncDataRequestStatus } from '#app'
 import type { ClusterMetadata } from '~~/shared/models/github-metadata'
+import type { AsyncDataRequestStatus } from '#app'
 
-interface ClusterViewJunctionProps {
+interface RepoViewLayoutProps {
     clusters: ClusterMetadata[];
     status: AsyncDataRequestStatus;
 }
+const { clusters, status } = defineProps<RepoViewLayoutProps>()
 
 const { selectedView } = useSelectedView()
-
-const { clusters, status } = defineProps<ClusterViewJunctionProps>()
 </script>
 
 <template>
     <template v-if="status === 'idle' || status === 'pending'">
-      <GitHubIssueSkeleton />
+        <div 
+            v-for="i in 7"
+            :key="i"
+        >
+            <GitHubIssueSkeleton />
+        </div>
     </template>
 
     <template v-else-if="!clusters.length">
@@ -22,23 +26,23 @@ const { clusters, status } = defineProps<ClusterViewJunctionProps>()
     </template>
 
     <template v-else>
-        <div class="grid grid-cols-4 gap-4 pt-4">
-            <template v-if="selectedView === 'PaperStack'">
+        <template v-if="selectedView === 'PaperStack'">
+            <div class="grid grid-cols-4 gap-4 pt-4">
                 <PaperStackClusterLayout :clusters="clusters" />
-            </template>
-        </div>
+            </div>
+        </template>
 
-        <div class="grid grid-cols-3 gap-4 pt-4">
-            <template v-if="selectedView === 'WindowPane'" >
-                <WindowPaneClusterLayout :clusters="clusters" />            
-            </template>
-        </div>
-
-        <div class="grid grid-cols-4 gap-4 pt-4">
-            <template v-if="selectedView === 'BookShelf'">
+        <template v-else-if="selectedView === 'BookShelf'">
+            <div class="grid grid-cols-4 gap-4 pt-4">
                 <BookShelfClusterLayout :clusters="clusters" />
-            </template>
-        </div>
+            </div>
+        </template>
+
+        <template v-else-if="selectedView === 'WindowPane'" >
+            <div class="grid grid-cols-3 gap-4 pt-4">
+                <WindowPaneClusterLayout :clusters="clusters" />            
+            </div>
+        </template>
     </template>
 </template>
  
\ No newline at end of file
diff --git a/packages/web/app/components/RepoViewToggle.vue b/packages/web/app/components/RepoViewToggle.vue
index 409a7b64..1d46d787 100644
--- a/packages/web/app/components/RepoViewToggle.vue
+++ b/packages/web/app/components/RepoViewToggle.vue
@@ -7,7 +7,7 @@ const { selectedView, toggleViewState, } = useSelectedView()
 <template>
     <section class="flex gap-2 items-center p-2 border-solid border border-gray-700 rounded-sm bg-slate-700">
         <button
-            class="rounded-sm p-0.5 text-md border-solid border bg-slate-950 color-gray-400 transition-colors"
+            class="rounded-sm p-.5 text-md border-solid border bg-slate-950 color-gray-400 transition-colors"
             :class="[
                 selectedView === 'PaperStack'
                 ? 'border-cyan-400  color-cyan-400 bg-cyan-700 '
@@ -22,33 +22,33 @@ const { selectedView, toggleViewState, } = useSelectedView()
         </button>
 
         <button
-            class="rounded-sm p-0.5 text-md border-solid border bg-slate-950 color-gray-400 transition-colors"
+            class="rounded-sm p-.5 text-md border-solid border border-gray-700 bg-slate-950 color-gray-400 transition-colors"
             :class="[
-                selectedView === 'WindowPane'
-                ? 'border-red-400 color-red-400 bg-red-700'
-                : 'border-red-200 hover:color-red-200 hover:bg-red-500'
+                selectedView === 'BookShelf'
+                ? 'border-green-400 color-green-400 bg-green-700'
+                : 'border-green-200 hover:color-green-200 hover:bg-green-500'
             ]"
             type="button"
-            value="WindowPane"
+            value="BookShelf"
             @click="toggleViewState($event)"
-            aria-label="WindowPane"
+            aria-label="BookShelf"
         >
-            <SvgWindowPane />
+            <SvgBookShelf />
         </button>
 
         <button
-            class="rounded-sm p-0.5 text-md border-solid border border-gray-700 bg-slate-950 color-gray-400 transition-colors"
+            class="rounded-sm p-.5 text-md border-solid border bg-slate-950 color-gray-400 transition-colors"
             :class="[
-                selectedView === 'BookShelf'
-                ? 'border-green-400 color-green-400 bg-green-700'
-                : 'border-green-200 hover:color-green-200 hover:bg-green-500'
+                selectedView === 'WindowPane'
+                ? 'border-red-400 color-red-400 bg-red-700'
+                : 'border-red-200 hover:color-red-200 hover:bg-red-500'
             ]"
             type="button"
-            value="BookShelf"
+            value="WindowPane"
             @click="toggleViewState($event)"
-            aria-label="BookShelf"
+            aria-label="WindowPane"
         >
-            <SvgBookShelf />
+            <SvgWindowPane />
         </button>
   </section>
 </template>
diff --git a/packages/web/app/components/SimilarIssuesViewLayout.vue b/packages/web/app/components/SimilarIssuesViewLayout.vue
new file mode 100644
index 00000000..2d50e9d2
--- /dev/null
+++ b/packages/web/app/components/SimilarIssuesViewLayout.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { AsyncDataRequestStatus } from '#app'
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
+
+interface SimilarIssuesViewProps {
+    issues: IssueMetadata[];
+    status: AsyncDataRequestStatus;
+}
+const { issues, status } = defineProps<SimilarIssuesViewProps>()
+
+const { selectedView } = useSelectedView()
+</script>
+
+<template>
+    <template v-if="status === 'idle' || status === 'pending'">
+        <GitHubIssueSkeleton />
+    </template>
+
+    <template v-else>
+        <template v-if="selectedView === 'PaperStack'">
+            <PaperStackSimilarIssuesView :issues="issues" :isTruncated="false" />
+        </template>
+
+        <template v-else-if="selectedView === 'BookShelf'">
+            <BookShelfSimilarIssuesView :issues="issues" :isTruncated="false" />
+        </template>
+
+        <template v-else-if="selectedView === 'WindowPane'" >
+            <WindowPaneSimilarIssuesView :issues="issues" :isTruncated="false" />
+        </template>
+    </template>
+</template>
+ 
\ No newline at end of file
diff --git a/packages/web/app/components/book-shelf/ClusterAction.vue b/packages/web/app/components/book-shelf/ClusterAction.vue
index c812d3b9..e3875a64 100644
--- a/packages/web/app/components/book-shelf/ClusterAction.vue
+++ b/packages/web/app/components/book-shelf/ClusterAction.vue
@@ -7,12 +7,11 @@ interface ClusterActionProps {
     clusterIndex: number;
     clusterLength: number;
 }
+const { cluster, clusterIndex, clusterLength } = defineProps<ClusterActionProps>()
 
 const NO_MORE_ISSUES = 'no more issues...'
 const NUMBER_OF_ISSUES = 5
 
-const { cluster, clusterIndex, clusterLength } = defineProps<ClusterActionProps>()
-
 const modalRef = useTemplateRef<InstanceType<typeof ClusterViewModal>>('modalRef')
     
 const openModal = () => modalRef.value?.openModal()
@@ -36,7 +35,7 @@ const openModal = () => modalRef.value?.openModal()
                 <ClusterViewModal ref="modalRef" :cluster="cluster">
                     <template #modal-content>
                         <ClientOnly>
-                            <BookShelfClusterView :cluster="cluster" :clusterIndex="clusterIndex" :clusterTitle="cluster.title" :isModal="true" />
+                            <BookShelfClusterView :cluster="cluster" :clusterIndex="clusterIndex" :clusterTitle="cluster.title" :isTruncated="false" />
                         </ClientOnly>
                     </template>
                 </ClusterViewModal>
diff --git a/packages/web/app/components/book-shelf/ClusterLayout.vue b/packages/web/app/components/book-shelf/ClusterLayout.vue
index dbfba27d..3ac2db64 100644
--- a/packages/web/app/components/book-shelf/ClusterLayout.vue
+++ b/packages/web/app/components/book-shelf/ClusterLayout.vue
@@ -5,9 +5,7 @@ import type { ClusterMetadata } from '~~/shared/models/github-metadata'
 interface ClusterLayoutProps {
     clusters: ClusterMetadata[];
 }
-
 const { clusters } = defineProps<ClusterLayoutProps>()
-
 </script>
 
 <template >
@@ -16,7 +14,7 @@ const { clusters } = defineProps<ClusterLayoutProps>()
         :key="index"
         class=" flex flex-col gap-4 justify-between p-4 rounded-md border-solid border border-gray-700 columns-1 border-b-solid"
     >
-        <BookShelfClusterView :cluster="cluster" :clusterIndex="index" :clusterTitle="cluster.title" :isModal="false"/>
+        <BookShelfClusterView :cluster="cluster" :clusterIndex="index" :clusterTitle="cluster.title" :isTruncated="true"/>
 
         <BookShelfClusterAction :cluster="cluster" :clusterIndex="index" :clusterLength="cluster.issues.length || 0" />
     </section>
diff --git a/packages/web/app/components/book-shelf/ClusterSummary.vue b/packages/web/app/components/book-shelf/ClusterSummary.vue
index 0aaa9542..27e1b12d 100644
--- a/packages/web/app/components/book-shelf/ClusterSummary.vue
+++ b/packages/web/app/components/book-shelf/ClusterSummary.vue
@@ -4,12 +4,11 @@ interface ClusterSummaryProps {
     clusterLength: number;
     clusterTitle: string;
 }
+const { clusterIndex, clusterLength, clusterTitle } = defineProps<ClusterSummaryProps>()
 
 const CLUSTER_ICON = 'cluster'
 const CLUSTER_SUMMARY = 'Cluster Summary'
-const TOTAL_ISSUES = 'Total number of issues: '
-
-const { clusterIndex, clusterLength, clusterTitle } = defineProps<ClusterSummaryProps>()
+const ISSUES_IN_CLUSTER = ' issues in cluster'
 </script>
 
 <template >
@@ -33,6 +32,6 @@ const { clusterIndex, clusterLength, clusterTitle } = defineProps<ClusterSummary
             
         <div class="text-lg color-gray-400 overflow-hidden text-wrap"> {{ clusterTitle }}</div>
 
-        <div class="text-lg color-gray-400 overflow-hidden text-wrap"> {{ TOTAL_ISSUES + clusterLength }}</div>
+        <div class="text-lg color-gray-400 overflow-hidden text-wrap"> {{  clusterLength + ISSUES_IN_CLUSTER }}</div>
     </section>
 </template>
diff --git a/packages/web/app/components/book-shelf/ClusterView.vue b/packages/web/app/components/book-shelf/ClusterView.vue
index e9c0f7d6..4145224a 100644
--- a/packages/web/app/components/book-shelf/ClusterView.vue
+++ b/packages/web/app/components/book-shelf/ClusterView.vue
@@ -1,25 +1,21 @@
 <script setup lang="ts">
-import type { ClusterMetadata } from '~~/shared/models/github-metadata'
+import type { ClusterMetadata, IssueMetadata } from '~~/shared/models/github-metadata'
 
 interface ClusterViewProps {
     cluster: ClusterMetadata;
     clusterTitle: string;
     clusterIndex: number;
-    isModal: boolean;
+    isTruncated: boolean;
 }
+const { cluster, clusterIndex, clusterTitle, isTruncated } = defineProps<ClusterViewProps>()
 
 const NUMBER_OF_ISSUES = 5
 
-const { cluster, clusterIndex, clusterTitle, isModal } = defineProps<ClusterViewProps>()
-
 const issuesStack = computed(() => {
-    return (isModal) ? cluster.issues : cluster.issues.slice(0, NUMBER_OF_ISSUES)
+    return (isTruncated) ?  cluster.issues.slice(0, NUMBER_OF_ISSUES) : cluster.issues
 })
-
 </script>
 
-<!-- TODO: Find a solution other than z-index -->
-
 <template >
         <section
             class="w-full"
@@ -28,19 +24,13 @@ const issuesStack = computed(() => {
                 :clusterIndex="clusterIndex" 
                 :clusterLength="cluster.issues.length" 
                 :clusterTitle="clusterTitle"
-                :style="{
-                    zIndex: cluster.issues.length + 1,
-                }"
             />
 
             <div class="flex flex-col gap-4 columns-1">
                 <div
                     v-for="(issue, index) of issuesStack"
                     :key="index"
-                    :style="{
-                        zIndex: cluster.issues.length - index,
-                    }"
-                    class="overflow-hidden h-30 border-solid border-2 border-gray-700 rounded-md bg-shark-500 p-2 "
+                    class="h-30 overflow-hidden border-solid border-2 border-gray-700 rounded-md bg-shark-500 p-2 "
                 >
                     <BookShelfGithubIssue
                         :key="index"
diff --git a/packages/web/app/components/book-shelf/GithubIssue.vue b/packages/web/app/components/book-shelf/GithubIssue.vue
index 1cfafe95..02693b84 100644
--- a/packages/web/app/components/book-shelf/GithubIssue.vue
+++ b/packages/web/app/components/book-shelf/GithubIssue.vue
@@ -9,74 +9,80 @@ interface GithubIssueProps {
     labels: Array<string | { name: string, color?: string }>;
     updated_at: string;
 }
+const { url, title, owner, repository, number, avgSimilarity, labels, updated_at } = defineProps<GithubIssueProps>()
 
-const UPDATED = 'updated'
+const UPDATED = 'Updated'
 const PERCENT_SIMILAR = '% similar'
-
-const { url, title, owner, repository, number, avgSimilarity, labels, updated_at } = defineProps<GithubIssueProps>()
 </script>
 
 <template>
-  <article class="flex flex-row gap-1 ">
-    <span class="flex-shrink-0 inline-block h-5 i-tabler-circle-dot text-green-500" />
-    
-    <div class="issue-fade w-full">
-      <div class="h-22 flex flex-col flex-wrap justify-between">
+  <article class="h-25 flex flex-col issue-fade w-full gap-2 ">
+    <div class="flex gap-1">
+      <span class="h-5 flex-shrink-0 pt-6 i-tabler-circle-dot text-green-500" />
+      
+      <div class="flex flex-col flex-wrap justify-between">        
         <NuxtLink
-          class="line-clamp-1 text-sm text-base no-underline color-current hover:underline"
+          class="line-clamp-1 flex-grow text-md text-base flex-grow-0 no-underline color-current hover:underline"
           :href="url"
           target="_blank"
         >
           {{ title?.trim() }}
         </NuxtLink>
+      </div>
+    </div>
 
-        <div
-          class="line-clamp-1 text-xs text-gray-400 break-words"
+    <div
+      class="flex items-baseline gap-3"
+    >
+      <div
+        class="flex flex-col text-sm gap-2 text-gray-300 text-center"
+      >
+        <NuxtLink
+          v-if="owner && repository"
+          class="w-full line-clamp-1 no-underline hover:underline p-.5 rounded-md border-solid border border-gray-700 bg-gray-700 hover:bg-gray-500 hover:text-gray-200 active:color-white focus:text-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
+          :to="{
+            name: 'owner-repo',
+            params: {
+              owner: owner,
+              repo: repository,
+            },
+          }"
         >
-          <NuxtLink
-            v-if="owner && repository"
-            class="no-underline hover:underline color-current"
-            :to="{
-              name: 'owner-repo',
-              params: {
-                owner: owner,
-                repo: repository,
-              },
-            }"
-          >
-            {{ owner }}/{{ repository }}
-          </NuxtLink>
+          {{ owner }}/{{ repository }}
+        </NuxtLink>
 
-          &middot;
+        <NuxtLink
+          class="w-full line-clamp-1 no-underline hover:underline p-.5 rounded-md border-solid border border-gray-700 bg-gray-700 hover:bg-gray-500 hover:text-gray-200 active:color-white focus:text-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
+          :to="owner && repository ? {
+            name: 'owner-repo-issue',
+            params: {
+              owner: owner,
+              repo: repository,
+              issue: number,
+            },
+          } : ''"
+        >
+          {{ Math.floor(avgSimilarity * 100) }}{{ PERCENT_SIMILAR }}
+        </NuxtLink>
+      </div>
+
+      <div
+        class="flex flex-col gap-3"
+      >
+        <div  class="text-sm text-gray-500 ">
           {{ UPDATED }}
 
           <NuxtTime
             :datetime="updated_at"
             relative
           />
-
-          &middot;
-
-          <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) }}{{ PERCENT_SIMILAR }}
-          </NuxtLink>
         </div>
 
-        <div class="flex flex-row gap-1 items-baseline flex-nowrap">
+        <div class="flex flex-row gap-1 flex-nowrap ">
           <span
             v-for="(label, j) of labels"
             :key="j"
-            class="label rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 text-xs inline-block leading-tight"
+            class="label rounded-full px-2 py-.5 whitespace-pre border-solid border-1 text-xs leading-tight"
             :style="labelColors(typeof label === 'string' ? '000000' : label.color || '000000')"
           >
             {{ typeof label === 'string' ? label : label.name }}
@@ -102,4 +108,4 @@ const { url, title, owner, repository, number, avgSimilarity, labels, updated_at
   color: hsl(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) + var(--lighten-by)) * 1%));
   border-color: rgba(var(--label-r), var(--label-g), var(--label-b), 0.7);
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/packages/web/app/components/book-shelf/SimilarIssuesSummary.vue b/packages/web/app/components/book-shelf/SimilarIssuesSummary.vue
new file mode 100644
index 00000000..cada82cd
--- /dev/null
+++ b/packages/web/app/components/book-shelf/SimilarIssuesSummary.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+interface SimilarIssuesSummaryProps {
+    issueTitle: string;
+}
+const { issueTitle } = defineProps<SimilarIssuesSummaryProps>()
+
+const SIMILAR_SUMMARY = 'Similar issues - '
+</script>
+
+<template >
+    <section class="h-20 flex p-2 items-baseline gap-2 bg-transparent">
+        <NuxtLink
+          class="bg-transparent color-gray-500 hover:color-gray-300 active:color-white focus:color-gray-300 hover:cursor-pointer no-underline hover:underline transition-colors"
+          @click="$router.back()"
+          aria-label="BackArrow"
+        >
+            <SvgBackArrow class="w-8 h-8" />
+        </NuxtLink>
+
+        <div class="flex gap-1 whitespace-pre">
+            <span class=" p-1 text-blue-500 ">
+                <SvgSimilarIssues class=" w-6 h-6" />
+            </span>
+            <p class="text-2xl text-gray-300 font-bold">{{ SIMILAR_SUMMARY }}</p>
+            <p class="text-2xl text-gray-500 font-bold">{{ issueTitle }}</p>
+        </div>
+    </section>
+</template>
diff --git a/packages/web/app/components/book-shelf/SimilarIssuesView.vue b/packages/web/app/components/book-shelf/SimilarIssuesView.vue
new file mode 100644
index 00000000..dc9446aa
--- /dev/null
+++ b/packages/web/app/components/book-shelf/SimilarIssuesView.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
+
+interface SimilarIssuesViewProps {
+    issues: IssueMetadata[];    
+}
+const { issues } = defineProps<SimilarIssuesViewProps>()
+</script>
+
+<template >
+        <section
+            class="w-full "
+        >
+            <BookShelfSimilarIssuesSummary 
+                :issueTitle="issues[0]?.title || 'ISSUE TITLE MISSING'"
+                :style="{
+                    zIndex: issues.length + 1,
+                }"
+            />
+
+            <div class="flex flex-col gap-4 columns-1">
+                <div
+                    v-for="(issue, index) of issues"
+                    :key="index"
+                    :style="{
+                        zIndex: issues.length - index,
+                    }"
+                    class="h-30 overflow-hidden border-solid border-2 border-gray-700 rounded-md bg-shark-500 p-2"
+                >
+                    <BookShelfGithubIssue
+                        :key="index"
+                        :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"
+                    />
+                </div>
+            </div>
+        </section>
+</template>
diff --git a/packages/web/app/components/paper-stack/ClusterAction.vue b/packages/web/app/components/paper-stack/ClusterAction.vue
index 3f43d5aa..d1653a75 100644
--- a/packages/web/app/components/paper-stack/ClusterAction.vue
+++ b/packages/web/app/components/paper-stack/ClusterAction.vue
@@ -33,7 +33,7 @@ const openModal = () => modalRef.value?.openModal()
                 <ClusterViewModal ref="modalRef" :cluster="cluster">
                     <template #modal-content>
                         <ClientOnly>
-                            <PaperStackClusterView :cluster="cluster" :clusterIndex="clusterIndex" :clusterTitle="cluster.title" :isModal="true" />
+                            <PaperStackClusterView :cluster="cluster" :clusterIndex="clusterIndex" :clusterTitle="cluster.title" :isTruncated="false" />
                         </ClientOnly>
                     </template>
                 </ClusterViewModal>
diff --git a/packages/web/app/components/paper-stack/ClusterLayout.vue b/packages/web/app/components/paper-stack/ClusterLayout.vue
index ad8c498f..f0cdad1c 100644
--- a/packages/web/app/components/paper-stack/ClusterLayout.vue
+++ b/packages/web/app/components/paper-stack/ClusterLayout.vue
@@ -15,7 +15,7 @@ const { clusters } = defineProps<ClusterLayoutProps>()
         v-for="(cluster, index) of clusters" 
         :key="index"
     >
-        <PaperStackClusterView :cluster="cluster" :clusterIndex="index" :clusterTitle="cluster.title" :isModal="false"/>
+        <PaperStackClusterView :cluster="cluster" :clusterIndex="index" :clusterTitle="cluster.title" :isTruncated="true"/>
 
         <PaperStackClusterAction :cluster="cluster" :clusterIndex="index" :clusterLength="cluster.issues.length || 0" />
     </section>
diff --git a/packages/web/app/components/paper-stack/ClusterSummary.vue b/packages/web/app/components/paper-stack/ClusterSummary.vue
index dd140b4e..fcde71a9 100644
--- a/packages/web/app/components/paper-stack/ClusterSummary.vue
+++ b/packages/web/app/components/paper-stack/ClusterSummary.vue
@@ -4,16 +4,15 @@ interface ClusterSummaryProps {
     clusterLength: number;
     clusterTitle: string;
 }
+const { clusterIndex, clusterLength, clusterTitle } = defineProps<ClusterSummaryProps>()
 
 const CLUSTER_ICON = 'cluster'
 const CLUSTER_SUMMARY = 'Cluster Summary'
-const TOTAL_ISSUES = 'Total number of issues: '
-
-const { clusterIndex, clusterLength, clusterTitle } = defineProps<ClusterSummaryProps>()
+const ISSUES_IN_CLUSTER = ' issues in cluster'
 </script>
 
 <template >
-    <section class="h-40 relative p-2 border-3 border-solid border-gray-600 rounded-md bg-shark-500 z-10">
+    <section class="h-40 relative z-10 flex-col p-2 border-3 border-solid border-gray-600 rounded-md bg-shark-500">
         <div class="flex justify-between items-baseline gap-1 font-bold ">
             <div class="text-2xl flex items-baseline">
                 <p class="text-gray-500 mr-1 font-normal">#</p>{{ clusterIndex + 1 }}
@@ -33,6 +32,6 @@ const { clusterIndex, clusterLength, clusterTitle } = defineProps<ClusterSummary
             
         <div class="text-lg color-gray-400 overflow-hidden text-wrap"> {{ clusterTitle }}</div>
 
-        <div class="text-lg color-gray-400 overflow-hidden text-wrap"> {{ TOTAL_ISSUES + clusterLength }}</div>
+        <div class="text-lg color-gray-400 overflow-hidden text-wrap"> {{  clusterLength + ISSUES_IN_CLUSTER }}</div>
     </section>
 </template>
diff --git a/packages/web/app/components/paper-stack/ClusterView.vue b/packages/web/app/components/paper-stack/ClusterView.vue
index 89ba2f59..fb932c74 100644
--- a/packages/web/app/components/paper-stack/ClusterView.vue
+++ b/packages/web/app/components/paper-stack/ClusterView.vue
@@ -5,17 +5,15 @@ interface ClusterViewProps {
     cluster: ClusterMetadata;
     clusterTitle: string;
     clusterIndex: number;
-    isModal: boolean;
+    isTruncated: boolean;
 }
+const { cluster, clusterIndex, clusterTitle, isTruncated } = defineProps<ClusterViewProps>()
 
 const NUMBER_OF_ISSUES = 3
 
-const { cluster, clusterIndex, clusterTitle, isModal } = defineProps<ClusterViewProps>()
-
 const issuesStack = computed(() => {
-    return (isModal) ? cluster.issues : cluster.issues.slice(0, NUMBER_OF_ISSUES)
+    return (isTruncated) ?  cluster.issues.slice(0, NUMBER_OF_ISSUES) : cluster.issues
 })
-
 </script>
 
 <!-- TODO: Find a solution other than z-index -->
@@ -39,7 +37,7 @@ const issuesStack = computed(() => {
                 :style="{
                     zIndex: cluster.issues.length - index,
                 }"
-                class="overflow-hidden -mt-2 h-25 py-4 p-l-3 p-r-none border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 "
+                class="h-30 overflow-hidden -mt-2 pt-3 pl-3 pr-none border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 "
             >
                 <PaperStackGithubIssue
                     :key="index"
diff --git a/packages/web/app/components/paper-stack/GithubIssue.vue b/packages/web/app/components/paper-stack/GithubIssue.vue
index c5c45050..5cedabb3 100644
--- a/packages/web/app/components/paper-stack/GithubIssue.vue
+++ b/packages/web/app/components/paper-stack/GithubIssue.vue
@@ -9,74 +9,80 @@ interface GithubIssueProps {
     labels: Array<string | { name: string, color?: string }>;
     updated_at: string;
 }
+const { url, title, owner, repository, number, avgSimilarity, labels, updated_at } = defineProps<GithubIssueProps>()
 
-const UPDATED = 'updated'
+const UPDATED = 'Updated'
 const PERCENT_SIMILAR = '% similar'
-
-const { url, title, owner, repository, number, avgSimilarity, labels, updated_at } = defineProps<GithubIssueProps>()
 </script>
 
 <template>
-  <article class="flex flex-row gap-1 ">
-    <span class="flex-shrink-0 inline-block h-5 i-tabler-circle-dot text-green-500" />
-
-    <div class="issue-fade w-full">
-      <div class="h-18 flex flex-col flex-wrap justify-between">        
+  <article class="h-25 flex flex-col issue-fade w-full gap-2 ">
+    <div class="flex gap-1">
+      <span class="h-5 flex-shrink-0 pt-6 i-tabler-circle-dot text-green-500" />
+      
+      <div class="flex flex-col flex-wrap justify-between">        
         <NuxtLink
-          class="line-clamp-1 flex-grow text-sm text-base flex-grow-0 no-underline color-current hover:underline"
+          class="line-clamp-1 flex-grow text-md text-base flex-grow-0 no-underline color-current hover:underline"
           :href="url"
           target="_blank"
         >
           {{ title?.trim() }}
         </NuxtLink>
+      </div>
+    </div>
 
-        <div
-          class="line-clamp-1 text-xs relative text-gray-400 mb-1 break-words"
+    <div
+      class="flex items-baseline gap-3"
+    >
+      <div
+        class="flex flex-col text-sm gap-2 text-gray-300 text-center"
+      >
+        <NuxtLink
+          v-if="owner && repository"
+          class="w-full line-clamp-1 no-underline hover:underline p-.5 rounded-md border-solid border border-gray-700 bg-gray-700 hover:bg-gray-500 hover:text-gray-200 active:color-white focus:text-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
+          :to="{
+            name: 'owner-repo',
+            params: {
+              owner: owner,
+              repo: repository,
+            },
+          }"
         >
-          <NuxtLink
-            v-if="owner && repository"
-            class="no-underline hover:underline color-current"
-            :to="{
-              name: 'owner-repo',
-              params: {
-                owner: owner,
-                repo: repository,
-              },
-            }"
-          >
-            {{ owner }}/{{ repository }}
-          </NuxtLink>
+          {{ owner }}/{{ repository }}
+        </NuxtLink>
 
-          &middot;
+        <NuxtLink
+          class="w-full line-clamp-1 no-underline hover:underline p-.5 rounded-md border-solid border border-gray-700 bg-gray-700 hover:bg-gray-500 hover:text-gray-200 active:color-white focus:text-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
+          :to="owner && repository ? {
+            name: 'owner-repo-issue',
+            params: {
+              owner: owner,
+              repo: repository,
+              issue: number,
+            },
+          } : ''"
+        >
+          {{ Math.floor(avgSimilarity * 100) }}{{ PERCENT_SIMILAR }}
+        </NuxtLink>
+      </div>
+
+      <div
+        class="flex flex-col gap-3"
+      >
+        <div  class="text-sm text-gray-500 ">
           {{ UPDATED }}
 
           <NuxtTime
             :datetime="updated_at"
             relative
           />
-
-          &middot;
-
-          <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) }}{{ PERCENT_SIMILAR }}
-          </NuxtLink>
         </div>
 
-        <div class="flex flex-row gap-1 items-baseline flex-nowrap">
+        <div class="flex flex-row gap-1 flex-nowrap ">
           <span
             v-for="(label, j) of labels"
             :key="j"
-            class="label rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 text-xs inline-block leading-tight"
+            class="label rounded-full px-2 py-.5 whitespace-pre border-solid border-1 text-xs leading-tight"
             :style="labelColors(typeof label === 'string' ? '000000' : label.color || '000000')"
           >
             {{ typeof label === 'string' ? label : label.name }}
diff --git a/packages/web/app/components/paper-stack/SimilarIssuesSummary.vue b/packages/web/app/components/paper-stack/SimilarIssuesSummary.vue
new file mode 100644
index 00000000..209df830
--- /dev/null
+++ b/packages/web/app/components/paper-stack/SimilarIssuesSummary.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+interface SimilarIssuesSummaryProps {
+    issueTitle: string;
+}
+const { issueTitle } = defineProps<SimilarIssuesSummaryProps>()
+
+const SIMILAR_SUMMARY = 'Similar issues - '
+</script>
+
+<template >
+    <section class=" h-20 relative z-10 flex p-2 items-baseline gap-2 border-3 border-solid border-gray-600 rounded-md bg-transparent">
+        <NuxtLink
+          class="bg-transparent color-gray-500 hover:color-gray-300 active:color-white focus:color-gray-300 hover:cursor-pointer no-underline hover:underline transition-colors"
+          @click="$router.back()"
+          aria-label="BackArrow"
+        >
+            <SvgBackArrow class="w-8 h-8" />
+        </NuxtLink>
+
+        <div class="flex gap-1 whitespace-pre">
+            <span class=" p-1 text-blue-500 ">
+                <SvgSimilarIssues class=" w-6 h-6" />
+            </span>
+            <p class="text-2xl text-gray-300 font-bold">{{ SIMILAR_SUMMARY }}</p>
+            <p class="text-2xl text-gray-500 font-bold">{{ issueTitle }}</p>
+        </div>
+    </section>
+</template>
diff --git a/packages/web/app/components/paper-stack/SimilarIssuesView.vue b/packages/web/app/components/paper-stack/SimilarIssuesView.vue
new file mode 100644
index 00000000..62e3eb40
--- /dev/null
+++ b/packages/web/app/components/paper-stack/SimilarIssuesView.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
+
+interface SimilarIssuesViewProps {
+    issues: IssueMetadata[];    
+}
+const { issues } = defineProps<SimilarIssuesViewProps>()
+</script>
+
+<!-- TODO: Find a solution other than z-index -->
+
+<template >
+        <section
+            class="flex flex-col rounded-md border-solid border border-gray-700 columns-1 "
+        >
+            <PaperStackSimilarIssuesSummary 
+                :issueTitle="issues[0]?.title || 'ISSUE TITLE MISSING'"
+                :style="{
+                    zIndex: issues.length + 1,
+                }"
+            />
+
+            <div
+                v-for="(issue, index) of issues"
+                :key="index"
+                :style="{
+                    zIndex: issues.length - index,
+                }"
+                class="h-30 overflow-hidden -mt-2 pt-3 pl-3 pr-none border-solid border-2 border-t-0 border-gray-700 rounded-t-none rounded-b-md bg-shark-500 "
+            >
+                <PaperStackGithubIssue
+                    :key="index"
+                    :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"
+                />
+            </div>
+        </section>
+</template>
diff --git a/packages/web/app/components/svg/BackArrow.vue b/packages/web/app/components/svg/BackArrow.vue
new file mode 100644
index 00000000..bef7b4bf
--- /dev/null
+++ b/packages/web/app/components/svg/BackArrow.vue
@@ -0,0 +1,14 @@
+<script lang="ts">
+    export default {
+        name: 'MaterialSymbolsLightKeyboardBackspaceRounded'
+    }
+</script>
+
+<template>
+    <svg aria-label="back-arrow-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
+        viewBox="0 0 24 24"><!-- Icon from Material Symbols Light by Google - https://github.com/google/material-design-icons/blob/master/LICENSE -->
+        <path fill="currentColor"
+            d="m5.916 12.5l3.746 3.746q.14.14.15.345q.01.203-.15.363t-.354.16t-.354-.16l-4.389-4.389q-.13-.13-.183-.267q-.053-.136-.053-.298t.053-.298t.184-.267l4.388-4.389q.14-.14.344-.15t.364.15t.16.354t-.16.354L5.916 11.5H19.5q.214 0 .357.143T20 12t-.143.357t-.357.143z">
+        </path>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/packages/web/app/components/svg/SimilarIssues.vue b/packages/web/app/components/svg/SimilarIssues.vue
new file mode 100644
index 00000000..1f96ffb4
--- /dev/null
+++ b/packages/web/app/components/svg/SimilarIssues.vue
@@ -0,0 +1,9 @@
+<script lang="ts">
+export default {
+    name: 'CarbonEqualApproximately'
+}
+</script>
+
+<template>
+  <svg aria-label="similar-issues-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><!-- Icon from Carbon by IBM - undefined --><path fill="currentColor" d="M20 15c-1.777 0-3.231-.873-4.514-1.642C14.322 12.659 13.223 12 12 12c-1.398 0-2.449.863-3.293 1.707l-1.414-1.414C8.36 11.225 9.86 10 12 10c1.777 0 3.231.873 4.514 1.642C17.678 12.341 18.777 13 20 13c1.398 0 2.449-.863 3.293-1.707l1.414 1.414C23.64 13.775 22.14 15 20 15m0 7c-1.777 0-3.231-.873-4.514-1.642C14.322 19.659 13.223 19 12 19c-1.398 0-2.449.863-3.293 1.707l-1.414-1.414C8.36 18.225 9.86 17 12 17c1.777 0 3.231.873 4.514 1.642C17.678 19.341 18.777 20 20 20c1.398 0 2.449-.863 3.293-1.707l1.414 1.414C23.64 20.775 22.14 22 20 22"></path><path fill="currentColor" d="M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14s-6.28 14-14 14m0-26C9.383 4 4 9.383 4 16s5.383 12 12 12s12-5.383 12-12S22.617 4 16 4"></path></svg>
+</template>
\ No newline at end of file
diff --git a/packages/web/app/components/window-pane/ClusterAction.vue b/packages/web/app/components/window-pane/ClusterAction.vue
index 6da2fb14..5a3e41e8 100644
--- a/packages/web/app/components/window-pane/ClusterAction.vue
+++ b/packages/web/app/components/window-pane/ClusterAction.vue
@@ -7,12 +7,11 @@ interface ClusterActionProps {
     clusterIndex: number;
     clusterLength: number;
 }
+const { cluster, clusterIndex, clusterLength } = defineProps<ClusterActionProps>()
 
 const NO_MORE_ISSUES = 'no more issues...'
 const NUMBER_OF_ISSUES = 9
 
-const { cluster, clusterIndex, clusterLength } = defineProps<ClusterActionProps>()
-
 const modalRef = useTemplateRef<InstanceType<typeof ClusterViewModal>>('modalRef')
     
 const openModal = () => modalRef.value?.openModal()
@@ -36,7 +35,7 @@ const openModal = () => modalRef.value?.openModal()
                 <ClusterViewModal ref="modalRef" :cluster="cluster">
                     <template #modal-content>
                         <ClientOnly>
-                            <WindowPaneClusterView :cluster="cluster" :clusterIndex="clusterIndex" :clusterTitle="cluster.title" :isModal="true" />
+                            <WindowPaneClusterView :cluster="cluster" :clusterIndex="clusterIndex" :clusterTitle="cluster.title" :isTruncated="false" />
                         </ClientOnly>
                     </template>
                 </ClusterViewModal>
diff --git a/packages/web/app/components/window-pane/ClusterLayout.vue b/packages/web/app/components/window-pane/ClusterLayout.vue
index dadaf9e3..c9451540 100644
--- a/packages/web/app/components/window-pane/ClusterLayout.vue
+++ b/packages/web/app/components/window-pane/ClusterLayout.vue
@@ -5,7 +5,6 @@ import type { ClusterMetadata } from '~~/shared/models/github-metadata'
 interface ClusterLayoutProps {
     clusters: ClusterMetadata[];
 }
-
 const { clusters } = defineProps<ClusterLayoutProps>()
 </script>
 
@@ -15,7 +14,7 @@ const { clusters } = defineProps<ClusterLayoutProps>()
         :key="index"
         class=" flex flex-col gap-4 justify-between p-4 rounded-md border-solid border border-gray-700 columns-1 border-b-solid"
     >
-        <WindowPaneClusterView :cluster="cluster" :clusterIndex="index" :clusterTitle="cluster.title" :isModal="false"/>
+        <WindowPaneClusterView :cluster="cluster" :clusterIndex="index" :clusterTitle="cluster.title" :isTruncated="true"/>
 
         <WindowPaneClusterAction :cluster="cluster" :clusterIndex="index" :clusterLength="cluster.issues.length || 0" />
     </section>
diff --git a/packages/web/app/components/window-pane/ClusterSummary.vue b/packages/web/app/components/window-pane/ClusterSummary.vue
index 0152dd1a..71ec6744 100644
--- a/packages/web/app/components/window-pane/ClusterSummary.vue
+++ b/packages/web/app/components/window-pane/ClusterSummary.vue
@@ -4,12 +4,11 @@ interface ClusterSummaryProps {
     clusterLength: number;
     clusterTitle: string;
 }
+const { clusterIndex, clusterLength, clusterTitle } = defineProps<ClusterSummaryProps>()
 
 const CLUSTER_ICON = 'cluster'
 const CLUSTER_SUMMARY = 'Cluster Summary'
-const TOTAL_ISSUES = 'Total number of issues: '
-
-const { clusterIndex, clusterLength, clusterTitle } = defineProps<ClusterSummaryProps>()
+const ISSUES_IN_CLUSTER = ' issues in cluster'
 </script>
 
 <template >
@@ -33,6 +32,6 @@ const { clusterIndex, clusterLength, clusterTitle } = defineProps<ClusterSummary
             
         <div class="text-lg color-gray-400 overflow-hidden text-wrap"> {{ clusterTitle }}</div>
 
-        <div class="text-lg color-gray-400 overflow-hidden text-wrap"> {{ TOTAL_ISSUES + clusterLength }}</div>
+        <div class="text-lg color-gray-400 overflow-hidden text-wrap"> {{  clusterLength + ISSUES_IN_CLUSTER }}</div>
     </section>
 </template>
diff --git a/packages/web/app/components/window-pane/ClusterView.vue b/packages/web/app/components/window-pane/ClusterView.vue
index e7576be6..d71481d5 100644
--- a/packages/web/app/components/window-pane/ClusterView.vue
+++ b/packages/web/app/components/window-pane/ClusterView.vue
@@ -5,17 +5,15 @@ interface ClusterViewProps {
     cluster: ClusterMetadata;
     clusterTitle: string;
     clusterIndex: number;
-    isModal: boolean;
+    isTruncated: boolean;
 }
+const { cluster, clusterIndex, clusterTitle, isTruncated } = defineProps<ClusterViewProps>()
 
 const NUMBER_OF_ISSUES = 9
 
-const { cluster, clusterIndex, clusterTitle, isModal } = defineProps<ClusterViewProps>()
-
 const issuesStack = computed(() => {
-    return (isModal) ? cluster.issues : cluster.issues.slice(0, NUMBER_OF_ISSUES)
+    return (isTruncated) ?  cluster.issues.slice(0, NUMBER_OF_ISSUES) : cluster.issues
 })
-
 </script>
 
 <template >
@@ -32,7 +30,7 @@ const issuesStack = computed(() => {
                 <div
                     v-for="(issue, index) of issuesStack"
                     :key="index"
-                    class="overflow-hidden h-30 border-solid border-2 border-gray-700 rounded-md bg-shark-500 p-2 "
+                    class="h-30 overflow-hidden border-solid border-2 border-gray-700 rounded-md bg-shark-500 p-2 "
                 >
                     <WindowPaneGithubIssue
                         :key="index"
diff --git a/packages/web/app/components/window-pane/GithubIssue.vue b/packages/web/app/components/window-pane/GithubIssue.vue
index 84e5338b..5cedabb3 100644
--- a/packages/web/app/components/window-pane/GithubIssue.vue
+++ b/packages/web/app/components/window-pane/GithubIssue.vue
@@ -9,74 +9,80 @@ interface GithubIssueProps {
     labels: Array<string | { name: string, color?: string }>;
     updated_at: string;
 }
+const { url, title, owner, repository, number, avgSimilarity, labels, updated_at } = defineProps<GithubIssueProps>()
 
-const UPDATED = 'updated'
+const UPDATED = 'Updated'
 const PERCENT_SIMILAR = '% similar'
-
-const { url, title, owner, repository, number, avgSimilarity, labels, updated_at } = defineProps<GithubIssueProps>()
 </script>
 
 <template>
-  <article class="flex flex-row gap-1 ">
-    <span class="flex-shrink-0 inline-block h-3 i-tabler-circle-dot text-green-500 mt-1" />
-    
-    <div class="issue-fade w-full">
-      <div class="h-22 flex flex-col flex-wrap justify-between">
+  <article class="h-25 flex flex-col issue-fade w-full gap-2 ">
+    <div class="flex gap-1">
+      <span class="h-5 flex-shrink-0 pt-6 i-tabler-circle-dot text-green-500" />
+      
+      <div class="flex flex-col flex-wrap justify-between">        
         <NuxtLink
-          class="line-clamp-1 text-sm text-base no-underline color-current hover:underline"
+          class="line-clamp-1 flex-grow text-md text-base flex-grow-0 no-underline color-current hover:underline"
           :href="url"
           target="_blank"
         >
           {{ title?.trim() }}
         </NuxtLink>
+      </div>
+    </div>
 
-        <div
-          class="line-clamp-1 text-xs text-gray-400 break-words"
+    <div
+      class="flex items-baseline gap-3"
+    >
+      <div
+        class="flex flex-col text-sm gap-2 text-gray-300 text-center"
+      >
+        <NuxtLink
+          v-if="owner && repository"
+          class="w-full line-clamp-1 no-underline hover:underline p-.5 rounded-md border-solid border border-gray-700 bg-gray-700 hover:bg-gray-500 hover:text-gray-200 active:color-white focus:text-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
+          :to="{
+            name: 'owner-repo',
+            params: {
+              owner: owner,
+              repo: repository,
+            },
+          }"
         >
-          <NuxtLink
-            v-if="owner && repository"
-            class="no-underline hover:underline color-current"
-            :to="{
-              name: 'owner-repo',
-              params: {
-                owner: owner,
-                repo: repository,
-              },
-            }"
-          >
-            {{ owner }}/{{ repository }}
-          </NuxtLink>
+          {{ owner }}/{{ repository }}
+        </NuxtLink>
 
-          &middot;
+        <NuxtLink
+          class="w-full line-clamp-1 no-underline hover:underline p-.5 rounded-md border-solid border border-gray-700 bg-gray-700 hover:bg-gray-500 hover:text-gray-200 active:color-white focus:text-gray-200 hover:border-gray-400 active:border-white focus:border-gray-400 transition-colors"
+          :to="owner && repository ? {
+            name: 'owner-repo-issue',
+            params: {
+              owner: owner,
+              repo: repository,
+              issue: number,
+            },
+          } : ''"
+        >
+          {{ Math.floor(avgSimilarity * 100) }}{{ PERCENT_SIMILAR }}
+        </NuxtLink>
+      </div>
+
+      <div
+        class="flex flex-col gap-3"
+      >
+        <div  class="text-sm text-gray-500 ">
           {{ UPDATED }}
 
           <NuxtTime
             :datetime="updated_at"
             relative
           />
-
-          &middot;
-
-          <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) }}{{ PERCENT_SIMILAR }}
-          </NuxtLink>
         </div>
 
-        <div class="flex flex-row gap-1 items-baseline flex-nowrap">
+        <div class="flex flex-row gap-1 flex-nowrap ">
           <span
             v-for="(label, j) of labels"
             :key="j"
-            class="label rounded-full px-2 py-0.5 whitespace-pre border-solid border-1 text-xs inline-block leading-tight"
+            class="label rounded-full px-2 py-.5 whitespace-pre border-solid border-1 text-xs leading-tight"
             :style="labelColors(typeof label === 'string' ? '000000' : label.color || '000000')"
           >
             {{ typeof label === 'string' ? label : label.name }}
@@ -91,16 +97,8 @@ const { url, title, owner, repository, number, avgSimilarity, labels, updated_at
 .issue-fade {
   mask-image: linear-gradient(to right, black 40%, transparent);
   -webkit-mask-image: linear-gradient(to right, black 40%, transparent);
-/*   
-  mask-image: linear-gradient(to right, black 40%, transparent),
-              linear-gradient(to bottom, black 70%, transparent);
-  -webkit-mask-image: linear-gradient(to right, black 40%, transparent),
-                      linear-gradient(to bottom, black 70%, transparent);
-  -webkit-mask-composite: source-over;
-  mask-composite: intersect; */
 }
 
-
 .label {
   --lightness-threshold: 0.6;
   --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
diff --git a/packages/web/app/components/window-pane/SimilarIssuesSummary.vue b/packages/web/app/components/window-pane/SimilarIssuesSummary.vue
new file mode 100644
index 00000000..cada82cd
--- /dev/null
+++ b/packages/web/app/components/window-pane/SimilarIssuesSummary.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+interface SimilarIssuesSummaryProps {
+    issueTitle: string;
+}
+const { issueTitle } = defineProps<SimilarIssuesSummaryProps>()
+
+const SIMILAR_SUMMARY = 'Similar issues - '
+</script>
+
+<template >
+    <section class="h-20 flex p-2 items-baseline gap-2 bg-transparent">
+        <NuxtLink
+          class="bg-transparent color-gray-500 hover:color-gray-300 active:color-white focus:color-gray-300 hover:cursor-pointer no-underline hover:underline transition-colors"
+          @click="$router.back()"
+          aria-label="BackArrow"
+        >
+            <SvgBackArrow class="w-8 h-8" />
+        </NuxtLink>
+
+        <div class="flex gap-1 whitespace-pre">
+            <span class=" p-1 text-blue-500 ">
+                <SvgSimilarIssues class=" w-6 h-6" />
+            </span>
+            <p class="text-2xl text-gray-300 font-bold">{{ SIMILAR_SUMMARY }}</p>
+            <p class="text-2xl text-gray-500 font-bold">{{ issueTitle }}</p>
+        </div>
+    </section>
+</template>
diff --git a/packages/web/app/components/window-pane/SimilarIssuesView.vue b/packages/web/app/components/window-pane/SimilarIssuesView.vue
new file mode 100644
index 00000000..b4fc11fc
--- /dev/null
+++ b/packages/web/app/components/window-pane/SimilarIssuesView.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
+
+interface SimilarIssuesViewProps {
+    issues: IssueMetadata[];    
+}
+const { issues } = defineProps<SimilarIssuesViewProps>()
+</script>
+
+<template >
+        <section
+            class="w-full "
+        >
+            <WindowPaneSimilarIssuesSummary 
+                :issueTitle="issues[0]?.title || 'ISSUE TITLE MISSING'"
+                :style="{
+                    zIndex: issues.length + 1,
+                }"
+            />
+
+            <div class="grid grid-cols-3 grid-rows-3 gap-4 ">
+                <div
+                    v-for="(issue, index) of issues"
+                    :key="index"
+                    :style="{
+                        zIndex: issues.length - index,
+                    }"
+                    class="h-30 overflow-hidden border-solid border-2 border-gray-700 rounded-md bg-shark-500 p-2"
+                >
+                    <WindowPaneGithubIssue
+                        :key="index"
+                        :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"
+                    />
+                </div>
+            </div>
+        </section>
+</template>
diff --git a/packages/web/app/composables/fetch-similar.ts b/packages/web/app/composables/fetch-similar.ts
new file mode 100644
index 00000000..04f8d9c6
--- /dev/null
+++ b/packages/web/app/composables/fetch-similar.ts
@@ -0,0 +1,10 @@
+import type { IssueMetadata } from '~~/shared/models/github-metadata'
+
+export function useFetchSimilar(owner: string, repo: string, issue: string) {
+  return useFetch<IssueMetadata[]>(`/api/similarity/${owner}/${repo}/${issue}`, {
+    key: 'similar',
+    baseURL: useRuntimeConfig().public.remote,
+    transform: data => data.filter((issue): issue is NonNullable<IssueMetadata> => !!(issue?.url)),
+    default: () => [],
+  })
+}
diff --git a/packages/web/app/composables/selected-view.ts b/packages/web/app/composables/selected-view.ts
index 80aab1e8..1fa6af12 100644
--- a/packages/web/app/composables/selected-view.ts
+++ b/packages/web/app/composables/selected-view.ts
@@ -1,7 +1,7 @@
 export type ViewToggleState =
   'PaperStack' |
-  'WindowPane' |
-  'BookShelf'
+  'BookShelf' |
+  'WindowPane'
 
 const selectedView = ref<ViewToggleState>('PaperStack')
 
diff --git a/packages/web/app/pages/[owner]/[repo]/[issue].vue b/packages/web/app/pages/[owner]/[repo]/[issue].vue
index 85ca27c7..f6939570 100644
--- a/packages/web/app/pages/[owner]/[repo]/[issue].vue
+++ b/packages/web/app/pages/[owner]/[repo]/[issue].vue
@@ -5,52 +5,14 @@ useSeoMeta({
   title: () => `Similar issues - #${route.params.issue} - ${route.params.owner}/${route.params.repo}`
 })
 
-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)),
-})
+
+const { data: issues, status } = useFetchSimilar(route.params.owner, route.params.repo, route.params.issue)
 </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 my-4 font-bold text-2xl">
-        <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 my-4 font-bold text-2xl">
-        <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>
+  <section :style="{ '--section-index': 1 }">
+      <SimilarIssuesViewLayout :issues="issues" :status="status" />
+  </section>
 </template>
 
 <style scoped>
diff --git a/packages/web/app/pages/[owner]/[repo]/index.vue b/packages/web/app/pages/[owner]/[repo]/index.vue
index ee2e91f2..fea442af 100644
--- a/packages/web/app/pages/[owner]/[repo]/index.vue
+++ b/packages/web/app/pages/[owner]/[repo]/index.vue
@@ -19,6 +19,9 @@ const refreshClusters = () => refresh()
 </script>
 
 <template>
+  <section
+      :style="{ '--section-index': 0 }"
+    >
       <CommandConsole 
         :allowedRepos="allowedRepos" 
         :status="status" 
@@ -35,4 +38,11 @@ const refreshClusters = () => refresh()
         :clusters="clusters" 
         :status="status" 
       />
+      </section>
 </template>
+
+<style scoped>
+section:first-of-type {
+  view-transition-name: var(--section-index);
+}
+</style>
\ No newline at end of file

From 29ed19845e73557bc9b3c37ef85ce7c43d5bcdab Mon Sep 17 00:00:00 2001
From: Brandon Hurrington <brandon.hurrington@lotto24.de>
Date: Fri, 2 May 2025 16:16:56 +0000
Subject: [PATCH 12/12] feat(web): Removed redundant props

---
 packages/web/app/components/CommandConsole.vue            | 1 +
 packages/web/app/components/RepoViewToggle.vue            | 3 +++
 packages/web/app/components/book-shelf/ClusterAction.vue  | 2 +-
 packages/web/app/components/book-shelf/ClusterLayout.vue  | 2 +-
 packages/web/app/components/book-shelf/ClusterView.vue    | 6 ++----
 packages/web/app/components/paper-stack/ClusterAction.vue | 2 +-
 packages/web/app/components/paper-stack/ClusterLayout.vue | 3 +--
 packages/web/app/components/paper-stack/ClusterView.vue   | 6 ++----
 packages/web/app/components/window-pane/ClusterAction.vue | 2 +-
 packages/web/app/components/window-pane/ClusterLayout.vue | 2 +-
 packages/web/app/components/window-pane/ClusterView.vue   | 6 ++----
 11 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/packages/web/app/components/CommandConsole.vue b/packages/web/app/components/CommandConsole.vue
index 80bc4fab..257b55da 100644
--- a/packages/web/app/components/CommandConsole.vue
+++ b/packages/web/app/components/CommandConsole.vue
@@ -49,6 +49,7 @@ function navigateToRepo(event: Event) {
         </button>
       </div>
     <!-- TODO: Improve select button styling, maybe a full component -->
+    <!-- TODO: Use - https://developer.chrome.com/blog/a-customizable-select -->
       <label class="w-full text-xs border-solid border border-gray-600 rounded-md flex flex-row items-center relative">
         <span class="sr-only">{{ PICK_A_REPOSITORY }}</span>
         <select
diff --git a/packages/web/app/components/RepoViewToggle.vue b/packages/web/app/components/RepoViewToggle.vue
index 1d46d787..d9732780 100644
--- a/packages/web/app/components/RepoViewToggle.vue
+++ b/packages/web/app/components/RepoViewToggle.vue
@@ -4,6 +4,9 @@ const { selectedView, toggleViewState, } = useSelectedView()
 
 </script>
 
+  <!-- TODO: Could this be more performant using? -->
+  <!-- TODO: https://developer.chrome.com/blog/carousels-with-css -->
+
 <template>
     <section class="flex gap-2 items-center p-2 border-solid border border-gray-700 rounded-sm bg-slate-700">
         <button
diff --git a/packages/web/app/components/book-shelf/ClusterAction.vue b/packages/web/app/components/book-shelf/ClusterAction.vue
index e3875a64..2eee1880 100644
--- a/packages/web/app/components/book-shelf/ClusterAction.vue
+++ b/packages/web/app/components/book-shelf/ClusterAction.vue
@@ -35,7 +35,7 @@ const openModal = () => modalRef.value?.openModal()
                 <ClusterViewModal ref="modalRef" :cluster="cluster">
                     <template #modal-content>
                         <ClientOnly>
-                            <BookShelfClusterView :cluster="cluster" :clusterIndex="clusterIndex" :clusterTitle="cluster.title" :isTruncated="false" />
+                            <BookShelfClusterView :cluster="cluster" :clusterIndex="clusterIndex" :isTruncated="false" />
                         </ClientOnly>
                     </template>
                 </ClusterViewModal>
diff --git a/packages/web/app/components/book-shelf/ClusterLayout.vue b/packages/web/app/components/book-shelf/ClusterLayout.vue
index 3ac2db64..aeac9fe8 100644
--- a/packages/web/app/components/book-shelf/ClusterLayout.vue
+++ b/packages/web/app/components/book-shelf/ClusterLayout.vue
@@ -14,7 +14,7 @@ const { clusters } = defineProps<ClusterLayoutProps>()
         :key="index"
         class=" flex flex-col gap-4 justify-between p-4 rounded-md border-solid border border-gray-700 columns-1 border-b-solid"
     >
-        <BookShelfClusterView :cluster="cluster" :clusterIndex="index" :clusterTitle="cluster.title" :isTruncated="true"/>
+        <BookShelfClusterView :cluster="cluster" :clusterIndex="index" :isTruncated="true"/>
 
         <BookShelfClusterAction :cluster="cluster" :clusterIndex="index" :clusterLength="cluster.issues.length || 0" />
     </section>
diff --git a/packages/web/app/components/book-shelf/ClusterView.vue b/packages/web/app/components/book-shelf/ClusterView.vue
index 4145224a..7934d155 100644
--- a/packages/web/app/components/book-shelf/ClusterView.vue
+++ b/packages/web/app/components/book-shelf/ClusterView.vue
@@ -3,11 +3,10 @@ import type { ClusterMetadata, IssueMetadata } from '~~/shared/models/github-met
 
 interface ClusterViewProps {
     cluster: ClusterMetadata;
-    clusterTitle: string;
     clusterIndex: number;
     isTruncated: boolean;
 }
-const { cluster, clusterIndex, clusterTitle, isTruncated } = defineProps<ClusterViewProps>()
+const { cluster, clusterIndex, isTruncated } = defineProps<ClusterViewProps>()
 
 const NUMBER_OF_ISSUES = 5
 
@@ -23,13 +22,12 @@ const issuesStack = computed(() => {
             <BookShelfClusterSummary 
                 :clusterIndex="clusterIndex" 
                 :clusterLength="cluster.issues.length" 
-                :clusterTitle="clusterTitle"
+                :clusterTitle="cluster.title"
             />
 
             <div class="flex flex-col gap-4 columns-1">
                 <div
                     v-for="(issue, index) of issuesStack"
-                    :key="index"
                     class="h-30 overflow-hidden border-solid border-2 border-gray-700 rounded-md bg-shark-500 p-2 "
                 >
                     <BookShelfGithubIssue
diff --git a/packages/web/app/components/paper-stack/ClusterAction.vue b/packages/web/app/components/paper-stack/ClusterAction.vue
index d1653a75..0737172c 100644
--- a/packages/web/app/components/paper-stack/ClusterAction.vue
+++ b/packages/web/app/components/paper-stack/ClusterAction.vue
@@ -33,7 +33,7 @@ const openModal = () => modalRef.value?.openModal()
                 <ClusterViewModal ref="modalRef" :cluster="cluster">
                     <template #modal-content>
                         <ClientOnly>
-                            <PaperStackClusterView :cluster="cluster" :clusterIndex="clusterIndex" :clusterTitle="cluster.title" :isTruncated="false" />
+                            <PaperStackClusterView :cluster="cluster" :clusterIndex="clusterIndex" :isTruncated="false" />
                         </ClientOnly>
                     </template>
                 </ClusterViewModal>
diff --git a/packages/web/app/components/paper-stack/ClusterLayout.vue b/packages/web/app/components/paper-stack/ClusterLayout.vue
index f0cdad1c..7ddd060b 100644
--- a/packages/web/app/components/paper-stack/ClusterLayout.vue
+++ b/packages/web/app/components/paper-stack/ClusterLayout.vue
@@ -7,7 +7,6 @@ interface ClusterLayoutProps {
 }
 
 const { clusters } = defineProps<ClusterLayoutProps>()
-
 </script>
 
 <template >
@@ -15,7 +14,7 @@ const { clusters } = defineProps<ClusterLayoutProps>()
         v-for="(cluster, index) of clusters" 
         :key="index"
     >
-        <PaperStackClusterView :cluster="cluster" :clusterIndex="index" :clusterTitle="cluster.title" :isTruncated="true"/>
+        <PaperStackClusterView :cluster="cluster" :clusterIndex="index" :isTruncated="true"/>
 
         <PaperStackClusterAction :cluster="cluster" :clusterIndex="index" :clusterLength="cluster.issues.length || 0" />
     </section>
diff --git a/packages/web/app/components/paper-stack/ClusterView.vue b/packages/web/app/components/paper-stack/ClusterView.vue
index fb932c74..9147d9dd 100644
--- a/packages/web/app/components/paper-stack/ClusterView.vue
+++ b/packages/web/app/components/paper-stack/ClusterView.vue
@@ -3,11 +3,10 @@ import type { ClusterMetadata } from '~~/shared/models/github-metadata'
 
 interface ClusterViewProps {
     cluster: ClusterMetadata;
-    clusterTitle: string;
     clusterIndex: number;
     isTruncated: boolean;
 }
-const { cluster, clusterIndex, clusterTitle, isTruncated } = defineProps<ClusterViewProps>()
+const { cluster, clusterIndex, isTruncated } = defineProps<ClusterViewProps>()
 
 const NUMBER_OF_ISSUES = 3
 
@@ -25,7 +24,7 @@ const issuesStack = computed(() => {
             <PaperStackClusterSummary 
                 :clusterIndex="clusterIndex" 
                 :clusterLength="cluster.issues.length" 
-                :clusterTitle="clusterTitle"
+                :clusterTitle="cluster.title"
                 :style="{
                     zIndex: cluster.issues.length + 1,
                 }"
@@ -33,7 +32,6 @@ const issuesStack = computed(() => {
 
             <div
                 v-for="(issue, index) of issuesStack"
-                :key="index"
                 :style="{
                     zIndex: cluster.issues.length - index,
                 }"
diff --git a/packages/web/app/components/window-pane/ClusterAction.vue b/packages/web/app/components/window-pane/ClusterAction.vue
index 5a3e41e8..31e74619 100644
--- a/packages/web/app/components/window-pane/ClusterAction.vue
+++ b/packages/web/app/components/window-pane/ClusterAction.vue
@@ -35,7 +35,7 @@ const openModal = () => modalRef.value?.openModal()
                 <ClusterViewModal ref="modalRef" :cluster="cluster">
                     <template #modal-content>
                         <ClientOnly>
-                            <WindowPaneClusterView :cluster="cluster" :clusterIndex="clusterIndex" :clusterTitle="cluster.title" :isTruncated="false" />
+                            <WindowPaneClusterView :cluster="cluster" :clusterIndex="clusterIndex" :isTruncated="false" />
                         </ClientOnly>
                     </template>
                 </ClusterViewModal>
diff --git a/packages/web/app/components/window-pane/ClusterLayout.vue b/packages/web/app/components/window-pane/ClusterLayout.vue
index c9451540..1bbc58e8 100644
--- a/packages/web/app/components/window-pane/ClusterLayout.vue
+++ b/packages/web/app/components/window-pane/ClusterLayout.vue
@@ -14,7 +14,7 @@ const { clusters } = defineProps<ClusterLayoutProps>()
         :key="index"
         class=" flex flex-col gap-4 justify-between p-4 rounded-md border-solid border border-gray-700 columns-1 border-b-solid"
     >
-        <WindowPaneClusterView :cluster="cluster" :clusterIndex="index" :clusterTitle="cluster.title" :isTruncated="true"/>
+        <WindowPaneClusterView :cluster="cluster" :clusterIndex="index" :isTruncated="true"/>
 
         <WindowPaneClusterAction :cluster="cluster" :clusterIndex="index" :clusterLength="cluster.issues.length || 0" />
     </section>
diff --git a/packages/web/app/components/window-pane/ClusterView.vue b/packages/web/app/components/window-pane/ClusterView.vue
index d71481d5..91675d6d 100644
--- a/packages/web/app/components/window-pane/ClusterView.vue
+++ b/packages/web/app/components/window-pane/ClusterView.vue
@@ -3,11 +3,10 @@ import type { ClusterMetadata } from '~~/shared/models/github-metadata'
 
 interface ClusterViewProps {
     cluster: ClusterMetadata;
-    clusterTitle: string;
     clusterIndex: number;
     isTruncated: boolean;
 }
-const { cluster, clusterIndex, clusterTitle, isTruncated } = defineProps<ClusterViewProps>()
+const { cluster, clusterIndex, isTruncated } = defineProps<ClusterViewProps>()
 
 const NUMBER_OF_ISSUES = 9
 
@@ -23,13 +22,12 @@ const issuesStack = computed(() => {
             <WindowPaneClusterSummary 
                 :clusterIndex="clusterIndex" 
                 :clusterLength="cluster.issues.length" 
-                :clusterTitle="clusterTitle"
+                :clusterTitle="cluster.title"
             />
 
             <div class="grid grid-cols-3 grid-rows-3 gap-4 ">
                 <div
                     v-for="(issue, index) of issuesStack"
-                    :key="index"
                     class="h-30 overflow-hidden border-solid border-2 border-gray-700 rounded-md bg-shark-500 p-2 "
                 >
                     <WindowPaneGithubIssue