diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue index 2b9f9a2bb8..d5638813b4 100644 --- a/packages/frontend/src/components/MkNotification.vue +++ b/packages/frontend/src/components/MkNotification.vue @@ -1,6 +1,6 @@ <template> <div ref="elRef" class="qglefbjs" :class="notification.type"> - <div class="head"> + <div v-once class="head"> <MkAvatar v-if="notification.type === 'pollEnded'" class="icon" :user="notification.note.user"/> <MkAvatar v-else-if="notification.user" class="icon" :user="notification.user"/> <img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/> @@ -31,37 +31,39 @@ <span v-else>{{ notification.header }}</span> <MkTime v-if="withTime" :time="notification.createdAt" class="time"/> </header> - <MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> - <i class="ti ti-quote"></i> - <Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/> - <i class="ti ti-quote"></i> - </MkA> - <MkA v-if="notification.type === 'renote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)"> - <i class="ti ti-quote"></i> - <Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full"/> - <i class="ti ti-quote"></i> - </MkA> - <MkA v-if="notification.type === 'reply'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> - <Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/> - </MkA> - <MkA v-if="notification.type === 'mention'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> - <Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/> - </MkA> - <MkA v-if="notification.type === 'quote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> - <Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/> - </MkA> - <MkA v-if="notification.type === 'pollEnded'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> - <i class="ti ti-quote"></i> - <Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/> - <i class="ti ti-quote"></i> - </MkA> - <span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ i18n.ts.youGotNewFollower }}<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div></span> - <span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ i18n.ts.followRequestAccepted }}</span> - <span v-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ i18n.ts.receiveFollowRequest }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ i18n.ts.reject }}</button></div></span> - <span v-if="notification.type === 'groupInvited'" class="text" style="opacity: 0.6;">{{ i18n.ts.groupInvited }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ i18n.ts.reject }}</button></div></span> - <span v-if="notification.type === 'app'" class="text"> - <Mfm :text="notification.body" :nowrap="!full"/> - </span> + <div v-once class="content"> + <MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> + <i class="ti ti-quote"></i> + <Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/> + <i class="ti ti-quote"></i> + </MkA> + <MkA v-else-if="notification.type === 'renote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)"> + <i class="ti ti-quote"></i> + <Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full"/> + <i class="ti ti-quote"></i> + </MkA> + <MkA v-else-if="notification.type === 'reply'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> + <Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/> + </MkA> + <MkA v-else-if="notification.type === 'mention'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> + <Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/> + </MkA> + <MkA v-else-if="notification.type === 'quote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> + <Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/> + </MkA> + <MkA v-else-if="notification.type === 'pollEnded'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)"> + <i class="ti ti-quote"></i> + <Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/> + <i class="ti ti-quote"></i> + </MkA> + <span v-else-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ i18n.ts.youGotNewFollower }}<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div></span> + <span v-else-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ i18n.ts.followRequestAccepted }}</span> + <span v-else-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ i18n.ts.receiveFollowRequest }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ i18n.ts.reject }}</button></div></span> + <span v-else-if="notification.type === 'groupInvited'" class="text" style="opacity: 0.6;">{{ i18n.ts.groupInvited }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ i18n.ts.reject }}</button></div></span> + <span v-else-if="notification.type === 'app'" class="text"> + <Mfm :text="notification.body" :nowrap="!full"/> + </span> + </div> </div> </div> </template> @@ -263,23 +265,25 @@ useTooltip(reactionRef, (showing) => { } } - > .text { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + > .content { + > .text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; - > i { - vertical-align: super; - font-size: 50%; - opacity: 0.5; - } + > i { + vertical-align: super; + font-size: 50%; + opacity: 0.5; + } - > i:first-child { - margin-right: 4px; - } + > i:first-child { + margin-right: 4px; + } - > i:last-child { - margin-left: 4px; + > i:last-child { + margin-left: 4px; + } } } } diff --git a/packages/frontend/src/pages/about.emojis.vue b/packages/frontend/src/pages/about.emojis.vue index fef5cfff6a..669b6f1264 100644 --- a/packages/frontend/src/pages/about.emojis.vue +++ b/packages/frontend/src/pages/about.emojis.vue @@ -22,7 +22,7 @@ <MkFolder v-for="category in customEmojiCategories" :key="category" class="emojis"> <template #header>{{ category || $ts.other }}</template> <div class="zuvgdzyt"> - <XEmoji v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" class="emoji" :emoji="emoji"/> + <XEmoji v-for="emoji in customEmojis.filter(e => e.category === category)" v-once :key="emoji.name" class="emoji" :emoji="emoji"/> </div> </MkFolder> </div> diff --git a/packages/frontend/src/pages/about.federation.vue b/packages/frontend/src/pages/about.federation.vue index 101ea2297b..e530bb49dd 100644 --- a/packages/frontend/src/pages/about.federation.vue +++ b/packages/frontend/src/pages/about.federation.vue @@ -36,7 +36,7 @@ <MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination"> <div class="dqokceoi"> - <MkA v-for="instance in items" :key="instance.id" v-tooltip.mfm="`Status: ${getStatus(instance)}`" class="instance" :to="`/instance-info/${instance.host}`"> + <MkA v-for="instance in items" v-once :key="instance.id" v-tooltip.mfm="`Status: ${getStatus(instance)}`" class="instance" :to="`/instance-info/${instance.host}`"> <MkInstanceCardMini :instance="instance"/> </MkA> </div> diff --git a/packages/frontend/src/pages/admin/users.vue b/packages/frontend/src/pages/admin/users.vue index babe76e4ec..c198dfdb46 100644 --- a/packages/frontend/src/pages/admin/users.vue +++ b/packages/frontend/src/pages/admin/users.vue @@ -41,7 +41,7 @@ </div> <MkPagination v-slot="{items}" ref="paginationComponent" :pagination="pagination" class="users"> - <MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${dateString(user.updatedAt)}`" class="user" :to="`/user-info/${user.id}`"> + <MkA v-for="user in items" v-once :key="user.id" v-tooltip.mfm="`Last posted: ${dateString(user.updatedAt)}`" class="user" :to="`/user-info/${user.id}`"> <MkUserCardMini :user="user"/> </MkA> </MkPagination>