feat: add schedule button to recipe entries (#5217)

Signed-off-by: ki3ani <kimanim68@gmail.com>

ui/desktop/src/components/recipes/RecipesView.tsx

@@ -12,6 +12,7 @@ import { deleteRecipe, RecipeManifestResponse } from '../../api';
 import ImportRecipeForm, { ImportRecipeButton } from './ImportRecipeForm';
 import CreateEditRecipeModal from './CreateEditRecipeModal';
 import { generateDeepLink, Recipe } from '../../recipe';
+import { ScheduleFromRecipeModal } from '../schedule/ScheduleFromRecipeModal';
 
 export default function RecipesView() {
   const [savedRecipes, setSavedRecipes] = useState<RecipeManifestResponse[]>([]);
@@ -25,6 +26,8 @@ export default function RecipesView() {
   // Form dialog states
   const [showCreateDialog, setShowCreateDialog] = useState(false);
   const [showImportDialog, setShowImportDialog] = useState(false);
+  const [showScheduleModal, setShowScheduleModal] = useState(false);
+  const [selectedRecipeForSchedule, setSelectedRecipeForSchedule] = useState<Recipe | null>(null);
 
   useEffect(() => {
     loadSavedRecipes();
@@ -151,6 +154,22 @@ export default function RecipesView() {
     }
   };
 
+  const handleScheduleRecipe = (recipe: Recipe) => {
+    setSelectedRecipeForSchedule(recipe);
+    setShowScheduleModal(true);
+  };
+
+  const handleCreateScheduleFromRecipe = async (deepLink: string) => {
+    // Store the deeplink for the schedule modal to pick up
+    localStorage.setItem('pendingScheduleDeepLink', deepLink);
+
+    // Navigate to schedules view and open create modal
+    window.location.hash = '#/schedules';
+
+    setShowScheduleModal(false);
+    setSelectedRecipeForSchedule(null);
+  };
+
   // Render a recipe item
   const RecipeItem = ({
     recipeManifestResponse,
@@ -207,6 +226,18 @@ export default function RecipesView() {
           >
             <Link className="w-4 h-4" />
           </Button>
+          <Button
+            onClick={(e) => {
+              e.stopPropagation();
+              handleScheduleRecipe(recipe);
+            }}
+            variant="outline"
+            size="sm"
+            className="h-8 w-8 p-0"
+            title="Create schedule"
+          >
+            <Calendar className="w-4 h-4" />
+          </Button>
           <Button
             onClick={(e) => {
               e.stopPropagation();
@@ -238,6 +269,7 @@ export default function RecipesView() {
           <Skeleton className="h-8 w-8" />
           <Skeleton className="h-8 w-8" />
           <Skeleton className="h-8 w-8" />
+          <Skeleton className="h-8 w-8" />
         </div>
       </div>
     </Card>
@@ -360,6 +392,18 @@ export default function RecipesView() {
           isCreateMode={true}
         />
       )}
+
+      {showScheduleModal && selectedRecipeForSchedule && (
+        <ScheduleFromRecipeModal
+          isOpen={showScheduleModal}
+          onClose={() => {
+            setShowScheduleModal(false);
+            setSelectedRecipeForSchedule(null);
+          }}
+          recipe={selectedRecipeForSchedule}
+          onCreateSchedule={handleCreateScheduleFromRecipe}
+        />
+      )}
     </>
   );
 }