Add page-level share button with referral ID (#1050)

Section anchor links already append `?rid=<referralId>` when copied, but
there was no way to share the page URL itself with a referral ID
attached.

## Changes

- **`useSiteShell.js`**
- Extracted `addReferralIdToUrl(url)` helper — eliminates duplicated
referral ID injection logic
- Extracted `writeToClipboard(url, successMessage?)` helper — shared by
both copy functions
- Added `shareCurrentPage()` — copies current page URL (no hash) with
referral ID as `?rid=...` if available; exposed in composable return

- **`PageNavigation.vue`**
- Added a centered `fa-solid fa-share-from-square` button between
prev/next arrows
  - Rendered only on content pages (`v-if="shell.isContentPage"`)
  - Calls `shareCurrentPage()` on click with a "Share Page" tooltip

- **`styles.css`**
  - Added `.tooltip-center` for the share button tooltip positioning
- Added `border`/`padding` reset for `<button>.arrow-btn` to match `<a>`
sibling appearance

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: BenjaminMichaelis <22186029+BenjaminMichaelis@users.noreply.github.com>

Author: Copilot

EssentialCSharp.Web/src/components/PageNavigation.vue

@@ -16,6 +16,16 @@ const shell = inject("shell");
                 ( or use the <i class="fa-solid fa-square-caret-left" /> key)
             </span>
         </div>
+        <div v-if="shell.isContentPage" class="turn-page-tooltip">
+            <button id="share-btn" type="button" class="arrow-btn" aria-label="Share this page" @click="shell.shareCurrentPage()">
+                <i class="fa-solid fa-share-from-square arrow-icon" />
+            </button>
+            <span class="turn-page-tooltip-text tooltip-center">
+                <b>Share Page</b>
+                <br />
+                Copies a link to this page
+            </span>
+        </div>
         <div class="turn-page-tooltip">
             <a v-if="shell.nextPageUrl" id="next-btn" :href="shell.nextPageUrl" class="arrow-btn">
                 <i class="fa fa-solid fa-arrow-right icon-light arrow-icon" />

EssentialCSharp.Web/src/composables/useSiteShell.js

@@ -89,44 +89,59 @@ export function useSiteShell() {
         return urlObject.toString();
     }
 
-    function copyToClipboard(copyText) {
-        let url;
-
-        if (copyText.includes("#")) {
-            url = `${window.location.origin}/${copyText}`;
-        }
-        else {
-            const currentUrl = window.location.href.split("#")[0];
-            url = `${currentUrl}#${copyText}`;
-        }
-
+    function addReferralIdToUrl(url) {
         const referralId = window.REFERRAL_ID;
         if (typeof referralId === "string" && referralId.trim().length > 0) {
-            url = addQueryParam(url, "rid", referralId);
+            return addQueryParam(url, "rid", referralId);
         }
+        return url;
+    }
 
+    function writeToClipboard(url, successMessage = "Copied to clipboard!") {
         navigator.clipboard
             .writeText(url)
             .then(
                 () => {
                     snackbarColor.value = "white";
-                    snackbarMessage.value = "Copied url to clipboard!";
+                    snackbarMessage.value = successMessage;
+                    if (snackbarTimeoutId !== null) {
+                        clearTimeout(snackbarTimeoutId);
+                    }
+                    snackbarTimeoutId = setTimeout(() => {
+                        snackbarMessage.value = null;
+                    }, 3000);
                 },
                 (error) => {
                     console.error("Could not copy text to clipboard: ", error);
                     snackbarColor.value = "red";
                     snackbarMessage.value = `Error: Could not copy text to clipboard: ${error}`;
+                    if (snackbarTimeoutId !== null) {
+                        clearTimeout(snackbarTimeoutId);
+                    }
+                    snackbarTimeoutId = setTimeout(() => {
+                        snackbarMessage.value = null;
+                    }, 3000);
                 }
             );
+    }
 
-        if (snackbarTimeoutId !== null) {
-            clearTimeout(snackbarTimeoutId);
-            snackbarMessage.value = null;
+    function copyToClipboard(copyText) {
+        let url;
+
+        if (copyText.includes("#")) {
+            url = `${window.location.origin}/${copyText}`;
         }
+        else {
+            const currentUrl = window.location.href.split("#")[0];
+            url = `${currentUrl}#${copyText}`;
+        }
+
+        writeToClipboard(addReferralIdToUrl(url), "Copied url to clipboard!");
+    }
 
-        snackbarTimeoutId = setTimeout(() => {
-            snackbarMessage.value = null;
-        }, 3000);
+    function shareCurrentPage() {
+        const url = window.location.href.split("#")[0];
+        writeToClipboard(addReferralIdToUrl(url), "Copied page url to clipboard!");
     }
 
     function goToPrevious() {
@@ -276,6 +291,7 @@ export function useSiteShell() {
         isContentPage,
         filteredTocData,
         copyToClipboard,
+        shareCurrentPage,
         goToPrevious,
         goToNext,
         openSearch,

EssentialCSharp.Web/wwwroot/css/styles.css

@@ -437,6 +437,17 @@ a:hover {
   right: 3rem;
 }
 
+.turn-page-tooltip .tooltip-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* Share button reset */
+.turn-page button.arrow-btn {
+  border: none;
+  padding: 0;
+}
+
 /* Chapter Navigation Sidebar Styles */
 
 .sidebar {