Show error message if moving of followers fails

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Added
 
 - Added "Experiments" section to Settings page (includes "Move Followers" feature).
+- Show error message if moving of followers fails.
 
 ### Changed
 

src/styles/_mixins.scss

@@ -126,8 +126,13 @@
 }
 
 @mixin content-form {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: $block-outer-padding;
+
   .input-group {
-    margin-bottom: $block-outer-padding;
+    width: 100%;
 
     label {
       display: block;
@@ -148,4 +153,8 @@
       width: 100%;
     }
   }
+
+  .error-message {
+    color: $error-color;
+  }
 }

src/views/MoveFollowers.vue

@@ -7,7 +7,7 @@
           <input
             type="text"
             id="from-actor-id"
-            placeholder="From actor ID"
+            placeholder="From (actor ID)"
             v-model="fromActorId"
           >
         </div>
@@ -22,11 +22,12 @@
         <button
           type="submit"
           class="btn"
-          :disabled="!canMove()"
+          :disabled="!canMove() || isLoading"
           @click.prevent="move()"
         >
           Move
         </button>
+        <div class="error-message" v-if="errorMessage">{{ errorMessage }}</div>
       </form>
     </template>
   </sidebar-layout>
@@ -45,6 +46,8 @@ const { currentUser, ensureAuthToken, setCurrentUser } = $(useCurrentUser())
 
 const fromActorId = $ref("")
 const followersCsv = $ref("")
+let isLoading = $ref(false)
+let errorMessage = $ref<string | null>(null)
 
 function canMove(): boolean {
   return fromActorId.length > 0 && followersCsv.length > 0
@@ -54,11 +57,21 @@ async function move() {
   if (currentUser === null) {
     return
   }
-  const user = await moveFollowers(
+  let user
+  isLoading = true
+  try {
+    user = await moveFollowers(
       ensureAuthToken(),
       fromActorId,
       followersCsv,
     )
+  } catch (error: any) {
+    isLoading = false
+    errorMessage = error.message
+    return
+  }
+  isLoading = false
+  errorMessage = null
   setCurrentUser(user)
   router.push({ name: "profile", params: { profileId: currentUser.id } })
 }

src/views/ProfileForm.vue

@@ -224,7 +224,7 @@ async function save() {
   display: grid;
   gap: $input-padding;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  margin-bottom: $block-outer-padding;
+  width: 100%;
 
   .input-group:last-child {
     margin-bottom: 0;