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>

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;

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.",