feat(settings-profile): add functionality for updating about me

components/interactables/Input/Input.html

@@ -12,6 +12,7 @@
             {
               'show-clear-button': showClearButton,
               'is-danger': error || invalid,
+              transparent,
             },
           ]"
         :value="text"

components/interactables/Input/Input.less

@@ -30,6 +30,18 @@
           padding-right: 2rem;
         }
 
+        &.transparent {
+          padding: 0;
+          border: none;
+          background: #fff0;
+          flex-grow: 1;
+
+          &:focus {
+            outline: none;
+            background: #fff0;
+          }
+        }
+
         &:focus {
           background-image: @semitransparent-lightest-gradient;
         }

components/interactables/Input/Input.vue

@@ -85,6 +85,10 @@ export default Vue.extend({
       type: String as PropType<InputType>,
       default: 'button',
     },
+    transparent: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     isEmpty(): boolean {

components/ui/ContextMenu/ContextMenu.vue

@@ -50,11 +50,9 @@
             :class="{ danger: item.type === 'danger' }"
             @click="(e) => handleAction(e, item.func)"
           >
-            <TypographySubtitle
-              :text="item.text"
-              :size="6"
-              :class="{ danger: item.type === 'danger' }"
-            />
+            <TypographyText :class="{ danger: item.type === 'danger' }">
+              {{ item.text }}
+            </TypographyText>
           </button>
         </template>
       </div>

components/views/navigation/sidebar/list/item/Item.vue

@@ -2,9 +2,9 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import { mapGetters } from 'vuex'
 import { TranslateResult } from 'vue-i18n'
 import VueMarkdown from 'vue-markdown'
+import { mapGetters } from 'vuex'
 import { toHTML } from '~/libraries/ui/Markdown'
 import { ContextMenuItem } from '~/store/ui/types'
 import iridium from '~/libraries/Iridium/IridiumManager'

components/views/navigation/sidebar/live/Live.vue

@@ -5,7 +5,6 @@ import Vue from 'vue'
 import { mapState } from 'vuex'
 import { RadioIcon, XIcon } from 'satellite-lucide-icons'
 import iridium from '~/libraries/Iridium/IridiumManager'
-import { TrackKind } from '~/libraries/WebRTC/types'
 import { GroupMemberDetails } from '~/libraries/Iridium/groups/types'
 import Group from '~/libraries/Iridium/groups/Group'
 import type { Friend, User } from '~/libraries/Iridium/friends/types'

components/views/navigation/toolbar/Toolbar.html

@@ -7,10 +7,12 @@
     </template>
   </div>
   <div class="user-info">
-    <TypographyText as="h4" v-if="conversation">
+    <TypographyText class="header" as="h4" v-if="conversation">
       {{ conversation.name }}
     </TypographyText>
-    <TypographyText color="dark">{{ subtitleText }}</TypographyText>
+    <TypographyText class="header" color="dark">
+      {{ subtitleText }}
+    </TypographyText>
   </div>
   <div class="controls">
     <button

components/views/navigation/toolbar/Toolbar.less

@@ -6,6 +6,10 @@
   margin-bottom: @normal-spacing;
   flex-shrink: 0;
 
+  .header {
+    &:extend(.ellipsis);
+  }
+
   .circle-container {
     display: flex;
     flex-shrink: 0;

components/views/settings/pages/profile/Profile.html

@@ -80,47 +80,57 @@
                 >
                   <span>{{ $t('pages.settings.profile.remove_image') }}</span>
                 </button>
-                <div class="username">
-                  <form
-                    @submit="
-                        (e) => updateUserDetail(e, 'name', inputs.name ?? '')
-                      "
+                <form
+                  class="editable-wrapper username"
+                  @submit="
+                    (e) => submitEdit(e, 'name')
+                  "
+                >
+                  <typography-text
+                    v-if="!editing.has('name')"
+                    class="username-label"
                   >
-                    <InteractablesInput
-                      v-model="inputs.name"
-                      size="xs"
-                      type="text"
-                      :placeholder="
-                          $t('user.registration.username_placeholder')
-                        "
-                      :loading="loading.has('status')"
-                      button-type="submit"
-                    >
-                      <edit-icon size="1x" />
-                    </InteractablesInput>
-                  </form>
-                </div>
-                <div class="status-input">
-                  <form
-                    @submit="
+                    {{ inputs.name }}
+                  </typography-text>
+
+                  <InteractablesInput
+                    v-else
+                    v-model="inputs.name"
+                    class="username-input"
+                    :placeholder="$t('user.registration.username_placeholder')"
+                    autofocus
+                    transparent
+                  />
+
+                  <button
+                    class="edit-button"
+                    :class="{active: editing.has('name')}"
+                    type="submit"
+                  >
+                    {{ getEditButtonText('name') }}
+                  </button>
+                </form>
+                <form
+                  class="status-input"
+                  @click="editing.add('status')"
+                  @submit="
                         (e) =>
                           updateUserDetail(e, 'status', inputs.status ?? '')
                       "
-                  >
-                    <InteractablesInput
-                      v-model="inputs.status"
-                      size="xs"
-                      type="text"
-                      :placeholder="
+                >
+                  <InteractablesInput
+                    v-model="inputs.status"
+                    size="xs"
+                    type="text"
+                    :placeholder="
                         $t('pages.settings.profile.status_placeholder')
                       "
-                      :loading="loading.has('status')"
-                      button-type="submit"
-                    >
-                      <edit-icon size="1x" />
-                    </InteractablesInput>
-                  </form>
-                </div>
+                    :loading="loading.has('status')"
+                    button-type="submit"
+                  >
+                    <edit-icon size="1x" />
+                  </InteractablesInput>
+                </form>
                 <div v-if="profile && !!profile.status" class="status">
                   <TypographyText as="h6">
                     {{ $t('pages.settings.profile.current_status') }}
@@ -134,7 +144,7 @@
 
         <div class="profile-section">
           <!-- About Me -->
-          <form @submit="(e) => submitEdit(e)" @click="">
+          <form @submit="(e) => submitEdit(e, 'about')">
             <div class="section-title">
               <div class="title-wrapper">
                 <align-left-icon size="1.5x" class="section-icon" />
@@ -157,19 +167,14 @@
                 />
               </div>
               <div
-                class="about-input-wrapper"
+                class="editable-wrapper"
                 :class="{'readonly': !editing.has('about')}"
               >
                 <InteractablesEditable
                   v-model="inputs.about"
-                  ref="editable"
                   :placeholder="$t('ui.talk')"
                   :enabled="editing.has('about')"
                 />
-                <!-- :focus="editing.has('about')" -->
-                <!-- :class="{'has-command' : hasCommand}" -->
-                <!-- @keydown="handleInputKeydown" -->
-                <!-- @paste="handlePaste" -->
               </div>
             </div>
           </form>

components/views/settings/pages/profile/Profile.less

@@ -223,38 +223,68 @@
       margin-bottom: 0;
     }
   }
+}
 
-  .about-input-wrapper {
-    display: flex;
-    align-items: flex-end;
-    gap: 0.5rem;
-    padding: 0 8px;
-    margin: 0 -8px;
-    position: relative;
-    border-radius: @corner-rounding;
-    border: 1px solid transparent;
-    background: linear-gradient(
-      0deg,
-      rgba(34, 44, 63, 0.5) 0%,
-      rgba(36, 40, 57, 0.5) 100%
-    );
-
-    &.readonly {
-      background: transparent;
-    }
+.editable-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 8px;
+  margin: 0 -8px;
+  position: relative;
+  border-radius: @corner-rounding;
+  border: 1px solid transparent;
+  background: linear-gradient(
+    0deg,
+    rgba(34, 44, 63, 0.5) 0%,
+    rgba(36, 40, 57, 0.5) 100%
+  );
+
+  &.username,
+  &.readonly {
+    background: transparent;
   }
 
-  .edit-button {
-    font-style: italic;
-    white-space: nowrap;
-    color: @text-muted;
+  &.username {
+    padding: 0;
+    margin: 0;
+    border: none;
+
+    .username-label {
+      flex-grow: 1;
+      &:extend(.ellipsis);
+    }
+
+    .edit-button {
+      padding: 8px;
+      opacity: 0;
+
+      &.active,
+      &:focus {
+        opacity: 1;
+      }
+    }
 
     &:hover {
-      opacity: 0.8;
+      .edit-button {
+        opacity: 1;
+        cursor: pointer;
+      }
     }
   }
 }
 
+.edit-button {
+  font-style: italic;
+  white-space: nowrap;
+  color: @text-muted;
+  transition: @animation-speed-long ease-in-out;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
 .accounts-main {
   display: flex;
   flex-direction: column;

components/views/settings/pages/profile/index.vue

@@ -37,7 +37,7 @@ export default Vue.extend({
       inputs: {
         name: iridium.profile.state?.name ?? '',
         photoHash: iridium.profile.state?.photoHash ?? '',
-        status: iridium.profile.state?.status ?? '',
+        status: '',
         about: iridium.profile.state?.about ?? '',
         accountUrl: '',
       } as Partial<User>,
@@ -66,9 +66,6 @@ export default Vue.extend({
     profile(): User | undefined {
       return iridium.profile.state
     },
-    aboutChanged(): boolean {
-      return this.inputs.about !== this.profile?.about
-    },
   },
   beforeDestroy() {
     URL.revokeObjectURL(this.croppedImage)
@@ -170,14 +167,15 @@ export default Vue.extend({
      * @description Updates input value
      * @example this.submitEdit('name', 'John Doe')
      */
-    submitEdit(e: SubmitEvent) {
+    submitEdit(e: SubmitEvent, key: Editables) {
       e.stopPropagation()
       e.preventDefault()
-      const about = this.inputs.about || ''
-      if (this.editing.has('about') && this.aboutChanged) {
-        this.updateUserDetail(e, 'about', about)
+      const value = this.inputs[key] || ''
+      const valueChanged = this.profile?.[key] !== value
+      if (this.editing.has(key) && valueChanged) {
+        this.updateUserDetail(e, key, value)
       }
-      this.toggleEditing('about')
+      this.toggleEditing(key)
     },
     /**
      * @method getEditButtonText