feat: Add share dialog with QR code and support auto-subscriptions

Introduces a new share dialog with QR code generation for saved searches.
Also adds handling for a `subscribe=true` URL parameter that prompts users to log in if needed, or automatically opens the subscription dialog.

Author: neilv-g

e2e/tests/notification-channels.spec.ts-snapshots/notification-channels-authenticated-chromium-linux.png

@@ -77,7 +77,7 @@ const saveButtonLocator = (page: Page) =>
     .getByTestId('saved-search-save-button')
     .getByRole('button', {name: 'Save'});
 const shareButtonLocator = (page: Page) =>
-  controlsLocator(page).getByLabel('Copy', {exact: true});
+  controlsLocator(page).getByLabel('Share', {exact: true});
 const bookmarkEmptyIconLocator = (page: Page) =>
   controlsLocator(page).getByRole('button', {name: 'Bookmark', exact: true});
 const bookmarkFilledIconLocator = (page: Page) =>
@@ -404,11 +404,19 @@ test.describe('Saved Searches on Overview Page', () => {
     // Click the share icon
     await shareButtonLocator(page).click();
 
+    // Wait for the share dialog to appear
+    const shareDialog = page.locator('webstatus-saved-search-share-dialog');
+    const dialog = shareDialog.locator('sl-dialog');
+    await expect(dialog).toBeVisible();
+
+    // Click the "Copy link" button inside the dialog
+    await dialog.locator('sl-button[variant="primary"]').click();
+
     // Verify clipboard content
     const clipboardText = await page.evaluate(() =>
       navigator.clipboard.readText(),
     );
-    expectUrlsEqual(clipboardText, page.url());
+    expectUrlsEqual(clipboardText, `${page.url()}&subscribe=true`);
   });
 
   test('Edit dialog opens automatically with edit_saved_search=true URL parameter', async ({

e2e/tests/notification-channels.spec.ts-snapshots/notification-channels-authenticated-dark-chromium-linux.png

@@ -202,7 +202,7 @@ export async function loginAsUser(
   const popupPromise = page.waitForEvent('popup');
   await page.goto('http://localhost:5555/');
   await waitForSidebarLoaded(page);
-  await page.getByText('Log in').click();
+  await page.getByRole('banner').getByText('Log in').click();
   const popup = await popupPromise;
 
   await popup.waitForLoadState();

e2e/tests/saved-searches.spec.ts

@@ -0,0 +1,98 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {fixture, html, expect, oneEvent} from '@open-wc/testing';
+import sinon from 'sinon';
+import {WebstatusLoginPromptDialog} from '../webstatus-login-prompt-dialog.js';
+import {
+  AuthConfig,
+  firebaseAuthContext,
+} from '../../contexts/firebase-auth-context.js';
+import {provide} from '@lit/context';
+import {LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+import '../webstatus-login-prompt-dialog.js';
+
+@customElement('test-auth-provider')
+class TestAuthProvider extends LitElement {
+  @property({type: Object})
+  @provide({context: firebaseAuthContext})
+  authConfig!: AuthConfig;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+describe('webstatus-login-prompt-dialog', () => {
+  let mockAuthConfig: AuthConfig;
+  let signInStub: sinon.SinonStub;
+
+  beforeEach(() => {
+    signInStub = sinon.stub().resolves();
+    mockAuthConfig = {
+      auth: {} as any,
+      provider: {} as any,
+      icon: 'github',
+      signIn: signInStub,
+    };
+  });
+
+  it('renders nothing when closed', async () => {
+    const el = await fixture<WebstatusLoginPromptDialog>(html`
+      <webstatus-login-prompt-dialog
+        .open=${false}
+      ></webstatus-login-prompt-dialog>
+    `);
+    const dialog = el.shadowRoot?.querySelector('sl-dialog');
+    expect(dialog?.open).to.be.false;
+  });
+
+  it('renders dialog when open', async () => {
+    const el = await fixture<WebstatusLoginPromptDialog>(html`
+      <webstatus-login-prompt-dialog
+        .open=${true}
+        .savedSearchName=${'My Search'}
+      ></webstatus-login-prompt-dialog>
+    `);
+    const dialog = el.shadowRoot?.querySelector('sl-dialog');
+    expect(dialog?.open).to.be.true;
+    expect(el.shadowRoot?.textContent).to.contain('My Search');
+  });
+
+  it('calls signIn on button click and dispatches login-success', async () => {
+    const wrapper = await fixture<TestAuthProvider>(html`
+      <test-auth-provider .authConfig=${mockAuthConfig}>
+        <webstatus-login-prompt-dialog
+          .open=${true}
+        ></webstatus-login-prompt-dialog>
+      </test-auth-provider>
+    `);
+    const el = wrapper.querySelector<WebstatusLoginPromptDialog>(
+      'webstatus-login-prompt-dialog',
+    )!;
+    const button = el.shadowRoot?.querySelector('sl-button[variant="primary"]');
+    expect(button).to.exist;
+
+    const eventPromise = oneEvent(el, 'login-success');
+    (button as HTMLElement).click();
+
+    await eventPromise;
+    expect(signInStub.calledOnce).to.be.true;
+    expect(el.open).to.be.false;
+  });
+});

e2e/tests/utils.ts

@@ -280,6 +280,20 @@ describe('WebstatusOverviewContent', () => {
 
       expect(openSpy).to.have.been.calledOnce;
     });
+    it('automatically opens the login prompt when subscribe param is true and user is logged out', async () => {
+      element.location = {search: '?subscribe=true'};
+      element.userContext = null;
+      element.savedSearch = mockUserSearch;
+
+      element.requestUpdate();
+      await element.updateComplete;
+
+      const promptDialog = element.shadowRoot?.querySelector(
+        'webstatus-login-prompt-dialog',
+      );
+      expect(promptDialog).to.exist;
+      expect((promptDialog as any).open).to.be.true;
+    });
   });
 
   describe('Events & Interactions', () => {

frontend/src/static/img/shoelace/assets/icons/link.svg

@@ -141,7 +141,9 @@ describe('WebstatusSavedSearchControls', () => {
   });
 
   it('does not render active search controls when no savedSearch is provided', () => {
-    const shareButton = element.shadowRoot!.querySelector('sl-copy-button');
+    const shareButton = element.shadowRoot!.querySelector(
+      'sl-icon-button[name="share"]',
+    );
     const bookmarkButton = element.shadowRoot!.querySelector(
       'sl-icon-button[name^="star"]',
     );
@@ -182,7 +184,9 @@ describe('WebstatusSavedSearchControls', () => {
       const saveButton = element.shadowRoot!.querySelector(
         'sl-icon-button[name="floppy"]',
       );
-      const shareButton = element.shadowRoot!.querySelector('sl-copy-button');
+      const shareButton = element.shadowRoot!.querySelector(
+        'sl-icon-button[name="share"]',
+      );
       const bookmarkButton = element.shadowRoot!.querySelector(
         'sl-icon-button[name="star"]',
       );
@@ -205,13 +209,33 @@ describe('WebstatusSavedSearchControls', () => {
       expect(deleteButton).to.not.exist;
     });
 
-    it('configures share button correctly', () => {
-      const copyButton = element.shadowRoot!.querySelector('sl-copy-button');
-      const expectedUrl = `http://localhost:8080/features?q=saved%3A${mockSavedSearchViewerNotBookmarked.id}`;
-      expect(copyButton).to.have.attribute('value', expectedUrl);
-      expect(formatOverviewPageUrlStub).to.have.been.calledWith(mockLocation, {
-        q: `saved:${mockSavedSearchViewerNotBookmarked.id}`,
-      });
+    it('opens modal when share button is clicked and renders QR code', async () => {
+      const shareButton = element.shadowRoot!.querySelector<SlIconButton>(
+        'sl-icon-button[name="share"]',
+      )!;
+      shareButton.click();
+      await element.updateComplete;
+
+      // Wait for dialog to appear in body
+      await waitUntil(
+        () =>
+          document.body.querySelector('webstatus-saved-search-share-dialog') !==
+          null,
+      );
+
+      const shareDialog = document.body.querySelector(
+        'webstatus-saved-search-share-dialog',
+      )!;
+      expect(shareDialog).to.exist;
+
+      const dialog = shareDialog.shadowRoot!.querySelector('sl-dialog');
+      expect(dialog).to.exist;
+
+      const qrCode = dialog!.querySelector('sl-qr-code');
+      expect(qrCode).to.exist;
+
+      const copyButton = dialog!.querySelector('sl-button[variant="primary"]');
+      expect(copyButton).to.exist;
     });
 
     it('calls handleBookmarkSavedSearch to bookmark when bookmark button is clicked', async () => {
@@ -332,7 +356,9 @@ describe('WebstatusSavedSearchControls', () => {
       const saveButton = element.shadowRoot!.querySelector(
         'sl-icon-button[name="floppy"]',
       );
-      const shareButton = element.shadowRoot!.querySelector('sl-copy-button');
+      const shareButton = element.shadowRoot!.querySelector(
+        'sl-icon-button[name="share"]',
+      );
       const bookmarkButton = element.shadowRoot!.querySelector(
         'sl-icon-button[name="star"]',
       );
@@ -446,7 +472,9 @@ describe('WebstatusSavedSearchControls', () => {
       const saveButton = element.shadowRoot!.querySelector(
         'sl-icon-button[name="floppy"]',
       );
-      const shareButton = element.shadowRoot!.querySelector('sl-copy-button');
+      const shareButton = element.shadowRoot!.querySelector(
+        'sl-icon-button[name="share"]',
+      );
       const bookmarkButton = element.shadowRoot!.querySelector(
         'sl-icon-button[name="star"]',
       );
@@ -469,10 +497,13 @@ describe('WebstatusSavedSearchControls', () => {
       expect(deleteButton).to.exist;
     });
 
-    it('configures share button correctly for owner', () => {
-      const copyButton = element.shadowRoot!.querySelector('sl-copy-button');
-      const expectedUrl = `http://localhost:8080/features?q=saved%3A${mockSavedSearchOwner.id}`;
-      expect(copyButton).to.have.attribute('value', expectedUrl);
+    it('configures share button correctly for owner', async () => {
+      const shareButton = element.shadowRoot!.querySelector<SlIconButton>(
+        'sl-icon-button[name="share"]',
+      )!;
+      shareButton.click();
+      await element.updateComplete;
+
       expect(formatOverviewPageUrlStub).to.have.been.calledWith(mockLocation, {
         q: `saved:${mockSavedSearchOwner.id}`,
       });

frontend/src/static/js/components/test/webstatus-login-prompt-dialog.test.ts

@@ -0,0 +1,115 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {fixture, html, expect} from '@open-wc/testing';
+import sinon from 'sinon';
+import {WebstatusSavedSearchShareDialog} from '../webstatus-saved-search-share-dialog.js';
+import {UserSavedSearch} from '../../utils/constants.js';
+import {Toast} from '../../utils/toast.js';
+
+import '../webstatus-saved-search-share-dialog.js';
+
+describe('webstatus-saved-search-share-dialog', () => {
+  let el: WebstatusSavedSearchShareDialog;
+  let toastStub: sinon.SinonStub;
+  let clipboardStub: sinon.SinonStub;
+
+  const mockSavedSearch: UserSavedSearch = {
+    id: 'test-id',
+    name: 'Test Search',
+    query: 'feature:css',
+    description: 'A test search',
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+  };
+
+  beforeEach(async () => {
+    toastStub = sinon.stub(Toast.prototype, 'toast').resolves();
+
+    if (!navigator.clipboard) {
+      Object.defineProperty(navigator, 'clipboard', {
+        value: {
+          writeText: async () => {},
+        },
+        writable: true,
+      });
+    }
+    clipboardStub = sinon.stub(navigator.clipboard, 'writeText').resolves();
+
+    el = await fixture<WebstatusSavedSearchShareDialog>(html`
+      <webstatus-saved-search-share-dialog></webstatus-saved-search-share-dialog>
+    `);
+  });
+
+  afterEach(() => {
+    sinon.restore();
+  });
+
+  it('computes effectiveUrl correctly', async () => {
+    el.shareableUrl = 'http://localhost:8080/features?q=saved:test-id';
+    await el.updateComplete;
+    expect(el.effectiveUrl).to.equal(
+      'http://localhost:8080/features?q=saved:test-id&subscribe=true',
+    );
+  });
+
+  it('computes effectiveUrl correctly when fallback is needed', async () => {
+    el.shareableUrl = 'http://localhost:8080/features';
+    await el.updateComplete;
+    expect(el.effectiveUrl).to.equal(
+      'http://localhost:8080/features?subscribe=true',
+    );
+  });
+
+  it('copies effectiveUrl to clipboard on button click', async () => {
+    el.shareableUrl = 'http://localhost:8080/features?q=saved:test-id';
+    await el.updateComplete;
+
+    await el.openWithContext(mockSavedSearch, el.shareableUrl);
+    await el.updateComplete;
+
+    const dialog = el.shadowRoot?.querySelector('sl-dialog');
+    expect(dialog).to.exist;
+
+    const copyButton = dialog?.querySelector<HTMLElement>(
+      'sl-button[variant="primary"]',
+    );
+    expect(copyButton).to.exist;
+
+    copyButton!.click();
+
+    expect(
+      clipboardStub.calledOnceWith(
+        'http://localhost:8080/features?q=saved:test-id&subscribe=true',
+      ),
+    ).to.be.true;
+    expect(toastStub.calledOnce).to.be.true;
+  });
+
+  it('renders QR code when open', async () => {
+    el.shareableUrl = 'http://localhost:8080/features?q=saved:test-id';
+    await el.updateComplete;
+
+    await el.openWithContext(mockSavedSearch, el.shareableUrl);
+    await el.updateComplete;
+
+    const qrCode = el.shadowRoot?.querySelector('sl-qr-code');
+    expect(qrCode).to.exist;
+    expect(qrCode?.getAttribute('value')).to.equal(
+      'http://localhost:8080/features?q=saved:test-id&subscribe=true',
+    );
+  });
+});