Make issue title edit buttons focusable and fix incorrect ajax requests (#22807)

Replace #19922 , which is stale since my last review:
https://github.com/go-gitea/gitea/pull/19922#pullrequestreview-1003546506
and https://github.com/go-gitea/gitea/pull/19922#issuecomment-1153181546

Close #19769

Changes:
1. Use `<button>` instead of `<div>` for buttons
2. Prevent default event handler in `initGlobalButtonClickOnEnter`
3. Fix the incorrect call to `pullrequest_targetbranch_change`
4. Add a slight margin-left to the input element to make UI look better

The logic in repo-issue.js is not ideal, but this PR isn't going to
touch the logic.

This is also an example for future developers to understand how to make
buttons work properly.

### Before


![image](https://user-images.githubusercontent.com/2114189/217262515-ec0462f7-7051-46a5-bfa2-2f6c6a807b7d.png)

### After

* Add a slight margin-left.
* The `Cancel` button is focused.


![image](https://user-images.githubusercontent.com/2114189/217264891-934c9c8d-d190-4866-98b5-666cea57e28d.png)

Co-authored-by: techknowlogick <techknowlogick@gitea.io>

models/issues/issue_xref.go

@@ -277,26 +277,26 @@ func CommentTypeIsRef(t CommentType) bool {
 	return t == CommentTypeCommentRef || t == CommentTypePullRef || t == CommentTypeIssueRef
 }
 
-// RefCommentHTMLURL returns the HTML URL for the comment that created this reference
-func (c *Comment) RefCommentHTMLURL() string {
+// RefCommentLink returns the relative URL for the comment that created this reference
+func (c *Comment) RefCommentLink() string {
 	// Edge case for when the reference is inside the title or the description of the referring issue
 	if c.RefCommentID == 0 {
-		return c.RefIssueHTMLURL()
+		return c.RefIssueLink()
 	}
 	if err := c.LoadRefComment(); err != nil { // Silently dropping errors :unamused:
 		log.Error("LoadRefComment(%d): %v", c.RefCommentID, err)
 		return ""
 	}
-	return c.RefComment.HTMLURL()
+	return c.RefComment.Link()
 }
 
-// RefIssueHTMLURL returns the HTML URL of the issue where this reference was created
-func (c *Comment) RefIssueHTMLURL() string {
+// RefIssueLink returns the relative URL of the issue where this reference was created
+func (c *Comment) RefIssueLink() string {
 	if err := c.LoadRefIssue(); err != nil { // Silently dropping errors :unamused:
 		log.Error("LoadRefIssue(%d): %v", c.RefCommentID, err)
 		return ""
 	}
-	return c.RefIssue.HTMLURL()
+	return c.RefIssue.Link()
 }
 
 // RefIssueTitle returns the title of the issue where this reference was created

modules/charset/escape_stream.go

@@ -6,7 +6,6 @@ package charset
 import (
 	"fmt"
 	"regexp"
-	"sort"
 	"strings"
 	"unicode"
 	"unicode/utf8"
@@ -20,12 +19,16 @@ import (
 var defaultWordRegexp = regexp.MustCompile(`(-?\d*\.\d\w*)|([^\` + "`" + `\~\!\@\#\$\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s\x00-\x1f]+)`)
 
 func NewEscapeStreamer(locale translation.Locale, next HTMLStreamer, allowed ...rune) HTMLStreamer {
+	allowedM := make(map[rune]bool, len(allowed))
+	for _, v := range allowed {
+		allowedM[v] = true
+	}
 	return &escapeStreamer{
 		escaped:                 &EscapeStatus{},
 		PassthroughHTMLStreamer: *NewPassthroughStreamer(next),
 		locale:                  locale,
 		ambiguousTables:         AmbiguousTablesForLocale(locale),
-		allowed:                 allowed,
+		allowed:                 allowedM,
 	}
 }
 
@@ -34,7 +37,7 @@ type escapeStreamer struct {
 	escaped         *EscapeStatus
 	locale          translation.Locale
 	ambiguousTables []*AmbiguousTable
-	allowed         []rune
+	allowed         map[rune]bool
 }
 
 func (e *escapeStreamer) EscapeStatus() *EscapeStatus {
@@ -256,7 +259,7 @@ func (e *escapeStreamer) runeTypes(runes ...rune) (types []runeType, confusables
 			runeCounts.numBrokenRunes++
 		case r == ' ' || r == '\t' || r == '\n':
 			runeCounts.numBasicRunes++
-		case e.isAllowed(r):
+		case e.allowed[r]:
 			if r > 0x7e || r < 0x20 {
 				types[i] = nonBasicASCIIRuneType
 				runeCounts.numNonConfusingNonBasicRunes++
@@ -282,16 +285,3 @@ func (e *escapeStreamer) runeTypes(runes ...rune) (types []runeType, confusables
 	}
 	return types, confusables, runeCounts
 }
-
-func (e *escapeStreamer) isAllowed(r rune) bool {
-	if len(e.allowed) == 0 {
-		return false
-	}
-	if len(e.allowed) == 1 {
-		return e.allowed[0] == r
-	}
-
-	return sort.Search(len(e.allowed), func(i int) bool {
-		return e.allowed[i] >= r
-	}) >= 0
-}

modules/structs/visible_type.go

@@ -3,7 +3,7 @@
 
 package structs
 
-// VisibleType defines the visibility (Organization only)
+// VisibleType defines the visibility of user and org
 type VisibleType int
 
 const (
@@ -13,11 +13,11 @@ const (
 	// VisibleTypeLimited Visible for every connected user
 	VisibleTypeLimited
 
-	// VisibleTypePrivate Visible only for organization's members
+	// VisibleTypePrivate Visible only for self or admin user
 	VisibleTypePrivate
 )
 
-// VisibilityModes is a map of org Visibility types
+// VisibilityModes is a map of Visibility types
 var VisibilityModes = map[string]VisibleType{
 	"public":  VisibleTypePublic,
 	"limited": VisibleTypeLimited,

modules/templates/helper.go

@@ -72,6 +72,10 @@ func NewFuncMap() []template.FuncMap {
 			return setting.StaticURLPrefix + "/assets"
 		},
 		"AppUrl": func() string {
+			// The usage of AppUrl should be avoided as much as possible,
+			// because the AppURL(ROOT_URL) may not match user's visiting site and the ROOT_URL in app.ini may be incorrect.
+			// And it's difficult for Gitea to guess absolute URL correctly with zero configuration,
+			// because Gitea doesn't know whether the scheme is HTTP or HTTPS unless the reverse proxy could tell Gitea.
 			return setting.AppURL
 		},
 		"AppVer": func() string {

services/pull/update.go

@@ -106,7 +106,7 @@ func IsUserAllowedToUpdate(ctx context.Context, pull *issues_model.PullRequest,
 		BaseBranch: pull.HeadBranch,
 	}
 
-	pb, err := git_model.GetFirstMatchProtectedBranchRule(ctx, pull.BaseRepoID, pull.BaseBranch)
+	pb, err := git_model.GetFirstMatchProtectedBranchRule(ctx, pr.BaseRepoID, pr.BaseBranch)
 	if err != nil {
 		return false, false, err
 	}

templates/base/head_navbar.tmpl

@@ -3,22 +3,24 @@
 	{{if .IsSigned}}
 		{{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}}
 	{{end}}
-	<div class="item brand" style="justify-content: space-between;">
+	<div class="item brand sb">
 		<a href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{.locale.Tr "dashboard"}}{{else}}{{.locale.Tr "home"}}{{end}}">
 			<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true">
 		</a>
+		<div class="df ac">
 			{{if .IsSigned}}
-		<a href="{{AppSubUrl}}/notifications" class="tooltip mobile-only" data-content='{{.locale.Tr "notifications"}}'>
-			<span class="text black">
-				<span class="fitted">{{svg "octicon-bell"}}</span>
-				<span class="ui red label mini{{if not $notificationUnreadCount}} hidden{{end}} notification_count">
+			<a href="{{AppSubUrl}}/notifications" class="tooltip mobile-only mr-4 mt-3" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
+				<span class="fitted item">
+					{{svg "octicon-bell"}}
+					<span class="notification_count{{if not $notificationUnreadCount}} hidden{{end}}">
 						{{$notificationUnreadCount}}
 					</span>
 				</span>
 			</a>
 			{{end}}
-		<div class="ui basic icon button mobile-only" id="navbar-expand-toggle">
-			<i class="sidebar icon"></i>
+			<div class="ui icon button mobile-only" id="navbar-expand-toggle">
+				{{svg "octicon-three-bars"}}
+			</div>
 		</div>
 	</div>
 
@@ -78,12 +80,10 @@
 	{{else if .IsSigned}}
 		<div class="right stackable menu">
 			{{if EnableTimetracking}}
-			<a class="active-stopwatch-trigger item ui label {{if not .ActiveStopwatch}}hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}">
-				<span class="text">
-					<span class="fitted item">
+			<a class="active-stopwatch-trigger item ui mx-0{{if not .ActiveStopwatch}} hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}">
+				<span class="fitted relative">
 					{{svg "octicon-stopwatch"}}
-						<span class="red" style="position:absolute; right:-0.6em; top:-0.6em;">{{svg "octicon-dot-fill"}}</span>
-					</span>
+					<span class="header-stopwatch-dot"></span>
 					<span class="sr-mobile-only">{{.locale.Tr "active_stopwatch"}}</span>
 				</span>
 			</a>
@@ -118,16 +118,16 @@
 			</div>
 			{{end}}
 
-			<a href="{{AppSubUrl}}/notifications" class="item tooltip not-mobile" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
-				<span class="text">
-					<span class="fitted">{{svg "octicon-bell"}}</span>
-					<span class="ui red label {{if not $notificationUnreadCount}}hidden{{end}} notification_count">
+			<a href="{{AppSubUrl}}/notifications" class="item tooltip not-mobile mx-0" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
+				<span class="fitted item">
+					{{svg "octicon-bell"}}
+					<span class="notification_count{{if not $notificationUnreadCount}} hidden{{end}}">
 						{{$notificationUnreadCount}}
 					</span>
 				</span>
 			</a>
 
-			<div class="ui dropdown jump item tooltip" data-content="{{.locale.Tr "create_new"}}">
+			<div class="ui dropdown jump item tooltip mx-0" data-content="{{.locale.Tr "create_new"}}">
 				<span class="text">
 					<span class="fitted">{{svg "octicon-plus"}}</span>
 					<span class="sr-mobile-only">{{.locale.Tr "create_new"}}</span>
@@ -150,7 +150,7 @@
 				</div><!-- end content create new menu -->
 			</div><!-- end dropdown menu create new -->
 
-			<div class="ui dropdown jump item tooltip" tabindex="-1" data-content="{{.locale.Tr "user_profile_and_more"}}">
+			<div class="ui dropdown jump item tooltip mx-0" tabindex="-1" data-content="{{.locale.Tr "user_profile_and_more"}}">
 				<span class="text">
 					{{avatar .SignedUser 24 "tiny"}}
 					<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span>

templates/projects/view.tmpl

@@ -238,7 +238,7 @@
 							{{end}}
 							<div class="right floated">
 								{{range .Assignees}}
-									<a class="tooltip" target="_blank" href="{{.HTMLURL}}" data-content="{{$.locale.Tr "repo.projects.board.assigned_to"}} {{.Name}}">{{avatar . 28 "mini mr-3"}}</a>
+									<a class="tooltip" target="_blank" href="{{.HomeLink}}" data-content="{{$.locale.Tr "repo.projects.board.assigned_to"}} {{.Name}}">{{avatar . 28 "mini mr-3"}}</a>
 								{{end}}
 							</div>
 						</div>

templates/repo/actions/runs_list.tmpl

@@ -6,7 +6,7 @@
 			</div>
 			<div class="issue-item-main f1 fc df">
 				<div class="issue-item-top-row">
-					<a class="index ml-0 mr-2" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
+					<a class="index ml-0 mr-2" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
 						{{.Title}}
 					</a>
 					<span class="ui label">

templates/repo/clone_script.tmpl

@@ -17,7 +17,14 @@
 		const btn = isSSH ? sshBtn : httpsBtn;
 		if (!btn) return;
 
-		const link = btn.getAttribute('data-link');
+		let link = btn.getAttribute('data-link');
+		if (link.startsWith('http://') || link.startsWith('https://')) {
+			// use current protocol/host as the clone link
+			const url = new URL(link);
+			url.protocol = window.location.protocol;
+			url.host = window.location.host;
+			link = url.toString();
+		}
 		for (const el of document.getElementsByClassName('js-clone-url')) {
 			el[el.nodeName === 'INPUT' ? 'value' : 'textContent'] = link;
 		}

templates/repo/issue/list.tmpl

@@ -77,13 +77,13 @@
 					<!-- Project -->
 					<div class="ui{{if not (or .OpenProjects .ClosedProjects)}} disabled{{end}} dropdown jump item">
 						<span class="text">
-							{{.locale.Tr "repo.issues.filter_projects"}}
+							{{.locale.Tr "repo.issues.filter_project"}}
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						</span>
 						<div class="menu">
 							<div class="ui icon search input">
 								<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
-								<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_projects"}}">
+								<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_project"}}">
 							</div>
 							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_project_all"}}</a>
 							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&project=-1&assignee={{$.AssigneeID}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_project_none"}}</a>
@@ -276,7 +276,6 @@
 										{{.Title}}
 									</div>
 								{{end}}
-								</div>
 							{{end}}
 						</div>
 					</div>

templates/repo/issue/view_content/comments.tmpl

@@ -151,12 +151,12 @@
 				{{if eq .RefAction 3}}<del>{{end}}
 				<span class="text grey muted-links">
 					{{template "shared/user/authorlink" .Poster}}
-					{{$.locale.Tr $refTr (.EventTag|Escape) $createdStr (.RefCommentHTMLURL|Escape) $refFrom | Safe}}
+					{{$.locale.Tr $refTr (.EventTag|Escape) $createdStr (.RefCommentLink|Escape) $refFrom | Safe}}
 				</span>
 				{{if eq .RefAction 3}}</del>{{end}}
 
 				<div class="detail">
-					<span class="text grey muted-links"><a href="{{.RefIssueHTMLURL}}"><b>{{.RefIssueTitle}}</b> {{.RefIssueIdent}}</a></span>
+					<span class="text grey muted-links"><a href="{{.RefIssueLink}}"><b>{{.RefIssueTitle}}</b> {{.RefIssueIdent}}</a></span>
 				</div>
 			</div>
 		{{else if eq .Type 4}}

templates/repo/issue/view_content/pull.tmpl

@@ -303,12 +303,12 @@
 							{{$hasPendingPullRequestMergeTip = $.locale.Tr "repo.pulls.auto_merge_has_pending_schedule" .PendingPullRequestMerge.Doer.Name $createdPRMergeStr}}
 						{{end}}
 						<div class="ui divider"></div>
-						<script>
-							(() => {
+						<script type="module">
+							const issueUrl = window.location.origin + {{$.Issue.Link}};
 							const defaultMergeTitle = {{.DefaultMergeMessage}};
 							const defaultSquashMergeTitle = {{.DefaultSquashMergeMessage}};
-								const defaultMergeMessage = {{if .DefaultMergeBody}}{{.DefaultMergeBody}}{{else}}'Reviewed-on: ' + {{$.Issue.HTMLURL}} + '\n' + {{$approvers}}{{end}};
-								const defaultSquashMergeMessage = {{if .DefaultSquashMergeBody}}{{.DefaultSquashMergeBody}}{{else}}'Reviewed-on: ' + {{$.Issue.HTMLURL}} + '\n' + {{$approvers}}{{end}};
+							const defaultMergeMessage = {{if .DefaultMergeBody}}{{.DefaultMergeBody}}{{else}}`Reviewed-on: ${issueUrl}\n` + {{$approvers}}{{end}};
+							const defaultSquashMergeMessage = {{if .DefaultSquashMergeBody}}{{.DefaultSquashMergeBody}}{{else}}`Reviewed-on: ${issueUrl}\n` + {{$approvers}}{{end}};
 							const mergeForm = {
 								'baseLink': {{.Link}},
 								'textCancel': {{$.locale.Tr "cancel"}},
@@ -375,7 +375,6 @@
 								}
 							];
 							window.config.pageData.pullRequestMergeForm = mergeForm;
-							})();
 						</script>
 
 						<div id="pull-request-merge-form"></div>

templates/repo/issue/view_content/pull_merge_instruction.tmpl

@@ -5,6 +5,7 @@
 	<div class="ui secondary segment">
 		{{if eq $.Issue.PullRequest.Flow 0}}
 		<div>git checkout -b {{if ne $.Issue.PullRequest.HeadRepo.ID $.Issue.PullRequest.BaseRepo.ID}}{{$.Issue.PullRequest.HeadRepo.OwnerName}}-{{end}}{{$.Issue.PullRequest.HeadBranch}} {{$.Issue.PullRequest.BaseBranch}}</div>
+		{{/* the only legacy HTMLURL used in template, which doesn't affect users too much and is very diffcult to fix, it should be fixed together with other AppUrl usages*/}}
 		<div>git pull {{if ne $.Issue.PullRequest.HeadRepo.ID $.Issue.PullRequest.BaseRepo.ID}}{{$.Issue.PullRequest.HeadRepo.HTMLURL}}{{else}}origin{{end}} {{$.Issue.PullRequest.HeadBranch}}</div>
 		{{else}}
 		<div>git fetch origin {{$.Issue.PullRequest.GetGitRefName}}:{{$.Issue.PullRequest.HeadBranch}}</div>

templates/repo/issue/view_title.tmpl

@@ -2,20 +2,20 @@
 	<div class="issue-title" id="issue-title-wrapper">
 		{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
 			<div class="edit-button">
-				<div id="edit-title" class="ui basic secondary not-in-edit button">{{.locale.Tr "repo.issues.edit"}}</div>
+				<button id="edit-title" class="ui basic button secondary not-in-edit">{{.locale.Tr "repo.issues.edit"}}</button>
 			</div>
 		{{end}}
 		<h1>
 			<span id="issue-title">{{RenderIssueTitle $.Context .Issue.Title $.RepoLink $.Repository.ComposeMetas | RenderCodeBlock}}</span>
 			<span class="index">#{{.Issue.Index}}</span>
-			<div id="edit-title-input" class="ui input" style="display: none">
+			<div id="edit-title-input" class="ui input ml-4" style="display: none">
 				<input value="{{.Issue.Title}}" maxlength="255" autocomplete="off">
 			</div>
 		</h1>
 		{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
 			<div class="edit-buttons">
-				<div id="cancel-edit-title" class="ui basic secondary in-edit button" style="display: none">{{.locale.Tr "repo.issues.cancel"}}</div>
-				<div id="save-edit-title" class="ui primary in-edit button" style="display: none" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title" {{if .Issue.IsPull}}data-target-update-url="{{$.RepoLink}}/pull/{{.Issue.Index}}/target_branch"{{end}}>{{.locale.Tr "repo.issues.save"}}</div>
+				<button id="cancel-edit-title" class="ui basic button secondary in-edit" style="display: none">{{.locale.Tr "repo.issues.cancel"}}</button>
+				<button id="save-edit-title" class="ui primary button in-edit" style="display: none" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title" {{if .Issue.IsPull}}data-target-update-url="{{$.RepoLink}}/pull/{{.Issue.Index}}/target_branch"{{end}}>{{.locale.Tr "repo.issues.save"}}</button>
 			</div>
 		{{end}}
 	</div>

web_src/js/features/admin/common.js

@@ -1,12 +1,17 @@
 import $ from 'jquery';
+import {checkAppUrl} from '../common-global.js';
 
 const {csrfToken} = window.config;
 
 export function initAdminCommon() {
-  if ($('.admin').length === 0) {
+  if ($('.page-content.admin').length === 0) {
     return;
   }
 
+  // check whether appUrl(ROOT_URL) is correct, if not, show an error message
+  // only admin pages need this check because most templates are using relative URLs now
+  checkAppUrl();
+
   // New user
   if ($('.admin.new.user').length > 0 || $('.admin.edit.user').length > 0) {
     $('#login_type').on('change', function () {

web_src/js/features/common-global.js

@@ -60,6 +60,7 @@ export function initGlobalButtonClickOnEnter() {
   $(document).on('keypress', '.ui.button', (e) => {
     if (e.keyCode === 13 || e.keyCode === 32) { // enter key or space bar
       $(e.target).trigger('click');
+      e.preventDefault();
     }
   });
 }
@@ -381,9 +382,6 @@ export function checkAppUrl() {
   if (curUrl.startsWith(appUrl) || `${curUrl}/` === appUrl) {
     return;
   }
-  if (document.querySelector('.page-content.install')) {
-    return; // no need to show the message on the installation page
-  }
-  showGlobalErrorMessage(`Your ROOT_URL in app.ini is ${appUrl} but you are visiting ${curUrl}
-You should set ROOT_URL correctly, otherwise the web may not work correctly.`);
+  showGlobalErrorMessage(`Your ROOT_URL in app.ini is "${appUrl}", it's unlikely matching the site you are visiting.
+Mismatched ROOT_URL config causes wrong URL links for web UI/mail content/webhook notification.`);
 }

web_src/js/features/repo-issue.js

@@ -605,6 +605,7 @@ export function initRepoIssueTitleEdit() {
       const targetBranch = $('#pull-target-branch').data('branch');
       const $branchTarget = $('#branch_target');
       if (targetBranch === $branchTarget.text()) {
+        window.location.reload();
         return false;
       }
       $.post(update_url, {
@@ -617,19 +618,22 @@ export function initRepoIssueTitleEdit() {
       });
     };
 
-    const pullrequest_target_update_url = $(this).data('target-update-url');
+    const pullrequest_target_update_url = $(this).attr('data-target-update-url');
     if ($editInput.val().length === 0 || $editInput.val() === $issueTitle.text()) {
       $editInput.val($issueTitle.text());
       pullrequest_targetbranch_change(pullrequest_target_update_url);
     } else {
-      $.post($(this).data('update-url'), {
+      $.post($(this).attr('data-update-url'), {
         _csrf: csrfToken,
         title: $editInput.val()
       }, (data) => {
         $editInput.val(data.title);
         $issueTitle.text(data.title);
-        pullrequest_targetbranch_change(pullrequest_target_update_url);
+        if (pullrequest_target_update_url) {
+          pullrequest_targetbranch_change(pullrequest_target_update_url); // it will reload the window
+        } else {
           window.location.reload();
+        }
       });
     }
     return false;

web_src/js/index.js

@@ -48,7 +48,6 @@ import {
   initCommitStatuses,
 } from './features/repo-commit.js';
 import {
-  checkAppUrl,
   initFootLanguageMenu,
   initGlobalButtonClickOnEnter,
   initGlobalButtons,
@@ -199,5 +198,4 @@ $(document).ready(() => {
   initUserAuthWebAuthnRegister();
   initUserSettings();
   initViewedCheckboxListenerFor();
-  checkAppUrl();
 });

web_src/less/_base.less

@@ -1364,6 +1364,7 @@ a.ui.card:hover,
   visibility: hidden;
 }
 
+.text.primary { color: var(--color-primary) !important; }
 .text.red { color: var(--color-red) !important; }
 .text.orange { color: var(--color-orange) !important; }
 .text.yellow { color: var(--color-yellow) !important; }
@@ -2315,6 +2316,13 @@ a.ui.label:hover {
 .ui.basic.secondary.buttons .button:active,
 .ui.basic.secondary.button:active {
   color: var(--color-secondary-dark-8) !important;
+  border-color: var(--color-secondary-dark-1) !important;
+}
+
+.ui.basic.secondary.button:focus,
+.ui.basic.secondary.buttons .button:focus {
+  color: var(--color-secondary-dark-8) !important;
+  border-color: var(--color-secondary-dark-3) !important;
 }
 
 .ui.tertiary.button {
@@ -2434,6 +2442,33 @@ a.ui.basic.label:hover {
   margin-top: 1rem;
 }
 
+.header-stopwatch-dot {
+  position: absolute;
+  left: 8px;
+  top: -8px;
+  width: 13px;
+  height: 13px;
+  background: var(--color-primary);
+  border: 2px solid var(--color-header-bar);
+  border-radius: 100%;
+}
+
+.notification_count {
+  position: absolute;
+  left: 5px;
+  top: -8px;
+  min-width: 1.5em;
+  text-align: center;
+  background: var(--color-primary);
+  border: 2px solid var(--color-header-bar);
+  color: var(--color-header-bar);
+  padding: 2px;
+  border-radius: 1em;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: .7;
+}
+
 table th[data-sortt-asc],
 table th[data-sortt-desc] {
   &:hover {

web_src/less/helpers.less

@@ -21,6 +21,7 @@
 
 /* below class names match Tailwind CSS */
 .pointer-events-none { pointer-events: none !important; }
+.relative { position: relative !important; }
 
 .mono {
   font-family: var(--fonts-monospace) !important;