feat: add mobile-only Web Share API for native app integration #616
Conversation
- Restrict share button to mobile devices only using CSS media queries - Add robust feature detection with canShareFiles() function - Implement user feedback with "Shared\!" state and visual styling - Improve API validation using navigator.canShare() before sharing - Enhance error handling and code organization - Rename shareWithApp to shareResult for better consistency 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hello @yamadashy, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
Summary of Changes
Hello! Gemini here, providing a summary of this pull request. This PR introduces a new feature to the website: the ability to share the generated repomix output directly with native mobile applications using the Web Share API. The functionality is specifically designed to be available only on mobile devices that support the Web Share API, ensuring a better user experience and avoiding showing the button on unsupported platforms or desktop browsers. The changes include adding a new share button to the result viewer component, implementing the Web Share API logic in a utility function, and adding analytics tracking for share events.
Highlights
- Web Share API Integration: Adds functionality to share the generated output file (like
package.json) using the browser's native Web Share API, allowing users to easily send the output to other apps on their mobile device. - Mobile-Only Display: The new share button is styled to be visible only on mobile devices (screen width <= 768px) using CSS media queries, ensuring it doesn't clutter the UI on desktop.
- Feature Detection: Includes a check (
navigator.canShare) to ensure the Web Share API is supported by the browser and can handle sharing files before displaying the button. - Analytics Tracking: Adds a new analytics event (
SHARE_OUTPUT) to track when users successfully share the output.
Changelog
Click here to see the changelog
- website/client/components/Home/TryItResultContent.vue
- Imported
Shareicon fromlucide-vue-next. - Imported
canShareFilesandshareResultutility functions. - Added reactive state (
shared,canShare) for the share button. - Implemented
handleSharefunction to trigger the sharing process and update button state. - Added a new share button element, conditionally rendered based on
canShareand styled asmobile-only. - Added CSS rules for the
.action-button.sharedstate. - Added CSS rules to hide
.mobile-onlyelements by default and show them within a media query for max-width 768px.
- Imported
- website/client/components/utils/analytics.ts
- Added
SHARE_OUTPUTaction to theAnalyticsActionenum. - Added
trackShareOutputfunction to record share events with the output format.
- Added
- website/client/components/utils/resultViewer.ts
- Implemented the
shareResultasync function which usesnavigator.shareto share the output content as a file. - Included logic within
shareResultto create aBlobandFilefrom the content and check shareability usingnavigator.canShare. - Added
canShareFilesfunction to check for basic Web Share API support (navigator.canShareexistence and type).
- Implemented the
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Code output appears,
Share it now with native apps,
Mobile magic flows.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #616 +/- ##
=======================================
Coverage 90.24% 90.24%
=======================================
Files 96 96
Lines 4920 4920
Branches 1020 1020
=======================================
Hits 4440 4440
Misses 480 480 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Code Review
This pull request introduces a valuable feature by adding Web Share API functionality for mobile users, allowing them to easily share repomix output with native applications. The implementation is generally well-structured and the code is quite clear.
I've identified a few areas for improvement, primarily around the robustness of the feature detection for file sharing and the specificity of MIME types, which would enhance the user experience and reliability of the feature. The new analytics tracking and UI changes for mobile are well-implemented.
I'm following common best practices for Vue, TypeScript, and CSS in this review as no specific style guide was provided.
Summary of Findings
- Feature Detection for File Sharing:
canShareFiles()inresultViewer.tsshould more accurately detect if file sharing is supported, not just if thenavigator.canShareAPI exists. This is crucial for a good user experience, as the button might otherwise appear non-functional. - MIME Type Specificity: Using more specific MIME types (e.g.,
text/markdown,application/xml) inshareResultfor created Blobs/Files could improve compatibility and handling by native applications receiving the shared content. - User Feedback on Share Failure/Cancellation: The
handleSharefunction inTryItResultContent.vuecould provide more explicit feedback to the user if a share operation is initiated but does not complete successfully (e.g., user cancels the share dialog).
Merge Readiness
This pull request adds a great new feature. However, before merging, I recommend addressing the high severity issue related to the canShareFiles feature detection to ensure the share button only appears when file sharing is truly supported. The medium severity suggestions are also worth considering for an improved user experience and robustness.
As an AI, I am not authorized to approve pull requests. Please ensure further review and approval from authorized team members before merging.
There was a problem hiding this comment.
Pull Request Overview
Adds a mobile-only Web Share API button to share repomix outputs with native apps, including feature detection, analytics tracking, and responsive styling.
- Introduces
shareResultandcanShareFilesutilities for Web Share API integration - Updates analytics to track share events
- Adds a mobile-only share button in the result viewer component with responsive CSS
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| utils/resultViewer.ts | Implemented shareResult and canShareFiles methods |
| utils/analytics.ts | Added SHARE_OUTPUT action and trackShareOutput |
| Home/TryItResultContent.vue | Imported share utilities, added share button & styles |
Comments suppressed due to low confidence (1)
website/client/components/utils/resultViewer.ts:63
- No unit tests cover
shareResult's success and failure paths; consider adding tests for both cases (Web Share supported vs. unsupported, and error handling).
export async function shareResult(content: string, format: string, result: PackResult): Promise<boolean> {
Deploying repomix with
|
| Latest commit: |
b4aece2
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://c74c4cb1.repomix.pages.dev |
| Branch Preview URL: | https://feat-web-share.repomix.pages.dev |
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Replace wildcard pattern with function-based origin validation - Explicitly check for .repomix.pages.dev subdomain endings - Maintain support for existing allowed origins 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Test actual file sharing capability with dummy file in canShareFiles() - Use format-specific MIME types (text/markdown, application/xml) - Add fallback to text-only sharing when file sharing is not supported - Enhance compatibility across different platforms and browsers Addresses feedback from Gemini Code Assist and Copilot reviewers 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Change from file sharing to text content sharing for better compatibility - Simplify feature detection to check navigator.share existence only - Improve button layout with flex-wrap and proper line break on mobile - Update package.json lint scripts in client and server 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Constrain metadata panel to 400px height with overflow scroll on mobile to prevent excessive vertical space usage and improve user experience when viewing Top Files. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
|
@coderabbitai review |
There was a problem hiding this comment.
Pull Request Overview
Adds a mobile-only “Share” button using the Web Share API, along with feature detection, analytics tracking, and responsive display.
- Introduces
shareResultandcanShareFilesutilities and analytics event for sharing - Updates the CORS origin configuration to use a function-based whitelist
- Integrates the share button into the result viewer component and adds mobile-only styling
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| website/server/src/index.ts | Replaced static CORS origins with a function-based dynamic check |
| website/client/components/utils/resultViewer.ts | Added shareResult & canShareFiles helpers for Web Share API |
| website/client/components/utils/analytics.ts | Added SHARE_OUTPUT event and trackShareOutput method |
| website/client/components/Home/TryItResultContent.vue | Integrated share button, responsive “mobile-only” styles, and state |
| website/server/package.json | Added a lint script |
| website/client/package.json | Added a lint script |
| website/client/.tool-versions | Bumped Node.js from 22.14.0 to 22.15.1 |
Comments suppressed due to low confidence (2)
website/client/components/utils/resultViewer.ts:88
- [nitpick] The function name
canShareFilesimplies file-sharing support, but it actually checks for generic Web Share API availability. Consider renaming to something likesupportsWebShareorcanUseWebSharefor clarity.
export function canShareFiles(): boolean {
website/client/components/utils/resultViewer.ts:63
- The new
shareResultandcanShareFilesfunctions lack unit tests. Adding tests for both success and failure paths will help ensure consistent behavior across browsers.
export async function shareResult(content: string, format: string, result: PackResult): Promise<boolean> {
📝 WalkthroughWalkthroughThis update introduces several changes across both client and server components of the project. On the client side, a mobile-only "Share" button is added to the result viewer, enabling users to share content via the Web Share API, with supporting utility functions and analytics tracking. The ✨ 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
♻️ Duplicate comments (2)
website/client/components/utils/resultViewer.ts (1)
88-90:⚠️ Potential issueFix misleading function name and improve feature detection.
The function name
canShareFilesis misleading since it only checks for basic Web Share API support, not file sharing capability. The implementation only supports text sharing, not file sharing.Consider one of these solutions:
Option 1: Rename to reflect actual functionality
-export function canShareFiles(): boolean { +export function canShareText(): boolean { return navigator.share && typeof navigator.share === 'function'; }Option 2: Test actual file sharing capability as suggested in past reviews
export function canShareFiles(): boolean { - return navigator.share && typeof navigator.share === 'function'; + if (navigator.canShare && typeof navigator.canShare === 'function') { + try { + const dummyFile = new File([''], 'dummy.txt', { type: 'text/plain' }); + return navigator.canShare({ files: [dummyFile] }); + } catch { + return false; + } + } + return false; }website/client/components/Home/TryItResultContent.vue (1)
69-80: Consider enhanced user feedback for failed share attempts.The current implementation only provides feedback on successful shares. Consider adding feedback for failed attempts (user cancellation, errors) to improve the user experience.
const handleShare = async (event: Event) => { event.preventDefault(); event.stopPropagation(); const success = await shareResult(props.result.content, props.result.format, props.result); if (success) { shared.value = true; setTimeout(() => { shared.value = false; }, 2000); + } else { + // Consider showing a toast or temporary message for failed attempts + console.log('Share was cancelled or failed'); } };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
website/client/.tool-versions(1 hunks)website/client/components/Home/TryItResultContent.vue(8 hunks)website/client/components/utils/analytics.ts(2 hunks)website/client/components/utils/resultViewer.ts(1 hunks)website/client/package.json(1 hunks)website/server/package.json(1 hunks)website/server/src/index.ts(1 hunks)
🔇 Additional comments (9)
website/server/package.json (1)
7-7: LGTM! Standard TypeScript linting setup.The addition of the
tsc --noEmitlint script is a good practice for TypeScript type checking without compilation. This aligns with the similar addition in the client package.json for consistent tooling across the codebase.website/client/package.json (1)
8-8: LGTM! Consistent linting across client and server.The addition of the TypeScript lint script matches the server-side implementation, creating consistent tooling and development workflows across the codebase.
website/client/components/utils/analytics.ts (2)
35-35: LGTM! Consistent analytics action naming.The
SHARE_OUTPUTconstant follows the established naming convention and fits well within the output events category.
122-128: LGTM! Well-structured analytics tracking function.The
trackShareOutputfunction follows the same pattern as the existingtrackCopyOutputandtrackDownloadOutputfunctions, ensuring consistency in analytics implementation. The function correctly tracks the share event with the appropriate category, action, and format label.website/server/src/index.ts (1)
32-44: LGTM! Well-implemented dynamic CORS validation.The function-based origin validation properly supports:
- Local development (
http://localhost:5173)- Production domains (
https://repomix.com,https://api.repomix.com)- Cloudflare Pages preview deployments (
.repomix.pages.dev)The implementation correctly rejects invalid origins by returning
nulland maintains security best practices.website/client/components/utils/resultViewer.ts (1)
63-83: LGTM! Text sharing implementation is solid.The
shareResultfunction correctly implements text sharing via the Web Share API with proper error handling and analytics tracking.website/client/components/Home/TryItResultContent.vue (3)
5-5: LGTM! Clean integration of sharing functionality.The imports and reactive state setup properly integrate the new sharing feature with the existing component architecture.
Also applies to: 10-17, 30-31
170-179: LGTM! Well-implemented mobile-only share button.The conditional rendering and mobile-only styling are properly implemented. The line break with
flex-basis: 100%ensures the share button appears on its own line on mobile devices.
303-303: LGTM! Excellent responsive design implementation.The CSS changes properly:
- Enable flex wrapping for button layout
- Style the shared state consistently with the copied state
- Implement mobile-only visibility with appropriate media queries
- Maintain proper spacing and layout on both desktop and mobile
Also applies to: 334-338, 386-424
- Rename canShareFiles to canShareText for accuracy - Add console logging for failed share attempts - Improve function naming to reflect text-only sharing capability 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Improve screen reader support by adding descriptive aria-label to the mobile share button. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Merge duplicate metadata-panel styles and remove redundant mobile-only rule definitions for cleaner CSS structure. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Restore file sharing capability using Web Share API with File objects - Implement proper feature detection with navigator.canShare - Use appropriate MIME types for markdown, XML, and plain text files - Generate descriptive filenames based on repository and format 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Remove title and text properties from shareData to share only the file content, providing a cleaner sharing experience for mobile apps. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Apply Biome lint fix to use optional chaining instead of logical AND for safer navigation method access. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
There was a problem hiding this comment.
Pull Request Overview
This PR integrates mobile-only Web Share API functionality for sharing repomix output with native mobile apps.
- Adds a share button and associated utility functions for file sharing on mobile devices.
- Updates CORS configuration to support dynamic domain patterns and adds lint scripts for improved code quality.
- Extends analytics tracking to cover share events.
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| website/server/src/index.ts | Enhanced CORS origin handling for dynamic domain patterns. |
| website/server/package.json | Added a lint script to enforce type-checking. |
| website/client/package.json | Added a lint script for improved client-side consistency. |
| website/client/components/utils/resultViewer.ts | Introduced shareResult and canShareFiles functions to support sharing. |
| website/client/components/utils/analytics.ts | Added new analytics action and tracking for share events. |
| website/client/components/Home/TryItResultContent.vue | Added share button UI and mobile-only styling for responsive behavior. |
| website/client/.tool-versions | Updated Node version. |
Comments suppressed due to low confidence (1)
website/client/components/Home/TryItResultContent.vue:389
- The mobile-only style is defined twice in the stylesheet. Consider consolidating these definitions to improve maintainability.
.mobile-only { display: none; }
Summary
Test plan
🤖 Generated with Claude Code