From 1df54131f4e7923b894d24e366b8177fd65e414c Mon Sep 17 00:00:00 2001
From: Marien Fressinaud <marien+dev@fressinaud.fr>
Date: Thu, 30 Oct 2025 16:30:09 +0100
Subject: [PATCH] feat: Allow to refresh extension if tab URL changed

---
 src/i18n.js                |  4 ++++
 src/screens/LinkScreen.vue | 25 +++++++++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/src/i18n.js b/src/i18n.js
index 57668bb..07d6208 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -44,6 +44,8 @@ export const i18n = createI18n({
             "link.loading": "Loading the link…",
             "link.mark_as_read": "Mark as read",
             "link.mark_as_read_later": "Read later",
+            "link.refresh": "Refresh",
+            "link.tab_unsync": "This link does not correspond to the current tab.",
             "loading.in_progress": "Loading in progress…",
             "login.email.label": "Email address",
             "login.errors.server_error":
@@ -120,6 +122,8 @@ export const i18n = createI18n({
             "link.loading": "Chargement du lien…",
             "link.mark_as_read": "Marquer comme lu",
             "link.mark_as_read_later": "Lire plus tard",
+            "link.refresh": "Actualiser",
+            "link.tab_unsync": "Ce lien ne correspond pas à l’onglet courant.",
             "loading.in_progress": "Chargement en cours…",
             "login.email.label": "Adresse courriel",
             "login.errors.server_error":
diff --git a/src/screens/LinkScreen.vue b/src/screens/LinkScreen.vue
index c792c26..8422e5d 100644
--- a/src/screens/LinkScreen.vue
+++ b/src/screens/LinkScreen.vue
@@ -28,6 +28,19 @@
                     </div>
                 </div>
 
+                <div v-if="link.url != currentTabUrl" class="panel panel--rounded panel--grey cols cols--always cols--gap-small cols--center">
+                    <p class="col--extend">
+                        {{ t("link.tab_unsync") }}
+                    </p>
+
+                    <div>
+                        <button type="button" @click="refreshForCurrentTab">
+                            <Icon name="sync" />
+                            {{ t("link.refresh") }}
+                        </button>
+                    </div>
+                </div>
+
                 <div class="cols cols--always cols--center cols--gap-small">
                     <div class="col--extend cols cols--always cols--center cols--gap-small">
                         <button v-if="!link.isRead || link.isReadLater" class="button--icon" @click.prevent="markAsRead">
@@ -110,6 +123,7 @@ const { t, locale } = useI18n();
 locale.value = store.locale;
 
 const link = reactive(new Link());
+const currentTabUrl = ref("");
 const ready = ref(false);
 const displayCollections = ref(false);
 const alert = ref({
@@ -133,6 +147,8 @@ async function getCurrentTab() {
 }
 
 async function refreshForCurrentTab() {
+    ready.value = false;
+
     const url = (await getCurrentTab()).url;
 
     if (!url.startsWith("http://") && !url.startsWith("https://")) {
@@ -170,6 +186,10 @@ async function refreshForCurrentTab() {
         });
 }
 
+async function refreshCurrentTabUrl() {
+    currentTabUrl.value = (await getCurrentTab()).url;
+}
+
 async function markAsRead() {
     api.markLinkAsRead(link)
         .then(() => {
@@ -197,4 +217,9 @@ async function markAsReadLater() {
 }
 
 onMounted(refreshForCurrentTab);
+onMounted(refreshCurrentTabUrl);
+
+browser.tabs.onUpdated.addListener(refreshCurrentTabUrl);
+browser.tabs.onActivated.addListener(refreshCurrentTabUrl);
+browser.windows.onFocusChanged.addListener(refreshCurrentTabUrl);
 </script>