Refactor "flex-list" to "flex-divided-list" (#37505)

Purpose:

1. Make the whole code base have unified "item" layout
2. Clarify our "list" styles: "flex-relaxed-list", "flex-divided-list"
3. Prepare to replace legacy "ui relaxed list"
* https://github.com/go-gitea/gitea/pull/37445#discussion_r3144458865
4. Prepare for refactoring the "pull merge box", it needs the
"flex-divided-list"
    * related to "Refactor pull request view (*)" like #37451
5. Fix legacy abuses of "flex-list", e.g.: repo home sidebar

templates/user/dashboard/feeds.tmpl

@@ -1,10 +1,10 @@
-<div id="activity-feed" class="flex-list" data-ref-issue-container>
+<div id="activity-feed" class="flex-divided-list items-with-main" data-ref-issue-container>
 	{{range .Feeds}}
-		<div class="flex-item">
-			<div class="flex-item-leading">
+		<div class="item">
+			<div class="item-leading">
 				{{ctx.AvatarUtils.AvatarByAction .}}
 			</div>
-			<div class="flex-item-main tw-gap-2">
+			<div class="item-main tw-gap-2">
 				<div>
 					{{if gt .ActUser.ID 0}}
 						<a href="{{AppSubUrl}}/{{(.GetActUserName ctx) | PathEscape}}" title="{{.GetActDisplayNameTitle ctx}}">{{.GetActDisplayName ctx}}</a>
@@ -113,15 +113,15 @@
 						<div class="render-content markup truncated-markup">{{ctx.RenderUtils.MarkdownToHtml $comment}}</div>
 					{{end}}
 				{{else if .GetOpType.InActions "merge_pull_request"}}
-					<div class="flex-item-body tw-text-text">{{index .GetIssueInfos 1 | ctx.RenderUtils.RenderIssueSimpleTitle}}</div>
+					<div class="item-body tw-text-text">{{index .GetIssueInfos 1 | ctx.RenderUtils.RenderIssueSimpleTitle}}</div>
 				{{else if .GetOpType.InActions "close_issue" "reopen_issue" "close_pull_request" "reopen_pull_request"}}
 					<span class="tw-inline-block tw-truncate issue title">{{(.GetIssueTitle ctx) | ctx.RenderUtils.RenderIssueSimpleTitle}}</span>
 				{{else if .GetOpType.InActions "pull_review_dismissed"}}
-				<div class="flex-item-body tw-text-text">{{ctx.Locale.Tr "action.review_dismissed_reason"}}</div>
-				<div class="flex-item-body tw-text-text">{{index .GetIssueInfos 2 | ctx.RenderUtils.RenderEmoji}}</div>
+				<div class="item-body tw-text-text">{{ctx.Locale.Tr "action.review_dismissed_reason"}}</div>
+				<div class="item-body tw-text-text">{{index .GetIssueInfos 2 | ctx.RenderUtils.RenderEmoji}}</div>
 				{{end}}
 			</div>
-			<div class="flex-item-trailing">
+			<div class="item-trailing">
 				{{svg (printf "octicon-%s" (ActionIcon .GetOpType)) 32 "tw-text-text-light tw-mr-1"}}
 			</div>
 		</div>

templates/user/settings/applications.tmpl

@@ -4,20 +4,20 @@
 			{{ctx.Locale.Tr "settings.manage_access_token"}}
 		</h4>
 		<div class="ui attached segment">
-			<div class="flex-list">
-				<div class="flex-item">
+			<div class="flex-divided-list items-with-main">
+				<div class="item">
 					{{ctx.Locale.Tr "settings.tokens_desc"}}
 				</div>
 				{{range .Tokens}}
-					<div class="flex-item">
-						<div class="flex-item-leading">
+					<div class="item">
+						<div class="item-leading">
 							<span class="{{if .HasRecentActivity}}tw-text-green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{ctx.Locale.Tr "settings.token_state_desc"}}"{{end}}>
 								{{svg "fontawesome-send" 32}}
 							</span>
 						</div>
-						<div class="flex-item-main">
+						<div class="item-main">
 							<details>
-								<summary><span class="flex-item-title">{{.Name}}</span></summary>
+								<summary><span class="item-title">{{.Name}}</span></summary>
 								<p class="tw-my-1">
 									{{ctx.Locale.Tr "settings.repo_and_org_access"}}:
 									{{if .DisplayPublicOnly}}
@@ -35,11 +35,11 @@
 								{{end}}
 								</ul>
 							</details>
-							<div class="flex-item-body">
+							<div class="item-body">
 								<i>{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}} — {{svg "octicon-info"}} {{if .HasUsed}}{{ctx.Locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="tw-text-green"{{end}}>{{DateUtils.AbsoluteShort .UpdatedUnix}}</span>{{else}}{{ctx.Locale.Tr "settings.no_activity"}}{{end}}</i>
 							</div>
 						</div>
-						<div class="flex-item-trailing">
+						<div class="item-trailing">
 								<button class="ui red tiny button delete-button" data-modal-id="delete-token" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
 									{{svg "octicon-trash"}}
 									{{ctx.Locale.Tr "settings.delete_token"}}

templates/user/settings/applications_oauth2_list.tmpl

@@ -1,22 +1,22 @@
 <div class="ui attached segment">
-	<div class="flex-list">
-		<div class="flex-item">
+	<div class="flex-divided-list items-with-main">
+		<div class="item">
 			{{ctx.Locale.Tr "settings.oauth2_application_create_description"}}
 		</div>
 		{{range .Applications}}
-			<div class="flex-item tw-items-center">
-				<div class="flex-item-leading">
+			<div class="item tw-items-center">
+				<div class="item-leading">
 					{{svg "octicon-apps" 32}}
 				</div>
-				<div class="flex-item-main">
-					<div class="flex-item-title">{{.Name}}</div>
-					<div class="flex-item-body">
+				<div class="item-main">
+					<div class="item-title">{{.Name}}</div>
+					<div class="item-body">
 						{{ctx.Locale.Tr "settings.oauth2_client_id"}}
 						<span class="ui label">{{.ClientID}}</span>
 					</div>
 				</div>
 				{{$isBuiltin := and $.BuiltinApplications (index $.BuiltinApplications .ClientID)}}
-				<div class="flex-item-trailing">
+				<div class="item-trailing">
 					{{if $isBuiltin}}
 						<span class="ui basic label" data-tooltip-content="{{ctx.Locale.Tr "settings.oauth2_application_locked"}}">{{ctx.Locale.Tr "locked"}}</span>
 					{{else}}

templates/user/settings/grants_oauth2.tmpl

@@ -2,22 +2,22 @@
 	{{ctx.Locale.Tr "settings.authorized_oauth2_applications"}}
 </h4>
 <div class="ui attached segment">
-	<div class="flex-list">
-		<div class="flex-item">
+	<div class="flex-divided-list items-with-main">
+		<div class="item">
 			{{ctx.Locale.Tr "settings.authorized_oauth2_applications_description"}}
 		</div>
 		{{range .Grants}}
-			<div class="flex-item">
-				<div class="flex-item-leading">
+			<div class="item">
+				<div class="item-leading">
 					{{svg "octicon-key" 32}}
 				</div>
-				<div class="flex-item-main">
-					<div class="flex-item-title">{{.Application.Name}}</div>
-					<div class="flex-item-body">
+				<div class="item-main">
+					<div class="item-title">{{.Application.Name}}</div>
+					<div class="item-body">
 						<i>{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}}</i>
 					</div>
 				</div>
-				<div class="flex-item-trailing">
+				<div class="item-trailing">
 					<button class="ui red tiny button delete-button" data-modal-id="revoke-gitea-oauth2-grant"
 							data-url="{{AppSubUrl}}/user/settings/applications/oauth2/{{.ApplicationID}}/revoke/{{.ID}}">
 						{{ctx.Locale.Tr "settings.revoke_key"}}

templates/user/settings/keys_gpg.tmpl

@@ -38,36 +38,36 @@
 			</button>
 		</form>
 	</div>
-	<div class="flex-list">
-		<div class="flex-item">
+	<div class="flex-divided-list items-with-main">
+		<div class="item">
 			<p>
 				{{ctx.Locale.Tr "settings.gpg_desc"}}<br>
 				{{ctx.Locale.Tr "settings.gpg_helper" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/about-commit-signature-verification#gpg-commit-signature-verification"}}
 			</p>
 		</div>
 		{{range .GPGKeys}}
-			<div class="flex-item">
-				<div class="flex-item-leading">
+			<div class="item">
+				<div class="item-leading">
 					<span class="{{if or .ExpiredUnix.IsZero ($.PageStartTime.Before .ExpiredUnix.AsTime)}}tw-text-green{{end}}">{{svg "octicon-key" 32}}</span>
 				</div>
-				<div class="flex-item-main">
+				<div class="item-main">
 					{{if .Verified}}
 						<span class="flex-text-block" data-tooltip-content="{{ctx.Locale.Tr "settings.gpg_key_verified_long"}}">{{svg "octicon-verified"}} <strong>{{ctx.Locale.Tr "settings.gpg_key_verified"}}</strong></span>
 					{{end}}
 					{{if .Emails}}
 						<span class="flex-text-block" data-tooltip-content="{{ctx.Locale.Tr "settings.gpg_key_matched_identities_long"}}">{{svg "octicon-mail"}} {{ctx.Locale.Tr "settings.gpg_key_matched_identities"}} {{range .Emails}}<strong>{{.Email}} </strong>{{end}}</span>
 					{{end}}
-					<div class="flex-item-body">
+					<div class="item-body">
 						<b>{{ctx.Locale.Tr "settings.key_id"}}:</b> {{.PaddedKeyID}}
 						<b>{{ctx.Locale.Tr "settings.subkeys"}}:</b> {{range .SubsKey}} {{.PaddedKeyID}} {{end}}
 					</div>
-					<div class="flex-item-body">
+					<div class="item-body">
 						<i>{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .AddedUnix)}}</i>
 						-
 						<i>{{if not .ExpiredUnix.IsZero}}{{ctx.Locale.Tr "settings.valid_until_date" (DateUtils.AbsoluteShort .ExpiredUnix)}}{{else}}{{ctx.Locale.Tr "settings.valid_forever"}}{{end}}</i>
 					</div>
 				</div>
-				<div class="flex-item-trailing">
+				<div class="item-trailing">
 					<button class="ui red tiny button delete-button" data-modal-id="delete-gpg" data-url="{{$.Link}}/delete?type=gpg" data-id="{{.ID}}">
 						{{ctx.Locale.Tr "settings.delete_key"}}
 					</button>

templates/user/settings/keys_principal.tmpl

@@ -10,22 +10,22 @@
 		</div>
 	</h4>
 	<div class="ui attached segment">
-		<div class="flex-list">
-			<div class="flex-item">
+		<div class="flex-divided-list items-with-main">
+			<div class="item">
 				{{ctx.Locale.Tr "settings.principal_desc"}}
 			</div>
 			{{range .Principals}}
-				<div class="flex-item">
-					<div class="flex-item-leading">
+				<div class="item">
+					<div class="item-leading">
 						<span class="{{if .HasRecentActivity}}tw-text-green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{ctx.Locale.Tr "settings.principal_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</span>
 					</div>
-					<div class="flex-item-main">
-						<div class="flex-item-title">{{.Name}}</div>
-						<div class="flex-item-body">
+					<div class="item-main">
+						<div class="item-title">{{.Name}}</div>
+						<div class="item-body">
 							<i>{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}} —  {{svg "octicon-info" 16}} {{if .HasUsed}}{{ctx.Locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{DateUtils.AbsoluteShort .UpdatedUnix}}</span>{{else}}{{ctx.Locale.Tr "settings.no_activity"}}{{end}}</i>
 						</div>
 					</div>
-					<div class="flex-item-trailing">
+					<div class="item-trailing">
 						<button class="ui red tiny button delete-button" data-modal-id="delete-principal" data-url="{{$.Link}}/delete?type=principal" data-id="{{.ID}}">
 							{{ctx.Locale.Tr "settings.delete_key"}}
 						</button>

templates/user/settings/keys_ssh.tmpl

@@ -26,36 +26,36 @@
 			</button>
 		</form>
 	</div>
-	<div id="keys-ssh" class="flex-list">
-		<div class="flex-item">
+	<div id="keys-ssh" class="flex-divided-list items-with-main">
+		<div class="item">
 			<p>
 				{{ctx.Locale.Tr "settings.ssh_desc"}}<br>
 				{{ctx.Locale.Tr "settings.ssh_helper" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/connecting-to-github-with-ssh" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/troubleshooting-ssh"}}
 			</p>
 		</div>
 		{{if .DisableSSH}}
-			<div class="flex-item">
+			<div class="item">
 				{{ctx.Locale.Tr "settings.ssh_signonly"}}
 			</div>
 		{{end}}
 		{{range $index, $key := .Keys}}
-			<div class="flex-item">
-				<div class="flex-item-leading">
+			<div class="item">
+				<div class="item-leading">
 					<span class="{{if .HasRecentActivity}}tw-text-green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{ctx.Locale.Tr "settings.key_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</span>
 				</div>
-				<div class="flex-item-main">
+				<div class="item-main">
 						{{if .Verified}}
-							<div class="flex-item-title flex-text-block" data-tooltip-content="{{ctx.Locale.Tr "settings.ssh_key_verified_long"}}">{{svg "octicon-verified"}}{{ctx.Locale.Tr "settings.ssh_key_verified"}}</div>
+							<div class="item-title flex-text-block" data-tooltip-content="{{ctx.Locale.Tr "settings.ssh_key_verified_long"}}">{{svg "octicon-verified"}}{{ctx.Locale.Tr "settings.ssh_key_verified"}}</div>
 						{{end}}
-						<div class="flex-item-title">{{.Name}}</div>
-						<div class="flex-item-body">
+						<div class="item-title">{{.Name}}</div>
+						<div class="item-body">
 								{{.Fingerprint}}
 						</div>
-						<div class="flex-item-body">
+						<div class="item-body">
 								<i>{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}} —	{{svg "octicon-info"}} {{if .HasUsed}}{{ctx.Locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="tw-text-green"{{end}}>{{DateUtils.AbsoluteShort .UpdatedUnix}}</span>{{else}}{{ctx.Locale.Tr "settings.no_activity"}}{{end}}</i>
 						</div>
 				</div>
-				<div class="flex-item-trailing">
+				<div class="item-trailing">
 					<button class="ui red tiny button delete-button{{if index $.ExternalKeys $index}} disabled{{end}}" data-modal-id="delete-ssh" data-url="{{$.Link}}/delete?type=ssh" data-id="{{.ID}}"{{if index $.ExternalKeys $index}} title="{{ctx.Locale.Tr "settings.ssh_externally_managed"}}"{{end}}>
 						{{ctx.Locale.Tr "settings.delete_key"}}
 					</button>

templates/user/settings/organization.tmpl

@@ -10,19 +10,19 @@
 		</h4>
 		<div class="ui attached segment orgs">
 			{{if .Orgs}}
-				<div class="flex-list">
+				<div class="flex-divided-list items-with-main">
 					{{range .Orgs}}
-					<div class="flex-item">
-						<div class="flex-item-leading">
+					<div class="item">
+						<div class="item-leading">
 							{{ctx.AvatarUtils.Avatar . 28 "mini"}}
 						</div>
-						<div class="flex-item-main">
-							<div class="flex-item-title">{{template "shared/user/name" .}}</div>
+						<div class="item-main">
+							<div class="item-title">{{template "shared/user/name" .}}</div>
 							<div class="flex-text-body">
 								{{.Description}}
 							</div>
 						</div>
-						<div class="flex-item-trailing">
+						<div class="item-trailing">
 							<form>
 								<button class="ui red button delete-button" data-modal-id="leave-organization"
 												data-url="{{.OrganisationLink}}/members/action/leave" data-datauid="{{$.SignedUser.ID}}"

templates/user/settings/security/accountlinks.tmpl

@@ -21,25 +21,25 @@
 </h4>
 
 <div class="ui attached segment">
-	<div class="flex-list">
-		<div class="flex-item">
+	<div class="flex-divided-list items-with-main">
+		<div class="item">
 			{{ctx.Locale.Tr "settings.manage_account_links_desc"}}
 		</div>
 		{{range $loginSource, $provider := .AccountLinks}}
-			<div class="flex-item">
+			<div class="item">
 				{{$providerData := index $.OAuth2Providers $loginSource.Name}}
-				<div class="flex-item-leading">
+				<div class="item-leading">
 					{{$providerData.IconHTML 20}}
 				</div>
-				<div class="flex-item-main">
-					<span class="flex-item-title" data-tooltip-content="{{$provider}}">
+				<div class="item-main">
+					<span class="item-title" data-tooltip-content="{{$provider}}">
 						{{$loginSource.Name}}
 					</span>
 					{{if $loginSource.IsActive}}
 					<span class="flex-text-body tw-text-primary">{{ctx.Locale.Tr "repo.settings.active"}}</span>
 					{{end}}
 				</div>
-				<div class="flex-item-trailing">
+				<div class="item-trailing">
 					<button class="ui red tiny button delete-button" data-modal-id="delete-account-link" data-url="{{AppSubUrl}}/user/settings/security/account_link" data-id="{{$loginSource.ID}}">
 						{{ctx.Locale.Tr "settings.delete_key"}}
 					</button>

templates/user/settings/security/openid.tmpl

@@ -2,19 +2,19 @@
 	{{ctx.Locale.Tr "settings.manage_openid"}}
 </h4>
 <div class="ui attached segment">
-	<div class="flex-list">
-		<div class="flex-item">
+	<div class="flex-divided-list items-with-main">
+		<div class="item">
 			{{ctx.Locale.Tr "settings.openid_desc"}}
 		</div>
 		{{range .OpenIDs}}
-			<div class="flex-item tw-items-center">
-				<div class="flex-item-leading">
+			<div class="item tw-items-center">
+				<div class="item-leading">
 					{{svg "fontawesome-openid" 20}}
 				</div>
-				<div class="flex-item-main">
-					<div class="flex-item-title">{{.URI}}</div>
+				<div class="item-main">
+					<div class="item-title">{{.URI}}</div>
 				</div>
-				<div class="flex-item-trailing">
+				<div class="item-trailing">
 					<form action="{{AppSubUrl}}/user/settings/security/openid/toggle_visibility" method="post">
 						<input name="id" type="hidden" value="{{.ID}}">
 						{{if .Show}}

templates/user/settings/security/webauthn.tmpl

@@ -3,19 +3,19 @@
 	<p>{{ctx.Locale.Tr "settings.webauthn_desc" "https://w3c.github.io/webauthn/#webauthn-authenticator"}}</p>
 	<p>{{ctx.Locale.Tr "settings.webauthn_key_loss_warning"}} {{ctx.Locale.Tr "settings.webauthn_alternative_tip"}}</p>
 	{{template "user/auth/webauthn_error" .}}
-	<div class="flex-list">
+	<div class="flex-divided-list items-with-main">
 		{{range .WebAuthnCredentials}}
-			<div class="flex-item">
-				<div class="flex-item-leading">
+			<div class="item">
+				<div class="item-leading">
 					{{svg "octicon-key" 32}}
 				</div>
-				<div class="flex-item-main">
-					<div class="flex-item-title">{{.Name}}</div>
-					<div class="flex-item-body">
+				<div class="item-main">
+					<div class="item-title">{{.Name}}</div>
+					<div class="item-body">
 						<i>{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}}</i>
 					</div>
 				</div>
-				<div class="flex-item-trailing">
+				<div class="item-trailing">
 					<button class="ui red tiny button delete-button" data-modal-id="delete-registration" data-url="{{$.Link}}/webauthn/delete" data-id="{{.ID}}">
 					{{ctx.Locale.Tr "settings.delete_key"}}
 					</button>