prep/cook times and some fit and finish

frontend/src/components/AddBulkIngredients.tsx

@@ -35,7 +35,7 @@ const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ ingredients, on
 
   return (
     <div>
-      <p>Please enter ingredients: Quantity, Unit, Name</p>
+      <p>Please enter each ingredient on a new line:</p>
       <textarea
         rows={8}
         value={textValue}

frontend/src/components/AddBulkSteps.tsx

@@ -47,7 +47,7 @@ const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
 
   return (
     <div>
-      <p>Please enter each step on a new line</p>
+      <p>Please enter each step on a new line:</p>
       <textarea
         rows={8}
         value={textValue}

frontend/src/components/CookbookRecipeTile.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { type RecipeSmall } from "../types/Recipe"
 import Modal from '../components/Modal.tsx'
+import { Link } from 'react-router-dom';
 
 interface CookbookRecipeTileProps {
   recipe: RecipeSmall;
@@ -21,7 +22,7 @@ function CookbookRecipeTile({ recipe, handleDelete }: CookbookRecipeTileProps) {
   return (
     <div className="recipe-card m-2 bg-amber-300 p-4 rounded shadow">
       <div className="flex justify-between items-center recipe-name">
-        <h3 className="font-bold"><a href={`/recipe/${recipe.id}`} className="text-blue-500">{recipe.name}</a></h3>
+        <h3 className="font-bold"><Link to={`/recipe/${recipe.id}`} className="text-blue-500">{recipe.name}</Link></h3>
         <button onClick={openModal} className="text-red-500 focus:outline-none">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
             <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />

frontend/src/components/RecipeBookTabs.tsx

@@ -1,23 +1,55 @@
+import React from 'react';
+import { useState, useEffect } from "react";
 import { Link, useLocation } from 'react-router-dom';
+import { getRecipes } from "../services/frontendApi.js";
 
 const RecipeBookTabs = () => {
   const location = useLocation();
+  const [lastViewedRecipeId, setLastViewedRecipeId] = useState<number | null>(null);
+
+  const loadRandomRecipeId = async () => {
+    try {
+      const recipes = await getRecipes();
+      if (recipes.length > 0) {
+        const randomIndex = Math.floor(Math.random() * recipes.length);
+        setLastViewedRecipeId(recipes[randomIndex].id);
+      }
+    } catch (error) {
+      console.error('Error loading recipes:', error);
+    }
+  };
+
+  // update lastViewedRecipe id if we navigate to /recipe/${id}
+  useEffect(() => {
+    const match = /^\/recipe\/(\d+)$/.exec(location.pathname);
+    if (match) {
+      setLastViewedRecipeId(parseInt(match[1]));
+    }
+  }, [location.pathname, lastViewedRecipeId]);
+
+  // choose random recipe on first load
+  useEffect(() => {
+    if (!lastViewedRecipeId) {
+      loadRandomRecipeId();
+    } else {
+      console.log('id found', lastViewedRecipeId)
+
+    }
+  }, []);
+
 
   const tabs = [
     { id: '/', label: 'All Recipes', icon: '📚' },
-    { id: '/recipe/', label: 'Recipe', icon: '🥗' },
+    { id: `/recipe/${lastViewedRecipeId}`, label: 'Recipe', icon: '🥗' },
     { id: '/add-recipe', label: 'Add Recipe', icon: '➕' },
     { id: '/about', label: 'About', icon: '🍽️' },
   ];
 
   return (
-    <div className="bg-gradient-to-b from-amber-50 to-orange-50 h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
-      {/* Navigation Tabs */}
+    <div className="bg-amber-50 h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
       <div className="relative h-full">
-        {/* Tab Background Line */}
         <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-amber-200"></div>
 
-        {/* Tabs Container */}
         <div className="flex space-x-1 px-6 pt-4 h-full items-end justify-center">
           {tabs.map((tab) => {
             const isActive = location.pathname === tab.id || (location.pathname.startsWith(tab.id) && tab.id === "/recipe/");
@@ -41,13 +73,12 @@ const RecipeBookTabs = () => {
                   <span>{tab.label}</span>
                 </div>
 
-                {/* Tab Shadow Effect */}
                 {isActive && (
                   <>
-                    <div className="absolute -left-2 bottom-0 w-2 h-2 bg-white">
+                    <div className={`absolute -left-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/' ? 'hidden' : ''}`}>
                       <div className="absolute top-0 left-0 w-2 h-2 bg-amber-200 rounded-br-lg"></div>
                     </div>
-                    <div className="absolute -right-2 bottom-0 w-2 h-2 bg-white">
+                    <div className={`absolute -right-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/about' ? 'hidden' : ''}`}>
                       <div className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div>
                     </div>
                   </>