feat(share): ✨ integrate Extension:UrlShortener with the share panel

When the wiki has Extension:UrlShortener installed, the share panel
gains two buttons below the copy-link field:

- "Copy short URL" copies a shortened URL to the clipboard in one
  click and caches it for the rest of the dialog session.
- "Show QR code" opens a focused QR view inside the same panel, with
  the short URL printed below as a fallback for anything that can't
  scan. Only shows when `$wgUrlShortenerEnableQrCode` is enabled.

The copy-link field and the social share tiles always carry the full
page URL — short URLs are reserved for the dedicated button and the
QR view, so the social services receive the URL their previews and
analytics expect.

Implementation notes:

- `useUrlShortener` composable wraps the shortenurl API. Caches the
  short URL and QR code separately because the API only shortens
  URLs above `$wgUrlShortenerQrCodeShortenLimit`, so a request for
  the QR can return only the QR data and no shortened URL.
- `useDialogResizeAnimation` writes the dialog's inline height from a
  ResizeObserver on the Vue root so view swaps (default ↔️ QR)
  animate. Skips zero-height writes to prevent the next open from
  animating from 0 → measured height, and defers enabling the
  `height` transition to the next animation frame so the first inline
  write doesn't animate either.
- Detection of the UrlShortener extension and the QR config flag is
  inlined into `ResourceLoaderHooks::getCitizenShareResourceLoaderConfig`
  and provided to the Vue app as `urlShortenerConfig`.
- Success-state recolour: the copy field and the short-URL button
  both flip to the Codex success palette while carrying the "copied"
  label, so the affirmation is visible without reading.
- Icon-style helpers extracted to `iconStyle.js` so they can be
  shared between the share tile grid and the new buttons.

Tests cover the composables (cache hit/miss, API quirks, failure
preserves cache), App.vue interaction paths, and the resize
composable's close/reopen guard. Docs updated in
`docs/src/customization/share.md` and `docs/src/config/extensions.md`.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: alistair3149

docs/src/config/extensions.md

@@ -54,6 +54,10 @@ Adds an Ask query mode to the command palette. Type `/smw:` to build structured
 
 Only needed if you use [TemplateStyles](https://www.mediawiki.org/wiki/Extension:TemplateStyles). Enables CSS variables in TemplateStyles, including Citizen's design tokens.
 
+### [UrlShortener](https://www.mediawiki.org/wiki/Extension:UrlShortener)
+
+Adds a "Copy short URL" button to the share panel for one-click clipboard copy, plus a QR code view when `$wgUrlShortenerEnableQrCode` is enabled. See [Share](../features/share.md#short-urls-and-qr-codes) for details.
+
 ## Gadget enhancements
 
 Some on-wiki gadgets pair particularly well with Citizen. Unlike extensions, gadgets are installed wiki-side (see [Extension:Gadgets](https://www.mediawiki.org/wiki/Extension:Gadgets)) and enabled per-user from `Special:Preferences`.

docs/src/features/share.md

@@ -17,6 +17,15 @@ When the panel opens, it always shows a copy-link field, so sharing always works
 
 Citizen doesn't ship with a built-in service list. The right services depend on your audience — a German federated wiki may want Diaspora; a corporate intranet may want none at all. You pick.
 
+## Short URLs and QR codes
+
+When [Extension:UrlShortener](https://www.mediawiki.org/wiki/Extension:UrlShortener) is installed, the share panel adds two buttons below the copy-link field:
+
+- **Copy short URL** — copies a shortened URL to the clipboard in one click. The result is reused for the rest of the session, so clicking again or reopening the panel is instant.
+- **Show QR code** — opens a focused QR view inside the same panel, with the short URL printed below as a fallback for anything that can't scan. Only appears when `$wgUrlShortenerEnableQrCode` is enabled.
+
+The copy-link field and the share tiles always use the full page URL — short URLs are reserved for the dedicated button and the QR view. If UrlShortener isn't installed, neither button appears and the rest of the panel works the same.
+
 ## Adding share services
 
 Create the page `MediaWiki:Citizen-share-services.json` on your wiki and paste a JSON array of service entries. Save the page, and the new services appear the next time anyone opens the panel.

i18n/en.json

@@ -37,6 +37,15 @@
 	"citizen-share": "Share this page",
 	"citizen-share-copy-link": "Copy link",
 	"citizen-share-copied": "URL copied to clipboard!",
+	"citizen-share-copy-short-url": "Copy short URL",
+	"citizen-share-short-url-copied": "Short URL copied!",
+	"citizen-share-short-url-error": "Couldn't generate a short URL.",
+	"citizen-share-show-qr": "Show QR code",
+	"citizen-share-qr-title": "QR code",
+	"citizen-share-qr-scan-hint": "Scan to open on another device",
+	"citizen-share-qr-error": "Couldn't generate a QR code.",
+	"citizen-share-qr-retry": "Try again",
+	"citizen-share-back": "Back",
 
 	"citizen-tagline": "-",
 	"citizen-tagline-ns-talk": "Discussion page of {{SUBJECTPAGENAME}}",

i18n/qqq.json

@@ -42,6 +42,15 @@
 	"citizen-share": "Label for button to share the current page",
 	"citizen-share-copy-link": "Label for button to copy the current URL to the clipboard",
 	"citizen-share-copied": "Message to notify users that the current URL is copied to the clipboard",
+	"citizen-share-copy-short-url": "Label for a button in the share panel that fetches a shortened URL from Extension:UrlShortener and writes it to the clipboard.",
+	"citizen-share-short-url-copied": "Confirmation label shown briefly in the same button after a successful short-URL copy.",
+	"citizen-share-short-url-error": "Toast notification shown when the share panel fails to fetch a short URL from Extension:UrlShortener (e.g. URL not in the allowed-domains list).",
+	"citizen-share-show-qr": "Label for a button in the share panel that switches the panel to a focused QR-code view.",
+	"citizen-share-qr-title": "Heading shown at the top of the QR-code view inside the share panel.",
+	"citizen-share-qr-scan-hint": "Helper text shown beside the QR code suggesting that the user scan it with another device (e.g. a phone).",
+	"citizen-share-qr-error": "Error message shown in the QR-code view when fetching the QR code from Extension:UrlShortener fails.",
+	"citizen-share-qr-retry": "Label on the retry button shown when the QR code fails to load.",
+	"citizen-share-back": "Accessible label / tooltip for the back-arrow button that returns the share panel from the QR view to the default share view.",
 	"citizen-tagline": "{{notranslate}}\n\nTagline for Citizen skin only",
 	"citizen-tagline-ns-talk": "Tagline for pages in talk namespace",
 	"citizen-tagline-ns-project": "Tagline for pages in project namespace",

includes/Hooks/ResourceLoaderHooks.php

@@ -73,7 +73,7 @@ public static function getCitizenCommandPaletteResourceLoaderConfig(
 	 * Passes config variables to skins.citizen.share ResourceLoader module.
 	 * @param RL\Context $context
 	 * @param Config $config
-	 * @return array
+	 * @return array{services: array, urlShortener: array{available: bool, qrAvailable: bool}}
 	 */
 	public static function getCitizenShareResourceLoaderConfig(
 		RL\Context $context,
@@ -88,7 +88,19 @@ public static function getCitizenShareResourceLoaderConfig(
 			$mwServices->getUrlUtils()
 		);
 
-		return $provider->getServiceOptions() ?? [];
+		$extensionRegistry = ExtensionRegistry::getInstance();
+		$urlShortenerLoaded = $extensionRegistry->isLoaded( 'UrlShortener' );
+		$qrAvailable = $urlShortenerLoaded
+			&& $config->has( 'UrlShortenerEnableQrCode' )
+			&& (bool)$config->get( 'UrlShortenerEnableQrCode' );
+
+		return [
+			'services' => $provider->getServiceOptions() ?? [],
+			'urlShortener' => [
+				'available' => $urlShortenerLoaded,
+				'qrAvailable' => $qrAvailable,
+			],
+		];
 	}
 
 	/**