style(notes): move image upload button after edit/save button

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"

src/hooks/useImageUpload.hook.ts

@@ -85,12 +85,12 @@ export const useImageUpload = ({
         return null
       }
 
-      if (!store.files.some((f) => f.path === targetPath)) {
+      store.registerUploadedFile({
-        store.files = [
+        path: targetPath,
-          ...store.files,
+        sha,
-          { path: targetPath, sha, type: "blob", size: file.size }
+        type: "blob",
-        ]
+        size: file.size
-      }
+      })
 
       return { filename }
     } catch (error) {

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 = ""