fix:like-not-working #675
fix:like-not-working #675
Conversation
|
Connected to Huly®: METAS-541 |
📝 WalkthroughWalkthroughAdds spring-based scale animations and an async like interaction to Post and PostModal components; profile page now fetches comments when opening a post and guards/updates like state; two protected-route files received only whitespace/formatting changes. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant UI as Post / PostModal
participant API as toggleLike / comments API
participant Store as selectedPost / commentsStore
User->>UI: click like (handleLikeWithInteraction)
UI->>UI: set scale.target = 1.4 (animate)
UI->>API: await callback.like(postId)
API-->>UI: return updated likedBy
UI->>Store: update selectedPost.value.likedBy
UI->>UI: set scale.target = 1 (reset after 150ms)
UI-->>User: updated visual state
User->>UI: open post (handlePostClick)
UI->>API: fetchComments(postId)
API-->>UI: return comments
UI->>Store: commentsStore.update / local comments set
UI-->>User: comments displayed
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 🧹 Recent nitpick comments
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used🧠 Learnings (1)📚 Learning: 2026-01-05T11:46:43.214ZApplied to files:
🔇 Additional comments (3)
✏️ Tip: You can disable this entire section by setting Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@platforms/pictique/src/routes/`(protected)/profile/[id]/+page.svelte:
- Around line 139-144: The like handler calls toggleLike with a potential
empty-string ID and has no error handling; guard by early-returning if
selectedPost.value?.id is missing (check selectedPost.value and its id) instead
of passing '' and wrap the await toggleLike(...) call in try/catch; on success
set (selectedPost.value as any).likedBy = result.likedBy, and on error log or
surface the error (e.g., use console.error or the existing logger) and
optionally show user feedback.
🧹 Nitpick comments (1)
platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte (1)
133-137: Consider adding proper types instead ofas anycasts.The
as anycasts on lines 134 and 135 bypass TypeScript's type checking. IflikedByis a valid property on posts, consider extending thePostDatatype to include it, which would provide better type safety and IDE support.-isLiked={ownerProfile - ? ((selectedPost.value as any)?.likedBy?.some( - (user: any) => user.id === ownerProfile.id - ) ?? false) - : false} +isLiked={ownerProfile + ? (selectedPost.value?.likedBy?.some( + (user) => user.id === ownerProfile.id + ) ?? false) + : false}This requires updating
PostDatato includelikedBy: { id: string }[].
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
platforms/pictique/src/routes/(protected)/+layout.svelteplatforms/pictique/src/routes/(protected)/group/[id]/+page.svelteplatforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2026-01-05T11:46:43.214Z
Learnt from: Bekiboo
Repo: MetaState-Prototype-Project/prototype PR: 653
File: platforms/pictique/src/routes/(auth)/auth/+page.svelte:173-173
Timestamp: 2026-01-05T11:46:43.214Z
Learning: In Tailwind CSS v4, gradient utilities were renamed from bg-gradient-to-{direction} to bg-linear-to-{direction}. For all Svelte components (e.g., any .svelte files in the project), replace usages like bg-gradient-to-r, bg-gradient-to-l, etc. with bg-linear-to-r, bg-linear-to-l, etc. Ensure consistency across the codebase, update any documentation or design tokens, and run visual/test checks to confirm gradients render as intended.
Applied to files:
platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelteplatforms/pictique/src/routes/(protected)/+layout.svelteplatforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
🔇 Additional comments (2)
platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte (1)
157-166: LGTM!Formatting-only changes with no behavioral impact. The boolean logic for
isHeadNeededandisTimestampNeededremains functionally identical.platforms/pictique/src/routes/(protected)/+layout.svelte (1)
200-201: LGTM!Minor formatting adjustment with no change to the disclaimer content or behavior.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
platforms/pictique/src/lib/fragments/PostModal/PostModal.svelte (1)
209-218: Mobile like button missing animation and has a syntax error.Two issues here:
Syntax error (line 215): Missing closing parenthesis in the CSS variable:
"var(--color-red-500"should be"var(--color-red-500)".Inconsistent behavior: The mobile like button uses
callback.likedirectly instead ofhandleLikeWithInteraction, so it won't have the scale animation that the desktop version has. Additionally, thefillvalue when not liked is'white'here but'transparent'on desktop (line 313).🔧 Proposed fix to add animation and fix syntax
<button class="group cursor-pointer rounded-2xl bg-gray-100 px-4 py-3 transition-colors hover:bg-gray-200 active:bg-gray-300" - onclick={callback.like} + onclick={handleLikeWithInteraction} > - <Like - size="24px" - color="var(--color-red-500" - fill={isLiked ? 'var(--color-red-500)' : 'white'} - /> + <div + style="transform: scale({scale.current}); display: flex; align-items: center; justify-content: center;" + > + <Like + size="24px" + color={'var(--color-red-500)'} + fill={isLiked ? 'var(--color-red-500)' : 'transparent'} + class="transition-all duration-300" + /> + </div> </button>
🤖 Fix all issues with AI agents
In `@platforms/pictique/src/lib/fragments/PostModal/PostModal.svelte`:
- Around line 125-129: In handleLikeWithInteraction, callback.like() returns a
Promise but is not awaited; change the function to await callback.like() and
wrap it in try/catch so any rejection is handled, and move the scale.target = 1
reset into a finally block (or after the await) so the animation resets only
after the like operation completes (use handleLikeWithInteraction and
callback.like and scale.target to locate changes).
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
platforms/pictique/src/lib/fragments/Post/Post.svelteplatforms/pictique/src/lib/fragments/PostModal/PostModal.svelte
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2026-01-05T11:46:43.214Z
Learnt from: Bekiboo
Repo: MetaState-Prototype-Project/prototype PR: 653
File: platforms/pictique/src/routes/(auth)/auth/+page.svelte:173-173
Timestamp: 2026-01-05T11:46:43.214Z
Learning: In Tailwind CSS v4, gradient utilities were renamed from bg-gradient-to-{direction} to bg-linear-to-{direction}. For all Svelte components (e.g., any .svelte files in the project), replace usages like bg-gradient-to-r, bg-gradient-to-l, etc. with bg-linear-to-r, bg-linear-to-l, etc. Ensure consistency across the codebase, update any documentation or design tokens, and run visual/test checks to confirm gradients render as intended.
Applied to files:
platforms/pictique/src/lib/fragments/PostModal/PostModal.svelteplatforms/pictique/src/lib/fragments/Post/Post.svelte
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: lint
- GitHub Check: build
🔇 Additional comments (3)
platforms/pictique/src/lib/fragments/Post/Post.svelte (2)
97-106: LGTM! Clean animation implementation.The Spring-based scale animation provides nice visual feedback for the like interaction. The implementation is straightforward and effective.
One minor observation: the
asynckeyword onhandleLikeWithInteraction(line 102) isn't necessary sincecallback.like()returnsvoid(not a Promise) and you're not usingawait. This is purely cosmetic and doesn't affect functionality.
186-195: Good implementation of the animated like button.The scale transform and conditional fill provide clear visual feedback for the like state. The use of CSS custom properties for colors maintains consistency with the design system.
platforms/pictique/src/lib/fragments/PostModal/PostModal.svelte (1)
303-317: Desktop like button implementation looks good.The scale animation and conditional fill are correctly implemented here, matching the pattern in
Post.svelte. This is the expected behavior for the like interaction.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
…and commenting is done with below text input
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
platforms/pictique/src/lib/fragments/PostModal/PostModal.svelte (1)
209-218: Fix CSS syntax error and inconsistent behavior with desktop.Three issues in the mobile like button:
- Syntax error on line 215: Missing closing parenthesis in
var(--color-red-500"— should bevar(--color-red-500).- Inconsistent handler: Mobile uses
callback.likedirectly while desktop useshandleLikeWithInteractionwith scale animation.- Inconsistent fill: Mobile uses
'white'when not liked, desktop uses'transparent'.🔧 Proposed fix
<button class="group cursor-pointer rounded-2xl bg-gray-100 px-4 py-3 transition-colors hover:bg-gray-200 active:bg-gray-300" - onclick={callback.like} + onclick={handleLikeWithInteraction} > - <Like - size="24px" - color="var(--color-red-500" - fill={isLiked ? 'var(--color-red-500)' : 'white'} - /> + <div + style="transform: scale({scale.current}); display: flex; align-items: center; justify-content: center;" + > + <Like + size="24px" + color="var(--color-red-500)" + fill={isLiked ? 'var(--color-red-500)' : 'transparent'} + class="transition-all duration-300" + /> + </div> </button>
🤖 Fix all issues with AI agents
In `@platforms/pictique/src/lib/fragments/PostModal/PostModal.svelte`:
- Around line 125-129: Wrap the await call in handleLikeWithInteraction in a
try/finally so scale.target is always reset: move scale.target = 1.4 before the
try, await callback.like() inside try, and set scale.target = 1 in the finally
block (replace the setTimeout so the reset happens even on rejection; if the
delayed reset is required, perform the setTimeout inside finally). Ensure you
reference the existing function handleLikeWithInteraction, the scale.target
assignments, the await callback.like(), and the setTimeout behavior when
implementing the change.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
platforms/pictique/src/lib/fragments/Post/Post.svelteplatforms/pictique/src/lib/fragments/PostModal/PostModal.svelte
🚧 Files skipped from review as they are similar to previous changes (1)
- platforms/pictique/src/lib/fragments/Post/Post.svelte
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2026-01-05T11:46:43.214Z
Learnt from: Bekiboo
Repo: MetaState-Prototype-Project/prototype PR: 653
File: platforms/pictique/src/routes/(auth)/auth/+page.svelte:173-173
Timestamp: 2026-01-05T11:46:43.214Z
Learning: In Tailwind CSS v4, gradient utilities were renamed from bg-gradient-to-{direction} to bg-linear-to-{direction}. For all Svelte components (e.g., any .svelte files in the project), replace usages like bg-gradient-to-r, bg-gradient-to-l, etc. with bg-linear-to-r, bg-linear-to-l, etc. Ensure consistency across the codebase, update any documentation or design tokens, and run visual/test checks to confirm gradients render as intended.
Applied to files:
platforms/pictique/src/lib/fragments/PostModal/PostModal.svelte
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
🔇 Additional comments (1)
platforms/pictique/src/lib/fragments/PostModal/PostModal.svelte (1)
303-321: Desktop like button implementation looks good.The scale animation is properly wired with
handleLikeWithInteraction, and the visual feedback withtransition-colorsandactive:bg-gray-300improves UX. The commented-out CommentIcon aligns with the commit message about removing it due to lacking a handler.Consider removing the commented code entirely if the comment functionality via text input is the intended final design.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
platforms/pictique/src/lib/fragments/PostModal/PostModal.svelte (1)
212-221: Mobile layout missing animation and has syntax error.Two issues in the mobile Like button:
Inconsistent behavior: Line 214 calls
callback.likedirectly instead ofhandleLikeWithInteraction, so mobile users won't see the scale animation that desktop users get.Missing closing parenthesis: Line 218 has
color="var(--color-red-500"— missing the closing).Fill inconsistency: Mobile uses
fill='white'when not liked, but desktop (line 316) uses'transparent'. This may cause visual differences.🔧 Proposed fix
<button - class="group cursor-pointer rounded-2xl bg-gray-100 px-4 py-3 transition-colors hover:bg-gray-200 active:bg-gray-300" - onclick={callback.like} + class="group cursor-pointer rounded-2xl bg-gray-100 px-4 py-3 transition-colors hover:bg-gray-200 active:bg-gray-300" + onclick={handleLikeWithInteraction} > - <Like - size="24px" - color="var(--color-red-500" - fill={isLiked ? 'var(--color-red-500)' : 'white'} - /> + <div + style="transform: scale({scale.current}); display: flex; align-items: center; justify-content: center;" + > + <Like + size="24px" + color={'var(--color-red-500)'} + fill={isLiked ? 'var(--color-red-500)' : 'transparent'} + class="transition-all duration-300" + /> + </div> </button>
♻️ Duplicate comments (1)
platforms/pictique/src/lib/fragments/PostModal/PostModal.svelte (1)
119-132: LGTM!The Spring animation and error handling with
try/finallyis correctly implemented, matching the pattern in Post.svelte.
🧹 Nitpick comments (1)
platforms/pictique/src/lib/fragments/PostModal/PostModal.svelte (1)
321-323: Verify commented-out code should be removed.Per the PR description, the comment button was removed because commenting is handled via the text input. Consider removing this commented-out code entirely rather than leaving it in place.
♻️ Proposed cleanup
- <!-- <button class="cursor-pointer rounded-2xl bg-gray-100 px-4 py-3 hover:bg-gray-200"> - <CommentIcon size="24px" color="black" fill="transparent" /> - </button> -->
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
platforms/pictique/src/lib/fragments/Post/Post.svelteplatforms/pictique/src/lib/fragments/PostModal/PostModal.svelte
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2026-01-05T11:46:43.214Z
Learnt from: Bekiboo
Repo: MetaState-Prototype-Project/prototype PR: 653
File: platforms/pictique/src/routes/(auth)/auth/+page.svelte:173-173
Timestamp: 2026-01-05T11:46:43.214Z
Learning: In Tailwind CSS v4, gradient utilities were renamed from bg-gradient-to-{direction} to bg-linear-to-{direction}. For all Svelte components (e.g., any .svelte files in the project), replace usages like bg-gradient-to-r, bg-gradient-to-l, etc. with bg-linear-to-r, bg-linear-to-l, etc. Ensure consistency across the codebase, update any documentation or design tokens, and run visual/test checks to confirm gradients render as intended.
Applied to files:
platforms/pictique/src/lib/fragments/PostModal/PostModal.svelteplatforms/pictique/src/lib/fragments/Post/Post.svelte
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
🔇 Additional comments (6)
platforms/pictique/src/lib/fragments/Post/Post.svelte (4)
10-10: LGTM!The
Springimport fromsvelte/motionis correct for Svelte 5.
25-25: LGTM!Updating the
callback.likesignature toPromise<void>correctly reflects the async nature of the like operation.
96-109: LGTM!The Spring animation and
handleLikeWithInteractionimplementation is well-structured:
- Spring parameters (stiffness 0.15, damping 0.25) provide smooth animation
try/finallyensures the scale resets even if the like callback fails- The 150ms delay before reset allows the animation peak to be visible
186-198: LGTM!The scale transform is correctly applied via inline style, and the
Likeicon properly usestransparentfill when not liked (consistent with the desktop layout in PostModal.svelte).platforms/pictique/src/lib/fragments/PostModal/PostModal.svelte (2)
12-12: LGTM!The
Springimport is correctly added for the animation functionality.
307-320: LGTM!The desktop Like button correctly uses
handleLikeWithInteractionand applies the scale transform animation. The implementation is consistent with Post.svelte.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@platforms/pictique/src/routes/`(protected)/profile/[id]/+page.svelte:
- Around line 167-170: The comment callback for the post lacks error handling:
in the comment handler (comment: async (comment) => { ... }) wrap the await
createComment(selectedPost.value?.id, comment) call in try/catch (similar to the
like handler), check selectedPost.value before calling, and on failure call the
existing error handling path (e.g., show the toast/error UI or call the same
error handler used by the like callback) and optionally rethrow or return a
failure result so the UI can reflect the error.
🧹 Nitpick comments (3)
platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte (3)
13-23: UnusedCommentinterface andcommentsarray.The local
Commentinterface andcommentsarray (line 37) are declared but never used. The component passes$commentsStoretoPostModalinstead of this local array.Consider removing the dead code:
Proposed fix
- interface Comment { - id: string; - text: string; - createdAt: string; - author: { - id: string; - handle: string; - name: string; - avatarUrl: string; - }; - } -- let comments: Array<Comment> = [];Also applies to: 37-37
75-83: Consider clearing comments before fetch to avoid stale data on error.If
fetchCommentsfails, the modal opens with potentially stale comments from a previously viewed post. Consider clearing the comments store before fetching or handling the error state in the UI.Suggested approach
async function handlePostClick(post: PostData) { selectedPost.value = post; try { + // Clear previous comments before fetching new ones + // (if your store supports this, e.g., commentsStore.set([])) await fetchComments(post.id); } catch (err) { console.error('Error loading comments:', err); + // Optionally: show error state to user } }
150-154: Type safety concern withas anycasts.The
isLikedcomputation and thelikedByassignment (line 161) useas anycasts, suggesting a type mismatch betweenselectedPost.valueand the expected structure withlikedBy. Consider extending thePostDatatype or using a more specific type to avoid losing type safety.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2026-01-05T11:46:43.214Z
Learnt from: Bekiboo
Repo: MetaState-Prototype-Project/prototype PR: 653
File: platforms/pictique/src/routes/(auth)/auth/+page.svelte:173-173
Timestamp: 2026-01-05T11:46:43.214Z
Learning: In Tailwind CSS v4, gradient utilities were renamed from bg-gradient-to-{direction} to bg-linear-to-{direction}. For all Svelte components (e.g., any .svelte files in the project), replace usages like bg-gradient-to-r, bg-gradient-to-l, etc. with bg-linear-to-r, bg-linear-to-l, etc. Ensure consistency across the codebase, update any documentation or design tokens, and run visual/test checks to confirm gradients render as intended.
Applied to files:
platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte
🔇 Additional comments (1)
platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte (1)
156-166: LGTM!The like callback now properly guards against missing post ID, wraps the async call in try/catch, and validates the result before updating state. Previous review concerns have been addressed.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
Description of change
-Fixed the like button it was not reflecting state in UI but working perfectly in api call.
-Removed the comment button because that commenting task is fulfilled with text input.
-Fixed Comments, comments are also working now.
Issue Number
closes #671
closes #672
Type of change
How the change has been tested
Manual
Change checklist
Summary by CodeRabbit
New Features
Bug Fixes
Style
✏️ Tip: You can customize this high-level summary in your review settings.