From c9aa9068b32f3242ed0f0efdb7955470a5b38648 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 19 Apr 2025 16:43:22 +0800
Subject: [PATCH] Fix various UI problems (#34243)

Also fix #34242
---
 templates/repo/diff/conversation.tmpl          | 18 ++++++++----------
 .../repo/issue/view_content/conversation.tmpl  |  4 ++--
 templates/repo/wiki/revision.tmpl              | 12 ++++++------
 templates/repo/wiki/view.tmpl                  |  2 +-
 web_src/css/base.css                           |  1 +
 web_src/css/markup/content.css                 | 14 --------------
 web_src/css/modules/button.css                 |  8 ++++++++
 web_src/css/modules/tippy.css                  |  4 ++++
 web_src/css/repo.css                           | 12 ++++++------
 web_src/css/review.css                         | 13 -------------
 web_src/js/features/repo-code.ts               |  8 ++------
 web_src/js/utils/dom.ts                        |  6 +++++-
 12 files changed, 43 insertions(+), 59 deletions(-)

diff --git a/templates/repo/diff/conversation.tmpl b/templates/repo/diff/conversation.tmpl
index 1468761176..eb2abfa7e9 100644
--- a/templates/repo/diff/conversation.tmpl
+++ b/templates/repo/diff/conversation.tmpl
@@ -8,9 +8,9 @@
 	{{$referenceUrl := printf "%s#%s" $.Issue.Link $comment.HashTag}}
 	<div class="conversation-holder" data-path="{{$comment.TreePath}}" data-side="{{if lt $comment.Line 0}}left{{else}}right{{end}}" data-idx="{{$comment.UnsignedLine}}">
 		{{if $resolved}}
-			<div class="ui attached header resolved-placeholder tw-flex tw-items-center tw-justify-between">
-				<div class="ui grey text tw-flex tw-items-center tw-flex-wrap tw-gap-1">
-					{{svg "octicon-check" 16 "icon tw-mr-1"}}
+			<div class="resolved-placeholder">
+				<div class="flex-text-block tw-flex-wrap grey text">
+					{{svg "octicon-check"}}
 					<b>{{$resolveDoer.Name}}</b> {{ctx.Locale.Tr "repo.issues.review.resolved_by"}}
 					{{if $invalid}}
 						<!--
@@ -22,14 +22,12 @@
 						</a>
 					{{end}}
 				</div>
-				<div class="tw-flex tw-items-center tw-gap-2">
-					<button id="show-outdated-{{$comment.ID}}" data-comment="{{$comment.ID}}" class="ui tiny labeled button show-outdated tw-flex tw-items-center">
-						{{svg "octicon-unfold" 16 "tw-mr-2"}}
-						{{ctx.Locale.Tr "repo.issues.review.show_resolved"}}
+				<div class="flex-text-block">
+					<button id="show-outdated-{{$comment.ID}}" data-comment="{{$comment.ID}}" class="btn tiny show-outdated">
+						{{svg "octicon-unfold" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.issues.review.show_resolved"}}
 					</button>
-					<button id="hide-outdated-{{$comment.ID}}" data-comment="{{$comment.ID}}" class="ui tiny labeled button hide-outdated tw-flex tw-items-center tw-hidden">
-						{{svg "octicon-fold" 16 "tw-mr-2"}}
-						{{ctx.Locale.Tr "repo.issues.review.hide_resolved"}}
+					<button id="hide-outdated-{{$comment.ID}}" data-comment="{{$comment.ID}}" class="btn tiny hide-outdated tw-hidden">
+						{{svg "octicon-fold" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.issues.review.hide_resolved"}}
 					</button>
 				</div>
 			</div>
diff --git a/templates/repo/issue/view_content/conversation.tmpl b/templates/repo/issue/view_content/conversation.tmpl
index 6eb0e21953..aa94a2dbc4 100644
--- a/templates/repo/issue/view_content/conversation.tmpl
+++ b/templates/repo/issue/view_content/conversation.tmpl
@@ -17,7 +17,7 @@
 			</div>
 			<div>
 				{{if or $invalid $resolved}}
-					<button id="show-outdated-{{$comment.ID}}" data-comment="{{$comment.ID}}" class="{{if not $resolved}}tw-hidden {{end}}ui compact labeled button show-outdated tw-flex tw-items-center">
+					<button id="show-outdated-{{$comment.ID}}" data-comment="{{$comment.ID}}" class="{{if not $resolved}}tw-hidden{{end}} btn tiny show-outdated">
 						{{svg "octicon-unfold" 16 "tw-mr-2"}}
 						{{if $resolved}}
 							{{ctx.Locale.Tr "repo.issues.review.show_resolved"}}
@@ -25,7 +25,7 @@
 							{{ctx.Locale.Tr "repo.issues.review.show_outdated"}}
 						{{end}}
 					</button>
-					<button id="hide-outdated-{{$comment.ID}}" data-comment="{{$comment.ID}}" class="{{if $resolved}}tw-hidden {{end}}ui compact labeled button hide-outdated tw-flex tw-items-center">
+					<button id="hide-outdated-{{$comment.ID}}" data-comment="{{$comment.ID}}" class="{{if $resolved}}tw-hidden {{end}} btn tiny hide-outdated">
 						{{svg "octicon-fold" 16 "tw-mr-2"}}
 						{{if $resolved}}
 							{{ctx.Locale.Tr "repo.issues.review.hide_resolved"}}
diff --git a/templates/repo/wiki/revision.tmpl b/templates/repo/wiki/revision.tmpl
index 911b1dcf12..f305238fc9 100644
--- a/templates/repo/wiki/revision.tmpl
+++ b/templates/repo/wiki/revision.tmpl
@@ -3,18 +3,18 @@
 	{{template "repo/header" .}}
 	{{$title := .title}}
 	<div class="ui container">
-		<div class="ui stackable grid">
-			<div class="ui eight wide column">
-				<div class="ui header">
-					<a class="file-revisions-btn ui basic button" title="{{ctx.Locale.Tr "repo.wiki.back_to_wiki"}}" href="{{.RepoLink}}/wiki/{{.PageURL}}">{{if .revision}}<span>{{.revision}}</span> {{end}}{{svg "octicon-home"}}</a>
+		<div class="ui dividing header flex-text-block tw-flex-wrap tw-justify-between">
+			<div class="flex-text-block">
+				<a class="ui basic button tw-px-3" title="{{ctx.Locale.Tr "repo.wiki.back_to_wiki"}}" href="{{.RepoLink}}/wiki/{{.PageURL}}">{{svg "octicon-home"}}</a>
+				<div class="tw-flex-1 gt-ellipsis">
 					{{$title}}
-					<div class="ui sub header tw-break-anywhere">
+					<div class="ui sub header gt-ellipsis">
 						{{$timeSince := DateUtils.TimeSince .Author.When}}
 						{{ctx.Locale.Tr "repo.wiki.last_commit_info" .Author.Name $timeSince}}
 					</div>
 				</div>
 			</div>
-			<div class="ui eight wide column tw-text-right">
+			<div>
 				{{template "repo/clone_panel" .}}
 			</div>
 		</div>
diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl
index 32f78a868c..89befcd7c5 100644
--- a/templates/repo/wiki/view.tmpl
+++ b/templates/repo/wiki/view.tmpl
@@ -33,7 +33,7 @@
 		<div class="ui dividing header">
 			<div class="flex-text-block tw-flex-wrap tw-justify-end">
 				<div class="flex-text-block tw-flex-1 tw-min-w-[300px]">
-					<a class="file-revisions-btn ui basic button" title="{{ctx.Locale.Tr "repo.wiki.file_revision"}}" href="{{.RepoLink}}/wiki/{{.PageURL}}?action=_revision" >{{if .CommitCount}}<span>{{.CommitCount}}</span> {{end}}{{svg "octicon-history"}}</a>
+					<a class="ui basic button tw-px-3 tw-gap-3" title="{{ctx.Locale.Tr "repo.wiki.file_revision"}}" href="{{.RepoLink}}/wiki/{{.PageURL}}?action=_revision" >{{if .CommitCount}}<span>{{.CommitCount}}</span> {{end}}{{svg "octicon-history"}}</a>
 					<div class="tw-flex-1 gt-ellipsis">
 						{{$title}}
 						<div class="ui sub header gt-ellipsis">
diff --git a/web_src/css/base.css b/web_src/css/base.css
index d90669ba39..e2daeb341a 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -224,6 +224,7 @@ progress::-moz-progress-bar {
 }
 
 .unselectable,
+.btn,
 .button,
 .lines-num,
 .lines-commit,
diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css
index 8291539b95..ace028b4d0 100644
--- a/web_src/css/markup/content.css
+++ b/web_src/css/markup/content.css
@@ -529,20 +529,6 @@
   margin: 0 0.25em;
 }
 
-.file-revisions-btn {
-  display: block;
-  float: left;
-  margin-bottom: 2px !important;
-  padding: 11px !important;
-  margin-right: 10px !important;
-}
-
-.file-revisions-btn i {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
 .markup-content-iframe {
   display: block;
   border: none;
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index dd7586feb7..b105bb5de2 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -352,6 +352,14 @@ a.btn:hover {
   color: inherit;
 }
 
+.btn.tiny {
+  font-size: 12px;
+}
+
+.btn.small {
+  font-size: 13px;
+}
+
 /* By default, Fomantic UI doesn't support "bordered" buttons group, but Gitea would like to use it.
 And the default buttons always have borders now (not the same as Fomantic UI's default buttons, see above).
 It needs some tricks to tweak the left/right borders with active state */
diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css
index 4438a31c9d..3c0d63f2fb 100644
--- a/web_src/css/modules/tippy.css
+++ b/web_src/css/modules/tippy.css
@@ -92,6 +92,10 @@
 }
 
 .tippy-box[data-theme="menu"] .item:focus {
+  background: var(--color-hover);
+}
+
+.tippy-box[data-theme="menu"] .item.active {
   background: var(--color-active);
 }
 
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index b8e457a71b..b9a63a060d 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -1784,12 +1784,12 @@ tbody.commit-list {
 .resolved-placeholder {
   display: flex;
   align-items: center;
-  font-size: 14px !important;
-  padding: 8px !important;
-  font-weight: var(--font-weight-normal) !important;
-  border: 1px solid var(--color-secondary) !important;
-  border-radius: var(--border-radius) !important;
-  margin: 4px !important;
+  justify-content: space-between;
+  margin: 4px;
+  padding: 8px;
+  border: 1px solid var(--color-secondary);
+  border-radius: var(--border-radius);
+  background: var(--color-box-header);
 }
 
 .resolved-placeholder + .comment-code-cloud {
diff --git a/web_src/css/review.css b/web_src/css/review.css
index 59361f4b6f..23383c051c 100644
--- a/web_src/css/review.css
+++ b/web_src/css/review.css
@@ -1,11 +1,3 @@
-.show-outdated,
-.hide-outdated {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  user-select: none;
-  margin-right: 0 !important;
-}
-
 .ui.button.add-code-comment {
   padding: 2px;
   position: absolute;
@@ -59,11 +51,6 @@
   margin-bottom: 0.5em;
 }
 
-.show-outdated:hover,
-.hide-outdated:hover {
-  text-decoration: underline;
-}
-
 .comment-code-cloud {
   padding: 0.5rem 1rem !important;
   position: relative;
diff --git a/web_src/js/features/repo-code.ts b/web_src/js/features/repo-code.ts
index 207022ca42..c699de59e6 100644
--- a/web_src/js/features/repo-code.ts
+++ b/web_src/js/features/repo-code.ts
@@ -1,6 +1,5 @@
 import {svg} from '../svg.ts';
 import {createTippy} from '../modules/tippy.ts';
-import {clippie} from 'clippie';
 import {toAbsoluteUrl} from '../utils.ts';
 import {addDelegatedEventListener} from '../utils/dom.ts';
 
@@ -43,7 +42,8 @@ function selectRange(range: string): Element {
     if (!copyPermalink) return;
     let link = copyPermalink.getAttribute('data-url');
     link = `${link.replace(/#L\d+$|#L\d+-L\d+$/, '')}#${anchor}`;
-    copyPermalink.setAttribute('data-url', link);
+    copyPermalink.setAttribute('data-clipboard-text', link);
+    copyPermalink.setAttribute('data-clipboard-text-type', 'url');
   };
 
   const rangeFields = range ? range.split('-') : [];
@@ -138,8 +138,4 @@ export function initRepoCodeView() {
   };
   onHashChange();
   window.addEventListener('hashchange', onHashChange);
-
-  addDelegatedEventListener(document, 'click', '.copy-line-permalink', (el) => {
-    clippie(toAbsoluteUrl(el.getAttribute('data-url')));
-  });
 }
diff --git a/web_src/js/utils/dom.ts b/web_src/js/utils/dom.ts
index c7562c92b0..4386d38632 100644
--- a/web_src/js/utils/dom.ts
+++ b/web_src/js/utils/dom.ts
@@ -360,7 +360,11 @@ export function querySingleVisibleElem<T extends HTMLElement>(parent: Element, s
 export function addDelegatedEventListener<T extends HTMLElement, E extends Event>(parent: Node, type: string, selector: string, listener: (elem: T, e: E) => Promisable<void>, options?: boolean | AddEventListenerOptions) {
   parent.addEventListener(type, (e: Event) => {
     const elem = (e.target as HTMLElement).closest(selector);
-    if (!elem || !parent.contains(elem)) return;
+    // It strictly checks "parent contains the target elem" to avoid side effects of selector running on outside the parent.
+    // Keep in mind that the elem could have been removed from parent by other event handlers before this event handler is called.
+    // For example: tippy popup item, the tippy popup could be hidden and removed from DOM before this.
+    // It is caller's responsibility make sure the elem is still in parent's DOM when this event handler is called.
+    if (!elem || (parent !== document && !parent.contains(elem))) return;
     listener(elem as T, e as E);
   }, options);
 }