mirror of
https://github.com/lukaszraczylo/traefik-llmgateway.git
synced 2026-10-14 05:18:54 +00:00
feat(webui): make the dashboard responsive and add loading and empty states
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
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user