From d819b4bd177eaa62333e87f33a5d1e97d0bdee89 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 22:49:25 +0100
Subject: [PATCH] fix: remove card wrapping from bare inputs + fix privacy
 false-dirty on load

---
 .../unified/tabs/AccountProfileTab.tsx        |  7 ++--
 .../settings/unified/tabs/SiteGeneralTab.tsx  | 10 ++---
 .../settings/unified/tabs/SitePrivacyTab.tsx  | 41 ++++++++++---------
 .../unified/tabs/WorkspaceGeneralTab.tsx      |  4 +-
 4 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/components/settings/unified/tabs/AccountProfileTab.tsx b/components/settings/unified/tabs/AccountProfileTab.tsx
index e0c78f5..3e1f777 100644
--- a/components/settings/unified/tabs/AccountProfileTab.tsx
+++ b/components/settings/unified/tabs/AccountProfileTab.tsx
@@ -69,8 +69,8 @@ export default function AccountProfileTab({ onDirtyChange, onRegisterSave }: { o
       </div>
 
       {/* Display Name */}
-      <div className="space-y-3">
-        <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
+      <div className="space-y-4">
+        <div>
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Display Name</label>
           <Input
             value={displayName}
@@ -79,8 +79,7 @@ export default function AccountProfileTab({ onDirtyChange, onRegisterSave }: { o
           />
         </div>
 
-        {/* Email — read-only display */}
-        <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
+        <div>
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Email Address</label>
           <Input value={user.email} disabled className="opacity-60" />
           <p className="text-xs text-neutral-500 mt-1">Email changes require password verification. Use <a href="https://auth.ciphera.net/settings" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">Ciphera Auth</a> to change your email.</p>
diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index 9d5e82b..4ef0459 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -104,20 +104,20 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, onRegisterSave }
           <p className="text-sm text-neutral-400">Update your site details and tracking script.</p>
         </div>
 
-        <div className="space-y-3">
-          <div className="grid grid-cols-2 gap-3">
-            <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
+        <div className="space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div>
               <label className="block text-sm font-medium text-neutral-300 mb-1.5">Site Name</label>
               <Input value={name} onChange={e => setName(e.target.value)} placeholder="My Website" />
             </div>
-            <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
+            <div>
               <label className="block text-sm font-medium text-neutral-300 mb-1.5">Domain</label>
               <Input value={site.domain} disabled className="opacity-60" />
               <p className="text-xs text-neutral-500 mt-1">Cannot be changed.</p>
             </div>
           </div>
 
-          <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
+          <div>
             <label className="block text-sm font-medium text-neutral-300 mb-1.5">Timezone</label>
             <Select
               value={timezone}
diff --git a/components/settings/unified/tabs/SitePrivacyTab.tsx b/components/settings/unified/tabs/SitePrivacyTab.tsx
index 7008efe..3ce021a 100644
--- a/components/settings/unified/tabs/SitePrivacyTab.tsx
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -44,7 +44,7 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, onRegisterSave }
   const [snippetCopied, setSnippetCopied] = useState(false)
   const initialRef = useRef('')
 
-  // Sync form state from site data — only on first load, not on SWR revalidation
+  // Sync form state — only on first load, skip dirty tracking until ready
   const hasInitialized = useRef(false)
   useEffect(() => {
     if (!site || hasInitialized.current) return
@@ -56,34 +56,35 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, onRegisterSave }
     setHideUnknownLocations(site.hide_unknown_locations ?? false)
     setDataRetention(site.data_retention_months ?? 6)
     setExcludedPaths((site.excluded_paths || []).join('\n'))
+    initialRef.current = JSON.stringify({
+      collectPagePaths: site.collect_page_paths ?? true,
+      collectReferrers: site.collect_referrers ?? true,
+      collectDeviceInfo: site.collect_device_info ?? true,
+      collectScreenRes: site.collect_screen_resolution ?? true,
+      collectGeoData: site.collect_geo_data ?? 'full',
+      hideUnknownLocations: site.hide_unknown_locations ?? false,
+      dataRetention: site.data_retention_months ?? 6,
+      excludedPaths: (site.excluded_paths || []).join('\n'),
+      psiFrequency: 'weekly',
+    })
     hasInitialized.current = true
   }, [site])
 
-  // Sync PSI frequency separately (comes from a different SWR hook)
+  // Sync PSI frequency separately — update both state AND snapshot when it first loads
   const psiInitialized = useRef(false)
   useEffect(() => {
     if (!psiConfig || psiInitialized.current) return
-    setPsiFrequency(psiConfig.frequency || 'weekly')
+    const freq = psiConfig.frequency || 'weekly'
+    setPsiFrequency(freq)
+    // Update the snapshot to include the real PSI frequency so it doesn't show as dirty
+    if (initialRef.current) {
+      const snap = JSON.parse(initialRef.current)
+      snap.psiFrequency = freq
+      initialRef.current = JSON.stringify(snap)
+    }
     psiInitialized.current = true
   }, [psiConfig])
 
-  // Build initial snapshot once both site + psi are loaded
-  useEffect(() => {
-    if (!hasInitialized.current || !initialRef.current && site) {
-      initialRef.current = JSON.stringify({
-        collectPagePaths: site?.collect_page_paths ?? true,
-        collectReferrers: site?.collect_referrers ?? true,
-        collectDeviceInfo: site?.collect_device_info ?? true,
-        collectScreenRes: site?.collect_screen_resolution ?? true,
-        collectGeoData: site?.collect_geo_data ?? 'full',
-        hideUnknownLocations: site?.hide_unknown_locations ?? false,
-        dataRetention: site?.data_retention_months ?? 6,
-        excludedPaths: (site?.excluded_paths || []).join('\n'),
-        psiFrequency: psiConfig?.frequency || 'weekly',
-      })
-    }
-  }, [site, psiConfig])
-
   // Track dirty state
   useEffect(() => {
     if (!initialRef.current) return
diff --git a/components/settings/unified/tabs/WorkspaceGeneralTab.tsx b/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
index d361689..bc5930a 100644
--- a/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
@@ -91,12 +91,12 @@ export default function WorkspaceGeneralTab({ onDirtyChange, onRegisterSave }: {
           <p className="text-sm text-neutral-400">Basic details about your organization.</p>
         </div>
 
-        <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
+        <div>
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Organization Name</label>
           <Input value={name} onChange={e => setName(e.target.value)} placeholder="Acme Corp" />
         </div>
 
-        <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
+        <div>
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Organization Slug</label>
           <div className="flex items-center gap-2">
             <span className="text-sm text-neutral-500">pulse.ciphera.net/</span>