From 01bb4b8c70241c0870a3653cb23ac832321ccc7e Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Mon, 25 May 2026 21:17:38 +0200
Subject: [PATCH 01/11] refactor(github): extract putRaw and add
 uploadBinaryFile

---
 src/hooks/useGitHubContent.hook.ts | 64 +++++++++++++++++++++++++-----
 1 file changed, 54 insertions(+), 10 deletions(-)

diff --git a/src/hooks/useGitHubContent.hook.ts b/src/hooks/useGitHubContent.hook.ts
index a0e415d..8080b79 100644
--- a/src/hooks/useGitHubContent.hook.ts
+++ b/src/hooks/useGitHubContent.hook.ts
@@ -37,14 +37,22 @@ export const useGitHubContent = ({
     }
   }
 
-  const putFile = async ({
-    content,
+  const putRaw = async ({
+    contentBase64,
     path,
-    sha
+    sha,
+    message,
+    successMessage,
+    conflictMessage,
+    failureMessage
   }: {
-    content: string
+    contentBase64: string
     path: string
     sha?: string
+    message: string
+    successMessage: string
+    conflictMessage: string
+    failureMessage: string
   }): Promise<{ sha: string | null; conflict: boolean }> => {
     try {
       const octokit = await getOctokit()
@@ -55,28 +63,63 @@ export const useGitHubContent = ({
           owner: user,
           repo,
           path,
-          message: `Updating ${path} from Remanso`,
-          content: encodeUTF8ToBase64(content),
+          message,
+          content: contentBase64,
           sha
         }
       )
 
-      confirmMessage("✅ Note saved")
+      confirmMessage(successMessage)
 
       return { sha: response?.data.content?.sha ?? null, conflict: false }
     } catch (error) {
       const status = (error as { status?: number })?.status
       if (status && isConflictStatus(status)) {
-        errorMessage("⚠ Conflict: this note changed on GitHub")
+        errorMessage(conflictMessage)
         console.warn(error)
         return { sha: null, conflict: true }
       }
-      errorMessage("❌ Note could not be saved")
+      errorMessage(failureMessage)
       console.warn(error)
       return { sha: null, conflict: false }
     }
   }
 
+  const putFile = async ({
+    content,
+    path,
+    sha
+  }: {
+    content: string
+    path: string
+    sha?: string
+  }): Promise<{ sha: string | null; conflict: boolean }> =>
+    putRaw({
+      contentBase64: encodeUTF8ToBase64(content),
+      path,
+      sha,
+      message: `Updating ${path} from Remanso`,
+      successMessage: "✅ Note saved",
+      conflictMessage: "⚠ Conflict: this note changed on GitHub",
+      failureMessage: "❌ Note could not be saved"
+    })
+
+  const uploadBinaryFile = async ({
+    base64,
+    path
+  }: {
+    base64: string
+    path: string
+  }): Promise<{ sha: string | null; conflict: boolean }> =>
+    putRaw({
+      contentBase64: base64,
+      path,
+      message: `Uploading ${path} from Remanso`,
+      successMessage: "✅ Image uploaded",
+      conflictMessage: "⚠ A file already exists at this path on GitHub",
+      failureMessage: "❌ Image could not be uploaded"
+    })
+
   return {
     fetchLatestSha,
     updateFile: async (props: {
@@ -85,6 +128,7 @@ export const useGitHubContent = ({
       sha: string
     }) => putFile(props),
     createFile: async (props: { content: string; path: string }) =>
-      putFile(props)
+      putFile(props),
+    uploadBinaryFile
   }
 }

From 0b3411626c18371eca18957535c4e4a24b79cde9 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Mon, 25 May 2026 21:17:42 +0200
Subject: [PATCH 02/11] feat(utils): add uniqueFilename helper with -2
 collision suffix

---
 src/utils/uniqueFilename.spec.ts | 71 ++++++++++++++++++++++++++++++++
 src/utils/uniqueFilename.ts      | 21 ++++++++++
 2 files changed, 92 insertions(+)
 create mode 100644 src/utils/uniqueFilename.spec.ts
 create mode 100644 src/utils/uniqueFilename.ts

diff --git a/src/utils/uniqueFilename.spec.ts b/src/utils/uniqueFilename.spec.ts
new file mode 100644
index 0000000..cd0c5e2
--- /dev/null
+++ b/src/utils/uniqueFilename.spec.ts
@@ -0,0 +1,71 @@
+import { describe, expect, it } from "vitest"
+
+import { uniqueFilename } from "./uniqueFilename"
+
+describe("uniqueFilename", () => {
+  it("returns basename.ext when nothing collides", () => {
+    expect(
+      uniqueFilename({
+        basename: "myfile",
+        extension: ".png",
+        existingPaths: ["docs/notes/myfile.md"],
+        directory: "docs/notes"
+      })
+    ).toEqual("myfile.png")
+  })
+
+  it("appends -2 on first collision (skips -1)", () => {
+    expect(
+      uniqueFilename({
+        basename: "myfile",
+        extension: ".png",
+        existingPaths: ["docs/notes/myfile.png"],
+        directory: "docs/notes"
+      })
+    ).toEqual("myfile-2.png")
+  })
+
+  it("appends -3 when both base and -2 exist", () => {
+    expect(
+      uniqueFilename({
+        basename: "myfile",
+        extension: ".png",
+        existingPaths: ["docs/notes/myfile.png", "docs/notes/myfile-2.png"],
+        directory: "docs/notes"
+      })
+    ).toEqual("myfile-3.png")
+  })
+
+  it("fills gaps when -3 exists but -2 does not", () => {
+    expect(
+      uniqueFilename({
+        basename: "myfile",
+        extension: ".png",
+        existingPaths: ["docs/notes/myfile.png", "docs/notes/myfile-3.png"],
+        directory: "docs/notes"
+      })
+    ).toEqual("myfile-2.png")
+  })
+
+  it("handles repo-root directory", () => {
+    expect(
+      uniqueFilename({
+        basename: "myfile",
+        extension: ".jpg",
+        existingPaths: ["myfile.jpg"],
+        directory: ""
+      })
+    ).toEqual("myfile-2.jpg")
+  })
+
+  it("does not collide with a different extension", () => {
+    expect(
+      uniqueFilename({
+        basename: "myfile",
+        extension: ".png",
+        existingPaths: ["docs/myfile.jpg"],
+        directory: "docs"
+      })
+    ).toEqual("myfile.png")
+  })
+})
diff --git a/src/utils/uniqueFilename.ts b/src/utils/uniqueFilename.ts
new file mode 100644
index 0000000..0e5fbcf
--- /dev/null
+++ b/src/utils/uniqueFilename.ts
@@ -0,0 +1,21 @@
+export const uniqueFilename = ({
+  basename,
+  extension,
+  existingPaths,
+  directory
+}: {
+  basename: string
+  extension: string
+  existingPaths: string[]
+  directory: string
+}): string => {
+  const prefix = directory ? `${directory}/` : ""
+  const candidate = (n: number) =>
+    n === 1 ? `${basename}${extension}` : `${basename}-${n}${extension}`
+  const taken = new Set(existingPaths)
+  let n = 1
+  while (taken.has(`${prefix}${candidate(n)}`)) {
+    n = n === 1 ? 2 : n + 1
+  }
+  return candidate(n)
+}

From 6a0f0d08d28e872f50c5af8b8bd166054720c127 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Mon, 25 May 2026 21:17:46 +0200
Subject: [PATCH 03/11] feat(notes): add image upload button when editing a
 markdown note

---
 src/components/StackedNote.vue   |  64 ++++++++++++++++++-
 src/hooks/useImageUpload.hook.ts | 104 +++++++++++++++++++++++++++++++
 2 files changed, 167 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/useImageUpload.hook.ts

diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index e2b18e6..94a3efa 100644
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -10,6 +10,7 @@ import {
 import { useEditionMode } from "@/hooks/useEditionMode"
 import { useFile } from "@/hooks/useFile.hook"
 import { useGitHubContent } from "@/hooks/useGitHubContent.hook"
+import { useImageUpload } from "@/hooks/useImageUpload.hook"
 import { useLinks } from "@/hooks/useLinks.hook"
 import { renderCodeFile } from "@/hooks/useMarkdown.hook"
 import { useMarkdownPostRender } from "@/hooks/useMarkdownPostRender.hook"
@@ -109,6 +110,27 @@ const { updateFile } = useGitHubContent({
   repo: repo.value
 })
 
+const { uploadImage } = useImageUpload({
+  user: user.value,
+  repo: repo.value,
+  notePath: path
+})
+
+const fileInput = ref<HTMLInputElement | null>(null)
+const editKey = ref(0)
+
+const onImagePicked = async (e: Event) => {
+  const input = e.target as HTMLInputElement
+  const file = input.files?.[0]
+  input.value = ""
+  if (!file || !path.value) return
+  const result = await uploadImage(file)
+  if (!result) return
+  const suffix = rawContent.value.endsWith("\n") ? "" : "\n\n"
+  rawContent.value = `${rawContent.value}${suffix}![](${result.filename})\n`
+  editKey.value++
+}
+
 const {
   status: freshnessStatus,
   lastCheckedAt,
@@ -273,6 +295,42 @@ const onBadgeClick = async () => {
           @click="onBadgeClick"
           class="action"
         />
+        <button
+          v-if="isMarkdown && mode === 'edit'"
+          class="action button is-text is-light"
+          title="Upload image"
+          @click="fileInput?.click()"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="icon icon-tabler icon-tabler-photo-plus"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M15 8h.01" />
+            <path
+              d="M12.5 21h-6.5a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v6.5"
+            />
+            <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l4 4" />
+            <path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l2 2" />
+            <path d="M16 19h6" />
+            <path d="M19 16v6" />
+          </svg>
+        </button>
+        <input
+          ref="fileInput"
+          type="file"
+          accept="image/*"
+          class="hidden-input"
+          @change="onImagePicked"
+        />
         <button
           v-if="isMarkdown"
           class="action button is-text is-light"
@@ -337,7 +395,7 @@ const onBadgeClick = async () => {
     </div>
     <section class="text-content">
       <div v-if="mode === 'edit' && isMarkdown" class="edit">
-        <edit-note v-model="rawContent" />
+        <edit-note :key="editKey" v-model="rawContent" />
       </div>
       <div
         v-if="mode === 'read'"
@@ -410,6 +468,10 @@ $border-color: rgba(18, 19, 58, 0.2);
   gap: 0.25rem;
 }
 
+.hidden-input {
+  display: none;
+}
+
 .action {
   margin: 0;
 
diff --git a/src/hooks/useImageUpload.hook.ts b/src/hooks/useImageUpload.hook.ts
new file mode 100644
index 0000000..3396387
--- /dev/null
+++ b/src/hooks/useImageUpload.hook.ts
@@ -0,0 +1,104 @@
+import { Ref, toValue } from "vue"
+
+import { useGitHubContent } from "@/hooks/useGitHubContent.hook"
+import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
+import { errorMessage } from "@/utils/notif"
+import { uniqueFilename } from "@/utils/uniqueFilename"
+
+const arrayBufferToBase64 = (buffer: ArrayBuffer): string => {
+  const bytes = new Uint8Array(buffer)
+  const chunkSize = 0x8000
+  let binary = ""
+  for (let i = 0; i < bytes.length; i += chunkSize) {
+    const chunk = bytes.subarray(i, i + chunkSize)
+    binary += String.fromCharCode(...chunk)
+  }
+  return btoa(binary)
+}
+
+const splitPath = (fullPath: string): { directory: string; filename: string } => {
+  const lastSlash = fullPath.lastIndexOf("/")
+  if (lastSlash === -1) return { directory: "", filename: fullPath }
+  return {
+    directory: fullPath.slice(0, lastSlash),
+    filename: fullPath.slice(lastSlash + 1)
+  }
+}
+
+const stripMarkdownExtension = (filename: string): string =>
+  filename.replace(/\.(md|markdown|mdx)$/i, "")
+
+const extractExtension = (filename: string): string => {
+  const dot = filename.lastIndexOf(".")
+  if (dot <= 0) return ".png"
+  return filename.slice(dot).toLowerCase()
+}
+
+export const useImageUpload = ({
+  user,
+  repo,
+  notePath
+}: {
+  user: string
+  repo: string
+  notePath: Ref<string | undefined> | string | undefined
+}) => {
+  const store = useUserRepoStore()
+  const { uploadBinaryFile } = useGitHubContent({ user, repo })
+
+  const uploadImage = async (
+    file: File
+  ): Promise<{ filename: string } | null> => {
+    const currentNotePath = toValue(notePath)
+    if (!currentNotePath) {
+      errorMessage("❌ Image upload failed")
+      return null
+    }
+
+    try {
+      const { directory, filename: noteFilename } = splitPath(currentNotePath)
+      const basename = stripMarkdownExtension(noteFilename)
+      const extension = extractExtension(file.name)
+
+      const existingPaths = store.files
+        .map((f) => f.path)
+        .filter((p): p is string => typeof p === "string")
+
+      const filename = uniqueFilename({
+        basename,
+        extension,
+        existingPaths,
+        directory
+      })
+
+      const targetPath = directory ? `${directory}/${filename}` : filename
+
+      const buffer = await file.arrayBuffer()
+      const base64 = arrayBufferToBase64(buffer)
+
+      const { sha, conflict } = await uploadBinaryFile({
+        base64,
+        path: targetPath
+      })
+
+      if (conflict || !sha) {
+        return null
+      }
+
+      if (!store.files.some((f) => f.path === targetPath)) {
+        store.files = [
+          ...store.files,
+          { path: targetPath, sha, type: "blob", size: file.size }
+        ]
+      }
+
+      return { filename }
+    } catch (error) {
+      console.warn("image upload failed", error)
+      errorMessage("❌ Image upload failed")
+      return null
+    }
+  }
+
+  return { uploadImage }
+}

From 4ab0be75e725fc58697fabbfb8493a6066ada956 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Mon, 25 May 2026 21:23:22 +0200
Subject: [PATCH 04/11] feat(notes): show loader on image upload button while
 uploading

---
 src/components/StackedNote.vue | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index 94a3efa..40089e7 100644
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -118,17 +118,23 @@ const { uploadImage } = useImageUpload({
 
 const fileInput = ref<HTMLInputElement | null>(null)
 const editKey = ref(0)
+const isUploading = ref(false)
 
 const onImagePicked = async (e: Event) => {
   const input = e.target as HTMLInputElement
   const file = input.files?.[0]
   input.value = ""
   if (!file || !path.value) return
-  const result = await uploadImage(file)
-  if (!result) return
-  const suffix = rawContent.value.endsWith("\n") ? "" : "\n\n"
-  rawContent.value = `${rawContent.value}${suffix}![](${result.filename})\n`
-  editKey.value++
+  isUploading.value = true
+  try {
+    const result = await uploadImage(file)
+    if (!result) return
+    const suffix = rawContent.value.endsWith("\n") ? "" : "\n\n"
+    rawContent.value = `${rawContent.value}${suffix}![](${result.filename})\n`
+    editKey.value++
+  } finally {
+    isUploading.value = false
+  }
 }
 
 const {
@@ -298,10 +304,16 @@ const onBadgeClick = async () => {
         <button
           v-if="isMarkdown && mode === 'edit'"
           class="action button is-text is-light"
-          title="Upload image"
+          :title="isUploading ? 'Uploading…' : 'Upload image'"
+          :disabled="isUploading"
           @click="fileInput?.click()"
         >
+          <span
+            v-if="isUploading"
+            class="loading loading-spinner loading-sm"
+          ></span>
           <svg
+            v-else
             xmlns="http://www.w3.org/2000/svg"
             class="icon icon-tabler icon-tabler-photo-plus"
             width="24"

From 60e3849c20dc38d453108c32faf4a025851ef16e Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Mon, 25 May 2026 21:23:31 +0200
Subject: [PATCH 05/11] fix(notes): always insert blank line before appended
 image link

---
 src/components/StackedNote.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index 40089e7..eac69dd 100644
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -129,8 +129,9 @@ const onImagePicked = async (e: Event) => {
   try {
     const result = await uploadImage(file)
     if (!result) return
-    const suffix = rawContent.value.endsWith("\n") ? "" : "\n\n"
-    rawContent.value = `${rawContent.value}${suffix}![](${result.filename})\n`
+    const trimmed = rawContent.value.replace(/\n+$/, "")
+    const prefix = trimmed ? `${trimmed}\n\n` : ""
+    rawContent.value = `${prefix}![](${result.filename})\n`
     editKey.value++
   } finally {
     isUploading.value = false

From 54c52feebaae2fc3c91a76f8732ee65e037dcb6e Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Mon, 25 May 2026 21:25:54 +0200
Subject: [PATCH 06/11] refactor(notes): return failure status from pullLatest

Callers had to read back the side-effected status ref to know why a
pull failed, which also broke TS narrowing on the freshness badge
handler. Return { raw, failureStatus } so the reason flows through
the return value.
---
 src/components/StackedNote.vue     | 18 +++++++++---------
 src/hooks/useNoteFreshness.hook.ts | 13 ++++++++-----
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index eac69dd..f892c08 100644
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -236,10 +236,10 @@ watch(mode, async (newMode) => {
 })
 
 const onConflictDiscard = async () => {
-  const newRaw = await pullLatest()
-  if (newRaw !== null) {
-    rawContent.value = newRaw
-    initialRawContent.value = newRaw
+  const { raw } = await pullLatest()
+  if (raw !== null) {
+    rawContent.value = raw
+    initialRawContent.value = raw
   }
 }
 
@@ -269,13 +269,13 @@ const onBadgeClick = async () => {
       return
     }
 
-    const newRaw = await pullLatest()
-    if (newRaw !== null) {
-      rawContent.value = newRaw
-      initialRawContent.value = newRaw
+    const { raw, failureStatus } = await pullLatest()
+    if (raw !== null) {
+      rawContent.value = raw
+      initialRawContent.value = raw
       return
     }
-    if (freshnessStatus.value === "unauthorized") {
+    if (failureStatus === "unauthorized") {
       errorMessage("🔐 GitHub auth expired — please sign in again")
     }
   } catch (error) {
diff --git a/src/hooks/useNoteFreshness.hook.ts b/src/hooks/useNoteFreshness.hook.ts
index 81a955b..129e543 100644
--- a/src/hooks/useNoteFreshness.hook.ts
+++ b/src/hooks/useNoteFreshness.hook.ts
@@ -77,14 +77,17 @@ export const useNoteFreshness = ({
     return { sha: result.sha, failureStatus: null }
   }
 
-  const pullLatest = async (): Promise<string | null> => {
-    if (!path.value) return null
+  const pullLatest = async (): Promise<{
+    raw: string | null
+    failureStatus: FreshnessStatus | null
+  }> => {
+    if (!path.value) return { raw: null, failureStatus: null }
     const usedCachedSha = latestSha.value !== null
     const { sha: remoteSha, failureStatus } = await resolveRemoteSha(path.value)
     if (!remoteSha) {
       console.warn("pullLatest: could not resolve remote sha", { path: path.value })
       if (failureStatus) status.value = failureStatus
-      return null
+      return { raw: null, failureStatus }
     }
     const fileContent = await queryFileContent(user, repo, remoteSha)
     if (!fileContent) {
@@ -96,7 +99,7 @@ export const useNoteFreshness = ({
       // Cached SHA may be stale — clear so the next click re-resolves it.
       if (usedCachedSha) latestSha.value = null
       status.value = "offline"
-      return null
+      return { raw: null, failureStatus: "offline" }
     }
     const { saveCacheNote } = prepareNoteCache(sha.value, path.value)
     await saveCacheNote(fileContent, {
@@ -108,7 +111,7 @@ export const useNoteFreshness = ({
     lastCheckedAt.value = new Date()
     status.value = "verified"
     const { getRawContent } = markdownBuilder(sha.value)
-    return getRawContent(fileContent)
+    return { raw: getRawContent(fileContent), failureStatus: null }
   }
 
   return {

From 299493854e4fda1602b82ea688840f1aadc8b577 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Mon, 25 May 2026 21:27:48 +0200
Subject: [PATCH 07/11] fix(notes): type emit calls in NoteConflictModal

Vue's defineEmits generates per-event overloads, so emit(action) with
a union of literal types failed to type-check. Split the single
choose() helper into one handler per action.
---
 src/components/NoteConflictModal.vue | 30 ++++++++++++++++++----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/NoteConflictModal.vue b/src/components/NoteConflictModal.vue
index 628e85f..06b81e5 100644
--- a/src/components/NoteConflictModal.vue
+++ b/src/components/NoteConflictModal.vue
@@ -4,10 +4,10 @@ import { onMounted, ref, watch } from "vue"
 const props = defineProps<{ open: boolean }>()
 
 const emit = defineEmits<{
-  (e: "discard"): void
-  (e: "overwrite"): void
-  (e: "cancel"): void
-  (e: "update:open", value: boolean): void
+  discard: []
+  overwrite: []
+  cancel: []
+  "update:open": [value: boolean]
 }>()
 
 const dialogRef = ref<HTMLDialogElement | null>(null)
@@ -17,8 +17,16 @@ const close = () => {
   emit("update:open", false)
 }
 
-const choose = (action: "discard" | "overwrite" | "cancel") => {
-  emit(action)
+const onDiscard = () => {
+  emit("discard")
+  close()
+}
+const onOverwrite = () => {
+  emit("overwrite")
+  close()
+}
+const onCancel = () => {
+  emit("cancel")
   close()
 }
 
@@ -42,7 +50,7 @@ onMounted(() => {
     ref="dialogRef"
     class="modal"
     @close="emit('update:open', false)"
-    @cancel.prevent="choose('cancel')"
+    @cancel.prevent="onCancel()"
   >
     <div class="modal-box">
       <h3 class="text-lg font-bold">GitHub has a newer version of this note</h3>
@@ -55,28 +63,28 @@ onMounted(() => {
         <button
           type="button"
           class="btn btn-ghost"
-          @click="choose('cancel')"
+          @click="onCancel()"
         >
           Cancel
         </button>
         <button
           type="button"
           class="btn btn-warning"
-          @click="choose('overwrite')"
+          @click="onOverwrite()"
         >
           Save anyway (overwrite)
         </button>
         <button
           type="button"
           class="btn btn-primary"
-          @click="choose('discard')"
+          @click="onDiscard()"
         >
           Discard my edits, pull latest
         </button>
       </div>
     </div>
     <form method="dialog" class="modal-backdrop">
-      <button type="submit" @click="choose('cancel')">close</button>
+      <button type="submit" @click="onCancel()">close</button>
     </form>
   </dialog>
 </template>

From b87836782b036836ea3ffa303391fe1f519942a8 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Mon, 25 May 2026 21:29:51 +0200
Subject: [PATCH 08/11] fix(notes): persist uploaded image to cache so it
 survives reload

---
 src/hooks/useImageUpload.hook.ts         | 12 ++++++------
 src/modules/repo/store/userRepo.store.ts | 22 ++++++++++++++++++++++
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/hooks/useImageUpload.hook.ts b/src/hooks/useImageUpload.hook.ts
index 3396387..8dce8a8 100644
--- a/src/hooks/useImageUpload.hook.ts
+++ b/src/hooks/useImageUpload.hook.ts
@@ -85,12 +85,12 @@ export const useImageUpload = ({
         return null
       }
 
-      if (!store.files.some((f) => f.path === targetPath)) {
-        store.files = [
-          ...store.files,
-          { path: targetPath, sha, type: "blob", size: file.size }
-        ]
-      }
+      store.registerUploadedFile({
+        path: targetPath,
+        sha,
+        type: "blob",
+        size: file.size
+      })
 
       return { filename }
     } catch (error) {
diff --git a/src/modules/repo/store/userRepo.store.ts b/src/modules/repo/store/userRepo.store.ts
index b56ad0f..114b0b2 100644
--- a/src/modules/repo/store/userRepo.store.ts
+++ b/src/modules/repo/store/userRepo.store.ts
@@ -230,6 +230,28 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
       })
       this.files = newFiles
     },
+    registerUploadedFile(file: RepoFile) {
+      if (!file.path) {
+        return
+      }
+
+      const savedRepoId = generateId(
+        DataType.SavedRepo,
+        `${this.user}-${this.repo}`
+      )
+      const newFiles = [
+        ...toRaw(this.files).filter((f) => f.path !== file.path),
+        toRaw(file)
+      ]
+      data.update<DataType.SavedRepo, SavedRepo>({
+        _id: savedRepoId,
+        $type: DataType.SavedRepo,
+        repo: this.repo,
+        user: this.user,
+        files: newFiles
+      })
+      this.files = newFiles
+    },
     resetUserRepo() {
       this.user = ""
       this.repo = ""

From 455addf76019fbcc37e5cdbad39dd7f3393d6a1c Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Mon, 25 May 2026 21:29:54 +0200
Subject: [PATCH 09/11] style(notes): move image upload button after edit/save
 button

---
 src/components/StackedNote.vue | 84 +++++++++++++++++-----------------
 1 file changed, 42 insertions(+), 42 deletions(-)

diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index f892c08..523770c 100644
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -302,48 +302,6 @@ const onBadgeClick = async () => {
           @click="onBadgeClick"
           class="action"
         />
-        <button
-          v-if="isMarkdown && mode === 'edit'"
-          class="action button is-text is-light"
-          :title="isUploading ? 'Uploading…' : 'Upload image'"
-          :disabled="isUploading"
-          @click="fileInput?.click()"
-        >
-          <span
-            v-if="isUploading"
-            class="loading loading-spinner loading-sm"
-          ></span>
-          <svg
-            v-else
-            xmlns="http://www.w3.org/2000/svg"
-            class="icon icon-tabler icon-tabler-photo-plus"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            fill="none"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-            <path d="M15 8h.01" />
-            <path
-              d="M12.5 21h-6.5a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v6.5"
-            />
-            <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l4 4" />
-            <path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l2 2" />
-            <path d="M16 19h6" />
-            <path d="M19 16v6" />
-          </svg>
-        </button>
-        <input
-          ref="fileInput"
-          type="file"
-          accept="image/*"
-          class="hidden-input"
-          @change="onImagePicked"
-        />
         <button
           v-if="isMarkdown"
           class="action button is-text is-light"
@@ -394,6 +352,48 @@ const onBadgeClick = async () => {
             <path d="M14 4l0 4l-6 0l0 -4" />
           </svg>
         </button>
+        <button
+          v-if="isMarkdown && mode === 'edit'"
+          class="action button is-text is-light"
+          :title="isUploading ? 'Uploading…' : 'Upload image'"
+          :disabled="isUploading"
+          @click="fileInput?.click()"
+        >
+          <span
+            v-if="isUploading"
+            class="loading loading-spinner loading-sm"
+          ></span>
+          <svg
+            v-else
+            xmlns="http://www.w3.org/2000/svg"
+            class="icon icon-tabler icon-tabler-photo-plus"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M15 8h.01" />
+            <path
+              d="M12.5 21h-6.5a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v6.5"
+            />
+            <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l4 4" />
+            <path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l2 2" />
+            <path d="M16 19h6" />
+            <path d="M19 16v6" />
+          </svg>
+        </button>
+        <input
+          ref="fileInput"
+          type="file"
+          accept="image/*"
+          class="hidden-input"
+          @change="onImagePicked"
+        />
       </div>
       <a
         class="title-stacked-note-link"

From a09e541fa8c3b022fc81c9194f1901458ba95830 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Fri, 29 May 2026 15:24:12 +0200
Subject: [PATCH 10/11] feat(repo): hide write UI for users without push access

Fetch the viewer's push permission via GET /repos/{owner}/{repo} when
entering a repo and gate every write affordance behind it: edit and
image-upload buttons in StackedNote, new-fleeting-note and YouTube
buttons in FleetingNotes, and interactive checkboxes in TodoNotes
(rendered disabled when read-only). Anonymous viewers get the same
treatment because the permissions field is absent without auth, which
collapses to canPush = false.

Previously every write button was visible regardless of role, so
read-role collaborators and anonymous viewers could enter edit mode and
type before the save failed with 401/403.
---
 src/components/StackedNote.vue           |  5 ++-
 src/hooks/useCheckboxCommit.hook.ts      | 16 ++++++-
 src/modules/repo/services/repo.spec.ts   | 56 ++++++++++++++++++++++++
 src/modules/repo/services/repo.ts        | 12 +++++
 src/modules/repo/store/userRepo.store.ts | 16 +++++++
 src/views/FleetingNotes.vue              | 10 ++++-
 src/views/TodoNotes.vue                  | 10 +++--
 7 files changed, 115 insertions(+), 10 deletions(-)
 create mode 100644 src/modules/repo/services/repo.spec.ts

diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index 523770c..bc8cf31 100644
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -100,6 +100,7 @@ useTitleNotes(repo)
 
 const store = useUserRepoStore()
 const hasBacklinks = computed(() => store.userSettings?.backlink)
+const canPush = computed(() => store.canPush)
 
 const { displayNoteOverlay } = useNoteOverlay(className.value, index)
 const displayedTitle = computed(() => filenameToNoteTitle(props.title ?? ""))
@@ -303,7 +304,7 @@ const onBadgeClick = async () => {
           class="action"
         />
         <button
-          v-if="isMarkdown"
+          v-if="isMarkdown && canPush"
           class="action button is-text is-light"
           :class="{ 'is-link': mode === 'edit' }"
           :style="mode === 'edit' ? 'color: var(--color-primary)' : ''"
@@ -353,7 +354,7 @@ const onBadgeClick = async () => {
           </svg>
         </button>
         <button
-          v-if="isMarkdown && mode === 'edit'"
+          v-if="isMarkdown && mode === 'edit' && canPush"
           class="action button is-text is-light"
           :title="isUploading ? 'Uploading…' : 'Upload image'"
           :disabled="isUploading"
diff --git a/src/hooks/useCheckboxCommit.hook.ts b/src/hooks/useCheckboxCommit.hook.ts
index b4f5cea..f074aba 100644
--- a/src/hooks/useCheckboxCommit.hook.ts
+++ b/src/hooks/useCheckboxCommit.hook.ts
@@ -35,7 +35,8 @@ export const useCheckboxCommit = ({
   initialContent,
   initialSha,
   containerSelector,
-  debounceMs = 1000
+  debounceMs = 1000,
+  enabled = true
 }: {
   user: string
   repo: string
@@ -44,6 +45,7 @@ export const useCheckboxCommit = ({
   initialSha: Ref<string> | string
   containerSelector: string
   debounceMs?: number
+  enabled?: Ref<boolean> | boolean
 }) => {
   const { updateFile } = useGitHubContent({ user, repo })
 
@@ -91,6 +93,8 @@ export const useCheckboxCommit = ({
   const debouncedCommit = useDebounceFn(commitChanges, debounceMs)
 
   const handleCheckboxChange = (event: Event) => {
+    if (!toValue(enabled)) return
+
     const target = event.target as HTMLInputElement
 
     if (target.tagName !== "INPUT" || target.type !== "checkbox") {
@@ -128,8 +132,16 @@ export const useCheckboxCommit = ({
   const listenToCheckboxes = () => {
     removeListeners()
     const container = document.querySelector(containerSelector)
-    if (container) {
+    if (!container) return
+
+    if (toValue(enabled)) {
       container.addEventListener("change", handleCheckboxChange)
+    } else {
+      container
+        .querySelectorAll<HTMLInputElement>('input[type="checkbox"]')
+        .forEach((checkbox) => {
+          checkbox.disabled = true
+        })
     }
   }
 
diff --git a/src/modules/repo/services/repo.spec.ts b/src/modules/repo/services/repo.spec.ts
new file mode 100644
index 0000000..318199e
--- /dev/null
+++ b/src/modules/repo/services/repo.spec.ts
@@ -0,0 +1,56 @@
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+const { reposGet } = vi.hoisted(() => ({ reposGet: vi.fn() }))
+
+vi.mock("@/modules/repo/services/octo", () => ({
+  getOctokit: vi.fn().mockResolvedValue({
+    repos: { get: reposGet }
+  }),
+  runWithAuthRetry: vi.fn()
+}))
+
+vi.mock("@/hooks/useMarkdown.hook", () => ({
+  markdownBuilder: () => ({ render: (s: string) => s })
+}))
+
+vi.mock("@/modules/note/cache/prepareNoteCache", () => ({
+  prepareNoteCache: () => ({
+    getCachedNote: vi.fn().mockResolvedValue({ note: null }),
+    saveCacheNote: vi.fn()
+  })
+}))
+
+import { getRepoPermission } from "./repo"
+
+describe("getRepoPermission", () => {
+  beforeEach(() => {
+    reposGet.mockReset()
+  })
+
+  it("returns true when permissions.push is true", async () => {
+    reposGet.mockResolvedValue({
+      data: { permissions: { push: true } }
+    })
+    await expect(getRepoPermission("owner", "repo")).resolves.toBe(true)
+  })
+
+  it("returns false when permissions.push is false", async () => {
+    reposGet.mockResolvedValue({
+      data: { permissions: { push: false } }
+    })
+    await expect(getRepoPermission("owner", "repo")).resolves.toBe(false)
+  })
+
+  it("returns false when permissions is missing (anonymous request)", async () => {
+    reposGet.mockResolvedValue({
+      data: {}
+    })
+    await expect(getRepoPermission("owner", "repo")).resolves.toBe(false)
+  })
+
+  it("returns false when owner or repo is empty", async () => {
+    await expect(getRepoPermission("", "repo")).resolves.toBe(false)
+    await expect(getRepoPermission("owner", "")).resolves.toBe(false)
+    expect(reposGet).not.toHaveBeenCalled()
+  })
+})
diff --git a/src/modules/repo/services/repo.ts b/src/modules/repo/services/repo.ts
index c4f2c8c..9ce478a 100644
--- a/src/modules/repo/services/repo.ts
+++ b/src/modules/repo/services/repo.ts
@@ -4,6 +4,18 @@ import { RepoFile } from "@/modules/repo/interfaces/RepoFile"
 import { UserSettings } from "@/modules/repo/interfaces/UserSettings"
 import { getOctokit, runWithAuthRetry } from "@/modules/repo/services/octo"
 
+export const getRepoPermission = async (
+  owner: string,
+  repo: string
+): Promise<boolean> => {
+  if (!owner || !repo) {
+    return false
+  }
+  const octokit = await getOctokit()
+  const { data } = await octokit.repos.get({ owner, repo })
+  return data.permissions?.push ?? false
+}
+
 export const getFiles = async (
   owner: string,
   repo: string
diff --git a/src/modules/repo/store/userRepo.store.ts b/src/modules/repo/store/userRepo.store.ts
index 114b0b2..7171d15 100644
--- a/src/modules/repo/store/userRepo.store.ts
+++ b/src/modules/repo/store/userRepo.store.ts
@@ -10,6 +10,7 @@ import {
   getCachedMainReadme,
   getFiles,
   getMainReadme,
+  getRepoPermission,
   getUserSettingsContent
 } from "@/modules/repo/services/repo"
 import { refreshToken } from "@/modules/user/service/signIn"
@@ -24,6 +25,7 @@ interface State {
   userSettings?: UserSettings | null
   needToLogin: boolean
   loadError: RepoLoadError
+  canPush: boolean
   _requestId: number
 }
 
@@ -46,6 +48,7 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
     userSettings: undefined,
     needToLogin: false,
     loadError: null,
+    canPush: false,
     _requestId: 0
   }),
   actions: {
@@ -78,6 +81,7 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
       this.user = user
       this.repo = repo
       this.loadError = null
+      this.canPush = false
 
       let lsLayout: Partial<UserSettings> = {}
       try {
@@ -120,6 +124,17 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
 
       if (requestId !== this._requestId) return
 
+      getRepoPermission(user, repo)
+        .then((canPush) => {
+          if (requestId !== this._requestId) return
+          this.canPush = canPush
+        })
+        .catch((error) => {
+          if (requestId !== this._requestId) return
+          console.warn("getRepoPermission failed", error)
+          this.canPush = false
+        })
+
       getFiles(user, repo)
         .then(async (files) => {
           if (requestId !== this._requestId) return
@@ -261,6 +276,7 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
     resetFiles() {
       this.files = []
       this.readme = null
+      this.canPush = false
     },
     setFontFamily(fontFamily: string) {
       if (!this.userSettings) {
diff --git a/src/views/FleetingNotes.vue b/src/views/FleetingNotes.vue
index 853fe13..35cde7d 100644
--- a/src/views/FleetingNotes.vue
+++ b/src/views/FleetingNotes.vue
@@ -9,6 +9,7 @@ import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hoo
 import { prepareNoteCache } from "@/modules/note/cache/prepareNoteCache"
 import EditNote from "@/modules/note/components/EditNote.vue"
 import { useFolderNotes } from "@/modules/note/hooks/useFolderNotes"
+import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
 import { encodeUTF8ToBase64 } from "@/utils/decodeBase64ToUTF8"
 import { confirmMessage, errorMessage } from "@/utils/notif"
 import { extractYouTubeId } from "@/utils/youtube"
@@ -76,6 +77,9 @@ const { createFile } = useGitHubContent({
 
 const hasTodayNote = computed(() => content.value.includes(today))
 
+const store = useUserRepoStore()
+const canPush = computed(() => store.canPush)
+
 watch(mode, async (newMode) => {
   if (newMode === "read" && newContent.value.trim() !== initialContent) {
     const content = `# ${new Date().toLocaleDateString()}\n\n${
@@ -114,13 +118,15 @@ watch(mode, async (newMode) => {
       <h3 class="subtitle">Inbox</h3>
       <div class="actions">
         <button
-          v-if="!hasTodayNote"
+          v-if="!hasTodayNote && canPush"
           class="btn btn-secondary"
           @click="toggleMode"
         >
           new fleeting note
         </button>
-        <button class="btn btn-outline" @click="handleYouTube">YouTube</button>
+        <button v-if="canPush" class="btn btn-outline" @click="handleYouTube">
+          YouTube
+        </button>
       </div>
 
       <div v-if="mode === 'edit'">
diff --git a/src/views/TodoNotes.vue b/src/views/TodoNotes.vue
index 59a9d22..27c1ab3 100644
--- a/src/views/TodoNotes.vue
+++ b/src/views/TodoNotes.vue
@@ -26,9 +26,10 @@ const todoNote = computed(() =>
 const sha = computed(() => todoNote.value?.sha ?? "")
 const path = computed(() => todoNote.value?.path)
 
+const canPush = computed(() => store.canPush)
+
 const { toHTML } = markdownBuilder(repo)
 
-// Setup checkbox commit handler
 const { pendingContent, syncContent, listenToCheckboxes, hasPendingChanges } =
   useCheckboxCommit({
     user: props.user,
@@ -37,7 +38,8 @@ const { pendingContent, syncContent, listenToCheckboxes, hasPendingChanges } =
     initialContent: "",
     initialSha: sha,
     containerSelector: ".todo-notes .note-display",
-    debounceMs: 1000
+    debounceMs: 1000,
+    enabled: canPush
   })
 
 // Render pending content to HTML for display
@@ -64,9 +66,9 @@ watch(
   { immediate: true }
 )
 
-// Setup checkbox listeners when content renders
+// Setup checkbox listeners when content renders or canPush changes
 watch(
-  renderedContent,
+  [renderedContent, canPush],
   async () => {
     await nextTick()
     listenToCheckboxes()

From d99672dbd8c0f398324f5cab37aaf8e2a28d226c Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Fri, 29 May 2026 16:49:44 +0200
Subject: [PATCH 11/11] fix(auth): return to origin path after GitHub login

Sign-in saves the current path in sessionStorage so the OAuth callback
can route back instead of always landing on Home.
---
 src/components/AuthorizeUser.vue            |  9 ++++++++-
 src/components/SignInGithub.vue             | 16 +++++++++++++++-
 src/modules/user/service/oauthReturnPath.ts |  7 +++++++
 3 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/user/service/oauthReturnPath.ts

diff --git a/src/components/AuthorizeUser.vue b/src/components/AuthorizeUser.vue
index b39aa0e..97d2f0c 100644
--- a/src/components/AuthorizeUser.vue
+++ b/src/components/AuthorizeUser.vue
@@ -3,6 +3,7 @@ import { onBeforeMount, ref } from "vue"
 import { useRoute, useRouter } from "vue-router"
 
 import { useGitHubLogin } from "@/hooks/useGitHubLogin.hook"
+import { consumeGithubOAuthReturnPath } from "@/modules/user/service/oauthReturnPath"
 import { signIn } from "@/modules/user/service/signIn"
 
 const route = useRoute()
@@ -22,7 +23,13 @@ onBeforeMount(async () => {
       await saveCredentials(token)
     }
 
-    router.replace({ name: "Home" })
+    const returnPath = consumeGithubOAuthReturnPath()
+
+    if (!hasError.value && returnPath) {
+      router.replace(returnPath)
+    } else {
+      router.replace({ name: "Home" })
+    }
   }
 })
 </script>
diff --git a/src/components/SignInGithub.vue b/src/components/SignInGithub.vue
index 98a458a..2675bbf 100644
--- a/src/components/SignInGithub.vue
+++ b/src/components/SignInGithub.vue
@@ -1,20 +1,34 @@
 <script lang="ts" setup>
+import { useRoute } from "vue-router"
+
+import { GITHUB_OAUTH_RETURN_PATH_KEY } from "@/modules/user/service/oauthReturnPath"
+
 const GITHUB_URL = "https://github.com/login/oauth/authorize"
 
 const CLIENT_ID = "Iv1.12dc43d013ce3623"
 const SCOPE = "repo%20workflow"
 const REDIRECT_URI = window.location.origin
 
+const route = useRoute()
+
 const url = new URL(GITHUB_URL)
 url.searchParams.set("client_id", CLIENT_ID)
 url.searchParams.set("scope", SCOPE)
 url.searchParams.set("redirect_uri", REDIRECT_URI)
 
 const href = url.toString()
+
+const saveReturnPath = () => {
+  sessionStorage.setItem(GITHUB_OAUTH_RETURN_PATH_KEY, route.fullPath)
+}
 </script>
 
 <template>
-  <a :href="href" class="sign-in-github btn btn-sm btn-primary">
+  <a
+    :href="href"
+    class="sign-in-github btn btn-sm btn-primary"
+    @click="saveReturnPath"
+  >
     Sign in with
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/src/modules/user/service/oauthReturnPath.ts b/src/modules/user/service/oauthReturnPath.ts
new file mode 100644
index 0000000..fbc28d6
--- /dev/null
+++ b/src/modules/user/service/oauthReturnPath.ts
@@ -0,0 +1,7 @@
+export const GITHUB_OAUTH_RETURN_PATH_KEY = "github-oauth-return-path"
+
+export const consumeGithubOAuthReturnPath = (): string | null => {
+  const path = sessionStorage.getItem(GITHUB_OAUTH_RETURN_PATH_KEY)
+  sessionStorage.removeItem(GITHUB_OAUTH_RETURN_PATH_KEY)
+  return path
+}