From 0776657faf889ca02f4e76ba3f61303e493a059d Mon Sep 17 00:00:00 2001
From: spandev <143828642+Spandan-Mishra@users.noreply.github.com>
Date: Mon, 1 Dec 2025 15:03:46 +0530
Subject: [PATCH] fix: made playground page use same layout as other pages
 (#25216)

* fix: made playground page use same layout as other pages

* update: added feature key

* Change link display from table to list format

Refactor page layout to use a list instead of a table for links.

---------

Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
---
 .../(admin-layout)/admin/playground/page.tsx  | 47 ++++++++++++-------
 apps/web/public/static/locales/en/common.json |  3 ++
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/page.tsx b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/page.tsx
index 1e5aca7f72..628d2f3453 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/page.tsx
@@ -1,5 +1,8 @@
+import { _generateMetadata, getTranslate } from "app/_utils";
 import Link from "next/link";
 
+import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+
 const LINKS = [
   {
     title: "Routing Funnel",
@@ -15,20 +18,32 @@ const LINKS = [
   },
 ];
 
-export default function Page() {
-  return (
-    <div>
-      <h1 className="text-3xl font-bold">Playground</h1>
-
-      <ul className="mt-8">
-        {LINKS.map((link) => (
-          <li key={link.title}>
-            <Link href={link.href} className="list-item list-disc font-medium underline">
-              {link.title} →
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </div>
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("playground"),
+    (t) => t("admin_playground_description"),
+    undefined,
+    undefined,
+    "/settings/admin/playground"
   );
-}
+
+const Page = async () => {
+  const t = await getTranslate();
+  return (
+    <SettingsHeader title={t("playground")} description={t("admin_playground_description")}>
+      <div>
+        <ul className="mt-8">
+          {LINKS.map((link) => (
+            <li key={link.title}>
+              <Link href={link.href} className="list-item list-disc font-medium underline">
+                {link.title} →
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </SettingsHeader>
+  );
+};
+
+export default Page;
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index 83975b720d..2b0dc63b64 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -2088,6 +2088,9 @@
   "disable_app": "Disable App",
   "disable_app_description": "Disabling this app could cause problems with how your users interact with Cal",
   "edit_keys": "Edit Keys",
+  "feature": "Feature",
+  "playground": "Playground",
+  "admin_playground_description": "Admin playground for testing out new features and functionalities.",
   "admin_apps_description": "Enable apps for your instance of Cal",
   "admin_users_description": "A list of all the users in your account including their name, title, email and role.",
   "admin_users_add_description": "Here you can add a new user.",