heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'misskey/release/2024.5.0' into future

Browse source
This commit is contained in:
dakkar 2024-05-31 12:26:07 +01:00
commit 3372e0ffe1
181 changed files with 4057 additions and 891 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/frontend/.storybook/preview-head.html
View file

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<link rel="preload" href="https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true" as="image" type="image/png" crossorigin="anonymous">
<link rel="preload" href="https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true" as="image" type="image/jpeg" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/@tabler/icons-webfont@3.3.0/tabler-icons.min.css">
<link rel="stylesheet" href="https://unpkg.com/@tabler/icons-webfont@3.3.0/dist/tabler-icons.min.css">
<link rel="stylesheet" href="https://unpkg.com/@fontsource/m-plus-rounded-1c/index.css">
<style>
html {

4
packages/frontend/package.json
View file

@ -30,7 +30,7 @@
"@twemoji/parser": "15.1.1",
"@vitejs/plugin-vue": "5.0.4",
"@vue/compiler-sfc": "3.4.26",
"aiscript-vscode": "github:aiscript-dev/aiscript-vscode#v0.1.4",
"aiscript-vscode": "github:aiscript-dev/aiscript-vscode#v0.1.9",
"astring": "1.8.6",
"broadcast-channel": "7.0.0",
"buraha": "0.0.1",
@ -120,7 +120,7 @@
"eslint-plugin-import": "2.29.1",
"eslint-plugin-vue": "9.25.0",
"fast-glob": "3.3.2",
"happy-dom": "14.7.1",
"happy-dom": "10.0.3",
"intersection-observer": "0.12.2",
"micromatch": "4.0.5",
"msw": "2.2.14",

1
packages/frontend/src/cache.ts
View file

@ -11,3 +11,4 @@ export const clipsCache = new Cache<Misskey.entities.Clip[]>(1000 * 60 * 30, ()
export const rolesCache = new Cache(1000 * 60 * 30, () => misskeyApi('admin/roles/list'));
export const userListsCache = new Cache<Misskey.entities.UserList[]>(1000 * 60 * 30, () => misskeyApi('users/lists/list'));
export const antennasCache = new Cache<Misskey.entities.Antenna[]>(1000 * 60 * 30, () => misskeyApi('antennas/list'));
export const favoritedChannelsCache = new Cache<Misskey.entities.Channel[]>(1000 * 60 * 30, () => misskeyApi('channels/my-favorites', { limit: 100 }));

108
packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
View file

@ -4,77 +4,81 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkModalWindow ref="dialogEl" @close="cancel()" @closed="$emit('closed')">
<template #header>:{{ emoji.name }}:</template>
<template #default>
<MkSpacer>
<div style="display: flex; flex-direction: column; gap: 1em;">
<div :class="$style.emojiImgWrapper">
<MkCustomEmoji :name="emoji.name" :normal="true" :useOriginalSize="true" style="height: 100%;"></MkCustomEmoji>
</div>
<MkKeyValue :copy="`:${emoji.name}:`">
<template #key>{{ i18n.ts.name }}</template>
<template #value>{{ emoji.name }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.tags }}</template>
<template #value>
<div v-if="emoji.aliases.length === 0">{{ i18n.ts.none }}</div>
<div v-else :class="$style.aliases">
<span v-for="alias in emoji.aliases" :key="alias" :class="$style.alias">
{{ alias }}
</span>
</div>
</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.category }}</template>
<template #value>{{ emoji.category ?? i18n.ts.none }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.sensitive }}</template>
<template #value>{{ emoji.isSensitive ? i18n.ts.yes : i18n.ts.no }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.localOnly }}</template>
<template #value>{{ emoji.localOnly ? i18n.ts.yes : i18n.ts.no }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.license }}</template>
<template #value><Mfm :text="emoji.license ?? i18n.ts.none" /></template>
</MkKeyValue>
<MkKeyValue :copy="emoji.url">
<template #key>{{ i18n.ts.emojiUrl }}</template>
<template #value>
<MkLink :url="emoji.url" target="_blank">{{ emoji.url }}</MkLink>
</template>
</MkKeyValue>
</div>
</MkSpacer>
</template>
</MkModalWindow>
<MkModalWindow ref="dialogEl" @close="cancel()" @closed="$emit('closed')">
<template #header>:{{ emoji.name }}:</template>
<template #default>
<MkSpacer>
<div style="display: flex; flex-direction: column; gap: 1em;">
<div :class="$style.emojiImgWrapper">
<MkCustomEmoji :name="emoji.name" :normal="true" :useOriginalSize="true" style="height: 100%;"></MkCustomEmoji>
</div>
<MkKeyValue :copy="`:${emoji.name}:`">
<template #key>{{ i18n.ts.name }}</template>
<template #value>{{ emoji.name }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.tags }}</template>
<template #value>
<div v-if="emoji.aliases.length === 0">{{ i18n.ts.none }}</div>
<div v-else :class="$style.aliases">
<span v-for="alias in emoji.aliases" :key="alias" :class="$style.alias">
{{ alias }}
</span>
</div>
</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.category }}</template>
<template #value>{{ emoji.category ?? i18n.ts.none }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.sensitive }}</template>
<template #value>{{ emoji.isSensitive ? i18n.ts.yes : i18n.ts.no }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.localOnly }}</template>
<template #value>{{ emoji.localOnly ? i18n.ts.yes : i18n.ts.no }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.license }}</template>
<template #value><Mfm :text="emoji.license ?? i18n.ts.none"/></template>
</MkKeyValue>
<MkKeyValue :copy="emoji.url">
<template #key>{{ i18n.ts.emojiUrl }}</template>
<template #value>
<MkLink :url="emoji.url" target="_blank">{{ emoji.url }}</MkLink>
</template>
</MkKeyValue>
</div>
</MkSpacer>
</template>
</MkModalWindow>
</template>
<script lang="ts" setup>
import * as Misskey from 'misskey-js';
import { defineProps, shallowRef } from 'vue';
import MkLink from '@/components/MkLink.vue';
import { i18n } from '@/i18n.js';
import MkModalWindow from '@/components/MkModalWindow.vue';
import MkKeyValue from '@/components/MkKeyValue.vue';
import MkLink from './MkLink.vue';
const props = defineProps<{
emoji: Misskey.entities.EmojiDetailed,
}>();
const emit = defineEmits<{
(ev: 'ok', cropped: Misskey.entities.DriveFile): void;
(ev: 'cancel'): void;
(ev: 'closed'): void;
}>();
const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>();
const cancel = () => {
function cancel() {
emit('cancel');
dialogEl.value!.close();
};
}
</script>
<style lang="scss" module>

71
packages/frontend/src/components/MkFormDialog.file.vue Normal file
View file

@ -0,0 +1,71 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div>
<MkButton inline rounded primary @click="selectButton($event)">{{ i18n.ts.selectFile }}</MkButton>
<div :class="['_nowrap', !fileName && $style.fileNotSelected]">{{ friendlyFileName }}</div>
</div>
</template>
<script setup lang="ts">
import * as Misskey from 'misskey-js';
import { computed, ref } from 'vue';
import { i18n } from '@/i18n.js';
import MkButton from '@/components/MkButton.vue';
import { selectFile } from '@/scripts/select-file.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
const props = defineProps<{
fileId?: string | null;
validate?: (file: Misskey.entities.DriveFile) => Promise<boolean>;
}>();
const emit = defineEmits<{
(ev: 'update', result: Misskey.entities.DriveFile): void;
}>();
const fileUrl = ref('');
const fileName = ref<string>('');
const friendlyFileName = computed<string>(() => {
if (fileName.value) {
return fileName.value;
}
if (fileUrl.value) {
return fileUrl.value;
}
return i18n.ts.fileNotSelected;
});
if (props.fileId) {
misskeyApi('drive/files/show', {
fileId: props.fileId,
}).then((apiRes) => {
fileName.value = apiRes.name;
fileUrl.value = apiRes.url;
});
}
function selectButton(ev: MouseEvent) {
selectFile(ev.currentTarget ?? ev.target).then(async (file) => {
if (!file) return;
if (props.validate && !await props.validate(file)) return;
emit('update', file);
fileName.value = file.name;
fileUrl.value = file.url;
});
}
</script>
<style module>
.fileNotSelected {
font-weight: 700;
color: var(--infoWarnFg);
}
</style>

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

@ -21,8 +21,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSpacer :marginMin="20" :marginMax="32">
<div v-if="Object.keys(form).filter(item => !form[item].hidden).length > 0" class="_gaps_m">
<template v-for="(v, k) in Object.fromEntries(Object.entries(form).filter(([_, v]) => !('hidden' in v) || 'hidden' in v && !v.hidden))">
<MkInput v-if="v.type === 'number'" v-model="values[k]" type="number" :step="v.step || 1">
<template v-for="(v, k) in Object.fromEntries(Object.entries(form))">
<template v-if="typeof v.hidden == 'function' ? v.hidden(values) : v.hidden"></template>
<MkInput v-else-if="v.type === 'number'" v-model="values[k]" type="number" :step="v.step || 1">
<template #label><span v-text="v.label || k"></span><span v-if="v.required === false"> ({{ i18n.ts.optional }})</span></template>
<template v-if="v.description" #caption>{{ v.description }}</template>
</MkInput>
@ -53,6 +54,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton v-else-if="v.type === 'button'" @click="v.action($event, values)">
<span v-text="v.content || k"></span>
</MkButton>
<XFile
v-else-if="v.type === 'drive-file'"
:fileId="v.defaultFileId"
:validate="async f => !v.validate || await v.validate(f)"
@update="f => values[k] = f"
/>
</template>
</div>
<div v-else class="_fullinfo">
@ -72,6 +79,7 @@ import MkSelect from './MkSelect.vue';
import MkRange from './MkRange.vue';
import MkButton from './MkButton.vue';
import MkRadios from './MkRadios.vue';
import XFile from './MkFormDialog.file.vue';
import type { Form } from '@/scripts/form.js';
import MkModalWindow from '@/components/MkModalWindow.vue';
import { i18n } from '@/i18n.js';

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

@ -276,8 +276,11 @@ const align = () => {
const onOpened = () => {
emit('opened');
// NOTE: Chromatic テストの際に undefined になる場合がある
if (content.value == null) return;
// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
const el = content.value!.children[0];
const el = content.value.children[0];
el.addEventListener('mousedown', ev => {
contentClicking = true;
window.addEventListener('mouseup', ev => {

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

@ -192,7 +192,7 @@ const localOnly = ref(props.initialLocalOnly ?? (defaultStore.state.rememberNote
const visibility = ref(props.initialVisibility ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility));
const visibleUsers = ref<Misskey.entities.UserDetailed[]>([]);
if (props.initialVisibleUsers) {
props.initialVisibleUsers.forEach(pushVisibleUser);
props.initialVisibleUsers.forEach(u => pushVisibleUser(u));
}
const reactionAcceptance = ref(defaultStore.state.reactionAcceptance);
const autocomplete = ref(null);
@ -338,7 +338,7 @@ if (props.reply && ['home', 'followers', 'specified'].includes(props.reply.visib
misskeyApi('users/show', {
userIds: props.reply.visibleUserIds.filter(uid => uid !== $i.id && uid !== props.reply?.userId),
}).then(users => {
users.forEach(pushVisibleUser);
users.forEach(u => pushVisibleUser(u));
});
}
@ -618,6 +618,23 @@ async function onPaste(ev: ClipboardEvent) {
quoteId.value = paste.substring(url.length).match(/^\/notes\/(.+?)\/?$/)?.[1] ?? null;
});
}
if (paste.length > 1000) {
ev.preventDefault();
os.confirm({
type: 'info',
text: i18n.ts.attachAsFileQuestion,
}).then(({ canceled }) => {
if (canceled) {
insertTextAtCursor(textareaEl.value, paste);
return;
}
const fileName = formatTimeString(new Date(), defaultStore.state.pastedFileName).replace(/{{number}}/g, "0");
const file = new File([paste], `${fileName}.txt`, { type: "text/plain" });
upload(file, `${fileName}.txt`);
});
}
}
function onDragover(ev) {
@ -1004,11 +1021,7 @@ onMounted(() => {
}
if (draft.data.visibleUserIds) {
misskeyApi('users/show', { userIds: draft.data.visibleUserIds }).then(users => {
for (let i = 0; i < users.length; i++) {
if (users[i].id === draft.data.visibleUserIds[i]) {
pushVisibleUser(users[i]);
}
}
users.forEach(u => pushVisibleUser(u));
});
}
}

8
packages/frontend/src/components/global/MkAd.stories.impl.ts
View file

@ -11,6 +11,10 @@ import { i18n } from '@/i18n.js';
let lock: Promise<undefined> | undefined;
function sleep(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const common = {
render(args) {
return {
@ -43,6 +47,8 @@ const common = {
lock = new Promise(r => resolve = r);
try {
// NOTE: sleep しないと何故か落ちる
await sleep(100);
const canvas = within(canvasElement);
const a = canvas.getByRole<HTMLAnchorElement>('link');
// await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
@ -53,7 +59,7 @@ const common = {
const i = buttons[0];
await expect(i).toBeInTheDocument();
await userEvent.click(i);
// await expect(canvasElement).toHaveTextContent(i18n.ts._ad.back);
await expect(canvasElement).toHaveTextContent(i18n.ts._ad.back);
await expect(a).not.toBeInTheDocument();
await expect(i).not.toBeInTheDocument();
buttons = canvas.getAllByRole<HTMLButtonElement>('button');

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

@ -525,7 +525,7 @@ export function waiting(): Promise<void> {
});
}
export function form<F extends Form>(title: string, f: F): Promise<{ canceled: true } | { result: GetFormResultType<F> }> {
export function form<F extends Form>(title: string, f: F): Promise<{ canceled: true, result?: undefined } | { canceled?: false, result: GetFormResultType<F> }> {
return new Promise(resolve => {
popup(defineAsyncComponent(() => import('@/components/MkFormDialog.vue')), { title, form: f }, {
done: result => {

14
packages/frontend/src/pages/admin/federation.vue
View file

@ -59,6 +59,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import * as Misskey from 'misskey-js';
import { computed, ref } from 'vue';
import XHeader from './_header_.vue';
import MkInput from '@/components/MkInput.vue';
@ -92,8 +93,17 @@ const pagination = {
})),
};
function getStatus(instance) {
if (instance.isSuspended) return 'Suspended';
function getStatus(instance: Misskey.entities.FederationInstance) {
switch (instance.suspensionState) {
case 'manuallySuspended':
return 'Manually Suspended';
case 'goneSuspended':
return 'Automatically Suspended (Gone)';
case 'autoSuspendedForNotResponding':
return 'Automatically Suspended (Not Responding)';
case 'none':
break;
}
if (instance.isBlocked) return 'Blocked';
if (instance.isSilenced) return 'Silenced';
if (instance.isNotResponding) return 'Error';

27
packages/frontend/src/pages/admin/files.vue
View file

@ -42,7 +42,7 @@ import MkInput from '@/components/MkInput.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { lookupFile } from '@/scripts/admin-lookup.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
@ -73,33 +73,10 @@ function clear() {
});
}
function show(file) {
os.pageWindow(`/admin/file/${file.id}`);
}
async function find() {
const { canceled, result: q } = await os.inputText({
title: i18n.ts.fileIdOrUrl,
minLength: 1,
});
if (canceled) return;
misskeyApi('admin/drive/show-file', q.startsWith('http://') || q.startsWith('https://') ? { url: q.trim() } : { fileId: q.trim() }).then(file => {
show(file);
}).catch(err => {
if (err.code === 'NO_SUCH_FILE') {
os.alert({
type: 'error',
text: i18n.ts.notFound,
});
}
});
}
const headerActions = computed(() => [{
text: i18n.ts.lookup,
icon: 'ph-magnifying-glass ph-bold ph-lg',
handler: find,
handler: lookupFile,
}, {
text: i18n.ts.clearCachedFiles,
icon: 'ph-trash ph-bold ph-lg',

19
packages/frontend/src/pages/admin/index.vue
View file

@ -34,9 +34,10 @@ import { i18n } from '@/i18n.js';
import MkSuperMenu from '@/components/MkSuperMenu.vue';
import MkInfo from '@/components/MkInfo.vue';
import { instance } from '@/instance.js';
import { lookup } from '@/scripts/lookup.js';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { lookupUser, lookupUserByEmail } from '@/scripts/lookup-user.js';
import { lookupUser, lookupUserByEmail, lookupFile } from '@/scripts/admin-lookup.js';
import { PageMetadata, definePageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
import { useRouter } from '@/router/supplier.js';
@ -92,7 +93,7 @@ const menuDef = computed(() => [{
type: 'button',
icon: 'ph-magnifying-glass ph-bold ph-lg',
text: i18n.ts.lookup,
action: lookup,
action: adminLookup,
}, ...(instance.disableRegistration ? [{
type: 'button',
icon: 'ph-user-plus ph-bold ph-lg',
@ -297,7 +298,7 @@ function invite() {
});
}
function lookup(ev: MouseEvent) {
function adminLookup(ev: MouseEvent) {
os.popupMenu([{
text: i18n.ts.user,
icon: 'ph-user ph-bold ph-lg',
@ -310,23 +311,17 @@ function lookup(ev: MouseEvent) {
action: () => {
lookupUserByEmail();
},
}, {
text: i18n.ts.note,
icon: 'ph-pencil-simple ph-bold ph-lg',
action: () => {
alert('TODO');
},
}, {
text: i18n.ts.file,
icon: 'ph-cloud ph-bold ph-lg',
action: () => {
alert('TODO');
lookupFile();
},
}, {
text: i18n.ts.instance,
text: i18n.ts.lookup,
icon: 'ph-planet ph-bold ph-lg',
action: () => {
alert('TODO');
lookup();
},
}], ev.currentTarget ?? ev.target);
}

9
packages/frontend/src/pages/admin/moderation.vue
View file

@ -39,6 +39,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #caption>Choose which instances should be displayed in the bubble.</template>
</MkTextarea>
<MkInput v-model="inquiryUrl" type="url">
<template #prefix><i class="ti ti-link"></i></template>
<template #label>{{ i18n.ts._serverSettings.inquiryUrl }}</template>
<template #caption>{{ i18n.ts._serverSettings.inquiryUrlDescription }}</template>
</MkInput>
<MkTextarea v-model="preservedUsernames">
<template #label>{{ i18n.ts.preservedUsernames }}</template>
<template #caption>{{ i18n.ts.preservedUsernamesDescription }}</template>
@ -98,6 +104,7 @@ const preservedUsernames = ref<string>('');
const bubbleTimeline = ref<string>('');
const tosUrl = ref<string | null>(null);
const privacyPolicyUrl = ref<string | null>(null);
const inquiryUrl = ref<string | null>(null);
async function init() {
const meta = await misskeyApi('admin/meta');
@ -112,6 +119,7 @@ async function init() {
privacyPolicyUrl.value = meta.privacyPolicyUrl;
bubbleTimeline.value = meta.bubbleInstances.join('\n');
bubbleTimelineEnabled.value = meta.policies.btlAvailable;
inquiryUrl.value = meta.inquiryUrl;
}
function save() {
@ -121,6 +129,7 @@ function save() {
approvalRequiredForSignup: approvalRequiredForSignup.value,
tosUrl: tosUrl.value,
privacyPolicyUrl: privacyPolicyUrl.value,
inquiryUrl: inquiryUrl.value,
sensitiveWords: sensitiveWords.value.split('\n'),
prohibitedWords: prohibitedWords.value.split('\n'),
hiddenTags: hiddenTags.value.split('\n'),

2
packages/frontend/src/pages/admin/users.vue
View file

@ -64,7 +64,7 @@ import MkInput from '@/components/MkInput.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkPagination from '@/components/MkPagination.vue';
import * as os from '@/os.js';
import { lookupUser } from '@/scripts/lookup-user.js';
import { lookupUser } from '@/scripts/admin-lookup.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import MkUserCardMini from '@/components/MkUserCardMini.vue';

142
packages/frontend/src/pages/announcement.vue Normal file
View file

@ -0,0 +1,142 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="800">
<Transition
:enterActiveClass="defaultStore.state.animation ? $style.fadeEnterActive : ''"
:leaveActiveClass="defaultStore.state.animation ? $style.fadeLeaveActive : ''"
:enterFromClass="defaultStore.state.animation ? $style.fadeEnterFrom : ''"
:leaveToClass="defaultStore.state.animation ? $style.fadeLeaveTo : ''"
mode="out-in"
>
<div v-if="announcement" :key="announcement.id" class="_panel" :class="$style.announcement">
<div v-if="announcement.forYou" :class="$style.forYou"><i class="ti ti-pin"></i> {{ i18n.ts.forYou }}</div>
<div :class="$style.header">
<span v-if="$i && !announcement.silence && !announcement.isRead" style="margin-right: 0.5em;">🆕</span>
<span style="margin-right: 0.5em;">
<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--warn);"></i>
<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--error);"></i>
<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--success);"></i>
</span>
<Mfm :text="announcement.title"/>
</div>
<div :class="$style.content">
<Mfm :text="announcement.text"/>
<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
<div style="margin-top: 8px; opacity: 0.7; font-size: 85%;">
{{ i18n.ts.createdAt }}: <MkTime :time="announcement.createdAt" mode="detail"/>
</div>
<div v-if="announcement.updatedAt" style="opacity: 0.7; font-size: 85%;">
{{ i18n.ts.updatedAt }}: <MkTime :time="announcement.updatedAt" mode="detail"/>
</div>
</div>
<div v-if="$i && !announcement.silence && !announcement.isRead" :class="$style.footer">
<MkButton primary @click="read(announcement)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
</div>
</div>
<MkError v-else-if="error" @retry="fetch()"/>
<MkLoading v-else/>
</Transition>
</MkSpacer>
</MkStickyContainer>
</template>
<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import * as Misskey from 'misskey-js';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { $i, updateAccount } from '@/account.js';
import { defaultStore } from '@/store.js';
const props = defineProps<{
announcementId: string;
}>();
const announcement = ref<Misskey.entities.Announcement | null>(null);
const error = ref<any>(null);
const path = computed(() => props.announcementId);
function fetch() {
announcement.value = null;
misskeyApi('announcements/show', {
announcementId: props.announcementId,
}).then(async _announcement => {
announcement.value = _announcement;
}).catch(err => {
error.value = err;
});
}
async function read(target: Misskey.entities.Announcement): Promise<void> {
if (target.needConfirmationToRead) {
const confirm = await os.confirm({
type: 'question',
title: i18n.ts._announcement.readConfirmTitle,
text: i18n.tsx._announcement.readConfirmText({ title: target.title }),
});
if (confirm.canceled) return;
}
target.isRead = true;
await misskeyApi('i/read-announcement', { announcementId: target.id });
if ($i) {
updateAccount({
unreadAnnouncements: $i.unreadAnnouncements.filter((a: { id: string; }) => a.id !== target.id),
});
}
}
watch(() => path.value, fetch, { immediate: true });
const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
title: announcement.value ? `${i18n.ts.announcements}: ${announcement.value.title}` : i18n.ts.announcements,
icon: 'ti ti-speakerphone',
}));
</script>
<style lang="scss" module>
.announcement {
padding: 16px;
}
.forYou {
display: flex;
align-items: center;
line-height: 24px;
font-size: 90%;
white-space: pre;
color: #d28a3f;
}
.header {
margin-bottom: 16px;
font-weight: bold;
font-size: 120%;
}
.content {
> img {
display: block;
max-height: 300px;
max-width: 100%;
}
}
.footer {
margin-top: 16px;
}
</style>

25
packages/frontend/src/pages/announcements.vue
View file

@ -21,14 +21,19 @@ SPDX-License-Identifier: AGPL-3.0-only
<i v-else-if="announcement.icon === 'error'" class="ph-x-circle ph-bold ph-lg" style="color: var(--error);"></i>
<i v-else-if="announcement.icon === 'success'" class="ph-check ph-bold ph-lg" style="color: var(--success);"></i>
</span>
<span>{{ announcement.title }}</span>
<MkA :to="`/announcements/${announcement.id}`"><span>{{ announcement.title }}</span></MkA>
</div>
<div :class="$style.content">
<Mfm :text="announcement.text"/>
<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
<div style="opacity: 0.7; font-size: 85%;">
<MkTime :time="announcement.updatedAt ?? announcement.createdAt" mode="detail"/>
</div>
<MkA :to="`/announcements/${announcement.id}`">
<div style="margin-top: 8px; opacity: 0.7; font-size: 85%;">
{{ i18n.ts.createdAt }}: <MkTime :time="announcement.createdAt" mode="detail"/>
</div>
<div v-if="announcement.updatedAt" style="opacity: 0.7; font-size: 85%;">
{{ i18n.ts.updatedAt }}: <MkTime :time="announcement.updatedAt" mode="detail"/>
</div>
</MkA>
</div>
<div v-if="tab !== 'past' && $i && !announcement.silence && !announcement.isRead" :class="$style.footer">
<MkButton primary @click="read(announcement)"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.gotIt }}</MkButton>
@ -73,24 +78,24 @@ const paginationEl = ref<InstanceType<typeof MkPagination>>();
const tab = ref('current');
async function read(announcement) {
if (announcement.needConfirmationToRead) {
async function read(target) {
if (target.needConfirmationToRead) {
const confirm = await os.confirm({
type: 'question',
title: i18n.ts._announcement.readConfirmTitle,
text: i18n.tsx._announcement.readConfirmText({ title: announcement.title }),
text: i18n.tsx._announcement.readConfirmText({ title: target.title }),
});
if (confirm.canceled) return;
}
if (!paginationEl.value) return;
paginationEl.value.updateItem(announcement.id, a => {
paginationEl.value.updateItem(target.id, a => {
a.isRead = true;
return a;
});
misskeyApi('i/read-announcement', { announcementId: announcement.id });
misskeyApi('i/read-announcement', { announcementId: target.id });
updateAccount({
unreadAnnouncements: $i!.unreadAnnouncements.filter(a => a.id !== announcement.id),
unreadAnnouncements: $i!.unreadAnnouncements.filter(a => a.id !== target.id),
});
}

3
packages/frontend/src/pages/channel.vue
View file

@ -83,6 +83,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
import { deviceKind } from '@/scripts/device-kind.js';
import MkNotes from '@/components/MkNotes.vue';
import { url } from '@/config.js';
import { favoritedChannelsCache } from '@/cache.js';
import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';
import { defaultStore } from '@/store.js';
@ -170,6 +171,7 @@ function favorite() {
channelId: channel.value.id,
}).then(() => {
favorited.value = true;
favoritedChannelsCache.delete();
});
}
@ -185,6 +187,7 @@ async function unfavorite() {
channelId: channel.value.id,
}).then(() => {
favorited.value = false;
favoritedChannelsCache.delete();
});
}

18
packages/frontend/src/pages/contact.vue
View file

@ -7,7 +7,21 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkStickyContainer>
<template #header><MkPageHeader/></template>
<MkSpacer :contentMax="600" :marginMin="20">
<div>{{ instance.maintainerEmail }}</div>
<div class="_gaps">
<MkKeyValue>
<template #key>{{ i18n.ts.inquiry }}</template>
<template #value>
<MkLink :url="instance.inquiryUrl" target="_blank">{{ instance.inquiryUrl }}</MkLink>
</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.email }}</template>
<template #value>
<div>{{ instance.maintainerEmail }}</div>
</template>
</MkKeyValue>
</div>
</MkSpacer>
</MkStickyContainer>
</template>
@ -16,6 +30,8 @@ SPDX-License-Identifier: AGPL-3.0-only
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { instance } from '@/instance.js';
import MkKeyValue from '@/components/MkKeyValue.vue';
import MkLink from '@/components/MkLink.vue';
definePageMetadata(() => ({
title: i18n.ts.inquiry,

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

@ -29,6 +29,9 @@ const paginationForPolls = {
endpoint: 'notes/polls/recommendation' as const,
limit: 10,
offsetMode: true,
params: {
excludeChannels: true,
},
};
const tab = ref('notes');

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

@ -35,7 +35,16 @@ SPDX-License-Identifier: AGPL-3.0-only
<FormSection v-if="iAmModerator">
<template #label>Moderation</template>
<div class="_gaps_s">
<MkSwitch v-model="suspended" :disabled="!instance" @update:modelValue="toggleSuspend">{{ i18n.ts.stopActivityDelivery }}</MkSwitch>
<MkKeyValue>
<template #key>
{{ i18n.ts._delivery.status }}
</template>
<template #value>
{{ i18n.ts._delivery._type[suspensionState] }}
</template>
</MkKeyValue>
<MkButton v-if="suspensionState === 'none'" :disabled="!instance" danger @click="stopDelivery">{{ i18n.ts._delivery.stop }}</MkButton>
<MkButton v-if="suspensionState !== 'none'" :disabled="!instance" @click="resumeDelivery">{{ i18n.ts._delivery.resume }}</MkButton>
<MkSwitch v-model="isBlocked" :disabled="!meta || !instance" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</MkSwitch>
<MkSwitch v-model="isSilenced" :disabled="!meta || !instance" @update:modelValue="toggleSilenced">{{ i18n.ts.silenceThisInstance }}</MkSwitch>
<MkSwitch v-model="isNSFW" :disabled="!instance" @update:modelValue="toggleNSFW">Mark as NSFW</MkSwitch>
@ -156,7 +165,7 @@ const tab = ref('overview');
const chartSrc = ref('instance-requests');
const meta = ref<Misskey.entities.AdminMetaResponse | null>(null);
const instance = ref<Misskey.entities.FederationInstance | null>(null);
const suspended = ref(false);
const suspensionState = ref<'none' | 'manuallySuspended' | 'goneSuspended' | 'autoSuspendedForNotResponding'>('none');
const isBlocked = ref(false);
const isSilenced = ref(false);
const isNSFW = ref(false);
@ -185,7 +194,7 @@ async function fetch(): Promise<void> {
instance.value = await misskeyApi('federation/show-instance', {
host: props.host,
});
suspended.value = instance.value?.isSuspended ?? false;
suspensionState.value = instance.value?.suspensionState ?? 'none';
isBlocked.value = instance.value?.isBlocked ?? false;
isSilenced.value = instance.value?.isSilenced ?? false;
isNSFW.value = instance.value?.isNSFW ?? false;
@ -212,11 +221,21 @@ async function toggleSilenced(): Promise<void> {
});
}
async function toggleSuspend(): Promise<void> {
async function stopDelivery(): Promise<void> {
if (!instance.value) throw new Error('No instance?');
suspensionState.value = 'manuallySuspended';
await misskeyApi('admin/federation/update-instance', {
host: instance.value.host,
isSuspended: suspended.value,
isSuspended: true,
});
}
async function resumeDelivery(): Promise<void> {
if (!instance.value) throw new Error('No instance?');
suspensionState.value = 'none';
await misskeyApi('admin/federation/update-instance', {
host: instance.value.host,
isSuspended: false,
});
}

3
packages/frontend/src/pages/my-antennas/editor.vue
View file

@ -39,7 +39,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSwitch v-model="localOnly">{{ i18n.ts.localOnly }}</MkSwitch>
<MkSwitch v-model="caseSensitive">{{ i18n.ts.caseSensitive }}</MkSwitch>
<MkSwitch v-model="withFile">{{ i18n.ts.withFileAntenna }}</MkSwitch>
<MkSwitch v-model="notify">{{ i18n.ts.notifyAntenna }}</MkSwitch>
</div>
<div :class="$style.actions">
<MkButton inline primary @click="saveAntenna()"><i class="ph-floppy-disk ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
@ -82,7 +81,6 @@ const localOnly = ref<boolean>(props.antenna.localOnly);
const excludeBots = ref<boolean>(props.antenna.excludeBots);
const withReplies = ref<boolean>(props.antenna.withReplies);
const withFile = ref<boolean>(props.antenna.withFile);
const notify = ref<boolean>(props.antenna.notify);
const userLists = ref<Misskey.entities.UserList[] | null>(null);
watch(() => src.value, async () => {
@ -99,7 +97,6 @@ async function saveAntenna() {
excludeBots: excludeBots.value,
withReplies: withReplies.value,
withFile: withFile.value,
notify: notify.value,
caseSensitive: caseSensitive.value,
localOnly: localOnly.value,
users: users.value.trim().split('\n').map(x => x.trim()),

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

@ -50,13 +50,17 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_gaps_m">
<div class="_gaps_s">
<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
<MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</MkSwitch>
<MkSwitch v-model="collapseRenotes">
<template #label>{{ i18n.ts.collapseRenotes }}</template>
<template #caption>{{ i18n.ts.collapseRenotesDescription }}</template>
</MkSwitch>
<MkSwitch v-model="collapseRenotes">{{ i18n.ts.collapseRenotes }}</MkSwitch>
<MkSwitch v-model="collapseFiles">{{ i18n.ts.collapseFiles }}</MkSwitch>
<MkSwitch v-model="uncollapseCW">Uncollapse CWs on notes</MkSwitch>
<MkSwitch v-model="autoloadConversation">{{ i18n.ts.autoloadConversation }}</MkSwitch>
<MkSwitch v-model="expandLongNote">Always expand long notes</MkSwitch>
<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
<MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</MkSwitch>
<MkSwitch v-model="autoloadConversation">{{ i18n.ts.autoloadConversation }}</MkSwitch>
<MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</MkSwitch>
<MkSwitch v-if="advancedMfm" v-model="animatedMfm">{{ i18n.ts.enableAnimatedMfm }}</MkSwitch>
<MkSwitch v-if="advancedMfm" v-model="enableQuickAddMfmFunction">{{ i18n.ts.enableQuickAddMfmFunction }}</MkSwitch>

29
packages/frontend/src/pages/share.vue
View file

@ -64,7 +64,34 @@ async function init() {
// Googleニュース対策
if (text?.startsWith(`${title.value}.\n`)) noteText += text.replace(`${title.value}.\n`, '');
else if (text && title.value !== text) noteText += `${text}\n`;
if (url) noteText += `${url}`;
if (url) {
try {
// Normalize the URL to URL-encoded and puny-coded from with the URL constructor.
//
// It's common to use unicode characters in the URL for better visibility of URL
// like: https://ja.wikipedia.org/wiki/ミスキー
// or like: https://藍.moe/
// However, in the MFM, the unicode characters must be URL-encoded to be parsed as `url` node
// like: https://ja.wikipedia.org/wiki/%E3%83%9F%E3%82%B9%E3%82%AD%E3%83%BC
// or like: https://xn--931a.moe/
// Therefore, we need to normalize the URL to URL-encoded form.
//
// The URL constructor will parse the URL and normalize unicode characters
// in the host to punycode and in the path component to URL-encoded form.
// (see url.spec.whatwg.org)
//
// In addition, the current MFM renderer decodes the URL-encoded path and / punycode encoded host name so
// this normalization doesn't make the visible URL ugly.
// (see MkUrl.vue)
noteText += new URL(url).href;
} catch {
// fallback to original URL if the URL is invalid.
// note that this is extremely rare since the `url` parameter is designed to share a URL and
// the URL constructor will throw TypeError only if failure, which means the URL is not valid.
noteText += url;
}
}
initialText.value = noteText.trim();
if (visibility.value === 'specified') {

6
packages/frontend/src/pages/timeline.vue
View file

@ -49,7 +49,7 @@ import { i18n } from '@/i18n.js';
import { instance } from '@/instance.js';
import { $i } from '@/account.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { antennasCache, userListsCache } from '@/cache.js';
import { antennasCache, userListsCache, favoritedChannelsCache } from '@/cache.js';
import { deviceKind } from '@/scripts/device-kind.js';
import { deepMerge } from '@/scripts/merge.js';
import { MenuItem } from '@/types/menu.js';
@ -180,9 +180,7 @@ async function chooseAntenna(ev: MouseEvent): Promise<void> {
}
async function chooseChannel(ev: MouseEvent): Promise<void> {
const channels = await misskeyApi('channels/my-favorites', {
limit: 100,
});
const channels = await favoritedChannelsCache.fetch();
const items: MenuItem[] = [
...channels.map(channel => {
const lastReadedAt = miLocalStorage.getItemAsJson(`channelLastReadedAt:${channel.id}`) ?? null;

3
packages/frontend/src/router/definition.ts
View file

@ -193,6 +193,9 @@ const routes: RouteDef[] = [{
}, {
path: '/announcements',
component: page(() => import('@/pages/announcements.vue')),
}, {
path: '/announcements/:announcementId',
component: page(() => import('@/pages/announcement.vue')),
}, {
path: '/about',
component: page(() => import('@/pages/about.vue')),

23
packages/frontend/src/scripts/lookup-user.ts → packages/frontend/src/scripts/admin-lookup.ts
View file

@ -63,3 +63,26 @@ export async function lookupUserByEmail() {
}
}
}
export async function lookupFile() {
const { canceled, result: q } = await os.inputText({
title: i18n.ts.fileIdOrUrl,
minLength: 1,
});
if (canceled) return;
const show = (file) => {
os.pageWindow(`/admin/file/${file.id}`);
};
misskeyApi('admin/drive/show-file', q.startsWith('http://') || q.startsWith('https://') ? { url: q.trim() } : { fileId: q.trim() }).then(file => {
show(file);
}).catch(err => {
if (err.code === 'NO_SUCH_FILE') {
os.alert({
type: 'error',
text: i18n.ts.notFound,
});
}
});
}

19
packages/frontend/src/scripts/collapsed.ts
View file

@ -6,15 +6,16 @@
import * as Misskey from 'misskey-js';
export function shouldCollapsed(note: Misskey.entities.Note, urls: string[]): boolean {
const collapsed = note.cw == null && note.text != null && (
(note.text.includes('$[x2')) ||
(note.text.includes('$[x3')) ||
(note.text.includes('$[x4')) ||
(note.text.includes('$[scale')) ||
(note.text.split('\n').length > 9) ||
(note.text.length > 500) ||
(note.files.length >= 5) ||
(urls.length >= 4)
const collapsed = note.cw == null && (
note.text != null && (
(note.text.includes('$[x2')) ||
(note.text.includes('$[x3')) ||
(note.text.includes('$[x4')) ||
(note.text.includes('$[scale')) ||
(note.text.split('\n').length > 9) ||
(note.text.length > 500) ||
(urls.length >= 4)
) || note.files.length >= 5
);
return collapsed;

30
packages/frontend/src/scripts/form.ts
View file

@ -3,18 +3,22 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import * as Misskey from 'misskey-js';
type EnumItem = string | {
label: string;
value: string;
};
type Hidden = boolean | ((v: any) => boolean);
export type FormItem = {
label?: string;
type: 'string';
default: string | null;
description?: string;
required?: boolean;
hidden?: boolean;
hidden?: Hidden;
multiline?: boolean;
treatAsMfm?: boolean;
} | {
@ -23,27 +27,27 @@ export type FormItem = {
default: number | null;
description?: string;
required?: boolean;
hidden?: boolean;
hidden?: Hidden;
step?: number;
} | {
label?: string;
type: 'boolean';
default: boolean | null;
description?: string;
hidden?: boolean;
hidden?: Hidden;
} | {
label?: string;
type: 'enum';
default: string | null;
required?: boolean;
hidden?: boolean;
hidden?: Hidden;
enum: EnumItem[];
} | {
label?: string;
type: 'radio';
default: unknown | null;
required?: boolean;
hidden?: boolean;
hidden?: Hidden;
options: {
label: string;
value: unknown;
@ -58,20 +62,27 @@ export type FormItem = {
min: number;
max: number;
textConverter?: (value: number) => string;
hidden?: Hidden;
} | {
label?: string;
type: 'object';
default: Record<string, unknown> | null;
hidden: boolean;
hidden: Hidden;
} | {
label?: string;
type: 'array';
default: unknown[] | null;
hidden: boolean;
hidden: Hidden;
} | {
type: 'button';
content?: string;
hidden?: Hidden;
action: (ev: MouseEvent, v: any) => void;
} | {
type: 'drive-file';
defaultFileId?: string | null;
hidden?: Hidden;
validate?: (v: Misskey.entities.DriveFile) => Promise<boolean>;
};
export type Form = Record<string, FormItem>;
@ -84,8 +95,9 @@ type GetItemType<Item extends FormItem> =
Item['type'] extends 'range' ? number :
Item['type'] extends 'enum' ? string :
Item['type'] extends 'array' ? unknown[] :
Item['type'] extends 'object' ? Record<string, unknown>
: never;
Item['type'] extends 'object' ? Record<string, unknown> :
Item['type'] extends 'drive-file' ? Misskey.entities.DriveFile | undefined :
never;
export type GetFormResultType<F extends Form> = {
[P in keyof F]: GetItemType<F[P]>;

38
packages/frontend/src/scripts/get-note-menu.ts
View file

@ -16,7 +16,7 @@ import { url } from '@/config.js';
import { defaultStore, noteActions } from '@/store.js';
import { miLocalStorage } from '@/local-storage.js';
import { getUserMenu } from '@/scripts/get-user-menu.js';
import { clipsCache } from '@/cache.js';
import { clipsCache, favoritedChannelsCache } from '@/cache.js';
import { MenuItem } from '@/types/menu.js';
import MkRippleEffect from '@/components/MkRippleEffect.vue';
import { isSupportShare } from '@/scripts/navigator.js';
@ -552,6 +552,7 @@ export function getRenoteMenu(props: {
const channelRenoteItems: MenuItem[] = [];
const normalRenoteItems: MenuItem[] = [];
const normalExternalChannelRenoteItems: MenuItem[] = [];
if (appearNote.channel) {
channelRenoteItems.push(...[{
@ -630,12 +631,47 @@ export function getRenoteMenu(props: {
});
},
}]);
normalExternalChannelRenoteItems.push({
type: 'parent',
icon: 'ti ti-repeat',
text: appearNote.channel ? i18n.ts.renoteToOtherChannel : i18n.ts.renoteToChannel,
children: async () => {
const channels = await favoritedChannelsCache.fetch();
return channels.filter((channel) => {
if (!appearNote.channelId) return true;
return channel.id !== appearNote.channelId;
}).map((channel) => ({
text: channel.name,
action: () => {
const el = props.renoteButton.value;
if (el) {
const rect = el.getBoundingClientRect();
const x = rect.left + (el.offsetWidth / 2);
const y = rect.top + (el.offsetHeight / 2);
os.popup(MkRippleEffect, { x, y }, {}, 'end');
}
if (!props.mock) {
misskeyApi('notes/create', {
renoteId: appearNote.id,
channelId: channel.id,
}).then(() => {
os.toast(i18n.tsx.renotedToX({ name: channel.name }));
});
}
},
}));
},
});
}
const renoteItems = [
...normalRenoteItems,
...(channelRenoteItems.length > 0 && normalRenoteItems.length > 0) ? [{ type: 'divider' }] as MenuItem[] : [],
...channelRenoteItems,
...(normalExternalChannelRenoteItems.length > 0 && (normalRenoteItems.length > 0 || channelRenoteItems.length > 0)) ? [{ type: 'divider' }] as MenuItem[] : [],
...normalExternalChannelRenoteItems,
];
return {

2
packages/frontend/src/ui/_common_/announcements.vue
View file

@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-for="announcement in $i.unreadAnnouncements.filter(x => x.display === 'banner')"
:key="announcement.id"
:class="$style.item"
to="/announcements"
:to="`/announcements/${announcement.id}`"
>
<span :class="$style.icon">
<i v-if="announcement.icon === 'info'" class="ph-info ph-bold ph-lg"></i>

24
packages/frontend/src/ui/deck/antenna-column.vue
View file

@ -9,18 +9,22 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ph-flying-saucer ph-bold ph-lg"></i><span style="margin-left: 8px;">{{ column.name }}</span>
</template>
<MkTimeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId"/>
<MkTimeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @note="onNote"/>
</XColumn>
</template>
<script lang="ts" setup>
import { onMounted, shallowRef } from 'vue';
import { onMounted, ref, shallowRef, watch } from 'vue';
import XColumn from './column.vue';
import { updateColumn, Column } from './deck-store.js';
import MkTimeline from '@/components/MkTimeline.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { i18n } from '@/i18n.js';
import { MenuItem } from '@/types/menu.js';
import { SoundStore } from '@/store.js';
import { soundSettingsButton } from '@/ui/deck/tl-note-notification.js';
import * as sound from '@/scripts/sound.js';
const props = defineProps<{
column: Column;
@ -28,6 +32,7 @@ const props = defineProps<{
}>();
const timeline = shallowRef<InstanceType<typeof MkTimeline>>();
const soundSetting = ref<SoundStore>(props.column.soundSetting ?? { type: null, volume: 1 });
onMounted(() => {
if (props.column.antennaId == null) {
@ -35,6 +40,10 @@ onMounted(() => {
}
});
watch(soundSetting, v => {
updateColumn(props.column.id, { soundSetting: v });
});
async function setAntenna() {
const antennas = await misskeyApi('antennas/list');
const { canceled, result: antenna } = await os.select({
@ -54,7 +63,11 @@ function editAntenna() {
os.pageWindow('my/antennas/' + props.column.antennaId);
}
const menu = [
function onNote() {
sound.playMisskeySfxFile(soundSetting.value);
}
const menu: MenuItem[] = [
{
icon: 'ph-pencil-simple ph-bold ph-lg',
text: i18n.ts.selectAntenna,
@ -65,6 +78,11 @@ const menu = [
text: i18n.ts.editAntenna,
action: editAntenna,
},
{
icon: 'ti ti-bell',
text: i18n.ts._deck.newNoteNotificationSettings,
action: () => soundSettingsButton(soundSetting),
},
];
/*

37
packages/frontend/src/ui/deck/channel-column.vue
View file

@ -13,21 +13,26 @@ SPDX-License-Identifier: AGPL-3.0-only
<div style="padding: 8px; text-align: center;">
<MkButton primary gradate rounded inline small @click="post"><i class="ph-pencil-simple ph-bold ph-lg"></i></MkButton>
</div>
<MkTimeline ref="timeline" src="channel" :channel="column.channelId" :key="column.channelId + column.withRenotes + column.onlyFiles" :withRenotes="withRenotes" :onlyFiles="onlyFiles"/>
<MkTimeline ref="timeline" src="channel" :channel="column.channelId" :key="column.channelId + column.withRenotes + column.onlyFiles" :withRenotes="withRenotes" :onlyFiles="onlyFiles" @note="onNote"/>
</template>
</XColumn>
</template>
<script lang="ts" setup>
import { watch, ref, shallowRef } from 'vue';
import { ref, shallowRef, watch } from 'vue';
import * as Misskey from 'misskey-js';
import XColumn from './column.vue';
import { updateColumn, Column } from './deck-store.js';
import MkTimeline from '@/components/MkTimeline.vue';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os.js';
import { favoritedChannelsCache } from '@/cache.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { i18n } from '@/i18n.js';
import { MenuItem } from '@/types/menu.js';
import { SoundStore } from '@/store.js';
import { soundSettingsButton } from '@/ui/deck/tl-note-notification.js';
import * as sound from '@/scripts/sound.js';
const props = defineProps<{
column: Column;
@ -51,25 +56,29 @@ watch(onlyFiles, v => {
});
});
const soundSetting = ref<SoundStore>(props.column.soundSetting ?? { type: null, volume: 1 });
if (props.column.channelId == null) {
setChannel();
}
watch(soundSetting, v => {
updateColumn(props.column.id, { soundSetting: v });
});
async function setChannel() {
const channels = await misskeyApi('channels/my-favorites', {
limit: 100,
});
const { canceled, result: channel } = await os.select({
const channels = await favoritedChannelsCache.fetch();
const { canceled, result: chosenChannel } = await os.select({
title: i18n.ts.selectChannel,
items: channels.map(x => ({
value: x, text: x.name,
})),
default: props.column.channelId,
});
if (canceled) return;
if (canceled || chosenChannel == null) return;
updateColumn(props.column.id, {
channelId: channel.id,
name: channel.name,
channelId: chosenChannel.id,
name: chosenChannel.name,
});
}
@ -85,7 +94,11 @@ async function post() {
});
}
const menu = [{
function onNote() {
sound.playMisskeySfxFile(soundSetting.value);
}
const menu: MenuItem[] = [{
icon: 'ph-pencil-simple ph-bold ph-lg',
text: i18n.ts.selectChannel,
action: setChannel,
@ -97,5 +110,9 @@ const menu = [{
type: 'switch',
text: i18n.ts.fileAttachedOnly,
ref: onlyFiles,
}, {
icon: 'ti ti-bell',
text: i18n.ts._deck.newNoteNotificationSettings,
action: () => soundSettingsButton(soundSetting),
}];
</script>

2
packages/frontend/src/ui/deck/deck-store.ts
View file

@ -9,6 +9,7 @@ import { notificationTypes } from 'misskey-js';
import { Storage } from '@/pizzax.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { deepClone } from '@/scripts/clone.js';
import { SoundStore } from '@/store.js';
type ColumnWidget = {
name: string;
@ -33,6 +34,7 @@ export type Column = {
withRenotes?: boolean;
withReplies?: boolean;
onlyFiles?: boolean;
soundSetting: SoundStore;
};
export const deckStore = markRaw(new Storage('deck', {

22
packages/frontend/src/ui/deck/list-column.vue
View file

@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ph-list ph-bold ph-lg"></i><span style="margin-left: 8px;">{{ column.name }}</span>
</template>
<MkTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" :key="column.listId + column.withRenotes + column.onlyFiles" :withRenotes="withRenotes" :onlyFiles="onlyFiles"/>
<MkTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" :key="column.listId + column.withRenotes + column.onlyFiles" :withRenotes="withRenotes" :onlyFiles="onlyFiles" @note="onNote"/>
</XColumn>
</template>
@ -21,6 +21,10 @@ import MkTimeline from '@/components/MkTimeline.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { i18n } from '@/i18n.js';
import { MenuItem } from '@/types/menu.js';
import { SoundStore } from '@/store.js';
import { soundSettingsButton } from '@/ui/deck/tl-note-notification.js';
import * as sound from '@/scripts/sound.js';
const props = defineProps<{
column: Column;
@ -30,6 +34,7 @@ const props = defineProps<{
const timeline = shallowRef<InstanceType<typeof MkTimeline>>();
const withRenotes = ref(props.column.withRenotes ?? true);
const onlyFiles = ref(props.column.onlyFiles ?? false);
const soundSetting = ref<SoundStore>(props.column.soundSetting ?? { type: null, volume: 1 });
if (props.column.listId == null) {
setList();
@ -47,6 +52,10 @@ watch(onlyFiles, v => {
});
});
watch(soundSetting, v => {
updateColumn(props.column.id, { soundSetting: v });
});
async function setList() {
const lists = await misskeyApi('users/lists/list');
const { canceled, result: list } = await os.select({
@ -66,7 +75,11 @@ function editList() {
os.pageWindow('my/lists/' + props.column.listId);
}
const menu = [
function onNote() {
sound.playMisskeySfxFile(soundSetting.value);
}
const menu: MenuItem[] = [
{
icon: 'ph-pencil-simple ph-bold ph-lg',
text: i18n.ts.selectList,
@ -87,5 +100,10 @@ const menu = [
text: i18n.ts.fileAttachedOnly,
ref: onlyFiles,
},
{
icon: 'ti ti-bell',
text: i18n.ts._deck.newNoteNotificationSettings,
action: () => soundSettingsButton(soundSetting),
},
];
</script>

23
packages/frontend/src/ui/deck/role-timeline-column.vue
View file

@ -9,18 +9,22 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ph-seal-check ph-bold ph-lg"></i><span style="margin-left: 8px;">{{ column.name }}</span>
</template>
<MkTimeline v-if="column.roleId" ref="timeline" src="role" :role="column.roleId"/>
<MkTimeline v-if="column.roleId" ref="timeline" src="role" :role="column.roleId" @note="onNote"/>
</XColumn>
</template>
<script lang="ts" setup>
import { onMounted, shallowRef } from 'vue';
import { onMounted, ref, shallowRef, watch } from 'vue';
import XColumn from './column.vue';
import { updateColumn, Column } from './deck-store.js';
import MkTimeline from '@/components/MkTimeline.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { i18n } from '@/i18n.js';
import { MenuItem } from '@/types/menu.js';
import { SoundStore } from '@/store.js';
import { soundSettingsButton } from '@/ui/deck/tl-note-notification.js';
import * as sound from '@/scripts/sound.js';
const props = defineProps<{
column: Column;
@ -28,6 +32,7 @@ const props = defineProps<{
}>();
const timeline = shallowRef<InstanceType<typeof MkTimeline>>();
const soundSetting = ref<SoundStore>(props.column.soundSetting ?? { type: null, volume: 1 });
onMounted(() => {
if (props.column.roleId == null) {
@ -35,6 +40,10 @@ onMounted(() => {
}
});
watch(soundSetting, v => {
updateColumn(props.column.id, { soundSetting: v });
});
async function setRole() {
const roles = (await misskeyApi('roles/list')).filter(x => x.isExplorable);
const { canceled, result: role } = await os.select({
@ -50,10 +59,18 @@ async function setRole() {
});
}
const menu = [{
function onNote() {
sound.playMisskeySfxFile(soundSetting.value);
}
const menu: MenuItem[] = [{
icon: 'ph-pencil-simple ph-bold ph-lg',
text: i18n.ts.role,
action: setRole,
}, {
icon: 'ti ti-bell',
text: i18n.ts._deck.newNoteNotificationSettings,
action: () => soundSettingsButton(soundSetting),
}];
/*

20
packages/frontend/src/ui/deck/tl-column.vue
View file

@ -29,6 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:withRenotes="withRenotes"
:withReplies="withReplies"
:onlyFiles="onlyFiles"
@note="onNote"
/>
</XColumn>
</template>
@ -42,6 +43,10 @@ import * as os from '@/os.js';
import { $i } from '@/account.js';
import { i18n } from '@/i18n.js';
import { instance } from '@/instance.js';
import { MenuItem } from '@/types/menu.js';
import { SoundStore } from '@/store.js';
import { soundSettingsButton } from '@/ui/deck/tl-note-notification.js';
import * as sound from '@/scripts/sound.js';
const props = defineProps<{
column: Column;
@ -54,6 +59,7 @@ const timeline = shallowRef<InstanceType<typeof MkTimeline>>();
const isLocalTimelineAvailable = (($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable));
const isGlobalTimelineAvailable = (($i == null && instance.policies.gtlAvailable) || ($i != null && $i.policies.gtlAvailable));
const isBubbleTimelineAvailable = ($i == null && instance.policies.btlAvailable) || ($i != null && $i.policies.btlAvailable);
const soundSetting = ref<SoundStore>(props.column.soundSetting ?? { type: null, volume: 1 });
const withRenotes = ref(props.column.withRenotes ?? true);
const withReplies = ref(props.column.withReplies ?? false);
const onlyFiles = ref(props.column.onlyFiles ?? false);
@ -76,6 +82,10 @@ watch(onlyFiles, v => {
});
});
watch(soundSetting, v => {
updateColumn(props.column.id, { soundSetting: v });
});
onMounted(() => {
if (props.column.tl == null) {
setType();
@ -113,10 +123,18 @@ async function setType() {
});
}
const menu = [{
function onNote() {
sound.playMisskeySfxFile(soundSetting.value);
}
const menu: MenuItem[] = [{
icon: 'ph-pencil-simple ph-bold ph-lg',
text: i18n.ts.timeline,
action: setType,
}, {
icon: 'ti ti-bell',
text: i18n.ts._deck.newNoteNotificationSettings,
action: () => soundSettingsButton(soundSetting),
}, {
type: 'switch',
text: i18n.ts.showRenotes,

107
packages/frontend/src/ui/deck/tl-note-notification.ts Normal file
View file

@ -0,0 +1,107 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
import * as Misskey from 'misskey-js';
import { Ref } from 'vue';
import { SoundStore } from '@/store.js';
import { getSoundDuration, playMisskeySfxFile, soundsTypes, SoundType } from '@/scripts/sound.js';
import { i18n } from '@/i18n.js';
import * as os from '@/os.js';
export async function soundSettingsButton(soundSetting: Ref<SoundStore>): Promise<void> {
function getSoundTypeName(f: SoundType): string {
switch (f) {
case null:
return i18n.ts.none;
case '_driveFile_':
return i18n.ts._soundSettings.driveFile;
default:
return f;
}
}
const { canceled, result } = await os.form(i18n.ts.sound, {
type: {
type: 'enum',
label: i18n.ts.sound,
default: soundSetting.value.type ?? 'none',
enum: soundsTypes.map(f => ({
value: f ?? 'none', label: getSoundTypeName(f),
})),
},
soundFile: {
type: 'drive-file',
label: i18n.ts.file,
defaultFileId: soundSetting.value.type === '_driveFile_' ? soundSetting.value.fileId : null,
hidden: v => v.type !== '_driveFile_',
validate: async (file: Misskey.entities.DriveFile) => {
if (!file.type.startsWith('audio')) {
os.alert({
type: 'warning',
title: i18n.ts._soundSettings.driveFileTypeWarn,
text: i18n.ts._soundSettings.driveFileTypeWarnDescription,
});
return false;
}
const duration = await getSoundDuration(file.url);
if (duration >= 2000) {
const { canceled } = await os.confirm({
type: 'warning',
title: i18n.ts._soundSettings.driveFileDurationWarn,
text: i18n.ts._soundSettings.driveFileDurationWarnDescription,
okText: i18n.ts.continue,
cancelText: i18n.ts.cancel,
});
if (canceled) return false;
}
return true;
},
},
volume: {
type: 'range',
label: i18n.ts.volume,
default: soundSetting.value.volume ?? 1,
textConverter: (v) => `${Math.floor(v * 100)}%`,
min: 0,
max: 1,
step: 0.05,
},
listen: {
type: 'button',
content: i18n.ts.listen,
action: (_, v) => {
const sound = buildSoundStore(v);
if (!sound) return;
playMisskeySfxFile(sound);
},
},
});
if (canceled) return;
const res = buildSoundStore(result);
if (res) soundSetting.value = res;
function buildSoundStore(result: any): SoundStore | null {
const type = (result.type === 'none' ? null : result.type) as SoundType;
const volume = result.volume as number;
const fileId = result.soundFile?.id ?? (soundSetting.value.type === '_driveFile_' ? soundSetting.value.fileId : undefined);
const fileUrl = result.soundFile?.url ?? (soundSetting.value.type === '_driveFile_' ? soundSetting.value.fileUrl : undefined);
if (type === '_driveFile_') {
if (!fileUrl || !fileId) {
os.alert({
type: 'warning',
text: i18n.ts._soundSettings.driveFileWarn,
});
return null;
}
return { type, volume, fileId, fileUrl };
} else {
return { type, volume };
}
}
}