No OneTemporary
Actions

Size

91 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.scss b/src/App.scss
	index f66167b708..598735d9ff 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,765 +1,769 @@
	@import './_variables.scss';

	#app {
	min-height: 100vh;
	max-width: 100%;
	overflow: hidden;
	}

	.app-bg-wrapper {
	position: fixed;
	z-index: -1;
	height: 100%;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0 50%;
	}

	i {
	user-select: none;
	}

	h4 {
	margin: 0;
	}

	#content {
	box-sizing: border-box;
	padding-top: 60px;
	margin: auto;
	min-height: 100vh;
	max-width: 980px;
	background-color: rgba(0,0,0,0.15);
	align-content: flex-start;
	}

	.text-center {
	text-align: center;
	}

	body {
	font-family: sans-serif;
	font-family: var(--interfaceFont, sans-serif);
	font-size: 14px;
	margin: 0;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	max-width: 100vw;
	overflow-x: hidden;
	}

	a {
	text-decoration: none;
	color: $fallback--link;
	color: var(--link, $fallback--link);
	}

	button {
	user-select: none;
	color: $fallback--text;
	color: var(--btnText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btn, $fallback--fg);
	border: none;
	border-radius: $fallback--btnRadius;
	border-radius: var(--btnRadius, $fallback--btnRadius);
	cursor: pointer;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
	box-shadow: var(--buttonShadow);
	font-size: 14px;
	font-family: sans-serif;
	font-family: var(--interfaceFont, sans-serif);

	i[class*=icon-] {
	color: $fallback--text;
	color: var(--btnText, $fallback--text);
	}

	&::-moz-focus-inner {
	border: none;
	}

	&:hover {
	box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
	box-shadow: var(--buttonHoverShadow);
	}

	&:active {
	box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
	box-shadow: var(--buttonPressedShadow);
	}

	&:disabled {
	cursor: not-allowed;
	opacity: 0.5;
	}

	&.pressed {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg)
	}
	}

	label.select {
	padding: 0;

	}

	input, textarea, .select {
	border: none;
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);
	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 0px 2px 0px rgba(0, 0, 0, 1) inset;
	box-shadow: var(--inputShadow);
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	color: $fallback--lightText;
	color: var(--inputText, $fallback--lightText);
	font-family: sans-serif;
	font-family: var(--inputFont, sans-serif);
	font-size: 14px;
	padding: 8px .5em;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	height: 28px;
	line-height: 16px;
	hyphens: none;

	&:disabled, &[disabled=disabled] {
	cursor: not-allowed;
	opacity: 0.5;
	}

	.icon-down-open {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 5px;
	height: 100%;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	line-height: 28px;
	z-index: 0;
	pointer-events: none;
	}

	select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	margin: 0;
	padding: 0 2em 0 .2em;
	font-family: sans-serif;
	font-family: var(--inputFont, sans-serif);
	font-size: 14px;
	width: 100%;
	z-index: 1;
	height: 28px;
	line-height: 16px;
	}

	&[type=range] {
	background: none;
	border: none;
	margin: 0;
	box-shadow: none;
	flex: 1;
	}

	&[type=radio],
	&[type=checkbox] {
	display: none;
	&:checked + label::before {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	&:disabled {
	&,
	& + label,
	& + label::before {
	opacity: .5;
	}
	}
	+ label::before {
	display: inline-block;
	content: '✔';
	transition: color 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: $fallback--checkboxRadius;
	border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
	box-shadow: 0px 0px 2px black inset;
	box-shadow: var(--inputShadow);
	margin-right: .5em;
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	vertical-align: top;
	text-align: center;
	line-height: 1.1em;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	box-sizing: border-box;
	}
	}
	}

	option {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	}

	i[class*=icon-] {
	color: $fallback--icon;
	color: var(--icon, $fallback--icon)
	}


	.container {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0 10px 0 10px;
	}

	.item {
	flex: 1;
	line-height: 50px;
	height: 50px;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;

	.nav-icon {
	margin-left: 0.4em;
	}

	&.right {
	justify-content: flex-end;
	}
	}

	.auto-size {
	flex: 1
	}

	.nav-bar {
	padding: 0;
	width: 100%;
	align-items: center;
	position: fixed;
	height: 50px;

	.logo {
	display: flex;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	align-items: stretch;
	justify-content: center;
	flex: 0 0 auto;
	z-index: -1;
	transition: opacity;
	transition-timing-function: ease-out;
	transition-duration: 100ms;

	.mask {
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: $fallback--fg;
	background-color: var(--topBarText, $fallback--fg);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}

	img {
	height: 100%;
	object-fit: contain;
	display: block;
	flex: 0;
	}
	}

	.inner-nav {
	margin: auto;
	box-sizing: border-box;
	padding-left: 10px;
	padding-right: 10px;
	display: flex;
	align-items: center;
	flex-basis: 970px;
	height: 50px;

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

	main-router {
	flex: 1;
	}

	.status.compact {
	color: rgba(0, 0, 0, 0.42);
	font-weight: 300;

	p {
	margin: 0;
	font-size: 0.8em
	}
	}

	/* Panel */

	.panel {
	display: flex;
	position: relative;

	flex-direction: column;
	margin: 0.5em;

	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);

	&::after, & {
	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	}

	&::after {
	content: '';
	position: absolute;

	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	pointer-events: none;

	box-shadow: 1px 1px 4px rgba(0,0,0,.6);
	box-shadow: var(--panelShadow);
	}
	}

	.panel-body:empty::before {
	content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
	display: block;
	margin: 1em;
	text-align: center;
	}

	.panel-heading {
	display: flex;
	border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
	border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
	background-size: cover;
	padding: .6em .6em;
	text-align: left;
	line-height: 28px;
	color: var(--panelText);
	background-color: $fallback--fg;
	background-color: var(--panel, $fallback--fg);
	align-items: baseline;
	box-shadow: var(--panelHeaderShadow);

	.title {
	flex: 1 0 auto;
	font-size: 1.3em;
	}

	.faint {
	background-color: transparent;
	color: $fallback--faint;
	color: var(--panelFaint, $fallback--faint);
	}

	.alert {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
	}

	button {
	flex-shrink: 0;
	}

	button, .alert {
	// height: 100%;
	line-height: 21px;
	min-height: 0;
	box-sizing: border-box;
	margin: 0;
	margin-left: .25em;
	min-width: 1px;
	align-self: stretch;
	}

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

	.panel-heading.stub {
	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	}

	.panel-footer {
	border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);


	.faint {
	color: $fallback--faint;
	color: var(--panelFaint, $fallback--faint);
	}

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

	.panel-body > p {
	line-height: 18px;
	padding: 1em;
	margin: 0;
	}

	.container > * {
	min-width: 0px;
	}

	.fa {
	color: grey;
	}

	nav {
	z-index: 1000;
	color: var(--topBarText);
	background-color: $fallback--fg;
	background-color: var(--topBar, $fallback--fg);
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	box-shadow: 0px 0px 4px rgba(0,0,0,.6);
	box-shadow: var(--topBarShadow);

	.back-button {
	display: block;
	max-width: 99px;
	transition-property: opacity, max-width;
	transition-duration: 300ms;
	transition-timing-function: ease-out;

	i {
	margin: 0 1em;
	}

	&.hidden {
	opacity: 0;
	max-width: 5px;
	}
	}
	}

	.menu-button {
	display: none;
	position: relative;
	}

	.alert-dot {
	border-radius: 100%;
	height: 8px;
	width: 8px;
	position: absolute;
	left: calc(50% - 4px);
	top: calc(50% - 4px);
	margin-left: 6px;
	margin-top: -6px;
	background-color: $fallback--cRed;
	background-color: var(--badgeNotification, $fallback--cRed);
	}

	.fade-enter-active, .fade-leave-active {
	transition: opacity .2s
	}
	.fade-enter, .fade-leave-active {
	opacity: 0
	}

	.main {
	flex-basis: 50%;
	flex-grow: 1;
	flex-shrink: 1;
	}

	.sidebar-bounds {
	flex: 0;
	flex-basis: 35%;
	}

	.sidebar-flexer {
	flex: 1;
	flex-basis: 345px;
	width: 365px;
	}

	.mobile-shown {
	display: none;
	}

	.panel-switcher {
	display: none;
	width: 100%;
	height: 46px;

	button {
	display: block;
	flex: 1;
	max-height: 32px;
	margin: 0.5em;
	padding: 0.5em;
	}
	}

	@media all and (min-width: 800px) {
	body {
	overflow-y: scroll;
	}

	nav {
	.back-button {
	display: none;
	}
	}

	.sidebar-bounds {
	overflow: hidden;
	max-height: 100vh;
	width: 345px;
	position: fixed;
	margin-top: -10px;

	.sidebar-scroller {
	height: 96vh;
	width: 365px;
	padding-top: 10px;
	padding-right: 50px;
	overflow-x: hidden;
	overflow-y: scroll;
	}

	.sidebar {
	width: 345px;
	}
	}
	.sidebar-flexer {
	max-height: 96vh;
	flex-shrink: 0;
	flex-grow: 0;
	}
	}
	.badge {
	display: inline-block;
	border-radius: 99px;
	min-width: 22px;
	max-width: 22px;
	min-height: 22px;
	max-height: 22px;
	font-size: 15px;
	line-height: 22px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	padding: 0;

	&.badge-notification {
	background-color: $fallback--cRed;
	background-color: var(--badgeNotification, $fallback--cRed);
	color: white;
	color: var(--badgeNotificationText, white);
	}
	}

	.alert {
	margin: 0.35em;
	padding: 0.25em;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	min-height: 28px;
	line-height: 28px;

	&.error {
	background-color: $fallback--alertError;
	background-color: var(--alertError, $fallback--alertError);
	color: $fallback--text;
	color: var(--alertErrorText, $fallback--text);

	.panel-heading & {
	color: $fallback--text;
	color: var(--alertErrorPanelText, $fallback--text);
	}
	}
	}

	.faint {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	}
	+
	+.faint-link {
	+ color: $fallback--faint;
	+ color: var(--faint, $fallback--faint);
	+
	+ &:hover {
	+ text-decoration: underline;
	+ }
	+}
	+
	@media all and (min-width: 800px) {
	.logo {
	opacity: 1 !important;
	}
	}

	.item.right {
	text-align: right;
	}

	.visibility-tray {
	font-size: 1.2em;
	padding: 3px;
	cursor: pointer;

	.selected {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}

	div {
	padding-top: 5px;
	}
	}

	.visibility-notice {
	padding: .5em;
	border: 1px solid $fallback--faint;
	border: 1px solid var(--faint, $fallback--faint);
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);
	}

	@keyframes modal-background-fadein {
	from {
	background-color: rgba(0, 0, 0, 0);
	}
	to {
	background-color: rgba(0, 0, 0, 0.5);
	}
	}

	.modal-view {
	z-index: 1000;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: auto;
	animation-duration: 0.2s;
	background-color: rgba(0, 0, 0, 0.5);
	animation-name: modal-background-fadein;
	}

	+.button-icon {
	+ font-size: 1.2em;
	+}
	+
	@keyframes shakeError {
	0% {
	transform: translateX(0);
	}
	15% {
	transform: translateX(0.375rem);
	}
	30% {
	transform: translateX(-0.375rem);
	}
	45% {
	transform: translateX(0.375rem);
	}
	60% {
	transform: translateX(-0.375rem);
	}
	75% {
	transform: translateX(0.375rem);
	}
	90% {
	transform: translateX(-0.375rem);
	}
	100% {
	transform: translateX(0);
	}
	}

	@media all and (max-width: 800px) {
	.mobile-hidden {
	display: none;
	}

	.panel-switcher {
	display: flex;
	}

	.container {
	padding: 0;
	}

	.panel {
	margin: 0.5em 0 0.5em 0;
	}

	- .button-icon {
	- font-size: 1.2em;
	- }
	-
	- .status .status-actions {
	- div {
	- max-width: 4em;
	- }
	- }
	-
	.menu-button {
	display: block;
	margin-right: 0.8em;
	}
	}

	.login-hint {
	text-align: center;

	@media all and (min-width: 801px) {
	display: none;
	}

	a {
	display: inline-block;
	padding: 1em 0px;
	width: 100%;
	}
	}

	.btn.btn-default {
	min-height: 28px;
	}
	diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
	index 7e972026e7..76affe2dbf 100644
	--- a/src/components/attachment/attachment.vue
	+++ b/src/components/attachment/attachment.vue
	@@ -1,239 +1,239 @@
	<template>
	<div v-if="usePlaceHolder" @click="openModal">
	<a class="placeholder"
	v-if="type !== 'html'"
	target="_blank" :href="attachment.url"
	>
	[{{nsfw ? "NSFW/" : ""}}{{type.toUpperCase()}}]
	</a>
	</div>
	<div
	v-else class="attachment"
	:class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
	v-show="!isEmpty"
	>
	<a class="image-attachment" v-if="hidden" :href="attachment.url" @click.prevent="toggleHidden">
	<img class="nsfw" :key="nsfwImage" :src="nsfwImage" :class="{'small': isSmall}"/>
	<i v-if="type === 'video'" class="play-icon icon-play-circled"></i>
	</a>
	<div class="hider" v-if="nsfw && hideNsfwLocal && !hidden">
	<a href="#" @click.prevent="toggleHidden">Hide</a>
	</div>

	<a v-if="type === 'image' && (!hidden \|\| preloadImage)"
	@click="openModal"
	class="image-attachment"
	:class="{'hidden': hidden && preloadImage }"
	:href="attachment.url" target="_blank"
	:title="attachment.description"
	>
	<StillImage :referrerpolicy="referrerpolicy" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url \|\| attachment.url"/>
	</a>

	<a class="video-container"
	@click="openModal"
	v-if="type === 'video' && !hidden"
	:class="{'small': isSmall}"
	:href="allowPlay ? undefined : attachment.url"
	>
	<VideoAttachment class="video" :attachment="attachment" :controls="allowPlay" />
	<i v-if="!allowPlay" class="play-icon icon-play-circled"></i>
	</a>

	<audio v-if="type === 'audio'" :src="attachment.url" controls></audio>

	<div @click.prevent="linkClicked" v-if="type === 'html' && attachment.oembed" class="oembed">
	<div v-if="attachment.thumb_url" class="image">
	<img :src="attachment.thumb_url"/>
	</div>
	<div class="text">
	<h1><a :href="attachment.url">{{attachment.oembed.title}}</a></h1>
	<div v-html="attachment.oembed.oembedHTML"></div>
	</div>
	</div>
	</div>
	</template>

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

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

	.attachments {
	display: flex;
	flex-wrap: wrap;

	.attachment.media-upload-container {
	flex: 0 0 auto;
	max-height: 200px;
	max-width: 100%;
	display: flex;
	video {
	max-width: 100%;
	}
	}

	.placeholder {
	margin-right: 8px;
	margin-bottom: 4px;
	}

	.nsfw-placeholder {
	cursor: pointer;

	&.loading {
	cursor: progress;
	}
	}

	.attachment {
	position: relative;
	- margin: 0.5em 0.5em 0em 0em;
	+ margin-top: 0.5em;
	align-self: flex-start;
	line-height: 0;

	border-style: solid;
	border-width: 1px;
	border-radius: $fallback--attachmentRadius;
	border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	overflow: hidden;
	}

	.non-gallery.attachment {
	&.video {
	flex: 1 0 40%;
	}
	.nsfw {
	height: 260px;
	}
	.small {
	height: 120px;
	flex-grow: 0;
	}
	.video {
	height: 260px;
	display: flex;
	}
	video {
	max-height: 100%;
	object-fit: contain;
	}
	}

	.fullwidth {
	flex-basis: 100%;
	}
	// fixes small gap below video
	&.video {
	line-height: 0;
	}

	.video-container {
	display: flex;
	max-height: 100%;
	}

	.video {
	width: 100%;
	}

	.play-icon {
	position: absolute;
	font-size: 64px;
	top: calc(50% - 32px);
	left: calc(50% - 32px);
	color: rgba(255, 255, 255, 0.75);
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
	}

	.play-icon::before {
	margin: 0;
	}

	&.html {
	flex-basis: 90%;
	width: 100%;
	display: flex;
	}

	.hider {
	position: absolute;
	white-space: nowrap;
	margin: 10px;
	padding: 5px;
	background: rgba(230,230,230,0.6);
	font-weight: bold;
	z-index: 4;
	line-height: 1;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	}

	video {
	z-index: 0;
	}

	audio {
	width: 100%;
	}

	img.media-upload {
	line-height: 0;
	max-height: 200px;
	max-width: 100%;
	}

	.oembed {
	line-height: 1.2em;
	flex: 1 0 100%;
	width: 100%;
	margin-right: 15px;
	display: flex;

	img {
	width: 100%;
	}

	.image {
	flex: 1;
	img {
	border: 0px;
	border-radius: 5px;
	height: 100%;
	object-fit: cover;
	}
	}

	.text {
	flex: 2;
	margin: 8px;
	word-break: break-all;
	h1 {
	font-size: 14px;
	margin: 0px;
	}
	}
	}

	.image-attachment {
	width: 100%;
	height: 100%;

	&.hidden {
	display: none;
	}

	.nsfw {
	object-fit: cover;
	width: 100%;
	height: 100%;
	}

	img {
	image-orientation: from-image;
	}
	}
	}
	</style>
	diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
	index 3f90caa99f..2366ddf7d1 100644
	--- a/src/components/gallery/gallery.vue
	+++ b/src/components/gallery/gallery.vue
	@@ -1,63 +1,66 @@
	<template>
	<div ref="galleryContainer" style="width: 100%;">
	<div class="gallery-row" v-for="row in rows" :style="rowHeight(row.length)" :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }">
	<attachment
	v-for="attachment in row"
	:setMedia="setMedia"
	:nsfw="nsfw"
	:attachment="attachment"
	:allowPlay="false"
	:key="attachment.id"
	/>
	</div>
	</div>
	</template>

	<script src='./gallery.js'></script>

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

	.gallery-row {
	height: 200px;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: stretch;
	flex-grow: 1;
	margin-top: 0.5em;
	margin-bottom: 0.25em;

	.attachments, .attachment {
	margin: 0 0.5em 0 0;
	flex-grow: 1;
	height: 100%;
	box-sizing: border-box;
	// to make failed images a bit more noticeable on chromium
	min-width: 2em;
	+ &:last-child {
	+ margin: 0;
	+ }
	}

	.image-attachment {
	width: 100%;
	height: 100%;
	}

	.video-container {
	height: 100%;
	}

	&.contain-fit {
	img, video {
	object-fit: contain;
	}
	}

	&.cover-fit {
	img, video {
	object-fit: cover;
	}
	}
	}

	</style>
	diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
	index e4a247c5f8..7394668c4d 100644
	--- a/src/components/link-preview/link-preview.vue
	+++ b/src/components/link-preview/link-preview.vue
	@@ -1,79 +1,75 @@
	<template>
	<div>
	<a class="link-preview-card" :href="card.url" target="_blank" rel="noopener">
	<div class="card-image" :class="{ 'small-image': size === 'small' }" v-if="useImage">
	<img :src="card.image"></img>
	</div>
	<div class="card-content">
	<span class="card-host faint">{{ card.provider_name }}</span>
	<h4 class="card-title">{{ card.title }}</h4>
	<p class="card-description" v-if="useDescription">{{ card.description }}</p>
	</div>
	</a>
	</div>
	</template>

	<script src="./link-preview.js"></script>

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

	.link-preview-card {
	display: flex;
	flex-direction: row;
	cursor: pointer;
	overflow: hidden;

	- // TODO: clean up the random margins in attachments, this makes preview line
	- // up with attachments...
	- margin-right: 0.5em;
	-
	.card-image {
	flex-shrink: 0;
	width: 120px;
	max-width: 25%;
	img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: $fallback--attachmentRadius;
	border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
	}
	}

	.small-image {
	width: 80px;
	}

	.card-content {
	max-height: 100%;
	margin: 0.5em;
	display: flex;
	flex-direction: column;
	}

	.card-host {
	font-size: 12px;
	}

	.card-description {
	margin: 0.5em 0 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;
	line-height: 1.2em;
	// cap description at 3 lines, the 1px is to clean up some stray pixels
	// TODO: fancier fade-out at the bottom to show off that it's too long?
	max-height: calc(1.2em * 3 - 1px);
	}

	color: $fallback--text;
	color: var(--text, $fallback--text);
	border-style: solid;
	border-width: 1px;
	border-radius: $fallback--attachmentRadius;
	border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	}
	</style>
	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index fab2fe6254..fbbca6c49d 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,394 +1,394 @@
	import Attachment from '../attachment/attachment.vue'
	import FavoriteButton from '../favorite_button/favorite_button.vue'
	import RetweetButton from '../retweet_button/retweet_button.vue'
	import DeleteButton from '../delete_button/delete_button.vue'
	import PostStatusForm from '../post_status_form/post_status_form.vue'
	import UserCardContent from '../user_card_content/user_card_content.vue'
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import Gallery from '../gallery/gallery.vue'
	import LinkPreview from '../link-preview/link-preview.vue'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import fileType from 'src/services/file_type/file_type.service'
	import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
	import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
	import { filter, find, unescape } from 'lodash'

	const Status = {
	name: 'Status',
	props: [
	'statusoid',
	'expandable',
	'inConversation',
	'focused',
	'highlight',
	'compact',
	'replies',
	- 'noReplyLinks',
	+ 'isPreview',
	'noHeading',
	'inlineExpanded'
	],
	data () {
	return {
	replying: false,
	expanded: false,
	unmuted: false,
	userExpanded: false,
	preview: null,
	showPreview: false,
	showingTall: this.inConversation && this.focused,
	showingLongSubject: false,
	expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
	? !this.$store.state.instance.collapseMessageWithSubject
	: !this.$store.state.config.collapseMessageWithSubject,
	betterShadow: this.$store.state.interface.browserSupport.cssFilter
	}
	},
	computed: {
	localCollapseSubjectDefault () {
	return typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
	? this.$store.state.instance.collapseMessageWithSubject
	: this.$store.state.config.collapseMessageWithSubject
	},
	muteWords () {
	return this.$store.state.config.muteWords
	},
	repeaterClass () {
	const user = this.statusoid.user
	return highlightClass(user)
	},
	userClass () {
	const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
	return highlightClass(user)
	},
	deleted () {
	return this.statusoid.deleted
	},
	repeaterStyle () {
	const user = this.statusoid.user
	const highlight = this.$store.state.config.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	userStyle () {
	if (this.noHeading) return
	const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
	const highlight = this.$store.state.config.highlight
	return highlightStyle(highlight[user.screen_name])
	},
	hideAttachments () {
	return (this.$store.state.config.hideAttachments && !this.inConversation) \|\|
	(this.$store.state.config.hideAttachmentsInConv && this.inConversation)
	},
	userProfileLink () {
	return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
	},
	replyProfileLink () {
	if (this.isReply) {
	return this.generateUserProfileLink(this.status.in_reply_to_user_id, this.replyToName)
	}
	},
	retweet () { return !!this.statusoid.retweeted_status },
	retweeter () { return this.statusoid.user.name \|\| this.statusoid.user.screen_name },
	retweeterHtml () { return this.statusoid.user.name_html },
	retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) },
	status () {
	if (this.retweet) {
	return this.statusoid.retweeted_status
	} else {
	return this.statusoid
	}
	},
	loggedIn () {
	return !!this.$store.state.users.currentUser
	},
	muteWordHits () {
	const statusText = this.status.text.toLowerCase()
	const hits = filter(this.muteWords, (muteWord) => {
	return statusText.includes(muteWord.toLowerCase())
	})

	return hits
	},
	muted () { return !this.unmuted && (this.status.user.muted \|\| this.muteWordHits.length > 0) },
	hideFilteredStatuses () {
	return typeof this.$store.state.config.hideFilteredStatuses === 'undefined'
	? this.$store.state.instance.hideFilteredStatuses
	: this.$store.state.config.hideFilteredStatuses
	},
	hideStatus () {
	return (this.hideReply \|\| this.deleted) \|\| (this.muted && this.hideFilteredStatuses)
	},
	isFocused () {
	// retweet or root of an expanded conversation
	if (this.focused) {
	return true
	} else if (!this.inConversation) {
	return false
	}
	// use conversation highlight only when in conversation
	return this.status.id === this.highlight
	},
	// This is a bit hacky, but we want to approximate post height before rendering
	// so we count newlines (masto uses <p> for paragraphs, GS uses <br> between them)
	// as well as approximate line count by counting characters and approximating ~80
	// per line.
	//
	// Using max-height + overflow: auto for status components resulted in false positives
	// very often with japanese characters, and it was very annoying.
	tallStatus () {
	const lengthScore = this.status.statusnet_html.split(/<p\|<br/).length + this.status.text.length / 80
	return lengthScore > 20
	},
	longSubject () {
	return this.status.summary.length > 900
	},
	isReply () {
	return !!(this.status.in_reply_to_status_id && this.status.in_reply_to_user_id)
	},
	replyToName () {
	const user = this.$store.state.users.usersObject[this.status.in_reply_to_user_id]
	if (user) {
	return user.screen_name
	} else {
	return this.status.in_reply_to_screen_name
	}
	},
	hideReply () {
	if (this.$store.state.config.replyVisibility === 'all') {
	return false
	}
	if (this.inlineExpanded \|\| this.expanded \|\| this.inConversation \|\| !this.isReply) {
	return false
	}
	if (this.status.user.id === this.$store.state.users.currentUser.id) {
	return false
	}
	if (this.status.type === 'retweet') {
	return false
	}
	var checkFollowing = this.$store.state.config.replyVisibility === 'following'
	for (var i = 0; i < this.status.attentions.length; ++i) {
	if (this.status.user.id === this.status.attentions[i].id) {
	continue
	}
	if (checkFollowing && this.status.attentions[i].following) {
	return false
	}
	if (this.status.attentions[i].id === this.$store.state.users.currentUser.id) {
	return false
	}
	}
	return this.status.attentions.length > 0
	},
	hideSubjectStatus () {
	if (this.tallStatus && !this.localCollapseSubjectDefault) {
	return false
	}
	return !this.expandingSubject && this.status.summary
	},
	hideTallStatus () {
	if (this.status.summary && this.localCollapseSubjectDefault) {
	return false
	}
	if (this.showingTall) {
	return false
	}
	return this.tallStatus
	},
	showingMore () {
	return (this.tallStatus && this.showingTall) \|\| (this.status.summary && this.expandingSubject)
	},
	nsfwClickthrough () {
	if (!this.status.nsfw) {
	return false
	}
	if (this.status.summary && this.localCollapseSubjectDefault) {
	return false
	}
	return true
	},
	replySubject () {
	if (!this.status.summary) return ''
	const decodedSummary = unescape(this.status.summary)
	const behavior = typeof this.$store.state.config.subjectLineBehavior === 'undefined'
	? this.$store.state.instance.subjectLineBehavior
	: this.$store.state.config.subjectLineBehavior
	const startsWithRe = decodedSummary.match(/^re[: ]/i)
	if (behavior !== 'noop' && startsWithRe \|\| behavior === 'masto') {
	return decodedSummary
	} else if (behavior === 'email') {
	return 're: '.concat(decodedSummary)
	} else if (behavior === 'noop') {
	return ''
	}
	},
	attachmentSize () {
	if ((this.$store.state.config.hideAttachments && !this.inConversation) \|\|
	(this.$store.state.config.hideAttachmentsInConv && this.inConversation) \|\|
	(this.status.attachments.length > this.maxThumbnails)) {
	return 'hide'
	} else if (this.compact) {
	return 'small'
	}
	return 'normal'
	},
	galleryTypes () {
	if (this.attachmentSize === 'hide') {
	return []
	}
	return this.$store.state.config.playVideosInModal
	? ['image', 'video']
	: ['image']
	},
	galleryAttachments () {
	return this.status.attachments.filter(
	file => fileType.fileMatchesSomeType(this.galleryTypes, file)
	)
	},
	nonGalleryAttachments () {
	return this.status.attachments.filter(
	file => !fileType.fileMatchesSomeType(this.galleryTypes, file)
	)
	},
	maxThumbnails () {
	return this.$store.state.config.maxThumbnails
	}
	},
	components: {
	Attachment,
	FavoriteButton,
	RetweetButton,
	DeleteButton,
	PostStatusForm,
	UserCardContent,
	UserAvatar,
	Gallery,
	LinkPreview
	},
	methods: {
	visibilityIcon (visibility) {
	switch (visibility) {
	case 'private':
	return 'icon-lock'
	case 'unlisted':
	return 'icon-lock-open-alt'
	case 'direct':
	return 'icon-mail-alt'
	default:
	return 'icon-globe'
	}
	},
	linkClicked (event) {
	let { target } = event
	if (target.tagName === 'SPAN') {
	target = target.parentNode
	}
	if (target.tagName === 'A') {
	if (target.className.match(/mention/)) {
	const href = target.href
	const attn = this.status.attentions.find(attn => mentionMatchesUrl(attn, href))
	if (attn) {
	event.stopPropagation()
	event.preventDefault()
	const link = this.generateUserProfileLink(attn.id, attn.screen_name)
	this.$router.push(link)
	return
	}
	}
	if (target.className.match(/hashtag/)) {
	// Extract tag name from link url
	const tag = extractTagFromUrl(target.href)
	if (tag) {
	const link = this.generateTagLink(tag)
	this.$router.push(link)
	return
	}
	}
	window.open(target.href, '_blank')
	}
	},
	toggleReplying () {
	this.replying = !this.replying
	},
	gotoOriginal (id) {
	// only handled by conversation, not status_or_conversation
	if (this.inConversation) {
	this.$emit('goto', id)
	}
	},
	toggleExpanded () {
	this.$emit('toggleExpanded')
	},
	toggleMute () {
	this.unmuted = !this.unmuted
	},
	toggleUserExpanded () {
	this.userExpanded = !this.userExpanded
	},
	toggleShowMore () {
	if (this.showingTall) {
	this.showingTall = false
	} else if (this.expandingSubject && this.status.summary) {
	this.expandingSubject = false
	} else if (this.hideTallStatus) {
	this.showingTall = true
	} else if (this.hideSubjectStatus && this.status.summary) {
	this.expandingSubject = true
	}
	},
	replyEnter (id, event) {
	this.showPreview = true
	const targetId = id
	const statuses = this.$store.state.statuses.allStatuses

	if (!this.preview) {
	// if we have the status somewhere already
	this.preview = find(statuses, { 'id': targetId })
	// or if we have to fetch it
	if (!this.preview) {
	this.$store.state.api.backendInteractor.fetchStatus({id}).then((status) => {
	this.preview = status
	})
	}
	} else if (this.preview.id !== targetId) {
	this.preview = find(statuses, { 'id': targetId })
	}
	},
	replyLeave () {
	this.showPreview = false
	},
	generateUserProfileLink (id, name) {
	return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
	},
	generateTagLink (tag) {
	return `/tag/${tag}`
	},
	setMedia () {
	const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
	return () => this.$store.dispatch('setMedia', attachments)
	}
	},
	watch: {
	'highlight': function (id) {
	if (this.status.id === id) {
	let rect = this.$el.getBoundingClientRect()
	if (rect.top < 100) {
	// Post is above screen, match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.height >= (window.innerHeight - 50)) {
	// Post we want to see is taller than screen so match its top to screen top
	window.scrollBy(0, rect.top - 100)
	} else if (rect.bottom > window.innerHeight - 50) {
	// Post is below screen, match its bottom to screen bottom
	window.scrollBy(0, rect.bottom - window.innerHeight + 50)
	}
	}
	}
	},
	filters: {
	capitalize: function (str) {
	return str.charAt(0).toUpperCase() + str.slice(1)
	}
	}
	}

	export default Status
	diff --git a/src/components/status/status.vue b/src/components/status/status.vue
	index 3fc5b486ce..46919d7c78 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,586 +1,636 @@
	<template>
	<div class="status-el" v-if="!hideStatus" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
	- <template v-if="muted && !noReplyLinks">
	+ <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"></i></a>
	</div>
	</template>
	<template v-else>
	<div v-if="retweet && !noHeading" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
	- <UserAvatar v-if="retweet" :betterShadow="betterShadow" :src="statusoid.user.profile_image_url_original"/>
	+ <UserAvatar class="media-left" v-if="retweet" :betterShadow="betterShadow" :src="statusoid.user.profile_image_url_original"/>
	<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')"></i>
	{{$t('timeline.repeated')}}
	</div>
	</div>

	<div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status">
	<div v-if="!noHeading" class="media-left">
	<router-link :to="userProfileLink" @click.stop.prevent.capture.native="toggleUserExpanded">
	<UserAvatar :compact="compact" :betterShadow="betterShadow" :src="status.user.profile_image_url_original"/>
	</router-link>
	</div>
	<div class="status-body">
	- <div class="usercard media-body" v-if="userExpanded">
	+ <div class="usercard" v-if="userExpanded">
	<user-card-content :user="status.user" :switcher="false"></user-card-content>
	</div>
	- <div v-if="!noHeading" class="media-body container media-heading">
	- <div class="media-heading-left">
	- <div class="name-and-links">
	+ <div v-if="!noHeading" class="media-heading">
	+ <div class="heading-name-row">
	+ <div class="name-and-account-name">
	<h4 class="user-name" v-if="status.user.name_html" v-html="status.user.name_html"></h4>
	<h4 class="user-name" v-else>{{status.user.name}}</h4>
	- <span class="links">
	- <router-link :to="userProfileLink">
	- {{status.user.screen_name}}
	- </router-link>
	- <span v-if="isReply" class="faint reply-info">
	- <i class="icon-right-open"></i>
	- <router-link :to="replyProfileLink">
	- {{replyToName}}
	- </router-link>
	- </span>
	- <a v-if="isReply && !noReplyLinks" href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" :aria-label="$t('tool_tip.reply')">
	- <i class="button-icon icon-reply" @mouseenter="replyEnter(status.in_reply_to_status_id, $event)" @mouseout="replyLeave()"></i>
	+ <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 :since="status.created_at" :auto-update="60"></timeago>
	+ </router-link>
	+ <div class="button-icon visibility-icon" v-if="status.visibility">
	+ <i :class="visibilityIcon(status.visibility)" :title="status.visibility \| capitalize"></i>
	+ </div>
	+ <a :href="status.external_url" target="_blank" v-if="!status.is_local && !isPreview" class="source_url" title="Source">
	+ <i class="button-icon icon-link-ext-alt"></i>
	+ </a>
	+ <template v-if="expandable && !isPreview">
	+ <a href="#" @click.prevent="toggleExpanded" title="Expand">
	+ <i class="button-icon icon-plus-squared"></i>
	</a>
	+ </template>
	+ <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="button-icon icon-eye-off"></i></a>
	+ </span>
	+ </div>
	+
	+ <div class="heading-reply-row">
	+ <div v-if="isReply" class="reply-to-and-accountname">
	+ <a class="reply-to"
	+ href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	+ :aria-label="$t('tool_tip.reply')"
	+ @mouseenter.prevent.stop="replyEnter(status.in_reply_to_status_id, $event)"
	+ @mouseleave.prevent.stop="replyLeave()"
	+ >
	+ <i class="button-icon icon-reply" v-if="!isPreview"></i>
	+ <span class="faint-link reply-to-text">{{$t('status.reply_to')}}</span>
	+ </a>
	+ <router-link :to="replyProfileLink">
	+ {{replyToName}}
	+ </router-link>
	+ <span class="faint replies-separator" v-if="replies.length">
	+ -
	</span>
	</div>
	- <h4 class="replies" v-if="inConversation && !noReplyLinks">
	- <small v-if="replies.length">Replies:</small>
	- <small class="reply-link" v-bind:key="reply.id" v-for="reply in replies">
	- <a href="#" @click.prevent="gotoOriginal(reply.id)" @mouseenter="replyEnter(reply.id, $event)" @mouseout="replyLeave()">{{reply.name}} </a>
	- </small>
	- </h4>
	- </div>
	- <div class="media-heading-right">
	- <router-link class="timeago" :to="{ name: 'conversation', params: { id: status.id } }">
	- <timeago :since="status.created_at" :auto-update="60"></timeago>
	- </router-link>
	- <div class="button-icon visibility-icon" v-if="status.visibility">
	- <i :class="visibilityIcon(status.visibility)" :title="status.visibility \| capitalize"></i>
	+ <div class="replies" v-if="inConversation && !isPreview">
	+ <span class="faint" v-if="replies.length">{{$t('status.replies_list')}}</span>
	+ <span class="reply-link faint" v-for="reply in replies">
	+ <a href="#" @click.prevent="gotoOriginal(reply.id)" @mouseenter="replyEnter(reply.id, $event)" @mouseout="replyLeave()">{{reply.name}}</a>
	+ </span>
	</div>
	- <a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url" title="Source">
	- <i class="button-icon icon-link-ext-alt"></i>
	- </a>
	- <template v-if="expandable">
	- <a href="#" @click.prevent="toggleExpanded" title="Expand">
	- <i class="button-icon icon-plus-squared"></i>
	- </a>
	- </template>
	- <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="button-icon icon-eye-off"></i></a>
	</div>
	+
	+
	</div>

	<div v-if="showPreview" class="status-preview-container">
	- <status class="status-preview" v-if="preview" :noReplyLinks="true" :statusoid="preview" :compact=true></status>
	+ <status class="status-preview" v-if="preview" :isPreview="true" :statusoid="preview" :compact=true></status>
	<div class="status-preview status-preview-loading" v-else>
	<i class="icon-spin4 animate-spin"></i>
	</div>
	</div>

	<div class="status-content-wrapper" :class="{ 'tall-status': !showingLongSubject }" v-if="longSubject">
	<a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="!showingLongSubject" href="#" @click.prevent="showingLongSubject=true">Show more</a>
	<div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html"></div>
	<a v-if="showingLongSubject" href="#" class="status-unhider" @click.prevent="showingLongSubject=false">Show less</a>
	</div>
	<div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper" v-else>
	<a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowMore">Show more</a>
	<div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html" v-if="!hideSubjectStatus"></div>
	<div @click.prevent="linkClicked" class="status-content media-body" v-html="status.summary_html" v-else></div>
	<a v-if="hideSubjectStatus" href="#" class="cw-status-hider" @click.prevent="toggleShowMore">Show more</a>
	<a v-if="showingMore" href="#" class="status-unhider" @click.prevent="toggleShowMore">Show less</a>
	</div>

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

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

	- <div v-if="!noHeading && !noReplyLinks" class='status-actions media-body'>
	+ <div v-if="!noHeading && !isPreview" class='status-actions media-body'>
	<div v-if="loggedIn">
	<a href="#" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')">
	<i class="button-icon icon-reply" :class="{'icon-reply-active': replying}"></i>
	</a>
	</div>
	<retweet-button :visibility='status.visibility' :loggedIn='loggedIn' :status='status'></retweet-button>
	<favorite-button :loggedIn='loggedIn' :status='status'></favorite-button>
	<delete-button :status='status'></delete-button>
	</div>
	</div>
	</div>
	<div class="container" v-if="replying">
	<div class="reply-left"/>
	<post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" :copy-message-scope="status.visibility" :subject="replySubject" v-on:posted="toggleReplying"/>
	</div>
	</template>
	</div>
	</template>

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

	+$status-margin: 0.75em;
	+
	.status-body {
	flex: 1;
	min-width: 0;
	}

	.status-preview.status-el {
	border-style: solid;
	border-width: 1px;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	}

	.status-preview-container {
	position: relative;
	max-width: 100%;
	}

	.status-preview {
	position: absolute;
	max-width: 95%;
	display: flex;
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	border-style: solid;
	border-width: 1px;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
	box-shadow: var(--popupShadow);
	margin-top: 0.25em;
	margin-left: 0.5em;
	z-index: 50;

	.status {
	flex: 1;
	border: 0;
	min-width: 15em;
	}
	}

	.status-preview-loading {
	display: block;
	min-width: 15em;
	padding: 1em;
	text-align: center;
	border-width: 1px;
	border-style: solid;

	i {
	font-size: 2em;
	}
	}

	+.media-left {
	+ margin-right: $status-margin;
	+}
	+
	.status-el {
	hyphens: auto;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	border-left-width: 0px;
	- line-height: 18px;
	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(--lightBg, $fallback--lightBg);
	}

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

	.media-body {
	flex: 1;
	padding: 0;
	- margin: 0 0 0.25em 0.8em;
	}

	.usercard {
	- margin-bottom: .7em
	+ margin: 0;
	+ margin-bottom: $status-margin;
	}

	- .media-heading {
	- flex-wrap: nowrap;
	- line-height: 18px;
	+ .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-left {
	+ .media-heading {
	padding: 0;
	vertical-align: bottom;
	flex-basis: 100%;
	+ margin-bottom: 0.5em;

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

	small {
	font-weight: lighter;
	}
	- h4 {
	- white-space: nowrap;
	- font-size: 14px;
	- margin-right: 0.25em;
	- overflow: hidden;
	- text-overflow: ellipsis;
	- }
	- .name-and-links {
	+
	+ .heading-name-row {
	padding: 0;
	- flex: 1 0;
	display: flex;
	- flex-wrap: wrap;
	- align-items: baseline;
	+ justify-content: space-between;
	+ line-height: 18px;
	+
	+ .name-and-account-name {
	+ display: flex;
	+ min-width: 0;
	+ }

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

	- img {
	- width: 14px;
	- height: 14px;
	- vertical-align: middle;
	- object-fit: contain
	- }
	+ .account-name {
	+ min-width: 1.6em;
	+ margin-right: 0.4em;
	+ white-space: nowrap;
	+ overflow: hidden;
	+ text-overflow: ellipsis;
	+ flex: 1 1 0;
	}
	}

	- .links {
	+ .heading-right {
	display: flex;
	+ flex-shrink: 0;
	+ }
	+
	+ .timeago {
	+ margin-right: 0.2em;
	+ }
	+
	+ .heading-reply-row {
	+ align-content: baseline;
	font-size: 12px;
	- color: $fallback--link;
	- color: var(--link, $fallback--link);
	+ line-height: 18px;
	max-width: 100%;
	+ display: flex;
	+ flex-wrap: wrap;
	+ align-items: stretch;
	+
	a {
	max-width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	}
	- & > span {
	- text-overflow: ellipsis;
	- overflow: hidden;
	- white-space: nowrap;
	- }
	- & > a:last-child {
	- flex-shrink: 0;
	+ }
	+
	+ .reply-to-and-accountname {
	+ display: flex;
	+ height: 18px;
	+ margin-right: 0.5em;
	+ overflow: hidden;
	+ max-width: 100%;
	+ .icon-reply {
	+ transform: scaleX(-1);
	}
	}
	+
	.reply-info {
	display: flex;
	}
	- .replies {
	- line-height: 16px;
	+
	+ .reply-to {
	+ display: flex;
	}
	- .reply-link {
	- margin-right: 0.2em;
	+
	+ .reply-to-text {
	+ overflow: hidden;
	+ text-overflow: ellipsis;
	+ margin: 0 0.4em 0 0.2em;
	}
	- }

	- .media-heading-right {
	- display: inline-flex;
	- flex-shrink: 0;
	- flex-wrap: nowrap;
	- margin-left: .25em;
	- align-self: baseline;
	+ .replies-separator {
	+ margin-left: 0.4em;
	+ }

	- .timeago {
	- margin-right: 0.2em;
	+ .replies {
	+ line-height: 18px;
	font-size: 12px;
	- align-self: last baseline;
	+ display: flex;
	+ flex-wrap: wrap;
	+ & > * {
	+ margin-right: 0.4em;
	+ }
	}

	- > * {
	- margin-left: 0.2em;
	- }
	- a:hover i {
	- color: $fallback--text;
	- color: var(--text, $fallback--text);
	+ .reply-link {
	+ height: 17px;
	}
	}

	.tall-status {
	position: relative;
	height: 220px;
	overflow-x: hidden;
	overflow-y: hidden;
	}

	.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;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
	&_focused {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--lightBg 80%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--lightBg, $fallback--lightBg) 80%);
	}
	}

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

	.status-content {
	- margin-right: 0.5em;
	font-family: var(--postFont, sans-serif);
	+ line-height: 1.4em;

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

	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;
	- margin-top: 0.2em;
	- margin-bottom: 0.5em;
	+ 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 0.6em 0 0.6em;
	+ 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: green;
	}

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

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

	div, favorite-button {
	- padding-top: 0.25em;
	- max-width: 6em;
	+ max-width: 4em;
	flex: 1;
	}
	}

	.icon-reply:hover {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}

	.icon-reply.icon-reply-active {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}

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

	.status {
	display: flex;
	- padding: 0.6em;
	+ padding: $status-margin;
	&.is-retweet {
	- padding-top: 0.1em;
	+ 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-left {
	flex: 0;
	min-width: 48px;
	}

	.reply-body {
	flex: 1;
	}

	.timeline > {
	.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;
	}
	}

	@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/i18n/en.json b/src/i18n/en.json
	index c37563743f..c5a4a90d34 100644
	--- a/src/i18n/en.json
	+++ b/src/i18n/en.json
	@@ -1,422 +1,426 @@
	{
	"chat": {
	"title": "Chat"
	},
	"features_panel": {
	"chat": "Chat",
	"gopher": "Gopher",
	"media_proxy": "Media proxy",
	"scope_options": "Scope options",
	"text_limit": "Text limit",
	"title": "Features",
	"who_to_follow": "Who to follow"
	},
	"finder": {
	"error_fetching_user": "Error fetching user",
	"find_user": "Find user"
	},
	"general": {
	"apply": "Apply",
	"submit": "Submit",
	"more": "More",
	"generic_error": "An error occured",
	"optional": "optional"
	},
	"image_cropper": {
	"crop_picture": "Crop picture",
	"save": "Save",
	"cancel": "Cancel"
	},
	"login": {
	"login": "Log in",
	"description": "Log in with OAuth",
	"logout": "Log out",
	"password": "Password",
	"placeholder": "e.g. lain",
	"register": "Register",
	"username": "Username",
	"hint": "Log in to join the discussion"
	},
	"media_modal": {
	"previous": "Previous",
	"next": "Next"
	},
	"nav": {
	"about": "About",
	"back": "Back",
	"chat": "Local Chat",
	"friend_requests": "Follow Requests",
	"mentions": "Mentions",
	"dms": "Direct Messages",
	"public_tl": "Public Timeline",
	"timeline": "Timeline",
	"twkn": "The Whole Known Network",
	"user_search": "User Search",
	"who_to_follow": "Who to follow",
	"preferences": "Preferences"
	},
	"notifications": {
	"broken_favorite": "Unknown status, searching for it...",
	"favorited_you": "favorited your status",
	"followed_you": "followed you",
	"load_older": "Load older notifications",
	"notifications": "Notifications",
	"read": "Read!",
	"repeated_you": "repeated your status",
	"no_more_notifications": "No more notifications"
	},
	"post_status": {
	"new_status": "Post new status",
	"account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.",
	"account_not_locked_warning_link": "locked",
	"attachments_sensitive": "Mark attachments as sensitive",
	"content_type": {
	"plain_text": "Plain text"
	},
	"content_warning": "Subject (optional)",
	"default": "Just landed in L.A.",
	"direct_warning": "This post will only be visible to all the mentioned users.",
	"posting": "Posting",
	"scope": {
	"direct": "Direct - Post to mentioned users only",
	"private": "Followers-only - Post to followers only",
	"public": "Public - Post to public timelines",
	"unlisted": "Unlisted - Do not post to public timelines"
	}
	},
	"registration": {
	"bio": "Bio",
	"email": "Email",
	"fullname": "Display name",
	"password_confirm": "Password confirmation",
	"registration": "Registration",
	"token": "Invite token",
	"captcha": "CAPTCHA",
	"new_captcha": "Click the image to get a new captcha",
	"username_placeholder": "e.g. lain",
	"fullname_placeholder": "e.g. Lain Iwakura",
	"bio_placeholder": "e.g.\nHi, I'm Lain\nI’m an anime girl living in suburban Japan. You may know me from the Wired.",
	"validations": {
	"username_required": "cannot be left blank",
	"fullname_required": "cannot be left blank",
	"email_required": "cannot be left blank",
	"password_required": "cannot be left blank",
	"password_confirmation_required": "cannot be left blank",
	"password_confirmation_match": "should be the same as password"
	}
	},
	"settings": {
	"app_name": "App name",
	"attachmentRadius": "Attachments",
	"attachments": "Attachments",
	"autoload": "Enable automatic loading when scrolled to the bottom",
	"avatar": "Avatar",
	"avatarAltRadius": "Avatars (Notifications)",
	"avatarRadius": "Avatars",
	"background": "Background",
	"bio": "Bio",
	"blocks_tab": "Blocks",
	"btnRadius": "Buttons",
	"cBlue": "Blue (Reply, follow)",
	"cGreen": "Green (Retweet)",
	"cOrange": "Orange (Favorite)",
	"cRed": "Red (Cancel)",
	"change_password": "Change Password",
	"change_password_error": "There was an issue changing your password.",
	"changed_password": "Password changed successfully!",
	"collapse_subject": "Collapse posts with subjects",
	"composing": "Composing",
	"confirm_new_password": "Confirm new password",
	"current_avatar": "Your current avatar",
	"current_password": "Current password",
	"current_profile_banner": "Your current profile banner",
	"data_import_export_tab": "Data Import / Export",
	"default_vis": "Default visibility scope",
	"delete_account": "Delete Account",
	"delete_account_description": "Permanently delete your account and all your messages.",
	"delete_account_error": "There was an issue deleting your account. If this persists please contact your instance administrator.",
	"delete_account_instructions": "Type your password in the input below to confirm account deletion.",
	"avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
	"export_theme": "Save preset",
	"filtering": "Filtering",
	"filtering_explanation": "All statuses containing these words will be muted, one per line",
	"follow_export": "Follow export",
	"follow_export_button": "Export your follows to a csv file",
	"follow_export_processing": "Processing, you'll soon be asked to download your file",
	"follow_import": "Follow import",
	"follow_import_error": "Error importing followers",
	"follows_imported": "Follows imported! Processing them will take a while.",
	"foreground": "Foreground",
	"general": "General",
	"hide_attachments_in_convo": "Hide attachments in conversations",
	"hide_attachments_in_tl": "Hide attachments in timeline",
	"max_thumbnails": "Maximum amount of thumbnails per post",
	"hide_isp": "Hide instance-specific panel",
	"preload_images": "Preload images",
	"use_one_click_nsfw": "Open NSFW attachments with just one click",
	"hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
	"hide_user_stats": "Hide user statistics (e.g. the number of followers)",
	"hide_filtered_statuses": "Hide filtered statuses",
	"import_followers_from_a_csv_file": "Import follows from a csv file",
	"import_theme": "Load preset",
	"inputRadius": "Input fields",
	"checkboxRadius": "Checkboxes",
	"instance_default": "(default: {value})",
	"instance_default_simple": "(default)",
	"interface": "Interface",
	"interfaceLanguage": "Interface language",
	"invalid_theme_imported": "The selected file is not a supported Pleroma theme. No changes to your theme were made.",
	"limited_availability": "Unavailable in your browser",
	"links": "Links",
	"lock_account_description": "Restrict your account to approved followers only",
	"loop_video": "Loop videos",
	"loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
	"mutes_tab": "Mutes",
	"play_videos_in_modal": "Play videos directly in the media viewer",
	"use_contain_fit": "Don't crop the attachment in thumbnails",
	"name": "Name",
	"name_bio": "Name & Bio",
	"new_password": "New password",
	"notification_visibility": "Types of notifications to show",
	"notification_visibility_follows": "Follows",
	"notification_visibility_likes": "Likes",
	"notification_visibility_mentions": "Mentions",
	"notification_visibility_repeats": "Repeats",
	"no_rich_text_description": "Strip rich text formatting from all posts",
	"no_blocks": "No blocks",
	"no_mutes": "No mutes",
	"hide_follows_description": "Don't show who I'm following",
	"hide_followers_description": "Don't show who's following me",
	"show_admin_badge": "Show Admin badge in my profile",
	"show_moderator_badge": "Show Moderator badge in my profile",
	"nsfw_clickthrough": "Enable clickthrough NSFW attachment hiding",
	"oauth_tokens": "OAuth tokens",
	"token": "Token",
	"refresh_token": "Refresh Token",
	"valid_until": "Valid Until",
	"revoke_token": "Revoke",
	"panelRadius": "Panels",
	"pause_on_unfocused": "Pause streaming when tab is not focused",
	"presets": "Presets",
	"profile_background": "Profile Background",
	"profile_banner": "Profile Banner",
	"profile_tab": "Profile",
	"radii_help": "Set up interface edge rounding (in pixels)",
	"replies_in_timeline": "Replies in timeline",
	"reply_link_preview": "Enable reply-link preview on mouse hover",
	"reply_visibility_all": "Show all replies",
	"reply_visibility_following": "Only show replies directed at me or users I'm following",
	"reply_visibility_self": "Only show replies directed at me",
	"saving_err": "Error saving settings",
	"saving_ok": "Settings saved",
	"security_tab": "Security",
	"scope_copy": "Copy scope when replying (DMs are always copied)",
	"set_new_avatar": "Set new avatar",
	"set_new_profile_background": "Set new profile background",
	"set_new_profile_banner": "Set new profile banner",
	"settings": "Settings",
	"subject_input_always_show": "Always show subject field",
	"subject_line_behavior": "Copy subject when replying",
	"subject_line_email": "Like email: \"re: subject\"",
	"subject_line_mastodon": "Like mastodon: copy as is",
	"subject_line_noop": "Do not copy",
	"post_status_content_type": "Post status content type",
	"status_content_type_plain": "Plain text",
	"stop_gifs": "Play-on-hover GIFs",
	"streaming": "Enable automatic streaming of new posts when scrolled to the top",
	"text": "Text",
	"theme": "Theme",
	"theme_help": "Use hex color codes (#rrggbb) to customize your color theme.",
	"theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
	"theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
	"tooltipRadius": "Tooltips/alerts",
	"upload_a_photo": "Upload a photo",
	"user_settings": "User Settings",
	"values": {
	"false": "no",
	"true": "yes"
	},
	"notifications": "Notifications",
	"enable_web_push_notifications": "Enable web push notifications",
	"style": {
	"switcher": {
	"keep_color": "Keep colors",
	"keep_shadows": "Keep shadows",
	"keep_opacity": "Keep opacity",
	"keep_roundness": "Keep roundness",
	"keep_fonts": "Keep fonts",
	"save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme. When all checkboxes unset, exporting theme will save everything.",
	"reset": "Reset",
	"clear_all": "Clear all",
	"clear_opacity": "Clear opacity"
	},
	"common": {
	"color": "Color",
	"opacity": "Opacity",
	"contrast": {
	"hint": "Contrast ratio is {ratio}, it {level} {context}",
	"level": {
	"aa": "meets Level AA guideline (minimal)",
	"aaa": "meets Level AAA guideline (recommended)",
	"bad": "doesn't meet any accessibility guidelines"
	},
	"context": {
	"18pt": "for large (18pt+) text",
	"text": "for text"
	}
	}
	},
	"common_colors": {
	"_tab_label": "Common",
	"main": "Common colors",
	"foreground_hint": "See \"Advanced\" tab for more detailed control",
	"rgbo": "Icons, accents, badges"
	},
	"advanced_colors": {
	"_tab_label": "Advanced",
	"alert": "Alert background",
	"alert_error": "Error",
	"badge": "Badge background",
	"badge_notification": "Notification",
	"panel_header": "Panel header",
	"top_bar": "Top bar",
	"borders": "Borders",
	"buttons": "Buttons",
	"inputs": "Input fields",
	"faint_text": "Faded text"
	},
	"radii": {
	"_tab_label": "Roundness"
	},
	"shadows": {
	"_tab_label": "Shadow and lighting",
	"component": "Component",
	"override": "Override",
	"shadow_id": "Shadow #{value}",
	"blur": "Blur",
	"spread": "Spread",
	"inset": "Inset",
	"hint": "For shadows you can also use --variable as a color value to use CSS3 variables. Please note that setting opacity won't work in this case.",
	"filter_hint": {
	"always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
	"drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",
	"avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.",
	"spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
	"inset_classic": "Inset shadows will be using {0}"
	},
	"components": {
	"panel": "Panel",
	"panelHeader": "Panel header",
	"topBar": "Top bar",
	"avatar": "User avatar (in profile view)",
	"avatarStatus": "User avatar (in post display)",
	"popup": "Popups and tooltips",
	"button": "Button",
	"buttonHover": "Button (hover)",
	"buttonPressed": "Button (pressed)",
	"buttonPressedHover": "Button (pressed+hover)",
	"input": "Input field"
	}
	},
	"fonts": {
	"_tab_label": "Fonts",
	"help": "Select font to use for elements of UI. For \"custom\" you have to enter exact font name as it appears in system.",
	"components": {
	"interface": "Interface",
	"input": "Input fields",
	"post": "Post text",
	"postCode": "Monospaced text in a post (rich text)"
	},
	"family": "Font name",
	"size": "Size (in px)",
	"weight": "Weight (boldness)",
	"custom": "Custom"
	},
	"preview": {
	"header": "Preview",
	"content": "Content",
	"error": "Example error",
	"button": "Button",
	"text": "A bunch of more {0} and {1}",
	"mono": "content",
	"input": "Just landed in L.A.",
	"faint_link": "helpful manual",
	"fine_print": "Read our {0} to learn nothing useful!",
	"header_faint": "This is fine",
	"checkbox": "I have skimmed over terms and conditions",
	"link": "a nice lil' link"
	}
	}
	},
	"timeline": {
	"collapse": "Collapse",
	"conversation": "Conversation",
	"error_fetching": "Error fetching updates",
	"load_older": "Load older statuses",
	"no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated",
	"repeated": "repeated",
	"show_new": "Show new",
	"up_to_date": "Up-to-date",
	"no_more_statuses": "No more statuses",
	"no_statuses": "No statuses"
	},
	+ "status": {
	+ "reply_to": "Reply to",
	+ "replies_list": "Replies:"
	+ },
	"user_card": {
	"approve": "Approve",
	"block": "Block",
	"blocked": "Blocked!",
	"deny": "Deny",
	"favorites": "Favorites",
	"follow": "Follow",
	"follow_sent": "Request sent!",
	"follow_progress": "Requesting…",
	"follow_again": "Send request again?",
	"follow_unfollow": "Unfollow",
	"followees": "Following",
	"followers": "Followers",
	"following": "Following!",
	"follows_you": "Follows you!",
	"its_you": "It's you!",
	"media": "Media",
	"mute": "Mute",
	"muted": "Muted",
	"per_day": "per day",
	"remote_follow": "Remote follow",
	"statuses": "Statuses",
	"unblock": "Unblock",
	"unblock_progress": "Unblocking...",
	"block_progress": "Blocking...",
	"unmute": "Unmute",
	"unmute_progress": "Unmuting...",
	"mute_progress": "Muting..."
	},
	"user_profile": {
	"timeline_title": "User Timeline",
	"profile_does_not_exist": "Sorry, this profile does not exist.",
	"profile_loading_error": "Sorry, there was an error loading this profile."
	},
	"who_to_follow": {
	"more": "More",
	"who_to_follow": "Who to follow"
	},
	"tool_tip": {
	"media_upload": "Upload Media",
	"repeat": "Repeat",
	"reply": "Reply",
	"favorite": "Favorite",
	"user_settings": "User Settings"
	},
	"upload":{
	"error": {
	"base": "Upload failed.",
	"file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
	"default": "Try again later"
	},
	"file_size_units": {
	"B": "B",
	"KiB": "KiB",
	"MiB": "MiB",
	"GiB": "GiB",
	"TiB": "TiB"
	}
	}
	}
	diff --git a/src/i18n/fi.json b/src/i18n/fi.json
	index c7a25fe118..4f0ffb4b4d 100644
	--- a/src/i18n/fi.json
	+++ b/src/i18n/fi.json
	@@ -1,273 +1,277 @@
	{
	"chat": {
	"title": "Chat"
	},
	"features_panel": {
	"chat": "Chat",
	"gopher": "Gopher",
	"media_proxy": "Media-välityspalvelin",
	"scope_options": "Näkyvyyden rajaus",
	"text_limit": "Tekstin pituusraja",
	"title": "Ominaisuudet",
	"who_to_follow": "Seurausehdotukset"
	},
	"finder": {
	"error_fetching_user": "Virhe hakiessa käyttäjää",
	"find_user": "Hae käyttäjä"
	},
	"general": {
	"apply": "Aseta",
	"submit": "Lähetä",
	"more": "Lisää",
	"generic_error": "Virhe tapahtui"
	},
	"login": {
	"login": "Kirjaudu sisään",
	"description": "Kirjaudu sisään OAuthilla",
	"logout": "Kirjaudu ulos",
	"password": "Salasana",
	"placeholder": "esim. Seppo",
	"register": "Rekisteröidy",
	"username": "Käyttäjänimi"
	},
	"nav": {
	"about": "Tietoja",
	"back": "Takaisin",
	"chat": "Paikallinen Chat",
	"friend_requests": "Seurauspyynnöt",
	"mentions": "Maininnat",
	"dms": "Yksityisviestit",
	"public_tl": "Julkinen Aikajana",
	"timeline": "Aikajana",
	"twkn": "Koko Tunnettu Verkosto",
	"user_search": "Käyttäjähaku",
	"who_to_follow": "Seurausehdotukset",
	"preferences": "Asetukset"
	},
	"notifications": {
	"broken_favorite": "Viestiä ei löydetty...",
	"favorited_you": "tykkäsi viestistäsi",
	"followed_you": "seuraa sinua",
	"load_older": "Lataa vanhempia ilmoituksia",
	"notifications": "Ilmoitukset",
	"read": "Lue!",
	"repeated_you": "toisti viestisi",
	"no_more_notifications": "Ei enempää ilmoituksia"
	},
	"post_status": {
	"new_status": "Uusi viesti",
	"account_not_locked_warning": "Tilisi ei ole {0}. Kuka vain voi seurata sinua nähdäksesi 'vain-seuraajille' -viestisi",
	"account_not_locked_warning_link": "lukittu",
	"attachments_sensitive": "Merkkaa liitteet arkaluonteisiksi",
	"content_type": {
	"plain_text": "Tavallinen teksti"
	},
	"content_warning": "Aihe (valinnainen)",
	"default": "Tulin juuri saunasta.",
	"direct_warning": "Tämä viesti näkyy vain mainituille käyttäjille.",
	"posting": "Lähetetään",
	"scope": {
	"direct": "Yksityisviesti - Näkyy vain mainituille käyttäjille",
	"private": "Vain-seuraajille - Näkyy vain seuraajillesi",
	"public": "Julkinen - Näkyy julkisilla aikajanoilla",
	"unlisted": "Listaamaton - Ei näy julkisilla aikajanoilla"
	}
	},
	"registration": {
	"bio": "Kuvaus",
	"email": "Sähköposti",
	"fullname": "Koko nimi",
	"password_confirm": "Salasanan vahvistaminen",
	"registration": "Rekisteröityminen",
	"token": "Kutsuvaltuus",
	"captcha": "Varmenne",
	"new_captcha": "Paina kuvaa saadaksesi uuden varmenteen",
	"validations": {
	"username_required": "ei voi olla tyhjä",
	"fullname_required": "ei voi olla tyhjä",
	"email_required": "ei voi olla tyhjä",
	"password_required": "ei voi olla tyhjä",
	"password_confirmation_required": "ei voi olla tyhjä",
	"password_confirmation_match": "pitää vastata salasanaa"
	}
	},
	"settings": {
	"attachmentRadius": "Liitteet",
	"attachments": "Liitteet",
	"autoload": "Lataa vanhempia viestejä automaattisesti ruudun pohjalla",
	"avatar": "Profiilikuva",
	"avatarAltRadius": "Profiilikuvat (ilmoitukset)",
	"avatarRadius": "Profiilikuvat",
	"background": "Tausta",
	"bio": "Kuvaus",
	"btnRadius": "Napit",
	"cBlue": "Sininen (Vastaukset, seuraukset)",
	"cGreen": "Vihreä (Toistot)",
	"cOrange": "Oranssi (Tykkäykset)",
	"cRed": "Punainen (Peruminen)",
	"change_password": "Vaihda salasana",
	"change_password_error": "Virhe vaihtaessa salasanaa.",
	"changed_password": "Salasana vaihdettu!",
	"collapse_subject": "Minimoi viestit, joille on asetettu aihe",
	"composing": "Viestien laatiminen",
	"confirm_new_password": "Vahvista uusi salasana",
	"current_avatar": "Nykyinen profiilikuvasi",
	"current_password": "Nykyinen salasana",
	"current_profile_banner": "Nykyinen julisteesi",
	"data_import_export_tab": "Tietojen tuonti / vienti",
	"default_vis": "Oletusnäkyvyysrajaus",
	"delete_account": "Poista tili",
	"delete_account_description": "Poista tilisi ja viestisi pysyvästi.",
	"delete_account_error": "Virhe poistaessa tiliäsi. Jos virhe jatkuu, ota yhteyttä palvelimesi ylläpitoon.",
	"delete_account_instructions": "Syötä salasanasi vahvistaaksesi tilin poiston.",
	"export_theme": "Tallenna teema",
	"filtering": "Suodatus",
	"filtering_explanation": "Kaikki viestit, jotka sisältävät näitä sanoja, suodatetaan. Yksi sana per rivi.",
	"follow_export": "Seurausten vienti",
	"follow_export_button": "Vie seurauksesi CSV-tiedostoon",
	"follow_export_processing": "Käsitellään, sinua pyydetään lataamaan tiedosto hetken päästä",
	"follow_import": "Seurausten tuonti",
	"follow_import_error": "Virhe tuodessa seuraksia",
	"follows_imported": "Seuraukset tuotu! Niiden käsittely vie hetken.",
	"foreground": "Korostus",
	"general": "Yleinen",
	"hide_attachments_in_convo": "Piilota liitteet keskusteluissa",
	"hide_attachments_in_tl": "Piilota liitteet aikajanalla",
	"max_thumbnails": "Suurin sallittu määrä liitteitä esikatselussa",
	"hide_isp": "Piilota palvelimenkohtainen ruutu",
	"preload_images": "Esilataa kuvat",
	"use_one_click_nsfw": "Avaa NSFW-liitteet yhdellä painalluksella",
	"hide_post_stats": "Piilota viestien statistiikka (esim. tykkäysten määrä)",
	"hide_user_stats": "Piilota käyttäjien statistiikka (esim. seuraajien määrä)",
	"import_followers_from_a_csv_file": "Tuo seuraukset CSV-tiedostosta",
	"import_theme": "Tuo tallennettu teema",
	"inputRadius": "Syöttökentät",
	"checkboxRadius": "Valintalaatikot",
	"instance_default": "(oletus: {value})",
	"instance_default_simple": "(oletus)",
	"interface": "Käyttöliittymä",
	"interfaceLanguage": "Käyttöliittymän kieli",
	"invalid_theme_imported": "Tuotu tallennettu teema on epäkelpo, muutoksia ei tehty nykyiseen teemaasi.",
	"limited_availability": "Ei saatavilla selaimessasi",
	"links": "Linkit",
	"lock_account_description": "Vain erikseen hyväksytyt käyttäjät voivat seurata tiliäsi",
	"loop_video": "Uudelleentoista videot",
	"loop_video_silent_only": "Uudelleentoista ainoastaan äänettömät videot (Video-\"giffit\")",
	"play_videos_in_modal": "Toista videot modaalissa",
	"use_contain_fit": "Älä rajaa liitteitä esikatselussa",
	"name": "Nimi",
	"name_bio": "Nimi ja kuvaus",
	"new_password": "Uusi salasana",
	"notification_visibility": "Ilmoitusten näkyvyys",
	"notification_visibility_follows": "Seuraukset",
	"notification_visibility_likes": "Tykkäykset",
	"notification_visibility_mentions": "Maininnat",
	"notification_visibility_repeats": "Toistot",
	"no_rich_text_description": "Älä näytä tekstin muotoilua.",
	"hide_network_description": "Älä näytä seurauksiani tai seuraajiani",
	"nsfw_clickthrough": "Piilota NSFW liitteet klikkauksen taakse",
	"oauth_tokens": "OAuth-merkit",
	"token": "Token",
	"refresh_token": "Päivitä token",
	"valid_until": "Voimassa asti",
	"revoke_token": "Peruuttaa",
	"panelRadius": "Ruudut",
	"pause_on_unfocused": "Pysäytä automaattinen viestien näyttö välilehden ollessa pois fokuksesta",
	"presets": "Valmiit teemat",
	"profile_background": "Taustakuva",
	"profile_banner": "Juliste",
	"profile_tab": "Profiili",
	"radii_help": "Aseta reunojen pyöristys (pikseleinä)",
	"replies_in_timeline": "Keskustelut aikajanalla",
	"reply_link_preview": "Keskusteluiden vastauslinkkien esikatselu",
	"reply_visibility_all": "Näytä kaikki vastaukset",
	"reply_visibility_following": "Näytä vain vastaukset minulle tai seuraamilleni käyttäjille",
	"reply_visibility_self": "Näytä vain vastaukset minulle",
	"saving_err": "Virhe tallentaessa asetuksia",
	"saving_ok": "Asetukset tallennettu",
	"security_tab": "Tietoturva",
	"scope_copy": "Kopioi näkyvyysrajaus vastatessa (Yksityisviestit aina kopioivat)",
	"set_new_avatar": "Aseta uusi profiilikuva",
	"set_new_profile_background": "Aseta uusi taustakuva",
	"set_new_profile_banner": "Aseta uusi juliste",
	"settings": "Asetukset",
	"subject_input_always_show": "Näytä aihe-kenttä",
	"subject_line_behavior": "Aihe-kentän kopiointi",
	"subject_line_email": "Kuten sähköposti: \"re: aihe\"",
	"subject_line_mastodon": "Kopioi sellaisenaan",
	"subject_line_noop": "Älä kopioi",
	"stop_gifs": "Toista giffit vain kohdistaessa",
	"streaming": "Näytä uudet viestit automaattisesti ollessasi ruudun huipulla",
	"text": "Teksti",
	"theme": "Teema",
	"theme_help": "Käytä heksadesimaalivärejä muokataksesi väriteemaasi.",
	"theme_help_v2_1": "Voit asettaa tiettyjen osien värin tai läpinäkyvyyden täyttämällä valintalaatikon, käytä \"Tyhjennä kaikki\"-nappia tyhjentääksesi kaiken.",
	"theme_help_v2_2": "Ikonit kenttien alla ovat kontrasti-indikaattoreita, lisätietoa kohdistamalla. Käyttäessä läpinäkyvyyttä ne näyttävät pahimman skenaarion.",
	"tooltipRadius": "Ohje- tai huomioviestit",
	"user_settings": "Käyttäjän asetukset",
	"values": {
	"false": "pois päältä",
	"true": "päällä"
	}
	},
	"timeline": {
	"collapse": "Sulje",
	"conversation": "Keskustelu",
	"error_fetching": "Virhe ladatessa viestejä",
	"load_older": "Lataa vanhempia viestejä",
	"no_retweet_hint": "Viesti ei ole julkinen, eikä sitä voi toistaa",
	"repeated": "toisti",
	"show_new": "Näytä uudet",
	"up_to_date": "Ajantasalla",
	"no_more_statuses": "Ei enempää viestejä"
	},
	+ "status": {
	+ "reply_to": "Vastaus",
	+ "replies_list": "Vastaukset:"
	+ },
	"user_card": {
	"approve": "Hyväksy",
	"block": "Estä",
	"blocked": "Estetty!",
	"deny": "Älä hyväksy",
	"follow": "Seuraa",
	"follow_sent": "Pyyntö lähetetty!",
	"follow_progress": "Pyydetään...",
	"follow_again": "Lähetä pyyntö uudestaan",
	"follow_unfollow": "Älä seuraa",
	"followees": "Seuraa",
	"followers": "Seuraajat",
	"following": "Seuraat!",
	"follows_you": "Seuraa sinua!",
	"its_you": "Sinun tili!",
	"mute": "Hiljennä",
	"muted": "Hiljennetty",
	"per_day": "päivässä",
	"remote_follow": "Seuraa muualta",
	"statuses": "Viestit"
	},
	"user_profile": {
	"timeline_title": "Käyttäjän aikajana"
	},
	"who_to_follow": {
	"more": "Lisää",
	"who_to_follow": "Seurausehdotukset"
	},
	"tool_tip": {
	"media_upload": "Lataa tiedosto",
	"repeat": "Toista",
	"reply": "Vastaa",
	"favorite": "Tykkää",
	"user_settings": "Käyttäjäasetukset"
	},
	"upload":{
	"error": {
	"base": "Lataus epäonnistui.",
	"file_too_big": "Tiedosto liian suuri [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
	"default": "Yritä uudestaan myöhemmin"
	},
	"file_size_units": {
	"B": "tavua",
	"KiB": "kt",
	"MiB": "Mt",
	"GiB": "Gt",
	"TiB": "Tt"
	}
	}
	}
	diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
	index 2278cd453f..7e972d7b22 100644
	--- a/src/services/backend_interactor_service/backend_interactor_service.js
	+++ b/src/services/backend_interactor_service/backend_interactor_service.js
	@@ -1,121 +1,121 @@
	import apiService from '../api/api.service.js'
	import timelineFetcherService from '../timeline_fetcher/timeline_fetcher.service.js'

	const backendInteractorService = (credentials) => {
	const fetchStatus = ({id}) => {
	return apiService.fetchStatus({id, credentials})
	}

	const fetchConversation = ({id}) => {
	return apiService.fetchConversation({id, credentials})
	}

	const fetchFriends = ({id, page}) => {
	return apiService.fetchFriends({id, page, credentials})
	}

	const exportFriends = ({id}) => {
	return apiService.exportFriends({id, credentials})
	}

	const fetchFollowers = ({id, page}) => {
	return apiService.fetchFollowers({id, page, credentials})
	}

	const fetchAllFollowing = ({username}) => {
	return apiService.fetchAllFollowing({username, credentials})
	}

	const fetchUser = ({id}) => {
	return apiService.fetchUser({id, credentials})
	}

	const followUser = (id) => {
	return apiService.followUser({credentials, id})
	}

	const unfollowUser = (id) => {
	return apiService.unfollowUser({credentials, id})
	}

	const blockUser = (id) => {
	return apiService.blockUser({credentials, id})
	}

	const unblockUser = (id) => {
	return apiService.unblockUser({credentials, id})
	}

	const approveUser = (id) => {
	return apiService.approveUser({credentials, id})
	}

	const denyUser = (id) => {
	return apiService.denyUser({credentials, id})
	}

	- const startFetching = ({timeline, store, userId = false}) => {
	- return timelineFetcherService.startFetching({timeline, store, credentials, userId})
	+ const startFetching = ({timeline, store, userId = false, tag}) => {
	+ return timelineFetcherService.startFetching({timeline, store, credentials, userId, tag})
	}

	const setUserMute = ({id, muted = true}) => {
	return apiService.setUserMute({id, muted, credentials})
	}

	const fetchMutes = () => apiService.fetchMutes({credentials})
	const fetchBlocks = (params) => apiService.fetchBlocks({credentials, ...params})
	const fetchFollowRequests = () => apiService.fetchFollowRequests({credentials})
	const fetchOAuthTokens = () => apiService.fetchOAuthTokens({credentials})
	const revokeOAuthToken = (id) => apiService.revokeOAuthToken({id, credentials})

	const getCaptcha = () => apiService.getCaptcha()
	const register = (params) => apiService.register(params)
	const updateAvatar = ({params}) => apiService.updateAvatar({credentials, params})
	const updateBg = ({params}) => apiService.updateBg({credentials, params})
	const updateBanner = ({params}) => apiService.updateBanner({credentials, params})
	const updateProfile = ({params}) => apiService.updateProfile({credentials, params})

	const externalProfile = (profileUrl) => apiService.externalProfile({profileUrl, credentials})
	const followImport = ({params}) => apiService.followImport({params, credentials})

	const deleteAccount = ({password}) => apiService.deleteAccount({credentials, password})
	const changePassword = ({password, newPassword, newPasswordConfirmation}) => apiService.changePassword({credentials, password, newPassword, newPasswordConfirmation})

	const backendInteractorServiceInstance = {
	fetchStatus,
	fetchConversation,
	fetchFriends,
	exportFriends,
	fetchFollowers,
	followUser,
	unfollowUser,
	blockUser,
	unblockUser,
	fetchUser,
	fetchAllFollowing,
	verifyCredentials: apiService.verifyCredentials,
	startFetching,
	setUserMute,
	fetchMutes,
	fetchBlocks,
	fetchOAuthTokens,
	revokeOAuthToken,
	register,
	getCaptcha,
	updateAvatar,
	updateBg,
	updateBanner,
	updateProfile,
	externalProfile,
	followImport,
	deleteAccount,
	changePassword,
	fetchFollowRequests,
	approveUser,
	denyUser
	}

	return backendInteractorServiceInstance
	}

	export default backendInteractorService

File Metadata

Mime Type: text/x-diff
Expires: Sun, Aug 9, 9:58 AM (1 d, 16 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1724426
Default Alt Text: (91 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions