No OneTemporary
Actions

Authored By

Unknown

Size

74 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/boot/after_store.js b/src/boot/after_store.js
	index 5693dcc65a..c4126e4c84 100644
	--- a/src/boot/after_store.js
	+++ b/src/boot/after_store.js
	@@ -1,175 +1,176 @@
	import Vue from 'vue'
	import VueRouter from 'vue-router'
	import routes from './routes'

	import App from '../App.vue'

	const afterStoreSetup = ({ store, i18n }) => {
	window.fetch('/api/statusnet/config.json')
	.then((res) => res.json())
	.then((data) => {
	const { name, closed: registrationClosed, textlimit, uploadlimit, server, vapidPublicKey } = data.site

	store.dispatch('setInstanceOption', { name: 'name', value: name })
	store.dispatch('setInstanceOption', { name: 'registrationOpen', value: (registrationClosed === '0') })
	store.dispatch('setInstanceOption', { name: 'textlimit', value: parseInt(textlimit) })
	store.dispatch('setInstanceOption', { name: 'server', value: server })

	// TODO: default values for this stuff, added if to not make it break on
	// my dev config out of the box.
	if (uploadlimit) {
	store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadlimit.uploadlimit) })
	store.dispatch('setInstanceOption', { name: 'avatarlimit', value: parseInt(uploadlimit.avatarlimit) })
	store.dispatch('setInstanceOption', { name: 'backgroundlimit', value: parseInt(uploadlimit.backgroundlimit) })
	store.dispatch('setInstanceOption', { name: 'bannerlimit', value: parseInt(uploadlimit.bannerlimit) })
	}

	if (vapidPublicKey) {
	store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey })
	}

	var apiConfig = data.site.pleromafe

	window.fetch('/static/config.json')
	.then((res) => res.json())
	.catch((err) => {
	console.warn('Failed to load static/config.json, continuing without it.')
	console.warn(err)
	return {}
	})
	.then((staticConfig) => {
	const overrides = window.___pleromafe_dev_overrides \|\| {}
	const env = window.___pleromafe_mode.NODE_ENV

	// This takes static config and overrides properties that are present in apiConfig
	let config = {}
	if (overrides.staticConfigPreference && env === 'development') {
	console.warn('OVERRIDING API CONFIG WITH STATIC CONFIG')
	config = Object.assign({}, apiConfig, staticConfig)
	} else {
	config = Object.assign({}, staticConfig, apiConfig)
	}

	const copyInstanceOption = (name) => {
	store.dispatch('setInstanceOption', {name, value: config[name]})
	}

	copyInstanceOption('nsfwCensorImage')
	copyInstanceOption('theme')
	copyInstanceOption('background')
	copyInstanceOption('hidePostStats')
	copyInstanceOption('hideUserStats')
	+ copyInstanceOption('hideFilteredStatuses')
	copyInstanceOption('logo')

	store.dispatch('setInstanceOption', {
	name: 'logoMask',
	value: typeof config.logoMask === 'undefined'
	? true
	: config.logoMask
	})

	store.dispatch('setInstanceOption', {
	name: 'logoMargin',
	value: typeof config.logoMargin === 'undefined'
	? 0
	: config.logoMargin
	})

	copyInstanceOption('redirectRootNoLogin')
	copyInstanceOption('redirectRootLogin')
	copyInstanceOption('showInstanceSpecificPanel')
	copyInstanceOption('scopeOptionsEnabled')
	copyInstanceOption('formattingOptionsEnabled')
	copyInstanceOption('collapseMessageWithSubject')
	copyInstanceOption('loginMethod')
	copyInstanceOption('scopeCopy')
	copyInstanceOption('subjectLineBehavior')
	copyInstanceOption('alwaysShowSubjectInput')
	copyInstanceOption('noAttachmentLinks')

	if ((config.chatDisabled)) {
	store.dispatch('disableChat')
	} else {
	store.dispatch('initializeSocket')
	}

	const router = new VueRouter({
	mode: 'history',
	routes: routes(store),
	scrollBehavior: (to, _from, savedPosition) => {
	if (to.matched.some(m => m.meta.dontScroll)) {
	return false
	}
	return savedPosition \|\| { x: 0, y: 0 }
	}
	})

	/* eslint-disable no-new */
	new Vue({
	router,
	store,
	i18n,
	el: '#app',
	render: h => h(App)
	})
	})
	})

	window.fetch('/static/terms-of-service.html')
	.then((res) => res.text())
	.then((html) => {
	store.dispatch('setInstanceOption', { name: 'tos', value: html })
	})

	window.fetch('/api/pleroma/emoji.json')
	.then(
	(res) => res.json()
	.then(
	(values) => {
	const emoji = Object.keys(values).map((key) => {
	return { shortcode: key, image_url: values[key] }
	})
	store.dispatch('setInstanceOption', { name: 'customEmoji', value: emoji })
	store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: true })
	},
	(failure) => {
	store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: false })
	}
	),
	(error) => console.log(error)
	)

	window.fetch('/static/emoji.json')
	.then((res) => res.json())
	.then((values) => {
	const emoji = Object.keys(values).map((key) => {
	return { shortcode: key, image_url: false, 'utf': values[key] }
	})
	store.dispatch('setInstanceOption', { name: 'emoji', value: emoji })
	})

	window.fetch('/instance/panel.html')
	.then((res) => res.text())
	.then((html) => {
	store.dispatch('setInstanceOption', { name: 'instanceSpecificPanelContent', value: html })
	})

	window.fetch('/nodeinfo/2.0.json')
	.then((res) => res.json())
	.then((data) => {
	const metadata = data.metadata

	const features = metadata.features
	store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
	store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') })
	store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })

	store.dispatch('setInstanceOption', { name: 'restrictedNicknames', value: metadata.restrictedNicknames })

	const suggestions = metadata.suggestions
	store.dispatch('setInstanceOption', { name: 'suggestionsEnabled', value: suggestions.enabled })
	store.dispatch('setInstanceOption', { name: 'suggestionsWeb', value: suggestions.web })
	})
	}

	export default afterStoreSetup
	diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
	index 8d1384855e..257eb691f5 100644
	--- a/src/components/settings/settings.js
	+++ b/src/components/settings/settings.js
	@@ -1,176 +1,184 @@
	/* eslint-env browser */
	import TabSwitcher from '../tab_switcher/tab_switcher.js'
	import StyleSwitcher from '../style_switcher/style_switcher.vue'
	import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
	import { filter, trim } from 'lodash'

	const settings = {
	data () {
	const user = this.$store.state.config
	const instance = this.$store.state.instance

	return {
	hideAttachmentsLocal: user.hideAttachments,
	hideAttachmentsInConvLocal: user.hideAttachmentsInConv,
	hideNsfwLocal: user.hideNsfw,
	useOneClickNsfw: user.useOneClickNsfw,
	hideISPLocal: user.hideISP,
	preloadImage: user.preloadImage,

	hidePostStatsLocal: typeof user.hidePostStats === 'undefined'
	? instance.hidePostStats
	: user.hidePostStats,
	hidePostStatsDefault: this.$t('settings.values.' + instance.hidePostStats),

	hideUserStatsLocal: typeof user.hideUserStats === 'undefined'
	? instance.hideUserStats
	: user.hideUserStats,
	hideUserStatsDefault: this.$t('settings.values.' + instance.hideUserStats),

	+ hideFilteredStatusesLocal: typeof user.hideFilteredStatuses === 'undefined'
	+ ? instance.hideFilteredStatuses
	+ : user.hideFilteredStatuses,
	+ hideFilteredStatusesDefault: this.$t('settings.values.' + instance.hideFilteredStatuses),
	+
	notificationVisibilityLocal: user.notificationVisibility,
	replyVisibilityLocal: user.replyVisibility,
	loopVideoLocal: user.loopVideo,
	muteWordsString: user.muteWords.join('\n'),
	autoLoadLocal: user.autoLoad,
	streamingLocal: user.streaming,
	pauseOnUnfocusedLocal: user.pauseOnUnfocused,
	hoverPreviewLocal: user.hoverPreview,

	collapseMessageWithSubjectLocal: typeof user.collapseMessageWithSubject === 'undefined'
	? instance.collapseMessageWithSubject
	: user.collapseMessageWithSubject,
	collapseMessageWithSubjectDefault: this.$t('settings.values.' + instance.collapseMessageWithSubject),

	subjectLineBehaviorLocal: typeof user.subjectLineBehavior === 'undefined'
	? instance.subjectLineBehavior
	: user.subjectLineBehavior,
	subjectLineBehaviorDefault: instance.subjectLineBehavior,

	alwaysShowSubjectInputLocal: typeof user.alwaysShowSubjectInput === 'undefined'
	? instance.alwaysShowSubjectInput
	: user.alwaysShowSubjectInput,
	alwaysShowSubjectInputDefault: instance.alwaysShowSubjectInput,

	scopeCopyLocal: typeof user.scopeCopy === 'undefined'
	? instance.scopeCopy
	: user.scopeCopy,
	scopeCopyDefault: this.$t('settings.values.' + instance.scopeCopy),

	stopGifs: user.stopGifs,
	webPushNotificationsLocal: user.webPushNotifications,
	loopVideoSilentOnlyLocal: user.loopVideosSilentOnly,
	loopSilentAvailable:
	// Firefox
	Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') \|\|
	// Chrome-likes
	Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') \|\|
	// Future spec, still not supported in Nightly 63 as of 08/2018
	Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'),
	playVideosInModal: user.playVideosInModal,
	useContainFit: user.useContainFit
	}
	},
	components: {
	TabSwitcher,
	StyleSwitcher,
	InterfaceLanguageSwitcher
	},
	computed: {
	user () {
	return this.$store.state.users.currentUser
	},
	currentSaveStateNotice () {
	return this.$store.state.interface.settings.currentSaveStateNotice
	}
	},
	watch: {
	hideAttachmentsLocal (value) {
	this.$store.dispatch('setOption', { name: 'hideAttachments', value })
	},
	hideAttachmentsInConvLocal (value) {
	this.$store.dispatch('setOption', { name: 'hideAttachmentsInConv', value })
	},
	hidePostStatsLocal (value) {
	this.$store.dispatch('setOption', { name: 'hidePostStats', value })
	},
	hideUserStatsLocal (value) {
	this.$store.dispatch('setOption', { name: 'hideUserStats', value })
	},
	+ hideFilteredStatusesLocal (value) {
	+ this.$store.dispatch('setOption', { name: 'hideFilteredStatuses', value })
	+ },
	hideNsfwLocal (value) {
	this.$store.dispatch('setOption', { name: 'hideNsfw', value })
	},
	useOneClickNsfw (value) {
	this.$store.dispatch('setOption', { name: 'useOneClickNsfw', value })
	},
	preloadImage (value) {
	this.$store.dispatch('setOption', { name: 'preloadImage', value })
	},
	hideISPLocal (value) {
	this.$store.dispatch('setOption', { name: 'hideISP', value })
	},
	'notificationVisibilityLocal.likes' (value) {
	this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
	},
	'notificationVisibilityLocal.follows' (value) {
	this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
	},
	'notificationVisibilityLocal.repeats' (value) {
	this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
	},
	'notificationVisibilityLocal.mentions' (value) {
	this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
	},
	replyVisibilityLocal (value) {
	this.$store.dispatch('setOption', { name: 'replyVisibility', value })
	},
	loopVideoLocal (value) {
	this.$store.dispatch('setOption', { name: 'loopVideo', value })
	},
	loopVideoSilentOnlyLocal (value) {
	this.$store.dispatch('setOption', { name: 'loopVideoSilentOnly', value })
	},
	autoLoadLocal (value) {
	this.$store.dispatch('setOption', { name: 'autoLoad', value })
	},
	streamingLocal (value) {
	this.$store.dispatch('setOption', { name: 'streaming', value })
	},
	pauseOnUnfocusedLocal (value) {
	this.$store.dispatch('setOption', { name: 'pauseOnUnfocused', value })
	},
	hoverPreviewLocal (value) {
	this.$store.dispatch('setOption', { name: 'hoverPreview', value })
	},
	muteWordsString (value) {
	value = filter(value.split('\n'), (word) => trim(word).length > 0)
	this.$store.dispatch('setOption', { name: 'muteWords', value })
	},
	collapseMessageWithSubjectLocal (value) {
	this.$store.dispatch('setOption', { name: 'collapseMessageWithSubject', value })
	},
	scopeCopyLocal (value) {
	this.$store.dispatch('setOption', { name: 'scopeCopy', value })
	},
	alwaysShowSubjectInputLocal (value) {
	this.$store.dispatch('setOption', { name: 'alwaysShowSubjectInput', value })
	},
	subjectLineBehaviorLocal (value) {
	this.$store.dispatch('setOption', { name: 'subjectLineBehavior', value })
	},
	stopGifs (value) {
	this.$store.dispatch('setOption', { name: 'stopGifs', value })
	},
	webPushNotificationsLocal (value) {
	this.$store.dispatch('setOption', { name: 'webPushNotifications', value })
	if (value) this.$store.dispatch('registerPushNotifications')
	},
	playVideosInModal (value) {
	this.$store.dispatch('setOption', { name: 'playVideosInModal', value })
	},
	useContainFit (value) {
	this.$store.dispatch('setOption', { name: 'useContainFit', value })
	}
	}
	}

	export default settings
	diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
	index 9953780f23..2fa2c89ca4 100644
	--- a/src/components/settings/settings.vue
	+++ b/src/components/settings/settings.vue
	@@ -1,324 +1,330 @@
	<template>
	<div class="settings panel panel-default">
	<div class="panel-heading">
	<div class="title">
	{{$t('settings.settings')}}
	</div>

	<transition name="fade">
	<template v-if="currentSaveStateNotice">
	<div @click.prevent class="alert error" v-if="currentSaveStateNotice.error">
	{{ $t('settings.saving_err') }}
	</div>

	<div @click.prevent class="alert transparent" v-if="!currentSaveStateNotice.error">
	{{ $t('settings.saving_ok') }}
	</div>
	</template>
	</transition>
	</div>
	<div class="panel-body">
	<keep-alive>
	<tab-switcher>
	<div :label="$t('settings.general')" >
	<div class="setting-item">
	<h2>{{ $t('settings.interface') }}</h2>
	<ul class="setting-list">
	<li>
	<interface-language-switcher />
	</li>
	<li>
	<input type="checkbox" id="hideISP" v-model="hideISPLocal">
	<label for="hideISP">{{$t('settings.hide_isp')}}</label>
	</li>
	</ul>
	</div>
	<div class="setting-item">
	<h2>{{$t('nav.timeline')}}</h2>
	<ul class="setting-list">
	<li>
	<input type="checkbox" id="collapseMessageWithSubject" v-model="collapseMessageWithSubjectLocal">
	<label for="collapseMessageWithSubject">
	{{$t('settings.collapse_subject')}} {{$t('settings.instance_default', { value: collapseMessageWithSubjectDefault })}}
	</label>
	</li>
	<li>
	<input type="checkbox" id="streaming" v-model="streamingLocal">
	<label for="streaming">{{$t('settings.streaming')}}</label>
	<ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
	<li>
	<input :disabled="!streamingLocal" type="checkbox" id="pauseOnUnfocused" v-model="pauseOnUnfocusedLocal">
	<label for="pauseOnUnfocused">{{$t('settings.pause_on_unfocused')}}</label>
	</li>
	</ul>
	</li>
	<li>
	<input type="checkbox" id="autoload" v-model="autoLoadLocal">
	<label for="autoload">{{$t('settings.autoload')}}</label>
	</li>
	<li>
	<input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
	<label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
	</li>
	</ul>
	</div>

	<div class="setting-item">
	<h2>{{$t('settings.composing')}}</h2>
	<ul class="setting-list">
	<li>
	<input type="checkbox" id="scopeCopy" v-model="scopeCopyLocal">
	<label for="scopeCopy">
	{{$t('settings.scope_copy')}} {{$t('settings.instance_default', { value: scopeCopyDefault })}}
	</label>
	</li>
	<li>
	<input type="checkbox" id="subjectHide" v-model="alwaysShowSubjectInputLocal">
	<label for="subjectHide">
	{{$t('settings.subject_input_always_show')}} {{$t('settings.instance_default', { value: alwaysShowSubjectInputDefault })}}
	</label>
	</li>
	<li>
	<div>
	{{$t('settings.subject_line_behavior')}}
	<label for="subjectLineBehavior" class="select">
	<select id="subjectLineBehavior" v-model="subjectLineBehaviorLocal">
	<option value="email">
	{{$t('settings.subject_line_email')}}
	{{subjectLineBehaviorDefault == 'email' ? $t('settings.instance_default_simple') : ''}}
	</option>
	<option value="masto">
	{{$t('settings.subject_line_mastodon')}}
	{{subjectLineBehaviorDefault == 'mastodon' ? $t('settings.instance_default_simple') : ''}}
	</option>
	<option value="noop">
	{{$t('settings.subject_line_noop')}}
	{{subjectLineBehaviorDefault == 'noop' ? $t('settings.instance_default_simple') : ''}}
	</option>
	</select>
	<i class="icon-down-open"/>
	</label>
	</div>
	</li>
	</ul>
	</div>

	<div class="setting-item">
	<h2>{{$t('settings.attachments')}}</h2>
	<ul class="setting-list">
	<li>
	<input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal">
	<label for="hideAttachments">{{$t('settings.hide_attachments_in_tl')}}</label>
	</li>
	<li>
	<input type="checkbox" id="hideAttachmentsInConv" v-model="hideAttachmentsInConvLocal">
	<label for="hideAttachmentsInConv">{{$t('settings.hide_attachments_in_convo')}}</label>
	</li>
	<li>
	<input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
	<label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
	</li>
	<ul class="setting-list suboptions" >
	<li>
	<input :disabled="!hideNsfwLocal" type="checkbox" id="preloadImage" v-model="preloadImage">
	<label for="preloadImage">{{$t('settings.preload_images')}}</label>
	</li>
	<li>
	<input type="checkbox" id="useOneClickNsfw" v-model="useOneClickNsfw">
	<label for="useOneClickNsfw">{{$t('settings.use_one_click_nsfw')}}</label>
	</li>
	</ul>
	<li>
	<input type="checkbox" id="stopGifs" v-model="stopGifs">
	<label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
	</li>
	<li>
	<input type="checkbox" id="loopVideo" v-model="loopVideoLocal">
	<label for="loopVideo">{{$t('settings.loop_video')}}</label>
	<ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
	<li>
	<input :disabled="!loopVideoLocal \|\| !loopSilentAvailable" type="checkbox" id="loopVideoSilentOnly" v-model="loopVideoSilentOnlyLocal">
	<label for="loopVideoSilentOnly">{{$t('settings.loop_video_silent_only')}}</label>
	<div v-if="!loopSilentAvailable" class="unavailable">
	<i class="icon-globe"/>! {{$t('settings.limited_availability')}}
	</div>
	</li>
	</ul>
	</li>
	<li>
	<input type="checkbox" id="playVideosInModal" v-model="playVideosInModal">
	<label for="playVideosInModal">{{$t('settings.play_videos_in_modal')}}</label>
	</li>
	<li>
	<input type="checkbox" id="useContainFit" v-model="useContainFit">
	<label for="useContainFit">{{$t('settings.use_contain_fit')}}</label>
	</li>
	</ul>
	</div>

	<div class="setting-item">
	<h2>{{$t('settings.notifications')}}</h2>
	<ul class="setting-list">
	<li>
	<input type="checkbox" id="webPushNotifications" v-model="webPushNotificationsLocal">
	<label for="webPushNotifications">
	{{$t('settings.enable_web_push_notifications')}}
	</label>
	</li>
	</ul>
	</div>
	</div>

	<div :label="$t('settings.theme')" >
	<div class="setting-item">
	<style-switcher></style-switcher>
	</div>
	</div>

	<div :label="$t('settings.filtering')" >
	<div class="setting-item">
	<div class="select-multiple">
	<span class="label">{{$t('settings.notification_visibility')}}</span>
	<ul class="option-list">
	<li>
	<input type="checkbox" id="notification-visibility-likes" v-model="notificationVisibilityLocal.likes">
	<label for="notification-visibility-likes">
	{{$t('settings.notification_visibility_likes')}}
	</label>
	</li>
	<li>
	<input type="checkbox" id="notification-visibility-repeats" v-model="notificationVisibilityLocal.repeats">
	<label for="notification-visibility-repeats">
	{{$t('settings.notification_visibility_repeats')}}
	</label>
	</li>
	<li>
	<input type="checkbox" id="notification-visibility-follows" v-model="notificationVisibilityLocal.follows">
	<label for="notification-visibility-follows">
	{{$t('settings.notification_visibility_follows')}}
	</label>
	</li>
	<li>
	<input type="checkbox" id="notification-visibility-mentions" v-model="notificationVisibilityLocal.mentions">
	<label for="notification-visibility-mentions">
	{{$t('settings.notification_visibility_mentions')}}
	</label>
	</li>
	</ul>
	- </label>
	</div>
	<div>
	{{$t('settings.replies_in_timeline')}}
	<label for="replyVisibility" class="select">
	<select id="replyVisibility" v-model="replyVisibilityLocal">
	<option value="all" selected>{{$t('settings.reply_visibility_all')}}</option>
	<option value="following">{{$t('settings.reply_visibility_following')}}</option>
	<option value="self">{{$t('settings.reply_visibility_self')}}</option>
	</select>
	<i class="icon-down-open"/>
	</label>
	</div>
	<div>
	<input type="checkbox" id="hidePostStats" v-model="hidePostStatsLocal">
	<label for="hidePostStats">
	{{$t('settings.hide_post_stats')}} {{$t('settings.instance_default', { value: hidePostStatsDefault })}}
	</label>
	</div>
	<div>
	<input type="checkbox" id="hideUserStats" v-model="hideUserStatsLocal">
	<label for="hideUserStats">
	{{$t('settings.hide_user_stats')}} {{$t('settings.instance_default', { value: hideUserStatsDefault })}}
	</label>
	</div>
	</div>
	<div class="setting-item">
	- <p>{{$t('settings.filtering_explanation')}}</p>
	- <textarea id="muteWords" v-model="muteWordsString"></textarea>
	+ <div>
	+ <p>{{$t('settings.filtering_explanation')}}</p>
	+ <textarea id="muteWords" v-model="muteWordsString"></textarea>
	+ </div>
	+ <div>
	+ <input type="checkbox" id="hideFilteredStatuses" v-model="hideFilteredStatusesLocal">
	+ <label for="hideFilteredStatuses">
	+ {{$t('settings.hide_filtered_statuses')}} {{$t('settings.instance_default', { value: hideFilteredStatusesDefault })}}
	+ </label>
	+ </div>
	</div>
	</div>
	-
	</tab-switcher>
	</keep-alive>
	</div>
	</div>
	</template>

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

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

	.setting-item {
	border-bottom: 2px solid var(--fg, $fallback--fg);
	margin: 1em 1em 1.4em;
	padding-bottom: 1.4em;

	> div {
	margin-bottom: .5em;
	&:last-child {
	margin-bottom: 0;
	}
	}

	&:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 1em;
	}

	select {
	min-width: 10em;
	}


	textarea {
	width: 100%;
	height: 100px;
	}

	.unavailable,
	.unavailable i {
	color: var(--cRed, $fallback--cRed);
	color: $fallback--cRed;
	}

	.old-avatar {
	width: 128px;
	border-radius: $fallback--avatarRadius;
	border-radius: var(--avatarRadius, $fallback--avatarRadius);
	}

	.new-avatar {
	object-fit: cover;
	width: 128px;
	height: 128px;
	border-radius: $fallback--avatarRadius;
	border-radius: var(--avatarRadius, $fallback--avatarRadius);
	}

	.btn {
	min-height: 28px;
	min-width: 10em;
	padding: 0 2em;
	}
	}
	.select-multiple {
	display: flex;
	.option-list {
	margin: 0;
	padding-left: .5em;
	}
	}
	.setting-list,
	.option-list{
	list-style-type: none;
	padding-left: 2em;
	li {
	margin-bottom: 0.5em;
	}
	.suboptions {
	margin-top: 0.3em
	}
	}
	</style>
	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index 65ddcb9f65..3403fd1295 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,371 +1,376 @@
	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 } from 'src/services/mention_matcher/mention_matcher.js'
	import { filter, find } from 'lodash'

	const Status = {
	name: 'Status',
	props: [
	'statusoid',
	'expandable',
	'inConversation',
	'focused',
	'highlight',
	'compact',
	'replies',
	'noReplyLinks',
	'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,
	maxAttachments: 9
	}
	},
	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
	+ },
	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 behavior = typeof this.$store.state.config.subjectLineBehavior === 'undefined'
	? this.$store.state.instance.subjectLineBehavior
	: this.$store.state.config.subjectLineBehavior
	const startsWithRe = this.status.summary.match(/^re[: ]/i)
	if (behavior !== 'noop' && startsWithRe \|\| behavior === 'masto') {
	return this.status.summary
	} else if (behavior === 'email') {
	return 're: '.concat(this.status.summary)
	} 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.maxAttachments)) {
	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)
	)
	}
	},
	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.getAttribute('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
	}
	}
	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)
	},
	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 9986107f7a..5e7fa6c5b3 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,585 +1,585 @@
	<template>
	- <div class="status-el" v-if="!hideReply && !deleted" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
	+ <div class="status-el" v-if="(!hideReply && !deleted) && !(muted && hideFilteredStatuses)" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
	<template v-if="muted && !noReplyLinks">
	<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"/>
	<div class="media-body faint">
	<span class="user-name">
	<router-link :to="retweeterProfileLink">
	{{retweeterHtml \|\| 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">
	<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">
	<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>
	</a>
	</span>
	</div>
	<h4 class="replies" v-if="inConversation && !noReplyLinks">
	<small v-if="replies.length">Replies:</small>
	<small class="reply-link" 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>
	<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>
	<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="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-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;
	}
	}

	.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
	}

	.media-heading {
	flex-wrap: nowrap;
	line-height: 18px;
	}

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

	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 {
	padding: 0;
	flex: 1 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;

	.user-name {
	margin-right: .45em;

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

	.links {
	display: flex;
	font-size: 12px;
	color: $fallback--link;
	color: var(--link, $fallback--link);
	max-width: 100%;
	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-info {
	display: flex;
	}
	.replies {
	line-height: 16px;
	}
	.reply-link {
	margin-right: 0.2em;
	}
	}

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

	.timeago {
	margin-right: 0.2em;
	font-size: 12px;
	align-self: last baseline;
	}

	> * {
	margin-left: 0.2em;
	}
	a:hover i {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	}

	.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);

	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;
	}

	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;
	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;

	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;

	div, favorite-button {
	padding-top: 0.25em;
	max-width: 6em;
	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;
	&.is-retweet {
	padding-top: 0.1em;
	}
	}

	.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-bottom-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 ac7cc2a7ca..6820203b2f 100644
	--- a/src/i18n/en.json
	+++ b/src/i18n/en.json
	@@ -1,382 +1,383 @@
	{
	"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"
	},
	"login": {
	"login": "Log in",
	"description": "Log in with OAuth",
	"logout": "Log out",
	"password": "Password",
	"placeholder": "e.g. lain",
	"register": "Register",
	"username": "Username"
	},
	"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",
	"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": {
	"attachmentRadius": "Attachments",
	"attachments": "Attachments",
	"autoload": "Enable automatic loading when scrolled to the bottom",
	"avatar": "Avatar",
	"avatarAltRadius": "Avatars (Notifications)",
	"avatarRadius": "Avatars",
	"background": "Background",
	"bio": "Bio",
	"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",
	"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\")",
	"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",
	"hide_follows_description": "Don't show who I'm following",
	"hide_followers_description": "Don't show who's following me",
	"nsfw_clickthrough": "Enable clickthrough NSFW attachment hiding",
	"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",
	"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",
	"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"
	},
	"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": "Stop following",
	"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"
	},
	"user_profile": {
	"timeline_title": "User Timeline"
	},
	"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/modules/instance.js b/src/modules/instance.js
	index 4ad418738e..ebc7732a62 100644
	--- a/src/modules/instance.js
	+++ b/src/modules/instance.js
	@@ -1,73 +1,74 @@
	import { set } from 'vue'
	import { setPreset } from '../services/style_setter/style_setter.js'

	const defaultState = {
	// Stuff from static/config.json and apiConfig
	name: 'Pleroma FE',
	registrationOpen: true,
	textlimit: 5000,
	server: 'http://localhost:4040/',
	theme: 'pleroma-dark',
	background: '/static/aurora_borealis.jpg',
	logo: '/static/logo.png',
	logoMask: true,
	logoMargin: '.2em',
	redirectRootNoLogin: '/main/all',
	redirectRootLogin: '/main/friends',
	showInstanceSpecificPanel: false,
	scopeOptionsEnabled: true,
	formattingOptionsEnabled: false,
	alwaysShowSubjectInput: true,
	collapseMessageWithSubject: false,
	hidePostStats: false,
	hideUserStats: false,
	+ hideFilteredStatuses: true,
	disableChat: false,
	scopeCopy: true,
	subjectLineBehavior: 'email',
	loginMethod: 'password',
	nsfwCensorImage: undefined,
	vapidPublicKey: undefined,
	noAttachmentLinks: false,

	// Nasty stuff
	pleromaBackend: true,
	emoji: [],
	customEmoji: [],
	restrictedNicknames: [],

	// Feature-set, apparently, not everything here is reported...
	mediaProxyAvailable: false,
	chatAvailable: false,
	gopherAvailable: false,
	suggestionsEnabled: false,
	suggestionsWeb: '',

	// Html stuff
	instanceSpecificPanelContent: '',
	tos: ''
	}

	const instance = {
	state: defaultState,
	mutations: {
	setInstanceOption (state, { name, value }) {
	if (typeof value !== 'undefined') {
	set(state, name, value)
	}
	}
	},
	actions: {
	setInstanceOption ({ commit, dispatch }, { name, value }) {
	commit('setInstanceOption', {name, value})
	switch (name) {
	case 'name':
	dispatch('setPageTitle')
	break
	case 'theme':
	setPreset(value, commit)
	}
	}
	}
	}

	export default instance

File Metadata

Mime Type: text/x-diff
Expires: Sun, Nov 1, 2:20 AM (15 h, 45 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1802230
Default Alt Text: (74 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions