Merge branch Sharkey:develop into trackeropt
This commit is contained in:
Vavency
commit
d2b14753f0
252 changed files with 6425 additions and 2354 deletions
|
|
@ -18,6 +18,7 @@
|
|||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"incremental": true,
|
||||
"jsx": "react",
|
||||
"jsxFactory": "h"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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.13",
|
||||
"@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",
|
||||
|
|
@ -60,6 +60,7 @@
|
|||
"misskey-reversi": "workspace:*",
|
||||
"moment": "^2.30.1",
|
||||
"photoswipe": "5.4.4",
|
||||
"promise-limit": "2.7.0",
|
||||
"punycode.js": "2.3.1",
|
||||
"rollup": "4.40.0",
|
||||
"sanitize-html": "2.16.0",
|
||||
|
|
@ -76,7 +77,7 @@
|
|||
"uuid": "11.1.0",
|
||||
"v-code-diff": "1.13.1",
|
||||
"vite": "6.3.3",
|
||||
"vue": "3.5.13",
|
||||
"vue": "3.5.14",
|
||||
"vuedraggable": "next",
|
||||
"wanakana": "5.3.1"
|
||||
},
|
||||
|
|
@ -119,8 +120,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.13",
|
||||
"@vue/runtime-core": "3.5.13",
|
||||
"@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",
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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,6 +111,12 @@ 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<{
|
||||
report: Misskey.entities.AdminAbuseUserReportsResponse[number];
|
||||
|
|
@ -100,10 +126,27 @@ 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 metaHint = ref<Misskey.entities.AdminMetaResponse | undefined>(undefined);
|
||||
|
||||
const targetInstanceIcon = computed(() => props.report.targetInstance?.faviconUrl
|
||||
? getProxiedImageUrlNullable(props.report.targetInstance.faviconUrl, 'preview')
|
||||
: props.report.targetInstance?.iconUrl
|
||||
? getProxiedImageUrlNullable(props.report.targetInstance.iconUrl, 'preview')
|
||||
: null);
|
||||
|
||||
if (iAmAdmin) {
|
||||
misskeyApi('admin/meta')
|
||||
.then(meta => metaHint.value = meta)
|
||||
.catch(err => console.error('[MkAbuseReport] Error fetching meta:', err));
|
||||
}
|
||||
|
||||
const moderationNote = ref(props.report.moderationNote ?? '');
|
||||
|
||||
|
|
@ -150,4 +193,8 @@ function showMenu(ev: MouseEvent) {
|
|||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.instanceIcon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<button
|
||||
v-if="!link"
|
||||
ref="el" class="_button"
|
||||
:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike, [$style.iconOnly]: iconOnly, [$style.wait]: wait }]"
|
||||
:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.accent]: accent, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike, [$style.iconOnly]: iconOnly, [$style.wait]: wait }]"
|
||||
:type="type"
|
||||
:name="name"
|
||||
:value="value"
|
||||
|
|
@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</button>
|
||||
<MkA
|
||||
v-else class="_button"
|
||||
:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike, [$style.iconOnly]: iconOnly, [$style.wait]: wait }]"
|
||||
:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.accent]: accent, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike, [$style.iconOnly]: iconOnly, [$style.wait]: wait }]"
|
||||
:to="to ?? '#'"
|
||||
:behavior="linkBehavior"
|
||||
@mousedown="onMousedown"
|
||||
|
|
@ -48,6 +48,7 @@ const props = defineProps<{
|
|||
linkBehavior?: null | 'window' | 'browser';
|
||||
autofocus?: boolean;
|
||||
wait?: boolean;
|
||||
accent?: boolean;
|
||||
danger?: boolean;
|
||||
full?: boolean;
|
||||
small?: boolean;
|
||||
|
|
@ -234,6 +235,24 @@ function onMousedown(evt: MouseEvent): void {
|
|||
}
|
||||
}
|
||||
|
||||
&.accent {
|
||||
font-weight: bold;
|
||||
color: var(--MI_THEME-accent);
|
||||
|
||||
&.primary {
|
||||
color: #fff;
|
||||
background: var(--MI_THEME-accent);
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
font-weight: bold;
|
||||
color: var(--MI_THEME-error);
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
@leave="leave"
|
||||
@afterLeave="afterLeave"
|
||||
>
|
||||
<div v-show="showBody" ref="contentEl" :class="[$style.content, { [$style.omitted]: omitted }]">
|
||||
<div v-show="showBody" ref="contentEl" :class="[$style.content, { [$style.omitted]: omitted, [$style.naked]: naked }]">
|
||||
<slot></slot>
|
||||
<button v-if="omitted" :class="$style.fade" class="_button" @click="showMore">
|
||||
<span :class="$style.fadeLabel">{{ i18n.ts.showMore }}</span>
|
||||
|
|
@ -228,6 +228,11 @@ onUnmounted(() => {
|
|||
*/
|
||||
background: var(--MI_THEME-panel);
|
||||
|
||||
&.naked {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&.omitted {
|
||||
position: relative;
|
||||
max-height: var(--maxHeight);
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -86,13 +86,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
:isBlock="true"
|
||||
class="_selectable"
|
||||
/>
|
||||
<div v-if="translating || translation" :class="$style.translation">
|
||||
<MkLoading v-if="translating" mini/>
|
||||
<div v-else-if="translation">
|
||||
<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
|
||||
<Mfm :text="translation.text" :isBlock="true" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable"/>
|
||||
</div>
|
||||
</div>
|
||||
<SkNoteTranslation :note="note" :translation="translation" :translating="translating"></SkNoteTranslation>
|
||||
<MkButton v-if="!allowAnim && animated" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-play ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.play }}</MkButton>
|
||||
<MkButton v-else-if="!prefer.s.animatedMfm && allowAnim && animated" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-stop ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.stop }}</MkButton>
|
||||
</div>
|
||||
|
|
@ -101,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="[appearNote.renote?.id]" :class="$style.urlPreview" @click.stop/>
|
||||
<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/>
|
||||
</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">
|
||||
|
|
@ -119,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>
|
||||
|
|
@ -160,10 +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 ref="menuButton" :class="$style.footerButton" class="_button" @mousedown.prevent="showMenu()">
|
||||
<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()">
|
||||
<i class="ti ti-dots"></i>
|
||||
</button>
|
||||
</footer>
|
||||
|
|
@ -187,7 +184,7 @@ import * as mfm from '@transfem-org/sfm-js';
|
|||
import * as Misskey from 'misskey-js';
|
||||
import { isLink } from '@@/js/is-link.js';
|
||||
import { shouldCollapsed } from '@@/js/collapsed.js';
|
||||
import { host } from '@@/js/config.js';
|
||||
import * as config from '@@/js/config.js';
|
||||
import { computeMergedCw } from '@@/js/compute-merged-cw.js';
|
||||
import type { Ref } from 'vue';
|
||||
import type { MenuItem } from '@/types/menu.js';
|
||||
|
|
@ -219,7 +216,7 @@ import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js';
|
|||
import { checkAnimationFromMfm } from '@/utility/check-animated-mfm.js';
|
||||
import { $i } from '@/i.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu, getRenoteMenu } from '@/utility/get-note-menu.js';
|
||||
import { getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu, getRenoteMenu, translateNote } from '@/utility/get-note-menu.js';
|
||||
import { getNoteVersionsMenu } from '@/utility/get-note-versions-menu.js';
|
||||
import { useNoteCapture } from '@/use/use-note-capture.js';
|
||||
import { deepClone } from '@/utility/clone.js';
|
||||
|
|
@ -229,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 { 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 +234,9 @@ import { getPluginHandlers } from '@/plugin.js';
|
|||
import { DI } from '@/di.js';
|
||||
import { useRouter } from '@/router.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';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
note: Misskey.entities.Note;
|
||||
|
|
@ -304,13 +304,14 @@ 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 ? extractUrlFromMfm(parsed.value).filter((url) => appearNote.value.renote?.url !== url && appearNote.value.renote?.uri !== url) : null);
|
||||
const urls = computed(() => parsed.value ? extractPreviewUrls(props.note, parsed.value) : null);
|
||||
const selfNoteIds = computed(() => getSelfNoteIds(props.note));
|
||||
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);
|
||||
const { muted, hardMuted } = checkMutes(appearNote.value, props.withHardMute);
|
||||
const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
|
||||
const translation = ref<Misskey.entities.NotesTranslateResponse | false | null>(null);
|
||||
const translating = ref(false);
|
||||
const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceTicker === 'remote' && appearNote.value.user.instance);
|
||||
const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
|
||||
|
|
@ -327,7 +328,7 @@ const allowAnim = ref(prefer.s.advancedMfm && prefer.s.animatedMfm);
|
|||
|
||||
const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
|
||||
type: 'lookup',
|
||||
url: appearNote.value.url ?? appearNote.value.uri ?? `https://${host}/notes/${appearNote.value.id}`,
|
||||
url: appearNote.value.url ?? appearNote.value.uri ?? `${config.url}/notes/${appearNote.value.id}`,
|
||||
}));
|
||||
|
||||
const mergedCW = computed(() => computeMergedCw(appearNote.value));
|
||||
|
|
@ -358,6 +359,11 @@ const keymap = {
|
|||
if (!prefer.s.showClipButtonInNoteFooter) return;
|
||||
clip();
|
||||
},
|
||||
't': () => {
|
||||
if (prefer.s.showTranslationButtonInNoteFooter && policies.value.canUseTranslator && instance.translatorAvailable) {
|
||||
translate();
|
||||
}
|
||||
},
|
||||
'o': () => {
|
||||
if (renoteCollapsed.value) return;
|
||||
galleryEl.value?.openGallery();
|
||||
|
|
@ -780,6 +786,12 @@ async function clip(): Promise<void> {
|
|||
os.popupMenu(await getNoteClipMenu({ note: note.value, isDeleted, currentClip: currentClip?.value }), clipButton.value).then(focus);
|
||||
}
|
||||
|
||||
async function translate() {
|
||||
if (props.mock) return;
|
||||
|
||||
await translateNote(appearNote.value.id, translation, translating);
|
||||
}
|
||||
|
||||
function showRenoteMenu(): void {
|
||||
if (props.mock) {
|
||||
return;
|
||||
|
|
@ -901,11 +913,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 {
|
||||
|
|
@ -1154,13 +1166,6 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.translation {
|
||||
border: solid 0.5px var(--MI_THEME-divider);
|
||||
border-radius: var(--MI-radius);
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.urlPreview {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
|
@ -1198,10 +1203,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);
|
||||
}
|
||||
|
|
@ -1285,25 +1286,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;
|
||||
|
|
|
|||
|
|
@ -104,13 +104,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
class="_selectable"
|
||||
/>
|
||||
<a v-if="appearNote.renote != null" :class="$style.rn">RN:</a>
|
||||
<div v-if="translating || translation" :class="$style.translation">
|
||||
<MkLoading v-if="translating" mini/>
|
||||
<div v-else-if="translation">
|
||||
<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
|
||||
<Mfm :text="translation.text" :isBlock="true" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable"/>
|
||||
</div>
|
||||
</div>
|
||||
<SkNoteTranslation :note="note" :translation="translation" :translating="translating"></SkNoteTranslation>
|
||||
<MkButton v-if="!allowAnim && animated" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-play ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.play }}</MkButton>
|
||||
<MkButton v-else-if="!prefer.s.animatedMfm && allowAnim && animated" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-stop ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.stop }}</MkButton>
|
||||
<div v-if="appearNote.files && appearNote.files.length > 0">
|
||||
|
|
@ -118,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="[appearNote.renote?.id]" style="margin-top: 6px;"/>
|
||||
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" style="margin-top: 6px;"/>
|
||||
</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"/>
|
||||
|
|
@ -172,10 +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 ref="menuButton" class="_button" :class="$style.noteFooterButton" @mousedown.prevent="showMenu()">
|
||||
<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()">
|
||||
<i class="ti ti-dots"></i>
|
||||
</button>
|
||||
</footer>
|
||||
|
|
@ -239,7 +236,7 @@ import { computed, inject, onMounted, provide, ref, useTemplateRef, watch } from
|
|||
import * as mfm from '@transfem-org/sfm-js';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { isLink } from '@@/js/is-link.js';
|
||||
import { host } from '@@/js/config.js';
|
||||
import * as config from '@@/js/config.js';
|
||||
import { computeMergedCw } from '@@/js/compute-merged-cw.js';
|
||||
import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
|
||||
import type { Paging } from '@/components/MkPagination.vue';
|
||||
|
|
@ -267,7 +264,7 @@ import { reactionPicker } from '@/utility/reaction-picker.js';
|
|||
import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js';
|
||||
import { $i } from '@/i.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { getNoteClipMenu, getNoteMenu, getRenoteMenu } from '@/utility/get-note-menu.js';
|
||||
import { getNoteClipMenu, getNoteMenu, getRenoteMenu, translateNote } from '@/utility/get-note-menu.js';
|
||||
import { getNoteVersionsMenu } from '@/utility/get-note-versions-menu.js';
|
||||
import { checkAnimationFromMfm } from '@/utility/check-animated-mfm.js';
|
||||
import { useNoteCapture } from '@/use/use-note-capture.js';
|
||||
|
|
@ -281,12 +278,15 @@ 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 { 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';
|
||||
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';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
note: Misskey.entities.Note;
|
||||
|
|
@ -337,11 +337,12 @@ const isMyRenote = $i && ($i.id === note.value.userId);
|
|||
const showContent = ref(prefer.s.uncollapseCW);
|
||||
const isDeleted = ref(false);
|
||||
const renoted = ref(false);
|
||||
const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
|
||||
const translation = ref<Misskey.entities.NotesTranslateResponse | false | null>(null);
|
||||
const translating = ref(false);
|
||||
const parsed = appearNote.value.text ? mfm.parse(appearNote.value.text) : null;
|
||||
const urls = parsed ? extractUrlFromMfm(parsed).filter((url) => appearNote.value.renote?.url !== url && appearNote.value.renote?.uri !== url) : null;
|
||||
const animated = computed(() => parsed ? checkAnimationFromMfm(parsed) : null);
|
||||
const parsed = computed(() => appearNote.value.text ? mfm.parse(appearNote.value.text) : null);
|
||||
const urls = computed(() => parsed.value ? extractPreviewUrls(props.note, parsed.value) : null);
|
||||
const selfNoteIds = computed(() => getSelfNoteIds(props.note));
|
||||
const animated = computed(() => parsed.value ? checkAnimationFromMfm(parsed.value) : null);
|
||||
const allowAnim = ref(prefer.s.advancedMfm && prefer.s.animatedMfm);
|
||||
const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceTicker === 'remote' && appearNote.value.user.instance);
|
||||
const conversation = ref<Misskey.entities.Note[]>([]);
|
||||
|
|
@ -374,7 +375,7 @@ let renoting = false;
|
|||
|
||||
const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
|
||||
type: 'lookup',
|
||||
url: appearNote.value.url ?? appearNote.value.uri ?? `https://${host}/notes/${appearNote.value.id}`,
|
||||
url: appearNote.value.url ?? appearNote.value.uri ?? `${config.url}/notes/${appearNote.value.id}`,
|
||||
}));
|
||||
|
||||
const keymap = {
|
||||
|
|
@ -386,6 +387,11 @@ const keymap = {
|
|||
if (!prefer.s.showClipButtonInNoteFooter) return;
|
||||
clip();
|
||||
},
|
||||
't': () => {
|
||||
if (prefer.s.showTranslationButtonInNoteFooter && policies.value.canUseTranslator && instance.translatorAvailable) {
|
||||
translate();
|
||||
}
|
||||
},
|
||||
'o': () => galleryEl.value?.openGallery(),
|
||||
'v|enter': () => {
|
||||
if (appearNote.value.cw != null) {
|
||||
|
|
@ -764,6 +770,10 @@ async function clip(): Promise<void> {
|
|||
os.popupMenu(await getNoteClipMenu({ note: note.value, isDeleted }), clipButton.value).then(focus);
|
||||
}
|
||||
|
||||
async function translate() {
|
||||
await translateNote(appearNote.value.id, translation, translating);
|
||||
}
|
||||
|
||||
function showRenoteMenu(): void {
|
||||
if (!isMyRenote) return;
|
||||
pleaseLogin({ openOnRemote: pleaseLoginContext.value });
|
||||
|
|
@ -876,12 +886,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 {
|
||||
|
|
@ -1042,13 +1050,6 @@ function animatedMFM() {
|
|||
color: var(--MI_THEME-renote);
|
||||
}
|
||||
|
||||
.translation {
|
||||
border: solid 0.5px var(--MI_THEME-divider);
|
||||
border-radius: var(--MI-radius);
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.poll {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
|
@ -1080,10 +1081,6 @@ function animatedMFM() {
|
|||
padding: 8px;
|
||||
opacity: 0.7;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--MI_THEME-fgHighlighted);
|
||||
}
|
||||
|
|
@ -1166,14 +1163,6 @@ function animatedMFM() {
|
|||
}
|
||||
}
|
||||
|
||||
@container (max-width: 350px) {
|
||||
.noteFooterButton {
|
||||
&:not(:last-child) {
|
||||
margin-right: 0.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 300px) {
|
||||
.root {
|
||||
font-size: 0.825em;
|
||||
|
|
@ -1183,12 +1172,6 @@ function animatedMFM() {
|
|||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.noteFooterButton {
|
||||
&:not(:last-child) {
|
||||
margin-right: 0.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.muted {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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 { host } from '@@/js/config.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;
|
||||
|
|
@ -123,11 +131,12 @@ const props = withDefaults(defineProps<{
|
|||
const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i?.id);
|
||||
|
||||
const el = shallowRef<HTMLElement>();
|
||||
const translation = ref<any>(null);
|
||||
const translation = ref<Misskey.entities.NotesTranslateResponse | false | null>(null);
|
||||
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>();
|
||||
|
|
@ -150,9 +159,11 @@ const isRenote = (
|
|||
|
||||
const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
|
||||
type: 'lookup',
|
||||
url: appearNote.value.url ?? appearNote.value.uri ?? `https://${host}/notes/${appearNote.value.id}`,
|
||||
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,
|
||||
|
|
@ -400,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 {
|
||||
|
|
@ -450,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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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][];
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<script lang="ts" setup>
|
||||
import { reactive, watch } from 'vue';
|
||||
import number from '@/filters/number.js';
|
||||
import { prefer } from '@/preferences';
|
||||
|
||||
const props = defineProps<{
|
||||
value: number;
|
||||
|
|
@ -36,7 +37,11 @@ watch(() => props.value, (to, from) => {
|
|||
}
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(step);
|
||||
if (prefer.s.animation) {
|
||||
window.requestAnimationFrame(step);
|
||||
} else {
|
||||
tweened.number = to;
|
||||
}
|
||||
}, {
|
||||
immediate: true,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { host } from '@@/js/config.js';
|
||||
import * as config from '@@/js/config.js';
|
||||
import { useInterval } from '@@/js/use-interval.js';
|
||||
import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
|
||||
import { sum } from '@/utility/array.js';
|
||||
|
|
@ -72,7 +72,7 @@ const showResult = ref(props.readOnly || isVoted.value);
|
|||
|
||||
const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
|
||||
type: 'lookup',
|
||||
url: `https://${host}/notes/${props.noteId}`,
|
||||
url: `${config.url}/notes/${props.noteId}`,
|
||||
}));
|
||||
|
||||
// 期限付きアンケート
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
? `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');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ import { i18n } from '@/i18n.js';
|
|||
const props = withDefaults(defineProps<{
|
||||
role: Misskey.entities.Role;
|
||||
forModeration: boolean;
|
||||
detailed: boolean;
|
||||
detailed?: boolean;
|
||||
}>(), {
|
||||
detailed: true,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -12,13 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<Mfm v-if="note.text" :text="note.text" :isBlock="true" :author="note.user" :nyaize="'respect'" :isAnim="allowAnim" :emojiUrls="note.emojis"/>
|
||||
<MkButton v-if="!allowAnim && animated && !hideFiles" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-play ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.play }}</MkButton>
|
||||
<MkButton v-else-if="!prefer.s.animatedMfm && allowAnim && animated && !hideFiles" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-stop ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.stop }}</MkButton>
|
||||
<div v-if="note.text && translating || note.text && translation" :class="$style.translation">
|
||||
<MkLoading v-if="translating" mini/>
|
||||
<div v-else>
|
||||
<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
|
||||
<Mfm :text="translation.text" :isBlock="true" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis"/>
|
||||
</div>
|
||||
</div>
|
||||
<SkNoteTranslation :note="note" :translation="translation" :translating="translating"></SkNoteTranslation>
|
||||
<MkA v-if="note.renoteId" :class="$style.rp" :to="`/notes/${note.renoteId}`" @click.stop>RN: ...</MkA>
|
||||
</div>
|
||||
<details v-if="note.files && note.files.length > 0" :open="!prefer.s.collapseFiles && !hideFiles">
|
||||
|
|
@ -51,14 +45,20 @@ import * as os from '@/os.js';
|
|||
import { checkAnimationFromMfm } from '@/utility/check-animated-mfm.js';
|
||||
import { useRouter } from '@/router';
|
||||
import { prefer } from '@/preferences.js';
|
||||
import SkNoteTranslation from '@/components/SkNoteTranslation.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
const props = withDefaults(defineProps<{
|
||||
note: Misskey.entities.Note;
|
||||
translating?: boolean;
|
||||
translation?: any;
|
||||
translation?: Misskey.entities.NotesTranslateResponse | false | null;
|
||||
hideFiles?: boolean;
|
||||
expandAllCws?: boolean;
|
||||
}>();
|
||||
}>(), {
|
||||
translating: false,
|
||||
translation: null,
|
||||
hideFiles: false,
|
||||
expandAllCws: false,
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
|
|
@ -140,13 +140,6 @@ watch(() => props.expandAllCws, (expandAllCws) => {
|
|||
color: var(--MI_THEME-renote);
|
||||
}
|
||||
|
||||
.translation {
|
||||
border: solid 0.5px var(--MI_THEME-divider);
|
||||
border-radius: var(--MI-radius);
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.showLess {
|
||||
width: 100%;
|
||||
margin-top: 14px;
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -65,14 +65,25 @@ 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">
|
||||
<i class="ti ti-brand-x"></i> {{ i18n.ts.expandTweet }}
|
||||
</MkButton>
|
||||
</div>
|
||||
<div v-if="showAsQuote && activityPub && !theNote && !fetchingTheNote" :class="$style.action">
|
||||
<MkButton :small="true" inline @click="fetchNote()">
|
||||
<div v-if="showAsQuote && activityPub && !theNote && $i" :class="$style.action">
|
||||
<MkButton :small="true" :disabled="!!fetching || fetchingTheNote" inline @click="() => refresh(true)">
|
||||
<i class="ti ti-note"></i> {{ i18n.ts.fetchLinkedNote }}
|
||||
</MkButton>
|
||||
</div>
|
||||
|
|
@ -88,12 +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 type { summaly } from '@misskey-dev/summaly';
|
||||
import { maybeMakeRelative } from '@@/js/url.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import * as os from '@/os.js';
|
||||
import { deviceKind } from '@/utility/device-kind.js';
|
||||
|
|
@ -104,9 +127,8 @@ import { prefer } from '@/preferences.js';
|
|||
import { misskeyApi } from '@/utility/misskey-api.js';
|
||||
import { warningExternalWebsite } from '@/utility/warning-external-website.js';
|
||||
import DynamicNoteSimple from '@/components/DynamicNoteSimple.vue';
|
||||
import { maybeMakeRelative } from '@@/js/url.js';
|
||||
|
||||
type SummalyResult = Awaited<ReturnType<typeof summaly>>;
|
||||
import { $i } from '@/i';
|
||||
import { userPage } from '@/filters/user.js';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
url: string;
|
||||
|
|
@ -115,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;
|
||||
|
|
@ -131,7 +159,7 @@ const maybeRelativeUrl = maybeMakeRelative(props.url, local);
|
|||
const self = maybeRelativeUrl !== props.url;
|
||||
const attr = self ? 'to' : 'href';
|
||||
const target = self ? null : '_blank';
|
||||
const fetching = ref(true);
|
||||
const fetching = ref<Promise<void> | null>(null);
|
||||
const title = ref<string | null>(null);
|
||||
const description = ref<string | null>(null);
|
||||
const thumbnail = ref<string | null>(null);
|
||||
|
|
@ -139,11 +167,16 @@ const icon = ref<string | null>(null);
|
|||
const sitename = ref<string | null>(null);
|
||||
const sensitive = ref<boolean>(false);
|
||||
const activityPub = ref<string | null>(null);
|
||||
const player = ref({
|
||||
const player = ref<SummalyResult['player']>({
|
||||
url: null,
|
||||
width: null,
|
||||
height: null,
|
||||
} as SummalyResult['player']);
|
||||
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);
|
||||
|
|
@ -152,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;
|
||||
|
|
@ -165,22 +221,29 @@ 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;
|
||||
return;
|
||||
}
|
||||
theNote.value = response['object'];
|
||||
fetchingTheNote.value = false;
|
||||
} catch (err) {
|
||||
if (_DEV_) {
|
||||
console.error(`failed to extract note for preview of ${activityPub.value}`, err);
|
||||
}
|
||||
activityPub.value = null;
|
||||
fetchingTheNote.value = false;
|
||||
theNote.value = null;
|
||||
} finally {
|
||||
fetchingTheNote.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -192,45 +255,69 @@ 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 = '';
|
||||
*/
|
||||
|
||||
window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${versatileLang}`)
|
||||
.then(res => {
|
||||
if (!res.ok) {
|
||||
if (_DEV_) {
|
||||
console.warn(`[HTTP${res.status}] Failed to fetch url preview`);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
return res.json();
|
||||
})
|
||||
.then((info: SummalyResult & { haveNoteLocally?: boolean } | null) => {
|
||||
if (!info || info.url == null) {
|
||||
fetching.value = false;
|
||||
unknownUrl.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
fetching.value = false;
|
||||
unknownUrl.value = false;
|
||||
|
||||
title.value = info.title;
|
||||
description.value = info.description;
|
||||
thumbnail.value = info.thumbnail;
|
||||
icon.value = info.icon;
|
||||
sitename.value = info.sitename;
|
||||
player.value = info.player;
|
||||
sensitive.value = info.sensitive ?? false;
|
||||
activityPub.value = info.activityPub;
|
||||
if (info.haveNoteLocally) {
|
||||
fetchNote();
|
||||
}
|
||||
function refresh(withFetch = false, initial = false) {
|
||||
const params = new URLSearchParams({
|
||||
url: requestUrl.href,
|
||||
lang: versatileLang,
|
||||
});
|
||||
if (withFetch) {
|
||||
params.set('fetch', 'true');
|
||||
}
|
||||
|
||||
const headers = $i ? { Authorization: `Bearer ${$i.token}` } : undefined;
|
||||
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 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;
|
||||
thumbnail.value = info?.thumbnail ?? null;
|
||||
icon.value = info?.icon ?? null;
|
||||
sitename.value = info?.sitename ?? null;
|
||||
player.value = info?.player ?? {
|
||||
url: null,
|
||||
width: null,
|
||||
height: null,
|
||||
allow: [],
|
||||
};
|
||||
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;
|
||||
|
||||
await Promise.all([
|
||||
fetchAttribution(initial),
|
||||
fetchNote(initial),
|
||||
]);
|
||||
})
|
||||
.finally(() => {
|
||||
fetching.value = null;
|
||||
});
|
||||
}
|
||||
|
||||
function adjustTweetHeight(message: MessageEvent) {
|
||||
if (message.origin !== 'https://platform.twitter.com') return;
|
||||
|
|
@ -256,6 +343,9 @@ window.addEventListener('message', adjustTweetHeight);
|
|||
onUnmounted(() => {
|
||||
window.removeEventListener('message', adjustTweetHeight);
|
||||
});
|
||||
|
||||
// Load initial data
|
||||
refresh(false, true);
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
|
@ -339,7 +429,7 @@ onUnmounted(() => {
|
|||
.body {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
padding: 16px !important; // Unfortunately needed to win a specificity race with MkNoteSimple / SkNoteSimple
|
||||
}
|
||||
|
||||
.header {
|
||||
|
|
@ -377,6 +467,28 @@ onUnmounted(() => {
|
|||
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
84
packages/frontend/src/components/SkBadgeStrip.vue
Normal 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
55
packages/frontend/src/components/SkDateSeparatedList.vue
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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```',
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -88,13 +88,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
:isAnim="allowAnim"
|
||||
:isBlock="true"
|
||||
/>
|
||||
<div v-if="translating || translation" :class="$style.translation">
|
||||
<MkLoading v-if="translating" mini/>
|
||||
<div v-else-if="translation">
|
||||
<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
|
||||
<Mfm :text="translation.text" :isBlock="true" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable"/>
|
||||
</div>
|
||||
</div>
|
||||
<SkNoteTranslation :note="note" :translation="translation" :translating="translating"></SkNoteTranslation>
|
||||
<MkButton v-if="!allowAnim && animated" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-play ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.play }}</MkButton>
|
||||
<MkButton v-else-if="!prefer.s.animatedMfm && allowAnim && animated" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-stop ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.stop }}</MkButton>
|
||||
</div>
|
||||
|
|
@ -103,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="[appearNote.renote?.id]" :class="$style.urlPreview" @click.stop/>
|
||||
<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/>
|
||||
</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">
|
||||
|
|
@ -120,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>
|
||||
|
|
@ -161,10 +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 ref="menuButton" :class="$style.footerButton" class="_button" @mousedown.prevent="showMenu()">
|
||||
<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()">
|
||||
<i class="ti ti-dots"></i>
|
||||
</button>
|
||||
</footer>
|
||||
|
|
@ -188,7 +185,7 @@ import * as mfm from '@transfem-org/sfm-js';
|
|||
import * as Misskey from 'misskey-js';
|
||||
import { isLink } from '@@/js/is-link.js';
|
||||
import { shouldCollapsed } from '@@/js/collapsed.js';
|
||||
import { host } from '@@/js/config.js';
|
||||
import * as config from '@@/js/config.js';
|
||||
import { computeMergedCw } from '@@/js/compute-merged-cw.js';
|
||||
import type { Ref } from 'vue';
|
||||
import type { MenuItem } from '@/types/menu.js';
|
||||
|
|
@ -219,7 +216,7 @@ import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js';
|
|||
import { checkAnimationFromMfm } from '@/utility/check-animated-mfm.js';
|
||||
import { $i } from '@/i.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu } from '@/utility/get-note-menu.js';
|
||||
import { getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu, translateNote } from '@/utility/get-note-menu.js';
|
||||
import { getNoteVersionsMenu } from '@/utility/get-note-versions-menu.js';
|
||||
import { useNoteCapture } from '@/use/use-note-capture.js';
|
||||
import { deepClone } from '@/utility/clone.js';
|
||||
|
|
@ -229,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 { 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 +234,9 @@ import { getPluginHandlers } from '@/plugin.js';
|
|||
import { DI } from '@/di.js';
|
||||
import { useRouter } from '@/router.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';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
note: Misskey.entities.Note;
|
||||
|
|
@ -304,13 +304,14 @@ 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 ? extractUrlFromMfm(parsed.value).filter((url) => appearNote.value.renote?.url !== url && appearNote.value.renote?.uri !== url) : null);
|
||||
const urls = computed(() => parsed.value ? extractPreviewUrls(props.note, parsed.value) : null);
|
||||
const selfNoteIds = computed(() => getSelfNoteIds(props.note));
|
||||
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);
|
||||
const { muted, hardMuted } = checkMutes(appearNote.value, props.withHardMute);
|
||||
const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
|
||||
const translation = ref<Misskey.entities.NotesTranslateResponse | false | null>(null);
|
||||
const translating = ref(false);
|
||||
const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceTicker === 'remote' && appearNote.value.user.instance);
|
||||
const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
|
||||
|
|
@ -327,7 +328,7 @@ const allowAnim = ref(prefer.s.advancedMfm && prefer.s.animatedMfm);
|
|||
|
||||
const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
|
||||
type: 'lookup',
|
||||
url: appearNote.value.url ?? appearNote.value.uri ?? `https://${host}/notes/${appearNote.value.id}`,
|
||||
url: appearNote.value.url ?? appearNote.value.uri ?? `${config.url}/notes/${appearNote.value.id}`,
|
||||
}));
|
||||
|
||||
const mergedCW = computed(() => computeMergedCw(appearNote.value));
|
||||
|
|
@ -358,6 +359,11 @@ const keymap = {
|
|||
if (!prefer.s.showClipButtonInNoteFooter) return;
|
||||
clip();
|
||||
},
|
||||
't': () => {
|
||||
if (prefer.s.showTranslationButtonInNoteFooter && policies.value.canUseTranslator && instance.translatorAvailable) {
|
||||
translate();
|
||||
}
|
||||
},
|
||||
'o': () => {
|
||||
if (renoteCollapsed.value) return;
|
||||
galleryEl.value?.openGallery();
|
||||
|
|
@ -780,6 +786,12 @@ async function clip(): Promise<void> {
|
|||
os.popupMenu(await getNoteClipMenu({ note: note.value, isDeleted, currentClip: currentClip?.value }), clipButton.value).then(focus);
|
||||
}
|
||||
|
||||
async function translate() {
|
||||
if (props.mock) return;
|
||||
|
||||
await translateNote(appearNote.value.id, translation, translating);
|
||||
}
|
||||
|
||||
function showRenoteMenu(): void {
|
||||
if (props.mock) {
|
||||
return;
|
||||
|
|
@ -909,11 +921,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 {
|
||||
|
|
@ -935,10 +947,6 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
|
||||
.footerButton {
|
||||
font-size: 90%;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1188,13 +1196,6 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.translation {
|
||||
border: solid 0.5px var(--MI_THEME-divider);
|
||||
border-radius: var(--MI-radius);
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.urlPreview {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
|
@ -1233,10 +1234,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);
|
||||
}
|
||||
|
|
@ -1353,25 +1350,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;
|
||||
|
|
@ -1380,16 +1359,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;
|
||||
|
|
|
|||
|
|
@ -109,13 +109,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
class="_selectable"
|
||||
/>
|
||||
<a v-if="appearNote.renote != null" :class="$style.rn">RN:</a>
|
||||
<div v-if="translating || translation" :class="$style.translation">
|
||||
<MkLoading v-if="translating" mini/>
|
||||
<div v-else-if="translation">
|
||||
<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
|
||||
<Mfm :text="translation.text" :isBlock="true" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable"/>
|
||||
</div>
|
||||
</div>
|
||||
<SkNoteTranslation :note="note" :translation="translation" :translating="translating"></SkNoteTranslation>
|
||||
<MkButton v-if="!allowAnim && animated" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-play ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.play }}</MkButton>
|
||||
<MkButton v-else-if="!prefer.s.animatedMfm && allowAnim && animated" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-stop ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.stop }}</MkButton>
|
||||
<div v-if="appearNote.files && appearNote.files.length > 0">
|
||||
|
|
@ -123,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="[appearNote.renote?.id]" style="margin-top: 6px;"/>
|
||||
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" style="margin-top: 6px;"/>
|
||||
</div>
|
||||
<div v-if="appearNote.renote" :class="$style.quote"><SkNoteSimple :note="appearNote.renote" :class="$style.quoteNote" :expandAllCws="props.expandAllCws"/></div>
|
||||
</div>
|
||||
|
|
@ -138,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>
|
||||
|
|
@ -177,10 +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 ref="menuButton" class="_button" :class="$style.noteFooterButton" @mousedown.prevent="showMenu()">
|
||||
<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()">
|
||||
<i class="ti ti-dots"></i>
|
||||
</button>
|
||||
</footer>
|
||||
|
|
@ -244,7 +241,7 @@ import { computed, inject, onMounted, onUnmounted, onUpdated, provide, ref, useT
|
|||
import * as mfm from '@transfem-org/sfm-js';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { isLink } from '@@/js/is-link.js';
|
||||
import { host } from '@@/js/config.js';
|
||||
import * as config from '@@/js/config.js';
|
||||
import { computeMergedCw } from '@@/js/compute-merged-cw.js';
|
||||
import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
|
||||
import type { Paging } from '@/components/MkPagination.vue';
|
||||
|
|
@ -272,7 +269,7 @@ import { reactionPicker } from '@/utility/reaction-picker.js';
|
|||
import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js';
|
||||
import { $i } from '@/i.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { getNoteClipMenu, getNoteMenu, getRenoteMenu } from '@/utility/get-note-menu.js';
|
||||
import { getNoteClipMenu, getNoteMenu, getRenoteMenu, translateNote } from '@/utility/get-note-menu.js';
|
||||
import { getNoteVersionsMenu } from '@/utility/get-note-versions-menu.js';
|
||||
import { checkAnimationFromMfm } from '@/utility/check-animated-mfm.js';
|
||||
import { useNoteCapture } from '@/use/use-note-capture.js';
|
||||
|
|
@ -286,12 +283,15 @@ 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 { 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';
|
||||
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';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
note: Misskey.entities.Note;
|
||||
|
|
@ -343,11 +343,12 @@ const isMyRenote = $i && ($i.id === note.value.userId);
|
|||
const showContent = ref(prefer.s.uncollapseCW);
|
||||
const isDeleted = ref(false);
|
||||
const renoted = ref(false);
|
||||
const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
|
||||
const translation = ref<Misskey.entities.NotesTranslateResponse | false | null>(null);
|
||||
const translating = ref(false);
|
||||
const parsed = appearNote.value.text ? mfm.parse(appearNote.value.text) : null;
|
||||
const urls = parsed ? extractUrlFromMfm(parsed).filter((url) => appearNote.value.renote?.url !== url && appearNote.value.renote?.uri !== url) : null;
|
||||
const animated = computed(() => parsed ? checkAnimationFromMfm(parsed) : null);
|
||||
const parsed = computed(() => appearNote.value.text ? mfm.parse(appearNote.value.text) : null);
|
||||
const urls = computed(() => parsed.value ? extractPreviewUrls(props.note, parsed.value) : null);
|
||||
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);
|
||||
const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceTicker === 'remote' && appearNote.value.user.instance);
|
||||
const conversation = ref<Misskey.entities.Note[]>([]);
|
||||
|
|
@ -380,7 +381,7 @@ let renoting = false;
|
|||
|
||||
const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
|
||||
type: 'lookup',
|
||||
url: appearNote.value.url ?? appearNote.value.uri ?? `https://${host}/notes/${appearNote.value.id}`,
|
||||
url: appearNote.value.url ?? appearNote.value.uri ?? `${config.url}/notes/${appearNote.value.id}`,
|
||||
}));
|
||||
|
||||
const keymap = {
|
||||
|
|
@ -392,6 +393,11 @@ const keymap = {
|
|||
if (!prefer.s.showClipButtonInNoteFooter) return;
|
||||
clip();
|
||||
},
|
||||
't': () => {
|
||||
if (prefer.s.showTranslationButtonInNoteFooter && policies.value.canUseTranslator && instance.translatorAvailable) {
|
||||
translate();
|
||||
}
|
||||
},
|
||||
'o': () => galleryEl.value?.openGallery(),
|
||||
'v|enter': () => {
|
||||
if (appearNote.value.cw != null) {
|
||||
|
|
@ -770,6 +776,10 @@ async function clip(): Promise<void> {
|
|||
os.popupMenu(await getNoteClipMenu({ note: note.value, isDeleted }), clipButton.value).then(focus);
|
||||
}
|
||||
|
||||
async function translate() {
|
||||
await translateNote(appearNote.value.id, translation, translating);
|
||||
}
|
||||
|
||||
function showRenoteMenu(): void {
|
||||
if (!isMyRenote) return;
|
||||
pleaseLogin({ openOnRemote: pleaseLoginContext.value });
|
||||
|
|
@ -908,13 +918,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 {
|
||||
|
|
@ -1100,13 +1110,6 @@ onUnmounted(() => {
|
|||
color: var(--MI_THEME-renote);
|
||||
}
|
||||
|
||||
.translation {
|
||||
border: solid 0.5px var(--MI_THEME-divider);
|
||||
border-radius: var(--MI-radius);
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.poll {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
|
@ -1138,10 +1141,6 @@ onUnmounted(() => {
|
|||
padding: 8px;
|
||||
opacity: 0.7;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--MI_THEME-fgHighlighted);
|
||||
}
|
||||
|
|
@ -1231,14 +1230,6 @@ onUnmounted(() => {
|
|||
}
|
||||
}
|
||||
|
||||
@container (max-width: 350px) {
|
||||
.noteFooterButton {
|
||||
&:not(:last-child) {
|
||||
margin-right: 0.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 300px) {
|
||||
.root {
|
||||
font-size: 0.825em;
|
||||
|
|
@ -1248,12 +1239,6 @@ onUnmounted(() => {
|
|||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.noteFooterButton {
|
||||
&:not(:last-child) {
|
||||
margin-right: 0.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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 { host } from '@@/js/config.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;
|
||||
|
|
@ -137,11 +145,12 @@ const canRenote = computed(() => ['public', 'home'].includes(props.note.visibili
|
|||
const hideLine = computed(() => props.detail);
|
||||
|
||||
const el = shallowRef<HTMLElement>();
|
||||
const translation = ref<any>(null);
|
||||
const translation = ref<Misskey.entities.NotesTranslateResponse | false | null>(null);
|
||||
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>();
|
||||
|
|
@ -164,9 +173,11 @@ const isRenote = (
|
|||
|
||||
const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
|
||||
type: 'lookup',
|
||||
url: appearNote.value.url ?? appearNote.value.uri ?? `https://${host}/notes/${appearNote.value.id}`,
|
||||
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,
|
||||
|
|
@ -430,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 {
|
||||
|
|
@ -540,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;
|
||||
|
|
|
|||
48
packages/frontend/src/components/SkNoteTranslation.vue
Normal file
48
packages/frontend/src/components/SkNoteTranslation.vue
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div v-if="translating || translation != null" :class="$style.translation">
|
||||
<MkLoading v-if="translating" mini/>
|
||||
<div v-else-if="translation && translation.text != null">
|
||||
<b v-if="translation.sourceLang">{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
|
||||
<Mfm :text="translation.text" :isBlock="true" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis" class="_selectable"/>
|
||||
</div>
|
||||
<div v-else>{{ i18n.ts.translationFailed }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { watch } from 'vue';
|
||||
import { i18n } from '@/i18n.js';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
note: Misskey.entities.Note;
|
||||
translating?: boolean;
|
||||
translation?: Misskey.entities.NotesTranslateResponse | false | null;
|
||||
}>(), {
|
||||
translating: false,
|
||||
translation: null,
|
||||
});
|
||||
|
||||
if (_DEV_) {
|
||||
// Prop watch syntax: https://stackoverflow.com/a/59127059
|
||||
watch(
|
||||
[() => props.translation, () => props.translating],
|
||||
([translation, translating]) => console.debug('Translation status changed: ', { translation, translating }),
|
||||
{ immediate: true },
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style module lang="scss">
|
||||
.translation {
|
||||
border: solid 0.5px var(--MI_THEME-divider);
|
||||
border-radius: var(--MI-radius);
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
</div>
|
||||
<div :class="$style.noteHeaderUsername"><MkAcct :user="appearNote.user"/></div>
|
||||
<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
|
||||
<MkInstanceTicker v-if="showTicker" :host="appearNote.user.host" :instance="appearNote.user.instance"/>
|
||||
</div>
|
||||
</header>
|
||||
<div :class="$style.noteContent">
|
||||
|
|
@ -42,23 +42,17 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<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"/>
|
||||
<a v-if="appearNote.renote != null" :class="$style.rn">RN:</a>
|
||||
<div v-if="translating || translation" :class="$style.translation">
|
||||
<MkLoading v-if="translating" mini/>
|
||||
<div v-else>
|
||||
<b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b>
|
||||
<Mfm :text="translation.text" :isBlock="true" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis"/>
|
||||
</div>
|
||||
</div>
|
||||
<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" style="margin-top: 6px;"/>
|
||||
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" style="margin-top: 6px;"/>
|
||||
<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>
|
||||
|
|
@ -92,12 +86,14 @@ 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 { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { deepClone } from '@/utility/clone.js';
|
||||
import { dateTimeFormat } from '@/utility/intl-const.js';
|
||||
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';
|
||||
|
||||
const props = defineProps<{
|
||||
note: Misskey.entities.Note;
|
||||
|
|
@ -146,14 +142,14 @@ const isRenote = (
|
|||
);
|
||||
|
||||
const el = shallowRef<HTMLElement>();
|
||||
let appearNote = computed(() => isRenote ? note.value.renote as Misskey.entities.Note : note.value);
|
||||
const renoteUrl = appearNote.value.renote ? appearNote.value.renote.url : null;
|
||||
const renoteUri = appearNote.value.renote ? appearNote.value.renote.uri : null;
|
||||
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 showContent = ref(false);
|
||||
const translation = ref(null);
|
||||
const translation = ref<Misskey.entities.NotesTranslateResponse | false | null>(null);
|
||||
const translating = ref(false);
|
||||
const urls = appearNote.value.text ? extractUrlFromMfm(mfm.parse(appearNote.value.text)).filter(u => u !== renoteUrl && u !== renoteUri) : null;
|
||||
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);
|
||||
|
||||
</script>
|
||||
|
|
@ -167,11 +163,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 {
|
||||
|
|
@ -259,13 +256,6 @@ const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceT
|
|||
color: var(--MI_THEME-renote);
|
||||
}
|
||||
|
||||
.translation {
|
||||
border: solid 0.5px var(--MI_THEME-divider);
|
||||
border-radius: var(--MI-radius);
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.poll {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
|
@ -291,23 +281,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;
|
||||
|
|
@ -334,11 +312,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
43
packages/frontend/src/components/SkTransitionGroup.vue
Normal 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
348
packages/frontend/src/components/SkUrlPreviewGroup.vue
Normal 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>
|
||||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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="swipable && (props.tabs?.length ?? 1) > 1" v-model:tab="tab" :class="$style.swiper" :tabs="props.tabs" :page="props.page">
|
||||
<slot></slot>
|
||||
</MkSwiper>
|
||||
|
|
@ -30,13 +30,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;
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -4,41 +4,47 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs">
|
||||
<div class="_spacer" style="--MI_SPACER-w: 600px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
|
||||
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :spacer="true" style="--MI_SPACER-w: 600px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
|
||||
<div>
|
||||
<FormSuspense :p="init">
|
||||
<div v-if="tab === 'overview'" class="_gaps_m">
|
||||
<div class="aeakzknw">
|
||||
<div v-if="tab === 'overview'" class="_gaps">
|
||||
<div v-if="user" class="aeakzknw">
|
||||
<MkAvatar class="avatar" :user="user" indicator link preview/>
|
||||
<div class="body">
|
||||
<span class="name"><MkUserName class="name" :user="user"/></span>
|
||||
<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></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">Suspended</span>
|
||||
<span v-if="silenced" class="silenced">Silenced</span>
|
||||
<span v-if="moderator" class="moderator">Moderator</span>
|
||||
<span class="sub">
|
||||
<span class="acct _monospace">@{{ acct(user) }}</span>
|
||||
<button v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copyToClipboard('@' + acct(user))"><i class="ti ti-copy"></i></button>
|
||||
</span>
|
||||
<span class="sub">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SkBadgeStrip v-if="badges.length > 0" :badges="badges"></SkBadgeStrip>
|
||||
|
||||
<MkInfo v-if="isSystem">{{ i18n.ts.isSystemAccount }}</MkInfo>
|
||||
|
||||
<FormLink v-if="user.host" :to="`/instance-info/${user.host}`">{{ i18n.ts.instanceInfo }}</FormLink>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 1em;">
|
||||
<MkKeyValue :copy="user.id" oneline>
|
||||
<template #key>ID</template>
|
||||
<template #value><span class="_monospace">{{ user.id }}</span></template>
|
||||
</MkKeyValue>
|
||||
<!-- 要る？
|
||||
<MkKeyValue v-if="ips.length > 0" :copy="user.id" oneline>
|
||||
<template #key>IP (recent)</template>
|
||||
<template #value><span class="_monospace">{{ ips[0].ip }}</span></template>
|
||||
</MkKeyValue>
|
||||
-->
|
||||
<template 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;">
|
||||
<MkKeyValue v-if="user" :copy="user.id" oneline>
|
||||
<template #key>{{ i18n.ts.id }}</template>
|
||||
<template #value><span class="_monospace">{{ user.id }}</span></template>
|
||||
</MkKeyValue>
|
||||
<MkKeyValue v-if="user" :copy="'@' + acct(user)" oneline>
|
||||
<template #key>{{ i18n.ts.username }}</template>
|
||||
<template #value><span class="_monospace">@{{ acct(user) }}</span></template>
|
||||
</MkKeyValue>
|
||||
<!-- 要る？
|
||||
<MkKeyValue v-if="ips.length > 0" :copy="user.id" oneline>
|
||||
<template #key>IP (recent)</template>
|
||||
<template #value><span class="_monospace">{{ ips[0].ip }}</span></template>
|
||||
</MkKeyValue>
|
||||
-->
|
||||
<MkKeyValue oneline>
|
||||
<template #key>{{ i18n.ts.createdAt }}</template>
|
||||
<template #value><span class="_monospace"><MkTime :time="user.createdAt" :mode="'detail'"/></span></template>
|
||||
|
|
@ -51,16 +57,64 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template #key>{{ i18n.ts.email }}</template>
|
||||
<template #value><span class="_monospace">{{ info.email }}</span></template>
|
||||
</MkKeyValue>
|
||||
</template>
|
||||
</div>
|
||||
<MkKeyValue v-if="info" oneline>
|
||||
<template #key>{{ i18n.ts.totalFollowers }}</template>
|
||||
<template #value><span class="_monospace"><MkNumber :value="info.followStats.totalFollowers"></MkNumber></span></template>
|
||||
</MkKeyValue>
|
||||
<MkKeyValue v-if="info" oneline>
|
||||
<template #key>{{ i18n.ts.totalFollowing }}</template>
|
||||
<template #value><span class="_monospace"><MkNumber :value="info.followStats.totalFollowing"></MkNumber></span></template>
|
||||
</MkKeyValue>
|
||||
<MkKeyValue v-if="info" oneline>
|
||||
<template #key>{{ i18n.ts.remoteFollowers }}</template>
|
||||
<template #value><span class="_monospace"><MkNumber :value="info.followStats.remoteFollowers"></MkNumber></span></template>
|
||||
</MkKeyValue>
|
||||
<MkKeyValue v-if="info" oneline>
|
||||
<template #key>{{ i18n.ts.remoteFollowing }}</template>
|
||||
<template #value><span class="_monospace"><MkNumber :value="info.followStats.remoteFollowing"></MkNumber></span></template>
|
||||
</MkKeyValue>
|
||||
<MkKeyValue v-if="info" oneline>
|
||||
<template #key>{{ i18n.ts.localFollowers }}</template>
|
||||
<template #value><span class="_monospace"><MkNumber :value="info.followStats.localFollowers"></MkNumber></span></template>
|
||||
</MkKeyValue>
|
||||
<MkKeyValue v-if="info" oneline>
|
||||
<template #key>{{ i18n.ts.localFollowing }}</template>
|
||||
<template #value><span class="_monospace"><MkNumber :value="info.followStats.localFollowing"></MkNumber></span></template>
|
||||
</MkKeyValue>
|
||||
</div>
|
||||
</MkFolder>
|
||||
|
||||
<MkTextarea v-model="moderationNote" manualSave @update:modelValue="onModerationNoteChanged">
|
||||
<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">
|
||||
<div v-for="policy in Object.keys(info.policies)" :key="policy">
|
||||
{{ policy }} ... {{ info.policies[policy] }}
|
||||
</div>
|
||||
</div>
|
||||
</MkFolder>
|
||||
|
||||
<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>
|
||||
<div v-for="record in ips" :key="record.ip" class="_monospace" :class="$style.ip" style="margin: 1em 0;">
|
||||
<span class="date">{{ record.createdAt }}</span>
|
||||
<span class="ip">{{ record.ip }}</span>
|
||||
</div>
|
||||
</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>
|
||||
<template #caption>{{ i18n.ts.moderationNoteDescription }}</template>
|
||||
</MkTextarea>
|
||||
<MkTextarea v-model="moderationNote" manualSave @update:modelValue="onModerationNoteChanged">
|
||||
<template #label>{{ i18n.ts.moderationNote }}</template>
|
||||
<template #caption>{{ i18n.ts.moderationNoteDescription }}</template>
|
||||
</MkTextarea>
|
||||
</MkFolder>
|
||||
|
||||
<FormSection v-if="user.host">
|
||||
<template #label>ActivityPub</template>
|
||||
<FormSection v-if="user?.host">
|
||||
<template #label>{{ i18n.ts.activityPub }}</template>
|
||||
|
||||
<div class="_gaps_m">
|
||||
<div style="display: flex; flex-direction: column; gap: 1em;">
|
||||
|
|
@ -73,12 +127,10 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template #value><MkTime mode="detail" :time="user.lastFetchedAt"/></template>
|
||||
</MkKeyValue>
|
||||
</div>
|
||||
|
||||
<MkButton @click="updateRemoteUser"><i class="ti ti-refresh"></i> {{ i18n.ts.updateRemoteUser }}</MkButton>
|
||||
</div>
|
||||
</FormSection>
|
||||
|
||||
<FormSection v-if="!isSystem">
|
||||
<FormSection v-if="!isSystem && user && iAmModerator">
|
||||
<div class="_gaps">
|
||||
<MkSwitch v-model="silenced" @update:modelValue="toggleSilence">{{ i18n.ts.silence }}</MkSwitch>
|
||||
<MkSwitch v-if="!isSystem" v-model="suspended" @update:modelValue="toggleSuspend">{{ i18n.ts.suspend }}</MkSwitch>
|
||||
|
|
@ -90,58 +142,40 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template #caption>{{ i18n.ts.mandatoryCWDescription }}</template>
|
||||
</MkInput>
|
||||
|
||||
<div>
|
||||
<MkButton v-if="user.host == null && !isSystem" inline style="margin-right: 8px;" @click="resetPassword"><i class="ti ti-key"></i> {{ i18n.ts.resetPassword }}</MkButton>
|
||||
<div :class="$style.buttonStrip">
|
||||
<MkButton v-if="user.host != null" inline @click="updateRemoteUser"><i class="ph-cloud-arrow-down ph-bold ph-lg"></i> {{ i18n.ts.updateRemoteUser }}</MkButton>
|
||||
<MkButton v-if="user.host == null" inline accent @click="resetPassword"><i class="ph-password ph-bold ph-lg"></i> {{ i18n.ts.resetPassword }}</MkButton>
|
||||
<MkButton inline accent @click="unsetUserAvatar"><i class="ph-camera-slash ph-bold ph-lg"></i> {{ i18n.ts.unsetUserAvatar }}</MkButton>
|
||||
<MkButton inline accent @click="unsetUserBanner"><i class="ph-image-broken ph-bold ph-lg"></i> {{ i18n.ts.unsetUserBanner }}</MkButton>
|
||||
<MkButton inline danger @click="deleteAllFiles"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.deleteAllFiles }}</MkButton>
|
||||
<MkButton v-if="iAmAdmin" inline danger @click="deleteAccount"><i class="ph-skull ph-bold ph-lg"></i> {{ i18n.ts.deleteAccount }}</MkButton>
|
||||
</div>
|
||||
|
||||
<MkFolder>
|
||||
<template #icon><i class="ph-scroll ph-bold ph-lg"></i></template>
|
||||
<template #label>{{ i18n.ts._role.policies }}</template>
|
||||
<div class="_gaps">
|
||||
<div v-for="policy in Object.keys(info.policies)" :key="policy">
|
||||
{{ policy }} ... {{ info.policies[policy] }}
|
||||
</div>
|
||||
</div>
|
||||
</MkFolder>
|
||||
|
||||
<MkFolder>
|
||||
<template #icon><i class="ti ti-password"></i></template>
|
||||
<template #label>IP</template>
|
||||
<MkInfo v-if="!iAmAdmin" warn>{{ i18n.ts.requireAdminForView }}</MkInfo>
|
||||
<!-- TODO translate -->
|
||||
<MkInfo v-else>The date is the IP address was first acknowledged.</MkInfo>
|
||||
<template v-if="iAmAdmin && ips">
|
||||
<div v-for="record in ips" :key="record.ip" class="_monospace" :class="$style.ip" style="margin: 1em 0;">
|
||||
<span class="date">{{ record.createdAt }}</span>
|
||||
<span class="ip">{{ record.ip }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</MkFolder>
|
||||
|
||||
<div>
|
||||
<MkButton v-if="iAmModerator" inline danger style="margin-right: 8px;" @click="unsetUserAvatar"><i class="ti ti-user-circle"></i> {{ i18n.ts.unsetUserAvatar }}</MkButton>
|
||||
<MkButton v-if="iAmModerator" inline danger style="margin-right: 8px;" @click="unsetUserBanner"><i class="ti ti-photo"></i> {{ i18n.ts.unsetUserBanner }}</MkButton>
|
||||
<MkButton v-if="iAmModerator" inline danger @click="deleteAllFiles"><i class="ph-cloud ph-bold ph-lg"></i> {{ i18n.ts.deleteAllFiles }}</MkButton>
|
||||
</div>
|
||||
<MkButton v-if="$i.isAdmin && !isSystem" inline danger @click="deleteAccount">{{ i18n.ts.deleteAccount }}</MkButton>
|
||||
</div>
|
||||
</FormSection>
|
||||
</div>
|
||||
|
||||
<div v-else-if="tab === 'roles'" class="_gaps">
|
||||
<MkButton v-if="user.host == null" primary rounded @click="assignRole"><i class="ti ti-plus"></i> {{ i18n.ts.assign }}</MkButton>
|
||||
<MkButton primary rounded @click="assignRole"><i class="ti ti-plus"></i> {{ i18n.ts.assign }}</MkButton>
|
||||
|
||||
<div v-for="role in info.roles" :key="role.id">
|
||||
<div :class="$style.roleItemMain">
|
||||
<MkRolePreview :class="$style.role" :role="role" :forModeration="true"/>
|
||||
<button class="_button" @click="toggleRoleItem(role)"><i class="ti ti-chevron-down"></i></button>
|
||||
<button v-if="role.target === 'manual'" class="_button" :class="$style.roleUnassign" @click="unassignRole(role, $event)"><i class="ti ti-x"></i></button>
|
||||
<button class="_button" @click="toggleRoleItem(role)">
|
||||
<i v-if="!expandedRoles.includes(role.id)" class="ti ti-chevron-down"></i>
|
||||
<i v-if="expandedRoles.includes(role.id)" class="ti ti-chevron-left"></i>
|
||||
</button>
|
||||
<button v-if="role.target === 'manual' || info.roleAssigns.some(a => a.roleId === role.id)" class="_button" :class="$style.roleUnassign" @click="unassignRole(role, $event)"><i class="ti ti-x"></i></button>
|
||||
<button v-else class="_button" :class="$style.roleUnassign" disabled><i class="ti ti-ban"></i></button>
|
||||
</div>
|
||||
<div v-if="expandedRoles.includes(role.id)" :class="$style.roleItemSub">
|
||||
<div>Assigned: <MkTime :time="info.roleAssigns.find(a => a.roleId === role.id).createdAt" mode="detail"/></div>
|
||||
<div v-if="info.roleAssigns.find(a => a.roleId === role.id).expiresAt">Period: {{ new Date(info.roleAssigns.find(a => a.roleId === role.id).expiresAt).toLocaleString() }}</div>
|
||||
<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
|
||||
<template v-if="info.roleAssigns.some(a => a.roleId === role.id)">
|
||||
<div>{{ i18n.ts.roleAssigned }}: <MkTime :time="info.roleAssigns.find(a => a.roleId === role.id).createdAt" mode="detail"/></div>
|
||||
<div v-if="info.roleAssigns.find(a => a.roleId === role.id).expiresAt">{{ i18n.ts.rolePeriod }}: {{ new Date(info.roleAssigns.find(a => a.roleId === role.id).expiresAt).toLocaleString() }}</div>
|
||||
<div v-else>{{ i18n.ts.rolePeriod }}: {{ i18n.ts.indefinitely }}</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div>{{ i18n.ts.roleAssigned }}: {{ i18n.ts.roleAutomatic }}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -209,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';
|
||||
|
|
@ -231,12 +266,21 @@ import { iAmAdmin, $i, iAmModerator } from '@/i.js';
|
|||
import MkRolePreview from '@/components/MkRolePreview.vue';
|
||||
import MkPagination from '@/components/MkPagination.vue';
|
||||
import MkInput from '@/components/MkInput.vue';
|
||||
import MkNumber from '@/components/MkNumber.vue';
|
||||
import { copyToClipboard } from '@/utility/copy-to-clipboard';
|
||||
import SkBadgeStrip from '@/components/SkBadgeStrip.vue';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
userId: string;
|
||||
initialTab?: string;
|
||||
userHint?: Misskey.entities.UserDetailed;
|
||||
infoHint?: Misskey.entities.AdminShowUserResponse;
|
||||
ipsHint?: Misskey.entities.AdminGetUserIpsResponse;
|
||||
}>(), {
|
||||
initialTab: 'overview',
|
||||
userHint: undefined,
|
||||
infoHint: undefined,
|
||||
ipsHint: undefined,
|
||||
});
|
||||
|
||||
const tab = ref(props.initialTab);
|
||||
|
|
@ -263,6 +307,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 = {
|
||||
|
|
@ -275,17 +411,27 @@ const announcementsPagination = {
|
|||
};
|
||||
const expandedRoles = ref([]);
|
||||
|
||||
function createFetcher() {
|
||||
return () => Promise.all([misskeyApi('users/show', {
|
||||
userId: props.userId,
|
||||
}), misskeyApi('admin/show-user', {
|
||||
userId: props.userId,
|
||||
}), iAmAdmin ? misskeyApi('admin/get-user-ips', {
|
||||
userId: props.userId,
|
||||
}) : Promise.resolve(null)]).then(([_user, _info, _ips]) => {
|
||||
function createFetcher(withHint = true) {
|
||||
return () => Promise.all([
|
||||
(withHint && props.userHint) ? props.userHint : misskeyApi('users/show', {
|
||||
userId: props.userId,
|
||||
}),
|
||||
(withHint && props.infoHint) ? props.infoHint : misskeyApi('admin/show-user', {
|
||||
userId: props.userId,
|
||||
}),
|
||||
iAmAdmin
|
||||
? (withHint && props.ipsHint) ? props.ipsHint : misskeyApi('admin/get-user-ips', {
|
||||
userId: props.userId,
|
||||
})
|
||||
: null,
|
||||
iAmAdmin ? 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;
|
||||
|
|
@ -297,23 +443,30 @@ function createFetcher() {
|
|||
});
|
||||
}
|
||||
|
||||
function refreshUser() {
|
||||
init.value = createFetcher();
|
||||
async function refreshUser() {
|
||||
// Not a typo - createFetcher() returns a function()
|
||||
await createFetcher(false)();
|
||||
}
|
||||
|
||||
async function onMandatoryCWChanged(value: string) {
|
||||
await os.apiWithDialog('admin/cw-user', { userId: props.userId, cw: value });
|
||||
refreshUser();
|
||||
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() {
|
||||
|
|
@ -327,7 +480,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 }),
|
||||
});
|
||||
|
|
@ -342,7 +495,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();
|
||||
}
|
||||
}
|
||||
|
|
@ -355,8 +508,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();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -368,8 +523,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();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -381,11 +538,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();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -395,17 +554,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() {
|
||||
|
|
@ -414,17 +566,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() {
|
||||
|
|
@ -433,17 +578,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() {
|
||||
|
|
@ -463,7 +601,7 @@ async function deleteAccount() {
|
|||
userId: user.value.id,
|
||||
});
|
||||
} else {
|
||||
os.alert({
|
||||
await os.alert({
|
||||
type: 'error',
|
||||
text: 'input not match',
|
||||
});
|
||||
|
|
@ -503,18 +641,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);
|
||||
}
|
||||
|
|
@ -550,14 +692,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 ? [{
|
||||
|
|
@ -740,4 +874,13 @@ definePage(() => ({
|
|||
border-radius: var(--MI-radius-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Sync with instance-info.vue
|
||||
.buttonStrip {
|
||||
margin: calc(var(--MI-margin) / 2 * -1);
|
||||
|
||||
>* {
|
||||
margin: calc(var(--MI-margin) / 2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -48,9 +48,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<MkPagination v-slot="{items}" ref="reports" :pagination="pagination" :displayLimit="50">
|
||||
<div class="_gaps">
|
||||
<XAbuseReport v-for="report in items" :key="report.id" :report="report" @resolved="resolved"/>
|
||||
</div>
|
||||
<SkDateSeparatedList v-slot="{ item: report }" :items="items">
|
||||
<XAbuseReport :report="report" @resolved="resolved"/>
|
||||
</SkDateSeparatedList>
|
||||
</MkPagination>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -67,6 +67,7 @@ import { definePage } from '@/page.js';
|
|||
import MkButton from '@/components/MkButton.vue';
|
||||
import MkInfo from '@/components/MkInfo.vue';
|
||||
import { store } from '@/store.js';
|
||||
import SkDateSeparatedList from '@/components/SkDateSeparatedList.vue';
|
||||
|
||||
const reports = useTemplateRef('reports');
|
||||
|
||||
|
|
|
|||
|
|
@ -21,19 +21,19 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
/>
|
||||
<MkMediaList v-if="message.file" :mediaList="[message.file]" :class="$style.file"/>
|
||||
</MkFukidashi>
|
||||
<MkUrlPreview v-for="url in urls" :key="url" :url="url" style="margin: 8px 0;"/>
|
||||
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :showAsQuote="!message.fromUser.rejectQuotes" style="margin: 8px 0;"/>
|
||||
<div :class="$style.footer">
|
||||
<button class="_textButton" style="color: currentColor;" @click="showMenu"><i class="ti ti-dots-circle-horizontal"></i></button>
|
||||
<MkTime :class="$style.time" :time="message.createdAt"/>
|
||||
<MkA v-if="isSearchResult && 'toRoom' in message && message.toRoom != null" :to="`/chat/room/${message.toRoomId}`">{{ message.toRoom.name }}</MkA>
|
||||
<MkA v-if="isSearchResult && 'toUser' in message && message.toUser != null && isMe" :to="`/chat/user/${message.toUserId}`">@{{ message.toUser.username }}</MkA>
|
||||
</div>
|
||||
<TransitionGroup
|
||||
:enterActiveClass="prefer.s.animation ? $style.transition_reaction_enterActive : ''"
|
||||
:leaveActiveClass="prefer.s.animation ? $style.transition_reaction_leaveActive : ''"
|
||||
:enterFromClass="prefer.s.animation ? $style.transition_reaction_enterFrom : ''"
|
||||
:leaveToClass="prefer.s.animation ? $style.transition_reaction_leaveTo : ''"
|
||||
:moveClass="prefer.s.animation ? $style.transition_reaction_move : ''"
|
||||
<SkTransitionGroup
|
||||
:enterActiveClass="$style.transition_reaction_enterActive"
|
||||
:leaveActiveClass="$style.transition_reaction_leaveActive"
|
||||
:enterFromClass="$style.transition_reaction_enterFrom"
|
||||
:leaveToClass="$style.transition_reaction_leaveTo"
|
||||
:moveClass="$style.transition_reaction_move"
|
||||
tag="div" :class="$style.reactions"
|
||||
>
|
||||
<div v-for="record in message.reactions" :key="record.reaction + record.user.id" :class="[$style.reaction, record.user.id === $i.id ? $style.reactionMy : null]" @click="onReactionClick(record)">
|
||||
|
|
@ -45,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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -4,100 +4,132 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :swipable="true">
|
||||
<div v-if="instance" class="_spacer" style="--MI_SPACER-w: 600px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
|
||||
<MkSwiper v-model:tab="tab" :tabs="headerTabs">
|
||||
<div v-if="tab === 'overview'" class="_gaps_m">
|
||||
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :spacer="true" style="--MI_SPACER-w: 600px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
|
||||
<div v-if="instance">
|
||||
<!-- This empty div is preserved to avoid merge conflicts -->
|
||||
<div>
|
||||
<div v-if="tab === 'overview'" class="_gaps">
|
||||
<div class="fnfelxur">
|
||||
<img :src="faviconUrl" alt="" class="icon"/>
|
||||
<span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span>
|
||||
<!-- 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,10 +230,22 @@ 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 props = defineProps<{
|
||||
const $style = useCssModule();
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
host: string;
|
||||
}>();
|
||||
metaHint?: Misskey.entities.AdminMetaResponse;
|
||||
instanceHint?: Misskey.entities.FederationInstance;
|
||||
}>(), {
|
||||
metaHint: undefined,
|
||||
instanceHint: undefined,
|
||||
});
|
||||
|
||||
const tab = ref('overview');
|
||||
|
||||
|
|
@ -233,6 +278,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 +358,30 @@ const followersPagination = {
|
|||
offsetMode: false,
|
||||
};
|
||||
|
||||
if (iAmModerator) {
|
||||
watch(moderationNote, async () => {
|
||||
if (instance.value == null) return;
|
||||
await misskeyApi('admin/federation/update-instance', { host: instance.value.host, moderationNote: moderationNote.value });
|
||||
});
|
||||
async function saveModerationNote() {
|
||||
if (iAmModerator) {
|
||||
await os.promiseDialog(async () => {
|
||||
if (instance.value == null) return;
|
||||
await os.apiWithDialog('admin/federation/update-instance', { host: instance.value.host, moderationNote: moderationNote.value });
|
||||
await fetch();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function fetch(): Promise<void> {
|
||||
if (iAmAdmin) {
|
||||
meta.value = await misskeyApi('admin/meta');
|
||||
}
|
||||
instance.value = await misskeyApi('federation/show-instance', {
|
||||
host: props.host,
|
||||
});
|
||||
async function fetch(withHint = false): Promise<void> {
|
||||
const [m, i] = await Promise.all([
|
||||
(withHint && props.metaHint)
|
||||
? props.metaHint
|
||||
: iAmAdmin ? misskeyApi('admin/meta') : null,
|
||||
(withHint && props.instanceHint)
|
||||
? props.instanceHint
|
||||
: misskeyApi('federation/show-instance', {
|
||||
host: props.host,
|
||||
}),
|
||||
]);
|
||||
meta.value = m;
|
||||
instance.value = i;
|
||||
|
||||
suspensionState.value = instance.value?.suspensionState ?? 'none';
|
||||
isSuspended.value = suspensionState.value !== 'none';
|
||||
isBlocked.value = instance.value?.isBlocked ?? false;
|
||||
|
|
@ -292,80 +396,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 +510,12 @@ async function deleteAllFiles(): Promise<void> {
|
|||
});
|
||||
if (confirm.canceled) return;
|
||||
|
||||
await Promise.all([
|
||||
misskeyApi('admin/federation/delete-all-files', {
|
||||
host: instance.value.host,
|
||||
}),
|
||||
os.alert({
|
||||
text: i18n.ts.deleteAllFilesQueued,
|
||||
}),
|
||||
]);
|
||||
await os.apiWithDialog('admin/federation/delete-all-files', {
|
||||
host: instance.value.host,
|
||||
});
|
||||
await os.alert({
|
||||
text: i18n.ts.deleteAllFilesQueued,
|
||||
});
|
||||
}
|
||||
|
||||
async function severAllFollowRelations(): Promise<void> {
|
||||
|
|
@ -404,17 +532,15 @@ async function severAllFollowRelations(): Promise<void> {
|
|||
});
|
||||
if (confirm.canceled) return;
|
||||
|
||||
await Promise.all([
|
||||
misskeyApi('admin/federation/remove-all-following', {
|
||||
host: instance.value.host,
|
||||
}),
|
||||
os.alert({
|
||||
text: i18n.tsx.severAllFollowRelationsQueued({ host: instance.value.host }),
|
||||
}),
|
||||
]);
|
||||
await os.apiWithDialog('admin/federation/remove-all-following', {
|
||||
host: instance.value.host,
|
||||
});
|
||||
await os.alert({
|
||||
text: i18n.tsx.severAllFollowRelationsQueued({ host: instance.value.host }),
|
||||
});
|
||||
}
|
||||
|
||||
fetch();
|
||||
fetch(true);
|
||||
|
||||
const headerActions = computed(() => [{
|
||||
text: `https://${props.host}`,
|
||||
|
|
@ -428,17 +554,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 +648,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>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<script lang="ts" setup>
|
||||
import { computed, watch, ref } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { host } from '@@/js/config.js';
|
||||
import * as config from '@@/js/config.js';
|
||||
import type { Paging } from '@/components/MkPagination.vue';
|
||||
import DynamicNoteDetailed from '@/components/DynamicNoteDetailed.vue';
|
||||
import MkNotes from '@/components/MkNotes.vue';
|
||||
|
|
@ -151,7 +151,7 @@ function fetchNote() {
|
|||
message: i18n.ts.thisContentsAreMarkedAsSigninRequiredByAuthor,
|
||||
openOnRemote: {
|
||||
type: 'lookup',
|
||||
url: `https://${host}/notes/${props.noteId}`,
|
||||
url: `${config.url}/notes/${props.noteId}`,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
/* eslint-disable vue/no-mutating-props */
|
||||
import { watch, ref } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { retryOnThrottled } from '@@/js/retry-on-throttled.js';
|
||||
import XContainer from '../page-editor.container.vue';
|
||||
import MkInput from '@/components/MkInput.vue';
|
||||
import MkSwitch from '@/components/MkSwitch.vue';
|
||||
|
|
@ -35,6 +36,7 @@ import { i18n } from '@/i18n.js';
|
|||
|
||||
const props = defineProps<{
|
||||
modelValue: Misskey.entities.PageBlock & { type: 'note' };
|
||||
index: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
|
|
@ -58,7 +60,13 @@ watch(id, async () => {
|
|||
...props.modelValue,
|
||||
note: id.value,
|
||||
});
|
||||
note.value = await misskeyApi('notes/show', { noteId: id.value });
|
||||
const timeoutId = window.setTimeout(async () => {
|
||||
note.value = await retryOnThrottled(() => misskeyApi('notes/show', { noteId: id.value }));
|
||||
}, 500 * props.index); // rate limit is 2 reqs per sec
|
||||
|
||||
return () => {
|
||||
window.clearTimeout(timeoutId);
|
||||
};
|
||||
}, {
|
||||
immediate: true,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,10 +5,16 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<template>
|
||||
<Sortable :modelValue="modelValue" tag="div" itemKey="id" handle=".drag-handle" :group="{ name: 'blocks' }" :animation="150" :swapThreshold="0.5" @update:modelValue="v => emit('update:modelValue', v)">
|
||||
<template #item="{element}">
|
||||
<template #item="{element, index}">
|
||||
<div :class="$style.item">
|
||||
<!-- divが無いとエラーになる https://github.com/SortableJS/vue.draggable.next/issues/189 -->
|
||||
<component :is="getComponent(element.type)" :modelValue="element" @update:modelValue="updateItem" @remove="() => removeItem(element)"/>
|
||||
<component
|
||||
:is="getComponent(element.type)"
|
||||
:modelValue="element"
|
||||
:index="index"
|
||||
@update:modelValue="updateItem"
|
||||
@remove="() => removeItem(element)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Sortable>
|
||||
|
|
|
|||
|
|
@ -347,7 +347,7 @@ definePage(() => ({
|
|||
text-align: center;
|
||||
border-radius: 99rem;
|
||||
|
||||
& :global(.ti) {
|
||||
& :global(.ti), & :global(.ph-lg) {
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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(() => []);
|
||||
|
|
|
|||
|
|
@ -15,36 +15,50 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { ref, watch, computed } from 'vue';
|
||||
import MkTextarea from '@/components/MkTextarea.vue';
|
||||
import MkInfo from '@/components/MkInfo.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import { ensureSignin } from '@/i.js';
|
||||
import { misskeyApi } from '@/utility/misskey-api.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import * as os from '@/os.js';
|
||||
|
||||
const $i = ensureSignin();
|
||||
|
||||
const instanceMutes = ref($i.mutedInstances.join('\n'));
|
||||
const domainArray = computed(() => {
|
||||
return instanceMutes.value
|
||||
.trim().split('\n')
|
||||
.map(el => el.trim().toLowerCase())
|
||||
.filter(el => el);
|
||||
});
|
||||
const changed = ref(false);
|
||||
|
||||
async function save() {
|
||||
let mutes = instanceMutes.value
|
||||
.trim().split('\n')
|
||||
.map(el => el.trim())
|
||||
.filter(el => el);
|
||||
// checks for a full line without whitespace.
|
||||
if (!domainArray.value.every(d => /^\S+$/.test(d))) {
|
||||
os.alert({
|
||||
type: 'error',
|
||||
title: i18n.ts.invalidValue,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
await misskeyApi('i/update', {
|
||||
mutedInstances: mutes,
|
||||
mutedInstances: domainArray.value,
|
||||
});
|
||||
|
||||
changed.value = false;
|
||||
|
||||
// Refresh filtered list to signal to the user how they've been saved
|
||||
instanceMutes.value = mutes.join('\n');
|
||||
instanceMutes.value = domainArray.value.join('\n');
|
||||
|
||||
changed.value = false;
|
||||
}
|
||||
|
||||
watch(instanceMutes, () => {
|
||||
changed.value = true;
|
||||
watch(domainArray, (newArray, oldArray) => {
|
||||
// compare arrays
|
||||
if (newArray.length !== oldArray.length || !newArray.every((a, i) => a === oldArray[i])) {
|
||||
changed.value = true;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -12,16 +12,19 @@ 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>
|
||||
|
||||
<div class="_gaps_m">
|
||||
<MkInfo>{{ i18n.ts.wordMuteDescription }}</MkInfo>
|
||||
|
||||
<MkInfo warn>{{ i18n.ts.wordMuteWarning }}</MkInfo>
|
||||
|
||||
<SearchMarker
|
||||
:label="i18n.ts.showMutedWord"
|
||||
:keywords="['show']"
|
||||
|
|
@ -35,25 +38,30 @@ 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>
|
||||
|
||||
<div class="_gaps_m">
|
||||
<MkInfo>{{ i18n.ts.hardWordMuteDescription }}</MkInfo>
|
||||
|
||||
<MkInfo warn>{{ i18n.ts.wordMuteWarning }}</MkInfo>
|
||||
|
||||
<XWordMute :muted="$i.hardMutedWords" @save="saveHardMutedWords"/>
|
||||
</div>
|
||||
</MkFolder>
|
||||
</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>
|
||||
|
||||
|
|
@ -62,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>
|
||||
|
||||
|
|
@ -97,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>
|
||||
|
||||
|
|
@ -135,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>
|
||||
|
||||
|
|
@ -218,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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
@ -271,6 +279,14 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</MkPreferenceContainer>
|
||||
</SearchMarker>
|
||||
|
||||
<SearchMarker :keywords="['footer', 'action', 'translation', 'show']">
|
||||
<MkPreferenceContainer k="showTranslationButtonInNoteFooter">
|
||||
<MkSwitch v-model="showTranslationButtonInNoteFooter">
|
||||
<template #label><SearchLabel>{{ i18n.ts.showTranslationButtonInNoteFooter }}</SearchLabel></template>
|
||||
</MkSwitch>
|
||||
</MkPreferenceContainer>
|
||||
</SearchMarker>
|
||||
|
||||
<SearchMarker :keywords="['reaction', 'count', 'show']">
|
||||
<MkPreferenceContainer k="showReactionsCount">
|
||||
<MkSwitch v-model="showReactionsCount">
|
||||
|
|
@ -387,9 +403,13 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div class="_gaps_s">
|
||||
<SearchMarker :keywords="['remember', 'keep', 'note', 'cw']">
|
||||
<MkPreferenceContainer k="keepCw">
|
||||
<MkSwitch v-model="keepCw">
|
||||
<MkSelect v-model="keepCw">
|
||||
<template #label><SearchLabel>{{ i18n.ts.keepCw }}</SearchLabel></template>
|
||||
</MkSwitch>
|
||||
<template #caption><SearchKeyword>{{ i18n.ts.keepCwDescription }}</SearchKeyword></template>
|
||||
<option :value="false">{{ i18n.ts.keepCwDisabled }}</option>>
|
||||
<option :value="true">{{ i18n.ts.keepCwEnabled }}</option>>
|
||||
<option value="prepend-re">{{ i18n.ts.keepCwPrependRe }}</option>
|
||||
</MkSelect>
|
||||
</MkPreferenceContainer>
|
||||
</SearchMarker>
|
||||
|
||||
|
|
@ -428,9 +448,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>
|
||||
|
|
@ -667,7 +687,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<SearchMarker :keywords="['font', 'size']">
|
||||
<MkRadios v-model="fontSize">
|
||||
<template #label><SearchLabel>{{ i18n.ts.fontSize }}</SearchLabel></template>
|
||||
<option :value="null"><span style="font-size: 14px;">Aa</span></option>
|
||||
<option value="0"><span style="font-size: 14px;">Aa</span></option>
|
||||
<option value="1"><span style="font-size: 15px;">Aa</span></option>
|
||||
<option value="2"><span style="font-size: 16px;">Aa</span></option>
|
||||
<option value="3"><span style="font-size: 17px;">Aa</span></option>
|
||||
|
|
@ -779,7 +799,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<SearchMarker :keywords="['corner', 'radius']">
|
||||
<MkRadios v-model="cornerRadius">
|
||||
<template #label><SearchLabel>{{ i18n.ts.cornerRadius }}</SearchLabel></template>
|
||||
<option :value="null"><i class="sk-icons sk-shark sk-icons-lg" style="top: 2px;position: relative;"></i> Sharkey</option>
|
||||
<option value="sharkey"><i class="sk-icons sk-shark sk-icons-lg" style="top: 2px;position: relative;"></i> Sharkey</option>
|
||||
<option value="misskey"><i class="sk-icons sk-misskey sk-icons-lg" style="top: 2px;position: relative;"></i> Misskey</option>
|
||||
</MkRadios>
|
||||
</SearchMarker>
|
||||
|
|
@ -842,24 +862,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>
|
||||
|
|
@ -891,8 +915,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">
|
||||
|
|
@ -954,7 +978,6 @@ import { worksOnInstance } from '@/utility/favicon-dot.js';
|
|||
|
||||
const $i = ensureSignin();
|
||||
|
||||
const lang = ref(miLocalStorage.getItem('lang'));
|
||||
const dataSaver = ref(prefer.s.dataSaver);
|
||||
|
||||
const overridedDeviceKind = prefer.model('overridedDeviceKind');
|
||||
|
|
@ -964,6 +987,7 @@ const serverDisconnectedBehavior = prefer.model('serverDisconnectedBehavior');
|
|||
const hemisphere = prefer.model('hemisphere');
|
||||
const showNoteActionsOnlyHover = prefer.model('showNoteActionsOnlyHover');
|
||||
const showClipButtonInNoteFooter = prefer.model('showClipButtonInNoteFooter');
|
||||
const showTranslationButtonInNoteFooter = prefer.model('showTranslationButtonInNoteFooter');
|
||||
const collapseRenotes = prefer.model('collapseRenotes');
|
||||
const advancedMfm = prefer.model('advancedMfm');
|
||||
const showReactionsCount = prefer.model('showReactionsCount');
|
||||
|
|
@ -1013,9 +1037,6 @@ const contextMenu = prefer.model('contextMenu');
|
|||
const menuStyle = prefer.model('menuStyle');
|
||||
const makeEveryTextElementsSelectable = prefer.model('makeEveryTextElementsSelectable');
|
||||
|
||||
const fontSize = ref(miLocalStorage.getItem('fontSize'));
|
||||
const useSystemFont = ref(miLocalStorage.getItem('useSystemFont') != null);
|
||||
|
||||
// Sharkey options
|
||||
const collapseNotesRepliedTo = prefer.model('collapseNotesRepliedTo');
|
||||
const showTickerOnReplies = prefer.model('showTickerOnReplies');
|
||||
|
|
@ -1031,7 +1052,6 @@ const notificationClickable = prefer.model('notificationClickable');
|
|||
const warnExternalUrl = prefer.model('warnExternalUrl');
|
||||
const showVisibilitySelectorOnBoost = prefer.model('showVisibilitySelectorOnBoost');
|
||||
const visibilityOnBoost = prefer.model('visibilityOnBoost');
|
||||
const cornerRadius = ref(miLocalStorage.getItem('cornerRadius'));
|
||||
const oneko = prefer.model('oneko');
|
||||
const numberOfReplies = prefer.model('numberOfReplies');
|
||||
const autoloadConversation = prefer.model('autoloadConversation');
|
||||
|
|
@ -1040,34 +1060,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([
|
||||
|
|
@ -1096,7 +1144,9 @@ watch([
|
|||
contextMenu,
|
||||
fontSize,
|
||||
useSystemFont,
|
||||
cornerRadius,
|
||||
makeEveryTextElementsSelectable,
|
||||
noteDesign,
|
||||
], async () => {
|
||||
await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<MkTextarea v-model="attributionDomains">
|
||||
<template #label><SearchLabel>{{ i18n.ts.attributionDomains }}</SearchLabel></template>
|
||||
<template #caption>
|
||||
{{ i18n.ts.attributionDomainsDescription }}
|
||||
<br/>
|
||||
<Mfm :text="tutorialTag"/>
|
||||
</template>
|
||||
</MkTextarea>
|
||||
<MkButton primary :disabled="!changed" @click="save()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, computed } from 'vue';
|
||||
import { host as hostRaw } from '@@/js/config.js';
|
||||
import { toUnicode } from 'punycode.js';
|
||||
import MkTextarea from '@/components/MkTextarea.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import { ensureSignin } from '@/i.js';
|
||||
import { misskeyApi } from '@/utility/misskey-api.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import * as os from '@/os.js';
|
||||
|
||||
const $i = ensureSignin();
|
||||
|
||||
const attributionDomains = ref($i.attributionDomains.join('\n'));
|
||||
const domainArray = computed(() => {
|
||||
return attributionDomains.value
|
||||
.trim().split('\n')
|
||||
.map(el => el.trim().toLowerCase())
|
||||
.filter(el => el);
|
||||
});
|
||||
const changed = ref(false);
|
||||
const tutorialTag = '`<meta name="fediverse:creator" content="' + $i.username + '@' + toUnicode(hostRaw) + '" />`';
|
||||
|
||||
async function save() {
|
||||
// checks for a full line without whitespace.
|
||||
if (!domainArray.value.every(d => /^\S+$/.test(d))) {
|
||||
os.alert({
|
||||
type: 'error',
|
||||
title: i18n.ts.invalidValue,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
await misskeyApi('i/update', {
|
||||
attributionDomains: domainArray.value,
|
||||
});
|
||||
|
||||
// Refresh filtered list to signal to the user how they've been saved
|
||||
attributionDomains.value = domainArray.value.join('\n');
|
||||
|
||||
changed.value = false;
|
||||
}
|
||||
|
||||
watch(domainArray, (newArray, oldArray) => {
|
||||
// compare arrays
|
||||
if (newArray.length !== oldArray.length || !newArray.every((a, i) => a === oldArray[i])) {
|
||||
changed.value = true;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -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>
|
||||
|
|
@ -161,6 +163,13 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template #caption>{{ i18n.ts.flagAsBotDescription }}</template>
|
||||
</MkSwitch>
|
||||
</SearchMarker>
|
||||
|
||||
<SearchMarker
|
||||
:label="i18n.ts.attributionDomains"
|
||||
:keywords="['attribution', 'domains', 'preview', 'url']"
|
||||
>
|
||||
<AttributionDomainsSettings/>
|
||||
</SearchMarker>
|
||||
</div>
|
||||
</MkFolder>
|
||||
</SearchMarker>
|
||||
|
|
@ -170,6 +179,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<script lang="ts" setup>
|
||||
import { computed, reactive, ref, watch, defineAsyncComponent } from 'vue';
|
||||
import AttributionDomainsSettings from './profile.attribution-domains-setting.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import MkInput from '@/components/MkInput.vue';
|
||||
import MkSwitch from '@/components/MkSwitch.vue';
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@ export const PREF_DEF = {
|
|||
default: false,
|
||||
},
|
||||
keepCw: {
|
||||
default: true,
|
||||
default: true as boolean | 'prepend-re',
|
||||
},
|
||||
rememberNoteVisibility: {
|
||||
default: false,
|
||||
|
|
@ -248,6 +248,9 @@ export const PREF_DEF = {
|
|||
showClipButtonInNoteFooter: {
|
||||
default: false,
|
||||
},
|
||||
showTranslationButtonInNoteFooter: {
|
||||
default: false,
|
||||
},
|
||||
reactionsDisplaySize: {
|
||||
default: 'medium' as 'small' | 'medium' | 'large',
|
||||
},
|
||||
|
|
@ -474,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;
|
||||
|
|
|
|||
|
|
@ -235,6 +235,12 @@ rt {
|
|||
contain: strict;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
._pageScrollable {
|
||||
|
|
@ -422,6 +428,14 @@ rt {
|
|||
gap: var(--MI-margin);
|
||||
}
|
||||
|
||||
/**
|
||||
* Use with _gaps, _gaps_m, or _gaps_s.
|
||||
* Place the other class *first*!
|
||||
*/
|
||||
._h_gaps {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
._buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
|
|
|||
|
|
@ -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'));
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
20
packages/frontend/src/utility/extract-preview-urls.ts
Normal file
20
packages/frontend/src/utility/extract-preview-urls.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
/*
|
||||
* SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import type * as Misskey from 'misskey-js';
|
||||
import type * as mfm from '@transfem-org/sfm-js';
|
||||
import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js';
|
||||
import { getNoteUrls } from '@/utility/getNoteUrls';
|
||||
|
||||
/**
|
||||
* Extracts all previewable URLs from a note.
|
||||
*/
|
||||
export function extractPreviewUrls(note: Misskey.entities.Note, contents: mfm.MfmNode[]): string[] {
|
||||
const links = extractUrlFromMfm(contents);
|
||||
if (links.length < 0) return [];
|
||||
|
||||
const self = getNoteUrls(note);
|
||||
return links.filter(url => !self.includes(url));
|
||||
}
|
||||
|
|
@ -4,21 +4,34 @@
|
|||
*/
|
||||
|
||||
import * as mfm from '@transfem-org/sfm-js';
|
||||
import { unique } from '@/utility/array.js';
|
||||
|
||||
// unique without hash
|
||||
// [ http://a/#1, http://a/#2, http://b/#3 ] => [ http://a/#1, http://b/#3 ]
|
||||
const removeHash = (x: string) => x.replace(/#[^#]*$/, '');
|
||||
const removeHash = (x: string) => {
|
||||
if (URL.canParse(x)) {
|
||||
const url = new URL(x);
|
||||
url.hash = '';
|
||||
return url.toString();
|
||||
} else {
|
||||
return x.replace(/#[^#]*$/, '');
|
||||
}
|
||||
};
|
||||
|
||||
export function extractUrlFromMfm(nodes: mfm.MfmNode[], respectSilentFlag = true): string[] {
|
||||
const urlNodes = mfm.extract(nodes, (node) => {
|
||||
return (node.type === 'url') || (node.type === 'link' && (!respectSilentFlag || !node.props.silent));
|
||||
});
|
||||
const urls: string[] = unique(urlNodes.map(x => x.props.url));
|
||||
const urls = new Map<string, string>();
|
||||
|
||||
return urls.reduce((array, url) => {
|
||||
const urlWithoutHash = removeHash(url);
|
||||
if (!array.map(x => removeHash(x)).includes(urlWithoutHash)) array.push(url);
|
||||
return array;
|
||||
}, [] as string[]);
|
||||
// Single iteration pass to avoid potential DoS in maliciously-constructed notes.
|
||||
for (const node of nodes) {
|
||||
if ((node.type === 'url') || (node.type === 'link' && (!respectSilentFlag || !node.props.silent))) {
|
||||
const url = (node as mfm.MfmUrl | mfm.MfmLink).props.url;
|
||||
const key = removeHash(url);
|
||||
|
||||
// Keep the first match only, to preserve existing behavior.
|
||||
if (!urls.has(key)) {
|
||||
urls.set(key, url);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return Array.from(urls.values());
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
@ -176,7 +176,7 @@ function getNoteEmbedCodeMenu(note: Misskey.entities.Note, text: string): MenuIt
|
|||
|
||||
export function getNoteMenu(props: {
|
||||
note: Misskey.entities.Note;
|
||||
translation: Ref<Misskey.entities.NotesTranslateResponse | null>;
|
||||
translation: Ref<Misskey.entities.NotesTranslateResponse | false | null>;
|
||||
translating: Ref<boolean>;
|
||||
isDeleted: Ref<boolean>;
|
||||
currentClip?: Misskey.entities.Clip;
|
||||
|
|
@ -290,17 +290,6 @@ export function getNoteMenu(props: {
|
|||
os.pageWindow(`/notes/${appearNote.id}`);
|
||||
}
|
||||
|
||||
async function translate(): Promise<void> {
|
||||
if (props.translation.value != null) return;
|
||||
props.translating.value = true;
|
||||
props.translation.value = await misskeyApi('notes/translate', {
|
||||
noteId: appearNote.id,
|
||||
targetLang: miLocalStorage.getItem('lang') ?? navigator.language,
|
||||
}).finally(() => {
|
||||
props.translating.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
const menuItems: MenuItem[] = [];
|
||||
|
||||
if ($i) {
|
||||
|
|
@ -353,11 +342,11 @@ 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,
|
||||
action: translate,
|
||||
action: () => translateNote(appearNote.id, props.translation, props.translating),
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -508,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');
|
||||
|
|
@ -697,3 +694,20 @@ export function getRenoteMenu(props: {
|
|||
menu: renoteItems,
|
||||
};
|
||||
}
|
||||
|
||||
export async function translateNote(noteId: string, translation: Ref<Misskey.entities.NotesTranslateResponse | false | null>, translating: Ref<boolean>): Promise<void> {
|
||||
if (translating.value || translation.value) return;
|
||||
translating.value = true;
|
||||
try {
|
||||
const targetLang = miLocalStorage.getItem('lang') ?? navigator.language;
|
||||
translation.value = await misskeyApi('notes/translate', {
|
||||
noteId,
|
||||
targetLang,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(`Translation failed for ${noteId}: `, err);
|
||||
translation.value = false;
|
||||
} finally {
|
||||
translating.value = false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
21
packages/frontend/src/utility/get-self-note-ids.ts
Normal file
21
packages/frontend/src/utility/get-self-note-ids.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
/*
|
||||
* SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import type * as Misskey from 'misskey-js';
|
||||
|
||||
/**
|
||||
* Gets IDs of notes that are visibly the "same" as the current note.
|
||||
* These are IDs that should not be recursively resolved when starting from the provided note as entry.
|
||||
*/
|
||||
export function getSelfNoteIds(note: Misskey.entities.Note): string[] {
|
||||
const ids = [note.id]; // Regular note
|
||||
if (note.reply) ids.push(note.reply.id); // Reply
|
||||
else if (note.replyId) ids.push(note.replyId); // Reply (not packed)
|
||||
if (note.renote) ids.push(note.renote.id); // Renote or quote
|
||||
else if (note.renoteId) ids.push(note.renoteId); // Renote or quote (not packed)
|
||||
if (note.renote?.renote) ids.push(note.renote.renote.id); // Renote *of* a quote
|
||||
else if (note.renote?.renoteId) ids.push(note.renote.renoteId); // Renote *of* a quote (not packed)
|
||||
return ids;
|
||||
}
|
||||
44
packages/frontend/src/utility/getNoteUrls.ts
Normal file
44
packages/frontend/src/utility/getNoteUrls.ts
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
/*
|
||||
* SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import * as config from '@@/js/config.js';
|
||||
import type * as Misskey from 'misskey-js';
|
||||
|
||||
export function getNoteUrls(note: Misskey.entities.Note): string[] {
|
||||
const urls: string[] = [
|
||||
// Any note
|
||||
`${config.url}/notes/${note.id}`,
|
||||
];
|
||||
|
||||
// Remote note
|
||||
if (note.url) urls.push(note.url);
|
||||
if (note.uri) urls.push(note.uri);
|
||||
|
||||
if (note.reply) {
|
||||
// Any Reply
|
||||
urls.push(`${config.url}/notes/${note.reply.id}`);
|
||||
// Remote Reply
|
||||
if (note.reply.url) urls.push(note.reply.url);
|
||||
if (note.reply.uri) urls.push(note.reply.uri);
|
||||
}
|
||||
|
||||
if (note.renote) {
|
||||
// Any Renote
|
||||
urls.push(`${config.url}/notes/${note.renote.id}`);
|
||||
// Remote Renote
|
||||
if (note.renote.url) urls.push(note.renote.url);
|
||||
if (note.renote.uri) urls.push(note.renote.uri);
|
||||
}
|
||||
|
||||
if (note.renote?.renote) {
|
||||
// Any Quote
|
||||
urls.push(`${config.url}/notes/${note.renote.renote.id}`);
|
||||
// Remote Quote
|
||||
if (note.renote.renote.url) urls.push(note.renote.renote.url);
|
||||
if (note.renote.renote.uri) urls.push(note.renote.renote.uri);
|
||||
}
|
||||
|
||||
return urls;
|
||||
}
|
||||
|
|
@ -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;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*/
|
||||
|
||||
import { computed } from 'vue';
|
||||
import type { Ref } from 'vue';
|
||||
import type { Ref, ComputedRef } from 'vue';
|
||||
|
||||
export function getDateText(dateInstance: Date) {
|
||||
const date = dateInstance.getDate();
|
||||
|
|
@ -25,7 +25,7 @@ export type DateSeparetedTimelineItem<T> = {
|
|||
nextText: string;
|
||||
};
|
||||
|
||||
export function makeDateSeparatedTimelineComputedRef<T extends { id: string; createdAt: string; }>(items: Ref<T[]>) {
|
||||
export function makeDateSeparatedTimelineComputedRef<T extends { id: string; createdAt: string; }>(items: Ref<T[]> | ComputedRef<T[]>) {
|
||||
return computed<DateSeparetedTimelineItem<T>[]>(() => {
|
||||
const tl: DateSeparetedTimelineItem<T>[] = [];
|
||||
for (let i = 0; i < items.value.length; i++) {
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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,5 +1,6 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"lib": ["esnext", "webworker"],
|
||||
"incremental": true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
"emitDecoratorMetadata": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"incremental": true,
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@/*": ["../src/*"]
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
"useDefineForClassFields": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"skipLibCheck": true,
|
||||
"incremental": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue