Skip to content

Commit 29874fc

Browse files
waleedlatif1waleedlatif1
committed
refactor(consent): apply the simplify pass
The consent runtime installs a childList+subtree MutationObserver on document.body for its iframe blocker, for the life of every hosted page — including the workflow canvas — and re-scans each added subtree. Sim gates no iframes by consent, so disableAutomaticBlocking turns it off. Also: collapse the ConsentProvider passthrough into the dynamic() export; move ConsentPreferencesLink under (landing)/cookie-policy so a shell module no longer imports landing chrome; build the three cookie tables from one shape; move the table column widths into the prose chrome layer; only compute the category list when the card is expanded; drop the ConsentCategory cast; express the card width in Tailwind rather than an inline style. Comment corrections: the sibling mount is forced by ssr:false, not by re-render concerns; lib/consent/constants must stay dependency-free because next.config loads it and the browser bundles it; codeColumns exists for biome's useJsxKeyInIterable, not for React; the headless entry omits the components but the provider still injects an inert --c15t-* style block.
1 parent df6ffd3 commit 29874fc

9 files changed

Lines changed: 159 additions & 160 deletions

File tree

‎apps/sim/app/(landing)/components/prose-page/components/legal-block-group/components/legal-block/legal-block.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export function LegalBlockView({ block }: LegalBlockViewProps) {
4646
{block.columnWidths ? (
4747
<colgroup>
4848
{block.columnWidths.map((width, index) => (
49-
<col key={block.columns[index] ?? `col-${index}`} className={width} />
49+
<col key={`col-${index}`} className={width} />
5050
))}
5151
</colgroup>
5252
) : null}
@@ -65,10 +65,7 @@ export function LegalBlockView({ block }: LegalBlockViewProps) {
6565
return (
6666
<tr key={rowKey}>
6767
{row.map((cell, cellIndex) => (
68-
<td
69-
key={`${rowKey}-${block.columns[cellIndex]}`}
70-
className={PROSE_TYPE.tableCell}
71-
>
68+
<td key={`${rowKey}-${cellIndex}`} className={PROSE_TYPE.tableCell}>
7269
{block.codeColumns?.includes(cellIndex) ? <code>{cell}</code> : cell}
7370
</td>
7471
))}

‎apps/sim/app/(landing)/components/prose-page/constants.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,16 @@ export const PROSE_SPACING = {
3636
listIndent: 'pl-6',
3737
} as const
3838

39+
/**
40+
* Column widths for the cookie-inventory tables. Sibling tables sharing a header
41+
* must be given a fixed layout or each sizes itself to its own content and the
42+
* group reads as unaligned grids — so the widths are chrome, and live here
43+
* rather than as class strings in a content config.
44+
*/
45+
export const PROSE_TABLE_WIDTHS = {
46+
cookieInventory: ['w-[24%]', 'w-[16%]', 'w-[45%]', 'w-[15%]'],
47+
} as const
48+
3949
/**
4050
* Prose type tokens - the single source of truth for every heading size, body
4151
* color, list, callout, and inline-link treatment. Centralized alongside the

‎apps/sim/app/(landing)/components/prose-page/types.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,10 @@ export type LegalBlock =
4141
/**
4242
* Indices of columns rendered as inline code — cookie names, config keys.
4343
* A marker rather than a `<code>` in the row data, because a row carries
44-
* content and the renderer owns chrome, and because JSX inside an array
45-
* literal needs a key that means nothing here.
44+
* content and the renderer owns chrome. It is also what keeps the rows
45+
* plain strings: biome's `useJsxKeyInIterable` fires on JSX inside an
46+
* array literal, and the key it wants means nothing to a cell the
47+
* renderer already keys by column.
4648
*/
4749
codeColumns?: number[]
4850
rows: ReactNode[][]

apps/sim/app/_shell/consent/consent-preferences-link.tsx renamed to apps/sim/app/(landing)/cookie-policy/consent-preferences-link.tsx

File renamed without changes.

‎apps/sim/app/(landing)/cookie-policy/cookie-policy-content.tsx‎

Lines changed: 82 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,26 @@
1-
import { ConsentPreferencesLink } from '@/app/_shell/consent/consent-preferences-link'
2-
import { type LegalPageConfig, ProseLink } from '@/app/(landing)/components/prose-page'
1+
import type { ReactNode } from 'react'
2+
import {
3+
type LegalBlock,
4+
type LegalPageConfig,
5+
ProseLink,
6+
} from '@/app/(landing)/components/prose-page'
7+
import { PROSE_TABLE_WIDTHS } from '@/app/(landing)/components/prose-page/constants'
8+
import { ConsentPreferencesLink } from '@/app/(landing)/cookie-policy/consent-preferences-link'
39

4-
/** Shared column widths so the three cookie tables read as one aligned grid. */
5-
const COOKIE_TABLE_WIDTHS = ['w-[24%]', 'w-[16%]', 'w-[45%]', 'w-[15%]']
6-
7-
/** The cookie-name column reads as code. */
8-
const COOKIE_TABLE_CODE_COLUMNS = [0]
10+
/**
11+
* One cookie-inventory table per consent category. The three share a header and
12+
* a column layout, so they are built from one shape rather than repeated.
13+
*/
14+
function cookieTable(caption: string, rows: ReactNode[][]): LegalBlock {
15+
return {
16+
kind: 'table',
17+
caption,
18+
columns: ['Cookie', 'Provider', 'Purpose', 'Retention'],
19+
columnWidths: [...PROSE_TABLE_WIDTHS.cookieInventory],
20+
codeColumns: [0],
21+
rows,
22+
}
23+
}
924

1025
/**
1126
* Cookie Policy content — the inventory a consent banner has to stand on,
@@ -112,105 +127,69 @@ export const COOKIE_POLICY_CONFIG: LegalPageConfig = {
112127
kind: 'paragraph',
113128
content: `Retention periods are the maximum lifetime set when the cookie is written; a cookie can be cleared sooner at any time. Third-party providers occasionally rename or re-scope their cookies, so treat the provider column as the authoritative reference for anything not set by Sim.`,
114129
},
115-
{
116-
kind: 'table',
117-
caption: 'Necessary',
118-
columns: ['Cookie', 'Provider', 'Purpose', 'Retention'],
119-
columnWidths: COOKIE_TABLE_WIDTHS,
120-
codeColumns: COOKIE_TABLE_CODE_COLUMNS,
121-
rows: [
122-
[
123-
'better-auth.session_token',
124-
'Sim',
125-
'Keeps you signed in and identifies your session.',
126-
'30 days',
127-
],
128-
[
129-
'better-auth.session_data',
130-
'Sim',
131-
'Short-lived signed cache of your session so each page load does not re-read the database.',
132-
'5 minutes',
133-
],
134-
[
135-
'c15t',
136-
'Sim (via c15t)',
137-
'Records the cookie choice you made so the banner is not shown again.',
138-
'365 days',
139-
],
140-
[
141-
'sidebar_collapsed',
142-
'Sim',
143-
'Remembers whether the workspace sidebar is collapsed, so the layout does not jump on load.',
144-
'1 year',
145-
],
146-
[
147-
'__cf_bm',
148-
'Cloudflare',
149-
'Bot-management check on requests to providers we load, such as HubSpot and X.',
150-
'30 minutes',
151-
],
130+
cookieTable('Necessary', [
131+
[
132+
'better-auth.session_token',
133+
'Sim',
134+
'Keeps you signed in and identifies your session.',
135+
'30 days',
152136
],
153-
},
154-
{
155-
kind: 'table',
156-
caption: 'Analytics',
157-
columns: ['Cookie', 'Provider', 'Purpose', 'Retention'],
158-
columnWidths: COOKIE_TABLE_WIDTHS,
159-
codeColumns: COOKIE_TABLE_CODE_COLUMNS,
160-
rows: [
161-
['_ga', 'Google Analytics', 'Distinguishes one visitor from another.', '13 months'],
162-
[
163-
'_ga_*',
164-
'Google Analytics',
165-
'Holds the session state for a specific Analytics property.',
166-
'13 months',
167-
],
168-
[
169-
'__hstc',
170-
'HubSpot',
171-
'Tracks visits across sessions for the main tracker.',
172-
'6 months',
173-
],
174-
['hubspotutk', 'HubSpot', 'Identifies a visitor across form submissions.', '6 months'],
175-
['__hssc', 'HubSpot', 'Tracks the current session.', '30 minutes'],
176-
[
177-
'__hssrc',
178-
'HubSpot',
179-
'Detects whether the visitor restarted their browser.',
180-
'Session',
181-
],
137+
[
138+
'better-auth.session_data',
139+
'Sim',
140+
'Short-lived signed cache of your session so each page load does not re-read the database.',
141+
'5 minutes',
182142
],
183-
},
184-
{
185-
kind: 'table',
186-
caption: 'Marketing',
187-
columns: ['Cookie', 'Provider', 'Purpose', 'Retention'],
188-
columnWidths: COOKIE_TABLE_WIDTHS,
189-
codeColumns: COOKIE_TABLE_CODE_COLUMNS,
190-
rows: [
191-
[
192-
'guest_id',
193-
'X (Twitter)',
194-
'Identifies a browser to the X conversion pixel.',
195-
'13 months',
196-
],
197-
[
198-
'guest_id_ads',
199-
'X (Twitter)',
200-
'Measures conversions from X advertising.',
201-
'13 months',
202-
],
203-
[
204-
'guest_id_marketing',
205-
'X (Twitter)',
206-
'Measures the performance of X marketing campaigns.',
207-
'13 months',
208-
],
209-
['personalization_id', 'X (Twitter)', 'Personalizes the ads shown on X.', '13 months'],
210-
['muc_ads', 'X (Twitter)', 'Measures ad conversions across X domains.', '13 months'],
211-
['_gcl_*', 'Google Ads', 'Attributes a sign-up to the ad that led to it.', '90 days'],
143+
[
144+
'c15t',
145+
'Sim (via c15t)',
146+
'Records the cookie choice you made so the banner is not shown again.',
147+
'365 days',
212148
],
213-
},
149+
[
150+
'sidebar_collapsed',
151+
'Sim',
152+
'Remembers whether the workspace sidebar is collapsed, so the layout does not jump on load.',
153+
'1 year',
154+
],
155+
[
156+
'__cf_bm',
157+
'Cloudflare',
158+
'Bot-management check on requests to providers we load, such as HubSpot and X.',
159+
'30 minutes',
160+
],
161+
]),
162+
cookieTable('Analytics', [
163+
['_ga', 'Google Analytics', 'Distinguishes one visitor from another.', '13 months'],
164+
[
165+
'_ga_*',
166+
'Google Analytics',
167+
'Holds the session state for a specific Analytics property.',
168+
'13 months',
169+
],
170+
['__hstc', 'HubSpot', 'Tracks visits across sessions for the main tracker.', '6 months'],
171+
['hubspotutk', 'HubSpot', 'Identifies a visitor across form submissions.', '6 months'],
172+
['__hssc', 'HubSpot', 'Tracks the current session.', '30 minutes'],
173+
['__hssrc', 'HubSpot', 'Detects whether the visitor restarted their browser.', 'Session'],
174+
]),
175+
cookieTable('Marketing', [
176+
[
177+
'guest_id',
178+
'X (Twitter)',
179+
'Identifies a browser to the X conversion pixel.',
180+
'13 months',
181+
],
182+
['guest_id_ads', 'X (Twitter)', 'Measures conversions from X advertising.', '13 months'],
183+
[
184+
'guest_id_marketing',
185+
'X (Twitter)',
186+
'Measures the performance of X marketing campaigns.',
187+
'13 months',
188+
],
189+
['personalization_id', 'X (Twitter)', 'Personalizes the ads shown on X.', '13 months'],
190+
['muc_ads', 'X (Twitter)', 'Measures ad conversions across X domains.', '13 months'],
191+
['_gcl_*', 'Google Ads', 'Attributes a sign-up to the ad that led to it.', '90 days'],
192+
]),
214193
],
215194
},
216195
{

‎apps/sim/app/_shell/consent/consent-banner.tsx‎

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,14 @@ interface ConsentCategoryCopy {
1414

1515
/**
1616
* Sim's own wording per category. The runtime ships generic descriptions; these
17-
* say what the cookies actually do here. A category without an entry falls back
18-
* to the runtime's description rather than disappearing.
17+
* say what the cookies actually do here.
18+
*
19+
* Typed by name rather than by {@link ConsentCategory} because the runtime's
20+
* union is wider than the three categories we configure — a policy that adds
21+
* one server-side falls back to the runtime's description instead of
22+
* disappearing. The `satisfies` still requires an entry for each of ours.
1923
*/
20-
const CONSENT_CATEGORY_COPY: Partial<Record<ConsentCategory, ConsentCategoryCopy>> = {
24+
const CONSENT_CATEGORY_COPY: Record<string, ConsentCategoryCopy | undefined> = {
2125
necessary: {
2226
title: 'Necessary',
2327
description: 'Sign-in and security. Always on.',
@@ -30,25 +34,23 @@ const CONSENT_CATEGORY_COPY: Partial<Record<ConsentCategory, ConsentCategoryCopy
3034
title: 'Marketing',
3135
description: 'Measures which campaigns bring builders to Sim.',
3236
},
33-
}
34-
35-
/** Sized against the toast stack so both floating surfaces read as one system. */
36-
const CARD_STYLE = { width: 'min(100vw - 2rem, 380px)' } as const
37+
} satisfies Record<ConsentCategory, ConsentCategoryCopy>
3738

38-
/** Shared expo-out easing, matching the toast stack's motion. */
39+
/** Shared expo-out easing and timings, matching the toast stack's motion. */
3940
const EASE = [0.22, 1, 0.36, 1] as const
4041
const ENTER_TRANSITION = { duration: 0.28, ease: EASE } as const
4142
const EXPAND_TRANSITION = { duration: 0.22, ease: EASE } as const
4243

43-
const CARD_HIDDEN = { opacity: 0, y: 8 } as const
44-
const CARD_SHOWN = { opacity: 1, y: 0 } as const
45-
const CARD_HIDDEN_REDUCED = { opacity: 0 } as const
46-
const CARD_SHOWN_REDUCED = { opacity: 1 } as const
44+
const NO_CATEGORIES: ReturnType<ReturnType<typeof useConsentManager>['getDisplayedConsents']> = []
4745

4846
const CATEGORIES_COLLAPSED = { height: 0, opacity: 0 } as const
4947
const CATEGORIES_OPEN = { height: 'auto', opacity: 1 } as const
5048

51-
/** Inline link chrome, matching `PROSE_TYPE.link` on the legal pages. */
49+
/**
50+
* A copy of `PROSE_TYPE.link` rather than an import: the banner lives in the
51+
* app shell and the token lives in the landing route group, and a shell module
52+
* reaching into a route group is the wrong direction for one class string.
53+
*/
5254
const LINK_CLASS =
5355
'text-[var(--text-primary)] underline underline-offset-2 transition-colors hover:text-[var(--text-body)]'
5456

@@ -66,8 +68,9 @@ const LINK_CLASS =
6668
* The card pins the `light` token layer rather than following the visitor's
6769
* theme, as every other public surface does (`LandingShell`, `AuthShell`, the
6870
* chat interfaces, the public file view). Consent is asked for on a first
69-
* visit, which always lands on one of those; reaching the themed app without a
70-
* consent record takes an expiry against a live session.
71+
* visit, which lands on one of those. A record expiring against a live session
72+
* is the one path that renders this card over the themed app, where it will
73+
* read light-on-dark; accepted as the rarer case.
7174
*/
7275
export function ConsentBanner() {
7376
const { consents, selectedConsents, setSelectedConsent, getDisplayedConsents } =
@@ -82,26 +85,27 @@ export function ConsentBanner() {
8285
}, [openDialog])
8386

8487
const isExpanded = dialog.isVisible
85-
const surface = isExpanded ? dialog : banner
86-
const { allowedActions } = surface
88+
const surfaceName = isExpanded ? 'dialog' : 'banner'
89+
const { allowedActions } = isExpanded ? dialog : banner
8790
/**
8891
* The store's own selector, not a hand-rolled filter over `consentTypes`: the
8992
* shipped defaults mark every category except `necessary` as `display: false`,
90-
* so filtering on that flag silently renders a one-row list.
93+
* so filtering on that flag silently renders a one-row list. It re-filters and
94+
* re-allocates on every call, so only the expanded card pays for it.
9195
*/
92-
const categories = getDisplayedConsents()
96+
const categories = isExpanded ? getDisplayedConsents() : NO_CATEGORIES
97+
const enterOffset = prefersReducedMotion ? 0 : 8
9398

9499
return (
95100
<AnimatePresence>
96101
{(banner.isVisible || dialog.isVisible) && (
97102
<motion.section
98103
aria-label='Cookie preferences'
99-
initial={prefersReducedMotion ? CARD_HIDDEN_REDUCED : CARD_HIDDEN}
100-
animate={prefersReducedMotion ? CARD_SHOWN_REDUCED : CARD_SHOWN}
101-
exit={prefersReducedMotion ? CARD_HIDDEN_REDUCED : CARD_HIDDEN}
104+
initial={{ opacity: 0, y: enterOffset }}
105+
animate={{ opacity: 1, y: 0 }}
106+
exit={{ opacity: 0, y: enterOffset }}
102107
transition={ENTER_TRANSITION}
103-
style={CARD_STYLE}
104-
className='light fixed bottom-4 left-4 z-[var(--z-toast)] flex flex-col gap-3 overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--bg)] p-4 shadow-overlay'
108+
className='light fixed bottom-4 left-4 z-[var(--z-toast)] flex w-[min(100vw-2rem,380px)] flex-col gap-3 overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--bg)] p-4 shadow-overlay'
105109
>
106110
<div className='flex flex-col gap-1'>
107111
<p className='text-[var(--text-body)] text-sm leading-5'>Cookies</p>
@@ -126,7 +130,7 @@ export function ConsentBanner() {
126130
>
127131
<ul className='flex flex-col gap-3'>
128132
{categories.map((type) => {
129-
const copy = CONSENT_CATEGORY_COPY[type.name as ConsentCategory]
133+
const copy = CONSENT_CATEGORY_COPY[type.name]
130134
const inputId = `consent-${type.name}`
131135
return (
132136
<li key={type.name} className='flex items-start justify-between gap-3'>
@@ -150,6 +154,7 @@ export function ConsentBanner() {
150154
)}
151155
</AnimatePresence>
152156

157+
{/* Two clusters, not `mr-auto` on the chip: chips carry no outer margin. */}
153158
<div className='flex items-center justify-between gap-1'>
154159
<div className='flex items-center gap-1'>
155160
{!isExpanded && allowedActions.includes('customize') && (
@@ -160,19 +165,15 @@ export function ConsentBanner() {
160165
{allowedActions.includes('reject') && (
161166
<Chip
162167
variant='border'
163-
onClick={() =>
164-
void performAction('reject', { surface: isExpanded ? 'dialog' : 'banner' })
165-
}
168+
onClick={() => void performAction('reject', { surface: surfaceName })}
166169
>
167170
Reject all
168171
</Chip>
169172
)}
170173
{allowedActions.includes('accept') && (
171174
<Chip
172175
variant='border'
173-
onClick={() =>
174-
void performAction('accept', { surface: isExpanded ? 'dialog' : 'banner' })
175-
}
176+
onClick={() => void performAction('accept', { surface: surfaceName })}
176177
>
177178
Accept all
178179
</Chip>

0 commit comments

Comments
 (0)