feat: improve UX for saving recipes

ui/desktop/src/components/RecipeEditor.tsx

@@ -4,13 +4,15 @@ import { Buffer } from 'buffer';
 import { FullExtensionConfig } from '../extensions';
 import { Geese } from './icons/Geese';
 import Copy from './icons/Copy';
-import { Check } from 'lucide-react';
+import { Check, Save, Calendar } from 'lucide-react';
 import { useConfig } from './ConfigContext';
 import { FixedExtensionEntry } from './ConfigContext';
 import RecipeActivityEditor from './RecipeActivityEditor';
 import RecipeInfoModal from './RecipeInfoModal';
 import RecipeExpandableInfo from './RecipeExpandableInfo';
 import { ScheduleFromRecipeModal } from './schedule/ScheduleFromRecipeModal';
+import { saveRecipe, generateRecipeFilename } from '../recipe/recipeStorage';
+import { toastSuccess, toastError } from '../toasts';
 
 interface RecipeEditorProps {
   config?: Recipe;
@@ -35,6 +37,10 @@ export default function RecipeEditor({ config }: RecipeEditorProps) {
   const [copied, setCopied] = useState(false);
   const [isRecipeInfoModalOpen, setRecipeInfoModalOpen] = useState(false);
   const [isScheduleModalOpen, setIsScheduleModalOpen] = useState(false);
+  const [showSaveDialog, setShowSaveDialog] = useState(false);
+  const [saveRecipeName, setSaveRecipeName] = useState('');
+  const [saveGlobal, setSaveGlobal] = useState(true);
+  const [saving, setSaving] = useState(false);
   const [recipeInfoModelProps, setRecipeInfoModelProps] = useState<{
     label: string;
     value: string;
@@ -177,6 +183,57 @@ export default function RecipeEditor({ config }: RecipeEditorProps) {
       });
   };
 
+  const handleSaveRecipe = async () => {
+    if (!saveRecipeName.trim()) {
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const currentRecipe = getCurrentConfig();
+
+      if (!currentRecipe.title || !currentRecipe.description || !currentRecipe.instructions) {
+        throw new Error('Invalid recipe configuration: missing required fields');
+      }
+
+      await saveRecipe(currentRecipe, {
+        name: saveRecipeName.trim(),
+        global: saveGlobal,
+      });
+
+      // Reset dialog state
+      setShowSaveDialog(false);
+      setSaveRecipeName('');
+
+      toastSuccess({
+        title: saveRecipeName.trim(),
+        msg: `Recipe saved successfully`,
+      });
+    } catch (error) {
+      console.error('Failed to save recipe:', error);
+
+      toastError({
+        title: 'Save Failed',
+        msg: `Failed to save recipe: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        traceback: error instanceof Error ? error.message : String(error),
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleSaveRecipeClick = () => {
+    if (!validateForm()) {
+      return;
+    }
+
+    const currentRecipe = getCurrentConfig();
+    // Generate a suggested name from the recipe title
+    const suggestedName = generateRecipeFilename(currentRecipe);
+    setSaveRecipeName(suggestedName);
+    setShowSaveDialog(true);
+  };
+
   const onClickEditTextArea = ({
     label,
     value,
@@ -331,20 +388,31 @@ export default function RecipeEditor({ config }: RecipeEditorProps) {
             )}
           </div>
           {/* Action Buttons */}
-          <div className="flex flex-col space-y-2 pt-1">
-            <button
-              onClick={() => setIsScheduleModalOpen(true)}
-              disabled={!requiredFieldsAreFilled()}
-              className="w-full h-[60px] rounded-none border-t text-gray-900 dark:text-white hover:bg-gray-50 dark:border-gray-600 text-lg font-medium"
-            >
-              Create Schedule from Recipe
-            </button>
+          <div className="flex flex-col space-y-3 pt-4">
+            <div className="flex gap-3">
+              <button
+                onClick={handleSaveRecipeClick}
+                disabled={!requiredFieldsAreFilled() || saving}
+                className="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3 bg-bgStandard text-textStandard border border-borderStandard rounded-lg hover:bg-bgSubtle transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <Save className="w-4 h-4" />
+                {saving ? 'Saving...' : 'Save Recipe'}
+              </button>
+              <button
+                onClick={() => setIsScheduleModalOpen(true)}
+                disabled={!requiredFieldsAreFilled()}
+                className="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3 bg-textProminent text-bgApp rounded-lg hover:bg-opacity-90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <Calendar className="w-4 h-4" />
+                Create Schedule
+              </button>
+            </div>
             <button
               onClick={() => {
                 localStorage.removeItem('recipe_editor_extensions');
                 window.close();
               }}
-              className="w-full p-3 text-textSubtle rounded-lg hover:bg-bgSubtle"
+              className="w-full p-3 text-textSubtle rounded-lg hover:bg-bgSubtle transition-colors"
             >
               Close
             </button>
@@ -376,6 +444,87 @@ export default function RecipeEditor({ config }: RecipeEditorProps) {
           localStorage.setItem('pendingScheduleDeepLink', deepLink);
         }}
       />
+
+      {/* Save Recipe Dialog */}
+      {showSaveDialog && (
+        <div className="fixed inset-0 z-[300] flex items-center justify-center bg-black bg-opacity-50">
+          <div className="bg-bgApp border border-borderSubtle rounded-lg p-6 w-96 max-w-[90vw]">
+            <h3 className="text-lg font-medium text-textProminent mb-4">Save Recipe</h3>
+
+            <div className="space-y-4">
+              <div>
+                <label
+                  htmlFor="recipe-name"
+                  className="block text-sm font-medium text-textStandard mb-2"
+                >
+                  Recipe Name
+                </label>
+                <input
+                  id="recipe-name"
+                  type="text"
+                  value={saveRecipeName}
+                  onChange={(e) => setSaveRecipeName(e.target.value)}
+                  className="w-full p-3 border border-borderSubtle rounded-lg bg-bgApp text-textStandard focus:outline-none focus:ring-2 focus:ring-borderProminent"
+                  placeholder="Enter recipe name"
+                  autoFocus
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-textStandard mb-2">
+                  Save Location
+                </label>
+                <div className="space-y-2">
+                  <label className="flex items-center">
+                    <input
+                      type="radio"
+                      name="save-location"
+                      checked={saveGlobal}
+                      onChange={() => setSaveGlobal(true)}
+                      className="mr-2"
+                    />
+                    <span className="text-sm text-textStandard">
+                      Global - Available across all Goose sessions
+                    </span>
+                  </label>
+                  <label className="flex items-center">
+                    <input
+                      type="radio"
+                      name="save-location"
+                      checked={!saveGlobal}
+                      onChange={() => setSaveGlobal(false)}
+                      className="mr-2"
+                    />
+                    <span className="text-sm text-textStandard">
+                      Directory - Available in the working directory
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex justify-end space-x-3 mt-6">
+              <button
+                onClick={() => {
+                  setShowSaveDialog(false);
+                  setSaveRecipeName('');
+                }}
+                className="px-4 py-2 text-textSubtle hover:text-textStandard transition-colors"
+                disabled={saving}
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleSaveRecipe}
+                disabled={!saveRecipeName.trim() || saving}
+                className="px-4 py-2 bg-textProminent text-bgApp rounded-lg hover:bg-opacity-90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {saving ? 'Saving...' : 'Save Recipe'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }