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

minor fixes & refactoring

Browse source
This commit is contained in:
Henry Jameson 2026-01-27 22:58:20 +02:00
commit ed9e9a3877
9 changed files with 286 additions and 294 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/chat_message/chat_message.js
View file

@ -86,7 +86,7 @@ const ChatMessage = {
}
},
...mapGetters(['findUser']),
...mapState(useSyncConfigStore, ['mergedConfig']),
...mapPiniaState(useSyncConfigStore, ['mergedConfig']),
},
data() {
return {

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

@ -79,37 +79,12 @@ const conversation = {
}
},
computed: {
maxDepthToShowByDefault() {
// maxDepthInThread = max number of depths that is *visible*
// since our depth starts with 0 and "showing" means "showing children"
// there is a -2 here
const maxDepth = useSyncConfigStore().mergedConfig.maxDepthInThread - 2
return maxDepth >= 1 ? maxDepth : 1
},
streamingEnabled() {
return (
useSyncConfigStore().mergedConfig.useStreamingApi &&
this.mastoUserSocketStatus === WSConnectionStatus.JOINED
)
},
displayStyle() {
return useSyncConfigStore().mergedConfig.conversationDisplay
},
isTreeView() {
return !this.isLinearView
},
treeViewIsSimple() {
return !useSyncConfigStore().mergedConfig.conversationTreeAdvanced
},
isLinearView() {
return this.displayStyle === 'linear'
},
shouldFadeAncestors() {
return useSyncConfigStore().mergedConfig.conversationTreeFadeAncestors
},
otherRepliesButtonPosition() {
return useSyncConfigStore().mergedConfig.conversationOtherRepliesButton
},
showOtherRepliesButtonBelowStatus() {
return this.otherRepliesButtonPosition === 'below'
},
@ -394,7 +369,28 @@ const conversation = {
maybeHighlight() {
return this.isExpanded ? this.highlight : null
},
...mapState(useSyncConfigStore, ['mergedConfig']),
...mapPiniaState(useSyncConfigStore, ['mergedConfig']),
...mapPiniaState(useSyncConfigStore, {
maxDepthToShowByDefault: (store) => {
// maxDepthInThread = max number of depths that is *visible*
// since our depth starts with 0 and "showing" means "showing children"
// there is a -2 here
const maxDepth = store.mergedConfig.maxDepthInThread - 2
return maxDepth >= 1 ? maxDepth : 1
},
streamingEnabled: (store) => {
return (
store.mergedConfig.useStreamingApi &&
this.mastoUserSocketStatus === WSConnectionStatus.JOINED
)
},
displayStyle: (store) => store.mergedConfig.conversationDisplay,
treeViewIsSimple: (store) => !store.mergedConfig.conversationTreeAdvanced,
shouldFadeAncestors: (store) =>
store.mergedConfig.conversationTreeFadeAncestors,
otherRepliesButtonPosition: (store) =>
store.mergedConfig.conversationOtherRepliesButton,
}),
...mapState({
mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
}),

3
src/components/settings_modal/tabs/style_tab/style_tab.js
View file

@ -24,7 +24,8 @@ import StringSetting from '../../helpers/string_setting.vue'
import Preview from '../old_theme_tab/theme_preview.vue'
import VirtualDirectivesTab from './virtual_directives_tab.vue'
import { useInterfaceStore, useSyncConfigStore } from 'src/stores/interface'
import { useInterfaceStore } from 'src/stores/interface'
import { useSyncConfigStore } from 'src/stores/sync_config'
import {
getContrastRatio,

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

@ -0,0 +1,127 @@
import Popover from 'components/popover/popover.vue'
import SelectComponent from 'components/select/select.vue'
import { assign } from 'lodash'
import StillImage from './still-image.vue'
import { useInstanceStore } from 'src/stores/instance.js'
import { useInterfaceStore } from 'src/stores/interface'
export default {
components: { StillImage, Popover, SelectComponent },
props: {
shortcode: {
type: String,
required: true,
},
isLocal: {
type: Boolean,
required: true,
},
},
data() {
return {
knownLocalPacks: {},
packName: '',
}
},
computed: {
isUserAdmin() {
return this.$store.state.users.currentUser.rights.admin
},
},
methods: {
displayError(msg) {
useInterfaceStore().pushGlobalNotice({
messageKey: 'admin_dash.emoji.error',
messageArgs: [msg],
level: 'error',
})
},
copyToLocalPack() {
this.$store.state.api.backendInteractor
.addNewEmojiFile({
packName: this.packName,
file: this.$attrs.src,
shortcode: this.shortcode,
filename: '',
})
.then((resp) => resp.json())
.then((resp) => {
if (resp.error !== undefined) {
this.displayError(resp.error)
return
}
useInterfaceStore().pushGlobalNotice({
messageKey: 'admin_dash.emoji.copied_successfully',
messageArgs: [this.shortcode, this.packName],
level: 'success',
})
this.$refs.emojiPopover.hidePopover()
this.packName = ''
})
},
// Copied from emoji_tab.js
loadPacksPaginated(listFunction) {
const pageSize = 25
const allPacks = {}
return listFunction({
instance: useInstanceStore().server,
page: 1,
pageSize: 0,
})
.then((data) => data.json())
.then((data) => {
if (data.error !== undefined) {
return Promise.reject(data.error)
}
let resultingPromise = Promise.resolve({})
for (let i = 0; i < Math.ceil(data.count / pageSize); i++) {
resultingPromise = resultingPromise
.then(() =>
listFunction({
instance: useInstanceStore().server,
page: i,
pageSize,
}),
)
.then((data) => data.json())
.then((pageData) => {
if (pageData.error !== undefined) {
return Promise.reject(pageData.error)
}
assign(allPacks, pageData.packs)
})
}
return resultingPromise
})
.then(() => allPacks)
.catch((data) => {
this.displayError(data)
})
},
fetchEmojiPacksIfAdmin() {
if (!this.isUserAdmin) return
this.loadPacksPaginated(
this.$store.state.api.backendInteractor.listEmojiPacks,
).then((allPacks) => {
// Sort by key
const sorted = Object.keys(allPacks)
.sort()
.reduce((acc, key) => {
if (key.length === 0) return acc
acc[key] = allPacks[key]
return acc
}, {})
this.knownLocalPacks = sorted
})
},
},
}

130
src/components/still-image/still-image-emoji-popover.vue
View file

@ -55,135 +55,7 @@
</Popover>
</template>
<script>
import Popover from 'components/popover/popover.vue'
import SelectComponent from 'components/select/select.vue'
import { assign } from 'lodash'
import StillImage from './still-image.vue'
import { useInstanceStore } from 'src/stores/instance.js'
import { useInterfaceStore } from 'src/stores/interface'
export default {
components: { StillImage, Popover, SelectComponent },
props: {
shortcode: {
type: String,
required: true,
},
isLocal: {
type: Boolean,
required: true,
},
},
data() {
return {
knownLocalPacks: {},
packName: '',
}
},
computed: {
isUserAdmin() {
return this.$store.state.users.currentUser.rights.admin
},
},
methods: {
displayError(msg) {
useInterfaceStore().pushGlobalNotice({
messageKey: 'admin_dash.emoji.error',
messageArgs: [msg],
level: 'error',
})
},
copyToLocalPack() {
this.$store.state.api.backendInteractor
.addNewEmojiFile({
packName: this.packName,
file: this.$attrs.src,
shortcode: this.shortcode,
filename: '',
})
.then((resp) => resp.json())
.then((resp) => {
if (resp.error !== undefined) {
this.displayError(resp.error)
return
}
useInterfaceStore().pushGlobalNotice({
messageKey: 'admin_dash.emoji.copied_successfully',
messageArgs: [this.shortcode, this.packName],
level: 'success',
})
this.$refs.emojiPopover.hidePopover()
this.packName = ''
})
},
// Copied from emoji_tab.js
loadPacksPaginated(listFunction) {
const pageSize = 25
const allPacks = {}
return listFunction({
instance: useInstanceStore().server,
page: 1,
pageSize: 0,
})
.then((data) => data.json())
.then((data) => {
if (data.error !== undefined) {
return Promise.reject(data.error)
}
let resultingPromise = Promise.resolve({})
for (let i = 0; i < Math.ceil(data.count / pageSize); i++) {
resultingPromise = resultingPromise
.then(() =>
listFunction({
instance: useInstanceStore().server,
page: i,
pageSize,
}),
)
.then((data) => data.json())
.then((pageData) => {
if (pageData.error !== undefined) {
return Promise.reject(pageData.error)
}
assign(allPacks, pageData.packs)
})
}
return resultingPromise
})
.then(() => allPacks)
.catch((data) => {
this.displayError(data)
})
},
fetchEmojiPacksIfAdmin() {
if (!this.isUserAdmin) return
this.loadPacksPaginated(
this.$store.state.api.backendInteractor.listEmojiPacks,
).then((allPacks) => {
// Sort by key
const sorted = Object.keys(allPacks)
.sort()
.reduce((acc, key) => {
if (key.length === 0) return acc
acc[key] = allPacks[key]
return acc
}, {})
this.knownLocalPacks = sorted
})
},
},
}
</script>
<script src="./still-image-emoji-popover.js" />
<style>
.emoji-popover {

129
src/components/timeago/timeago.js Normal file
View file

@ -0,0 +1,129 @@
import { useSyncConfigStore } from 'src/stores/sync_config.js'
import * as DateUtils from 'src/services/date_utils/date_utils.js'
import localeService from 'src/services/locale/locale.service.js'
export default {
name: 'Timeago',
props: ['time', 'autoUpdate', 'longFormat', 'nowThreshold', 'templateKey'],
data() {
return {
relativeTimeMs: 0,
relativeTime: { key: 'time.now', num: 0 },
interval: null,
}
},
computed: {
shouldUseAbsoluteTimeFormat() {
if (!useSyncConfigStore().mergedConfig.useAbsoluteTimeFormat) {
return false
}
return (
DateUtils.durationStrToMs(
useSyncConfigStore().mergedConfig.absoluteTimeFormatMinAge,
) <= this.relativeTimeMs
)
},
time12hFormat() {
return useSyncConfigStore().mergedConfig.absoluteTimeFormat12h === '12h'
},
browserLocale() {
return localeService.internalToBrowserLocale(this.$i18n.locale)
},
timeAsDate() {
return typeof this.time === 'string'
? new Date(Date.parse(this.time))
: this.time
},
localeDateString() {
return this.timeAsDate.toLocaleString(this.browserLocale)
},
relativeTimeString() {
const timeString = this.$i18n.t(
this.relativeTime.key,
[this.relativeTime.num],
this.relativeTime.num,
)
if (
typeof this.templateKey === 'string' &&
this.relativeTime.key !== 'time.now'
) {
return this.$i18n.t(this.templateKey, [timeString])
}
return timeString
},
absoluteTimeString() {
if (this.longFormat) {
return this.localeDateString
}
const now = new Date()
const formatter = (() => {
if (DateUtils.isSameDay(this.timeAsDate, now)) {
return new Intl.DateTimeFormat(this.browserLocale, {
minute: 'numeric',
hour: 'numeric',
hour12: this.time12hFormat,
})
} else if (DateUtils.isSameMonth(this.timeAsDate, now)) {
return new Intl.DateTimeFormat(this.browserLocale, {
month: 'short',
day: 'numeric',
hour12: this.time12hFormat,
})
} else if (DateUtils.isSameYear(this.timeAsDate, now)) {
return new Intl.DateTimeFormat(this.browserLocale, {
month: 'short',
day: 'numeric',
hour12: this.time12hFormat,
})
} else {
return new Intl.DateTimeFormat(this.browserLocale, {
year: 'numeric',
month: 'short',
hour12: this.time12hFormat,
})
}
})()
return formatter.format(this.timeAsDate)
},
relativeOrAbsoluteTimeString() {
return this.shouldUseAbsoluteTimeFormat
? this.absoluteTimeString
: this.relativeTimeString
},
},
watch: {
time(newVal, oldVal) {
if (oldVal !== newVal) {
clearTimeout(this.interval)
this.refreshRelativeTimeObject()
}
},
},
created() {
this.refreshRelativeTimeObject()
},
unmounted() {
clearTimeout(this.interval)
},
methods: {
refreshRelativeTimeObject() {
const nowThreshold =
typeof this.nowThreshold === 'number' ? this.nowThreshold : 1
this.relativeTimeMs = DateUtils.relativeTimeMs(this.time)
this.relativeTime = this.longFormat
? DateUtils.relativeTime(this.time, nowThreshold)
: DateUtils.relativeTimeShort(this.time, nowThreshold)
if (this.autoUpdate) {
this.interval = setTimeout(
this.refreshRelativeTimeObject,
1000 * this.autoUpdate,
)
}
},
},
}

132
src/components/timeago/timeago.vue
View file

@ -7,134 +7,4 @@
</time>
</template>
<script>
import { useSyncConfigStore } from 'src/stores/sync_config.js'
import * as DateUtils from 'src/services/date_utils/date_utils.js'
import localeService from 'src/services/locale/locale.service.js'
export default {
name: 'Timeago',
props: ['time', 'autoUpdate', 'longFormat', 'nowThreshold', 'templateKey'],
data() {
return {
relativeTimeMs: 0,
relativeTime: { key: 'time.now', num: 0 },
interval: null,
}
},
computed: {
shouldUseAbsoluteTimeFormat() {
if (!useSyncConfigStore().mergedConfig.useAbsoluteTimeFormat) {
return false
}
return (
DateUtils.durationStrToMs(
useSyncConfigStore().mergedConfig.absoluteTimeFormatMinAge,
) <= this.relativeTimeMs
)
},
time12hFormat() {
return useSyncConfigStore().mergedConfig.absoluteTimeFormat12h === '12h'
},
browserLocale() {
return localeService.internalToBrowserLocale(this.$i18n.locale)
},
timeAsDate() {
return typeof this.time === 'string'
? new Date(Date.parse(this.time))
: this.time
},
localeDateString() {
return this.timeAsDate.toLocaleString(this.browserLocale)
},
relativeTimeString() {
const timeString = this.$i18n.t(
this.relativeTime.key,
[this.relativeTime.num],
this.relativeTime.num,
)
if (
typeof this.templateKey === 'string' &&
this.relativeTime.key !== 'time.now'
) {
return this.$i18n.t(this.templateKey, [timeString])
}
return timeString
},
absoluteTimeString() {
if (this.longFormat) {
return this.localeDateString
}
const now = new Date()
const formatter = (() => {
if (DateUtils.isSameDay(this.timeAsDate, now)) {
return new Intl.DateTimeFormat(this.browserLocale, {
minute: 'numeric',
hour: 'numeric',
hour12: this.time12hFormat,
})
} else if (DateUtils.isSameMonth(this.timeAsDate, now)) {
return new Intl.DateTimeFormat(this.browserLocale, {
month: 'short',
day: 'numeric',
hour12: this.time12hFormat,
})
} else if (DateUtils.isSameYear(this.timeAsDate, now)) {
return new Intl.DateTimeFormat(this.browserLocale, {
month: 'short',
day: 'numeric',
hour12: this.time12hFormat,
})
} else {
return new Intl.DateTimeFormat(this.browserLocale, {
year: 'numeric',
month: 'short',
hour12: this.time12hFormat,
})
}
})()
return formatter.format(this.timeAsDate)
},
relativeOrAbsoluteTimeString() {
return this.shouldUseAbsoluteTimeFormat
? this.absoluteTimeString
: this.relativeTimeString
},
},
watch: {
time(newVal, oldVal) {
if (oldVal !== newVal) {
clearTimeout(this.interval)
this.refreshRelativeTimeObject()
}
},
},
created() {
this.refreshRelativeTimeObject()
},
unmounted() {
clearTimeout(this.interval)
},
methods: {
refreshRelativeTimeObject() {
const nowThreshold =
typeof this.nowThreshold === 'number' ? this.nowThreshold : 1
this.relativeTimeMs = DateUtils.relativeTimeMs(this.time)
this.relativeTime = this.longFormat
? DateUtils.relativeTime(this.time, nowThreshold)
: DateUtils.relativeTimeShort(this.time, nowThreshold)
if (this.autoUpdate) {
this.interval = setTimeout(
this.refreshRelativeTimeObject,
1000 * this.autoUpdate,
)
}
},
},
}
</script>
<script src="./timeago.js" />

5
src/modules/users.js
View file

@ -551,7 +551,7 @@ const users = {
},
registerPushNotifications(store) {
const token = store.state.currentUser.credentials
const vapidPublicKey = store.rootState.instance.vapidPublicKey
const vapidPublicKey = useInstanceStore().vapidPublicKey
const isEnabled = store.rootState.config.webPushNotifications
const notificationVisibility =
store.rootState.config.notificationVisibility
@ -648,7 +648,6 @@ const users = {
logout(store) {
const oauth = useOAuthStore()
const { instance } = store.rootState
// NOTE: No need to verify the app still exists, because if it doesn't,
// the token will be invalid too
@ -657,7 +656,7 @@ const users = {
.then((app) => {
const params = {
app,
instance: instance.server,
instance: useInstanceStore().server,
token: oauth.userToken,
}

4
src/stores/oauth.js
View file

@ -1,4 +1,5 @@
import { defineStore } from 'pinia'
import { useInstanceStore } from 'src/stores/instance.js'
import {
@ -59,7 +60,6 @@ export const useOAuthStore = defineStore('oauth', {
this.userToken = false
},
async createApp() {
const { state } = window.vuex
const instance = useInstanceStore().server
const app = await createApp(instance)
this.setClientData(app)
@ -79,7 +79,6 @@ export const useOAuthStore = defineStore('oauth', {
}
},
async getAppToken() {
const { state } = window.vuex
const instance = useInstanceStore().server
const res = await getClientToken({
clientId: this.clientId,
@ -92,7 +91,6 @@ export const useOAuthStore = defineStore('oauth', {
/// Use this if you want to ensure the app is still valid to use.
/// @return {string} The access token to the app (not attached to any user)
async ensureAppToken() {
const { state } = window.vuex
if (this.appToken) {
try {
await verifyAppToken({