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/repo/settings/actions_general.tmpl

@@ -62,18 +62,18 @@
 	</h4>
 	{{if len .CollaborativeOwners}}
 	<div class="ui attached segment">
-		<div class="flex-list">
+		<div class="flex-divided-list items-with-main">
 			{{range .CollaborativeOwners}}
-			<div class="flex-item tw-items-center">
-				<div class="flex-item-leading">
+			<div class="item tw-items-center">
+				<div class="item-leading">
 					<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 32}}</a>
 				</div>
-				<div class="flex-item-main">
-					<div class="flex-item-title">
+				<div class="item-main">
+					<div class="item-title">
 						{{template "shared/user/name" .}}
 					</div>
 				</div>
-				<div class="flex-item-trailing">
+				<div class="item-trailing">
 					<button class="ui red tiny button inline link-action"
 						data-url="{{$.Link}}/collaborative_owner/delete?id={{.ID}}"
 						data-modal-confirm-header="{{ctx.Locale.Tr "actions.general.remove_collaborative_owner"}}"

templates/repo/settings/branches.tmpl

@@ -37,18 +37,18 @@
 			</h4>
 
 			<div class="ui attached segment">
-				<div class="flex-list" id="protected-branches-list" data-update-priority-url="{{$.Repository.Link}}/settings/branches/priority">
+				<div class="flex-divided-list items-with-main" id="protected-branches-list" data-update-priority-url="{{$.Repository.Link}}/settings/branches/priority">
 					{{range .ProtectedBranches}}
-						<div class="flex-item tw-items-center item" data-id="{{.ID}}" >
+						<div class="item tw-items-center" data-id="{{.ID}}" >
 							<div class="drag-handle tw-cursor-grab">
 								{{svg "octicon-grabber" 16}}
 							</div>
-							<div class="flex-item-main">
-								<div class="flex-item-title">
+							<div class="item-main">
+								<div class="item-title">
 									<div class="ui basic primary label">{{.RuleName}}</div>
 								</div>
 							</div>
-							<div class="flex-item-trailing">
+							<div class="item-trailing">
 								<a class="ui tiny button" href="{{$.Repository.Link}}/settings/branches/edit?rule_name={{.RuleName}}">{{ctx.Locale.Tr "repo.settings.edit_protected_branch"}}</a>
 								<button class="ui red tiny button link-action" data-modal-confirm="#repo-branch-protection-delete-modal" data-url="{{$.Repository.Link}}/settings/branches/{{.ID}}/delete?id={{.ID}}">
 									{{ctx.Locale.Tr "repo.settings.protected_branch.delete_rule"}}
@@ -56,7 +56,7 @@
 							</div>
 						</div>
 					{{else}}
-						<div class="flex-item tw-text-center">
+						<div class="item tw-text-center">
 							{{ctx.Locale.Tr "repo.settings.no_protected_branch"}}
 						</div>
 					{{end}}

templates/repo/settings/collaboration.tmpl

@@ -5,18 +5,18 @@
 		</h4>
 		{{if .Collaborators}}
 		<div class="ui attached segment">
-			<div class="flex-list">
+			<div class="flex-divided-list items-with-main">
 				{{range .Collaborators}}
-					<div class="flex-item tw-items-center">
-						<div class="flex-item-leading">
+					<div class="item tw-items-center">
+						<div class="item-leading">
 							<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 32}}</a>
 						</div>
-						<div class="flex-item-main">
-							<div class="flex-item-title">
+						<div class="item-main">
+							<div class="item-title">
 								{{template "shared/user/name" .}}
 							</div>
 						</div>
-						<div class="flex-item-trailing">
+						<div class="item-trailing">
 							<div class="flex-text-block">
 								{{svg "octicon-shield-lock"}}
 								<div class="ui dropdown custom access-mode" data-url="{{$.Link}}/access_mode" data-uid="{{.ID}}" data-last-value="{{.Collaboration.Mode}}">
@@ -54,14 +54,14 @@
 			{{$allowedToChangeTeams := (or (.Org.RepoAdminChangeTeamAccess) (.Permission.IsOwner))}}
 			{{if .Teams}}
 			<div class="ui attached segment">
-				<div class="flex-list">
+				<div class="flex-divided-list items-with-main">
 					{{range $t, $team := .Teams}}
-						<div class="flex-item">
-							<div class="flex-item-main">
-								<a class="flex-item-title tw-text-primary" href="{{AppSubUrl}}/org/{{$.OrgName|PathEscape}}/teams/{{.LowerName|PathEscape}}">
+						<div class="item">
+							<div class="item-main">
+								<a class="item-title tw-text-primary" href="{{AppSubUrl}}/org/{{$.OrgName|PathEscape}}/teams/{{.LowerName|PathEscape}}">
 									{{.Name}}
 								</a>
-								<div class="flex-item-body flex-text-block">
+								<div class="item-body flex-text-block">
 									{{/*FIXME: TEAM-UNIT-PERMISSION this display is not right, search the fixme keyword to see more details */}}
 									{{svg "octicon-shield-lock"}}
 									{{if eq .AccessMode 0}}
@@ -80,7 +80,7 @@
 								</div>
 								{{if or (eq .AccessMode 0) (eq .AccessMode 1) (eq .AccessMode 2)}}
 									{{$first := true}}
-									<div class="flex-item-body" data-tooltip-content="{{ctx.Locale.Tr "repo.settings.change_team_permission_tip"}}">
+												<div class="item-body" data-tooltip-content="{{ctx.Locale.Tr "repo.settings.change_team_permission_tip"}}">
 										Units:
 										{{range $u, $unit := $.Units}}
 											{{- if and ($.Repo.UnitEnabled ctx $unit.Type) ($team.UnitEnabled ctx $unit.Type) -}}
@@ -93,7 +93,7 @@
 								{{end}}
 							</div>
 							{{if $allowedToChangeTeams}}
-								<div class="flex-item-trailing" {{if .IncludesAllRepositories}} data-tooltip-content="{{ctx.Locale.Tr "repo.settings.delete_team_tip"}}"{{end}}>
+								<div class="item-trailing" {{if .IncludesAllRepositories}} data-tooltip-content="{{ctx.Locale.Tr "repo.settings.delete_team_tip"}}"{{end}}>
 									<button class="ui red tiny button link-action {{if .IncludesAllRepositories}}disabled{{end}}" data-modal-confirm="#repo-collaborator-delete-modal" data-url="{{$.Link}}/team/delete?id={{.ID}}">
 											{{ctx.Locale.Tr "repo.settings.delete_collaborator"}}
 									</button>

templates/repo/settings/deploy_keys.tmpl

@@ -42,22 +42,22 @@
 				</form>
 			</div>
 			{{if .Deploykeys}}
-				<div class="flex-list">
+				<div class="flex-divided-list items-with-main">
 					{{range .Deploykeys}}
-						<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="flex-item-title">{{.Name}}</div>
-								<div class="flex-item-body">
+							<div class="item-main">
+								<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}} - <span>{{ctx.Locale.Tr "settings.can_read_info"}}{{if not .IsReadOnly}} / {{ctx.Locale.Tr "settings.can_write_info"}} {{end}}</span></i>
 								</div>
 							</div>
-							<div class="flex-item-trailing">
+							<div class="item-trailing">
 								<button class="ui red tiny button link-action" data-modal-confirm="#repo-deploy-key-delete-modal" data-url="{{$.Link}}/delete?id={{.ID}}">
 									{{ctx.Locale.Tr "settings.delete_key"}}
 								</button>

templates/repo/settings/options.tmpl

@@ -761,18 +761,18 @@
 			{{ctx.Locale.Tr "repo.settings.danger_zone"}}
 		</h4>
 		<div class="ui attached error danger segment">
-			<div class="flex-list">
+			<div class="flex-divided-list items-with-main">
 				{{if not .Repository.IsFork}}
-					<div class="flex-item tw-items-center">
-						<div class="flex-item-main">
-							<div class="flex-item-title">{{ctx.Locale.Tr "repo.visibility"}}</div>
+					<div class="item tw-items-center">
+						<div class="item-main">
+							<div class="item-title">{{ctx.Locale.Tr "repo.visibility"}}</div>
 							{{if .Repository.IsPrivate}}
-								<div class="flex-item-body">{{ctx.Locale.Tr "repo.settings.visibility.public.text"}}</div>
+								<div class="item-body">{{ctx.Locale.Tr "repo.settings.visibility.public.text"}}</div>
 							{{else}}
-								<div class="flex-item-body">{{ctx.Locale.Tr "repo.settings.visibility.private.text"}}</div>
+								<div class="item-body">{{ctx.Locale.Tr "repo.settings.visibility.private.text"}}</div>
 							{{end}}
 						</div>
-						<div class="flex-item-trailing">
+						<div class="item-trailing">
 							<button class="ui basic red show-modal button" data-modal="#visibility-repo-modal">
 								{{if .Repository.IsPrivate}}
 									{{ctx.Locale.Tr "repo.settings.visibility.public.button"}}
@@ -784,31 +784,31 @@
 					</div>
 				{{end}}
 				{{if .Repository.IsMirror}}
-					<div class="flex-item">
-						<div class="flex-item-main">
-							<div class="flex-item-title">{{ctx.Locale.Tr "repo.settings.convert"}}</div>
-							<div class="flex-item-body">{{ctx.Locale.Tr "repo.settings.convert_desc"}}</div>
+					<div class="item">
+						<div class="item-main">
+							<div class="item-title">{{ctx.Locale.Tr "repo.settings.convert"}}</div>
+							<div class="item-body">{{ctx.Locale.Tr "repo.settings.convert_desc"}}</div>
 						</div>
-						<div class="flex-item-trailing">
+						<div class="item-trailing">
 							<button class="ui basic red show-modal button" data-modal="#convert-mirror-repo-modal">{{ctx.Locale.Tr "repo.settings.convert"}}</button>
 						</div>
 					</div>
 				{{end}}
 				{{if .CanConvertFork}}
-					<div class="flex-item">
-						<div class="flex-item-main">
-							<div class="flex-item-title">{{ctx.Locale.Tr "repo.settings.convert_fork"}}</div>
-							<div class="flex-item-body">{{ctx.Locale.Tr "repo.settings.convert_fork_desc"}}</div>
+					<div class="item">
+						<div class="item-main">
+							<div class="item-title">{{ctx.Locale.Tr "repo.settings.convert_fork"}}</div>
+							<div class="item-body">{{ctx.Locale.Tr "repo.settings.convert_fork_desc"}}</div>
 						</div>
-						<div class="flex-item-trailing">
+						<div class="item-trailing">
 							<button class="ui basic red show-modal button" data-modal="#convert-fork-repo-modal">{{ctx.Locale.Tr "repo.settings.convert_fork"}}</button>
 						</div>
 					</div>
 				{{end}}
-				<div class="flex-item">
-					<div class="flex-item-main">
-						<div class="flex-item-title">{{ctx.Locale.Tr "repo.settings.transfer"}}</div>
-						<div class="flex-item-body">
+				<div class="item">
+					<div class="item-main">
+						<div class="item-title">{{ctx.Locale.Tr "repo.settings.transfer"}}</div>
+						<div class="item-body">
 							{{if .RepoTransfer}}
 								{{ctx.Locale.Tr "repo.settings.transfer_started" .RepoTransfer.Recipient.DisplayName}}
 							{{else}}
@@ -816,7 +816,7 @@
 							{{end}}
 						</div>
 					</div>
-					<div class="flex-item-trailing">
+					<div class="item-trailing">
 						{{if .RepoTransfer}}
 							<form class="ui form" action="{{.Link}}" method="post">
 								<input type="hidden" name="action" value="cancel_transfer">
@@ -828,37 +828,37 @@
 					</div>
 				</div>
 				{{if .Permission.CanRead ctx.Consts.RepoUnitTypeWiki}}
-					<div class="flex-item">
-						<div class="flex-item-main">
-							<div class="flex-item-title">{{ctx.Locale.Tr "repo.settings.wiki_delete"}}</div>
-							<div class="flex-item-body">{{ctx.Locale.Tr "repo.settings.wiki_delete_desc"}}</div>
+					<div class="item">
+						<div class="item-main">
+							<div class="item-title">{{ctx.Locale.Tr "repo.settings.wiki_delete"}}</div>
+							<div class="item-body">{{ctx.Locale.Tr "repo.settings.wiki_delete_desc"}}</div>
 						</div>
-						<div class="flex-item-trailing">
+						<div class="item-trailing">
 							<button class="ui basic red show-modal button" data-modal="#delete-wiki-modal">{{ctx.Locale.Tr "repo.settings.wiki_delete"}}</button>
 						</div>
 					</div>
 				{{end}}
-				<div class="flex-item">
-					<div class="flex-item-main">
-						<div class="flex-item-title">{{ctx.Locale.Tr "repo.settings.delete"}}</div>
-						<div class="flex-item-body">{{ctx.Locale.Tr "repo.settings.delete_desc"}}</div>
+				<div class="item">
+					<div class="item-main">
+						<div class="item-title">{{ctx.Locale.Tr "repo.settings.delete"}}</div>
+						<div class="item-body">{{ctx.Locale.Tr "repo.settings.delete_desc"}}</div>
 					</div>
-					<div class="flex-item-trailing">
+					<div class="item-trailing">
 						<button class="ui basic red show-modal button" data-modal="#delete-repo-modal">{{ctx.Locale.Tr "repo.settings.delete"}}</button>
 					</div>
 				</div>
 				{{if not .Repository.IsMirror}}
-					<div class="flex-item tw-items-center">
-						<div class="flex-item-main">
+					<div class="item tw-items-center">
+						<div class="item-main">
 							{{if .Repository.IsArchived}}
-								<div class="flex-item-title">{{ctx.Locale.Tr "repo.settings.unarchive.header"}}</div>
-								<div class="flex-item-body">{{ctx.Locale.Tr "repo.settings.unarchive.text"}}</div>
+								<div class="item-title">{{ctx.Locale.Tr "repo.settings.unarchive.header"}}</div>
+								<div class="item-body">{{ctx.Locale.Tr "repo.settings.unarchive.text"}}</div>
 							{{else}}
-								<div class="flex-item-title">{{ctx.Locale.Tr "repo.settings.archive.header"}}</div>
-								<div class="flex-item-body">{{ctx.Locale.Tr "repo.settings.archive.text"}}</div>
+								<div class="item-title">{{ctx.Locale.Tr "repo.settings.archive.header"}}</div>
+								<div class="item-body">{{ctx.Locale.Tr "repo.settings.archive.text"}}</div>
 							{{end}}
 						</div>
-						<div class="flex-item-trailing">
+						<div class="item-trailing">
 							<button class="ui basic red show-modal button" data-modal="#archive-repo-modal">
 								{{if .Repository.IsArchived}}
 									{{ctx.Locale.Tr "repo.settings.unarchive.button"}}