No OneTemporary
Actions

Size

46 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/boot/after_store.js b/src/boot/after_store.js
	index 40eda50f5d..b7e97cf458 100644
	--- a/src/boot/after_store.js
	+++ b/src/boot/after_store.js
	@@ -1,606 +1,606 @@
	/* global process */

	import vClickOutside from 'click-outside-vue3'
	import { createApp } from 'vue'
	import { createRouter, createWebHistory } from 'vue-router'
	import VueVirtualScroller from 'vue-virtual-scroller'
	import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

	import { config } from '@fortawesome/fontawesome-svg-core'
	import {
	FontAwesomeIcon,
	FontAwesomeLayers,
	} from '@fortawesome/vue-fontawesome'

	config.autoAddCss = false

	import App from '../App.vue'
	import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
	import FaviconService from '../services/favicon_service/favicon_service.js'
	import { applyConfig } from '../services/style_setter/style_setter.js'
	import { initServiceWorker, updateFocus } from '../services/sw/sw.js'
	import {
	windowHeight,
	windowWidth,
	} from '../services/window_utils/window_utils'
	import routes from './routes'

	import { useAnnouncementsStore } from 'src/stores/announcements'
	import { useAuthFlowStore } from 'src/stores/auth_flow'
	import { useEmojiStore } from 'src/stores/emoji.js'
	import { useI18nStore } from 'src/stores/i18n'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useOAuthStore } from 'src/stores/oauth'

	import VBodyScrollLock from 'src/directives/body_scroll_lock'
	import {
	instanceDefaultConfig,
	staticOrApiConfigDefault,
	} from 'src/modules/default_config_state.js'

	let staticInitialResults = null

	const parsedInitialResults = () => {
	if (!document.getElementById('initial-results')) {
	return null
	}
	if (!staticInitialResults) {
	staticInitialResults = JSON.parse(
	document.getElementById('initial-results').textContent,
	)
	}
	return staticInitialResults
	}

	const decodeUTF8Base64 = (data) => {
	const rawData = atob(data)
	const array = Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)))
	const text = new TextDecoder().decode(array)
	return text
	}

	const preloadFetch = async (request) => {
	const data = parsedInitialResults()
	if (!data \|\| !data[request]) {
	return window.fetch(request)
	}
	const decoded = decodeUTF8Base64(data[request])
	const requestData = JSON.parse(decoded)
	return {
	ok: true,
	json: () => requestData,
	text: () => requestData,
	}
	}

	const getInstanceConfig = async ({ store }) => {
	try {
	const res = await preloadFetch('/api/v1/instance')
	if (res.ok) {
	const data = await res.json()
	const textlimit = data.max_toot_chars
	const vapidPublicKey = data.pleroma.vapid_public_key

	useInstanceCapabilitiesStore().set(
	'pleromaExtensionsAvailable',
	data.pleroma,
	)
	useInstanceStore().set({
	name: 'textlimit',
	value: textlimit,
	})
	useInstanceStore().set({
	name: 'accountApprovalRequired',
	value: data.approval_required,
	})
	useInstanceStore().set({
	name: 'birthdayRequired',
	value: !!data.pleroma?.metadata.birthday_required,
	})
	useInstanceStore().set({
	name: 'birthdayMinAge',
	value: data.pleroma?.metadata.birthday_min_age \|\| 0,
	})

	if (vapidPublicKey) {
	useInstanceStore().set({
	name: 'vapidPublicKey',
	value: vapidPublicKey,
	})
	}
	} else {
	throw res
	}
	} catch (error) {
	console.error('Could not load instance config, potentially fatal')
	console.error(error)
	}
	// We should check for scrobbles support here but it requires userId
	// so instead we check for it where it's fetched (statuses.js)
	}

	const getBackendProvidedConfig = async () => {
	try {
	const res = await window.fetch('/api/pleroma/frontend_configurations')
	if (res.ok) {
	const data = await res.json()
	return data.pleroma_fe
	} else {
	throw res
	}
	} catch (error) {
	console.error(
	'Could not load backend-provided frontend config, potentially fatal',
	)
	console.error(error)
	}
	}

	const getStaticConfig = async () => {
	try {
	const res = await window.fetch('/static/config.json')
	if (res.ok) {
	return res.json()
	} else {
	throw res
	}
	} catch (error) {
	console.warn('Failed to load static/config.json, continuing without it.')
	console.warn(error)
	return {}
	}
	}

	const setSettings = async ({ apiConfig, staticConfig, store }) => {
	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 = ({ source, destination }) => {
	if (typeof config[source] !== 'undefined') {
	useInstanceStore().set({ path: destination, value: config[source] })
	}
	}

	Object.keys(staticOrApiConfigDefault)
	.map((k) => ({ source: k, destination: `instanceIdentity.${k}` }))
	.forEach(copyInstanceOption)
	Object.keys(instanceDefaultConfig)
	.map((k) => ({ source: k, destination: `prefsStorage.${k}` }))
	.forEach(copyInstanceOption)

	useAuthFlowStore().setInitialStrategy(config.loginMethod)
	}

	const getTOS = async ({ store }) => {
	try {
	const res = await window.fetch('/static/terms-of-service.html')
	if (res.ok) {
	const html = await res.text()
	useInstanceStore().set({ name: 'instanceIdentity.tos', value: html })
	} else {
	throw res
	}
	} catch (e) {
	console.warn("Can't load TOS\n", e)
	}
	}

	const getInstancePanel = async ({ store }) => {
	try {
	const res = await preloadFetch('/instance/panel.html')
	if (res.ok) {
	const html = await res.text()
	useInstanceStore().set({
	path: 'instanceIdentity.instanceSpecificPanelContent',
	value: html,
	})
	} else {
	throw res
	}
	} catch (e) {
	console.warn("Can't load instance panel\n", e)
	}
	}

	const getStickers = async ({ store }) => {
	try {
	const res = await window.fetch('/static/stickers.json')
	if (res.ok) {
	const values = await res.json()
	const stickers = (
	await Promise.all(
	Object.entries(values).map(async ([name, path]) => {
	const resPack = await window.fetch(path + 'pack.json')
	let meta = {}
	if (resPack.ok) {
	meta = await resPack.json()
	}
	return {
	pack: name,
	path,
	meta,
	}
	}),
	)
	).sort((a, b) => {
	return a.meta.title.localeCompare(b.meta.title)
	})
	useEmojiStore().setStickers(stickers)
	} else {
	throw res
	}
	} catch (e) {
	console.warn("Can't load stickers\n", e)
	}
	}

	const getAppSecret = async ({ store }) => {
	const oauth = useOAuthStore()
	if (oauth.userToken) {
	store.commit(
	'setBackendInteractor',
	backendInteractorService(oauth.getToken),
	)
	}
	}

	const resolveStaffAccounts = ({ store, accounts }) => {
	const nicknames = accounts.map((uri) => uri.split('/').pop())
	useInstanceStore().set({
	name: 'staffAccounts',
	value: nicknames,
	})
	}

	const getNodeInfo = async ({ store }) => {
	try {
	let res = await preloadFetch('/nodeinfo/2.1.json')
	if (!res.ok) res = await preloadFetch('/nodeinfo/2.0.json')
	if (res.ok) {
	const data = await res.json()
	const metadata = data.metadata
	const features = metadata.features
	useInstanceStore().set({
	path: 'name',
	value: metadata.nodeName,
	})
	useInstanceStore().set({
	path: 'registrationOpen',
	value: data.openRegistrations,
	})
	useInstanceCapabilitiesStore().set(
	'mediaProxyAvailable',
	features.includes('media_proxy'),
	)
	useInstanceCapabilitiesStore().set(
	'safeDM',
	features.includes('safe_dm_mentions'),
	)
	useInstanceCapabilitiesStore().set(
	'shoutAvailable',
	features.includes('chat'),
	)
	useInstanceCapabilitiesStore().set(
	'pleromaChatMessagesAvailable',
	features.includes('pleroma_chat_messages'),
	)
	useInstanceCapabilitiesStore().set(
	'pleromaCustomEmojiReactionsAvailable',

	features.includes('pleroma_custom_emoji_reactions') \|\|
	features.includes('custom_emoji_reactions'),
	)
	useInstanceCapabilitiesStore().set(
	'pleromaBookmarkFoldersAvailable',
	features.includes('pleroma:bookmark_folders'),
	)
	useInstanceCapabilitiesStore().set(
	'gopherAvailable',
	features.includes('gopher'),
	)
	useInstanceCapabilitiesStore().set(
	'pollsAvailable',
	features.includes('polls'),
	)
	useInstanceCapabilitiesStore().set(
	'editingAvailable',
	features.includes('editing'),
	)
	useInstanceCapabilitiesStore().set(
	'mailerEnabled',
	metadata.mailerEnabled,
	)
	useInstanceCapabilitiesStore().set(
	'quotingAvailable',
	features.includes('quote_posting'),
	)
	useInstanceCapabilitiesStore().set(
	'groupActorAvailable',
	features.includes('pleroma:group_actors'),
	)
	useInstanceCapabilitiesStore().set(
	'blockExpiration',
	features.includes('pleroma:block_expiration'),
	)
	useInstanceStore().set({
	path: 'localBubbleInstances',
	value: metadata.localBubbleInstances ?? [],
	})
	useInstanceCapabilitiesStore().set(
	'localBubble',
	(metadata.localBubbleInstances ?? []).length > 0,
	)

	useInstanceStore().set({
	path: 'limits.pollLimits',
	value: metadata.pollLimits,
	})
	const uploadLimits = metadata.uploadLimits
	useInstanceStore().set({
	path: 'limits.uploadlimit',
	value: parseInt(uploadLimits.general),
	})
	useInstanceStore().set({
	path: 'limits.avatarlimit',
	value: parseInt(uploadLimits.avatar),
	})
	useInstanceStore().set({
	path: 'limits.backgroundlimit',
	value: parseInt(uploadLimits.background),
	})
	useInstanceStore().set({
	path: 'limits.bannerlimit',
	value: parseInt(uploadLimits.banner),
	})
	useInstanceStore().set({
	path: 'limits.fieldsLimits',
	value: metadata.fieldsLimits,
	})

	useInstanceStore().set({
	path: 'restrictedNicknames',
	value: metadata.restrictedNicknames,
	})
	useInstanceCapabilitiesStore().set('postFormats', metadata.postFormats)

	const suggestions = metadata.suggestions
	useInstanceCapabilitiesStore().set(
	'suggestionsEnabled',
	suggestions.enabled,
	)
	// this is unused, why?
	useInstanceCapabilitiesStore().set('suggestionsWeb', suggestions.web)

	const software = data.software
	useInstanceStore().set({
	name: 'backendVersion',
	value: software.version,
	})
	useInstanceStore().set({
	name: 'backendRepository',
	value: software.repository,
	})

	const priv = metadata.private
	- useInstanceStore().set({ name: 'private', value: priv })
	+ useInstanceStore().set({ name: 'privateMode', value: priv })

	const frontendVersion = window.___pleromafe_commit_hash
	useInstanceStore().set({
	name: 'frontendVersion',
	value: frontendVersion,
	})

	const federation = metadata.federation

	useInstanceCapabilitiesStore().set(
	'tagPolicyAvailable',
	typeof federation.mrf_policies === 'undefined'
	? false
	: metadata.federation.mrf_policies.includes('TagPolicy'),
	)

	useInstanceStore().set({
	path: 'federationPolicy',
	value: federation,
	})
	useInstanceStore().set({
	path: 'federating',
	value:
	typeof federation.enabled === 'undefined' ? true : federation.enabled,
	})

	const accountActivationRequired = metadata.accountActivationRequired
	useInstanceStore().set({
	path: 'accountActivationRequired',
	value: accountActivationRequired,
	})

	const accounts = metadata.staffAccounts
	resolveStaffAccounts({ store, accounts })
	} else {
	throw res
	}
	} catch (e) {
	console.warn('Could not load nodeinfo')
	console.warn(e)
	}
	}

	const setConfig = async ({ store }) => {
	// apiConfig, staticConfig
	const configInfos = await Promise.all([
	getBackendProvidedConfig({ store }),
	getStaticConfig(),
	])
	const apiConfig = configInfos[0]
	const staticConfig = configInfos[1]

	getAppSecret({ store })
	await setSettings({ store, apiConfig, staticConfig })
	}

	const checkOAuthToken = async ({ store }) => {
	const oauth = useOAuthStore()
	if (oauth.getUserToken) {
	return store.dispatch('loginUser', oauth.getUserToken)
	}
	return Promise.resolve()
	}

	const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
	const app = createApp(App)
	// Must have app use pinia before we do anything that touches the store
	// https://pinia.vuejs.org/core-concepts/plugins.html#Introduction
	// "Plugins are only applied to stores created after the plugins themselves, and after pinia is passed to the app, otherwise they won't be applied."
	app.use(pinia)

	const waitForAllStoresToLoad = async () => {
	// the stores that do not persist technically do not need to be awaited here,
	// but that involves either hard-coding the stores in some place (prone to errors)
	// or writing another vite plugin to analyze which stores needs persisting (++load time)
	const allStores = import.meta.glob('../stores/*.js', { eager: true })
	if (process.env.NODE_ENV === 'development') {
	// do some checks to avoid common errors
	if (!Object.keys(allStores).length) {
	throw new Error(
	'No stores are available. Check the code in src/boot/after_store.js',
	)
	}
	}
	await Promise.all(
	Object.entries(allStores).map(async ([name, mod]) => {
	const isStoreName = (name) => name.startsWith('use')
	if (process.env.NODE_ENV === 'development') {
	if (Object.keys(mod).filter(isStoreName).length !== 1) {
	throw new Error(
	'Each store file must export exactly one store as a named export. Check your code in src/stores/',
	)
	}
	}
	const storeFuncName = Object.keys(mod).find(isStoreName)
	if (storeFuncName && typeof mod[storeFuncName] === 'function') {
	const p = mod[storeFuncName]().$persistLoaded
	if (!(p instanceof Promise)) {
	throw new Error(
	`${name} store's $persistLoaded is not a Promise. The persist plugin is not applied.`,
	)
	}
	await p
	} else {
	throw new Error(
	`Store module ${name} does not export a 'use...' function`,
	)
	}
	}),
	)
	}

	try {
	await waitForAllStoresToLoad()
	} catch (e) {
	console.error('Cannot load stores:', e)
	storageError = e
	}

	if (storageError) {
	useInterfaceStore().pushGlobalNotice({
	messageKey: 'errors.storage_unavailable',
	level: 'error',
	})
	}

	useInterfaceStore().setLayoutWidth(windowWidth())
	useInterfaceStore().setLayoutHeight(windowHeight())

	FaviconService.initFaviconService()
	initServiceWorker(store)

	window.addEventListener('focus', () => updateFocus())

	const overrides = window.___pleromafe_dev_overrides \|\| {}
	const server =
	typeof overrides.target !== 'undefined'
	? overrides.target
	: window.location.origin
	useInstanceStore().set({ name: 'server', value: server })

	await setConfig({ store })
	try {
	await useInterfaceStore()
	.applyTheme()
	.catch((e) => {
	console.error('Error setting theme', e)
	})
	} catch (e) {
	window.splashError(e)
	return Promise.reject(e)
	}

	applyConfig(store.state.config, i18n.global)

	// Now we can try getting the server settings and logging in
	// Most of these are preloaded into the index.html so blocking is minimized
	await Promise.all([
	checkOAuthToken({ store }),
	getInstancePanel({ store }),
	getNodeInfo({ store }),
	getInstanceConfig({ store }),
	]).catch((e) => Promise.reject(e))

	// Start fetching things that don't need to block the UI
	store.dispatch('fetchMutes')
	store.dispatch('loadDrafts')
	useAnnouncementsStore().startFetchingAnnouncements()
	getTOS({ store })
	getStickers({ store })

	const router = createRouter({
	history: createWebHistory(),
	routes: routes(store),
	scrollBehavior: (to, _from, savedPosition) => {
	if (to.matched.some((m) => m.meta.dontScroll)) {
	return false
	}
	return savedPosition \|\| { left: 0, top: 0 }
	},
	})

	useI18nStore().setI18n(i18n)

	app.use(router)
	app.use(store)
	app.use(i18n)

	// Little thing to get out of invalid theme state
	window.resetThemes = () => {
	useInterfaceStore().resetThemeV3()
	useInterfaceStore().resetThemeV3Palette()
	useInterfaceStore().resetThemeV2()
	}

	app.use(vClickOutside)
	app.use(VBodyScrollLock)
	app.use(VueVirtualScroller)

	app.component('FAIcon', FontAwesomeIcon)
	app.component('FALayers', FontAwesomeLayers)

	// remove after vue 3.3
	app.config.unwrapInjectedRef = true

	app.mount('#app')
	return app
	}

	export default afterStoreSetup
	diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
	index a2c48ae536..943c66d1ea 100644
	--- a/src/components/desktop_nav/desktop_nav.js
	+++ b/src/components/desktop_nav/desktop_nav.js
	@@ -1,129 +1,129 @@
	import SearchBar from 'components/search_bar/search_bar.vue'
	import { mapActions, mapState } from 'pinia'

	import ConfirmModal from '../confirm_modal/confirm_modal.vue'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInterfaceStore } from 'src/stores/interface'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faBullhorn,
	faCog,
	faComments,
	faHome,
	faInfoCircle,
	faSearch,
	faSignInAlt,
	faSignOutAlt,
	faTachometerAlt,
	faUserPlus,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faSignInAlt,
	faSignOutAlt,
	faHome,
	faComments,
	faBell,
	faUserPlus,
	faBullhorn,
	faSearch,
	faTachometerAlt,
	faCog,
	faInfoCircle,
	)

	export default {
	components: {
	SearchBar,
	ConfirmModal,
	},
	data: () => ({
	searchBarHidden: true,
	supportsMask:
	window.CSS &&
	window.CSS.supports &&
	(window.CSS.supports('mask-size', 'contain') \|\|
	window.CSS.supports('-webkit-mask-size', 'contain') \|\|
	window.CSS.supports('-moz-mask-size', 'contain') \|\|
	window.CSS.supports('-ms-mask-size', 'contain') \|\|
	window.CSS.supports('-o-mask-size', 'contain')),
	showingConfirmLogout: false,
	}),
	computed: {
	enableMask() {
	return this.supportsMask && this.logoMask
	},
	logoStyle() {
	return {
	visibility: this.enableMask ? 'hidden' : 'visible',
	}
	},
	logoMaskStyle() {
	return this.enableMask
	? {
	'mask-image': `url(${this.logo})`,
	}
	: {
	'background-color': this.enableMask ? '' : 'transparent',
	}
	},
	logoBgStyle() {
	return Object.assign(
	{
	margin: `${this.logoMargin} 0`,
	opacity: this.searchBarHidden ? 1 : 0,
	},
	this.enableMask
	? {}
	: {
	'background-color': this.enableMask ? '' : 'transparent',
	},
	)
	},
	- ...mapState(useInstanceStore, ['private']),
	+ ...mapState(useInstanceStore, ['privateMode']),
	...mapState(useInstanceStore, {
	logoMask: (store) => store.instanceIdentity.logoMask,
	logo: (store) => store.instanceIdentity.logo,
	logoLeft: (store) => store.instanceIdentity.logoLeft,
	logoMargin: (store) => store.instanceIdentity.logoMargin,
	sitename: (store) => store.instanceIdentity.name,
	hideSitename: (store) => store.instanceIdentity.hideSitename,
	}),
	currentUser() {
	return this.$store.state.users.currentUser
	},
	shouldConfirmLogout() {
	return this.$store.getters.mergedConfig.modalOnLogout
	},
	},
	methods: {
	scrollToTop() {
	window.scrollTo(0, 0)
	},
	showConfirmLogout() {
	this.showingConfirmLogout = true
	},
	hideConfirmLogout() {
	this.showingConfirmLogout = false
	},
	logout() {
	if (!this.shouldConfirmLogout) {
	this.doLogout()
	} else {
	this.showConfirmLogout()
	}
	},
	doLogout() {
	this.$router.replace('/main/public')
	this.$store.dispatch('logout')
	this.hideConfirmLogout()
	},
	onSearchBarToggled(hidden) {
	this.searchBarHidden = hidden
	},
	...mapActions(useInterfaceStore, ['openSettingsModal']),
	},
	}
	diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
	index 676e2428ff..da427f2a18 100644
	--- a/src/components/desktop_nav/desktop_nav.vue
	+++ b/src/components/desktop_nav/desktop_nav.vue
	@@ -1,95 +1,95 @@
	<template>
	<nav
	id="nav"
	class="DesktopNav"
	:class="{ '-logoLeft': logoLeft }"
	@click="scrollToTop()"
	>
	<div class="inner-nav">
	<div class="item sitename">
	<router-link
	v-if="!hideSitename"
	class="site-name"
	:to="{ name: 'root' }"
	active-class="home"
	>
	{{ sitename }}
	</router-link>
	</div>
	<router-link
	class="logo"
	:to="{ name: 'root' }"
	:style="logoBgStyle"
	:title="sitename"
	>
	<div
	class="mask"
	:style="logoMaskStyle"
	/>
	<img
	:src="logo"
	:style="logoStyle"
	>
	</router-link>
	<div class="item right actions">
	<search-bar
	- v-if="currentUser \|\| !private"
	+ v-if="currentUser \|\| !privateMode"
	@toggled="onSearchBarToggled"
	@click.stop
	/>
	<button
	class="button-unstyled nav-icon"
	:title="$t('nav.preferences')"
	@click.stop="openSettingsModal('user')"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="cog"
	/>
	</button>
	<button
	v-if="currentUser && currentUser.role === 'admin'"
	class="button-unstyled nav-icon"
	target="_blank"
	:title="$t('nav.administration')"
	@click.stop="openSettingsModal('admin')"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="tachometer-alt"
	/>
	</button>
	<span class="spacer" />
	<button
	v-if="currentUser"
	class="button-unstyled nav-icon"
	:title="$t('login.logout')"
	@click.stop.prevent="logout"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="sign-out-alt"
	/>
	</button>
	</div>
	</div>
	<teleport to="#modal">
	<confirm-modal
	v-if="showingConfirmLogout"
	:title="$t('login.logout_confirm_title')"
	:confirm-text="$t('login.logout_confirm_accept_button')"
	:cancel-text="$t('login.logout_confirm_cancel_button')"
	@accepted="doLogout"
	@cancelled="hideConfirmLogout"
	>
	{{ $t('login.logout_confirm') }}
	</confirm-modal>
	</teleport>
	</nav>
	</template>
	<script src="./desktop_nav.js"></script>

	<style src="./desktop_nav.scss" lang="scss"></style>
	diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
	index 628d8d33fa..05d8e92f5c 100644
	--- a/src/components/side_drawer/side_drawer.js
	+++ b/src/components/side_drawer/side_drawer.js
	@@ -1,129 +1,129 @@
	import { mapActions, mapState } from 'pinia'
	import { mapGetters } from 'vuex'

	import { USERNAME_ROUTES } from 'src/components/navigation/navigation.js'
	import GestureService from '../../services/gesture_service/gesture_service'
	import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
	import UserCard from '../user_card/user_card.vue'

	import { useAnnouncementsStore } from 'src/stores/announcements'
	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
	import { useInterfaceStore } from 'src/stores/interface'
	import { useShoutStore } from 'src/stores/shout'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faBullhorn,
	faCog,
	faComments,
	faCompass,
	faFilePen,
	faHome,
	faInfoCircle,
	faList,
	faSearch,
	faSignInAlt,
	faSignOutAlt,
	faTachometerAlt,
	faUserPlus,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faSignInAlt,
	faSignOutAlt,
	faHome,
	faComments,
	faBell,
	faUserPlus,
	faBullhorn,
	faSearch,
	faTachometerAlt,
	faCog,
	faInfoCircle,
	faCompass,
	faList,
	faFilePen,
	)

	const SideDrawer = {
	props: ['logout'],
	data: () => ({
	closed: true,
	closeGesture: undefined,
	}),
	created() {
	this.closeGesture = GestureService.swipeGesture(
	GestureService.DIRECTION_LEFT,
	this.toggleDrawer,
	)

	if (this.currentUser && this.currentUser.locked) {
	this.$store.dispatch('startFetchingFollowRequests')
	}
	},
	components: { UserCard },
	computed: {
	currentUser() {
	return this.$store.state.users.currentUser
	},
	shout() {
	return useShoutStore().joined
	},
	unseenNotifications() {
	return unseenNotificationsFromStore(this.$store)
	},
	unseenNotificationsCount() {
	return this.unseenNotifications.length
	},
	followRequestCount() {
	return this.$store.state.api.followRequests.length
	},
	timelinesRoute() {
	let name
	if (useInterfaceStore().lastTimeline) {
	name = useInterfaceStore().lastTimeline
	}
	name = this.currentUser ? 'friends' : 'public-timeline'
	if (USERNAME_ROUTES.has(name)) {
	return { name, params: { username: this.currentUser.screen_name } }
	} else {
	return { name }
	}
	},
	...mapState(useAnnouncementsStore, [
	'supportsAnnouncements',
	'unreadAnnouncementCount',
	]),
	...mapState(useInstanceCapabilitiesStore, [
	'pleromaChatMessagesAvailable',
	'suggestionsEnabled',
	]),
	- ...mapState(useInstanceStore, ['private', 'federating']),
	+ ...mapState(useInstanceStore, ['privateMode', 'federating']),
	...mapState(useInstanceStore, {
	logo: (store) => store.instanceIdentity.logo,
	sitename: (store) => store.instanceIdentity.name,
	hideSitename: (store) => store.instanceIdentity.hideSitename,
	}),
	...mapGetters(['unreadChatCount', 'draftCount']),
	},
	methods: {
	toggleDrawer() {
	this.closed = !this.closed
	},
	doLogout() {
	this.logout()
	this.toggleDrawer()
	},
	touchStart(e) {
	GestureService.beginSwipe(e, this.closeGesture)
	},
	touchMove(e) {
	GestureService.updateSwipe(e, this.closeGesture)
	},
	...mapActions(useInterfaceStore, ['openSettingsModal']),
	},
	}

	export default SideDrawer
	diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
	index 0db39d43fb..c034edf910 100644
	--- a/src/components/side_drawer/side_drawer.vue
	+++ b/src/components/side_drawer/side_drawer.vue
	@@ -1,445 +1,445 @@
	<template>
	<div
	class="side-drawer-container mobile-drawer"
	:class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
	>
	<div
	class="side-drawer-darken"
	:class="{ 'side-drawer-darken-closed': closed}"
	/>
	<div
	class="side-drawer"
	:class="{'side-drawer-closed': closed}"
	@touchstart="touchStart"
	@touchmove="touchMove"
	>
	<div
	class="side-drawer-heading"
	@click="toggleDrawer"
	>
	<UserCard
	v-if="currentUser"
	:user-id="currentUser.id"
	:hide-bio="true"
	/>
	<div
	v-else
	class="side-drawer-logo-wrapper"
	>
	<img :src="logo">
	<span v-if="!hideSitename">{{ sitename }}</span>
	</div>
	</div>
	<ul>
	<li
	v-if="!currentUser"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'login' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="sign-in-alt"
	/> {{ $t("login.login") }}
	</router-link>
	</li>
	<li
	- v-if="currentUser \|\| !private"
	+ v-if="currentUser \|\| !privateMode"
	@click="toggleDrawer"
	>
	<router-link
	:to="timelinesRoute"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="home"
	/> {{ $t("nav.timelines") }}
	</router-link>
	</li>
	<li
	v-if="currentUser"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'lists' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="list"
	/> {{ $t("nav.lists") }}
	</router-link>
	</li>
	<li
	v-if="currentUser"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'bookmarks' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="bookmark"
	/> {{ $t("nav.bookmarks") }}
	</router-link>
	</li>
	<li
	v-if="currentUser && pleromaChatMessagesAvailable"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'chats', params: { username: currentUser.screen_name } }"
	style="position: relative;"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="comments"
	/> {{ $t("nav.chats") }}
	<span
	v-if="unreadChatCount"
	class="badge -notification"
	>
	{{ unreadChatCount }}
	</span>
	</router-link>
	</li>
	</ul>
	<ul v-if="currentUser">
	<li @click="toggleDrawer">
	<router-link
	:to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="bell"
	/> {{ $t("nav.interactions") }}
	</router-link>
	</li>
	<li
	v-if="currentUser.locked"
	@click="toggleDrawer"
	>
	<router-link
	to="/friend-requests"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="user-plus"
	/> {{ $t("nav.friend_requests") }}
	<span
	v-if="followRequestCount > 0"
	class="badge -notification"
	>
	{{ followRequestCount }}
	</span>
	</router-link>
	</li>
	<li
	v-if="shout"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'shout-panel' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="bullhorn"
	/> {{ $t("shoutbox.title") }}
	</router-link>
	</li>
	</ul>
	<ul>
	<li
	- v-if="currentUser \|\| !private"
	+ v-if="currentUser \|\| !privateMode"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'search' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="search"
	/> {{ $t("nav.search") }}
	</router-link>
	</li>
	<li
	v-if="currentUser && suggestionsEnabled"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'who-to-follow' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="user-plus"
	/> {{ $t("nav.who_to_follow") }}
	</router-link>
	</li>
	<li @click="toggleDrawer">
	<button
	class="menu-item"
	@click="openSettingsModal('user')"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="cog"
	/> {{ $t("settings.settings") }}
	</button>
	</li>
	<li @click="toggleDrawer">
	<router-link
	:to="{ name: 'about'}"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="info-circle"
	/> {{ $t("nav.about") }}
	</router-link>
	</li>
	<li
	v-if="currentUser && currentUser.role === 'admin'"
	@click="toggleDrawer"
	>
	<button
	class="menu-item"
	@click.stop="openSettingsModal('admin')"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="tachometer-alt"
	/> {{ $t("nav.administration") }}
	</button>
	</li>
	<li
	v-if="currentUser && supportsAnnouncements"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'announcements' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="bullhorn"
	/> {{ $t("nav.announcements") }}
	<span
	v-if="unreadAnnouncementCount"
	class="badge -notification"
	>
	{{ unreadAnnouncementCount }}
	</span>
	</router-link>
	</li>
	<li
	v-if="currentUser"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'drafts' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="file-pen"
	/> {{ $t('nav.drafts') }}
	<span
	v-if="draftCount"
	class="badge -neutral"
	>
	{{ draftCount }}
	</span>
	</router-link>
	</li>
	<li
	v-if="currentUser"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'edit-navigation' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="compass"
	/> {{ $t("nav.edit_nav_mobile") }}
	</router-link>
	</li>
	<li
	v-if="currentUser"
	@click="toggleDrawer"
	>
	<button
	class="menu-item"
	@click="doLogout"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="sign-out-alt"
	/> {{ $t("login.logout") }}
	</button>
	</li>
	</ul>
	</div>
	<div
	class="side-drawer-click-outside"
	:class="{'side-drawer-click-outside-closed': closed}"
	@click.stop.prevent="toggleDrawer"
	/>
	</div>
	</template>

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

	<style lang="scss">
	.side-drawer-container {
	position: fixed;
	z-index: var(--ZI_navbar);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: stretch;
	transition-duration: 0s;
	transition-property: transform;
	}

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

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

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

	.side-drawer-darken-closed {
	background-color: rgb(0 0 0 / 0%);
	}

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

	.side-drawer {
	overflow-x: hidden;
	transition: 0.35s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
	transition-property: transform;
	margin: 0 0 0 -100px;
	padding: 0 0 1em 100px;
	width: 80%;
	max-width: 20em;
	flex: 0 0 80%;
	box-shadow: var(--shadow);
	background-color: var(--background);

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

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

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

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

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

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

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

	.user-info {
	margin: 1em;
	}
	}

	.side-drawer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid;
	border-color: var(--border);
	}

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

	.side-drawer li {
	padding: 0;

	a,
	button {
	box-sizing: border-box;
	display: block;
	height: 3em;
	line-height: 3em;
	padding: 0 0.7em;
	}
	}
	</style>
	diff --git a/src/components/status_action_buttons/action_button.js b/src/components/status_action_buttons/action_button.js
	index 3d18016d3b..3c493b6828 100644
	--- a/src/components/status_action_buttons/action_button.js
	+++ b/src/components/status_action_buttons/action_button.js
	@@ -1,153 +1,154 @@
	import EmojiPicker from 'src/components/emoji_picker/emoji_picker.vue'
	import Popover from 'src/components/popover/popover.vue'
	import StatusBookmarkFolderMenu from 'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'

	import { useInstanceStore } from 'src/stores/instance.js'
	import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBookmark as faBookmarkRegular,
	faStar as faStarRegular,
	} from '@fortawesome/free-regular-svg-icons'
	import {
	faBookmark,
	faCheck,
	faChevronRight,
	faChevronUp,
	faExternalLinkAlt,
	faEyeSlash,
	faHistory,
	faMinus,
	faPlus,
	faReply,
	faRetweet,
	faShareAlt,
	faSmileBeam,
	faStar,
	faThumbtack,
	faTimes,
	faWrench,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faPlus,
	faMinus,
	faCheck,
	faTimes,
	faWrench,

	faChevronRight,
	faChevronUp,

	faReply,
	faRetweet,
	faStar,
	faStarRegular,
	faSmileBeam,

	faBookmark,
	faBookmarkRegular,
	faEyeSlash,
	faThumbtack,
	faShareAlt,
	faExternalLinkAlt,
	faHistory,
	)

	export default {
	props: [
	'button',
	'status',
	'extra',
	'status',
	'funcArg',
	'getClass',
	'getComponent',
	'doAction',
	'outerClose',
	],
	emits: ['interacted'],
	components: {
	StatusBookmarkFolderMenu,
	EmojiPicker,
	Popover,
	},
	data: () => ({
	animationState: false,
	}),
	computed: {
	buttonClass() {
	return [
	this.button.name + '-button',
	{
	'-with-extra': this.button.name === 'bookmark',
	'-extra': this.extra,
	'-quick': !this.extra,
	},
	]
	},
	userIsMuted() {
	return this.$store.getters.relationship(this.status.user.id).muting
	},
	threadIsMuted() {
	return this.status.thread_muted
	},
	hideCustomEmoji() {
	- return !useInstanceCapabilitiesStore().pleromaCustomEmojiReactionsAvailable
	+ return !useInstanceCapabilitiesStore()
	+ .pleromaCustomEmojiReactionsAvailable
	},
	buttonInnerClass() {
	return [
	this.button.name + '-button',
	{
	'main-button': this.extra,
	'button-unstyled': !this.extra,
	'-active': this.button.active?.(this.funcArg),
	disabled: this.button.interactive
	? !this.button.interactive(this.funcArg)
	: false,
	},
	]
	},
	remoteInteractionLink() {
	return useInstanceStore().getRemoteInteractionLink({
	statusId: this.status.id,
	})
	},
	},
	methods: {
	addReaction(event) {
	const emoji = event.insertion
	const existingReaction = this.status.emoji_reactions.find(
	(r) => r.name === emoji,
	)
	if (existingReaction && existingReaction.me) {
	this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
	} else {
	this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
	}
	},
	doActionWrap(
	button,
	close = () => {
	/* no-op */
	},
	) {
	if (
	this.button.interactive ? !this.button.interactive(this.funcArg) : false
	)
	return
	this.$emit('interacted')
	if (button.name === 'emoji') {
	this.$refs.picker.showPicker()
	} else {
	this.animationState = true
	this.getComponent(button) === 'button' && this.doAction(button)
	setTimeout(() => {
	this.animationState = false
	}, 500)
	close()
	}
	},
	},
	}
	diff --git a/src/stores/instance.js b/src/stores/instance.js
	index 8caca35520..76ad22fb5f 100644
	--- a/src/stores/instance.js
	+++ b/src/stores/instance.js
	@@ -1,123 +1,123 @@
	import { get, set } from 'lodash'
	import { defineStore } from 'pinia'

	import { instanceDefaultProperties } from '../modules/config.js'
	import {
	instanceDefaultConfig,
	staticOrApiConfigDefault,
	} from '../modules/default_config_state.js'
	import apiService from '../services/api/api.service.js'

	import { useInterfaceStore } from 'src/stores/interface.js'

	import { ensureFinalFallback } from 'src/i18n/languages.js'

	const REMOTE_INTERACTION_URL = '/main/ostatus'

	const defaultState = {
	// Stuff from apiConfig
	name: 'Pleroma FE',
	registrationOpen: true,
	server: 'http://localhost:4040/',
	textlimit: 5000,
	- private: false,
	+ privateMode: false,
	federating: true,
	federationPolicy: null,
	themesIndex: null,
	stylesIndex: null,
	palettesIndex: null,
	themeData: null, // used for theme editor v2
	vapidPublicKey: null,

	// Stuff from static/config.json
	loginMethod: 'password',
	disableUpdateNotification: false,

	// Instance-wide configurations that should not be changed by individual users
	instanceIdentity: {
	...staticOrApiConfigDefault,
	},

	limits: {
	bannerlimit: null,
	avatarlimit: null,
	backgroundlimit: null,
	uploadlimit: null,
	fieldsLimits: null,
	pollLimits: {
	max_options: 4,
	max_option_chars: 255,
	min_expiration: 60,
	max_expiration: 60 * 60 * 24,
	},
	},

	// Instance admins can override default settings for the whole instance
	prefsStorage: {
	...instanceDefaultConfig,
	},

	// Known domains list for user's domain-muting
	knownDomains: [],

	// Moderation stuff
	staffAccounts: [],
	accountActivationRequired: null,
	accountApprovalRequired: null,
	birthdayRequired: false,
	birthdayMinAge: 0,
	restrictedNicknames: [],
	localBubbleInstances: [], // Akkoma

	// Version Information
	backendVersion: '',
	backendRepository: '',
	frontendVersion: '',
	}

	export const useInstanceStore = defineStore('instance', {
	state: () => ({ ...defaultState }),
	getters: {
	instanceDefaultConfig(state) {
	return instanceDefaultProperties
	.map((key) => [key, state[key]])
	.reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
	},
	instanceDomain(state) {
	return new URL(this.server).hostname
	},
	},
	actions: {
	set({ path, name, value }) {
	if (get(defaultState, path ?? name) === undefined)
	console.error(
	`Unknown instance option ${path ?? name}, value: ${value}`,
	)

	set(this, path ?? name, value)

	if ((path ?? name) === 'name') useInterfaceStore().setPageTitle()
	},
	async getKnownDomains() {
	try {
	this.knownDomains = await apiService.fetchKnownDomains({
	credentials: window.vuex.state.users.currentUser.credentials,
	})
	} catch (e) {
	console.warn("Can't load known domains\n", e)
	}
	},
	getRemoteInteractionLink({ statusId, nickname }) {
	const server = this.server.endsWith('/')
	? this.server.slice(0, -1)
	: this.server
	const link = server + REMOTE_INTERACTION_URL

	if (statusId) {
	return `${link}?status_id=${statusId}`
	} else {
	return `${link}?nickname=${nickname}`
	}
	},
	},
	})

File Metadata

Mime Type: text/x-diff
Expires: Sun, Aug 30, 8:12 PM (1 d, 18 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1738147
Default Alt Text: (46 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions