Polish workflow condition editor UX

Signed-off-by: Taylor Ho <taylorkmho@gmail.com>

desktop/src/features/workflows/ui/AuthorGridPicker.tsx

@@ -12,6 +12,7 @@ import type { UserProfileSummary, UserSearchResult } from "@/shared/api/types";
 import { cn } from "@/shared/lib/cn";
 import { parsePubkeyInput } from "@/shared/lib/nostrUtils";
 import { truncatePubkey } from "@/shared/lib/pubkey";
+import { Input } from "@/shared/ui/input";
 import { PortalledScrollArea } from "@/shared/ui/PortalledScrollArea";
 
 const AUTHOR_PAGE_SIZE = 50;
@@ -193,17 +194,23 @@ export function AuthorGridPicker({
 
   return (
     <div
-      className={cn("space-y-1", disabled && "opacity-50")}
+      className={cn(
+        "flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-border/70 bg-background/35",
+        disabled && "opacity-50",
+      )}
       data-testid="author-grid-picker"
     >
-      <div className="flex items-center gap-2 rounded-lg border border-input/40 bg-background px-3 py-2">
-        <Search className="h-4 w-4 shrink-0 text-muted-foreground" />
-        <input
+      <div className="relative flex-shrink-0 border-b border-border/70">
+        <Search
+          aria-hidden="true"
+          className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
+        />
+        <Input
           aria-label={`${ariaLabel} search`}
           autoCapitalize="none"
           autoComplete="off"
           autoCorrect="off"
-          className="min-w-0 flex-1 bg-transparent text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed"
+          className="h-11 rounded-none border-0 bg-transparent pl-9 focus-visible:ring-0"
           disabled={disabled}
           id={id}
           onChange={(event) => setQuery(event.target.value)}
@@ -213,7 +220,7 @@ export function AuthorGridPicker({
         />
       </div>
       <PortalledScrollArea
-        className="h-72 overflow-y-auto rounded-lg border border-input/40 bg-background p-2"
+        className="min-h-72 flex-1 overflow-y-auto overscroll-contain p-2"
         data-testid="author-grid-list"
         onScroll={handleListScroll}
       >

desktop/src/features/workflows/ui/MessageIdPicker.tsx

@@ -189,8 +189,8 @@ export function MessageIdPicker({
     !pastedCandidate;
 
   return (
-    <div className="overflow-hidden rounded-lg border border-border/70 bg-background/35">
-      <div className="relative border-b border-border/70">
+    <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-border/70 bg-background/35">
+      <div className="relative flex-shrink-0 border-b border-border/70">
         <Search
           aria-hidden="true"
           className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
@@ -219,13 +219,13 @@ export function MessageIdPicker({
       </div>
 
       {pastedEventInAnotherChannel ? (
-        <p className="border-b border-border/70 px-3 py-2 text-xs text-destructive">
+        <p className="flex-shrink-0 border-b border-border/70 px-3 py-2 text-xs text-destructive">
           That message is not available in this channel.
         </p>
       ) : null}
 
       <div
-        className="max-h-72 overflow-y-auto overscroll-contain p-2"
+        className="min-h-72 flex-1 overflow-y-auto overscroll-contain p-2"
         data-testid="message-id-picker-list"
         onScroll={(event) => {
           const element = event.currentTarget;

desktop/src/features/workflows/ui/WorkflowConditionBuilder.tsx

@@ -76,6 +76,10 @@ type ActiveConditionEditor = {
   draft: ParsedConditionExpression;
 };
 
+function conditionFieldUsesFullHeightPicker(field: string): boolean {
+  return field === "trigger_author" || field === "trigger_message_id";
+}
+
 function normalizedEditor(
   editor: ParsedConditionExpression,
 ): ParsedConditionExpression {
@@ -246,6 +250,42 @@ function AuthorConditionSummary({
   );
 }
 
+function EmojiConditionSummary({
+  editor,
+}: {
+  editor: ParsedConditionExpression;
+}) {
+  const emoji = editor.value.trim();
+  const isExcluded = editor.operator === "not_equals";
+
+  return (
+    <span className="relative flex h-6 w-6 shrink-0 items-center justify-center">
+      <span aria-hidden="true" className="text-2xl leading-none">
+        {emoji}
+      </span>
+      {isExcluded ? (
+        <span
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0"
+        >
+          <span className="absolute inset-0 [clip-path:circle(50%_at_50%_50%)]">
+            <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+              <span className="block h-1 w-9 translate-y-0.5 -rotate-45 rounded-full bg-background/90" />
+            </span>
+          </span>
+          <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+            <span className="block h-0.5 w-8 -rotate-45 rounded-full bg-muted-foreground" />
+          </span>
+        </span>
+      ) : null}
+      <span className="sr-only">
+        {isExcluded ? "Excluded reaction emoji: " : "Selected reaction emoji: "}
+        {emoji}
+      </span>
+    </span>
+  );
+}
+
 function ConditionEditorFields({
   channelId,
   disabled,
@@ -269,6 +309,7 @@ function ConditionEditorFields({
     editor.webhookField.length > 0 &&
     normalizeWebhookField(editor.webhookField) === null;
   const controlIdPrefix = `${idPrefix}-${editor.field}`;
+  const usesFullHeightPicker = conditionFieldUsesFullHeightPicker(editor.field);
   const valueInput = (
     <Input
       aria-label={
@@ -290,7 +331,10 @@ function ConditionEditorFields({
 
   return (
     <div
-      className="space-y-3"
+      className={cn(
+        "space-y-3",
+        usesFullHeightPicker && "flex min-h-0 flex-1 flex-col space-y-0 gap-3",
+      )}
       data-testid={`workflow-condition-editor-${editor.field}`}
     >
       <fieldset>
@@ -361,7 +405,7 @@ function ConditionEditorFields({
       ) : null}
 
       {needsValue ? (
-        <div>
+        <div className={cn(usesFullHeightPicker && "min-h-0 flex-1")}>
           {editor.field === "trigger_author" ? (
             <AuthorGridPicker
               disabled={disabled}
@@ -462,6 +506,9 @@ export function WorkflowConditionBuilder({
   const [pendingBasicField, setPendingBasicField] = React.useState<
     (typeof fields)[number] | null
   >(null);
+  const fullHeightPickerExpanded =
+    editorMode === "basic" &&
+    conditionFieldUsesFullHeightPicker(activeEditor?.draft.field ?? "");
   const previousTriggerType = React.useRef(triggerType);
   const selectedAuthorPubkey = editorState.custom
     ? ""
@@ -598,7 +645,11 @@ export function WorkflowConditionBuilder({
   return (
     <>
       <Tabs
-        className="space-y-3"
+        className={cn(
+          "space-y-3",
+          fullHeightPickerExpanded &&
+            "flex h-full min-h-0 flex-col space-y-0 gap-3",
+        )}
         onValueChange={(nextMode) => {
           const mode = nextMode as ConditionEditorMode;
           setEditorMode(mode);
@@ -620,14 +671,23 @@ export function WorkflowConditionBuilder({
         </TabsList>
 
         {editorMode === "basic" ? (
-          <div>
+          <div
+            className={cn(
+              fullHeightPickerExpanded && "flex min-h-0 flex-1 flex-col",
+            )}
+          >
             {editorState.custom ? (
               <p className="border-b border-border/50 pb-3 text-xs text-muted-foreground">
                 An advanced expression is active. Choosing a basic filter will
                 replace it.
               </p>
             ) : null}
-            <div className="divide-y divide-border/50">
+            <div
+              className={cn(
+                "divide-y divide-border/50",
+                fullHeightPickerExpanded && "flex min-h-0 flex-1 flex-col",
+              )}
+            >
               {fields.map((field) => {
                 const editor = editorState.custom
                   ? undefined
@@ -636,7 +696,14 @@ export function WorkflowConditionBuilder({
                     );
                 const isExpanded = activeEditor?.draft.field === field.value;
                 return (
-                  <div key={field.value}>
+                  <div
+                    className={cn(
+                      isExpanded &&
+                        conditionFieldUsesFullHeightPicker(field.value) &&
+                        "flex min-h-0 flex-1 flex-col",
+                    )}
+                    key={field.value}
+                  >
                     <button
                       aria-expanded={isExpanded}
                       className="flex min-h-12 w-full items-center gap-3 py-3 text-left transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
@@ -658,6 +725,8 @@ export function WorkflowConditionBuilder({
                           editor={editor}
                           loading={selectedMessageQuery.isLoading}
                         />
+                      ) : editor?.field === "trigger_emoji" ? (
+                        <EmojiConditionSummary editor={editor} />
                       ) : (
                         <span className="max-w-40 truncate text-sm text-muted-foreground">
                           {editor
@@ -675,7 +744,14 @@ export function WorkflowConditionBuilder({
                     </button>
 
                     {isExpanded && activeEditor ? (
-                      <div className="animate-in space-y-4 pb-4 pt-1 fade-in slide-in-from-top-1 duration-150 motion-reduce:animate-none">
+                      <div
+                        className={cn(
+                          "animate-in space-y-4 pb-4 pt-1 fade-in slide-in-from-top-1 duration-150 motion-reduce:animate-none",
+                          conditionFieldUsesFullHeightPicker(
+                            activeEditor.draft.field,
+                          ) && "flex min-h-0 flex-1 flex-col space-y-0",
+                        )}
+                      >
                         <ConditionEditorFields
                           channelId={channelId}
                           disabled={disabled}

desktop/src/features/workflows/ui/WorkflowDialog.tsx

@@ -106,7 +106,7 @@ export function WorkflowDialog({
   const [editorParseError, setEditorParseError] = React.useState<string | null>(
     null,
   );
-  const [footerLeadingElement, setFooterLeadingElement] =
+  const [headerTrailingElement, setHeaderTrailingElement] =
     React.useState<HTMLDivElement | null>(null);
   const [savedWebhookInfo, setSavedWebhookInfo] = React.useState<{
     relayHttpUrl: string;
@@ -264,32 +264,14 @@ export function WorkflowDialog({
                     : "Automate actions when something happens in a channel."}
               </DialogDescription>
             </div>
-            <Tabs onValueChange={handleEditorModeChange} value={editorMode}>
-              <TabsList aria-label="Workflow editor mode" className="h-8 p-0.5">
-                <TabsTrigger
-                  className="h-7 px-3 text-xs"
-                  disabled={mutation.isPending}
-                  value="form"
-                >
-                  Form
-                </TabsTrigger>
-                <TabsTrigger
-                  className="h-7 gap-1.5 px-3 text-xs"
-                  disabled={mutation.isPending}
-                  value="yaml"
-                >
-                  <Code className="h-3.5 w-3.5" />
-                  YAML
-                </TabsTrigger>
-              </TabsList>
-            </Tabs>
+            <div ref={setHeaderTrailingElement} />
           </DialogHeader>
 
           <div className="min-h-0 flex-1">
             <WorkflowFormBuilder
               channels={channels}
               disabled={mutation.isPending}
-              footerLeadingContainer={footerLeadingElement}
+              headerTrailingContainer={headerTrailingElement}
               mode={editorMode}
               onChange={(yaml) => {
                 mutation.reset();
@@ -342,7 +324,25 @@ export function WorkflowDialog({
           ) : null}
 
           <div className="flex flex-shrink-0 items-center justify-between gap-4 border-t border-border px-6 py-4">
-            <div ref={setFooterLeadingElement} />
+            <Tabs onValueChange={handleEditorModeChange} value={editorMode}>
+              <TabsList aria-label="Workflow editor mode" className="h-8 p-0.5">
+                <TabsTrigger
+                  className="h-7 px-3 text-xs"
+                  disabled={mutation.isPending}
+                  value="form"
+                >
+                  Form
+                </TabsTrigger>
+                <TabsTrigger
+                  className="h-7 gap-1.5 px-3 text-xs"
+                  disabled={mutation.isPending}
+                  value="yaml"
+                >
+                  <Code className="h-3.5 w-3.5" />
+                  YAML
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
             <div className="flex items-center gap-2">
               <Button
                 onClick={() => handleOpenChange(false)}

desktop/src/features/workflows/ui/WorkflowFormBuilder.tsx

@@ -87,7 +87,7 @@ function TriggerConfigFields({
     case "message_posted":
     case "diff_posted":
       return (
-        <div>
+        <div className="h-full">
           <WorkflowConditionBuilder
             channelId={workflowChannelId}
             channels={channels}
@@ -147,7 +147,7 @@ function TriggerConfigFields({
 type WorkflowFormBuilderProps = {
   channels: Channel[];
   disabled?: boolean;
-  footerLeadingContainer?: HTMLElement | null;
+  headerTrailingContainer?: HTMLElement | null;
   mode: WorkflowEditorMode;
   onChange: (yaml: string) => void;
   onSelectedNodeChange: (node: WorkflowEditorPane) => void;
@@ -365,7 +365,7 @@ function WorkflowNode({
 export function WorkflowFormBuilder({
   channels,
   disabled,
-  footerLeadingContainer,
+  headerTrailingContainer,
   mode,
   onChange,
   onSelectedNodeChange,
@@ -765,6 +765,7 @@ export function WorkflowFormBuilder({
                         >
                           <motion.div
                             animate="center"
+                            className="h-full"
                             custom={selectionDirection}
                             exit="exit"
                             initial="enter"
@@ -781,7 +782,7 @@ export function WorkflowFormBuilder({
                             variants={inspectorContentVariants}
                           >
                             {selectedNode.type === "trigger" ? (
-                              <div>
+                              <div className="h-full">
                                 <TriggerConfigFields
                                   channels={channels}
                                   disabled={disabled}
@@ -823,7 +824,7 @@ export function WorkflowFormBuilder({
           </div>
         )}
       </div>
-      {mode === "form" && footerLeadingContainer
+      {mode === "form" && headerTrailingContainer
         ? createPortal(
             <div className="flex items-center gap-3">
               <label className="text-sm text-foreground" htmlFor="wf-enabled">
@@ -838,7 +839,7 @@ export function WorkflowFormBuilder({
                 }
               />
             </div>,
-            footerLeadingContainer,
+            headerTrailingContainer,
           )
         : null}
     </>