No OneTemporary
Actions

Authored By

Unknown

Size

70 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/settings_modal/settings_modal_admin_content.js b/src/components/settings_modal/settings_modal_admin_content.js
	index 593318ec42..fa6b7f8ad5 100644
	--- a/src/components/settings_modal/settings_modal_admin_content.js
	+++ b/src/components/settings_modal/settings_modal_admin_content.js
	@@ -1,96 +1,96 @@
	-import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	+import VerticalTabSwitcher from 'src/components/tab_switcher/vertical_tab_switcher.jsx'

	import InstanceTab from './admin_tabs/instance_tab.vue'
	import LimitsTab from './admin_tabs/limits_tab.vue'
	import FrontendsTab from './admin_tabs/frontends_tab.vue'
	import EmojiTab from './admin_tabs/emoji_tab.vue'
	import { useInterfaceStore } from 'src/stores/interface'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faWrench,
	faHand,
	faLaptopCode,
	faPaintBrush,
	faBell,
	faDownload,
	faEyeSlash,
	faInfo
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faWrench,
	faHand,
	faLaptopCode,
	faPaintBrush,
	faBell,
	faDownload,
	faEyeSlash,
	faInfo
	)

	const SettingsModalAdminContent = {
	components: {
	- TabSwitcher,
	+ VerticalTabSwitcher,

	InstanceTab,
	LimitsTab,
	FrontendsTab,
	EmojiTab
	},
	computed: {
	user () {
	return this.$store.state.users.currentUser
	},
	isLoggedIn () {
	return !!this.$store.state.users.currentUser
	},
	open () {
	return useInterfaceStore().settingsModalState !== 'hidden'
	},
	bodyLock () {
	return useInterfaceStore().settingsModalState === 'visible'
	},
	adminDbLoaded () {
	return this.$store.state.adminSettings.loaded
	},
	adminDescriptionsLoaded () {
	return this.$store.state.adminSettings.descriptions !== null
	},
	noDb () {
	return this.$store.state.adminSettings.dbConfigEnabled === false
	}
	},
	created () {
	if (this.user.rights.admin) {
	this.$store.dispatch('loadAdminStuff')
	}
	},
	methods: {
	onOpen () {
	const targetTab = useInterfaceStore().settingsModalTargetTab
	// We're being told to open in specific tab
	if (targetTab) {
	const tabIndex = this.$refs.tabSwitcher.$slots.default().findIndex(elm => {
	return elm.props && elm.props['data-tab-name'] === targetTab
	})
	if (tabIndex >= 0) {
	this.$refs.tabSwitcher.setTab(tabIndex)
	}
	}
	// Clear the state of target tab, so that next time settings is opened
	// it doesn't force it.
	useInterfaceStore().clearSettingsModalTargetTab()
	}
	},
	mounted () {
	this.onOpen()
	},
	watch: {
	open: function (value) {
	if (value) this.onOpen()
	}
	}
	}

	export default SettingsModalAdminContent
	diff --git a/src/components/settings_modal/settings_modal_admin_content.vue b/src/components/settings_modal/settings_modal_admin_content.vue
	index 39ef74f64d..501a3acf6e 100644
	--- a/src/components/settings_modal/settings_modal_admin_content.vue
	+++ b/src/components/settings_modal/settings_modal_admin_content.vue
	@@ -1,79 +1,79 @@
	<template>
	- <tab-switcher
	+ <vertical-tab-switcher
	v-if="adminDescriptionsLoaded && (noDb \|\| adminDbLoaded)"
	ref="tabSwitcher"
	class="settings_tab-switcher"
	:side-tab-bar="true"
	:scrollable-tabs="true"
	:render-only-focused="true"
	:body-scroll-lock="bodyLock"
	>
	<div
	v-if="noDb"
	:label="$t('admin_dash.tabs.nodb')"
	icon="exclamation-triangle"
	data-tab-name="nodb-notice"
	>
	<div :label="$t('admin_dash.tabs.nodb')">
	<div class="setting-item">
	<h2>{{ $t('admin_dash.nodb.heading') }}</h2>
	<i18n-t
	scope="global"
	keypath="admin_dash.nodb.text"
	>
	<template #documentation>
	<a
	href="https://docs-develop.pleroma.social/backend/configuration/howto_database_config/"
	target="_blank"
	>
	{{ $t("admin_dash.nodb.documentation") }}
	</a>
	</template>
	<template #property>
	<code>config :pleroma, configurable_from_database</code>
	</template>
	<template #value>
	<code>true</code>
	</template>
	</i18n-t>
	<p>{{ $t('admin_dash.nodb.text2') }}</p>
	</div>
	</div>
	</div>
	<div
	v-if="adminDbLoaded"
	:label="$t('admin_dash.tabs.instance')"
	icon="wrench"
	data-tab-name="general"
	>
	<InstanceTab />
	</div>
	<div
	v-if="adminDbLoaded"
	:label="$t('admin_dash.tabs.limits')"
	icon="hand"
	data-tab-name="limits"
	>
	<LimitsTab />
	</div>
	<div
	:label="$t('admin_dash.tabs.frontends')"
	icon="laptop-code"
	data-tab-name="frontends"
	>
	<FrontendsTab />
	</div>

	<div
	:label="$t('admin_dash.tabs.emoji')"
	icon="face-smile-beam"
	data-tab-name="emoji"
	>
	<EmojiTab />
	</div>
	- </tab-switcher>
	+ </vertical-tab-switcher>
	</template>

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

	<style src="./settings_modal_admin_content.scss" lang="scss"></style>
	diff --git a/src/components/settings_modal/settings_modal_user_content.js b/src/components/settings_modal/settings_modal_user_content.js
	index c46b477d83..ed39b30b26 100644
	--- a/src/components/settings_modal/settings_modal_user_content.js
	+++ b/src/components/settings_modal/settings_modal_user_content.js
	@@ -1,103 +1,103 @@
	-import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	+import VerticalTabSwitcher from 'src/components/tab_switcher/vertical_tab_switcher.jsx'

	import DataImportExportTab from './tabs/data_import_export_tab.vue'
	import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
	import NotificationsTab from './tabs/notifications_tab.vue'
	import FilteringTab from './tabs/filtering_tab.vue'
	import SecurityTab from './tabs/security_tab/security_tab.vue'
	import ProfileTab from './tabs/profile_tab.vue'
	import GeneralTab from './tabs/general_tab.vue'
	import AppearanceTab from './tabs/appearance_tab.vue'
	import VersionTab from './tabs/version_tab.vue'
	import ThemeTab from './tabs/theme_tab/theme_tab.vue'
	import StyleTab from './tabs/style_tab/style_tab.vue'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faWrench,
	faUser,
	faFilter,
	faPaintBrush,
	faPalette,
	faBell,
	faDownload,
	faEyeSlash,
	faInfo,
	faWindowRestore
	} from '@fortawesome/free-solid-svg-icons'
	import { useInterfaceStore } from 'src/stores/interface'

	library.add(
	faWrench,
	faUser,
	faFilter,
	faPaintBrush,
	faPalette,
	faBell,
	faDownload,
	faEyeSlash,
	faInfo,
	faWindowRestore
	)

	const SettingsModalContent = {
	components: {
	- TabSwitcher,
	+ VerticalTabSwitcher,

	DataImportExportTab,
	MutesAndBlocksTab,
	NotificationsTab,
	FilteringTab,
	SecurityTab,
	ProfileTab,
	GeneralTab,
	AppearanceTab,
	StyleTab,
	VersionTab,
	ThemeTab
	},
	computed: {
	isLoggedIn () {
	return !!this.$store.state.users.currentUser
	},
	open () {
	return useInterfaceStore().settingsModalState !== 'hidden'
	},
	bodyLock () {
	return useInterfaceStore().settingsModalState === 'visible'
	},
	expertLevel () {
	return this.$store.state.config.expertLevel
	},
	isMobileLayout () {
	return useInterfaceStore().layoutType === 'mobile'
	}
	},
	methods: {
	onOpen () {
	const targetTab = useInterfaceStore().settingsModalTargetTab
	// We're being told to open in specific tab
	if (targetTab) {
	const tabIndex = this.$refs.tabSwitcher.$slots.default().findIndex(elm => {
	return elm.props && elm.props['data-tab-name'] === targetTab
	})
	if (tabIndex >= 0) {
	this.$refs.tabSwitcher.setTab(tabIndex)
	}
	}
	// Clear the state of target tab, so that next time settings is opened
	// it doesn't force it.
	useInterfaceStore().clearSettingsModalTargetTab()
	}
	},
	mounted () {
	this.onOpen()
	},
	watch: {
	open: function (value) {
	if (value) this.onOpen()
	}
	}
	}

	export default SettingsModalContent
	diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
	index f9a1e99bc5..6bf8dc5eee 100644
	--- a/src/components/settings_modal/settings_modal_user_content.vue
	+++ b/src/components/settings_modal/settings_modal_user_content.vue
	@@ -1,102 +1,102 @@
	<template>
	- <tab-switcher
	+ <vertical-tab-switcher
	ref="tabSwitcher"
	class="settings_tab-switcher"
	:side-tab-bar="true"
	:scrollable-tabs="true"
	:body-scroll-lock="bodyLock"
	>
	<div
	:label="$t('settings.general')"
	icon="wrench"
	data-tab-name="general"
	>
	<GeneralTab />
	</div>
	<div
	:label="$t('settings.appearance')"
	icon="window-restore"
	data-tab-name="appearance"
	:delay-render="true"
	>
	<AppearanceTab />
	</div>
	<div
	v-if="expertLevel > 0"
	:label="$t('settings.style.themes3.editor.title')"
	icon="palette"
	data-tab-name="style"
	:delay-render="true"
	>
	<StyleTab />
	</div>
	<div
	v-if="expertLevel > 0"
	:label="$t('settings.theme_old')"
	icon="paint-brush"
	data-tab-name="theme"
	:delay-render="true"
	>
	<ThemeTab />
	</div>
	<div
	v-if="isLoggedIn"
	:label="$t('settings.profile_tab')"
	icon="user"
	data-tab-name="profile"
	>
	<ProfileTab />
	</div>
	<div
	v-if="isLoggedIn"
	:label="$t('settings.notifications')"
	icon="bell"
	data-tab-name="notifications"
	>
	<NotificationsTab />
	</div>
	<div
	v-if="isLoggedIn"
	:label="$t('settings.security_tab')"
	icon="lock"
	data-tab-name="security"
	>
	<SecurityTab />
	</div>
	<div
	:label="$t('settings.filtering')"
	icon="filter"
	data-tab-name="filtering"
	>
	<FilteringTab />
	</div>
	<div
	v-if="isLoggedIn"
	:label="$t('settings.mutes_and_blocks')"
	:fullHeight="true"
	icon="eye-slash"
	data-tab-name="mutesAndBlocks"
	>
	<MutesAndBlocksTab />
	</div>
	<div
	v-if="isLoggedIn"
	:label="$t('settings.data_import_export_tab')"
	icon="download"
	data-tab-name="dataImportExport"
	>
	<DataImportExportTab />
	</div>
	<div
	:label="$t('settings.version.title')"
	icon="info"
	data-tab-name="version"
	>
	<VersionTab />
	</div>
	- </tab-switcher>
	+ </vertical-tab-switcher>
	</template>

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

	<style src="./settings_modal_user_content.scss" lang="scss"></style>
	diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
	index 56e3ea10cf..2978142efa 100644
	--- a/src/components/settings_modal/tabs/appearance_tab.js
	+++ b/src/components/settings_modal/tabs/appearance_tab.js
	@@ -1,493 +1,493 @@
	-import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	+import VerticalTabSwitcher from 'src/components/tab_switcher/vertical_tab_switcher.jsx'

	import BooleanSetting from '../helpers/boolean_setting.vue'
	import ChoiceSetting from '../helpers/choice_setting.vue'
	import IntegerSetting from '../helpers/integer_setting.vue'
	import FloatSetting from '../helpers/float_setting.vue'
	import UnitSetting from '../helpers/unit_setting.vue'
	import { defaultHorizontalUnits } from '../helpers/unit_setting.js'
	import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
	import Preview from './theme_tab/theme_preview.vue'
	import FontControl from 'src/components/font_control/font_control.vue'

	import { newImporter } from 'src/services/export_import/export_import.js'
	import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
	import { init } from 'src/services/theme_data/theme_data_3.service.js'
	import {
	getCssRules
	} from 'src/services/theme_data/css_utils.js'
	import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
	import { createStyleSheet, adoptStyleSheets } from 'src/services/style_setter/style_setter.js'
	import fileSizeFormatService from 'src/components/../services/file_size_format/file_size_format.js'

	import SharedComputedObject from '../helpers/shared_computed_object.js'
	import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'

	import { mapActions } from 'pinia'
	import { useInterfaceStore, normalizeThemeData } from 'src/stores/interface'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faGlobe,
	faDashboard,
	faPaintRoller,
	faTableColumns
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faGlobe,
	faPaintRoller,
	faDashboard,
	faTableColumns
	)

	const AppearanceTab = {
	data () {
	return {
	availableThemesV3: [],
	availableThemesV2: [],
	bundledPalettes: [],
	compilationCache: {},
	fileImporter: newImporter({
	accept: '.json, .iss',
	validator: this.importValidator,
	onImport: this.onImport,
	parser: this.importParser,
	onImportFailure: this.onImportFailure
	}),
	palettesKeys: [
	'bg',
	'fg',
	'link',
	'text',
	'cRed',
	'cGreen',
	'cBlue',
	'cOrange'
	],
	userPalette: {},
	intersectionObserver: null,
	thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.third_column_mode_${mode}`)
	})),
	forcedRoundnessOptions: ['disabled', 'sharp', 'nonsharp', 'round'].map((mode, i) => ({
	key: mode,
	value: i - 1,
	label: this.$t(`settings.style.themes3.hacks.forced_roundness_mode_${mode}`)
	})),
	underlayOverrideModes: ['none', 'opaque', 'transparent'].map((mode) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.style.themes3.hacks.underlay_override_mode_${mode}`)
	})),
	backgroundUploading: false,
	background: null,
	backgroundPreview: null,
	}
	},
	components: {
	BooleanSetting,
	ChoiceSetting,
	IntegerSetting,
	FloatSetting,
	UnitSetting,
	ProfileSettingIndicator,
	FontControl,
	Preview,
	PaletteEditor,
	- TabSwitcher
	+ VerticalTabSwitcher
	},
	mounted () {
	useInterfaceStore().getThemeData()

	const updateIndex = (resource) => {
	const capitalizedResource = resource[0].toUpperCase() + resource.slice(1)
	const currentIndex = this.$store.state.instance[`${resource}sIndex`]

	let promise
	if (currentIndex) {
	promise = Promise.resolve(currentIndex)
	} else {
	promise = useInterfaceStore()[`fetch${capitalizedResource}sIndex`]()
	}

	return promise.then(index => {
	return Object
	.entries(index)
	.map(([k, func]) => [k, func()])
	})
	}

	updateIndex('style').then(styles => {
	styles.forEach(([key, stylePromise]) => stylePromise.then(data => {
	const meta = data.find(x => x.component === '@meta')
	this.availableThemesV3.push({ key, data, name: meta.directives.name, version: 'v3' })
	}))
	})

	updateIndex('theme').then(themes => {
	themes.forEach(([key, themePromise]) => themePromise.then(data => {
	if (!data) {
	console.warn(`Theme with key ${key} is empty or malformed`)
	} else if (Array.isArray(data)) {
	console.warn(`Theme with key ${key} is a v1 theme and should be moved to static/palettes/index.json`)
	} else if (!data.source && !data.theme) {
	console.warn(`Theme with key ${key} is malformed`)
	} else {
	this.availableThemesV2.push({ key, data, name: data.name, version: 'v2' })
	}
	}))
	})

	this.userPalette = useInterfaceStore().paletteDataUsed \|\| {}

	updateIndex('palette').then(bundledPalettes => {
	bundledPalettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
	let palette
	if (Array.isArray(v)) {
	const [
	name,
	bg,
	fg,
	text,
	link,
	cRed = '#FF0000',
	cGreen = '#00FF00',
	cBlue = '#0000FF',
	cOrange = '#E3FF00'
	] = v
	palette = { key, name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
	} else {
	palette = { key, ...v }
	}
	if (!palette.key.startsWith('style.')) {
	this.bundledPalettes.push(palette)
	}
	}))
	})

	this.previewTheme('stock', 'v3')

	if (window.IntersectionObserver) {
	this.intersectionObserver = new IntersectionObserver((entries, observer) => {
	entries.forEach(({ target, isIntersecting }) => {
	if (!isIntersecting) return
	const theme = this.availableStyles.find(x => x.key === target.dataset.themeKey)
	this.$nextTick(() => {
	if (theme) this.previewTheme(theme.key, theme.version, theme.data)
	})
	observer.unobserve(target)
	})
	}, {
	root: this.$refs.themeList
	})
	} else {
	this.availableStyles.forEach(theme => this.previewTheme(theme.key, theme.version, theme.data))
	}
	},
	updated () {
	this.$nextTick(() => {
	this.$refs.themeList.querySelectorAll('.theme-preview').forEach(node => {
	this.intersectionObserver.observe(node)
	})
	})
	},
	watch: {
	paletteDataUsed () {
	this.userPalette = this.paletteDataUsed \|\| {}
	}
	},
	computed: {
	isDefaultBackground () {
	return !(this.$store.state.users.currentUser.background_image)
	},
	switchInProgress () {
	return useInterfaceStore().themeChangeInProgress
	},
	paletteDataUsed () {
	return useInterfaceStore().paletteDataUsed
	},
	instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
	instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
	availableStyles () {
	return [
	...this.availableThemesV3,
	...this.availableThemesV2
	]
	},
	availablePalettes () {
	return [
	...this.bundledPalettes,
	...this.stylePalettes
	]
	},
	stylePalettes () {
	const ruleset = useInterfaceStore().styleDataUsed \|\| []
	if (!ruleset && ruleset.length === 0) return
	const meta = ruleset.find(x => x.component === '@meta')
	const result = ruleset.filter(x => x.component.startsWith('@palette'))
	.map(x => {
	const { variant, directives } = x
	const {
	bg,
	fg,
	text,
	link,
	accent,
	cRed,
	cBlue,
	cGreen,
	cOrange,
	wallpaper
	} = directives

	const result = {
	name: `${meta.directives.name \|\| this.$t('settings.style.themes3.palette.imported')}: ${variant}`,
	key: `style.${variant.toLowerCase().replace(/ /g, '_')}`,
	bg,
	fg,
	text,
	link,
	accent,
	cRed,
	cBlue,
	cGreen,
	cOrange,
	wallpaper
	}
	return Object.fromEntries(Object.entries(result).filter(([, v]) => v))
	})
	return result
	},
	noIntersectionObserver () {
	return !window.IntersectionObserver
	},
	horizontalUnits () {
	return defaultHorizontalUnits
	},
	fontsOverride () {
	return this.$store.getters.mergedConfig.fontsOverride
	},
	columns () {
	const mode = this.$store.getters.mergedConfig.thirdColumnMode

	const notif = mode === 'none' ? [] : ['notifs']

	if (this.$store.getters.mergedConfig.sidebarRight \|\| mode === 'postform') {
	return [...notif, 'content', 'sidebar']
	} else {
	return ['sidebar', 'content', ...notif]
	}
	},
	instanceWallpaperUsed () {
	return this.$store.state.instance.background &&
	!this.$store.state.users.currentUser.background_image
	},
	language: {
	get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
	set: function (val) {
	this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
	}
	},
	customThemeVersion () {
	const { themeVersion } = useInterfaceStore()
	return themeVersion
	},
	isCustomThemeUsed () {
	const { customTheme, customThemeSource } = this.mergedConfig
	return customTheme != null \|\| customThemeSource != null
	},
	isCustomStyleUsed () {
	const { styleCustomData } = this.mergedConfig
	return styleCustomData != null
	},
	...SharedComputedObject()
	},
	methods: {
	updateFont (key, value) {
	this.$store.dispatch('setOption', {
	name: 'theme3hacks',
	value: {
	...this.mergedConfig.theme3hacks,
	fonts: {
	...this.mergedConfig.theme3hacks.fonts,
	[key]: value
	}
	}
	})
	},
	importFile () {
	this.fileImporter.importData()
	},
	importParser (file, filename) {
	if (filename.endsWith('.json')) {
	return JSON.parse(file)
	} else if (filename.endsWith('.iss')) {
	return deserialize(file)
	}
	},
	onImport (parsed, filename) {
	if (filename.endsWith('.json')) {
	useInterfaceStore().setThemeCustom(parsed.source \|\| parsed.theme)
	} else if (filename.endsWith('.iss')) {
	useInterfaceStore().setStyleCustom(parsed)
	}
	},
	onImportFailure (result) {
	console.error('Failure importing theme:', result)
	useInterfaceStore().pushGlobalNotice({ messageKey: 'settings.invalid_theme_imported', level: 'error' })
	},
	importValidator (parsed, filename) {
	if (filename.endsWith('.json')) {
	const version = parsed._pleroma_theme_version
	return version >= 1 \|\| version <= 2
	} else if (filename.endsWith('.iss')) {
	if (!Array.isArray(parsed)) return false
	if (parsed.length < 1) return false
	if (parsed.find(x => x.component === '@meta') == null) return false
	return true
	}
	},
	isThemeActive (key) {
	return key === (this.mergedConfig.theme \|\| this.$store.state.instance.theme)
	},
	isStyleActive (key) {
	return key === (this.mergedConfig.style \|\| this.$store.state.instance.style)
	},
	isPaletteActive (key) {
	return key === (this.mergedConfig.palette \|\| this.$store.state.instance.palette)
	},
	...mapActions(useInterfaceStore, [
	'setStyle',
	'setTheme'
	]),
	setPalette (name, data) {
	useInterfaceStore().setPalette(name)
	this.userPalette = data
	},
	setPaletteCustom (data) {
	useInterfaceStore().setPaletteCustom(data)
	this.userPalette = data
	},
	resetTheming () {
	useInterfaceStore().setStyle('stock')
	},
	previewTheme (key, version, input) {
	let theme3
	if (this.compilationCache[key]) {
	theme3 = this.compilationCache[key]
	} else if (input) {
	if (version === 'v2') {
	const style = normalizeThemeData(input)
	const theme2 = convertTheme2To3(style)
	theme3 = init({
	inputRuleset: theme2,
	ultimateBackgroundColor: '#000000',
	liteMode: true,
	debug: true,
	onlyNormalState: true
	})
	} else if (version === 'v3') {
	const palette = input.find(x => x.component === '@palette')
	let paletteRule
	if (palette) {
	const { directives } = palette
	directives.link = directives.link \|\| directives.accent
	directives.accent = directives.accent \|\| directives.link
	paletteRule = {
	component: 'Root',
	directives: Object.fromEntries(
	Object
	.entries(directives)
	.filter(([k]) => k && k !== 'name')
	.map(([k, v]) => ['--' + k, 'color \| ' + v])
	)
	}
	} else {
	paletteRule = null
	}

	theme3 = init({
	inputRuleset: [...input, paletteRule].filter(x => x),
	ultimateBackgroundColor: '#000000',
	liteMode: true,
	onlyNormalState: true
	})
	}
	} else {
	theme3 = init({
	inputRuleset: [],
	ultimateBackgroundColor: '#000000',
	liteMode: true,
	onlyNormalState: true
	})
	}

	if (!this.compilationCache[key]) {
	this.compilationCache[key] = theme3
	}


	const sheet = createStyleSheet('appearance-tab-previews', 90)
	sheet.addRule([
	'#theme-preview-', key, ' {\n',
	getCssRules(theme3.eager).join('\n'),
	'\n}'
	].join(''))
	sheet.ready = true
	adoptStyleSheets()
	},
	uploadFile (slot, e) {
	const file = e.target.files[0]
	if (!file) { return }
	if (file.size > this.$store.state.instance[slot + 'limit']) {
	const filesize = fileSizeFormatService.fileSizeFormat(file.size)
	const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'upload.error.message',
	messageArgs: [
	this.$t('upload.error.file_too_big', {
	filesize: filesize.num,
	filesizeunit: filesize.unit,
	allowedsize: allowedsize.num,
	allowedsizeunit: allowedsize.unit
	})
	],
	level: 'error'
	})
	return
	}

	const reader = new FileReader()
	reader.onload = ({ target }) => {
	const img = target.result
	this[slot + 'Preview'] = img
	this[slot] = file
	}
	reader.readAsDataURL(file)
	},
	resetBackground () {
	const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
	if (confirmed) {
	this.submitBackground('')
	}
	},
	submitBackground (background) {
	if (!this.backgroundPreview && background !== '') { return }

	this.backgroundUploading = true
	this.$store.state.api.backendInteractor.updateProfileImages({ background })
	.then((data) => {
	this.$store.commit('addNewUsers', [data])
	this.$store.commit('setCurrentUser', data)
	this.backgroundPreview = null
	})
	.catch(this.displayUploadError)
	.finally(() => { this.backgroundUploading = false })
	},
	}
	}

	export default AppearanceTab
	diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
	index 05517af0ce..9d45c3c19c 100644
	--- a/src/components/settings_modal/tabs/appearance_tab.vue
	+++ b/src/components/settings_modal/tabs/appearance_tab.vue
	@@ -1,454 +1,454 @@
	<template>
	- <tab-switcher
	+ <vertical-tab-switcher
	class="appearance-tab"
	:label="$t('settings.appearance')"
	ref="tabSwitcher"
	:side-tab-bar="true"
	:scrollable-tabs="true"
	>
	<div
	:label="$t('settings.interface')"
	icon="table-columns"
	>
	<div class="alert neutral theme-notice">
	{{ $t("settings.style.appearance_tab_note") }}
	</div>
	<ul class="setting-list">
	<h3>{{ $t('settings.general') }}</h3>
	<li>
	<UnitSetting
	path="textSize"
	:step="0.1"
	:units="['px', 'rem']"
	:reset-default="{ 'px': 14, 'rem': 1 }"
	timed-apply-mode
	>
	{{ $t('settings.text_size') }}
	</UnitSetting>
	<div>
	<small>
	<i18n-t
	scope="global"
	keypath="settings.text_size_tip"
	tag="span"
	>
	<code>px</code>
	<code>rem</code>
	</i18n-t>
	<br>
	<i18n-t
	scope="global"
	keypath="settings.text_size_tip2"
	tag="span"
	>
	<code>14px</code>
	</i18n-t>
	</small>
	</div>
	</li>
	<li>
	<FontControl
	:model-value="mergedConfig.theme3hacks.fonts.interface"
	name="ui"
	:label="$t('settings.style.fonts.components.interface')"
	:fallback="{ family: 'sans-serif' }"
	no-inherit="1"
	@update:model-value="v => updateFont('interface', v)"
	/>
	</li>
	<li>
	<FontControl
	:model-value="mergedConfig.theme3hacks.fonts.input"
	name="input"
	:fallback="{ family: 'inherit' }"
	:label="$t('settings.style.fonts.components.input')"
	@update:model-value="v => updateFont('input', v)"
	/>
	</li>
	<li>
	<UnitSetting
	path="emojiSize"
	:step="0.1"
	:units="['px', 'rem']"
	:reset-default="{ 'px': 32, 'rem': 2.2 }"
	>
	{{ $t('settings.emoji_size') }}
	</UnitSetting>
	<ul
	class="setting-list suboptions"
	>
	<li>
	<FloatSetting
	v-if="user"
	path="emojiReactionsScale"
	expert="1"
	>
	{{ $t('settings.emoji_reactions_scale') }}
	</FloatSetting>
	</li>
	</ul>
	</li>
	<li>
	<BooleanSetting
	path="userPopoverOverlay"
	expert="1"
	>
	{{ $t('settings.user_popover_avatar_overlay') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="userCardLeftJustify"
	expert="1"
	>
	{{ $t('settings.user_card_left_justify') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="userCardHidePersonalMarks"
	expert="1"
	>
	{{ $t('settings.user_card_hide_personal_marks') }}
	</BooleanSetting>
	</li>
	<li v-if="instanceShoutboxPresent">
	<BooleanSetting
	path="hideShoutbox"
	expert="1"
	>
	{{ $t('settings.hide_shoutbox') }}
	</BooleanSetting>
	</li>
	<h3>{{ $t('settings.columns') }}</h3>
	<li>
	<UnitSetting
	path="navbarSize"
	:step="0.1"
	:units="['px', 'rem']"
	:reset-default="{ 'px': 55, 'rem': 3.5 }"
	>
	{{ $t('settings.navbar_size') }}
	</UnitSetting>
	</li>
	<li v-if="instanceSpecificPanelPresent">
	<BooleanSetting path="hideISP">
	{{ $t('settings.hide_isp') }}
	</BooleanSetting>
	</li>
	<li>
	<UnitSetting
	path="panelHeaderSize"
	:step="0.1"
	:units="['px', 'rem']"
	:reset-default="{ 'px': 52, 'rem': 3.2 }"
	timed-apply-mode
	>
	{{ $t('settings.panel_header_size') }}
	</UnitSetting>
	</li>
	<li>
	<BooleanSetting path="sidebarRight">
	{{ $t('settings.right_sidebar') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="navbarColumnStretch">
	{{ $t('settings.navbar_column_stretch') }}
	</BooleanSetting>
	</li>
	<li>
	<ChoiceSetting
	v-if="user"
	id="thirdColumnMode"
	path="thirdColumnMode"
	:options="thirdColumnModeOptions"
	>
	{{ $t('settings.third_column_mode') }}
	</ChoiceSetting>
	</li>
	<li v-if="expertLevel > 0">
	{{ $t('settings.column_sizes') }}
	<div class="column-settings">
	<UnitSetting
	v-for="column in columns"
	:key="column"
	:path="column + 'ColumnWidth'"
	:units="horizontalUnits"
	expert="1"
	>
	{{ $t('settings.column_sizes_' + column) }}
	</UnitSetting>
	</div>
	</li>
	<li>
	<BooleanSetting path="disableStickyHeaders">
	{{ $t('settings.disable_sticky_headers') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="showScrollbars">
	{{ $t('settings.show_scrollbars') }}
	</BooleanSetting>
	</li>
	<li>
	<UnitSetting
	path="themeEditorMinWidth"
	:units="['px', 'rem']"
	expert="1"
	>
	{{ $t('settings.theme_editor_min_width') }}
	</UnitSetting>
	</li>
	</ul>
	<ul class="setting-list">
	<h3>{{ $t('settings.visual_tweaks') }}</h3>
	<li>
	<BooleanSetting path="modalMobileCenter">
	{{ $t('settings.mobile_center_dialog') }}
	</BooleanSetting>
	</li>
	<li>
	<ChoiceSetting
	id="forcedRoundness"
	path="forcedRoundness"
	:options="forcedRoundnessOptions"
	>
	{{ $t('settings.style.themes3.hacks.force_interface_roundness') }}
	</ChoiceSetting>
	</li>
	<li>
	<ChoiceSetting
	id="underlayOverride"
	path="theme3hacks.underlay"
	:options="underlayOverrideModes"
	>
	{{ $t('settings.style.themes3.hacks.underlay_overrides') }}
	</ChoiceSetting>
	</li>
	<li v-if="instanceWallpaperUsed">
	<BooleanSetting path="hideInstanceWallpaper">
	{{ $t('settings.hide_wallpaper') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>
	<div
	class="setting-item"
	:label="$t('settings.theme')"
	icon="paintbrush"
	>
	<div>
	<h3>{{ $t('settings.background') }}</h3>
	<div class="banner-background-preview">
	<img :src="user.background_image">
	<button
	v-if="!isDefaultBackground"
	class="button-unstyled reset-button"
	:title="$t('settings.reset_profile_background')"
	@click="resetBackground"
	>
	<FAIcon
	icon="times"
	type="button"
	/>
	</button>
	</div>
	<p>{{ $t('settings.set_new_background') }}</p>
	<img
	v-if="backgroundPreview"
	class="banner-background-preview"
	:src="backgroundPreview"
	>
	<div>
	<input
	type="file"
	class="input"
	@change="uploadFile('background', $event)"
	>
	</div>
	<FAIcon
	v-if="backgroundUploading"
	class="uploading"
	spin
	icon="circle-notch"
	/>
	<button
	v-else-if="backgroundPreview"
	class="btn button-default"
	@click="submitBackground(background)"
	>
	{{ $t('settings.save') }}
	</button>
	</div>
	<h3>{{ $t('settings.style.style_section') }}</h3>
	<ul
	ref="themeList"
	class="theme-list"
	>
	<button
	class="button-default theme-preview"
	data-theme-key="stock"
	:class="{ toggled: isStyleActive('stock'), disabled: switchInProgress }"
	:disabled="switchInProgress"
	@click="resetTheming"
	>
	<preview id="theme-preview-stock" />
	<h4 class="theme-name">
	{{ $t('settings.style.stock_theme_used') }}
	<span class="alert neutral version">v3</span>
	</h4>
	</button>
	<button
	v-if="isCustomThemeUsed"
	disabled
	class="button-default theme-preview toggled"
	>
	<preview />
	<h4 class="theme-name">
	{{ $t('settings.style.custom_theme_used') }}
	<span class="alert neutral version">v2</span>
	</h4>
	</button>
	<button
	v-if="isCustomStyleUsed"
	disabled
	class="button-default theme-preview toggled"
	>
	<preview />
	<h4 class="theme-name">
	{{ $t('settings.style.custom_style_used') }}
	<span class="alert neutral version">v3</span>
	</h4>
	</button>
	<button
	v-for="style in availableStyles"
	:key="style.key"
	:data-theme-key="style.key"
	class="button-default theme-preview"
	:class="{ toggled: isThemeActive(style.key), disabled: switchInProgress }"
	:disabled="switchInProgress"
	@click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
	>
	<preview :id="'theme-preview-' + style.key" />
	<h4 class="theme-name">
	{{ style.name }}
	<span class="alert neutral version">{{ style.version }}</span>
	</h4>
	</button>
	</ul>
	<div class="import-file-container">
	<button
	class="btn button-default"
	:class="{ disabled: switchInProgress }"
	:disabled="switchInProgress"
	@click="importFile"
	>
	<FAIcon icon="folder-open" />
	{{ $t('settings.style.themes3.editor.load_style') }}
	</button>
	</div>
	<div class="setting-item">
	<h2>{{ $t('settings.style.themes3.palette.label') }}</h2>
	<div
	v-if="customThemeVersion === 'v3'"
	class="palettes-container"
	>
	<h4 v-if="stylePalettes?.length > 0">
	{{ $t('settings.style.themes3.palette.style') }}
	</h4>
	<div class="palettes">
	<button
	v-for="p in stylePalettes \|\| []"
	:key="p.name"
	class="btn button-default palette-entry"
	:class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
	:disabled="switchInProgress"
	@click="() => setPalette(p.key, p)"
	>
	<div class="palette-label">
	<label>
	{{ p.name ?? $t('settings.style.themes3.palette.user') }}
	</label>
	</div>
	<div class="palette-preview">
	<span
	v-for="c in palettesKeys"
	:key="c"
	class="palette-square"
	:style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
	/>
	</div>
	</button>
	<h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
	<button
	v-for="p in bundledPalettes"
	:key="p.name"
	class="btn button-default palette-entry"
	:class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
	:disabled="switchInProgress"
	@click="() => setPalette(p.key, p)"
	>
	<div class="palette-label">
	<label>
	{{ p.name }}
	</label>
	</div>
	<div class="palette-preview">
	<span
	v-for="c in palettesKeys"
	:key="c"
	class="palette-square"
	:style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
	/>
	</div>
	</button>
	</div>
	</div>
	<div>
	<template v-if="customThemeVersion === 'v3'">
	<h4 v-if="expertLevel > 0">
	{{ $t('settings.style.themes3.palette.user') }}
	</h4>
	<PaletteEditor
	v-if="expertLevel > 0"
	v-model="userPalette"
	class="userPalette"
	:compact="true"
	:apply="true"
	:disabled="switchInProgress"
	@apply-palette="data => setPaletteCustom(data)"
	/>
	</template>
	<template v-else-if="customThemeVersion === 'v2'">
	<div class="alert neutral theme-notice unsupported-theme-v2">
	{{ $t('settings.style.themes3.palette.v2_unsupported') }}
	</div>
	</template>
	</div>
	<ul class="setting-list">
	<li>
	<BooleanSetting
	path="themeDebug"
	:expert="1"
	>
	{{ $t('settings.theme_debug') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="forceThemeRecompilation"
	:expert="1"
	>
	{{ $t('settings.force_theme_recompilation_debug') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>
	</div>
	- </tab-switcher>
	+ </vertical-tab-switcher>
	</template>

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

	<style lang="scss" src="./appearance_tab.scss"></style>
	diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
	index b98b7195e2..68dd31941d 100644
	--- a/src/components/settings_modal/tabs/general_tab.js
	+++ b/src/components/settings_modal/tabs/general_tab.js
	@@ -1,166 +1,166 @@
	import { mapState } from 'vuex'

	-import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	+import VerticalTabSwitcher from 'src/components/tab_switcher/vertical_tab_switcher.jsx'

	import BooleanSetting from '../helpers/boolean_setting.vue'
	import ChoiceSetting from '../helpers/choice_setting.vue'
	import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
	import IntegerSetting from '../helpers/integer_setting.vue'
	import FloatSetting from '../helpers/float_setting.vue'
	import UnitSetting from '../helpers/unit_setting.vue'
	import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
	import Select from 'src/components/select/select.vue'
	import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
	import FontControl from 'src/components/font_control/font_control.vue'

	import SharedComputedObject from '../helpers/shared_computed_object.js'

	import localeService from 'src/services/locale/locale.service.js'
	import { clearCache, cacheKey, emojiCacheKey } from 'src/services/sw/sw.js'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faGlobe,
	faMessage,
	faPenAlt,
	faDatabase,
	faSliders
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faGlobe,
	faMessage,
	faPenAlt,
	faDatabase,
	faSliders
	)

	const GeneralTab = {
	data () {
	return {
	subjectLineOptions: ['email', 'noop', 'masto'].map(mode => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`)
	})),
	conversationDisplayOptions: ['tree', 'linear'].map(mode => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.conversation_display_${mode}`)
	})),
	absoluteTime12hOptions: ['24h', '12h'].map(mode => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.absolute_time_format_12h_${mode}`)
	})),
	conversationOtherRepliesButtonOptions: ['below', 'inside'].map(mode => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.conversation_other_replies_button_${mode}`)
	})),
	mentionLinkDisplayOptions: ['short', 'full_for_remote', 'full'].map(mode => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.mention_link_display_${mode}`)
	})),
	userPopoverAvatarActionOptions: ['close', 'zoom', 'open'].map(mode => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.user_popover_avatar_action_${mode}`)
	})),
	unsavedPostActionOptions: ['save', 'discard', 'confirm'].map(mode => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.unsaved_post_action_${mode}`)
	})),
	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'),
	emailLanguage: this.$store.state.users.currentUser.language \|\| ['']
	}
	},
	components: {
	BooleanSetting,
	ChoiceSetting,
	IntegerSetting,
	FloatSetting,
	UnitSetting,
	InterfaceLanguageSwitcher,
	ProfileSettingIndicator,
	ScopeSelector,
	Select,
	- TabSwitcher,
	+ VerticalTabSwitcher,
	FontControl
	},
	computed: {
	postFormats () {
	return this.$store.state.instance.postFormats \|\| []
	},
	postContentOptions () {
	return this.postFormats.map(format => ({
	key: format,
	value: format,
	label: this.$t(`post_status.content_type["${format}"]`)
	}))
	},
	language: {
	get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
	set: function (val) {
	this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
	}
	},
	...SharedComputedObject(),
	...mapState({
	blockExpirationSupported: state => state.instance.blockExpiration,
	})
	},
	methods: {
	changeDefaultScope (value) {
	this.$store.dispatch('setProfileOption', { name: 'defaultScope', value })
	},
	clearCache (key) {
	clearCache(key)
	.then(() => {
	this.$store.dispatch('settingsSaved', { success: true })
	})
	.catch(error => {
	this.$store.dispatch('settingsSaved', { error })
	})
	},
	clearAssetCache () {
	this.clearCache(cacheKey)
	},
	clearEmojiCache () {
	this.clearCache(emojiCacheKey)
	},
	updateProfile () {
	const params = {
	language: localeService.internalToBackendLocaleMulti(this.emailLanguage)
	}

	this.$store.state.api.backendInteractor
	.updateProfile({ params })
	.then((user) => {
	this.$store.commit('addNewUsers', [user])
	this.$store.commit('setCurrentUser', user)
	})
	},
	updateFont (key, value) {
	this.$store.dispatch('setOption', {
	name: 'theme3hacks',
	value: {
	...this.mergedConfig.theme3hacks,
	fonts: {
	...this.mergedConfig.theme3hacks.fonts,
	[key]: value
	}
	}
	})
	},
	}
	}

	export default GeneralTab
	diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
	index ce48d923d2..3c16c5cdfb 100644
	--- a/src/components/settings_modal/tabs/general_tab.vue
	+++ b/src/components/settings_modal/tabs/general_tab.vue
	@@ -1,557 +1,555 @@
	<template>
	- <tab-switcher
	+ <vertical-tab-switcher
	:label="$t('settings.general')"
	ref="tabSwitcher"
	class="settings_tab-switcher"
	- :side-tab-bar="true"
	- :scrollable-tabs="true"
	>
	<div
	:label="$t('settings.behavior')"
	icon="sliders"
	>
	<ul class="setting-list">
	<h3>{{ $t('settings.general') }}</h3>
	<li>
	<interface-language-switcher
	v-model="language"
	@update="val => language = val"
	>
	{{ $t('settings.interfaceLanguage') }}
	</interface-language-switcher>
	</li>
	<li>
	<interface-language-switcher
	v-model="emailLanguage"
	:profile="true"
	@update:model-value="updateProfile()"
	>
	{{ $t('settings.email_language') }}
	</interface-language-switcher>
	</li>
	<li>
	<BooleanSetting
	path="useAbsoluteTimeFormat"
	expert="1"
	>
	{{ $t('settings.absolute_time_format') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="streaming">
	{{ $t('settings.streaming') }}
	</BooleanSetting>
	<ul class="setting-list suboptions">
	<li>
	<BooleanSetting
	path="pauseOnUnfocused"
	parent-path="streaming"
	>
	{{ $t('settings.pause_on_unfocused') }}
	</BooleanSetting>
	</li>
	</ul>
	</li>
	<li>
	<BooleanSetting
	path="useStreamingApi"
	expert="1"
	>
	{{ $t('settings.useStreamingApi') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="virtualScrolling"
	expert="1"
	>
	{{ $t('settings.virtual_scrolling') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="alwaysShowNewPostButton"
	expert="1"
	>
	{{ $t('settings.always_show_post_button') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="autohideFloatingPostButton"
	expert="1"
	>
	{{ $t('settings.autohide_floating_post_button') }}
	</BooleanSetting>
	</li>
	<li>
	<ChoiceSetting
	id="userPopoverAvatarAction"
	path="userPopoverAvatarAction"
	:options="userPopoverAvatarActionOptions"
	expert="1"
	>
	{{ $t('settings.user_popover_avatar_action') }}
	</ChoiceSetting>
	</li>
	<li class="select-multiple">
	<span class="label">{{ $t('settings.confirm_dialogs') }}</span>
	<ul class="option-list">
	<li>
	<BooleanSetting path="modalOnRepeat">
	{{ $t('settings.confirm_dialogs_repeat') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnUnfollow">
	{{ $t('settings.confirm_dialogs_unfollow') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	v-if="!blockExpirationSupported"
	path="modalOnBlock"
	>
	{{ $t('settings.confirm_dialogs_block') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnMuteConversation">
	{{ $t('settings.confirm_dialogs_mute_conversation') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnMuteDomain">
	{{ $t('settings.confirm_dialogs_mute_domain') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnDelete">
	{{ $t('settings.confirm_dialogs_delete') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnLogout">
	{{ $t('settings.confirm_dialogs_logout') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnApproveFollow">
	{{ $t('settings.confirm_dialogs_approve_follow') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnDenyFollow">
	{{ $t('settings.confirm_dialogs_deny_follow') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="modalOnRemoveUserFromFollowers">
	{{ $t('settings.confirm_dialogs_remove_follower') }}
	</BooleanSetting>
	</li>
	</ul>
	</li>
	</ul>
	</div>
	<div
	:label="$t('settings.posts')"
	icon="message"
	>
	<ul class="setting-list">
	<h3>{{ $t('settings.general') }}</h3>
	<li>
	<ChoiceSetting
	id="conversationDisplay"
	path="conversationDisplay"
	:options="conversationDisplayOptions"
	>
	{{ $t('settings.conversation_display') }}
	</ChoiceSetting>
	</li>
	<li>
	<FontControl
	:model-value="mergedConfig.theme3hacks.fonts.post"
	name="post"
	:fallback="{ family: 'inherit' }"
	:label="$t('settings.style.fonts.components.post')"
	@update:model-value="v => updateFont('post', v)"
	/>
	</li>
	<li>
	<FontControl
	:model-value="mergedConfig.theme3hacks.fonts.monospace"
	name="postCode"
	:fallback="{ family: 'monospace' }"
	:label="$t('settings.style.fonts.components.monospace')"
	@update:model-value="v => updateFont('monospace', v)"
	/>
	</li>
	<ul
	v-if="mergedConfig.conversationDisplay !== 'linear'"
	class="setting-list suboptions"
	>
	<li>
	<BooleanSetting path="conversationTreeAdvanced">
	{{ $t('settings.tree_advanced') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="conversationTreeFadeAncestors"
	:expert="1"
	>
	{{ $t('settings.tree_fade_ancestors') }}
	</BooleanSetting>
	</li>
	<li>
	<IntegerSetting
	path="maxDepthInThread"
	:min="3"
	:expert="1"
	>
	{{ $t('settings.max_depth_in_thread') }}
	</IntegerSetting>
	</li>
	<li>
	<ChoiceSetting
	id="conversationOtherRepliesButton"
	path="conversationOtherRepliesButton"
	:options="conversationOtherRepliesButtonOptions"
	:expert="1"
	>
	{{ $t('settings.conversation_other_replies_button') }}
	</ChoiceSetting>
	</li>
	</ul>
	<li>
	<BooleanSetting path="collapseMessageWithSubject">
	{{ $t('settings.collapse_subject') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="emojiReactionsOnTimeline"
	expert="1"
	>
	{{ $t('settings.emoji_reactions_on_timeline') }}
	</BooleanSetting>
	</li>
	<h3>{{ $t('settings.mention_links') }}</h3>
	<li>
	<ChoiceSetting
	id="mentionLinkDisplay"
	path="mentionLinkDisplay"
	:options="mentionLinkDisplayOptions"
	>
	{{ $t('settings.mention_link_display') }}
	</ChoiceSetting>
	</li>
	<li>
	<BooleanSetting
	path="mentionLinkShowTooltip"
	expert="1"
	>
	{{ $t('settings.mention_link_use_tooltip') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="mentionLinkShowAvatar">
	{{ $t('settings.mention_link_show_avatar') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="mentionLinkFadeDomain"
	expert="1"
	>
	{{ $t('settings.mention_link_fade_domain') }}
	</BooleanSetting>
	</li>
	<li v-if="user">
	<BooleanSetting
	path="mentionLinkBoldenYou"
	expert="1"
	>
	{{ $t('settings.mention_link_bolden_you') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	v-if="user"
	source="profile"
	path="stripRichContent"
	expert="1"
	>
	{{ $t('settings.no_rich_text_description') }}
	</BooleanSetting>
	</li>
	<ul
	v-if="mergedConfig.useAbsoluteTimeFormat"
	class="setting-list suboptions"
	>
	<li>
	<UnitSetting
	path="absoluteTimeFormatMinAge"
	unit-set="time"
	:units="['s', 'm', 'h', 'd']"
	:min="0"
	>
	{{ $t('settings.absolute_time_format_min_age') }}
	</UnitSetting>
	</li>
	<li>
	<ChoiceSetting
	id="absoluteTime12h"
	path="absoluteTime12h"
	:options="absoluteTime12hOptions"
	:expert="1"
	>
	{{ $t('settings.absolute_time_format_12h') }}
	</ChoiceSetting>
	</li>
	</ul>
	<h3>{{ $t('settings.attachments') }}</h3>
	<li>
	<BooleanSetting path="stopGifs">
	{{ $t('settings.stop_gifs') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="hideNsfw">
	{{ $t('settings.nsfw_clickthrough') }}
	</BooleanSetting>
	</li>
	<ul class="setting-list suboptions">
	<li>
	<BooleanSetting
	path="preloadImage"
	expert="1"
	parent-path="hideNsfw"
	>
	{{ $t('settings.preload_images') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="useOneClickNsfw"
	expert="1"
	parent-path="hideNsfw"
	>
	{{ $t('settings.use_one_click_nsfw') }}
	</BooleanSetting>
	</li>
	</ul>
	<li>
	<BooleanSetting
	path="loopVideo"
	expert="1"
	>
	{{ $t('settings.loop_video') }}
	</BooleanSetting>
	<ul class="setting-list suboptions">
	<li>
	<BooleanSetting
	path="loopVideoSilentOnly"
	expert="1"
	parent-path="loopVideo"
	:disabled="!loopSilentAvailable"
	>
	{{ $t('settings.loop_video_silent_only') }}
	</BooleanSetting>
	<div
	v-if="!loopSilentAvailable"
	class="unavailable"
	>
	<FAIcon icon="globe" />! {{ $t('settings.limited_availability') }}
	</div>
	</li>
	</ul>
	</li>
	<li>
	<BooleanSetting
	path="playVideosInModal"
	expert="1"
	>
	{{ $t('settings.play_videos_in_modal') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="useContainFit"
	expert="1"
	>
	{{ $t('settings.use_contain_fit') }}
	</BooleanSetting>
	</li>
	<h3 v-if="expertLevel > 0">
	{{ $t('settings.fun') }}
	</h3>
	<li>
	<BooleanSetting
	path="greentext"
	expert="1"
	>
	{{ $t('settings.greentext') }}
	</BooleanSetting>
	</li>
	<li v-if="user">
	<BooleanSetting
	path="mentionLinkShowYous"
	expert="1"
	>
	{{ $t('settings.show_yous') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>
	<div
	v-if="user"
	:label="$t('settings.composing')"
	icon="pen-alt"
	>
	<ul class="setting-list">
	<h3>{{ $t('settings.composing') }}</h3>
	<li>
	<label for="default-vis">
	{{ $t('settings.default_vis') }} <ProfileSettingIndicator :is-profile="true" />
	<ScopeSelector
	class="scope-selector"
	:show-all="true"
	:user-default="$store.state.profileConfig.defaultScope"
	:initial-scope="$store.state.profileConfig.defaultScope"
	:on-scope-change="changeDefaultScope"
	/>
	</label>
	</li>
	<li>
	<!-- <BooleanSetting source="profile" path="defaultNSFW"> -->
	<BooleanSetting path="sensitiveByDefault">
	{{ $t('settings.sensitive_by_default') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="scopeCopy"
	expert="1"
	>
	{{ $t('settings.scope_copy') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="alwaysShowSubjectInput"
	expert="1"
	>
	{{ $t('settings.subject_input_always_show') }}
	</BooleanSetting>
	</li>
	<li>
	<ChoiceSetting
	id="subjectLineBehavior"
	path="subjectLineBehavior"
	:options="subjectLineOptions"
	expert="1"
	>
	{{ $t('settings.subject_line_behavior') }}
	</ChoiceSetting>
	</li>
	<li v-if="postFormats.length > 0">
	<ChoiceSetting
	id="postContentType"
	path="postContentType"
	:options="postContentOptions"
	>
	{{ $t('settings.post_status_content_type') }}
	</ChoiceSetting>
	</li>
	<li>
	<BooleanSetting
	path="minimalScopesMode"
	expert="1"
	>
	{{ $t('settings.minimal_scopes_mode') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="padEmoji"
	expert="1"
	>
	{{ $t('settings.pad_emoji') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="autocompleteSelect"
	expert="1"
	>
	{{ $t('settings.autocomplete_select_first') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="autoSaveDraft"
	>
	{{ $t('settings.auto_save_draft') }}
	</BooleanSetting>
	</li>
	<li v-if="!mergedConfig.autoSaveDraft">
	<ChoiceSetting
	id="unsavedPostAction"
	path="unsavedPostAction"
	:options="unsavedPostActionOptions"
	>
	{{ $t('settings.unsaved_post_action') }}
	</ChoiceSetting>
	</li>
	<h3>{{ $t('settings.attachments') }}</h3>
	<li>
	<BooleanSetting
	path="imageCompression"
	expert="1"
	>
	{{ $t('settings.image_compression') }}
	</BooleanSetting>
	</li>
	<ul class="setting-list suboptions">
	<li>
	<BooleanSetting
	path="alwaysUseJpeg"
	expert="1"
	parent-path="imageCompression"
	>
	{{ $t('settings.always_use_jpeg') }}
	</BooleanSetting>
	</li>
	</ul>
	</ul>
	</div>
	<div
	:label="$t('settings.cache')"
	icon="database"
	v-if="expertLevel > 0"
	>
	<ul class="setting-list">
	<li>
	<button
	class="btn button-default"
	@click="clearAssetCache"
	>
	{{ $t('settings.clear_asset_cache') }}
	</button>
	</li>
	<li>
	<button
	class="btn button-default"
	@click="clearEmojiCache"
	>
	{{ $t('settings.clear_emoji_cache') }}
	</button>
	</li>
	</ul>
	</div>
	- </tab-switcher>
	+ </vertical-tab-switcher>
	</template>

	<script src="./general_tab.js"></script>
	diff --git a/src/components/tab_switcher/vertical_tab_switcher.jsx b/src/components/tab_switcher/vertical_tab_switcher.jsx
	new file mode 100644
	index 0000000000..7182c944df
	--- /dev/null
	+++ b/src/components/tab_switcher/vertical_tab_switcher.jsx
	@@ -0,0 +1,166 @@
	+// eslint-disable-next-line no-unused
	+import { h, Fragment } from 'vue'
	+import { mapState } from 'pinia'
	+import { throttle } from 'lodash'
	+import { mapState as mapPiniaState } from 'pinia'
	+import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
	+
	+import './vertical_tab_switcher.scss'
	+import { useInterfaceStore } from 'src/stores/interface'
	+
	+const findFirstUsable = (slots) => slots.findIndex(_ => _.props)
	+
	+export default {
	+ name: 'VerticalTabSwitcher',
	+ props: {
	+ renderOnlyFocused: {
	+ required: false,
	+ type: Boolean,
	+ default: false
	+ },
	+ onSwitch: {
	+ required: false,
	+ type: Function,
	+ default: undefined
	+ },
	+ activeTab: {
	+ required: false,
	+ type: String,
	+ default: undefined
	+ },
	+ bodyScrollLock: {
	+ required: false,
	+ type: Boolean,
	+ default: false
	+ }
	+ },
	+ data () {
	+ return {
	+ active: findFirstUsable(this.slots()),
	+ resizeHandler: null
	+ }
	+ },
	+ computed: {
	+ activeIndex () {
	+ // In case of controlled component
	+ if (this.activeTab) {
	+ return this.slots().findIndex(slot => slot && slot.props && this.activeTab === slot.props.key)
	+ } else {
	+ return this.active
	+ }
	+ },
	+ isActive () {
	+ return tabName => {
	+ const isWanted = slot => slot.props && slot.props['data-tab-name'] === tabName
	+ return this.$slots.default().findIndex(isWanted) === this.activeIndex
	+ }
	+ },
	+ ...mapPiniaState(useInterfaceStore, {
	+ mobileLayout: store => store.layoutType === 'mobile'
	+ }),
	+ },
	+ beforeUpdate () {
	+ const currentSlot = this.slots()[this.active]
	+ if (!currentSlot.props) {
	+ this.active = findFirstUsable(this.slots())
	+ }
	+ },
	+ methods: {
	+ clickTab (index) {
	+ return (e) => {
	+ e.preventDefault()
	+ this.setTab(index)
	+ console.log(index)
	+ }
	+ },
	+ // DO NOT put it to computed, it doesn't work (caching?)
	+ slots () {
	+ if (this.$slots.default()[0].type === Fragment) {
	+ return this.$slots.default()[0].children
	+ }
	+ return this.$slots.default()
	+ },
	+ setTab (index) {
	+ if (typeof this.onSwitch === 'function') {
	+ this.onSwitch.call(null, this.slots()[index].key)
	+ }
	+ this.active = index
	+ this.$refs.contents.scrollTop = 0
	+ }
	+ },
	+ render () {
	+ const tabs = this.slots()
	+ .map((slot, index) => {
	+ const props = slot.props
	+ if (!props) return
	+ const classesTab = ['vertical-tab menu-item']
	+ if (this.activeIndex === index) {
	+ classesTab.push('-active')
	+ }
	+ return (
	+ <button
	+ disabled={props.disabled}
	+ onClick={this.clickTab(index)}
	+ class={classesTab.join(' ')}
	+ type="button"
	+ role="tab"
	+ >
	+ {!props.icon ? '' : (<FAIcon class="tab-icon" size="1x" fixed-width icon={props.icon}/>)}
	+ <span class="text">
	+ {props.label}
	+ </span>
	+ </button>
	+ )
	+ })
	+
	+ const contents = this.slots().map((slot, index) => {
	+ const props = slot.props
	+ if (!props) return
	+ const active = this.activeIndex === index
	+ const classes = [ active ? 'active' : 'hidden' ]
	+ if (props.fullHeight) {
	+ classes.push('full-height')
	+ }
	+ let delayRender = slot.props['delay-render']
	+ if (delayRender && active) {
	+ slot.props['delay-render'] = false
	+ delayRender = false
	+ }
	+ const renderSlot = (!delayRender && (!this.renderOnlyFocused \|\| active))
	+ ? slot
	+ : ''
	+
	+ const header = (
	+ <h1 class="tab-content-label">
	+ {props.label}
	+ </h1>
	+ )
	+
	+ return (
	+ <div ref="contents" class={classes}>
	+ {header}
	+ {renderSlot}
	+ </div>
	+ )
	+ })
	+
	+ return (
	+ <div ref="root" class="vertical-tab-switcher">
	+ <div
	+ class="tabs -navigation-mode -tabs"
	+ role="tablist"
	+ ref="nav"
	+ >
	+ {tabs}
	+ </div>
	+ <div
	+ role="tabpanel"
	+ class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}
	+ v-body-scroll-lock={this.bodyScrollLock}
	+ >
	+ {contents}
	+ </div>
	+ </div>
	+ )
	+ }
	+}
	diff --git a/src/components/tab_switcher/vertical_tab_switcher.scss b/src/components/tab_switcher/vertical_tab_switcher.scss
	new file mode 100644
	index 0000000000..c5454d52d2
	--- /dev/null
	+++ b/src/components/tab_switcher/vertical_tab_switcher.scss
	@@ -0,0 +1,72 @@
	+.vertical-tab-switcher {
	+ display: flex;
	+ flex-direction: row;
	+
	+ > .tabs {
	+ flex: 0 0 auto;
	+ overflow: hidden auto;
	+ flex-direction: column;
	+ border-right: 1px solid;
	+ border-right-color: var(--border);
	+ min-width: 10em;
	+
	+ > .menu-item {
	+ padding: 0.5em 1em;
	+
	+ .tab-icon {
	+ vertical-align: middle;
	+ margin-right: 0.75em;
	+ }
	+ }
	+ }
	+
	+ > .contents {
	+ flex: 1 0 auto;
	+
	+ .hidden {
	+ display: none;
	+ }
	+
	+ .full-height:not(.hidden) {
	+ height: 100%;
	+ display: flex;
	+ flex-direction: column;
	+
	+ > *:not(.tab-content-label) {
	+ flex: 1;
	+ }
	+ }
	+
	+ .tab-content-label {
	+ font-size: 1.5em;
	+ padding: 0.5em 1em;
	+ margin: 0;
	+ border-bottom: 1px solid var(--border);
	+ }
	+ }
	+
	+ > .tabs,
	+ > .content {
	+ transition: width 2s ease-in;
	+ }
	+
	+ &.-tabs {
	+ > .tabs {
	+ width: 100%;
	+ }
	+
	+ > .content {
	+ width: 0%;
	+ }
	+ }
	+
	+ &.-content {
	+ > .tabs {
	+ width: 0%;
	+ }
	+
	+ > .content {
	+ width: 100%;
	+ }
	+ }
	+}

File Metadata

Mime Type: text/x-diff
Expires: Mon, Nov 2, 8:12 AM (12 h, 47 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1803741
Default Alt Text: (70 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions