fix: improve actions status icons and texts (#37206)

Action runs, jobs and steps have 8 statuses but the UI only showed 5
(from the commit status api) for the latter two. Align all 8 to GitHub
as closely as possible:

  - waiting — `octicon-circle` (hollow circle), gray
  - blocked — `octicon-blocked` (slashed circle), yellow
  - running — `gitea-running` (rotating spinner), yellow
  - cancelled — `octicon-stop` (gray), was `octicon-x` (red)

Descriptions also aligned with GitHub:

  - "Has started running" → "In progress"
  - "Has been cancelled" → "Cancelled after {dur}"
  - "Has been skipped" → "Skipped"

Fixes: https://github.com/go-gitea/gitea/issues/32228

---------

Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>
Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: Claude (Opus 4.6) <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Nicolas <bircni@icloud.com>

web_src/js/components/ActionRunJobView.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import {nextTick, onBeforeUnmount, onMounted, ref, toRefs, watch} from 'vue';
 import {SvgIcon} from '../svg.ts';
-import ActionRunStatus from './ActionRunStatus.vue';
+import ActionStatusIcon from './ActionStatusIcon.vue';
 import {addDelegatedEventListener, createElementFromAttrs, toggleElem} from '../utils/dom.ts';
 import {formatDatetime} from '../utils/time.ts';
 import {POST} from '../modules/fetch.ts';
 import type {IntervalId} from '../types.ts';
 import {toggleFullScreen} from '../utils.ts';
 import {localUserSettings} from '../modules/user-settings.ts';
-import type {ActionsArtifact, ActionsRun, ActionsRunStatus} from '../modules/gitea-actions.ts';
+import type {ActionsArtifact, ActionsRun, ActionsStatus} from '../modules/gitea-actions.ts';
 import {
   type ActionRunViewStore,
   createLogLineMessage,
@@ -26,7 +26,7 @@ function isLogElementInViewport(el: Element, {extraViewPortHeight}={extraViewPor
 type Step = {
   summary: string,
   duration: string,
-  status: ActionsRunStatus,
+  status: ActionsStatus,
 }
 
 type JobStepState = {
@@ -352,11 +352,11 @@ async function loadJob() {
   }
 }
 
-function isDone(status: ActionsRunStatus) {
+function isDone(status: ActionsStatus) {
   return ['success', 'skipped', 'failure', 'cancelled'].includes(status);
 }
 
-function isExpandable(status: ActionsRunStatus) {
+function isExpandable(status: ActionsStatus) {
   return ['success', 'running', 'failure', 'cancelled'].includes(status);
 }
 
@@ -466,7 +466,7 @@ async function hashChangeListener() {
           :name="currentJobStepsStates[stepIdx].expanded ? 'octicon-chevron-down' : 'octicon-chevron-right'"
           :class="['tw-mr-2', !isExpandable(jobStep.status) && 'tw-invisible']"
         />
-        <ActionRunStatus :status="jobStep.status" class="tw-mr-2"/>
+        <ActionStatusIcon :status="jobStep.status" icon-variant="circle-fill" class="tw-mr-2"/>
         <span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span>
         <span class="step-summary-duration">{{ jobStep.duration }}</span>
       </div>