ui: update language stats layout and click behavior (#6700)

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6700
Reviewed-by: Michael Kriese <[e-mail]>
Reviewed-by: Beowulf <[e-mail]>
Reviewed-by: Gusted <[e-mail]>

templates/repo/sub_menu.tmpl

···
 		{{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>
···
 		</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}}

tests/e2e/repo-home.e2e.ts

···
+// @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);
+});

web_src/css/repo.css

···
   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;
 }