1871 app implement social buttons in singlecontentvue

api/src/db/seedingDocs/lang-eng.json

@@ -160,6 +160,14 @@
         "auth.sign_in": "Sign in",
         "auth.no_methods_available": "No authentication methods available. Please try again in a moment.",
         "singlecontent.listen": "Listen",
-        "singlecontent.loading": "Loading..."
+        "singlecontent.loading": "Loading...",
+        "singlecontent.shareTelegram": "Share on Telegram",
+        "singlecontent.shareWhatsApp": "Share on WhatsApp",
+        "singlecontent.share": "Share",
+        "singlecontent.shareX": "Share on X",
+        "singlecontent.shareReddit": "Share on Reddit",
+        "singlecontent.shareInstagram": "Share on Instagram",
+        "singlecontent.shareInstagramCopiedTitle": "Link copied",
+        "singlecontent.shareInstagramCopiedDescription": "Instagram doesn't support sharing links directly — paste it into a DM, Story or bio."
     }
 }

api/src/db/seedingDocs/lang-fra.json

@@ -160,6 +160,14 @@
         "auth.sign_in": "Se connecter",
         "auth.no_methods_available": "Aucun méthode d'authentification disponible. Veuillez réessayer dans un moment.",
         "singlecontent.listen": "Écoutez",
-        "singlecontent.loading": "Chargement..."
+        "singlecontent.loading": "Chargement...",
+        "singlecontent.shareTelegram": "Partager sur Telegram",
+        "singlecontent.shareWhatsApp": "Partager sur WhatsApp",
+        "singlecontent.share": "Partager",
+        "singlecontent.shareX": "Partager sur X",
+        "singlecontent.shareReddit": "Partager sur Reddit",
+        "singlecontent.shareInstagram": "Partager sur Instagram",
+        "singlecontent.shareInstagramCopiedTitle": "Lien copié",
+        "singlecontent.shareInstagramCopiedDescription": "Instagram ne permet pas de partager un lien directement — collez-le dans un DM, une story ou votre bio."
     }
 }

app/src/components/BasePage.vue

@@ -104,17 +104,13 @@ onUnmounted(() => {
                     </div>
                 </div>
 
-                <!-- Desktop notification: normal flow below the pinned chrome; pushes article down when present.
-                     [&>div]:mb-2 trims the banner's default mb-4 so the gap above the title matches the page-top gap. -->
+                <!-- Desktop notification: normal flow below the pinned chrome; pushes article down when present. -->
                 <div
                     v-if="desktopTopBar"
                     class="hidden justify-center lg:flex"
                 >
                     <div class="w-full lg:w-3/4 lg:max-w-3xl">
-                        <NotificationBannerManager
-                            v-if="showNotifications && notificationsReady"
-                            class="[&>div]:mb-2"
-                        />
+                        <NotificationBannerManager v-if="showNotifications && notificationsReady" />
                     </div>
                 </div>
 

app/src/components/common/LHighlightable.spec.ts

@@ -2,6 +2,8 @@ import "fake-indexeddb/auto";
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { mount } from "@vue/test-utils";
 import waitForExpect from "wait-for-expect";
+import { setActivePinia } from "pinia";
+import { createTestingPinia } from "@pinia/testing";
 import LHighlightable from "./LHighlightable.vue";
 import { db } from "luminary-shared";
 
@@ -13,16 +15,21 @@ vi.mock("vue", async (importOriginal) => {
     };
 });
 
-const mountHighlightable = (contentId = "test-content-1") =>
+const mountHighlightable = (
+    contentId = "test-content-1",
+    title = "Test Article",
+    copyright?: string,
+) =>
     mount(LHighlightable, {
-        props: { contentId },
+        props: { contentId, title, copyright },
         slots: { default: "<p>Some highlighted text content</p>" },
         attachTo: document.body,
     });
 
 describe("LHighlightable", () => {
     beforeEach(() => {
         vi.useFakeTimers();
+        setActivePinia(createTestingPinia());
     });
 
     afterEach(() => {
@@ -492,4 +499,186 @@ describe("LHighlightable", () => {
 
         wrapper.unmount();
     });
+
+    it("shows share targets and opens the correct URL for the selected text", async () => {
+        const wrapper = mountHighlightable("share-test", "Test Article");
+        // Let the async onMounted (restoreHighlights) finish before dispatching
+        // selectionchange — the listener isn't registered until it resolves.
+        await vi.advanceTimersByTimeAsync(50);
+        const prose = wrapper.find(".prose");
+
+        const textNode = prose.element.querySelector("p")!.firstChild!;
+        const range = document.createRange();
+        range.setStart(textNode, 0);
+        range.setEnd(textNode, 4); // "Some"
+
+        range.getBoundingClientRect = vi.fn(() => ({
+            left: 100,
+            top: 100,
+            right: 200,
+            bottom: 120,
+            width: 100,
+            height: 20,
+            x: 100,
+            y: 100,
+            toJSON: () => {},
+        }));
+
+        const mockSelection = {
+            isCollapsed: false,
+            rangeCount: 1,
+            getRangeAt: vi.fn(() => range),
+            toString: () => "Some",
+            removeAllRanges: vi.fn(),
+            anchorNode: textNode,
+        };
+        vi.spyOn(window, "getSelection").mockReturnValue(mockSelection as any);
+
+        document.dispatchEvent(new Event("selectionchange"));
+        vi.advanceTimersByTime(300);
+        await wrapper.vm.$nextTick();
+
+        const shareTrigger = document.body.querySelector(
+            '[data-test="highlightShareTrigger"]',
+        ) as HTMLElement;
+        expect(shareTrigger).toBeTruthy();
+        shareTrigger.click();
+        await wrapper.vm.$nextTick();
+
+        const telegramBtn = document.body.querySelector(
+            '[data-test="highlightShareTelegram"]',
+        ) as HTMLElement;
+        const whatsappBtn = document.body.querySelector('[data-test="highlightShareWhatsApp"]');
+        const xBtn = document.body.querySelector('[data-test="highlightShareX"]');
+        const redditBtn = document.body.querySelector('[data-test="highlightShareReddit"]');
+        const instagramBtn = document.body.querySelector('[data-test="highlightShareInstagram"]');
+        expect(telegramBtn).toBeTruthy();
+        expect(whatsappBtn).toBeTruthy();
+        expect(xBtn).toBeTruthy();
+        expect(redditBtn).toBeTruthy();
+        expect(instagramBtn).toBeTruthy();
+
+        const openSpy = vi.spyOn(window, "open").mockImplementation(() => null);
+        telegramBtn.click();
+        await wrapper.vm.$nextTick();
+
+        expect(openSpy).toHaveBeenCalledTimes(1);
+        const openedUrl = new URL(openSpy.mock.calls[0][0] as string);
+        expect(openedUrl.origin + openedUrl.pathname).toBe("https://t.me/share/url");
+        const openedText = openedUrl.searchParams.get("text");
+        expect(openedText).toContain("Some");
+        expect(openedText).toContain("Test Article");
+
+        // The popup fully closes after a share action, same as Highlight/Copy.
+        expect(document.body.querySelector(".fixed.z-50")).toBeFalsy();
+
+        wrapper.unmount();
+    });
+
+    it("copies the selection with its attribution, copyright and link", async () => {
+        const writeText = vi.fn().mockResolvedValue(undefined);
+        Object.assign(navigator, { clipboard: { writeText } });
+
+        const wrapper = mountHighlightable("copy-format-test", "Test Article", "© Test Publisher");
+        await vi.advanceTimersByTimeAsync(50);
+        const prose = wrapper.find(".prose");
+
+        const textNode = prose.element.querySelector("p")!.firstChild!;
+        const range = document.createRange();
+        range.setStart(textNode, 0);
+        range.setEnd(textNode, 4);
+        range.getBoundingClientRect = vi.fn(() => ({
+            left: 100,
+            top: 100,
+            right: 200,
+            bottom: 120,
+            width: 100,
+            height: 20,
+            x: 100,
+            y: 100,
+            toJSON: () => {},
+        }));
+
+        vi.spyOn(window, "getSelection").mockReturnValue({
+            isCollapsed: false,
+            rangeCount: 1,
+            getRangeAt: vi.fn(() => range),
+            toString: () => "Some",
+            removeAllRanges: vi.fn(),
+            anchorNode: textNode,
+        } as any);
+
+        document.dispatchEvent(new Event("selectionchange"));
+        vi.advanceTimersByTime(300);
+        await wrapper.vm.$nextTick();
+
+        (document.body.querySelector('[data-test="highlightCopy"]') as HTMLElement).click();
+        await wrapper.vm.$nextTick();
+
+        expect(writeText).toHaveBeenCalledWith(
+            [
+                "“Some”",
+                "",
+                "— from “Test Article”\n© Test Publisher",
+                "",
+                window.location.href,
+            ].join("\n"),
+        );
+
+        wrapper.unmount();
+    });
+
+    it("copies the selected text and article link when sharing to Instagram", async () => {
+        const writeText = vi.fn().mockResolvedValue(undefined);
+        Object.assign(navigator, { clipboard: { writeText } });
+
+        const wrapper = mountHighlightable("share-instagram-test", "Test Article");
+        await vi.advanceTimersByTimeAsync(50);
+        const prose = wrapper.find(".prose");
+
+        const textNode = prose.element.querySelector("p")!.firstChild!;
+        const range = document.createRange();
+        range.setStart(textNode, 0);
+        range.setEnd(textNode, 4);
+        range.getBoundingClientRect = vi.fn(() => ({
+            left: 100,
+            top: 100,
+            right: 200,
+            bottom: 120,
+            width: 100,
+            height: 20,
+            x: 100,
+            y: 100,
+            toJSON: () => {},
+        }));
+
+        const mockSelection = {
+            isCollapsed: false,
+            rangeCount: 1,
+            getRangeAt: vi.fn(() => range),
+            toString: () => "Some",
+            removeAllRanges: vi.fn(),
+            anchorNode: textNode,
+        };
+        vi.spyOn(window, "getSelection").mockReturnValue(mockSelection as any);
+
+        document.dispatchEvent(new Event("selectionchange"));
+        vi.advanceTimersByTime(300);
+        await wrapper.vm.$nextTick();
+
+        (document.body.querySelector('[data-test="highlightShareTrigger"]') as HTMLElement).click();
+        await wrapper.vm.$nextTick();
+
+        (
+            document.body.querySelector('[data-test="highlightShareInstagram"]') as HTMLElement
+        ).click();
+        await wrapper.vm.$nextTick();
+
+        expect(writeText).toHaveBeenCalledTimes(1);
+        const copiedText = writeText.mock.calls[0][0] as string;
+        expect(copiedText).toContain("Some");
+        expect(copiedText).toContain("Test Article");
+
+        wrapper.unmount();
+    });
 });