webui: add URL parameters for diff view from/to commit selection
Enable direct linking to specific diff ranges by adding URL parameters that
sync with the diff range picker controls, allowing users to bookmark and
share specific diff views.
Problem Analysis:
Users couldn't link directly to specific diff ranges in the sketch diff view.
The from/to commit selectors would reset to defaults on page load, making it
impossible to bookmark or share links to specific commit comparisons. This
created friction when collaborating or returning to specific diff views.
Implementation Changes:
1. URL Parameter Synchronization (sketch-diff-range-picker.ts):
- Added updateUrlParams() to write from/to/commit parameters to URL
- Integrated URL updates into dispatchRangeEvent() for automatic sync
- Used history.replaceState() to update URL without page reload
- Clear unused parameters when switching between range/single modes
2. URL Parameter Initialization:
- Added initializeFromUrlParams() to read URL parameters on load
- Parse 'from'/'to' parameters for range mode initialization
- Parse 'commit' parameter for single commit mode initialization
- Return flag indicating successful URL-based initialization
3. Load Flow Enhancement:
- Modified loadCommits() to check URL parameters before setting defaults
- Skip default commit selection when URL parameters are present
- Always dispatch range event to ensure diff view updates correctly
4. Browser Navigation Support:
- Added popstate event listener for browser back/forward navigation
- Implemented handlePopState() to re-initialize from URL parameters
- Force component re-render and event dispatch on navigation
5. Mode Switching Improvements:
- Enhanced setRangeType() with better default handling
- Auto-populate missing commits when switching between modes
- Maintain proper URL state during mode transitions
Technical Details:
- URL parameters: 'from', 'to' for range mode; 'commit' for single mode
- Empty 'to' parameter represents uncommitted changes (working directory)
- Parameters removed from URL when switching to incompatible modes
- Browser history updated without triggering page reloads
- Component lifecycle properly manages event listeners
URL Format Examples:
- Range mode: ?view=diff2&from=abc123&to=def456
- Uncommitted: ?view=diff2&from=abc123 (no 'to' parameter)
- Single commit: ?view=diff2&commit=abc123
Benefits:
- Direct linking to specific diff ranges via URL
- Bookmarkable diff views for easy return navigation
- Shareable links for collaboration and code review
- Browser back/forward navigation works correctly
- URL reflects current diff state at all times
- Seamless integration with existing diff view functionality
Testing:
- Verified URL updates when changing from/to commit selectors
- Confirmed URL initialization on page load with parameters
- Tested browser back/forward navigation updates UI correctly
- Validated mode switching (range ↔ single) updates URL appropriately
- Ensured uncommitted changes mode removes 'to' parameter
- Confirmed sharing URLs loads correct diff view state
This enhancement enables direct linking and improved navigation for the
sketch diff view while maintaining all existing functionality and providing
seamless URL-based state management.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: sbf02a6a8bb4db673k
diff --git a/webui/src/web-components/sketch-diff-range-picker.ts b/webui/src/web-components/sketch-diff-range-picker.ts
index ca839df..38d29b0 100644
--- a/webui/src/web-components/sketch-diff-range-picker.ts
+++ b/webui/src/web-components/sketch-diff-range-picker.ts
@@ -170,6 +170,29 @@
setTimeout(() => this.loadCommits(), 0); // Give time for provider initialization
});
}
+
+ // Listen for popstate events to handle browser back/forward navigation
+ window.addEventListener('popstate', this.handlePopState.bind(this));
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ window.removeEventListener('popstate', this.handlePopState.bind(this));
+ }
+
+ /**
+ * Handle browser back/forward navigation
+ */
+ private handlePopState() {
+ // Re-initialize from URL parameters when user navigates
+ if (this.commits.length > 0) {
+ const initializedFromUrl = this.initializeFromUrlParams();
+ if (initializedFromUrl) {
+ // Force re-render and dispatch event
+ this.requestUpdate();
+ this.dispatchRangeEvent();
+ }
+ }
}
render() {
@@ -329,8 +352,11 @@
// Load commit history
this.commits = await this.gitService.getCommitHistory(baseCommitRef);
- // Set default selections
- if (this.commits.length > 0) {
+ // Check if we should initialize from URL parameters first
+ const initializedFromUrl = this.initializeFromUrlParams();
+
+ // Set default selections only if not initialized from URL
+ if (this.commits.length > 0 && !initializedFromUrl) {
// For range, default is base to HEAD
// TODO: is sketch-base right in the unsafe context, where it's sketch-base-...
// should this be startswith?
@@ -346,10 +372,10 @@
// For single, default to HEAD
this.singleCommit = this.commits[0].hash;
-
- // Dispatch initial range event
- this.dispatchRangeEvent();
}
+
+ // Always dispatch range event to ensure diff view is updated
+ this.dispatchRangeEvent();
} catch (error) {
console.error("Error loading commits:", error);
this.error = `Error loading commits: ${error.message}`;
@@ -363,6 +389,31 @@
*/
setRangeType(type: "range" | "single") {
this.rangeType = type;
+
+ // If switching to range mode and we don't have valid commits set,
+ // initialize with sensible defaults
+ if (type === 'range' && (!this.fromCommit || !this.toCommit === undefined)) {
+ if (this.commits.length > 0) {
+ const baseCommit = this.commits.find(
+ (c) => c.refs && c.refs.some((ref) => ref.includes("sketch-base")),
+ );
+ if (!this.fromCommit) {
+ this.fromCommit = baseCommit
+ ? baseCommit.hash
+ : this.commits[this.commits.length - 1].hash;
+ }
+ if (this.toCommit === undefined) {
+ this.toCommit = ''; // Default to uncommitted changes
+ }
+ }
+ }
+
+ // If switching to single mode and we don't have a valid commit set,
+ // initialize with HEAD
+ if (type === 'single' && !this.singleCommit && this.commits.length > 0) {
+ this.singleCommit = this.commits[0].hash;
+ }
+
this.dispatchRangeEvent();
}
@@ -401,7 +452,15 @@
}
/**
- * Dispatch range change event
+ * Validate that a commit hash exists in the loaded commits
+ */
+ private isValidCommitHash(hash: string): boolean {
+ if (!hash || hash.trim() === '') return true; // Empty is valid (uncommitted changes)
+ return this.commits.some(commit => commit.hash.startsWith(hash) || commit.hash === hash);
+ }
+
+ /**
+ * Dispatch range change event and update URL parameters
*/
dispatchRangeEvent() {
const range: DiffRange =
@@ -409,6 +468,9 @@
? { type: "range", from: this.fromCommit, to: this.toCommit }
: { type: "single", commit: this.singleCommit };
+ // Update URL parameters
+ this.updateUrlParams(range);
+
const event = new CustomEvent("range-change", {
detail: { range },
bubbles: true,
@@ -417,6 +479,71 @@
this.dispatchEvent(event);
}
+
+ /**
+ * Update URL parameters for from and to commits
+ */
+ private updateUrlParams(range: DiffRange) {
+ const url = new URL(window.location.href);
+
+ // Remove existing range parameters
+ url.searchParams.delete('from');
+ url.searchParams.delete('to');
+ url.searchParams.delete('commit');
+
+ if (range.type === 'range') {
+ // Add from parameter if not empty
+ if (range.from && range.from.trim() !== '') {
+ url.searchParams.set('from', range.from);
+ }
+ // Add to parameter if not empty (empty string means uncommitted changes)
+ if (range.to && range.to.trim() !== '') {
+ url.searchParams.set('to', range.to);
+ }
+ } else {
+ // Single commit mode
+ if (range.commit && range.commit.trim() !== '') {
+ url.searchParams.set('commit', range.commit);
+ }
+ }
+
+ // Update the browser history without reloading the page
+ window.history.replaceState(window.history.state, '', url.toString());
+ }
+
+ /**
+ * Initialize from URL parameters if available
+ */
+ private initializeFromUrlParams() {
+ const url = new URL(window.location.href);
+ const fromParam = url.searchParams.get('from');
+ const toParam = url.searchParams.get('to');
+ const commitParam = url.searchParams.get('commit');
+
+ // If commit parameter is present, switch to single commit mode
+ if (commitParam) {
+ this.rangeType = 'single';
+ this.singleCommit = commitParam;
+ return true; // Indicate that we initialized from URL
+ }
+
+ // If from or to parameters are present, use range mode
+ if (fromParam || toParam) {
+ this.rangeType = 'range';
+ if (fromParam) {
+ this.fromCommit = fromParam;
+ }
+ if (toParam) {
+ this.toCommit = toParam;
+ } else {
+ // If no 'to' param, default to uncommitted changes (empty string)
+ this.toCommit = '';
+ }
+ return true; // Indicate that we initialized from URL
+ }
+
+ return false; // No URL params found
+ }
}
declare global {