misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

merge develop and fix conflicts.

Browse source
This commit is contained in:
piuvas 2025-06-03 10:56:10 -03:00
commit 1120ad19ae
No known key found for this signature in database
166 changed files with 2933 additions and 1079 deletions
Download patch file Download diff file Expand all files Collapse all files

1
packages/frontend/.storybook/tsconfig.json
View file

@ -18,6 +18,7 @@
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"incremental": true,
"jsx": "react",
"jsxFactory": "h"
},

8
packages/frontend/package.json
View file

@ -30,7 +30,7 @@
"@transfem-org/sfm-js": "0.24.6",
"@twemoji/parser": "15.1.1",
"@vitejs/plugin-vue": "5.2.3",
"@vue/compiler-sfc": "3.5.12",
"@vue/compiler-sfc": "3.5.14",
"aiscript-vscode": "github:aiscript-dev/aiscript-vscode#v0.1.15",
"astring": "1.9.0",
"broadcast-channel": "7.1.0",
@ -76,7 +76,7 @@
"uuid": "11.1.0",
"v-code-diff": "1.13.1",
"vite": "6.3.3",
"vue": "3.5.12",
"vue": "3.5.14",
"vuedraggable": "next",
"wanakana": "5.3.1"
},
@ -119,8 +119,8 @@
"@typescript-eslint/eslint-plugin": "8.31.0",
"@typescript-eslint/parser": "8.31.0",
"@vitest/coverage-v8": "3.1.2",
"@vue/compiler-core": "3.5.12",
"@vue/runtime-core": "3.5.12",
"@vue/compiler-core": "3.5.14",
"@vue/runtime-core": "3.5.14",
"acorn": "8.14.1",
"cross-env": "7.0.3",
"eslint-plugin-import": "2.31.0",

8
packages/frontend/src/components/DynamicNote.vue
View file

@ -23,10 +23,10 @@ import type MkNote from '@/components/MkNote.vue';
import type SkNote from '@/components/SkNote.vue';
import { prefer } from '@/preferences';
const XNote = computed(() =>
prefer.r.noteDesign.value === 'misskey'
? defineAsyncComponent(() => import('@/components/MkNote.vue'))
: defineAsyncComponent(() => import('@/components/SkNote.vue')),
const XNote = defineAsyncComponent(() =>
prefer.s.noteDesign === 'misskey'
? import('@/components/MkNote.vue')
: import('@/components/SkNote.vue')
);
const rootEl = useTemplateRef<ComponentExposed<typeof MkNote | typeof SkNote>>('rootEl');

8
packages/frontend/src/components/DynamicNoteDetailed.vue
View file

@ -20,10 +20,10 @@ import type MkNoteDetailed from '@/components/MkNoteDetailed.vue';
import type SkNoteDetailed from '@/components/SkNoteDetailed.vue';
import { prefer } from '@/preferences';
const XNoteDetailed = computed(() =>
prefer.r.noteDesign.value === 'misskey'
? defineAsyncComponent(() => import('@/components/MkNoteDetailed.vue'))
: defineAsyncComponent(() => import('@/components/SkNoteDetailed.vue')),
const XNoteDetailed = defineAsyncComponent(() =>
prefer.s.noteDesign === 'misskey'
? import('@/components/MkNoteDetailed.vue')
: import('@/components/SkNoteDetailed.vue'),
);
const rootEl = useTemplateRef<ComponentExposed<typeof MkNoteDetailed | typeof SkNoteDetailed>>('rootEl');

8
packages/frontend/src/components/DynamicNoteSimple.vue
View file

@ -21,10 +21,10 @@ import type MkNoteSimple from '@/components/MkNoteSimple.vue';
import type SkNoteSimple from '@/components/SkNoteSimple.vue';
import { prefer } from '@/preferences';
const XNoteSimple = computed(() =>
prefer.r.noteDesign.value === 'misskey'
? defineAsyncComponent(() => import('@/components/MkNoteSimple.vue'))
: defineAsyncComponent(() => import('@/components/SkNoteSimple.vue')),
const XNoteSimple = defineAsyncComponent(() =>
prefer.s.noteDesign === 'misskey'
? import('@/components/MkNoteSimple.vue')
: import('@/components/SkNoteSimple.vue'),
);
const rootEl = useTemplateRef<ComponentExposed<typeof MkNoteSimple | typeof SkNoteSimple>>('rootEl');

5
packages/frontend/src/components/MkDateSeparatedList.vue
View file

@ -16,6 +16,7 @@ import { instance } from '@/instance.js';
import { prefer } from '@/preferences.js';
import { getDateText } from '@/utility/timeline-date-separate.js';
import { $i } from '@/i.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
export default defineComponent({
props: {
@ -146,14 +147,12 @@ export default defineComponent({
[$style['direction-up']]: props.direction === 'up',
};
return () => prefer.s.animation ? h(TransitionGroup, {
return () => h(SkTransitionGroup, {
class: classes,
name: 'list',
tag: 'div',
onBeforeLeave,
onLeaveCancelled,
}, { default: renderChildren }) : h('div', {
class: classes,
}, { default: renderChildren });
},
});

2
packages/frontend/src/components/MkDonation.vue
View file

@ -53,6 +53,7 @@ import { i18n } from '@/i18n.js';
import * as os from '@/os.js';
import { miLocalStorage } from '@/local-storage.js';
import { instance } from '@/instance.js';
import { prefer } from '@/preferences.js';
const emit = defineEmits<{
(ev: 'closed'): void;
@ -66,6 +67,7 @@ function close() {
}
function neverShow() {
prefer.commit('neverShowDonationInfo', 'true');
miLocalStorage.setItem('neverShowDonationInfo', 'true');
close();
}

6
packages/frontend/src/components/MkFolder.vue
View file

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div ref="rootEl" :class="$style.root" role="group" :aria-expanded="opened">
<MkStickyContainer>
<MkStickyContainer :sticky="sticky">
<template #header>
<button :class="[$style.header, { [$style.opened]: opened }]" class="_button" role="button" data-cy-folder-header @click="toggle">
<div :class="$style.headerIcon"><slot name="icon"></slot></div>
@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
>
<KeepAlive>
<div v-show="opened">
<MkStickyContainer>
<MkStickyContainer :sticky="sticky">
<template #header>
<div v-if="$slots.header" :class="$style.inBodyHeader">
<slot name="header"></slot>
@ -73,12 +73,14 @@ const props = withDefaults(defineProps<{
withSpacer?: boolean;
spacerMin?: number;
spacerMax?: number;
sticky?: boolean;
}>(), {
defaultOpen: false,
maxHeight: null,
withSpacer: true,
spacerMin: 14,
spacerMax: 22,
sticky: true,
});
const rootEl = useTemplateRef('rootEl');

10
packages/frontend/src/components/MkNote.vue
View file

@ -154,13 +154,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<i v-else class="ph-smiley ph-bold ph-lg"></i>
<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || prefer.s.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.reactionCount) }}</p>
</button>
<button v-if="prefer.s.showClipButtonInNoteFooter" ref="clipButton" :class="$style.footerButton" class="_button" @mousedown.prevent="clip()">
<button v-if="prefer.s.showClipButtonInNoteFooter" ref="clipButton" :class="$style.footerButton" class="_button" @click.stop="clip()">
<i class="ti ti-paperclip"></i>
</button>
<button v-if="prefer.s.showTranslationButtonInNoteFooter && $i?.policies.canUseTranslator && instance.translatorAvailable" ref="translationButton" class="_button" :class="$style.footerButton" @mousedown.prevent="translate()">
<button v-if="prefer.s.showTranslationButtonInNoteFooter && policies.canUseTranslator && instance.translatorAvailable" ref="translationButton" class="_button" :class="$style.footerButton" :disabled="translating || !!translation" @click.stop="translate()">
<i class="ti ti-language-hiragana"></i>
</button>
<button ref="menuButton" :class="$style.footerButton" class="_button" @mousedown.prevent="showMenu()">
<button ref="menuButton" :class="$style.footerButton" class="_button" @click.stop="showMenu()">
<i class="ti ti-dots"></i>
</button>
</footer>
@ -226,7 +226,7 @@ import { getNoteSummary } from '@/utility/get-note-summary.js';
import MkRippleEffect from '@/components/MkRippleEffect.vue';
import { showMovedDialog } from '@/utility/show-moved-dialog.js';
import { boostMenuItems, computeRenoteTooltip } from '@/utility/boost-quote.js';
import { instance, isEnabledUrlPreview } from '@/instance.js';
import { instance, isEnabledUrlPreview, policies } from '@/instance.js';
import { focusPrev, focusNext } from '@/utility/focus.js';
import { getAppearNote } from '@/utility/get-appear-note.js';
import { prefer } from '@/preferences.js';
@ -360,7 +360,7 @@ const keymap = {
clip();
},
't': () => {
if (prefer.s.showTranslationButtonInNoteFooter && $i?.policies.canUseTranslator && instance.translatorAvailable) {
if (prefer.s.showTranslationButtonInNoteFooter && policies.value.canUseTranslator && instance.translatorAvailable) {
translate();
}
},

10
packages/frontend/src/components/MkNoteDetailed.vue
View file

@ -166,13 +166,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<i v-else class="ph-smiley ph-bold ph-lg"></i>
<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || prefer.s.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.reactionCount) }}</p>
</button>
<button v-if="prefer.s.showClipButtonInNoteFooter" ref="clipButton" class="_button" :class="$style.noteFooterButton" @mousedown.prevent="clip()">
<button v-if="prefer.s.showClipButtonInNoteFooter" ref="clipButton" class="_button" :class="$style.noteFooterButton" @click.stop="clip()">
<i class="ti ti-paperclip"></i>
</button>
<button v-if="prefer.s.showTranslationButtonInNoteFooter && $i?.policies.canUseTranslator && instance.translatorAvailable" ref="translationButton" class="_button" :class="$style.noteFooterButton" @mousedown.prevent="translate()">
<button v-if="prefer.s.showTranslationButtonInNoteFooter && policies.canUseTranslator && instance.translatorAvailable" ref="translationButton" class="_button" :class="$style.noteFooterButton" :disabled="translating || !!translation" @click.stop="translate()">
<i class="ti ti-language-hiragana"></i>
</button>
<button ref="menuButton" class="_button" :class="$style.noteFooterButton" @mousedown.prevent="showMenu()">
<button ref="menuButton" class="_button" :class="$style.noteFooterButton" @click.stop="showMenu()">
<i class="ti ti-dots"></i>
</button>
</footer>
@ -278,7 +278,7 @@ import MkPagination from '@/components/MkPagination.vue';
import MkReactionIcon from '@/components/MkReactionIcon.vue';
import MkButton from '@/components/MkButton.vue';
import { boostMenuItems, computeRenoteTooltip } from '@/utility/boost-quote.js';
import { instance, isEnabledUrlPreview } from '@/instance.js';
import { instance, isEnabledUrlPreview, policies } from '@/instance.js';
import { getAppearNote } from '@/utility/get-appear-note.js';
import { prefer } from '@/preferences.js';
import { getPluginHandlers } from '@/plugin.js';
@ -388,7 +388,7 @@ const keymap = {
clip();
},
't': () => {
if (prefer.s.showTranslationButtonInNoteFooter && $i?.policies.canUseTranslator && instance.translatorAvailable) {
if (prefer.s.showTranslationButtonInNoteFooter && policies.value.canUseTranslator && instance.translatorAvailable) {
translate();
}
},

33
packages/frontend/src/components/MkNoteSub.vue
View file

@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
class="_button"
:class="$style.noteFooterButton"
:style="renoted ? 'color: var(--MI_THEME-accent) !important;' : ''"
@mousedown="renoted ? undoRenote() : boostVisibility($event.shiftKey)"
@click.stop="renoted ? undoRenote() : boostVisibility($event.shiftKey)"
>
<i class="ph-rocket-launch ph-bold ph-lg"></i>
<p v-if="note.renoteCount > 0" :class="$style.noteFooterButtonCount">{{ note.renoteCount }}</p>
@ -42,24 +42,30 @@ SPDX-License-Identifier: AGPL-3.0-only
ref="quoteButton"
class="_button"
:class="$style.noteFooterButton"
@mousedown="quote()"
@click.stop="quote()"
>
<i class="ph-quotes ph-bold ph-lg"></i>
</button>
<button v-else class="_button" :class="$style.noteFooterButton" disabled>
<i class="ph-prohibit ph-bold ph-lg"></i>
</button>
<button v-if="note.myReaction == null && note.reactionAcceptance !== 'likeOnly'" ref="likeButton" :class="$style.noteFooterButton" class="_button" @mousedown="like()">
<button v-if="note.myReaction == null && note.reactionAcceptance !== 'likeOnly'" ref="likeButton" :class="$style.noteFooterButton" class="_button" @click.stop="like()">
<i class="ph-heart ph-bold ph-lg"></i>
</button>
<button v-if="note.myReaction == null" ref="reactButton" :class="$style.noteFooterButton" class="_button" @mousedown="react()">
<button v-if="note.myReaction == null" ref="reactButton" :class="$style.noteFooterButton" class="_button" @click.stop="react()">
<i v-if="note.reactionAcceptance === 'likeOnly'" class="ph-heart ph-bold ph-lg"></i>
<i v-else class="ph-smiley ph-bold ph-lg"></i>
</button>
<button v-if="note.myReaction != null" ref="reactButton" class="_button" :class="[$style.noteFooterButton, $style.reacted]" @click="undoReact(note)">
<i class="ph-minus ph-bold ph-lg"></i>
</button>
<button ref="menuButton" class="_button" :class="$style.noteFooterButton" @mousedown="menu()">
<button v-if="prefer.s.showClipButtonInNoteFooter" ref="clipButton" :class="$style.noteFooterButton" class="_button" @click.stop="clip()">
<i class="ti ti-paperclip"></i>
</button>
<button v-if="prefer.s.showTranslationButtonInNoteFooter && policies.canUseTranslator && instance.translatorAvailable" ref="translationButton" class="_button" :class="$style.noteFooterButton" :disabled="translating || !!translation" @click.stop="translate()">
<i class="ti ti-language-hiragana"></i>
</button>
<button ref="menuButton" class="_button" :class="$style.noteFooterButton" @click.stop="menu()">
<i class="ph-dots-three ph-bold ph-lg"></i>
</button>
</footer>
@ -78,10 +84,11 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed, ref, shallowRef, watch } from 'vue';
import { computed, inject, ref, shallowRef, useTemplateRef, watch } from 'vue';
import * as Misskey from 'misskey-js';
import { computeMergedCw } from '@@/js/compute-merged-cw.js';
import * as config from '@@/js/config.js';
import type { Ref } from 'vue';
import type { Visibility } from '@/utility/boost-quote.js';
import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
import MkNoteHeader from '@/components/MkNoteHeader.vue';
@ -101,11 +108,12 @@ import { showMovedDialog } from '@/utility/show-moved-dialog.js';
import MkRippleEffect from '@/components/MkRippleEffect.vue';
import { reactionPicker } from '@/utility/reaction-picker.js';
import { claimAchievement } from '@/utility/achievements.js';
import { getNoteMenu } from '@/utility/get-note-menu.js';
import { getNoteClipMenu, getNoteMenu, translateNote } from '@/utility/get-note-menu.js';
import { boostMenuItems, computeRenoteTooltip } from '@/utility/boost-quote.js';
import { prefer } from '@/preferences.js';
import { useNoteCapture } from '@/use/use-note-capture.js';
import SkMutedNote from '@/components/SkMutedNote.vue';
import { instance, policies } from '@/instance';
const props = withDefaults(defineProps<{
note: Misskey.entities.Note;
@ -128,6 +136,7 @@ const translating = ref(false);
const isDeleted = ref(false);
const renoted = ref(false);
const reactButton = shallowRef<HTMLElement>();
const clipButton = useTemplateRef('clipButton');
const renoteButton = shallowRef<HTMLElement>();
const quoteButton = shallowRef<HTMLElement>();
const menuButton = shallowRef<HTMLElement>();
@ -153,6 +162,8 @@ const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
url: appearNote.value.url ?? appearNote.value.uri ?? `${config.url}/notes/${appearNote.value.id}`,
}));
const currentClip = inject<Ref<Misskey.entities.Clip> | null>('currentClip', null);
async function addReplyTo(replyNote: Misskey.entities.Note) {
replies.value.unshift(replyNote);
appearNote.value.repliesCount += 1;
@ -376,6 +387,14 @@ function menu(): void {
os.popupMenu(menu, menuButton.value).then(focus).finally(cleanup);
}
async function clip(): Promise<void> {
os.popupMenu(await getNoteClipMenu({ note: props.note, isDeleted, currentClip: currentClip?.value }), clipButton.value).then(focus);
}
async function translate() {
await translateNote(appearNote.value.id, translation, translating);
}
if (props.detail) {
misskeyApi('notes/children', {
noteId: props.note.id,

9
packages/frontend/src/components/MkNotes.vue
View file

@ -15,13 +15,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #default="{ items: notes }">
<div :class="[$style.root, { [$style.noGap]: noGap, '_gaps': !noGap, [$style.reverse]: pagination.reversed }]">
<template v-for="(note, i) in notes" :key="note.id">
<div v-if="note._shouldInsertAd_" :class="[$style.noteWithAd, { '_gaps': !noGap }]" :data-scroll-anchor="note.id">
<DynamicNote :class="$style.note" :note="note as Misskey.entities.Note" :withHardMute="true"/>
<div :class="$style.ad">
<MkAd :preferForms="['horizontal', 'horizontal-big']"/>
</div>
</div>
<DynamicNote v-else :class="$style.note" :note="note as Misskey.entities.Note" :withHardMute="true" :data-scroll-anchor="note.id"/>
<DynamicNote :class="$style.note" :note="note as Misskey.entities.Note" :withHardMute="true" :data-scroll-anchor="note.id"/>
<MkAd v-if="note._shouldInsertAd_" :preferForms="['horizontal', 'horizontal-big']" :class="$style.ad"/>
</template>
</div>
</template>

17
packages/frontend/src/components/MkNotification.vue
View file

@ -242,13 +242,18 @@ watch(props, async () => {
const type = props.notification.type;
// To avoid extra lookups, only do the query when it actually matters.
if (type === 'follow' || type === 'receiveFollowRequest') {
const user = await misskeyApi('users/show', {
userId: props.notification.userId,
});
if ((type === 'follow' || type === 'receiveFollowRequest') && props.notification.userId) {
try {
const user = await misskeyApi('users/show', {
userId: props.notification.userId,
});
userDetailed.value = user;
followRequestDone.value = !user.hasPendingFollowRequestToYou;
userDetailed.value = user;
followRequestDone.value = !user.hasPendingFollowRequestToYou;
} catch {
userDetailed.value = null;
followRequestDone.value = false;
}
} else {
userDetailed.value = null;
followRequestDone.value = false;

11
packages/frontend/src/components/MkNotifications.vue
View file

@ -14,8 +14,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<template #default="{ items: notifications }">
<component
:is="prefer.s.animation ? TransitionGroup : 'div'" :class="[$style.notifications]"
<SkTransitionGroup
:class="[$style.notifications]"
:enterActiveClass="$style.transition_x_enterActive"
:leaveActiveClass="$style.transition_x_leaveActive"
:enterFromClass="$style.transition_x_enterFrom"
@ -23,11 +23,11 @@ SPDX-License-Identifier: AGPL-3.0-only
:moveClass=" $style.transition_x_move"
tag="div"
>
<template v-for="(notification, i) in notifications" :key="notification.id">
<div v-for="(notification, i) in notifications" :key="notification.id">
<DynamicNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :class="$style.item" :note="notification.note" :withHardMute="true" :data-scroll-anchor="notification.id"/>
<XNotification v-else :class="$style.item" :notification="notification" :withTime="true" :full="true" :data-scroll-anchor="notification.id"/>
</template>
</component>
</div>
</SkTransitionGroup>
</template>
</MkPagination>
</MkPullToRefresh>
@ -45,6 +45,7 @@ import { i18n } from '@/i18n.js';
import { infoImageUrl } from '@/instance.js';
import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
import { prefer } from '@/preferences.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const props = defineProps<{
excludeTypes?: typeof notificationTypes[number][];

1
packages/frontend/src/components/MkPostForm.vue
View file

@ -557,6 +557,7 @@ async function toggleLocalOnly() {
if (confirm.result === 'no') return;
if (confirm.result === 'neverShow') {
prefer.commit('neverShowLocalOnlyInfo', 'true');
miLocalStorage.setItem('neverShowLocalOnlyInfo', 'true');
}
}

12
packages/frontend/src/components/MkReactionsViewer.vue
View file

@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<component
:is="prefer.s.animation ? TransitionGroup : 'div'"
<SkTransitionGroup
:enterActiveClass="$style.transition_x_enterActive"
:leaveActiveClass="$style.transition_x_leaveActive"
:enterFromClass="$style.transition_x_enterFrom"
@ -14,8 +13,10 @@ SPDX-License-Identifier: AGPL-3.0-only
tag="div" :class="$style.root"
>
<XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :isInitial="initialReactions.has(reaction)" :note="note" @reactionToggled="onMockToggleReaction"/>
<slot v-if="hasMoreReactions" name="more"/>
</component>
<div v-if="hasMoreReactions" :key="'$more'" :class="$style.moreReactions">
<slot name="more"/>
</div>
</SkTransitionGroup>
</template>
<script lang="ts" setup>
@ -25,6 +26,7 @@ import { TransitionGroup } from 'vue';
import XReaction from '@/components/MkReactionsViewer.reaction.vue';
import { prefer } from '@/preferences.js';
import { DI } from '@/di.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const props = withDefaults(defineProps<{
note: Misskey.entities.Note;
@ -102,7 +104,7 @@ watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumbe
position: absolute;
}
.root {
.root, .moreReactions {
display: flex;
flex-wrap: wrap;
align-items: center;

19
packages/frontend/src/components/MkTimeline.vue
View file

@ -14,8 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<template #default="{ items: notes }">
<component
:is="prefer.s.animation ? TransitionGroup : 'div'"
<SkTransitionGroup
:class="[$style.root, { [$style.noGap]: noGap, '_gaps': !noGap, [$style.reverse]: paginationQuery.reversed }]"
:enterActiveClass="$style.transition_x_enterActive"
:leaveActiveClass="$style.transition_x_leaveActive"
@ -24,16 +23,11 @@ SPDX-License-Identifier: AGPL-3.0-only
:moveClass=" $style.transition_x_move"
tag="div"
>
<template v-for="(note, i) in notes" :key="note.id">
<div v-if="note._shouldInsertAd_" :class="[$style.noteWithAd, { '_gaps': !noGap }]" :data-scroll-anchor="note.id">
<DynamicNote :class="$style.note" :note="note" :withHardMute="true"/>
<div :class="$style.ad">
<MkAd :preferForms="['horizontal', 'horizontal-big']"/>
</div>
</div>
<DynamicNote v-else :class="$style.note" :note="note" :withHardMute="true" :data-scroll-anchor="note.id"/>
</template>
</component>
<div v-for="(note, i) in notes" :key="note.id" :class="{ '_gaps': !noGap }">
<DynamicNote :class="$style.note" :note="note as Misskey.entities.Note" :withHardMute="true" :data-scroll-anchor="note.id"/>
<MkAd v-if="note._shouldInsertAd_" :preferForms="['horizontal', 'horizontal-big']" :class="$style.ad"/>
</div>
</SkTransitionGroup>
</template>
</MkPagination>
</MkPullToRefresh>
@ -54,6 +48,7 @@ import DynamicNote from '@/components/DynamicNote.vue';
import MkPagination from '@/components/MkPagination.vue';
import { i18n } from '@/i18n.js';
import { infoImageUrl } from '@/instance.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const props = withDefaults(defineProps<{
src: BasicTimelineType | 'mentions' | 'directs' | 'list' | 'antenna' | 'channel' | 'role';

84
packages/frontend/src/components/SkBadgeStrip.vue Normal file
View file

@ -0,0 +1,84 @@
<!--
SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="$style.badges">
<div
v-for="badge of badges"
:key="badge.key"
:class="[$style.badge, semanticClass(badge)]"
>
{{ badge.label }}
</div>
</div>
</template>
<script lang="ts">
export interface Badge {
/**
* ID/key of this badge, must be unique within the strip.
*/
key: string;
/**
* Label text to display.
* Should already be translated.
*/
label: string;
/**
* Semantic style of the badge.
* Defaults to "neutral" if unset.
*/
style?: 'success' | 'neutral' | 'warning' | 'error';
}
</script>
<script setup lang="ts">
import { useCssModule } from 'vue';
const $style = useCssModule();
defineProps<{
badges: Badge[],
}>();
function semanticClass(badge: Badge): string {
const style = badge.style ?? 'neutral';
return $style[`semantic_${style}`];
}
</script>
<style module lang="scss">
.badges {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--MI-margin);
}
.badge {
display: inline-block;
border: solid 1px;
border-radius: var(--MI-radius-sm);
padding: 2px 6px;
font-size: 85%;
}
.semantic_error {
color: var(--MI_THEME-error);
border-color: var(--MI_THEME-error);
}
.semantic_warning {
color: var(--MI_THEME-warn);
border-color: var(--MI_THEME-warn);
}
.semantic_success {
color: var(--MI_THEME-success);
border-color: var(--MI_THEME-success);
}
</style>

1
packages/frontend/src/components/SkFollowingRecentNotes.vue
View file

@ -14,6 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<template #default="{ items: notes }">
<!-- TODO replace with SkDateSeparatedList when merged -->
<MkDateSeparatedList v-slot="{ item: note }" :items="notes" :class="$style.panel" :noGap="true">
<SkFollowingFeedEntry :note="note" :class="props.selectedUserId == note.userId && $style.selected" @select="u => selectUser(u.id)"/>
</MkDateSeparatedList>

13
packages/frontend/src/components/SkMfmWindow.vue
View file

@ -99,6 +99,16 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
</div>
<div class="section _block">
<div class="title">{{ i18n.ts._mfm.unixtime }}</div>
<div class="content">
<p>{{ i18n.ts._mfm.unixtimeDescription }}</p>
<div class="preview">
<Mfm :text="preview_unixtime"/>
<MkTextarea v-model="preview_unixtime"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section _block">
<div class="title">{{ i18n.ts._mfm.inlineCode }}</div>
<div class="content">
@ -429,6 +439,9 @@ const preview_small = ref(
const preview_center = ref(
`<center>${i18n.ts._mfm.dummy}</center>`,
);
const preview_unixtime = ref(
`$[unixtime ${Math.floor(Date.now() / 1000)}]`,
);
const preview_inlineCode = ref('`<: "Hello, world!"`');
const preview_blockCode = ref(
'```ai\n~ (#i, 100) {\n\t<: ? ((i % 15) = 0) "FizzBuzz"\n\t\t.? ((i % 3) = 0) "Fizz"\n\t\t.? ((i % 5) = 0) "Buzz"\n\t\t. i\n}\n```',

2
packages/frontend/src/components/SkMutedNote.vue
View file

@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkUserName :user="note.user"/>
</template>
</I18n>
<I18n v-else-if="prefer.s.showSoftWordMutedWord" :src="i18n.ts.userSaysSomething" tag="small">
<I18n v-else-if="!prefer.s.showSoftWordMutedWord" :src="i18n.ts.userSaysSomething" tag="small">
<template #name>
<MkUserName :user="note.user"/>
</template>

10
packages/frontend/src/components/SkNote.vue
View file

@ -155,13 +155,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<i v-else class="ph-smiley ph-bold ph-lg"></i>
<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || prefer.s.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.reactionCount) }}</p>
</button>
<button v-if="prefer.s.showClipButtonInNoteFooter" ref="clipButton" :class="$style.footerButton" class="_button" @mousedown.prevent="clip()">
<button v-if="prefer.s.showClipButtonInNoteFooter" ref="clipButton" :class="$style.footerButton" class="_button" @click.stop="clip()">
<i class="ti ti-paperclip"></i>
</button>
<button v-if="prefer.s.showTranslationButtonInNoteFooter && $i?.policies.canUseTranslator && instance.translatorAvailable" ref="translationButton" class="_button" :class="$style.footerButton" @mousedown.prevent="translate()">
<button v-if="prefer.s.showTranslationButtonInNoteFooter && policies.canUseTranslator && instance.translatorAvailable" class="_button" :class="$style.footerButton" :disabled="translating || !!translation" @click.stop="translate()">
<i class="ti ti-language-hiragana"></i>
</button>
<button ref="menuButton" :class="$style.footerButton" class="_button" @mousedown.prevent="showMenu()">
<button ref="menuButton" :class="$style.footerButton" class="_button" @click.stop="showMenu()">
<i class="ti ti-dots"></i>
</button>
</footer>
@ -226,7 +226,7 @@ import { getNoteSummary } from '@/utility/get-note-summary.js';
import MkRippleEffect from '@/components/MkRippleEffect.vue';
import { showMovedDialog } from '@/utility/show-moved-dialog.js';
import { boostMenuItems, computeRenoteTooltip } from '@/utility/boost-quote.js';
import { instance, isEnabledUrlPreview } from '@/instance.js';
import { instance, isEnabledUrlPreview, policies } from '@/instance.js';
import { focusPrev, focusNext } from '@/utility/focus.js';
import { getAppearNote } from '@/utility/get-appear-note.js';
import { prefer } from '@/preferences.js';
@ -360,7 +360,7 @@ const keymap = {
clip();
},
't': () => {
if (prefer.s.showTranslationButtonInNoteFooter && $i?.policies.canUseTranslator && instance.translatorAvailable) {
if (prefer.s.showTranslationButtonInNoteFooter && policies.value.canUseTranslator && instance.translatorAvailable) {
translate();
}
},

10
packages/frontend/src/components/SkNoteDetailed.vue
View file

@ -171,13 +171,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<i v-else class="ph-smiley ph-bold ph-lg"></i>
<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || prefer.s.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.reactionCount) }}</p>
</button>
<button v-if="prefer.s.showClipButtonInNoteFooter" ref="clipButton" class="_button" :class="$style.noteFooterButton" @mousedown.prevent="clip()">
<button v-if="prefer.s.showClipButtonInNoteFooter" ref="clipButton" class="_button" :class="$style.noteFooterButton" @click.stop="clip()">
<i class="ti ti-paperclip"></i>
</button>
<button v-if="prefer.s.showTranslationButtonInNoteFooter && $i?.policies.canUseTranslator && instance.translatorAvailable" ref="translationButton" class="_button" :class="$style.noteFooterButton" @mousedown.prevent="translate()">
<button v-if="prefer.s.showTranslationButtonInNoteFooter && policies.canUseTranslator && instance.translatorAvailable" ref="translationButton" class="_button" :class="$style.noteFooterButton" :disabled="translating || !!translation" @click.stop="translate()">
<i class="ti ti-language-hiragana"></i>
</button>
<button ref="menuButton" class="_button" :class="$style.noteFooterButton" @mousedown.prevent="showMenu()">
<button ref="menuButton" class="_button" :class="$style.noteFooterButton" @click.stop="showMenu()">
<i class="ti ti-dots"></i>
</button>
</footer>
@ -283,7 +283,7 @@ import MkPagination from '@/components/MkPagination.vue';
import MkReactionIcon from '@/components/MkReactionIcon.vue';
import MkButton from '@/components/MkButton.vue';
import { boostMenuItems, computeRenoteTooltip } from '@/utility/boost-quote.js';
import { instance, isEnabledUrlPreview } from '@/instance.js';
import { instance, isEnabledUrlPreview, policies } from '@/instance.js';
import { getAppearNote } from '@/utility/get-appear-note.js';
import { prefer } from '@/preferences.js';
import { getPluginHandlers } from '@/plugin.js';
@ -394,7 +394,7 @@ const keymap = {
clip();
},
't': () => {
if (prefer.s.showTranslationButtonInNoteFooter && $i?.policies.canUseTranslator && instance.translatorAvailable) {
if (prefer.s.showTranslationButtonInNoteFooter && policies.value.canUseTranslator && instance.translatorAvailable) {
translate();
}
},

33
packages/frontend/src/components/SkNoteSub.vue
View file

@ -40,7 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-only
class="_button"
:class="$style.noteFooterButton"
:style="renoted ? 'color: var(--MI_THEME-accent) !important;' : ''"
@mousedown="renoted ? undoRenote() : boostVisibility($event.shiftKey)"
@click.stop="renoted ? undoRenote() : boostVisibility($event.shiftKey)"
>
<i class="ph-rocket-launch ph-bold ph-lg"></i>
<p v-if="note.renoteCount > 0" :class="$style.noteFooterButtonCount">{{ note.renoteCount }}</p>
@ -50,24 +50,30 @@ SPDX-License-Identifier: AGPL-3.0-only
ref="quoteButton"
class="_button"
:class="$style.noteFooterButton"
@mousedown="quote()"
@click.stop="quote()"
>
<i class="ph-quotes ph-bold ph-lg"></i>
</button>
<button v-else class="_button" :class="$style.noteFooterButton" disabled>
<i class="ph-prohibit ph-bold ph-lg"></i>
</button>
<button v-if="note.myReaction == null && note.reactionAcceptance !== 'likeOnly'" ref="likeButton" :class="$style.noteFooterButton" class="_button" @mousedown="like()">
<button v-if="note.myReaction == null && note.reactionAcceptance !== 'likeOnly'" ref="likeButton" :class="$style.noteFooterButton" class="_button" @click.stop="like()">
<i class="ph-heart ph-bold ph-lg"></i>
</button>
<button v-if="note.myReaction == null" ref="reactButton" :class="$style.noteFooterButton" class="_button" @mousedown="react()">
<button v-if="note.myReaction == null" ref="reactButton" :class="$style.noteFooterButton" class="_button" @click.stop="react()">
<i v-if="note.reactionAcceptance === 'likeOnly'" class="ph-heart ph-bold ph-lg"></i>
<i v-else class="ph-smiley ph-bold ph-lg"></i>
</button>
<button v-if="note.myReaction != null" ref="reactButton" class="_button" :class="[$style.noteFooterButton, $style.reacted]" @click="undoReact(note)">
<i class="ph-minus ph-bold ph-lg"></i>
</button>
<button ref="menuButton" class="_button" :class="$style.noteFooterButton" @mousedown="menu()">
<button v-if="prefer.s.showClipButtonInNoteFooter" ref="clipButton" :class="$style.noteFooterButton" class="_button" @click.stop="clip()">
<i class="ti ti-paperclip"></i>
</button>
<button v-if="prefer.s.showTranslationButtonInNoteFooter && policies.canUseTranslator && instance.translatorAvailable" ref="translationButton" class="_button" :class="$style.noteFooterButton" :disabled="translating || !!translation" @click.stop="translate()">
<i class="ti ti-language-hiragana"></i>
</button>
<button ref="menuButton" class="_button" :class="$style.noteFooterButton" @click.stop="menu()">
<i class="ph-dots-three ph-bold ph-lg"></i>
</button>
</footer>
@ -86,10 +92,11 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed, inject, ref, shallowRef, watch } from 'vue';
import { computed, inject, ref, shallowRef, useTemplateRef, watch } from 'vue';
import * as Misskey from 'misskey-js';
import { computeMergedCw } from '@@/js/compute-merged-cw.js';
import * as config from '@@/js/config.js';
import type { Ref } from 'vue';
import type { Visibility } from '@/utility/boost-quote.js';
import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
import SkNoteHeader from '@/components/SkNoteHeader.vue';
@ -109,11 +116,12 @@ import { showMovedDialog } from '@/utility/show-moved-dialog.js';
import MkRippleEffect from '@/components/MkRippleEffect.vue';
import { reactionPicker } from '@/utility/reaction-picker.js';
import { claimAchievement } from '@/utility/achievements.js';
import { getNoteMenu } from '@/utility/get-note-menu.js';
import { getNoteClipMenu, getNoteMenu, translateNote } from '@/utility/get-note-menu.js';
import { boostMenuItems, computeRenoteTooltip } from '@/utility/boost-quote.js';
import { prefer } from '@/preferences.js';
import { useNoteCapture } from '@/use/use-note-capture.js';
import SkMutedNote from '@/components/SkMutedNote.vue';
import { instance, policies } from '@/instance';
const props = withDefaults(defineProps<{
note: Misskey.entities.Note;
@ -142,6 +150,7 @@ const translating = ref(false);
const isDeleted = ref(false);
const renoted = ref(false);
const reactButton = shallowRef<HTMLElement>();
const clipButton = useTemplateRef('clipButton');
const renoteButton = shallowRef<HTMLElement>();
const quoteButton = shallowRef<HTMLElement>();
const menuButton = shallowRef<HTMLElement>();
@ -167,6 +176,8 @@ const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
url: appearNote.value.url ?? appearNote.value.uri ?? `${config.url}/notes/${appearNote.value.id}`,
}));
const currentClip = inject<Ref<Misskey.entities.Clip> | null>('currentClip', null);
async function addReplyTo(replyNote: Misskey.entities.Note) {
replies.value.unshift(replyNote);
appearNote.value.repliesCount += 1;
@ -390,6 +401,14 @@ function menu(): void {
os.popupMenu(menu, menuButton.value).then(focus).finally(cleanup);
}
async function clip(): Promise<void> {
os.popupMenu(await getNoteClipMenu({ note: props.note, isDeleted, currentClip: currentClip?.value }), clipButton.value).then(focus);
}
async function translate() {
await translateNote(appearNote.value.id, translation, translating);
}
if (props.detail) {
misskeyApi('notes/children', {
noteId: props.note.id,

43
packages/frontend/src/components/SkTransitionGroup.vue Normal file
View file

@ -0,0 +1,43 @@
<!--
SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<TransitionGroup v-if="animate ?? prefer.s.animation" v-bind="props" :class="props.class">
<slot></slot>
</TransitionGroup>
<component :is="tag" v-else :class="props.class">
<slot></slot>
</component>
</template>
<script setup lang="ts">
import type { TransitionGroupProps } from 'vue';
import { prefer } from '@/preferences';
// This is a "best guess" type.
// If any valid :class binding produces a type error here, then please change this to match.
type ClassBinding = string | Record<string, boolean | undefined>;
// This can be an inline type, but pulling it out makes TS errors clearer.
interface SkTransitionGroupProps extends TransitionGroupProps {
/**
* Override CSS styles for the TransitionGroup or native element.
*/
class?: undefined | ClassBinding | ClassBinding[];
/**
* If true, will render a TransitionGroup.
* If false, will render a native element.
* If null or undefined (default), will respect the value of prefer.s.animation.
*/
animate?: boolean | undefined | null;
}
const props = withDefaults(defineProps<SkTransitionGroupProps>(), {
tag: 'div',
class: undefined,
animate: undefined,
});
</script>

12
packages/frontend/src/components/global/MkStickyContainer.vue
View file

@ -5,17 +5,17 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div ref="rootEl">
<div ref="headerEl" :class="$style.header">
<div ref="headerEl" :class="{ [$style.header]: sticky }">
<slot name="header"></slot>
</div>
<div
:class="$style.body"
:class="{ [$style.body]: sticky }"
:data-sticky-container-header-height="headerHeight"
:data-sticky-container-footer-height="footerHeight"
>
<slot></slot>
</div>
<div ref="footerEl" :class="$style.footer">
<div ref="footerEl" :class="{ [$style.footer]: sticky }">
<slot name="footer"></slot>
</div>
</div>
@ -25,6 +25,12 @@ SPDX-License-Identifier: AGPL-3.0-only
import { onMounted, onUnmounted, provide, inject, ref, watch, useTemplateRef } from 'vue';
import { DI } from '@/di.js';
withDefaults(defineProps<{
sticky?: boolean,
}>(), {
sticky: true,
});
const rootEl = useTemplateRef('rootEl');
const headerEl = useTemplateRef('headerEl');
const footerEl = useTemplateRef('footerEl');

15
packages/frontend/src/components/global/StackingRouterView.vue
View file

@ -4,12 +4,12 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<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"
:duration="200"
tag="div" :class="$style.tabs"
>
@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
</div>
</TransitionGroup>
</SkTransitionGroup>
</template>
<script lang="ts" setup>
@ -47,6 +47,7 @@ import { prefer } from '@/preferences.js';
import MkLoadingPage from '@/pages/_loading_.vue';
import { DI } from '@/di.js';
import { deepEqual } from '@/utility/deep-equal.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const props = defineProps<{
router?: Router;

2
packages/frontend/src/i.ts
View file

@ -3,7 +3,7 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { reactive } from 'vue';
import { computed, reactive } from 'vue';
import * as Misskey from 'misskey-js';
import { miLocalStorage } from '@/local-storage.js';

10
packages/frontend/src/instance.ts
View file

@ -3,11 +3,12 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { computed, reactive } from 'vue';
import { computed, nextTick, reactive } from 'vue';
import * as Misskey from 'misskey-js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { miLocalStorage } from '@/local-storage.js';
import { DEFAULT_INFO_IMAGE_URL, DEFAULT_NOT_FOUND_IMAGE_URL, DEFAULT_SERVER_ERROR_IMAGE_URL } from '@@/js/const.js';
import { $i } from '@/i';
// TODO: 他のタブと永続化されたstateを同期
@ -38,6 +39,8 @@ export const notFoundImageUrl = computed(() => instance.notFoundImageUrl ?? DEFA
export const isEnabledUrlPreview = computed(() => instance.enableUrlPreview ?? true);
export const policies = computed<Misskey.entities.RolePolicies>(() => $i?.policies ?? instance.policies);
export async function fetchInstance(force = false): Promise<Misskey.entities.MetaDetailed> {
if (!force) {
const cachedAt = miLocalStorage.getItem('instanceCachedAt') ? parseInt(miLocalStorage.getItem('instanceCachedAt')!) : 0;
@ -60,3 +63,8 @@ export async function fetchInstance(force = false): Promise<Misskey.entities.Met
return instance;
}
// instance export can be empty sometimes, which causes problems.
await fetchInstance().catch(err => {
console.warn('Initial meta fetch failed:', err);
});

10
packages/frontend/src/local-storage.ts
View file

@ -48,23 +48,23 @@ export type Keys = (
//const safeSessionStorage = new Map<Keys, string>();
export const miLocalStorage = {
getItem: (key: Keys): string | null => {
return window.localStorage.getItem(key);
getItem: <T extends string = string>(key: Keys): T | null => {
return window.localStorage.getItem(key) as T | null;
},
setItem: (key: Keys, value: string): void => {
setItem: <T extends string = string>(key: Keys, value: T): void => {
window.localStorage.setItem(key, value);
},
removeItem: (key: Keys): void => {
window.localStorage.removeItem(key);
},
getItemAsJson: (key: Keys): any | undefined => {
getItemAsJson: <T = any>(key: Keys): T | undefined => {
const item = miLocalStorage.getItem(key);
if (item === null) {
return undefined;
}
return JSON.parse(item);
},
setItemAsJson: (key: Keys, value: any): void => {
setItemAsJson: <T = any>(key: Keys, value: T): void => {
miLocalStorage.setItem(key, JSON.stringify(value));
},
};

6
packages/frontend/src/os.ts
View file

@ -101,7 +101,7 @@ export const apiWithDialog = (<
});
export function promiseDialog<T extends Promise<any>>(
promise: T,
promise: T | (() => T),
onSuccess?: ((res: Awaited<T>) => void) | null,
onFailure?: ((err: Misskey.api.APIError) => void) | null,
text?: string,
@ -109,6 +109,10 @@ export function promiseDialog<T extends Promise<any>>(
const showing = ref(true);
const success = ref(false);
if (typeof(promise) === 'function') {
promise = promise();
}
promise.then(res => {
if (onSuccess) {
showing.value = false;

229
packages/frontend/src/pages/admin-user.vue
View file

@ -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">
@ -248,6 +243,7 @@ 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 MkChart from '@/components/MkChart.vue';
import MkObjectView from '@/components/MkObjectView.vue';
import MkTextarea from '@/components/MkTextarea.vue';
@ -272,6 +268,7 @@ 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;
@ -304,6 +301,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 = {
@ -323,10 +412,13 @@ function createFetcher() {
userId: props.userId,
}), iAmAdmin ? misskeyApi('admin/get-user-ips', {
userId: props.userId,
}) : Promise.resolve(null)]).then(([_user, _info, _ips]) => {
}) : Promise.resolve(null), iAmAdmin ? misskeyApi('ap/get', {
uri: `${url}/users/${props.userId}`,
}).catch(() => null) : null]).then(([_user, _info, _ips, _ap]) => {
user.value = _user;
info.value = _info;
ips.value = _ips;
ap.value = _ap;
moderator.value = info.value.isModerator;
silenced.value = info.value.isSilenced;
approved.value = info.value.approved;
@ -338,23 +430,30 @@ function createFetcher() {
});
}
function refreshUser() {
init.value = createFetcher();
async function refreshUser() {
// Not a typo - createFetcher() returns a function()
await createFetcher()();
}
async function onMandatoryCWChanged(value: string) {
await os.apiWithDialog('admin/cw-user', { userId: props.userId, cw: value });
refreshUser();
await os.promiseDialog(async () => {
await misskeyApi('admin/cw-user', { userId: props.userId, cw: 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 });
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 });
refreshUser();
});
}
async function resetPassword() {
@ -368,7 +467,7 @@ async function resetPassword() {
const { password } = await misskeyApi('admin/reset-password', {
userId: user.value.id,
});
os.alert({
await os.alert({
type: 'success',
text: i18n.tsx.newPasswordIs({ password }),
});
@ -383,7 +482,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 +495,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 +510,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 +525,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 +541,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 +553,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 +565,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() {
@ -504,7 +588,7 @@ async function deleteAccount() {
userId: user.value.id,
});
} else {
os.alert({
await os.alert({
type: 'error',
text: 'input not match',
});
@ -544,18 +628,22 @@ 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);
}
@ -591,14 +679,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 +862,7 @@ definePage(() => ({
cursor: pointer;
}
// Sync with instance-info.vue
.buttonStrip {
margin: calc(var(--MI-margin) / 2 * -1);

15
packages/frontend/src/pages/chat/XMessage.vue
View file

@ -28,12 +28,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<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,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:class="$style.reactionIcon"
/>
</div>
</TransitionGroup>
</SkTransitionGroup>
</div>
</div>
</template>
@ -73,6 +73,7 @@ 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';
const $i = ensureSignin();

19
packages/frontend/src/pages/chat/room.vue
View file

@ -31,23 +31,23 @@ 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"
>
<template v-for="item in timeline.toReversed()" :key="item.id">
<div v-for="item in timeline.toReversed()" :key="item.id">
<XMessage v-if="item.type === 'item'" :message="item.data"/>
<div v-else-if="item.type === 'date'" :class="$style.dateDivider">
<span><i class="ti ti-chevron-up"></i> {{ item.nextText }}</span>
<span style="height: 1em; width: 1px; background: var(--MI_THEME-divider);"></span>
<span>{{ item.prevText }} <i class="ti ti-chevron-down"></i></span>
</div>
</template>
</TransitionGroup>
</div>
</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();

56
packages/frontend/src/pages/explore.featured.vue
View file

@ -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,
},
};

1
packages/frontend/src/pages/favorites.vue
View file

@ -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>

466
packages/frontend/src/pages/instance-info.vue
View file

@ -6,98 +6,130 @@ 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">
<!-- 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>
<!-- 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>
<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>
</div>
<MkKeyValue>
<template #key>{{ i18n.ts.description }}</template>
<template #value>{{ instance.description }}</template>
</MkKeyValue>
<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>
<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>Moderation</template>
<div class="_gaps_s">
<MkKeyValue>
<template #key>
{{ i18n.ts._delivery.status }}
</template>
<template #value>
{{ i18n.ts._delivery._type[suspensionState] }}
</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>
<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 :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>
<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>
</FormSection>
</div>
<div v-else-if="tab === 'chart'" class="_gaps_m">
<div class="cmhjzshl">
@ -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, watch, useCssModule } 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,6 +230,13 @@ 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 { acct } from '@/filters/user';
import MkFolder from '@/components/MkFolder.vue';
import MkNumber from '@/components/MkNumber.vue';
import SkBadgeStrip from '@/components/SkBadgeStrip.vue';
const $style = useCssModule();
const props = defineProps<{
host: string;
@ -233,6 +273,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 +353,26 @@ 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,
});
const [m, i] = await Promise.all([
iAmAdmin ? misskeyApi('admin/meta') : null,
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 +387,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 +501,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,14 +523,12 @@ 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();
@ -428,17 +545,17 @@ const headerTabs = computed(() => [{
key: 'overview',
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 +639,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>

2
packages/frontend/src/pages/page.vue
View file

@ -347,7 +347,7 @@ definePage(() => ({
text-align: center;
border-radius: 99rem;
& :global(.ti) {
& :global(.ti), & :global(.ph-lg) {
line-height: 2.5rem;
}

31
packages/frontend/src/pages/settings/custom-css.vue
View file

@ -22,23 +22,24 @@ 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';
import { reloadAsk } from '@/utility/reload-ask';
const localCustomCss = ref(miLocalStorage.getItem('customCss') ?? '');
const customCssModel = prefer.model('customCss');
const localCustomCss = computed<string>({
get() {
return customCssModel.value ?? miLocalStorage.getItem('customCss') ?? '';
},
set(newCustomCss) {
customCssModel.value = newCustomCss;
if (newCustomCss) {
miLocalStorage.setItem('customCss', newCustomCss);
} else {
miLocalStorage.removeItem('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();
reloadAsk(true);
},
});
const headerActions = computed(() => []);

24
packages/frontend/src/pages/settings/mute-block.vue
View file

@ -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,

139
packages/frontend/src/pages/settings/preferences.vue
View file

@ -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>
@ -196,8 +197,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['pinned', 'list']">
<MkFolder>
<SearchMarker v-slot="slotProps" :keywords="['pinned', 'list']">
<MkFolder :defaultOpen="slotProps.isParentOfTarget">
<template #label><SearchLabel>{{ i18n.ts.pinnedList }}</SearchLabel></template>
<!-- 複数ピン止め管理できるようにしたいけどめんどいので一旦ひとつのみ -->
<MkButton v-if="prefer.r.pinnedUserLists.value.length === 0" @click="setPinnedList()">{{ i18n.ts.add }}</MkButton>
@ -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>
@ -436,9 +444,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</SearchMarker>
</div>
<SearchMarker :keywords="['default', 'note', 'visibility']">
<SearchMarker v-slot="slotProps" :keywords="['default', 'note', 'visibility']">
<MkDisableSection :disabled="rememberNoteVisibility">
<MkFolder>
<MkFolder :defaultOpen="slotProps.isParentOfTarget">
<template #label><SearchLabel>{{ i18n.ts.defaultNoteVisibility }}</SearchLabel></template>
<template v-if="defaultNoteVisibility === 'public'" #suffix>{{ i18n.ts._visibility.public }}</template>
<template v-else-if="defaultNoteVisibility === 'home'" #suffix>{{ i18n.ts._visibility.home }}</template>
@ -675,7 +683,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 +795,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>
@ -850,24 +858,28 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['boost', 'show', 'visib', 'selector']">
<SearchMarker v-slot="slotProps" :keywords="['boost', 'show', 'visib', 'selector']">
<MkFolder :defaultOpen="slotProps.isParentOfTarget">
<template #label><SearchLabel>{{ i18n.ts.boostSettings }}</SearchLabel></template>
<div class="_gaps_m">
<MkPreferenceContainer k="showVisibilitySelectorOnBoost">
<MkSwitch v-model="showVisibilitySelectorOnBoost">
<template #label><SearchLabel>{{ i18n.ts.showVisibilitySelectorOnBoost }}</SearchLabel></template>
<template #caption>{{ i18n.ts.showVisibilitySelectorOnBoostDescription }}</template>
</MkSwitch>
</MkPreferenceContainer>
<MkPreferenceContainer k="visibilityOnBoost">
<MkSelect v-model="visibilityOnBoost">
<template #label><SearchLabel>{{ i18n.ts.visibilityOnBoost }}</SearchLabel></template>
<option value="public">{{ i18n.ts._visibility['public'] }}</option>
<option value="home">{{ i18n.ts._visibility['home'] }}</option>
<option value="followers">{{ i18n.ts._visibility['followers'] }}</option>
</MkSelect>
</MkPreferenceContainer>
<SearchMarker :keywords="['boost', 'show', 'visib', 'selector']">
<MkPreferenceContainer k="showVisibilitySelectorOnBoost">
<MkSwitch v-model="showVisibilitySelectorOnBoost">
<template #label><SearchLabel>{{ i18n.ts.showVisibilitySelectorOnBoost }}</SearchLabel></template>
<template #caption>{{ i18n.ts.showVisibilitySelectorOnBoostDescription }}</template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['boost', 'visib']">
<MkPreferenceContainer k="visibilityOnBoost">
<MkSelect v-model="visibilityOnBoost">
<template #label><SearchLabel>{{ i18n.ts.visibilityOnBoost }}</SearchLabel></template>
<option value="public">{{ i18n.ts._visibility['public'] }}</option>
<option value="home">{{ i18n.ts._visibility['home'] }}</option>
<option value="followers">{{ i18n.ts._visibility['followers'] }}</option>
</MkSelect>
</MkPreferenceContainer>
</SearchMarker>
</div>
</MkFolder>
</SearchMarker>
@ -899,8 +911,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['emoji', 'dictionary', 'additional', 'extra']">
<MkFolder>
<SearchMarker v-slot="slotProps" :keywords="['emoji', 'dictionary', 'additional', 'extra']">
<MkFolder :defaultOpen="slotProps.isParentOfTarget">
<template #label><SearchLabel>{{ i18n.ts.additionalEmojiDictionary }}</SearchLabel></template>
<div class="_buttons">
<template v-for="lang in emojiIndexLangs" :key="lang">
@ -962,7 +974,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');
@ -1022,9 +1033,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');
@ -1040,7 +1048,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');
@ -1049,34 +1056,62 @@ const useCustomSearchEngine = computed(() => !Object.keys(searchEngineMap).inclu
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');
const langModel = prefer.model('lang');
const lang = computed<string>({
get() {
return langModel.value ?? miLocalStorage.getItem('lang') ?? 'en-US';
},
set(newLang) {
langModel.value = newLang;
miLocalStorage.setItem('lang', newLang);
miLocalStorage.removeItem('locale');
miLocalStorage.removeItem('localeVersion');
},
});
watch(fontSize, () => {
if (fontSize.value == null) {
miLocalStorage.removeItem('fontSize');
} else {
miLocalStorage.setItem('fontSize', fontSize.value);
}
const fontSizeModel = prefer.model('fontSize');
const fontSize = computed<'0' | '1' | '2' | '3'>({
get() {
return fontSizeModel.value ?? miLocalStorage.getItem('fontSize') ?? '0';
},
set(newFontSize) {
fontSizeModel.value = newFontSize;
if (newFontSize !== '0') {
miLocalStorage.setItem('fontSize', newFontSize);
} else {
miLocalStorage.removeItem('fontSize');
}
},
});
watch(useSystemFont, () => {
if (useSystemFont.value) {
miLocalStorage.setItem('useSystemFont', 't');
} else {
miLocalStorage.removeItem('useSystemFont');
}
const useSystemFontModel = prefer.model('useSystemFont');
const useSystemFont = computed<boolean>({
get() {
return useSystemFontModel.value ?? (miLocalStorage.getItem('useSystemFont') != null);
},
set(newUseSystemFont) {
useSystemFontModel.value = newUseSystemFont;
if (newUseSystemFont) {
miLocalStorage.setItem('useSystemFont', 't');
} else {
miLocalStorage.removeItem('useSystemFont');
}
},
});
watch(cornerRadius, () => {
if (cornerRadius.value == null) {
miLocalStorage.removeItem('cornerRadius');
} else {
miLocalStorage.setItem('cornerRadius', cornerRadius.value);
}
const cornerRadiusModel = prefer.model('cornerRadius');
const cornerRadius = computed<'misskey' | 'sharkey'>({
get() {
return cornerRadiusModel.value ?? miLocalStorage.getItem('cornerRadius') ?? 'sharkey';
},
set(newCornerRadius) {
cornerRadiusModel.value = newCornerRadius;
if (newCornerRadius === 'sharkey') {
miLocalStorage.removeItem('cornerRadius');
} else {
miLocalStorage.setItem('cornerRadius', newCornerRadius);
}
},
});
watch([
@ -1105,7 +1140,9 @@ watch([
contextMenu,
fontSize,
useSystemFont,
cornerRadius,
makeEveryTextElementsSelectable,
noteDesign,
], async () => {
await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
});

22
packages/frontend/src/pages/settings/privacy.vue
View file

@ -203,19 +203,21 @@ SPDX-License-Identifier: AGPL-3.0-only
</FormSlot>
</SearchMarker>
<SearchMarker :keywords="['federate', 'auth', 'fetch']">
<MkFolder v-if="instance.federation !== 'none'">
<SearchMarker v-slot="slotProps" :keywords="['federate', 'auth', 'fetch']">
<MkFolder v-if="instance.federation !== 'none'" :defaultOpen="slotProps.isParentOfTarget">
<template #label><SearchLabel>{{ i18n.ts.authorizedFetchSection }}</SearchLabel></template>
<template #suffix>{{ computedAllowUnsignedFetch !== 'always' ? i18n.ts.enabled : i18n.ts.disabled }}</template>
<MkRadios v-model="allowUnsignedFetch" @update:modelValue="save()">
<template #label><SearchLabel>{{ i18n.ts.authorizedFetchLabel }}</SearchLabel></template>
<template #caption><SearchKeyword>{{ i18n.ts.authorizedFetchDescription }}</SearchKeyword></template>
<option value="never">{{ i18n.ts._authorizedFetchValue.never }} - {{ i18n.ts._authorizedFetchValueDescription.never }}</option>
<option value="always">{{ i18n.ts._authorizedFetchValue.always }} - {{ i18n.ts._authorizedFetchValueDescription.always }}</option>
<option value="essential">{{ i18n.ts._authorizedFetchValue.essential }} - {{ i18n.ts._authorizedFetchValueDescription.essential }}</option>
<option value="staff">{{ i18n.ts._authorizedFetchValue.staff }} - {{ i18n.tsx._authorizedFetchValueDescription.staff({ value: i18n.ts._authorizedFetchValue[instance.allowUnsignedFetch] }) }}</option>
</MkRadios>
<SearchMarker :keywords="['federate', 'auth', 'fetch']">
<MkRadios v-model="allowUnsignedFetch" @update:modelValue="save()">
<template #label><SearchLabel>{{ i18n.ts.authorizedFetchLabel }}</SearchLabel></template>
<template #caption><SearchKeyword>{{ i18n.ts.authorizedFetchDescription }}</SearchKeyword></template>
<option value="never">{{ i18n.ts._authorizedFetchValue.never }} - {{ i18n.ts._authorizedFetchValueDescription.never }}</option>
<option value="always">{{ i18n.ts._authorizedFetchValue.always }} - {{ i18n.ts._authorizedFetchValueDescription.always }}</option>
<option value="essential">{{ i18n.ts._authorizedFetchValue.essential }} - {{ i18n.ts._authorizedFetchValueDescription.essential }}</option>
<option value="staff">{{ i18n.ts._authorizedFetchValue.staff }} - {{ i18n.tsx._authorizedFetchValueDescription.staff({ value: i18n.ts._authorizedFetchValue[instance.allowUnsignedFetch] }) }}</option>
</MkRadios>
</SearchMarker>
</MkFolder>
</SearchMarker>

10
packages/frontend/src/pages/settings/profile.vue
View file

@ -71,9 +71,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkSelect>
</SearchMarker>
<SearchMarker :keywords="['metadata']">
<SearchMarker v-slot="slotProps" :keywords="['metadata']">
<FormSlot>
<MkFolder>
<MkFolder :defaultOpen="slotProps.isParentOfTarget">
<template #icon><i class="ti ti-list"></i></template>
<template #label><SearchLabel>{{ i18n.ts._profile.metadataEdit }}</SearchLabel></template>
<template #footer>
@ -139,8 +139,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkSelect>
</SearchMarker>
<SearchMarker>
<MkFolder>
<SearchMarker v-slot="slotProps">
<MkFolder :defaultOpen="slotProps.isParentOfTarget">
<template #label><SearchLabel>{{ i18n.ts.advancedSettings }}</SearchLabel></template>
<div class="_gaps_m">
@ -149,6 +149,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label><SearchLabel>{{ i18n.ts.flagAsCat }}</SearchLabel></template>
<template #caption>{{ i18n.ts.flagAsCatDescription }}</template>
</MkSwitch>
</SearchMarker>
<SearchMarker :keywords="['cat']">
<MkSwitch v-if="profile.isCat" v-model="profile.speakAsCat">
<template #label><SearchLabel>{{ i18n.ts.flagSpeakAsCat }}</SearchLabel></template>
<template #caption>{{ i18n.ts.flagSpeakAsCatDescription }}</template>

28
packages/frontend/src/preferences/def.ts
View file

@ -477,4 +477,32 @@ export const PREF_DEF = {
default: true,
},
//#endregion
//#region hybrid options
// These exist in preferences, but may have a legacy value in local storage.
// Some parts of the system may still reference the legacy storage so both need to stay in sync!
// Null means "fall back to existing value from localStorage"
// For all of these preferences, "null" means fall back to existing value in localStorage.
fontSize: {
default: null as null | '0' | '1' | '2' | '3',
},
useSystemFont: {
default: null as null | boolean,
},
cornerRadius: {
default: null as null | 'misskey' | 'sharkey',
},
lang: {
default: null as null | string,
},
customCss: {
default: null as null | string,
},
neverShowDonationInfo: {
default: null as null | 'true',
},
neverShowLocalOnlyInfo: {
default: null as null | 'true',
},
//#endregion
} satisfies PreferencesDefinition;

6
packages/frontend/src/style.scss
View file

@ -235,6 +235,12 @@ rt {
contain: strict;
overflow: auto;
overscroll-behavior: contain;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
._pageScrollable {

6
packages/frontend/src/ui/_common_/common.vue
View file

@ -67,8 +67,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<XUpload v-if="uploads.length > 0"/>
<component
:is="prefer.s.animation ? TransitionGroup : 'div'"
<SkTransitionGroup
tag="div"
:class="[$style.notifications, {
[$style.notificationsPosition_leftTop]: prefer.s.notificationPosition === 'leftTop',
@ -87,7 +86,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-for="notification in notifications" :key="notification.id" :class="$style.notification" :style="{ pointerEvents: getPointerEvents() }">
<XNotification :notification="notification"/>
</div>
</component>
</SkTransitionGroup>
<XStreamIndicator/>
@ -115,6 +114,7 @@ import { i18n } from '@/i18n.js';
import { prefer } from '@/preferences.js';
import { globalEvents } from '@/events.js';
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
const XUpload = defineAsyncComponent(() => import('./upload.vue'));

13
packages/frontend/src/ui/_common_/navbar.vue
View file

@ -7,6 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="[$style.root, { [$style.iconOnly]: iconOnly }]">
<div :class="$style.body">
<div :class="$style.top">
<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"></div>
<button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance" @click="openInstanceMenu">
<img :src="instance.sidebarLogoUrl && !iconOnly ? instance.sidebarLogoUrl : instance.iconUrl || '/favicon.ico'" alt="" :class="instance.sidebarLogoUrl && !iconOnly ? $style.wideInstanceIcon : $style.instanceIcon" style="viewTransitionName: navbar-serverIcon;"/>
</button>
@ -299,6 +300,18 @@ function menuEdit() {
backdrop-filter: var(--MI-blur, blur(8px));
}
.banner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
}
.instance {
position: relative;
display: block;

12
packages/frontend/src/utility/get-note-menu.ts
View file

@ -11,7 +11,7 @@ import type { Ref, ShallowRef } from 'vue';
import type { MenuItem } from '@/types/menu.js';
import { $i } from '@/i.js';
import { i18n } from '@/i18n.js';
import { instance } from '@/instance.js';
import { instance, policies } from '@/instance.js';
import * as os from '@/os.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
@ -342,7 +342,7 @@ export function getNoteMenu(props: {
});
}
if ($i.policies.canUseTranslator && instance.translatorAvailable) {
if (policies.value.canUseTranslator && instance.translatorAvailable) {
menuItems.push({
icon: 'ti ti-language-hiragana',
text: i18n.ts.translate,
@ -497,6 +497,14 @@ export function getNoteMenu(props: {
} else {
menuItems.push(getNoteEmbedCodeMenu(appearNote, i18n.ts.embed));
}
if (policies.value.canUseTranslator && instance.translatorAvailable) {
menuItems.push({
icon: 'ti ti-language-hiragana',
text: i18n.ts.translate,
action: () => translateNote(appearNote.id, props.translation, props.translating),
});
}
}
const noteActions = getPluginHandlers('note_action');

17
packages/frontend/src/utility/reload-ask.ts
View file

@ -12,6 +12,10 @@ let isReloadConfirming = false;
export async function reloadAsk(opts: {
unison?: boolean;
reason?: string;
type?: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question';
title?: string;
okText?: string;
cancelText?: string;
}) {
if (isReloadConfirming) {
return;
@ -19,13 +23,12 @@ export async function reloadAsk(opts: {
isReloadConfirming = true;
const { canceled } = await os.confirm(opts.reason == null ? {
type: 'info',
text: i18n.ts.reloadConfirm,
} : {
type: 'info',
title: i18n.ts.reloadConfirm,
text: opts.reason,
const { canceled } = await os.confirm({
type: opts.type ?? 'question',
title: opts.title ?? i18n.ts.reloadConfirm,
text: opts.reason ?? undefined,
okText: opts.okText ?? i18n.ts.yes,
cancelText: opts.cancelText ?? i18n.ts.no,
}).finally(() => {
isReloadConfirming = false;
});

5
packages/frontend/src/widgets/WidgetFederation.vue
View file

@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="wbrkwalb">
<MkLoading v-if="fetching"/>
<TransitionGroup v-else tag="div" :name="prefer.s.animation ? 'chart' : ''" class="instances">
<SkTransitionGroup v-else tag="div" name="chart" class="instances">
<div v-for="(instance, i) in instances" :key="instance.id" class="instance">
<img :src="getInstanceIcon(instance)" alt=""/>
<div class="body">
@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkMiniChart class="chart" :src="charts[i].requests.received"/>
</div>
</TransitionGroup>
</SkTransitionGroup>
</div>
</MkContainer>
</template>
@ -37,6 +37,7 @@ import { misskeyApi, misskeyApiGet } from '@/utility/misskey-api.js';
import { i18n } from '@/i18n.js';
import { getProxiedImageUrlNullable } from '@/utility/media-proxy.js';
import { prefer } from '@/preferences.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const name = 'federation';

5
packages/frontend/src/widgets/WidgetTrends.vue
View file

@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="wbrkwala">
<MkLoading v-if="fetching"/>
<TransitionGroup v-else tag="div" :name="prefer.s.animation ? 'chart' : ''" class="tags">
<SkTransitionGroup v-else tag="div" name="chart" class="tags">
<div v-for="stat in stats" :key="stat.tag">
<div class="tag">
<MkA class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</MkA>
@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkMiniChart class="chart" :src="stat.chart"/>
</div>
</TransitionGroup>
</SkTransitionGroup>
</div>
</MkContainer>
</template>
@ -35,6 +35,7 @@ import MkMiniChart from '@/components/MkMiniChart.vue';
import { misskeyApiGet } from '@/utility/misskey-api.js';
import { i18n } from '@/i18n.js';
import { prefer } from '@/preferences.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const name = 'hashtags';

1
packages/frontend/src/workers/tsconfig.json
View file

@ -1,5 +1,6 @@
{
"compilerOptions": {
"lib": ["esnext", "webworker"],
"incremental": true
}
}

1
packages/frontend/test/tsconfig.json
View file

@ -22,6 +22,7 @@
"emitDecoratorMetadata": true,
"resolveJsonModule": true,
"isolatedModules": true,
"incremental": true,
"baseUrl": "./",
"paths": {
"@/*": ["../src/*"]

1
packages/frontend/tsconfig.json
View file

@ -23,6 +23,7 @@
"useDefineForClassFields": true,
"verbatimModuleSyntax": true,
"skipLibCheck": true,
"incremental": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],

6
packages/frontend/vite.replaceIcons.ts
View file

@ -224,6 +224,7 @@ export function pluginReplaceIcons() {
'ti ti-dice-5': 'ph ph-dice-five ph-bold ph-lg',
'ti ti-dots': 'ph-dots-three ph-bold ph-lg',
'ti ti-download': 'ph-download ph-bold ph-lg',
'ti-download': 'ph-download ph-bold ph-lg', // in custom-emoji-manager.remote.list
'ti ti-edit': 'ph-pencil-simple-line ph-bold ph-lg',
'ti ti-equal-double': 'ph-equals ph-bold ph-lg',
'ti ti-equal-not': 'ph-prohibit ph-bold ph-lg',
@ -258,6 +259,7 @@ export function pluginReplaceIcons() {
'ti ti-home': 'ph-house ph-bold ph-lg',
'ti ti-hourglass-empty': 'ph-hourglass ph-bold ph-lg',
'ti ti-icons': 'ph-squares-four ph-bold ph-lg',
'ti-icons': 'ph-squares-four ph-bold ph-lg', // in custom-emoji-manager.local.list
'ti ti-id': 'ph-identification-card ph-bold ph-lg',
'ti ti-info-circle': 'ph-info ph-bold ph-lg',
'ti ti-json': 'ph-brackets-curly ph-bold ph-lg',
@ -275,6 +277,7 @@ export function pluginReplaceIcons() {
'ti ti-lock-star': 'ph-shield-star ph-bold ph-lg',
'ti ti-login-2': 'ph-sign-in ph-bold ph-lg',
'ti ti-mail': 'ph-envelope ph-bold ph-lg',
'ti-mail': 'ph-envelope ph-bold ph-lg', // in notification-recipient.item.vue
'ti ti-map-pin': 'ph-map-pin ph-bold ph-lg',
'ti ti-maximize': 'ph-frame-corners ph-bold ph-lg',
'ti ti-medal': 'ph-trophy ph-bold ph-lg',
@ -359,6 +362,7 @@ export function pluginReplaceIcons() {
'ti ti-text-caption': 'ph-text-indent ph-bold ph-lg',
'ti ti-tool': 'ph-wrench ph-bold ph-lg',
'ti ti-trash': 'ph-trash ph-bold ph-lg',
'ti-trash': 'ph-trash ph-bold ph-lg', // in custom-emoji-manager.local.list
'ti ti-trophy': 'ph-trophy ph-bold ph-lg',
'ti ti-universe': 'ph-rocket-launch ph-bold ph-lg',
'ti ti-upload': 'ph-upload ph-bold ph-lg',
@ -379,6 +383,7 @@ export function pluginReplaceIcons() {
'ti ti-volume': 'ph-speaker-high ph-bold ph-lg',
'ti ti-volume-3': 'ph-speaker-x ph-bold ph-lg',
'ti ti-webhook': 'ph-webhooks-logo ph-bold ph-lg',
'ti-webhook': 'ph-webhooks-logo ph-bold ph-lg', // in notification-recipient.item.vue
'ti ti-whirl': 'ph-globe-hemisphere-west ph-bold ph-lg',
'ti ti-window-maximize': 'ph-frame-corners ph-bold ph-lg',
'ti ti-world': 'ph-globe-hemisphere-west ph-bold ph-lg',
@ -389,6 +394,7 @@ export function pluginReplaceIcons() {
'ti ti-world-x': 'ph-planet ph-bold ph-lg',
'ti ti-x': 'ph-x ph-bold ph-lg',
'ti ti-help': 'ph-question ph-bold ph-lg',
'ti-help': 'ph-question ph-bold ph-lg', // in notification-recipient.item.vue
'ti ti ti-caret-down': 'ph-caret-down ph-bold ph-lg',
'ti ti-chevron-down': 'ph-caret-down ph-bold ph-lg',
'ti ti-accessible': 'ph-person-simple-circle ph-bold ph-lg',