hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request 'more-fixes' (#3505) from more-fixes into develop

Browse source 
Reviewed-on: https://git.pleroma.social/pleroma/pleroma-fe/pulls/3505
This commit is contained in:
HJ 2026-07-13 14:13:48 +00:00
commit 2835da1e38
71 changed files with 755 additions and 577 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.gitlab-ci.yml
View file

@ -157,7 +157,7 @@ e2e-pleroma:
variables:
PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: "1"
FF_NETWORK_PER_BUILD: "true"
PLEROMA_IMAGE: git.pleroma.social:5050/pleroma/pleroma:stable
PLEROMA_IMAGE: git.pleroma.social/pleroma/pleroma:stable
POSTGRES_USER: pleroma
POSTGRES_PASSWORD: pleroma
POSTGRES_DB: pleroma

0
changelog.d/more-fixes.skip Normal file
View file

2
docker-compose.e2e.yml
View file

@ -12,7 +12,7 @@ services:
retries: 30
pleroma:
image: ${PLEROMA_IMAGE:-git.pleroma.social:5050/pleroma/pleroma:stable}
image: ${PLEROMA_IMAGE:-git.pleroma.social/pleroma/pleroma:stable}
environment:
DB_USER: pleroma
DB_PASS: pleroma

2
src/App.js
View file

@ -4,6 +4,7 @@ import { defineAsyncComponent } from 'vue'
import DesktopNav from 'src/components/desktop_nav/desktop_nav.vue'
import FeaturesPanel from 'src/components/features_panel/features_panel.vue'
import GlobalError from 'src/components/global_error/global_error.vue'
import GlobalNoticeList from 'src/components/global_notice_list/global_notice_list.vue'
import InstanceSpecificPanel from 'src/components/instance_specific_panel/instance_specific_panel.vue'
import MobileNav from 'src/components/mobile_nav/mobile_nav.vue'
@ -68,6 +69,7 @@ export default {
() =>
import('src/components/status_history_modal/status_history_modal.vue'),
),
GlobalError,
GlobalNoticeList,
},
data: () => ({

19
src/App.scss
View file

@ -144,6 +144,25 @@ h4 {
margin: 0;
}
code {
background: var(--background);
border: 1px solid var(--border);
border-radius: var(--roundness);
padding: 0 0.2em;
& pre,
pre & {
display: block;
overflow-x: auto;
padding: 0.2em;
}
&.pre {
white-space: pre;
display: block;
}
}
.iconLetter {
display: inline-block;
text-align: center;

1
src/App.vue
View file

@ -73,6 +73,7 @@
<StatusHistoryModal v-if="editingAvailable" />
<SettingsModal :class="layoutModalClass" />
<UpdateNotification />
<GlobalError />
<GlobalNoticeList />
</div>
</template>

4
src/api/admin.js
View file

@ -435,7 +435,7 @@ export const downloadRemoteEmojiPackZIP = ({
return promisedRequest({
url: EMOJI_PACKS_DL_REMOTE_ZIP_URL,
method: 'POST',
payload: data,
formData: data,
})
}
@ -460,7 +460,7 @@ export const addNewEmojiFile = ({ packName, file, shortcode, filename }) => {
return promisedRequest({
url: EMOJI_UPDATE_FILE_URL(packName),
method: 'POST',
payload: data,
formData: data,
})
}

2
src/api/chats.js
View file

@ -4,7 +4,7 @@ import { parseChat } from 'src/services/entity_normalizer/entity_normalizer.serv
const PLEROMA_CHATS_URL = '/api/v1/pleroma/chats'
const PLEROMA_CHAT_URL = (id) => `/api/v1/pleroma/chats/by-account-id/${id}`
const PLEROMA_CHAT_MESSAGES_URL = (id, { maxId, sinceId, limit }) =>
const PLEROMA_CHAT_MESSAGES_URL = (id, { maxId, sinceId, limit } = {}) =>
`/api/v1/pleroma/chats/${id}/messages${paramsString({ maxId, sinceId, limit })}`
const PLEROMA_CHAT_READ_URL = (id) => `/api/v1/pleroma/chats/${id}/read`
const PLEROMA_DELETE_CHAT_MESSAGE_URL = (chatId, messageId) =>

9
src/api/helpers.js
View file

@ -17,8 +17,6 @@ export const paramsString = (params = {}) => {
}
})()
if (entries.length === 0) return ''
const arrays = []
const nonArrays = []
@ -48,6 +46,8 @@ export const paramsString = (params = {}) => {
})
})
if (nonArrays.length + arrays.length === 0) return ''
return (
'?' +
[
@ -71,6 +71,7 @@ export const promisedRequest = async ({
url,
payload,
formData,
cache,
credentials,
headers = {},
}) => {
@ -87,6 +88,10 @@ export const promisedRequest = async ({
options.headers['Content-Type'] = 'application/json'
}
if (cache) {
options.cache = cache
}
if (formData || payload) {
options.body = formData || JSON.stringify(payload)
}

3
src/api/user.js
View file

@ -181,9 +181,6 @@ export const unmuteConversation = ({ id, credentials }) =>
}).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))
export const vote = ({ pollId, choices, credentials }) => {
const form = new FormData()
form.append('choices', choices)
return promisedRequest({
url: MASTODON_VOTE_URL(encodeURIComponent(pollId)),
method: 'POST',

10
src/boot/after_store.js
View file

@ -467,6 +467,16 @@ const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
// "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)
app.config.errorHandler = (error, instance, info) => {
console.error(
'Global Vue Error Handler caught an error:',
error,
instance,
info,
)
useInterfaceStore().setGlobalError({ error, instance, info })
}
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)

5
src/boot/routes.js
View file

@ -1,5 +1,6 @@
import { defineAsyncComponent } from 'vue'
import AuthForm from 'src/components/auth_form/auth_form.js'
import BookmarkTimeline from 'src/components/bookmark_timeline/bookmark_timeline.vue'
import BubbleTimeline from 'src/components/bubble_timeline/bubble_timeline.vue'
import ConversationPage from 'src/components/conversation-page/conversation-page.vue'
@ -147,9 +148,7 @@ export default (store) => {
{
name: 'login',
path: '/login',
component: defineAsyncComponent(
() => import('src/components/auth_form/auth_form.js'),
),
component: AuthForm,
},
{
name: 'shout-panel',

1
src/components/attachment/attachment.js
View file

@ -52,6 +52,7 @@ const Attachment = {
'shiftDn',
'edit',
],
emits: ['play', 'pause', 'naturalSizeLoad'],
data() {
return {
localDescription: this.description || this.attachment.description,

3
src/components/basic_user_card/basic_user_card.vue
View file

@ -54,7 +54,8 @@
<style lang="scss">
.basic-user-card {
display: flex;
flex: 1 0;
flex: 1 1 10em;
min-width: 1em;
margin: 0;
line-height: 1.25;

5
src/components/chat/chat.js
View file

@ -16,6 +16,7 @@ import {
} from './chat_layout_utils.js'
import { useInterfaceStore } from 'src/stores/interface.js'
import { useMergedConfigStore } from 'src/stores/merged_config.js'
import { useOAuthStore } from 'src/stores/oauth.js'
import {
@ -116,8 +117,8 @@ const Chat = {
'currentChat',
'currentChatMessageService',
'findOpenedChatByRecipientId',
'mergedConfig',
]),
...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
...mapPiniaState(useInterfaceStore, {
mobileLayout: (store) => store.layoutType === 'mobile',
}),
@ -381,7 +382,7 @@ const Chat = {
if (retriesLeft <= 0) return
sendChatMessage({
params,
...params,
credentials: useOAuthStore().token,
})
.then(({ data }) => {

6
src/components/chat_new/chat_new.js
View file

@ -5,6 +5,8 @@ import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
import { useOAuthStore } from 'src/stores/oauth.js'
import { chats } from 'src/api/chats.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faChevronLeft, faSearch } from '@fortawesome/free-solid-svg-icons'
@ -24,10 +26,10 @@ const chatNew = {
}
},
async created() {
const { chats } = await chats({
const { chatList } = await chats({
credentials: useOAuthStore().token,
})
chats.forEach((chat) => this.suggestions.push(chat.account))
chatList.forEach((chat) => this.suggestions.push(chat.account))
},
computed: {
users() {

5
src/components/conversation-page/conversation-page.vue
View file

@ -1,8 +1,7 @@
<template>
<conversation
:collapsable="false"
is-page="true"
<Conversation
:status-id="statusId"
is-page
/>
</template>

138
src/components/conversation/conversation.js
View file

@ -55,25 +55,56 @@ const sortAndFilterConversation = (conversation, statusoid) => {
}
const conversation = {
props: {
statusId: {
// Main thing
type: String,
required: true,
},
collapsable: {
// Whether conversation can be collapsed
// i.e. when it's not a page
type: Boolean,
default: false,
},
isPage: {
// Whether conversation is rendered as a standalone page
// as opposed to embedded into a timeline
type: Boolean,
default: false,
},
pinnedStatusIdsObject: {
// Used for user profile, map of pinned statuses
type: Object,
default: null,
},
inProfile: {
// Whether conversation is rendered in a user profile
// used for overriding muted status
type: Boolean,
default: false,
},
profileUserId: {
// used with inProfile, user id of the profile
type: String,
default: null,
},
virtualHidden: {
// Whether conversation is suspended. Controls rendering of statuses
type: Boolean,
default: false,
},
},
data() {
return {
highlight: null,
focused: null,
expanded: false,
threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
statusContentPropertiesObject: {},
inlineDivePosition: null,
loadStatusError: null,
unsuspendibleIds: new Set(),
}
},
props: [
'statusId',
'collapsable',
'isPage',
'pinnedStatusIdsObject',
'inProfile',
'profileUserId',
'virtualHidden',
],
created() {
if (this.isPage) {
this.fetchConversation()
@ -118,16 +149,7 @@ const conversation = {
return this.otherRepliesButtonPosition === 'inside'
},
suspendable() {
if (this.isTreeView) {
return Object.entries(this.statusContentProperties).every(
([, prop]) => !prop.replying && prop.mediaPlaying.length === 0,
)
}
if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
return this.$refs.statusComponent.every((s) => s.suspendable)
} else {
return true
}
return this.unsuspendibleIds.size > 0
},
hideStatus() {
return this.virtualHidden && this.suspendable
@ -364,36 +386,11 @@ const conversation = {
return a
}, {})
},
statusContentProperties() {
return this.conversation.reduce((a, k) => {
const id = k.id
const props = (() => {
const def = {
showingTall: false,
expandingSubject: false,
showingLongSubject: false,
isReplying: false,
mediaPlaying: [],
}
if (this.statusContentPropertiesObject[id]) {
return {
...def,
...this.statusContentPropertiesObject[id],
}
}
return def
})()
a[id] = props
return a
}, {})
},
canDive() {
return this.isTreeView && this.isExpanded
},
maybeHighlight() {
return this.isExpanded ? this.highlight : null
maybeFocused() {
return this.isExpanded ? this.focused : null
},
...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
...mapState({
@ -417,7 +414,7 @@ const conversation = {
oldConversationId &&
newConversationId === oldConversationId
) {
this.setHighlight(this.originalStatusId)
this.setFocused(this.originalStatusId)
} else {
this.fetchConversation()
}
@ -445,7 +442,7 @@ const conversation = {
}).then(({ data: { ancestors, descendants } }) => {
this.$store.dispatch('addNewStatuses', { statuses: ancestors })
this.$store.dispatch('addNewStatuses', { statuses: descendants })
this.setHighlight(this.originalStatusId)
this.setFocused(this.originalStatusId)
})
} else {
this.loadStatusError = null
@ -463,18 +460,12 @@ const conversation = {
})
}
},
isFocused(id) {
return this.isExpanded && id === this.highlight
},
getReplies(id) {
return this.replies[id] || []
},
getHighlight() {
return this.isExpanded ? this.highlight : null
},
setHighlight(id) {
setFocused(id) {
if (!id) return
this.highlight = id
this.focused = id
if (!this.streamingEnabled) {
this.$store.dispatch('fetchStatus', id)
@ -514,22 +505,6 @@ const conversation = {
showThreadRecursively(id) {
this.setThreadDisplayRecursively(id, 'showing')
},
setStatusContentProperty(id, name, value) {
this.statusContentPropertiesObject = {
...this.statusContentPropertiesObject,
[id]: {
...this.statusContentPropertiesObject[id],
[name]: value,
},
}
},
toggleStatusContentProperty(id, name) {
this.setStatusContentProperty(
id,
name,
!this.statusContentProperties[id][name],
)
},
leastVisibleAncestor(id) {
let cur = id
let parent = this.parentOf(cur)
@ -555,7 +530,7 @@ const conversation = {
// only used when we are not on a page
undive() {
this.inlineDivePosition = null
this.setHighlight(this.statusId)
this.setFocused(this.statusId)
},
tryScrollTo(id) {
if (!id) {
@ -573,7 +548,7 @@ const conversation = {
// contain scrolling calls, as we do not want the page to jump
// when we scroll with an expanded conversation.
//
// Now the method is to rely solely on the `highlight` watcher
// Now the method is to rely solely on the `focused` watcher
// in `status` components.
// In linear views, all statuses are rendered at all times, but
// in tree views, it is possible that a change in active status
@ -581,9 +556,9 @@ const conversation = {
// status becomes an ancestor status, and thus they will be
// different).
// Here, let the components be rendered first, in order to trigger
// the `highlight` watcher.
// the `focused` watcher.
this.$nextTick(() => {
this.setHighlight(id)
this.setFocused(id)
})
},
goToCurrent() {
@ -629,6 +604,13 @@ const conversation = {
this.undive()
this.threadDisplayStatusObject = {}
},
onStatusSuspendStateChange({ id, suspend }) {
if (!suspend) {
this.unsuspendibleIds.add(id)
} else {
this.unsuspendibleIds.delete(id)
}
},
},
}

45
src/components/conversation/conversation.vue
View file

@ -96,8 +96,7 @@
:replies="getReplies(status.id)"
:expandable="!isExpanded"
:focused="isFocused(status.id)"
:highlight="getHighlight()"
:focused="maybeFocused === status.id"
:inline-expanded="collapsable && isExpanded"
:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
:in-profile="inProfile"
@ -105,21 +104,11 @@
:profile-user-id="profileUserId"
:simple-tree="treeViewIsSimple"
:show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
:dive="() => diveIntoStatus(status.id)"
can-dive
:controlled-showing-tall="statusContentProperties[status.id].showingTall"
:controlled-toggle-showing-tall="() => toggleStatusContentProperty(status.id, 'showingTall')"
:controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
:controlled-toggle-expanding-subject="() => toggleStatusContentProperty(status.id, 'expandingSubject')"
:controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
:controlled-toggle-showing-long-subject="() => toggleStatusContentProperty(status.id, 'showingLongSubject')"
:controlled-replying="statusContentProperties[status.id].replying"
:controlled-toggle-replying="() => toggleStatusContentProperty(status.id, 'replying')"
:controlled-media-playing="statusContentProperties[status.id].mediaPlaying"
:controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"
@goto="setHighlight"
@toggle-expanded="toggleExpanded"
@goto="setFocused"
@dive="() => diveIntoStatus(status.id)"
@suspendable-state-change="onStatusSuspendStateChange"
/>
<div
v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
@ -150,7 +139,7 @@
</div>
</article>
</div>
<thread-tree
<ThreadTree
v-for="status in showingTopLevel"
:key="status.id"
ref="statusComponent"
@ -164,22 +153,20 @@
:pinned-status-ids-object="pinnedStatusIdsObject"
:profile-user-id="profileUserId"
:is-focused-function="isFocused"
:get-replies="getReplies"
:highlight="maybeHighlight"
:set-highlight="setHighlight"
:focused="maybeFocused"
:toggle-expanded="toggleExpanded"
:simple="treeViewIsSimple"
:toggle-thread-display="toggleThreadDisplay"
:thread-display-status="threadDisplayStatus"
:show-thread-recursively="showThreadRecursively"
:total-reply-count="totalReplyCount"
:total-reply-depth="totalReplyDepth"
:status-content-properties="statusContentProperties"
:set-status-content-property="setStatusContentProperty"
:toggle-status-content-property="toggleStatusContentProperty"
:dive="canDive ? diveIntoStatus : undefined"
:can-dive="canDive"
@goto="setFocused"
@dive="diveIntoStatus"
@suspendable-state-change="onStatusSuspendStateChange"
/>
</div>
<div
@ -187,7 +174,7 @@
class="thread-body"
>
<article>
<status
<Status
v-for="status in conversation"
:key="status.id"
ref="statusComponent"
@ -196,16 +183,16 @@
:replies="getReplies(status.id)"
:expandable="!isExpanded"
:focused="isFocused(status.id)"
:highlight="getHighlight()"
:focused="maybeFocused === status.id || maybeFocused === status.retweeted_status?.id"
:inline-expanded="collapsable && isExpanded"
:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
:in-profile="inProfile"
:in-conversation="isExpanded"
:profile-user-id="profileUserId"
@goto="setHighlight"
@goto="setFocused"
@toggle-expanded="toggleExpanded"
@suspendable-state-change="onStatusSuspendStateChange"
/>
</article>
</div>

9
src/components/draft/draft.js
View file

@ -69,15 +69,6 @@ const Draft = {
localCollapseSubjectDefault() {
return useMergedConfigStore().mergedConfig.collapseMessageWithSubject
},
nsfwClickthrough() {
if (!this.draft.nsfw) {
return false
}
if (this.draft.summary && this.localCollapseSubjectDefault) {
return false
}
return true
},
},
watch: {
editing(newVal) {

2
src/components/edit_status_modal/edit_status_modal.vue
View file

@ -16,7 +16,7 @@
:params="params"
@posted="doCloseModal"
@draft-done="doCloseModal"
@can-close="doCloseModal"
@close-accepted="doCloseModal"
/>
</div>
</Modal>

4
src/components/emoji_input/suggestor.js
View file

@ -26,14 +26,14 @@ export default (data) => {
}
export const suggestEmoji = (emojis) => (input, nameKeywordLocalizer) => {
const noPrefix = input.toLowerCase().substr(1)
const noPrefix = input.toLowerCase().substring(1)
return emojis
.map((emoji) => ({ ...emoji, ...nameKeywordLocalizer(emoji) }))
.filter(
(emoji) =>
emoji.names
.concat(emoji.keywords)
.filter((kw) => kw.toLowerCase().match(noPrefix)).length,
.filter((kw) => kw.toLowerCase().includes(noPrefix)).length,
)
.map((k) => {
let score = 0

36
src/components/error_modal/error_modal.js Normal file
View file

@ -0,0 +1,36 @@
import DialogModal from 'src/components/dialog_modal/dialog_modal.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleXmark } from '@fortawesome/free-solid-svg-icons'
library.add(faCircleXmark)
/**
* This component emits the following events:
* cancelled, emitted when the action should not be performed;
* accepted, emitted when the action should be performed;
*
* The caller should close this dialog after receiving any of the two events.
*/
const ErrorModal = {
components: {
DialogModal,
},
props: {
title: {
type: String,
},
clearText: {
type: String,
},
recoverText: {
type: String,
},
error: {
type: Error,
},
},
emits: ['clear', 'recover'],
}
export default ErrorModal

103
src/components/error_modal/error_modal.vue Normal file
View file

@ -0,0 +1,103 @@
<template>
<DialogModal
v-body-scroll-lock="true"
class="error-modal"
@cancel="onCancel"
>
<template #header>
<span v-text="title ?? $t('general.generic_error')" />
</template>
<div class="content">
<FAIcon
class="error-icon"
icon="circle-xmark"
size="3x"
fixed-width
/>
<div class="text">
<slot>
<p>
<strong><code v-text="error.name" /></strong>
{{ ' - ' }}
<span v-text="error.message" />
</p>
<details open>
<summary>{{ $t('general.generic_error_details') }}</summary>
<code
class="stack pre"
v-text="error.stack"
/>
</details>
</slot>
</div>
</div>
<div class="below">
<slot name="below" />
</div>
<template #footer>
<slot name="footerLeft" />
<button
v-if="recoverText"
class="btn button-default"
@click.prevent="$emit('recover')"
v-text="recoverText"
/>
<button
class="btn button-default"
@click.prevent="$emit('clear')"
v-text="clearText ?? $t('general.close')"
/>
</template>
</DialogModal>
</template>
<script src="./error_modal.js"></script>
<style lang="scss">
.error-modal {
.error-icon {
margin-left: 0.75rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.content {
display: flex;
align-items: center;
text-align: left;
justify-content: center;
line-height: 1.5;
p {
margin-top: 0.75em;
margin-bottom: 0.75em;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
.stack {
margin: 0;
overflow-x: auto;
}
.below:not(:empty) {
margin-top: 1em;
}
.text {
max-width: 50ch;
margin-left: 0.5em;
margin-right: 3.5em;
}
}
</style>

21
src/components/gallery/gallery.js
View file

@ -27,8 +27,10 @@ const Gallery = {
return {
sizes: {},
hidingLong: true,
playingMedia: new Set(),
}
},
emits: ['play', 'pause'],
components: { Attachment },
computed: {
rows() {
@ -115,11 +117,21 @@ const Gallery = {
return this.attachmentsDimensionalScore > 1
}
},
hasPlayingMedia() {
return this.playingMedia.size > 0
},
},
methods: {
onNaturalSizeLoad({ id, width, height }) {
set(this.sizes, id, { width, height })
},
onMediaStateChange(playing, id) {
if (playing) {
this.playingMedia.add(id)
} else {
this.playingMedia.delete(id)
}
},
rowStyle(row) {
if (row.audio) {
return { 'padding-bottom': '25%' } // fixed reduced height for audio
@ -146,6 +158,15 @@ const Gallery = {
useMediaViewerStore().setMedia(this.attachments)
},
},
watch: {
hasPlayingMedia(newValue) {
if (newValue) {
this.$emit('play')
} else {
this.$emit('pause')
}
},
},
}
export default Gallery

2
src/components/gallery/gallery.vue
View file

@ -34,6 +34,8 @@
:style="itemStyle(attachment.id, row.items)"
@set-media="onMedia"
@natural-size-load="onNaturalSizeLoad"
@play="() => onMediaStateChange(true, attachment.id)"
@pause="() => onMediaStateChange(false, attachment.id)"
/>
</div>
</div>

57
src/components/global_error/global_error.js Normal file
View file

@ -0,0 +1,57 @@
import { mapActions, mapState } from 'pinia'
import { defineAsyncComponent } from 'vue'
import { useInterfaceStore } from 'src/stores/interface.js'
const GlobalError = {
components: {
ErrorModal: defineAsyncComponent(
() => import('src/components/error_modal/error_modal.vue'),
),
},
computed: {
title() {
if (this.globalError == null) return null
return this.globalError.title && this.$t(this.globalError.title)
},
content() {
if (this.globalError == null) return null
if (this.globalError.content) {
return this.$t(this.globalError.content, [this.globalError.error])
} else {
return null
}
},
details() {
if (this.globalError == null) return null
if (this.globalError.error != null) {
return (
this.globalError.error.toString() +
'\n\n' +
this.globalError.error.stack
)
} else {
return this.globalError.details
}
},
recoverText() {
if (this.globalError == null) return null
if (this.globalError.recoverText == null) return null
return this.$t(this.globalError.recoverText)
},
...mapState(useInterfaceStore, ['globalError']),
},
methods: {
clear() {
this.globalError.clear?.()
this.clearGlobalError()
},
recover() {
this.globalError.recover?.()
this.clearGlobalError()
},
...mapActions(useInterfaceStore, ['clearGlobalError']),
},
}
export default GlobalError

26
src/components/global_error/global_error.vue Normal file
View file

@ -0,0 +1,26 @@
<template>
<teleport to="#modal">
<ErrorModal
v-if="globalError"
:error="globalError.error"
:title="title"
:recover-text="recoverText"
@recover="recover"
@clear="clear"
>
<template v-if="content">
<p>{{ content }}</p>
<details v-if="details">
<summary>{{ $t('general.generic_error_details') }}</summary>
<code
class="stack pre"
v-text="details"
/>
</details>
</template>
</ErrorModal>
</teleport>
</template>
<script src="./global_error.js"></script>

2
src/components/lists_edit/lists_edit.vue
View file

@ -50,7 +50,7 @@
</div>
<tab-switcher
class="list-member-management"
:scrollable-tabs
scrollable-tabs
>
<div
v-if="id || addedUserIds.size > 0"

3
src/components/mobile_nav/mobile_nav.js
View file

@ -152,9 +152,6 @@ const MobileNav = {
},
onScroll({ target: { scrollTop, clientHeight, scrollHeight } }) {
this.notificationsAtTop = scrollTop > 0
if (scrollTop + clientHeight >= scrollHeight) {
this.$refs.notifications.fetchOlderNotifications()
}
},
},
watch: {

1
src/components/mobile_nav/mobile_nav.vue
View file

@ -94,6 +94,7 @@
/>
</button>
</div>
<!-- Notifications teleport target -->
<div
id="mobile-notifications"
ref="mobileNotifications"

5
src/components/notification/notification.scss
View file

@ -10,11 +10,6 @@
cursor: pointer;
}
&.Status {
/* stylelint-disable-next-line declaration-no-important */
background-color: transparent !important;
}
--emoji-size: 1em;
&:hover {

10
src/components/notification/notification.style.js
View file

@ -1,6 +1,6 @@
export default {
name: 'Notification',
selector: '.Notification',
selector: '.NotificationParent',
validInnerComponents: [
'Text',
'Link',
@ -9,5 +9,11 @@ export default {
'Avatar',
'PollGraph',
],
defaultRules: [],
defaultRules: [
{
directives: {
background: '--bg',
},
},
],
}

2
src/components/notification/notification.vue
View file

@ -13,7 +13,7 @@
<article
v-else
ref="root"
class="NotificationParent"
class="NotificationParent panel-body"
:class="{ '-expandable': expandable }"
>
<div

1
src/components/notifications/notifications.vue
View file

@ -51,7 +51,6 @@
<NotificationFilters class="rightside-button" />
</div>
<div
class="panel-body"
role="feed"
>
<div

60
src/components/palette_editor/palette_editor.vue
View file

@ -4,15 +4,24 @@
:class="{ '-compact': compact, '-apply': apply, '-mobile': mobile }"
>
<div class="palette">
<ColorInput
<div
v-for="key in paletteKeys"
:key="key"
:name="key"
:model-value="props.modelValue[key]"
:fallback="fallback(key)"
:label="$t('settings.style.themes3.palette.' + key)"
@update:model-value="value => updatePalette(key, value)"
/>
>
<ColorInput
:name="key"
:model-value="props.modelValue[key]"
:fallback="fallback(key)"
:label="$t('settings.style.themes3.palette.' + key)"
@update:model-value="value => updatePalette(key, value)"
/>
<ContrastRatio
v-if="contrast?.[key]"
:show-ratio="true"
:contrast="contrast[key]"
/>
<div v-else>{{ '&nbsp;' }}</div>
</div>
</div>
<div class="buttons">
<button
@ -48,9 +57,14 @@
import { computed } from 'vue'
import ColorInput from 'src/components/color_input/color_input.vue'
import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
import { useInterfaceStore } from 'src/stores/interface.js'
import {
getContrastRatio,
hex2rgb,
} from 'src/services/color_convert/color_convert.js'
import {
newExporter,
newImporter,
@ -106,6 +120,16 @@ const importPalette = () => {
paletteImporter.importData()
}
const hints = (ratio) => ({
text: ratio.toPrecision(3) + ':1',
// AA level, AAA level
aa: ratio >= 4.5,
aaa: ratio >= 7,
// same but for 18pt+ texts
laa: ratio >= 3,
laaa: ratio >= 4.5,
})
const applyPalette = () => {
emit('applyPalette', getExportedObject())
}
@ -114,6 +138,19 @@ const mobile = computed(() => {
return useInterfaceStore().layoutType === 'mobile'
})
const contrast = computed(() => {
if (props.modelValue == null) return null
const bg = hex2rgb(props.modelValue.bg)
const text = hex2rgb(props.modelValue.text)
const link = hex2rgb(props.modelValue.link)
if (text == null || link == null) return null
return {
text: hints(getContrastRatio(bg, text)),
link: hints(getContrastRatio(bg, link)),
}
})
const fallback = (key) => {
if (key === 'accent') {
return props.modelValue.link
@ -204,15 +241,6 @@ const updatePalette = (paletteKey, value) => {
grid-column: 1 / span 2;
}
}
.color-input {
display: grid;
gap: 0.5em;
label {
flex: 1;
}
}
}
}
</style>

24
src/components/post_status_form/post_status_form.js
View file

@ -133,7 +133,7 @@ const PostStatusForm = {
'resize',
'mediaplay',
'mediapause',
'can-close',
'close-accepted',
'update',
],
components: {
@ -596,16 +596,18 @@ const PostStatusForm = {
? this.postHandler
: statusPoster.postStatus
postHandler(postingOptions).then((data) => {
if (!data.error) {
postHandler(postingOptions)
.then((data) => {
this.abandonDraft()
this.clearStatus()
this.$emit('posted', data)
} else {
this.error = data.error
}
this.posting = false
})
})
.catch((error) => {
this.error = error
})
.finally(() => {
this.posting = false
})
},
previewStatus() {
if (this.emptyStatus && this.newStatus.spoilerText.trim() === '') {
@ -963,19 +965,19 @@ const PostStatusForm = {
},
requestClose() {
if (!this.saveable) {
this.$emit('can-close')
this.$emit('close-accepted')
} else {
this.$refs.draftCloser.requestClose()
}
},
saveAndCloseDraft() {
this.saveDraft().then(() => {
this.$emit('can-close')
this.$emit('close-accepted')
})
},
discardAndCloseDraft() {
this.abandonDraft().then(() => {
this.$emit('can-close')
this.$emit('close-accepted')
})
},
addBeforeUnloadListener() {

4
src/components/post_status_form/post_status_form.vue
View file

@ -409,8 +409,8 @@
:remove-attachment="removeMediaFile"
:shift-up-attachment="newStatus.files.length > 1 && shiftUpMediaFile"
:shift-dn-attachment="newStatus.files.length > 1 && shiftDnMediaFile"
@play="$emit('mediaplay', attachment.id)"
@pause="$emit('mediapause', attachment.id)"
@play="$emit('mediaplay', 'newStatus')"
@pause="$emit('mediapause', 'newStatus')"
/>
<div
v-if="newStatus.files.length > 0 && !disableSensitivityCheckbox"

2
src/components/search/search.vue
View file

@ -58,12 +58,10 @@
<Status
v-for="status in visibleStatuses"
:key="status.id"
:collapsable="false"
:expandable="false"
:compact="false"
class="search-result"
:statusoid="status"
:no-heading="false"
/>
<button
v-if="!loading && loaded && lastStatusFetchCount > 0"

15
src/components/settings_modal/admin_tabs/admin_user_card.scss
View file

@ -1,4 +1,19 @@
.AdminUserCard {
details {
white-space: normal;
summary {
font-weight: bold;
}
span {
display: block;
max-height: 6.5em;
overflow-y: auto;
resize: vertical;
}
}
.right-side {
align-items: baseline;
justify-content: end;

12
src/components/settings_modal/admin_tabs/emoji_tab.vue
View file

@ -56,18 +56,14 @@
<Popover
ref="additionalRemotePopover"
popover-class="emoji-tab-edit-popover popover-default"
class="button button-default emoji-panel-additional-actions"
:title="$t('admin_dash.emoji.import_pack')"
trigger="click"
placement="bottom"
>
<template #trigger>
<button
class="button button-default emoji-panel-additional-actions"
:title="$t('admin_dash.emoji.import_pack')"
@click="$refs.additionalRemotePopover.showPopover"
>
<FAIcon icon="folder-open" />
{{ $t('admin_dash.emoji.import_pack_short') }}
</button>
<FAIcon icon="folder-open" />
{{ $t('admin_dash.emoji.import_pack_short') }}
</template>
<template #content>

2
src/components/settings_modal/admin_tabs/frontends_tab.scss
View file

@ -54,7 +54,7 @@
dd {
text-overflow: ellipsis;
white-space: nowrap;
overflow-x: hidden;
overflow: hidden;
}
}

2
src/components/settings_modal/helpers/rate_setting.js
View file

@ -45,7 +45,7 @@ export default {
if (event === 'split') {
return [this.normalizedState[0], this.normalizedState[0]]
} else if (event === 'join') {
return [this.normalizedState[0]]
return this.normalizedState[0]
}
}
},

2
src/components/settings_modal/helpers/rate_setting.vue
View file

@ -88,7 +88,7 @@
</table>
<Checkbox
:model-value="isSeparate"
@update:model-value="event => update({ event: event ? 'join' : 'split', eventType: 'toggleMode' })"
@update:model-value="event => update({ event: event ? 'split' : 'join', eventType: 'toggleMode' })"
>
{{ $t('admin_dash.rate_limit.separate') }}
</Checkbox>

2
src/components/settings_modal/settings_modal.vue
View file

@ -22,7 +22,7 @@
</transition>
<button
class="btn button-default"
:title="$t('general.minimize')"
:title="$t('general.peek')"
@click="toggleMinimizeModal"
>
<FAIcon

2
src/components/settings_modal/settings_modal_admin_content.vue
View file

@ -4,7 +4,7 @@
ref="tabSwitcher"
class="settings-admin-content settings_tab-switcher"
:side-tab-bar="true"
:scrollable-tabs
scrollable-tabs
:render-only-focused="true"
:body-scroll-lock="bodyLock"
>

2
src/components/settings_modal/settings_modal_user_content.vue
View file

@ -2,7 +2,7 @@
<vertical-tab-switcher
ref="tabSwitcher"
class="settings_tab-switcher"
:scrollable-tabs
scrollable-tabs
:body-scroll-lock="bodyLock"
:hide-header="navHideHeader"
>

2
src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
View file

@ -1,7 +1,7 @@
<template>
<tab-switcher
class="mutes-and-blocks-tab"
:scrollable-tabs
scrollable-tabs
>
<div
class="blocks"

122
src/components/status/status.js
View file

@ -73,46 +73,6 @@ library.add(
faPlay,
)
const camelCase = (name) => name.charAt(0).toUpperCase() + name.slice(1)
const controlledOrUncontrolledGetters = (list) =>
list.reduce((res, name) => {
const camelized = camelCase(name)
const toggle = `controlledToggle${camelized}`
const controlledName = `controlled${camelized}`
const uncontrolledName = `uncontrolled${camelized}`
res[name] = function () {
return (this.$data[toggle] !== undefined ||
this.$props[toggle] !== undefined) &&
this[toggle]
? this[controlledName]
: this[uncontrolledName]
}
return res
}, {})
const controlledOrUncontrolledToggle = (obj, name) => {
const camelized = camelCase(name)
const toggle = `controlledToggle${camelized}`
const uncontrolledName = `uncontrolled${camelized}`
if (obj[toggle]) {
obj[toggle]()
} else {
obj[uncontrolledName] = !obj[uncontrolledName]
}
}
const controlledOrUncontrolledSet = (obj, name, val) => {
const camelized = camelCase(name)
const set = `controlledSet${camelized}`
const uncontrolledName = `uncontrolled${camelized}`
if (obj[set]) {
obj[set](val)
} else {
obj[uncontrolledName] = val
}
}
const Status = {
name: 'Status',
components: {
@ -137,7 +97,6 @@ const Status = {
expandable: Boolean,
focused: Boolean,
highlight: Boolean,
compact: Boolean,
isPreview: Boolean,
noHeading: Boolean,
@ -150,36 +109,23 @@ const Status = {
profileUserId: String,
simpleTree: Boolean,
showOtherRepliesAsButton: Boolean,
dive: Function,
canDive: Boolean,
ignoreMute: Boolean,
controlledThreadDisplayStatus: String,
controlledToggleThreadDisplay: Function,
controlledShowingTall: Boolean,
controlledToggleShowingTall: Function,
controlledExpandingSubject: Boolean,
controlledToggleExpandingSubject: Function,
controlledShowingLongSubject: Boolean,
controlledToggleShowingLongSubject: Function,
controlledReplying: Boolean,
controlledToggleReplying: Function,
controlledMediaPlaying: Boolean,
controlledSetMediaPlaying: Function,
threadDisplayStatus: String,
},
emits: ['goto', 'toggleExpanded'],
emits: ['goto', 'dive', 'toggleExpanded', 'suspendableStateChange'],
data() {
return {
uncontrolledReplying: false,
replying: false,
unmuted: false,
userExpanded: false,
uncontrolledMediaPlaying: [],
suspendable: true,
mediaPlaying: new Set(),
error: null,
headTailLinks: null,
}
},
computed: {
...controlledOrUncontrolledGetters(['replying', 'mediaPlaying']),
showReasonMutedThread() {
return (
(this.status.thread_muted ||
@ -373,7 +319,7 @@ const Status = {
},
shouldNotMute() {
if (this.ignoreMute) return true
if (this.isFocused) return true
if (this.focused) return true
const { status } = this
const { reblog } = status
return (
@ -410,16 +356,6 @@ const Status = {
this.muteFilterHits.some((x) => x.hide))
)
},
isFocused() {
// retweet or root of an expanded conversation
if (this.focused) {
return true
} else if (!this.inConversation) {
return false
}
// use conversation highlight only when in conversation
return this.status.id === this.highlight
},
isReply() {
return !!(
this.status.in_reply_to_status_id && this.status.in_reply_to_user_id
@ -468,7 +404,7 @@ const Status = {
shouldDisplayFavsAndRepeats() {
return (
!this.hidePostStats &&
this.isFocused &&
this.focused &&
(this.combinedFavsAndRepeatsUsers.length > 0 ||
this.statusFromGlobalRepository.quotes_count)
)
@ -489,13 +425,13 @@ const Status = {
return useMergedConfigStore().mergedConfig
},
isSuspendable() {
return !this.replying && this.mediaPlaying.length === 0
return !this.replying && this.mediaPlaying.size === 0
},
inThreadForest() {
return !!this.controlledThreadDisplayStatus
return !!this.threadDisplayStatus
},
threadShowing() {
return this.controlledThreadDisplayStatus === 'showing'
return this.threadDisplayStatus === 'showing'
},
visibilityLocalized() {
return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)
@ -566,15 +502,17 @@ const Status = {
clearError() {
this.error = undefined
},
toggleReplying() {
toggleReplyForm() {
if (this.replying) {
// This emits 'close-accepted' if successful
// which in turn callse closeReply()
this.$refs.postStatusForm.requestClose()
} else {
this.doToggleReplying()
this.replying = true
}
},
doToggleReplying() {
controlledOrUncontrolledToggle(this, 'replying')
closeReplyForm() {
this.replying = false
},
gotoOriginal(id) {
if (this.inConversation) {
@ -598,18 +536,10 @@ const Status = {
)
},
addMediaPlaying(id) {
controlledOrUncontrolledSet(
this,
'mediaPlaying',
this.mediaPlaying.concat(id),
)
this.mediaPlaying.add(id)
},
removeMediaPlaying(id) {
controlledOrUncontrolledSet(
this,
'mediaPlaying',
this.mediaPlaying.filter((mediaId) => mediaId !== id),
)
this.mediaPlaying.delete(id)
},
setHeadTailLinks(headTailLinks) {
this.headTailLinks = headTailLinks
@ -617,9 +547,9 @@ const Status = {
toggleThreadDisplay() {
this.controlledToggleThreadDisplay()
},
scrollIfHighlighted(highlightId) {
scrollIfFocused(focusedId) {
if (this.$el.getBoundingClientRect == null) return
const id = highlightId
const id = focusedId
if (this.status.id === id) {
const rect = this.$el.getBoundingClientRect()
if (rect.top < 100) {
@ -636,13 +566,13 @@ const Status = {
},
},
watch: {
highlight: function (id) {
this.scrollIfHighlighted(id)
focused: function (id) {
this.scrollIfFocused(id)
},
'status.repeat_num': function (num) {
// refetch repeats when repeat_num is changed in any way
if (
this.isFocused &&
this.focused &&
this.statusFromGlobalRepository.rebloggedBy &&
this.statusFromGlobalRepository.rebloggedBy.length !== num
) {
@ -652,15 +582,15 @@ const Status = {
'status.fave_num': function (num) {
// refetch favs when fave_num is changed in any way
if (
this.isFocused &&
this.focused &&
this.statusFromGlobalRepository.favoritedBy &&
this.statusFromGlobalRepository.favoritedBy.length !== num
) {
this.$store.dispatch('fetchFavs', this.status.id)
}
},
isSuspendable: function (val) {
this.suspendable = val
isSuspendable: function (suspend) {
this.$emit('suspendableStateChange', { id: this.statusoid.id, suspend })
},
},
}

29
src/components/status/status.vue
View file

@ -3,7 +3,7 @@
v-if="!hideStatus"
ref="root"
class="Status"
:class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]"
:class="[{ '-focused': focused }, { '-conversation': inlineExpanded }]"
>
<div
v-if="error"
@ -236,10 +236,10 @@
/>
</button>
<button
v-if="dive && !simpleTree"
v-if="canDive && !simpleTree"
class="button-unstyled"
:title="$t('status.show_only_conversation_under_this')"
@click.prevent="dive"
@click.prevent="$emit('dive')"
>
<FAIcon
fixed-width
@ -409,15 +409,8 @@
<StatusContent
ref="content"
:status="status"
:no-heading="noHeading"
:highlight="highlight"
:focused="isFocused"
:controlled-showing-tall="controlledShowingTall"
:controlled-expanding-subject="controlledExpandingSubject"
:controlled-showing-long-subject="controlledShowingLongSubject"
:controlled-toggle-showing-tall="controlledToggleShowingTall"
:controlled-toggle-expanding-subject="controlledToggleExpandingSubject"
:controlled-toggle-showing-long-subject="controlledToggleShowingLongSubject"
:focused="focused"
:in-conversation="inConversation"
@mediaplay="addMediaPlaying($event)"
@mediapause="removeMediaPlaying($event)"
@parse-ready="setHeadTailLinks"
@ -438,7 +431,7 @@
v-if="showOtherRepliesAsButton && replies.length > 1"
class="button-unstyled -link"
:title="$t('status.ancestor_follow', { numReplies: replies.length - 1 }, replies.length - 1)"
@click.prevent="dive"
@click.prevent="$emit('dive')"
>
{{ $t('status.replies_list_with_others', { numReplies: replies.length - 1 }, replies.length - 1) }}
</button>
@ -513,7 +506,7 @@
</transition>
<EmojiReactions
v-if="(mergedConfig.emojiReactionsOnTimeline || isFocused) && (!noHeading && !isPreview)"
v-if="(mergedConfig.emojiReactionsOnTimeline || focused) && (!noHeading && !isPreview)"
:status="status"
/>
@ -521,7 +514,7 @@
v-if="!noHeading && !isPreview"
:status="status"
:replying="replying"
@toggle-replying="toggleReplying"
@toggle-replying="toggleReplyForm"
/>
</div>
</div>
@ -555,9 +548,9 @@
:replied-user="status.user"
:copy-message-scope="status.visibility"
:subject="replySubject"
@posted="doToggleReplying"
@draft-done="doToggleReplying"
@can-close="doToggleReplying"
@posted="closeReplyForm"
@draft-done="closeReplyForm"
@close-accepted="closeReplyForm"
/>
</div>
</template>

10
src/components/status_action_buttons/action_button.js
View file

@ -1,6 +1,5 @@
import { defineAsyncComponent } from 'vue'
import Popover from 'src/components/popover/popover.vue'
import StatusBookmarkFolderMenu from 'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
import EmojiPicker from '../emoji_picker/emoji_picker.vue'
import { useInstanceStore } from 'src/stores/instance.js'
@ -72,12 +71,7 @@ export default {
'outerClose',
],
components: {
StatusBookmarkFolderMenu: defineAsyncComponent(
() =>
import(
'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
),
),
StatusBookmarkFolderMenu,
EmojiPicker,
Popover,
},

93
src/components/status_body/status_body.js
View file

@ -15,32 +15,47 @@ library.add(faFile, faMusic, faImage, faLink, faPollH)
const StatusBody = {
name: 'StatusBody',
props: [
'compact',
'collapse', // replaces newlines with spaces
'status',
'focused',
'noHeading',
'fullContent',
'singleLine',
'showingTall',
'expandingSubject',
'showingLongSubject',
'toggleShowingTall',
'toggleExpandingSubject',
'toggleShowingLongSubject',
],
props: {
status: {
// Main thing
type: Object,
required: true,
},
compact: {
// Resizes emoji and minimizes vertical space used
// Primarily used for showing status in react notifications
type: Boolean,
default: false,
},
collapse: {
// replaces newlines with spaces
type: Boolean,
default: false,
},
singleLine: {
// Show entire thing (subject and content) in a single line
// Primarily used in chats
type: Boolean,
default: false,
},
inConversation: {
// Is status rendered within open conversation?
// Used to automatically expand subjects (if collapsed)
type: Boolean,
default: false,
},
},
data() {
return {
postLength: this.status.text.length,
parseReadyDone: false,
showingTall: false,
showingLongSubject: false,
expandingSubject: null,
}
},
emits: ['parseReady'],
computed: {
localCollapseSubjectDefault() {
return this.mergedConfig.collapseMessageWithSubject
},
allowNonSquareEmoji() {
return this.mergedConfig.nonSquareEmoji
},
@ -51,32 +66,35 @@ const StatusBody = {
//
// Using max-height + overflow: auto for status components resulted in false positives
// very often with japanese characters, and it was very annoying.
tallStatus() {
hasLongSubject() {
return this.status.summary.length > 240
},
hasSubject() {
return !!this.status.summary
},
// When a status has a subject and is also tall, we should only have one show more/less
// button. If the default is to collapse statuses with subjects, we just treat it like
// a status with a subject; otherwise, we just treat it like a tall status.
mightHideBecauseSubject() {
return (
!this.inConversation &&
this.hasSubject &&
this.mergedConfig.collapseMessageWithSubject
)
},
mightHideBecauseTall() {
if (this.singleLine || this.compact) return false
const lengthScore =
this.status.raw_html.split(/<p|<br/).length + this.postLength / 80
return lengthScore > 20
},
longSubject() {
return this.status.summary.length > 240
},
// When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status.
mightHideBecauseSubject() {
return !!this.status.summary && this.localCollapseSubjectDefault
},
mightHideBecauseTall() {
return (
this.tallStatus &&
!(this.status.summary && this.localCollapseSubjectDefault)
)
},
hideSubjectStatus() {
return this.mightHideBecauseSubject && !this.expandingSubject
},
hideTallStatus() {
return this.mightHideBecauseTall && !this.showingTall
},
shouldShowToggle() {
shouldShowExpandToggle() {
return this.mightHideBecauseSubject || this.mightHideBecauseTall
},
toggleButtonClasses() {
@ -97,6 +115,11 @@ const StatusBody = {
: this.$t('general.show_more')
}
},
shouldHide() {
return (
!this.showingMore && this.mightHideBecauseSubject && this.hasSubject
)
},
showingMore() {
return (
(this.mightHideBecauseTall && this.showingTall) ||
@ -147,9 +170,9 @@ const StatusBody = {
},
toggleShowMore() {
if (this.mightHideBecauseTall) {
this.toggleShowingTall()
this.showingTall = !this.showingTall
} else if (this.mightHideBecauseSubject) {
this.toggleExpandingSubject()
this.expandingSubject = !this.expandingSubject
}
},
generateTagLink(tag) {

24
src/components/status_body/status_body.scss
View file

@ -53,6 +53,7 @@
}
.text-wrapper {
position: relative;
text-overflow: ellipsis;
overflow-wrap: break-word;
overflow: hidden;
@ -60,10 +61,12 @@
flex-flow: column nowrap;
&.-tall-status {
position: relative;
height: 16em;
z-index: 1;
&:not(.-hidden) {
height: 16em;
}
.media-body {
min-height: 0;
mask:
@ -98,6 +101,7 @@
text-wrap: pretty;
width: 100%;
text-align: center;
margin: 0.1em 0;
}
.status-unhider {
@ -107,17 +111,17 @@
padding-bottom: 1em;
}
.tall-status-hider {
position: absolute;
height: 5em;
margin-top: 10em;
line-height: 8em;
z-index: 2;
}
.tall-subject-hider {
// position: absolute;
padding-bottom: 0.5em;
&:not(.cw-status-hider) {
position: absolute;
margin-top: 10em;
height: 5em;
line-height: 8em;
z-index: 2;
}
}
& .status-unhider,

15
src/components/status_body/status_body.vue
View file

@ -5,9 +5,9 @@
>
<div class="body">
<div
v-if="status.summary_raw_html"
v-if="hasSubject"
class="summary-wrapper"
:class="{ '-tall': (longSubject && !showingLongSubject) }"
:class="{ '-tall': (hasLongSubject && !showingLongSubject) }"
>
<RichContent
class="media-body summary"
@ -18,14 +18,14 @@
:allow-non-square-emoji="allowNonSquareEmoji"
/>
<button
v-show="longSubject && showingLongSubject"
v-show="hasLongSubject && showingLongSubject"
class="button-unstyled -link tall-subject-hider"
@click.prevent="toggleShowingLongSubject"
>
{{ $t("status.hide_full_subject") }}
</button>
<button
v-show="longSubject && !showingLongSubject"
v-show="hasLongSubject && !showingLongSubject"
class="button-unstyled -link tall-subject-hider"
@click.prevent="toggleShowingLongSubject"
>
@ -34,10 +34,10 @@
</div>
<div
class="text-wrapper"
:class="{'-tall-status': hideTallStatus, '-expanded': showingMore}"
:class="{'-tall-status': hideTallStatus, '-hidden': shouldHide, '-expanded': showingMore}"
>
<RichContent
v-if="!hideSubjectStatus && !(singleLine && status.summary_raw_html)"
v-if="!(singleLine && hasSubject) && !shouldHide"
:class="{ '-single-line': singleLine }"
class="text media-body"
:html="status.raw_html"
@ -52,12 +52,11 @@
@parse-ready="onParseReady"
/>
<div
v-show="shouldShowToggle"
v-show="shouldShowExpandToggle"
:class="toggleButtonClasses"
>
<button
class="btn button-default toggle-button"
:class="{ '-focused': focused }"
:aria-expanded="showingMore"
@click.prevent="toggleShowMore"
>

115
src/components/status_content/status_content.js
View file

@ -22,69 +22,40 @@ import {
library.add(faCircleNotch, faFile, faMusic, faImage, faLink, faPollH)
const camelCase = (name) => name.charAt(0).toUpperCase() + name.slice(1)
const controlledOrUncontrolledGetters = (list) =>
list.reduce((res, name) => {
const camelized = camelCase(name)
const toggle = `controlledToggle${camelized}`
const controlledName = `controlled${camelized}`
const uncontrolledName = `uncontrolled${camelized}`
res[name] = function () {
return (this.$data[toggle] !== undefined ||
this.$props[toggle] !== undefined) &&
this[toggle]
? this[controlledName]
: this[uncontrolledName]
}
return res
}, {})
const controlledOrUncontrolledToggle = (obj, name) => {
const camelized = camelCase(name)
const toggle = `controlledToggle${camelized}`
const uncontrolledName = `uncontrolled${camelized}`
if (obj[toggle]) {
obj[toggle]()
} else {
obj[uncontrolledName] = !obj[uncontrolledName]
}
}
const StatusContent = {
name: 'StatusContent',
props: [
'status',
'compact',
'collapse',
'focused',
'noHeading',
'fullContent',
'singleLine',
'controlledShowingTall',
'controlledExpandingSubject',
'controlledToggleShowingTall',
'controlledToggleExpandingSubject',
'controlledShowingLongSubject',
'controlledToggleShowingLongSubject',
],
emits: ['parseReady', 'mediaplay', 'mediapause'],
data() {
return {
uncontrolledShowingTall:
this.fullContent || (this.inConversation && this.focused),
uncontrolledShowingLongSubject: false,
// not as computed because it sets the initial state which will be changed later
uncontrolledExpandingSubject:
!useMergedConfigStore().mergedConfig.collapseMessageWithSubject,
}
props: {
status: {
// Main thing
type: Object,
required: true,
},
compact: {
// Resizes emoji and minimizes vertical space used
// Primarily used for showing status in react notifications
type: Boolean,
default: false,
},
collapse: {
// replaces newlines with spaces
type: Boolean,
default: false,
},
singleLine: {
// Show entire thing (subject and content) in a single line
// Primarily used in chats
type: Boolean,
default: false,
},
inConversation: {
// Whether status content is being shown in an (open) conversation
// Used to control whether to display attachments or not
type: Boolean,
default: false,
},
},
emits: ['parseReady', 'mediaplay', 'mediapause'],
computed: {
...controlledOrUncontrolledGetters([
'showingTall',
'expandingSubject',
'showingLongSubject',
]),
statusCard() {
if (!this.status.card) return null
return this.status.card.url === this.status.quote_url
@ -93,22 +64,11 @@ const StatusContent = {
},
hideAttachments() {
return (
(this.mergedConfig.hideAttachments && !this.inConversation) ||
(this.mergedConfig.hideAttachmentsInConv && this.inConversation)
!this.fullContent &&
((this.mergedConfig.hideAttachments && !this.inConversation) ||
(this.mergedConfig.hideAttachmentsInConv && this.inConversation))
)
},
nsfwClickthrough() {
if (!this.status.nsfw) {
return false
}
if (this.status.summary && this.localCollapseSubjectDefault) {
return false
}
return true
},
localCollapseSubjectDefault() {
return this.mergedConfig.collapseMessageWithSubject
},
attachmentSize() {
if (this.compact) {
return 'small'
@ -137,15 +97,6 @@ const StatusContent = {
StatusBody,
},
methods: {
toggleShowingTall() {
controlledOrUncontrolledToggle(this, 'showingTall')
},
toggleExpandingSubject() {
controlledOrUncontrolledToggle(this, 'expandingSubject')
},
toggleShowingLongSubject() {
controlledOrUncontrolledToggle(this, 'showingLongSubject')
},
setMedia() {
const attachments =
this.attachmentSize === 'hide'

19
src/components/status_content/status_content.vue
View file

@ -8,13 +8,8 @@
:status="status"
:compact="compact"
:single-line="singleLine"
:showing-tall="showingTall"
:expanding-subject="expandingSubject"
:showing-long-subject="showingLongSubject"
:toggle-showing-tall="toggleShowingTall"
:toggle-expanding-subject="toggleExpandingSubject"
:toggle-showing-long-subject="toggleShowingLongSubject"
:collapse="collapse"
:in-conversation="inConversation"
@parse-ready="$emit('parseReady', $event)"
>
<div v-if="status.poll && status.poll.options && !compact">
@ -38,22 +33,22 @@
v-if="status.attachments.length !== 0"
class="attachments media-body"
:compact="compact"
:nsfw="nsfwClickthrough"
:nsfw="status.nsfw"
:attachments="status.attachments"
:limit="compact ? 1 : 0"
:size="attachmentSize"
@play="$emit('mediaplay', attachment.id)"
@pause="$emit('mediapause', attachment.id)"
@play="$emit('mediaplay')"
@pause="$emit('mediapause')"
/>
<div
v-if="statusCard && !noHeading && !compact"
v-if="statusCard && !compact"
class="link-preview media-body"
>
<link-preview
<LinkPreview
:card="status.card"
:size="attachmentSize"
:nsfw="nsfwClickthrough"
:nsfw="status.nsfw"
/>
</div>
</StatusBody>

11
src/components/still-image/still-image-emoji-popover.js
View file

@ -45,12 +45,7 @@ export default {
shortcode: this.shortcode,
filename: '',
})
.then((resp) => resp.json())
.then((resp) => {
if (resp.error !== undefined) {
this.displayError(resp.error)
return
}
.then(({ data: resp }) => {
useInterfaceStore().pushGlobalNotice({
messageKey: 'admin_dash.emoji.copied_successfully',
messageArgs: [this.shortcode, this.packName],
@ -60,6 +55,10 @@ export default {
this.$refs.emojiPopover.hidePopover()
this.packName = ''
})
.catch((e) => {
this.displayError(e)
return
})
},
fetchEmojiPacksIfAdmin() {

42
src/components/thread_tree/thread_tree.js
View file

@ -19,37 +19,19 @@ const ThreadTree = {
pinnedStatusIdsObject: Object,
profileUserId: String,
isFocusedFunction: Function,
highlight: String,
focused: String,
getReplies: Function,
setHighlight: Function,
toggleExpanded: Function,
simple: Boolean,
// to control display of the whole thread forest
toggleThreadDisplay: Function,
canDive: Boolean,
threadDisplayStatus: Object,
showThreadRecursively: Function,
totalReplyCount: Object,
totalReplyDepth: Object,
statusContentProperties: Object,
setStatusContentProperty: Function,
toggleStatusContentProperty: Function,
dive: Function,
},
emits: ['suspendableStateChange', 'goto', 'dive'],
computed: {
suspendable() {
const selfSuspendable = this.$refs.statusComponent
? this.$refs.statusComponent.suspendable
: true
if (this.$refs.childComponent) {
return (
selfSuspendable &&
this.$refs.childComponent.every((s) => s.suspendable)
)
}
return selfSuspendable
},
reverseLookupTable() {
return this.conversation.reduce(
(table, status, index) => {
@ -69,29 +51,11 @@ const ThreadTree = {
threadShowing() {
return this.threadDisplayStatus[this.status.id] === 'showing'
},
currentProp() {
return this.statusContentProperties[this.status.id]
},
},
methods: {
statusById(id) {
return this.conversation[this.reverseLookupTable[id]]
},
collapseThread() {
/* no-op */
},
showThread() {
/* no-op */
},
showAllSubthreads() {
/* no-op */
},
toggleCurrentProp(name) {
this.toggleStatusContentProperty(this.status.id, name)
},
setCurrentProp(name) {
this.setStatusContentProperty(this.status.id, name)
},
},
}

49
src/components/thread_tree/thread_tree.vue
View file

@ -1,44 +1,33 @@
<template>
<article class="thread-tree">
<status
<Status
:key="status.id"
ref="statusComponent"
:inline-expanded="collapsable && isExpanded"
:statusoid="status"
:replies="getReplies(status.id)"
:inline-expanded="collapsable && isExpanded"
:expandable="!isExpanded"
:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
:focused="isFocusedFunction(status.id)"
:in-conversation="isExpanded"
:highlight="highlight"
:replies="getReplies(status.id)"
:focused="focused === status.id || focused === status.retweeted_status?.id"
:in-profile="inProfile"
:profile-user-id="profileUserId"
class="conversation-status conversation-status-treeview status-fadein panel-body"
:simple-tree="simple"
:controlled-thread-display-status="threadDisplayStatus[status.id]"
:controlled-toggle-thread-display="() => toggleThreadDisplay(status.id)"
:thread-display-status="threadDisplayStatus[status.id]"
:can-dive="canDive"
:controlled-showing-tall="currentProp.showingTall"
:controlled-expanding-subject="currentProp.expandingSubject"
:controlled-showing-long-subject="currentProp.showingLongSubject"
:controlled-replying="currentProp.replying"
:controlled-media-playing="currentProp.mediaPlaying"
:controlled-toggle-showing-tall="() => toggleCurrentProp('showingTall')"
:controlled-toggle-expanding-subject="() => toggleCurrentProp('expandingSubject')"
:controlled-toggle-showing-long-subject="() => toggleCurrentProp('showingLongSubject')"
:controlled-toggle-replying="() => toggleCurrentProp('replying')"
:controlled-set-media-playing="(newVal) => setCurrentProp('mediaPlaying', newVal)"
:dive="dive ? () => dive(status.id) : undefined"
@goto="setHighlight"
@dive="$emit('dive', status.id)"
@goto="$emit('goto', status.id)"
@toggle-expanded="toggleExpanded"
@suspendable-state-change="e => $emit('suspendableStateChange', e)"
/>
<div
v-if="currentReplies.length && threadShowing"
v-if="currentReplies.length > 0 && threadShowing"
class="thread-tree-replies"
>
<thread-tree
<ThreadTree
v-for="replyStatus in currentReplies"
:key="replyStatus.id"
ref="childComponent"
@ -52,22 +41,20 @@
:pinned-status-ids-object="pinnedStatusIdsObject"
:profile-user-id="profileUserId"
:is-focused-function="isFocusedFunction"
:get-replies="getReplies"
:highlight="highlight"
:set-highlight="setHighlight"
:focused="focused"
:toggle-expanded="toggleExpanded"
:simple="simple"
:toggle-thread-display="toggleThreadDisplay"
:thread-display-status="threadDisplayStatus"
:show-thread-recursively="showThreadRecursively"
:total-reply-count="totalReplyCount"
:total-reply-depth="totalReplyDepth"
:status-content-properties="statusContentProperties"
:set-status-content-property="setStatusContentProperty"
:toggle-status-content-property="toggleStatusContentProperty"
:dive="dive"
:can-dive="canDive"
@goto="(e) => $emit('goto', e)"
@dive="(e) => $emit('dive', e)"
@suspendable-state-change="e => $emit('suspendableStateChange', e)"
/>
</div>
<div
@ -80,7 +67,7 @@
tag="button"
keypath="status.thread_follow_with_icon"
class="button-unstyled -link thread-tree-show-replies-button"
@click.prevent="dive(status.id)"
@click.prevent="$emit('dive', status.id)"
>
<template #icon>
<FAIcon

8
src/components/timeline/timeline.vue
View file

@ -71,27 +71,27 @@
class="timeline"
role="feed"
>
<conversation
<Conversation
v-for="statusId in filteredPinnedStatusIds"
:key="statusId + '-pinned'"
role="listitem"
class="status-fadein"
:status-id="statusId"
:collapsable="true"
:pinned-status-ids-object="pinnedStatusIdsObject"
:in-profile="inProfile"
:profile-user-id="userId"
collapsable
/>
<conversation
<Conversation
v-for="status in filteredVisibleStatuses"
:key="status.id"
role="listitem"
class="status-fadein"
:status-id="status.id"
:collapsable="true"
:in-profile="inProfile"
:profile-user-id="userId"
:virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.includes(status.id)"
collapsable
/>
</div>
</div>

5
src/components/user_card/user_card.js
View file

@ -11,6 +11,7 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
import ColorInput from 'src/components/color_input/color_input.vue'
import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
import suggestor from 'src/components/emoji_input/suggestor.js'
import FollowButton from 'src/components/follow_button/follow_button.vue'
import ProgressButton from 'src/components/progress_button/progress_button.vue'
import Select from 'src/components/select/select.vue'
import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
@ -138,9 +139,7 @@ export default {
() => import('src/components/account_actions/account_actions.vue'),
),
ProgressButton,
FollowButton: defineAsyncComponent(
() => import('src/components/follow_button/follow_button.vue'),
),
FollowButton,
Select,
UserLink,
UserNote: defineAsyncComponent(

6
src/components/user_panel/user_panel.js
View file

@ -1,6 +1,6 @@
import { defineAsyncComponent } from 'vue'
import { mapState } from 'vuex'
import AuthForm from 'src/components/auth_form/auth_form.js'
import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
import UserCard from 'src/components/user_card/user_card.vue'
@ -12,11 +12,9 @@ const UserPanel = {
...mapState({ user: (state) => state.users.currentUser }),
},
components: {
AuthForm: defineAsyncComponent(
() => import('src/components/auth_form/auth_form.js'),
),
PostStatusForm,
UserCard,
AuthForm,
},
}

2
src/components/user_panel/user_panel.vue
View file

@ -11,7 +11,7 @@
/>
<PostStatusForm />
</div>
<auth-form
<AuthForm
v-else
key="user-panel"
/>

32
src/i18n/en.json
View file

@ -90,7 +90,11 @@
"loading": "Loading…",
"generic_error": "An error occured",
"generic_error_message": "An error occured: {0}",
"generic_error_details": "Technical info:",
"error_retry": "Please try again",
"refresh_required": "Refresh required",
"refresh_required_content": "Failed to load UI code. Most likely frontend was updated on server, you'll need to refresh the page.",
"refresh_required_refresh": "Refresh page",
"retry": "Try again",
"optional": "optional",
"show_more": "Show more",
@ -1476,10 +1480,36 @@
"description": "Number of retries for making a connection CONFIRM"
}
},
":hackney_pools": {
":rich_media": {
"label": "Rich media",
"description": "idk",
":max_connections": {
"label": "Max connections",
"description": "Number workers in the pool."
},
":timeout": {
"label": "Timeout",
"description": "Timeout while `hackney` will wait for response."
}
}
},
":pools": {
":rich_media": {
"label": "Rich media",
"description": "idk"
"description": "idk",
":size": {
"label": "Size",
"description": "Maximum number of concurrent requests in the pool."
},
":max_waiting": {
"label": "Max waiting",
"description": "Maximum number of requests waiting for other requests to finish. After this number is reached, the pool will start returning errors when a new request is made"
},
":recv_timeout": {
"label": "Recv timeout",
"description": "Timeout for the pool while gun will wait for response"
}
}
},
":rate_limit": {

2
src/modules/api.js
View file

@ -302,7 +302,7 @@ const api = {
// Follow requests
startFetchingFollowRequests(store) {
if (store.state.fetchers.followRequests) return
const fetcher = followRequestFetcher.startFetchingFollowRequests({
const fetcher = followRequestFetcher.startFetching({
store,
credentials: useOAuthStore().token,
})

6
src/modules/statuses.js
View file

@ -883,9 +883,13 @@ const statuses = {
'addNewUsers',
data.statuses.map((s) => s.user).filter((u) => u),
)
data.statuses = store.commit('addNewStatuses', {
store.commit('addNewStatuses', {
statuses: data.statuses,
})
data.statuses = data.statuses.map(
(s) => store.state.allStatusesObject[s.id],
)
return data
})
},

25
src/services/style_setter/style_setter.js
View file

@ -8,6 +8,7 @@ import { getEngineChecksum, init } from '../theme_data/theme_data_3.service.js'
import { useMergedConfigStore } from 'src/stores/merged_config.js'
import { useSyncConfigStore } from 'src/stores/sync_config.js'
import { promisedRequest } from 'src/api/helpers.js'
import { ROOT_CONFIG } from 'src/modules/default_config_state.js'
// On platforms where this is not supported, it will return undefined
@ -300,7 +301,7 @@ export const applyStyleConfig = (input) => {
adoptStyleSheets()
}
export const getResourcesIndex = async (url, parser = JSON.parse) => {
export const getResourcesIndex = async (url, parser = (x) => x) => {
const cache = 'no-store'
const customUrl = url.replace(/\.(\w+)$/, '.custom.$1')
let builtin
@ -314,10 +315,11 @@ export const getResourcesIndex = async (url, parser = JSON.parse) => {
return [
k,
() =>
window
.fetch(v, { cache })
.then((data) => data.text())
.then((text) => parser(text))
promisedRequest({
url: v,
cache,
})
.then(({ data: text }) => parser(text))
.catch((e) => {
console.error(e)
return null
@ -331,18 +333,19 @@ export const getResourcesIndex = async (url, parser = JSON.parse) => {
}
try {
const builtinData = await window.fetch(url, { cache })
const builtinResources = await builtinData.json()
builtin = resourceTransform(builtinResources)
const { data: builtinData } = await promisedRequest({ url, cache })
builtin = resourceTransform(builtinData)
} catch {
builtin = []
console.warn(`Builtin resources at ${url} unavailable`)
}
try {
const customData = await window.fetch(customUrl, { cache })
const customResources = await customData.json()
custom = resourceTransform(customResources)
const { data: customData } = await promisedRequest({
url: customUrl,
cache,
})
custom = resourceTransform(customData)
} catch {
custom = []
console.warn(`Custom resources at ${customUrl} unavailable`)

29
src/stores/interface.js
View file

@ -58,6 +58,7 @@ export const useInterfaceStore = defineStore('interface', {
},
layoutType: 'normal',
globalNotices: [],
globalError: null,
layoutHeight: 0,
lastTimeline: null,
foreignProfileBackground: null,
@ -176,11 +177,35 @@ export const useInterfaceStore = defineStore('interface', {
removeGlobalNotice(notice) {
this.globalNotices = this.globalNotices.filter((n) => n !== notice)
},
setGlobalError({ error, instance, info }) {
console.log(info)
switch (info) {
case 'https://vuejs.org/error-reference/#runtime-13': {
this.globalError = {
title: 'general.refresh_required',
content: 'general.refresh_required_content',
// `true` disables cache on Firefox (non-standard)
recover: () => window.location.reload(true),
recoverText: 'general.refresh_required_refresh',
error,
}
break
}
default: {
this.globalError = { error }
break
}
}
console.log(this.globalError)
},
clearGlobalError() {
this.globalError = null
},
pushGlobalNotice({
messageKey,
messageArgs = {},
level = 'error',
timeout = 0,
timeout = 5000,
}) {
const notice = {
messageKey,
@ -193,7 +218,7 @@ export const useInterfaceStore = defineStore('interface', {
// Adding a new element to array wraps it in a Proxy, which breaks the comparison
// TODO: Generate UUID or something instead or relying on !== operator?
const newNotice = this.globalNotices[this.globalNotices.length - 1]
if (timeout) {
if (timeout > 0) {
setTimeout(() => this.removeGlobalNotice(newNotice), timeout)
}

1
src/sw.js
View file

@ -1,5 +1,6 @@
/* eslint-env serviceworker */
// biome-ignore: side effect import of assets list
import 'virtual:pleroma-fe/service_worker_env'
import { createI18n } from 'vue-i18n'

8
test/unit/specs/components/draft.spec.js
View file

@ -100,7 +100,7 @@ describe('Draft saving', () => {
await textarea.setValue('mew mew')
wrapper.vm.requestClose()
expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
await waitForEvent(wrapper, 'can-close')
await waitForEvent(wrapper, 'close-accepted')
})
it('should save when close if auto-save is off, and unsavedPostAction is save', async () => {
@ -122,7 +122,7 @@ describe('Draft saving', () => {
await textarea.setValue('mew mew')
wrapper.vm.requestClose()
expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
await waitForEvent(wrapper, 'can-close')
await waitForEvent(wrapper, 'close-accepted')
})
it('should discard when close if auto-save is off, and unsavedPostAction is discard', async () => {
@ -143,7 +143,7 @@ describe('Draft saving', () => {
const textarea = wrapper.get('textarea')
await textarea.setValue('mew mew')
wrapper.vm.requestClose()
await waitForEvent(wrapper, 'can-close')
await waitForEvent(wrapper, 'close-accepted')
expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
})
@ -180,6 +180,6 @@ describe('Draft saving', () => {
console.info('clicked')
expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
await flushPromises()
await waitForEvent(wrapper, 'can-close')
await waitForEvent(wrapper, 'close-accepted')
})
})

2
tools/e2e/run.sh
View file

@ -5,7 +5,7 @@ set -u
COMPOSE_FILE="docker-compose.e2e.yml"
: "${COMPOSE_MENU:=false}"
: "${PLEROMA_IMAGE:=git.pleroma.social:5050/pleroma/pleroma:stable}"
: "${PLEROMA_IMAGE:=git.pleroma.social/pleroma/pleroma:stable}"
: "${E2E_ADMIN_USERNAME:=admin}"
: "${E2E_ADMIN_PASSWORD:=adminadmin}"
: "${E2E_ADMIN_EMAIL:=admin@example.com}"