feat(ui): add tests summary in the dashboard

[webfansplz]

Closes #2022

[userquin]

@sheremet-va the entry was commented out by Anthony to simplify the dashboard, the PR LGTM maybe @antfu wants to keep it...

[antfu]

I was not satisfied with the design and didn't figure out a better way to present it. We could have it if it's really needed, but at least we should make the slashes centered 😅

[userquin]

@antfu running the ui locally with current main it looks good: we only need to comment out the bg-header div

[userquin]

maybe small numbers without some entry, I'm reviewing it...

[userquin]

@webfansplz can you test commenting out the bg-header container?

<template>
  <div gap-0 flex="~ col gap-4" h-full justify-center items-center>
    <!-- div bg-header rounded-lg p="y4 x2" -->
    <section aria-labelledby="tests" m="y-4 x-2">
      <TestsEntry />
    </section>
    <TestFilesEntry />
    <!-- /div -->
  </div>
</template>

and changing packages/ui/client/components/dashboard/DashboardEntry.vue with this one (just changing some attrs to use vertical separators)?

<script setup lang="ts">
withDefaults(defineProps<{ tail?: boolean }>(), { tail: false })
</script>

<template>
  <div p-2 text-center flex>
    <div>
      <div text-4xl>
        <slot name="body" />
      </div>
      <div text-md>
        <slot name="header" />
      </div>
    </div>
    <div v-if="!tail" data-testid="tail" my-0 op50 w-2px bg-current origin-center rotate-0 translate-x-3 />
  </div>
</template>

[webfansplz]

@webfansplz can you test commenting out the bg-header container?

<template>
  <div gap-0 flex="~ col gap-4" h-full justify-center items-center>
    <!-- div bg-header rounded-lg p="y4 x2" -->
    <section aria-labelledby="tests" m="y-4 x-2">
      <TestsEntry />
    </section>
    <TestFilesEntry />
    <!-- /div -->
  </div>
</template>

and changing packages/ui/client/components/dashboard/DashboardEntry.vue with this one (just changing some attrs to use vertical separators)?

<script setup lang="ts">
withDefaults(defineProps<{ tail?: boolean }>(), { tail: false })
</script>

<template>
  <div p-2 text-center flex>
    <div>
      <div text-4xl>
        <slot name="body" />
      </div>
      <div text-md>
        <slot name="header" />
      </div>
    </div>
    <div v-if="!tail" data-testid="tail" my-0 op50 w-2px bg-current origin-center rotate-0 translate-x-3 />
  </div>
</template>

Updated.

[antfu]

Maybe we just remove the divider and use justify-evenly?

[userquin]

@antfu I will try to also fix some flickering since numbers will change , I will also add back the todo, since entries only shown when present:

[userquin]

@antfu check the capture here: https://streamable.com/rx1i4m