[FEAT] Visual separation between types of attachments

- Add a visual (but still semantic way) separation between Forgejo's
generated attachments and the user's uploaded ones.
- The styling was first done by `ul` element, but is moved to the
individual list items to have better control over them.
- Add tooltip explaining the attachment was generated by Forgejo.
- Remove the tooltip of the other attachments and 'simplify' them into a text.
- Resolves #2893

Co-authored-by: 0ko <0ko@noreply.codeberg.org>

options/locale/locale_en-US.ini

@@ -2632,11 +2632,12 @@ release.tag_name_invalid = The tag name is not valid.
 release.tag_name_protected = The tag name is protected.
 release.tag_already_exist = This tag name already exists.
 release.downloads = Downloads
-release.download_count = Downloads: %s
+release.download_count = %s downloads
 release.add_tag_msg = Use the title and content of release as tag message.
 release.add_tag = Create Tag Only
 release.releases_for = Releases for %s
 release.tags_for = Tags for %s
+release.system_generated = This attachment is automatically generated.
 
 branch.name = Branch name
 branch.already_exists = A branch named "%s" already exists.

templates/repo/release/list.tmpl

@@ -67,13 +67,21 @@
 								{{ctx.Locale.Tr "repo.release.downloads"}}
 							</summary>
 							<ul class="list">
+								{{$hasReleaseAttachment := gt (len $release.Attachments) 0}}
 								{{if and (not $.DisableDownloadSourceArchives) (not $release.IsDraft) ($.Permission.CanRead $.UnitTypeCode)}}
 									<li>
 										<a class="archive-link" href="{{$.RepoLink}}/archive/{{$release.TagName | PathEscapeSegments}}.zip" rel="nofollow"><strong>{{svg "octicon-file-zip" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.release.source_code"}} (ZIP)</strong></a>
+										<span data-tooltip-content="{{ctx.Locale.Tr "repo.release.system_generated"}}">
+											{{svg "octicon-info"}}
+										</span>
 									</li>
-									<li>
+									<li class="{{if $hasReleaseAttachment}}start-gap{{end}}">
 										<a class="archive-link" href="{{$.RepoLink}}/archive/{{$release.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow"><strong>{{svg "octicon-file-zip" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.release.source_code"}} (TAR.GZ)</strong></a>
+										<span data-tooltip-content="{{ctx.Locale.Tr "repo.release.system_generated"}}">
+											{{svg "octicon-info"}}
+										</span>
 									</li>
+									{{if $hasReleaseAttachment}}<hr>{{end}}
 								{{end}}
 								{{range $release.Attachments}}
 									<li>
@@ -81,10 +89,7 @@
 											<strong>{{svg "octicon-package" 16 "tw-mr-1"}}{{.Name}}</strong>
 										</a>
 										<div>
-											<span class="text grey">{{.Size | ctx.Locale.TrSize}}</span>
+											<span class="text grey">{{ctx.Locale.Tr "repo.release.download_count" (ctx.Locale.PrettyNumber .DownloadCount)}} · {{.Size | ctx.Locale.TrSize}}</span>
-											<span data-tooltip-content="{{ctx.Locale.Tr "repo.release.download_count" (ctx.Locale.PrettyNumber .DownloadCount)}}">
-												{{svg "octicon-info"}}
-											</span>
 										</div>
 									</li>
 								{{end}}

templates/repo/release/new.tmpl

@@ -64,10 +64,7 @@
 						<div class="flex-text-inline tw-flex-1">
 							<input name="attachment-edit-{{.UUID}}"  class="attachment_edit" required value="{{.Name}}">
 							<input name="attachment-del-{{.UUID}}" type="hidden" value="false">
-							<span class="ui text grey tw-whitespace-nowrap">{{.Size | ctx.Locale.TrSize}}</span>
+							<span class="ui text grey tw-whitespace-nowrap">{{ctx.Locale.Tr "repo.release.download_count" (ctx.Locale.PrettyNumber .DownloadCount)}} · {{.Size | ctx.Locale.TrSize}}</span>
-							<span data-tooltip-content="{{ctx.Locale.Tr "repo.release.download_count" (ctx.Locale.PrettyNumber .DownloadCount)}}">
-								{{svg "octicon-info"}}
-							</span>
 						</div>
 						<a class="ui mini compact red button remove-rel-attach" data-id="{{.ID}}" data-uuid="{{.UUID}}">
 							{{ctx.Locale.Tr "remove"}}

web_src/css/repo/release-tag.css

@@ -33,20 +33,32 @@
 
 .repository.releases #release-list > li .detail .download .list {
   padding-left: 0;
-  border: 1px solid var(--color-secondary);
-  border-radius: var(--border-radius);
-  background: var(--color-light);
 }
 
 .repository.releases #release-list > li .detail .download .list li {
+  background: var(--color-light);
+  border: 1px solid var(--color-secondary);
+  border-top: none;
   display: flex;
   justify-content: space-between;
   padding: 8px;
-  border-bottom: 1px solid var(--color-secondary);
 }
 
-.repository.releases #release-list > li .detail .download .list li:last-child {
+.repository.releases #release-list > li .detail .download .list :is(li:first-child, .start-gap + hr + li) {
-  border-bottom: none;
+  border-top: 1px solid var(--color-secondary);
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+}
+
+.repository.releases #release-list > li .detail .download .list :is(li:last-child, .start-gap) {
+  border-bottom: 1px solid var(--color-secondary);
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+}
+
+.repository.releases #release-list > li .detail .download .list hr {
+  height: 8px;
+  margin: 0;
 }
 
 .repository.releases #release-list > li .detail .dot {