fix: recipe layout mobile fixes

Author: AbstractFruitFactory

src/lib/components/comment/CommentList.svelte

@@ -33,7 +33,8 @@
 		formError = null,
 		loading = false,
 		loadComments,
-		total = $bindable()
+		total = $bindable(),
+		preview = false
 	}: {
 		comments: CommentT[]
 		isLoggedIn: boolean
@@ -42,6 +43,7 @@
 		loading?: boolean
 		loadComments: (page: number) => Promise<{ comments: CommentT[]; total: number }>
 		total: number
+		preview?: boolean
 	} = $props()
 
 	let page = $state(0)
@@ -164,7 +166,7 @@
 						name="content"
 						placeholder="Add a comment..."
 						rows="2"
-						disabled={isSubmitting}
+						disabled={isSubmitting || loading || preview}
 						bind:value={commentContent}
 					></textarea>
 				{/snippet}
@@ -190,7 +192,7 @@
 					<label
 						for="image-upload"
 						class="image-upload-label"
-						class:disabled={isSubmitting || loading}
+						class:disabled={isSubmitting || loading || preview}
 					>
 						<ImageIcon size={18} />
 						<span>Add Image</span>
@@ -201,11 +203,11 @@
 						id="image-upload"
 						accept="image/jpeg,image/png,image/gif,image/webp"
 						onchange={handleImageSelect}
-						disabled={isSubmitting || loading}
+						disabled={isSubmitting || loading || preview}
 					/>
 				</div>
 
-				<Button type="submit" color="primary" size="sm" disabled={isSubmitting || loading}>
+				<Button type="submit" color="primary" size="sm" disabled={isSubmitting || loading || preview}>
 					{isSubmitting ? 'Posting...' : 'Post Comment'}
 				</Button>
 			</div>

src/lib/components/recipe-popup/RecipePopup.svelte

@@ -144,7 +144,7 @@
 	.floating-actions {
 		position: fixed;
 		left: 50%;
-		bottom: 70px;
+		bottom: var(--spacing-md);
 		transform: translateX(-50%);
 		display: flex;
 		gap: var(--spacing-xl);

src/lib/pages/recipe/MobileLayout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte'
-	import Activity from 'lucide-svelte/icons/activity'
+	import ChartPie from 'lucide-svelte/icons/chart-pie'
 	import ListOrdered from 'lucide-svelte/icons/list-ordered'
 	import Carrot from 'lucide-svelte/icons/carrot'
 	import MessageSquare from 'lucide-svelte/icons/message-square'
@@ -15,7 +15,8 @@
 		nutrition,
 		ingredients,
 		comments,
-		instructions
+		instructions,
+		hasNutrition = true
 	}: {
 		image: Snippet
 		tags: Snippet
@@ -26,6 +27,7 @@
 		ingredients: Snippet
 		comments: Snippet
 		instructions: Snippet<[useCookingMode: boolean]>
+		hasNutrition?: boolean | Promise<boolean>
 	} = $props()
 
 	let activeTab = $state<'nutrition' | 'ingredients' | 'instructions' | 'comments'>('ingredients')
@@ -72,15 +74,19 @@
 		>
 			<ListOrdered size={18} />
 		</button>
-		<button
-			class="tab-button {activeTab === 'nutrition' ? 'active' : ''}"
-			type="button"
-			aria-label="Nutrition"
-			aria-pressed={activeTab === 'nutrition'}
-			onclick={() => (activeTab = 'nutrition')}
-		>
-			<Activity size={18} />
-		</button>
+		{#await Promise.resolve(hasNutrition) then hasNut}
+			{#if hasNut}
+				<button
+					class="tab-button {activeTab === 'nutrition' ? 'active' : ''}"
+					type="button"
+					aria-label="Nutrition"
+					aria-pressed={activeTab === 'nutrition'}
+					onclick={() => (activeTab = 'nutrition')}
+				>
+					<ChartPie size={18} />
+				</button>
+			{/if}
+		{/await}
 		<button
 			class="tab-button {activeTab === 'comments' ? 'active' : ''}"
 			type="button"

src/lib/pages/recipe/Recipe.svelte

@@ -81,6 +81,15 @@
 	let imageBroken = $state(false)
 	let currentServings = $state<number>(1)
 
+	let hasNutrition = $derived(
+		data.then((r) => {
+			const n = r.recipe.nutrition
+			if (!n) return false
+			const { calories, protein, carbs, fat } = n
+			return !(calories === 0 && protein === 0 && carbs === 0 && fat === 0)
+		})
+	)
+
 	$effect(() => {
 		data.then((r) => {
 			totalComments = r.comments.total
@@ -391,41 +400,40 @@
 {/snippet}
 
 {#snippet comments()}
-	{#if !preview}
-		<div class="comments-section" bind:this={commentsSection}>
-			<div class="header no-top-margin-mobile">
-				<h3 style:display="flex" style:align-items="center" style:gap="var(--spacing-sm)">
-					<MessageSquare size={20} />
-					Comments
-					{#if totalComments}
-						<span style:font-size="var(--font-size-xl)" style:font-weight="500">
-							({totalComments})
-						</span>
-					{/if}
-				</h3>
-			</div>
-			{#await data}
-				<CommentList
-					comments={[]}
-					isLoggedIn={false}
-					recipeId=""
-					{formError}
-					loading={true}
-					total={0}
-					loadComments={() => Promise.resolve({ comments: [], total: 0 })}
-				/>
-			{:then recipeData}
-				<CommentList
-					comments={recipeData.comments.comments}
-					isLoggedIn={recipeData.isLoggedIn}
-					recipeId={recipeData.recipe.id}
-					{formError}
-					bind:total={totalComments}
-					{loadComments}
-				/>
-			{/await}
+	<div class="comments-section" bind:this={commentsSection}>
+		<div class="header no-top-margin-mobile">
+			<h3 style:display="flex" style:align-items="center" style:gap="var(--spacing-sm)">
+				<MessageSquare size={20} />
+				Comments
+				{#if totalComments}
+					<span style:font-size="var(--font-size-xl)" style:font-weight="500">
+						({totalComments})
+					</span>
+				{/if}
+			</h3>
 		</div>
-	{/if}
+		{#await data}
+			<CommentList
+				comments={[]}
+				isLoggedIn={false}
+				recipeId=""
+				{formError}
+				loading={true}
+				total={0}
+				loadComments={() => Promise.resolve({ comments: [], total: 0 })}
+			/>
+		{:then recipeData}
+			<CommentList
+				comments={recipeData.comments.comments}
+				isLoggedIn={recipeData.isLoggedIn}
+				recipeId={recipeData.recipe.id}
+				{formError}
+				bind:total={totalComments}
+				{loadComments}
+				{preview}
+			/>
+		{/await}
+	</div>
 {/snippet}
 
 <div class="recipe-desktop-view">
@@ -441,7 +449,8 @@
 </div>
 
 <div class="recipe-mobile-view">
-	<MobileLayout {tags} {title} {actionButtons} {nutrition} {ingredients} {instructions} {comments}>
+	<MobileLayout {tags} {title} {actionButtons} {nutrition} {ingredients} {instructions} {comments}
+		{...{ hasNutrition }}>
 		{#snippet image()}
 			{@render commonImage()}
 		{/snippet}