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

Merge branch 'develop' into upstream/2025.5.0

Browse source
This commit is contained in:
dakkar 2025-06-10 14:02:32 +01:00
commit 3ebf9c4a71
317 changed files with 6144 additions and 2603 deletions
Download patch file Download diff file Expand all files Collapse all files

65
packages/frontend/src/components/MkAbuseReport.vue
View file

@ -33,10 +33,28 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkFolder :withSpacer="false">
<template #icon><MkAvatar :user="report.targetUser" style="width: 18px; height: 18px;"/></template>
<template #label>{{ i18n.ts.target }}: <MkAcct :user="report.targetUser"/></template>
<template #suffix>#{{ report.targetUserId.toUpperCase() }}</template>
<template #suffix>{{ i18n.ts.id }}# {{ report.targetUserId }}</template>
<div style="height: 300px; --MI-stickyTop: 0; --MI-stickyBottom: 0;">
<RouterView :router="targetRouter"/>
<div style="--MI-stickyTop: 0; --MI-stickyBottom: 0;">
<admin-user :userId="report.targetUserId" :userHint="report.targetUser"></admin-user>
</div>
</MkFolder>
<MkFolder v-if="report.targetInstance" :withSpacer="false">
<template #icon>
<img
v-if="targetInstanceIcon"
:src="targetInstanceIcon"
:alt="i18n.tsx.instanceIconAlt({ name: report.targetInstance.name || report.targetInstance.host })"
:class="$style.instanceIcon"
class="icon"
/>
</template>
<template #label>{{ i18n.ts.instance }}: {{ report.targetInstance.name || report.targetInstance.host }}</template>
<template #suffix>{{ i18n.ts.id }}# {{ report.targetInstance.id }}</template>
<div style="--MI-stickyTop: 0; --MI-stickyBottom: 0;">
<instance-info :host="report.targetInstance.host" :instanceHint="report.targetInstance" :metaHint="metaHint"></instance-info>
</div>
</MkFolder>
@ -44,23 +62,24 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #icon><i class="ti ti-message-2"></i></template>
<template #label>{{ i18n.ts.details }}</template>
<div class="_gaps_s">
<Mfm :text="report.comment" :isBlock="true" :linkNavigationBehavior="'window'"/>
<Mfm :text="report.comment" :parsedNodes="parsedComment" :isBlock="true" :linkNavigationBehavior="'window'" :author="report.reporter" :nyaize="false" :isAnim="false"/>
<SkUrlPreviewGroup :sourceNodes="parsedComment" :compact="false" :detail="false" :showAsQuote="true"/>
</div>
</MkFolder>
<MkFolder :withSpacer="false">
<template #icon><MkAvatar :user="report.reporter" style="width: 18px; height: 18px;"/></template>
<template #label>{{ i18n.ts.reporter }}: <MkAcct :user="report.reporter"/></template>
<template #suffix>#{{ report.reporterId.toUpperCase() }}</template>
<template #suffix>{{ i18n.ts.id }}# {{ report.reporterId }}</template>
<div style="height: 300px; --MI-stickyTop: 0; --MI-stickyBottom: 0;">
<RouterView :router="reporterRouter"/>
<div style="--MI-stickyTop: 0; --MI-stickyBottom: 0;">
<admin-user :userId="report.reporterId" :userHint="report.reporter"></admin-user>
</div>
</MkFolder>
<MkFolder :defaultOpen="false">
<template #icon><i class="ti ti-message-2"></i></template>
<template #label>{{ i18n.ts.moderationNote }}</template>
<template #label>{{ i18n.ts.staffNotes }}</template>
<template #suffix>{{ moderationNote.length > 0 ? '...' : i18n.ts.none }}</template>
<div class="_gaps_s">
<MkTextarea v-model="moderationNote" manualSave>
@ -78,8 +97,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { provide, ref, watch } from 'vue';
import { computed, provide, ref, watch } from 'vue';
import * as Misskey from 'misskey-js';
import * as mfm from '@transfem-org/sfm-js';
import MkButton from '@/components/MkButton.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkKeyValue from '@/components/MkKeyValue.vue';
@ -91,19 +111,38 @@ import RouterView from '@/components/global/RouterView.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
import { createRouter } from '@/router.js';
import { getProxiedImageUrlNullable } from '@/utility/media-proxy';
import InstanceInfo from '@/pages/instance-info.vue';
import { iAmAdmin } from '@/i';
import { misskeyApi } from '@/utility/misskey-api';
import AdminUser from '@/pages/admin-user.vue';
import SkUrlPreviewGroup from '@/components/SkUrlPreviewGroup.vue';
const props = defineProps<{
const props = withDefaults(defineProps<{
report: Misskey.entities.AdminAbuseUserReportsResponse[number];
}>();
metaHint?: Misskey.entities.AdminMetaResponse | undefined;
}>(), {
metaHint: undefined,
});
const emit = defineEmits<{
(ev: 'resolved', reportId: string): void;
}>();
/*
const targetRouter = createRouter(`/admin/user/${props.report.targetUserId}`);
targetRouter.init();
const reporterRouter = createRouter(`/admin/user/${props.report.reporterId}`);
reporterRouter.init();
*/
const parsedComment = computed(() => mfm.parse(props.report.comment));
const targetInstanceIcon = computed(() => props.report.targetInstance?.faviconUrl
? getProxiedImageUrlNullable(props.report.targetInstance.faviconUrl, 'preview')
: props.report.targetInstance?.iconUrl
? getProxiedImageUrlNullable(props.report.targetInstance.iconUrl, 'preview')
: null);
const moderationNote = ref(props.report.moderationNote ?? '');
@ -150,4 +189,8 @@ function showMenu(ev: MouseEvent) {
</script>
<style lang="scss" module>
.instanceIcon {
width: 18px;
height: 18px;
}
</style>

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

@ -142,7 +142,7 @@ function reset() {
function remove() {
if (captcha.value.remove && captchaWidgetId.value) {
try {
if (_DEV_) console.log('remove', props.provider, captchaWidgetId.value);
if (_DEV_) console.debug('remove', props.provider, captchaWidgetId.value);
captcha.value.remove(captchaWidgetId.value);
} catch (error: unknown) {
// ignore

2
packages/frontend/src/components/MkCode.core.vue
View file

@ -52,7 +52,7 @@ async function fetchLanguage(to: string): Promise<void> {
return bundle.id === language || bundle.aliases?.includes(language);
});
if (bundles.length > 0) {
if (_DEV_) console.log(`Loading language: ${language}`);
if (_DEV_) console.debug(`Loading language: ${language}`);
await highlighter.loadLanguage(bundles[0].import);
codeLang.value = language;
} else {

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>
@ -38,7 +38,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>
@ -77,12 +77,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');

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

@ -95,7 +95,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkPoll v-if="appearNote.poll" :noteId="appearNote.id" :poll="appearNote.poll" :local="!appearNote.user.host" :author="appearNote.user" :emojiUrls="appearNote.emojis" :class="$style.poll" @click.stop/>
<div v-if="isEnabledUrlPreview">
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" :class="$style.urlPreview" @click.stop/>
<SkUrlPreviewGroup :sourceUrls="urls" :sourceNote="appearNote" :compact="true" :detail="false" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" :class="$style.urlPreview" @click.stop/>
</div>
<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
<button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click.stop @click="collapsed = false">
@ -113,7 +113,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkA :to="`/notes/${appearNote.id}/reactions`" :class="[$style.reactionOmitted]">{{ i18n.ts.more }}</MkA>
</template>
</MkReactionsViewer>
<footer :class="$style.footer">
<footer :class="$style.footer" class="_gaps _h_gaps" tabindex="0" role="group" :aria-label="i18n.ts.noteFooterLabel">
<button :class="$style.footerButton" class="_button" @click.stop @click="reply()">
<i class="ti ti-arrow-back-up"></i>
<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.repliesCount) }}</p>
@ -157,7 +157,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<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" :disabled="translating || !!translation" @click.stop="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" @click.stop="showMenu()">
@ -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';
@ -237,6 +237,7 @@ import SkMutedNote from '@/components/SkMutedNote.vue';
import SkNoteTranslation from '@/components/SkNoteTranslation.vue';
import { getSelfNoteIds } from '@/utility/get-self-note-ids.js';
import { extractPreviewUrls } from '@/utility/extract-preview-urls.js';
import SkUrlPreviewGroup from '@/components/SkUrlPreviewGroup.vue';
const props = withDefaults(defineProps<{
note: Misskey.entities.Note;
@ -304,9 +305,9 @@ const galleryEl = useTemplateRef('galleryEl');
const isMyRenote = $i && ($i.id === note.value.userId);
const showContent = ref(prefer.s.uncollapseCW);
const parsed = computed(() => appearNote.value.text ? mfm.parse(appearNote.value.text) : null);
const urls = computed(() => parsed.value ? extractPreviewUrls(props.note, parsed.value) : null);
const urls = computed(() => parsed.value ? extractPreviewUrls(props.note, parsed.value) : []);
const selfNoteIds = computed(() => getSelfNoteIds(props.note));
const isLong = shouldCollapsed(appearNote.value, urls.value ?? []);
const isLong = shouldCollapsed(appearNote.value, urls.value);
const collapsed = ref(prefer.s.expandLongNote && appearNote.value.cw == null && isLong ? false : appearNote.value.cw == null && isLong);
const isDeleted = ref(false);
const renoted = ref(false);
@ -360,7 +361,7 @@ const keymap = {
clip();
},
't': () => {
if (prefer.s.showTranslationButtonInNoteFooter && $i?.policies.canUseTranslator && instance.translatorAvailable) {
if (prefer.s.showTranslationButtonInNoteFooter && policies.value.canUseTranslator && instance.translatorAvailable) {
translate();
}
},
@ -913,11 +914,11 @@ function emitUpdReaction(emoji: string, delta: number) {
.footer {
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-start;
position: relative;
z-index: 1;
margin-top: 0.4em;
max-width: 400px;
overflow-x: auto;
}
&:hover > .article > .main > .footer > .footerButton {
@ -1203,10 +1204,6 @@ function emitUpdReaction(emoji: string, delta: number) {
padding: 8px;
opacity: 0.7;
&:not(:last-child) {
margin-right: 1.5em;
}
&:hover {
color: var(--MI_THEME-fgHighlighted);
}
@ -1290,25 +1287,7 @@ function emitUpdReaction(emoji: string, delta: number) {
}
}
@container (max-width: 400px) {
.root:not(.showActionsOnlyHover) {
.footerButton {
&:not(:last-child) {
margin-right: 0.2em;
}
}
}
}
@container (max-width: 350px) {
.root:not(.showActionsOnlyHover) {
.footerButton {
&:not(:last-child) {
margin-right: 0.1em;
}
}
}
.colorBar {
top: 6px;
left: 6px;

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

@ -112,13 +112,13 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkPoll v-if="appearNote.poll" ref="pollViewer" :noteId="appearNote.id" :poll="appearNote.poll" :local="!appearNote.user.host" :class="$style.poll" :author="appearNote.user" :emojiUrls="appearNote.emojis"/>
<div v-if="isEnabledUrlPreview">
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" style="margin-top: 6px;"/>
<SkUrlPreviewGroup :sourceNodes="nodes" :sourceNote="appearNote" :compact="true" :detail="true" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" style="margin-top: 6px;" @click.stop/>
</div>
<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote" :expandAllCws="props.expandAllCws"/></div>
</div>
<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
</div>
<footer :class="$style.footer">
<footer :class="$style.footer" class="_gaps _h_gaps" tabindex="0" role="group" :aria-label="i18n.ts.noteFooterLabel">
<div :class="$style.noteFooterInfo">
<div v-if="appearNote.updatedAt">
{{ i18n.ts.edited }}: <MkTime :time="appearNote.updatedAt" mode="detail"/>
@ -169,7 +169,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<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" :disabled="translating || !!translation" @click.stop="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" @click.stop="showMenu()">
@ -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';
@ -286,7 +286,7 @@ import { DI } from '@/di.js';
import SkMutedNote from '@/components/SkMutedNote.vue';
import SkNoteTranslation from '@/components/SkNoteTranslation.vue';
import { getSelfNoteIds } from '@/utility/get-self-note-ids.js';
import { extractPreviewUrls } from '@/utility/extract-preview-urls.js';
import SkUrlPreviewGroup from '@/components/SkUrlPreviewGroup.vue';
const props = withDefaults(defineProps<{
note: Misskey.entities.Note;
@ -339,8 +339,7 @@ const isDeleted = ref(false);
const renoted = ref(false);
const translation = ref<Misskey.entities.NotesTranslateResponse | false | null>(null);
const translating = ref(false);
const parsed = computed(() => appearNote.value.text ? mfm.parse(appearNote.value.text) : null);
const urls = computed(() => parsed.value ? extractPreviewUrls(props.note, parsed.value) : null);
const parsed = computed(() => appearNote.value.text ? mfm.parse(appearNote.value.text) : []);
const selfNoteIds = computed(() => getSelfNoteIds(props.note));
const animated = computed(() => parsed.value ? checkAnimationFromMfm(parsed.value) : null);
const allowAnim = ref(prefer.s.advancedMfm && prefer.s.animatedMfm);
@ -388,7 +387,7 @@ const keymap = {
clip();
},
't': () => {
if (prefer.s.showTranslationButtonInNoteFooter && $i?.policies.canUseTranslator && instance.translatorAvailable) {
if (prefer.s.showTranslationButtonInNoteFooter && policies.value.canUseTranslator && instance.translatorAvailable) {
translate();
}
},
@ -886,12 +885,10 @@ function animatedMFM() {
}
.footer {
position: relative;
z-index: 1;
margin-top: 0.4em;
width: max-content;
min-width: min-content;
max-width: fit-content;
position: relative;
z-index: 1;
margin-top: 0.4em;
overflow-x: auto;
}
.replyTo {
@ -1083,10 +1080,6 @@ function animatedMFM() {
padding: 8px;
opacity: 0.7;
&:not(:last-child) {
margin-right: 1.5em;
}
&:hover {
color: var(--MI_THEME-fgHighlighted);
}
@ -1169,14 +1162,6 @@ function animatedMFM() {
}
}
@container (max-width: 350px) {
.noteFooterButton {
&:not(:last-child) {
margin-right: 0.1em;
}
}
}
@container (max-width: 300px) {
.root {
font-size: 0.825em;
@ -1186,12 +1171,6 @@ function animatedMFM() {
width: 50px;
height: 50px;
}
.noteFooterButton {
&:not(:last-child) {
margin-right: 0.1em;
}
}
}
.muted {

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

@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSubNoteContent :class="$style.text" :note="note" :translating="translating" :translation="translation" :expandAllCws="props.expandAllCws"/>
</div>
</div>
<footer :class="$style.footer">
<footer :class="$style.footer" class="_gaps _h_gaps" tabindex="0" role="group" :aria-label="i18n.ts.noteFooterLabel">
<MkReactionsViewer ref="reactionsViewer" :note="note"/>
<button class="_button" :class="$style.noteFooterButton" @click="reply()">
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
@ -62,7 +62,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<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 && $i?.policies.canUseTranslator && instance.translatorAvailable" ref="translationButton" class="_button" :class="$style.noteFooterButton" :disabled="translating || !!translation" @click.stop="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" @click.stop="menu()">
@ -113,7 +113,7 @@ 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 } from '@/instance';
import { instance, policies } from '@/instance';
const props = withDefaults(defineProps<{
note: Misskey.entities.Note;
@ -419,12 +419,10 @@ if (props.detail) {
}
.footer {
position: relative;
z-index: 1;
margin-top: 0.4em;
width: max-content;
min-width: min-content;
max-width: fit-content;
position: relative;
z-index: 1;
margin-top: 0.4em;
overflow-x: auto;
}
.main {
@ -469,23 +467,11 @@ if (props.detail) {
padding-top: 10px;
opacity: 0.7;
&:not(:last-child) {
margin-right: 1.5em;
}
&:hover {
color: var(--MI_THEME-fgHighlighted);
}
}
@container (max-width: 400px) {
.noteFooterButton {
&:not(:last-child) {
margin-right: 0.7em;
}
}
}
.noteFooterButtonCount {
display: inline;
margin: 0 0 0 8px;

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

@ -10,13 +10,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>
@ -56,7 +51,7 @@ defineExpose({
&.noGap {
background: color-mix(in srgb, var(--MI_THEME-panel) 65%, transparent);
.note {
.note:not(:empty) {
border-bottom: solid 0.5px var(--MI_THEME-divider);
}

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

@ -9,8 +9,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #empty><MkResult type="empty" :text="i18n.ts.noNotifications"/></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"
@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<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"/>
</div>
</component>
</SkTransitionGroup>
</template>
</MkPagination>
</component>
@ -39,6 +39,7 @@ import { useStream } from '@/stream.js';
import { i18n } from '@/i18n.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][];

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

@ -106,7 +106,7 @@ windowRouter.addListener('replace', ctx => {
});
windowRouter.addListener('change', ctx => {
if (_DEV_) console.log('windowRouter: change', ctx.fullPath);
if (_DEV_) console.debug('windowRouter: change', ctx.fullPath);
searchMarkerId.value = getSearchMarker(ctx.fullPath);
});

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

@ -380,7 +380,7 @@ function prepend(item: MisskeyEntity): void {
return;
}
if (_DEV_) console.log(isHead(), isPausingUpdate);
if (_DEV_) console.debug(isHead(), isPausingUpdate);
if (isHead() && !isPausingUpdate) unshiftItems([item]);
else prependQueue(item);

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

@ -373,7 +373,9 @@ if (props.specified) {
// keep cw when reply
if (prefer.s.keepCw && props.reply && props.reply.cw) {
useCw.value = true;
cw.value = props.reply.cw;
cw.value = (prefer.s.keepCw === 'prepend-re' && !props.reply.cw.toLowerCase().startsWith('re:'))
? `RE: ${props.reply.cw}`
: props.reply.cw;
}
// apply default CW
@ -557,6 +559,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" :key="'$more'" 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;

38
packages/frontend/src/components/MkSelect.vue
View file

@ -39,32 +39,34 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</template>
<script lang="ts" setup>
<script lang="ts">
type ItemOption<T extends string | number | null | boolean = string | number | null> = {
type?: 'option';
value: T;
label: string;
};
type ItemGroup<T extends string | number | null | boolean = string | number | null> = {
type: 'group';
label: string;
items: ItemOption<T>[];
};
export type MkSelectItem<T extends string | number | null | boolean = string | number | null> = ItemOption<T> | ItemGroup<T>;
</script>
<script lang="ts" setup generic="T extends string | number | null | boolean = string | number | null">
import { onMounted, nextTick, ref, watch, computed, toRefs, useSlots } from 'vue';
import { useInterval } from '@@/js/use-interval.js';
import type { VNode, VNodeChild } from 'vue';
import type { MenuItem } from '@/types/menu.js';
import * as os from '@/os.js';
type ItemOption = {
type?: 'option';
value: string | number | null;
label: string;
};
type ItemGroup = {
type: 'group';
label: string;
items: ItemOption[];
};
export type MkSelectItem = ItemOption | ItemGroup;
// TODO: itemsをslot内のoptionで指定する用法は廃止する(props.itemsを必須化する)
// see: https://github.com/misskey-dev/misskey/issues/15558
const props = defineProps<{
modelValue: string | number | null;
modelValue: T;
required?: boolean;
readonly?: boolean;
disabled?: boolean;
@ -73,11 +75,11 @@ const props = defineProps<{
inline?: boolean;
small?: boolean;
large?: boolean;
items?: MkSelectItem[];
items?: MkSelectItem<T>[];
}>();
const emit = defineEmits<{
(ev: 'update:modelValue', value: string | number | null): void;
(ev: 'update:modelValue', value: T): void;
}>();
const slots = useSlots();

2
packages/frontend/src/components/MkSignupDialog.form.vue
View file

@ -307,7 +307,7 @@ async function onSubmit(): Promise<void> {
emit('approvalPending');
} else {
const resJson = (await res.json()) as Misskey.entities.SignupResponse;
if (_DEV_) console.log(resJson);
if (_DEV_) console.debug(resJson);
emit('signup', resJson);

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

@ -9,8 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #empty><MkResult type="empty" :text="i18n.ts.noNotes"/></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"
@ -19,16 +18,11 @@ SPDX-License-Identifier: AGPL-3.0-only
:moveClass="$style.transition_x_move"
tag="div"
>
<div 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"/>
<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>
</component>
</SkTransitionGroup>
</template>
</MkPagination>
</component>
@ -48,6 +42,7 @@ import { prefer } from '@/preferences.js';
import DynamicNote from '@/components/DynamicNote.vue';
import MkPagination from '@/components/MkPagination.vue';
import { i18n } from '@/i18n.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const props = withDefaults(defineProps<{
src: BasicTimelineType | 'mentions' | 'directs' | 'list' | 'antenna' | 'channel' | 'role';
@ -371,7 +366,7 @@ defineExpose({
&.noGap {
background: var(--MI_THEME-panel);
.note {
.note:not(:empty) {
border-bottom: solid 0.5px var(--MI_THEME-divider);
}

136
packages/frontend/src/components/MkUrlPreview.vue
View file

@ -65,6 +65,17 @@ SPDX-License-Identifier: AGPL-3.0-only
</footer>
</article>
</component>
<I18n v-if="attributionUser" :src="i18n.ts.writtenBy" :class="$style.linkAttribution" tag="p">
<template #user>
<MkA v-user-preview="attributionUser.id" :to="userPage(attributionUser)">
<MkAvatar :class="$style.linkAttributionIcon" :user="attributionUser"/>
<MkUserName :user="attributionUser" style="color: var(--MI_THEME-accent)"/>
</MkA>
</template>
</I18n>
<p v-else-if="linkAttribution" :class="$style.linkAttribution"><MkEllipsis/></p>
<template v-if="showActions">
<div v-if="tweetId" :class="$style.action">
<MkButton :small="true" inline @click="tweetExpanded = true">
@ -88,13 +99,24 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</template>
<script lang="ts">
// eslint-disable-next-line import/order
import type { summaly } from '@misskey-dev/summaly';
export type SummalyResult = Awaited<ReturnType<typeof summaly>> & {
haveNoteLocally?: boolean,
linkAttribution?: {
userId: string,
}
};
</script>
<script lang="ts" setup>
import { defineAsyncComponent, onDeactivated, onUnmounted, ref } from 'vue';
import { url as local } from '@@/js/config.js';
import { versatileLang } from '@@/js/intl-const.js';
import * as Misskey from 'misskey-js';
import { maybeMakeRelative } from '@@/js/url.js';
import type { summaly } from '@misskey-dev/summaly';
import { i18n } from '@/i18n.js';
import * as os from '@/os.js';
import { deviceKind } from '@/utility/device-kind.js';
@ -106,8 +128,7 @@ import { misskeyApi } from '@/utility/misskey-api.js';
import { warningExternalWebsite } from '@/utility/warning-external-website.js';
import DynamicNoteSimple from '@/components/DynamicNoteSimple.vue';
import { $i } from '@/i';
type SummalyResult = Awaited<ReturnType<typeof summaly>>;
import { userPage } from '@/filters/user.js';
const props = withDefaults(defineProps<{
url: string;
@ -116,12 +137,18 @@ const props = withDefaults(defineProps<{
showAsQuote?: boolean;
showActions?: boolean;
skipNoteIds?: (string | undefined)[];
previewHint?: SummalyResult;
noteHint?: Misskey.entities.Note | null;
attributionHint?: Misskey.entities.User | null;
}>(), {
detail: false,
compact: false,
showAsQuote: false,
showActions: true,
skipNoteIds: undefined,
previewHint: undefined,
noteHint: undefined,
attributionHint: undefined,
});
const MOBILE_THRESHOLD = 500;
@ -146,6 +173,10 @@ const player = ref<SummalyResult['player']>({
height: null,
allow: [],
});
const linkAttribution = ref<{
userId: string,
} | null>(null);
const attributionUser = ref<Misskey.entities.User | null>(null);
const playerEnabled = ref(false);
const tweetId = ref<string | null>(null);
const tweetExpanded = ref(props.detail);
@ -154,12 +185,35 @@ const tweetHeight = ref(150);
const unknownUrl = ref(false);
const theNote = ref<Misskey.entities.Note | null>(null);
const fetchingTheNote = ref(false);
const fetchingAttribution = ref<Promise<void> | null>(null);
onDeactivated(() => {
playerEnabled.value = false;
});
async function fetchNote() {
async function fetchAttribution(initial: boolean): Promise<void> {
if (!linkAttribution.value) return;
if (attributionUser.value) return;
if (fetchingAttribution.value) return fetchingAttribution.value;
return fetchingAttribution.value ??= (async (userId: string): Promise<void> => {
try {
if (initial && props.attributionHint !== undefined) {
attributionUser.value = props.attributionHint;
} else {
attributionUser.value = await misskeyApi('users/show', { userId });
}
} catch {
// makes the loading ellipsis vanish.
linkAttribution.value = null;
} finally {
// Reset promise to mark as done
fetchingAttribution.value = null;
}
})(linkAttribution.value.userId);
}
async function fetchNote(initial: boolean) {
if (!props.showAsQuote) return;
if (!activityPub.value) return;
if (theNote.value) return;
@ -167,8 +221,15 @@ async function fetchNote() {
fetchingTheNote.value = true;
try {
const response = await misskeyApi('ap/show', { uri: activityPub.value });
const response = (initial && props.noteHint !== undefined)
? { type: 'Note', object: props.noteHint }
: await misskeyApi('ap/show', { uri: activityPub.value });
if (response.type !== 'Note') return;
if (!response.object) {
activityPub.value = null;
theNote.value = null;
return;
}
const theNoteId = response['object'].id;
if (theNoteId && props.skipNoteIds && props.skipNoteIds.includes(theNoteId)) {
hidePreview.value = true;
@ -194,13 +255,16 @@ if (requestUrl.hostname === 'twitter.com' || requestUrl.hostname === 'mobile.twi
if (m) tweetId.value = m[1];
}
// This is now handled on the backend
/*
if (requestUrl.hostname === 'music.youtube.com' && requestUrl.pathname.match('^/(?:watch|channel)')) {
requestUrl.hostname = 'www.youtube.com';
}
requestUrl.hash = '';
*/
function refresh(withFetch = false) {
function refresh(withFetch = false, initial = false) {
const params = new URLSearchParams({
url: requestUrl.href,
lang: versatileLang,
@ -210,18 +274,21 @@ function refresh(withFetch = false) {
}
const headers = $i ? { Authorization: `Bearer ${$i.token}` } : undefined;
return fetching.value ??= window.fetch(`/url?${params.toString()}`, { headers })
.then(res => {
if (!res.ok) {
if (_DEV_) {
console.warn(`[HTTP${res.status}] Failed to fetch url preview`);
const fetchPromise: Promise<SummalyResult | null> = (initial && props.previewHint)
? Promise.resolve(props.previewHint)
: window.fetch(`/url?${params.toString()}`, { headers })
.then(res => {
if (!res.ok) {
if (_DEV_) {
console.warn(`[HTTP${res.status}] Failed to fetch url preview`);
}
return null;
}
return null;
}
return res.json();
})
.then(async (info: SummalyResult & { haveNoteLocally?: boolean } | null) => {
return res.json();
});
return fetching.value ??= fetchPromise
.then(async (info: SummalyResult | null) => {
unknownUrl.value = info == null;
title.value = info?.title ?? null;
description.value = info?.description ?? null;
@ -236,11 +303,16 @@ function refresh(withFetch = false) {
};
sensitive.value = info?.sensitive ?? false;
activityPub.value = info?.activityPub ?? null;
linkAttribution.value = info?.linkAttribution ?? null;
// These will be populated by the fetch* functions
attributionUser.value = null;
theNote.value = null;
if (info?.haveNoteLocally) {
await fetchNote();
}
await Promise.all([
fetchAttribution(initial),
fetchNote(initial),
]);
})
.finally(() => {
fetching.value = null;
@ -273,7 +345,7 @@ onUnmounted(() => {
});
// Load initial data
refresh();
refresh(false, true);
</script>
<style lang="scss" module>
@ -357,7 +429,7 @@ refresh();
.body {
position: relative;
box-sizing: border-box;
padding: 16px;
padding: 16px !important; // Unfortunately needed to win a specificity race with MkNoteSimple / SkNoteSimple
}
.header {
@ -395,6 +467,28 @@ refresh();
vertical-align: top;
}
.linkAttributionIcon {
display: inline-block;
width: 16px;
height: 16px;
margin-left: 0.25em;
margin-right: 0.25em;
vertical-align: middle;
border-radius: 50%;
* {
border-radius: 4px;
}
}
.linkAttribution {
width: 100%;
font-size: 0.8em;
display: inline-block;
margin: auto;
padding-top: 0.5em;
text-align: right;
}
.action {
display: flex;
gap: 6px;

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>

55
packages/frontend/src/components/SkDateSeparatedList.vue Normal file
View file

@ -0,0 +1,55 @@
<!--
SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps">
<template v-for="(item, index) in timeline" :key="item.id">
<slot v-if="item.type === 'item'" :id="item.id" :index="index" :item="item.data"></slot>
<slot v-else-if="item.type === 'date'" :id="item.id" :index="index" :prev="item.prev" :prevText="item.prevText" :next="item.next" :nextText="item.nextText" name="date">
<div :class="$style.dateDivider">
<span><i class="ti ti-chevron-up"></i> {{ item.nextText }}</span>
<span :class="$style.dateSeparator"></span>
<span>{{ item.prevText }} <i class="ti ti-chevron-down"></i></span>
</div>
</slot>
</template>
</div>
</template>
<script setup lang="ts" generic="T extends { id: string; createdAt: string; }">
import { computed } from 'vue';
import { makeDateSeparatedTimelineComputedRef } from '@/utility/timeline-date-separate';
const props = defineProps<{
items: T[],
}>();
const itemsRef = computed(() => props.items);
const timeline = makeDateSeparatedTimelineComputedRef(itemsRef);
</script>
<style module lang="scss">
// From room.vue
.dateDivider {
display: flex;
font-size: 85%;
align-items: center;
justify-content: center;
gap: 0.5em;
opacity: 0.75;
border: solid 0.5px var(--MI_THEME-divider);
border-radius: 999px;
width: fit-content;
padding: 0.5em 1em;
margin: 0 auto;
}
// From room.vue
.dateSeparator {
height: 1em;
width: 1px;
background: var(--MI_THEME-divider);
}
</style>

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

@ -9,6 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #empty><MkResult type="empty" :text="i18n.ts.noNotes"/></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>

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

@ -97,7 +97,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkPoll v-if="appearNote.poll" :noteId="appearNote.id" :poll="appearNote.poll" :local="!appearNote.user.host" :author="appearNote.user" :emojiUrls="appearNote.emojis" :class="$style.poll" @click.stop/>
<div v-if="isEnabledUrlPreview">
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" :class="$style.urlPreview" @click.stop/>
<SkUrlPreviewGroup :sourceUrls="urls" :sourceNote="appearNote" :compact="true" :detail="false" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" :class="$style.urlPreview" @click.stop/>
</div>
<div v-if="appearNote.renote" :class="$style.quote"><SkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
<button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click.stop @click="collapsed = false">
@ -114,7 +114,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkA :to="`/notes/${appearNote.id}/reactions`" :class="[$style.reactionOmitted]">{{ i18n.ts.more }}</MkA>
</template>
</MkReactionsViewer>
<footer :class="$style.footer">
<footer :class="$style.footer" class="_gaps _h_gaps" tabindex="0" role="group" :aria-label="i18n.ts.noteFooterLabel">
<button :class="$style.footerButton" class="_button" @click.stop @click="reply()">
<i class="ti ti-arrow-back-up"></i>
<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.repliesCount) }}</p>
@ -158,7 +158,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<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" class="_button" :class="$style.footerButton" :disabled="translating || !!translation" @click.stop="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" @click.stop="showMenu()">
@ -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';
@ -237,6 +237,7 @@ import SkMutedNote from '@/components/SkMutedNote.vue';
import SkNoteTranslation from '@/components/SkNoteTranslation.vue';
import { getSelfNoteIds } from '@/utility/get-self-note-ids.js';
import { extractPreviewUrls } from '@/utility/extract-preview-urls.js';
import SkUrlPreviewGroup from '@/components/SkUrlPreviewGroup.vue';
const props = withDefaults(defineProps<{
note: Misskey.entities.Note;
@ -304,9 +305,9 @@ const galleryEl = useTemplateRef('galleryEl');
const isMyRenote = $i && ($i.id === note.value.userId);
const showContent = ref(prefer.s.uncollapseCW);
const parsed = computed(() => appearNote.value.text ? mfm.parse(appearNote.value.text) : null);
const urls = computed(() => parsed.value ? extractPreviewUrls(props.note, parsed.value) : null);
const urls = computed(() => parsed.value ? extractPreviewUrls(props.note, parsed.value) : []);
const selfNoteIds = computed(() => getSelfNoteIds(props.note));
const isLong = shouldCollapsed(appearNote.value, urls.value ?? []);
const isLong = shouldCollapsed(appearNote.value, urls.value);
const collapsed = ref(prefer.s.expandLongNote && appearNote.value.cw == null && isLong ? false : appearNote.value.cw == null && isLong);
const isDeleted = ref(false);
const renoted = ref(false);
@ -360,7 +361,7 @@ const keymap = {
clip();
},
't': () => {
if (prefer.s.showTranslationButtonInNoteFooter && $i?.policies.canUseTranslator && instance.translatorAvailable) {
if (prefer.s.showTranslationButtonInNoteFooter && policies.value.canUseTranslator && instance.translatorAvailable) {
translate();
}
},
@ -921,11 +922,11 @@ function emitUpdReaction(emoji: string, delta: number) {
.footer {
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-start;
position: relative;
z-index: 1;
margin-top: 0.4em;
max-width: 400px;
overflow-x: auto;
}
&:hover > .article > .main > .footer > .footerButton {
@ -947,10 +948,6 @@ function emitUpdReaction(emoji: string, delta: number) {
.footerButton {
font-size: 90%;
&:not(:last-child) {
margin-right: 0;
}
}
}
@ -1238,10 +1235,6 @@ function emitUpdReaction(emoji: string, delta: number) {
padding: 8px;
opacity: 0.7;
&:not(:last-child) {
margin-right: 1.5em;
}
&:hover {
color: var(--MI_THEME-fgHighlighted);
}
@ -1358,25 +1351,7 @@ function emitUpdReaction(emoji: string, delta: number) {
}
}
@container (max-width: 400px) {
.root:not(.showActionsOnlyHover) {
.footerButton {
&:not(:last-child) {
margin-right: 0.2em;
}
}
}
}
@container (max-width: 350px) {
.root:not(.showActionsOnlyHover) {
.footerButton {
&:not(:last-child) {
margin-right: 0.1em;
}
}
}
.colorBar {
top: 6px;
left: 6px;
@ -1385,16 +1360,6 @@ function emitUpdReaction(emoji: string, delta: number) {
}
}
@container (max-width: 300px) {
.root:not(.showActionsOnlyHover) {
.footerButton {
&:not(:last-child) {
margin-right: 0.1em;
}
}
}
}
@container (max-width: 250px) {
.quoteNote {
padding: 12px;

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

@ -117,7 +117,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkPoll v-if="appearNote.poll" ref="pollViewer" :noteId="appearNote.id" :poll="appearNote.poll" :local="!appearNote.user.host" :class="$style.poll" :author="appearNote.user" :emojiUrls="appearNote.emojis"/>
<div v-if="isEnabledUrlPreview">
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" style="margin-top: 6px;"/>
<SkUrlPreviewGroup :sourceNodes="nodes" :sourceNote="appearNote" :compact="true" :detail="true" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" style="margin-top: 6px;" @click.stop/>
</div>
<div v-if="appearNote.renote" :class="$style.quote"><SkNoteSimple :note="appearNote.renote" :class="$style.quoteNote" :expandAllCws="props.expandAllCws"/></div>
</div>
@ -132,7 +132,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkA>
</div>
<MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly'" ref="reactionsViewer" style="margin-top: 6px;" :note="appearNote"/>
<footer :class="$style.footer">
<footer :class="$style.footer" class="_gaps _h_gaps" tabindex="0" role="group" :aria-label="i18n.ts.noteFooterLabel">
<button class="_button" :class="$style.noteFooterButton" @click="reply()">
<i class="ti ti-arrow-back-up"></i>
<p v-if="appearNote.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.repliesCount) }}</p>
@ -174,7 +174,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<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" :disabled="translating || !!translation" @click.stop="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" @click.stop="showMenu()">
@ -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';
@ -291,7 +291,7 @@ import { DI } from '@/di.js';
import SkMutedNote from '@/components/SkMutedNote.vue';
import SkNoteTranslation from '@/components/SkNoteTranslation.vue';
import { getSelfNoteIds } from '@/utility/get-self-note-ids.js';
import { extractPreviewUrls } from '@/utility/extract-preview-urls';
import SkUrlPreviewGroup from '@/components/SkUrlPreviewGroup.vue';
const props = withDefaults(defineProps<{
note: Misskey.entities.Note;
@ -345,8 +345,7 @@ const isDeleted = ref(false);
const renoted = ref(false);
const translation = ref<Misskey.entities.NotesTranslateResponse | false | null>(null);
const translating = ref(false);
const parsed = computed(() => appearNote.value.text ? mfm.parse(appearNote.value.text) : null);
const urls = computed(() => parsed.value ? extractPreviewUrls(props.note, parsed.value) : null);
const parsed = computed(() => appearNote.value.text ? mfm.parse(appearNote.value.text) : []);
const selfNoteIds = computed(() => getSelfNoteIds(props.note));
const animated = computed(() => parsed.value ? checkAnimationFromMfm(parsed.value) : null);
const allowAnim = ref(prefer.s.advancedMfm && prefer.s.animatedMfm ? true : false);
@ -394,7 +393,7 @@ const keymap = {
clip();
},
't': () => {
if (prefer.s.showTranslationButtonInNoteFooter && $i?.policies.canUseTranslator && instance.translatorAvailable) {
if (prefer.s.showTranslationButtonInNoteFooter && policies.value.canUseTranslator && instance.translatorAvailable) {
translate();
}
},
@ -918,13 +917,13 @@ onUnmounted(() => {
}
.footer {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
margin-top: 0.4em;
max-width: 400px;
display: flex;
align-items: center;
justify-content: flex-start;
position: relative;
z-index: 1;
margin-top: 0.4em;
overflow-x: auto;
}
.replyTo {
@ -1141,10 +1140,6 @@ onUnmounted(() => {
padding: 8px;
opacity: 0.7;
&:not(:last-child) {
margin-right: 1.5em;
}
&:hover {
color: var(--MI_THEME-fgHighlighted);
}
@ -1234,14 +1229,6 @@ onUnmounted(() => {
}
}
@container (max-width: 350px) {
.noteFooterButton {
&:not(:last-child) {
margin-right: 0.1em;
}
}
}
@container (max-width: 300px) {
.root {
font-size: 0.825em;
@ -1251,12 +1238,6 @@ onUnmounted(() => {
width: 50px;
height: 50px;
}
.noteFooterButton {
&:not(:last-child) {
margin-right: 0.1em;
}
}
}
.avatar {

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

@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<MkReactionsViewer ref="reactionsViewer" :note="note"/>
<footer :class="$style.footer">
<footer :class="$style.footer" class="_gaps _h_gaps" tabindex="0" role="group" :aria-label="i18n.ts.noteFooterLabel">
<button class="_button" :class="$style.noteFooterButton" @click="reply()">
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
<p v-if="note.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ note.repliesCount }}</p>
@ -70,7 +70,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<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 && $i?.policies.canUseTranslator && instance.translatorAvailable" ref="translationButton" class="_button" :class="$style.noteFooterButton" :disabled="translating || !!translation" @click.stop="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" @click.stop="menu()">
@ -121,7 +121,7 @@ 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 } from '@/instance';
import { instance, policies } from '@/instance';
const props = withDefaults(defineProps<{
note: Misskey.entities.Note;
@ -449,11 +449,11 @@ if (props.detail) {
.footer {
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-start;
position: relative;
z-index: 1;
margin-top: 0.4em;
max-width: 400px;
overflow-x: auto;
}
.main {
@ -559,14 +559,6 @@ if (props.detail) {
}
}
@container (max-width: 400px) {
.noteFooterButton {
&:not(:last-child) {
margin-right: 0.7em;
}
}
}
.noteFooterButtonCount {
display: inline;
margin: 0 0 0 8px;

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

@ -33,7 +33,6 @@ if (_DEV_) {
watch(
[() => props.translation, () => props.translating],
([translation, translating]) => console.debug('Translation status changed: ', { translation, translating }),
{ immediate: true },
);
}
</script>

41
packages/frontend/src/components/SkOldNoteWindow.vue
View file

@ -40,19 +40,19 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-show="appearNote.cw == null || showContent">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
<MkA v-if="appearNote.replyId" :class="$style.noteReplyTarget" :to="`/notes/${appearNote.replyId}`"><i class="ph-arrow-bend-left-up ph-bold ph-lg"></i></MkA>
<Mfm v-if="appearNote.text" :text="appearNote.text" :isBlock="true" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis"/>
<Mfm v-if="appearNote.text" :text="appearNote.text" :parsedNodes="parsed" :isBlock="true" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis"/>
<a v-if="appearNote.renote != null" :class="$style.rn">RN:</a>
<SkNoteTranslation :note="note" :translation="translation" :translating="translating"></SkNoteTranslation>
<div v-if="appearNote.files && appearNote.files.length > 0">
<MkMediaList :mediaList="appearNote.files"/>
</div>
<MkPoll v-if="appearNote.poll" :noteId="appearNote.id" :poll="appearNote.poll" :local="!appearNote.user.host" :author="appearNote.user" :emojiUrls="appearNote.emojis" :class="$style.poll"/>
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" style="margin-top: 6px;"/>
<SkUrlPreviewGroup :sourceNodes="parsed" :sourceNote="appearNote" :compact="true" :detail="true" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" style="margin-top: 6px;" @click.stop/>
<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
</div>
<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ph-television ph-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
</div>
<footer :class="$style.footer">
<footer :class="$style.footer" class="_gaps _h_gaps" tabindex="0" role="group" :aria-label="i18n.ts.noteFooterLabel">
<div :class="$style.noteFooterInfo">
<MkTime :time="appearNote.createdAt" mode="detail"/>
</div>
@ -83,7 +83,6 @@ import MkMediaList from '@/components/MkMediaList.vue';
import MkCwButton from '@/components/MkCwButton.vue';
import MkWindow from '@/components/MkWindow.vue';
import MkPoll from '@/components/MkPoll.vue';
import MkUrlPreview from '@/components/MkUrlPreview.vue';
import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
import { userPage } from '@/filters/user.js';
import { i18n } from '@/i18n.js';
@ -93,7 +92,7 @@ import { prefer } from '@/preferences';
import { getPluginHandlers } from '@/plugin.js';
import SkNoteTranslation from '@/components/SkNoteTranslation.vue';
import { getSelfNoteIds } from '@/utility/get-self-note-ids';
import { extractPreviewUrls } from '@/utility/extract-preview-urls.js';
import SkUrlPreviewGroup from '@/components/SkUrlPreviewGroup.vue';
const props = defineProps<{
note: Misskey.entities.Note;
@ -143,12 +142,11 @@ const isRenote = (
const el = shallowRef<HTMLElement>();
const appearNote = computed(() => isRenote ? note.value.renote as Misskey.entities.Note : note.value);
const parsed = computed(() => appearNote.value.text ? mfm.parse(appearNote.value.text) : null);
const parsed = computed(() => appearNote.value.text ? mfm.parse(appearNote.value.text) : []);
const showContent = ref(false);
const translation = ref<Misskey.entities.NotesTranslateResponse | false | null>(null);
const translating = ref(false);
const urls = computed(() => parsed.value ? extractPreviewUrls(props.note, parsed.value) : null);
const selfNoteIds = computed(() => getSelfNoteIds(props.note));
const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceTicker === 'remote' && appearNote.value.user.instance);
@ -163,11 +161,12 @@ const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceT
}
.footer {
position: relative;
z-index: 1;
margin-top: 0.4em;
width: max-content;
min-width: max-content;
position: relative;
z-index: 1;
margin-top: 0.4em;
width: max-content;
min-width: max-content;
overflow-x: auto;
}
.note {
@ -280,23 +279,11 @@ const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceT
padding: 8px;
opacity: 0.7;
&:not(:last-child) {
margin-right: 1.5em;
}
&:hover {
color: var(--MI_THEME-fgHighlighted);
}
}
@container (max-width: 350px) {
.noteFooterButton {
&:not(:last-child) {
margin-right: 0.1em;
}
}
}
@container (max-width: 500px) {
.root {
font-size: 0.9em;
@ -323,11 +310,5 @@ const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceT
width: 50px;
height: 50px;
}
.noteFooterButton {
&:not(:last-child) {
margin-right: 0.1em;
}
}
}
</style>

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>

348
packages/frontend/src/components/SkUrlPreviewGroup.vue Normal file
View file

@ -0,0 +1,348 @@
<!--
SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div v-if="isRefreshing">
<MkLoading :class="$style.loading"></MkLoading>
</div>
<template v-else>
<MkUrlPreview
v-for="preview of urlPreviews"
:key="preview.url"
:url="preview.url"
:previewHint="preview"
:noteHint="preview.note"
:attributionHint="preview.attributionUser"
:detail="detail"
:compact="compact"
:showAsQuote="showAsQuote"
:showActions="showActions"
:skipNoteIds="skipNoteIds"
></MkUrlPreview>
</template>
</template>
<script setup lang="ts">
import * as Misskey from 'misskey-js';
import * as mfm from '@transfem-org/sfm-js';
import { computed, ref, watch } from 'vue';
import { versatileLang } from '@@/js/intl-const';
import promiseLimit from 'promise-limit';
import type { SummalyResult } from '@/components/MkUrlPreview.vue';
import { extractPreviewUrls } from '@/utility/extract-preview-urls';
import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm';
import { $i } from '@/i';
import { misskeyApi } from '@/utility/misskey-api';
import MkUrlPreview from '@/components/MkUrlPreview.vue';
import { getNoteUrls } from '@/utility/getNoteUrls';
type Summary = SummalyResult & {
note?: Misskey.entities.Note | null;
attributionUser?: Misskey.entities.User | null;
};
type Limiter<T> = ReturnType<typeof promiseLimit<T>>;
const props = withDefaults(defineProps<{
sourceUrls?: string[];
sourceNodes?: mfm.MfmNode[];
sourceText?: string;
sourceNote?: Misskey.entities.Note;
detail?: boolean;
compact?: boolean;
showAsQuote?: boolean;
showActions?: boolean;
skipNoteIds?: string[];
}>(), {
sourceUrls: undefined,
sourceText: undefined,
sourceNodes: undefined,
sourceNote: undefined,
detail: undefined,
compact: undefined,
showAsQuote: undefined,
showActions: undefined,
skipNoteIds: () => [],
});
const urlPreviews = ref<Summary[]>([]);
const urls = computed<string[]>(() => {
if (props.sourceUrls) {
return props.sourceUrls;
}
// sourceNodes > sourceText > sourceNote
const source =
props.sourceNodes ??
(props.sourceText ? mfm.parse(props.sourceText) : null) ??
(props.sourceNote?.text ? mfm.parse(props.sourceNote.text) : null);
if (source) {
if (props.sourceNote) {
return extractPreviewUrls(props.sourceNote, source);
} else {
return extractUrlFromMfm(source);
}
}
return [];
});
// todo un-ref these
const isRefreshing = ref<Promise<void> | false>(false);
const cachedNotes = ref(new Map<string, Misskey.entities.Note | null>());
const cachedPreviews = ref(new Map<string, Summary | null>());
const cachedUsers = new Map<string, Misskey.entities.User | null>();
/**
* Refreshes the group.
* Calls are automatically de-duplicated.
*/
function refresh(): Promise<void> {
if (isRefreshing.value) return isRefreshing.value;
const promise = doRefresh();
promise.finally(() => isRefreshing.value = false);
isRefreshing.value = promise;
return promise;
}
/**
* Refreshes the group.
* Don't call this directly - use refresh() instead!
*/
async function doRefresh(): Promise<void> {
let previews = await fetchPreviews();
// Remove duplicates
previews = deduplicatePreviews(previews);
// Remove any with hidden notes
previews = previews.filter(preview => !preview.note || !props.skipNoteIds.includes(preview.note.id));
urlPreviews.value = previews;
}
async function fetchPreviews(): Promise<Summary[]> {
const userLimiter = promiseLimit<Misskey.entities.User | null>(4);
const noteLimiter = promiseLimit<Misskey.entities.Note | null>(2);
const summaryLimiter = promiseLimit<Summary | null>(5);
const summaries = await Promise.all(urls.value.map(url =>
summaryLimiter(async () => {
return await fetchPreview(url);
}).then(async (summary) => {
if (summary) {
await Promise.all([
attachNote(summary, noteLimiter),
attachAttribution(summary, userLimiter),
]);
}
return summary;
})));
return summaries.filter((preview): preview is Summary => preview != null);
}
async function fetchPreview(url: string): Promise<Summary | null> {
const cached = cachedPreviews.value.get(url);
if (cached) {
return cached;
}
const headers = $i ? { Authorization: `Bearer ${$i.token}` } : undefined;
const params = new URLSearchParams({ url, lang: versatileLang });
const res = await window.fetch(`/url?${params.toString()}`, { headers }).catch(() => null);
if (res?.ok) {
// Success - got the summary
const summary: Summary = await res.json();
cachedPreviews.value.set(url, summary);
if (summary.url !== url) {
cachedPreviews.value.set(summary.url, summary);
}
return summary;
}
// Failed, blocked, or not found
cachedPreviews.value.set(url, null);
return null;
}
async function attachNote(summary: Summary, noteLimiter: Limiter<Misskey.entities.Note | null>): Promise<void> {
if (props.showAsQuote && summary.activityPub && summary.haveNoteLocally) {
// Have to pull this out to make TS happy
const noteUri = summary.activityPub;
summary.note = await noteLimiter(async () => {
return await fetchNote(noteUri);
});
}
}
async function fetchNote(noteUri: string): Promise<Misskey.entities.Note | null> {
const cached = cachedNotes.value.get(noteUri);
if (cached) {
return cached;
}
const response = await misskeyApi('ap/show', { uri: noteUri }).catch(() => null);
if (response && response.type === 'Note') {
const note = response['object'];
// Success - got the note
cachedNotes.value.set(noteUri, note);
if (note.uri && note.uri !== noteUri) {
cachedNotes.value.set(note.uri, note);
}
return note;
}
// Failed, blocked, or not found
cachedNotes.value.set(noteUri, null);
return null;
}
async function attachAttribution(summary: Summary, userLimiter: Limiter<Misskey.entities.User | null>): Promise<void> {
if (summary.linkAttribution) {
// Have to pull this out to make TS happy
const userId = summary.linkAttribution.userId;
summary.attributionUser = await userLimiter(async () => {
return await fetchUser(userId);
});
}
}
async function fetchUser(userId: string): Promise<Misskey.entities.User | null> {
const cached = cachedUsers.get(userId);
if (cached) {
return cached;
}
const user = await misskeyApi('users/show', { userId }).catch(() => null);
cachedUsers.set(userId, user);
return user;
}
function deduplicatePreviews(previews: Summary[]): Summary[] {
// eslint-disable-next-line no-param-reassign
previews = previews
// Remove any previews with duplicate URL
.filter((preview, index) => !previews.some((p, i) => {
// Skip the current preview (don't count self as duplicate).
if (p === preview) return false;
// Skip differing URLs (not duplicate).
if (p.url !== preview.url) return false;
// Skip if we have AP and the other doesn't
if (preview.activityPub && !p.activityPub) return false;
// Skip if we have a note and the other doesn't
if (preview.note && !p.note) return false;
// Skip later previews (keep the earliest instance)...
// ...but only if we have AP or the later one doesn't...
// ...and only if we have note or the later one doesn't.
if (i > index && (preview.activityPub || !p.activityPub) && (preview.note || !p.note)) return false;
// If we get here, then "preview" is a duplicate of "p" and should be skipped.
return true;
}));
// eslint-disable-next-line no-param-reassign
previews = previews
// Remove any previews with duplicate AP
.filter((preview, index) => !previews.some((p, i) => {
// Skip the current preview (don't count self as duplicate).
if (p === preview) return false;
// Skip if we don't have AP
if (!preview.activityPub) return false;
// Skip if other does not have AP
if (!p.activityPub) return false;
// Skip differing URLs (not duplicate).
if (p.activityPub !== preview.activityPub) return false;
// Skip later previews (keep the earliest instance)
if (i > index) return false;
// If we get here, then "preview" is a duplicate of "p" and should be skipped.
return true;
}));
// eslint-disable-next-line no-param-reassign
previews = previews
// Remove any previews with duplicate note
.filter((preview, index) => !previews.some((p, i) => {
// Skip the current preview (don't count self as duplicate).
if (p === preview) return false;
// Skip if we don't have a note
if (!preview.note) return false;
// Skip if other does not have a note
if (!p.note) return false;
// Skip differing notes (not duplicate).
if (p.note.id !== preview.note.id) return false;
// Skip later previews (keep the earliest instance)
if (i > index) return false;
// If we get here, then "preview" is a duplicate of "p" and should be skipped.
return true;
}));
// eslint-disable-next-line no-param-reassign
previews = previews
// Remove any previews where the note duplicates url
.filter((preview, index) => !previews.some((p, i) => {
// Skip the current preview (don't count self as duplicate).
if (p === preview) return false;
// Skip if we have a note
if (preview.note) return false;
// Skip if other does not have a note
if (!p.note) return false;
// Skip later previews (keep the earliest instance)
if (i > index) return false;
const noteUrls = getNoteUrls(p.note);
// Remove if other duplicates our AP URL
if (preview.activityPub && noteUrls.includes(preview.activityPub)) return true;
// Remove if other duplicates our main URL
return noteUrls.includes(preview.url);
}));
return previews;
}
// Kick everything off, and watch for changes.
watch(
[urls, () => props.showAsQuote, () => props.skipNoteIds],
() => refresh(),
{ immediate: true },
);
</script>
<style module lang="scss">
.loading {
box-shadow: 0 0 0 1px var(--MI_THEME-divider);
border-radius: var(--MI-radius-sm);
}
</style>

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');

9
packages/frontend/src/components/global/PageWithHeader.vue
View file

@ -6,8 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div ref="rootEl" :class="[$style.root, reversed ? '_pageScrollableReversed' : '_pageScrollable']">
<MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" v-bind="pageHeaderProps"/></template>
<div :class="$style.body">
<template #header><MkPageHeader v-model:tab="tab" v-bind="pageHeaderProps" :class="{ _spacer: spacer }"/></template>
<div :class="[ $style.body, { _spacer: spacer } ]">
<MkSwiper v-if="prefer.s.enableHorizontalSwipe && swipable && (props.tabs?.length ?? 1) > 1" v-model:tab="tab" :class="$style.swiper" :tabs="props.tabs" :page="props.page">
<slot></slot>
</MkSwiper>
@ -31,13 +31,16 @@ const props = withDefaults(defineProps<PageHeaderProps & {
reversed?: boolean;
swipable?: boolean;
page?: string;
spacer?: boolean;
}>(), {
reversed: false,
swipable: true,
page: undefined,
spacer: false,
});
const pageHeaderProps = computed(() => {
const { reversed, ...rest } = props;
const { reversed, spacer, ...rest } = props;
return rest;
});

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;

20
packages/frontend/src/components/page/page.note.vue
View file

@ -11,8 +11,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { onMounted, onUnmounted, ref } from 'vue';
import * as Misskey from 'misskey-js';
import { retryOnThrottled } from '@@/js/retry-on-throttled.js';
import MkNote from '@/components/MkNote.vue';
import MkNoteDetailed from '@/components/MkNoteDetailed.vue';
import { misskeyApi } from '@/utility/misskey-api.js';
@ -20,16 +21,25 @@ import { misskeyApi } from '@/utility/misskey-api.js';
const props = defineProps<{
block: Misskey.entities.PageBlock,
page: Misskey.entities.Page,
index: number;
}>();
const note = ref<Misskey.entities.Note | null>(null);
// eslint-disable-next-line id-denylist
let timeoutId: ReturnType<typeof window.setTimeout> | null = null;
onMounted(() => {
if (props.block.note == null) return;
misskeyApi('notes/show', { noteId: props.block.note })
.then(result => {
note.value = result;
});
timeoutId = window.setTimeout(async () => {
note.value = await retryOnThrottled(() => misskeyApi('notes/show', { noteId: props.block.note }));
}, 500 * props.index); // rate limit is 2 reqs per sec
});
onUnmounted(() => {
if (timeoutId !== null) {
window.clearTimeout(timeoutId);
}
});
</script>

15
packages/frontend/src/components/page/page.text.vue
View file

@ -7,29 +7,20 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_gaps" :class="$style.textRoot">
<Mfm :text="block.text ?? ''" :isBlock="true" :isNote="false"/>
<div v-if="isEnabledUrlPreview" class="_gaps_s">
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :showAsQuote="!page.user.rejectQuotes"/>
<SkUrlPreviewGroup :sourceText="block.text" :showAsQuote="!page.user.rejectQuotes" @click.stop/>
</div>
</div>
</template>
<script lang="ts" setup>
import { defineAsyncComponent, computed } from 'vue';
import * as mfm from '@transfem-org/sfm-js';
import * as Misskey from 'misskey-js';
import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js';
import { isEnabledUrlPreview } from '@/instance.js';
import SkUrlPreviewGroup from '@/components/SkUrlPreviewGroup.vue';
const MkUrlPreview = defineAsyncComponent(() => import('@/components/MkUrlPreview.vue'));
const props = defineProps<{
defineProps<{
block: Misskey.entities.PageBlock,
page: Misskey.entities.Page,
}>();
const urls = computed(() => {
if (!props.block.text) return [];
return extractUrlFromMfm(mfm.parse(props.block.text));
});
</script>
<style lang="scss" module>

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

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div :class="{ [$style.center]: page.alignCenter, [$style.serif]: page.font === 'serif' }" class="_gaps">
<XBlock v-for="child in page.content" :key="child.id" :page="page" :block="child" :h="2"/>
<XBlock v-for="(child, index) in page.content" :key="child.id" :index="index" :page="page" :block="child" :h="2"/>
</div>
</template>