Unify UI workflows and streamline fleet management

src/lib/ui/components/primitives/ListFooter.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import Button from './Button.svelte';
+    let { total, limit = $bindable(25), step = 25, label = 'items' }: { total: number; limit?: number; step?: number; label?: string } = $props();
+</script>
+{#if total > step}
+    <div class="list-footer"><span role="status">Showing {Math.min(limit, total)} of {total} {label}</span>{#if limit < total}<Button size="sm" onclick={() => limit += step}>Show {Math.min(step, total - limit)} more</Button>{/if}</div>
+{/if}
+<style>.list-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); }</style>