From 8a8509a0f3444597fa449ec0536f25fa44a38166 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Sun, 17 May 2026 21:10:26 +0200
Subject: [PATCH] feat(notes): surface GitHub auth-expired state on freshness
 badge

Show a cloud-lock badge with a re-sign-in tooltip when the freshness
check resolves to unauthorized, and toast on badge click so the user
gets explicit feedback instead of a silent retry-loop.
---
 src/components/NoteFreshnessBadge.vue | 27 +++++++++++++++++++++++++++
 src/components/StackedNote.vue        |  7 +++++++
 2 files changed, 34 insertions(+)

diff --git a/src/components/NoteFreshnessBadge.vue b/src/components/NoteFreshnessBadge.vue
index 40d582b..415e975 100644
--- a/src/components/NoteFreshnessBadge.vue
+++ b/src/components/NoteFreshnessBadge.vue
@@ -23,6 +23,8 @@ const label = computed(() => {
       return "Outdated"
     case "offline":
       return "Can’t reach GitHub"
+    case "unauthorized":
+      return "Sign in to GitHub"
     case "unknown":
     default:
       return "Not checked"
@@ -39,6 +41,8 @@ const tooltip = computed(() => {
       return "GitHub has a newer version. Click to pull latest."
     case "offline":
       return "Could not reach GitHub. Click to retry."
+    case "unauthorized":
+      return "GitHub auth expired. Sign in again, then click to retry."
     case "checking":
       return "Checking against GitHub…"
     case "unknown":
@@ -133,6 +137,25 @@ const isBusy = computed(() => props.status === "checking")
     >
       <path d="M12 3a9 9 0 1 0 9 9" />
     </svg>
+    <svg
+      v-else-if="status === 'unauthorized'"
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon icon-tabler icon-tabler-cloud-lock"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.75"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path
+        d="M11 18.004h-4.343c-2.572 -.004 -4.657 -2.011 -4.657 -4.487c0 -2.475 2.085 -4.482 4.657 -4.482c.393 -1.762 1.794 -3.2 3.675 -3.773c1.88 -.572 3.956 -.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.18 0 2.227 .593 2.85 1.5"
+      />
+      <path d="M15 16m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
+      <path d="M18 14a2 2 0 0 1 2 2v0h-4v0a2 2 0 0 1 2 -2z" />
+    </svg>
     <svg
       v-else
       xmlns="http://www.w3.org/2000/svg"
@@ -191,6 +214,10 @@ const isBusy = computed(() => props.status === "checking")
   color: var(--color-error, hsl(0, 70%, 45%));
 }
 
+.state-unauthorized {
+  color: var(--color-warning, hsl(35, 90%, 45%));
+}
+
 .state-unknown,
 .state-checking {
   color: var(--color-base-content);
diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index efede40..e2b18e6 100644
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -228,6 +228,9 @@ const onBadgeClick = async () => {
   try {
     if (freshnessStatus.value !== "outdated") {
       await checkFreshness()
+      if (freshnessStatus.value === "unauthorized") {
+        errorMessage("🔐 GitHub auth expired — please sign in again")
+      }
       return
     }
 
@@ -241,6 +244,10 @@ const onBadgeClick = async () => {
     if (newRaw !== null) {
       rawContent.value = newRaw
       initialRawContent.value = newRaw
+      return
+    }
+    if (freshnessStatus.value === "unauthorized") {
+      errorMessage("🔐 GitHub auth expired — please sign in again")
     }
   } catch (error) {
     console.error("freshness badge click failed", error)