From bdb78d42b638391018048e3c23193ddc407ad481 Mon Sep 17 00:00:00 2001
From: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org>
Date: Sat, 8 Feb 2025 13:52:03 +0000
Subject: [PATCH] [v10.0/forgejo] ui: update language stats layout and click
 behavior (#6854)

**Backport:** https://codeberg.org/forgejo/forgejo/pulls/6700

Fix regression of https://codeberg.org/forgejo/forgejo/pulls/6344. It was reported by @Beowulf.

JS toggle [used](https://codeberg.org/forgejo/forgejo/src/commit/49c5102b40d95232a9efb1075407951f09ba782f/templates/repo/sub_menu.tmpl#L38) a selector which was broken by that PR, which caused the legend to appear separately instead of replacing the primary repo info.

## Changes

* use clear IDs `language-stats-bar` and `language-stats-legend`
* add simple e2e test

Instead of restoring the previous behavior, I moved the legend under the stats bar. To me it didn't make a lot of sense in the first place to replace the information in the primary bar with with completely different information. It did not save much space either.

Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6854
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org>
Co-committed-by: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org>
---
 templates/repo/sub_menu.tmpl | 12 ++++++------
 tests/e2e/repo-home.e2e.ts   | 19 +++++++++++++++++++
 web_src/css/repo.css         |  5 +++--
 3 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 tests/e2e/repo-home.e2e.ts

diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl
index 598cfc5c80..ee1b959a7c 100644
--- a/templates/repo/sub_menu.tmpl
+++ b/templates/repo/sub_menu.tmpl
@@ -20,7 +20,12 @@
 		{{end}}
 	</div>
 	{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats}}
-	<div class="ui segment sub-menu language-stats-details tw-hidden">
+	<a class="ui segment show-panel toggle" id="language-stats-bar" data-panel="#language-stats-legend">
+		{{range .LanguageStats}}
+		<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}} data-tooltip-follow-cursor="horizontal"></div>
+		{{end}}
+	</a>
+	<div class="ui segment sub-menu tw-hidden" id="language-stats-legend">
 		{{range .LanguageStats}}
 		<div class="item">
 			<i class="color-icon" style="background-color: {{.Color}}"></i>
@@ -35,11 +40,6 @@
 		</div>
 		{{end}}
 	</div>
-	<a class="ui segment language-stats show-panel toggle" data-panel=".repository-summary > .sub-menu">
-		{{range .LanguageStats}}
-		<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}} data-tooltip-follow-cursor="horizontal"></div>
-		{{end}}
-	</a>
 	{{end}}
 </div>
 {{end}}
diff --git a/tests/e2e/repo-home.e2e.ts b/tests/e2e/repo-home.e2e.ts
new file mode 100644
index 0000000000..fbcfe17226
--- /dev/null
+++ b/tests/e2e/repo-home.e2e.ts
@@ -0,0 +1,19 @@
+// @watch start
+// web_src/js/features/common-global.js
+// web_src/css/repo.css
+// @watch end
+
+import {expect} from '@playwright/test';
+import {save_visual, test} from './utils_e2e.ts';
+
+test('Language stats bar', async ({page}) => {
+  const response = await page.goto('/user2/repo1');
+  expect(response?.status()).toBe(200);
+
+  await expect(page.locator('#language-stats-legend')).toBeVisible();
+  await save_visual(page);
+
+  await page.click('#language-stats-bar');
+  await expect(page.locator('#language-stats-legend')).toBeHidden();
+  await save_visual(page);
+});
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index d6faa4b2a7..dd7e2754b5 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2046,13 +2046,14 @@ details.repo-search-result summary::marker {
   font-weight: var(--font-weight-medium);
 }
 
-.repository .repository-summary .segment.language-stats {
+.repository .repository-summary #language-stats-bar {
   display: flex;
   gap: 2px;
   padding: 0;
   height: 10px;
   white-space: nowrap;
-  border-radius: 0 0 3px 3px !important;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
   overflow: hidden;
 }