feat(panel): pagination for server lists

panel/src/components/AppShell.tsx

@@ -121,8 +121,8 @@ export function AppShell() {
             <ThemeToggle />
           </div>
         </header>
-        <main className="flex-1 p-6">
-          <div className="mx-auto max-w-7xl space-y-7">
+        <main className="flex flex-1 flex-col p-6">
+          <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-6">
             <Outlet />
           </div>
         </main>

panel/src/components/Pagination.tsx

@@ -0,0 +1,41 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+
+interface Props {
+  page: number;
+  pageSize: number;
+  total: number;
+  onChange: (page: number) => void;
+}
+
+export function Pagination({ page, pageSize, total, onChange }: Props) {
+  const { t } = useTranslation("common");
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+
+  return (
+    <div className="flex items-center justify-center gap-2 mt-auto">
+      <Button
+        variant="outline"
+        size="sm"
+        disabled={page <= 1}
+        onClick={() => onChange(page - 1)}
+      >
+        <ChevronLeft />
+        {t("pagination_prev")}
+      </Button>
+      <span className="text-xs text-muted-foreground min-w-[6rem] text-center">
+        {t("pagination_of", { current: page, total: totalPages })}
+      </span>
+      <Button
+        variant="outline"
+        size="sm"
+        disabled={page >= totalPages}
+        onClick={() => onChange(page + 1)}
+      >
+        {t("pagination_next")}
+        <ChevronRight />
+      </Button>
+    </div>
+  );
+}