Skip to content

Fix/cleanup panel UI #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Maximus7474 merged 2 commits into from
Jul 5, 2026
Merged

Fix/cleanup panel UI #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
139b36d
chore(webpanel): removed padding from layout and let pages handle it
Maximus7474 Jul 5, 2026
11502f2
tweak(webpanel/pages): increased default page size to 20
Maximus7474 Jul 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 42 additions & 42 deletions apps/webpanel/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
{
"name": "@fxmanager/webpanel",
"version": "0.2.1",
"type": "module",
"private": true,
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "biome check .",
"format": "biome format --write .",
"typecheck": "tsc --noEmit",
"preview": "vite preview"
},
"dependencies": {
"@codemirror/commands": "^6.10.4",
"@codemirror/language": "^6.12.4",
"@codemirror/state": "^6.7.0",
"@codemirror/theme-one-dark": "^6.1.3",
"@codemirror/view": "^6.43.4",
"@fxmanager/shared": "workspace:*",
"@fxmanager/ui": "workspace:*",
"@lezer/highlight": "^1.2.3",
"ansi-to-react": "^6.2.6",
"codemirror": "^6.0.2",
"date-fns": "^4.2.1",
"lucide-react": "^1.0.1",
"react": "^19.2.4",
"react-day-picker": "^10.0.1",
"react-dom": "^19.2.4",
"react-router-dom": "^7.13.2",
"recharts": "3.8.0",
"sonner": "^2.0.7"
},
"devDependencies": {
"@fxmanager/database": "workspace:*",
"@tailwindcss/vite": "^4.1.18",
"@types/node": "^25.1.0",
"@types/react": "^19.2.10",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.1",
"typescript": "^5.9.3",
"vite": "^7.2.4"
}
"name": "@fxmanager/webpanel",
"version": "0.2.1",
"type": "module",
"private": true,
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "biome check .",
"format": "biome format --write .",
"typecheck": "tsc --noEmit",
"preview": "vite preview"
},
"dependencies": {
"@codemirror/commands": "^6.10.4",
"@codemirror/language": "^6.12.4",
"@codemirror/state": "^6.7.0",
"@codemirror/theme-one-dark": "^6.1.3",
"@codemirror/view": "^6.43.4",
"@fxmanager/shared": "workspace:*",
"@fxmanager/ui": "workspace:*",
"@lezer/highlight": "^1.2.3",
"ansi-to-react": "^6.2.6",
"codemirror": "^6.0.2",
"date-fns": "^4.2.1",
"lucide-react": "^1.0.1",
"react": "^19.2.4",
"react-day-picker": "^10.0.1",
"react-dom": "^19.2.4",
"react-router-dom": "^7.13.2",
"recharts": "3.8.0",
"sonner": "^2.0.7"
},
"devDependencies": {
"@fxmanager/database": "workspace:*",
"@tailwindcss/vite": "^4.1.18",
"@types/node": "^25.1.0",
"@types/react": "^19.2.10",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.1",
"typescript": "^5.9.3",
"vite": "^7.2.4"
}
}
2 changes: 1 addition & 1 deletion apps/webpanel/src/components/sidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function AppLayout() {
<SidebarProvider className="h-screen overflow-hidden">
<AppSidebar />
<SidebarInset className="h-screen overflow-hidden">
<div className="flex flex-col h-full overflow-hidden p-4 gap-4">
<div className="flex flex-col h-full overflow-hidden gap-4">
<Outlet />
</div>
</SidebarInset>
Expand Down
3 changes: 2 additions & 1 deletion apps/webpanel/src/components/sidebar/server-status.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,8 @@ export function ServerStatusCard() {
>
<ArrowUpCircle className="h-3.5 w-3.5 shrink-0" />
<span className="flex-1">
<span className="font-mono">{version.latest}</span> available
<span className="font-mono">{version.latest}</span>{' '}
available
</span>
<ExternalLink className="h-3 w-3 shrink-0" />
</a>
Expand Down
2 changes: 1 addition & 1 deletion apps/webpanel/src/pages/console/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ export default function Console() {
}, []);

return (
<div className="flex h-full flex-col gap-4">
<div className="flex h-full flex-col gap-4 p-4">
<PageHeader Icon={Terminal} title="Console" />

<Card className="flex flex-1 flex-col min-h-0 pb-0 overflow-hidden gap-0.5">
Expand Down
7 changes: 4 additions & 3 deletions apps/webpanel/src/pages/dashboard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,8 @@ export default function DashboardPage() {
];

return (
<ScrollArea className="h-screen overflow-auto pr-2 pb-2">
<div className="space-y-6">
<ScrollArea className="h-screen overflow-auto">
<div className="space-y-6 p-4">
<PageHeader
Icon={LayoutDashboard}
title="Dashboard"
Expand Down Expand Up @@ -169,6 +169,8 @@ export default function DashboardPage() {
</ScrollArea>

<div className="grid gap-6 lg:grid-cols-3">
{' '}
{/* The cards in this section have their edges cropped out */}
<div className="lg:col-span-2 space-y-6">
<Card className="bg-card/50 min-h-[350px] w-full">
<CardHeader>
Expand Down Expand Up @@ -246,7 +248,6 @@ export default function DashboardPage() {
</CardContent>
</Card>
</div>

<div className="lg:col-span-1">
<Card className="bg-card/50 flex flex-col h-full">
<CardHeader>
Expand Down
15 changes: 8 additions & 7 deletions apps/webpanel/src/pages/dashboard/playerList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,16 +68,17 @@ export default function PlayerListPage() {
const { players, loading } = usePlayerlistSocket();

return (
<div className="flex h-[calc(100vh-5rem)] flex-col gap-4">
<div className="flex h-full flex-col gap-4 p-4">
<PageHeader
Icon={BookUser}
title="Player List"
description="Current connected players on the server."
/>
<Card className="bg-card/50 py-0">
<div className="overflow-hidden rounded-t-lg">
<Table className="w-full">
<TableHeader className="bg-card block w-full">

<Card className="bg-card/50 py-0 flex-1 flex flex-col min-h-0">
<div className="rounded-t-lg flex-1 flex flex-col min-h-0">
<Table className="w-full flex-1 flex flex-col">
<TableHeader className="bg-card block w-full shrink-0">
<TableRow className={`grid ${COL_GRID} w-full`}>
<TableHead className="flex items-center">#</TableHead>
<TableHead className="flex items-center">Player</TableHead>
Expand All @@ -97,8 +98,8 @@ export default function PlayerListPage() {
</TableRow>
</TableHeader>

<TableBody className="block w-full">
<ScrollArea className="h-[65vh]">
<TableBody className="block w-full flex-1 min-h-0">
<ScrollArea className="h-full">
{loading ? (
Array.from({ length: 6 }).map((_, i) => (
// biome-ignore lint/suspicious/noArrayIndexKey: indexes are immutable
Expand Down
70 changes: 37 additions & 33 deletions apps/webpanel/src/pages/performance/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import type { PerfInspect } from './components/perf-series';
import { usePerfSocket } from '@/hooks/ws-channels/use-perf';
import { usePerfSeries } from '@/hooks/ws-channels/use-perf-series';
import { useWsChannel } from '@/hooks/ws-channels/use-ws-core';
import { ScrollArea, ScrollBar } from '@fxmanager/ui/components/scroll-area';

export default function PerformancePage() {
const { samples } = usePerfSocket();
Expand Down Expand Up @@ -65,42 +66,45 @@ export default function PerformancePage() {
}, [inspect, selected, isLive, snapshots]);

return (
<div className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto">
<PageHeader
Icon={ChartBar}
title="Performance"
description="Monitor fxServer thread distribution and system resource usage."
/>
<ScrollArea className="h-full">
<div className="flex min-h-0 flex-1 flex-col gap-6 p-4 overflow-y-auto">
<PageHeader
Icon={ChartBar}
title="Performance"
description="Monitor fxServer thread distribution and system resource usage."
/>

<PerfStatsGrid samples={samples} inspect={effectiveInspect} />
<PerfStatsGrid samples={samples} inspect={effectiveInspect} />

<div className="grid gap-6 lg:grid-cols-2">
<DisconnectDonut
sessionId={selectedId}
session={selected}
isLive={isLive}
zoom={zoom}
/>
<PerfDistribution
samples={samples}
inspect={effectiveInspect}
thread={thread}
/>
</div>
<div className="grid gap-6 lg:grid-cols-2">
<DisconnectDonut
sessionId={selectedId}
session={selected}
isLive={isLive}
zoom={zoom}
/>
<PerfDistribution
samples={samples}
inspect={effectiveInspect}
thread={thread}
/>
</div>

<div className="flex min-h-[360px] flex-1 flex-col">
<FullPerfChart
thread={thread}
onThreadChange={setThread}
snapshots={snapshots}
sessions={sessions}
selectedId={selectedId}
onSelect={setPickedId}
zoom={zoom}
onZoomChange={setZoom}
onInspect={setInspect}
/>
<div className="flex min-h-[360px] flex-1 flex-col">
<FullPerfChart
thread={thread}
onThreadChange={setThread}
snapshots={snapshots}
sessions={sessions}
selectedId={selectedId}
onSelect={setPickedId}
zoom={zoom}
onZoomChange={setZoom}
onInspect={setInspect}
/>
</div>
</div>
</div>
<ScrollBar orientation="vertical" />
</ScrollArea>
);
}
Loading
Loading