feat: add custom branding for signing pages (#2785)

Platform-plan organisations and teams can now customise non-embed
signing pages with six brand colour tokens, a border-radius, and
a free-text custom CSS block (up to 256 KB).

- Stored on OrganisationGlobalSettings / TeamGlobalSettings;
  teams inherit from the org via brandingEnabled === null.
- CSS is sanitised on save (PostCSS) so we can inline it at SSR
  with no per-render parsing.
- Rendered via a nonce'd <style> scoped under .documenso-branded,
  using native CSS nesting so user selectors don't need scoping.
- Gated on the existing embedSigningWhiteLabel claim (or
  self-hosted) — reuses the embed white-label decision.

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.branding.tsx

@@ -1,9 +1,14 @@
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { putFile } from '@documenso/lib/universal/upload/put-file';
+import type { SanitizeBrandingCssWarning } from '@documenso/lib/utils/sanitize-branding-css';
 import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { useToast } from '@documenso/ui/primitives/use-toast';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react/macro';
+import { plural } from '@lingui/core/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
+import { useState } from 'react';
 
 import {
   BrandingPreferencesForm,
@@ -11,27 +16,32 @@ import {
 } from '~/components/forms/branding-preferences-form';
 import { SettingsHeader } from '~/components/general/settings-header';
 import { useCurrentTeam } from '~/providers/team';
-import { appMetaTags } from '~/utils/meta';
-
-export function meta() {
-  return appMetaTags(msg`Branding Preferences`);
-}
 
 export default function TeamsSettingsPage() {
   const team = useCurrentTeam();
+  const organisation = useCurrentOrganisation();
 
   const { t } = useLingui();
   const { toast } = useToast();
 
-  const { data: teamWithSettings, isLoading: isLoadingTeam } = trpc.team.get.useQuery({
+  const [cssWarnings, setCssWarnings] = useState<SanitizeBrandingCssWarning[]>([]);
+
+  const {
+    data: teamWithSettings,
+    isLoading: isLoadingTeam,
+    refetch: refetchTeam,
+  } = trpc.team.get.useQuery({
     teamReference: team.id,
   });
 
   const { mutateAsync: updateTeamSettings } = trpc.team.settings.update.useMutation();
 
+  const canCustomBranding =
+    organisation.organisationClaim.flags.embedSigningWhiteLabel === true || !IS_BILLING_ENABLED();
+
   const onBrandingPreferencesFormSubmit = async (data: TBrandingPreferencesFormSchema) => {
     try {
-      const { brandingEnabled, brandingLogo, brandingUrl, brandingCompanyDetails } = data;
+      const { brandingEnabled, brandingLogo, brandingUrl, brandingCompanyDetails, brandingColors, brandingCss } = data;
 
       let uploadedBrandingLogo: string | undefined;
 
@@ -44,20 +54,40 @@ export default function TeamsSettingsPage() {
         uploadedBrandingLogo = '';
       }
 
-      await updateTeamSettings({
+      const result = await updateTeamSettings({
         teamId: team.id,
         data: {
           brandingEnabled,
           brandingLogo: uploadedBrandingLogo,
           brandingUrl: brandingUrl || null,
           brandingCompanyDetails: brandingCompanyDetails || null,
+          brandingColors,
+          brandingCss,
         },
       });
 
-      toast({
-        title: t`Branding preferences updated`,
-        description: t`Your branding preferences have been updated`,
-      });
+      // Refetch so the form re-syncs with the sanitised CSS that was
+      // actually persisted (sanitiser may have dropped rules).
+      await refetchTeam();
+
+      const warnings = result?.cssWarnings ?? [];
+      setCssWarnings(warnings);
+
+      if (warnings.length > 0) {
+        toast({
+          title: t`Branding preferences updated with warnings`,
+          description: plural(warnings.length, {
+            one: '# CSS rule was dropped during sanitisation.',
+            other: '# CSS rules were dropped during sanitisation.',
+          }),
+          duration: 8000,
+        });
+      } else {
+        toast({
+          title: t`Branding preferences updated`,
+          description: t`Your branding preferences have been updated`,
+        });
+      }
     } catch (err) {
       toast({
         title: t`Something went wrong`,
@@ -85,10 +115,35 @@ export default function TeamsSettingsPage() {
       <section>
         <BrandingPreferencesForm
           canInherit={true}
+          hasAdvancedBranding={canCustomBranding}
           context="Team"
           settings={teamWithSettings.teamSettings}
           onFormSubmit={onBrandingPreferencesFormSubmit}
         />
+
+        {cssWarnings.length > 0 && (
+          <Alert variant="warning" className="mt-6">
+            <AlertTitle>
+              <Trans>CSS rules were dropped during sanitisation</Trans>
+            </AlertTitle>
+
+            <AlertDescription>
+              <ul className="list-disc pl-5">
+                {cssWarnings.map((warning, index) => (
+                  <li key={index}>
+                    {warning.detail}
+                    {warning.line !== undefined && (
+                      <span className="text-muted-foreground">
+                        {' '}
+                        <Trans>(line {warning.line})</Trans>
+                      </span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </AlertDescription>
+          </Alert>
+        )}
       </section>
     </div>
   );