feat(web): clear failed jobs (#5423)

* add clear failed jobs button

* refactor: clean up code

* chore: open api

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

web/src/lib/components/admin-page/jobs/job-tile.svelte

@@ -5,6 +5,7 @@
   import Badge from '$lib/components/elements/badge.svelte';
   import JobTileButton from './job-tile-button.svelte';
   import JobTileStatus from './job-tile-status.svelte';
+  import Button from '$lib/components/elements/buttons/button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import {
     mdiAlertCircle,
@@ -55,12 +56,23 @@
         <div class="flex gap-2">
           {#if jobCounts.failed > 0}
             <Badge color="primary">
-              {jobCounts.failed.toLocaleString($locale)} failed
+              <span class="text-sm">
+                {jobCounts.failed.toLocaleString($locale)} failed
+              </span>
+              <Button
+                size="tiny"
+                shadow={false}
+                on:click={() => dispatch('command', { command: JobCommand.ClearFailed, force: false })}
+              >
+                <Icon path={mdiClose} size="18" />
+              </Button>
             </Badge>
           {/if}
-          {#if jobCounts.delayed > 0}
+          {#if jobCounts.delayed > 0 || true}
             <Badge color="secondary">
-              {jobCounts.delayed.toLocaleString($locale)} delayed
+              <span class="text-sm">
+                {jobCounts.delayed.toLocaleString($locale)} delayed
+              </span>
             </Badge>
           {/if}
         </div>

web/src/lib/components/elements/badge.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <span
-  class="inline-block h-min whitespace-nowrap px-4 pb-[0.55em] pt-[0.55em] text-center align-baseline text-xs leading-none {colorClasses[
+  class="inline-block h-min whitespace-nowrap px-3 py-1 text-center align-baseline text-xs leading-none {colorClasses[
     color
   ]}"
   class:rounded-md={rounded === true}

web/src/lib/components/elements/buttons/button.svelte

@@ -11,7 +11,7 @@
     | 'transparent-gray'
     | 'dark-gray'
     | 'overlay-primary';
-  export type Size = 'icon' | 'link' | 'sm' | 'base' | 'lg';
+  export type Size = 'tiny' | 'icon' | 'link' | 'sm' | 'base' | 'lg';
   export type Rounded = 'lg' | '3xl' | 'full' | false;
   export type Shadow = 'md' | false;
 </script>
@@ -46,6 +46,7 @@
   };
 
   const sizeClasses: Record<Size, string> = {
+    tiny: 'p-0 ml-2 mr-0 align-top',
     icon: 'p-2.5',
     link: 'p-2 font-medium',
     sm: 'px-4 py-2 text-sm font-medium',