refactor(web): share settings group surfaces

apps/web/src/components/settings/FoldedSettingsSection.tsx

@@ -1,3 +1,4 @@
+import { SettingsGroup } from "./SettingsGroup";
 import { ChevronRightIcon } from "lucide-react";
 import { type ReactNode, useState } from "react";
 
@@ -35,11 +36,7 @@ export function FoldedSettingsSection({
 
   return (
     <section id={id} ref={targetRef} tabIndex={-1} className="outline-none">
-      <Collapsible
-        open={open}
-        onOpenChange={setOpen}
-        className="rounded-xl border border-border/60 bg-card/40 text-foreground shadow-xs/5"
-      >
+      <Collapsible open={open} onOpenChange={setOpen} render={<SettingsGroup divided={false} />}>
         <div className="flex items-center gap-4 px-3 sm:px-4">
           <CollapsibleTrigger className="flex min-h-11 min-w-0 flex-1 items-center gap-2 py-2 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-md">
             <ChevronRightIcon

apps/web/src/components/settings/ProviderSettingsPanel.tsx

@@ -1,3 +1,4 @@
+import { SettingsGroup } from "./SettingsGroup";
 import { RefreshIcon } from "~/components/ui/refresh-icon";
 import { useAtomValue } from "@effect/atom-react";
 import { connectionStatusTitle } from "@t3tools/client-runtime/connection";
@@ -171,7 +172,6 @@ function providerEnvironmentDetail(environment: EnvironmentPresentation): string
   return environment.displayUrl ?? "Remote device";
 }
 
-const providerCardClassName = "rounded-xl border border-border/60 bg-card/40 shadow-xs/5";
 // Shared by the editor grid and the placeholder states so switching devices
 // never changes the card's footprint.
 const providerCardHeightClassName =
@@ -199,12 +199,9 @@ function ProviderSettingsPlaceholder({
       {deviceTabs ? (
         <div className="flex min-h-11 min-w-0 items-center px-3 sm:px-4">{deviceTabs}</div>
       ) : null}
-      <div
-        className={cn(
-          providerCardClassName,
-          providerCardHeightClassName,
-          "flex overflow-x-hidden overflow-y-auto",
-        )}
+      <SettingsGroup
+        divided={false}
+        className={cn(providerCardHeightClassName, "flex overflow-x-hidden overflow-y-auto")}
       >
         <Empty className="min-h-88">
           <EmptyMedia variant="icon">{icon}</EmptyMedia>
@@ -214,7 +211,7 @@ function ProviderSettingsPlaceholder({
           </EmptyHeader>
           {children ? <EmptyContent className="max-w-xl">{children}</EmptyContent> : null}
         </Empty>
-      </div>
+      </SettingsGroup>
     </SettingsSection>
   );
 }
@@ -1044,16 +1041,16 @@ export function EnvironmentProviderSettings({
           </div>
         </div>
         {readOnly ? (
-          <div className={cn(providerCardClassName, "overflow-hidden")}>
+          <SettingsGroup divided={false} className="overflow-hidden">
             <SettingsRow
               title="Limited permissions"
               description={`This session can view ${environmentLabel}'s providers but can't change their settings.`}
             />
-          </div>
+          </SettingsGroup>
         ) : null}
-        <div
+        <SettingsGroup
+          divided={false}
           className={cn(
-            providerCardClassName,
             providerCardHeightClassName,
             "overflow-hidden @min-[48rem]/providers:grid @min-[48rem]/providers:grid-cols-[17rem_minmax(0,1fr)]",
           )}
@@ -1083,7 +1080,7 @@ export function EnvironmentProviderSettings({
               </div>
             )}
           </div>
-        </div>
+        </SettingsGroup>
       </SettingsSection>
 
       <UsageProviderSettings

apps/web/src/components/settings/SettingsGroup.tsx

@@ -0,0 +1,30 @@
+import type { ComponentProps } from "react";
+
+import { cn } from "../../lib/utils";
+
+/** Shared settings card surface, with optional separators between rows. */
+export function SettingsGroup({
+  variant = "grouped",
+  divided = true,
+  className,
+  ...props
+}: ComponentProps<"div"> & {
+  variant?: "grouped" | "plain";
+  divided?: boolean;
+}) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "relative overflow-visible text-foreground",
+        variant === "grouped"
+          ? "rounded-xl border border-border/60 bg-card/40 shadow-xs/5"
+          : "space-y-1",
+        variant === "grouped" &&
+          divided &&
+          "[&>*+*]:border-t [&>*+*]:border-border/50 [&>[data-slot=settings-row]]:rounded-none",
+        className,
+      )}
+    />
+  );
+}

apps/web/src/components/settings/SettingsPanels.tsx

@@ -1,3 +1,4 @@
+import { SettingsGroup } from "./SettingsGroup";
 import { Spinner } from "~/components/ui/spinner";
 import { NotificationSettings } from "./NotificationSettings";
 import { ArchiveIcon, ArchiveX, CheckIcon, ChevronRightIcon, SettingsIcon } from "lucide-react";
@@ -2047,7 +2048,7 @@ function LegacyFeaturesSection() {
           <ChevronRightIcon className="size-4 text-muted-foreground transition-transform duration-200 group-data-panel-open:rotate-90" />
         </CollapsibleTrigger>
         <CollapsiblePanel>
-          <div className="relative overflow-visible rounded-xl border border-border/60 bg-card/40 text-foreground shadow-xs/5 [&>*+*]:border-t [&>*+*]:border-border/50 [&>[data-slot=settings-row]]:rounded-none">
+          <SettingsGroup>
             <SettingsRow
               {...searchableSetting("legacy-plan-mode")}
               description="Restore Build/Plan, /plan, /default, and Shift+Tab. Off uses build mode."
@@ -2087,7 +2088,7 @@ function LegacyFeaturesSection() {
                 />
               }
             />
-          </div>
+          </SettingsGroup>
         </CollapsiblePanel>
       </Collapsible>
     </section>

apps/web/src/components/settings/settingsLayout.tsx

@@ -1,3 +1,4 @@
+import { SettingsGroup } from "./SettingsGroup";
 import { InfoIcon, Undo2Icon } from "lucide-react";
 import { DEFAULT_SERVER_SETTINGS, type ServerSettings } from "@t3tools/contracts";
 import * as Equal from "effect/Equal";
@@ -215,17 +216,9 @@ export function SettingsSection({
           <div className="flex min-h-7 min-w-7 items-center justify-end">{headerAction}</div>
         </div>
       )}
-      <div
-        data-settings-scroll-target={hideTitle ? "" : undefined}
-        className={cn(
-          "relative overflow-visible text-foreground",
-          variant === "grouped"
-            ? "rounded-xl border border-border/60 bg-card/40 shadow-xs/5 [&>*+*]:border-t [&>*+*]:border-border/50 [&>[data-slot=settings-row]]:rounded-none"
-            : "space-y-1",
-        )}
-      >
+      <SettingsGroup data-settings-scroll-target={hideTitle ? "" : undefined} variant={variant}>
         {children}
-      </div>
+      </SettingsGroup>
     </section>
   );
 }