Fix dialog and invalid variable style

plugins/template-function-1password/src/index.ts

@@ -33,9 +33,10 @@ export const plugin: PluginDefinition = {
           name: 'token',
           type: 'text',
           label: '1Password Service Account Token',
-          description: '',
+          description:
+            'Token can be generated from the 1Password website by visiting Developer > Service Accounts',
           // biome-ignore lint/suspicious/noTemplateCurlyInString: Yaak template syntax
-          defaultValue: '${[ONEPASSWORD_TOKEN]}',
+          defaultValue: '${[1PASSWORD_TOKEN]}',
           password: true,
         },
         {

src-web/commands/commands.tsx

@@ -1,6 +1,7 @@
 import { createWorkspaceModel, type Folder, modelTypeLabel } from '@yaakapp-internal/models';
 import { applySync, calculateSync } from '@yaakapp-internal/sync';
 import { Banner } from '../components/core/Banner';
+import { Button } from '../components/core/Button';
 import { InlineCode } from '../components/core/InlineCode';
 import {
   Table,
@@ -13,7 +14,7 @@ import {
 } from '../components/core/Table';
 import { activeWorkspaceIdAtom } from '../hooks/useActiveWorkspace';
 import { createFastMutation } from '../hooks/useFastMutation';
-import { showConfirm } from '../lib/confirm';
+import { showDialog } from '../lib/dialog';
 import { jotaiStore } from '../lib/jotai';
 import { pluralizeCount } from '../lib/pluralize';
 import { showPrompt } from '../lib/prompt';
@@ -78,16 +79,24 @@ export const syncWorkspace = createFastMutation<
 
     console.log('Directory changes detected', { dbOps, ops });
 
-    const confirmed = force
-      ? true
-      : await showConfirm({
+    if (force) {
+      await applySync(workspaceId, syncDir, ops);
+      return;
+    }
+
+    showDialog({
       id: 'commit-sync',
       title: 'Changes Detected',
       size: 'md',
-          confirmText: 'Apply Changes',
-          color: isDeletingWorkspace ? 'danger' : 'primary',
-          description: (
-            <div className="h-full grid grid-rows-[auto_auto_minmax(0,1fr)] gap-3">
+      render: ({ hide }) => (
+        <form
+          className="h-full grid grid-rows-[auto_auto_minmax(0,1fr)_auto] gap-3"
+          onSubmit={async (e) => {
+            e.preventDefault();
+            await applySync(workspaceId, syncDir, ops);
+            hide();
+          }}
+        >
           {isDeletingWorkspace ? (
             <Banner color="danger">
               🚨 <strong>Changes contain a workspace deletion!</strong>
@@ -99,7 +108,7 @@ export const syncWorkspace = createFastMutation<
             {pluralizeCount('file', dbOps.length)} in the directory{' '}
             {dbOps.length === 1 ? 'has' : 'have'} changed. Do you want to update your workspace?
           </p>
-              <Table scrollable>
+          <Table scrollable className="my-4">
             <TableHead>
               <TableRow>
                 <TableHeaderCell>Type</TableHeaderCell>
@@ -136,10 +145,8 @@ export const syncWorkspace = createFastMutation<
                 return (
                   // biome-ignore lint/suspicious/noArrayIndexKey: none
                   <TableRow key={i}>
-                        <TableCell>{model}</TableCell>
-                        <TruncatedWideTableCell className="text-text">
-                          {name}
-                        </TruncatedWideTableCell>
+                    <TableCell className="text-text-subtle">{model}</TableCell>
+                    <TruncatedWideTableCell>{name}</TruncatedWideTableCell>
                     <TableCell className="text-right">
                       <InlineCode className={color}>{label}</InlineCode>
                     </TableCell>
@@ -148,11 +155,16 @@ export const syncWorkspace = createFastMutation<
               })}
             </TableBody>
           </Table>
-            </div>
+          <footer className="py-3 flex flex-row-reverse items-center gap-3">
+            <Button type="submit" color="primary">
+              Apply Changes
+            </Button>
+            <Button onClick={hide} color="secondary">
+              Cancel
+            </Button>
+          </footer>
+        </form>
       ),
     });
-    if (confirmed) {
-      await applySync(workspaceId, syncDir, ops);
-    }
   },
 });

src-web/components/core/Dialog.tsx

@@ -69,11 +69,7 @@ export function Dialog({
           animate={{ top: 0, scale: 1 }}
           className={classNames(
             className,
-            'grid',
-            title != null && description != null && 'grid-rows-[auto_minmax(0,1fr)_minmax_(0,1fr)]',
-            title == null && description != null && 'grid-rows-[auto_minmax(0,1fr)]',
-            title != null && description == null && 'grid-rows-[auto_minmax(0,1fr)]',
-            title == null && description == null && 'grid-rows-[minmax(0,1fr)]',
+            'grid grid-rows-[auto_auto_minmax(0,1fr)]',
             'grid-cols-1', // must be here for inline code blocks to correctly break words
             'relative bg-surface pointer-events-auto',
             'rounded-lg',
@@ -87,16 +83,20 @@ export function Dialog({
             size === 'dynamic' && 'min-w-[20rem] max-w-[100vw]',
           )}
         >
-          {title && (
+          {title ? (
             <Heading className="px-6 mt-4 mb-2" level={1} id={titleId}>
               {title}
             </Heading>
+          ) : (
+            <span />
           )}
 
-          {description && (
+          {description ? (
             <div className="min-h-0 px-6 text-text-subtle mb-3" id={descriptionId}>
               {description}
             </div>
+          ) : (
+            <span />
           )}
 
           <div

src-web/components/core/Editor/twig/templateTags.ts

@@ -106,20 +106,19 @@ function templateTags(
             };
           }
 
-          let invalid = false;
           if (option.type === 'function') {
             const tokens = parseTemplate(rawTag);
             const values = collectArgumentValues(tokens, option);
             for (const arg of option.args) {
               if (!('optional' in arg)) continue;
               if (!arg.optional && values[arg.name] == null) {
-                invalid = true;
+                option.invalid = true;
                 break;
               }
             }
           }
 
-          const widget = new TemplateTagWidget({ ...option, invalid }, rawTag, node.from);
+          const widget = new TemplateTagWidget(option, rawTag, node.from);
           const deco = Decoration.replace({ widget, inclusive: true });
           widgets.push(deco.range(node.from, node.to));
         }