Stop pre-rendering bio and fields

src/api/users.ts

@@ -211,16 +211,14 @@ export async function getProfiles(
   return data
 }
 
-export interface ProfileFieldAttrs {
+interface ProfileFieldAttrs {
   name: string;
   value: string;
-  value_source: string;
 }
 
 export interface ProfileUpdateData {
   display_name: string | null;
   note: string | null;
-  note_source: string | null;
   avatar: string | null;
   header: string | null;
   fields_attributes: ProfileFieldAttrs[];

src/components/ProfileCard.vue

@@ -11,7 +11,7 @@
           <div class="actor-address">@{{ getActorAddress(profile) }}</div>
         </div>
       </div>
-      <div class="bio" v-html="profile.note"></div>
+      <div v-if="!compact" class="bio" v-html="profile.note"></div>
       <div v-if="!compact" class="bottom-row">
         <div class="post-count">
           <div class="value">{{ profile.statuses_count }}</div>
@@ -62,13 +62,15 @@ $profile-padding: calc($block-inner-padding / 2);
 }
 
 .profile-info {
+  display: flex;
+  flex-direction: column;
+  gap: $profile-padding;
   padding: $profile-padding;
 }
 
 .avatar-row {
   display: flex;
   flex-direction: row;
-  margin-bottom: $profile-padding;
 
   .avatar {
     height: $avatar-size;
@@ -109,7 +111,6 @@ $profile-padding: calc($block-inner-padding / 2);
 .bottom-row {
   display: flex;
   flex-direction: row;
-  margin-top: $profile-padding;
 
   .post-count {
     display: flex;

src/views/ProfileForm.vue

@@ -12,7 +12,7 @@
           <textarea
             id="bio"
             ref="bioInputRef"
-            :value="form.note_source || ''"
+            :value="form.note || ''"
             @input="onBioUpdate($event)"
           ></textarea>
         </div>
@@ -52,8 +52,7 @@
           >
             <input v-model.trim="field.name" placeholder="Label">
             <input
-              :value="field.value_source"
+              v-model.trim="field.value"
-              @input="onExtraFieldUpdate(field, $event)"
               placeholder="Content"
             >
             <a
@@ -93,7 +92,6 @@ import { useRouter } from "vue-router"
 
 import {
   Profile,
-  ProfileFieldAttrs,
   ProfileUpdateData,
   updateProfile,
   EXTRA_FIELD_COUNT_MAX,
@@ -102,7 +100,6 @@ import ProfileCard from "@/components/ProfileCard.vue"
 import SidebarLayout from "@/components/SidebarLayout.vue"
 import { useCurrentUser } from "@/store/user"
 import { setupAutoResize } from "@/utils/autoresize"
-import { renderMarkdownLiteInline } from "@/utils/markdown"
 import { fileToDataUrl, dataUrlToBase64 } from "@/utils/upload"
 
 const router = useRouter()
@@ -115,9 +112,8 @@ function getFieldsAttributes() {
   const fields_attributes = []
   for (let index = 0; index < profile.fields.length; index++) {
     const field_attributes = {
-      name: profile.fields[index].name,
+      name: profile.source.fields[index].name,
-      value: profile.fields[index].value,
+      value: profile.source.fields[index].value,
-      value_source: profile.source.fields[index].value,
     }
     fields_attributes.push(field_attributes)
   }
@@ -126,8 +122,7 @@ function getFieldsAttributes() {
 
 const form = $ref<ProfileUpdateData>({
   display_name: profile.display_name,
-  note: profile.note,
+  note: profile.source.note,
-  note_source: profile.source.note,
   fields_attributes: getFieldsAttributes(),
   avatar: null,
   header: null,
@@ -149,15 +144,16 @@ const profilePreview = $computed<Profile>(() => {
   return {
     ...profile,
     display_name: form.display_name,
-    note: form.note,
     avatar: images.avatar,
     header: images.header,
   }
 })
 
 function onBioUpdate(event: Event) {
-  form.note_source = (event.target as HTMLTextAreaElement).value
+  const value = (event.target as HTMLTextAreaElement).value
-  form.note = renderMarkdownLiteInline(form.note_source)
+  if (value) {
+    form.note = value
+  }
 }
 
 async function onFilePicked(fieldName: "avatar" | "header", event: Event) {
@@ -170,11 +166,6 @@ async function onFilePicked(fieldName: "avatar" | "header", event: Event) {
   form[fieldName] = dataUrlToBase64(imageDataUrl)
 }
 
-function onExtraFieldUpdate(field: ProfileFieldAttrs, event: Event) {
-  field.value_source = (event.target as HTMLInputElement).value
-  field.value = renderMarkdownLiteInline(field.value_source)
-}
-
 function isValidExtraField(index: number): boolean {
   const field = form.fields_attributes[index]
   for (let prevIndex = 0; prevIndex < index; prevIndex++) {
@@ -196,7 +187,7 @@ function canAddExtraField(): boolean {
 }
 
 function addExtraField() {
-  form.fields_attributes.push({ name: "", value: "", value_source: "" })
+  form.fields_attributes.push({ name: "", value: "" })
 }
 
 function isFormValid(): boolean {