sd_feed/html/profile.html

<template v-if="!editMode">
    <div style="display:flex;align-items:center;">
        <div style="padding: 10px; border-radius: 5px; display:flex;align-items:center;">
            <p style="line-height:normal;line-height:0;font-size: 25px;font-weight: 800;margin-right: 10px;">By.</p>
            <p style="line-height: 0;font-size: 20px;margin-right: 10p;">{{nickname}}</p>
        </div>
        <div style="padding: 10px; border-radius: 5px; display:flex;align-items:center;">
            <p style="line-height: 0;font-size: 20px;margin-right: 10p;">{{profile}}</p>
        </div>
        <button @click="setEditMode" style="width:24px;height:24px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
        </button>
    </div>
</template>
<template v-else>
    <input  style="padding: 10px; border-radius: 5px; border: 1px solid #ccc; flex-grow: 1;" type="text" v-model="nickname">
    <button  style="width:24px;height:24px;margin-right:15px;margin-left:15px;" @click="saveNickname">💾</button>
    <button style="width:24px;height:24px;" @click="setEditMode">
        ✖️
    </button>
</template>