From 000591f87f1809e045063c5d69615b67409bb0d5 Mon Sep 17 00:00:00 2001
From: Khalid Abdi <xamza2009@gmail.com>
Date: Thu, 16 Jul 2026 23:48:30 +0300
Subject: [PATCH] frontend: space separated panels in settings frames
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add an opt-in `separated` prop to SettingsFrame/SettingsSection that adds the
COSS "Separated Panels" gap-4 between sibling panels (matches CardFrame's
built-in -1rem clip vars so rounded corners clip across the gap). Turn it on
for the multi-toggle frames — AI availability and the two notification
sections — so their panels no longer stack flush. Joined divide-y lists stay
flush.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/components/settings/settings-ai.tsx  |  1 +
 .../components/settings/settings-parts.tsx    | 21 +++++++++++++++++--
 .../settings/settings-preferences.tsx         |  2 ++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/frontend/components/settings/settings-ai.tsx b/frontend/components/settings/settings-ai.tsx
index 695eb3b..42eef40 100644
--- a/frontend/components/settings/settings-ai.tsx
+++ b/frontend/components/settings/settings-ai.tsx
@@ -211,6 +211,7 @@ export function AIPanel() {
       {policy ? (
         <SettingsFrame
           description={t("settings.ai.availability.description")}
+          separated
           title={t("settings.ai.availability.title")}
         >
           {isAdmin ? (
diff --git a/frontend/components/settings/settings-parts.tsx b/frontend/components/settings/settings-parts.tsx
index 94dc315..4b30423 100644
--- a/frontend/components/settings/settings-parts.tsx
+++ b/frontend/components/settings/settings-parts.tsx
@@ -14,6 +14,7 @@ import {
   CardFrameTitle,
 } from "@/components/ui/card";
 import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
 
 // A settings section rendered inside the COSS "frame" surface: a titled header
 // above one or more cards.
@@ -34,15 +35,23 @@ export function SettingsFrame({
   action,
   children,
   className,
+  separated = false,
 }: {
   title: string;
   description?: string;
   action?: ReactNode;
   children: ReactNode;
   className?: string;
+  /**
+   * COSS "Separated Panels": add a 1rem gap so sibling panels read as distinct
+   * cards instead of one flush joined list. The `gap-4` matches CardFrame's
+   * built-in `--clip-top/--clip-bottom: -1rem`, which keeps each panel's rounded
+   * corners clipping correctly across the gap. Leave off for a joined list.
+   */
+  separated?: boolean;
 }) {
   return (
-    <CardFrame className={className}>
+    <CardFrame className={cn(separated && "gap-4", className)}>
       <CardFrameHeader className="border-b border-border/60">
         <CardFrameTitle className="text-base">{title}</CardFrameTitle>
         {description ? (
@@ -63,14 +72,22 @@ export function SettingsSection({
   description,
   action,
   children,
+  separated = false,
 }: {
   title: string;
   description?: string;
   action?: ReactNode;
   children: ReactNode;
+  /** See {@link SettingsFrame}'s `separated` — spaces sibling panels apart. */
+  separated?: boolean;
 }) {
   return (
-    <SettingsFrame action={action} description={description} title={title}>
+    <SettingsFrame
+      action={action}
+      description={description}
+      separated={separated}
+      title={title}
+    >
       {children}
     </SettingsFrame>
   );
diff --git a/frontend/components/settings/settings-preferences.tsx b/frontend/components/settings/settings-preferences.tsx
index 27e0fae..b9de7dd 100644
--- a/frontend/components/settings/settings-preferences.tsx
+++ b/frontend/components/settings/settings-preferences.tsx
@@ -339,6 +339,7 @@ export function ProfilePanel() {
 
       <SettingsSection
         description={t("settings.profile.patientNotificationsDescription")}
+        separated
         title={t("settings.profile.patientNotifications")}
       >
         {patientNotifications.map((item) => (
@@ -356,6 +357,7 @@ export function ProfilePanel() {
 
       <SettingsSection
         description={t("settings.profile.accountNotificationsDescription")}
+        separated
         title={t("settings.profile.accountNotifications")}
       >
         {accountNotifications.map((item) => (