From c6c77c6903c411943160deed0440372b30ddf6d2 Mon Sep 17 00:00:00 2001
From: BrookJeynes <jeynesbrook@gmail.com>
Date: Tue, 3 Jun 2025 00:33:03 +1000
Subject: [PATCH] appview/pages: add languages to repo index; show name and
 percentage on hover

This commit adds languages with their associated colour just below the
tabs on the repo index page. Hovering over the colours will display the
language name and file percentage within the repo.

Signed-off-by: BrookJeynes <jeynesbrook@gmail.com>
---
 appview/pages/templates/layouts/repobase.html | 49 ++++++++++---------
 appview/pages/templates/repo/index.html       | 14 ++++++
 2 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/appview/pages/templates/layouts/repobase.html b/appview/pages/templates/layouts/repobase.html
index ef6f4b40..940df809 100644
--- a/appview/pages/templates/layouts/repobase.html
+++ b/appview/pages/templates/layouts/repobase.html
@@ -1,29 +1,32 @@
 {{ define "title" }}{{ .RepoInfo.FullName }}{{ end }}
 
 {{ define "content" }}
-<section id="repo-header" class="mb-4 py-2 px-6 dark:text-white">
-  {{ if .RepoInfo.Source }}
-  <p class="text-sm">
-  <div class="flex items-center">
-      {{ i "git-fork" "w-3 h-3 mr-1"}}
-      forked from
-      {{ $sourceOwner := didOrHandle .RepoInfo.Source.Did .RepoInfo.SourceHandle  }}
-      <a class="ml-1 underline" href="/{{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}">{{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}</a>
-  </div>
-  </p>
-  {{ end }}
-  <div class="text-lg flex items-center justify-between">
-    <div>
-      <a href="/{{ .RepoInfo.OwnerWithAt }}">{{ .RepoInfo.OwnerWithAt }}</a>
-      <span class="select-none">/</span>
-      <a href="/{{ .RepoInfo.FullName }}" class="font-bold">{{ .RepoInfo.Name }}</a>
-    </div>
+    <section id="repo-header" class="mb-4 py-2 px-6 dark:text-white">
+      {{ if .RepoInfo.Source }}
+      <p class="text-sm">
+      <div class="flex items-center">
+          {{ i "git-fork" "w-3 h-3 mr-1"}}
+          forked from
+          {{ $sourceOwner := didOrHandle .RepoInfo.Source.Did .RepoInfo.SourceHandle  }}
+          <a class="ml-1 underline" href="/{{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}">{{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}</a>
+      </div>
+      </p>
+      {{ end }}
+      <div class="text-lg flex items-center justify-between">
+        <div>
+          <a href="/{{ .RepoInfo.OwnerWithAt }}">{{ .RepoInfo.OwnerWithAt }}</a>
+          <span class="select-none">/</span>
+          <a href="/{{ .RepoInfo.FullName }}" class="font-bold">{{ .RepoInfo.Name }}</a>
+        </div>
 
-    {{ template "repo/fragments/repoActions" .RepoInfo }}
-  </div>
-  {{ template "repo/fragments/repoDescription" . }}
-</section>
-    <section class="min-h-screen flex flex-col drop-shadow-sm">
+        {{ template "repo/fragments/repoActions" .RepoInfo }}
+      </div>
+      {{ template "repo/fragments/repoDescription" . }}
+    </section>
+
+    <section
+        class="min-h-screen w-full flex flex-col drop-shadow-sm"
+    >
         <nav class="w-full pl-4 overflow-auto">
             <div class="flex z-60">
                 {{ $activeTabStyles := "-mb-px bg-white dark:bg-gray-800" }}
@@ -61,7 +64,7 @@
             </div>
         </nav>
         <section
-            class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto drop-shadow-sm dark:text-white"
+            class="bg-white dark:bg-gray-800 p-6 rounded relative w-full drop-shadow-sm dark:text-white"
         >
             {{ block "repoContent" . }}{{ end }}
         </section>
diff --git a/appview/pages/templates/repo/index.html b/appview/pages/templates/repo/index.html
index a883f23f..1e854107 100644
--- a/appview/pages/templates/repo/index.html
+++ b/appview/pages/templates/repo/index.html
@@ -7,9 +7,23 @@
     {{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo) }}
 {{ end }}
 
+{{ define "repoLanguages" }}
+    <div class="flex gap-[3px] -m-6 mb-6 overflow-hidden rounded-t">
+        {{ range $value := .Languages }}
+            <div
+                title="{{ $value.Name }} {{ printf "%.1f" $value.Percentage }}%"
+                class="h-2"
+                style="background-color: {{ $value.Color }}; width: {{ $value.Percentage }}%"
+            ></div>
+        {{ end }}
+    </div>
+{{ end }}
 
 {{ define "repoContent" }}
     <main>
+        {{ if .Languages }}
+            {{ block "repoLanguages" . }}{{ end }}
+        {{ end }}
         <div class="flex items-center justify-between pb-5">
           {{ block "branchSelector" . }}{{ end }}
           <div class="flex md:hidden items-center gap-4">
-- 
2.51.2