fix: add service fetching and conditional rendering for service button

src/pages/Server.tsx

@@ -20,7 +20,7 @@ import { SORT_TYPES } from "@/context/sort-context";
 import { useSort } from "@/hooks/use-sort";
 import { useStatus } from "@/hooks/use-status";
 import { useWebSocketContext } from "@/hooks/use-websocket-context";
-import { fetchServerGroup } from "@/lib/nezha-api";
+import { fetchServerGroup, fetchService } from "@/lib/nezha-api";
 import { cn, formatNezhaInfo } from "@/lib/utils";
 import type { NezhaWebsocketResponse, ServerGroup } from "@/types/nezha-api";
 
@@ -31,6 +31,16 @@ export default function Servers() {
 		queryKey: ["server-group"],
 		queryFn: () => fetchServerGroup(),
 	});
+	const { data: serviceData } = useQuery({
+		queryKey: ["service"],
+		queryFn: () => fetchService(),
+		refetchOnMount: true,
+		refetchOnWindowFocus: true,
+		refetchInterval: 10000,
+	});
+	const hasServices =
+		!!serviceData?.data?.services &&
+		Object.keys(serviceData.data.services).length > 0;
 	const { lastMessage, connected } = useWebSocketContext();
 	const { status } = useStatus();
 	const [showServices, setShowServices] = useState<string>("0");
@@ -69,6 +79,12 @@ export default function Servers() {
 		}
 	}, []);
 
+	useEffect(() => {
+		if (!hasServices) {
+			setShowServices("0");
+		}
+	}, [hasServices]);
+
 	useEffect(() => {
 		const checkInlineSettings = () => {
 			const isMobile = window.innerWidth < 768;
@@ -305,6 +321,7 @@ export default function Servers() {
 					>
 						<MapIcon className="size-[13px]" />
 					</button>
+					{hasServices && (
 						<button
 							onClick={() => {
 								setShowServices(showServices === "0" ? "1" : "0");
@@ -326,6 +343,7 @@ export default function Servers() {
 						>
 							<ChartBarSquareIcon className="size-[13px]" />
 						</button>
+					)}
 					<button
 						onClick={() => {
 							setInline(inline === "0" ? "1" : "0");