Feat/comments pane #171
Feat/comments pane #171
Conversation
ghost
self-assigned this
ghost
requested a review
from 
|
""" WalkthroughThe changes refactor the Drawer component to accept a CupertinoPane instance as a prop, removing internal state and swipe callback handling. The home page integrates this Drawer for comments, replacing post callbacks with inline handlers that present the Drawer. Styling updates include added CSS classes for post likes/comments and overflow control on the layout. A new Comment component with interactive like/dislike and reply features is introduced, along with a corresponding Storybook story. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Post
participant Drawer
participant CupertinoPane
User->>Post: Click "comment"
Post->>Drawer: Call drawer.present() with animation
Drawer->>CupertinoPane: present()
Assessment against linked issues
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (5)
💤 Files with no reviewable changes (1)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (2)
🔇 Additional comments (3)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte(1 hunks)platforms/metagram/src/lib/fragments/Post/Post.svelte(1 hunks)platforms/metagram/src/routes/(protected)/home/+page.svelte(5 hunks)platforms/metagram/src/routes/+layout.svelte(1 hunks)
🔇 Additional comments (9)
platforms/metagram/src/routes/+layout.svelte (1)
39-39: LGTM: Proper overflow handling for viewport layout.The addition of
overflow-hiddencorrectly prevents content overflow when using the full viewport height (100dvh), which supports the coordinated layout changes across the application.platforms/metagram/src/lib/fragments/Post/Post.svelte (1)
85-85: LGTM: Improved styling consistency.The addition of
subtextandtext-black-400classes standardizes the typography and color styling for the like and comment counts, improving design system consistency.Also applies to: 93-93
platforms/metagram/src/routes/(protected)/home/+page.svelte (4)
2-2: LGTM: Proper external state management for drawer.The imports and state declaration correctly establish external management of the CupertinoPane instance, allowing the parent component to control the drawer lifecycle.
Also applies to: 5-5, 32-32
63-63: LGTM: Height change coordinates with layout updates.Changing from fixed
h-[600px]toh-[100vh]properly coordinates with theoverflow-hiddenaddition in the layout component, creating a full viewport scrollable container.
88-88: LGTM: Proper component binding.The Drawer component binding correctly establishes two-way communication between the parent state and child component.
74-78:❓ Verification inconclusive
Verify drawer instance availability before calling present().
The comment handler calls
drawer?.present({ animate: true })which correctly uses optional chaining, but ensure the drawer instance is properly initialized before user interactions can trigger this callback.
🏁 Script executed:
#!/bin/bash # Description: Verify drawer initialization timing and error handling # Search for drawer initialization and lifecycle management ast-grep --pattern 'drawer = new CupertinoPane($_)' # Search for any error handling around drawer operations rg -A 3 -B 3 'drawer\?\.present|drawer\?\.destroy'Length of output: 1268
🏁 Script executed:
#!/bin/bash echo "Inspecting Drawer.svelte for drawer export and initialization" rg -n 'export let drawer' -A5 platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte rg -n 'new CupertinoPane' -A5 platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte echo "Preview of Drawer.svelte (lines 1–80)" sed -n '1,80p' platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte echo "Inspecting +page.svelte for Drawer usage" rg -n 'bind:drawer' -A3 platforms/metagram/src/routes/(protected)/home/+page.svelte rg -n 'import .*Drawer' -n platforms/metagram/src/routes/(protected)/home/+page.svelteLength of output: 2716
#!/bin/bash # Inspect +page.svelte for Drawer import, binding, and drawer variable rg -n "import .*Drawer" -A3 "platforms/metagram/src/routes/(protected)/home/+page.svelte" rg -n "bind:drawer" -A3 "platforms/metagram/src/routes/(protected)/home/+page.svelte" rg -n "let drawer" -n "platforms/metagram/src/routes/(protected)/home/+page.svelte"
#!/bin/bash # Print the script section and initial markup of +page.svelte to locate drawer declaration echo "=== Script and top markup of +page.svelte ===" sed -n '1,200p' "platforms/metagram/src/routes/(protected)/home/+page.svelte" echo -e "\n=== Searching for Drawer component import and usage ===" rg -n "import .*Drawer" -A2 "platforms/metagram/src/routes/(protected)/home/+page.svelte" rg -n "<Drawer" -A3 "platforms/metagram/src/routes/(protected)/home/+page.svelte" echo -e "\n=== Searching for bind:drawer ===" rg -n "bind:drawer" "platforms/metagram/src/routes/(protected)/home/+page.svelte"
#!/bin/bash # Safely preview the beginning of +page.svelte to locate drawer declaration and import file="platforms/metagram/src/routes/(protected)/home/+page.svelte" echo "Inspecting file: $file" if [ -f "$file" ]; then echo "=== +page.svelte (lines 1–200) ===" sed -n '1,200p' "$file" else echo "File not found: $file" fi
Ensure Drawer is correctly bound and initialized before calling present()
Please confirm that the parent page correctly wires up the
Drawercomponent so thatdraweris defined by the time the comment handler runs:• Verify that
+page.svelte
– imports theDrawerfragment,
– declareslet drawer, and
– usesbind:drawer={drawer}on the<Drawer>instance.
• BecauseDrawer.svelteinitializesdrawerinonMount, ensure user interactions can’t fire the comment callback before mount completes.
• Optionally, disable or guard the comment button untildraweris non-null to avoid no-ops.platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte (3)
9-12: LGTM: Interface refactor for external state management.The interface correctly removes internal state props (
isPaneOpen,handleSwipe) and adds thedrawerprop for external control, improving component reusability.
27-31: LGTM: Simplified swipe handler.The swipe handler correctly focuses only on destroying the drawer on downward swipes, which aligns with the external state management pattern where the parent controls presentation.
34-50: LGTM: Proper CupertinoPane initialization.The onMount lifecycle correctly creates the CupertinoPane instance and assigns it to the bindable drawer prop, enabling external control while maintaining proper cleanup through the backdrop tap handler.
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
platforms/metagram/src/lib/ui/Input/Input.svelte (1)
8-8: Consider more specific typing instead ofany.While the broader type supports various input types, using
anyreduces type safety. Consider a union type likestring | number | readonly string[]to better match HTML input value types.- value: string | number | any; + value: string | number | readonly string[];platforms/metagram/src/lib/fragments/Comment/Comment.svelte (1)
31-31: Minor: Unnecessary array wrapping in class concatenation.The
cn([restProps.class].join(' '))pattern is redundant sincerestProps.classis already a string.Simplify to:
-<article {...restProps} class={cn([restProps.class].join(' '))}> +<article {...restProps} class={cn(restProps.class)}>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
platforms/metagram/src/lib/dummyData.ts(0 hunks)platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts(1 hunks)platforms/metagram/src/lib/fragments/Comment/Comment.svelte(1 hunks)platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte(1 hunks)platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte(3 hunks)platforms/metagram/src/lib/fragments/index.ts(1 hunks)platforms/metagram/src/lib/icons/Like.svelte(1 hunks)platforms/metagram/src/lib/ui/Input/Input.svelte(2 hunks)platforms/metagram/src/routes/(protected)/home/+page.svelte(5 hunks)
💤 Files with no reviewable changes (1)
- platforms/metagram/src/lib/dummyData.ts
✅ Files skipped from review due to trivial changes (1)
- platforms/metagram/src/lib/fragments/index.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte
🔇 Additional comments (14)
platforms/metagram/src/lib/icons/Like.svelte (2)
4-4: LGTM! Well-designed optional prop addition.The addition of the optional
fillprop maintains backward compatibility while enabling dynamic fill control for interactive use cases like like/dislike states.
11-11: LGTM! Proper dynamic binding implementation.The change from static
fill="none"to dynamic{fill}binding correctly implements the new functionality and integrates well with Svelte's reactivity system.platforms/metagram/src/lib/ui/Input/Input.svelte (2)
7-7: LGTM! Proper element reference binding.The addition of the optional
inputproperty enables external components to access the HTML input element for programmatic control.
14-14: LGTM! Correct implementation of element binding.The use of
$bindable()andbind:this={input}properly implements two-way binding for the input element reference, enabling external access for programmatic control.Also applies to: 30-30
platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte (3)
10-10: LGTM! Consistent API design.The addition of the optional
inputproperty maintains consistency with the underlying Input component's interface.
22-23: LGTM! Proper bindable implementation.The use of
$bindable()for bothvalueandinputenables proper two-way binding for external components to access both the input value and element reference.
51-51: LGTM! Correct binding pass-through.The addition of
bind:inputalongsidebind:valueproperly exposes the input element reference while maintaining the existing value binding functionality.platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts (2)
4-12: LGTM! Well-structured Storybook configuration.The default export follows Storybook best practices with proper title, component reference, autodocs tags, and render function implementation.
14-25: LGTM! Comprehensive story with realistic sample data.The Main story provides good coverage of the Comment component props with realistic sample data. The use of
alert()for thehandleReplycallback is appropriate for Storybook demonstration purposes.platforms/metagram/src/lib/fragments/Comment/Comment.svelte (2)
7-16: Well-structured interface definition.The
ICommentPropsinterface properly extendsHTMLAttributes<HTMLElement>and includes all necessary props for the comment functionality. The type definitions are clear and appropriate.
18-28: Props destructuring looks good with sensible defaults.The destructuring pattern with default values is well-implemented. The default avatar URL provides a fallback, and the spread operator properly handles additional HTML attributes.
platforms/metagram/src/routes/(protected)/home/+page.svelte (3)
2-6: Good import organization.The imports are well-organized and include the necessary components for the comments functionality.
28-30: Well-structured state variables for comment functionality.The reactive state variables for drawer management and comment input are properly typed and initialized.
72-76: Good refactoring of callback structure.The inline callback handlers provide better control and are more explicit than the previous prop-based approach. The drawer presentation with animation is a nice touch.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
platforms/metagram/src/lib/dummyData.ts (1)
17-62: Improve dummy data variety for better testing.The current dummy data is too repetitive and uniform, which limits its effectiveness for testing the Comments UI. All comments have identical interaction states, timestamps, and similar text patterns.
Consider applying this diff to add more realistic variety:
export const comments: CommentType[] = Array.from({ length: 50 }, (_, i) => ({ userImgSrc: 'https://picsum.photos/800', name: `user${i + 1}`, commentId: `${i + 1}`, - comment: `this is the dummy comment which is commented by user${i + 1}`, - isLiked: false, - isDisliked: false, - likeCount: 0, - time: '2 minutes ago', + comment: `This is comment ${i + 1}. ${i % 3 === 0 ? 'Great post! 👍' : i % 3 === 1 ? 'Interesting perspective...' : 'Thanks for sharing this!'}`, + isLiked: i % 7 === 0, + isDisliked: i % 11 === 0, + likeCount: Math.floor(Math.random() * 50), + time: `${Math.floor(Math.random() * 24) + 1} ${i % 2 === 0 ? 'hours' : 'minutes'} ago`,This provides:
- Varied comment content with different expressions
- Realistic like/dislike states and counts
- Diverse timestamps for better visual testing
platforms/metagram/src/lib/fragments/Comment/Comment.svelte (1)
14-18: Remove unused code.The
showMoreRepliesfunction andvisibleRepliesvariable are defined but never used in the component.Apply this diff to clean up the unused code:
- let visibleReplies = 2; - - const showMoreReplies = () => { - visibleReplies = comment.replies.length; - };If you plan to implement "show more replies" functionality later, consider adding a TODO comment or implementing it immediately.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
platforms/metagram/src/lib/dummyData.ts(2 hunks)platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts(1 hunks)platforms/metagram/src/lib/fragments/Comment/Comment.svelte(1 hunks)platforms/metagram/src/lib/types.ts(1 hunks)platforms/metagram/src/routes/(protected)/home/+page.svelte(5 hunks)
✅ Files skipped from review due to trivial changes (1)
- platforms/metagram/src/lib/types.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- platforms/metagram/src/routes/(protected)/home/+page.svelte
- platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts
🧰 Additional context used
🧬 Code Graph Analysis (1)
platforms/metagram/src/lib/dummyData.ts (1)
platforms/metagram/src/lib/types.ts (1)
CommentType(8-18)
🔇 Additional comments (1)
platforms/metagram/src/lib/fragments/Comment/Comment.svelte (1)
77-85: Add safeguards against infinite recursion.The recursive rendering of replies could cause infinite loops if the comment data contains circular references.
Consider adding a depth limit or cycle detection:
+ let { comment, handleReply, depth = 0, ...restProps }: ICommentProps = $props(); + + const MAX_DEPTH = 5; // Prevent infinite recursion{#if comment?.replies?.length} + {#if depth < MAX_DEPTH} <ul class="ms-12 mt-4 space-y-2"> {#each comment.replies as reply} <li> - <CommentComponent comment={reply} {handleReply} /> + <CommentComponent comment={reply} {handleReply} depth={depth + 1} /> </li> {/each} </ul> + {/if} {/if}Also update the interface to include the optional depth parameter.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
platforms/metagram/src/routes/(protected)/home/+page.svelte (1)
99-99: Layout height mismatch with parent container.
🧹 Nitpick comments (1)
platforms/metagram/src/routes/(protected)/home/+page.svelte (1)
110-114: Consider extracting callback handlers for better maintainability.While the inline callback approach works, extracting these handlers to named functions would improve code organization and make testing easier.
+const handleLike = () => { + // TODO: Implement like functionality + alert('like'); +}; + +const handleComment = () => { + drawer?.present({ animate: true }); +}; + +const handleMenu = () => { + // TODO: Implement menu functionality + alert('menu'); +}; callback={{ - like: () => alert('like'), - comment: () => drawer?.present({ animate: true }), - menu: () => alert('menu') + like: handleLike, + comment: handleComment, + menu: handleMenu }}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
platforms/metagram/src/lib/dummyData.ts(2 hunks)platforms/metagram/src/lib/fragments/Comment/Comment.svelte(1 hunks)platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte(2 hunks)platforms/metagram/src/lib/types.ts(1 hunks)platforms/metagram/src/routes/(protected)/home/+page.svelte(6 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- platforms/metagram/src/lib/dummyData.ts
- platforms/metagram/src/lib/types.ts
- platforms/metagram/src/lib/fragments/Comment/Comment.svelte
- platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: lint
🔇 Additional comments (1)
platforms/metagram/src/routes/(protected)/home/+page.svelte (1)
126-126:⚠️ Potential issueUse dynamic comment count instead of static data length.
The comment count display uses the static
comments.lengthinstead of the dynamic_comments.length, which won't reflect added comments.-<h3 class="text-black-600 mb-6 text-center">{comments.length} Comments</h3> +<h3 class="text-black-600 mb-6 text-center">{_comments.length} Comments</h3>Likely an incorrect or invalid review comment.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (3)
platforms/metagram/src/routes/(protected)/home/+page.svelte (3)
54-87: Improve ID generation and add error handling.This issue has been previously identified regarding collision-prone ID generation, missing error handling, and inefficient recursive search.
99-99: Verify layout impact of height change.This height change from relative to
100vhhas been previously flagged as potentially affecting overall page layout and scrolling behavior.
124-147: Development implementation with hard-coded data.The drawer implementation with hard-coded comment data and placeholder functionality has been previously identified as needing production-ready improvements.
🧹 Nitpick comments (1)
platforms/metagram/src/routes/(protected)/home/+page.svelte (1)
139-139: Consider responsive positioning for MessageInput.The fixed positioning with
start-0 bottom-4may cause issues on different screen sizes or when the virtual keyboard appears on mobile devices.Consider using a more flexible positioning approach:
- class="fixed start-0 bottom-4 mt-4 w-full px-5" + class="sticky bottom-0 mt-4 w-full px-5 bg-white border-t"This approach ensures the input stays at the bottom of the drawer content rather than being fixed to the viewport.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
platforms/metagram/src/routes/(protected)/home/+page.svelte (2)
41-74:⚠️ Potential issueCritical issues remain in the handleSend function.
The handleSend function still has the same critical issues that were flagged in previous reviews but haven't been addressed:
- Collision-prone ID generation:
Date.now().toString()can cause ID collisions- Missing error handling: No try-catch blocks for potential failures
- Missing input validation: No check for empty comment content
- Inefficient recursive search: The nested loop could be slow with deep threads
113-113:⚠️ Potential issueUse reactive comment count instead of static data.
The comment count still displays
comments.lengthbut should use_comments.lengthsince_commentsis the reactive state that updates when new comments are added.
🧹 Nitpick comments (2)
platforms/metagram/src/routes/(protected)/home/+page.svelte (2)
97-101: Move callback object outside render for better performance.The inline callback object will be recreated on every render, which could impact performance. Consider moving it to a stable reference.
+ const postCallbacks = { + like: () => alert('like'), + comment: () => drawer?.present({ animate: true }), + menu: () => alert('menu') + }; <Post avatar={post.avatar} username={post.username} imgUri={post.imgUri} postAlt={post.postAlt} text={post.text} time={post.time} count={post.count} - callback={{ - like: () => alert('like'), - comment: () => drawer?.present({ animate: true }), - menu: () => alert('menu') - }} + callback={postCallbacks} />
118-121: Improve reply functionality with visual feedback.The reply handler correctly sets the active reply target and focuses the input, but users would benefit from visual feedback indicating which comment they're replying to.
Consider adding a visual indicator:
handleReply={() => { activeReplyToId = comment.commentId; + // Could add visual indicator showing which comment is being replied to commentInput?.focus(); }}You could conditionally style the parent comment or show a "Replying to..." message based on
activeReplyToId.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
platforms/metagram/src/lib/fragments/Comment/Comment.svelte(1 hunks)platforms/metagram/src/routes/(protected)/home/+page.svelte(5 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- platforms/metagram/src/lib/fragments/Comment/Comment.svelte
🔇 Additional comments (3)
platforms/metagram/src/routes/(protected)/home/+page.svelte (3)
2-7: Import organization looks good.The new imports are properly organized and include all necessary components and types for the comments functionality.
16-20: State variable declarations are well-structured.The new reactive state variables follow Svelte 5's runes pattern correctly and provide the necessary state management for the comments feature.
125-132: MessageInput integration looks solid.The MessageInput component integration with proper two-way binding for both value and input element reference enables the expected focus control functionality.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (3)
platforms/metagram/src/routes/(protected)/home/+page.svelte (3)
40-73: Critical issues remain in comment submission logic.The handleSend function still has the same issues previously identified:
- Collision-prone ID generation:
Date.now().toString()can cause collisions- Missing error handling: No try-catch for potential failures
- Inefficient recursive search: Could be slow with deep comment threads
These issues were flagged in previous reviews but haven't been addressed.
85-85: Height unit mismatch with parent layout.The list uses
h-[100vh]while the parent container in+layout.svelteusesh-[100dvh] overflow-hidden. This mismatch can cause the list to exceed its bounds, especially on mobile where100vhincludes browser chrome.Consider changing to
h-[100dvh]to match the parent's dynamic viewport height unit.
118-118: Use reactive comment count instead of static data.The comment count displays
comments.lengthbut should use_comments.lengthsince_commentsis the reactive state that changes when new comments are added.- <h3 class="text-black-600 mb-6 text-center">{comments.length} Comments</h3> + <h3 class="text-black-600 mb-6 text-center">{_comments.length} Comments</h3>
🧹 Nitpick comments (2)
platforms/metagram/src/routes/(protected)/home/+page.svelte (2)
96-106: Development placeholders in callback handlers.The like and menu handlers still use placeholder alerts which are appropriate for development but should be replaced before production. The comment handler implementation looks good with proper mobile detection.
123-126: Missing reply ID management in handleReply.The current implementation only sets
activeReplyToIdbut doesn't provide feedback to the user about which comment they're replying to. This could be confusing in a long comment thread.Consider adding visual feedback:
handleReply={() => { activeReplyToId = comment.commentId; + // Could add visual indicator or "Replying to [username]" message commentInput?.focus(); }}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
platforms/metagram/src/lib/fragments/Comment/Comment.svelte(1 hunks)platforms/metagram/src/lib/types.ts(1 hunks)platforms/metagram/src/routes/(protected)/home/+page.svelte(5 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- platforms/metagram/src/lib/types.ts
- platforms/metagram/src/lib/fragments/Comment/Comment.svelte
🔇 Additional comments (3)
platforms/metagram/src/routes/(protected)/home/+page.svelte (3)
2-7: LGTM! Clean imports and type integration.The new imports properly integrate the Comment component, MessageInput, and type definitions. The organization is logical and follows the established patterns.
15-19: Good state management setup for comment functionality.The state variables are well-organized and appropriately typed. The initialization with dummy data and reactive state management looks correct.
130-137: Well-integrated MessageInput component.The MessageInput integration with proper binding and class positioning looks good. The fixed positioning and responsive width handling are appropriate for the drawer context.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
platforms/metagram/src/routes/(protected)/home/+page.svelte (2)
40-73: Address the implementation concerns in handleSend function.The handleSend function still has the same critical issues that were previously identified and need to be resolved before production.
The function has collision-prone ID generation using
Date.now().toString(), lacks error handling, and uses an inefficient recursive search pattern. Please refer to the previous detailed review for the complete solution.
118-118: Use reactive comment count instead of static data.The comment count still displays
comments.lengthbut should use_comments.lengthsince_commentsis the reactive state that changes when new comments are added.- <h3 class="text-black-600 mb-6 text-center">{comments.length} Comments</h3> + <h3 class="text-black-600 mb-6 text-center">{_comments.length} Comments</h3>
🧹 Nitpick comments (3)
platforms/metagram/src/routes/(protected)/home/+page.svelte (3)
96-106: Improve mobile detection and callback organization.The callback implementation correctly handles mobile vs desktop comment display, but could be enhanced with better mobile detection and organization.
Consider extracting the media query and improving the callback structure:
+ const isMobile = () => window.matchMedia('(max-width: 768px)').matches; + + const handleCommentClick = () => { + if (isMobile()) { + drawer?.present({ animate: true }); + } else { + // TODO: Show comments in right aside for desktop + } + }; callback={{ like: () => alert('like'), - comment: () => { - if (window.matchMedia('(max-width: 768px)').matches) { - drawer?.present({ animate: true }); - } else { - // comments to be shown in right aside - } - }, + comment: handleCommentClick, menu: () => alert('menu') }}
123-126: Enhance reply functionality with visual feedback.The reply handler correctly sets the active reply ID and focuses the input, but could benefit from visual feedback to indicate which comment is being replied to.
Consider adding visual feedback for the reply state:
handleReply={() => { activeReplyToId = comment.commentId; commentInput?.focus(); + // Could add visual indicator or scroll to comment }}You could also add conditional styling based on
activeReplyToIdto highlight the comment being replied to.
131-131: Consider responsive positioning for MessageInput.The MessageInput uses fixed positioning which works well for mobile, but consider how this behaves on desktop where the drawer might be displayed differently.
Consider making the positioning responsive:
- class="fixed start-0 bottom-4 mt-4 w-full px-5" + class="fixed start-0 bottom-4 mt-4 w-full px-5 md:relative md:bottom-auto"This would make it fixed on mobile but relatively positioned on desktop.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
platforms/metagram/src/lib/fragments/index.ts(1 hunks)platforms/metagram/src/routes/(protected)/home/+page.svelte(5 hunks)platforms/metagram/src/routes/+layout.svelte(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- platforms/metagram/src/lib/fragments/index.ts
- platforms/metagram/src/routes/+layout.svelte
🔇 Additional comments (1)
platforms/metagram/src/routes/(protected)/home/+page.svelte (1)
85-85: Good improvement on viewport height usage.The change from
h-[100vh]toh-[100dvh]correctly addresses the layout compatibility issue with the parent container. This prevents overflow issues on mobile devices.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (4)
platforms/metagram/src/routes/(protected)/+layout.svelte (2)
96-96: Use reactive comment count instead of static data.The comment count should use
_comments.lengthto reflect newly added comments.- <h3 class="text-black-600 mb-6 text-center">{comments.length} Comments</h3> + <h3 class="text-black-600 mb-6 text-center">{_comments.length} Comments</h3>
19-52: 🛠️ Refactor suggestionImprove ID generation and add error handling.
The
handleSendfunction has implementation concerns similar to those in the home page:
- Collision-prone ID generation: Using
Date.now().toString()can cause collisions- Missing error handling: No handling for potential failures
- Inefficient recursive search: Could be slow with deep comment threads
Apply these improvements:
const handleSend = async () => { + if (!commentValue.trim()) return; + + try { const newComment = { userImgSrc: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250', name: 'You', - commentId: Date.now().toString(), + commentId: crypto.randomUUID(), comment: commentValue, isUpVoted: false, isDownVoted: false, upVotes: 0, time: 'Just now', replies: [] }; if (activeReplyToId) { - // Find the parent comment by id and push reply - const addReplyToComment = (commentsArray: CommentType[]) => { - for (const c of commentsArray) { - if (c.commentId === activeReplyToId) { - c.replies.push(newComment); - return true; - } else if (c.replies.length) { - if (addReplyToComment(c.replies)) return true; - } - } - return false; - }; - addReplyToComment(_comments); + // Use iterative approach for better performance + const addReplyToComment = (commentsArray: CommentType[]): boolean => { + const queue = [...commentsArray]; + while (queue.length > 0) { + const comment = queue.shift()!; + if (comment.commentId === activeReplyToId) { + comment.replies.push(newComment); + return true; + } + queue.push(...comment.replies); + } + return false; + }; + + if (!addReplyToComment(_comments)) { + console.error('Parent comment not found'); + return; + } } else { _comments = [newComment, ..._comments]; } commentValue = ''; activeReplyToId = null; + } catch (error) { + console.error('Failed to send comment:', error); + // Consider showing user feedback + } };platforms/metagram/src/routes/(protected)/home/+page.svelte (2)
87-87: Match viewport units with parent layout to prevent overflow.The parent layout uses
h-[100dvh]withoverflow-hidden, but this usesh-[100vh]which can cause clipping on mobile browsers.- <ul bind:this={listElement} class="hide-scrollbar h-[100vh] overflow-auto"> + <ul bind:this={listElement} class="hide-scrollbar h-[100dvh] overflow-auto">
120-120: Use reactive comment count in drawer.The comment count should reflect the reactive state.
- <h3 class="text-black-600 mb-6 text-center">{comments.length} Comments</h3> + <h3 class="text-black-600 mb-6 text-center">{_comments.length} Comments</h3>
🧹 Nitpick comments (1)
platforms/metagram/src/routes/(protected)/+layout.svelte (1)
73-73: Consider improving readability of the grid layout logic.The ternary operator works but could be more readable.
-<main class={`block h-[100dvh] ${route !== "/home"? "grid-cols-[20vw_auto]" : "grid-cols-[20vw_auto_30vw]"} md:grid`}> +<main class={`block h-[100dvh] ${route === "/home" ? "grid-cols-[20vw_auto_30vw]" : "grid-cols-[20vw_auto]"} md:grid`}>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
platforms/metagram/src/lib/store/store.svelte.ts(1 hunks)platforms/metagram/src/routes/(protected)/+layout.svelte(3 hunks)platforms/metagram/src/routes/(protected)/home/+page.svelte(4 hunks)
🔇 Additional comments (3)
platforms/metagram/src/lib/store/store.svelte.ts (1)
5-7: LGTM! Clean state management addition.The
showCommentsstate follows the established pattern and integrates well with the comment pane feature.platforms/metagram/src/routes/(protected)/+layout.svelte (1)
93-119: Well-implemented comment sidebar with good UX considerations.The sidebar implementation shows good practices:
- Proper overflow handling with custom scrollbar hiding
- Sticky input positioning for easy access
- Clean component composition
platforms/metagram/src/routes/(protected)/home/+page.svelte (1)
118-141: Well-implemented responsive comment drawer.Good implementation with:
- Proper responsive behavior (drawer on mobile, sidebar on desktop)
- Clean component composition
- Fixed positioning for input accessibility
* feat/comments-pane * fix: overflow and drawer swipe * feat: Comment fragment * fix: comments added * fix: comment fragment * feat: Comments reply * fix: message input position * fix: post type shifted to types file * fix: one level deep only * fix: drawer should only be render on mobile * fix: comments on layout page * fix: format
* initial commit * chore: add w3id readme (#3) * chore: add w3id readme * chore: bold text * chore: better formatting * docs: add w3id details * chore: format * chore: add links * fix: id spec considerations addressal (#8) * fix: id spec considerations addressal * fix: identity -> indentifier * chore: expand on trust list based recovery * chore: expand on AKA --------- Co-authored-by: Merul Dhiman <[email protected]> * Docs/eid wallet (#10) * chore: add eid-wallet folder * chore: add eid wallet docs * feat: add (#9) * feat(w3id): basic setup (#11) * feat(w3id): basic setup * fix(root): add infrastructure workspaces * update: lock file * feat(eidw): setup tauri (#40) * Feat/setup daisyui (#46) * feat: setup-daisyui * fix: index file * feat: colors added * feat: Archivo font added * fix: postcss added * fix: +layout.svelte file added * fix: packages * fix: fully migrating to tailwind v4 * feat: add Archivo font * feat: add danger colors * feat: twmerge and clsx added * feat: shadcn function added --------- Co-authored-by: Bekiboo <[email protected]> Co-authored-by: Julien <[email protected]> * feat: add storybook (#45) * feat: add storybook * update: lockfile * feat: created connection button (#48) * created connection button * added restprops to parent class * added onClick btn and storybook * fix: make font work in storybook (#54) * Feat/header (#55) * feat: add icons lib * fix: make font work in storybook * feat: Header * feat: runtime global added, icon library created, icons added, type file added * feat: header props added * fix: remove icons and type file as we are using lib for icons * fix: heading style * fix: color and icons, git merge branch 51, 54 * fix: color * fix: header-styling * fix: classes * chore: handlers added * chore: handlers added * fix: added heading --------- Co-authored-by: Soham Jaiswal <[email protected]> * Alternative w3id diagram (#52) * Feat/cupertino pane (#49) * feat: Drawer * feat: Drawer and added a function for clickoutside in utils * fix: classes * fix: drawer button position * fix: style and clickoutside * fix: pane height * fix: border-radius * fix: drawer as bulletin * fix: styling * fix: component with inbuilt features * fix: remove redundant code * fix: remove redundant code * fix: cancel button * fix: css in storybook * fix: position * fix: height of pane * fix: remove redundant code * feat: add button action component (#47) * feat: add button action component * fix: add correct weights to Archivo fontt * feat: add base button * fix: set prop classes last * feat: improve loading state * chore: cleanup * feat: add button action component * fix: add correct weights to Archivo fontt * feat: add base button * fix: set prop classes last * feat: improve loading state * chore: cleanup * chore: add documentation * fix: configure Storybook * chore: storybook gunk removal * feat: enhance ButtonAction component with type prop and better error handling --------- Co-authored-by: JulienAuvo <[email protected]> * Feat/splash screen (#63) * feat: SplashScreen * fix: remove redundant code * fix: as per given suggestion * fix: font-size * fix: logo * feat: input-pin (#56) * feat: input-pin * fix: styling as per our design * fix: added small variant * fix: hide pin on select * fix: gap between pins * fix: color of focus state * fix: removed legacy code and also fix some css to tailwind css * fix: css * fix: optional props * feat: added color variants * Feat/improve button component (#60) * feat: add white variant * feat: add small variant * chore: update doc and story for button * chore: rename cb into callback * update: improve small size * update: modify loading style * fix: return getAbsolutePath function to storybook (#58) Co-authored-by: Bekiboo <[email protected]> * feat: add selector component (#59) * feat: add selector component * feat: improve selector + add flag-icon lib * feat: improve selector + doc * feat: add utility function to get language with country name * feat: test page for language selectors * chore: add Selector Story * chore: clean test page * fix: types * fix: normalize custom tailwind colors (#71) * feat: workflows (#64) * feat: workflows * fix: node version * fix: use pnpm 10 * fix: check message * Fix/codebase linting (#73) * fix: Check Lint / lint * fix: Check Lint / lint * fix: Check Lint / lint * fix: Check Lint / lint * fix: Check Code / lint * fix: Check Format / lint * fix: Check Code / lint * fix: Check Format / lint * fix: Check Code / lint * fix: Check Format / lint * fix: Check Code / lint * fix: Check Code / lint * fix: Check Format / lint * fix: unknown property warning * fix: unknown property warning * chore: improve args type * settings nav button :) (#75) * setting bav button all done :) * lint fixski * added component to index.ts * Feat/#32 identity card fragment (#74) * identity card * identity card * lint fixski * lint fixski * lint fixski * fixed the font weight * added component to index.ts * changed span to buttton * feat: add icon button component (#68) * feat: add icon button component * feat: finish up buttonIcon + stories * fix: update with new color naming * feat: polish button icon (and button action too) * chore: format lint * chore: sort imports * chore: format, not sure why * Feat/onboarding flow (#67) * feat: onboarding-page * fix: line height and added handlers * fix: button variant * fix: text-decoration * fix: subtext * fix: underline * fix: padding and button spacing * fix: according to design update * feat: Drawer * feat: verify-pae * fix: verify-page styling * feat: drawer for both confirm pin and add bio metrics added * feat: modal added in fragments * fix: icons and flow * feat: Identifier Card * fix: copy to clipboard * feat: e-passport page * fix: error state * fix: colors * fix: lint error * fix: lint * feat: Typography * fix: typograpy * fix: as per given suggestion * fix: font-sizing * fix: identity card implementation * fix: spacing * fix: padding * fix: padding and spacing * fix: splashscreen * fix: error state * fix: styling to avoid * fix:typo * Fix/remove daisyui (#82) * refactoring: remove DaisyUI + refactor some tailwind classes and logic * refactoring: remove DaisyUI + refactor some tailwind classes and logic * feat: add Button.Nav (#77) * feat: add Button.Nav * chore: format * chore: sort imports * update: remove unused snippet and add missing props * feat: stick to fragment definition * update: documentation * fix: stories * chore: sort imports * Feat/splashscreen animation (#81) * feat: add animation to splashScreen * feat: implement data loading logic with splash screen delay * chore: sort import * update: use ButtonIcon is IdentityCard (#78) * update: use ButtonIcon is IdentityCard * feat: refactor ButtonIcon to be used anywhere in the app * chore: format indent * chore: remove useless change * feat: setup safe area (#80) * feat: setup safe area * chore: simplify implementation * chore: format * Feat/uuidv5 generation (#61) * feat: setup uuidv5 * chore: add test for deterministic UUID * feat: add Hero fragment (#88) * feat: add Hero fragment * chore: sort imports + add doc * feat: add storage specification abstract class (#92) * feat: add storage specification abstract class * chore: format and ignore lint * chore: change format checker on w3id * feat: settings-flow (#86) * feat: settings-flow * feat: settings and language page * feat : history page * feat: change pin page * fix: height of selector * fix: pin change page * fix: size of input pin * fix: spacing of pins * feat: AppNav fragment * fix: height of page * fix: padding * fix: remove redundant code * feat: privacy page * chore: add doc * fix: error state * feat: remove redundant code * chore: used app nav component --------- Co-authored-by: JulienAuvo <[email protected]> * feat: AppNav fragment (#90) * feat: AppNav fragment * chore: add doc * feat: Main page flow (#93) * feat: create root page + layout * feat: complete main page flow beta * chore: fix ts block * chore: sort imports * feat: integrate-flows (#94) * feat: intigrate-flows * fix: spacing in e-passport page * fix: page connectivity * feat: app page transitions * fix: z index * fix: pages * fix: view transition effect on splashscreen * fix: drawer pill and cancel button removed * fix: share button removed when onboarding * fix: remove share and view button when on onboarding flow * fix: remove view button * fix: ci checks * fix: transitions * fix: transititon according to direction * fix: lint error * fix: loop holes * Feat/w3id log generation (#98) * chore: create basic log generation mechanism * chore: add hashing utility function * chore: rotation event * feat: genesis entry * feat: generalize hash function * feat: append entry * chore: basic tests * chore: add tests for rotation * feat: add malform throws * chore: add the right errors * chore: fix CI stuff * chore: add missing file * chore: fix event type enum * chore: format * feat: add proper error * chore: format * chore: remove eventtypes enum * chore: add new error for bad options * chore: add options tests * feat: add codec tests * fix: err handling && jsdoc * fix: run format * fix: remove unused import * fix: improve default error messages * fix: move redundant logic to function * fix: run format * fix: type shadow * fix: useless conversion/cast * fix: run format --------- Co-authored-by: Soham Jaiswal <[email protected]> * Feat/core id creation logic (#99) * feat: create w3id builder * fix: w3id builder * feat: add global config var for w3id * chore: add docs * chore: change rand to crng * chore: add ts type again * chore: fix lint and format * chore: add w3id tests github workflow * Feat/evault core (#100) * feat: migrate neo4j * chore: envelope logic works * chore: envelope logic works * feat: parsed envelopes search * feat: generics * feat: protocol * feat: jwt sigs in w3id * chore: stuff works * chore: tests for evault core * chore: format * chore: fix test * Feat/docker compose and docs (#101) * chore: stash dockerfile progress * fix: getEnvelopesByOntology thing * chore: fix tests * Update infrastructure/evault-core/src/protocol/vault-access-guard.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore: remove unused import * chore: remove package * chore: fix pnpm lock * chore: fix workflow * chore: fix port in dockerfile --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Feat/registry and evault provisioning (#106) * feat: evault provisioning * chore: fianlly fixed provisioner * feat: add logic for metadata in consul * feat: registry * chore: format * Feat/watchers logs (#114) * feat: alloc according to entropy and namespace * chore: move exports * chore: docs * feat: `whois` endpoint * feat: watcher endpoints * chore: fix format and lint * chore: fix tests * feat: web3 adapter (#115) * feat: tauri plugins setup (#97) * feat: tauri plugins setup * fix: add editorconfig * fix: add missing biome json * fix: run formatter * feat: biometry homework * feat: add pin set logic * feat: add biometric enabling logic * fix: sec controller qol * feat: stub user controller * fix: run format && lint * fix: sort imports * fix: import statement sort * feat: user controller * feat: pin flow * feat: biometrics unavailable * fix: pin input not working * feat: make checks pass * fix: scan works * fix: actions * feat: format on save * fix: coderabbit suggestions * chore: run format lint check * fix: scan on decline too * feat: documentation links (#117) * feat: bad namespace test (#116) * fix: layouts (#119) * fix: layouts * fix: Onboarding page scroll fixed * fix: page layout and prevent from scroll in all devices * fix: pages layout * chore: try to fix emulator * fix: units * fix: safezones for ios * fix: styling --------- Co-authored-by: Soham Jaiswal <[email protected]> * feat: setup-metagram (#121) * feat: setup-metagram * chore: tailwind css worked * feat: fonts added * feat: typography * fix: removed stories and fixed setup for icons lib * feat: icons and story file * fix: type of args in story * fix: lint errors * feat: colors added * feat: Button * fix: format and lint * fix: colors * fix: spinner * fix: code rebbit suggestions * fix: code rebbit suggestions * fix: paraglide removed * fix: lock file * feat: added user avatar. (#130) * feat: Button (#129) * feat: Button * fix: colors of variants * feat: Input (#131) * feat: Input * feat: styling added * fix: styling * fix: styling * fix: added a new story * fix: focus states * fix: input states * Feat/settings navigation button (#140) * feat: settings-navigation-button * fix: handler added * chore: another variant added * fix: as per given suggestion * feat: BottomNav (#132) * feat: BottomNav * fix: icons * feat: profile icons created * feat: handler added * feat: handler added * fix: correct tags * fix: as per given suggestion, bottomnav moved to fragments and also implemented on page * fix: handler * chore: routes added * feat: app transitions added * fix: direction of transition * fix: transition css * fix: directionable transition * fix: used button instead of label, and used page from state * feat: added post fragment. (#137) * feat: FileInput (#150) * feat: FileInput * fix: added icon * feat: cancel upload * fix: remove redundant code * fix: usage docs added and as per requirements ' * fix: moved to framents * feat: Toggle Switch (#143) * feat: Toggle Switch * feat: Toggle Switch * fix: as per our design * fix: as per our design * feat: Label (#146) * feat: Select (#148) * feat: Select * fix: as per our design * fix: code format and as per svelte 5 * fix: font-size * fix: font-size * fix: icon * feat: message-input (#144) * feat: message-input * fix: classes merge and a files as a prop * feat: variant added * feat: icon replaced * fix: as per code rabbit suggestions * fix: icon * fix: input file button * fix: as per suggestion * fix: classes * fix: no need of error and disabled classes * fix: input * feat: invalid inputs * feat: add number input storybook --------- Co-authored-by: Soham Jaiswal <[email protected]> * feat:Drawer (#152) * feat:Drawer * feat: Drawer with clickoutside * fix: settings * Feat/metagram header (#133) * feat: added metagram header primary linear gradient. * feat: added flash icon. * feat: added secondary state of header. * feat: added secondary state of header with menu. * chore: cleaned some code. * docs: updated component docs. --------- Co-authored-by: SoSweetHam <[email protected]> * Feat/metagram message (#135) * feat: added metagram message component. * feat: added both states of message component. * docs: added usage docs. * chore: exposed component from ui. * fix: component -> fragement --------- Co-authored-by: SoSweetHam <[email protected]> * feat: modal (#154) * fix: styling of modal * fix: modal props * fix: conflicting styles * fix: styles of drawer * fix: hide scrollbar in drawer * fix: padding * fix: used native method for dismissing of drawer * feat: Context-Menu (#156) * feat: Context-Menu * fix: name of component * fix: as per suggestion * fix: action menu position * fix: class * feat: responsive-setup (#157) * feat: responsive-setup * fix: background color * fix: added font fmaily * feat: responsive setup for mobile and desktop (#159) * feat: responsive setup for mobile and desktop * fix: width of sidebar and rightaside * fix: responsive layout * feat: SideBar * fix: added some finishing touches to sidebar and button * fix: prevent pages transition on desktop * fix: icon center * feat: settings page and icon added * feat/layout-enhancement (#168) * feat/infinite-scroll (#170) * feat/infinite-scroll * fix: aspect ratio of post * fix: bottom nav background * settings page (#169) * settings page layout done * settings page layout done * formt fix * format fix * format fix * routing for settings page fixed * settings page buttons * merge conflict * settings page tertiary pages * settings pages all done * settings pages unnecessary page deleted * requested changes done * requested changes done * Feat/comments pane (#171) * feat/comments-pane * fix: overflow and drawer swipe * feat: Comment fragment * fix: comments added * fix: comment fragment * feat: Comments reply * fix: message input position * fix: post type shifted to types file * fix: one level deep only * fix: drawer should only be render on mobile * fix: comments on layout page * fix: format * feat: messages (#174) * feat: messages * feat: ChatMessae * feat: messages by id * fix: messages page * fix: icon name * fix: hide bottom nav for chat * fix: header * fix: message bubble * fix: message bubble * fix: message bubble * fix: as per suggestion * fix: messaging * chore: change from nomad to k8s (#179) * chore: change from nomad to k8s * Update infrastructure/eid-wallet/src/routes/+layout.svelte Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * feat: uri extraction * feat: regitry stuff * feat: registry using local db * 📝 Add docstrings to `feat/switch-to-k8s` (#181) Docstrings generation was requested by @coodos. * #179 (comment) The following files were modified: * `infrastructure/evault-provisioner/src/templates/evault.nomad.ts` Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore: format --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: make scan qr page work again (#185) * feat: Discover Page (#180) * refactor/Post (#186) * refactor/Post * fix: format and lint * fix: added dots for gallery * fix: added dots for gallery * fix: added dots for gallery * fix: plural name * feat: splash-screen (#187) * Feat/evault provisioning via phone (#188) * feat: eid wallet basic ui for verification * chore: evault provisioning * feat: working wallet with provisioning * feat: restrict people on dupes * 📝 Add docstrings to `feat/evault-provisioning-via-phone` (#189) Docstrings generation was requested by @coodos. * #188 (comment) The following files were modified: * `infrastructure/eid-wallet/src/lib/utils/capitalize.ts` * `infrastructure/evault-provisioner/src/utils/hmac.ts` Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * feat: added uploaded post view component. (#182) * feat: added uploaded post view component. * fix: fixed the outline and color. * fix: moved function to external definition. * fix: fixed the restProps. * profile page (#178) * basic layout for profile page * fixed alt text * merge conflict * profile page for other users implemented * fix: profile pages and logics * fixed all the pages of profile * fixed all the pages of profile * fix: format --------- Co-authored-by: gourav <[email protected]> * Feat/radio input (#176) * feat: added a radio button custom * docs: added name option in docs. * chore: cleaned the unnecessary classes and variables for input type radio. * fix: moved input radio to its own component. * fix: keydown events added. * feat: added settings tile component. (#184) * feat: added settings tile component. * chore: fixed the naming convention * chore: renamed callback to onclick * fix: fixed the use of restProps * fix: fixed the unnecessary onclick expose. * fix: fixed the join function params. * Feat/textarea (#194) * chore: removed redundant radio * feat: added textarea. * fix: tabindex * fix: removed type inconsitency. * Feat/mobile upload flow (#193) * fix: header logic in secondary * fix: fixed the text in header in post * feat: trying some hack to get file image input. * feat: added image input on clicking the post bottom nav * chore: got rid of non-required code. * feat: added the logic to get the images from user on clicking post tab. * feat: added store. * feat: added correct conversion of files. * feat: added the correct display of image when uploading. * feat: added settings tile to the post page and fixed the settingsTile component type of currentStatus * feat: added hte correct header for the audience page. * fix: fixed the page transition not happening to audience page. * feat: added audience setting * feat: added store to audience. * chore: removed console log * feat: added post button. * feat: correct button placement * fix: horizontal scroll * fix: positioning of the post button. * fix: protecting post route when no image is selected. * fix: improved type saftey * feat: added memory helper function * feat: added memory cleanup. * Feat/social media platforms (#195) * chore: this part works now wooohooo * chore: stash progress * chore: stash progress * chore: init message data models * feat: different socials * chore: blabsy ready for redesign * Feat/social media platforms (#196) * chore: this part works now wooohooo * chore: stash progress * chore: stash progress * chore: init message data models * feat: different socials * chore: blabsy ready for redesign * chore: add other socials * Feat/blabsy add clone (#198) * chore: clone twitter * feat: custom auth with firebase using w3ds * chore: add chat * feat: chat works with sync * feat: twittex * feat: global schemas * feat: blabsy adapter * refactor: shift some text messages to work on blabsy (#199) * chore: stash progress * chore: stash adapters * chore: stash working extractor * feat: adapter working properly for translating to global with globalIDs * feat: adapter toGlobal pristine * chore: stash * feat: adapter working * chore: stash until global translation from pictique * feat: bi-directional sync prestino * feat: bidir adapters * chore: login redir * chore: swap out for sqlite3 * chore: swap out for sqlite3 * chore: server conf * feat: messages one way * feat: ready to deploy * feat: ready to deploy * chore: auth thing pictique * chore: set adapter to node * chore: fix auth token thingy * chore: auth thing * chore: fix auth token thingy * chore: port for blabsy * feat: provision stuff * feat: provision * feat: provision * feat: provision * chore: fix sync * feat: temporary id thing * chore: android * chore: fix mapper sync * chore: fallback * feat: add error handling on stores * feat: fix issue with posts * chore: fix retry loop * Fix/author details (#229) * fix: author-details * fix: owner-details * fix: author avatar * fix: auth user avatar * fix: error handling * fix: author image in bottom nav --------- Co-authored-by: Merul Dhiman <[email protected]> * Fix/change name (#228) * fix: corrected the name to blabsy * fix: extra shit comming. * fix: fixed the alignment of the display in more to look more like current twitter. * fix: avatars (#226) * fix: avatars * fix: avatar in follow request page * fix: images uploaded shown in user profile * fix: button size * fix: avatar --------- Co-authored-by: Merul Dhiman <[email protected]> * chore: temp fix sync * chore: stash progress * Fix/post context menu (#231) * fix: post-context-menu * fix: user id with post * fix: removed redundant code * fix: images * fix: profile data * fix: profile data * fix: image cover * fix: logout * Fix/wallet text (#234) * changed text as per the request and fixed styling on pages with useless scroll * added settings button in main page which went missing somehow * fix: consistent padding * chore: change tags * feat: change icon * feat: webhook dynamic registry * feat: make camera permission work properlyh * chore: removed all locking mechanism thing from platforms * feat: synchronization works perfectly * feat: fixed everything up * feat: changes * chore: stats fix * chore: fix pictique visual issues * chore: fix cosmetic name issue * feat: fix sync issue * chore: fix logical issue here * chore: add qrcode ename * feat: add packages (#235) * feat: add packages * feat: add sample funcs + docs * fixed the filled color on like icon for liked post (#239) * feat: fake passport name * feat: double confirmation * chore: fix pictique login issue * fix: make no user case redir to login * fix: issues with wallet --------- Co-authored-by: Soham Jaiswal <[email protected]> Co-authored-by: SoSweetHam <[email protected]> Co-authored-by: Gourav Saini <[email protected]> Co-authored-by: Bekiboo <[email protected]> Co-authored-by: Julien <[email protected]> Co-authored-by: Ananya Rana <[email protected]> Co-authored-by: Sergey <[email protected]> Co-authored-by: Julien Connault <[email protected]> Co-authored-by: Ananya Rana <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Sahil Garg <[email protected]> Co-authored-by: Sahil Garg <[email protected]>
4 participants
Description of change
Building Comments Pane
Issue Number
closes #166
Type of change
How the change has been tested
CI and Manual
Change checklist
Summary by CodeRabbit
New Features
Style