diff options
Diffstat (limited to 'packages/frontend/src/pages')
18 files changed, 828 insertions, 388 deletions
diff --git a/packages/frontend/src/pages/admin-user.vue b/packages/frontend/src/pages/admin-user.vue index d3c0de3040..dc29ae2f80 100644 --- a/packages/frontend/src/pages/admin-user.vue +++ b/packages/frontend/src/pages/admin-user.vue @@ -4,11 +4,11 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"> - <div class="_spacer" style="--MI_SPACER-w: 600px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;"> - <FormSuspense :p="init"> +<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :spacer="true" style="--MI_SPACER-w: 700px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;"> + <FormSuspense v-if="init" :p="init"> + <div v-if="user && info"> <div v-if="tab === 'overview'" class="_gaps"> - <div v-if="user" class="aeakzknw"> + <div class="aeakzknw"> <MkAvatar class="avatar" :user="user" indicator link preview/> <div class="body"> <span class="name"><MkUserName class="name" :user="user"/></span> @@ -20,19 +20,14 @@ SPDX-License-Identifier: AGPL-3.0-only <span class="_monospace">{{ user.id }}</span> <button v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copyToClipboard(user.id)"><i class="ti ti-copy"></i></button> </span> - <span class="state"> - <span v-if="!approved" class="silenced">{{ i18n.ts.notApproved }}</span> - <span v-if="approved && !user.host" class="moderator">{{ i18n.ts.approved }}</span> - <span v-if="suspended" class="suspended">{{ i18n.ts.suspended }}</span> - <span v-if="silenced" class="silenced">{{ i18n.ts.silenced }}</span> - <span v-if="moderator" class="moderator">{{ i18n.ts.moderator }}</span> - </span> </div> </div> + <SkBadgeStrip v-if="badges.length > 0" :badges="badges"></SkBadgeStrip> + <MkInfo v-if="isSystem">{{ i18n.ts.isSystemAccount }}</MkInfo> - <MkFolder v-if="!isSystem"> + <MkFolder v-if="!isSystem" :sticky="false"> <template #icon><i class="ph-list-bullets ph-bold ph-lg"></i></template> <template #label>{{ i18n.ts.details }}</template> <div style="display: flex; flex-direction: column; gap: 1em;"> @@ -89,7 +84,7 @@ SPDX-License-Identifier: AGPL-3.0-only </div> </MkFolder> - <MkFolder v-if="info"> + <MkFolder v-if="info" :sticky="false"> <template #icon><i class="ph-scroll ph-bold ph-lg"></i></template> <template #label>{{ i18n.ts._role.policies }}</template> <div class="_gaps"> @@ -99,7 +94,7 @@ SPDX-License-Identifier: AGPL-3.0-only </div> </MkFolder> - <MkFolder v-if="iAmAdmin && ips && ips.length > 0"> + <MkFolder v-if="iAmAdmin && ips && ips.length > 0" :sticky="false"> <template #icon><i class="ph-network ph-bold ph-lg"></i></template> <template #label>{{ i18n.ts.ip }}</template> <MkInfo>{{ i18n.ts.ipTip }}</MkInfo> @@ -109,7 +104,7 @@ SPDX-License-Identifier: AGPL-3.0-only </div> </MkFolder> - <MkFolder v-if="iAmModerator" :defaultOpen="moderationNote.length > 0"> + <MkFolder v-if="iAmModerator" :defaultOpen="moderationNote.length > 0" :sticky="false"> <template #icon><i class="ph-stamp ph-bold ph-lg"></i></template> <template #label>{{ i18n.ts.moderationNote }}</template> <MkTextarea v-model="moderationNote" manualSave @update:modelValue="onModerationNoteChanged"> @@ -135,6 +130,11 @@ SPDX-License-Identifier: AGPL-3.0-only </div> </FormSection> + <FormSection v-else-if="info.signupReason"> + <template #label>{{ i18n.ts.signupReason }}</template> + {{ info.signupReason }} + </FormSection> + <FormSection v-if="!isSystem && user && iAmModerator"> <div class="_gaps"> <MkSwitch v-model="silenced" @update:modelValue="toggleSilence">{{ i18n.ts.silence }}</MkSwitch> @@ -233,14 +233,46 @@ SPDX-License-Identifier: AGPL-3.0-only </div> <div v-else-if="tab === 'raw'" class="_gaps_m"> - <MkObjectView v-if="info && $i.isAdmin" tall :value="info"> - </MkObjectView> + <MkFolder :sticky="false" :defaultOpen="true"> + <template #icon><i class="ph-user-circle ph-bold ph-lg"></i></template> + <template #label>{{ i18n.ts.user }}</template> + <template #header> + <div :class="$style.rawFolderHeader"> + <span>{{ i18n.ts.rawUserDescription }}</span> + <button class="_textButton" @click="copyToClipboard(JSON.stringify(user, null, 4))"><i class="ti ti-copy"></i> {{ i18n.ts.copy }}</button> + </div> + </template> + + <MkObjectView tall :value="user"/> + </MkFolder> - <MkObjectView tall :value="user"> - </MkObjectView> + <MkFolder :sticky="false"> + <template #icon><i class="ti ti-info-circle"></i></template> + <template #label>{{ i18n.ts.details }}</template> + <template #header> + <div :class="$style.rawFolderHeader"> + <span>{{ i18n.ts.rawInfoDescription }}</span> + <button class="_textButton" @click="copyToClipboard(JSON.stringify(info, null, 4))"><i class="ti ti-copy"></i> {{ i18n.ts.copy }}</button> + </div> + </template> + + <MkObjectView tall :value="info"/> + </MkFolder> + + <MkFolder v-if="ap" :sticky="false"> + <template #icon><i class="ph-globe ph-bold ph-lg"></i></template> + <template #label>{{ i18n.ts.activityPub }}</template> + <template #header> + <div :class="$style.rawFolderHeader"> + <span>{{ i18n.ts.rawApDescription }}</span> + <button class="_textButton" @click="copyToClipboard(JSON.stringify(ap, null, 4))"><i class="ti ti-copy"></i> {{ i18n.ts.copy }}</button> + </div> + </template> + <MkObjectView tall :value="ap"/> + </MkFolder> </div> - </FormSuspense> - </div> + </div> + </FormSuspense> </PageWithHeader> </template> @@ -248,6 +280,8 @@ SPDX-License-Identifier: AGPL-3.0-only import { computed, defineAsyncComponent, watch, ref } from 'vue'; import * as Misskey from 'misskey-js'; import { url } from '@@/js/config.js'; +import type { Badge } from '@/components/SkBadgeStrip.vue'; +import type { ChartSrc } from '@/components/MkChart.vue'; import MkChart from '@/components/MkChart.vue'; import MkObjectView from '@/components/MkObjectView.vue'; import MkTextarea from '@/components/MkTextarea.vue'; @@ -272,16 +306,25 @@ import MkPagination from '@/components/MkPagination.vue'; import MkInput from '@/components/MkInput.vue'; import MkNumber from '@/components/MkNumber.vue'; import { copyToClipboard } from '@/utility/copy-to-clipboard'; +import SkBadgeStrip from '@/components/SkBadgeStrip.vue'; const props = withDefaults(defineProps<{ userId: string; initialTab?: string; + userHint?: Misskey.entities.UserDetailed; + infoHint?: Misskey.entities.AdminShowUserResponse; + ipsHint?: Misskey.entities.AdminGetUserIpsResponse; + apHint?: Misskey.entities.ApGetResponse; }>(), { initialTab: 'overview', + userHint: undefined, + infoHint: undefined, + ipsHint: undefined, + apHint: undefined, }); const tab = ref(props.initialTab); -const chartSrc = ref('per-user-notes'); +const chartSrc = ref<ChartSrc>('per-user-notes'); const user = ref<null | Misskey.entities.UserDetailed>(); const init = ref<ReturnType<typeof createFetcher>>(); const info = ref<Misskey.entities.AdminShowUserResponse | null>(null); @@ -304,6 +347,98 @@ const filesPagination = { })), }; +const badges = computed(() => { + const arr: Badge[] = []; + if (info.value && user.value) { + if (info.value.isSuspended) { + arr.push({ + key: 'suspended', + label: i18n.ts.suspended, + style: 'error', + }); + } + + if (info.value.isSilenced) { + arr.push({ + key: 'silenced', + label: i18n.ts.silenced, + style: 'warning', + }); + } + + if (info.value.alwaysMarkNsfw) { + arr.push({ + key: 'nsfw', + label: i18n.ts.nsfw, + style: 'warning', + }); + } + + if (user.value.mandatoryCW) { + arr.push({ + key: 'cw', + label: i18n.ts.cw, + style: 'warning', + }); + } + + if (info.value.isHibernated) { + arr.push({ + key: 'hibernated', + label: i18n.ts.hibernated, + style: 'neutral', + }); + } + + if (info.value.isAdministrator) { + arr.push({ + key: 'admin', + label: i18n.ts.administrator, + style: 'success', + }); + } else if (info.value.isModerator) { + arr.push({ + key: 'mod', + label: i18n.ts.moderator, + style: 'success', + }); + } + + if (user.value.host == null) { + if (info.value.email) { + if (info.value.emailVerified) { + arr.push({ + key: 'verified', + label: i18n.ts.verified, + style: 'success', + }); + } else { + arr.push({ + key: 'not_verified', + label: i18n.ts.notVerified, + style: 'success', + }); + } + } + + if (info.value.approved) { + arr.push({ + key: 'approved', + label: i18n.ts.approved, + style: 'success', + }); + } else { + arr.push({ + key: 'not_approved', + label: i18n.ts.notApproved, + style: 'warning', + }); + } + } + } + return arr; +}); + const announcementsStatus = ref<'active' | 'archived'>('active'); const announcementsPagination = { @@ -314,47 +449,65 @@ const announcementsPagination = { status: announcementsStatus.value, })), }; -const expandedRoles = ref([]); +const expandedRoles = ref<string[]>([]); -function createFetcher() { - return () => Promise.all([misskeyApi('users/show', { - userId: props.userId, - }), misskeyApi('admin/show-user', { - userId: props.userId, - }), iAmAdmin ? misskeyApi('admin/get-user-ips', { - userId: props.userId, - }) : Promise.resolve(null)]).then(([_user, _info, _ips]) => { +function createFetcher(withHint = true) { + return () => Promise.all([ + (withHint && props.userHint) ? props.userHint : misskeyApi('users/show', { + userId: props.userId, + }), + (withHint && props.infoHint) ? props.infoHint : misskeyApi('admin/show-user', { + userId: props.userId, + }), + iAmAdmin + ? (withHint && props.ipsHint) ? props.ipsHint : misskeyApi('admin/get-user-ips', { + userId: props.userId, + }) + : null, + iAmAdmin + ? (withHint && props.apHint) ? props.apHint : misskeyApi('ap/get', { + userId: props.userId, + }).catch(() => null) : null], + ).then(async ([_user, _info, _ips, _ap]) => { user.value = _user; info.value = _info; ips.value = _ips; - moderator.value = info.value.isModerator; - silenced.value = info.value.isSilenced; - approved.value = info.value.approved; - markedAsNSFW.value = info.value.alwaysMarkNsfw; - suspended.value = info.value.isSuspended; - rejectQuotes.value = user.value.rejectQuotes ?? false; - moderationNote.value = info.value.moderationNote; - mandatoryCW.value = user.value.mandatoryCW; + ap.value = _ap; + moderator.value = _info.isModerator; + silenced.value = _info.isSilenced; + approved.value = _info.approved; + markedAsNSFW.value = _info.alwaysMarkNsfw; + suspended.value = _info.isSuspended; + rejectQuotes.value = _user.rejectQuotes ?? false; + moderationNote.value = _info.moderationNote; + mandatoryCW.value = _user.mandatoryCW; }); } -function refreshUser() { - init.value = createFetcher(); +async function refreshUser() { + // Not a typo - createFetcher() returns a function() + await createFetcher(false)(); } -async function onMandatoryCWChanged(value: string) { - await os.apiWithDialog('admin/cw-user', { userId: props.userId, cw: value }); - refreshUser(); +async function onMandatoryCWChanged(value: string | number) { + await os.promiseDialog(async () => { + await misskeyApi('admin/cw-user', { userId: props.userId, cw: String(value) }); + await refreshUser(); + }); } async function onModerationNoteChanged(value: string) { - await misskeyApi('admin/update-user-note', { userId: props.userId, text: value }); - refreshUser(); + await os.promiseDialog(async () => { + await misskeyApi('admin/update-user-note', { userId: props.userId, text: value }); + await refreshUser(); + }); } async function updateRemoteUser() { - await os.apiWithDialog('federation/update-remote-user', { userId: user.value.id }); - refreshUser(); + await os.promiseDialog(async () => { + await misskeyApi('federation/update-remote-user', { userId: props.userId }); + await refreshUser(); + }); } async function resetPassword() { @@ -366,9 +519,9 @@ async function resetPassword() { return; } else { const { password } = await misskeyApi('admin/reset-password', { - userId: user.value.id, + userId: props.userId, }); - os.alert({ + await os.alert({ type: 'success', text: i18n.tsx.newPasswordIs({ password }), }); @@ -383,7 +536,7 @@ async function toggleNSFW(v) { if (confirm.canceled) { markedAsNSFW.value = !v; } else { - await misskeyApi(v ? 'admin/nsfw-user' : 'admin/unnsfw-user', { userId: user.value.id }); + await misskeyApi(v ? 'admin/nsfw-user' : 'admin/unnsfw-user', { userId: props.userId }); await refreshUser(); } } @@ -396,8 +549,10 @@ async function toggleSilence(v) { if (confirm.canceled) { silenced.value = !v; } else { - await misskeyApi(v ? 'admin/silence-user' : 'admin/unsilence-user', { userId: user.value.id }); - await refreshUser(); + await os.promiseDialog(async () => { + await misskeyApi(v ? 'admin/silence-user' : 'admin/unsilence-user', { userId: props.userId }); + await refreshUser(); + }); } } @@ -409,8 +564,10 @@ async function toggleSuspend(v) { if (confirm.canceled) { suspended.value = !v; } else { - await misskeyApi(v ? 'admin/suspend-user' : 'admin/unsuspend-user', { userId: user.value.id }); - await refreshUser(); + await os.promiseDialog(async () => { + await misskeyApi(v ? 'admin/suspend-user' : 'admin/unsuspend-user', { userId: props.userId }); + await refreshUser(); + }); } } @@ -422,11 +579,13 @@ async function toggleRejectQuotes(v: boolean): Promise<void> { if (confirm.canceled) { rejectQuotes.value = !v; } else { - await misskeyApi('admin/reject-quotes', { - userId: props.userId, - rejectQuotes: v, + await os.promiseDialog(async () => { + await misskeyApi('admin/reject-quotes', { + userId: props.userId, + rejectQuotes: v, + }); + await refreshUser(); }); - await refreshUser(); } } @@ -436,17 +595,10 @@ async function unsetUserAvatar() { text: i18n.ts.unsetUserAvatarConfirm, }); if (confirm.canceled) return; - const process = async () => { - await misskeyApi('admin/unset-user-avatar', { userId: user.value.id }); - os.success(); - }; - await process().catch(err => { - os.alert({ - type: 'error', - text: err.toString(), - }); + await os.promiseDialog(async () => { + await misskeyApi('admin/unset-user-avatar', { userId: props.userId }); + await refreshUser(); }); - refreshUser(); } async function unsetUserBanner() { @@ -455,17 +607,10 @@ async function unsetUserBanner() { text: i18n.ts.unsetUserBannerConfirm, }); if (confirm.canceled) return; - const process = async () => { - await misskeyApi('admin/unset-user-banner', { userId: user.value.id }); - os.success(); - }; - await process().catch(err => { - os.alert({ - type: 'error', - text: err.toString(), - }); + await os.promiseDialog(async () => { + await misskeyApi('admin/unset-user-banner', { userId: props.userId }); + await refreshUser(); }); - refreshUser(); } async function deleteAllFiles() { @@ -474,17 +619,10 @@ async function deleteAllFiles() { text: i18n.ts.deleteAllFilesConfirm, }); if (confirm.canceled) return; - const process = async () => { - await misskeyApi('admin/delete-all-files-of-a-user', { userId: user.value.id }); - os.success(); - }; - await process().catch(err => { - os.alert({ - type: 'error', - text: err.toString(), - }); + await os.promiseDialog(async () => { + await misskeyApi('admin/delete-all-files-of-a-user', { userId: props.userId }); + await refreshUser(); }); - await refreshUser(); } async function deleteAccount() { @@ -493,18 +631,19 @@ async function deleteAccount() { text: i18n.ts.deleteThisAccountConfirm, }); if (confirm.canceled) return; + if (!user.value) return; const typed = await os.inputText({ - text: i18n.tsx.typeToConfirm({ x: user.value?.username }), + text: i18n.tsx.typeToConfirm({ x: user.value.username }), }); if (typed.canceled) return; - if (typed.result === user.value?.username) { + if (typed.result === user.value.username) { await os.apiWithDialog('admin/delete-account', { - userId: user.value.id, + userId: props.userId, }); } else { - os.alert({ + await os.alert({ type: 'error', text: 'input not match', }); @@ -544,23 +683,27 @@ async function assignRole() { : period === 'oneMonth' ? Date.now() + (1000 * 60 * 60 * 24 * 30) : null; - await os.apiWithDialog('admin/roles/assign', { roleId, userId: user.value.id, expiresAt }); - refreshUser(); + await os.promiseDialog(async () => { + await misskeyApi('admin/roles/assign', { roleId, userId: props.userId, expiresAt }); + await refreshUser(); + }); } async function unassignRole(role, ev) { - os.popupMenu([{ + await os.popupMenu([{ text: i18n.ts.unassign, icon: 'ti ti-x', danger: true, action: async () => { - await os.apiWithDialog('admin/roles/unassign', { roleId: role.id, userId: user.value.id }); - refreshUser(); + await os.promiseDialog(async () => { + await misskeyApi('admin/roles/unassign', { roleId: role.id, userId: props.userId }); + await refreshUser(); + }); }, }], ev.currentTarget ?? ev.target); } -function toggleRoleItem(role) { +function toggleRoleItem(role: Misskey.entities.Role) { if (expandedRoles.value.includes(role.id)) { expandedRoles.value = expandedRoles.value.filter(x => x !== role.id); } else { @@ -569,6 +712,7 @@ function toggleRoleItem(role) { } function createAnnouncement() { + if (!user.value) return; const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUserAnnouncementEditDialog.vue')), { user: user.value, }, { @@ -577,6 +721,7 @@ function createAnnouncement() { } function editAnnouncement(announcement) { + if (!user.value) return; const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUserAnnouncementEditDialog.vue')), { user: user.value, announcement, @@ -591,14 +736,6 @@ watch(() => props.userId, () => { immediate: true, }); -watch(user, () => { - misskeyApi('ap/get', { - uri: user.value.uri ?? `${url}/users/${user.value.id}`, - }).then(res => { - ap.value = res; - }); -}); - const headerActions = computed(() => []); const headerTabs = computed(() => isSystem.value ? [{ @@ -782,6 +919,7 @@ definePage(() => ({ cursor: pointer; } +// Sync with instance-info.vue .buttonStrip { margin: calc(var(--MI-margin) / 2 * -1); @@ -789,4 +927,13 @@ definePage(() => ({ margin: calc(var(--MI-margin) / 2); } } + +.rawFolderHeader { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + padding: var(--MI-marginHalf); + gap: var(--MI-marginHalf); +} </style> diff --git a/packages/frontend/src/pages/admin/abuses.vue b/packages/frontend/src/pages/admin/abuses.vue index 4ec4372492..a2343d7e76 100644 --- a/packages/frontend/src/pages/admin/abuses.vue +++ b/packages/frontend/src/pages/admin/abuses.vue @@ -48,9 +48,9 @@ SPDX-License-Identifier: AGPL-3.0-only --> <MkPagination v-slot="{items}" ref="reports" :pagination="pagination" :displayLimit="50"> - <div class="_gaps"> - <XAbuseReport v-for="report in items" :key="report.id" :report="report" @resolved="resolved"/> - </div> + <SkDateSeparatedList v-slot="{ item: report }" :items="items"> + <XAbuseReport :report="report" :metaHint="metaHint" @resolved="resolved"/> + </SkDateSeparatedList> </MkPagination> </div> </div> @@ -59,6 +59,7 @@ SPDX-License-Identifier: AGPL-3.0-only <script lang="ts" setup> import { computed, useTemplateRef, ref } from 'vue'; +import * as Misskey from 'misskey-js'; import MkSelect from '@/components/MkSelect.vue'; import MkPagination from '@/components/MkPagination.vue'; import XAbuseReport from '@/components/MkAbuseReport.vue'; @@ -67,6 +68,9 @@ import { definePage } from '@/page.js'; import MkButton from '@/components/MkButton.vue'; import MkInfo from '@/components/MkInfo.vue'; import { store } from '@/store.js'; +import SkDateSeparatedList from '@/components/SkDateSeparatedList.vue'; +import { iAmAdmin } from '@/i'; +import { misskeyApi } from '@/utility/misskey-api'; const reports = useTemplateRef('reports'); @@ -76,6 +80,14 @@ const targetUserOrigin = ref('combined'); const searchUsername = ref(''); const searchHost = ref(''); +const metaHint = ref<Misskey.entities.AdminMetaResponse | undefined>(undefined); + +if (iAmAdmin) { + misskeyApi('admin/meta') + .then(meta => metaHint.value = meta) + .catch(err => console.error('[MkAbuseReport] Error fetching meta:', err)); +} + const pagination = { endpoint: 'admin/abuse-user-reports' as const, limit: 10, diff --git a/packages/frontend/src/pages/chat/XMessage.vue b/packages/frontend/src/pages/chat/XMessage.vue index 1a80f6fef1..b72583214b 100644 --- a/packages/frontend/src/pages/chat/XMessage.vue +++ b/packages/frontend/src/pages/chat/XMessage.vue @@ -14,6 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only ref="text" class="_selectable" :text="message.text" + :parsedNotes="parsed" :i="$i" :nyaize="'respect'" :enableEmojiMenu="true" @@ -21,19 +22,19 @@ SPDX-License-Identifier: AGPL-3.0-only /> <MkMediaList v-if="message.file" :mediaList="[message.file]" :class="$style.file"/> </MkFukidashi> - <MkUrlPreview v-for="url in urls" :key="url" :url="url" :showAsQuote="!message.fromUser.rejectQuotes" style="margin: 8px 0;"/> + <SkUrlPreviewGroup :sourceNodes="parsed" :showAsQuote="!message.fromUser.rejectQuotes" style="margin: 8px 0;"/> <div :class="$style.footer"> <button class="_textButton" style="color: currentColor;" @click="showMenu"><i class="ti ti-dots-circle-horizontal"></i></button> <MkTime :class="$style.time" :time="message.createdAt"/> <MkA v-if="isSearchResult && 'toRoom' in message && message.toRoom != null" :to="`/chat/room/${message.toRoomId}`">{{ message.toRoom.name }}</MkA> <MkA v-if="isSearchResult && 'toUser' in message && message.toUser != null && isMe" :to="`/chat/user/${message.toUserId}`">@{{ message.toUser.username }}</MkA> </div> - <TransitionGroup - :enterActiveClass="prefer.s.animation ? $style.transition_reaction_enterActive : ''" - :leaveActiveClass="prefer.s.animation ? $style.transition_reaction_leaveActive : ''" - :enterFromClass="prefer.s.animation ? $style.transition_reaction_enterFrom : ''" - :leaveToClass="prefer.s.animation ? $style.transition_reaction_leaveTo : ''" - :moveClass="prefer.s.animation ? $style.transition_reaction_move : ''" + <SkTransitionGroup + :enterActiveClass="$style.transition_reaction_enterActive" + :leaveActiveClass="$style.transition_reaction_leaveActive" + :enterFromClass="$style.transition_reaction_enterFrom" + :leaveToClass="$style.transition_reaction_leaveTo" + :moveClass="$style.transition_reaction_move" tag="div" :class="$style.reactions" > <div v-for="record in message.reactions" :key="record.reaction + record.user.id" :class="[$style.reaction, record.user.id === $i.id ? $style.reactionMy : null]" @click="onReactionClick(record)"> @@ -45,21 +46,19 @@ SPDX-License-Identifier: AGPL-3.0-only :class="$style.reactionIcon" /> </div> - </TransitionGroup> + </SkTransitionGroup> </div> </div> </template> <script lang="ts" setup> import { computed, defineAsyncComponent, provide } from 'vue'; -import * as mfm from '@transfem-org/sfm-js'; +import * as mfm from 'mfm-js'; import * as Misskey from 'misskey-js'; import { url } from '@@/js/config.js'; import { isLink } from '@@/js/is-link.js'; import type { MenuItem } from '@/types/menu.js'; import type { NormalizedChatMessage } from './room.vue'; -import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js'; -import MkUrlPreview from '@/components/MkUrlPreview.vue'; import { ensureSignin } from '@/i.js'; import { misskeyApi } from '@/utility/misskey-api.js'; import { i18n } from '@/i18n.js'; @@ -73,6 +72,8 @@ import MkReactionIcon from '@/components/MkReactionIcon.vue'; import { prefer } from '@/preferences.js'; import { DI } from '@/di.js'; import { getHTMLElementOrNull } from '@/utility/get-dom-node-or-null.js'; +import SkTransitionGroup from '@/components/SkTransitionGroup.vue'; +import SkUrlPreviewGroup from '@/components/SkUrlPreviewGroup.vue'; const $i = ensureSignin(); @@ -82,7 +83,7 @@ const props = defineProps<{ }>(); const isMe = computed(() => props.message.fromUserId === $i.id); -const urls = computed(() => props.message.text ? extractUrlFromMfm(mfm.parse(props.message.text)) : []); +const parsed = computed(() => props.message.text ? mfm.parse(props.message.text) : []); provide(DI.mfmEmojiReactCallback, (reaction) => { if ($i.policies.chatAvailability !== 'available') return; diff --git a/packages/frontend/src/pages/chat/room.vue b/packages/frontend/src/pages/chat/room.vue index 5afda5682f..6505e172dd 100644 --- a/packages/frontend/src/pages/chat/room.vue +++ b/packages/frontend/src/pages/chat/room.vue @@ -31,12 +31,12 @@ SPDX-License-Identifier: AGPL-3.0-only <MkButton :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMore">{{ i18n.ts.loadMore }}</MkButton> </div> - <TransitionGroup - :enterActiveClass="prefer.s.animation ? $style.transition_x_enterActive : ''" - :leaveActiveClass="prefer.s.animation ? $style.transition_x_leaveActive : ''" - :enterFromClass="prefer.s.animation ? $style.transition_x_enterFrom : ''" - :leaveToClass="prefer.s.animation ? $style.transition_x_leaveTo : ''" - :moveClass="prefer.s.animation ? $style.transition_x_move : ''" + <SkTransitionGroup + :enterActiveClass="$style.transition_x_enterActive" + :leaveActiveClass="$style.transition_x_leaveActive" + :enterFromClass="$style.transition_x_enterFrom" + :leaveToClass="$style.transition_x_leaveTo" + :moveClass="$style.transition_x_move" tag="div" class="_gaps" > <div v-for="item in timeline.toReversed()" :key="item.id"> @@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only <span>{{ item.prevText }} <i class="ti ti-chevron-down"></i></span> </div> </div> - </TransitionGroup> + </SkTransitionGroup> </div> <div v-if="user && (!user.canChat || user.host !== null)"> @@ -111,6 +111,7 @@ import { useRouter } from '@/router.js'; import { useMutationObserver } from '@/use/use-mutation-observer.js'; import MkInfo from '@/components/MkInfo.vue'; import { makeDateSeparatedTimelineComputedRef } from '@/utility/timeline-date-separate.js'; +import SkTransitionGroup from '@/components/SkTransitionGroup.vue'; const $i = ensureSignin(); const router = useRouter(); diff --git a/packages/frontend/src/pages/explore.featured.vue b/packages/frontend/src/pages/explore.featured.vue index a47e3efbc8..82badd40b3 100644 --- a/packages/frontend/src/pages/explore.featured.vue +++ b/packages/frontend/src/pages/explore.featured.vue @@ -10,27 +10,77 @@ SPDX-License-Identifier: AGPL-3.0-only <option value="polls">{{ i18n.ts.poll }}</option> </MkTab> <MkNotes v-if="tab === 'notes'" :pagination="paginationForNotes"/> - <MkNotes v-else-if="tab === 'polls'" :pagination="paginationForPolls"/> + <div v-else-if="tab === 'polls'"> + <template v-if="ltlAvailable || gtlAvailable"> + <MkFoldableSection v-if="ltlAvailable" class="_margin"> + <template #header><i class="ph-house ph-bold ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.tsx.pollsOnLocal({ name: instance.name ?? host }) }}</template> + <MkNotes :pagination="paginationForPollsLocal" :disableAutoLoad="true"/> + </MkFoldableSection> + + <MkFoldableSection v-if="gtlAvailable" class="_margin"> + <template #header><i class="ph-globe ph-bold ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.pollsOnRemote }}</template> + <MkNotes :pagination="paginationForPollsRemote" :disableAutoLoad="true"/> + </MkFoldableSection> + + <MkFoldableSection v-if="gtlAvailable" class="_margin"> + <template #header><i class="ph-timer ph-bold ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.pollsExpired }}</template> + <MkNotes :pagination="paginationForPollsExpired" :disableAutoLoad="true"/> + </MkFoldableSection> + </template> + <template v-else> + <div v-if="$i"><i class="ti ti-alert-triangle"></i>{{ i18n.ts.trendingPollsDisabled }}</div> + <div v-else><i class="ti ti-alert-triangle"></i>{{ i18n.ts.trendingPollsDisabledLogIn }}</div> + </template> + </div> </div> </template> <script lang="ts" setup> -import { ref } from 'vue'; +import { computed, ref } from 'vue'; +import { host } from '@@/js/config.js'; import MkNotes from '@/components/MkNotes.vue'; import MkTab from '@/components/MkTab.vue'; import { i18n } from '@/i18n.js'; +import MkFoldableSection from '@/components/MkFoldableSection.vue'; +import { instance } from '@/instance.js'; +import { $i } from '@/i'; + +const ltlAvailable = computed(() => $i?.policies.ltlAvailable ?? instance.policies.ltlAvailable); +const gtlAvailable = computed(() => $i?.policies.gtlAvailable ?? instance.policies.gtlAvailable); const paginationForNotes = { endpoint: 'notes/featured' as const, limit: 10, }; -const paginationForPolls = { +const paginationForPollsLocal = { + endpoint: 'notes/polls/recommendation' as const, + limit: 10, + offsetMode: true, + params: { + excludeChannels: true, + local: true, + }, +}; + +const paginationForPollsRemote = { + endpoint: 'notes/polls/recommendation' as const, + limit: 10, + offsetMode: true, + params: { + excludeChannels: true, + local: false, + }, +}; + +const paginationForPollsExpired = { endpoint: 'notes/polls/recommendation' as const, limit: 10, offsetMode: true, params: { excludeChannels: true, + local: null, + expired: true, }, }; diff --git a/packages/frontend/src/pages/favorites.vue b/packages/frontend/src/pages/favorites.vue index aa18f44e88..4f74467871 100644 --- a/packages/frontend/src/pages/favorites.vue +++ b/packages/frontend/src/pages/favorites.vue @@ -15,6 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <template #default="{ items }"> + <!-- TODO replace with SkDateSeparatedList when merged --> <MkDateSeparatedList v-slot="{ item }" :items="items" :direction="'down'" :noGap="false" :ad="false"> <DynamicNote :key="item.id" :note="item.note" :class="$style.note"/> </MkDateSeparatedList> diff --git a/packages/frontend/src/pages/instance-info.vue b/packages/frontend/src/pages/instance-info.vue index 479774faef..28fd593893 100644 --- a/packages/frontend/src/pages/instance-info.vue +++ b/packages/frontend/src/pages/instance-info.vue @@ -4,99 +4,131 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :swipable="true"> - <div v-if="instance" class="_spacer" style="--MI_SPACER-w: 600px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;"> - <MkSwiper v-model:tab="tab" :tabs="headerTabs"> - <div v-if="tab === 'overview'" class="_gaps_m"> +<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :spacer="true" style="--MI_SPACER-w: 700px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;"> + <div v-if="instance"> + <!-- This empty div is preserved to avoid merge conflicts --> + <div> + <div v-if="tab === 'overview'" class="_gaps"> <div class="fnfelxur"> - <img :src="faviconUrl" alt="" class="icon"/> - <span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span> - </div> - <div style="display: flex; flex-direction: column; gap: 1em;"> - <MkKeyValue :copy="host" oneline> - <template #key>Host</template> - <template #value><span class="_monospace"><MkLink :url="`https://${host}`">{{ host }}</MkLink></span></template> - </MkKeyValue> - <MkKeyValue oneline> - <template #key>{{ i18n.ts.software }}</template> - <template #value><span class="_monospace">{{ instance.softwareName || `(${i18n.ts.unknown})` }} / {{ instance.softwareVersion || `(${i18n.ts.unknown})` }}</span></template> - </MkKeyValue> - <MkKeyValue oneline> - <template #key>{{ i18n.ts.administrator }}</template> - <template #value>{{ instance.maintainerName || `(${i18n.ts.unknown})` }} ({{ instance.maintainerEmail || `(${i18n.ts.unknown})` }})</template> - </MkKeyValue> + <!-- TODO copy the alt text stuff from reports UI PR --> + <img v-if="faviconUrl" :src="faviconUrl" alt="" class="icon"/> + <div :class="$style.headerData"> + <span class="name">{{ instance.name || instance.host }}</span> + <span> + <span class="_monospace">{{ instance.host }}</span> + <button v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copyToClipboard(instance.host)"><i class="ti ti-copy"></i></button> + </span> + <span> + <span class="_monospace">{{ instance.id }}</span> + <button v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copyToClipboard(instance.id)"><i class="ti ti-copy"></i></button> + </span> + </div> </div> - <MkKeyValue> - <template #key>{{ i18n.ts.description }}</template> - <template #value>{{ instance.description }}</template> - </MkKeyValue> - <FormSection v-if="iAmModerator"> - <template #label>Moderation</template> - <div class="_gaps_s"> - <MkKeyValue> - <template #key> - {{ i18n.ts._delivery.status }} - </template> - <template #value> - {{ i18n.ts._delivery._type[suspensionState] }} - </template> + <SkBadgeStrip v-if="badges.length > 0" :badges="badges"></SkBadgeStrip> + + <MkFolder :sticky="false"> + <template #icon><i class="ph-list-bullets ph-bold ph-lg"></i></template> + <template #label>{{ i18n.ts.details }}</template> + <div style="display: flex; flex-direction: column; gap: 1em;"> + <MkKeyValue :copy="instance.id" oneline> + <template #key>{{ i18n.ts.id }}</template> + <template #value><span class="_monospace">{{ instance.id }}</span></template> </MkKeyValue> - <div class="_buttons"> - <MkButton inline :disabled="!instance" danger @click="deleteAllFiles">{{ i18n.ts.deleteAllFiles }}</MkButton> - <MkButton inline :disabled="!instance" danger @click="severAllFollowRelations">{{ i18n.ts.severAllFollowRelations }}</MkButton> - </div> + <MkKeyValue :copy="instance.name" oneline> + <template #key>{{ i18n.ts.name }}</template> + <template #value><span class="_monospace">{{ instance.name || `(${i18n.ts.unknown})` }}</span></template> + </MkKeyValue> + <MkKeyValue :copy="host" oneline> + <template #key>{{ i18n.ts.host }}</template> + <template #value><span class="_monospace"><MkLink :url="`https://${host}`">{{ host }}</MkLink></span></template> + </MkKeyValue> + <MkKeyValue :copy="instance.firstRetrievedAt" oneline> + <template #key>{{ i18n.ts.createdAt }}</template> + <template #value><span class="_monospace"><MkTime :time="instance.firstRetrievedAt" :mode="'detail'"/></span></template> + </MkKeyValue> + <MkKeyValue :copy="instance.infoUpdatedAt" oneline> + <template #key>{{ i18n.ts.updatedAt }}</template> + <template #value><span class="_monospace"><MkTime :time="instance.infoUpdatedAt" :mode="'detail'"/></span></template> + </MkKeyValue> + <MkKeyValue :copy="instance.latestRequestReceivedAt" oneline> + <template #key>{{ i18n.ts.lastActiveDate }}</template> + <template #value><span class="_monospace"><MkTime :time="instance.latestRequestReceivedAt" :mode="'detail'"/></span></template> + </MkKeyValue> + <MkKeyValue :copy="instance.softwareName" oneline> + <template #key>{{ i18n.ts.software }}</template> + <template #value><span class="_monospace">{{ instance.softwareName || `(${i18n.ts.unknown})` }} / {{ instance.softwareVersion || `(${i18n.ts.unknown})` }}</span></template> + </MkKeyValue> + <MkKeyValue :copy="instance.maintainerName" oneline> + <template #key>{{ i18n.ts.administrator }}</template> + <template #value><span class="_monospace">{{ instance.maintainerName || `(${i18n.ts.unknown})` }}</span></template> + </MkKeyValue> + <MkKeyValue :copy="instance.maintainerEmail" oneline> + <template #key>{{ i18n.ts.email }}</template> + <template #value><span class="_monospace">{{ instance.maintainerEmail || `(${i18n.ts.unknown})` }}</span></template> + </MkKeyValue> + <MkKeyValue oneline> + <template #key>{{ i18n.ts.followingPub }}</template> + <template #value><span class="_monospace"><MkNumber :value="instance.followingCount"/></span></template> + </MkKeyValue> + <MkKeyValue oneline> + <template #key>{{ i18n.ts.followersSub }}</template> + <template #value><span class="_monospace"><MkNumber :value="instance.followersCount"/></span></template> + </MkKeyValue> + <MkKeyValue oneline> + <template #key>{{ i18n.ts._delivery.status }}</template> + <template #value><span class="_monospace">{{ i18n.ts._delivery._type[suspensionState] }}</span></template> + </MkKeyValue> + </div> + </MkFolder> + + <MkFolder :sticky="false"> + <template #label>{{ i18n.ts.wellKnownResources }}</template> + <template #icon><i class="ph-network ph-bold ph-lg"></i></template> + <ul :class="$style.linksList" class="_gaps_s"> + <!-- TODO more links here --> + <li><MkLink :url="`https://${host}/.well-known/host-meta`" class="_monospace">/.well-known/host-meta</MkLink></li> + <li><MkLink :url="`https://${host}/.well-known/host-meta.json`" class="_monospace">/.well-known/host-meta.json</MkLink></li> + <li><MkLink :url="`https://${host}/.well-known/nodeinfo`" class="_monospace">/.well-known/nodeinfo</MkLink></li> + <li><MkLink :url="`https://${host}/robots.txt`" class="_monospace">/robots.txt</MkLink></li> + <li><MkLink :url="`https://${host}/manifest.json`" class="_monospace">/manifest.json</MkLink></li> + </ul> + </MkFolder> + + <MkFolder v-if="iAmModerator" :defaultOpen="moderationNote.length > 0" :sticky="false"> + <template #icon><i class="ph-stamp ph-bold ph-lg"></i></template> + <template #label>{{ i18n.ts.moderationNote }}</template> + <MkTextarea v-model="moderationNote" manualSave @update:modelValue="saveModerationNote"> + <template #label>{{ i18n.ts.moderationNote }}</template> + <template #caption>{{ i18n.ts.moderationNoteDescription }}</template> + </MkTextarea> + </MkFolder> + + <FormSection v-if="instance.description"> + <template #label>{{ i18n.ts.description }}</template> + {{ instance.description }} + </FormSection> + + <FormSection v-if="iAmModerator"> + <template #label>{{ i18n.ts.moderation }}</template> + <div class="_gaps"> + <MkInfo v-if="isBaseSilenced" warn>{{ i18n.ts.silencedByBase }}</MkInfo> + <MkSwitch v-model="isSilenced" :disabled="!meta || !instance || isBaseSilenced" @update:modelValue="toggleSilenced">{{ i18n.ts.silenceThisInstance }}</MkSwitch> <MkSwitch v-model="isSuspended" :disabled="!instance" @update:modelValue="toggleSuspended">{{ i18n.ts._delivery.stop }}</MkSwitch> <MkInfo v-if="isBaseBlocked" warn>{{ i18n.ts.blockedByBase }}</MkInfo> <MkSwitch v-model="isBlocked" :disabled="!meta || !instance || isBaseBlocked" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</MkSwitch> - <MkInfo v-if="isBaseSilenced" warn>{{ i18n.ts.silencedByBase }}</MkInfo> - <MkSwitch v-model="isSilenced" :disabled="!meta || !instance || isBaseSilenced" @update:modelValue="toggleSilenced">{{ i18n.ts.silenceThisInstance }}</MkSwitch> - <MkSwitch v-model="isNSFW" :disabled="!instance" @update:modelValue="toggleNSFW">{{ i18n.ts.markInstanceAsNSFW }}</MkSwitch> <MkSwitch v-model="rejectQuotes" :disabled="!instance" @update:modelValue="toggleRejectQuotes">{{ i18n.ts.rejectQuotesInstance }}</MkSwitch> + <MkSwitch v-model="isNSFW" :disabled="!instance" @update:modelValue="toggleNSFW">{{ i18n.ts.markInstanceAsNSFW }}</MkSwitch> <MkSwitch v-model="rejectReports" :disabled="!instance" @update:modelValue="toggleRejectReports">{{ i18n.ts.rejectReports }}</MkSwitch> <MkInfo v-if="isBaseMediaSilenced" warn>{{ i18n.ts.mediaSilencedByBase }}</MkInfo> <MkSwitch v-model="isMediaSilenced" :disabled="!meta || !instance || isBaseMediaSilenced" @update:modelValue="toggleMediaSilenced">{{ i18n.ts.mediaSilenceThisInstance }}</MkSwitch> - <MkButton @click="refreshMetadata"><i class="ti ti-refresh"></i> Refresh metadata</MkButton> - <MkTextarea v-model="moderationNote" manualSave> - <template #label>{{ i18n.ts.moderationNote }}</template> - <template #caption>{{ i18n.ts.moderationNoteDescription }}</template> - </MkTextarea> - </div> - </FormSection> - - <FormSection> - <MkKeyValue oneline style="margin: 1em 0;"> - <template #key>{{ i18n.ts.registeredAt }}</template> - <template #value><MkTime mode="detail" :time="instance.firstRetrievedAt"/></template> - </MkKeyValue> - <MkKeyValue oneline style="margin: 1em 0;"> - <template #key>{{ i18n.ts.updatedAt }}</template> - <template #value><MkTime mode="detail" :time="instance.infoUpdatedAt"/></template> - </MkKeyValue> - <MkKeyValue oneline style="margin: 1em 0;"> - <template #key>{{ i18n.ts.latestRequestReceivedAt }}</template> - <template #value><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></template> - </MkKeyValue> - </FormSection> - - <FormSection> - <MkKeyValue oneline style="margin: 1em 0;"> - <template #key>Following (Pub)</template> - <template #value>{{ number(instance.followingCount) }}</template> - </MkKeyValue> - <MkKeyValue oneline style="margin: 1em 0;"> - <template #key>Followers (Sub)</template> - <template #value>{{ number(instance.followersCount) }}</template> - </MkKeyValue> - </FormSection> - <FormSection> - <template #label>Well-known resources</template> - <FormLink :to="`https://${host}/.well-known/host-meta`" external style="margin-bottom: 8px;">host-meta</FormLink> - <FormLink :to="`https://${host}/.well-known/host-meta.json`" external style="margin-bottom: 8px;">host-meta.json</FormLink> - <FormLink :to="`https://${host}/.well-known/nodeinfo`" external style="margin-bottom: 8px;">nodeinfo</FormLink> - <FormLink :to="`https://${host}/robots.txt`" external style="margin-bottom: 8px;">robots.txt</FormLink> - <FormLink :to="`https://${host}/manifest.json`" external style="margin-bottom: 8px;">manifest.json</FormLink> + <div :class="$style.buttonStrip"> + <MkButton inline :disabled="!instance" @click="refreshMetadata"><i class="ph-cloud-arrow-down ph-bold ph-lg"></i> {{ i18n.ts.updateRemoteUser }}</MkButton> + <MkButton inline :disabled="!instance" danger @click="deleteAllFiles"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.deleteAllFiles }}</MkButton> + <MkButton inline :disabled="!instance" danger @click="severAllFollowRelations"><i class="ph-link-break ph-bold ph-lg"></i> {{ i18n.ts.severAllFollowRelations }}</MkButton> + </div> + </div> </FormSection> </div> <div v-else-if="tab === 'chart'" class="_gaps_m"> @@ -126,7 +158,7 @@ SPDX-License-Identifier: AGPL-3.0-only </div> <div v-else-if="tab === 'users'" class="_gaps_m"> <MkPagination v-slot="{items}" :pagination="usersPagination" style="display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); grid-gap: 12px;"> - <MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${dateString(user.updatedAt)}`" class="user" :to="`/admin/user/${user.id}`"> + <MkA v-for="user in items" :key="user.id" v-tooltip.mfm="i18n.tsx.lastPosted({ at: dateString(user.updatedAt) })" class="user" :to="`/admin/user/${user.id}`"> <MkUserCardMini :user="user"/> </MkA> </MkPagination> @@ -135,11 +167,11 @@ SPDX-License-Identifier: AGPL-3.0-only <MkPagination v-slot="{items}" :pagination="followingPagination"> <div class="follow-relations-list"> <div v-for="followRelationship in items" :key="followRelationship.id" class="follow-relation"> - <MkA v-tooltip.mfm="`Last posted: ${dateString(followRelationship.followee.updatedAt)}`" :to="`/admin/user/${followRelationship.followee.id}`" class="user"> + <MkA v-tooltip.mfm="i18n.tsx.lastPosted({ at: dateString(followRelationship.followee.updatedAt) })" :to="`/admin/user/${followRelationship.followee.id}`" class="user"> <MkUserCardMini :user="followRelationship.followee" :withChart="false"/> </MkA> <span class="arrow">→</span> - <MkA v-tooltip.mfm="`Last posted: ${dateString(followRelationship.follower.updatedAt)}`" :to="`/admin/user/${followRelationship.follower.id}`" class="user"> + <MkA v-tooltip.mfm="i18n.tsx.lastPosted({ at: dateString(followRelationship.follower.updatedAt) })" :to="`/admin/user/${followRelationship.follower.id}`" class="user"> <MkUserCardMini :user="followRelationship.follower" :withChart="false"/> </MkA> </div> @@ -150,11 +182,11 @@ SPDX-License-Identifier: AGPL-3.0-only <MkPagination v-slot="{items}" :pagination="followersPagination"> <div class="follow-relations-list"> <div v-for="followRelationship in items" :key="followRelationship.id" class="follow-relation"> - <MkA v-tooltip.mfm="`Last posted: ${dateString(followRelationship.followee.updatedAt)}`" :to="`/admin/user/${followRelationship.followee.id}`" class="user"> + <MkA v-tooltip.mfm="i18n.tsx.lastPosted({ at: dateString(followRelationship.followee.updatedAt) })" :to="`/admin/user/${followRelationship.followee.id}`" class="user"> <MkUserCardMini :user="followRelationship.followee" :withChart="false"/> </MkA> <span class="arrow">←</span> - <MkA v-tooltip.mfm="`Last posted: ${dateString(followRelationship.follower.updatedAt)}`" :to="`/admin/user/${followRelationship.follower.id}`" class="user"> + <MkA v-tooltip.mfm="i18n.tsx.lastPosted({ at: dateString(followRelationship.follower.updatedAt) })" :to="`/admin/user/${followRelationship.follower.id}`" class="user"> <MkUserCardMini :user="followRelationship.follower" :withChart="false"/> </MkA> </div> @@ -165,16 +197,17 @@ SPDX-License-Identifier: AGPL-3.0-only <MkObjectView tall :value="instance"> </MkObjectView> </div> - </MkSwiper> + </div> </div> </PageWithHeader> </template> <script lang="ts" setup> -import { ref, computed, watch } from 'vue'; +import { ref, computed } from 'vue'; import * as Misskey from 'misskey-js'; import type { ChartSrc } from '@/components/MkChart.vue'; import type { Paging } from '@/components/MkPagination.vue'; +import type { Badge } from '@/components/SkBadgeStrip.vue'; import MkChart from '@/components/MkChart.vue'; import MkObjectView from '@/components/MkObjectView.vue'; import FormLink from '@/components/form/link.vue'; @@ -197,10 +230,19 @@ import { dateString } from '@/filters/date.js'; import MkTextarea from '@/components/MkTextarea.vue'; import MkInfo from '@/components/MkInfo.vue'; import { $i } from '@/i.js'; +import { copyToClipboard } from '@/utility/copy-to-clipboard'; +import MkFolder from '@/components/MkFolder.vue'; +import MkNumber from '@/components/MkNumber.vue'; +import SkBadgeStrip from '@/components/SkBadgeStrip.vue'; -const props = defineProps<{ +const props = withDefaults(defineProps<{ host: string; -}>(); + metaHint?: Misskey.entities.AdminMetaResponse; + instanceHint?: Misskey.entities.FederationInstance; +}>(), { + metaHint: undefined, + instanceHint: undefined, +}); const tab = ref('overview'); @@ -233,6 +275,55 @@ const isBaseBlocked = computed(() => meta.value && baseDomains.value.some(d => m const isBaseSilenced = computed(() => meta.value && baseDomains.value.some(d => meta.value?.silencedHosts.includes(d))); const isBaseMediaSilenced = computed(() => meta.value && baseDomains.value.some(d => meta.value?.mediaSilencedHosts.includes(d))); +const badges = computed(() => { + const arr: Badge[] = []; + if (instance.value) { + if (instance.value.isBlocked) { + arr.push({ + key: 'blocked', + label: i18n.ts.blocked, + style: 'error', + }); + } + if (instance.value.isSuspended) { + arr.push({ + key: 'suspended', + label: i18n.ts.suspended, + style: 'error', + }); + } + if (instance.value.isSilenced) { + arr.push({ + key: 'silenced', + label: i18n.ts.silenced, + style: 'warning', + }); + } + if (instance.value.isMediaSilenced) { + arr.push({ + key: 'media_silenced', + label: i18n.ts.mediaSilenced, + style: 'warning', + }); + } + if (instance.value.isNSFW) { + arr.push({ + key: 'nsfw', + label: i18n.ts.nsfw, + style: 'warning', + }); + } + if (instance.value.isBubbled) { + arr.push({ + key: 'bubbled', + label: i18n.ts.bubble, + style: 'success', + }); + } + } + return arr; +}); + const usersPagination = { endpoint: iAmModerator ? 'admin/show-users' : 'users', limit: 10, @@ -264,20 +355,30 @@ const followersPagination = { offsetMode: false, }; -if (iAmModerator) { - watch(moderationNote, async () => { - if (instance.value == null) return; - await misskeyApi('admin/federation/update-instance', { host: instance.value.host, moderationNote: moderationNote.value }); - }); +async function saveModerationNote() { + if (iAmModerator) { + await os.promiseDialog(async () => { + if (instance.value == null) return; + await os.apiWithDialog('admin/federation/update-instance', { host: instance.value.host, moderationNote: moderationNote.value }); + await fetch(); + }); + } } -async function fetch(): Promise<void> { - if (iAmAdmin) { - meta.value = await misskeyApi('admin/meta'); - } - instance.value = await misskeyApi('federation/show-instance', { - host: props.host, - }); +async function fetch(withHint = false): Promise<void> { + const [m, i] = await Promise.all([ + (withHint && props.metaHint) + ? props.metaHint + : iAmAdmin ? misskeyApi('admin/meta') : null, + (withHint && props.instanceHint) + ? props.instanceHint + : misskeyApi('federation/show-instance', { + host: props.host, + }), + ]); + meta.value = m; + instance.value = i; + suspensionState.value = instance.value?.suspensionState ?? 'none'; isSuspended.value = suspensionState.value !== 'none'; isBlocked.value = instance.value?.isBlocked ?? false; @@ -292,80 +393,106 @@ async function fetch(): Promise<void> { async function toggleBlock(): Promise<void> { if (!iAmAdmin) return; - if (!meta.value) throw new Error('No meta?'); - if (!instance.value) throw new Error('No instance?'); - const { host } = instance.value; - await misskeyApi('admin/update-meta', { - blockedHosts: isBlocked.value ? meta.value.blockedHosts.concat([host]) : meta.value.blockedHosts.filter(x => x !== host), + await os.promiseDialog(async () => { + if (!meta.value) throw new Error('No meta?'); + if (!instance.value) throw new Error('No instance?'); + const { host } = instance.value; + await os.apiWithDialog('admin/update-meta', { + blockedHosts: isBlocked.value ? meta.value.blockedHosts.concat([host]) : meta.value.blockedHosts.filter(x => x !== host), + }); + await fetch(); }); } async function toggleSilenced(): Promise<void> { if (!iAmAdmin) return; - if (!meta.value) throw new Error('No meta?'); - if (!instance.value) throw new Error('No instance?'); - const { host } = instance.value; - const silencedHosts = meta.value.silencedHosts ?? []; - await misskeyApi('admin/update-meta', { - silencedHosts: isSilenced.value ? silencedHosts.concat([host]) : silencedHosts.filter(x => x !== host), + await os.promiseDialog(async () => { + if (!meta.value) throw new Error('No meta?'); + if (!instance.value) throw new Error('No instance?'); + const { host } = instance.value; + const silencedHosts = meta.value.silencedHosts ?? []; + await os.promiseDialog(async () => { + await misskeyApi('admin/update-meta', { + silencedHosts: isSilenced.value ? silencedHosts.concat([host]) : silencedHosts.filter(x => x !== host), + }); + await fetch(); + }); }); } async function toggleMediaSilenced(): Promise<void> { if (!iAmAdmin) return; - if (!meta.value) throw new Error('No meta?'); - if (!instance.value) throw new Error('No instance?'); - const { host } = instance.value; - const mediaSilencedHosts = meta.value.mediaSilencedHosts ?? []; - await misskeyApi('admin/update-meta', { - mediaSilencedHosts: isMediaSilenced.value ? mediaSilencedHosts.concat([host]) : mediaSilencedHosts.filter(x => x !== host), + await os.promiseDialog(async () => { + if (!meta.value) throw new Error('No meta?'); + if (!instance.value) throw new Error('No instance?'); + const { host } = instance.value; + const mediaSilencedHosts = meta.value.mediaSilencedHosts ?? []; + await misskeyApi('admin/update-meta', { + mediaSilencedHosts: isMediaSilenced.value ? mediaSilencedHosts.concat([host]) : mediaSilencedHosts.filter(x => x !== host), + }); + await fetch(); }); } async function toggleSuspended(): Promise<void> { if (!iAmModerator) return; - if (!instance.value) throw new Error('No instance?'); - suspensionState.value = isSuspended.value ? 'manuallySuspended' : 'none'; - await misskeyApi('admin/federation/update-instance', { - host: instance.value.host, - isSuspended: isSuspended.value, + await os.promiseDialog(async () => { + if (!instance.value) throw new Error('No instance?'); + suspensionState.value = isSuspended.value ? 'manuallySuspended' : 'none'; + await misskeyApi('admin/federation/update-instance', { + host: instance.value.host, + isSuspended: isSuspended.value, + }); + await fetch(); }); } async function toggleNSFW(): Promise<void> { if (!iAmModerator) return; - if (!instance.value) throw new Error('No instance?'); - await misskeyApi('admin/federation/update-instance', { - host: instance.value.host, - isNSFW: isNSFW.value, + await os.promiseDialog(async () => { + if (!instance.value) throw new Error('No instance?'); + await misskeyApi('admin/federation/update-instance', { + host: instance.value.host, + isNSFW: isNSFW.value, + }); + await fetch(); }); } async function toggleRejectReports(): Promise<void> { if (!iAmModerator) return; - if (!instance.value) throw new Error('No instance?'); - await misskeyApi('admin/federation/update-instance', { - host: instance.value.host, - rejectReports: rejectReports.value, + await os.promiseDialog(async () => { + if (!instance.value) throw new Error('No instance?'); + await misskeyApi('admin/federation/update-instance', { + host: instance.value.host, + rejectReports: rejectReports.value, + }); + await fetch(); }); } async function toggleRejectQuotes(): Promise<void> { if (!iAmModerator) return; - if (!instance.value) throw new Error('No instance?'); - await misskeyApi('admin/federation/update-instance', { - host: instance.value.host, - rejectQuotes: rejectQuotes.value, + await os.promiseDialog(async () => { + if (!instance.value) throw new Error('No instance?'); + await misskeyApi('admin/federation/update-instance', { + host: instance.value.host, + rejectQuotes: rejectQuotes.value, + }); + await fetch(); }); } -function refreshMetadata(): void { +async function refreshMetadata(): Promise<void> { if (!iAmModerator) return; - if (!instance.value) throw new Error('No instance?'); - misskeyApi('admin/federation/refresh-remote-instance-metadata', { - host: instance.value.host, + await os.promiseDialog(async () => { + if (!instance.value) throw new Error('No instance?'); + await misskeyApi('admin/federation/refresh-remote-instance-metadata', { + host: instance.value.host, + }); + await fetch(); }); - os.alert({ + await os.alert({ text: 'Refresh requested', }); } @@ -380,14 +507,12 @@ async function deleteAllFiles(): Promise<void> { }); if (confirm.canceled) return; - await Promise.all([ - misskeyApi('admin/federation/delete-all-files', { - host: instance.value.host, - }), - os.alert({ - text: i18n.ts.deleteAllFilesQueued, - }), - ]); + await os.apiWithDialog('admin/federation/delete-all-files', { + host: instance.value.host, + }); + await os.alert({ + text: i18n.ts.deleteAllFilesQueued, + }); } async function severAllFollowRelations(): Promise<void> { @@ -404,17 +529,15 @@ async function severAllFollowRelations(): Promise<void> { }); if (confirm.canceled) return; - await Promise.all([ - misskeyApi('admin/federation/remove-all-following', { - host: instance.value.host, - }), - os.alert({ - text: i18n.tsx.severAllFollowRelationsQueued({ host: instance.value.host }), - }), - ]); + await os.apiWithDialog('admin/federation/remove-all-following', { + host: instance.value.host, + }); + await os.alert({ + text: i18n.tsx.severAllFollowRelationsQueued({ host: instance.value.host }), + }); } -fetch(); +fetch(true); const headerActions = computed(() => [{ text: `https://${props.host}`, @@ -429,16 +552,16 @@ const headerTabs = computed(() => [{ title: i18n.ts.overview, icon: 'ti ti-info-circle', }, { - key: 'chart', - title: i18n.ts.charts, - icon: 'ti ti-chart-line', -}, { key: 'users', title: i18n.ts.users, icon: 'ti ti-users', }, ...getFollowingTabs(), { + key: 'chart', + title: i18n.ts.charts, + icon: 'ti ti-chart-line', +}, { key: 'raw', - title: 'Raw', + title: i18n.ts.raw, icon: 'ti ti-code', }]); @@ -522,3 +645,38 @@ definePage(() => ({ } } </style> + +<style lang="scss" module> +.headerData { + display: flex; + flex-direction: column; + + > * { + overflow: hidden; + text-overflow: ellipsis; + font-size: 85%; + opacity: 0.7; + } + + > :first-child { + text-overflow: initial; + word-break: break-all; + font-size: 100%; + opacity: 1.0; + } +} + +.linksList { + margin: 0; + padding-left: 1.5em; +} + +// Sync with admin-user.vue +.buttonStrip { + margin: calc(var(--MI-margin) / 2 * -1); + + >* { + margin: calc(var(--MI-margin) / 2); + } +} +</style> diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue index f275ec9517..7d56743967 100644 --- a/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue +++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue @@ -25,6 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only /* eslint-disable vue/no-mutating-props */ import { watch, ref } from 'vue'; import * as Misskey from 'misskey-js'; +import { retryOnThrottled } from '@@/js/retry-on-throttled.js'; import XContainer from '../page-editor.container.vue'; import MkInput from '@/components/MkInput.vue'; import MkSwitch from '@/components/MkSwitch.vue'; @@ -35,6 +36,7 @@ import { i18n } from '@/i18n.js'; const props = defineProps<{ modelValue: Misskey.entities.PageBlock & { type: 'note' }; + index: number; }>(); const emit = defineEmits<{ @@ -58,7 +60,13 @@ watch(id, async () => { ...props.modelValue, note: id.value, }); - note.value = await misskeyApi('notes/show', { noteId: id.value }); + const timeoutId = window.setTimeout(async () => { + note.value = await retryOnThrottled(() => misskeyApi('notes/show', { noteId: id.value })); + }, 500 * props.index); // rate limit is 2 reqs per sec + + return () => { + window.clearTimeout(timeoutId); + }; }, { immediate: true, }); diff --git a/packages/frontend/src/pages/page-editor/page-editor.blocks.vue b/packages/frontend/src/pages/page-editor/page-editor.blocks.vue index f191320180..8d7ba1a3ab 100644 --- a/packages/frontend/src/pages/page-editor/page-editor.blocks.vue +++ b/packages/frontend/src/pages/page-editor/page-editor.blocks.vue @@ -5,10 +5,16 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <Sortable :modelValue="modelValue" tag="div" itemKey="id" handle=".drag-handle" :group="{ name: 'blocks' }" :animation="150" :swapThreshold="0.5" @update:modelValue="v => emit('update:modelValue', v)"> - <template #item="{element}"> + <template #item="{element, index}"> <div :class="$style.item"> <!-- divが無いとエラーになる https://github.com/SortableJS/vue.draggable.next/issues/189 --> - <component :is="getComponent(element.type)" :modelValue="element" @update:modelValue="updateItem" @remove="() => removeItem(element)"/> + <component + :is="getComponent(element.type)" + :modelValue="element" + :index="index" + @update:modelValue="updateItem" + @remove="() => removeItem(element)" + /> </div> </template> </Sortable> diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue index 59b1a5a137..f4d0f25734 100644 --- a/packages/frontend/src/pages/page.vue +++ b/packages/frontend/src/pages/page.vue @@ -347,7 +347,7 @@ definePage(() => ({ text-align: center; border-radius: 99rem; - & :global(.ti) { + & :global(.ti), & :global(.ph-lg) { line-height: 2.5rem; } diff --git a/packages/frontend/src/pages/reversi/game.board.vue b/packages/frontend/src/pages/reversi/game.board.vue index c0c90cb993..1c1adaf687 100644 --- a/packages/frontend/src/pages/reversi/game.board.vue +++ b/packages/frontend/src/pages/reversi/game.board.vue @@ -243,13 +243,13 @@ if (game.value.isStarted && !game.value.isEnded) { useInterval(() => { if (game.value.isEnded) return; const crc32 = engine.value.calcCrc32(); - if (_DEV_) console.log('crc32', crc32); + if (_DEV_) console.debug('crc32', crc32); misskeyApi('reversi/verify', { gameId: game.value.id, crc32: crc32.toString(), }).then((res) => { if (res.desynced) { - if (_DEV_) console.log('resynced'); + if (_DEV_) console.debug('resynced'); restoreGame(res.game!); } }); diff --git a/packages/frontend/src/pages/settings/custom-css.vue b/packages/frontend/src/pages/settings/custom-css.vue index 9b0e04860e..5b9b0d897a 100644 --- a/packages/frontend/src/pages/settings/custom-css.vue +++ b/packages/frontend/src/pages/settings/custom-css.vue @@ -22,24 +22,9 @@ import { unisonReload } from '@/utility/unison-reload.js'; import { i18n } from '@/i18n.js'; import { definePage } from '@/page.js'; import { miLocalStorage } from '@/local-storage.js'; +import { prefer } from '@/preferences.js'; -const localCustomCss = ref(miLocalStorage.getItem('customCss') ?? ''); - -async function apply() { - miLocalStorage.setItem('customCss', localCustomCss.value); - - const { canceled } = await os.confirm({ - type: 'info', - text: i18n.ts.reloadToApplySetting, - }); - if (canceled) return; - - unisonReload(); -} - -watch(localCustomCss, async () => { - await apply(); -}); +const localCustomCss = prefer.model('customCss'); const headerActions = computed(() => []); diff --git a/packages/frontend/src/pages/settings/mute-block.instance-mute.vue b/packages/frontend/src/pages/settings/mute-block.instance-mute.vue index a0a40e4c72..164179d21c 100644 --- a/packages/frontend/src/pages/settings/mute-block.instance-mute.vue +++ b/packages/frontend/src/pages/settings/mute-block.instance-mute.vue @@ -15,36 +15,50 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { ref, watch } from 'vue'; +import { ref, watch, computed } from 'vue'; import MkTextarea from '@/components/MkTextarea.vue'; import MkInfo from '@/components/MkInfo.vue'; import MkButton from '@/components/MkButton.vue'; import { ensureSignin } from '@/i.js'; import { misskeyApi } from '@/utility/misskey-api.js'; import { i18n } from '@/i18n.js'; +import * as os from '@/os.js'; const $i = ensureSignin(); const instanceMutes = ref($i.mutedInstances.join('\n')); +const domainArray = computed(() => { + return instanceMutes.value + .trim().split('\n') + .map(el => el.trim().toLowerCase()) + .filter(el => el); +}); const changed = ref(false); async function save() { - let mutes = instanceMutes.value - .trim().split('\n') - .map(el => el.trim()) - .filter(el => el); + // checks for a full line without whitespace. + if (!domainArray.value.every(d => /^\S+$/.test(d))) { + os.alert({ + type: 'error', + title: i18n.ts.invalidValue, + }); + return; + } await misskeyApi('i/update', { - mutedInstances: mutes, + mutedInstances: domainArray.value, }); - changed.value = false; - // Refresh filtered list to signal to the user how they've been saved - instanceMutes.value = mutes.join('\n'); + instanceMutes.value = domainArray.value.join('\n'); + + changed.value = false; } -watch(instanceMutes, () => { - changed.value = true; +watch(domainArray, (newArray, oldArray) => { + // compare arrays + if (newArray.length !== oldArray.length || !newArray.every((a, i) => a === oldArray[i])) { + changed.value = true; + } }); </script> diff --git a/packages/frontend/src/pages/settings/mute-block.vue b/packages/frontend/src/pages/settings/mute-block.vue index 8cc3945df8..e19d7eff85 100644 --- a/packages/frontend/src/pages/settings/mute-block.vue +++ b/packages/frontend/src/pages/settings/mute-block.vue @@ -12,10 +12,11 @@ SPDX-License-Identifier: AGPL-3.0-only <div class="_gaps_s"> <SearchMarker + v-slot="slotProps" :label="i18n.ts.wordMute" :keywords="['note', 'word', 'soft', 'mute', 'hide']" > - <MkFolder> + <MkFolder :defaultOpen="slotProps.isParentOfTarget"> <template #icon><i class="ph-envelope ph-bold ph-lg"></i></template> <template #label>{{ i18n.ts.wordMute }}</template> @@ -37,10 +38,11 @@ SPDX-License-Identifier: AGPL-3.0-only </SearchMarker> <SearchMarker + v-slot="slotProps" :label="i18n.ts.hardWordMute" :keywords="['note', 'word', 'hard', 'mute', 'hide']" > - <MkFolder> + <MkFolder :defaultOpen="slotProps.isParentOfTarget"> <template #icon><i class="ph-x-square ph-bold ph-lg"></i></template> <template #label>{{ i18n.ts.hardWordMute }}</template> @@ -55,10 +57,11 @@ SPDX-License-Identifier: AGPL-3.0-only </SearchMarker> <SearchMarker + v-slot="slotProps" :label="i18n.ts.instanceMute" :keywords="['note', 'server', 'instance', 'host', 'federation', 'mute', 'hide']" > - <MkFolder v-if="instance.federation !== 'none'"> + <MkFolder v-if="instance.federation !== 'none'" :defaultOpen="slotProps.isParentOfTarget"> <template #icon><i class="ti ti-planet-off"></i></template> <template #label>{{ i18n.ts.instanceMute }}</template> @@ -67,9 +70,10 @@ SPDX-License-Identifier: AGPL-3.0-only </SearchMarker> <SearchMarker + v-slot="slotProps" :keywords="['renote', 'mute', 'hide', 'user']" > - <MkFolder> + <MkFolder :defaultOpen="slotProps.isParentOfTarget"> <template #icon><i class="ti ti-repeat-off"></i></template> <template #label><SearchLabel>{{ i18n.ts.mutedUsers }} ({{ i18n.ts.renote }})</SearchLabel></template> @@ -102,10 +106,11 @@ SPDX-License-Identifier: AGPL-3.0-only </SearchMarker> <SearchMarker + v-slot="slotProps" :label="i18n.ts.mutedUsers" :keywords="['note', 'mute', 'hide', 'user']" > - <MkFolder> + <MkFolder :defaultOpen="slotProps.isParentOfTarget"> <template #icon><i class="ti ti-eye-off"></i></template> <template #label>{{ i18n.ts.mutedUsers }}</template> @@ -140,10 +145,11 @@ SPDX-License-Identifier: AGPL-3.0-only </SearchMarker> <SearchMarker + v-slot="slotProps" :label="i18n.ts.blockedUsers" :keywords="['block', 'user']" > - <MkFolder> + <MkFolder :defaultOpen="slotProps.isParentOfTarget"> <template #icon><i class="ti ti-ban"></i></template> <template #label>{{ i18n.ts.blockedUsers }}</template> @@ -223,12 +229,6 @@ const expandedBlockItems = ref([]); const showSoftWordMutedWord = prefer.model('showSoftWordMutedWord'); -watch([ - showSoftWordMutedWord, -], async () => { - await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true }); -}); - async function unrenoteMute(user, ev) { os.popupMenu([{ text: i18n.ts.renoteUnmute, diff --git a/packages/frontend/src/pages/settings/preferences.vue b/packages/frontend/src/pages/settings/preferences.vue index b85f45884d..84c625b502 100644 --- a/packages/frontend/src/pages/settings/preferences.vue +++ b/packages/frontend/src/pages/settings/preferences.vue @@ -99,7 +99,7 @@ SPDX-License-Identifier: AGPL-3.0-only </SearchMarker> </div> - <SearchMarker :keywords="['emoji', 'style', 'native', 'system', 'fluent', 'twemoji']"> + <SearchMarker :keywords="['emoji', 'style', 'native', 'system', 'fluent', 'twemoji', 'tossface']"> <MkPreferenceContainer k="emojiStyle"> <div> <MkRadios v-model="emojiStyle"> @@ -107,6 +107,7 @@ SPDX-License-Identifier: AGPL-3.0-only <option value="native">{{ i18n.ts.native }}</option> <option value="fluentEmoji">Fluent Emoji</option> <option value="twemoji">Twemoji</option> + <option value="tossface">Tossface</option> </MkRadios> <div style="margin: 8px 0 0 0; font-size: 1.5em;"><Mfm :key="emojiStyle" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div> </div> @@ -237,6 +238,13 @@ SPDX-License-Identifier: AGPL-3.0-only <!-- If one of the other options is selected show this as a blank other --> <option v-if="!useCustomSearchEngine" value="">{{ i18n.ts.searchEngineOther }}</option> </MkSelect> + + <div v-if="useCustomSearchEngine"> + <MkInput v-model="searchEngine" :max="300" :manualSave="true"> + <template #label>{{ i18n.ts.searchEngineCusomURI }}</template> + <template #caption>{{ i18n.ts.searchEngineCustomURIDescription }}</template> + </MkInput> + </div> </MkPreferenceContainer> </SearchMarker> @@ -395,9 +403,13 @@ SPDX-License-Identifier: AGPL-3.0-only <div class="_gaps_s"> <SearchMarker :keywords="['remember', 'keep', 'note', 'cw']"> <MkPreferenceContainer k="keepCw"> - <MkSwitch v-model="keepCw"> + <MkSelect v-model="keepCw"> <template #label><SearchLabel>{{ i18n.ts.keepCw }}</SearchLabel></template> - </MkSwitch> + <template #caption><SearchKeyword>{{ i18n.ts.keepCwDescription }}</SearchKeyword></template> + <option :value="false">{{ i18n.ts.keepCwDisabled }}</option>> + <option :value="true">{{ i18n.ts.keepCwEnabled }}</option>> + <option value="prepend-re">{{ i18n.ts.keepCwPrependRe }}</option> + </MkSelect> </MkPreferenceContainer> </SearchMarker> @@ -675,7 +687,7 @@ SPDX-License-Identifier: AGPL-3.0-only <SearchMarker :keywords="['font', 'size']"> <MkRadios v-model="fontSize"> <template #label><SearchLabel>{{ i18n.ts.fontSize }}</SearchLabel></template> - <option :value="null"><span style="font-size: 14px;">Aa</span></option> + <option value="0"><span style="font-size: 14px;">Aa</span></option> <option value="1"><span style="font-size: 15px;">Aa</span></option> <option value="2"><span style="font-size: 16px;">Aa</span></option> <option value="3"><span style="font-size: 17px;">Aa</span></option> @@ -787,7 +799,7 @@ SPDX-License-Identifier: AGPL-3.0-only <SearchMarker :keywords="['corner', 'radius']"> <MkRadios v-model="cornerRadius"> <template #label><SearchLabel>{{ i18n.ts.cornerRadius }}</SearchLabel></template> - <option :value="null"><i class="sk-icons sk-shark sk-icons-lg" style="top: 2px;position: relative;"></i> Sharkey</option> + <option value="sharkey"><i class="sk-icons sk-shark sk-icons-lg" style="top: 2px;position: relative;"></i> Sharkey</option> <option value="misskey"><i class="sk-icons sk-misskey sk-icons-lg" style="top: 2px;position: relative;"></i> Misskey</option> </MkRadios> </SearchMarker> @@ -966,7 +978,6 @@ import { worksOnInstance } from '@/utility/favicon-dot.js'; const $i = ensureSignin(); -const lang = ref(miLocalStorage.getItem('lang')); const dataSaver = ref(prefer.s.dataSaver); const overridedDeviceKind = prefer.model('overridedDeviceKind'); @@ -1026,9 +1037,6 @@ const contextMenu = prefer.model('contextMenu'); const menuStyle = prefer.model('menuStyle'); const makeEveryTextElementsSelectable = prefer.model('makeEveryTextElementsSelectable'); -const fontSize = ref(miLocalStorage.getItem('fontSize')); -const useSystemFont = ref(miLocalStorage.getItem('useSystemFont') != null); - // Sharkey options const collapseNotesRepliedTo = prefer.model('collapseNotesRepliedTo'); const showTickerOnReplies = prefer.model('showTickerOnReplies'); @@ -1044,7 +1052,6 @@ const notificationClickable = prefer.model('notificationClickable'); const warnExternalUrl = prefer.model('warnExternalUrl'); const showVisibilitySelectorOnBoost = prefer.model('showVisibilitySelectorOnBoost'); const visibilityOnBoost = prefer.model('visibilityOnBoost'); -const cornerRadius = ref(miLocalStorage.getItem('cornerRadius')); const oneko = prefer.model('oneko'); const numberOfReplies = prefer.model('numberOfReplies'); const autoloadConversation = prefer.model('autoloadConversation'); @@ -1052,40 +1059,13 @@ const clickToOpen = prefer.model('clickToOpen'); const useCustomSearchEngine = computed(() => !Object.keys(searchEngineMap).includes(searchEngine.value)); const defaultCW = ref($i.defaultCW); const defaultCWPriority = ref($i.defaultCWPriority); - -watch(lang, () => { - miLocalStorage.setItem('lang', lang.value as string); - miLocalStorage.removeItem('locale'); - miLocalStorage.removeItem('localeVersion'); -}); - -watch(fontSize, () => { - if (fontSize.value == null) { - miLocalStorage.removeItem('fontSize'); - } else { - miLocalStorage.setItem('fontSize', fontSize.value); - } -}); - -watch(useSystemFont, () => { - if (useSystemFont.value) { - miLocalStorage.setItem('useSystemFont', 't'); - } else { - miLocalStorage.removeItem('useSystemFont'); - } -}); - -watch(cornerRadius, () => { - if (cornerRadius.value == null) { - miLocalStorage.removeItem('cornerRadius'); - } else { - miLocalStorage.setItem('cornerRadius', cornerRadius.value); - } -}); +const lang = prefer.model('lang'); +const fontSize = prefer.model('fontSize'); +const useSystemFont = prefer.model('useSystemFont'); +const cornerRadius = prefer.model('cornerRadius'); watch([ hemisphere, - lang, enableInfiniteScroll, showNoteActionsOnlyHover, overridedDeviceKind, @@ -1107,8 +1087,6 @@ watch([ useStickyIcons, keepScreenOn, contextMenu, - fontSize, - useSystemFont, makeEveryTextElementsSelectable, noteDesign, ], async () => { diff --git a/packages/frontend/src/pages/settings/profile.attribution-domains-setting.vue b/packages/frontend/src/pages/settings/profile.attribution-domains-setting.vue new file mode 100644 index 0000000000..c77870f9d3 --- /dev/null +++ b/packages/frontend/src/pages/settings/profile.attribution-domains-setting.vue @@ -0,0 +1,67 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<MkTextarea v-model="attributionDomains"> + <template #label><SearchLabel>{{ i18n.ts.attributionDomains }}</SearchLabel></template> + <template #caption> + {{ i18n.ts.attributionDomainsDescription }} + <br/> + <Mfm :text="tutorialTag"/> + </template> +</MkTextarea> +<MkButton primary :disabled="!changed" @click="save()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton> +</template> + +<script lang="ts" setup> +import { ref, watch, computed } from 'vue'; +import { host as hostRaw } from '@@/js/config.js'; +import { toUnicode } from 'punycode.js'; +import MkTextarea from '@/components/MkTextarea.vue'; +import MkButton from '@/components/MkButton.vue'; +import { ensureSignin } from '@/i.js'; +import { misskeyApi } from '@/utility/misskey-api.js'; +import { i18n } from '@/i18n.js'; +import * as os from '@/os.js'; + +const $i = ensureSignin(); + +const attributionDomains = ref($i.attributionDomains.join('\n')); +const domainArray = computed(() => { + return attributionDomains.value + .trim().split('\n') + .map(el => el.trim().toLowerCase()) + .filter(el => el); +}); +const changed = ref(false); +const tutorialTag = '`<meta name="fediverse:creator" content="' + $i.username + '@' + toUnicode(hostRaw) + '" />`'; + +async function save() { + // checks for a full line without whitespace. + if (!domainArray.value.every(d => /^\S+$/.test(d))) { + os.alert({ + type: 'error', + title: i18n.ts.invalidValue, + }); + return; + } + + await misskeyApi('i/update', { + attributionDomains: domainArray.value, + }); + + // Refresh filtered list to signal to the user how they've been saved + attributionDomains.value = domainArray.value.join('\n'); + + changed.value = false; +} + +watch(domainArray, (newArray, oldArray) => { + // compare arrays + if (newArray.length !== oldArray.length || !newArray.every((a, i) => a === oldArray[i])) { + changed.value = true; + } +}); +</script> diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue index ee4dd1b65a..21bc74326a 100644 --- a/packages/frontend/src/pages/settings/profile.vue +++ b/packages/frontend/src/pages/settings/profile.vue @@ -163,6 +163,13 @@ SPDX-License-Identifier: AGPL-3.0-only <template #caption>{{ i18n.ts.flagAsBotDescription }}</template> </MkSwitch> </SearchMarker> + + <SearchMarker + :label="i18n.ts.attributionDomains" + :keywords="['attribution', 'domains', 'preview', 'url']" + > + <AttributionDomainsSettings/> + </SearchMarker> </div> </MkFolder> </SearchMarker> @@ -172,6 +179,7 @@ SPDX-License-Identifier: AGPL-3.0-only <script lang="ts" setup> import { computed, reactive, ref, watch, defineAsyncComponent } from 'vue'; +import AttributionDomainsSettings from './profile.attribution-domains-setting.vue'; import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/MkInput.vue'; import MkSwitch from '@/components/MkSwitch.vue'; diff --git a/packages/frontend/src/pages/welcome.timeline.note.vue b/packages/frontend/src/pages/welcome.timeline.note.vue index 5ca487a70b..b38946d64c 100644 --- a/packages/frontend/src/pages/welcome.timeline.note.vue +++ b/packages/frontend/src/pages/welcome.timeline.note.vue @@ -10,14 +10,18 @@ SPDX-License-Identifier: AGPL-3.0-only <div><Mfm :text="note.cw" :author="note.user"/></div> <MkCwButton v-model="showContent" :text="note.text" :renote="note.renote" :files="note.files" :poll="note.poll" style="margin: 4px 0;"/> <div v-if="showContent"> - <MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA> - <Mfm v-if="note.text" :text="note.text" :isBlock="true" :author="note.user"/> + <div> + <MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA> + <Mfm v-if="note.text" :text="note.text" :author="note.user"/> + </div> <MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA> </div> </div> <div v-else ref="noteTextEl" :class="[$style.text, { [$style.collapsed]: shouldCollapse }]"> - <MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA> - <Mfm v-if="note.text" :text="note.text" :isBlock="true" :author="note.user"/> + <div> + <MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA> + <Mfm v-if="note.text" :text="note.text" :author="note.user"/> + </div> <MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA> </div> <div v-if="note.files && note.files.length > 0" :class="$style.richcontent"> |