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

feat: restyle server detail — breadcrumb topbar, info strip, tab bar

Browse Source
This commit is contained in:
Fran Jurmanović
2026-03-21 21:18:33 +01:00
parent a5e50fe8b7
commit da92ec72a7
3 changed files with 67 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/dashboard/server/[id]/page.tsx
View File

@@ -28,11 +28,8 @@ export default async function ServerPage({ params }: ServerPageProps) {
]); ]);
return ( return (
<div className="min-h-screen bg-gray-900 text-white"> <div className="flex flex-col overflow-hidden" style={{ height: 'calc(100vh - 0px)' }}>
<div className="mx-auto max-w-[120rem] px-4 py-8 sm:px-6 lg:px-8">
<ServerHeader server={server} user={session.user!} /> <ServerHeader server={server} user={session.user!} />
<div className="mt-8">
<ServerConfigurationTabs <ServerConfigurationTabs
serverId={id} serverId={id}
configurations={configurations} configurations={configurations}
@@ -40,7 +37,5 @@ export default async function ServerPage({ params }: ServerPageProps) {
leaderboard={leaderboard} leaderboard={leaderboard}
/> />
</div> </div>
</div>
</div>
); );
} }

16
src/components/server/ServerConfigurationTabs.tsx
View File

@@ -71,30 +71,28 @@ export function ServerConfigurationTabs({
}; };
return ( return (
<div className="overflow-hidden rounded-lg bg-gray-800"> <div className="flex flex-1 flex-col overflow-hidden">
<div className="border-b border-gray-700"> <nav className="flex overflow-x-auto border-b border-gh-border-muted px-5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" aria-label="Tabs">
<nav className="flex space-x-8 overflow-x-auto" aria-label="Tabs">
{tabs.map((tab) => { {tabs.map((tab) => {
const isActive = currentTab === tab.id; const isActive = currentTab === tab.id;
return ( return (
<button <button
key={tab.id} key={tab.id}
onClick={() => setCurrentTab(tab.id)} onClick={() => setCurrentTab(tab.id)}
className={`flex items-center space-x-2 border-b-2 px-1 py-4 text-sm font-medium whitespace-nowrap transition-colors ${ className={`flex shrink-0 items-center gap-1.5 border-b-2 px-3 py-3 text-sm font-medium whitespace-nowrap transition-colors ${
isActive isActive
? 'border-blue-500 text-blue-400' ? 'border-gh-orange text-gh-primary'
: 'border-transparent text-gray-400 hover:border-gray-300 hover:text-gray-300' : 'border-transparent text-gh-muted hover:text-gh-primary'
}`} }`}
> >
<span className="text-base">{tab.icon}</span> <span className="text-sm">{tab.icon}</span>
<span>{tab.name}</span> <span>{tab.name}</span>
</button> </button>
); );
})} })}
</nav> </nav>
</div>
<div className="p-6">{renderTabContent()}</div> <div className="flex-1 overflow-y-auto p-5">{renderTabContent()}</div>
</div> </div>
); );
} }

139
src/components/server/ServerHeader.tsx
View File

@@ -1,6 +1,6 @@
'use client'; 'use client';
import Link from 'next/link'; import Link from 'next/link';
import { Server, getStatusColor, serviceStatusToString, ServiceStatus } from '@/lib/schemas/server'; import { Server, serviceStatusToString, ServiceStatus } from '@/lib/schemas/server';
import { import {
startServerEventAction, startServerEventAction,
restartServerEventAction, restartServerEventAction,
@@ -10,6 +10,8 @@ import { hasPermission, User } from '@/lib/schemas';
import { useState, useTransition } from 'react'; import { useState, useTransition } from 'react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { DeleteServerModal } from './DeleteServerModal'; import { DeleteServerModal } from './DeleteServerModal';
import { Badge } from '@/components/ui/Badge';
import { GhButton } from '@/components/ui/GhButton';
interface ServerHeaderProps { interface ServerHeaderProps {
server: Server; server: Server;
@@ -43,112 +45,45 @@ export function ServerHeader({ server, user }: ServerHeaderProps) {
ServiceStatus.Stopping, ServiceStatus.Stopping,
ServiceStatus.Unknown ServiceStatus.Unknown
].includes(server.status); ].includes(server.status);
return ( return (
<div className="rounded-lg bg-gray-800 p-6"> <>
<div className="flex items-center justify-between"> {/* Topbar */}
<div className="flex items-center space-x-4"> <header className="flex h-12 items-center justify-between border-b border-gh-border-muted px-5">
<Link <div className="flex items-center gap-2 text-sm">
href="/dashboard" <Link href="/dashboard" className="text-gh-blue hover:underline">Servers</Link>
className="flex items-center text-gray-400 transition-colors hover:text-white" <span className="text-gh-subtle">/</span>
> <span className="font-semibold text-gh-primary">{server.name}</span>
<svg
xmlns="http://www.w3.org/2000/svg"
className="mr-2 h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 19l-7-7 7-7"
/>
</svg>
Back to Dashboard
</Link>
</div> </div>
</div> <div className="flex items-center gap-2">
<Badge variant={
<div className="mt-6"> server.status === ServiceStatus.Running ? 'green' :
<div className="flex items-center justify-between"> server.status === ServiceStatus.Stopped ? 'gray' : 'yellow'
<div> }>
<h1 className="text-3xl font-bold text-white">{server.name}</h1> ● {serviceStatusToString(server.status)}
<div className="mt-2 flex items-center"> </Badge>
<span <GhButton variant="ghost" size="sm" onClick={startServer} disabled={server.status === ServiceStatus.Running || disabled || isPending}>Start</GhButton>
className={`inline-block h-3 w-3 rounded-full ${getStatusColor(server.status)} mr-3`} <GhButton variant="ghost" size="sm" onClick={restartServer} disabled={server.status === ServiceStatus.Stopped || disabled || isPending}>Restart</GhButton>
/> <GhButton variant="danger-outline" size="sm" onClick={stopServer} disabled={server.status === ServiceStatus.Stopped || disabled || isPending}>Stop</GhButton>
<span className="text-lg text-gray-300 capitalize">
{serviceStatusToString(server.status)}
</span>
</div>
</div>
<div className="flex space-x-3">
{canDeleteServer && ( {canDeleteServer && (
<button <GhButton variant="danger-solid" size="sm" onClick={() => setIsDeleteModalOpen(true)} disabled={disabled || isPending}>Remove</GhButton>
type="button"
onClick={(e) => {
e.preventDefault();
setIsDeleteModalOpen(true);
}}
disabled={disabled || isPending}
className="mr-3 rounded bg-red-800 px-4 py-2 font-medium text-white transition-colors hover:bg-red-900 disabled:cursor-not-allowed disabled:opacity-50"
>
Remove Server
</button>
)} )}
<button </div>
type="button" </header>
onClick={startServer}
disabled={server.status === ServiceStatus.Running || disabled || isPending}
className="rounded bg-green-600 px-4 py-2 font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
>
Start
</button>
<button {/* Info strip */}
type="button" <div className="flex flex-wrap gap-6 border-b border-gh-border-muted px-5 py-3">
onClick={restartServer} {[
disabled={server.status === ServiceStatus.Stopped || disabled || isPending} { label: 'Track', value: server.state?.track ?? 'N/A' },
className="rounded bg-yellow-600 px-4 py-2 font-medium text-white transition-colors hover:bg-yellow-700 disabled:cursor-not-allowed disabled:opacity-50" { label: 'Players', value: `${server.state?.playerCount ?? 0} / ${server.state?.maxConnections ?? 0}` },
> { label: 'Session', value: server.state?.session ?? 'N/A' },
Restart { label: 'Max Connections', value: String(server.state?.maxConnections ?? 0) },
</button> ].map(({ label, value }) => (
<div key={label}>
<button <div className="text-xs text-gh-subtle">{label}</div>
type="button" <div className="text-sm font-semibold text-gh-primary">{value}</div>
onClick={stopServer}
disabled={server.status === ServiceStatus.Stopped || disabled || isPending}
className="rounded bg-red-600 px-4 py-2 font-medium text-white transition-colors hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
>
Stop
</button>
</div>
</div>
<div className="mt-6 grid grid-cols-2 gap-6 md:grid-cols-4">
<div>
<div className="text-sm text-gray-500">Current Track</div>
<div className="text-lg font-medium text-white">{server.state?.track || 'N/A'}</div>
</div>
<div>
<div className="text-sm text-gray-500">Players</div>
<div className="text-lg font-medium text-white">
{server.state?.playerCount || 0} / {server.state?.maxConnections || 0}
</div>
</div>
<div>
<div className="text-sm text-gray-500">Session</div>
<div className="text-lg font-medium text-white">{server.state?.session || 'N/A'}</div>
</div>
<div>
<div className="text-sm text-gray-500">Max Connections</div>
<div className="text-lg font-medium text-white">
{server.state?.maxConnections || 0}
</div>
</div>
</div> </div>
))}
</div> </div>
<DeleteServerModal <DeleteServerModal
@@ -156,6 +91,6 @@ export function ServerHeader({ server, user }: ServerHeaderProps) {
onClose={() => setIsDeleteModalOpen(false)} onClose={() => setIsDeleteModalOpen(false)}
server={server} server={server}
/> />
</div> </>
); );
} }