Sievepad integration

src/components/common/EnterpriseUpsell.tsx

@@ -26,12 +26,20 @@ export function EnterpriseUpsell({ open, onClose }: EnterpriseUpsellProps) {
 
   return (
     <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
-      <DialogContent>
-        <DialogHeader>
+      <DialogContent className="gap-6">
+        <DialogHeader className="space-y-4">
           <DialogTitle>{t('enterprise.trialTitle')}</DialogTitle>
           <DialogDescription>{t('enterprise.trialDescription')}</DialogDescription>
         </DialogHeader>
-        <DialogFooter>
+        <DialogFooter className="gap-2 sm:items-center">
+          <a
+            href="https://stalw.art/compare#why-isnt-feature-x-open-source"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-center text-xs text-muted-foreground underline-offset-4 hover:underline sm:mr-auto sm:text-left"
+          >
+            {t('enterprise.whyNotFree')}
+          </a>
           <Button variant="outline" onClick={onClose}>
             {t('common.close')}
           </Button>

src/components/forms/DynamicForm.tsx

@@ -53,6 +53,7 @@ import { SECRET_MASK } from '@/lib/jmapUtils';
 import { toast } from '@/hooks/use-toast';
 import { logFormChange } from '@/lib/debug';
 import { FieldWidget } from '@/components/forms/FieldWidget';
+import { isSieveScriptField } from '@/lib/sievepad';
 
 import type { Field, Fields, Form, FormField, Schema } from '@/types/schema';
 import type { JmapSetResponse, JmapSetError, JmapMethodCall } from '@/types/jmap';
@@ -740,6 +741,7 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
   })();
 
   const sectionsToRender = buildSections(combinedForm, currentFields, isCreate, edition);
+  const scriptName = typeof formData.name === 'string' ? formData.name : '';
 
   return (
     <div className="mx-auto max-w-4xl space-y-6">
@@ -810,6 +812,9 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
                     readOnly={fieldReadOnly}
                     error={fieldError}
                     schema={schema}
+                    sieveScriptName={
+                      isSieveScriptField(resolved.obj.objectName, formField.name) ? scriptName : undefined
+                    }
                   />
                 );
 

src/components/forms/FieldWidget.tsx

@@ -24,6 +24,7 @@ import { Plus, X, Eye, EyeOff, Loader2, Search, Check, ChevronRight, Calendar as
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { ExpressionEditor } from '@/components/expression/ExpressionEditor';
 import { OtpAuthField } from '@/components/forms/OtpAuthField';
+import { SievepadButton } from '@/components/forms/SievepadButton';
 import {
   bytesToHuman,
   humanToBytes,
@@ -59,6 +60,7 @@ export interface FieldWidgetProps {
   readOnly: boolean;
   error?: string;
   schema: Schema;
+  sieveScriptName?: string;
 }
 
 function getRequiredMarker(field: Field, readOnly: boolean): 'required' | 'optional' | null {
@@ -79,7 +81,7 @@ function getRequiredMarker(field: Field, readOnly: boolean): 'required' | 'optio
 
 export function FieldWidget(props: FieldWidgetProps) {
   const { t } = useTranslation();
-  const { field, formField, value, onChange, readOnly, error, schema } = props;
+  const { field, formField, value, onChange, readOnly, error, schema, sieveScriptName } = props;
   const ft = field.type;
   const edition = useEffectiveEdition();
 
@@ -132,7 +134,7 @@ export function FieldWidget(props: FieldWidgetProps) {
           />
         );
       case 'blobId':
-        return <BlobField value={value} onChange={onChange} readOnly={readOnly} />;
+        return <BlobField value={value} onChange={onChange} readOnly={readOnly} sieveScriptName={sieveScriptName} />;
       case 'objectId':
         return (
           <ObjectIdField
@@ -236,6 +238,9 @@ export function FieldWidget(props: FieldWidgetProps) {
         </div>
       )}
       {widget}
+      {sieveScriptName !== undefined && ft.type === 'string' && (
+        <SievepadButton scriptName={sieveScriptName} source={typeof value === 'string' ? value : ''} />
+      )}
       {error && <p className="text-xs text-destructive">{error}</p>}
     </div>
   );
@@ -986,9 +991,10 @@ interface BlobFieldProps {
   value: unknown;
   onChange: (value: unknown) => void;
   readOnly: boolean;
+  sieveScriptName?: string;
 }
 
-function BlobField({ value, onChange, readOnly }: BlobFieldProps) {
+function BlobField({ value, onChange, readOnly, sieveScriptName }: BlobFieldProps) {
   const { t } = useTranslation();
   const blobId = typeof value === 'string' ? value : null;
   const [content, setContent] = useState<string>('');
@@ -1054,6 +1060,7 @@ function BlobField({ value, onChange, readOnly }: BlobFieldProps) {
         rows={8}
         className="font-mono text-xs"
       />
+      {sieveScriptName !== undefined && <SievepadButton scriptName={sieveScriptName} source={content} />}
       {modified && (
         <p className="text-xs text-muted-foreground">
           {t('field.contentModified', 'Content modified (will be saved as a new blob)')}
@@ -1782,10 +1789,10 @@ function EnumMultiSelect({ enumName, items, onChange, readOnly, schema, minItems
   if (variants.length > 10) {
     const filtered = searchQuery
       ? variants.filter(
-        (v) =>
-          v.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
-          v.name.toLowerCase().includes(searchQuery.toLowerCase()),
-      )
+          (v) =>
+            v.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            v.name.toLowerCase().includes(searchQuery.toLowerCase()),
+        )
       : variants;
 
     return (

src/components/forms/SievepadButton.tsx

@@ -0,0 +1,97 @@
+/*
+ * SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
+ */
+
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Bug } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { toast } from '@/hooks/use-toast';
+import { dismissSievepadWarning, isSievepadWarningDismissed, openInSievepad } from '@/lib/sievepad';
+
+interface SievepadButtonProps {
+  scriptName: string;
+  source: string;
+}
+
+export function SievepadButton({ scriptName, source }: SievepadButtonProps) {
+  const { t } = useTranslation();
+  const [warningOpen, setWarningOpen] = useState(false);
+  const [dontShowAgain, setDontShowAgain] = useState(false);
+
+  const open = () => {
+    openInSievepad(scriptName || t('sievepad.defaultName', 'Sieve script'), source).catch(() => {
+      toast({ title: t('sievepad.failed', 'Failed to open Sievepad.'), variant: 'destructive' });
+    });
+  };
+
+  const handleClick = () => {
+    if (isSievepadWarningDismissed()) {
+      open();
+    } else {
+      setDontShowAgain(false);
+      setWarningOpen(true);
+    }
+  };
+
+  const handleContinue = () => {
+    if (dontShowAgain) dismissSievepadWarning();
+    setWarningOpen(false);
+    open();
+  };
+
+  return (
+    <>
+      <div className="flex justify-end">
+        <Button type="button" variant="outline" size="sm" onClick={handleClick} disabled={!source.trim()}>
+          <Bug className="h-4 w-4" />
+          {t('sievepad.debug', 'Debug')}
+        </Button>
+      </div>
+      <Dialog open={warningOpen} onOpenChange={setWarningOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t('sievepad.warningTitle', 'Debug in Sievepad')}</DialogTitle>
+            <DialogDescription>
+              {t(
+                'sievepad.warningDescription',
+                'A new tab will open sievepad.com with a copy of this script. Sievepad compiles and runs the script entirely in your browser: nothing is uploaded to or stored on any server.',
+              )}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="sievepad-dont-show-again"
+              checked={dontShowAgain}
+              onCheckedChange={(checked) => setDontShowAgain(checked === true)}
+            />
+            <Label htmlFor="sievepad-dont-show-again" className="text-sm font-normal">
+              {t('sievepad.dontShowAgain', "Don't show this again")}
+            </Label>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setWarningOpen(false)}>
+              {t('common.cancel')}
+            </Button>
+            <Button type="button" onClick={handleContinue}>
+              {t('common.continue')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}