enhance(actions): Make Summary UI more beautiful with more infos (#37824)

## Summary

- Redesign the Actions run summary header to follow GitHub Actions
layout: trigger info on the left, Status / Total duration / Artifacts
columns inline on the right
- Expose trigger user avatar, pull request link, and PR head branch info
from the run view API
- Update the workflow graph header to show the workflow filename (linked
to the run workflow file) and `on: <event>`, while keeping the
jobs/dependencies/success stats line
- Remove the redundant commit/workflow metadata row below the run title;
that information now lives in the summary bar

New:
<img width="1564" height="639"
src="https://github.com/user-attachments/assets/e6bc1623-c5fc-4e97-abc9-fde7f3c6aef9"
/>

Old:
<img width="2038" height="1038"
src="https://github.com/user-attachments/assets/0857f19a-8d3a-4da2-82fd-e9ebeb200062"
/>

Replaces https://github.com/go-gitea/gitea/pull/36721

---------

Co-authored-by: Giteabot <teabot@gitea.io>

web_src/js/components/RepoActionView.vue

@@ -85,6 +85,16 @@ function formatCurrentAttemptTitle(attempt: ActionsRunAttempt) {
   return attempt.latest ? `${locale.latest} #${attempt.attempt}` : formatAttemptTitle(attempt);
 }
 
+const backLink = computed(() => {
+  if (run.value.pullRequest) {
+    return {href: run.value.pullRequest.link, prefix: locale.backToPullRequest, name: run.value.pullRequest.index};
+  }
+  if (run.value.workflowLink) {
+    return {href: run.value.workflowLink, prefix: locale.backToWorkflow, name: run.value.workflowID.replace(/\.(yml|yaml)$/i, '')};
+  }
+  return null;
+});
+
 function buildArtifactLink(name: string) {
   const searchString = run.value.runAttempt > 0 ? `?attempt=${run.value.runAttempt}` : '';
   return `${run.value.link}/artifacts/${encodeURIComponent(name)}${searchString}`;
@@ -108,9 +118,13 @@ async function deleteArtifact(name: string) {
   <!-- make the view container full width to make users easier to read logs -->
   <div class="ui fluid container">
     <div class="action-view-header">
+      <a v-if="backLink" class="action-view-back silenced" :href="backLink.href">
+        <SvgIcon name="octicon-arrow-left" :size="14"/>
+        <span>{{ backLink.prefix }} <span class="action-view-back-name">{{ backLink.name }}</span></span>
+      </a>
       <div class="action-info-summary">
         <div class="action-info-summary-title">
-          <ActionStatusIcon :locale-status="locale.status[run.status]" :status="run.status" :size="20" icon-variant="circle-fill"/>
+          <ActionStatusIcon :locale-status="locale.status[run.status]" :status="run.status" :size="22" icon-variant="circle-fill"/>
           <!-- eslint-disable-next-line vue/no-v-html -->
           <h2 class="action-info-summary-title-text" v-html="run.titleHTML"/>
         </div>
@@ -172,26 +186,6 @@ async function deleteArtifact(name: string) {
           </div>
         </div>
       </div>
-      <div class="action-commit-summary">
-        <span>
-          <a v-if="run.workflowLink" class="muted" :href="run.workflowLink"><b>{{ run.workflowID }}</b></a>
-          <b v-else>{{ run.workflowID }}</b>
-          :
-        </span>
-        <template v-if="run.isSchedule">
-          {{ locale.scheduled }}
-        </template>
-        <template v-else>
-          {{ locale.commit }}
-          <a class="muted" :href="run.commit.link">{{ run.commit.shortSHA }}</a>
-          {{ locale.pushedBy }}
-          <a class="muted" :href="run.commit.pusher.link">{{ run.commit.pusher.displayName }}</a>
-        </template>
-        <span class="ui label tw-max-w-full" v-if="run.commit.shortSHA">
-          <span v-if="run.commit.branch.isDeleted" class="gt-ellipsis tw-line-through" :data-tooltip-content="run.commit.branch.name">{{ run.commit.branch.name }}</span>
-          <a v-else class="gt-ellipsis" :href="run.commit.branch.link" :data-tooltip-content="run.commit.branch.name">{{ run.commit.branch.name }}</a>
-        </span>
-      </div>
     </div>
     <div class="action-view-body">
       <div class="action-view-left">
@@ -287,6 +281,7 @@ async function deleteArtifact(name: string) {
           v-if="!props.jobId"
           :store="store"
           :locale="locale"
+          :artifact-count="artifacts.length"
         />
         <ActionRunJobView
           v-else
@@ -311,9 +306,30 @@ async function deleteArtifact(name: string) {
 /* action view header */
 
 .action-view-header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
   margin-top: 8px;
 }
 
+.action-view-back {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  gap: 4px;
+  font-size: 13px;
+  color: var(--color-text-light-1);
+}
+
+.action-view-back:hover {
+  color: var(--color-primary);
+}
+
+.action-view-back-name {
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text);
+}
+
 .action-info-summary {
   display: flex;
   flex-wrap: wrap;
@@ -340,21 +356,6 @@ async function deleteArtifact(name: string) {
   white-space: nowrap;
 }
 
-.action-commit-summary {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 5px;
-  margin-left: 28px;
-}
-
-@media (max-width: 767.98px) {
-  .action-commit-summary {
-    margin-left: 0;
-    margin-top: 8px;
-  }
-}
-
 /* ================ */
 /* action view left */