mirror of
https://github.com/lukaszraczylo/traefik-llmgateway.git
synced 2026-10-13 04:58:50 +00:00
lukaszraczylo
cf308624af
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
34 lines
1.1 KiB
Vue
34 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
|
|
|
|
/**
|
|
* SkeletonTable is a placeholder shaped exactly like DataTable.vue's own
|
|
* rendered table — the same Table/TableRow/TableHead/TableCell
|
|
* primitives, `rows` x `cols` pulsing cells — so a table view swapping
|
|
* this in for its first load causes no layout shift once real rows
|
|
* arrive. `cols` defaults to 4, the panel's most common table width;
|
|
* callers with a narrower or wider table pass their own column count.
|
|
*/
|
|
withDefaults(defineProps<{ rows?: number; cols?: number }>(), { rows: 5, cols: 4 })
|
|
</script>
|
|
|
|
<template>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead v-for="c in cols" :key="c">
|
|
<Skeleton class="h-4 w-16" />
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow v-for="r in rows" :key="r">
|
|
<TableCell v-for="c in cols" :key="c">
|
|
<Skeleton class="h-4 w-full max-w-32" />
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</template>
|