From da92ec72a7694f4483892128ab2d1be64b9461eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=20Jurmanovi=C4=87?= <franjurmanovic@gmail.com>
Date: Sat, 21 Mar 2026 21:18:33 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20restyle=20server=20detail=20=E2=80=94?=
 =?UTF-8?q?=20breadcrumb=20topbar,=20info=20strip,=20tab=20bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/dashboard/server/[id]/page.tsx        |  21 +--
 .../server/ServerConfigurationTabs.tsx        |  44 +++---
 src/components/server/ServerHeader.tsx        | 141 +++++-------------
 3 files changed, 67 insertions(+), 139 deletions(-)

diff --git a/src/app/dashboard/server/[id]/page.tsx b/src/app/dashboard/server/[id]/page.tsx
index f93150d..b6033c5 100755
--- a/src/app/dashboard/server/[id]/page.tsx
+++ b/src/app/dashboard/server/[id]/page.tsx
@@ -28,19 +28,14 @@ export default async function ServerPage({ params }: ServerPageProps) {
 	]);
 
 	return (
-		<div className="min-h-screen bg-gray-900 text-white">
-			<div className="mx-auto max-w-[120rem] px-4 py-8 sm:px-6 lg:px-8">
-				<ServerHeader server={server} user={session.user!} />
-
-				<div className="mt-8">
-					<ServerConfigurationTabs
-						serverId={id}
-						configurations={configurations}
-						statistics={statistics}
-						leaderboard={leaderboard}
-					/>
-				</div>
-			</div>
+		<div className="flex flex-col overflow-hidden" style={{ height: 'calc(100vh - 0px)' }}>
+			<ServerHeader server={server} user={session.user!} />
+			<ServerConfigurationTabs
+				serverId={id}
+				configurations={configurations}
+				statistics={statistics}
+				leaderboard={leaderboard}
+			/>
 		</div>
 	);
 }
diff --git a/src/components/server/ServerConfigurationTabs.tsx b/src/components/server/ServerConfigurationTabs.tsx
index 499c825..aed43b1 100755
--- a/src/components/server/ServerConfigurationTabs.tsx
+++ b/src/components/server/ServerConfigurationTabs.tsx
@@ -71,30 +71,28 @@ export function ServerConfigurationTabs({
 	};
 
 	return (
-		<div className="overflow-hidden rounded-lg bg-gray-800">
-			<div className="border-b border-gray-700">
-				<nav className="flex space-x-8 overflow-x-auto" aria-label="Tabs">
-					{tabs.map((tab) => {
-						const isActive = currentTab === tab.id;
-						return (
-							<button
-								key={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 ${
-									isActive
-										? 'border-blue-500 text-blue-400'
-										: 'border-transparent text-gray-400 hover:border-gray-300 hover:text-gray-300'
-								} `}
-							>
-								<span className="text-base">{tab.icon}</span>
-								<span>{tab.name}</span>
-							</button>
-						);
-					})}
-				</nav>
-			</div>
+		<div className="flex flex-1 flex-col overflow-hidden">
+			<nav className="flex overflow-x-auto border-b border-gh-border-muted px-5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" aria-label="Tabs">
+				{tabs.map((tab) => {
+					const isActive = currentTab === tab.id;
+					return (
+						<button
+							key={tab.id}
+							onClick={() => setCurrentTab(tab.id)}
+							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
+									? 'border-gh-orange text-gh-primary'
+									: 'border-transparent text-gh-muted hover:text-gh-primary'
+							}`}
+						>
+							<span className="text-sm">{tab.icon}</span>
+							<span>{tab.name}</span>
+						</button>
+					);
+				})}
+			</nav>
 
-			<div className="p-6">{renderTabContent()}</div>
+			<div className="flex-1 overflow-y-auto p-5">{renderTabContent()}</div>
 		</div>
 	);
 }
diff --git a/src/components/server/ServerHeader.tsx b/src/components/server/ServerHeader.tsx
index 78c56df..924adb6 100755
--- a/src/components/server/ServerHeader.tsx
+++ b/src/components/server/ServerHeader.tsx
@@ -1,6 +1,6 @@
 'use client';
 import Link from 'next/link';
-import { Server, getStatusColor, serviceStatusToString, ServiceStatus } from '@/lib/schemas/server';
+import { Server, serviceStatusToString, ServiceStatus } from '@/lib/schemas/server';
 import {
 	startServerEventAction,
 	restartServerEventAction,
@@ -10,6 +10,8 @@ import { hasPermission, User } from '@/lib/schemas';
 import { useState, useTransition } from 'react';
 import { useRouter } from 'next/navigation';
 import { DeleteServerModal } from './DeleteServerModal';
+import { Badge } from '@/components/ui/Badge';
+import { GhButton } from '@/components/ui/GhButton';
 
 interface ServerHeaderProps {
 	server: Server;
@@ -43,112 +45,45 @@ export function ServerHeader({ server, user }: ServerHeaderProps) {
 		ServiceStatus.Stopping,
 		ServiceStatus.Unknown
 	].includes(server.status);
+
 	return (
-		<div className="rounded-lg bg-gray-800 p-6">
-			<div className="flex items-center justify-between">
-				<div className="flex items-center space-x-4">
-					<Link
-						href="/dashboard"
-						className="flex items-center text-gray-400 transition-colors hover:text-white"
-					>
-						<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>
+		<>
+			{/* Topbar */}
+			<header className="flex h-12 items-center justify-between border-b border-gh-border-muted px-5">
+				<div className="flex items-center gap-2 text-sm">
+					<Link href="/dashboard" className="text-gh-blue hover:underline">Servers</Link>
+					<span className="text-gh-subtle">/</span>
+					<span className="font-semibold text-gh-primary">{server.name}</span>
 				</div>
-			</div>
-
-			<div className="mt-6">
-				<div className="flex items-center justify-between">
-					<div>
-						<h1 className="text-3xl font-bold text-white">{server.name}</h1>
-						<div className="mt-2 flex items-center">
-							<span
-								className={`inline-block h-3 w-3 rounded-full ${getStatusColor(server.status)} mr-3`}
-							/>
-							<span className="text-lg text-gray-300 capitalize">
-								{serviceStatusToString(server.status)}
-							</span>
-						</div>
-					</div>
-
-					<div className="flex space-x-3">
-						{canDeleteServer && (
-							<button
-								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
-							type="button"
-							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
-							type="button"
-							onClick={restartServer}
-							disabled={server.status === ServiceStatus.Stopped || disabled || isPending}
-							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"
-						>
-							Restart
-						</button>
-
-						<button
-							type="button"
-							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 className="flex items-center gap-2">
+					<Badge variant={
+						server.status === ServiceStatus.Running ? 'green' :
+						server.status === ServiceStatus.Stopped ? 'gray' : 'yellow'
+					}>
+						● {serviceStatusToString(server.status)}
+					</Badge>
+					<GhButton variant="ghost" size="sm" onClick={startServer} disabled={server.status === ServiceStatus.Running || disabled || isPending}>Start</GhButton>
+					<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>
+					{canDeleteServer && (
+						<GhButton variant="danger-solid" size="sm" onClick={() => setIsDeleteModalOpen(true)} disabled={disabled || isPending}>Remove</GhButton>
+					)}
 				</div>
+			</header>
 
-				<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>
+			{/* Info strip */}
+			<div className="flex flex-wrap gap-6 border-b border-gh-border-muted px-5 py-3">
+				{[
+					{ label: 'Track', value: server.state?.track ?? 'N/A' },
+					{ label: 'Players', value: `${server.state?.playerCount ?? 0} / ${server.state?.maxConnections ?? 0}` },
+					{ label: 'Session', value: server.state?.session ?? 'N/A' },
+					{ label: 'Max Connections', value: String(server.state?.maxConnections ?? 0) },
+				].map(({ label, value }) => (
+					<div key={label}>
+						<div className="text-xs text-gh-subtle">{label}</div>
+						<div className="text-sm font-semibold text-gh-primary">{value}</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>
 
 			<DeleteServerModal
@@ -156,6 +91,6 @@ export function ServerHeader({ server, user }: ServerHeaderProps) {
 				onClose={() => setIsDeleteModalOpen(false)}
 				server={server}
 			/>
-		</div>
+		</>
 	);
 }