refactor(frontend): unify list and create pages with compact topbar layout

Move resource list and guide page titles into the shared topbar, introduce ListPageLayout for tighter spacing, and align knowledge edit with the prompt editor chrome. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-05 15:05:16 +08:00
parent b27efb2892
commit a9c70effae
9 changed files with 529 additions and 467 deletions
@@ -0,0 +1,80 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+import { PageTopbar, TopbarPortal } from "./topbar-portal";
+
+export function ListPageLayout({
+  title,
+  description,
+  action,
+  children,
+  className,
+}: {
+  title: string;
+  description?: ReactNode;
+  action?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}) {
+  const hasHeader = Boolean(description || action);
+
+  return (
+    <>
+      <TopbarPortal>
+        <PageTopbar title={title} />
+      </TopbarPortal>
+
+      <div
+        data-app-content="list"
+        className={cn(
+          "mx-auto flex w-full max-w-[1440px] flex-col gap-4",
+          className,
+        )}
+      >
+        {hasHeader && (
+          <div
+            className={cn(
+              "flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4",
+              description && action
+                ? "sm:justify-between"
+                : action
+                  ? "sm:justify-end"
+                  : "",
+            )}
+          >
+            {description && (
+              <p className="max-w-2xl text-sm leading-6 text-muted-foreground">
+                {description}
+              </p>
+            )}
+            {action}
+          </div>
+        )}
+
+        {children}
+      </div>
+    </>
+  );
+}
+
+export function ListPageSection({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <section
+      className={cn(
+        "rounded-2xl border border-hairline bg-card p-5 shadow-sm",
+        className,
+      )}
+    >
+      {children}
+    </section>
+  );
+}