Make mention link prefs ui more intuitive

src/components/settings_modal/tabs/general_tab.vue

@@ -147,11 +147,6 @@
             {{ $t('settings.greentext') }}
           </BooleanSetting>
         </li>
-        <li>
-          <BooleanSetting path="useAtIcon">
-            {{ $t('settings.use_at_icon') }}
-          </BooleanSetting>
-        </li>
         <li>
           <ChoiceSetting
             id="mentionLinkDisplay"
@@ -162,25 +157,31 @@
           </ChoiceSetting>
         </li>
         <ul
-          v-if="mentionLinkDisplay === 'short'"
           class="setting-list suboptions"
         >
-          <li>
+          <li
+            v-if="mentionLinkDisplay === 'short'"
+          >
             <BooleanSetting path="mentionLinkShowTooltip">
               {{ $t('settings.mention_link_show_tooltip') }}
             </BooleanSetting>
           </li>
+          <li>
+            <BooleanSetting path="useAtIcon">
+              {{ $t('settings.use_at_icon') }}
+            </BooleanSetting>
+          </li>
+          <li>
+            <BooleanSetting path="mentionLinkShowAvatar">
+              {{ $t('settings.mention_link_show_avatar') }}
+            </BooleanSetting>
+          </li>
+          <li>
+            <BooleanSetting path="mentionLinkFadeDomain">
+              {{ $t('settings.mention_link_fade_domain') }}
+            </BooleanSetting>
+          </li>
         </ul>
-        <li>
-          <BooleanSetting path="mentionLinkShowAvatar">
-            {{ $t('settings.mention_link_show_avatar') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="mentionLinkFadeDomain">
-            {{ $t('settings.mention_link_fade_domain') }}
-          </BooleanSetting>
-        </li>
       </ul>
     </div>