Add run status in action view page (#23212)

Before:

![image](https://user-images.githubusercontent.com/18380374/222084932-a7643fbe-2d9f-48db-b25d-74ace49e03f4.png)

![image](https://user-images.githubusercontent.com/18380374/222084887-fde3500d-dad3-4902-9c82-c4f71f23f83b.png)

After:

![image](https://user-images.githubusercontent.com/18380374/222084565-eeef1110-9d9d-40b4-a26b-fbd5a307f14e.png)

![image](https://user-images.githubusercontent.com/18380374/222084728-6c96d7c1-a399-43d5-8369-392ad5017b7f.png)

---------

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

1 files changed, 13 insertions, 2 deletions

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 762067f523..a5c12c754e 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -2,7 +2,13 @@
   <div class="action-view-container">
     <div class="action-view-header">
       <div class="action-info-summary">
-        {{ run.title }}
+        <SvgIcon name="octicon-check-circle-fill" size="20" class="green" v-if="run.status === 'success'"/>
+        <SvgIcon name="octicon-clock" size="20" class="ui text yellow" v-else-if="run.status === 'waiting'"/>
+        <SvgIcon name="octicon-meter" size="20" class="ui text yellow" class-name="job-status-rotate" v-else-if="run.status === 'running'"/>
+        <SvgIcon name="octicon-x-circle-fill" size="20" class="red" v-else/>
+        <div class="action-title">
+          {{ run.title }}
+        </div>
         <button class="run_approve" @click="approveRun()" v-if="run.canApprove">
           <i class="play circle outline icon"/>
         </button>
@@ -99,6 +105,7 @@ const sfc = {
       run: {
         link: '',
         title: '',
+        status: '',
         canCancel: false,
         canApprove: false,
         done: false,
@@ -327,7 +334,11 @@ export function initRepositoryActionView() {
 .action-info-summary {
   font-size: 150%;
   height: 20px;
-  padding: 0 10px;
+  display: flex;
+
+  .action-title {
+    padding: 0 5px;
+  }
 }
 
 // ================