Update 13 files

- /src/main/java/com/example/demo/service/Impl/UserServiceImpl.java
- /src/main/java/com/example/demo/service/Impl/RecipeServiceImpl.java
- /src/main/java/com/example/demo/service/UserService.java
- /src/main/java/com/example/demo/controller/SiteController.java
- /src/main/java/com/example/demo/controller/RecipeUploadForm.java
- /src/main/java/com/example/demo/controller/ProfileController.java
- /src/main/java/com/example/demo/config/SecurityConfig.java
- /src/main/java/com/example/demo/config/WebConfig.java
- /src/main/resources/templates/explore.html
- /src/main/resources/templates/view-recipe.html
- /src/main/resources/templates/public-profile.html
- /src/main/resources/templates/my-profile.html
- /src/main/resources/templates/home.html

src/main/resources/templates/public-profile.html

@@ -18,28 +18,31 @@
 
 <div class="body">
 
-    <!-- Left Navigation -->
     <div class="body-left">
         <nav class="sidebar-left">
             <ul>
-                <li><a href="/">Home</a></li>
                 <li><a th:href="@{/explore}">Explore</a></li>
+                <li><a th:href="${guest} ? @{/login} : @{/}">Favorites</a></li>
                 <li><a th:href="@{/my-profile}">Profile</a></li>
-                <li>
+
+                <li th:if="${guest}">
+                    <a th:href="@{/login}" class="login-link">Login</a>
+                </li>
+
+                <li th:unless="${guest}">
                     <form th:action="@{/logout}" method="post">
                         <input type="image" th:src="@{/images/logout_icon.png}" alt="Logout button" class="nav_icon"/>
                     </form>
                 </li>
             </ul>
         </nav>
-        <a th:href="@{/create}" target="_blank" class="create_icon">
+
+        <a th:href="@{/create}" class="create_icon">
             <img th:src="@{/images/create_icon.png}" alt="Create New Recipe Icon (Red mixing bowl with a spoon and yellow addition symbol.)">
         </a>
     </div>
 
-    <!-- Main Content — recipes -->
     <main class="main-content">
-
         <h2 th:text="${profile.effectiveDisplayName} + '\'s Recipes'">User's Recipes</h2>
 
         <p th:if="${#lists.isEmpty(profile.recipes)}">This user has not created any recipes yet.</p>
@@ -62,16 +65,14 @@
                 </div>
             </th:block>
         </div>
-
     </main>
 
-    <!-- Right Sidebar — public profile info only -->
     <div class="body-right">
         <div class="sidebar-right">
             <p><strong th:text="${profile.effectiveDisplayName}">Display Name</strong></p>
             <p th:text="'@' + ${profile.username}">@username</p>
             <div class="bio-wrap">
-            	<p th:if="${profile.bio != null and !#strings.isEmpty(profile.bio)}" th:text="${profile.bio}">Bio goes here.</p>
+                <p th:if="${profile.bio != null and !#strings.isEmpty(profile.bio)}" th:text="${profile.bio}">Bio goes here.</p>
             </div>
         </div>
     </div>
@@ -79,10 +80,15 @@
 </div>
 
 <script>
-    // For cost display
-	document.querySelectorAll('.card-cost').forEach(el => {
-    	const num = parseInt(el.textContent);
-    	el.textContent = num === 0 ? '' : '$'.repeat(num);
+function renderCost(cost) {
+    const num = parseInt(cost, 10);
+    if (!num || num <= 0) return '';
+    if (num >= 4) return '$$$$';
+    return '$'.repeat(num);
+}
+
+document.querySelectorAll('.card-cost').forEach(el => {
+    el.textContent = renderCost(el.textContent);
 });
 </script>