No OneTemporary
Actions

Size

44 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
	index d789a32553..76a7073007 100644
	--- a/src/components/follow_card/follow_card.vue
	+++ b/src/components/follow_card/follow_card.vue
	@@ -1,49 +1,48 @@
	<template>
	<basic-user-card :user="user">
	<div class="follow-card-content-container">
	<span
	v-if="!noFollowsYou && relationship.followed_by"
	class="faint"
	>
	{{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
	</span>
	<template v-if="!loggedIn">
	<div
	v-if="!relationship.following"
	class="follow-card-follow-button"
	>
	<RemoteFollow :user="user" />
	</div>
	</template>
	<template v-else>
	<FollowButton
	- :user="user"
	:relationship="relationship"
	- class="follow-card-follow-button"
	:label-following="$t('user_card.follow_unfollow')"
	+ class="follow-card-follow-button"
	/>
	</template>
	</div>
	</basic-user-card>
	</template>

	<script src="./follow_card.js"></script>

	<style lang="scss">
	.follow-card {
	&-content-container {
	flex-shrink: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	line-height: 1.5em;
	}

	&-follow-button {
	margin-top: 0.5em;
	margin-left: auto;
	width: 10em;
	}
	}
	</style>
	diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
	index a9dbbeec60..2958a3869c 100644
	--- a/src/components/side_drawer/side_drawer.vue
	+++ b/src/components/side_drawer/side_drawer.vue
	@@ -1,308 +1,308 @@
	<template>
	<div
	class="side-drawer-container"
	:class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
	>
	<div
	class="side-drawer-darken"
	:class="{ 'side-drawer-darken-closed': closed}"
	/>
	<div
	class="side-drawer"
	:class="{'side-drawer-closed': closed}"
	@touchstart="touchStart"
	@touchmove="touchMove"
	>
	<div
	class="side-drawer-heading"
	@click="toggleDrawer"
	>
	<UserCard
	v-if="currentUser"
	- :userId="currentUser.id"
	+ :user-id="currentUser.id"
	:hide-bio="true"
	/>
	<div
	v-else
	class="side-drawer-logo-wrapper"
	>
	<img :src="logo">
	<span v-if="!hideSitename">{{ sitename }}</span>
	</div>
	</div>
	<ul>
	<li
	v-if="!currentUser"
	@click="toggleDrawer"
	>
	<router-link :to="{ name: 'login' }">
	<i class="button-icon icon-login" /> {{ $t("login.login") }}
	</router-link>
	</li>
	<li
	v-if="currentUser"
	@click="toggleDrawer"
	>
	<router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
	<i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }}
	</router-link>
	</li>
	<li
	v-if="currentUser"
	@click="toggleDrawer"
	>
	<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
	<i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
	</router-link>
	</li>
	</ul>
	<ul>
	<li
	v-if="currentUser"
	@click="toggleDrawer"
	>
	<router-link :to="{ name: 'friends' }">
	<i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }}
	</router-link>
	</li>
	<li
	v-if="currentUser && currentUser.locked"
	@click="toggleDrawer"
	>
	<router-link to="/friend-requests">
	<i class="button-icon icon-user-plus" /> {{ $t("nav.friend_requests") }}
	<span
	v-if="followRequestCount > 0"
	class="badge follow-request-count"
	>
	{{ followRequestCount }}
	</span>
	</router-link>
	</li>
	<li
	v-if="currentUser \|\| !privateMode"
	@click="toggleDrawer"
	>
	<router-link to="/main/public">
	<i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
	</router-link>
	</li>
	<li
	v-if="federating && (currentUser \|\| !privateMode)"
	@click="toggleDrawer"
	>
	<router-link to="/main/all">
	<i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
	</router-link>
	</li>
	<li
	v-if="currentUser && chat"
	@click="toggleDrawer"
	>
	<router-link :to="{ name: 'chat' }">
	<i class="button-icon icon-chat" /> {{ $t("nav.chat") }}
	</router-link>
	</li>
	</ul>
	<ul>
	<li
	v-if="currentUser \|\| !privateMode"
	@click="toggleDrawer"
	>
	<router-link :to="{ name: 'search' }">
	<i class="button-icon icon-search" /> {{ $t("nav.search") }}
	</router-link>
	</li>
	<li
	v-if="currentUser && suggestionsEnabled"
	@click="toggleDrawer"
	>
	<router-link :to="{ name: 'who-to-follow' }">
	<i class="button-icon icon-user-plus" /> {{ $t("nav.who_to_follow") }}
	</router-link>
	</li>
	<li @click="toggleDrawer">
	<router-link :to="{ name: 'settings' }">
	<i class="button-icon icon-cog" /> {{ $t("settings.settings") }}
	</router-link>
	</li>
	<li @click="toggleDrawer">
	<router-link :to="{ name: 'about'}">
	<i class="button-icon icon-info-circled" /> {{ $t("nav.about") }}
	</router-link>
	</li>
	<li
	v-if="currentUser && currentUser.role === 'admin'"
	@click="toggleDrawer"
	>
	<a
	href="/pleroma/admin/#/login-pleroma"
	target="_blank"
	>
	<i class="button-icon icon-gauge" /> {{ $t("nav.administration") }}
	</a>
	</li>
	<li
	v-if="currentUser"
	@click="toggleDrawer"
	>
	<a
	href="#"
	@click="doLogout"
	>
	<i class="button-icon icon-logout" /> {{ $t("login.logout") }}
	</a>
	</li>
	</ul>
	</div>
	<div
	class="side-drawer-click-outside"
	:class="{'side-drawer-click-outside-closed': closed}"
	@click.stop.prevent="toggleDrawer"
	/>
	</div>
	</template>

	<script src="./side_drawer.js" ></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.side-drawer-container {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: stretch;
	transition-duration: 0s;
	transition-property: transform;
	}

	.side-drawer-container-open {
	transform: translate(0%);
	}

	.side-drawer-container-closed {
	transition-delay: 0.35s;
	transform: translate(-100%);
	}

	.side-drawer-darken {
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: -1;
	transition: 0.35s;
	transition-property: background-color;
	background-color: rgba(0, 0, 0, 0.5);
	}

	.side-drawer-darken-closed {
	background-color: rgba(0, 0, 0, 0);
	}

	.side-drawer-click-outside {
	flex: 1 1 100%;
	}

	.side-drawer {
	overflow-x: hidden;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
	transition: 0.35s;
	transition-property: transform;
	margin: 0 0 0 -100px;
	padding: 0 0 1em 100px;
	width: 80%;
	max-width: 20em;
	flex: 0 0 80%;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
	box-shadow: var(--panelShadow);
	background-color: $fallback--bg;
	background-color: var(--popover, $fallback--bg);
	color: $fallback--link;
	color: var(--popoverText, $fallback--link);
	--faint: var(--popoverFaintText, $fallback--faint);
	--faintLink: var(--popoverFaintLink, $fallback--faint);
	--lightText: var(--popoverLightText, $fallback--lightText);
	--icon: var(--popoverIcon, $fallback--icon);

	.button-icon:before {
	width: 1.1em;
	}
	}

	.side-drawer-logo-wrapper {
	display: flex;
	align-items: center;
	padding: 0.85em;

	img {
	flex: none;
	height: 50px;
	margin-right: 0.85em;
	}

	span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	}

	.side-drawer-click-outside-closed {
	flex: 0 0 0;
	}

	.side-drawer-closed {
	transform: translate(-100%);
	}

	.side-drawer-heading {
	background: transparent;
	flex-direction: column;
	align-items: stretch;
	display: flex;
	padding: 0;
	margin: 0;
	}

	.side-drawer ul {
	list-style: none;
	margin: 0;
	padding: 0;

	border-bottom: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	margin: 0.2em 0;
	}

	.side-drawer ul:last-child {
	border: 0;
	}

	.side-drawer li {
	padding: 0;

	a {
	display: block;
	padding: 0.5em 0.85em;

	&:hover {
	background-color: $fallback--lightBg;
	background-color: var(--selectedMenuPopover, $fallback--lightBg);
	color: $fallback--text;
	color: var(--selectedMenuPopoverText, $fallback--text);
	--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
	--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
	}
	}
	}
	</style>
	diff --git a/src/components/status/status.vue b/src/components/status/status.vue
	index a04b501a03..dd7cd57916 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,944 +1,944 @@
	<template>
	<!-- eslint-disable vue/no-v-html -->
	<div
	v-if="!hideStatus"
	class="status-el"
	:class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]"
	>
	<div
	v-if="error"
	class="alert error"
	>
	{{ error }}
	<i
	class="button-icon icon-cancel"
	@click="clearError"
	/>
	</div>
	<template v-if="muted && !isPreview">
	<div class="media status container muted">
	<small>
	<router-link :to="userProfileLink">
	{{ status.user.screen_name }}
	</router-link>
	</small>
	<small class="muteWords">{{ muteWordHits.join(', ') }}</small>
	<a
	href="#"
	class="unmute"
	@click.prevent="toggleMute"
	><i class="button-icon icon-eye-off" /></a>
	</div>
	</template>
	<template v-else>
	<div
	v-if="showPinned"
	class="status-pin"
	>
	<i class="fa icon-pin faint" />
	<span class="faint">{{ $t('status.pinned') }}</span>
	</div>
	<div
	v-if="retweet && !noHeading && !inConversation"
	:class="[repeaterClass, { highlighted: repeaterStyle }]"
	:style="[repeaterStyle]"
	class="media container retweet-info"
	>
	<UserAvatar
	v-if="retweet"
	class="media-left"
	:better-shadow="betterShadow"
	:user="statusoid.user"
	/>
	<div class="media-body faint">
	<span class="user-name">
	<router-link
	v-if="retweeterHtml"
	:to="retweeterProfileLink"
	v-html="retweeterHtml"
	/>
	<router-link
	v-else
	:to="retweeterProfileLink"
	>{{ retweeter }}</router-link>
	</span>
	<i
	class="fa icon-retweet retweeted"
	:title="$t('tool_tip.repeat')"
	/>
	{{ $t('timeline.repeated') }}
	</div>
	</div>

	<div
	:class="[userClass, { highlighted: userStyle, 'is-retweet': retweet && !inConversation }]"
	:style="[ userStyle ]"
	class="media status"
	:data-tags="tags"
	>
	<div
	v-if="!noHeading"
	class="media-left"
	>
	<router-link
	:to="userProfileLink"
	@click.stop.prevent.capture.native="toggleUserExpanded"
	>
	<UserAvatar
	:compact="compact"
	:better-shadow="betterShadow"
	:user="status.user"
	/>
	</router-link>
	</div>
	<div class="status-body">
	<UserCard
	v-if="userExpanded"
	- :userId="status.user.id"
	+ :user-id="status.user.id"
	:rounded="true"
	:bordered="true"
	class="status-usercard"
	/>
	<div
	v-if="!noHeading"
	class="media-heading"
	>
	<div class="heading-name-row">
	<div class="name-and-account-name">
	<h4
	v-if="status.user.name_html"
	class="user-name"
	v-html="status.user.name_html"
	/>
	<h4
	v-else
	class="user-name"
	>
	{{ status.user.name }}
	</h4>
	<router-link
	class="account-name"
	:to="userProfileLink"
	>
	{{ status.user.screen_name }}
	</router-link>
	</div>

	<span class="heading-right">
	<router-link
	class="timeago faint-link"
	:to="{ name: 'conversation', params: { id: status.id } }"
	>
	<Timeago
	:time="status.created_at"
	:auto-update="60"
	/>
	</router-link>
	<div
	v-if="status.visibility"
	class="button-icon visibility-icon"
	>
	<i
	:class="visibilityIcon(status.visibility)"
	:title="status.visibility \| capitalize"
	/>
	</div>
	<a
	v-if="!status.is_local && !isPreview"
	:href="status.external_url"
	target="_blank"
	class="source_url"
	title="Source"
	>
	<i class="button-icon icon-link-ext-alt" />
	</a>
	<template v-if="expandable && !isPreview">
	<a
	href="#"
	title="Expand"
	@click.prevent="toggleExpanded"
	>
	<i class="button-icon icon-plus-squared" />
	</a>
	</template>
	<a
	v-if="unmuted"
	href="#"
	@click.prevent="toggleMute"
	><i class="button-icon icon-eye-off" /></a>
	</span>
	</div>

	<div class="heading-reply-row">
	<div
	v-if="isReply"
	class="reply-to-and-accountname"
	>
	<StatusPopover
	v-if="!isPreview"
	:status-id="status.in_reply_to_status_id"
	class="reply-to-popover"
	style="min-width: 0"
	>
	<a
	class="reply-to"
	href="#"
	:aria-label="$t('tool_tip.reply')"
	@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	>
	<i class="button-icon icon-reply" />
	<span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
	</a>
	</StatusPopover>
	<span
	v-else
	class="reply-to"
	>
	<span class="reply-to-text">{{ $t('status.reply_to') }}</span>
	</span>
	<router-link :to="replyProfileLink">
	{{ replyToName }}
	</router-link>
	<span
	v-if="replies && replies.length"
	class="faint replies-separator"
	>
	-
	</span>
	</div>
	<div
	v-if="inConversation && !isPreview && replies && replies.length"
	class="replies"
	>
	<span class="faint">{{ $t('status.replies_list') }}</span>
	<StatusPopover
	v-for="reply in replies"
	:key="reply.id"
	:status-id="reply.id"
	>
	<a
	href="#"
	class="reply-link"
	@click.prevent="gotoOriginal(reply.id)"
	>{{ reply.name }}</a>
	</StatusPopover>
	</div>
	</div>
	</div>

	<div
	v-if="longSubject"
	class="status-content-wrapper"
	:class="{ 'tall-status': !showingLongSubject }"
	>
	<a
	v-if="!showingLongSubject"
	class="tall-status-hider"
	:class="{ 'tall-status-hider_focused': isFocused }"
	href="#"
	@click.prevent="showingLongSubject=true"
	>{{ $t("general.show_more") }}</a>
	<div
	class="status-content media-body"
	@click.prevent="linkClicked"
	v-html="contentHtml"
	/>
	<a
	v-if="showingLongSubject"
	href="#"
	class="status-unhider"
	@click.prevent="showingLongSubject=false"
	>{{ $t("general.show_less") }}</a>
	</div>
	<div
	v-else
	:class="{'tall-status': hideTallStatus}"
	class="status-content-wrapper"
	>
	<a
	v-if="hideTallStatus"
	class="tall-status-hider"
	:class="{ 'tall-status-hider_focused': isFocused }"
	href="#"
	@click.prevent="toggleShowMore"
	>{{ $t("general.show_more") }}</a>
	<div
	v-if="!hideSubjectStatus"
	class="status-content media-body"
	@click.prevent="linkClicked"
	v-html="contentHtml"
	/>
	<div
	v-else
	class="status-content media-body"
	@click.prevent="linkClicked"
	v-html="status.summary_html"
	/>
	<a
	v-if="hideSubjectStatus"
	href="#"
	class="cw-status-hider"
	@click.prevent="toggleShowMore"
	>
	{{ $t("general.show_more") }}
	<span
	v-if="hasImageAttachments"
	class="icon-picture"
	/>
	<span
	v-if="hasVideoAttachments"
	class="icon-video"
	/>
	<span
	v-if="status.card"
	class="icon-link"
	/>
	</a>
	<a
	v-if="showingMore"
	href="#"
	class="status-unhider"
	@click.prevent="toggleShowMore"
	>{{ $t("general.show_less") }}</a>
	</div>

	<div v-if="status.poll && status.poll.options">
	<poll :base-poll="status.poll" />
	</div>

	<div
	v-if="status.attachments && (!hideSubjectStatus \|\| showingLongSubject)"
	class="attachments media-body"
	>
	<attachment
	v-for="attachment in nonGalleryAttachments"
	:key="attachment.id"
	class="non-gallery"
	:size="attachmentSize"
	:nsfw="nsfwClickthrough"
	:attachment="attachment"
	:allow-play="true"
	:set-media="setMedia()"
	/>
	<gallery
	v-if="galleryAttachments.length > 0"
	:nsfw="nsfwClickthrough"
	:attachments="galleryAttachments"
	:set-media="setMedia()"
	/>
	</div>

	<div
	v-if="status.card && !hideSubjectStatus && !noHeading"
	class="link-preview media-body"
	>
	<link-preview
	:card="status.card"
	:size="attachmentSize"
	:nsfw="nsfwClickthrough"
	/>
	</div>

	<transition name="fade">
	<div
	v-if="!hidePostStats && isFocused && combinedFavsAndRepeatsUsers.length > 0"
	class="favs-repeated-users"
	>
	<div class="stats">
	<div
	v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0"
	class="stat-count"
	>
	<a class="stat-title">{{ $t('status.repeats') }}</a>
	<div class="stat-number">
	{{ statusFromGlobalRepository.rebloggedBy.length }}
	</div>
	</div>
	<div
	v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0"
	class="stat-count"
	>
	<a class="stat-title">{{ $t('status.favorites') }}</a>
	<div class="stat-number">
	{{ statusFromGlobalRepository.favoritedBy.length }}
	</div>
	</div>
	<div class="avatar-row">
	<AvatarList :users="combinedFavsAndRepeatsUsers" />
	</div>
	</div>
	</div>
	</transition>

	<EmojiReactions
	v-if="(mergedConfig.emojiReactionsOnTimeline \|\| isFocused) && (!noHeading && !isPreview)"
	:status="status"
	/>

	<div
	v-if="!noHeading && !isPreview"
	class="status-actions media-body"
	>
	<div>
	<i
	v-if="loggedIn"
	class="button-icon icon-reply"
	:title="$t('tool_tip.reply')"
	:class="{'button-icon-active': replying}"
	@click.prevent="toggleReplying"
	/>
	<i
	v-else
	class="button-icon button-icon-disabled icon-reply"
	:title="$t('tool_tip.reply')"
	/>
	<span v-if="status.replies_count > 0">{{ status.replies_count }}</span>
	</div>
	<retweet-button
	:visibility="status.visibility"
	:logged-in="loggedIn"
	:status="status"
	/>
	<favorite-button
	:logged-in="loggedIn"
	:status="status"
	/>
	<ReactButton
	:logged-in="loggedIn"
	:status="status"
	/>
	<extra-buttons
	:status="status"
	@onError="showError"
	@onSuccess="clearError"
	/>
	</div>
	</div>
	</div>
	<div
	v-if="replying"
	class="container"
	>
	<PostStatusForm
	class="reply-body"
	:reply-to="status.id"
	:attentions="status.attentions"
	:replied-user="status.user"
	:copy-message-scope="status.visibility"
	:subject="replySubject"
	@posted="toggleReplying"
	/>
	</div>
	</template>
	</div>
	<!-- eslint-enable vue/no-v-html -->
	</template>

	<script src="./status.js" ></script>
	<style lang="scss">
	@import '../../_variables.scss';

	$status-margin: 0.75em;

	.status-body {
	flex: 1;
	min-width: 0;
	}

	.status-pin {
	padding: $status-margin $status-margin 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	}

	.media-left {
	margin-right: $status-margin;
	}

	.status-el {
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	border-left-width: 0px;
	min-width: 0;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);

	border-left: 4px $fallback--cRed;
	border-left: 4px var(--cRed, $fallback--cRed);

	&_focused {
	background-color: $fallback--lightBg;
	background-color: var(--selectedPost, $fallback--lightBg);
	color: $fallback--text;
	color: var(--selectedPostText, $fallback--text);
	--lightText: var(--selectedPostLightText, $fallback--light);
	--faint: var(--selectedPostFaintText, $fallback--faint);
	--faintLink: var(--selectedPostFaintLink, $fallback--faint);
	--postLink: var(--selectedPostPostLink, $fallback--faint);
	--postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint);
	--icon: var(--selectedPostIcon, $fallback--icon);
	}

	.timeline & {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	}

	.media-body {
	flex: 1;
	padding: 0;
	}

	.status-usercard {
	margin-bottom: $status-margin;
	}

	.user-name {
	white-space: nowrap;
	font-size: 14px;
	overflow: hidden;
	flex-shrink: 0;
	max-width: 85%;
	font-weight: bold;

	img {
	width: 14px;
	height: 14px;
	vertical-align: middle;
	object-fit: contain
	}
	}

	.media-heading {
	padding: 0;
	vertical-align: bottom;
	flex-basis: 100%;
	margin-bottom: 0.5em;

	small {
	font-weight: lighter;
	}

	.heading-name-row {
	padding: 0;
	display: flex;
	justify-content: space-between;
	line-height: 18px;

	a {
	display: inline-block;
	word-break: break-all;
	}

	.name-and-account-name {
	display: flex;
	min-width: 0;
	}

	.user-name {
	flex-shrink: 1;
	margin-right: 0.4em;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	.account-name {
	min-width: 1.6em;
	margin-right: 0.4em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1 1 0;
	}
	}

	.heading-right {
	display: flex;
	flex-shrink: 0;
	}

	.timeago {
	margin-right: 0.2em;
	}

	.heading-reply-row {
	position: relative;
	align-content: baseline;
	font-size: 12px;
	line-height: 18px;
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;

	> .reply-to-and-accountname > a {
	overflow: hidden;
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: break-all;
	}
	}

	.reply-to-and-accountname {
	display: flex;
	height: 18px;
	margin-right: 0.5em;
	max-width: 100%;
	.icon-reply {
	transform: scaleX(-1);
	}
	}

	.reply-info {
	display: flex;
	}

	.reply-to-popover {
	min-width: 0;
	}

	.reply-to {
	display: flex;
	}

	.reply-to-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0 0.4em 0 0.2em;
	}

	.replies-separator {
	margin-left: 0.4em;
	}

	.replies {
	line-height: 18px;
	font-size: 12px;
	display: flex;
	flex-wrap: wrap;
	& > * {
	margin-right: 0.4em;
	}
	}

	.reply-link {
	height: 17px;
	}
	}

	.tall-status {
	position: relative;
	height: 220px;
	overflow-x: hidden;
	overflow-y: hidden;
	z-index: 1;
	.status-content {
	height: 100%;
	mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
	linear-gradient(to top, white, white);
	/* Autoprefixed seem to ignore this one, and also syntax is different */
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	}
	}

	.tall-status-hider {
	display: inline-block;
	word-break: break-all;
	position: absolute;
	height: 70px;
	margin-top: 150px;
	width: 100%;
	text-align: center;
	line-height: 110px;
	z-index: 2;
	}

	.status-unhider, .cw-status-hider {
	width: 100%;
	text-align: center;
	display: inline-block;
	word-break: break-all;
	}

	.status-content {
	font-family: var(--postFont, sans-serif);
	line-height: 1.4em;
	white-space: pre-wrap;

	a {
	color: $fallback--link;
	color: var(--postLink, $fallback--link);
	}

	img, video {
	max-width: 100%;
	max-height: 400px;
	vertical-align: middle;
	object-fit: contain;

	&.emoji {
	width: 32px;
	height: 32px;
	}
	}

	blockquote {
	margin: 0.2em 0 0.2em 2em;
	font-style: italic;
	}

	pre {
	overflow: auto;
	}

	code, samp, kbd, var, pre {
	font-family: var(--postCodeFont, monospace);
	}

	p {
	margin: 0 0 1em 0;
	}

	p:last-child {
	margin: 0 0 0 0;
	}

	h1 {
	font-size: 1.1em;
	line-height: 1.2em;
	margin: 1.4em 0;
	}

	h2 {
	font-size: 1.1em;
	margin: 1.0em 0;
	}

	h3 {
	font-size: 1em;
	margin: 1.2em 0;
	}

	h4 {
	margin: 1.1em 0;
	}
	}

	.retweet-info {
	padding: 0.4em $status-margin;
	margin: 0;

	.avatar.still-image {
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	margin-left: 28px;
	width: 20px;
	height: 20px;
	}

	.media-body {
	font-size: 1em;
	line-height: 22px;

	display: flex;
	align-content: center;
	flex-wrap: wrap;

	.user-name {
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;

	img {
	width: 14px;
	height: 14px;
	vertical-align: middle;
	object-fit: contain
	}
	}

	i {
	padding: 0 0.2em;
	}

	a {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	}
	}
	}

	.status-fadein {
	animation-duration: 0.4s;
	animation-name: fadein;
	}

	@keyframes fadein {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}

	.greentext {
	color: $fallback--cGreen;
	color: var(--cGreen, $fallback--cGreen);
	}

	.status-conversation {
	border-left-style: solid;
	}

	.status-actions {
	position: relative;
	width: 100%;
	display: flex;
	margin-top: $status-margin;

	> * {
	max-width: 4em;
	flex: 1;
	}
	}

	.button-icon.icon-reply {
	&:not(.button-icon-disabled):hover,
	&.button-icon-active {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}
	}

	.button-icon.icon-reply {
	&:not(.button-icon-disabled) {
	cursor: pointer;
	}
	}

	.status:hover .animated.avatar {
	canvas {
	display: none;
	}
	img {
	visibility: visible;
	}
	}

	.status {
	display: flex;
	padding: $status-margin;
	&.is-retweet {
	padding-top: 0;
	}
	}

	.status-conversation:last-child {
	border-bottom: none;
	}

	.muted {
	padding: 0.25em 0.5em;
	button {
	margin-left: auto;
	}

	.muteWords {
	margin-left: 10px;
	}
	}

	a.unmute {
	display: block;
	margin-left: auto;
	}

	.reply-body {
	flex: 1;
	}

	.timeline :not(.panel-disabled) > {
	.status-el:last-child {
	border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
	border-bottom: none;
	}
	}

	.favs-repeated-users {
	margin-top: $status-margin;

	.stats {
	width: 100%;
	display: flex;
	line-height: 1em;

	.stat-count {
	margin-right: $status-margin;

	.stat-title {
	color: var(--faint, $fallback--faint);
	font-size: 12px;
	text-transform: uppercase;
	position: relative;
	}

	.stat-number {
	font-weight: bolder;
	font-size: 16px;
	line-height: 1em;
	}
	}

	.avatar-row {
	flex: 1;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;

	&::before {
	content: '';
	position: absolute;
	height: 100%;
	width: 1px;
	left: 0;
	background-color: var(--faint, $fallback--faint);
	}
	}
	}
	}

	@media all and (max-width: 800px) {
	.status-el {
	.retweet-info {
	.avatar.still-image {
	margin-left: 20px;
	}
	}
	}
	.status {
	max-width: 100%;
	}

	.status .avatar.still-image {
	width: 40px;
	height: 40px;

	&.avatar-compact {
	width: 32px;
	height: 32px;
	}
	}
	}

	</style>
	diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
	index 7237fdfc0a..724dcc4ba3 100644
	--- a/src/services/entity_normalizer/entity_normalizer.service.js
	+++ b/src/services/entity_normalizer/entity_normalizer.service.js
	@@ -1,371 +1,372 @@
	import escape from 'escape-html'

	const qvitterStatusType = (status) => {
	if (status.is_post_verb) {
	return 'status'
	}

	if (status.retweeted_status) {
	return 'retweet'
	}

	if ((typeof status.uri === 'string' && status.uri.match(/(fave\|objectType=Favourite)/)) \|\|
	(typeof status.text === 'string' && status.text.match(/favorited/))) {
	return 'favorite'
	}

	if (status.text.match(/deleted notice {{tag/) \|\| status.qvitter_delete_notice) {
	return 'deletion'
	}

	if (status.text.match(/started following/) \|\| status.activity_type === 'follow') {
	return 'follow'
	}

	return 'unknown'
	}

	export const parseUser = (data) => {
	const output = {}
	const masto = data.hasOwnProperty('acct')
	// case for users in "mentions" property for statuses in MastoAPI
	const mastoShort = masto && !data.hasOwnProperty('avatar')

	output.id = String(data.id)

	if (masto) {
	output.screen_name = data.acct
	output.statusnet_profile_url = data.url

	// There's nothing else to get
	if (mastoShort) {
	return output
	}

	output.name = data.display_name
	output.name_html = addEmojis(escape(data.display_name), data.emojis)

	output.description = data.note
	output.description_html = addEmojis(data.note, data.emojis)

	output.fields = data.fields
	output.fields_html = data.fields.map(field => {
	return {
	name: addEmojis(field.name, data.emojis),
	value: addEmojis(field.value, data.emojis)
	}
	})

	// Utilize avatar_static for gif avatars?
	output.profile_image_url = data.avatar
	output.profile_image_url_original = data.avatar

	// Same, utilize header_static?
	output.cover_photo = data.header

	output.friends_count = data.following_count

	output.bot = data.bot

	if (data.pleroma) {
	const relationship = data.pleroma.relationship

	output.background_image = data.pleroma.background_image
	output.token = data.pleroma.chat_token

	if (relationship) {
	output.relationship = relationship
	}

	output.allow_following_move = data.pleroma.allow_following_move

	output.hide_follows = data.pleroma.hide_follows
	output.hide_followers = data.pleroma.hide_followers
	output.hide_follows_count = data.pleroma.hide_follows_count
	output.hide_followers_count = data.pleroma.hide_followers_count

	output.rights = {
	moderator: data.pleroma.is_moderator,
	admin: data.pleroma.is_admin
	}
	// TODO: Clean up in UI? This is duplication from what BE does for qvitterapi
	if (output.rights.admin) {
	output.role = 'admin'
	} else if (output.rights.moderator) {
	output.role = 'moderator'
	} else {
	output.role = 'member'
	}
	}

	if (data.source) {
	output.description = data.source.note
	output.default_scope = data.source.privacy
	output.fields = data.source.fields
	if (data.source.pleroma) {
	output.no_rich_text = data.source.pleroma.no_rich_text
	output.show_role = data.source.pleroma.show_role
	output.discoverable = data.source.pleroma.discoverable
	}
	}

	// TODO: handle is_local
	output.is_local = !output.screen_name.includes('@')
	} else {
	output.screen_name = data.screen_name

	output.name = data.name
	output.name_html = data.name_html

	output.description = data.description
	output.description_html = data.description_html

	output.profile_image_url = data.profile_image_url
	output.profile_image_url_original = data.profile_image_url_original

	output.cover_photo = data.cover_photo

	output.friends_count = data.friends_count

	// output.bot = ??? missing

	output.statusnet_profile_url = data.statusnet_profile_url

	output.is_local = data.is_local
	output.role = data.role
	output.show_role = data.show_role

	if (data.rights) {
	output.rights = {
	moderator: data.rights.delete_others_notice,
	admin: data.rights.admin
	}
	}
	output.no_rich_text = data.no_rich_text
	output.default_scope = data.default_scope
	output.hide_follows = data.hide_follows
	output.hide_followers = data.hide_followers
	output.hide_follows_count = data.hide_follows_count
	output.hide_followers_count = data.hide_followers_count
	output.background_image = data.background_image
	// Websocket token
	output.token = data.token

	// Convert relationsip data to expected format
	output.relationship = {
	muting: data.muted,
	blocking: data.statusnet_blocking,
	followed_by: data.follows_you,
	following: data.following
	}
	}

	output.created_at = new Date(data.created_at)
	output.locked = data.locked
	output.followers_count = data.followers_count
	output.statuses_count = data.statuses_count
	output.friendIds = []
	output.followerIds = []
	output.pinnedStatusIds = []

	if (data.pleroma) {
	output.follow_request_count = data.pleroma.follow_request_count

	output.tags = data.pleroma.tags
	output.deactivated = data.pleroma.deactivated

	output.notification_settings = data.pleroma.notification_settings
	}

	output.tags = output.tags \|\| []
	output.rights = output.rights \|\| {}
	output.notification_settings = output.notification_settings \|\| {}

	return output
	}

	export const parseAttachment = (data) => {
	const output = {}
	const masto = !data.hasOwnProperty('oembed')

	if (masto) {
	// Not exactly same...
	output.mimetype = data.pleroma ? data.pleroma.mime_type : data.type
	output.meta = data.meta // not present in BE yet
	output.id = data.id
	} else {
	output.mimetype = data.mimetype
	// output.meta = ??? missing
	}

	output.url = data.url
	output.description = data.description

	return output
	}
	export const addEmojis = (string, emojis) => {
	const matchOperatorsRegex = /[\|\\{}()[\]^$+*?.-]/g
	return emojis.reduce((acc, emoji) => {
	const regexSafeShortCode = emoji.shortcode.replace(matchOperatorsRegex, '\\$&')
	return acc.replace(
	new RegExp(`:${regexSafeShortCode}:`, 'g'),
	`<img src='${emoji.url}' alt='${emoji.shortcode}' title='${emoji.shortcode}' class='emoji' />`
	)
	}, string)
	}

	export const parseStatus = (data) => {
	const output = {}
	const masto = data.hasOwnProperty('account')

	if (masto) {
	output.favorited = data.favourited
	output.fave_num = data.favourites_count

	output.repeated = data.reblogged
	output.repeat_num = data.reblogs_count

	output.type = data.reblog ? 'retweet' : 'status'
	output.nsfw = data.sensitive

	output.statusnet_html = addEmojis(data.content, data.emojis)

	output.tags = data.tags

	if (data.pleroma) {
	const { pleroma } = data
	output.text = pleroma.content ? data.pleroma.content['text/plain'] : data.content
	output.summary = pleroma.spoiler_text ? data.pleroma.spoiler_text['text/plain'] : data.spoiler_text
	output.statusnet_conversation_id = data.pleroma.conversation_id
	output.is_local = pleroma.local
	output.in_reply_to_screen_name = data.pleroma.in_reply_to_account_acct
	output.thread_muted = pleroma.thread_muted
	output.emoji_reactions = pleroma.emoji_reactions
	} else {
	output.text = data.content
	output.summary = data.spoiler_text
	}

	output.in_reply_to_status_id = data.in_reply_to_id
	output.in_reply_to_user_id = data.in_reply_to_account_id
	output.replies_count = data.replies_count

	if (output.type === 'retweet') {
	output.retweeted_status = parseStatus(data.reblog)
	}

	output.summary_html = addEmojis(escape(data.spoiler_text), data.emojis)
	output.external_url = data.url
	output.poll = data.poll
	output.pinned = data.pinned
	output.muted = data.muted
	} else {
	output.favorited = data.favorited
	output.fave_num = data.fave_num

	output.repeated = data.repeated
	output.repeat_num = data.repeat_num

	// catchall, temporary
	// Object.assign(output, data)

	output.type = qvitterStatusType(data)

	if (data.nsfw === undefined) {
	output.nsfw = isNsfw(data)
	if (data.retweeted_status) {
	output.nsfw = data.retweeted_status.nsfw
	}
	} else {
	output.nsfw = data.nsfw
	}

	output.statusnet_html = data.statusnet_html
	output.text = data.text

	output.in_reply_to_status_id = data.in_reply_to_status_id
	output.in_reply_to_user_id = data.in_reply_to_user_id
	output.in_reply_to_screen_name = data.in_reply_to_screen_name
	output.statusnet_conversation_id = data.statusnet_conversation_id

	if (output.type === 'retweet') {
	output.retweeted_status = parseStatus(data.retweeted_status)
	}

	output.summary = data.summary
	output.summary_html = data.summary_html
	output.external_url = data.external_url
	output.is_local = data.is_local
	}

	output.id = String(data.id)
	output.visibility = data.visibility
	output.card = data.card
	output.created_at = new Date(data.created_at)

	// Converting to string, the right way.
	output.in_reply_to_status_id = output.in_reply_to_status_id
	? String(output.in_reply_to_status_id)
	: null
	output.in_reply_to_user_id = output.in_reply_to_user_id
	? String(output.in_reply_to_user_id)
	: null

	output.user = parseUser(masto ? data.account : data.user)

	output.attentions = ((masto ? data.mentions : data.attentions) \|\| []).map(parseUser)

	output.attachments = ((masto ? data.media_attachments : data.attachments) \|\| [])
	.map(parseAttachment)

	const retweetedStatus = masto ? data.reblog : data.retweeted_status
	if (retweetedStatus) {
	output.retweeted_status = parseStatus(retweetedStatus)
	}

	output.favoritedBy = []
	output.rebloggedBy = []

	return output
	}

	export const parseNotification = (data) => {
	const mastoDict = {
	'favourite': 'like',
	'reblog': 'repeat'
	}
	const masto = !data.hasOwnProperty('ntype')
	const output = {}
	+
	if (masto) {
	output.type = mastoDict[data.type] \|\| data.type
	output.seen = data.pleroma.is_seen
	output.status = output.type === 'follow' \|\| output.type === 'move'
	? null
	: parseStatus(data.status)
	output.action = output.status // TODO: Refactor, this is unneeded
	output.target = output.type !== 'move'
	? null
	: parseUser(data.target)
	output.from_profile = parseUser(data.account)
	output.emoji = data.emoji
	} else {
	const parsedNotice = parseStatus(data.notice)
	output.type = data.ntype
	output.seen = Boolean(data.is_seen)
	output.status = output.type === 'like'
	? parseStatus(data.notice.favorited_status)
	: parsedNotice
	output.action = parsedNotice
	output.from_profile = parseUser(data.from_profile)
	}

	output.created_at = new Date(data.created_at)
	output.id = parseInt(data.id)

	return output
	}

	const isNsfw = (status) => {
	const nsfwRegex = /#nsfw/i
	return (status.tags \|\| []).includes('nsfw') \|\| !!(status.text \|\| '').match(nsfwRegex)
	}

File Metadata

Mime Type: text/x-diff
Expires: Fri, Aug 28, 9:52 PM (1 d, 41 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1736668
Default Alt Text: (44 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions