editable name

src/components/user_card/user_card.js

@@ -91,6 +91,7 @@ export default {
 
       // Editable stuff
       newName: user.name_unescaped,
+      editingName: true,
       newActorType: user.actor_type,
       newBio: unescape(user.description),
       editingBio: false,

src/components/user_card/user_card.scss

@@ -263,6 +263,31 @@
       --link: var(--text) !important;
     }
 
+    .name-wrapper {
+      display: flex;
+      align-items: baseline;
+
+      .edit-button {
+        width: 3em;
+        text-align: center;
+      }
+
+      .input,
+      .user-name {
+        flex: 1;
+        font-weight: 600;
+        line-height: 2;
+        margin-right: 1em;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      .input {
+        margin: 0 -0.5em;
+        padding: 0 0.5em;
+      }
+    }
+
     .top-line {
       display: flex;
       flex-direction: column;
@@ -271,8 +296,6 @@
       // these two normalize position and height when custom emoji are used
       line-height: 2;
       margin-bottom: -0.2em;
-      font-weight: 600;
-      font-size: 110%;
       font-size: calc(max(110%, 4cqw));
     }
 
@@ -306,13 +329,6 @@
     }
   }
 
-  .user-name {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    margin-right: 1em;
-    font-size: 1.1em;
-  }
-
   .highlighter {
     margin: 5em;
     align-items: baseline;

src/components/user_card/user_card.vue

@@ -122,16 +122,45 @@
                   />
                 </button>
               </div>
-              <router-link
-                :to="userProfileLink(user)"
-                class="user-name"
-              >
-                <RichContent
-                  :title="user.name"
-                  :html="user.name"
-                  :emoji="editable ? emoji : user.emoji"
-                />
-              </router-link>
+              <div class="name-wrapper">
+                <router-link
+                  v-if="!editable || !editingName"
+                  :to="userProfileLink(user)"
+                  class="user-name"
+                >
+                  <RichContent
+                    :title="newName"
+                    :html="newName"
+                    :emoji="editable ? emoji : user.emoji"
+                  />
+                </router-link>
+                <EmojiInput
+                  v-else-if="editingName"
+                  v-model="newName"
+                  enable-emoji-picker
+                  :suggest="emojiSuggestor"
+                >
+                  <template #default="inputProps">
+                    <input
+                      id="username"
+                      v-model="newName"
+                      class="input name-changer"
+                      v-bind="propsToNative(inputProps)"
+                    >
+                  </template>
+                </EmojiInput>
+                <button
+                  v-if="editable"
+                  class="button-unstyled edit-button"
+                  @click="editingName = !editingName"
+                  :title="$t('settings.toggle_edit')"
+                >
+                  <FAIcon
+                    class="icon"
+                    icon="pencil"
+                  />
+                </button>
+              </div>
             </div>
             <div class="bottom-line">
               <user-link