From 111a2af573bad5e22143ccfba4df17d2682f09d3 Mon Sep 17 00:00:00 2001
From: rob thijssen <grenade@rob.tn>
Date: Wed, 6 May 2026 07:13:41 +0300
Subject: [PATCH] feat(ui): language distribution bar on project cards

Extract LanguageBar into a shared component used by both DashPage
(compact, bar only) and ProjectPage (full, with percentage labels).
Remove redundant forge source text from project cards since the
forge icon already indicates it.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/components/LanguageBar.tsx | 35 +++++++++++++++++++++++++++++++
 ui/src/pages/DashPage.tsx         | 28 +++++++++++--------------
 ui/src/pages/ProjectPage.tsx      | 32 ++--------------------------
 3 files changed, 49 insertions(+), 46 deletions(-)
 create mode 100644 ui/src/components/LanguageBar.tsx

diff --git a/ui/src/components/LanguageBar.tsx b/ui/src/components/LanguageBar.tsx
new file mode 100644
index 0000000..af18af8
--- /dev/null
+++ b/ui/src/components/LanguageBar.tsx
@@ -0,0 +1,35 @@
+export function LanguageBar({ languages, colorMap, compact }: {
+  languages: Record<string, number>;
+  colorMap: Record<string, string>;
+  compact?: boolean;
+}) {
+  const total = Object.values(languages).reduce((a, b) => a + b, 0);
+  if (total === 0) return null;
+
+  const sorted = Object.entries(languages).sort(([, a], [, b]) => b - a);
+
+  return (
+    <div className={compact ? 'mb-1' : 'mt-2'}>
+      <div className="language-bar">
+        {sorted.map(([lang, bytes]) => (
+          <div
+            key={lang}
+            className="language-bar-segment"
+            style={{ width: `${(bytes / total) * 100}%`, backgroundColor: colorMap[lang] ?? '#8b8b8b' }}
+            title={`${lang} ${((bytes / total) * 100).toFixed(1)}%`}
+          />
+        ))}
+      </div>
+      {!compact && (
+        <div className="d-flex flex-wrap gap-2 mt-1" style={{ fontSize: '0.75rem' }}>
+          {sorted.slice(0, 8).map(([lang, bytes]) => (
+            <span key={lang}>
+              <span className="language-dot" style={{ backgroundColor: colorMap[lang] ?? '#8b8b8b' }} />
+              {lang} {((bytes / total) * 100).toFixed(1)}%
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/ui/src/pages/DashPage.tsx b/ui/src/pages/DashPage.tsx
index dad7932..1629e34 100644
--- a/ui/src/pages/DashPage.tsx
+++ b/ui/src/pages/DashPage.tsx
@@ -5,6 +5,7 @@ import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 
 import { fetchProjects, fetchRepoLanguages, type ProjectSummary } from '../api/client';
+import { LanguageBar } from '../components/LanguageBar';
 import { ContributionGraph, AllTimeGraph } from '../components/ContributionGraph';
 import { LanguageStreamGraph } from '../components/LanguageStreamGraph';
 
@@ -31,6 +32,14 @@ export function DashPage() {
     return map;
   }, [langsQ.data]);
 
+  const langColors = useMemo(() => {
+    const map: Record<string, string> = {};
+    for (const e of langsQ.data ?? []) {
+      if (e.color && !map[e.language]) map[e.language] = e.color;
+    }
+    return map;
+  }, [langsQ.data]);
+
   const projects = projectsQ.data ?? [];
   const ranked = rankProjects(projects);
 
@@ -54,7 +63,7 @@ export function DashPage() {
       <Row xs={1} md={2} lg={3} className="g-3">
         {ranked.map((p) => (
           <Col key={`${p.source}:${p.repo}`}>
-            <ProjectCard project={p} langs={langsByRepo.get(`${p.source}:${p.repo}`) ?? null} />
+            <ProjectCard project={p} langs={langsByRepo.get(`${p.source}:${p.repo}`) ?? null} colorMap={langColors} />
           </Col>
         ))}
       </Row>
@@ -62,17 +71,12 @@ export function DashPage() {
   );
 }
 
-function ProjectCard({ project: p, langs }: { project: ProjectSummary; langs: Record<string, number> | null }) {
-  const topLangs = langs ? topLanguages(langs, 3) : null;
-
+function ProjectCard({ project: p, langs, colorMap }: { project: ProjectSummary; langs: Record<string, number> | null; colorMap: Record<string, string> }) {
   return (
     <Link to={`/project/${p.source}/${p.repo}`} className="text-decoration-none">
       <div className="project-card p-3">
         <h5 className="mb-1"><img src={forgeIcon(p.source)} alt={p.source} className="forge-icon" />{p.repo}</h5>
-        <small className="text-muted d-block mb-2">
-          {p.source}
-          {topLangs && ` · ${topLangs}`}
-        </small>
+        {langs && <LanguageBar languages={langs} colorMap={colorMap} compact />}
         <div className="d-flex gap-3" style={{ fontSize: '0.8rem' }}>
           {p.commit_count > 0 && <span>{p.commit_count} commits</span>}
           {p.issue_count > 0 && <span>{p.issue_count} issues</span>}
@@ -95,14 +99,6 @@ function forgeIcon(source: string): string {
   }
 }
 
-function topLanguages(langs: Record<string, number>, n: number): string {
-  return Object.entries(langs)
-    .sort(([, a], [, b]) => b - a)
-    .slice(0, n)
-    .map(([lang]) => lang.toLowerCase())
-    .join(', ');
-}
-
 function formatRange(first: string | null, last: string | null): string {
   const fmt = (iso: string) =>
     new Date(iso).toLocaleDateString('en-GB', { month: 'short', year: 'numeric' }).toLowerCase();
diff --git a/ui/src/pages/ProjectPage.tsx b/ui/src/pages/ProjectPage.tsx
index 490e0ff..a0be294 100644
--- a/ui/src/pages/ProjectPage.tsx
+++ b/ui/src/pages/ProjectPage.tsx
@@ -7,6 +7,7 @@ import ReactMarkdown from 'react-markdown';
 import { VerticalTimeline } from 'react-vertical-timeline-component';
 
 import { fetchEvents, fetchReadme, fetchRepoLanguages, fetchProjects, type Source } from '../api/client';
+import { LanguageBar } from '../components/LanguageBar';
 import { TimelineEntry } from '../components/TimelineEntry';
 
 export function ProjectPage() {
@@ -73,7 +74,7 @@ export function ProjectPage() {
       <Row className="mb-3">
         <Col>
           <h2><a href={repoUrl(source ?? '', host, repo)} target="_blank" rel="noopener noreferrer"><img src={forgeIcon(source ?? '')} alt={source} className="forge-icon" style={{ width: 24, height: 24 }} /></a>{repo}</h2>
-          {langs && <LanguageBar languages={langs} colorMap={langColors} />}
+          {langs && <LanguageBar languages={langs} colorMap={langColors}  />}
         </Col>
       </Row>
 
@@ -125,32 +126,3 @@ function forgeIcon(source: string): string {
   }
 }
 
-function LanguageBar({ languages, colorMap }: { languages: Record<string, number>; colorMap: Record<string, string> }) {
-  const total = Object.values(languages).reduce((a, b) => a + b, 0);
-  if (total === 0) return null;
-
-  const sorted = Object.entries(languages).sort(([, a], [, b]) => b - a);
-
-  return (
-    <div className="mt-2">
-      <div className="language-bar">
-        {sorted.map(([lang, bytes]) => (
-          <div
-            key={lang}
-            className="language-bar-segment"
-            style={{ width: `${(bytes / total) * 100}%`, backgroundColor: colorMap[lang] ?? '#8b8b8b' }}
-            title={`${lang} ${((bytes / total) * 100).toFixed(1)}%`}
-          />
-        ))}
-      </div>
-      <div className="d-flex flex-wrap gap-2 mt-1" style={{ fontSize: '0.75rem' }}>
-        {sorted.slice(0, 8).map(([lang, bytes]) => (
-          <span key={lang}>
-            <span className="language-dot" style={{ backgroundColor: colorMap[lang] ?? '#8b8b8b' }} />
-            {lang} {((bytes / total) * 100).toFixed(1)}%
-          </span>
-        ))}
-      </div>
-    </div>
-  );
-}