Phase2

apps/web/src/app/[locale]/dashboard/layout.tsx

@@ -30,6 +30,14 @@ export default async function DashboardLayout({
                 {t("dashboard")}
               </Link>
             </li>
+            <li>
+              <Link
+                href="/servers"
+                className="text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
+              >
+                {t("servers")}
+              </Link>
+            </li>
           </ul>
         </nav>
         <DashboardUserInfo />

apps/web/src/app/[locale]/servers/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { setRequestLocale } from "next-intl/server";
+import { ServerDetailContent } from "@/components/servers/server-detail-content";
+
+interface ServerDetailPageProps {
+  params: Promise<{ locale: string; id: string }>;
+}
+
+export default async function ServerDetailPage({ params }: ServerDetailPageProps) {
+  const { locale, id } = await params;
+  setRequestLocale(locale);
+
+  return <ServerDetailContent serverId={id} />;
+}

apps/web/src/app/[locale]/servers/layout.tsx

@@ -0,0 +1,45 @@
+import { getTranslations, setRequestLocale } from "next-intl/server";
+import type { ReactNode } from "react";
+import { Link } from "@/i18n/navigation";
+import { DashboardUserInfo } from "@/components/dashboard/dashboard-user-info";
+
+interface ServersLayoutProps {
+  children: ReactNode;
+  params: Promise<{ locale: string }>;
+}
+
+export default async function ServersLayout({ children, params }: ServersLayoutProps) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  const t = await getTranslations("common");
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6">
+      <div className="mb-6 flex flex-col gap-4 border-b border-zinc-200 pb-6 dark:border-zinc-800 sm:flex-row sm:items-center sm:justify-between">
+        <nav aria-label="App navigation">
+          <ul className="flex gap-4 text-sm">
+            <li>
+              <Link
+                href="/dashboard"
+                className="text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
+              >
+                {t("dashboard")}
+              </Link>
+            </li>
+            <li>
+              <Link
+                href="/servers"
+                className="font-medium text-zinc-900 dark:text-zinc-50"
+                aria-current="page"
+              >
+                {t("servers")}
+              </Link>
+            </li>
+          </ul>
+        </nav>
+        <DashboardUserInfo />
+      </div>
+      {children}
+    </div>
+  );
+}

apps/web/src/app/[locale]/servers/new/page.tsx

@@ -0,0 +1,13 @@
+import { setRequestLocale } from "next-intl/server";
+import { CreateServerForm } from "@/components/servers/create-server-form";
+
+interface NewServerPageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export default async function NewServerPage({ params }: NewServerPageProps) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+
+  return <CreateServerForm />;
+}

apps/web/src/app/[locale]/servers/page.tsx

@@ -0,0 +1,34 @@
+import { getTranslations, setRequestLocale } from "next-intl/server";
+import { Link } from "@/i18n/navigation";
+import { ServerList } from "@/components/servers/server-list";
+
+interface ServersPageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export default async function ServersPage({ params }: ServersPageProps) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  const t = await getTranslations("servers");
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
+            {t("title")}
+          </h1>
+          <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{t("subtitle")}</p>
+        </div>
+        <Link
+          href="/servers/new"
+          className="inline-flex h-10 items-center rounded-md bg-sky-600 px-4 text-sm font-medium text-white hover:bg-sky-500 dark:bg-sky-500 dark:hover:bg-sky-400"
+        >
+          {t("create")}
+        </Link>
+      </div>
+
+      <ServerList />
+    </div>
+  );
+}