FJurmanovic/acc-server-manager-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: restyle dashboard — card grid (desktop), row list (mobile), status badges

Browse Source
This commit is contained in:
Fran Jurmanović
2026-03-21 21:12:50 +01:00
parent a4ff0a9339
commit 025c021896
5 changed files with 210 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/components/server/ServerCard.tsx
View File

@@ -1,17 +1,31 @@
'use client';
import Link from 'next/link';
import { useTransition } from 'react';
import { Server, ServiceStatus, getStatusColor, serviceStatusToString } from '@/lib/schemas';
import { Server, ServiceStatus, serviceStatusToString } from '@/lib/schemas';
import {
startServerEventAction,
restartServerEventAction,
stopServerEventAction
} from '@/lib/actions/servers';
import { useRouter } from 'next/navigation';
import { StatusDot } from '@/components/ui/StatusDot';
import { Badge } from '@/components/ui/Badge';
import { GhButton } from '@/components/ui/GhButton';
interface ServerCardProps {
server: Server;
}
function statusBadgeVariant(status: ServiceStatus): 'green' | 'yellow' | 'gray' {
if (status === ServiceStatus.Running) return 'green';
if (
[ServiceStatus.Starting, ServiceStatus.Restarting, ServiceStatus.Stopping].includes(status)
)
return 'yellow';
return 'gray';
}
export function ServerCard({ server }: ServerCardProps) {
const [isPending, startTransition] = useTransition();
const router = useRouter();
@@ -36,82 +50,68 @@ export function ServerCard({ server }: ServerCardProps) {
ServiceStatus.Restarting,
ServiceStatus.Starting,
ServiceStatus.Stopping,
ServiceStatus.Unknown
ServiceStatus.Unknown,
].includes(server.status);
return (
<>
<div className="overflow-hidden rounded-lg border border-gray-700 bg-gray-800 shadow-lg">
<Link href={`/dashboard/server/${server.id}`} className="block">
<div className="p-6">
<div className="flex items-start justify-between">
<div>
<h3 className="text-lg font-medium text-white">{server.name}</h3>
<div className="mt-2 flex items-center">
<span
className={`inline-block h-2 w-2 rounded-full ${getStatusColor(server.status)} mr-2`}
/>
<span className="text-sm text-gray-300 capitalize">
{serviceStatusToString(server.status)}
</span>
</div>
</div>
<div className="flex items-center space-x-2">
<div className="text-gray-400 hover:text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
</svg>
</div>
</div>
</div>
<div className="overflow-hidden rounded-lg border border-gh-border bg-gh-canvas transition-colors hover:border-gh-blue/40">
<Link href={`/dashboard/server/${server.id}`} className="block p-4">
<div className="flex items-start justify-between">
<span className="text-sm font-semibold text-gh-primary">{server.name}</span>
<StatusDot status={server.status} />
</div>
<div className="mt-1 text-xs text-gh-muted">
{server.state?.track || 'No track'} · {server.state?.playerCount ?? 0} players
</div>
<div className="mt-4 grid grid-cols-2 gap-4 text-sm text-gray-300">
<div>
<span className="text-gray-500">Track:</span>
<span className="ml-2">{server.state?.track || 'N/A'}</span>
</div>
<div>
<span className="text-gray-500">Players:</span>
<span className="ml-2">{server.state?.playerCount || 0}</span>
</div>
<div className="mt-3 grid grid-cols-2 gap-3">
<div>
<div className="text-xs text-gh-subtle">Players</div>
<div className="text-sm font-semibold text-gh-primary">
{server.state?.playerCount ?? 0}
</div>
</div>
<div>
<div className="text-xs text-gh-subtle">Track</div>
<div className="truncate text-sm font-semibold text-gh-primary">
{server.state?.track || 'N/A'}
</div>
</div>
</Link>
<div className="flex justify-between gap-2 bg-gray-900 px-4 py-3">
<button
type="button"
onClick={startServer}
disabled={server.status === ServiceStatus.Running || isPending || disabled}
className="rounded bg-green-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
>
Start
</button>
<button
type="button"
onClick={restartServer}
disabled={server.status === ServiceStatus.Stopped || isPending || disabled}
className="rounded bg-yellow-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-yellow-700 disabled:cursor-not-allowed disabled:opacity-50"
>
Restart
</button>
<button
type="button"
onClick={stopServer}
disabled={server.status === ServiceStatus.Stopped || isPending || disabled}
className="rounded bg-red-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
>
Stop
</button>
</div>
<div className="mt-3">
<Badge variant={statusBadgeVariant(server.status)}>
{serviceStatusToString(server.status)}
</Badge>
</div>
</Link>
<div className="flex gap-1.5 border-t border-gh-border-muted bg-gh-base px-4 py-2">
<GhButton
variant="primary"
size="sm"
onClick={startServer}
disabled={server.status === ServiceStatus.Running || isPending || disabled}
>
Start
</GhButton>
<GhButton
variant="ghost"
size="sm"
onClick={restartServer}
disabled={server.status === ServiceStatus.Stopped || isPending || disabled}
>
Restart
</GhButton>
<GhButton
variant="danger-outline"
size="sm"
onClick={stopServer}
disabled={server.status === ServiceStatus.Stopped || isPending || disabled}
>
Stop
</GhButton>
</div>
</>
</div>
);
}

60
src/components/server/ServerListWithActions.tsx
View File

@@ -1,12 +1,15 @@
'use client';
import { useCallback, useState } from 'react';
import { Server } from '@/lib/schemas/server';
import { Server, ServiceStatus } from '@/lib/schemas/server';
import { User, hasPermission } from '@/lib/schemas/user';
import { ServerCard } from './ServerCard';
import { ServerRow } from './ServerRow';
import { CreateServerModal } from './CreateServerModal';
import RefreshButton from '@/components/ui/RefreshButton';
import { useSteamCMD } from '@/lib/context/SteamCMDContext';
import { GhButton } from '@/components/ui/GhButton';
import { Badge } from '@/components/ui/Badge';
interface ServerListWithActionsProps {
servers: Server[];
@@ -20,29 +23,58 @@ export function ServerListWithActions({ servers, user }: ServerListWithActionsPr
const handleOnClose = useCallback(() => setIsCreateModalOpen(false), []);
const canCreateServer = hasPermission(user, 'server.create');
const runningCount = servers.filter((s) => s.status === ServiceStatus.Running).length;
const offlineCount = servers.filter((s) => s.status === ServiceStatus.Stopped).length;
return (
<>
<div className="mb-6 flex items-center justify-between">
<h2 className="text-xl font-semibold">Your Servers</h2>
<div className="flex items-center space-x-4">
{/* Topbar */}
<header className="flex h-12 items-center justify-between border-b border-gh-border-muted px-5">
<div className="flex items-center gap-3">
<span className="text-sm font-semibold text-gh-primary">Servers</span>
<span className="text-xs text-gh-muted">{servers.length} total</span>
</div>
<div className="flex items-center gap-2">
<RefreshButton />
{canCreateServer && (
<button
<GhButton
variant="primary"
size="sm"
onClick={() => setIsCreateModalOpen(true)}
disabled={isSteamCMDRunning}
className="rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
title={isSteamCMDRunning ? 'Server creation disabled while SteamCMD is running' : ''}
title={isSteamCMDRunning ? 'Disabled while SteamCMD is running' : undefined}
>
Create Server
</button>
+ New Server
</GhButton>
)}
<RefreshButton />
</div>
</header>
{/* Status summary bar */}
<div className="flex items-center px-5 py-3">
<div className="flex gap-2">
{runningCount > 0 && <Badge variant="green">● {runningCount} running</Badge>}
{offlineCount > 0 && <Badge variant="gray">{offlineCount} offline</Badge>}
</div>
</div>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
{servers.map((server) => (
<ServerCard key={server.id} server={server} />
))}
{/* Responsive server list */}
<div className="px-5 pb-5">
{/* Card grid — desktop only */}
<div
className="hidden gap-3 md:grid"
style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))' }}
>
{servers.map((server) => (
<ServerCard key={server.id} server={server} />
))}
</div>
{/* Row list — mobile only */}
<div className="flex flex-col gap-2 md:hidden">
{servers.map((server) => (
<ServerRow key={server.id} server={server} />
))}
</div>
</div>
<CreateServerModal isOpen={isCreateModalOpen} onClose={handleOnClose} />

86
src/components/server/ServerRow.tsx Normal file
View File

@@ -0,0 +1,86 @@
'use client';
import { useTransition } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { Server, ServiceStatus } from '@/lib/schemas';
import {
startServerEventAction,
restartServerEventAction,
stopServerEventAction
} from '@/lib/actions/servers';
import { StatusDot } from '@/components/ui/StatusDot';
import { GhButton } from '@/components/ui/GhButton';
interface ServerRowProps {
server: Server;
}
export function ServerRow({ server }: ServerRowProps) {
const [isPending, startTransition] = useTransition();
const router = useRouter();
const startServer = () =>
startTransition(async () => {
await startServerEventAction(server.id);
router.refresh();
});
const restartServer = () =>
startTransition(async () => {
await restartServerEventAction(server.id);
router.refresh();
});
const stopServer = () =>
startTransition(async () => {
await stopServerEventAction(server.id);
router.refresh();
});
const transitioning = [
ServiceStatus.Restarting,
ServiceStatus.Starting,
ServiceStatus.Stopping,
ServiceStatus.Unknown,
].includes(server.status);
const disabled = transitioning || isPending;
return (
<div className="flex items-center justify-between gap-3 rounded-lg border border-gh-border bg-gh-canvas px-3 py-2.5 transition-colors hover:border-gh-border/60">
<Link href={`/dashboard/server/${server.id}`} className="flex min-w-0 flex-1 items-center gap-3">
<StatusDot status={server.status} />
<div className="min-w-0">
<div className="truncate text-sm font-semibold text-gh-primary">{server.name}</div>
<div className="truncate text-xs text-gh-muted">
{server.state?.track ?? 'No track'} · {server.state?.playerCount ?? 0} players
</div>
</div>
</Link>
<div className="flex shrink-0 gap-1.5">
{server.status === ServiceStatus.Stopped ? (
<GhButton variant="primary" size="sm" onClick={startServer} disabled={disabled}>
Start
</GhButton>
) : (
<>
<GhButton
variant="ghost"
size="sm"
onClick={restartServer}
disabled={disabled}
>
Restart
</GhButton>
<GhButton
variant="danger-outline"
size="sm"
onClick={stopServer}
disabled={disabled}
>
Stop
</GhButton>
</>
)}
</div>
</div>
);
}

10
src/components/ui/SteamCMDNotification.tsx
View File

@@ -12,11 +12,11 @@ export function SteamCMDNotification() {
const serverCount = runningSteamServers.size;
return (
<div className="bg-yellow-600 border-l-4 border-yellow-400 p-4">
<div className="border-l-4 border-gh-yellow bg-gh-yellow-bg px-4 py-3">
<div className="flex items-center">
<div className="flex-shrink-0">
<svg
className="h-5 w-5 text-yellow-50"
className="h-5 w-5 text-gh-yellow"
viewBox="0 0 20 20"
fill="currentColor"
>
@@ -28,7 +28,7 @@ export function SteamCMDNotification() {
</svg>
</div>
<div className="ml-3">
<p className="text-sm text-yellow-50">
<p className="text-sm text-gh-yellow">
<strong>SteamCMD is currently running</strong> for {serverCount} server{serverCount !== 1 ? 's' : ''}.
Server actions are temporarily disabled to prevent conflicts.
This will automatically resolve when the download completes.
@@ -36,8 +36,8 @@ export function SteamCMDNotification() {
</div>
<div className="ml-auto flex-shrink-0">
<div className="flex items-center">
<div className="animate-spin h-4 w-4 border-2 border-yellow-50 border-t-transparent rounded-full mr-2"></div>
<span className="text-xs text-yellow-50">Downloading...</span>
<div className="animate-spin h-4 w-4 border-2 border-gh-yellow border-t-transparent rounded-full mr-2"></div>
<span className="text-xs text-gh-yellow">Downloading...</span>
</div>
</div>
</div>