lukaszraczylo/ghtracker
1
0
Fork 0
mirror of https://github.com/lukaszraczylo/ghtracker.git synced 2026-10-15 01:07:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add a progress loading screen and lazy project list

Browse Source 
The loading screen shows live scan progress from the server, with a pulsing outline of the dashboard. The server now reports how many repositories the running scan has finished.

The project list renders 20 rows first and adds more as the end scrolls into view. Groups on very wide screens fill two balanced columns, the fact figures sit in a row under the health strip, and the headline counts match the rows listed below it.
This commit is contained in:
lukaszraczylo
2026-10-02 04:50:38 +01:00
parent 1852ea0885
commit a56a12a6e0
19 changed files with 552 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FleetOverview.vue
+38 -31
View File
@@ -56,10 +56,7 @@ const rows = computed<{ label: string; value: number; icon: IconDefinition; tone
</script>
<template>
<section
class="grid grid-cols-[minmax(0,1fr)] items-end gap-x-14 gap-y-8 lg:grid-cols-[minmax(0,1fr)_22rem]"
aria-label="Fleet status"
>
<section class="flex flex-col gap-7 sm:gap-8" aria-label="Fleet status">
<div>
<p class="text-muted-foreground mb-3 text-sm" data-test="scope">
<template v-if="blockCount > 0"
@@ -68,7 +65,7 @@ const rows = computed<{ label: string; value: number; icon: IconDefinition; tone
<template v-else>All {{ repos.length }} projects are healthy</template>
</p>
<h1
class="flex flex-wrap items-baseline gap-x-6 gap-y-1 sm:gap-x-10 font-semibold tracking-tight"
class="flex flex-wrap items-baseline gap-x-6 gap-y-1 font-semibold tracking-tight sm:gap-x-10"
data-test="headline"
>
<template v-if="crit > 0 || warn > 0">
@@ -83,35 +80,45 @@ const rows = computed<{ label: string; value: number; icon: IconDefinition; tone
</template>
<span v-else class="text-ok text-5xl leading-none sm:text-7xl">All clear</span>
</h1>
<div class="mt-6 sm:mt-8">
<FleetStrip
:repos="repos"
:counts="counts"
:focused="focused"
:matching="matching"
@select="$emit('select', $event)"
/>
<p class="text-muted-foreground mt-3 flex flex-wrap items-center gap-x-5 gap-y-1 text-xs">
<span class="flex items-center gap-1.5"
><span class="bg-crit size-2 rounded-[2px]"></span>critical</span
>
<span class="flex items-center gap-1.5"
><span class="bg-warn size-2 rounded-[2px]"></span>warning</span
>
<span class="flex items-center gap-1.5"
><span class="bg-ok/40 size-2 rounded-[2px]"></span>healthy</span
>
<span class="sm:ml-auto">Tap a segment to focus a project</span>
</p>
</div>
</div>
<dl class="border-border divide-border divide-y border-y text-sm" data-test="facts">
<div v-for="row in rows" :key="row.label" class="flex items-center gap-3 py-2.5">
<FontAwesomeIcon :icon="row.icon" class="text-muted-foreground w-4" aria-hidden="true" />
<dt class="flex-1">{{ row.label }}</dt>
<div>
<FleetStrip
:repos="repos"
:counts="counts"
:focused="focused"
:matching="matching"
@select="$emit('select', $event)"
/>
<p class="text-muted-foreground mt-3 flex flex-wrap items-center gap-x-5 gap-y-1 text-xs">
<span class="flex items-center gap-1.5"
><span class="bg-crit size-2 rounded-[2px]"></span>critical</span
>
<span class="flex items-center gap-1.5"
><span class="bg-warn size-2 rounded-[2px]"></span>warning</span
>
<span class="flex items-center gap-1.5"
><span class="bg-ok/40 size-2 rounded-[2px]"></span>healthy</span
>
<span class="sm:ml-auto">Tap a segment to focus a project</span>
</p>
</div>
<dl
class="border-border grid grid-cols-2 gap-x-6 border-t sm:grid-cols-3 lg:grid-cols-5"
data-test="facts"
>
<div
v-for="row in rows"
:key="row.label"
class="border-border border-b py-3 last:col-span-2 sm:last:col-span-1 lg:border-b-0"
>
<dt class="text-muted-foreground flex items-center gap-2 text-xs">
<FontAwesomeIcon :icon="row.icon" class="w-3.5" aria-hidden="true" />
{{ row.label }}
</dt>
<dd
class="font-mono text-base tabular-nums"
class="mt-1 font-mono text-3xl tabular-nums"
:class="row.value > 0 ? row.tone : 'text-muted-foreground'"
>
{{ row.value }}