mirror of
https://github.com/lukaszraczylo/traefik-llmgateway.git
synced 2026-10-13 04:58:50 +00:00
Every tab row scrolls sideways instead of being clipped by its card. On phones this hid tabs, such as the Config change helper's last forms at 360-390px. The login button has a larger touch target, and long names are truncated with a tooltip. Loading and empty states: - Skeletons show only while a selection has no data yet, never over data already on screen during a refresh. - Empty states name the next step to take. - Error states offer a Retry button that shows progress, and each card keeps its own error. - Toasts confirm copies and key generation, and report background failures once per streak through polite and assertive live regions. Other changes: - The access matrix switches between Models, MCP servers and Agents, and says "none configured" only once its data has loaded. - Home ranks the top 5 users by cost, requests or tokens. It requests only the needed metrics and warns before a range exceeds the server's key cap. - MCP and agent deep links accept a bare target name. admin_assets_gen.go is regenerated. Claude-Session: https://claude.ai/code/session_01V5jYJNxpDFdJkyyExpADrv
24 lines
805 B
Vue
24 lines
805 B
Vue
<script setup lang="ts">
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
|
|
|
/**
|
|
* SkeletonList mirrors TopList.vue's own ranked-row shape (rank number,
|
|
* label, right-aligned value) — `rows` pulsing rows, defaulting to 5 to
|
|
* match "top 5" lists, so a list card swapping this in for its first load
|
|
* causes no layout shift once real rows arrive.
|
|
*/
|
|
withDefaults(defineProps<{ rows?: number }>(), { rows: 5 })
|
|
</script>
|
|
|
|
<template>
|
|
<ol class="flex flex-col gap-1.5">
|
|
<li v-for="r in rows" :key="r" class="flex items-center justify-between gap-3">
|
|
<span class="flex min-w-0 flex-1 items-center gap-2">
|
|
<Skeleton class="h-3 w-4 shrink-0" />
|
|
<Skeleton class="h-4 w-full max-w-40" />
|
|
</span>
|
|
<Skeleton class="h-4 w-12 shrink-0" />
|
|
</li>
|
|
</ol>
|
|
</template>
|