feat(website): Add real-time URL parameter updates for better UX#782
feat(website): Add real-time URL parameter updates for better UX#782
Conversation
Change URL parameter updates from Pack button press to real-time updates when users modify any option. This provides immediate feedback and makes URL sharing more intuitive. Changes: - Add watch for packOptions and inputUrl to trigger real-time URL updates - Extract URL update logic to updateUrlFromCurrentState() function - Remove URL update from handleSubmit (now handled by watch) - Show reset button immediately when values differ from defaults (not just after Pack) - Import watch from Vue for reactive monitoring This improves UX by providing instant URL updates for sharing and bookmarking configurations.
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the website's URL parameter functionality by implementing real-time updates when users modify any option, providing immediate feedback and improving the sharing experience. Users no longer need to execute packing to get a shareable URL with their current configuration.
- Extracts URL update logic into a reusable
updateUrlFromCurrentState()function - Adds real-time monitoring with Vue watchers for
packOptionsandinputUrl - Simplifies reset button behavior to appear immediately when values differ from defaults
You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.
WalkthroughImplements real-time URL query sync in TryIt.vue by introducing a watcher on packOptions and inputUrl, extracting URL construction into updateUrlFromCurrentState(), and removing URL updates from handleSubmit. Adjusts reset visibility to depend solely on non-default values and adds Vue’s watch import. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant TryIt as TryIt.vue
participant Watcher as Vue Watcher
participant Router
User->>TryIt: Edit inputUrl / packOptions
TryIt->>Watcher: reactive state changes
Watcher->>TryIt: triggers updateUrlFromCurrentState()
TryIt->>Router: push updated query params
User->>TryIt: Click Submit
TryIt->>TryIt: handleSubmit()
TryIt->>TryIt: submitRequest() (no URL update)
User->>TryIt: Click Reset
TryIt->>TryIt: reset to defaults
TryIt->>Watcher: state changes trigger
Watcher->>TryIt: updateUrlFromCurrentState()
TryIt->>Router: push defaulted query params
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches🧪 Generate unit tests
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. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
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!
This pull request significantly enhances the user experience of the website by implementing real-time updates to URL parameters. Previously, users had to explicitly trigger an action (like pressing 'Pack') for their configuration to be reflected in the URL, making sharing and bookmarking cumbersome. This change introduces immediate URL updates as users modify any option, ensuring the URL always reflects the current state. This not only provides instant visual feedback but also streamlines the process of sharing specific configurations and improves the responsiveness of the reset functionality.
Highlights
- Real-time URL Parameter Updates: The core change introduces real-time updates to the URL parameters as users interact with input fields and options. This is achieved by using Vue's
watchfunction to monitor changes inpackOptionsandinputUrl. - Code Refactoring and Reusability: The logic responsible for constructing and updating the URL parameters has been refactored into a dedicated, reusable function called
updateUrlFromCurrentState(). This improves code organization and maintainability. - Improved Reset Button UX: The visibility logic for the reset button has been simplified. It now appears immediately as soon as any option deviates from its default value, providing instant feedback to the user.
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 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. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.
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.
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. ↩
|
Claude encountered an error —— View job I'll analyze this and get back to you. |
There was a problem hiding this comment.
Code Review
This pull request introduces a great user experience improvement by updating the URL parameters in real-time as users modify options. The code changes are well-structured, with the logic for URL updates nicely extracted into a reusable function. The simplification of the reset button logic is also a welcome change.
I have one suggestion to improve the performance of the real-time updates by debouncing the watcher, which will prevent excessive function calls when a user is typing in the text fields. Overall, this is a solid contribution that enhances the usability of the website.
| watch( | ||
| [packOptions, inputUrl], | ||
| () => { | ||
| updateUrlFromCurrentState(); | ||
| }, | ||
| { deep: true }, | ||
| ); |
There was a problem hiding this comment.
The real-time URL update is a great UX improvement. However, the current implementation of watch with { deep: true } will trigger on every keystroke for the text input fields (inputUrl, includePatterns, ignorePatterns). This can lead to excessive calls to updateUrlFromCurrentState and history.replaceState, potentially causing performance issues or a sluggish feel.
To optimize this, I recommend debouncing the watcher's callback. This will ensure the URL is updated only after the user has stopped typing for a brief period.
You can achieve this by introducing a timer variable at the top of your <script setup> block (e.g., let debounceTimer: number;) and then modifying the watch handler as suggested.
watch(
[packOptions, inputUrl],
() => {
clearTimeout(debounceTimer);
debounceTimer = window.setTimeout(() => {
updateUrlFromCurrentState();
}, 300); // Debounce updates to avoid excessive calls on every keystroke
},
{ deep: true },
);
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
website/client/components/Home/TryIt.vue (3)
188-194: Avoid duplicate URL updates on resetResetting
packOptionsandinputUrlwill trigger the watcher and clear the URL naturally. The explicitupdateUrlParameters({})can cause redundant updates (and potentially extra history operations depending on implementation). Safe to remove.function handleReset() { resetOptions(); inputUrl.value = ''; - - // Clear URL parameters - updateUrlParameters({}); }
196-204: Coalesce frequent updates; considerflush: 'post'(and optional debounce) for smoother UXReal-time sync is great. When users type quickly or resetting toggles multiple options, the deep watcher can fire several times. Minor improvement: run the watcher after DOM updates and batch micro-changes to reduce churn.
Minimal change:
watch( [packOptions, inputUrl], () => { updateUrlFromCurrentState(); }, - { deep: true }, + { deep: true, flush: 'post' }, );If you observe heavy bursts (e.g., on paste), you can coalesce within an animation frame:
let rafId: number | null = null; watch([packOptions, inputUrl], () => { if (rafId !== null) cancelAnimationFrame(rafId); rafId = requestAnimationFrame(() => { updateUrlFromCurrentState(); rafId = null; }); }, { deep: true, flush: 'post' });
153-176: Normalize string values in URL sync and confirm replace behaviorThe
updateUrlParametersutility already clears existing repomix params and useshistory.replaceState, so it fully replaces prior query settings (no merge or history pollution).To avoid whitespace drift in your URL‐sync logic, trim all string values before comparing against defaults and before writing them:
• In
updateUrlFromCurrentState, add a helper:const normalize = (v: unknown) => (typeof v === 'string' ? v.trim() : v);• Compare against normalized defaults:
// Only add pack options that differ from defaults - for (const [key, value] of Object.entries(packOptions)) { - const defaultValue = DEFAULT_PACK_OPTIONS[key as keyof typeof DEFAULT_PACK_OPTIONS]; - if (value !== defaultValue) { - // For string values, also check if they're not empty - if (typeof value === 'string' && value.trim() === '' && defaultValue === '') { - continue; - } - urlParamsToUpdate[key] = value; - } - } + const normalize = (v: unknown) => (typeof v === 'string' ? v.trim() : v); + for (const [key, value] of Object.entries(packOptions)) { + const defaultValue = (DEFAULT_PACK_OPTIONS as Record<string, unknown>)[key]; + const normValue = normalize(value); + const normDefault = normalize(defaultValue); + if (normValue !== normDefault) { + // Skip empty strings matching default empty + if (typeof normValue === 'string' && normValue === '' && normDefault === '') { + continue; + } + urlParamsToUpdate[key] = normValue; + } + }This ensures trailing/leading spaces never spur unnecessary URL updates.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
website/client/components/Home/TryIt.vue(4 hunks)
⏰ 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). (7)
- GitHub Check: Build and run (macos-latest, 21.x)
- GitHub Check: Test (windows-latest, 23.x)
- GitHub Check: Test (windows-latest, 21.x)
- GitHub Check: Build and run (windows-latest, 21.x)
- GitHub Check: Build and run (windows-latest, 23.x)
- GitHub Check: Test (windows-latest, 22.x)
- GitHub Check: Build and run (windows-latest, 24.x)
🔇 Additional comments (2)
website/client/components/Home/TryIt.vue (2)
104-104: LGTM:watchimport aligns with the new real-time URL syncImporting
watchis necessary for the new reactive behavior and is used correctly below.
178-181: LGTM:handleSubmitfocuses solely on submittingDecoupling URL updates from submit is consistent with the new watcher-based approach.
This PR enhances the website's URL parameter functionality by adding real-time updates when users modify any option, providing immediate feedback and making URL sharing more intuitive.
Problem
Previously, URL parameters were only updated when the Pack button was pressed. This meant users had to execute packing to get a shareable URL with their current configuration, which was not ideal for quick sharing or bookmarking.
Solution
Implemented real-time URL parameter updates that trigger immediately when users change any option:
watchforpackOptionsandinputUrlwith deep watchingupdateUrlFromCurrentState()functionChanges
website/client/components/Home/TryIt.vue:watch([packOptions, inputUrl], ...)for real-time URL updatesupdateUrlFromCurrentState()function for reusable URL update logichandleSubmit()(now handled automatically by watch)watchfrom Vue for reactive monitoringUser Experience Improvements
Testing
This change improves UX while maintaining all existing functionality:
Checklist
npm run testnpm run lint