diff options
Diffstat (limited to 'packages/frontend/src')
254 files changed, 6837 insertions, 1887 deletions
diff --git a/packages/frontend/src/account.ts b/packages/frontend/src/account.ts index 5a67c4e777..4fdd51c33b 100644 --- a/packages/frontend/src/account.ts +++ b/packages/frontend/src/account.ts @@ -121,7 +121,7 @@ function fetchAccount(token: string, id?: string, forceShowDialog?: boolean): Pr res.json().then(done2, fail2); })) .then(async res => { - if (res.error) { + if ('error' in res) { if (res.error.id === 'a8c724b3-6e9c-4b46-b1a8-bc3ed6258370') { // SUSPENDED if (forceShowDialog || $i && (token === $i.token || id === $i.id)) { @@ -185,10 +185,12 @@ export async function refreshAccount() { export async function login(token: Account['token'], redirect?: string) { const showing = ref(true); - popup(defineAsyncComponent(() => import('@/components/MkWaitingDialog.vue')), { + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkWaitingDialog.vue')), { success: false, showing: showing, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); if (_DEV_) console.log('logging as token ', token); const me = await fetchAccount(token, undefined, true) .catch(reason => { @@ -224,21 +226,23 @@ export async function openAccountMenu(opts: { if (!$i) return; function showSigninDialog() { - popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, { + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, { done: res => { addAccount(res.id, res.i); success(); }, - }, 'closed'); + closed: () => dispose(), + }); } function createAccount() { - popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, { + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, { done: res => { addAccount(res.id, res.i); switchAccountWithToken(res.i); }, - }, 'closed'); + closed: () => dispose(), + }); } async function switchAccount(account: Misskey.entities.UserDetailed) { diff --git a/packages/frontend/src/boot/main-boot.ts b/packages/frontend/src/boot/main-boot.ts index e7c2ef9449..0b1202f286 100644 --- a/packages/frontend/src/boot/main-boot.ts +++ b/packages/frontend/src/boot/main-boot.ts @@ -5,6 +5,7 @@ import { createApp, defineAsyncComponent, markRaw } from 'vue'; import { common } from './common.js'; +import type * as Misskey from 'misskey-js'; import { ui } from '@/config.js'; import { i18n } from '@/i18n.js'; import { alert, confirm, popup, post, toast } from '@/os.js'; @@ -13,7 +14,6 @@ import * as sound from '@/scripts/sound.js'; import { $i, signout, updateAccount } from '@/account.js'; import { instance } from '@/instance.js'; import { ColdDeviceStorage, defaultStore } from '@/store.js'; -import { makeHotkey } from '@/scripts/hotkey.js'; import { reactionPicker } from '@/scripts/reaction-picker.js'; import { miLocalStorage } from '@/local-storage.js'; import { claimAchievement, claimedAchievements } from '@/scripts/achievements.js'; @@ -22,6 +22,7 @@ import { deckStore } from '@/ui/deck/deck-store.js'; import { emojiPicker } from '@/scripts/emoji-picker.js'; import { mainRouter } from '@/router/main.js'; import { setFavIconDot } from '@/scripts/favicon-dot.js'; +import { type Keymap, makeHotkey } from '@/scripts/hotkey.js'; export async function mainBoot() { const { isClientUpdated } = await common(() => createApp( @@ -36,7 +37,9 @@ export async function mainBoot() { emojiPicker.init(); if (isClientUpdated && $i) { - popup(defineAsyncComponent(() => import('@/components/MkUpdated.vue')), {}, {}, 'closed'); + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkUpdated.vue')), {}, { + closed: () => dispose(), + }); } const stream = useStream(); @@ -66,14 +69,6 @@ export async function mainBoot() { }); } - const hotkeys = { - 'd': (): void => { - defaultStore.set('darkMode', !defaultStore.state.darkMode); - }, - 's': (): void => { - mainRouter.push('/search'); - }, - }; try { if (defaultStore.state.enableSeasonalScreenEffect) { const month = new Date().getMonth() + 1; @@ -102,29 +97,34 @@ export async function mainBoot() { } if ($i) { - // only add post shortcuts if logged in - hotkeys['p|n'] = post; - defaultStore.loaded.then(() => { if (defaultStore.state.accountSetupWizard !== -1) { - popup(defineAsyncComponent(() => import('@/components/MkUserSetupDialog.vue')), {}, {}, 'closed'); + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkUserSetupDialog.vue')), {}, { + closed: () => dispose(), + }); } }); for (const announcement of ($i.unreadAnnouncements ?? []).filter(x => x.display === 'dialog')) { - popup(defineAsyncComponent(() => import('@/components/MkAnnouncementDialog.vue')), { + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkAnnouncementDialog.vue')), { announcement, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); } - stream.on('announcementCreated', (ev) => { + function onAnnouncementCreated (ev: { announcement: Misskey.entities.Announcement }) { const announcement = ev.announcement; if (announcement.display === 'dialog') { - popup(defineAsyncComponent(() => import('@/components/MkAnnouncementDialog.vue')), { + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkAnnouncementDialog.vue')), { announcement, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); } - }); + } + + stream.on('announcementCreated', onAnnouncementCreated); if ($i.isDeleted) { alert({ @@ -246,13 +246,17 @@ export async function mainBoot() { const neverShowDonationInfo = miLocalStorage.getItem('neverShowDonationInfo'); if (neverShowDonationInfo !== 'true' && (createdAt.getTime() < (Date.now() - (1000 * 60 * 60 * 24 * 3))) && !location.pathname.startsWith('/miauth')) { if (latestDonationInfoShownAt == null || (new Date(latestDonationInfoShownAt).getTime() < (Date.now() - (1000 * 60 * 60 * 24 * 30)))) { - popup(defineAsyncComponent(() => import('@/components/MkDonation.vue')), {}, {}, 'closed'); + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkDonation.vue')), {}, { + closed: () => dispose(), + }); } } const modifiedVersionMustProminentlyOfferInAgplV3Section13Read = miLocalStorage.getItem('modifiedVersionMustProminentlyOfferInAgplV3Section13Read'); if (modifiedVersionMustProminentlyOfferInAgplV3Section13Read !== 'true' && instance.repositoryUrl !== 'https://activitypub.software/TransFem-org/Sharkey/') { - popup(defineAsyncComponent(() => import('@/components/MkSourceCodeAvailablePopup.vue')), {}, {}, 'closed'); + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkSourceCodeAvailablePopup.vue')), {}, { + closed: () => dispose(), + }); } if ('Notification' in window) { @@ -288,7 +292,7 @@ export async function mainBoot() { main.on('unreadNotification', () => { attemptShowNotificationDot(); - + const unreadNotificationsCount = ($i?.unreadNotificationsCount ?? 0) + 1; updateAccount({ hasUnreadNotification: true, @@ -325,6 +329,9 @@ export async function mainBoot() { updateAccount({ hasUnreadAnnouncement: false }); }); + // 個人宛てお知らせが発行されたとき + main.on('announcementCreated', onAnnouncementCreated); + // トークンが再生成されたとき // このままではMisskeyが利用できないので強制的にサインアウトさせる main.on('myTokenRegenerated', () => { @@ -333,7 +340,19 @@ export async function mainBoot() { } // shortcut - document.addEventListener('keydown', makeHotkey(hotkeys)); + const keymap = { + 'p|n': () => { + if ($i == null) return; + post(); + }, + 'd': () => { + defaultStore.set('darkMode', !defaultStore.state.darkMode); + }, + 's': () => { + mainRouter.push('/search'); + }, + } as const satisfies Keymap; + document.addEventListener('keydown', makeHotkey(keymap), { passive: false }); initializeSw(); } diff --git a/packages/frontend/src/boot/sub-boot.ts b/packages/frontend/src/boot/sub-boot.ts index 017457822b..35c84d5568 100644 --- a/packages/frontend/src/boot/sub-boot.ts +++ b/packages/frontend/src/boot/sub-boot.ts @@ -5,9 +5,12 @@ import { createApp, defineAsyncComponent } from 'vue'; import { common } from './common.js'; +import { emojiPicker } from '@/scripts/emoji-picker.js'; export async function subBoot() { const { isClientUpdated } = await common(() => createApp( defineAsyncComponent(() => import('@/ui/minimum.vue')), )); + + emojiPicker.init(); } diff --git a/packages/frontend/src/components/MkAchievements.vue b/packages/frontend/src/components/MkAchievements.vue index 8ec3ec0505..ab7bafc47a 100644 --- a/packages/frontend/src/components/MkAchievements.vue +++ b/packages/frontend/src/components/MkAchievements.vue @@ -153,7 +153,7 @@ onMounted(() => { background: linear-gradient(0deg, #ffee20, #eb7018); } - &:before { + &::before { content: ""; display: block; position: absolute; @@ -173,7 +173,7 @@ onMounted(() => { background: linear-gradient(0deg, #e1e1e1, #7c7c7c); } - &:before { + &::before { content: ""; display: block; position: absolute; diff --git a/packages/frontend/src/components/MkAntennaEditor.stories.impl.ts b/packages/frontend/src/components/MkAntennaEditor.stories.impl.ts new file mode 100644 index 0000000000..1749e07a4e --- /dev/null +++ b/packages/frontend/src/components/MkAntennaEditor.stories.impl.ts @@ -0,0 +1,62 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +import { action } from '@storybook/addon-actions'; +import { StoryObj } from '@storybook/vue3'; +import { HttpResponse, http } from 'msw'; +import { commonHandlers } from '../../.storybook/mocks.js'; +import MkAntennaEditor from './MkAntennaEditor.vue'; +export const Default = { + render(args) { + return { + components: { + MkAntennaEditor, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + events() { + return { + created: action('created'), + updated: action('updated'), + deleted: action('deleted'), + }; + }, + }, + template: '<MkAntennaEditor v-bind="props" v-on="events" />', + }; + }, + args: { + }, + parameters: { + layout: 'fullscreen', + msw: { + handlers: [ + ...commonHandlers, + http.post('/api/antennas/create', async ({ request }) => { + action('POST /api/antennas/create')(await request.json()); + return HttpResponse.json({}); + }), + http.post('/api/antennas/update', async ({ request }) => { + action('POST /api/antennas/update')(await request.json()); + return HttpResponse.json({}); + }), + http.post('/api/antennas/delete', async ({ request }) => { + action('POST /api/antennas/delete')(await request.json()); + return HttpResponse.json(); + }), + ], + }, + }, +} satisfies StoryObj<typeof MkAntennaEditor>; diff --git a/packages/frontend/src/pages/my-antennas/editor.vue b/packages/frontend/src/components/MkAntennaEditor.vue index 2949bfc02c..cb7ee3d6ca 100644 --- a/packages/frontend/src/pages/my-antennas/editor.vue +++ b/packages/frontend/src/components/MkAntennaEditor.vue @@ -41,8 +41,10 @@ SPDX-License-Identifier: AGPL-3.0-only <MkSwitch v-model="withFile">{{ i18n.ts.withFileAntenna }}</MkSwitch> </div> <div :class="$style.actions"> - <MkButton inline primary @click="saveAntenna()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton> - <MkButton v-if="antenna.id != null" inline danger @click="deleteAntenna()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton> + <div class="_buttons"> + <MkButton inline primary @click="saveAntenna()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton> + <MkButton v-if="initialAntenna.id != null" inline danger @click="deleteAntenna()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton> + </div> </div> </div> </MkSpacer> @@ -59,28 +61,53 @@ import MkSwitch from '@/components/MkSwitch.vue'; import * as os from '@/os.js'; import { misskeyApi } from '@/scripts/misskey-api.js'; import { i18n } from '@/i18n.js'; +import { deepMerge } from '@/scripts/merge.js'; +import type { DeepPartial } from '@/scripts/merge.js'; + +type PartialAllowedAntenna = Omit<Misskey.entities.Antenna, 'id' | 'createdAt' | 'updatedAt'> & { + id?: string; + createdAt?: string; + updatedAt?: string; +}; const props = defineProps<{ - antenna: Misskey.entities.Antenna + antenna?: DeepPartial<PartialAllowedAntenna>; }>(); +const initialAntenna = deepMerge<PartialAllowedAntenna>(props.antenna ?? {}, { + name: '', + src: 'all', + userListId: null, + users: [], + keywords: [], + excludeKeywords: [], + excludeBots: false, + withReplies: false, + caseSensitive: false, + localOnly: false, + withFile: false, + isActive: true, + hasUnreadNote: false, + notify: false, +}); + const emit = defineEmits<{ - (ev: 'created'): void, - (ev: 'updated'): void, + (ev: 'created', newAntenna: Misskey.entities.Antenna): void, + (ev: 'updated', editedAntenna: Misskey.entities.Antenna): void, (ev: 'deleted'): void, }>(); -const name = ref<string>(props.antenna.name); -const src = ref<Misskey.entities.AntennasCreateRequest['src']>(props.antenna.src); -const userListId = ref<string | null>(props.antenna.userListId); -const users = ref<string>(props.antenna.users.join('\n')); -const keywords = ref<string>(props.antenna.keywords.map(x => x.join(' ')).join('\n')); -const excludeKeywords = ref<string>(props.antenna.excludeKeywords.map(x => x.join(' ')).join('\n')); -const caseSensitive = ref<boolean>(props.antenna.caseSensitive); -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 name = ref<string>(initialAntenna.name); +const src = ref<Misskey.entities.AntennasCreateRequest['src']>(initialAntenna.src); +const userListId = ref<string | null>(initialAntenna.userListId); +const users = ref<string>(initialAntenna.users.join('\n')); +const keywords = ref<string>(initialAntenna.keywords.map(x => x.join(' ')).join('\n')); +const excludeKeywords = ref<string>(initialAntenna.excludeKeywords.map(x => x.join(' ')).join('\n')); +const caseSensitive = ref<boolean>(initialAntenna.caseSensitive); +const localOnly = ref<boolean>(initialAntenna.localOnly); +const excludeBots = ref<boolean>(initialAntenna.excludeBots); +const withReplies = ref<boolean>(initialAntenna.withReplies); +const withFile = ref<boolean>(initialAntenna.withFile); const userLists = ref<Misskey.entities.UserList[] | null>(null); watch(() => src.value, async () => { @@ -104,24 +131,26 @@ async function saveAntenna() { excludeKeywords: excludeKeywords.value.trim().split('\n').map(x => x.trim().split(' ')), }; - if (props.antenna.id == null) { - await os.apiWithDialog('antennas/create', antennaData); - emit('created'); + if (initialAntenna.id == null) { + const res = await os.apiWithDialog('antennas/create', antennaData); + emit('created', res); } else { - await os.apiWithDialog('antennas/update', { ...antennaData, antennaId: props.antenna.id }); - emit('updated'); + const res = await os.apiWithDialog('antennas/update', { ...antennaData, antennaId: initialAntenna.id }); + emit('updated', res); } } async function deleteAntenna() { + if (initialAntenna.id == null) return; + const { canceled } = await os.confirm({ type: 'warning', - text: i18n.tsx.removeAreYouSure({ x: props.antenna.name }), + text: i18n.tsx.removeAreYouSure({ x: initialAntenna.name }), }); if (canceled) return; await misskeyApi('antennas/delete', { - antennaId: props.antenna.id, + antennaId: initialAntenna.id, }); os.success(); diff --git a/packages/frontend/src/components/MkAntennaEditorDialog.stories.impl.ts b/packages/frontend/src/components/MkAntennaEditorDialog.stories.impl.ts new file mode 100644 index 0000000000..1c6ca83b47 --- /dev/null +++ b/packages/frontend/src/components/MkAntennaEditorDialog.stories.impl.ts @@ -0,0 +1,63 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +import { action } from '@storybook/addon-actions'; +import { StoryObj } from '@storybook/vue3'; +import { HttpResponse, http } from 'msw'; +import { commonHandlers } from '../../.storybook/mocks.js'; +import MkAntennaEditorDialog from './MkAntennaEditorDialog.vue'; +export const Default = { + render(args) { + return { + components: { + MkAntennaEditorDialog, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + events() { + return { + created: action('created'), + updated: action('updated'), + deleted: action('deleted'), + closed: action('closed'), + }; + }, + }, + template: '<MkAntennaEditorDialog v-bind="props" v-on="events" />', + }; + }, + args: { + }, + parameters: { + layout: 'centered', + msw: { + handlers: [ + ...commonHandlers, + http.post('/api/antennas/create', async ({ request }) => { + action('POST /api/antennas/create')(await request.json()); + return HttpResponse.json({}); + }), + http.post('/api/antennas/update', async ({ request }) => { + action('POST /api/antennas/update')(await request.json()); + return HttpResponse.json({}); + }), + http.post('/api/antennas/delete', async ({ request }) => { + action('POST /api/antennas/delete')(await request.json()); + return HttpResponse.json(); + }), + ], + }, + }, +} satisfies StoryObj<typeof MkAntennaEditorDialog>; diff --git a/packages/frontend/src/components/MkAntennaEditorDialog.vue b/packages/frontend/src/components/MkAntennaEditorDialog.vue new file mode 100644 index 0000000000..6d815d29f3 --- /dev/null +++ b/packages/frontend/src/components/MkAntennaEditorDialog.vue @@ -0,0 +1,63 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<MkModalWindow + ref="dialog" + :withOkButton="false" + :width="500" + :height="550" + @close="close()" + @closed="emit('closed')" +> + <template #header>{{ antenna == null ? i18n.ts.createAntenna : i18n.ts.editAntenna }}</template> + <XAntennaEditor + :antenna="antenna" + @created="onAntennaCreated" + @updated="onAntennaUpdated" + @deleted="onAntennaDeleted" + /> +</MkModalWindow> +</template> + +<script lang="ts" setup> +import { shallowRef } from 'vue'; +import * as Misskey from 'misskey-js'; +import MkModalWindow from '@/components/MkModalWindow.vue'; +import XAntennaEditor from '@/components/MkAntennaEditor.vue'; +import { i18n } from '@/i18n.js'; + +defineProps<{ + antenna?: Misskey.entities.Antenna; +}>(); + +const emit = defineEmits<{ + (ev: 'created', newAntenna: Misskey.entities.Antenna): void, + (ev: 'updated', editedAntenna: Misskey.entities.Antenna): void, + (ev: 'deleted'): void, + (ev: 'closed'): void, +}>(); + +const dialog = shallowRef<InstanceType<typeof MkModalWindow>>(); + +function onAntennaCreated(newAntenna: Misskey.entities.Antenna) { + emit('created', newAntenna); + dialog.value?.close(); +} + +function onAntennaUpdated(editedAntenna: Misskey.entities.Antenna) { + emit('updated', editedAntenna); + dialog.value?.close(); +} + +function onAntennaDeleted() { + emit('deleted'); + dialog.value?.close(); +} + +function close() { + dialog.value?.close(); +} +</script> diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue index c8d2797e16..f968fc5861 100644 --- a/packages/frontend/src/components/MkButton.vue +++ b/packages/frontend/src/components/MkButton.vue @@ -11,6 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only :type="type" :name="name" :value="value" + :disabled="disabled" @click="emit('click', $event)" @mousedown="onMousedown" > @@ -55,6 +56,7 @@ const props = defineProps<{ asLike?: boolean; name?: string; value?: string; + disabled?: boolean; }>(); const emit = defineEmits<{ @@ -248,7 +250,6 @@ function onMousedown(evt: MouseEvent): void { } &:focus-visible { - outline: solid 2px var(--focus); outline-offset: 2px; } diff --git a/packages/frontend/src/components/MkCaptcha.vue b/packages/frontend/src/components/MkCaptcha.vue index c64bb47e77..c5b6e0caed 100644 --- a/packages/frontend/src/components/MkCaptcha.vue +++ b/packages/frontend/src/components/MkCaptcha.vue @@ -104,7 +104,6 @@ async function requestRender() { }); } else if (props.provider === 'mcaptcha' && props.instanceUrl && props.sitekey) { const { default: Widget } = await import('@mcaptcha/vanilla-glue'); - // @ts-expect-error avoid typecheck error new Widget({ siteKey: { instanceUrl: new URL(props.instanceUrl), diff --git a/packages/frontend/src/components/MkChannelFollowButton.stories.impl.ts b/packages/frontend/src/components/MkChannelFollowButton.stories.impl.ts new file mode 100644 index 0000000000..b9770670dc --- /dev/null +++ b/packages/frontend/src/components/MkChannelFollowButton.stories.impl.ts @@ -0,0 +1,71 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-default-export */ +import { StoryObj } from '@storybook/vue3'; +import { HttpResponse, http } from 'msw'; +import { action } from '@storybook/addon-actions'; +import { expect, userEvent, within } from '@storybook/test'; +import { channel } from '../../.storybook/fakes.js'; +import { commonHandlers } from '../../.storybook/mocks.js'; +import MkChannelFollowButton from './MkChannelFollowButton.vue'; +import { i18n } from '@/i18n.js'; + +function sleep(ms: number) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + +export const Default = { + render(args) { + return { + components: { + MkChannelFollowButton, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + }, + template: '<MkChannelFollowButton v-bind="props" />', + }; + }, + args: { + channel: channel(), + full: true, + }, + async play({ canvasElement }) { + const canvas = within(canvasElement); + const buttonElement = canvas.getByRole<HTMLButtonElement>('button'); + await expect(buttonElement).toHaveTextContent(i18n.ts.follow); + await userEvent.click(buttonElement); + await sleep(1000); + await expect(buttonElement).toHaveTextContent(i18n.ts.unfollow); + await userEvent.click(buttonElement); + }, + parameters: { + layout: 'centered', + msw: { + handlers: [ + ...commonHandlers, + http.post('/api/channels/follow', async ({ request }) => { + action('POST /api/channels/follow')(await request.json()); + return HttpResponse.json({}); + }), + http.post('/api/channels/unfollow', async ({ request }) => { + action('POST /api/channels/unfollow')(await request.json()); + return HttpResponse.json({}); + }), + ], + }, + }, +} satisfies StoryObj<typeof MkChannelFollowButton>; diff --git a/packages/frontend/src/components/MkChannelFollowButton.vue b/packages/frontend/src/components/MkChannelFollowButton.vue index 22566628a8..6dace43fde 100644 --- a/packages/frontend/src/components/MkChannelFollowButton.vue +++ b/packages/frontend/src/components/MkChannelFollowButton.vue @@ -26,17 +26,18 @@ SPDX-License-Identifier: AGPL-3.0-only <script lang="ts" setup> import { ref } from 'vue'; +import * as Misskey from 'misskey-js'; import { misskeyApi } from '@/scripts/misskey-api.js'; import { i18n } from '@/i18n.js'; const props = withDefaults(defineProps<{ - channel: Record<string, any>; + channel: Misskey.entities.Channel; full?: boolean; }>(), { full: false, }); -const isFollowing = ref<boolean>(props.channel.isFollowing); +const isFollowing = ref(props.channel.isFollowing); const wait = ref(false); async function onClick() { @@ -86,17 +87,7 @@ async function onClick() { } &:focus-visible { - &:after { - content: ""; - pointer-events: none; - position: absolute; - top: -5px; - right: -5px; - bottom: -5px; - left: -5px; - border: 2px solid var(--focus); - border-radius: var(--radius-xl); - } + outline-offset: 2px; } &:hover { diff --git a/packages/frontend/src/components/MkChannelList.stories.impl.ts b/packages/frontend/src/components/MkChannelList.stories.impl.ts new file mode 100644 index 0000000000..f69b20c049 --- /dev/null +++ b/packages/frontend/src/components/MkChannelList.stories.impl.ts @@ -0,0 +1,65 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-default-export */ +import { StoryObj } from '@storybook/vue3'; +import { HttpResponse, http } from 'msw'; +import { action } from '@storybook/addon-actions'; +import { channel } from '../../.storybook/fakes.js'; +import { commonHandlers } from '../../.storybook/mocks.js'; +import MkChannelList from './MkChannelList.vue'; +export const Default = { + render(args) { + return { + components: { + MkChannelList, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + }, + template: '<MkChannelList v-bind="props" />', + }; + }, + args: { + pagination: { + endpoint: 'channels/search', + limit: 10, + }, + }, + parameters: { + chromatic: { + // NOTE: ロードが終わるまで待つ + delay: 3000, + }, + layout: 'fullscreen', + msw: { + handlers: [ + ...commonHandlers, + http.post('/api/channels/search', async ({ request, params }) => { + action('POST /api/channels/search')(await request.json()); + return HttpResponse.json(params.untilId === 'lastchannel' ? [] : [ + channel(), + channel('lastchannel', 'Last Channel', null), + ]); + }), + ], + }, + }, + decorators: [ + () => ({ + template: '<div style="display: flex; align-items: center; justify-content: center; height: 100vh"><div style="max-width: 700px; width: 100%; margin: 3rem"><story/></div></div>', + }), + ], +} satisfies StoryObj<typeof MkChannelList>; diff --git a/packages/frontend/src/components/MkChannelPreview.stories.impl.ts b/packages/frontend/src/components/MkChannelPreview.stories.impl.ts new file mode 100644 index 0000000000..de0193c78f --- /dev/null +++ b/packages/frontend/src/components/MkChannelPreview.stories.impl.ts @@ -0,0 +1,43 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-default-export */ +import { StoryObj } from '@storybook/vue3'; +import { channel } from '../../.storybook/fakes.js'; +import MkChannelPreview from './MkChannelPreview.vue'; +export const Default = { + render(args) { + return { + components: { + MkChannelPreview, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + }, + template: '<MkChannelPreview v-bind="props" />', + }; + }, + args: { + channel: channel(), + }, + parameters: { + layout: 'fullscreen', + }, + decorators: [ + () => ({ + template: '<div style="display: flex; align-items: center; justify-content: center; height: 100vh"><div style="max-width: 700px; width: 100%; margin: 3rem"><story/></div></div>', + }), + ], +} satisfies StoryObj<typeof MkChannelPreview>; diff --git a/packages/frontend/src/components/MkChannelPreview.vue b/packages/frontend/src/components/MkChannelPreview.vue index 036e54e6d8..a50416befc 100644 --- a/packages/frontend/src/components/MkChannelPreview.vue +++ b/packages/frontend/src/components/MkChannelPreview.vue @@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <div style="position: relative;"> - <MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1" @click="updateLastReadedAt"> + <MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" @click="updateLastReadedAt"> <div class="banner" :style="bannerStyle"> <div class="fade"></div> <div class="name"><i class="ti ti-device-tv"></i> {{ channel.name }}</div> @@ -80,6 +80,7 @@ const bannerStyle = computed(() => { <style lang="scss" scoped> .eftoefju { display: block; + position: relative; overflow: hidden; width: 100%; @@ -87,6 +88,22 @@ const bannerStyle = computed(() => { text-decoration: none; } + &:focus-within { + outline: none; + + &::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: inherit; + pointer-events: none; + box-shadow: inset 0 0 0 2px var(--focus); + } + } + > .banner { position: relative; width: 100%; diff --git a/packages/frontend/src/components/MkChart.stories.impl.ts b/packages/frontend/src/components/MkChart.stories.impl.ts new file mode 100644 index 0000000000..1bcb9c30d8 --- /dev/null +++ b/packages/frontend/src/components/MkChart.stories.impl.ts @@ -0,0 +1,80 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-default-export */ +import { StoryObj } from '@storybook/vue3'; +import { http } from 'msw'; +import { commonHandlers } from '../../.storybook/mocks.js'; +import { getChartResolver } from '../../.storybook/charts.js'; +import MkChart from './MkChart.vue'; + +const Base = { + render(args) { + return { + components: { + MkChart, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + }, + template: '<MkChart v-bind="props" />', + }; + }, + args: { + src: 'federation', + span: 'hour', + nowForChromatic: 1716263640000, + }, + parameters: { + layout: 'centered', + msw: { + handlers: [ + ...commonHandlers, + http.get('/api/charts/federation', getChartResolver( + ['deliveredInstances', 'inboxInstances', 'stalled', 'sub', 'pub', 'pubsub', 'subActive', 'pubActive'], + )), + http.get('/api/charts/notes', getChartResolver( + ['local.total', 'remote.total'], + { accumulate: true }, + )), + http.get('/api/charts/drive', getChartResolver( + ['local.incSize', 'local.decSize', 'remote.incSize', 'remote.decSize'], + { mulMap: { 'local.incSize': 1e7, 'local.decSize': 5e6, 'remote.incSize': 1e6, 'remote.decSize': 5e5 } }, + )), + ], + }, + }, +} satisfies StoryObj<typeof MkChart>; +export const FederationChart = { + ...Base, + args: { + ...Base.args, + src: 'federation', + }, +} satisfies StoryObj<typeof MkChart>; +export const NotesTotalChart = { + ...Base, + args: { + ...Base.args, + src: 'notes-total', + }, +} satisfies StoryObj<typeof MkChart>; +export const DriveChart = { + ...Base, + args: { + ...Base.args, + src: 'drive', + }, +} satisfies StoryObj<typeof MkChart>; diff --git a/packages/frontend/src/components/MkChart.vue b/packages/frontend/src/components/MkChart.vue index 04b6d2f29c..4b24562249 100644 --- a/packages/frontend/src/components/MkChart.vue +++ b/packages/frontend/src/components/MkChart.vue @@ -19,8 +19,9 @@ SPDX-License-Identifier: AGPL-3.0-only id-denylist violation when setting it. This is causing about 60+ lint issues. As this is part of Chart.js's API it makes sense to disable the check here. */ -import { onMounted, ref, shallowRef, watch, PropType } from 'vue'; +import { onMounted, ref, shallowRef, watch } from 'vue'; import { Chart } from 'chart.js'; +import * as Misskey from 'misskey-js'; import { misskeyApiGet } from '@/scripts/misskey-api.js'; import { defaultStore } from '@/store.js'; import { useChartTooltip } from '@/scripts/use-chart-tooltip.js'; @@ -34,44 +35,63 @@ import MkChartLegend from '@/components/MkChartLegend.vue'; initChart(); -const props = defineProps({ - src: { - type: String, - required: true, - }, - args: { - type: Object, - required: false, - }, - limit: { - type: Number, - required: false, - default: 90, - }, - span: { - type: String as PropType<'hour' | 'day'>, - required: true, - }, - detailed: { - type: Boolean, - required: false, - default: false, - }, - stacked: { - type: Boolean, - required: false, - default: false, - }, - bar: { - type: Boolean, - required: false, - default: false, - }, - aspectRatio: { - type: Number, - required: false, - default: null, - }, +type ChartSrc = + | 'federation' + | 'ap-request' + | 'users' + | 'users-total' + | 'active-users' + | 'notes' + | 'local-notes' + | 'remote-notes' + | 'notes-total' + | 'drive' + | 'drive-files' + | 'instance-requests' + | 'instance-users' + | 'instance-users-total' + | 'instance-notes' + | 'instance-notes-total' + | 'instance-ff' + | 'instance-ff-total' + | 'instance-drive-usage' + | 'instance-drive-usage-total' + | 'instance-drive-files' + | 'instance-drive-files-total' + | 'per-user-notes' + | 'per-user-pv' + | 'per-user-following' + | 'per-user-followers' + | 'per-user-drive' + +const props = withDefaults(defineProps<{ + src: ChartSrc; + args?: { + host?: string; + user?: Misskey.entities.UserLite; + withoutAll?: boolean; + }; + limit?: number; + span: 'hour' | 'day'; + detailed?: boolean; + stacked?: boolean; + bar?: boolean; + aspectRatio?: number | null; + nowForChromatic?: number; +}>(), { + args: undefined, + limit: 90, + detailed: false, + stacked: false, + bar: false, + aspectRatio: null, + + /** + * @desc Overwrites current date to fix background lines of chart. + * @ignore Only used for Chromatic. Don't use this for production. + * @see https://github.com/misskey-dev/misskey/pull/13830#issuecomment-2155886151 + */ + nowForChromatic: undefined, }); const legendEl = shallowRef<InstanceType<typeof MkChartLegend>>(); @@ -94,7 +114,8 @@ const getColor = (i) => { return colorSets[i % colorSets.length]; }; -const now = new Date(); +// eslint-disable-next-line vue/no-setup-props-reactivity-loss +const now = props.nowForChromatic != null ? new Date(props.nowForChromatic) : new Date(); let chartInstance: Chart | null = null; let chartData: { series: { diff --git a/packages/frontend/src/components/MkChartLegend.stories.impl.ts b/packages/frontend/src/components/MkChartLegend.stories.impl.ts new file mode 100644 index 0000000000..06146e20e4 --- /dev/null +++ b/packages/frontend/src/components/MkChartLegend.stories.impl.ts @@ -0,0 +1,7 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import MkChartLegend from './MkChartLegend.vue'; +void MkChartLegend; diff --git a/packages/frontend/src/components/MkChartTooltip.stories.impl.ts b/packages/frontend/src/components/MkChartTooltip.stories.impl.ts new file mode 100644 index 0000000000..289a9e9f27 --- /dev/null +++ b/packages/frontend/src/components/MkChartTooltip.stories.impl.ts @@ -0,0 +1,7 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import MkChartTooltip from './MkChartTooltip.vue'; +void MkChartTooltip; diff --git a/packages/frontend/src/components/MkClickerGame.stories.impl.ts b/packages/frontend/src/components/MkClickerGame.stories.impl.ts new file mode 100644 index 0000000000..36313f965d --- /dev/null +++ b/packages/frontend/src/components/MkClickerGame.stories.impl.ts @@ -0,0 +1,77 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-default-export */ +import { StoryObj } from '@storybook/vue3'; +import { HttpResponse, http } from 'msw'; +import { action } from '@storybook/addon-actions'; +import { expect, userEvent, within } from '@storybook/test'; +import { commonHandlers } from '../../.storybook/mocks.js'; +import MkClickerGame from './MkClickerGame.vue'; + +function sleep(ms: number) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + +export const Default = { + render(args) { + return { + components: { + MkClickerGame, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + }, + template: '<MkClickerGame v-bind="props" />', + }; + }, + async play({ canvasElement }) { + await sleep(1000); + const canvas = within(canvasElement); + const count = canvas.getByTestId('count'); + await expect(count).toHaveTextContent('0'); + const buttonElement = canvas.getByRole<HTMLButtonElement>('button'); + await userEvent.click(buttonElement); + await expect(count).toHaveTextContent('1'); + }, + parameters: { + layout: 'centered', + msw: { + handlers: [ + ...commonHandlers, + http.post('/api/i/registry/get', async ({ request }) => { + action('POST /api/i/registry/get')(await request.json()); + return HttpResponse.json({ + error: { + message: 'No such key.', + code: 'NO_SUCH_KEY', + id: 'ac3ed68a-62f0-422b-a7bc-d5e09e8f6a6a', + }, + }, { + status: 400, + }); + }), + http.post('/api/i/registry/set', async ({ request }) => { + action('POST /api/i/registry/set')(await request.json()); + return HttpResponse.json(undefined, { status: 204 }); + }), + http.post('/api/i/claim-achievement', async ({ request }) => { + action('POST /api/i/claim-achievement')(await request.json()); + return HttpResponse.json(undefined, { status: 204 }); + }), + ], + }, + }, +} satisfies StoryObj<typeof MkClickerGame>; diff --git a/packages/frontend/src/components/MkClickerGame.vue b/packages/frontend/src/components/MkClickerGame.vue index 23046bf345..00506fb735 100644 --- a/packages/frontend/src/components/MkClickerGame.vue +++ b/packages/frontend/src/components/MkClickerGame.vue @@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only <div> <div v-if="game.ready" :class="$style.game"> <div :class="$style.cps" class="">{{ number(cps) }}cps</div> - <div :class="$style.count" class=""><i class="ti ti-cookie" style="font-size: 70%;"></i> {{ number(cookies) }}</div> + <div :class="$style.count" class="" data-testid="count"><i class="ti ti-cookie" style="font-size: 70%;"></i> {{ number(cookies) }}</div> <button v-click-anime class="_button" @click="onClick"> <img src="/client-assets/cookie.png" :class="$style.img"> </button> @@ -35,7 +35,9 @@ const prevCookies = ref(0); function onClick(ev: MouseEvent) { const x = ev.clientX; const y = ev.clientY; - os.popup(MkPlusOneEffect, { x, y }, {}, 'end'); + const { dispose } = os.popup(MkPlusOneEffect, { x, y }, { + end: () => dispose(), + }); saveData.value!.cookies++; saveData.value!.totalCookies++; diff --git a/packages/frontend/src/components/MkClipPreview.stories.impl.ts b/packages/frontend/src/components/MkClipPreview.stories.impl.ts new file mode 100644 index 0000000000..62503fb98a --- /dev/null +++ b/packages/frontend/src/components/MkClipPreview.stories.impl.ts @@ -0,0 +1,44 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-default-export */ +import { StoryObj } from '@storybook/vue3'; +import { clip } from '../../.storybook/fakes.js'; +import MkClipPreview from './MkClipPreview.vue'; +export const Default = { + render(args) { + return { + components: { + MkClipPreview, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + }, + template: '<MkClipPreview v-bind="props" />', + }; + }, + args: { + clip: clip(), + noUserInfo: false, + }, + parameters: { + layout: 'fullscreen', + }, + decorators: [ + () => ({ + template: '<div style="display: flex; align-items: center; justify-content: center; height: 100vh"><div style="max-width: 700px; width: 100%; margin: 3rem"><story/></div></div>', + }), + ], +} satisfies StoryObj<typeof MkClipPreview>; diff --git a/packages/frontend/src/components/MkClipPreview.vue b/packages/frontend/src/components/MkClipPreview.vue index 6299a28e9f..dd550733cb 100644 --- a/packages/frontend/src/components/MkClipPreview.vue +++ b/packages/frontend/src/components/MkClipPreview.vue @@ -12,10 +12,12 @@ SPDX-License-Identifier: AGPL-3.0-only <div v-if="clip.lastClippedAt">{{ i18n.ts.updatedAt }}: <MkTime :time="clip.lastClippedAt" mode="detail"/></div> <div v-if="clip.notesCount != null">{{ i18n.ts.notesCount }}: {{ number(clip.notesCount) }} / {{ $i?.policies.noteEachClipsLimit }} ({{ i18n.tsx.remainingN({ n: remaining }) }})</div> </div> - <div :class="$style.divider"></div> - <div> - <MkAvatar :user="clip.user" :class="$style.userAvatar" indicator link preview/> <MkUserName :user="clip.user" :nowrap="false"/> - </div> + <template v-if="!props.noUserInfo"> + <div :class="$style.divider"></div> + <div> + <MkAvatar :user="clip.user" :class="$style.userAvatar" indicator link preview/> <MkUserName :user="clip.user" :nowrap="false"/> + </div> + </template> </div> </MkA> </template> @@ -27,9 +29,12 @@ import { i18n } from '@/i18n.js'; import { $i } from '@/account.js'; import number from '@/filters/number.js'; -const props = defineProps<{ +const props = withDefaults(defineProps<{ clip: Misskey.entities.Clip; -}>(); + noUserInfo?: boolean; +}>(), { + noUserInfo: false, +}); const remaining = computed(() => { return ($i?.policies && props.clip.notesCount != null) ? ($i.policies.noteEachClipsLimit - props.clip.notesCount) : i18n.ts.unknown; @@ -40,6 +45,14 @@ const remaining = computed(() => { .link { display: block; + &:focus-visible { + outline: none; + + .root { + box-shadow: inset 0 0 0 2px var(--focus); + } + } + &:hover { text-decoration: none; color: var(--accent); diff --git a/packages/frontend/src/components/MkCode.core.stories.impl.ts b/packages/frontend/src/components/MkCode.core.stories.impl.ts new file mode 100644 index 0000000000..91990fffd5 --- /dev/null +++ b/packages/frontend/src/components/MkCode.core.stories.impl.ts @@ -0,0 +1,7 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import MkCode_core from './MkCode.core.vue'; +void MkCode_core; diff --git a/packages/frontend/src/components/MkCode.stories.impl.ts b/packages/frontend/src/components/MkCode.stories.impl.ts new file mode 100644 index 0000000000..b7e53e8e35 --- /dev/null +++ b/packages/frontend/src/components/MkCode.stories.impl.ts @@ -0,0 +1,44 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-default-export */ +import { StoryObj } from '@storybook/vue3'; +import MkCode from './MkCode.vue'; +const code = `for (let i, 100) { + <: if (i % 15 == 0) "FizzBuzz" + elif (i % 3 == 0) "Fizz" + elif (i % 5 == 0) "Buzz" + else i +}`; +export const Default = { + render(args) { + return { + components: { + MkCode, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + }, + template: '<MkCode v-bind="props" />', + }; + }, + args: { + code, + lang: 'is', + }, + parameters: { + layout: 'centered', + }, +} satisfies StoryObj<typeof MkCode>; diff --git a/packages/frontend/src/components/MkCode.vue b/packages/frontend/src/components/MkCode.vue index e99bd0f50c..2475e3dc89 100644 --- a/packages/frontend/src/components/MkCode.vue +++ b/packages/frontend/src/components/MkCode.vue @@ -30,7 +30,7 @@ import * as os from '@/os.js'; import MkLoading from '@/components/global/MkLoading.vue'; import { defaultStore } from '@/store.js'; import { i18n } from '@/i18n.js'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; const props = defineProps<{ code: string; diff --git a/packages/frontend/src/components/MkCodeEditor.stories.impl.ts b/packages/frontend/src/components/MkCodeEditor.stories.impl.ts new file mode 100644 index 0000000000..5c410c4886 --- /dev/null +++ b/packages/frontend/src/components/MkCodeEditor.stories.impl.ts @@ -0,0 +1,62 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-default-export */ +import { StoryObj } from '@storybook/vue3'; +import { action } from '@storybook/addon-actions'; +import MkCodeEditor from './MkCodeEditor.vue'; +const code = `for (let i, 100) { + <: if (i % 15 == 0) "FizzBuzz" + elif (i % 3 == 0) "Fizz" + elif (i % 5 == 0) "Buzz" + else i +}`; +export const Default = { + render(args) { + return { + components: { + MkCodeEditor, + }, + data() { + return { + code, + }; + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + events() { + return { + 'change': action('change'), + 'keydown': action('keydown'), + 'enter': action('enter'), + 'update:modelValue': action('update:modelValue'), + }; + }, + }, + template: '<MkCodeEditor v-model="code" v-bind="props" v-on="events" />', + }; + }, + args: { + lang: 'aiscript', + }, + parameters: { + layout: 'fullscreen', + }, + decorators: [ + () => ({ + template: '<div style="display: flex; align-items: center; justify-content: center; height: 100vh"><div style="max-width: 800px; width: 100%; margin: 3rem"><Suspense><story/></Suspense></div></div>', + }), + ], +} satisfies StoryObj<typeof MkCodeEditor>; diff --git a/packages/frontend/src/components/MkCodeInline.stories.impl.ts b/packages/frontend/src/components/MkCodeInline.stories.impl.ts new file mode 100644 index 0000000000..51d4d106ff --- /dev/null +++ b/packages/frontend/src/components/MkCodeInline.stories.impl.ts @@ -0,0 +1,37 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-default-export */ +import { StoryObj } from '@storybook/vue3'; +import MkCodeInline from './MkCodeInline.vue'; +export const Default = { + render(args) { + return { + components: { + MkCodeInline, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + }, + template: '<MkCodeInline v-bind="props"/>', + }; + }, + args: { + code: '<: "Hello, world!"', + }, + parameters: { + layout: 'centered', + }, +} satisfies StoryObj<typeof MkCodeInline>; diff --git a/packages/frontend/src/components/MkColorInput.stories.impl.ts b/packages/frontend/src/components/MkColorInput.stories.impl.ts new file mode 100644 index 0000000000..61383e2cae --- /dev/null +++ b/packages/frontend/src/components/MkColorInput.stories.impl.ts @@ -0,0 +1,50 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-default-export */ +import { StoryObj } from '@storybook/vue3'; +import { action } from '@storybook/addon-actions'; +import MkColorInput from './MkColorInput.vue'; +export const Default = { + render(args) { + return { + components: { + MkColorInput, + }, + data() { + return { + color: '#cccccc', + }; + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + events() { + return { + 'update:modelValue': action('update:modelValue'), + }; + }, + }, + template: '<MkColorInput v-model="color" v-bind="props" v-on="events" />', + }; + }, + parameters: { + layout: 'fullscreen', + }, + decorators: [ + () => ({ + template: '<div style="display: flex; align-items: center; justify-content: center; height: 100vh"><div style="max-width: 800px; width: 100%; margin: 3rem"><story/></div></div>', + }), + ], +} satisfies StoryObj<typeof MkColorInput>; diff --git a/packages/frontend/src/components/MkContainer.stories.impl.ts b/packages/frontend/src/components/MkContainer.stories.impl.ts new file mode 100644 index 0000000000..72a7659521 --- /dev/null +++ b/packages/frontend/src/components/MkContainer.stories.impl.ts @@ -0,0 +1,7 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import MkContainer from './MkContainer.vue'; +void MkContainer; diff --git a/packages/frontend/src/components/MkContextMenu.stories.impl.ts b/packages/frontend/src/components/MkContextMenu.stories.impl.ts new file mode 100644 index 0000000000..1ff0f51bd4 --- /dev/null +++ b/packages/frontend/src/components/MkContextMenu.stories.impl.ts @@ -0,0 +1,58 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-default-export */ +import { StoryObj } from '@storybook/vue3'; +import { userEvent, within } from '@storybook/test'; +import MkContextMenu from './MkContextMenu.vue'; +import * as os from '@/os.js'; +export const Empty = { + render(args) { + return { + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + }, + methods: { + onContextmenu(ev: MouseEvent) { + os.contextMenu(args.items, ev); + }, + }, + template: '<div @contextmenu.stop="onContextmenu">Right Click Here</div>', + }; + }, + args: { + items: [], + }, + async play({ canvasElement }) { + const canvas = within(canvasElement); + const target = canvas.getByText('Right Click Here'); + await userEvent.pointer({ keys: '[MouseRight>]', target }); + }, + parameters: { + layout: 'centered', + }, +} satisfies StoryObj<typeof MkContextMenu>; +export const SomeTabs = { + ...Empty, + args: { + items: [ + { + text: 'Home', + icon: 'ti ti-home', + action() {}, + }, + ], + }, +} satisfies StoryObj<typeof MkContextMenu>; diff --git a/packages/frontend/src/components/MkContextMenu.vue b/packages/frontend/src/components/MkContextMenu.vue index a807742bb9..8ea8fa6cf3 100644 --- a/packages/frontend/src/components/MkContextMenu.vue +++ b/packages/frontend/src/components/MkContextMenu.vue @@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only :leaveToClass="defaultStore.state.animation ? $style.transition_fade_leaveTo : ''" > <div ref="rootEl" :class="$style.root" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}"> - <MkMenu :items="items" :align="'left'" @close="$emit('closed')"/> + <MkMenu :items="items" :align="'left'" @close="emit('closed')"/> </div> </Transition> </template> diff --git a/packages/frontend/src/components/MkCropperDialog.stories.impl.ts b/packages/frontend/src/components/MkCropperDialog.stories.impl.ts new file mode 100644 index 0000000000..ce13093975 --- /dev/null +++ b/packages/frontend/src/components/MkCropperDialog.stories.impl.ts @@ -0,0 +1,75 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-default-export */ +import { StoryObj } from '@storybook/vue3'; +import { HttpResponse, http } from 'msw'; +import { action } from '@storybook/addon-actions'; +import { file } from '../../.storybook/fakes.js'; +import { commonHandlers } from '../../.storybook/mocks.js'; +import MkCropperDialog from './MkCropperDialog.vue'; +export const Default = { + render(args) { + return { + components: { + MkCropperDialog, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + events() { + return { + 'ok': action('ok'), + 'cancel': action('cancel'), + 'closed': action('closed'), + }; + }, + }, + template: '<MkCropperDialog v-bind="props" v-on="events" />', + }; + }, + args: { + file: file(), + aspectRatio: NaN, + }, + parameters: { + chromatic: { + // NOTE: ロードが終わるまで待つ + delay: 3000, + }, + layout: 'centered', + msw: { + handlers: [ + ...commonHandlers, + http.get('/proxy/image.webp', async ({ request }) => { + const url = new URL(request.url).searchParams.get('url'); + if (url === 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true') { + const image = await (await fetch('client-assets/fedi.jpg')).blob(); + return new HttpResponse(image, { + headers: { + 'Content-Type': 'image/jpeg', + }, + }); + } else { + return new HttpResponse(null, { status: 404 }); + } + }), + http.post('/api/drive/files/create', async ({ request }) => { + action('POST /api/drive/files/create')(await request.formData()); + return HttpResponse.json(file()); + }), + ], + }, + }, +} satisfies StoryObj<typeof MkCropperDialog>; diff --git a/packages/frontend/src/components/MkCustomEmojiDetailedDialog.stories.impl.ts b/packages/frontend/src/components/MkCustomEmojiDetailedDialog.stories.impl.ts new file mode 100644 index 0000000000..8a05e06311 --- /dev/null +++ b/packages/frontend/src/components/MkCustomEmojiDetailedDialog.stories.impl.ts @@ -0,0 +1,38 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-default-export */ +import { StoryObj } from '@storybook/vue3'; +import { emojiDetailed } from '../../.storybook/fakes.js'; +import MkCustomEmojiDetailedDialog from './MkCustomEmojiDetailedDialog.vue'; +export const Default = { + render(args) { + return { + components: { + MkCustomEmojiDetailedDialog, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + }, + template: '<MkCustomEmojiDetailedDialog v-bind="props" />', + }; + }, + args: { + emoji: emojiDetailed(), + }, + parameters: { + layout: 'centered', + }, +} satisfies StoryObj<typeof MkCustomEmojiDetailedDialog>; diff --git a/packages/frontend/src/components/MkCwButton.stories.impl.ts b/packages/frontend/src/components/MkCwButton.stories.impl.ts new file mode 100644 index 0000000000..5d6ea56da9 --- /dev/null +++ b/packages/frontend/src/components/MkCwButton.stories.impl.ts @@ -0,0 +1,79 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-default-export */ +import { StoryObj } from '@storybook/vue3'; +import { action } from '@storybook/addon-actions'; +import { expect, userEvent, within } from '@storybook/test'; +import { file } from '../../.storybook/fakes.js'; +import MkCwButton from './MkCwButton.vue'; +import { i18n } from '@/i18n.js'; + +export const Default = { + render(args) { + return { + components: { + MkCwButton, + }, + data() { + return { + showContent: false, + }; + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + events() { + return { + 'update:modelValue': action('update:modelValue'), + }; + }, + }, + template: '<MkCwButton v-model="showContent" v-bind="props" v-on="events" />', + }; + }, + args: { + text: 'Some CW content', + }, + async play({ canvasElement }) { + const canvas = within(canvasElement); + const buttonElement = canvas.getByRole<HTMLButtonElement>('button'); + await expect(buttonElement).toHaveTextContent(i18n.ts._cw.show); + await expect(buttonElement).toHaveTextContent(i18n.tsx._cw.chars({ count: 15 })); + await userEvent.click(buttonElement); + await expect(buttonElement).toHaveTextContent(i18n.ts._cw.hide); + await userEvent.click(buttonElement); + }, + parameters: { + chromatic: { + // NOTE: テストが終わるまで待つ + delay: 5000, + }, + layout: 'centered', + }, +} satisfies StoryObj<typeof MkCwButton>; +export const IncludesTextAndDriveFile = { + ...Default, + args: { + text: 'Some CW content', + files: [file()], + }, + async play({ canvasElement }) { + const canvas = within(canvasElement); + const buttonElement = canvas.getByRole<HTMLButtonElement>('button'); + await expect(buttonElement).toHaveTextContent(i18n.tsx._cw.chars({ count: 15 })); + await expect(buttonElement).toHaveTextContent(' / '); + await expect(buttonElement).toHaveTextContent(i18n.tsx._cw.files({ count: 1 })); + }, +} satisfies StoryObj<typeof MkCwButton>; diff --git a/packages/frontend/src/components/MkCwButton.vue b/packages/frontend/src/components/MkCwButton.vue index a2cb3185f4..b5f6e78b6c 100644 --- a/packages/frontend/src/components/MkCwButton.vue +++ b/packages/frontend/src/components/MkCwButton.vue @@ -45,11 +45,11 @@ function toggle() { .label { margin-left: 4px; - &:before { + &::before { content: '('; } - &:after { + &::after { content: ')'; } } diff --git a/packages/frontend/src/components/MkDateSeparatedList.stories.impl.ts b/packages/frontend/src/components/MkDateSeparatedList.stories.impl.ts new file mode 100644 index 0000000000..0e5635754c --- /dev/null +++ b/packages/frontend/src/components/MkDateSeparatedList.stories.impl.ts @@ -0,0 +1,7 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import MkDateSeparatedList from './MkDateSeparatedList.vue'; +void MkDateSeparatedList; diff --git a/packages/frontend/src/components/MkDateSeparatedList.vue b/packages/frontend/src/components/MkDateSeparatedList.vue index 4431722dae..9976cd00c9 100644 --- a/packages/frontend/src/components/MkDateSeparatedList.vue +++ b/packages/frontend/src/components/MkDateSeparatedList.vue @@ -130,7 +130,7 @@ export default defineComponent({ el.style.left = ''; } - // eslint-disable-next-line vue/no-setup-props-destructure + // eslint-disable-next-line vue/no-setup-props-reactivity-loss const classes = { [$style['date-separated-list']]: true, [$style['date-separated-list-nogap']]: props.noGap, diff --git a/packages/frontend/src/components/MkDialog.stories.impl.ts b/packages/frontend/src/components/MkDialog.stories.impl.ts new file mode 100644 index 0000000000..2d8d3661f2 --- /dev/null +++ b/packages/frontend/src/components/MkDialog.stories.impl.ts @@ -0,0 +1,159 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { action } from '@storybook/addon-actions'; +import { expect, userEvent, waitFor, within } from '@storybook/test'; +import { StoryObj } from '@storybook/vue3'; +import { i18n } from '@/i18n.js'; +import MkDialog from './MkDialog.vue'; +const Base = { + render(args) { + return { + components: { + MkDialog, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + events() { + return { + done: action('done'), + closed: action('closed'), + }; + }, + }, + template: '<MkDialog v-bind="props" v-on="events" />', + }; + }, + args: { + text: 'Hello, world!', + }, + parameters: { + layout: 'centered', + }, +} satisfies StoryObj<typeof MkDialog>; +export const Success = { + ...Base, + args: { + ...Base.args, + type: 'success', + }, +} satisfies StoryObj<typeof MkDialog>; +export const Error = { + ...Base, + args: { + ...Base.args, + type: 'error', + }, +} satisfies StoryObj<typeof MkDialog>; +export const Warning = { + ...Base, + args: { + ...Base.args, + type: 'warning', + }, +} satisfies StoryObj<typeof MkDialog>; +export const Info = { + ...Base, + args: { + ...Base.args, + type: 'info', + }, +} satisfies StoryObj<typeof MkDialog>; +export const Question = { + ...Base, + args: { + ...Base.args, + type: 'question', + }, +} satisfies StoryObj<typeof MkDialog>; +export const Waiting = { + ...Base, + args: { + ...Base.args, + type: 'waiting', + }, +} satisfies StoryObj<typeof MkDialog>; +export const DialogWithActions = { + ...Question, + args: { + ...Question.args, + text: i18n.ts.areYouSure, + actions: [ + { + text: i18n.ts.yes, + primary: true, + callback() { + action('YES')(); + }, + }, + { + text: i18n.ts.no, + callback() { + action('NO')(); + }, + }, + ], + }, +} satisfies StoryObj<typeof MkDialog>; +export const DialogWithDangerActions = { + ...Warning, + args: { + ...Warning.args, + text: i18n.ts.resetAreYouSure, + actions: [ + { + text: i18n.ts.yes, + danger: true, + primary: true, + callback() { + action('YES')(); + }, + }, + { + text: i18n.ts.no, + callback() { + action('NO')(); + }, + }, + ], + }, +} satisfies StoryObj<typeof MkDialog>; +export const DialogWithInput = { + ...Question, + args: { + ...Question.args, + title: 'Hello, world!', + text: undefined, + input: { + placeholder: i18n.ts.inputMessageHere, + type: 'text', + default: null, + minLength: 2, + maxLength: 3, + }, + }, + async play({ canvasElement }) { + const canvas = within(canvasElement); + await expect(canvasElement).toHaveTextContent(i18n.tsx._dialog.charactersBelow({ current: 0, min: 2 })); + const okButton = canvas.getByRole('button', { name: i18n.ts.ok }); + await expect(okButton).toBeDisabled(); + const input = canvas.getByRole<HTMLInputElement>('combobox'); + await waitFor(() => userEvent.hover(input)); + await waitFor(() => userEvent.click(input)); + await waitFor(() => userEvent.type(input, 'M')); + await expect(canvasElement).toHaveTextContent(i18n.tsx._dialog.charactersBelow({ current: 1, min: 2 })); + await waitFor(() => userEvent.type(input, 'i')); + await expect(okButton).toBeEnabled(); + }, +} satisfies StoryObj<typeof MkDialog>; diff --git a/packages/frontend/src/components/MkDialog.vue b/packages/frontend/src/components/MkDialog.vue index c40ebfe10f..825c1d0513 100644 --- a/packages/frontend/src/components/MkDialog.vue +++ b/packages/frontend/src/components/MkDialog.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<MkModal ref="modal" :preferType="'dialog'" :zPriority="'high'" @click="done(true)" @closed="emit('closed')"> +<MkModal ref="modal" :preferType="'dialog'" :zPriority="'high'" @click="done(true)" @closed="emit('closed')" @esc="cancel()"> <div :class="$style.root"> <div v-if="icon" :class="$style.icon"> <i :class="icon"></i> @@ -36,7 +36,12 @@ SPDX-License-Identifier: AGPL-3.0-only </MkInput> <MkSelect v-if="select" v-model="selectedValue" autofocus> <template v-if="select.items"> - <option v-for="item in select.items" :value="item.value">{{ item.text }}</option> + <template v-for="item in select.items"> + <optgroup v-if="'sectionTitle' in item" :label="item.sectionTitle"> + <option v-for="subItem in item.items" :value="subItem.value">{{ subItem.text }}</option> + </optgroup> + <option v-else :value="item.value">{{ item.text }}</option> + </template> </template> </MkSelect> <div v-if="(showOkButton || showCancelButton) && !actions" :class="$style.buttons"> @@ -51,7 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { onBeforeUnmount, onMounted, ref, shallowRef, computed } from 'vue'; +import { ref, shallowRef, computed } from 'vue'; import MkModal from '@/components/MkModal.vue'; import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/MkInput.vue'; @@ -67,11 +72,16 @@ type Input = { maxLength?: number; }; +type SelectItem = { + value: any; + text: string; +}; + type Select = { - items: { - value: any; - text: string; - }[]; + items: (SelectItem | { + sectionTitle: string; + items: SelectItem[]; + })[]; default: string | null; }; @@ -156,10 +166,6 @@ function onBgClick() { if (props.cancelableByBgClick) cancel(); } */ -function onKeydown(evt: KeyboardEvent) { - if (evt.key === 'Escape') cancel(); -} - function onInputKeydown(evt: KeyboardEvent) { if (evt.key === 'Enter' && okButtonDisabledReason.value === null) { evt.preventDefault(); @@ -167,14 +173,6 @@ function onInputKeydown(evt: KeyboardEvent) { ok(); } } - -onMounted(() => { - document.addEventListener('keydown', onKeydown); -}); - -onBeforeUnmount(() => { - document.removeEventListener('keydown', onKeydown); -}); </script> <style lang="scss" module> diff --git a/packages/frontend/src/components/MkDivider.stories.impl.ts b/packages/frontend/src/components/MkDivider.stories.impl.ts new file mode 100644 index 0000000000..a593111987 --- /dev/null +++ b/packages/frontend/src/components/MkDivider.stories.impl.ts @@ -0,0 +1,7 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import MkDivider from './MkDivider.vue'; +void MkDivider; diff --git a/packages/frontend/src/components/MkDivider.vue b/packages/frontend/src/components/MkDivider.vue new file mode 100644 index 0000000000..e4e3af99e4 --- /dev/null +++ b/packages/frontend/src/components/MkDivider.vue @@ -0,0 +1,32 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<div + class="default" :style="[ + marginTopBottom ? { marginTop: marginTopBottom, marginBottom: marginTopBottom } : {}, + marginLeftRight ? { marginLeft: marginLeftRight, marginRight: marginLeftRight } : {}, + borderStyle ? { borderStyle: borderStyle } : {}, + borderWidth ? { borderWidth: borderWidth } : {}, + borderColor ? { borderColor: borderColor } : {}, + ]" +/> +</template> + +<script setup lang="ts"> +defineProps<{ + marginTopBottom?: string; + marginLeftRight?: string; + borderStyle?: string; + borderWidth?: string; + borderColor?: string; +}>(); +</script> + +<style scoped lang="scss"> +.default { + border-top: solid 0.5px var(--divider); +} +</style> diff --git a/packages/frontend/src/components/MkDonation.stories.impl.ts b/packages/frontend/src/components/MkDonation.stories.impl.ts new file mode 100644 index 0000000000..27d6b7df6c --- /dev/null +++ b/packages/frontend/src/components/MkDonation.stories.impl.ts @@ -0,0 +1,54 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { action } from '@storybook/addon-actions'; +import { StoryObj } from '@storybook/vue3'; +import { onBeforeUnmount } from 'vue'; +import MkDonation from './MkDonation.vue'; +import { instance } from '@/instance.js'; +export const Default = { + render(args) { + return { + components: { + MkDonation, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + events() { + return { + closed: action('closed'), + }; + }, + }, + template: '<MkDonation v-bind="props" v-on="events" />', + }; + }, + args: { + // @ts-expect-error name is used for mocking instance + name: 'Misskey Hub', + }, + decorators: [ + (_, { args }) => ({ + setup() { + // @ts-expect-error name is used for mocking instance + instance.name = args.name; + onBeforeUnmount(() => instance.name = null); + }, + template: '<story/>', + }), + ], + parameters: { + layout: 'centered', + }, +} satisfies StoryObj<typeof MkDonation>; diff --git a/packages/frontend/src/components/MkDrive.file.stories.impl.ts b/packages/frontend/src/components/MkDrive.file.stories.impl.ts new file mode 100644 index 0000000000..5f6e6a0667 --- /dev/null +++ b/packages/frontend/src/components/MkDrive.file.stories.impl.ts @@ -0,0 +1,48 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { action } from '@storybook/addon-actions'; +import { StoryObj } from '@storybook/vue3'; +import MkDrive_file from './MkDrive.file.vue'; +import { file } from '../../.storybook/fakes.js'; +export const Default = { + render(args) { + return { + components: { + MkDrive_file, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + events() { + return { + chosen: action('chosen'), + dragstart: action('dragstart'), + dragend: action('dragend'), + }; + }, + }, + template: '<MkDrive_file v-bind="props" v-on="events" />', + }; + }, + args: { + file: file(), + }, + parameters: { + chromatic: { + // NOTE: ロードが終わるまで待つ + delay: 3000, + }, + layout: 'centered', + }, +} satisfies StoryObj<typeof MkDrive_file>; diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue index 13a2a2126c..20ad2984d8 100644 --- a/packages/frontend/src/components/MkDrive.file.vue +++ b/packages/frontend/src/components/MkDrive.file.vue @@ -119,14 +119,14 @@ function onDragend() { background: rgba(#000, 0.05); > .label { - &:before, - &:after { + &::before, + &::after { background: #0b65a5; } &.red { - &:before, - &:after { + &::before, + &::after { background: #c12113; } } @@ -137,14 +137,14 @@ function onDragend() { background: rgba(#000, 0.1); > .label { - &:before, - &:after { + &::before, + &::after { background: #0b588c; } &.red { - &:before, - &:after { + &::before, + &::after { background: #ce2212; } } @@ -163,8 +163,8 @@ function onDragend() { } > .label { - &:before, - &:after { + &::before, + &::after { display: none; } } @@ -185,8 +185,8 @@ function onDragend() { left: 0; pointer-events: none; - &:before, - &:after { + &::before, + &::after { content: ""; display: block; position: absolute; @@ -194,14 +194,14 @@ function onDragend() { background: #0c7ac9; } - &:before { + &::before { top: 0; left: 57px; width: 28px; height: 8px; } - &:after { + &::after { top: 57px; left: 0; width: 8px; @@ -209,8 +209,8 @@ function onDragend() { } &.red { - &:before, - &:after { + &::before, + &::after { background: #c12113; } } diff --git a/packages/frontend/src/components/MkDrive.folder.stories.impl.ts b/packages/frontend/src/components/MkDrive.folder.stories.impl.ts new file mode 100644 index 0000000000..5f8ef48520 --- /dev/null +++ b/packages/frontend/src/components/MkDrive.folder.stories.impl.ts @@ -0,0 +1,70 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { action } from '@storybook/addon-actions'; +import { StoryObj } from '@storybook/vue3'; +import { http, HttpResponse } from 'msw'; +import * as Misskey from 'misskey-js'; +import MkDrive_folder from './MkDrive.folder.vue'; +import { folder } from '../../.storybook/fakes.js'; +import { commonHandlers } from '../../.storybook/mocks.js'; +export const Default = { + render(args) { + return { + components: { + MkDrive_folder, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + events() { + return { + chosen: action('chosen'), + move: action('move'), + upload: action('upload'), + removeFile: action('removeFile'), + removeFolder: action('removeFolder'), + dragstart: action('dragstart'), + dragend: action('dragend'), + }; + }, + }, + template: '<MkDrive_folder v-bind="props" v-on="events" />', + }; + }, + args: { + folder: folder(), + }, + parameters: { + layout: 'centered', + msw: { + handlers: [ + ...commonHandlers, + http.post('/api/drive/folders/delete', async ({ request }) => { + action('POST /api/drive/folders/delete')(await request.json()); + return HttpResponse.json(undefined, { status: 204 }); + }), + http.post('/api/drive/folders/update', async ({ request }) => { + const req = await request.json() as Misskey.entities.DriveFoldersUpdateRequest; + action('POST /api/drive/folders/update')(req); + return HttpResponse.json({ + ...folder(), + id: req.folderId, + name: req.name ?? folder().name, + parentId: req.parentId ?? folder().parentId, + }); + }), + ], + }, + }, +} satisfies StoryObj<typeof MkDrive_folder>; diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue index 1691e01c4a..3990d0b861 100644 --- a/packages/frontend/src/components/MkDrive.folder.vue +++ b/packages/frontend/src/components/MkDrive.folder.vue @@ -27,7 +27,9 @@ SPDX-License-Identifier: AGPL-3.0-only <p v-if="defaultStore.state.uploadFolder == folder.id" :class="$style.upload"> {{ i18n.ts.uploadFolder }} </p> - <button v-if="selectMode" class="_button" :class="[$style.checkbox, { [$style.checked]: isSelected }]" @click.prevent.stop="checkboxClicked"></button> + <button v-if="selectMode" class="_button" :class="$style.checkboxWrapper" @click.prevent.stop="checkboxClicked"> + <div :class="[$style.checkbox, { [$style.checked]: isSelected }]"></div> + </button> </div> </template> @@ -39,7 +41,7 @@ import { misskeyApi } from '@/scripts/misskey-api.js'; import { i18n } from '@/i18n.js'; import { defaultStore } from '@/store.js'; import { claimAchievement } from '@/scripts/achievements.js'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; import { MenuItem } from '@/types/menu.js'; const props = withDefaults(defineProps<{ @@ -53,6 +55,7 @@ const props = withDefaults(defineProps<{ const emit = defineEmits<{ (ev: 'chosen', v: Misskey.entities.DriveFolder): void; + (ev: 'unchose', v: Misskey.entities.DriveFolder): void; (ev: 'move', v: Misskey.entities.DriveFolder): void; (ev: 'upload', file: File, folder: Misskey.entities.DriveFolder); (ev: 'removeFile', v: Misskey.entities.DriveFile['id']): void; @@ -68,7 +71,11 @@ const isDragging = ref(false); const title = computed(() => props.folder.name); function checkboxClicked() { - emit('chosen', props.folder); + if (props.isSelected) { + emit('unchose', props.folder); + } else { + emit('chosen', props.folder); + } } function onClick() { @@ -222,6 +229,17 @@ function rename() { }); } +function move() { + os.selectDriveFolder(false).then(folder => { + if (folder[0] && folder[0].id === props.folder.id) return; + + misskeyApi('drive/folders/update', { + folderId: props.folder.id, + parentId: folder[0] ? folder[0].id : null, + }); + }); +} + function deleteFolder() { misskeyApi('drive/folders/delete', { folderId: props.folder.id, @@ -257,15 +275,20 @@ function onContextmenu(ev: MouseEvent) { text: i18n.ts.openInWindow, icon: 'ti ti-app-window', action: () => { - os.popup(defineAsyncComponent(() => import('@/components/MkDriveWindow.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkDriveWindow.vue')), { initialFolder: props.folder, }, { - }, 'closed'); + closed: () => dispose(), + }); }, }, { type: 'divider' }, { text: i18n.ts.rename, icon: 'ti ti-forms', action: rename, + }, { + text: i18n.ts.move, + icon: 'ti ti ti-folder-symlink', + action: move, }, { type: 'divider' }, { text: i18n.ts.delete, icon: 'ti ti-trash', @@ -295,7 +318,7 @@ function onContextmenu(ev: MouseEvent) { cursor: pointer; &.draghover { - &:after { + &::after { content: ""; pointer-events: none; position: absolute; @@ -309,17 +332,43 @@ function onContextmenu(ev: MouseEvent) { } } -.checkbox { +.checkboxWrapper { position: absolute; - bottom: 8px; - right: 8px; - width: 16px; - height: 16px; - background: #fff; - border: solid 1px #000; + border-radius: 50%; + bottom: 2px; + right: 2px; + padding: 8px; + box-sizing: border-box; + + > .checkbox { + position: relative; + width: 18px; + height: 18px; + background: #fff; + border: solid 2px var(--divider); + border-radius: 4px; + box-sizing: border-box; + + &.checked { + border-color: var(--accent); + background: var(--accent); + + &::after { + content: "\ea5e"; + font-family: 'tabler-icons'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #fff; + font-size: 12px; + line-height: 22px; + } + } + } - &.checked { - background: var(--accent); + &:hover { + background: var(--accentedBg); } } diff --git a/packages/frontend/src/components/MkDrive.navFolder.stories.impl.ts b/packages/frontend/src/components/MkDrive.navFolder.stories.impl.ts new file mode 100644 index 0000000000..9d49f24fa4 --- /dev/null +++ b/packages/frontend/src/components/MkDrive.navFolder.stories.impl.ts @@ -0,0 +1,7 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import MkDrive_navFolder from './MkDrive.navFolder.vue'; +void MkDrive_navFolder; diff --git a/packages/frontend/src/components/MkDrive.stories.impl.ts b/packages/frontend/src/components/MkDrive.stories.impl.ts new file mode 100644 index 0000000000..fe20e61415 --- /dev/null +++ b/packages/frontend/src/components/MkDrive.stories.impl.ts @@ -0,0 +1,82 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { action } from '@storybook/addon-actions'; +import { StoryObj } from '@storybook/vue3'; +import { http, HttpResponse } from 'msw'; +import * as Misskey from 'misskey-js'; +import MkDrive from './MkDrive.vue'; +import { file, folder } from '../../.storybook/fakes.js'; +import { commonHandlers } from '../../.storybook/mocks.js'; +export const Default = { + render(args) { + return { + components: { + MkDrive, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + events() { + return { + selected: action('selected'), + 'change-selection': action('change-selection'), + 'move-root': action('move-root'), + cd: action('cd'), + 'open-folder': action('open-folder'), + }; + }, + }, + template: '<MkDrive v-bind="props" v-on="events" />', + }; + }, + parameters: { + chromatic: { + // NOTE: ロードが終わるまで待つ + delay: 3000, + }, + layout: 'centered', + msw: { + handlers: [ + ...commonHandlers, + http.post('/api/drive/files', async ({ request }) => { + action('POST /api/drive/files')(await request.json()); + return HttpResponse.json([file()]); + }), + http.post('/api/drive/folders', async ({ request }) => { + action('POST /api/drive/folders')(await request.json()); + return HttpResponse.json([folder(crypto.randomUUID())]); + }), + http.post('/api/drive/folders/create', async ({ request }) => { + const req = await request.json() as Misskey.entities.DriveFoldersCreateRequest; + action('POST /api/drive/folders/create')(req); + return HttpResponse.json(folder(crypto.randomUUID(), req.name, req.parentId)); + }), + http.post('/api/drive/folders/delete', async ({ request }) => { + action('POST /api/drive/folders/delete')(await request.json()); + return HttpResponse.json(undefined, { status: 204 }); + }), + http.post('/api/drive/folders/update', async ({ request }) => { + const req = await request.json() as Misskey.entities.DriveFoldersUpdateRequest; + action('POST /api/drive/folders/update')(req); + return HttpResponse.json({ + ...folder(), + id: req.folderId, + name: req.name ?? folder().name, + parentId: req.parentId ?? folder().parentId, + }); + }), + ] + }, + }, +} satisfies StoryObj<typeof MkDrive>; diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue index 222fabb8f4..2d1c7c95f0 100644 --- a/packages/frontend/src/components/MkDrive.vue +++ b/packages/frontend/src/components/MkDrive.vue @@ -59,6 +59,7 @@ SPDX-License-Identifier: AGPL-3.0-only :selectMode="select === 'folder'" :isSelected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder" + @unchose="unchoseFolder" @move="move" @upload="upload" @removeFile="removeFile" @@ -438,6 +439,11 @@ function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) { } } +function unchoseFolder(folderToUnchose: Misskey.entities.DriveFolder) { + selectedFolders.value = selectedFolders.value.filter(f => f.id !== folderToUnchose.id); + emit('change-selection', selectedFolders.value); +} + function move(target?: Misskey.entities.DriveFolder | Misskey.entities.DriveFolder['id' | 'parentId']) { if (!target) { goRoot(); diff --git a/packages/frontend/src/components/MkDriveFileThumbnail.stories.impl.ts b/packages/frontend/src/components/MkDriveFileThumbnail.stories.impl.ts new file mode 100644 index 0000000000..3fa24d7edb --- /dev/null +++ b/packages/frontend/src/components/MkDriveFileThumbnail.stories.impl.ts @@ -0,0 +1,41 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { StoryObj } from '@storybook/vue3'; +import MkDriveFileThumbnail from './MkDriveFileThumbnail.vue'; +import { file } from '../../.storybook/fakes.js'; +export const Default = { + render(args) { + return { + components: { + MkDriveFileThumbnail, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + }, + template: '<MkDriveFileThumbnail v-bind="props" />', + }; + }, + args: { + file: file(), + fit: 'contain', + }, + parameters: { + chromatic: { + // NOTE: ロードが終わるまで待つ + delay: 3000, + }, + layout: 'centered', + }, +} satisfies StoryObj<typeof MkDriveFileThumbnail>; diff --git a/packages/frontend/src/components/MkDriveFileThumbnail.vue b/packages/frontend/src/components/MkDriveFileThumbnail.vue index 65c3ea1f01..9a6d272113 100644 --- a/packages/frontend/src/components/MkDriveFileThumbnail.vue +++ b/packages/frontend/src/components/MkDriveFileThumbnail.vue @@ -26,7 +26,7 @@ import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue'; const props = defineProps<{ file: Misskey.entities.DriveFile; - fit: string; + fit: 'cover' | 'contain'; }>(); const is = computed(() => { diff --git a/packages/frontend/src/components/MkDriveSelectDialog.stories.impl.ts b/packages/frontend/src/components/MkDriveSelectDialog.stories.impl.ts new file mode 100644 index 0000000000..fe8f705165 --- /dev/null +++ b/packages/frontend/src/components/MkDriveSelectDialog.stories.impl.ts @@ -0,0 +1,7 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import MkDriveSelectDialog from './MkDriveSelectDialog.vue'; +void MkDriveSelectDialog; diff --git a/packages/frontend/src/components/MkDriveWindow.stories.impl.ts b/packages/frontend/src/components/MkDriveWindow.stories.impl.ts new file mode 100644 index 0000000000..faa1f7fd5f --- /dev/null +++ b/packages/frontend/src/components/MkDriveWindow.stories.impl.ts @@ -0,0 +1,7 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import MkDriveWindow from './MkDriveWindow.vue'; +void MkDriveWindow; diff --git a/packages/frontend/src/components/MkEmojiPicker.section.stories.impl.ts b/packages/frontend/src/components/MkEmojiPicker.section.stories.impl.ts new file mode 100644 index 0000000000..69aef577de --- /dev/null +++ b/packages/frontend/src/components/MkEmojiPicker.section.stories.impl.ts @@ -0,0 +1,7 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import MkEmojiPicker_section from './MkEmojiPicker.section.vue'; +void MkEmojiPicker_section; diff --git a/packages/frontend/src/components/MkEmojiPicker.stories.impl.ts b/packages/frontend/src/components/MkEmojiPicker.stories.impl.ts new file mode 100644 index 0000000000..d38d8de808 --- /dev/null +++ b/packages/frontend/src/components/MkEmojiPicker.stories.impl.ts @@ -0,0 +1,54 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { action } from '@storybook/addon-actions'; +import { expect, userEvent, waitFor, within } from '@storybook/test'; +import { StoryObj } from '@storybook/vue3'; +import { i18n } from '@/i18n.js'; +import MkEmojiPicker from './MkEmojiPicker.vue'; +export const Default = { + render(args) { + return { + components: { + MkEmojiPicker, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + events() { + return { + chosen: action('chosen'), + }; + }, + }, + template: '<MkEmojiPicker v-bind="props" v-on="events" />', + }; + }, + async play({ canvasElement }) { + const canvas = within(canvasElement); + const faceSection = canvas.getByText(/face/i); + await waitFor(() => userEvent.click(faceSection)); + const grinning = canvasElement.querySelector('[data-emoji="😀"]'); + await expect(grinning).toBeInTheDocument(); + if (grinning == null) throw new Error(); // NOTE: not called + await waitFor(() => userEvent.click(grinning)); + const recentUsedSection = canvas.getByText(new RegExp(i18n.ts.recentUsed)).parentElement; + await expect(recentUsedSection).toBeInTheDocument(); + if (recentUsedSection == null) throw new Error(); // NOTE: not called + await expect(within(recentUsedSection).getByAltText('😀')).toBeInTheDocument(); + await expect(within(recentUsedSection).queryByAltText('😬')).toEqual(null); + }, + parameters: { + layout: 'centered', + }, +} satisfies StoryObj<typeof MkEmojiPicker>; diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue index 5bceb39d76..297d5f899e 100644 --- a/packages/frontend/src/components/MkEmojiPicker.vue +++ b/packages/frontend/src/components/MkEmojiPicker.vue @@ -5,7 +5,19 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <div class="omfetrab" :class="['s' + size, 'w' + width, 'h' + height, { asDrawer, asWindow }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }"> - <input ref="searchEl" :value="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" autocapitalize="off" @input="input()" @paste.stop="paste" @keydown.stop.prevent.enter="onEnter"> + <input + ref="searchEl" + :value="q" + class="search" + data-prevent-emoji-insert + :class="{ filled: q != null && q != '' }" + :placeholder="i18n.ts.search" + type="search" + autocapitalize="off" + @input="input()" + @paste.stop="paste" + @keydown="onKeydown" + > <!-- FirefoxのTabフォーカスが想定外の挙動となるためtabindex="-1"を追加 https://github.com/misskey-dev/misskey/issues/10744 --> <div ref="emojisEl" class="emojis" tabindex="-1"> <section class="result"> @@ -139,6 +151,7 @@ const props = withDefaults(defineProps<{ const emit = defineEmits<{ (ev: 'chosen', v: string): void; + (ev: 'esc'): void; }>(); const searchEl = shallowRef<HTMLInputElement>(); @@ -402,7 +415,9 @@ function chosen(emoji: any, ev?: MouseEvent) { const rect = el.getBoundingClientRect(); const x = rect.left + (el.offsetWidth / 2); const y = rect.top + (el.offsetHeight / 2); - os.popup(MkRippleEffect, { x, y }, {}, 'end'); + const { dispose } = os.popup(MkRippleEffect, { x, y }, { + end: () => dispose(), + }); } const key = getKey(emoji); @@ -431,9 +446,18 @@ function paste(event: ClipboardEvent): void { } } -function onEnter(ev: KeyboardEvent) { +function onKeydown(ev: KeyboardEvent) { if (ev.isComposing || ev.key === 'Process' || ev.keyCode === 229) return; - done(); + if (ev.key === 'Enter') { + ev.preventDefault(); + ev.stopPropagation(); + done(); + } + if (ev.key === 'Escape') { + ev.preventDefault(); + ev.stopPropagation(); + emit('esc'); + } } function done(query?: string): boolean | void { @@ -700,11 +724,6 @@ defineExpose({ border-radius: var(--radius-xs); font-size: 24px; - &:focus-visible { - outline: solid 2px var(--focus); - z-index: 1; - } - &:hover { background: rgba(0, 0, 0, 0.05); } diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.stories.impl.ts b/packages/frontend/src/components/MkEmojiPickerDialog.stories.impl.ts new file mode 100644 index 0000000000..131087ad45 --- /dev/null +++ b/packages/frontend/src/components/MkEmojiPickerDialog.stories.impl.ts @@ -0,0 +1,7 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import MkEmojiPickerDialog from './MkEmojiPickerDialog.vue'; +void MkEmojiPickerDialog; diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue index c6b3896989..0ec0679393 100644 --- a/packages/frontend/src/components/MkEmojiPickerDialog.vue +++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue @@ -9,10 +9,12 @@ SPDX-License-Identifier: AGPL-3.0-only v-slot="{ type, maxHeight }" :zPriority="'middle'" :preferType="defaultStore.state.emojiPickerUseDrawerForMobile === false ? 'popup' : 'auto'" + :hasInteractionWithOtherFocusTrappedEls="true" :transparentBg="true" :manualShowing="manualShowing" :src="src" @click="modal?.close()" + @esc="modal?.close()" @opening="opening" @close="emit('close')" @closed="emit('closed')" @@ -28,6 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only :asDrawer="type === 'drawer'" :max-height="maxHeight" @chosen="chosen" + @esc="modal?.close()" /> </MkModal> </template> diff --git a/packages/frontend/src/components/MkFlashPreview.vue b/packages/frontend/src/components/MkFlashPreview.vue index c5dd877971..6783804cc5 100644 --- a/packages/frontend/src/components/MkFlashPreview.vue +++ b/packages/frontend/src/components/MkFlashPreview.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<MkA :to="`/play/${flash.id}`" class="vhpxefrk _panel" tabindex="-1"> +<MkA :to="`/play/${flash.id}`" class="vhpxefrk _panel"> <article> <header> <h1 :title="flash.title">{{ flash.title }}</h1> @@ -39,6 +39,10 @@ const props = defineProps<{ color: var(--accent); } + &:focus-visible { + outline-offset: -2px; + } + > article { padding: 16px; diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue index dbe3db9eac..229cd59056 100644 --- a/packages/frontend/src/components/MkFolder.vue +++ b/packages/frontend/src/components/MkFolder.vue @@ -7,10 +7,10 @@ SPDX-License-Identifier: AGPL-3.0-only <div ref="rootEl" :class="$style.root" role="group" :aria-expanded="opened"> <MkStickyContainer> <template #header> - <div :class="[$style.header, { [$style.opened]: opened }]" class="_button" role="button" data-cy-folder-header @click="toggle"> + <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> <div :class="$style.headerText"> - <div> + <div :class="$style.headerTextMain"> <MkCondensedLine :minScale="2 / 3"><slot name="label"></slot></MkCondensedLine> </div> <div :class="$style.headerTextSub"> @@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only <i v-if="opened" class="ti ti-chevron-up icon"></i> <i v-else class="ti ti-chevron-down icon"></i> </div> - </div> + </button> </template> <div v-if="openedAtLeastOnce" :class="[$style.body, { [$style.bgSame]: bgSame }]" :style="{ maxHeight: maxHeight ? `${maxHeight}px` : undefined, overflow: maxHeight ? `auto` : undefined }" :aria-hidden="!opened"> @@ -147,6 +147,10 @@ onMounted(() => { background: var(--buttonHoverBg); } + &:focus-within { + outline-offset: 2px; + } + &.active { color: var(--accent); background: var(--buttonHoverBg); @@ -190,6 +194,12 @@ onMounted(() => { padding-right: 12px; } +.headerTextMain, +.headerTextSub { + width: fit-content; + max-width: 100%; +} + .headerTextSub { color: var(--fgTransparentWeak); font-size: .85em; diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue index ba0527e570..3fdf673eb3 100644 --- a/packages/frontend/src/components/MkFollowButton.vue +++ b/packages/frontend/src/components/MkFollowButton.vue @@ -42,6 +42,8 @@ import { misskeyApi } from '@/scripts/misskey-api.js'; import { useStream } from '@/stream.js'; import { i18n } from '@/i18n.js'; import { claimAchievement } from '@/scripts/achievements.js'; +import { pleaseLogin } from '@/scripts/please-login.js'; +import { host } from '@/config.js'; import { $i } from '@/account.js'; import { defaultStore } from '@/store.js'; @@ -63,7 +65,7 @@ const hasPendingFollowRequestFromYou = ref(props.user.hasPendingFollowRequestFro const wait = ref(false); const connection = useStream().useChannel('main'); -if (props.user.isFollowing == null) { +if (props.user.isFollowing == null && $i) { misskeyApi('users/show', { userId: props.user.id, }) @@ -78,6 +80,8 @@ function onFollowChange(user: Misskey.entities.UserDetailed) { } async function onClick() { + pleaseLogin(undefined, { type: 'web', path: `/@${props.user.username}@${props.user.host ?? host}` }); + wait.value = true; try { @@ -121,6 +125,8 @@ async function onClick() { }); hasPendingFollowRequestFromYou.value = true; + if ($i == null) return; + claimAchievement('following1'); if ($i.followingCount >= 10) { @@ -183,17 +189,7 @@ onBeforeUnmount(() => { } &:focus-visible { - &:after { - content: ""; - pointer-events: none; - position: absolute; - top: -5px; - right: -5px; - bottom: -5px; - left: -5px; - border: 2px solid var(--focus); - border-radius: var(--radius-xl); - } + outline-offset: 2px; } &:hover { diff --git a/packages/frontend/src/components/MkGalleryPostPreview.vue b/packages/frontend/src/components/MkGalleryPostPreview.vue index 47cccd9b7c..2bb5b8762a 100644 --- a/packages/frontend/src/components/MkGalleryPostPreview.vue +++ b/packages/frontend/src/components/MkGalleryPostPreview.vue @@ -83,7 +83,7 @@ function leaveHover(): void { > article { > footer { - &:before { + &::before { opacity: 1; } } @@ -139,7 +139,7 @@ function leaveHover(): void { text-shadow: 0 0 8px #000; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); - &:before { + &::before { content: ""; display: block; position: absolute; diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue index 4e3fafe845..8d301f16bd 100644 --- a/packages/frontend/src/components/MkImgWithBlurhash.vue +++ b/packages/frontend/src/components/MkImgWithBlurhash.vue @@ -14,8 +14,8 @@ SPDX-License-Identifier: AGPL-3.0-only :enterToClass="defaultStore.state.animation && props.transition?.enterToClass || undefined" :leaveFromClass="defaultStore.state.animation && props.transition?.leaveFromClass || undefined" > - <canvas v-show="hide" key="canvas" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/> - <img v-show="!hide" key="img" ref="img" :height="imgHeight" :width="imgWidth" :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager" decoding="async"/> + <canvas v-show="hide" key="canvas" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined" tabindex="-1"/> + <img v-show="!hide" key="img" ref="img" :height="imgHeight ?? undefined" :width="imgWidth ?? undefined" :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager" decoding="async" tabindex="-1"/> </TransitionGroup> </div> </template> @@ -151,22 +151,26 @@ function drawImage(bitmap: CanvasImageSource) { } function drawAvg() { - if (!canvas.value || !props.hash) return; + if (!canvas.value) return; + + const color = (props.hash != null && extractAvgColorFromBlurhash(props.hash)) || '#888'; const ctx = canvas.value.getContext('2d'); if (!ctx) return; // avgColorでお茶をにごす ctx.beginPath(); - ctx.fillStyle = extractAvgColorFromBlurhash(props.hash) ?? '#888'; + ctx.fillStyle = color; ctx.fillRect(0, 0, canvasWidth.value, canvasHeight.value); } async function draw() { - if (props.hash == null) return; + if (import.meta.env.MODE === 'test' && props.hash == null) return; drawAvg(); + if (props.hash == null) return; + if (props.onlyAvgColor) return; const work = await canvasPromise; diff --git a/packages/frontend/src/components/MkInput.vue b/packages/frontend/src/components/MkInput.vue index 064d203621..06389b4013 100644 --- a/packages/frontend/src/components/MkInput.vue +++ b/packages/frontend/src/components/MkInput.vue @@ -79,7 +79,7 @@ const props = defineProps<{ const emit = defineEmits<{ (ev: 'change', _ev: KeyboardEvent): void; (ev: 'keydown', _ev: KeyboardEvent): void; - (ev: 'enter'): void; + (ev: 'enter', _ev: KeyboardEvent): void; (ev: 'update:modelValue', value: string | number): void; }>(); @@ -111,7 +111,7 @@ const onKeydown = (ev: KeyboardEvent) => { emit('keydown', ev); if (ev.code === 'Enter') { - emit('enter'); + emit('enter', ev); } }; diff --git a/packages/frontend/src/components/MkInstanceCardMini.stories.impl.ts b/packages/frontend/src/components/MkInstanceCardMini.stories.impl.ts new file mode 100644 index 0000000000..9e8de9d878 --- /dev/null +++ b/packages/frontend/src/components/MkInstanceCardMini.stories.impl.ts @@ -0,0 +1,65 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +import { StoryObj } from '@storybook/vue3'; +import { HttpResponse, http } from 'msw'; +import { federationInstance } from '../../.storybook/fakes.js'; +import { commonHandlers } from '../../.storybook/mocks.js'; +import { getChartResolver } from '../../.storybook/charts.js'; +import MkInstanceCardMini from './MkInstanceCardMini.vue'; + +export const Default = { + render(args) { + return { + components: { + MkInstanceCardMini, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + }, + template: '<MkInstanceCardMini v-bind="props" />', + }; + }, + args: { + instance: federationInstance(), + }, + parameters: { + layout: 'centered', + msw: { + handlers: [ + ...commonHandlers, + http.get('/undefined/preview.webp', async ({ request }) => { + const urlStr = new URL(request.url).searchParams.get('url'); + if (urlStr == null) { + return new HttpResponse(null, { status: 404 }); + } + const url = new URL(urlStr); + + if (url.href.startsWith('https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/')) { + const image = await (await fetch(`client-assets/${url.pathname.split('/').pop()}`)).blob(); + return new HttpResponse(image, { + headers: { + 'Content-Type': 'image/jpeg', + }, + }); + } else { + return new HttpResponse(null, { status: 404 }); + } + }), + http.get('/api/charts/instance', getChartResolver(['requests.received'])), + ], + }, + }, +} satisfies StoryObj<typeof MkInstanceCardMini>; diff --git a/packages/frontend/src/components/MkInstanceCardMini.vue b/packages/frontend/src/components/MkInstanceCardMini.vue index feb62415aa..10b390e7f9 100644 --- a/packages/frontend/src/components/MkInstanceCardMini.vue +++ b/packages/frontend/src/components/MkInstanceCardMini.vue @@ -29,8 +29,8 @@ const chartValues = ref<number[] | null>(null); misskeyApiGet('charts/instance', { host: props.instance.host, limit: 16 + 1, span: 'day' }).then(res => { // 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く - res['requests.received'].splice(0, 1); - chartValues.value = res['requests.received']; + res.requests.received.splice(0, 1); + chartValues.value = res.requests.received; }); function getInstanceIcon(instance): string { diff --git a/packages/frontend/src/components/MkInviteCode.vue b/packages/frontend/src/components/MkInviteCode.vue index 1c6f412dc1..de51a98789 100644 --- a/packages/frontend/src/components/MkInviteCode.vue +++ b/packages/frontend/src/components/MkInviteCode.vue @@ -62,7 +62,7 @@ import { computed } from 'vue'; import * as Misskey from 'misskey-js'; import MkFolder from '@/components/MkFolder.vue'; import MkButton from '@/components/MkButton.vue'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; import { i18n } from '@/i18n.js'; import * as os from '@/os.js'; diff --git a/packages/frontend/src/components/MkKeyValue.vue b/packages/frontend/src/components/MkKeyValue.vue index 20b1ef2be2..50c9e16e5e 100644 --- a/packages/frontend/src/components/MkKeyValue.vue +++ b/packages/frontend/src/components/MkKeyValue.vue @@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only <script lang="ts" setup> import { } from 'vue'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; import * as os from '@/os.js'; import { i18n } from '@/i18n.js'; diff --git a/packages/frontend/src/components/MkLaunchPad.vue b/packages/frontend/src/components/MkLaunchPad.vue index e232b4d66f..e0880ec3e7 100644 --- a/packages/frontend/src/components/MkLaunchPad.vue +++ b/packages/frontend/src/components/MkLaunchPad.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<MkModal ref="modal" v-slot="{ type, maxHeight }" :preferType="preferedModalType" :anchor="anchor" :transparentBg="true" :src="src" @click="modal?.close()" @closed="emit('closed')"> +<MkModal ref="modal" v-slot="{ type, maxHeight }" :preferType="preferedModalType" :anchor="anchor" :transparentBg="true" :src="src" @click="modal?.close()" @closed="emit('closed')" @esc="modal?.close()"> <div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }"> <div class="main"> <template v-for="item in items" :key="item.text"> diff --git a/packages/frontend/src/components/MkLink.vue b/packages/frontend/src/components/MkLink.vue index 18a979a157..07cf9e0c37 100644 --- a/packages/frontend/src/components/MkLink.vue +++ b/packages/frontend/src/components/MkLink.vue @@ -38,11 +38,13 @@ const el = ref<HTMLElement | { $el: HTMLElement }>(); if (isEnabledUrlPreview.value) { useTooltip(el, (showing) => { - os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), { showing, url: props.url, source: el.value instanceof HTMLElement ? el.value : el.value?.$el, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); }); } </script> diff --git a/packages/frontend/src/components/MkMediaAudio.vue b/packages/frontend/src/components/MkMediaAudio.vue index 3b5d50315e..93affd930f 100644 --- a/packages/frontend/src/components/MkMediaAudio.vue +++ b/packages/frontend/src/components/MkMediaAudio.vue @@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only @contextmenu.stop @keydown.stop > - <button v-if="hide" :class="$style.hidden" @click="hide = false"> + <button v-if="hide" :class="$style.hidden" @click="show"> <div :class="$style.hiddenTextWrapper"> <b v-if="audio.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.dataSaver.media ? ` (${i18n.ts.audio}${audio.size ? ' ' + bytes(audio.size) : ''})` : '' }}</b> <b v-else style="display: block;"><i class="ti ti-music"></i> {{ defaultStore.state.dataSaver.media && audio.size ? bytes(audio.size) : i18n.ts.audio }}</b> @@ -39,11 +39,16 @@ SPDX-License-Identifier: AGPL-3.0-only <audio ref="audioEl" preload="metadata" + @keydown.prevent="() => {}" > <source :src="audio.url"> </audio> <div :class="[$style.controlsChild, $style.controlsLeft]"> - <button class="_button" :class="$style.controlButton" @click="togglePlayPause"> + <button + :class="['_button', $style.controlButton]" + tabindex="-1" + @click.stop="togglePlayPause" + > <i v-if="isPlaying" class="ti ti-player-pause-filled"></i> <i v-else class="ti ti-player-play-filled"></i> </button> @@ -52,13 +57,22 @@ SPDX-License-Identifier: AGPL-3.0-only <a class="_button" :class="$style.controlButton" :href="audio.url" :download="audio.name" target="_blank"> <i class="ph-download ph-bold ph-lg"></i> </a> - <button class="_button" :class="$style.controlButton" @click="showMenu"> + <button + :class="['_button', $style.controlButton]" + tabindex="-1" + @click.stop="() => {}" + @mousedown.prevent.stop="showMenu" + > <i class="ti ti-settings"></i> </button> </div> <div :class="[$style.controlsChild, $style.controlsTime]">{{ hms(elapsedTimeMs) }}</div> <div :class="[$style.controlsChild, $style.controlsVolume]"> - <button class="_button" :class="$style.controlButton" @click="toggleMute"> + <button + :class="['_button', $style.controlButton]" + tabindex="-1" + @click.stop="toggleMute" + > <i v-if="volume === 0" class="ti ti-volume-3"></i> <i v-else class="ti ti-volume"></i> </button> @@ -83,6 +97,7 @@ import type { MenuItem } from '@/types/menu.js'; import { defaultStore } from '@/store.js'; import { i18n } from '@/i18n.js'; import * as os from '@/os.js'; +import { type Keymap } from '@/scripts/hotkey.js'; import bytes from '@/filters/bytes.js'; import { hms } from '@/filters/hms.js'; import MkMediaRange from '@/components/MkMediaRange.vue'; @@ -93,32 +108,44 @@ const props = defineProps<{ }>(); const keymap = { - 'up': () => { - if (hasFocus() && audioEl.value) { - volume.value = Math.min(volume.value + 0.1, 1); - } + 'up': { + allowRepeat: true, + callback: () => { + if (hasFocus() && audioEl.value) { + volume.value = Math.min(volume.value + 0.1, 1); + } + }, }, - 'down': () => { - if (hasFocus() && audioEl.value) { - volume.value = Math.max(volume.value - 0.1, 0); - } + 'down': { + allowRepeat: true, + callback: () => { + if (hasFocus() && audioEl.value) { + volume.value = Math.max(volume.value - 0.1, 0); + } + }, }, - 'left': () => { - if (hasFocus() && audioEl.value) { - audioEl.value.currentTime = Math.max(audioEl.value.currentTime - 5, 0); - } + 'left': { + allowRepeat: true, + callback: () => { + if (hasFocus() && audioEl.value) { + audioEl.value.currentTime = Math.max(audioEl.value.currentTime - 5, 0); + } + }, }, - 'right': () => { - if (hasFocus() && audioEl.value) { - audioEl.value.currentTime = Math.min(audioEl.value.currentTime + 5, audioEl.value.duration); - } + 'right': { + allowRepeat: true, + callback: () => { + if (hasFocus() && audioEl.value) { + audioEl.value.currentTime = Math.min(audioEl.value.currentTime + 5, audioEl.value.duration); + } + }, }, 'space': () => { if (hasFocus()) { togglePlayPause(); } }, -}; +} as const satisfies Keymap; // PlayerElもしくはその子要素にフォーカスがあるかどうか function hasFocus() { @@ -129,9 +156,21 @@ function hasFocus() { const playerEl = shallowRef<HTMLDivElement>(); const audioEl = shallowRef<HTMLAudioElement>(); -// eslint-disable-next-line vue/no-setup-props-destructure +// eslint-disable-next-line vue/no-setup-props-reactivity-loss const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.audio.isSensitive && defaultStore.state.nsfw !== 'ignore')); +async function show() { + if (props.audio.isSensitive && defaultStore.state.confirmWhenRevealingSensitiveMedia) { + const { canceled } = await os.confirm({ + type: 'question', + text: i18n.ts.sensitiveMediaRevealConfirm, + }); + if (canceled) return; + } + + hide.value = false; +} + // Menu const menuShowing = ref(false); @@ -361,7 +400,7 @@ onDeactivated(() => { border-radius: var(--radius); overflow: clip; - &:focus { + &:focus-visible { outline: none; } } @@ -427,6 +466,10 @@ onDeactivated(() => { color: var(--accent); background-color: var(--accentedBg); } + + &:focus-visible { + outline: none; + } } } diff --git a/packages/frontend/src/components/MkMediaBanner.vue b/packages/frontend/src/components/MkMediaBanner.vue index 78979b3f47..ed8d43273f 100644 --- a/packages/frontend/src/components/MkMediaBanner.vue +++ b/packages/frontend/src/components/MkMediaBanner.vue @@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <div :class="$style.root"> - <div v-if="media.isSensitive && hide" :class="$style.sensitive" @click="hide = false"> + <div v-if="media.isSensitive && hide" :class="$style.sensitive" @click="show"> <span style="font-size: 1.6em;"><i class="ti ti-alert-triangle"></i></span> <b>{{ i18n.ts.sensitive }}</b> <span>{{ i18n.ts.clickToShow }}</span> @@ -24,24 +24,30 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { shallowRef, watch, ref } from 'vue'; +import { ref } from 'vue'; import * as Misskey from 'misskey-js'; import { i18n } from '@/i18n.js'; +import { defaultStore } from '@/store.js'; +import * as os from '@/os.js'; import MkMediaAudio from '@/components/MkMediaAudio.vue'; -const props = withDefaults(defineProps<{ +const props = defineProps<{ media: Misskey.entities.DriveFile; -}>(), { -}); +}>(); -const audioEl = shallowRef<HTMLAudioElement>(); const hide = ref(true); -watch(audioEl, () => { - if (audioEl.value) { - audioEl.value.volume = 0.3; +async function show() { + if (props.media.isSensitive && defaultStore.state.confirmWhenRevealingSensitiveMedia) { + const { canceled } = await os.confirm({ + type: 'question', + text: i18n.ts.sensitiveMediaRevealConfirm, + }); + if (canceled) return; } -}); + + hide.value = false; +} </script> <style lang="scss" module> diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue index e55bb1effb..cac419d42b 100644 --- a/packages/frontend/src/components/MkMediaImage.vue +++ b/packages/frontend/src/components/MkMediaImage.vue @@ -84,11 +84,21 @@ const url = computed(() => (props.raw || defaultStore.state.loadRawImages) : props.image.thumbnailUrl, ); -function onclick() { +async function onclick(ev: MouseEvent) { if (!props.controls) { return; } + if (hide.value) { + ev.stopPropagation(); + if (props.image.isSensitive && defaultStore.state.confirmWhenRevealingSensitiveMedia) { + const { canceled } = await os.confirm({ + type: 'question', + text: i18n.ts.sensitiveMediaRevealConfirm, + }); + if (canceled) return; + } + hide.value = false; } } diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue index 112a84f1fd..9e78b69574 100644 --- a/packages/frontend/src/components/MkMediaList.vue +++ b/packages/frontend/src/components/MkMediaList.vue @@ -41,6 +41,7 @@ import XModPlayer from '@/components/SkModPlayer.vue'; import * as os from '@/os.js'; import { FILE_TYPE_BROWSERSAFE, FILE_EXT_TRACKER_MODULES, FILE_TYPE_TRACKER_MODULES } from '@/const.js'; import { defaultStore } from '@/store.js'; +import { focusParent } from '@/scripts/focus.js'; const props = defineProps<{ mediaList: Misskey.entities.DriveFile[]; @@ -51,7 +52,9 @@ const gallery = shallowRef<HTMLDivElement>(); const pswpZIndex = os.claimZIndex('middle'); document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString()); const count = computed(() => props.mediaList.filter(media => previewable(media)).length); -let lightbox: PhotoSwipeLightbox | null; +let lightbox: PhotoSwipeLightbox | null = null; + +let activeEl: HTMLElement | null = null; const popstateHandler = (): void => { if (lightbox?.pswp && lightbox.pswp.isOpen === true) { @@ -62,7 +65,7 @@ const popstateHandler = (): void => { async function calcAspectRatio() { if (!gallery.value) return; - let img = props.mediaList[0]; + const img = props.mediaList[0]; if (props.mediaList.length !== 1 || !(img.properties.width && img.properties.height)) { gallery.value.style.aspectRatio = ''; @@ -139,18 +142,17 @@ onMounted(() => { bgOpacity: 1, showAnimationDuration: 100, hideAnimationDuration: 100, + returnFocus: false, pswpModule: PhotoSwipe, }); - lightbox.on('itemData', (ev) => { - const { itemData } = ev; - + lightbox.addFilter('itemData', (itemData) => { // element is children const { element } = itemData; const id = element?.dataset.id; const file = props.mediaList.find(media => media.id === id); - if (!file) return; + if (!file) return itemData; itemData.src = file.url; itemData.w = Number(file.properties.width); @@ -162,19 +164,21 @@ onMounted(() => { itemData.alt = file.comment ?? undefined; itemData.comment = file.comment; itemData.thumbCropped = true; + + return itemData; }); lightbox.on('uiRegister', () => { lightbox?.pswp?.ui?.registerElement({ name: 'altText', - className: 'pwsp__alt-text-container', + className: 'pswp__alt-text-container', appendTo: 'wrapper', - onInit: (el, pwsp) => { - let textBox = document.createElement('p'); - textBox.className = 'pwsp__alt-text _acrylic'; + onInit: (el, pswp) => { + const textBox = document.createElement('p'); + textBox.className = 'pswp__alt-text _acrylic'; el.appendChild(textBox); - pwsp.on('change', (a) => { + pwsp.on('change', () => { if (pwsp.currSlide?.data.comment) { textBox.style.display = ''; } else { @@ -187,25 +191,33 @@ onMounted(() => { }); }); - lightbox.init(); - - window.addEventListener('popstate', popstateHandler); - - lightbox.on('beforeOpen', () => { + lightbox.on('afterInit', () => { + activeEl = document.activeElement instanceof HTMLElement ? document.activeElement : null; + focusParent(activeEl, true, true); + lightbox?.pswp?.element?.focus({ + preventScroll: true, + }); history.pushState(null, '', '#pswp'); }); - lightbox.on('close', () => { + lightbox.on('destroy', () => { + focusParent(activeEl, true, false); + activeEl = null; if (window.location.hash === '#pswp') { history.back(); } }); + + window.addEventListener('popstate', popstateHandler); + + lightbox.init(); }); onUnmounted(() => { window.removeEventListener('popstate', popstateHandler); lightbox?.destroy(); lightbox = null; + activeEl = null; }); const previewable = (file: Misskey.entities.DriveFile): boolean => { @@ -214,6 +226,16 @@ const previewable = (file: Misskey.entities.DriveFile): boolean => { if (isModule(file)) return true; return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type); }; + +const openGallery = () => { + if (props.mediaList.filter(media => previewable(media)).length > 0) { + lightbox?.loadAndOpen(0); + } +}; + +defineExpose({ + openGallery, +}); </script> <style lang="scss" module> @@ -317,7 +339,7 @@ const previewable = (file: Misskey.entities.DriveFile): boolean => { backdrop-filter: var(--modalBgFilter); } -.pwsp__alt-text-container { +.pswp__alt-text-container { display: flex; flex-direction: row; align-items: center; @@ -331,7 +353,7 @@ const previewable = (file: Misskey.entities.DriveFile): boolean => { max-width: 800px; } -.pwsp__alt-text { +.pswp__alt-text { color: var(--fg); margin: 0 auto; text-align: center; diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue index 4dc5059724..1c3c9a312b 100644 --- a/packages/frontend/src/components/MkMediaVideo.vue +++ b/packages/frontend/src/components/MkMediaVideo.vue @@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only @contextmenu.stop @keydown.stop > - <button v-if="hide" :class="$style.hidden" @click="hide = false"> + <button v-if="hide" :class="$style.hidden" @click="show"> <div :class="$style.hiddenTextWrapper"> <b v-if="video.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.dataSaver.media ? ` (${i18n.ts.video}${video.size ? ' ' + bytes(video.size) : ''})` : '' }}</b> <b v-else style="display: block;"><i class="ti ti-movie"></i> {{ defaultStore.state.dataSaver.media && video.size ? bytes(video.size) : i18n.ts.video }}</b> @@ -115,6 +115,7 @@ SPDX-License-Identifier: AGPL-3.0-only import { ref, shallowRef, computed, watch, onDeactivated, onActivated, onMounted } from 'vue'; import * as Misskey from 'misskey-js'; import type { MenuItem } from '@/types/menu.js'; +import { type Keymap } from '@/scripts/hotkey.js'; import bytes from '@/filters/bytes.js'; import { hms } from '@/filters/hms.js'; import { defaultStore } from '@/store.js'; @@ -130,32 +131,44 @@ const props = defineProps<{ }>(); const keymap = { - 'up': () => { - if (hasFocus() && videoEl.value) { - volume.value = Math.min(volume.value + 0.1, 1); - } + 'up': { + allowRepeat: true, + callback: () => { + if (hasFocus() && videoEl.value) { + volume.value = Math.min(volume.value + 0.1, 1); + } + }, }, - 'down': () => { - if (hasFocus() && videoEl.value) { - volume.value = Math.max(volume.value - 0.1, 0); - } + 'down': { + allowRepeat: true, + callback: () => { + if (hasFocus() && videoEl.value) { + volume.value = Math.max(volume.value - 0.1, 0); + } + }, }, - 'left': () => { - if (hasFocus() && videoEl.value) { - videoEl.value.currentTime = Math.max(videoEl.value.currentTime - 5, 0); - } + 'left': { + allowRepeat: true, + callback: () => { + if (hasFocus() && videoEl.value) { + videoEl.value.currentTime = Math.max(videoEl.value.currentTime - 5, 0); + } + }, }, - 'right': () => { - if (hasFocus() && videoEl.value) { - videoEl.value.currentTime = Math.min(videoEl.value.currentTime + 5, videoEl.value.duration); - } + 'right': { + allowRepeat: true, + callback: () => { + if (hasFocus() && videoEl.value) { + videoEl.value.currentTime = Math.min(videoEl.value.currentTime + 5, videoEl.value.duration); + } + }, }, 'space': () => { if (hasFocus()) { togglePlayPause(); } }, -}; +} as const satisfies Keymap; // PlayerElもしくはその子要素にフォーカスがあるかどうか function hasFocus() { @@ -163,9 +176,21 @@ function hasFocus() { return playerEl.value === document.activeElement || playerEl.value.contains(document.activeElement); } -// eslint-disable-next-line vue/no-setup-props-destructure +// eslint-disable-next-line vue/no-setup-props-reactivity-loss const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore')); +async function show() { + if (props.video.isSensitive && defaultStore.state.confirmWhenRevealingSensitiveMedia) { + const { canceled } = await os.confirm({ + type: 'question', + text: i18n.ts.sensitiveMediaRevealConfirm, + }); + if (canceled) return; + } + + hide.value = false; +} + // Menu const menuShowing = ref(false); @@ -471,7 +496,7 @@ onDeactivated(() => { position: relative; overflow: clip; - &:focus { + &:focus-visible { outline: none; } } @@ -578,6 +603,10 @@ onDeactivated(() => { border-radius: 99rem; font-size: 1.1rem; + + &:focus-visible { + outline: none; + } } .videoLoading { @@ -641,6 +670,10 @@ onDeactivated(() => { &:hover { background-color: var(--accent); } + + &:focus-visible { + outline: none; + } } } diff --git a/packages/frontend/src/components/MkMenu.child.vue b/packages/frontend/src/components/MkMenu.child.vue index dfb6d34618..235790556c 100644 --- a/packages/frontend/src/components/MkMenu.child.vue +++ b/packages/frontend/src/components/MkMenu.child.vue @@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { nextTick, onMounted, onUnmounted, shallowRef, watch } from 'vue'; +import { nextTick, onMounted, onUnmounted, provide, shallowRef, watch } from 'vue'; import MkMenu from './MkMenu.vue'; import { MenuItem } from '@/types/menu.js'; @@ -19,7 +19,6 @@ const props = defineProps<{ targetElement: HTMLElement; rootElement: HTMLElement; width?: number; - viaKeyboard?: boolean; }>(); const emit = defineEmits<{ @@ -27,6 +26,8 @@ const emit = defineEmits<{ (ev: 'actioned'): void; }>(); +provide('isNestingMenu', true); + const el = shallowRef<HTMLElement>(); const align = 'left'; diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue index 55a59b5c10..0537f4f988 100644 --- a/packages/frontend/src/components/MkMenu.vue +++ b/packages/frontend/src/components/MkMenu.vue @@ -4,23 +4,42 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<div role="menu"> +<div role="menu" @focusin.passive.stop="() => {}"> <div - ref="itemsEl" v-hotkey="keymap" + ref="itemsEl" + v-hotkey="keymap" + tabindex="0" class="_popup _shadow" - :class="[$style.root, { [$style.center]: align === 'center', [$style.asDrawer]: asDrawer }]" - :style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }" - @contextmenu.self="e => e.preventDefault()" + :class="{ + [$style.root]: true, + [$style.center]: align === 'center', + [$style.asDrawer]: asDrawer, + }" + :style="{ + width: (width && !asDrawer) ? `${width}px` : '', + maxHeight: maxHeight ? `min(${maxHeight}px, calc(100dvh - 32px))` : 'calc(100dvh - 32px)', + }" + @keydown.stop="() => {}" + @contextmenu.self.prevent="() => {}" > - <template v-for="(item, i) in (items2 ?? [])"> - <div v-if="item.type === 'divider'" role="separator" :class="$style.divider"></div> - <span v-else-if="item.type === 'label'" role="menuitem" :class="[$style.label, $style.item]"> + <template v-for="item in (items2 ?? [])"> + <div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div> + <span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]"> <span style="opacity: 0.7;">{{ item.text }}</span> </span> - <span v-else-if="item.type === 'pending'" role="menuitem" :tabindex="i" :class="[$style.pending, $style.item]"> + <span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]"> <span><MkEllipsis/></span> </span> - <MkA v-else-if="item.type === 'link'" role="menuitem" :to="item.to" :tabindex="i" class="_button" :class="$style.item" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> + <MkA + v-else-if="item.type === 'link'" + role="menuitem" + tabindex="0" + :class="['_button', $style.item]" + :to="item.to" + @click.passive="close(true)" + @mouseenter.passive="onItemMouseEnter" + @mouseleave.passive="onItemMouseLeave" + > <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> <MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/> <div :class="$style.item_content"> @@ -28,20 +47,49 @@ SPDX-License-Identifier: AGPL-3.0-only <span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> </div> </MkA> - <a v-else-if="item.type === 'a'" role="menuitem" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button" :class="$style.item" @click="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> + <a + v-else-if="item.type === 'a'" + role="menuitem" + tabindex="0" + :class="['_button', $style.item]" + :href="item.href" + :target="item.target" + :rel="item.target === '_blank' ? 'noopener noreferrer' : undefined" + :download="item.download" + @click.passive="close(true)" + @mouseenter.passive="onItemMouseEnter" + @mouseleave.passive="onItemMouseLeave" + > <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> <div :class="$style.item_content"> <span :class="$style.item_content_text">{{ item.text }}</span> <span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> </div> </a> - <button v-else-if="item.type === 'user'" role="menuitem" :tabindex="i" class="_button" :class="[$style.item, { [$style.active]: item.active }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> + <button + v-else-if="item.type === 'user'" + role="menuitem" + tabindex="0" + :class="['_button', $style.item, { [$style.active]: item.active }]" + @click.prevent="item.active ? close(false) : clicked(item.action, $event)" + @mouseenter.passive="onItemMouseEnter" + @mouseleave.passive="onItemMouseLeave" + > <MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/> <div v-if="item.indicate" :class="$style.item_content"> <span :class="$style.indicator"><i class="_indicatorCircle"></i></span> </div> </button> - <button v-else-if="item.type === 'switch'" role="menuitemcheckbox" :tabindex="i" class="_button" :class="[$style.item, $style.switch, { [$style.switchDisabled]: item.disabled } ]" @click="switchItem(item)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> + <button + v-else-if="item.type === 'switch'" + role="menuitemcheckbox" + tabindex="0" + :class="['_button', $style.item]" + :disabled="unref(item.disabled)" + @click.prevent="switchItem(item)" + @mouseenter.passive="onItemMouseEnter" + @mouseleave.passive="onItemMouseLeave" + > <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> <MkSwitchButton v-else :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/> <div :class="$style.item_content"> @@ -49,29 +97,61 @@ SPDX-License-Identifier: AGPL-3.0-only <MkSwitchButton v-if="item.icon" :class="[$style.switchButton, $style.caret]" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/> </div> </button> - <button v-else-if="item.type === 'radio'" class="_button" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter="preferClick ? null : showRadioOptions(item, $event)" @click="!preferClick ? null : showRadioOptions(item, $event)"> + <button + v-else-if="item.type === 'radio'" + role="menuitem" + tabindex="0" + :class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]" + :disabled="unref(item.disabled)" + @mouseenter.prevent="preferClick ? null : showRadioOptions(item, $event)" + @keydown.enter.prevent="preferClick ? null : showRadioOptions(item, $event)" + @click.prevent="!preferClick ? null : showRadioOptions(item, $event)" + > <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i> <div :class="$style.item_content"> <span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span> <span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span> </div> </button> - <button v-else-if="item.type === 'radioOption'" :tabindex="i" class="_button" role="menuitem" :class="[$style.item, { [$style.radioActive]: item.active }]" @click="clicked(item.action, $event, false)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> + <button + v-else-if="item.type === 'radioOption'" + role="menuitemradio" + tabindex="0" + :class="['_button', $style.item, $style.radio, { [$style.active]: unref(item.active) }]" + @click.prevent="unref(item.active) ? null : clicked(item.action, $event, false)" + @mouseenter.passive="onItemMouseEnter" + @mouseleave.passive="onItemMouseLeave" + > <div :class="$style.icon"> - <span :class="[$style.radio, { [$style.radioChecked]: item.active }]"></span> + <span :class="[$style.radioIcon, { [$style.radioChecked]: unref(item.active) }]"></span> </div> <div :class="$style.item_content"> <span :class="$style.item_content_text">{{ item.text }}</span> </div> </button> - <button v-else-if="item.type === 'parent'" class="_button" role="menuitem" :tabindex="i" :class="[$style.item, $style.parent, { [$style.childShowing]: childShowingItem === item }]" @mouseenter="preferClick ? null : showChildren(item, $event)" @click="!preferClick ? null : showChildren(item, $event)"> + <button + v-else-if="item.type === 'parent'" + role="menuitem" + tabindex="0" + :class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]" + @mouseenter.prevent="preferClick ? null : showChildren(item, $event)" + @keydown.enter.prevent="preferClick ? null : showChildren(item, $event)" + @click.prevent="!preferClick ? null : showChildren(item, $event)" + > <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i> <div :class="$style.item_content"> <span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span> <span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span> </div> </button> - <button v-else :tabindex="i" class="_button" role="menuitem" :class="[$style.item, { [$style.danger]: item.danger, [$style.active]: getValue(item.active) }]" :disabled="getValue(item.active)" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> + <button + v-else role="menuitem" + tabindex="0" + :class="['_button', $style.item, { [$style.danger]: item.danger, [$style.active]: unref(item.active) }]" + @click.prevent="unref(item.active) ? close(false) : clicked(item.action, $event)" + @mouseenter.passive="onItemMouseEnter" + @mouseleave.passive="onItemMouseLeave" + > <i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> <MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/> <div :class="$style.item_content"> @@ -80,24 +160,26 @@ SPDX-License-Identifier: AGPL-3.0-only </div> </button> </template> - <span v-if="items2 == null || items2.length === 0" :class="[$style.none, $style.item]"> + <span v-if="items2 == null || items2.length === 0" tabindex="-1" :class="[$style.none, $style.item]"> <span>{{ i18n.ts.none }}</span> </span> </div> <div v-if="childMenu"> - <XChild ref="child" :items="childMenu" :targetElement="childTarget!" :rootElement="itemsEl!" showing @actioned="childActioned" @close="close(false)"/> + <XChild ref="child" :items="childMenu" :targetElement="childTarget!" :rootElement="itemsEl!" @actioned="childActioned" @closed="closeChild"/> </div> </div> </template> <script lang="ts"> -import { ComputedRef, computed, defineAsyncComponent, isRef, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'; -import { focusPrev, focusNext } from '@/scripts/focus.js'; +import { computed, defineAsyncComponent, inject, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, unref, watch } from 'vue'; import MkSwitchButton from '@/components/MkSwitch.button.vue'; import { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuSwitch, MenuRadio, MenuRadioOption, MenuParent } from '@/types/menu.js'; import * as os from '@/os.js'; import { i18n } from '@/i18n.js'; import { isTouchUsing } from '@/scripts/touch.js'; +import { type Keymap } from '@/scripts/hotkey.js'; +import { isFocusable } from '@/scripts/focus.js'; +import { getNodeOrNull } from '@/scripts/get-dom-node-or-null.js'; const childrenCache = new WeakMap<MenuParent, MenuItem[]>(); </script> @@ -107,7 +189,6 @@ const XChild = defineAsyncComponent(() => import('./MkMenu.child.vue')); const props = defineProps<{ items: MenuItem[]; - viaKeyboard?: boolean; asDrawer?: boolean; align?: 'center' | string; width?: number; @@ -119,17 +200,28 @@ const emit = defineEmits<{ (ev: 'hide'): void; }>(); -const itemsEl = shallowRef<HTMLDivElement>(); +const isNestingMenu = inject<boolean>('isNestingMenu', false); + +const itemsEl = shallowRef<HTMLElement>(); const items2 = ref<InnerMenuItem[]>(); const child = shallowRef<InstanceType<typeof XChild>>(); -const keymap = computed(() => ({ - 'up|k|shift+tab': focusUp, - 'down|j|tab': focusDown, - 'esc': close, -})); +const keymap = { + 'up|k|shift+tab': { + allowRepeat: true, + callback: () => focusUp(), + }, + 'down|j|tab': { + allowRepeat: true, + callback: () => focusDown(), + }, + 'esc': { + allowRepeat: true, + callback: () => close(false), + }, +} as const satisfies Keymap; const childShowingItem = ref<MenuItem | null>(); @@ -167,25 +259,19 @@ function childActioned() { close(true); } -const onGlobalMousedown = (event: MouseEvent) => { - if (childTarget.value && (event.target === childTarget.value || childTarget.value.contains(event.target as Node))) return; - if (child.value && child.value.checkHit(event)) return; - closeChild(); -}; - let childCloseTimer: null | number = null; -function onItemMouseEnter(item) { +function onItemMouseEnter() { childCloseTimer = window.setTimeout(() => { closeChild(); }, 300); } -function onItemMouseLeave(item) { +function onItemMouseLeave() { if (childCloseTimer) window.clearTimeout(childCloseTimer); } -async function showRadioOptions(item: MenuRadio, ev: MouseEvent) { +async function showRadioOptions(item: MenuRadio, ev: Event) { const children: MenuItem[] = Object.keys(item.options).map<MenuRadioOption>(key => { const value = item.options[key]; return { @@ -200,7 +286,7 @@ async function showRadioOptions(item: MenuRadio, ev: MouseEvent) { if (props.asDrawer) { os.popupMenu(children, ev.currentTarget ?? ev.target).finally(() => { - emit('close'); + close(false); }); emit('hide'); } else { @@ -210,7 +296,7 @@ async function showRadioOptions(item: MenuRadio, ev: MouseEvent) { } } -async function showChildren(item: MenuParent, ev: MouseEvent) { +async function showChildren(item: MenuParent, ev: Event) { const children: MenuItem[] = await (async () => { if (childrenCache.has(item)) { return childrenCache.get(item)!; @@ -227,7 +313,7 @@ async function showChildren(item: MenuParent, ev: MouseEvent) { if (props.asDrawer) { os.popupMenu(children, ev.currentTarget ?? ev.target).finally(() => { - emit('close'); + close(false); }); emit('hide'); } else { @@ -246,41 +332,87 @@ function clicked(fn: MenuAction, ev: MouseEvent, doClose = true) { } function close(actioned = false) { - emit('close', actioned); + disposeHandlers(); + nextTick(() => { + closeChild(); + emit('close', actioned); + }); +} + +function switchItem(item: MenuSwitch & { ref: any }) { + if (item.disabled !== undefined && (typeof item.disabled === 'boolean' ? item.disabled : item.disabled.value)) return; + item.ref = !item.ref; } function focusUp() { - focusPrev(document.activeElement); + if (disposed) return; + if (!itemsEl.value?.contains(document.activeElement)) return; + + const focusableElements = Array.from(itemsEl.value.children).filter(isFocusable); + const activeIndex = focusableElements.findIndex(el => el === document.activeElement); + const targetIndex = (activeIndex !== -1 && activeIndex !== 0) ? (activeIndex - 1) : (focusableElements.length - 1); + const targetElement = focusableElements.at(targetIndex) ?? itemsEl.value; + + targetElement.focus(); } function focusDown() { - focusNext(document.activeElement); -} + if (disposed) return; + if (!itemsEl.value?.contains(document.activeElement)) return; -function switchItem(item: MenuSwitch & { ref: any }) { - if (item.disabled !== undefined && (typeof item.disabled === 'boolean' ? item.disabled : item.disabled.value)) return; - item.ref = !item.ref; -} + const focusableElements = Array.from(itemsEl.value.children).filter(isFocusable); + const activeIndex = focusableElements.findIndex(el => el === document.activeElement); + const targetIndex = (activeIndex !== -1 && activeIndex !== (focusableElements.length - 1)) ? (activeIndex + 1) : 0; + const targetElement = focusableElements.at(targetIndex) ?? itemsEl.value; -function getValue<T>(item?: ComputedRef<T> | T) { - return isRef(item) ? item.value : item; + targetElement.focus(); } -onMounted(() => { - if (props.viaKeyboard) { - nextTick(() => { - if (itemsEl.value) focusNext(itemsEl.value.children[0], true, false); - }); - } +const onGlobalFocusin = (ev: FocusEvent) => { + if (disposed) return; + if (itemsEl.value?.parentElement?.contains(getNodeOrNull(ev.target))) return; + nextTick(() => { + if (itemsEl.value != null && isFocusable(itemsEl.value)) { + itemsEl.value.focus({ preventScroll: true }); + nextTick(() => focusDown()); + } + }); +}; - // TODO: アクティブな要素までスクロール - //itemsEl.scrollTo(); +const onGlobalMousedown = (ev: MouseEvent) => { + if (disposed) return; + if (childTarget.value?.contains(getNodeOrNull(ev.target))) return; + if (child.value?.checkHit(ev)) return; + closeChild(); +}; +const setupHandlers = () => { + if (!isNestingMenu) { + document.addEventListener('focusin', onGlobalFocusin, { passive: true }); + } document.addEventListener('mousedown', onGlobalMousedown, { passive: true }); +}; + +let disposed = false; + +const disposeHandlers = () => { + disposed = true; + if (!isNestingMenu) { + document.removeEventListener('focusin', onGlobalFocusin); + } + document.removeEventListener('mousedown', onGlobalMousedown); +}; + +onMounted(() => { + setupHandlers(); + + if (!isNestingMenu) { + nextTick(() => itemsEl.value?.focus({ preventScroll: true })); + } }); onBeforeUnmount(() => { - document.removeEventListener('mousedown', onGlobalMousedown); + disposeHandlers(); }); </script> @@ -293,6 +425,10 @@ onBeforeUnmount(() => { overflow: auto; overscroll-behavior: contain; + &:focus-visible { + outline: none; + } + &.center { > .item { text-align: center; @@ -310,7 +446,7 @@ onBeforeUnmount(() => { font-size: 1em; padding: 12px 24px; - &:before { + &::before { width: calc(100% - 24px); border-radius: var(--radius); } @@ -340,8 +476,10 @@ onBeforeUnmount(() => { text-align: left; overflow: hidden; text-overflow: ellipsis; + text-decoration: none !important; + color: var(--menuFg, var(--fg)); - &:before { + &::before { content: ""; display: block; position: absolute; @@ -355,56 +493,56 @@ onBeforeUnmount(() => { border-radius: var(--radius-sm); } - &:not(:disabled):hover { - color: var(--accent); - text-decoration: none; + &:focus-visible { + outline: none; - &:before { - background: var(--accentedBg); + &:not(:hover):not(:active)::before { + outline: var(--focus) solid 2px; + outline-offset: -2px; } } - &.danger { - color: #ff2a2a; - - &:hover { - color: #fff; + &:not(:disabled) { + &:hover, + &:focus-visible:active, + &:focus-visible.active { + color: var(--menuHoverFg, var(--accent)); - &:before { - background: #ff4242; + &::before { + background-color: var(--menuHoverBg, var(--accentedBg)); } } - &:active { - color: #fff; + &:not(:focus-visible):active, + &:not(:focus-visible).active { + color: var(--menuActiveFg, var(--fgOnAccent)); - &:before { - background: #d42e2e !important; + &::before { + background-color: var(--menuActiveBg, var(--accent)); } } } - &:active, - &.active { - color: var(--fgOnAccent) !important; - opacity: 1; - - &:before { - background: var(--accent) !important; - } + &:disabled { + cursor: not-allowed; } - &.radioActive { - color: var(--accent) !important; - opacity: 1; + &.danger { + --menuFg: #ff2a2a; + --menuHoverFg: #fff; + --menuHoverBg: #ff4242; + --menuActiveFg: #fff; + --menuActiveBg: #d42e2e; + } - &:before { - background-color: var(--accentedBg) !important; - } + &.radio { + --menuActiveFg: var(--accent); + --menuActiveBg: var(--accentedBg); } - &:not(:active):focus-visible { - box-shadow: 0 0 0 2px var(--focus) inset; + &.parent { + --menuActiveFg: var(--accent); + --menuActiveBg: var(--accentedBg); } &.label { @@ -422,22 +560,6 @@ onBeforeUnmount(() => { pointer-events: none; opacity: 0.7; } - - &.parent { - pointer-events: auto; - display: flex; - align-items: center; - cursor: default; - - &.childShowing { - color: var(--accent); - text-decoration: none; - - &:before { - background: var(--accentedBg); - } - } - } } .item_content { @@ -456,18 +578,6 @@ onBeforeUnmount(() => { overflow: hidden; } -.switch { - position: relative; - display: flex; - transition: all 0.2s ease; - user-select: none; - cursor: pointer; -} - -.switchDisabled { - cursor: not-allowed; -} - .switchButton { margin-left: -2px; --height: 1.35em; @@ -479,14 +589,6 @@ onBeforeUnmount(() => { text-overflow: ellipsis; } -.switchInput { - position: absolute; - width: 0; - height: 0; - opacity: 0; - margin: 0; -} - .icon { margin-right: 8px; line-height: 1; @@ -515,12 +617,12 @@ onBeforeUnmount(() => { border-top: solid 0.5px var(--divider); } -.radio { +.radioIcon { display: inline-block; position: relative; width: 1em; height: 1em; - vertical-align: -.125em; + vertical-align: -0.125em; border-radius: 50%; border: solid 2px var(--divider); background-color: var(--panel); diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue index 9e69ab2207..f8032f9b43 100644 --- a/packages/frontend/src/components/MkModal.vue +++ b/packages/frontend/src/components/MkModal.vue @@ -30,9 +30,9 @@ SPDX-License-Identifier: AGPL-3.0-only [$style.transition_modal_leaveTo]: transitionName === 'modal', [$style.transition_send_leaveTo]: transitionName === 'send', })" - :duration="transitionDuration" appear @afterLeave="emit('closed')" @enter="emit('opening')" @afterEnter="onOpened" + :duration="transitionDuration" appear @afterLeave="onClosed" @enter="emit('opening')" @afterEnter="onOpened" > - <div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }"> + <div v-show="manualShowing != null ? manualShowing : showing" ref="modalRootEl" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }"> <div data-cy-bg :data-cy-transparent="isEnableBgTransparent" class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div> <div ref="content" :class="[$style.content, { [$style.fixed]: fixed }]" :style="{ zIndex }" @click.self="onBgClick"> <slot :max-height="maxHeight" :type="type"></slot> @@ -47,6 +47,9 @@ import * as os from '@/os.js'; import { isTouchUsing } from '@/scripts/touch.js'; import { defaultStore } from '@/store.js'; import { deviceKind } from '@/scripts/device-kind.js'; +import { type Keymap } from '@/scripts/hotkey.js'; +import { focusTrap } from '@/scripts/focus-trap.js'; +import { focusParent } from '@/scripts/focus.js'; function getFixedContainer(el: Element | null): Element | null { if (el == null || el.tagName === 'BODY') return null; @@ -68,6 +71,8 @@ const props = withDefaults(defineProps<{ zPriority?: 'low' | 'middle' | 'high'; noOverlap?: boolean; transparentBg?: boolean; + hasInteractionWithOtherFocusTrappedEls?: boolean; + returnFocusTo?: HTMLElement | null; }>(), { manualShowing: null, src: null, @@ -76,6 +81,8 @@ const props = withDefaults(defineProps<{ zPriority: 'low', noOverlap: true, transparentBg: false, + hasInteractionWithOtherFocusTrappedEls: false, + returnFocusTo: null, }); const emit = defineEmits<{ @@ -93,6 +100,7 @@ const maxHeight = ref<number>(); const fixed = ref(false); const transformOrigin = ref('center'); const showing = ref(true); +const modalRootEl = shallowRef<HTMLElement>(); const content = shallowRef<HTMLElement>(); const zIndex = os.claimZIndex(props.zPriority); const useSendAnime = ref(false); @@ -131,6 +139,7 @@ const transitionDuration = computed((() => : 0 )); +let releaseFocusTrap: (() => void) | null = null; let contentClicking = false; function close(opts: { useSendAnimation?: boolean } = {}) { @@ -154,8 +163,11 @@ if (type.value === 'drawer') { } const keymap = { - 'esc': () => emit('esc'), -}; + 'esc': { + allowRepeat: true, + callback: () => emit('esc'), + }, +} as const satisfies Keymap; const MARGIN = 16; const SCROLLBAR_THICKNESS = 16; @@ -292,6 +304,10 @@ const onOpened = () => { }, { passive: true }); }; +const onClosed = () => { + emit('closed'); +}; + const alignObserver = new ResizeObserver((entries, observer) => { align(); }); @@ -309,6 +325,20 @@ onMounted(() => { align(); }, { immediate: true }); + watch([showing, () => props.manualShowing], ([showing, manualShowing]) => { + if (manualShowing === true || (manualShowing == null && showing === true)) { + if (modalRootEl.value != null) { + const { release } = focusTrap(modalRootEl.value, props.hasInteractionWithOtherFocusTrappedEls); + + releaseFocusTrap = release; + modalRootEl.value.focus(); + } + } else { + releaseFocusTrap?.(); + focusParent(props.returnFocusTo ?? props.src, true, false); + } + }, { immediate: true }); + nextTick(() => { alignObserver.observe(content.value!); }); diff --git a/packages/frontend/src/components/MkModalWindow.vue b/packages/frontend/src/components/MkModalWindow.vue index d3657afa94..c3c7812036 100644 --- a/packages/frontend/src/components/MkModalWindow.vue +++ b/packages/frontend/src/components/MkModalWindow.vue @@ -4,15 +4,15 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<MkModal ref="modal" :preferType="'dialog'" @click="onBgClick" @closed="$emit('closed')"> - <div ref="rootEl" :class="$style.root" :style="{ width: `${width}px`, height: `min(${height}px, 100%)` }" @keydown="onKeydown"> +<MkModal ref="modal" :preferType="'dialog'" @click="onBgClick" @closed="emit('closed')" @esc="emit('esc')"> + <div ref="rootEl" :class="$style.root" :style="{ width: `${width}px`, height: `min(${height}px, 100%)` }"> <div ref="headerEl" :class="$style.header"> - <button v-if="withOkButton" :class="$style.headerButton" class="_button" @click="$emit('close')"><i class="ti ti-x"></i></button> + <button v-if="withOkButton && withCloseButton" :class="$style.headerButton" class="_button" @click="emit('close')"><i class="ti ti-x"></i></button> <span :class="$style.title"> <slot name="header"></slot> </span> - <button v-if="!withOkButton" :class="$style.headerButton" class="_button" data-cy-modal-window-close @click="$emit('close')"><i class="ti ti-x"></i></button> - <button v-if="withOkButton" :class="$style.headerButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="ti ti-check"></i></button> + <button v-if="!withOkButton && withCloseButton" :class="$style.headerButton" class="_button" data-cy-modal-window-close @click="emit('close')"><i class="ti ti-x"></i></button> + <button v-if="withOkButton" :class="$style.headerButton" class="_button" :disabled="okButtonDisabled" @click="emit('ok')"><i class="ti ti-check"></i></button> </div> <div :class="$style.body"> <slot :width="bodyWidth" :height="bodyHeight"></slot> @@ -27,11 +27,13 @@ import MkModal from './MkModal.vue'; const props = withDefaults(defineProps<{ withOkButton: boolean; + withCloseButton: boolean; okButtonDisabled: boolean; width: number; height: number; }>(), { withOkButton: false, + withCloseButton: true, okButtonDisabled: false, width: 400, height: 500, @@ -42,6 +44,7 @@ const emit = defineEmits<{ (event: 'close'): void; (event: 'closed'): void; (event: 'ok'): void; + (event: 'esc'): void; }>(); const modal = shallowRef<InstanceType<typeof MkModal>>(); @@ -50,21 +53,13 @@ const headerEl = shallowRef<HTMLElement>(); const bodyWidth = ref(0); const bodyHeight = ref(0); -const close = () => { +function close() { modal.value?.close(); -}; +} -const onBgClick = () => { +function onBgClick() { emit('click'); -}; - -const onKeydown = (evt) => { - if (evt.which === 27) { // Esc - evt.preventDefault(); - evt.stopPropagation(); - close(); - } -}; +} const ro = new ResizeObserver((entries, observer) => { if (rootEl.value == null || headerEl.value == null) return; diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index b8ce7ed830..7df84a70db 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only ref="rootEl" v-hotkey="keymap" :class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]" - :tabindex="!isDeleted ? '-1' : undefined" + :tabindex="isDeleted ? '-1' : '0'" > <div v-if="appearNote.reply && inReplyToCollapsed" :class="$style.collapsedInReplyTo"> <MkAvatar :class="$style.collapsedInReplyToAvatar" :user="appearNote.reply.user" link preview/> @@ -35,7 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> </I18n> <div :class="$style.renoteInfo"> - <button ref="renoteTime" :class="$style.renoteTime" class="_button" @click="showRenoteMenu()"> + <button ref="renoteTime" :class="$style.renoteTime" class="_button" @mousedown.prevent="showRenoteMenu()"> <i class="ti ti-dots" :class="$style.renoteMenu"></i> <MkTime :time="note.createdAt"/> </button> @@ -92,7 +92,7 @@ SPDX-License-Identifier: AGPL-3.0-only <MkButton v-else-if="!defaultStore.state.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> <div v-if="appearNote.files && appearNote.files.length > 0"> - <MkMediaList :mediaList="appearNote.files" @click.stop/> + <MkMediaList ref="galleryEl" :mediaList="appearNote.files" @click.stop/> </div> <MkPoll v-if="appearNote.poll" :noteId="appearNote.id" :poll="appearNote.poll" :class="$style.poll" @click.stop/> <div v-if="isEnabledUrlPreview"> @@ -126,7 +126,7 @@ SPDX-License-Identifier: AGPL-3.0-only class="_button" :style="renoted ? 'color: var(--accent) !important;' : ''" @click.stop - @mousedown="renoted ? undoRenote(appearNote) : boostVisibility()" + @mousedown.prevent="renoted ? undoRenote(appearNote) : boostVisibility()" > <i class="ti ti-repeat"></i> <p v-if="appearNote.renoteCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.renoteCount) }}</p> @@ -154,10 +154,10 @@ SPDX-License-Identifier: AGPL-3.0-only <i v-else class="ph-smiley ph-bold ph-lg"></i> <p v-if="(appearNote.reactionAcceptance === 'likeOnly' || defaultStore.state.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.reactionCount) }}</p> </button> - <button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" :class="$style.footerButton" class="_button" @mousedown="clip()"> + <button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" :class="$style.footerButton" class="_button" @mousedown.prevent="clip()"> <i class="ti ti-paperclip"></i> </button> - <button ref="menuButton" :class="$style.footerButton" class="_button" @mousedown="showMenu()"> + <button ref="menuButton" :class="$style.footerButton" class="_button" @mousedown.prevent="showMenu()"> <i class="ti ti-dots"></i> </button> </footer> @@ -204,8 +204,7 @@ import MkUsersTooltip from '@/components/MkUsersTooltip.vue'; import MkUrlPreview from '@/components/MkUrlPreview.vue'; import MkInstanceTicker from '@/components/MkInstanceTicker.vue'; import MkButton from '@/components/MkButton.vue'; -import { pleaseLogin } from '@/scripts/please-login.js'; -import { focusPrev, focusNext } from '@/scripts/focus.js'; +import { pleaseLogin, type OpenOnRemoteOptions } from '@/scripts/please-login.js'; import { checkWordMute } from '@/scripts/check-word-mute.js'; import { userPage } from '@/filters/user.js'; import number from '@/filters/number.js'; @@ -231,7 +230,10 @@ import { showMovedDialog } from '@/scripts/show-moved-dialog.js'; import { shouldCollapsed } from '@/scripts/collapsed.js'; import { useRouter } from '@/router/supplier.js'; import { boostMenuItems, type Visibility } from '@/scripts/boost-quote.js'; +import { host } from '@/config.js'; import { isEnabledUrlPreview } from '@/instance.js'; +import { type Keymap } from '@/scripts/hotkey.js'; +import { focusPrev, focusNext } from '@/scripts/focus.js'; const props = withDefaults(defineProps<{ note: Misskey.entities.Note; @@ -302,7 +304,7 @@ const quoteButton = shallowRef<HTMLElement>(); const clipButton = shallowRef<HTMLElement>(); const likeButton = shallowRef<HTMLElement>(); const appearNote = computed(() => isRenote ? note.value.renote as Misskey.entities.Note : note.value); - +const galleryEl = shallowRef<InstanceType<typeof MkMediaList>>(); const isMyRenote = $i && ($i.id === note.value.userId); const showContent = ref(defaultStore.state.uncollapseCW); const parsed = computed(() => appearNote.value.text ? mfm.parse(appearNote.value.text) : null); @@ -328,6 +330,11 @@ const defaultLike = computed(() => defaultStore.state.like ? defaultStore.state. const animated = computed(() => parsed.value ? checkAnimationFromMfm(parsed.value) : null); const allowAnim = ref(defaultStore.state.advancedMfm && defaultStore.state.animatedMfm ? true : false); +const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({ + type: 'lookup', + url: `https://${host}/notes/${appearNote.value.id}`, +})); + /* Overload FunctionにLintが対応していないのでコメントアウト function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly: true): boolean; function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly: false): boolean | 'sensitiveMute'; @@ -348,15 +355,53 @@ function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string let renoting = false; const keymap = { - 'r': () => reply(true), - 'e|a|plus': () => react(true), - '(q)': () => { if (canRenote.value && !renoted.value && !renoting) renote(defaultStore.state.visibilityOnBoost); }, - 'up|k|shift+tab': focusBefore, - 'down|j|tab': focusAfter, - 'esc': blur, - 'm|o': () => showMenu(true), - 's': () => showContent.value !== showContent.value, -}; + 'r': () => { + if (renoteCollapsed.value) return; + reply(); + }, + 'e|a|plus': () => { + if (renoteCollapsed.value) return; + react(); + }, + 'q': () => { + if (renoteCollapsed.value) return; + if (canRenote.value && !renoted.value && !renoting) renote(defaultStore.state.visibilityOnBoost); + }, + 'm': () => { + if (renoteCollapsed.value) return; + showMenu(); + }, + 'c': () => { + if (renoteCollapsed.value) return; + if (!defaultStore.state.showClipButtonInNoteFooter) return; + clip(); + }, + 'o': () => { + if (renoteCollapsed.value) return; + galleryEl.value?.openGallery(); + }, + 'v|enter': () => { + if (renoteCollapsed.value) { + renoteCollapsed.value = false; + } else if (appearNote.value.cw != null) { + showContent.value = !showContent.value; + } else if (isLong) { + collapsed.value = !collapsed.value; + } + }, + 'esc': { + allowRepeat: true, + callback: () => blur(), + }, + 'up|k|shift+tab': { + allowRepeat: true, + callback: () => focusBefore(), + }, + 'down|j|tab': { + allowRepeat: true, + callback: () => focusAfter(), + }, +} as const satisfies Keymap; provide('react', (reaction: string) => { misskeyApi('notes/reactions/create', { @@ -389,12 +434,14 @@ if (!props.mock) { if (users.length < 1) return; - os.popup(MkUsersTooltip, { + const { dispose } = os.popup(MkUsersTooltip, { showing, users, count: appearNote.value.renoteCount, targetElement: renoteButton.value, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); }); useTooltip(quoteButton, async (showing) => { @@ -438,13 +485,15 @@ if (!props.mock) { if (users.length < 1) return; - os.popup(MkReactionsViewerDetails, { + const { dispose } = os.popup(MkReactionsViewerDetails, { showing, reaction: '❤️', users, count: appearNote.value.reactionCount, targetElement: reactButton.value!, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); }); } } @@ -460,7 +509,7 @@ function boostVisibility() { } function renote(visibility: Visibility, localOnly: boolean = false) { - pleaseLogin(); + pleaseLogin(undefined, pleaseLoginContext.value); showMovedDialog(); renoting = true; @@ -506,7 +555,7 @@ function renote(visibility: Visibility, localOnly: boolean = false) { } function quote() { - pleaseLogin(); + pleaseLogin(undefined, pleaseLoginContext.value); showMovedDialog(); if (props.mock) { return; @@ -560,22 +609,21 @@ function quote() { } } -function reply(viaKeyboard = false): void { - pleaseLogin(); +function reply(): void { + pleaseLogin(undefined, pleaseLoginContext.value); if (props.mock) { return; } os.post({ reply: appearNote.value, channel: appearNote.value.channel, - animation: !viaKeyboard, }).then(() => { focus(); }); } function like(): void { - pleaseLogin(); + pleaseLogin(undefined, pleaseLoginContext.value); showMovedDialog(); sound.playMisskeySfx('reaction'); if (props.mock) { @@ -595,7 +643,7 @@ function like(): void { } function react(viaKeyboard = false): void { - pleaseLogin(); + pleaseLogin(undefined, pleaseLoginContext.value); showMovedDialog(); if (appearNote.value.reactionAcceptance === 'likeOnly') { sound.playMisskeySfx('reaction'); @@ -613,7 +661,9 @@ function react(viaKeyboard = false): void { const rect = el.getBoundingClientRect(); const x = rect.left + (el.offsetWidth / 2); const y = rect.top + (el.offsetHeight / 2); - os.popup(MkRippleEffect, { x, y }, {}, 'end'); + const { dispose } = os.popup(MkRippleEffect, { x, y }, { + end: () => dispose(), + }); } } else { blur(); @@ -706,15 +756,13 @@ function onContextmenu(ev: MouseEvent): void { } } -function showMenu(viaKeyboard = false): void { +function showMenu(): void { if (props.mock) { return; } const { menu, cleanup } = getNoteMenu({ note: note.value, translating, translation, isDeleted, currentClip: currentClip?.value }); - os.popupMenu(menu, menuButton.value, { - viaKeyboard, - }).then(focus).finally(cleanup); + os.popupMenu(menu, menuButton.value).then(focus).finally(cleanup); } async function menuVersions(viaKeyboard = false): Promise<void> { @@ -724,7 +772,7 @@ async function menuVersions(viaKeyboard = false): Promise<void> { }).then(focus).finally(cleanup); } -async function clip() { +async function clip(): Promise<void> { if (props.mock) { return; } @@ -732,7 +780,7 @@ async function clip() { os.popupMenu(await getNoteClipMenu({ note: note.value, isDeleted, currentClip: currentClip?.value }), clipButton.value).then(focus); } -function showRenoteMenu(viaKeyboard = false): void { +function showRenoteMenu(): void { if (props.mock) { return; } @@ -752,23 +800,19 @@ function showRenoteMenu(viaKeyboard = false): void { } if (isMyRenote) { - pleaseLogin(); + pleaseLogin(undefined, pleaseLoginContext.value); os.popupMenu([ getCopyNoteLinkMenu(note.value, i18n.ts.copyLinkRenote), { type: 'divider' }, getUnrenote(), - ], renoteTime.value, { - viaKeyboard: viaKeyboard, - }); + ], renoteTime.value); } else { os.popupMenu([ getCopyNoteLinkMenu(note.value, i18n.ts.copyLinkRenote), { type: 'divider' }, getAbuseNoteMenu(note.value, i18n.ts.reportAbuseRenote), ($i?.isModerator || $i?.isAdmin) ? getUnrenote() : undefined, - ], renoteTime.value, { - viaKeyboard: viaKeyboard, - }); + ], renoteTime.value); } } @@ -793,11 +837,11 @@ function blur() { } function focusBefore() { - focusPrev(rootEl.value ?? null); + focusPrev(rootEl.value); } function focusAfter() { - focusNext(rootEl.value ?? null); + focusNext(rootEl.value); } function readPromo() { @@ -835,7 +879,7 @@ function emitUpdReaction(emoji: string, delta: number) { &:focus-visible { outline: none; - &:after { + &::after { content: ""; pointer-events: none; display: block; @@ -848,7 +892,7 @@ function emitUpdReaction(emoji: string, delta: number) { margin: auto; width: calc(100% - 8px); height: calc(100% - 8px); - border: dashed 1px var(--focus); + border: dashed 2px var(--focus); border-radius: var(--radius); box-sizing: border-box; } diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue index 3904d33cfe..1354c0e7aa 100644 --- a/packages/frontend/src/components/MkNoteDetailed.vue +++ b/packages/frontend/src/components/MkNoteDetailed.vue @@ -10,6 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only ref="rootEl" v-hotkey="keymap" :class="$style.root" + :tabindex="isDeleted ? '-1' : '0'" > <div v-if="appearNote.reply && appearNote.reply.replyId"> <div v-if="!conversationLoaded" style="padding: 16px"> @@ -31,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only </I18n> </span> <div :class="$style.renoteInfo"> - <button ref="renoteTime" class="_button" :class="$style.renoteTime" @click="showRenoteMenu()"> + <button ref="renoteTime" class="_button" :class="$style.renoteTime" @mousedown.prevent="showRenoteMenu()"> <i v-if="isMyRenote" class="ti ti-dots" style="margin-right: 4px;"></i> <MkTime :time="note.createdAt"/> </button> @@ -97,7 +98,7 @@ SPDX-License-Identifier: AGPL-3.0-only <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="!defaultStore.state.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"> - <MkMediaList :mediaList="appearNote.files"/> + <MkMediaList ref="galleryEl" :mediaList="appearNote.files"/> </div> <MkPoll v-if="appearNote.poll" ref="pollViewer" :noteId="appearNote.id" :poll="appearNote.poll" :class="$style.poll"/> <div v-if="isEnabledUrlPreview"> @@ -127,7 +128,7 @@ SPDX-License-Identifier: AGPL-3.0-only class="_button" :class="$style.noteFooterButton" :style="renoted ? 'color: var(--accent) !important;' : ''" - @mousedown="renoted ? undoRenote() : boostVisibility()" + @mousedown.prevent="renoted ? undoRenote() : boostVisibility()" > <i class="ti ti-repeat"></i> <p v-if="appearNote.renoteCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.renoteCount) }}</p> @@ -154,10 +155,10 @@ SPDX-License-Identifier: AGPL-3.0-only <i v-else class="ph-smiley ph-bold ph-lg"></i> <p v-if="(appearNote.reactionAcceptance === 'likeOnly' || defaultStore.state.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.reactionCount) }}</p> </button> - <button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" class="_button" :class="$style.noteFooterButton" @mousedown="clip()"> + <button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" class="_button" :class="$style.noteFooterButton" @mousedown.prevent="clip()"> <i class="ti ti-paperclip"></i> </button> - <button ref="menuButton" class="_button" :class="$style.noteFooterButton" @mousedown="showMenu()"> + <button ref="menuButton" class="_button" :class="$style.noteFooterButton" @mousedown.prevent="showMenu()"> <i class="ti ti-dots"></i> </button> </footer> @@ -236,7 +237,7 @@ import MkPoll from '@/components/MkPoll.vue'; import MkUsersTooltip from '@/components/MkUsersTooltip.vue'; import MkUrlPreview from '@/components/MkUrlPreview.vue'; import MkInstanceTicker from '@/components/MkInstanceTicker.vue'; -import { pleaseLogin } from '@/scripts/please-login.js'; +import { pleaseLogin, type OpenOnRemoteOptions } from '@/scripts/please-login.js'; import { checkWordMute } from '@/scripts/check-word-mute.js'; import { userPage } from '@/filters/user.js'; import { notePage } from '@/filters/note.js'; @@ -249,6 +250,7 @@ import { reactionPicker } from '@/scripts/reaction-picker.js'; import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm.js'; import { $i } from '@/account.js'; import { i18n } from '@/i18n.js'; +import { host } from '@/config.js'; import { getNoteClipMenu, getNoteMenu } from '@/scripts/get-note-menu.js'; import { getNoteVersionsMenu } from '@/scripts/get-note-versions-menu.js'; import { useNoteCapture } from '@/scripts/use-note-capture.js'; @@ -264,6 +266,7 @@ import MkReactionIcon from '@/components/MkReactionIcon.vue'; import MkButton from '@/components/MkButton.vue'; import { boostMenuItems, type Visibility } from '@/scripts/boost-quote.js'; import { isEnabledUrlPreview } from '@/instance.js'; +import { type Keymap } from '@/scripts/hotkey.js'; const props = withDefaults(defineProps<{ note: Misskey.entities.Note; @@ -315,6 +318,7 @@ const quoteButton = shallowRef<HTMLElement>(); const clipButton = shallowRef<HTMLElement>(); const likeButton = shallowRef<HTMLElement>(); const appearNote = computed(() => isRenote ? note.value.renote as Misskey.entities.Note : note.value); +const galleryEl = shallowRef<InstanceType<typeof MkMediaList>>(); const isMyRenote = $i && ($i.id === note.value.userId); const showContent = ref(defaultStore.state.uncollapseCW); const isDeleted = ref(false); @@ -349,14 +353,31 @@ if ($i) { let renoting = false; +const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({ + type: 'lookup', + url: `https://${host}/notes/${appearNote.value.id}`, +})); + const keymap = { - 'r': () => reply(true), - 'e|a|plus': () => react(true), - '(q)': () => { if (canRenote.value && !renoted.value && !renoting) renote(defaultStore.state.visibilityOnBoost); }, - 'esc': blur, - 'm|o': () => showMenu(true), - 's': () => showContent.value !== showContent.value, -}; + 'r': () => reply(), + 'e|a|plus': () => react(), + 'q': () => { if (canRenote.value && !renoted.value && !renoting) renote(defaultStore.state.visibilityOnBoost); }, + 'm': () => showMenu(), + 'c': () => { + if (!defaultStore.state.showClipButtonInNoteFooter) return; + clip(); + }, + 'o': () => galleryEl.value?.openGallery(), + 'v|enter': () => { + if (appearNote.value.cw != null) { + showContent.value = !showContent.value; + } + }, + 'esc': { + allowRepeat: true, + callback: () => blur(), + }, +} as const satisfies Keymap; provide('react', (reaction: string) => { misskeyApi('notes/reactions/create', { @@ -416,12 +437,14 @@ useTooltip(renoteButton, async (showing) => { if (users.length < 1) return; - os.popup(MkUsersTooltip, { + const { dispose } = os.popup(MkUsersTooltip, { showing, users, count: appearNote.value.renoteCount, targetElement: renoteButton.value, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); }); useTooltip(quoteButton, async (showing) => { @@ -465,18 +488,20 @@ if (appearNote.value.reactionAcceptance === 'likeOnly') { if (users.length < 1) return; - os.popup(MkReactionsViewerDetails, { + const { dispose } = os.popup(MkReactionsViewerDetails, { showing, reaction: '❤️', users, count: appearNote.value.reactionCount, targetElement: reactButton.value!, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); }); } function renote(visibility: Visibility, localOnly: boolean = false) { - pleaseLogin(); + pleaseLogin(undefined, pleaseLoginContext.value); showMovedDialog(); renoting = true; @@ -569,20 +594,19 @@ function quote() { } } -function reply(viaKeyboard = false): void { - pleaseLogin(); +function reply(): void { + pleaseLogin(undefined, pleaseLoginContext.value); showMovedDialog(); os.post({ reply: appearNote.value, channel: appearNote.value.channel, - animation: !viaKeyboard, }).then(() => { focus(); }); } -function react(viaKeyboard = false): void { - pleaseLogin(); +function react(): void { + pleaseLogin(undefined, pleaseLoginContext.value); showMovedDialog(); if (appearNote.value.reactionAcceptance === 'likeOnly') { sound.playMisskeySfx('reaction'); @@ -591,12 +615,14 @@ function react(viaKeyboard = false): void { noteId: appearNote.value.id, override: defaultLike.value, }); - const el = reactButton.value as HTMLElement | null | undefined; + const el = reactButton.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'); + const { dispose } = os.popup(MkRippleEffect, { x, y }, { + end: () => dispose(), + }); } } else { blur(); @@ -687,11 +713,9 @@ function onContextmenu(ev: MouseEvent): void { } } -function showMenu(viaKeyboard = false): void { +function showMenu(): void { const { menu, cleanup } = getNoteMenu({ note: note.value, translating, translation, isDeleted }); - os.popupMenu(menu, menuButton.value, { - viaKeyboard, - }).then(focus).finally(cleanup); + os.popupMenu(menu, menuButton.value).then(focus).finally(cleanup); } async function menuVersions(viaKeyboard = false): Promise<void> { @@ -701,13 +725,13 @@ async function menuVersions(viaKeyboard = false): Promise<void> { }).then(focus).finally(cleanup); } -async function clip() { +async function clip(): Promise<void> { os.popupMenu(await getNoteClipMenu({ note: note.value, isDeleted }), clipButton.value).then(focus); } -function showRenoteMenu(viaKeyboard = false): void { +function showRenoteMenu(): void { if (!isMyRenote) return; - pleaseLogin(); + pleaseLogin(undefined, pleaseLoginContext.value); os.popupMenu([{ text: i18n.ts.unrenote, icon: 'ti ti-trash', @@ -718,9 +742,7 @@ function showRenoteMenu(viaKeyboard = false): void { }); isDeleted.value = true; }, - }], renoteTime.value, { - viaKeyboard: viaKeyboard, - }); + }], renoteTime.value); } function focus() { @@ -794,6 +816,28 @@ function animatedMFM() { transition: box-shadow 0.1s ease; overflow: clip; contain: content; + + &:focus-visible { + outline: none; + + &::after { + content: ""; + pointer-events: none; + display: block; + position: absolute; + z-index: 10; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + width: calc(100% - 8px); + height: calc(100% - 8px); + border: dashed 2px var(--focus); + border-radius: var(--radius); + box-sizing: border-box; + } + } } .footer { diff --git a/packages/frontend/src/components/MkNotePreview.vue b/packages/frontend/src/components/MkNotePreview.vue index a8853a8a5f..7ccc2c0320 100644 --- a/packages/frontend/src/components/MkNotePreview.vue +++ b/packages/frontend/src/components/MkNotePreview.vue @@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <div :class="$style.root"> - <MkAvatar :class="$style.avatar" :user="user" link preview/> + <MkAvatar :class="$style.avatar" :user="user"/> <div :class="$style.main"> <div :class="$style.header"> <MkUserName :user="user" :nowrap="true"/> diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue index 8917c685ca..9948676198 100644 --- a/packages/frontend/src/components/MkNotification.vue +++ b/packages/frontend/src/components/MkNotification.vue @@ -6,14 +6,14 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <div :class="$style.root"> <div :class="$style.head"> - <MkAvatar v-if="['pollEnded', 'note', 'edited'].includes(notification.type) && notification.note" :class="$style.icon" :user="notification.note.user" link preview/> + <MkAvatar v-if="['pollEnded', 'note', 'edited'].includes(notification.type) && 'note' in notification" :class="$style.icon" :user="notification.note.user" link preview/> <MkAvatar v-else-if="['roleAssigned', 'achievementEarned'].includes(notification.type)" :class="$style.icon" :user="$i" link preview/> <div v-else-if="notification.type === 'reaction:grouped' && notification.note.reactionAcceptance === 'likeOnly'" :class="[$style.icon, $style.icon_reactionGroup]"><i class="ph-smiley ph-bold ph-lg" style="line-height: 1;"></i></div> <div v-else-if="notification.type === 'reaction:grouped'" :class="[$style.icon, $style.icon_reactionGroup]"><i class="ph-smiley ph-bold ph-lg" style="line-height: 1;"></i></div> <div v-else-if="notification.type === 'renote:grouped'" :class="[$style.icon, $style.icon_renoteGroup]"><i class="ti ti-repeat" style="line-height: 1;"></i></div> <img v-else-if="notification.type === 'test'" :class="$style.icon" :src="infoImageUrl"/> - <MkAvatar v-else-if="notification.user" :class="$style.icon" :user="notification.user" link preview/> - <img v-else-if="notification.icon" :class="[$style.icon, $style.icon_app]" :src="notification.icon" alt=""/> + <MkAvatar v-else-if="'user' in notification" :class="$style.icon" :user="notification.user" link preview/> + <img v-else-if="'icon' in notification" :class="[$style.icon, $style.icon_app]" :src="notification.icon" alt=""/> <div :class="[$style.subIcon, { [$style.t_follow]: notification.type === 'follow', @@ -174,13 +174,13 @@ const props = withDefaults(defineProps<{ const followRequestDone = ref(false); const acceptFollowRequest = () => { - if (props.notification.user == null) return; + if (!('user' in props.notification)) return; followRequestDone.value = true; misskeyApi('following/requests/accept', { userId: props.notification.user.id }); }; const rejectFollowRequest = () => { - if (props.notification.user == null) return; + if (!('user' in props.notification)) return; followRequestDone.value = true; misskeyApi('following/requests/reject', { userId: props.notification.user.id }); }; @@ -353,7 +353,7 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification) margin-right: 4px; position: relative; - &:before { + &::before { position: absolute; transform: rotate(180deg); } diff --git a/packages/frontend/src/components/MkPagePreview.vue b/packages/frontend/src/components/MkPagePreview.vue index f6dc00698c..8559d4b96e 100644 --- a/packages/frontend/src/components/MkPagePreview.vue +++ b/packages/frontend/src/components/MkPagePreview.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj" tabindex="-1"> +<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj"> <div v-if="page.eyeCatchingImage" class="thumbnail"> <MediaImage :image="page.eyeCatchingImage" @@ -50,12 +50,29 @@ const props = defineProps<{ <style lang="scss" scoped> .vhpxefrj { display: block; + position: relative; &:hover { text-decoration: none; color: var(--accent); } + &:focus-within { + outline: none; + + &::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: var(--radius); + pointer-events: none; + box-shadow: inset 0 0 0 2px var(--focus); + } + } + > .thumbnail { & + article { border-radius: 0 0 var(--radius) var(--radius); diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue index ec57737b09..8f6109ca04 100644 --- a/packages/frontend/src/components/MkPageWindow.vue +++ b/packages/frontend/src/components/MkPageWindow.vue @@ -33,7 +33,7 @@ import { computed, onMounted, onUnmounted, provide, ref, shallowRef } from 'vue' import RouterView from '@/components/global/RouterView.vue'; import MkWindow from '@/components/MkWindow.vue'; import { popout as _popout } from '@/scripts/popout.js'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; import { url } from '@/config.js'; import { useScrollPositionManager } from '@/nirax.js'; import { i18n } from '@/i18n.js'; diff --git a/packages/frontend/src/components/MkPoll.vue b/packages/frontend/src/components/MkPoll.vue index ba0013ec7d..393ac4efba 100644 --- a/packages/frontend/src/components/MkPoll.vue +++ b/packages/frontend/src/components/MkPoll.vue @@ -36,7 +36,9 @@ import { pleaseLogin } from '@/scripts/please-login.js'; import * as os from '@/os.js'; import { misskeyApi } from '@/scripts/misskey-api.js'; import { i18n } from '@/i18n.js'; +import { host } from '@/config.js'; import { useInterval } from '@/scripts/use-interval.js'; +import type { OpenOnRemoteOptions } from '@/scripts/please-login.js'; const props = defineProps<{ noteId: string; @@ -62,6 +64,11 @@ const timer = computed(() => i18n.tsx._poll[ const showResult = ref(props.readOnly || isVoted.value); +const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({ + type: 'lookup', + url: `https://${host}/notes/${props.noteId}`, +})); + // 期限付きアンケート if (props.poll.expiresAt) { const tick = () => { @@ -78,7 +85,7 @@ if (props.poll.expiresAt) { } const vote = async (id) => { - pleaseLogin(); + pleaseLogin(undefined, pleaseLoginContext.value); if (props.readOnly || closed.value || isVoted.value) return; if (!props.poll.multiple) { diff --git a/packages/frontend/src/components/MkPollEditor.vue b/packages/frontend/src/components/MkPollEditor.vue index db74354bbb..3726ddf822 100644 --- a/packages/frontend/src/components/MkPollEditor.vue +++ b/packages/frontend/src/components/MkPollEditor.vue @@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only </MkInput> </section> <section v-else-if="expiration === 'after'"> - <MkInput v-model="after" small type="number" class="input"> + <MkInput v-model="after" small type="number" min="1" class="input"> <template #label>{{ i18n.ts._poll.duration }}</template> </MkInput> <MkSelect v-model="unit" small> diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue index 3748f0cc64..ff29b66193 100644 --- a/packages/frontend/src/components/MkPopupMenu.vue +++ b/packages/frontend/src/components/MkPopupMenu.vue @@ -4,8 +4,8 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<MkModal ref="modal" v-slot="{ type, maxHeight }" :manualShowing="manualShowing" :zPriority="'high'" :src="src" :transparentBg="true" @click="click" @close="onModalClose" @closed="onModalClosed"> - <MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :asDrawer="type === 'drawer'" :class="{ [$style.drawer]: type === 'drawer' }" @close="onMenuClose" @hide="hide"/> +<MkModal ref="modal" v-slot="{ type, maxHeight }" :manualShowing="manualShowing" :zPriority="'high'" :src="src" :transparentBg="true" :returnFocusTo="returnFocusTo" @click="click" @close="onModalClose" @closed="onModalClosed"> + <MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :asDrawer="type === 'drawer'" :returnFocusTo="returnFocusTo" :class="{ [$style.drawer]: type === 'drawer' }" @close="onMenuClose" @hide="hide"/> </MkModal> </template> @@ -19,8 +19,8 @@ defineProps<{ items: MenuItem[]; align?: 'center' | string; width?: number; - viaKeyboard?: boolean; src?: any; + returnFocusTo?: HTMLElement | null; }>(); const emit = defineEmits<{ diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue index 78df70ca5c..d778bc046c 100644 --- a/packages/frontend/src/components/MkPostForm.vue +++ b/packages/frontend/src/components/MkPostForm.vue @@ -261,7 +261,7 @@ const canPost = computed((): boolean => { 1 <= files.value.length || poll.value != null || props.renote != null || - (props.reply != null && quoteId.value != null) + quoteId.value != null ) && (textLength.value <= maxTextLength.value) && (!poll.value || poll.value.choices.length >= 2); @@ -369,6 +369,8 @@ function watchForDraft() { watch(files, () => saveDraft(), { deep: true }); watch(visibility, () => saveDraft()); watch(localOnly, () => saveDraft()); + watch(quoteId, () => saveDraft()); + watch(reactionAcceptance, () => saveDraft()); } function MFMWindow() { @@ -469,7 +471,7 @@ function setVisibility() { return; } - os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), { currentVisibility: visibility.value, isSilenced: $i.isSilenced, localOnly: localOnly.value, @@ -482,7 +484,8 @@ function setVisibility() { defaultStore.set('visibility', visibility.value); } }, - }, 'closed'); + closed: () => dispose(), + }); } async function toggleLocalOnly() { @@ -575,6 +578,7 @@ function clear() { function onKeydown(ev: KeyboardEvent) { if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey) && canPost.value) post(); + if (ev.key === 'Escape') emit('esc'); } @@ -630,8 +634,8 @@ async function onPaste(ev: ClipboardEvent) { return; } - const fileName = formatTimeString(new Date(), defaultStore.state.pastedFileName).replace(/{{number}}/g, "0"); - const file = new File([paste], `${fileName}.txt`, { type: "text/plain" }); + 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`); }); } @@ -707,6 +711,8 @@ function saveDraft() { files: files.value, poll: poll.value, visibleUserIds: visibility.value === 'specified' ? visibleUsers.value.map(x => x.id) : undefined, + quoteId: quoteId.value, + reactionAcceptance: reactionAcceptance.value, }, }; @@ -737,7 +743,9 @@ async function post(ev?: MouseEvent) { const rect = el.getBoundingClientRect(); const x = rect.left + (el.offsetWidth / 2); const y = rect.top + (el.offsetHeight / 2); - os.popup(MkRippleEffect, { x, y }, {}, 'end'); + const { dispose } = os.popup(MkRippleEffect, { x, y }, { + end: () => dispose(), + }); } } @@ -930,10 +938,23 @@ async function insertEmoji(ev: MouseEvent) { textAreaReadOnly.value = true; const target = ev.currentTarget ?? ev.target; if (target == null) return; + + // emojiPickerはダイアログが閉じずにtextareaとやりとりするので、 + // focustrapをかけているとinsertTextAtCursorが効かない + // そのため、投稿フォームのテキストに直接注入する + // See: https://github.com/misskey-dev/misskey/pull/14282 + // https://github.com/misskey-dev/misskey/issues/14274 + + let pos = textareaEl.value?.selectionStart ?? 0; + let posEnd = textareaEl.value?.selectionEnd ?? text.value.length; emojiPicker.show( target as HTMLElement, emoji => { - insertTextAtCursor(textareaEl.value, emoji); + const textBefore = text.value.substring(0, pos); + const textAfter = text.value.substring(posEnd); + text.value = textBefore + emoji + textAfter; + pos += emoji.length; + posEnd += emoji.length; }, () => { textAreaReadOnly.value = false; @@ -1026,6 +1047,8 @@ onMounted(() => { users.forEach(u => pushVisibleUser(u)); }); } + quoteId.value = draft.data.quoteId; + reactionAcceptance.value = draft.data.reactionAcceptance; } } @@ -1033,9 +1056,11 @@ onMounted(() => { if (props.initialNote) { const init = props.initialNote; text.value = init.text ? init.text : ''; - files.value = init.files ?? []; - cw.value = init.cw ?? null; useCw.value = init.cw != null; + cw.value = init.cw ?? null; + visibility.value = init.visibility; + localOnly.value = init.localOnly ?? false; + files.value = init.files ?? []; if (init.poll) { poll.value = { choices: init.poll.choices.map(x => x.text), @@ -1044,9 +1069,13 @@ onMounted(() => { expiredAfter: null, }; } - visibility.value = init.visibility; - localOnly.value = init.localOnly ?? false; + if (init.visibleUserIds) { + misskeyApi('users/show', { userIds: init.visibleUserIds }).then(users => { + users.forEach(u => pushVisibleUser(u)); + }); + } quoteId.value = init.renote ? init.renote.id : null; + reactionAcceptance.value = init.reactionAcceptance; } nextTick(() => watchForDraft()); @@ -1119,6 +1148,15 @@ defineExpose({ margin: 12px 12px 12px 6px; vertical-align: bottom; + &:focus-visible { + outline: none; + + .submitInner { + outline: 2px solid var(--fgOnAccent); + outline-offset: -4px; + } + } + &:disabled { opacity: 0.7; } diff --git a/packages/frontend/src/components/MkPostFormAttaches.vue b/packages/frontend/src/components/MkPostFormAttaches.vue index a979cbc59f..a3fb7c691f 100644 --- a/packages/frontend/src/components/MkPostFormAttaches.vue +++ b/packages/frontend/src/components/MkPostFormAttaches.vue @@ -108,7 +108,7 @@ async function rename(file) { async function describe(file) { if (mock) return; - os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), { default: file.comment !== null ? file.comment : '', file: file, }, { @@ -121,7 +121,8 @@ async function describe(file) { file.comment = comment; }); }, - }, 'closed'); + closed: () => dispose(), + }); } async function crop(file: Misskey.entities.DriveFile): Promise<void> { diff --git a/packages/frontend/src/components/MkPostFormDialog.vue b/packages/frontend/src/components/MkPostFormDialog.vue index ad990e21db..947c0ee4d0 100644 --- a/packages/frontend/src/components/MkPostFormDialog.vue +++ b/packages/frontend/src/components/MkPostFormDialog.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<MkModal ref="modal" :preferType="'dialog'" @click="modal?.close()" @closed="onModalClosed()"> +<MkModal ref="modal" :preferType="'dialog'" @click="modal?.close()" @closed="onModalClosed()" @esc="modal?.close()"> <MkPostForm ref="form" :class="$style.form" v-bind="props" autofocus freezeAfterPosted @posted="onPosted" @cancel="modal?.close()" @esc="modal?.close()"/> </MkModal> </template> diff --git a/packages/frontend/src/components/MkPreview.vue b/packages/frontend/src/components/MkPreview.vue new file mode 100644 index 0000000000..d950d66c6e --- /dev/null +++ b/packages/frontend/src/components/MkPreview.vue @@ -0,0 +1,150 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<div :class="$style.preview"> + <div :class="$style.preview__content1"> + <MkInput v-model="text"> + <template #label>Text</template> + </MkInput> + <MkSwitch v-model="flag" :class="$style.preview__content1__switch_button"> + <span>Switch is now {{ flag ? 'on' : 'off' }}</span> + </MkSwitch> + <div :class="$style.preview__content1__input"> + <MkRadio v-model="radio" value="misskey">Misskey</MkRadio> + <MkRadio v-model="radio" value="mastodon">Mastodon</MkRadio> + <MkRadio v-model="radio" value="pleroma">Pleroma</MkRadio> + </div> + <div :class="$style.preview__content1__button"> + <MkButton inline>This is</MkButton> + <MkButton inline primary>the button</MkButton> + </div> + </div> + <div :class="$style.preview__content2" style="pointer-events: none;"> + <Mfm :text="mfm"/> + </div> + <div :class="$style.preview__content3"> + <MkButton inline primary @click="openMenu">Open menu</MkButton> + <MkButton inline primary @click="openDialog">Open dialog</MkButton> + <MkButton inline primary @click="openForm">Open form</MkButton> + <MkButton inline primary @click="openDrive">Open drive</MkButton> + </div> +</div> +</template> + +<script lang="ts" setup> +import { ref } from 'vue'; +import MkButton from '@/components/MkButton.vue'; +import MkInput from '@/components/MkInput.vue'; +import MkSwitch from '@/components/MkSwitch.vue'; +import MkTextarea from '@/components/MkTextarea.vue'; +import MkRadio from '@/components/MkRadio.vue'; +import * as os from '@/os.js'; +import * as config from '@/config.js'; +import { $i } from '@/account.js'; + +const text = ref(''); +const flag = ref(true); +const radio = ref('misskey'); +const mfm = ref(`Hello world! This is an @example mention. BTW you are @${$i ? $i.username : 'guest'}.\nAlso, here is ${config.url} and [example link](${config.url}). for more details, see https://example.com.\nAs you know #misskey is open-source software.`); + +const openDialog = async () => { + await os.alert({ + type: 'warning', + title: 'Oh my Aichan', + text: 'Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + }); +}; + +const openForm = async () => { + await os.form('Example form', { + foo: { + type: 'boolean', + default: true, + label: 'This is a boolean property', + }, + bar: { + type: 'number', + default: 300, + label: 'This is a number property', + }, + baz: { + type: 'string', + default: 'Misskey makes you happy.', + label: 'This is a string property', + }, + }); +}; + +const openDrive = async () => { + await os.selectDriveFile(false); +}; + +const selectUser = async () => { + await os.selectUser(); +}; + +const openMenu = async (ev: Event) => { + os.popupMenu([{ + type: 'label', + text: 'Fruits', + }, { + text: 'Create some apples', + action: () => {}, + }, { + text: 'Read some oranges', + action: () => {}, + }, { + text: 'Update some melons', + action: () => {}, + }, { + text: 'Delete some bananas', + danger: true, + action: () => {}, + }], ev.currentTarget ?? ev.target); +}; +</script> + +<style lang="scss" module> +.preview { + padding: 16px; + + &__content1 { + + &__switch_button { + padding: 16px 0 8px 0; + } + + &__input { + padding: 8px 0 8px 0; + + div { + margin: 0 8px 8px 0; + } + } + + &__button { + padding: 4px 0 8px 0; + + button { + margin: 0 8px 8px 0; + } + } + } + + &__content2 { + padding: 8px 0 8px 0; + } + + &__content3 { + padding: 8px 0 8px 0; + + button { + margin: 0 8px 8px 0; + + } + } +} +</style> diff --git a/packages/frontend/src/components/MkRadio.vue b/packages/frontend/src/components/MkRadio.vue index 0b4023f254..e02f76a58f 100644 --- a/packages/frontend/src/components/MkRadio.vue +++ b/packages/frontend/src/components/MkRadio.vue @@ -9,6 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only :class="[$style.root, { [$style.disabled]: disabled, [$style.checked]: checked }]" :aria-checked="checked" :aria-disabled="disabled" + role="checkbox" @click="toggle" > <input @@ -69,6 +70,11 @@ function toggle(): void { border-color: var(--inputBorderHover) !important; } + &:focus-within { + outline: none; + box-shadow: 0 0 0 2px var(--focus); + } + &.checked { background-color: var(--accentedBg) !important; border-color: var(--accentedBg) !important; @@ -78,7 +84,7 @@ function toggle(): void { > .button { border-color: var(--accent); - &:after { + &::after { background-color: var(--accent); transform: scale(1); opacity: 1; @@ -104,7 +110,7 @@ function toggle(): void { border-radius: var(--radius-full); transition: inherit; - &:after { + &::after { content: ''; display: block; position: absolute; diff --git a/packages/frontend/src/components/MkRadios.vue b/packages/frontend/src/components/MkRadios.vue index 549438f61b..705c93f770 100644 --- a/packages/frontend/src/components/MkRadios.vue +++ b/packages/frontend/src/components/MkRadios.vue @@ -29,6 +29,9 @@ export default defineComponent({ // なぜかFragmentになることがあるため if (options.length === 1 && options[0].props == null) options = options[0].children as VNode[]; + // vnodeのうちv-if=falseなものを除外する(trueになるものはoptionなど他typeになる) + options = options.filter(vnode => !(typeof vnode.type === 'symbol' && vnode.type.description === 'v-cmt' && vnode.children === 'v-if')); + return () => h('div', { class: 'novjtcto', }, [ @@ -40,6 +43,7 @@ export default defineComponent({ }, options.map(option => h(MkRadio, { key: option.key as string, value: option.props?.value, + disabled: option.props?.disabled, modelValue: value.value, 'onUpdate:modelValue': _v => value.value = _v, }, () => option.children)), diff --git a/packages/frontend/src/components/MkRange.vue b/packages/frontend/src/components/MkRange.vue index 46d76e2551..244fcdceae 100644 --- a/packages/frontend/src/components/MkRange.vue +++ b/packages/frontend/src/components/MkRange.vue @@ -101,17 +101,19 @@ const steps = computed(() => { } }); -const onMousedown = (ev: MouseEvent | TouchEvent) => { +function onMousedown(ev: MouseEvent | TouchEvent) { ev.preventDefault(); const tooltipShowing = ref(true); - os.popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), { showing: tooltipShowing, text: computed(() => { return props.textConverter(finalValue.value); }), targetElement: thumbEl, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); const style = document.createElement('style'); style.appendChild(document.createTextNode('* { cursor: grabbing !important; } body * { pointer-events: none !important; }')); @@ -152,7 +154,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => { window.addEventListener('touchmove', onDrag); window.addEventListener('mouseup', onMouseup, { once: true }); window.addEventListener('touchend', onMouseup, { once: true }); -}; +} </script> <style lang="scss" scoped> diff --git a/packages/frontend/src/components/MkReactionIcon.vue b/packages/frontend/src/components/MkReactionIcon.vue index 068a2968db..c0cbd8a65d 100644 --- a/packages/frontend/src/components/MkReactionIcon.vue +++ b/packages/frontend/src/components/MkReactionIcon.vue @@ -24,11 +24,13 @@ const elRef = shallowRef(); if (props.withTooltip) { useTooltip(elRef, (showing) => { - os.popup(defineAsyncComponent(() => import('@/components/MkReactionTooltip.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkReactionTooltip.vue')), { showing, reaction: props.reaction.replace(/^:(\w+):$/, ':$1@.:'), targetElement: elRef.value.$el, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); }); } </script> diff --git a/packages/frontend/src/components/MkReactionsViewer.details.vue b/packages/frontend/src/components/MkReactionsViewer.details.vue index 8b5e6efdf3..60118fadd2 100644 --- a/packages/frontend/src/components/MkReactionsViewer.details.vue +++ b/packages/frontend/src/components/MkReactionsViewer.details.vue @@ -81,6 +81,7 @@ function getReactionName(reaction: string): string { } .user { + display: flex; line-height: 24px; padding-top: 4px; white-space: nowrap; diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue index f74f5ec21c..6506035f8f 100644 --- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue +++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue @@ -114,10 +114,12 @@ async function menu(ev) { text: i18n.ts.info, icon: 'ti ti-info-circle', action: async () => { - os.popup(MkCustomEmojiDetailedDialog, { + const { dispose } = os.popup(MkCustomEmojiDetailedDialog, { emoji: await misskeyApiGet('emoji', { name: props.reaction.replace(/:/g, '').replace(/@\./, ''), }), + }, { + closed: () => dispose(), }); }, }], ev.currentTarget ?? ev.target); @@ -129,7 +131,9 @@ function anime() { const rect = buttonEl.value.getBoundingClientRect(); const x = rect.left + 16; const y = rect.top + (buttonEl.value.offsetHeight / 2); - os.popup(MkReactionEffect, { reaction: props.reaction, x, y }, {}, 'end'); + const { dispose } = os.popup(MkReactionEffect, { reaction: props.reaction, x, y }, { + end: () => dispose(), + }); } watch(() => props.count, (newCount, oldCount) => { @@ -151,13 +155,15 @@ if (!mock) { const users = reactions.map(x => x.user); - os.popup(XDetails, { + const { dispose } = os.popup(XDetails, { showing, reaction: props.reaction, users, count: props.count, targetElement: buttonEl.value, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); }, 100); } </script> diff --git a/packages/frontend/src/components/MkSelect.vue b/packages/frontend/src/components/MkSelect.vue index 76bc3e8c0c..8254ac83cf 100644 --- a/packages/frontend/src/components/MkSelect.vue +++ b/packages/frontend/src/components/MkSelect.vue @@ -6,20 +6,29 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <div> <div :class="$style.label" @click="focus"><slot name="label"></slot></div> - <div ref="container" :class="[$style.input, { [$style.inline]: inline, [$style.disabled]: disabled, [$style.focused]: focused }]" @mousedown.prevent="show"> + <div + ref="container" + tabindex="0" + :class="[$style.input, { [$style.inline]: inline, [$style.disabled]: disabled, [$style.focused]: focused || opening }]" + @focus="focused = true" + @blur="focused = false" + @mousedown.prevent="show" + @keydown.space.enter="show" + > <div ref="prefixEl" :class="$style.prefix"><slot name="prefix"></slot></div> <select ref="inputEl" v-model="v" v-adaptive-border + tabindex="-1" :class="$style.inputCore" :disabled="disabled" :required="required" :readonly="readonly" :placeholder="placeholder" - @focus="focused = true" - @blur="focused = false" @input="onInput" + @mousedown.prevent="() => {}" + @keydown.prevent="() => {}" > <slot></slot> </select> @@ -75,7 +84,7 @@ const height = props.large ? 39 : 36; -const focus = () => inputEl.value?.focus(); +const focus = () => container.value?.focus(); const onInput = (ev) => { changed.value = true; }; @@ -126,7 +135,9 @@ onMounted(() => { }); function show() { - focused.value = true; + if (opening.value) return; + focus(); + opening.value = true; const menu: MenuItem[] = []; @@ -173,8 +184,6 @@ function show() { onClosing: () => { opening.value = false; }, - }).then(() => { - focused.value = false; }); } </script> @@ -225,6 +234,10 @@ function show() { } } + &:focus { + outline: none; + } + &:hover { > .inputCore { border-color: var(--inputBorderHover) !important; diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue index a46a35c45c..42fa2bf4a7 100644 --- a/packages/frontend/src/components/MkSignin.vue +++ b/packages/frontend/src/components/MkSignin.vue @@ -6,10 +6,23 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <form :class="{ signing, totpLogin }" @submit.prevent="onSubmit"> <div class="_gaps_m"> - <div v-show="withAvatar" :class="$style.avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : undefined, marginBottom: message ? '1.5em' : undefined }"></div> + <div v-show="withAvatar" :class="$style.avatar" :style="{ backgroundImage: user ? `url('${user.avatarUrl}')` : undefined, marginBottom: message ? '1.5em' : undefined }"></div> <MkInfo v-if="message"> {{ message }} </MkInfo> + <div v-if="openOnRemote" class="_gaps_m"> + <div class="_gaps_s"> + <MkButton type="button" rounded primary style="margin: 0 auto;" @click="openRemote(openOnRemote)"> + {{ i18n.ts.continueOnRemote }} <i class="ti ti-external-link"></i> + </MkButton> + <button type="button" class="_button" :class="$style.instanceManualSelectButton" @click="specifyHostAndOpenRemote(openOnRemote)"> + {{ i18n.ts.specifyServerHost }} + </button> + </div> + <div :class="$style.orHr"> + <p :class="$style.orMsg">{{ i18n.ts.or }}</p> + </div> + </div> <div v-if="!totpLogin" class="normal-signin _gaps_m"> <MkInput v-model="username" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autocomplete="username webauthn" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange"> <template #prefix>@</template> @@ -28,8 +41,8 @@ SPDX-License-Identifier: AGPL-3.0-only {{ i18n.ts.retry }} </MkButton> </div> - <div v-if="user && user.securityKeys" class="or-hr"> - <p class="or-msg">{{ i18n.ts.or }}</p> + <div v-if="user && user.securityKeys" :class="$style.orHr"> + <p :class="$style.orMsg">{{ i18n.ts.or }}</p> </div> <div class="twofa-group totp-group _gaps"> <MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" autocomplete="current-password" :withPasswordToggle="true" required> @@ -53,6 +66,7 @@ import { defineAsyncComponent, ref } from 'vue'; import { toUnicode } from 'punycode/'; import * as Misskey from 'misskey-js'; import { supported as webAuthnSupported, get as webAuthnRequest, parseRequestOptionsFromJSON } from '@github/webauthn-json/browser-ponyfill'; +import type { OpenOnRemoteOptions } from '@/scripts/please-login.js'; import { showSuspendedDialog } from '@/scripts/show-suspended-dialog.js'; import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/MkInput.vue'; @@ -60,6 +74,7 @@ import MkInfo from '@/components/MkInfo.vue'; import { host as configHost } from '@/config.js'; import * as os from '@/os.js'; import { misskeyApi } from '@/scripts/misskey-api.js'; +import { query, extractDomain } from '@/scripts/url.js'; import { login } from '@/account.js'; import { i18n } from '@/i18n.js'; @@ -72,28 +87,22 @@ const host = ref(toUnicode(configHost)); const totpLogin = ref(false); const isBackupCode = ref(false); const queryingKey = ref(false); -const credentialRequest = ref<CredentialRequestOptions | null>(null); +let credentialRequest: CredentialRequestOptions | null = null; const emit = defineEmits<{ (ev: 'login', v: any): void; }>(); -const props = defineProps({ - withAvatar: { - type: Boolean, - required: false, - default: true, - }, - autoSet: { - type: Boolean, - required: false, - default: false, - }, - message: { - type: String, - required: false, - default: '', - }, +const props = withDefaults(defineProps<{ + withAvatar?: boolean; + autoSet?: boolean; + message?: string, + openOnRemote?: OpenOnRemoteOptions, +}>(), { + withAvatar: true, + autoSet: false, + message: '', + openOnRemote: undefined, }); function onUsernameChange(): void { @@ -113,14 +122,14 @@ function onLogin(res: any): Promise<void> | void { } async function queryKey(): Promise<void> { - if (credentialRequest.value == null) return; + if (credentialRequest == null) return; queryingKey.value = true; - await webAuthnRequest(credentialRequest.value) + await webAuthnRequest(credentialRequest) .catch(() => { queryingKey.value = false; return Promise.reject(null); }).then(credential => { - credentialRequest.value = null; + credentialRequest = null; queryingKey.value = false; signing.value = true; return misskeyApi('signin', { @@ -151,7 +160,7 @@ function onSubmit(): void { }).then(res => { totpLogin.value = true; signing.value = false; - credentialRequest.value = parseRequestOptionsFromJSON({ + credentialRequest = parseRequestOptionsFromJSON({ publicKey: res, }); }) @@ -218,8 +227,65 @@ function loginFailed(err: any): void { } function resetPassword(): void { - os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, { - }, 'closed'); + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, { + closed: () => dispose(), + }); +} + +function openRemote(options: OpenOnRemoteOptions, targetHost?: string): void { + switch (options.type) { + case 'web': + case 'lookup': { + let _path: string; + + if (options.type === 'lookup') { + // TODO: v2024.7.0以降が浸透してきたら正式なURLに変更する▼ + // _path = `/lookup?uri=${encodeURIComponent(_path)}`; + _path = `/authorize-follow?acct=${encodeURIComponent(options.url)}`; + } else { + _path = options.path; + } + + if (targetHost) { + window.open(`https://${targetHost}${_path}`, '_blank', 'noopener'); + } else { + window.open(`https://misskey-hub.net/mi-web/?path=${encodeURIComponent(_path)}`, '_blank', 'noopener'); + } + break; + } + case 'share': { + const params = query(options.params); + if (targetHost) { + window.open(`https://${targetHost}/share?${params}`, '_blank', 'noopener'); + } else { + window.open(`https://misskey-hub.net/share/?${params}`, '_blank', 'noopener'); + } + break; + } + } +} + +async function specifyHostAndOpenRemote(options: OpenOnRemoteOptions): Promise<void> { + const { canceled, result: hostTemp } = await os.inputText({ + title: i18n.ts.inputHostName, + placeholder: 'misskey.example.com', + }); + + if (canceled) return; + + let targetHost: string | null = hostTemp; + + // ドメイン部分だけを取り出す + targetHost = extractDomain(targetHost); + if (targetHost == null) { + os.alert({ + type: 'error', + title: i18n.ts.invalidValue, + text: i18n.ts.tryAgain, + }); + return; + } + openRemote(options, targetHost); } </script> @@ -233,4 +299,36 @@ function resetPassword(): void { background-size: cover; border-radius: var(--radius-full); } + +.instanceManualSelectButton { + display: block; + text-align: center; + opacity: .7; + font-size: .8em; + + &:hover { + text-decoration: underline; + } +} + +.orHr { + position: relative; + margin: .4em auto; + width: 100%; + height: 1px; + background: var(--divider); +} + +.orMsg { + position: absolute; + top: -.6em; + display: inline-block; + padding: 0 1em; + background: var(--panel); + font-size: 0.8em; + color: var(--fgOnPanel); + margin: 0; + left: 50%; + transform: translateX(-50%); +} </style> diff --git a/packages/frontend/src/components/MkSigninDialog.vue b/packages/frontend/src/components/MkSigninDialog.vue index 33355bb99e..524c62b4d3 100644 --- a/packages/frontend/src/components/MkSigninDialog.vue +++ b/packages/frontend/src/components/MkSigninDialog.vue @@ -6,21 +6,22 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <MkModalWindow ref="dialog" - :width="370" - :height="400" + :width="400" + :height="430" @close="onClose" @closed="emit('closed')" > <template #header>{{ i18n.ts.login }}</template> <MkSpacer :marginMin="20" :marginMax="28"> - <MkSignin :autoSet="autoSet" :message="message" @login="onLogin"/> + <MkSignin :autoSet="autoSet" :message="message" :openOnRemote="openOnRemote" @login="onLogin"/> </MkSpacer> </MkModalWindow> </template> <script lang="ts" setup> import { shallowRef } from 'vue'; +import type { OpenOnRemoteOptions } from '@/scripts/please-login.js'; import MkSignin from '@/components/MkSignin.vue'; import MkModalWindow from '@/components/MkModalWindow.vue'; import { i18n } from '@/i18n.js'; @@ -28,9 +29,11 @@ import { i18n } from '@/i18n.js'; withDefaults(defineProps<{ autoSet?: boolean; message?: string, + openOnRemote?: OpenOnRemoteOptions, }>(), { autoSet: false, message: '', + openOnRemote: undefined, }); const emit = defineEmits<{ diff --git a/packages/frontend/src/components/MkSuperMenu.vue b/packages/frontend/src/components/MkSuperMenu.vue index 2a7c72ccd9..041ae88109 100644 --- a/packages/frontend/src/components/MkSuperMenu.vue +++ b/packages/frontend/src/components/MkSuperMenu.vue @@ -10,15 +10,15 @@ SPDX-License-Identifier: AGPL-3.0-only <div class="items"> <template v-for="(item, i) in group.items"> - <a v-if="item.type === 'a'" :href="item.href" :target="item.target" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }"> + <a v-if="item.type === 'a'" :href="item.href" :target="item.target" class="_button item" :class="{ danger: item.danger, active: item.active }"> <span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span> <span class="text">{{ item.text }}</span> </a> - <button v-else-if="item.type === 'button'" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="ev => item.action(ev)"> + <button v-else-if="item.type === 'button'" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="ev => item.action(ev)"> <span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span> <span class="text">{{ item.text }}</span> </button> - <MkA v-else :to="item.to" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }"> + <MkA v-else :to="item.to" class="_button item" :class="{ danger: item.danger, active: item.active }"> <span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span> <span class="text">{{ item.text }}</span> </MkA> @@ -67,6 +67,10 @@ defineProps<{ background: var(--panelHighlight); } + &:focus-visible { + outline-offset: -2px; + } + &.active { color: var(--accent); background: var(--accentedBg); diff --git a/packages/frontend/src/components/MkSwitch.vue b/packages/frontend/src/components/MkSwitch.vue index a19b45448b..a0994d9cc9 100644 --- a/packages/frontend/src/components/MkSwitch.vue +++ b/packages/frontend/src/components/MkSwitch.vue @@ -10,10 +10,10 @@ SPDX-License-Identifier: AGPL-3.0-only type="checkbox" :disabled="disabled" :class="$style.input" - @keydown.enter="toggle" + @click="toggle" > - <XButton :checked="checked" :disabled="disabled" @toggle="toggle"/> - <span :class="$style.body"> + <XButton :class="$style.toggle" :checked="checked" :disabled="disabled" @toggle="toggle"/> + <span v-if="!noBody" :class="$style.body"> <!-- TODO: 無名slotの方は廃止 --> <span :class="$style.label"> <span @click="toggle"> @@ -34,16 +34,19 @@ const props = defineProps<{ modelValue: boolean | Ref<boolean>; disabled?: boolean; helpText?: string; + noBody?: boolean; }>(); const emit = defineEmits<{ (ev: 'update:modelValue', v: boolean): void; + (ev: 'change', v: boolean): void; }>(); const checked = toRefs(props).modelValue; const toggle = () => { if (props.disabled) return; emit('update:modelValue', !checked.value); + emit('change', !checked.value); }; </script> @@ -72,7 +75,13 @@ const toggle = () => { height: 0; opacity: 0; margin: 0; + + &:focus-visible ~ .toggle { + outline: 2px solid var(--focus); + outline-offset: 2px; + } } + .body { margin-left: 12px; margin-top: 2px; diff --git a/packages/frontend/src/components/MkSystemWebhookEditor.impl.ts b/packages/frontend/src/components/MkSystemWebhookEditor.impl.ts new file mode 100644 index 0000000000..69b8edd85a --- /dev/null +++ b/packages/frontend/src/components/MkSystemWebhookEditor.impl.ts @@ -0,0 +1,46 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { defineAsyncComponent } from 'vue'; +import * as os from '@/os.js'; + +export type SystemWebhookEventType = 'abuseReport' | 'abuseReportResolved'; + +export type MkSystemWebhookEditorProps = { + mode: 'create' | 'edit'; + id?: string; + requiredEvents?: SystemWebhookEventType[]; +}; + +export type MkSystemWebhookResult = { + id?: string; + isActive: boolean; + name: string; + on: SystemWebhookEventType[]; + url: string; + secret: string; +}; + +export async function showSystemWebhookEditorDialog(props: MkSystemWebhookEditorProps): Promise<MkSystemWebhookResult | null> { + const { result } = await new Promise<{ result: MkSystemWebhookResult | null }>(async resolve => { + const { dispose } = os.popup( + defineAsyncComponent(() => import('@/components/MkSystemWebhookEditor.vue')), + props, + { + submitted: (ev: MkSystemWebhookResult) => { + resolve({ result: ev }); + }, + canceled: () => { + resolve({ result: null }); + }, + closed: () => { + dispose(); + }, + }, + ); + }); + + return result; +} diff --git a/packages/frontend/src/components/MkSystemWebhookEditor.vue b/packages/frontend/src/components/MkSystemWebhookEditor.vue new file mode 100644 index 0000000000..f5c7a3160b --- /dev/null +++ b/packages/frontend/src/components/MkSystemWebhookEditor.vue @@ -0,0 +1,238 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<MkModalWindow + ref="dialogEl" + :width="450" + :height="590" + :canClose="true" + :withOkButton="false" + :okButtonDisabled="false" + @click="onCancelClicked" + @close="onCancelClicked" + @closed="emit('closed')" +> + <template #header> + {{ mode === 'create' ? i18n.ts._webhookSettings.createWebhook : i18n.ts._webhookSettings.modifyWebhook }} + </template> + + <div style="display: flex; flex-direction: column; min-height: 100%;"> + <MkSpacer :marginMin="20" :marginMax="28" style="flex-grow: 1;"> + <MkLoading v-if="loading !== 0"/> + <div v-else :class="$style.root" class="_gaps_m"> + <MkInput v-model="title"> + <template #label>{{ i18n.ts._webhookSettings.name }}</template> + </MkInput> + <MkInput v-model="url"> + <template #label>URL</template> + </MkInput> + <MkInput v-model="secret"> + <template #label>{{ i18n.ts._webhookSettings.secret }}</template> + </MkInput> + <MkFolder :defaultOpen="true"> + <template #label>{{ i18n.ts._webhookSettings.trigger }}</template> + + <div class="_gaps_s"> + <MkSwitch v-model="events.abuseReport" :disabled="disabledEvents.abuseReport"> + <template #label>{{ i18n.ts._webhookSettings._systemEvents.abuseReport }}</template> + </MkSwitch> + <MkSwitch v-model="events.abuseReportResolved" :disabled="disabledEvents.abuseReportResolved"> + <template #label>{{ i18n.ts._webhookSettings._systemEvents.abuseReportResolved }}</template> + </MkSwitch> + <MkSwitch v-model="events.userCreated" :disabled="disabledEvents.userCreated"> + <template #label>{{ i18n.ts._webhookSettings._systemEvents.userCreated }}</template> + </MkSwitch> + </div> + </MkFolder> + + <MkSwitch v-model="isActive"> + <template #label>{{ i18n.ts.enable }}</template> + </MkSwitch> + </div> + </MkSpacer> + <div :class="$style.footer" class="_buttonsCenter"> + <MkButton primary rounded :disabled="disableSubmitButton" @click="onSubmitClicked"> + <i class="ti ti-check"></i> + {{ i18n.ts.ok }} + </MkButton> + <MkButton rounded @click="onCancelClicked"><i class="ti ti-x"></i> {{ i18n.ts.cancel }}</MkButton> + </div> + </div> +</MkModalWindow> +</template> + +<script setup lang="ts"> +import { computed, onMounted, ref, shallowRef, toRefs } from 'vue'; +import MkInput from '@/components/MkInput.vue'; +import MkSwitch from '@/components/MkSwitch.vue'; +import { + MkSystemWebhookEditorProps, + MkSystemWebhookResult, + SystemWebhookEventType, +} from '@/components/MkSystemWebhookEditor.impl.js'; +import { i18n } from '@/i18n.js'; +import MkButton from '@/components/MkButton.vue'; +import { misskeyApi } from '@/scripts/misskey-api.js'; +import MkModalWindow from '@/components/MkModalWindow.vue'; +import MkFolder from '@/components/MkFolder.vue'; +import * as os from '@/os.js'; + +type EventType = { + abuseReport: boolean; + abuseReportResolved: boolean; + userCreated: boolean; +} + +const emit = defineEmits<{ + (ev: 'submitted', result: MkSystemWebhookResult): void; + (ev: 'canceled'): void; + (ev: 'closed'): void; +}>(); + +const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>(); + +const props = defineProps<MkSystemWebhookEditorProps>(); + +const { mode, id, requiredEvents } = toRefs(props); + +const loading = ref<number>(0); + +const title = ref<string>(''); +const url = ref<string>(''); +const secret = ref<string>(''); +const events = ref<EventType>({ + abuseReport: true, + abuseReportResolved: true, + userCreated: true, +}); +const isActive = ref<boolean>(true); + +const disabledEvents = ref<EventType>({ + abuseReport: false, + abuseReportResolved: false, + userCreated: false, +}); + +const disableSubmitButton = computed(() => { + if (!title.value) { + return true; + } + if (!url.value) { + return true; + } + if (!secret.value) { + return true; + } + + return false; +}); + +async function onSubmitClicked() { + await loadingScope(async () => { + const params = { + isActive: isActive.value, + name: title.value, + url: url.value, + secret: secret.value, + on: Object.keys(events.value).filter(ev => events.value[ev as keyof EventType]) as SystemWebhookEventType[], + }; + + try { + switch (mode.value) { + case 'create': { + const result = await misskeyApi('admin/system-webhook/create', params); + dialogEl.value?.close(); + emit('submitted', result); + break; + } + case 'edit': { + // eslint-disable-next-line + const result = await misskeyApi('admin/system-webhook/update', { id: id.value!, ...params }); + dialogEl.value?.close(); + emit('submitted', result); + break; + } + } + // eslint-disable-next-line + } catch (ex: any) { + const msg = ex.message ?? i18n.ts.internalServerErrorDescription; + await os.alert({ type: 'error', title: i18n.ts.error, text: msg }); + dialogEl.value?.close(); + emit('canceled'); + } + }); +} + +function onCancelClicked() { + dialogEl.value?.close(); + emit('canceled'); +} + +async function loadingScope<T>(fn: () => Promise<T>): Promise<T> { + loading.value++; + try { + return await fn(); + } finally { + loading.value--; + } +} + +onMounted(async () => { + await loadingScope(async () => { + switch (mode.value) { + case 'edit': { + if (!id.value) { + throw new Error('id is required'); + } + + try { + const res = await misskeyApi('admin/system-webhook/show', { id: id.value }); + + title.value = res.name; + url.value = res.url; + secret.value = res.secret; + isActive.value = res.isActive; + for (const ev of Object.keys(events.value)) { + events.value[ev] = res.on.includes(ev as SystemWebhookEventType); + } + // eslint-disable-next-line @typescript-eslint/no-explicit-any + } catch (ex: any) { + const msg = ex.message ?? i18n.ts.internalServerErrorDescription; + await os.alert({ type: 'error', title: i18n.ts.error, text: msg }); + dialogEl.value?.close(); + emit('canceled'); + } + break; + } + } + + for (const ev of requiredEvents.value ?? []) { + disabledEvents.value[ev] = true; + } + }); +}); +</script> + +<style module lang="scss"> +.root { + display: flex; + flex-direction: column; + justify-content: center; + align-items: stretch; +} + +.footer { + position: sticky; + z-index: 10000; + bottom: 0; + left: 0; + padding: 12px; + border-top: solid 0.5px var(--divider); + background: var(--acrylicBg); + -webkit-backdrop-filter: var(--blur, blur(15px)); + backdrop-filter: var(--blur, blur(15px)); +} +</style> diff --git a/packages/frontend/src/components/MkTimeline.vue b/packages/frontend/src/components/MkTimeline.vue index 0f7eb3b86c..b69c19eb9e 100644 --- a/packages/frontend/src/components/MkTimeline.vue +++ b/packages/frontend/src/components/MkTimeline.vue @@ -19,6 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only <script lang="ts" setup> import { computed, watch, onUnmounted, provide, ref, shallowRef } from 'vue'; import * as Misskey from 'misskey-js'; +import type { BasicTimelineType } from '@/timelines.js'; import MkNotes from '@/components/MkNotes.vue'; import MkPullToRefresh from '@/components/MkPullToRefresh.vue'; import { useStream } from '@/stream.js'; @@ -29,7 +30,7 @@ import { defaultStore } from '@/store.js'; import { Paging } from '@/components/MkPagination.vue'; const props = withDefaults(defineProps<{ - src: 'home' | 'local' | 'social' | 'bubble' | 'global' | 'mentions' | 'directs' | 'list' | 'antenna' | 'channel' | 'role'; + src: BasicTimelineType | 'mentions' | 'directs' | 'list' | 'antenna' | 'channel' | 'role'; list?: string; antenna?: string; channel?: string; diff --git a/packages/frontend/src/components/MkTutorialDialog.PostNote.vue b/packages/frontend/src/components/MkTutorialDialog.PostNote.vue index 44566b1d9b..a9014d4202 100644 --- a/packages/frontend/src/components/MkTutorialDialog.PostNote.vue +++ b/packages/frontend/src/components/MkTutorialDialog.PostNote.vue @@ -105,7 +105,7 @@ const exampleCWNote = reactive<Misskey.entities.Note>({ font-weight: bold; text-align: left; - &:before { + &::before { content: ""; display: block; width: calc(100% - 38px); diff --git a/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue b/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue index a2dcede7dd..322082f5a0 100644 --- a/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue +++ b/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue @@ -115,7 +115,7 @@ const exampleNote = reactive<Misskey.entities.Note>({ font-weight: bold; text-align: left; - &:before { + &::before { content: ""; display: block; width: calc(100% - 38px); diff --git a/packages/frontend/src/components/MkTutorialDialog.Timeline.vue b/packages/frontend/src/components/MkTutorialDialog.Timeline.vue index 877c3c9eaa..b900a30c85 100644 --- a/packages/frontend/src/components/MkTutorialDialog.Timeline.vue +++ b/packages/frontend/src/components/MkTutorialDialog.Timeline.vue @@ -7,10 +7,9 @@ SPDX-License-Identifier: AGPL-3.0-only <div class="_gaps"> <div style="text-align: center; padding: 0 16px;">{{ i18n.ts._initialTutorial._timeline.description1 }}</div> <div class="_gaps_s"> - <div><i class="ti ti-home"></i> <b>{{ i18n.ts._timelines.home }}</b> … {{ i18n.ts._initialTutorial._timeline.home }}</div> - <div><i class="ti ti-planet"></i> <b>{{ i18n.ts._timelines.local }}</b> … {{ i18n.ts._initialTutorial._timeline.local }}</div> - <div><i class="ti ti-universe"></i> <b>{{ i18n.ts._timelines.social }}</b> … {{ i18n.ts._initialTutorial._timeline.social }}</div> - <div><i class="ti ti-whirl"></i> <b>{{ i18n.ts._timelines.global }}</b> … {{ i18n.ts._initialTutorial._timeline.global }}</div> + <div v-for="tl in basicTimelineTypes"> + <i :class="basicTimelineIconClass(tl)"></i> <b>{{ i18n.ts._timelines[tl] }}</b> … {{ i18n.ts._initialTutorial._timeline[tl] }} + </div> </div> <div class="_gaps_s"> <div>{{ i18n.ts._initialTutorial._timeline.description2 }}</div> @@ -22,12 +21,12 @@ SPDX-License-Identifier: AGPL-3.0-only <a href="https://misskey-hub.net/docs/for-users/features/timeline/" target="_blank" class="_link">{{ i18n.ts.help }}</a> </template> </I18n> - </div> </template> <script setup lang="ts"> import { i18n } from '@/i18n.js'; +import { basicTimelineIconClass, basicTimelineTypes } from '@/timelines.js'; </script> <style lang="scss" module> @@ -56,7 +55,7 @@ import { i18n } from '@/i18n.js'; font-weight: bold; text-align: left; - &:before { + &::before { content: ""; display: block; width: calc(100% - 38px); diff --git a/packages/frontend/src/components/MkTutorialDialog.vue b/packages/frontend/src/components/MkTutorialDialog.vue index d2711e4ec5..9adc8d466c 100644 --- a/packages/frontend/src/components/MkTutorialDialog.vue +++ b/packages/frontend/src/components/MkTutorialDialog.vue @@ -172,7 +172,7 @@ const emit = defineEmits<{ const dialog = shallowRef<InstanceType<typeof MkModalWindow>>(); -// eslint-disable-next-line vue/no-setup-props-destructure +// eslint-disable-next-line vue/no-setup-props-reactivity-loss const page = ref(props.initialPage ?? 0); watch(page, (to) => { diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue index 1c9ba35637..a51b878580 100644 --- a/packages/frontend/src/components/MkUrlPreview.vue +++ b/packages/frontend/src/components/MkUrlPreview.vue @@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only scrolling="no" :allow="player.allow == null ? 'autoplay;encrypted-media;fullscreen' : player.allow.filter(x => ['autoplay', 'clipboard-write', 'fullscreen', 'encrypted-media', 'picture-in-picture', 'web-share'].includes(x)).join(';')" :class="$style.playerIframe" - :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" + :src="transformPlayerUrl(player.url)" :style="{ border: 0 }" ></iframe> <span v-else>invalid url</span> @@ -91,6 +91,7 @@ import * as os from '@/os.js'; import { deviceKind } from '@/scripts/device-kind.js'; import MkButton from '@/components/MkButton.vue'; import { versatileLang } from '@/scripts/intl-const.js'; +import { transformPlayerUrl } from '@/scripts/player-url-transform.js'; import { defaultStore } from '@/store.js'; type SummalyResult = Awaited<ReturnType<typeof summaly>>; @@ -188,11 +189,13 @@ function adjustTweetHeight(message: any) { if (height) tweetHeight.value = height; } -const openPlayer = (): void => { - os.popup(defineAsyncComponent(() => import('@/components/MkYouTubePlayer.vue')), { +function openPlayer(): void { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkYouTubePlayer.vue')), { url: requestUrl.href, + }, { + // TODO }); -}; +} (window as any).addEventListener('message', adjustTweetHeight); diff --git a/packages/frontend/src/components/MkUserInfo.vue b/packages/frontend/src/components/MkUserInfo.vue index 2ebc86426c..e528f04dfc 100644 --- a/packages/frontend/src/components/MkUserInfo.vue +++ b/packages/frontend/src/components/MkUserInfo.vue @@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only <p :class="$style.statusItemLabel">{{ i18n.ts.followers }}</p><span :class="$style.statusItemValue">{{ number(user.followersCount) }}</span> </div> </div> - <MkFollowButton v-if="$i && user.id != $i.id" :class="$style.follow" :user="user" mini/> + <MkFollowButton v-if="user.id != $i?.id" :class="$style.follow" :user="user" mini/> </div> </template> diff --git a/packages/frontend/src/components/MkUserSelectDialog.vue b/packages/frontend/src/components/MkUserSelectDialog.vue index b76be051d8..7d210a4385 100644 --- a/packages/frontend/src/components/MkUserSelectDialog.vue +++ b/packages/frontend/src/components/MkUserSelectDialog.vue @@ -61,7 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { onMounted, ref } from 'vue'; +import { onMounted, ref, shallowRef } from 'vue'; import * as Misskey from 'misskey-js'; import MkInput from '@/components/MkInput.vue'; import FormSplit from '@/components/form/split.vue'; @@ -91,7 +91,7 @@ const host = ref(''); const users = ref<Misskey.entities.UserLite[]>([]); const recentUsers = ref<Misskey.entities.UserDetailed[]>([]); const selected = ref<Misskey.entities.UserLite | null>(null); -const dialogEl = ref(); +const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>(); function search() { if (username.value === '' && host.value === '') { @@ -123,7 +123,7 @@ async function ok() { }); emit('ok', user); - dialogEl.value.close(); + dialogEl.value?.close(); // 最近使ったユーザー更新 let recents = defaultStore.state.recentlyUsedUsers; @@ -134,7 +134,7 @@ async function ok() { function cancel() { emit('cancel'); - dialogEl.value.close(); + dialogEl.value?.close(); } onMounted(() => { diff --git a/packages/frontend/src/components/MkUserSetupDialog.vue b/packages/frontend/src/components/MkUserSetupDialog.vue index 1d376382ca..514350c930 100644 --- a/packages/frontend/src/components/MkUserSetupDialog.vue +++ b/packages/frontend/src/components/MkUserSetupDialog.vue @@ -148,7 +148,7 @@ const emit = defineEmits<{ const dialog = shallowRef<InstanceType<typeof MkModalWindow>>(); -// eslint-disable-next-line vue/no-setup-props-destructure +// eslint-disable-next-line vue/no-setup-props-reactivity-loss const page = ref(defaultStore.state.accountSetupWizard); watch(page, () => { @@ -176,9 +176,11 @@ function setupComplete() { function launchTutorial() { setupComplete(); nextTick(() => { - os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), { initialPage: 1, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); }); } diff --git a/packages/frontend/src/components/MkVisibilityPicker.vue b/packages/frontend/src/components/MkVisibilityPicker.vue index e0aec8b2f3..3c3f9e94b6 100644 --- a/packages/frontend/src/components/MkVisibilityPicker.vue +++ b/packages/frontend/src/components/MkVisibilityPicker.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<MkModal ref="modal" v-slot="{ type }" :zPriority="'high'" :src="src" @click="modal?.close()" @closed="emit('closed')"> +<MkModal ref="modal" v-slot="{ type }" :zPriority="'high'" :src="src" @click="modal?.close()" @closed="emit('closed')" @esc="modal?.close()"> <div class="_popup" :class="{ [$style.root]: true, [$style.asDrawer]: type === 'drawer' }"> <div :class="[$style.label, $style.item]"> {{ i18n.ts.visibility }} diff --git a/packages/frontend/src/components/MkVisitorDashboard.vue b/packages/frontend/src/components/MkVisitorDashboard.vue index 3f24d2a23c..6fb3304468 100644 --- a/packages/frontend/src/components/MkVisitorDashboard.vue +++ b/packages/frontend/src/components/MkVisitorDashboard.vue @@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only </div> <div class="_gaps_s" :class="$style.mainActions"> <MkButton :class="$style.mainAction" full rounded gradate data-cy-signup style="margin-right: 12px;" @click="signup()">{{ i18n.ts.joinThisServer }}</MkButton> - <MkButton :class="$style.mainAction" full rounded @click="exploreOtherServers()">{{ i18n.ts.exploreOtherServers }}</MkButton> + <MkButton :class="$style.mainAction" full rounded link to="https://joinsharkey.org/#findaninstance">{{ i18n.ts.exploreOtherServers }}</MkButton> <MkButton :class="$style.mainAction" full rounded data-cy-signin @click="signin()">{{ i18n.ts.login }}</MkButton> </div> </div> @@ -69,7 +69,8 @@ import { i18n } from '@/i18n.js'; import { instance } from '@/instance.js'; import MkNumber from '@/components/MkNumber.vue'; import XActiveUsersChart from '@/components/MkVisitorDashboard.ActiveUsersChart.vue'; -import { openInstanceMenu } from '@/ui/_common_/common'; +import { openInstanceMenu } from '@/ui/_common_/common.js'; +import type { MenuItem } from '@/types/menu.js'; const stats = ref<Misskey.entities.StatsResponse | null>(null); @@ -78,24 +79,24 @@ misskeyApi('stats', {}).then((res) => { }); function signin() { - os.popup(XSigninDialog, { + const { dispose } = os.popup(XSigninDialog, { autoSet: true, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); } function signup() { - os.popup(XSignupDialog, { + const { dispose } = os.popup(XSignupDialog, { autoSet: true, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); } -function showMenu(ev) { +function showMenu(ev: MouseEvent) { openInstanceMenu(ev); } - -function exploreOtherServers() { - window.open('https://joinsharkey.org/#findaninstance', '_blank', 'noopener'); -} </script> <style lang="scss" module> diff --git a/packages/frontend/src/components/MkYouTubePlayer.vue b/packages/frontend/src/components/MkYouTubePlayer.vue index 1fad222fc5..e3711b3463 100644 --- a/packages/frontend/src/components/MkYouTubePlayer.vue +++ b/packages/frontend/src/components/MkYouTubePlayer.vue @@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only <div class="poamfof"> <Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in"> <div v-if="player.url && (player.url.startsWith('http://') || player.url.startsWith('https://'))" class="player"> - <iframe v-if="!fetching" :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/> + <iframe v-if="!fetching" :src="transformPlayerUrl(player.url)" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> <span v-else>invalid url</span> </Transition> @@ -27,6 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only import { ref } from 'vue'; import MkWindow from '@/components/MkWindow.vue'; import { versatileLang } from '@/scripts/intl-const.js'; +import { transformPlayerUrl } from '@/scripts/player-url-transform.js'; import { defaultStore } from '@/store.js'; const props = defineProps<{ diff --git a/packages/frontend/src/components/global/MkA.stories.impl.ts b/packages/frontend/src/components/global/MkA.stories.impl.ts index c1d8cf0ca6..02e5a7f98c 100644 --- a/packages/frontend/src/components/global/MkA.stories.impl.ts +++ b/packages/frontend/src/components/global/MkA.stories.impl.ts @@ -35,12 +35,10 @@ export const Default = { // FIXME: 通るけどその後落ちるのでコメントアウト // await expect(a.href).toMatch(/^https?:\/\/.*#test$/); await userEvent.pointer({ keys: '[MouseRight]', target: a }); - await tick(); const menu = canvas.getByRole('menu'); await expect(menu).toBeInTheDocument(); await userEvent.click(a); a.blur(); - await tick(); await expect(menu).not.toBeInTheDocument(); }, args: { diff --git a/packages/frontend/src/components/global/MkA.vue b/packages/frontend/src/components/global/MkA.vue index 6cb948d3dd..e0303dbb27 100644 --- a/packages/frontend/src/components/global/MkA.vue +++ b/packages/frontend/src/components/global/MkA.vue @@ -16,7 +16,7 @@ export type MkABehavior = 'window' | 'browser' | null; <script lang="ts" setup> import { computed, inject, shallowRef } from 'vue'; import * as os from '@/os.js'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; import { url } from '@/config.js'; import { i18n } from '@/i18n.js'; import { useRouter } from '@/router/supplier.js'; diff --git a/packages/frontend/src/components/global/MkAd.stories.impl.ts b/packages/frontend/src/components/global/MkAd.stories.impl.ts index aef26ab92d..8c0b7ef52f 100644 --- a/packages/frontend/src/components/global/MkAd.stories.impl.ts +++ b/packages/frontend/src/components/global/MkAd.stories.impl.ts @@ -9,12 +9,6 @@ import { StoryObj } from '@storybook/vue3'; import MkAd from './MkAd.vue'; 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 { @@ -37,56 +31,41 @@ const common = { }; }, async play({ canvasElement, args }) { - if (lock) { - console.warn('This test is unexpectedly running twice in parallel, fix it!'); - console.warn('See also: https://github.com/misskey-dev/misskey/issues/11267'); - await lock; + const canvas = within(canvasElement); + const a = canvas.getByRole<HTMLAnchorElement>('link'); + // FIXME: 通るけどその後落ちるのでコメントアウト + // await expect(a.href).toMatch(/^https?:\/\/.*#test$/); + const img = within(a).getByRole('img'); + await expect(img).toBeInTheDocument(); + let buttons = canvas.getAllByRole<HTMLButtonElement>('button'); + await expect(buttons).toHaveLength(1); + const i = buttons[0]; + await expect(i).toBeInTheDocument(); + await userEvent.click(i); + await expect(canvasElement).toHaveTextContent(i18n.ts._ad.back); + await expect(a).not.toBeInTheDocument(); + await expect(i).not.toBeInTheDocument(); + buttons = canvas.getAllByRole<HTMLButtonElement>('button'); + const hasReduceFrequency = args.specify?.ratio !== 0; + await expect(buttons).toHaveLength(hasReduceFrequency ? 2 : 1); + const reduce = hasReduceFrequency ? buttons[0] : null; + const back = buttons[hasReduceFrequency ? 1 : 0]; + if (reduce) { + await expect(reduce).toBeInTheDocument(); + await expect(reduce).toHaveTextContent(i18n.ts._ad.reduceFrequencyOfThisAd); } - - let resolve: (value?: any) => void; - 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$/); - const img = within(a).getByRole('img'); - await expect(img).toBeInTheDocument(); - let buttons = canvas.getAllByRole<HTMLButtonElement>('button'); - await expect(buttons).toHaveLength(1); - const i = buttons[0]; - await expect(i).toBeInTheDocument(); - await userEvent.click(i); - await expect(canvasElement).toHaveTextContent(i18n.ts._ad.back); - await expect(a).not.toBeInTheDocument(); - await expect(i).not.toBeInTheDocument(); - buttons = canvas.getAllByRole<HTMLButtonElement>('button'); - const hasReduceFrequency = args.specify?.ratio !== 0; - await expect(buttons).toHaveLength(hasReduceFrequency ? 2 : 1); - const reduce = hasReduceFrequency ? buttons[0] : null; - const back = buttons[hasReduceFrequency ? 1 : 0]; - if (reduce) { - await expect(reduce).toBeInTheDocument(); - await expect(reduce).toHaveTextContent(i18n.ts._ad.reduceFrequencyOfThisAd); - } - await expect(back).toBeInTheDocument(); - await expect(back).toHaveTextContent(i18n.ts._ad.back); - await userEvent.click(back); - await waitFor(() => expect(canvas.queryByRole('img')).toBeTruthy()); - if (reduce) { - await expect(reduce).not.toBeInTheDocument(); - } - await expect(back).not.toBeInTheDocument(); - const aAgain = canvas.getByRole<HTMLAnchorElement>('link'); - await expect(aAgain).toBeInTheDocument(); - const imgAgain = within(aAgain).getByRole('img'); - await expect(imgAgain).toBeInTheDocument(); - } finally { - resolve!(); - lock = undefined; + await expect(back).toBeInTheDocument(); + await expect(back).toHaveTextContent(i18n.ts._ad.back); + await userEvent.click(back); + await waitFor(() => expect(canvas.queryByRole('img')).toBeTruthy()); + if (reduce) { + await expect(reduce).not.toBeInTheDocument(); } + await expect(back).not.toBeInTheDocument(); + const aAgain = canvas.getByRole<HTMLAnchorElement>('link'); + await expect(aAgain).toBeInTheDocument(); + const imgAgain = within(aAgain).getByRole('img'); + await expect(imgAgain).toBeInTheDocument(); }, args: { prefer: [], diff --git a/packages/frontend/src/components/global/MkCustomEmoji.vue b/packages/frontend/src/components/global/MkCustomEmoji.vue index 1f7f09335e..4cacc7b292 100644 --- a/packages/frontend/src/components/global/MkCustomEmoji.vue +++ b/packages/frontend/src/components/global/MkCustomEmoji.vue @@ -31,7 +31,7 @@ import { defaultStore } from '@/store.js'; import { customEmojisMap } from '@/custom-emojis.js'; import * as os from '@/os.js'; import { misskeyApiGet } from '@/scripts/misskey-api.js'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; import * as sound from '@/scripts/sound.js'; import { i18n } from '@/i18n.js'; import MkCustomEmojiDetailedDialog from '@/components/MkCustomEmojiDetailedDialog.vue'; @@ -107,12 +107,12 @@ function onClick(ev: MouseEvent) { text: i18n.ts.info, icon: 'ti ti-info-circle', action: async () => { - os.popup(MkCustomEmojiDetailedDialog, { + const { dispose } = os.popup(MkCustomEmojiDetailedDialog, { emoji: await misskeyApiGet('emoji', { name: customEmojiName.value, }), }, { - anchor: ev.target, + closed: () => dispose(), }); }, }], ev.currentTarget ?? ev.target); diff --git a/packages/frontend/src/components/global/MkEmoji.vue b/packages/frontend/src/components/global/MkEmoji.vue index 9cf7dab06d..c485305376 100644 --- a/packages/frontend/src/components/global/MkEmoji.vue +++ b/packages/frontend/src/components/global/MkEmoji.vue @@ -14,7 +14,7 @@ import { char2fluentEmojiFilePath, char2twemojiFilePath, char2tossfaceFilePath } import { defaultStore } from '@/store.js'; import { colorizeEmoji, getEmojiName } from '@/scripts/emojilist.js'; import * as os from '@/os.js'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; import * as sound from '@/scripts/sound.js'; import { i18n } from '@/i18n.js'; diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts index ac563ffaf5..a3a2b9f319 100644 --- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts +++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts @@ -68,7 +68,7 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven const validTime = (t: string | boolean | null | undefined) => { if (t == null) return null; if (typeof t === 'boolean') return null; - return t.match(/^[0-9.]+s$/) ? t : null; + return t.match(/^\-?[0-9.]+s$/) ? t : null; }; const useAnim = defaultStore.state.advancedMfm && defaultStore.state.animatedMfm ? true : props.isAnim ? true : false; diff --git a/packages/frontend/src/components/global/MkStickyContainer.vue b/packages/frontend/src/components/global/MkStickyContainer.vue index 89993e1b8e..b12dc8cb31 100644 --- a/packages/frontend/src/components/global/MkStickyContainer.vue +++ b/packages/frontend/src/components/global/MkStickyContainer.vue @@ -8,7 +8,11 @@ SPDX-License-Identifier: AGPL-3.0-only <div ref="headerEl"> <slot name="header"></slot> </div> - <div ref="bodyEl" :data-sticky-container-header-height="headerHeight"> + <div + ref="bodyEl" + :data-sticky-container-header-height="headerHeight" + :data-sticky-container-footer-height="footerHeight" + > <slot></slot> </div> <div ref="footerEl"> diff --git a/packages/frontend/src/components/global/MkTime.vue b/packages/frontend/src/components/global/MkTime.vue index 23fe99bd9c..027b226f3f 100644 --- a/packages/frontend/src/components/global/MkTime.vue +++ b/packages/frontend/src/components/global/MkTime.vue @@ -41,12 +41,12 @@ function getDateSafe(n: Date | string | number) { } } -// eslint-disable-next-line vue/no-setup-props-destructure +// eslint-disable-next-line vue/no-setup-props-reactivity-loss const _time = props.time == null ? NaN : getDateSafe(props.time).getTime(); const invalid = Number.isNaN(_time); const absolute = !invalid ? dateTimeFormat.format(_time) : i18n.ts._ago.invalid; -// eslint-disable-next-line vue/no-setup-props-destructure +// eslint-disable-next-line vue/no-setup-props-reactivity-loss const now = ref(props.origin?.getTime() ?? Date.now()); const ago = computed(() => (now.value - _time) / 1000/*ms*/); diff --git a/packages/frontend/src/components/global/MkUrl.vue b/packages/frontend/src/components/global/MkUrl.vue index 083e163630..15595ba515 100644 --- a/packages/frontend/src/components/global/MkUrl.vue +++ b/packages/frontend/src/components/global/MkUrl.vue @@ -51,11 +51,13 @@ const el = ref(); if (props.showUrlPreview && isEnabledUrlPreview.value) { useTooltip(el, (showing) => { - os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), { showing, url: props.url, source: el.value instanceof HTMLElement ? el.value : el.value?.$el, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); }); } diff --git a/packages/frontend/src/components/global/RouterView.vue b/packages/frontend/src/components/global/RouterView.vue index 06cb30eff1..19bd794a5d 100644 --- a/packages/frontend/src/components/global/RouterView.vue +++ b/packages/frontend/src/components/global/RouterView.vue @@ -53,14 +53,14 @@ function resolveNested(current: Resolved, d = 0): Resolved | null { const current = resolveNested(router.current)!; const currentPageComponent = shallowRef('component' in current.route ? current.route.component : MkLoadingPage); const currentPageProps = ref(current.props); -const key = ref(current.route.path + JSON.stringify(Object.fromEntries(current.props))); +const key = ref(router.getCurrentKey() + JSON.stringify(Object.fromEntries(current.props))); function onChange({ resolved, key: newKey }) { const current = resolveNested(resolved); if (current == null || 'redirect' in current.route) return; currentPageComponent.value = current.route.component; currentPageProps.value = current.props; - key.value = current.route.path + JSON.stringify(Object.fromEntries(current.props)); + key.value = newKey + JSON.stringify(Object.fromEntries(current.props)); nextTick(() => { // ページ遷移完了後に再びキャッシュを有効化 diff --git a/packages/frontend/src/const.ts b/packages/frontend/src/const.ts index f9ee820065..c94c0d4408 100644 --- a/packages/frontend/src/const.ts +++ b/packages/frontend/src/const.ts @@ -141,6 +141,7 @@ export const ROLE_POLICIES = [ 'canHideAds', 'driveCapacityMb', 'alwaysMarkNsfw', + 'canUpdateBioMedia', 'pinLimit', 'antennaLimit', 'wordMuteLimit', diff --git a/packages/frontend/src/directives/hotkey.ts b/packages/frontend/src/directives/hotkey.ts index b082b6edf2..0e5c7ede24 100644 --- a/packages/frontend/src/directives/hotkey.ts +++ b/packages/frontend/src/directives/hotkey.ts @@ -4,7 +4,7 @@ */ import { Directive } from 'vue'; -import { makeHotkey } from '../scripts/hotkey.js'; +import { makeHotkey } from '@/scripts/hotkey.js'; export default { mounted(el, binding) { @@ -13,9 +13,9 @@ export default { el._keyHandler = makeHotkey(binding.value); if (el._hotkey_global) { - document.addEventListener('keydown', el._keyHandler); + document.addEventListener('keydown', el._keyHandler, { passive: false }); } else { - el.addEventListener('keydown', el._keyHandler); + el.addEventListener('keydown', el._keyHandler, { passive: false }); } }, diff --git a/packages/frontend/src/directives/ripple.ts b/packages/frontend/src/directives/ripple.ts index 2d724f771e..a043ff212d 100644 --- a/packages/frontend/src/directives/ripple.ts +++ b/packages/frontend/src/directives/ripple.ts @@ -17,7 +17,9 @@ export default { const x = rect.left + (el.offsetWidth / 2); const y = rect.top + (el.offsetHeight / 2); - popup(MkRippleEffect, { x, y }, {}, 'end'); + const { dispose } = popup(MkRippleEffect, { x, y }, { + end: () => dispose(), + }); }); }, }; diff --git a/packages/frontend/src/directives/tooltip.ts b/packages/frontend/src/directives/tooltip.ts index b1c1b19907..251ce5675f 100644 --- a/packages/frontend/src/directives/tooltip.ts +++ b/packages/frontend/src/directives/tooltip.ts @@ -51,13 +51,15 @@ export default { if (self.text == null) return; const showing = ref(true); - popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), { + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), { showing, text: self.text, asMfm: binding.modifiers.mfm, direction: binding.modifiers.left ? 'left' : binding.modifiers.right ? 'right' : binding.modifiers.top ? 'top' : binding.modifiers.bottom ? 'bottom' : 'top', targetElement: el, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); self._close = () => { showing.value = false; diff --git a/packages/frontend/src/directives/user-preview.ts b/packages/frontend/src/directives/user-preview.ts index 7a008a4486..278d842d09 100644 --- a/packages/frontend/src/directives/user-preview.ts +++ b/packages/frontend/src/directives/user-preview.ts @@ -35,7 +35,7 @@ export class UserPreview { const showing = ref(true); - popup(defineAsyncComponent(() => import('@/components/MkUserPopup.vue')), { + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkUserPopup.vue')), { showing, q: this.user, source: this.el, @@ -47,7 +47,8 @@ export class UserPreview { window.clearTimeout(this.showTimer); this.hideTimer = window.setTimeout(this.close, 500); }, - }, 'closed'); + closed: () => dispose(), + }); this.promise = { cancel: () => { diff --git a/packages/frontend/src/filters/user.ts b/packages/frontend/src/filters/user.ts index b713d41789..a87766764d 100644 --- a/packages/frontend/src/filters/user.ts +++ b/packages/frontend/src/filters/user.ts @@ -6,7 +6,7 @@ import * as Misskey from 'misskey-js'; import { url } from '@/config.js'; -export const acct = (user: misskey.Acct) => { +export const acct = (user: Misskey.Acct) => { return Misskey.acct.toString(user); }; @@ -14,6 +14,6 @@ export const userName = (user: Misskey.entities.User) => { return user.name || user.username; }; -export const userPage = (user: misskey.Acct, path?, absolute = false) => { +export const userPage = (user: Misskey.Acct, path?: string, absolute = false) => { return `${absolute ? url : ''}/@${acct(user)}${(path ? `/${path}` : '')}`; }; diff --git a/packages/frontend/src/i18n.ts b/packages/frontend/src/i18n.ts index cc9faddb20..10d6adbcd0 100644 --- a/packages/frontend/src/i18n.ts +++ b/packages/frontend/src/i18n.ts @@ -11,6 +11,5 @@ import { I18n } from '@/scripts/i18n.js'; export const i18n = markRaw(new I18n<Locale>(locale)); export function updateI18n(newLocale: Locale) { - // @ts-expect-error -- private field i18n.locale = newLocale; } diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts index 6adf2e590b..f6f4d62d50 100644 --- a/packages/frontend/src/os.ts +++ b/packages/frontend/src/os.ts @@ -5,12 +5,13 @@ // TODO: なんでもかんでもos.tsに突っ込むのやめたいのでよしなに分割する -import { Component, markRaw, Ref, ref, defineAsyncComponent } from 'vue'; +import { Component, markRaw, Ref, ref, defineAsyncComponent, nextTick } from 'vue'; import { EventEmitter } from 'eventemitter3'; import * as Misskey from 'misskey-js'; import type { ComponentProps as CP } from 'vue-component-type-helpers'; import type { Form, GetFormResultType } from '@/scripts/form.js'; import { misskeyApi } from '@/scripts/misskey-api.js'; +import { defaultStore } from '@/store.js'; import { i18n } from '@/i18n.js'; import MkPostFormDialog from '@/components/MkPostFormDialog.vue'; import MkWaitingDialog from '@/components/MkWaitingDialog.vue'; @@ -22,8 +23,11 @@ import MkEmojiPickerDialog from '@/components/MkEmojiPickerDialog.vue'; import MkPopupMenu from '@/components/MkPopupMenu.vue'; import MkContextMenu from '@/components/MkContextMenu.vue'; import { MenuItem } from '@/types/menu.js'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; +import { pleaseLogin } from '@/scripts/please-login.js'; import { showMovedDialog } from '@/scripts/show-moved-dialog.js'; +import { getHTMLElementOrNull } from '@/scripts/get-dom-node-or-null.js'; +import { focusParent } from '@/scripts/focus.js'; export const openingWindowsCount = ref(0); @@ -123,11 +127,13 @@ export function promiseDialog<T extends Promise<any>>( }); // NOTE: dynamic importすると挙動がおかしくなる(showingの変更が伝播しない) - popup(MkWaitingDialog, { + const { dispose } = popup(MkWaitingDialog, { success: success, showing: showing, text: text, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); return promise; } @@ -173,28 +179,24 @@ type EmitsExtractor<T> = { [K in keyof T as K extends `onVnode${string}` ? never : K extends `on${infer E}` ? Uncapitalize<E> : K extends string ? never : K]: T[K]; }; -export async function popup<T extends Component>( +export function popup<T extends Component>( component: T, props: ComponentProps<T>, events: ComponentEmit<T> = {} as ComponentEmit<T>, - disposeEvent?: keyof ComponentEmit<T>, -): Promise<{ dispose: () => void }> { +): { dispose: () => void } { markRaw(component); const id = ++popupIdCount; const dispose = () => { // このsetTimeoutが無いと挙動がおかしくなる(autocompleteが閉じなくなる)。Vueのバグ？ window.setTimeout(() => { - popups.value = popups.value.filter(popup => popup.id !== id); + popups.value = popups.value.filter(p => p.id !== id); }, 0); }; const state = { component, props, - events: disposeEvent ? { - ...events, - [disposeEvent]: dispose, - } : events, + events, id, }; @@ -206,16 +208,20 @@ export async function popup<T extends Component>( } export function pageWindow(path: string) { - popup(MkPageWindow, { + const { dispose } = popup(MkPageWindow, { initialPath: path, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); } export function toast(message: string, renderMfm = false) { - popup(MkToast, { + const { dispose } = popup(MkToast, { message, renderMfm, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); } export function alert(props: { @@ -224,11 +230,12 @@ export function alert(props: { text?: string; }): Promise<void> { return new Promise(resolve => { - popup(MkDialog, props, { + const { dispose } = popup(MkDialog, props, { done: () => { resolve(); }, - }, 'closed'); + closed: () => dispose(), + }); }); } @@ -240,14 +247,15 @@ export function confirm(props: { cancelText?: string; }): Promise<{ canceled: boolean }> { return new Promise(resolve => { - popup(MkDialog, { + const { dispose } = popup(MkDialog, { ...props, showCancelButton: true, }, { done: result => { resolve(result ? result : { canceled: true }); }, - }, 'closed'); + closed: () => dispose(), + }); }); } @@ -269,7 +277,7 @@ export function actions<T extends { canceled: false; result: T[number]['value']; }> { return new Promise(resolve => { - popup(MkDialog, { + const { dispose } = popup(MkDialog, { ...props, actions: props.actions.map(a => ({ text: a.text, @@ -283,7 +291,8 @@ export function actions<T extends { done: result => { resolve(result ? result : { canceled: true }); }, - }, 'closed'); + closed: () => dispose(), + }); }); } @@ -331,7 +340,7 @@ export function inputText(props: { canceled: false; result: string | null; }> { return new Promise(resolve => { - popup(MkDialog, { + const { dispose } = popup(MkDialog, { title: props.title, text: props.text, input: { @@ -346,7 +355,8 @@ export function inputText(props: { done: result => { resolve(result ? result : { canceled: true }); }, - }, 'closed'); + closed: () => dispose(), + }); }); } @@ -385,7 +395,7 @@ export function inputNumber(props: { canceled: false; result: number | null; }> { return new Promise(resolve => { - popup(MkDialog, { + const { dispose } = popup(MkDialog, { title: props.title, text: props.text, input: { @@ -398,7 +408,8 @@ export function inputNumber(props: { done: result => { resolve(result ? result : { canceled: true }); }, - }, 'closed'); + closed: () => dispose(), + }); }); } @@ -413,7 +424,7 @@ export function inputDate(props: { canceled: false; result: Date; }> { return new Promise(resolve => { - popup(MkDialog, { + const { dispose } = popup(MkDialog, { title: props.title, text: props.text, input: { @@ -425,7 +436,8 @@ export function inputDate(props: { done: result => { resolve(result ? { result: new Date(result.result), canceled: false } : { result: undefined, canceled: true }); }, - }, 'closed'); + closed: () => dispose(), + }); }); } @@ -435,23 +447,29 @@ export function authenticateDialog(): Promise<{ canceled: false; result: { password: string; token: string | null; }; }> { return new Promise(resolve => { - popup(MkPasswordDialog, {}, { + const { dispose } = popup(MkPasswordDialog, {}, { done: result => { resolve(result ? { canceled: false, result } : { canceled: true, result: undefined }); }, - }, 'closed'); + closed: () => dispose(), + }); }); } +type SelectItem<C> = { + value: C; + text: string; +}; + // default が指定されていたら result は null になり得ないことを保証する overload function export function select<C = any>(props: { title?: string; text?: string; default: string; - items: { - value: C; - text: string; - }[]; + items: (SelectItem<C> | { + sectionTitle: string; + items: SelectItem<C>[]; + } | undefined)[]; }): Promise<{ canceled: true; result: undefined; } | { @@ -461,10 +479,10 @@ export function select<C = any>(props: { title?: string; text?: string; default?: string | null; - items: { - value: C; - text: string; - }[]; + items: (SelectItem<C> | { + sectionTitle: string; + items: SelectItem<C>[]; + } | undefined)[]; }): Promise<{ canceled: true; result: undefined; } | { @@ -474,28 +492,29 @@ export function select<C = any>(props: { title?: string; text?: string; default?: string | null; - items: { - value: C; - text: string; - }[]; + items: (SelectItem<C> | { + sectionTitle: string; + items: SelectItem<C>[]; + } | undefined)[]; }): Promise<{ canceled: true; result: undefined; } | { canceled: false; result: C | null; }> { return new Promise(resolve => { - popup(MkDialog, { + const { dispose } = popup(MkDialog, { title: props.title, text: props.text, select: { - items: props.items, + items: props.items.filter(x => x !== undefined), default: props.default ?? null, }, }, { done: result => { resolve(result ? result : { canceled: true }); }, - }, 'closed'); + closed: () => dispose(), + }); }); } @@ -505,53 +524,57 @@ export function success(): Promise<void> { window.setTimeout(() => { showing.value = false; }, 1000); - popup(MkWaitingDialog, { + const { dispose } = popup(MkWaitingDialog, { success: true, showing: showing, }, { done: () => resolve(), - }, 'closed'); + closed: () => dispose(), + }); }); } export function waiting(): Promise<void> { return new Promise(resolve => { const showing = ref(true); - popup(MkWaitingDialog, { + const { dispose } = popup(MkWaitingDialog, { success: false, showing: showing, }, { done: () => resolve(), - }, 'closed'); + closed: () => dispose(), + }); }); } 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 }, { + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkFormDialog.vue')), { title, form: f }, { done: result => { resolve(result); }, - }, 'closed'); + closed: () => dispose(), + }); }); } export async function selectUser(opts: { includeSelf?: boolean; localOnly?: boolean; } = {}): Promise<Misskey.entities.UserDetailed> { return new Promise(resolve => { - popup(defineAsyncComponent(() => import('@/components/MkUserSelectDialog.vue')), { + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkUserSelectDialog.vue')), { includeSelf: opts.includeSelf, localOnly: opts.localOnly, }, { ok: user => { resolve(user); }, - }, 'closed'); + closed: () => dispose(), + }); }); } export async function selectDriveFile(multiple: boolean): Promise<Misskey.entities.DriveFile[]> { return new Promise(resolve => { - popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), { + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), { type: 'file', multiple, }, { @@ -560,13 +583,14 @@ export async function selectDriveFile(multiple: boolean): Promise<Misskey.entiti resolve(files); } }, - }, 'closed'); + closed: () => dispose(), + }); }); } export async function selectDriveFolder(multiple: boolean): Promise<Misskey.entities.DriveFolder[]> { return new Promise(resolve => { - popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), { + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), { type: 'folder', multiple, }, { @@ -575,20 +599,22 @@ export async function selectDriveFolder(multiple: boolean): Promise<Misskey.enti resolve(folders); } }, - }, 'closed'); + closed: () => dispose(), + }); }); } export async function pickEmoji(src: HTMLElement, opts: ComponentProps<typeof MkEmojiPickerDialog>): Promise<string> { return new Promise(resolve => { - popup(MkEmojiPickerDialog, { + const { dispose } = popup(MkEmojiPickerDialog, { src, ...opts, }, { done: emoji => { resolve(emoji); }, - }, 'closed'); + closed: () => dispose(), + }); }); } @@ -597,7 +623,7 @@ export async function cropImage(image: Misskey.entities.DriveFile, options: { uploadFolder?: string | null; }): Promise<Misskey.entities.DriveFile> { return new Promise(resolve => { - popup(defineAsyncComponent(() => import('@/components/MkCropperDialog.vue')), { + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkCropperDialog.vue')), { file: image, aspectRatio: options.aspectRatio, uploadFolder: options.uploadFolder, @@ -605,73 +631,88 @@ export async function cropImage(image: Misskey.entities.DriveFile, options: { ok: x => { resolve(x); }, - }, 'closed'); + closed: () => dispose(), + }); }); } export function popupMenu(items: MenuItem[], src?: HTMLElement | EventTarget | null, options?: { align?: string; width?: number; - viaKeyboard?: boolean; onClosing?: () => void; }): Promise<void> { - return new Promise(resolve => { - let dispose; - popup(MkPopupMenu, { + let returnFocusTo = getHTMLElementOrNull(src) ?? getHTMLElementOrNull(document.activeElement); + return new Promise(resolve => nextTick(() => { + const { dispose } = popup(MkPopupMenu, { items, src, width: options?.width, align: options?.align, - viaKeyboard: options?.viaKeyboard, + returnFocusTo, }, { closed: () => { resolve(); dispose(); + returnFocusTo = null; }, closing: () => { - if (options?.onClosing) options.onClosing(); + options?.onClosing?.(); }, - }).then(res => { - dispose = res.dispose; }); - }); + })); } export function contextMenu(items: MenuItem[], ev: MouseEvent): Promise<void> { + if ( + defaultStore.state.contextMenu === 'native' || + (defaultStore.state.contextMenu === 'appWithShift' && !ev.shiftKey) + ) { + return Promise.resolve(); + } + + let returnFocusTo = getHTMLElementOrNull(ev.currentTarget ?? ev.target) ?? getHTMLElementOrNull(document.activeElement); ev.preventDefault(); - return new Promise(resolve => { - let dispose; - popup(MkContextMenu, { + return new Promise(resolve => nextTick(() => { + const { dispose } = popup(MkContextMenu, { items, ev, }, { closed: () => { resolve(); dispose(); + + // MkModalを通していないのでここでフォーカスを戻す処理を行う + if (returnFocusTo != null) { + focusParent(returnFocusTo, true, false); + returnFocusTo = null; + } }, - }).then(res => { - dispose = res.dispose; }); - }); + })); } export function post(props: Record<string, any> = {}): Promise<void> { - showMovedDialog(); + pleaseLogin(undefined, (props.initialText || props.initialNote ? { + type: 'share', + params: { + text: props.initialText ?? props.initialNote.text, + visibility: props.initialVisibility ?? props.initialNote?.visibility, + localOnly: (props.initialLocalOnly || props.initialNote?.localOnly) ? '1' : '0', + }, + } : undefined)); + showMovedDialog(); return new Promise(resolve => { // NOTE: MkPostFormDialogをdynamic importするとiOSでテキストエリアに自動フォーカスできない // NOTE: ただ、dynamic importしない場合、MkPostFormDialogインスタンスが使いまわされ、 // Vueが渡されたコンポーネントに内部的に__propsというプロパティを生やす影響で、 // 複数のpost formを開いたときに場合によってはエラーになる // もちろん複数のpost formを開けること自体Misskeyサイドのバグなのだが - let dispose; - popup(MkPostFormDialog, props, { + const { dispose } = popup(MkPostFormDialog, props, { closed: () => { resolve(); dispose(); }, - }).then(res => { - dispose = res.dispose; }); }); } diff --git a/packages/frontend/src/pages/about.federation.vue b/packages/frontend/src/pages/about.federation.vue index ac5d601d6d..71353c7dfa 100644 --- a/packages/frontend/src/pages/about.federation.vue +++ b/packages/frontend/src/pages/about.federation.vue @@ -74,9 +74,9 @@ const pagination = { sort: sort.value, host: host.value !== '' ? host.value : null, ...( - state.value === 'federating' ? { federating: true } : - state.value === 'subscribing' ? { subscribing: true } : - state.value === 'publishing' ? { publishing: true } : + state.value === 'federating' ? { federating: true, suspended: false, blocked: false } : + state.value === 'subscribing' ? { subscribing: true, suspended: false, blocked: false } : + state.value === 'publishing' ? { publishing: true, suspended: false, blocked: false } : state.value === 'suspended' ? { suspended: true } : state.value === 'blocked' ? { blocked: true } : state.value === 'silenced' ? { silenced: true } : diff --git a/packages/frontend/src/pages/about.overview.vue b/packages/frontend/src/pages/about.overview.vue new file mode 100644 index 0000000000..c378c0a0b8 --- /dev/null +++ b/packages/frontend/src/pages/about.overview.vue @@ -0,0 +1,210 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<div class="_gaps_m"> + <div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"> + <div style="overflow: clip;"> + <img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/> + <div :class="$style.bannerName"> + <b>{{ instance.name ?? host }}</b> + </div> + </div> + </div> + + <MkKeyValue> + <template #key>{{ i18n.ts.description }}</template> + <template #value><div v-html="sanitizeHtml(instance.description)"></div></template> + </MkKeyValue> + + <FormSection> + <div class="_gaps_m"> + <MkKeyValue :copy="version"> + <template #key>Sharkey</template> + <template #value>{{ version }}</template> + </MkKeyValue> + <div v-html="i18n.tsx.poweredByMisskeyDescription({ name: instance.name ?? host })"> + </div> + <FormLink to="/about-sharkey"> + <template #icon><i class="ti ti-info-circle"></i></template> + {{ i18n.ts.aboutMisskey }} + </FormLink> + <FormLink v-if="instance.repositoryUrl || instance.providesTarball" :to="instance.repositoryUrl || `/tarball/sharkey-${version}.tar.gz`" external> + <template #icon><i class="ti ti-code"></i></template> + {{ i18n.ts.sourceCode }} + </FormLink> + <MkInfo v-else warn> + {{ i18n.ts.sourceCodeIsNotYetProvided }} + </MkInfo> + </div> + </FormSection> + + <FormSection> + <div class="_gaps_m"> + <FormSplit> + <MkKeyValue :copy="instance.maintainerName"> + <template #key>{{ i18n.ts.administrator }}</template> + <template #value> + <template v-if="instance.maintainerName">{{ instance.maintainerName }}</template> + <span v-else style="opacity: 0.7;">({{ i18n.ts.none }})</span> + </template> + </MkKeyValue> + <MkKeyValue :copy="instance.maintainerEmail"> + <template #key>{{ i18n.ts.contact }}</template> + <template #value> + <template v-if="instance.maintainerEmail">{{ instance.maintainerEmail }}</template> + <span v-else style="opacity: 0.7;">({{ i18n.ts.none }})</span> + </template> + </MkKeyValue> + <MkKeyValue> + <template #key>{{ i18n.ts.inquiry }}</template> + <template #value> + <MkLink v-if="instance.inquiryUrl" :url="instance.inquiryUrl" target="_blank">{{ instance.inquiryUrl }}</MkLink> + <span v-else style="opacity: 0.7;">({{ i18n.ts.none }})</span> + </template> + </MkKeyValue> + </FormSplit> + <FormLink v-if="instance.impressumUrl" :to="instance.impressumUrl" external> + <template #icon><i class="ti ti-user-shield"></i></template> + {{ i18n.ts.impressum }} + </FormLink> + <div class="_gaps_s"> + <FormLink v-if="instance.impressumUrl" :to="instance.impressumUrl" external> + <template #icon><i class="ti ti-user-shield"></i></template> + <template #default>{{ i18n.ts.impressum }}</template> + </FormLink> + <MkFolder v-if="instance.serverRules.length > 0"> + <template #icon><i class="ti ti-checkup-list"></i></template> + <template #label>{{ i18n.ts.serverRules }}</template> + <ol class="_gaps_s" :class="$style.rules"> + <li v-for="item in instance.serverRules" :key="item" :class="$style.rule"> + <div :class="$style.ruleText" v-html="sanitizeHtml(item)"></div> + </li> + </ol> + </MkFolder> + <FormLink v-if="instance.tosUrl" :to="instance.tosUrl" external> + <template #icon><i class="ti ti-license"></i></template> + <template #default>{{ i18n.ts.termsOfService }}</template> + </FormLink> + <FormLink v-if="instance.privacyPolicyUrl" :to="instance.privacyPolicyUrl" external> + <template #icon><i class="ti ti-shield-lock"></i></template> + <template #default>{{ i18n.ts.privacyPolicy }}</template> + </FormLink> + <FormLink v-if="instance.feedbackUrl" :to="instance.feedbackUrl" external> + <template #icon><i class="ti ti-message"></i></template> + <template #default>{{ i18n.ts.feedback }}</template> + </FormLink> + </div> + </div> + </FormSection> + + <FormSuspense v-slot="{ result: stats }" :p="initStats"> + <FormSection> + <template #label>{{ i18n.ts.statistics }}</template> + <FormSplit> + <MkKeyValue> + <template #key>{{ i18n.ts.users }}</template> + <template #value>{{ number(stats.originalUsersCount) }}</template> + </MkKeyValue> + <MkKeyValue> + <template #key>{{ i18n.ts.notes }}</template> + <template #value>{{ number(stats.originalNotesCount) }}</template> + </MkKeyValue> + </FormSplit> + </FormSection> + </FormSuspense> + + <FormSection> + <template #label>Well-known resources</template> + <div class="_gaps_s"> + <FormLink to="/.well-known/host-meta" external>host-meta</FormLink> + <FormLink to="/.well-known/host-meta.json" external>host-meta.json</FormLink> + <FormLink to="/.well-known/nodeinfo" external>nodeinfo</FormLink> + <FormLink to="/robots.txt" external>robots.txt</FormLink> + <FormLink to="/manifest.json" external>manifest.json</FormLink> + </div> + </FormSection> +</div> +</template> + +<script lang="ts" setup> +import sanitizeHtml from '@/scripts/sanitize-html.js'; +import { host, version } from '@/config.js'; +import { i18n } from '@/i18n.js'; +import { instance } from '@/instance.js'; +import number from '@/filters/number.js'; +import { misskeyApi } from '@/scripts/misskey-api.js'; +import FormLink from '@/components/form/link.vue'; +import FormSection from '@/components/form/section.vue'; +import FormSplit from '@/components/form/split.vue'; +import FormSuspense from '@/components/form/suspense.vue'; +import MkFolder from '@/components/MkFolder.vue'; +import MkKeyValue from '@/components/MkKeyValue.vue'; +import MkLink from '@/components/MkLink.vue'; + +const initStats = () => misskeyApi('stats', {}); +</script> + +<style lang="scss" module> +.banner { + text-align: center; + border-radius: var(--radius); + overflow: clip; + background-color: var(--panel); + background-size: cover; + background-position: center center; +} + +.bannerIcon { + display: block; + margin: 16px auto 0 auto; + height: 64px; + border-radius: var(--radius-sm);; +} + +.bannerName { + display: block; + padding: 16px; + color: #fff; + text-shadow: 0 0 8px #000; + background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); +} + +.rules { + counter-reset: item; + list-style: none; + padding: 0; + margin: 0; +} + +.rule { + display: flex; + gap: 8px; + word-break: break-word; + + &::before { + flex-shrink: 0; + display: flex; + position: sticky; + top: calc(var(--stickyTop, 0px) + 8px); + counter-increment: item; + content: counter(item); + width: 32px; + height: 32px; + line-height: 32px; + background-color: var(--accentedBg); + color: var(--accent); + font-size: 13px; + font-weight: bold; + align-items: center; + justify-content: center; + border-radius: var(--radius-ellipse); + } +} + +.ruleText { + padding-top: 6px; +} +</style> diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue index 11823cc799..f35cbe8d5a 100644 --- a/packages/frontend/src/pages/about.vue +++ b/packages/frontend/src/pages/about.vue @@ -8,113 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs"> <MkSpacer v-if="tab === 'overview'" :contentMax="600" :marginMin="20"> - <div class="_gaps_m"> - <div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"> - <div style="overflow: clip;"> - <img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/> - <div :class="$style.bannerName"> - <b>{{ instance.name ?? host }}</b> - </div> - </div> - </div> - - <MkKeyValue> - <template #key>{{ i18n.ts.description }}</template> - <template #value><div v-html="sanitizeHtml(instance.description)"></div></template> - </MkKeyValue> - - <FormSection> - <div class="_gaps_m"> - <MkKeyValue :copy="version"> - <template #key>Sharkey</template> - <template #value>{{ version }}</template> - </MkKeyValue> - <div v-html="i18n.tsx.poweredByMisskeyDescription({ name: instance.name ?? host })"> - </div> - <FormLink to="/about-sharkey"> - <template #icon><i class="ti ti-info-circle"></i></template> - {{ i18n.ts.aboutMisskey }} - </FormLink> - <FormLink v-if="instance.repositoryUrl || instance.providesTarball" :to="instance.repositoryUrl || `/tarball/sharkey-${version}.tar.gz`" external> - <template #icon><i class="ti ti-code"></i></template> - {{ i18n.ts.sourceCode }} - </FormLink> - <MkInfo v-else warn> - {{ i18n.ts.sourceCodeIsNotYetProvided }} - </MkInfo> - </div> - </FormSection> - - <FormSection> - <div class="_gaps_m"> - <FormSplit> - <MkKeyValue> - <template #key>{{ i18n.ts.administrator }}</template> - <template #value>{{ instance.maintainerName }}</template> - </MkKeyValue> - <MkKeyValue> - <template #key>{{ i18n.ts.contact }}</template> - <template #value>{{ instance.maintainerEmail }}</template> - </MkKeyValue> - </FormSplit> - <FormLink v-if="instance.impressumUrl" :to="instance.impressumUrl" external> - <template #icon><i class="ti ti-user-shield"></i></template> - {{ i18n.ts.impressum }} - </FormLink> - <div class="_gaps_s"> - <MkFolder v-if="instance.serverRules.length > 0"> - <template #label> - <i class="ti ti-checkup-list"></i> - {{ i18n.ts.serverRules }} - </template> - - <ol class="_gaps_s" :class="$style.rules"> - <li v-for="(item, index) in instance.serverRules" :key="index" :class="$style.rule"><div :class="$style.ruleText" v-html="sanitizeHtml(item)"></div></li> - </ol> - </MkFolder> - <FormLink v-if="instance.tosUrl" :to="instance.tosUrl" external> - <template #icon><i class="ti ti-license"></i></template> - {{ i18n.ts.termsOfService }} - </FormLink> - <FormLink v-if="instance.privacyPolicyUrl" :to="instance.privacyPolicyUrl" external> - <template #icon><i class="ti ti-shield-lock"></i></template> - {{ i18n.ts.privacyPolicy }} - </FormLink> - <FormLink v-if="instance.feedbackUrl" :to="instance.feedbackUrl" external> - <template #icon><i class="ti ti-message"></i></template> - {{ i18n.ts.feedback }} - </FormLink> - </div> - </div> - </FormSection> - - <FormSuspense :p="initStats"> - <FormSection> - <template #label>{{ i18n.ts.statistics }}</template> - <FormSplit> - <MkKeyValue> - <template #key>{{ i18n.ts.users }}</template> - <template #value>{{ number(stats.originalUsersCount) }}</template> - </MkKeyValue> - <MkKeyValue> - <template #key>{{ i18n.ts.notes }}</template> - <template #value>{{ number(stats.originalNotesCount) }}</template> - </MkKeyValue> - </FormSplit> - </FormSection> - </FormSuspense> - - <FormSection> - <template #label>Well-known resources</template> - <div class="_gaps_s"> - <FormLink :to="`/.well-known/host-meta`" external>host-meta</FormLink> - <FormLink :to="`/.well-known/host-meta.json`" external>host-meta.json</FormLink> - <FormLink :to="`/.well-known/nodeinfo`" external>nodeinfo</FormLink> - <FormLink :to="`/robots.txt`" external>robots.txt</FormLink> - <FormLink :to="`/manifest.json`" external>manifest.json</FormLink> - </div> - </FormSection> - </div> + <XOverview/> </MkSpacer> <MkSpacer v-else-if="tab === 'emojis'" :contentMax="1000" :marginMin="20"> <XEmojis/> @@ -130,27 +24,16 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import sanitizeHtml from '@/scripts/sanitize-html.js'; -import { computed, watch, ref } from 'vue'; -import * as Misskey from 'misskey-js'; -import XEmojis from './about.emojis.vue'; -import XFederation from './about.federation.vue'; -import { version, host } from '@/config.js'; -import FormLink from '@/components/form/link.vue'; -import FormSection from '@/components/form/section.vue'; -import FormSuspense from '@/components/form/suspense.vue'; -import FormSplit from '@/components/form/split.vue'; -import MkFolder from '@/components/MkFolder.vue'; -import MkKeyValue from '@/components/MkKeyValue.vue'; -import MkInfo from '@/components/MkInfo.vue'; -import MkInstanceStats from '@/components/MkInstanceStats.vue'; -import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; -import { misskeyApi } from '@/scripts/misskey-api.js'; -import number from '@/filters/number.js'; +import { computed, defineAsyncComponent, ref, watch } from 'vue'; import { i18n } from '@/i18n.js'; -import { definePageMetadata } from '@/scripts/page-metadata.js'; import { claimAchievement } from '@/scripts/achievements.js'; -import { instance } from '@/instance.js'; +import { definePageMetadata } from '@/scripts/page-metadata.js'; +import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; + +const XOverview = defineAsyncComponent(() => import('@/pages/about.overview.vue')); +const XEmojis = defineAsyncComponent(() => import('@/pages/about.emojis.vue')); +const XFederation = defineAsyncComponent(() => import('@/pages/about.federation.vue')); +const MkInstanceStats = defineAsyncComponent(() => import('@/components/MkInstanceStats.vue')); const props = withDefaults(defineProps<{ initialTab?: string; @@ -158,7 +41,6 @@ const props = withDefaults(defineProps<{ initialTab: 'overview', }); -const stats = ref<Misskey.entities.StatsResponse | null>(null); const tab = ref(props.initialTab); watch(tab, () => { @@ -167,11 +49,6 @@ watch(tab, () => { } }); -const initStats = () => misskeyApi('stats', { -}).then((res) => { - stats.value = res; -}); - const headerActions = computed(() => []); const headerTabs = computed(() => [{ @@ -196,64 +73,3 @@ definePageMetadata(() => ({ icon: 'ti ti-info-circle', })); </script> - -<style lang="scss" module> -.banner { - text-align: center; - border-radius: var(--radius); - overflow: clip; - background-size: cover; - background-position: center center; -} - -.bannerIcon { - display: block; - margin: 16px auto 0 auto; - height: 64px; - border-radius: var(--radius-sm); -} - -.bannerName { - display: block; - padding: 16px; - color: #fff; - text-shadow: 0 0 8px #000; - background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); -} - -.rules { - counter-reset: item; - list-style: none; - padding: 0; - margin: 0; -} - -.rule { - display: flex; - gap: 8px; - word-break: break-word; - - &::before { - flex-shrink: 0; - display: flex; - position: sticky; - top: calc(var(--stickyTop, 0px) + 8px); - counter-increment: item; - content: counter(item); - width: 32px; - height: 32px; - line-height: 32px; - background-color: var(--accentedBg); - color: var(--accent); - font-size: 13px; - font-weight: bold; - align-items: center; - justify-content: center; - border-radius: var(--radius-ellipse); - } -} - -.ruleText { - padding-top: 6px; -} -</style> diff --git a/packages/frontend/src/pages/admin-user.vue b/packages/frontend/src/pages/admin-user.vue index ef5388969b..af98967fe2 100644 --- a/packages/frontend/src/pages/admin-user.vue +++ b/packages/frontend/src/pages/admin-user.vue @@ -482,16 +482,20 @@ function toggleRoleItem(role) { } function createAnnouncement() { - os.popup(defineAsyncComponent(() => import('@/components/MkUserAnnouncementEditDialog.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUserAnnouncementEditDialog.vue')), { user: user.value, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); } function editAnnouncement(announcement) { - os.popup(defineAsyncComponent(() => import('@/components/MkUserAnnouncementEditDialog.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUserAnnouncementEditDialog.vue')), { user: user.value, announcement, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); } watch(() => props.userId, () => { diff --git a/packages/frontend/src/pages/admin/_header_.vue b/packages/frontend/src/pages/admin/_header_.vue index 5c9c32c964..61dc4f8549 100644 --- a/packages/frontend/src/pages/admin/_header_.vue +++ b/packages/frontend/src/pages/admin/_header_.vue @@ -24,8 +24,8 @@ SPDX-License-Identifier: AGPL-3.0-only <div class="buttons right"> <template v-if="actions"> <template v-for="action in actions"> - <MkButton v-if="action.asFullButton" class="fullButton" primary @click.stop="action.handler"><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton> - <button v-else v-tooltip.noDelay="action.text" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button> + <MkButton v-if="action.asFullButton" class="fullButton" primary :disabled="action.disabled" @click.stop="action.handler"><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton> + <button v-else v-tooltip.noDelay="action.text" class="_button button" :class="{ highlighted: action.highlighted }" :disabled="action.disabled" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button> </template> </template> </div> @@ -56,6 +56,7 @@ const props = defineProps<{ text: string; icon: string; asFullButton?: boolean; + disabled?: boolean; handler: (ev: MouseEvent) => void; }[]; thin?: boolean; diff --git a/packages/frontend/src/pages/admin/abuse-report/notification-recipient.editor.vue b/packages/frontend/src/pages/admin/abuse-report/notification-recipient.editor.vue new file mode 100644 index 0000000000..827e22e8ae --- /dev/null +++ b/packages/frontend/src/pages/admin/abuse-report/notification-recipient.editor.vue @@ -0,0 +1,321 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<MkModalWindow + ref="dialogEl" + :width="400" + :height="490" + :withOkButton="false" + :okButtonDisabled="false" + @close="onCancelClicked" + @closed="emit('closed')" +> + <template #header> + {{ mode === 'create' ? i18n.ts._abuseReport._notificationRecipient.createRecipient : i18n.ts._abuseReport._notificationRecipient.modifyRecipient }} + </template> + <div v-if="loading === 0" style="display: flex; flex-direction: column; min-height: 100%;"> + <MkSpacer :marginMin="20" :marginMax="28" style="flex-grow: 1;"> + <div :class="$style.root" class="_gaps_m"> + <MkInput v-model="title"> + <template #label>{{ i18n.ts.title }}</template> + </MkInput> + <MkSelect v-model="method"> + <template #label>{{ i18n.ts._abuseReport._notificationRecipient.recipientType }}</template> + <option value="email">{{ i18n.ts._abuseReport._notificationRecipient._recipientType.mail }}</option> + <option value="webhook">{{ i18n.ts._abuseReport._notificationRecipient._recipientType.webhook }}</option> + <template #caption> + {{ methodCaption }} + </template> + </MkSelect> + <div> + <MkSelect v-if="method === 'email'" v-model="userId"> + <template #label>{{ i18n.ts._abuseReport._notificationRecipient.notifiedUser }}</template> + <option v-for="user in moderators" :key="user.id" :value="user.id"> + {{ user.name ? `${user.name}(${user.username})` : user.username }} + </option> + </MkSelect> + <div v-else-if="method === 'webhook'" :class="$style.systemWebhook"> + <MkSelect v-model="systemWebhookId" style="flex: 1"> + <template #label>{{ i18n.ts._abuseReport._notificationRecipient.notifiedWebhook }}</template> + <option v-for="webhook in systemWebhooks" :key="webhook.id ?? undefined" :value="webhook.id"> + {{ webhook.name }} + </option> + </MkSelect> + <MkButton rounded :class="$style.systemWebhookEditButton" @click="onEditSystemWebhookClicked"> + <span v-if="systemWebhookId === null" class="ti ti-plus" style="line-height: normal"/> + <span v-else class="ti ti-settings" style="line-height: normal"/> + </MkButton> + </div> + </div> + + <MkDivider/> + + <MkSwitch v-model="isActive"> + <template #label>{{ i18n.ts.enable }}</template> + </MkSwitch> + </div> + </MkSpacer> + + <div :class="$style.footer" class="_buttonsCenter"> + <MkButton primary rounded :disabled="disableSubmitButton" @click="onSubmitClicked"><i class="ti ti-check"></i> {{ i18n.ts.ok }}</MkButton> + <MkButton rounded @click="onCancelClicked"><i class="ti ti-x"></i> {{ i18n.ts.cancel }}</MkButton> + </div> + </div> + <div v-else> + <MkLoading/> + </div> +</MkModalWindow> +</template> + +<script lang="ts" setup> +import { computed, onMounted, ref, shallowRef, toRefs } from 'vue'; +import { entities } from 'misskey-js'; +import MkButton from '@/components/MkButton.vue'; +import MkModalWindow from '@/components/MkModalWindow.vue'; +import { i18n } from '@/i18n.js'; +import MkInput from '@/components/MkInput.vue'; +import { misskeyApi } from '@/scripts/misskey-api.js'; +import MkSelect from '@/components/MkSelect.vue'; +import { MkSystemWebhookResult, showSystemWebhookEditorDialog } from '@/components/MkSystemWebhookEditor.impl.js'; +import MkSwitch from '@/components/MkSwitch.vue'; +import MkDivider from '@/components/MkDivider.vue'; +import * as os from '@/os.js'; + +type NotificationRecipientMethod = 'email' | 'webhook'; + +const emit = defineEmits<{ + (ev: 'submitted'): void; + (ev: 'canceled'): void; + (ev: 'closed'): void; +}>(); + +const props = defineProps<{ + mode: 'create' | 'edit'; + id?: string; +}>(); + +const { mode, id } = toRefs(props); + +const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>(); + +const loading = ref<number>(0); + +const title = ref<string>(''); +const method = ref<NotificationRecipientMethod>('email'); +const userId = ref<string | null>(null); +const systemWebhookId = ref<string | null>(null); +const isActive = ref<boolean>(true); + +const moderators = ref<entities.User[]>([]); +const systemWebhooks = ref<(entities.SystemWebhook | { id: null, name: string })[]>([]); + +const methodCaption = computed(() => { + switch (method.value) { + case 'email': { + return i18n.ts._abuseReport._notificationRecipient._recipientType._captions.mail; + } + case 'webhook': { + return i18n.ts._abuseReport._notificationRecipient._recipientType._captions.webhook; + } + default: { + return ''; + } + } +}); + +const disableSubmitButton = computed(() => { + if (!title.value) { + return true; + } + + switch (method.value) { + case 'email': { + return userId.value === null; + } + case 'webhook': { + return systemWebhookId.value === null; + } + default: { + return true; + } + } +}); + +async function onSubmitClicked() { + await loadingScope(async () => { + const _userId = (method.value === 'email') ? userId.value : null; + const _systemWebhookId = (method.value === 'webhook') ? systemWebhookId.value : null; + const params = { + isActive: isActive.value, + name: title.value, + method: method.value, + userId: _userId ?? undefined, + systemWebhookId: _systemWebhookId ?? undefined, + }; + + try { + switch (mode.value) { + case 'create': { + await misskeyApi('admin/abuse-report/notification-recipient/create', params); + break; + } + case 'edit': { + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + await misskeyApi('admin/abuse-report/notification-recipient/update', { id: id.value!, ...params }); + break; + } + } + + dialogEl.value?.close(); + emit('submitted'); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + } catch (ex: any) { + const msg = ex.message ?? i18n.ts.internalServerErrorDescription; + await os.alert({ type: 'error', title: i18n.ts.error, text: msg }); + dialogEl.value?.close(); + emit('canceled'); + } + }); +} + +function onCancelClicked() { + dialogEl.value?.close(); + emit('canceled'); +} + +async function onEditSystemWebhookClicked() { + let result: MkSystemWebhookResult | null; + if (systemWebhookId.value === null) { + result = await showSystemWebhookEditorDialog({ + mode: 'create', + }); + } else { + result = await showSystemWebhookEditorDialog({ + mode: 'edit', + id: systemWebhookId.value, + }); + } + if (!result) { + return; + } + + await fetchSystemWebhooks(); + systemWebhookId.value = result.id ?? null; +} + +async function fetchSystemWebhooks() { + await loadingScope(async () => { + systemWebhooks.value = [ + { id: null, name: i18n.ts.createNew }, + ...await misskeyApi('admin/system-webhook/list', { }), + ]; + }); +} + +async function fetchModerators() { + await loadingScope(async () => { + const users = Array.of<entities.User>(); + for (; ;) { + const res = await misskeyApi('admin/show-users', { + limit: 100, + state: 'adminOrModerator', + origin: 'local', + offset: users.length, + }); + + if (res.length === 0) { + break; + } + + users.push(...res); + } + + moderators.value = users; + }); +} + +async function loadingScope<T>(fn: () => Promise<T>): Promise<T> { + loading.value++; + try { + return await fn(); + } finally { + loading.value--; + } +} + +onMounted(async () => { + await loadingScope(async () => { + await fetchModerators(); + await fetchSystemWebhooks(); + + if (mode.value === 'edit') { + if (!id.value) { + throw new Error('id is required'); + } + + try { + const res = await misskeyApi('admin/abuse-report/notification-recipient/show', { id: id.value }); + + title.value = res.name; + method.value = res.method; + userId.value = res.userId ?? null; + systemWebhookId.value = res.systemWebhookId ?? null; + isActive.value = res.isActive; + // eslint-disable-next-line + } catch (ex: any) { + const msg = ex.message ?? i18n.ts.internalServerErrorDescription; + await os.alert({ type: 'error', title: i18n.ts.error, text: msg }); + dialogEl.value?.close(); + emit('canceled'); + } + } else { + userId.value = moderators.value[0]?.id ?? null; + systemWebhookId.value = systemWebhooks.value[0]?.id ?? null; + } + }); +}); + +</script> + +<style lang="scss" module> +.root { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: stretch; +} + +.footer { + position: sticky; + z-index: 10000; + bottom: 0; + left: 0; + padding: 12px; + border-top: solid 0.5px var(--divider); + background: var(--acrylicBg); + -webkit-backdrop-filter: var(--blur, blur(15px)); + backdrop-filter: var(--blur, blur(15px)); +} + +.systemWebhook { + display: flex; + flex-direction: row; + justify-content: stretch; + align-items: flex-end; + gap: 8px; +} + +.systemWebhookEditButton { + min-width: 0; + min-height: 0; + width: 34px; + height: 34px; + flex-shrink: 0; + box-sizing: border-box; + margin: 1px 0; + padding: 6px; +} +</style> diff --git a/packages/frontend/src/pages/admin/abuse-report/notification-recipient.item.vue b/packages/frontend/src/pages/admin/abuse-report/notification-recipient.item.vue new file mode 100644 index 0000000000..0b86808faf --- /dev/null +++ b/packages/frontend/src/pages/admin/abuse-report/notification-recipient.item.vue @@ -0,0 +1,114 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<div :class="$style.root" class="_panel _gaps_s"> + <div :class="$style.rightDivider" style="width: 80px;"><span :class="`ti ${methodIcon}`"/> {{ methodName }}</div> + <div :class="$style.rightDivider" style="flex: 0.5">{{ entity.name }}</div> + <div :class="$style.rightDivider" style="flex: 1"> + <div v-if="method === 'email' && user"> + {{ + `${i18n.ts._abuseReport._notificationRecipient.notifiedUser}: ` + ((user.name) ? `${user.name}(${user.username})` : user.username) + }} + </div> + <div v-if="method === 'webhook' && systemWebhook"> + {{ `${i18n.ts._abuseReport._notificationRecipient.notifiedWebhook}: ` + systemWebhook.name }} + </div> + </div> + <div :class="$style.recipientButtons" style="margin-left: auto"> + <button :class="$style.recipientButton" @click="onEditButtonClicked()"> + <span class="ti ti-settings"/> + </button> + <button :class="$style.recipientButton" @click="onDeleteButtonClicked()"> + <span class="ti ti-trash"/> + </button> + </div> +</div> +</template> + +<script setup lang="ts"> +import { entities } from 'misskey-js'; +import { computed, toRefs } from 'vue'; +import { i18n } from '@/i18n.js'; + +const emit = defineEmits<{ + (ev: 'edit', id: entities.AbuseReportNotificationRecipient['id']): void; + (ev: 'delete', id: entities.AbuseReportNotificationRecipient['id']): void; +}>(); + +const props = defineProps<{ + entity: entities.AbuseReportNotificationRecipient; +}>(); + +const { entity } = toRefs(props); + +const method = computed(() => entity.value.method); +const user = computed(() => entity.value.user); +const systemWebhook = computed(() => entity.value.systemWebhook); +const methodIcon = computed(() => { + switch (entity.value.method) { + case 'email': + return 'ti-mail'; + case 'webhook': + return 'ti-webhook'; + default: + return 'ti-help'; + } +}); +const methodName = computed(() => { + switch (entity.value.method) { + case 'email': + return i18n.ts._abuseReport._notificationRecipient._recipientType.mail; + case 'webhook': + return i18n.ts._abuseReport._notificationRecipient._recipientType.webhook; + default: + return '不明'; + } +}); + +function onEditButtonClicked() { + emit('edit', entity.value.id); +} + +function onDeleteButtonClicked() { + emit('delete', entity.value.id); +} +</script> + +<style module lang="scss"> +.root { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 4px 8px; +} + +.rightDivider { + border-right: 0.5px solid var(--divider); +} + +.recipientButtons { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin-right: -4; +} + +.recipientButton { + background-color: transparent; + border: none; + border-radius: 9999px; + box-sizing: border-box; + margin-top: -2px; + margin-bottom: -2px; + padding: 8px; + + &:hover { + background-color: var(--buttonBg); + } +} +</style> diff --git a/packages/frontend/src/pages/admin/abuse-report/notification-recipient.vue b/packages/frontend/src/pages/admin/abuse-report/notification-recipient.vue new file mode 100644 index 0000000000..f5249261be --- /dev/null +++ b/packages/frontend/src/pages/admin/abuse-report/notification-recipient.vue @@ -0,0 +1,177 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<MkStickyContainer> + <template #header> + <XHeader :actions="headerActions" :tabs="headerTabs"/> + </template> + + <MkSpacer :contentMax="900"> + <div :class="$style.root" class="_gaps_m"> + <div :class="$style.addButton"> + <MkButton primary @click="onAddButtonClicked"> + <span class="ti ti-plus"/> {{ i18n.ts._abuseReport._notificationRecipient.createRecipient }} + </MkButton> + </div> + <div :class="$style.subMenus" class="_gaps_s"> + <MkSelect v-model="filterMethod" style="flex: 1"> + <template #label>{{ i18n.ts._abuseReport._notificationRecipient.recipientType }}</template> + <option :value="null">-</option> + <option :value="'email'">{{ i18n.ts._abuseReport._notificationRecipient._recipientType.mail }}</option> + <option :value="'webhook'">{{ i18n.ts._abuseReport._notificationRecipient._recipientType.webhook }}</option> + </MkSelect> + <MkInput v-model="filterText" type="search" style="flex: 1"> + <template #label>{{ i18n.ts._abuseReport._notificationRecipient.keywords }}</template> + </MkInput> + </div> + + <MkDivider/> + + <div :class="$style.recipients" class="_gaps_s"> + <XRecipient + v-for="r in filteredRecipients" + :key="r.id" + :entity="r" + @edit="onEditButtonClicked" + @delete="onDeleteButtonClicked" + /> + </div> + </div> + </MkSpacer> +</MkStickyContainer> +</template> + +<script setup lang="ts"> +import { entities } from 'misskey-js'; +import { computed, defineAsyncComponent, onMounted, ref } from 'vue'; +import XRecipient from './notification-recipient.item.vue'; +import XHeader from '@/pages/admin/_header_.vue'; +import { misskeyApi } from '@/scripts/misskey-api.js'; +import MkInput from '@/components/MkInput.vue'; +import MkSelect from '@/components/MkSelect.vue'; +import MkButton from '@/components/MkButton.vue'; +import * as os from '@/os.js'; +import MkDivider from '@/components/MkDivider.vue'; +import { i18n } from '@/i18n.js'; + +const recipients = ref<entities.AbuseReportNotificationRecipient[]>([]); + +const filterMethod = ref<string | null>(null); +const filterText = ref<string>(''); + +const filteredRecipients = computed(() => { + const method = filterMethod.value; + const text = filterText.value.trim().length === 0 ? null : filterText.value; + + return recipients.value.filter(it => { + if (method ?? text) { + if (text) { + const keywords = [it.name, it.systemWebhook?.name, it.user?.name, it.user?.username]; + if (keywords.filter(k => k?.includes(text)).length !== 0) { + return true; + } + } + + if (method) { + return it.method.includes(method); + } + + return false; + } + + return true; + }); +}); +const headerActions = computed(() => []); +const headerTabs = computed(() => []); + +async function onAddButtonClicked() { + await showEditor('create'); +} + +async function onEditButtonClicked(id: string) { + await showEditor('edit', id); +} + +async function onDeleteButtonClicked(id: string) { + const res = await os.confirm({ + type: 'warning', + title: i18n.ts._abuseReport._notificationRecipient.deleteConfirm, + }); + if (!res.canceled) { + await misskeyApi('admin/abuse-report/notification-recipient/delete', { id: id }); + await fetchRecipients(); + } +} + +async function showEditor(mode: 'create' | 'edit', id?: string) { + const { needLoad } = await new Promise<{ needLoad: boolean }>(async resolve => { + const { dispose } = os.popup( + defineAsyncComponent(() => import('./notification-recipient.editor.vue')), + { + mode, + id, + }, + { + submitted: () => { + resolve({ needLoad: true }); + }, + canceled: () => { + resolve({ needLoad: false }); + }, + closed: () => { + dispose(); + }, + }, + ); + }); + + if (needLoad) { + await fetchRecipients(); + } +} + +async function fetchRecipients() { + const result = await misskeyApi('admin/abuse-report/notification-recipient/list', { + method: ['email', 'webhook'], + }); + + recipients.value = result.sort((a, b) => (a.method + a.id).localeCompare(b.method + b.id)); +} + +onMounted(async () => { + await fetchRecipients(); +}); +</script> + +<style module lang="scss"> +.root { + display: flex; + flex-direction: column; + justify-content: center; + align-items: stretch; +} + +.addButton { + display: flex; + justify-content: flex-end; + gap: 8px; +} + +.subMenus { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-end; +} + +.recipients { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: stretch; +} +</style> diff --git a/packages/frontend/src/pages/admin/abuses.vue b/packages/frontend/src/pages/admin/abuses.vue index 39267b1345..fdc014a46e 100644 --- a/packages/frontend/src/pages/admin/abuses.vue +++ b/packages/frontend/src/pages/admin/abuses.vue @@ -7,30 +7,33 @@ SPDX-License-Identifier: AGPL-3.0-only <MkStickyContainer> <template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template> <MkSpacer :contentMax="900"> - <div> - <div class="reports"> - <div class=""> - <div class="inputs" style="display: flex;"> - <MkSelect v-model="state" style="margin: 0; flex: 1;"> - <template #label>{{ i18n.ts.state }}</template> - <option value="all">{{ i18n.ts.all }}</option> - <option value="unresolved">{{ i18n.ts.unresolved }}</option> - <option value="resolved">{{ i18n.ts.resolved }}</option> - </MkSelect> - <MkSelect v-model="targetUserOrigin" style="margin: 0; flex: 1;"> - <template #label>{{ i18n.ts.reporteeOrigin }}</template> - <option value="combined">{{ i18n.ts.all }}</option> - <option value="local">{{ i18n.ts.local }}</option> - <option value="remote">{{ i18n.ts.remote }}</option> - </MkSelect> - <MkSelect v-model="reporterOrigin" style="margin: 0; flex: 1;"> - <template #label>{{ i18n.ts.reporterOrigin }}</template> - <option value="combined">{{ i18n.ts.all }}</option> - <option value="local">{{ i18n.ts.local }}</option> - <option value="remote">{{ i18n.ts.remote }}</option> - </MkSelect> - </div> - <!-- TODO + <div :class="$style.root" class="_gaps"> + <div :class="$style.subMenus" class="_gaps"> + <MkButton link to="/admin/abuse-report-notification-recipient" primary>{{ "通知設定" }}</MkButton> + </div> + + <div :class="$style.inputs" class="_gaps"> + <MkSelect v-model="state" style="margin: 0; flex: 1;"> + <template #label>{{ i18n.ts.state }}</template> + <option value="all">{{ i18n.ts.all }}</option> + <option value="unresolved">{{ i18n.ts.unresolved }}</option> + <option value="resolved">{{ i18n.ts.resolved }}</option> + </MkSelect> + <MkSelect v-model="targetUserOrigin" style="margin: 0; flex: 1;"> + <template #label>{{ i18n.ts.reporteeOrigin }}</template> + <option value="combined">{{ i18n.ts.all }}</option> + <option value="local">{{ i18n.ts.local }}</option> + <option value="remote">{{ i18n.ts.remote }}</option> + </MkSelect> + <MkSelect v-model="reporterOrigin" style="margin: 0; flex: 1;"> + <template #label>{{ i18n.ts.reporterOrigin }}</template> + <option value="combined">{{ i18n.ts.all }}</option> + <option value="local">{{ i18n.ts.local }}</option> + <option value="remote">{{ i18n.ts.remote }}</option> + </MkSelect> + </div> + + <!-- TODO <div class="inputs" style="display: flex; padding-top: 1.2em;"> <MkInput v-model="searchUsername" style="margin: 0; flex: 1;" type="text" :spellcheck="false"> <span>{{ i18n.ts.username }}</span> @@ -41,11 +44,9 @@ SPDX-License-Identifier: AGPL-3.0-only </div> --> - <MkPagination v-slot="{items}" ref="reports" :pagination="pagination" :displayLimit="50" style="margin-top: var(--margin);"> - <XAbuseReport v-for="report in items" :key="report.id" :report="report" @resolved="resolved"/> - </MkPagination> - </div> - </div> + <MkPagination v-slot="{items}" ref="reports" :pagination="pagination" :displayLimit="50" style="margin-top: var(--margin);"> + <XAbuseReport v-for="report in items" :key="report.id" :report="report" @resolved="resolved"/> + </MkPagination> </div> </MkSpacer> </MkStickyContainer> @@ -60,6 +61,7 @@ import MkPagination from '@/components/MkPagination.vue'; import XAbuseReport from '@/components/MkAbuseReport.vue'; import { i18n } from '@/i18n.js'; import { definePageMetadata } from '@/scripts/page-metadata.js'; +import MkButton from '@/components/MkButton.vue'; const reports = shallowRef<InstanceType<typeof MkPagination>>(); @@ -80,7 +82,7 @@ const pagination = { }; function resolved(reportId) { - reports.value.removeItem(reportId); + reports.value?.removeItem(reportId); } const headerActions = computed(() => []); @@ -92,3 +94,26 @@ definePageMetadata(() => ({ icon: 'ti ti-exclamation-circle', })); </script> + +<style module lang="scss"> +.root { + display: flex; + flex-direction: column; + justify-content: center; + align-items: stretch; +} + +.subMenus { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; +} + +.inputs { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} +</style> diff --git a/packages/frontend/src/pages/admin/announcements.vue b/packages/frontend/src/pages/admin/announcements.vue index e7fb62ec1d..b9e09c8d03 100644 --- a/packages/frontend/src/pages/admin/announcements.vue +++ b/packages/frontend/src/pages/admin/announcements.vue @@ -11,70 +11,83 @@ SPDX-License-Identifier: AGPL-3.0-only <MkInfo>{{ i18n.ts._announcement.shouldNotBeUsedToPresentPermanentInfo }}</MkInfo> <MkInfo v-if="announcements.length > 5" warn>{{ i18n.ts._announcement.tooManyActiveAnnouncementDescription }}</MkInfo> - <MkFolder v-for="announcement in announcements" :key="announcement.id ?? announcement._id" :defaultOpen="announcement.id == null"> - <template #label>{{ announcement.title }}</template> - <template #icon> - <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> - </template> - <template #caption>{{ announcement.text }}</template> + <MkSelect v-model="announcementsStatus"> + <template #label>{{ i18n.ts.filter }}</template> + <option value="active">{{ i18n.ts.active }}</option> + <option value="archived">{{ i18n.ts.archived }}</option> + </MkSelect> - <div class="_gaps_m"> - <MkInput v-model="announcement.title"> - <template #label>{{ i18n.ts.title }}</template> - </MkInput> - <MkTextarea v-model="announcement.text" mfmAutocomplete :mfmPreview="true"> - <template #label>{{ i18n.ts.text }}</template> - </MkTextarea> - <MkInput v-model="announcement.imageUrl" type="url"> - <template #label>{{ i18n.ts.imageUrl }}</template> - </MkInput> - <MkRadios v-model="announcement.icon"> - <template #label>{{ i18n.ts.icon }}</template> - <option value="info"><i class="ti ti-info-circle"></i></option> - <option value="warning"><i class="ti ti-alert-triangle" style="color: var(--warn);"></i></option> - <option value="error"><i class="ti ti-circle-x" style="color: var(--error);"></i></option> - <option value="success"><i class="ti ti-check" style="color: var(--success);"></i></option> - </MkRadios> - <MkRadios v-model="announcement.display"> - <template #label>{{ i18n.ts.display }}</template> - <option value="normal">{{ i18n.ts.normal }}</option> - <option value="banner">{{ i18n.ts.banner }}</option> - <option value="dialog">{{ i18n.ts.dialog }}</option> - </MkRadios> - <MkInfo v-if="announcement.display === 'dialog'" warn>{{ i18n.ts._announcement.dialogAnnouncementUxWarn }}</MkInfo> - <MkSwitch v-model="announcement.forExistingUsers" :helpText="i18n.ts._announcement.forExistingUsersDescription"> - {{ i18n.ts._announcement.forExistingUsers }} - </MkSwitch> - <MkSwitch v-model="announcement.silence" :helpText="i18n.ts._announcement.silenceDescription"> - {{ i18n.ts._announcement.silence }} - </MkSwitch> - <MkSwitch v-model="announcement.needConfirmationToRead" :helpText="i18n.ts._announcement.needConfirmationToReadDescription"> - {{ i18n.ts._announcement.needConfirmationToRead }} - </MkSwitch> - <p v-if="announcement.reads">{{ i18n.tsx.nUsersRead({ n: announcement.reads }) }}</p> - <div class="buttons _buttons"> - <MkButton class="button" inline primary @click="save(announcement)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton> - <MkButton v-if="announcement.id != null" class="button" inline @click="archive(announcement)"><i class="ti ti-check"></i> {{ i18n.ts._announcement.end }} ({{ i18n.ts.archive }})</MkButton> - <MkButton v-if="announcement.id != null" class="button" inline danger @click="del(announcement)"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton> + <MkLoading v-if="loading"/> + + <template v-else> + <MkFolder v-for="announcement in announcements" :key="announcement.id ?? announcement._id" :defaultOpen="announcement.id == null"> + <template #label>{{ announcement.title }}</template> + <template #icon> + <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> + </template> + <template #caption>{{ announcement.text }}</template> + + <div class="_gaps_m"> + <MkInput v-model="announcement.title"> + <template #label>{{ i18n.ts.title }}</template> + </MkInput> + <MkTextarea v-model="announcement.text" mfmAutocomplete :mfmPreview="true"> + <template #label>{{ i18n.ts.text }}</template> + </MkTextarea> + <MkInput v-model="announcement.imageUrl" type="url"> + <template #label>{{ i18n.ts.imageUrl }}</template> + </MkInput> + <MkRadios v-model="announcement.icon"> + <template #label>{{ i18n.ts.icon }}</template> + <option value="info"><i class="ti ti-info-circle"></i></option> + <option value="warning"><i class="ti ti-alert-triangle" style="color: var(--warn);"></i></option> + <option value="error"><i class="ti ti-circle-x" style="color: var(--error);"></i></option> + <option value="success"><i class="ti ti-check" style="color: var(--success);"></i></option> + </MkRadios> + <MkRadios v-model="announcement.display"> + <template #label>{{ i18n.ts.display }}</template> + <option value="normal">{{ i18n.ts.normal }}</option> + <option value="banner">{{ i18n.ts.banner }}</option> + <option value="dialog">{{ i18n.ts.dialog }}</option> + </MkRadios> + <MkInfo v-if="announcement.display === 'dialog'" warn>{{ i18n.ts._announcement.dialogAnnouncementUxWarn }}</MkInfo> + <MkSwitch v-model="announcement.forExistingUsers" :helpText="i18n.ts._announcement.forExistingUsersDescription"> + {{ i18n.ts._announcement.forExistingUsers }} + </MkSwitch> + <MkSwitch v-model="announcement.silence" :helpText="i18n.ts._announcement.silenceDescription"> + {{ i18n.ts._announcement.silence }} + </MkSwitch> + <MkSwitch v-model="announcement.needConfirmationToRead" :helpText="i18n.ts._announcement.needConfirmationToReadDescription"> + {{ i18n.ts._announcement.needConfirmationToRead }} + </MkSwitch> + <p v-if="announcement.reads">{{ i18n.tsx.nUsersRead({ n: announcement.reads }) }}</p> + <div class="buttons _buttons"> + <MkButton class="button" inline primary @click="save(announcement)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton> + <MkButton v-if="announcement.id != null && announcement.isActive" class="button" inline @click="archive(announcement)"><i class="ti ti-check"></i> {{ i18n.ts._announcement.end }} ({{ i18n.ts.archive }})</MkButton> + <MkButton v-if="announcement.id != null && !announcement.isActive" class="button" inline @click="unarchive(announcement)"><i class="ti ti-restore"></i> {{ i18n.ts.unarchive }}</MkButton> + <MkButton v-if="announcement.id != null" class="button" inline danger @click="del(announcement)"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton> + </div> </div> - </div> - </MkFolder> - <MkButton class="button" @click="more()"> - <i class="ti ti-reload"></i>{{ i18n.ts.more }} - </MkButton> + </MkFolder> + <MkLoading v-if="loadingMore"/> + <MkButton class="button" @click="more()"> + <i class="ti ti-reload"></i>{{ i18n.ts.more }} + </MkButton> + </template> </div> </MkSpacer> </MkStickyContainer> </template> <script lang="ts" setup> -import { ref, computed } from 'vue'; +import { ref, computed, watch } from 'vue'; import XHeader from './_header_.vue'; import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/MkInput.vue'; +import MkSelect from '@/components/MkSelect.vue'; import MkSwitch from '@/components/MkSwitch.vue'; import MkRadios from '@/components/MkRadios.vue'; import MkInfo from '@/components/MkInfo.vue'; @@ -85,11 +98,22 @@ import { definePageMetadata } from '@/scripts/page-metadata.js'; import MkFolder from '@/components/MkFolder.vue'; import MkTextarea from '@/components/MkTextarea.vue'; +const announcementsStatus = ref<'active' | 'archived'>('active'); + +const loading = ref(true); +const loadingMore = ref(false); + const announcements = ref<any[]>([]); -misskeyApi('admin/announcements/list').then(announcementResponse => { - announcements.value = announcementResponse; -}); +watch(announcementsStatus, (to) => { + loading.value = true; + misskeyApi('admin/announcements/list', { + status: to, + }).then(announcementResponse => { + announcements.value = announcementResponse; + loading.value = false; + }); +}, { immediate: true }); function add() { announcements.value.unshift({ @@ -125,6 +149,14 @@ async function archive(announcement) { refresh(); } +async function unarchive(announcement) { + await os.apiWithDialog('admin/announcements/update', { + ...announcement, + isActive: true, + }); + refresh(); +} + async function save(announcement) { if (announcement.id == null) { await os.apiWithDialog('admin/announcements/create', announcement); @@ -135,24 +167,32 @@ async function save(announcement) { } function more() { - misskeyApi('admin/announcements/list', { untilId: announcements.value.reduce((acc, announcement) => announcement.id != null ? announcement : acc).id }).then(announcementResponse => { + loadingMore.value = true; + misskeyApi('admin/announcements/list', { + status: announcementsStatus.value, + untilId: announcements.value.reduce((acc, announcement) => announcement.id != null ? announcement : acc).id + }).then(announcementResponse => { announcements.value = announcements.value.concat(announcementResponse); + loadingMore.value = false; }); } function refresh() { - misskeyApi('admin/announcements/list').then(announcementResponse => { + loading.value = true; + misskeyApi('admin/announcements/list', { + status: announcementsStatus.value, + }).then(announcementResponse => { announcements.value = announcementResponse; + loading.value = false; }); } -refresh(); - const headerActions = computed(() => [{ asFullButton: true, icon: 'ti ti-plus', text: i18n.ts.add, handler: add, + disabled: announcementsStatus.value === 'archived', }]); const headerTabs = computed(() => []); diff --git a/packages/frontend/src/pages/admin/federation.vue b/packages/frontend/src/pages/admin/federation.vue index 141de0be34..1902c97724 100644 --- a/packages/frontend/src/pages/admin/federation.vue +++ b/packages/frontend/src/pages/admin/federation.vue @@ -81,9 +81,9 @@ const pagination = { sort: sort.value, host: host.value !== '' ? host.value : null, ...( - state.value === 'federating' ? { federating: true } : - state.value === 'subscribing' ? { subscribing: true } : - state.value === 'publishing' ? { publishing: true } : + state.value === 'federating' ? { federating: true, suspended: false, blocked: false } : + state.value === 'subscribing' ? { subscribing: true, suspended: false, blocked: false } : + state.value === 'publishing' ? { publishing: true, suspended: false, blocked: false } : state.value === 'suspended' ? { suspended: true } : state.value === 'blocked' ? { blocked: true } : state.value === 'silenced' ? { silenced: true } : diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue index c5bb2766dc..794669d6b5 100644 --- a/packages/frontend/src/pages/admin/index.vue +++ b/packages/frontend/src/pages/admin/index.vue @@ -230,6 +230,11 @@ const menuDef = computed(() => [{ to: '/admin/external-services', active: currentPage.value?.route.name === 'external-services', }, { + icon: 'ti ti-webhook', + text: 'Webhook', + to: '/admin/system-webhook', + active: currentPage.value?.route.name === 'system-webhook', + }, { icon: 'ti ti-adjustments', text: i18n.ts.other, to: '/admin/other-settings', diff --git a/packages/frontend/src/pages/admin/instance-block.vue b/packages/frontend/src/pages/admin/instance-block.vue index 6b14bd42c2..e090616b26 100644 --- a/packages/frontend/src/pages/admin/instance-block.vue +++ b/packages/frontend/src/pages/admin/instance-block.vue @@ -8,14 +8,22 @@ SPDX-License-Identifier: AGPL-3.0-only <template #header><XHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <MkSpacer :contentMax="700" :marginMin="16" :marginMax="32"> <FormSuspense :p="init"> - <MkTextarea v-if="tab === 'block'" v-model="blockedHosts"> - <span>{{ i18n.ts.blockedInstances }}</span> - <template #caption>{{ i18n.ts.blockedInstancesDescription }}</template> - </MkTextarea> - <MkTextarea v-else-if="tab === 'silence'" v-model="silencedHosts" class="_formBlock"> - <span>{{ i18n.ts.silencedInstances }}</span> - <template #caption>{{ i18n.ts.silencedInstancesDescription }}</template> - </MkTextarea> + <template v-if="tab === 'block'"> + <MkTextarea v-model="blockedHosts"> + <span>{{ i18n.ts.blockedInstances }}</span> + <template #caption>{{ i18n.ts.blockedInstancesDescription }}</template> + </MkTextarea> + </template> + <template v-else-if="tab === 'silence'"> + <MkTextarea v-model="silencedHosts" class="_formBlock"> + <span>{{ i18n.ts.silencedInstances }}</span> + <template #caption>{{ i18n.ts.silencedInstancesDescription }}</template> + </MkTextarea> + <MkTextarea v-model="mediaSilencedHosts" class="_formBlock"> + <span>{{ i18n.ts.mediaSilencedInstances }}</span> + <template #caption>{{ i18n.ts.mediaSilencedInstancesDescription }}</template> + </MkTextarea> + </template> <MkButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton> </FormSuspense> </MkSpacer> @@ -36,18 +44,21 @@ import { definePageMetadata } from '@/scripts/page-metadata.js'; const blockedHosts = ref<string>(''); const silencedHosts = ref<string>(''); +const mediaSilencedHosts = ref<string>(''); const tab = ref('block'); async function init() { const meta = await misskeyApi('admin/meta'); blockedHosts.value = meta.blockedHosts.join('\n'); silencedHosts.value = meta.silencedHosts.join('\n'); + mediaSilencedHosts.value = meta.mediaSilencedHosts.join('\n'); } function save() { os.apiWithDialog('admin/update-meta', { blockedHosts: blockedHosts.value.split('\n') || [], silencedHosts: silencedHosts.value.split('\n') || [], + mediaSilencedHosts: mediaSilencedHosts.value.split('\n') || [], }).then(() => { fetchInstance(true); diff --git a/packages/frontend/src/pages/admin/invites.vue b/packages/frontend/src/pages/admin/invites.vue index 9f172140bc..c4f2c292e0 100644 --- a/packages/frontend/src/pages/admin/invites.vue +++ b/packages/frontend/src/pages/admin/invites.vue @@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only <MkInput v-if="!noExpirationDate" v-model="expiresAt" type="datetime-local"> <template #label>{{ i18n.ts.expirationDate }}</template> </MkInput> - <MkInput v-model="createCount" type="number"> + <MkInput v-model="createCount" type="number" min="1"> <template #label>{{ i18n.ts.createCount }}</template> </MkInput> <MkButton primary rounded @click="createWithOptions">{{ i18n.ts.create }}</MkButton> diff --git a/packages/frontend/src/pages/admin/modlog.ModLog.vue b/packages/frontend/src/pages/admin/modlog.ModLog.vue index c1e633df23..4cddca3a7d 100644 --- a/packages/frontend/src/pages/admin/modlog.ModLog.vue +++ b/packages/frontend/src/pages/admin/modlog.ModLog.vue @@ -8,9 +8,36 @@ SPDX-License-Identifier: AGPL-3.0-only <template #label> <b :class="{ - [$style.logGreen]: ['createRole', 'addCustomEmoji', 'createGlobalAnnouncement', 'createUserAnnouncement', 'createAd', 'createInvitation', 'createAvatarDecoration'].includes(log.type), - [$style.logYellow]: ['markSensitiveDriveFile', 'resetPassword'].includes(log.type), - [$style.logRed]: ['suspend', 'approve', 'deleteRole', 'suspendRemoteInstance', 'deleteGlobalAnnouncement', 'deleteUserAnnouncement', 'deleteCustomEmoji', 'deleteNote', 'deleteDriveFile', 'deleteAd', 'deleteAvatarDecoration'].includes(log.type) + [$style.logGreen]: [ + 'createRole', + 'addCustomEmoji', + 'createGlobalAnnouncement', + 'createUserAnnouncement', + 'createAd', + 'createInvitation', + 'createAvatarDecoration', + 'createSystemWebhook', + 'createAbuseReportNotificationRecipient', + ].includes(log.type), + [$style.logYellow]: [ + 'markSensitiveDriveFile', + 'resetPassword' + ].includes(log.type), + [$style.logRed]: [ + 'suspend', + 'approve', + 'deleteRole', + 'suspendRemoteInstance', + 'deleteGlobalAnnouncement', + 'deleteUserAnnouncement', + 'deleteCustomEmoji', + 'deleteNote', + 'deleteDriveFile', + 'deleteAd', + 'deleteAvatarDecoration', + 'deleteSystemWebhook', + 'deleteAbuseReportNotificationRecipient', + ].includes(log.type) }" >{{ i18n.ts._moderationLogTypes[log.type] }}</b> <span v-if="log.type === 'updateUserNote'">: @{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</span> @@ -41,6 +68,12 @@ SPDX-License-Identifier: AGPL-3.0-only <span v-else-if="log.type === 'createAvatarDecoration'">: {{ log.info.avatarDecoration.name }}</span> <span v-else-if="log.type === 'updateAvatarDecoration'">: {{ log.info.before.name }}</span> <span v-else-if="log.type === 'deleteAvatarDecoration'">: {{ log.info.avatarDecoration.name }}</span> + <span v-else-if="log.type === 'createSystemWebhook'">: {{ log.info.webhook.name }}</span> + <span v-else-if="log.type === 'updateSystemWebhook'">: {{ log.info.before.name }}</span> + <span v-else-if="log.type === 'deleteSystemWebhook'">: {{ log.info.webhook.name }}</span> + <span v-else-if="log.type === 'createAbuseReportNotificationRecipient'">: {{ log.info.recipient.name }}</span> + <span v-else-if="log.type === 'updateAbuseReportNotificationRecipient'">: {{ log.info.before.name }}</span> + <span v-else-if="log.type === 'deleteAbuseReportNotificationRecipient'">: {{ log.info.recipient.name }}</span> </template> <template #icon> <MkAvatar :user="log.user" :class="$style.avatar"/> @@ -120,6 +153,16 @@ SPDX-License-Identifier: AGPL-3.0-only <CodeDiff :context="5" :hideHeader="true" :oldString="log.info.before ?? ''" :newString="log.info.after ?? ''" maxHeight="300px"/> </div> </template> + <template v-else-if="log.type === 'updateSystemWebhook'"> + <div :class="$style.diff"> + <CodeDiff :context="5" :hideHeader="true" :oldString="JSON5.stringify(log.info.before, null, '\t')" :newString="JSON5.stringify(log.info.after, null, '\t')" language="javascript" maxHeight="300px"/> + </div> + </template> + <template v-else-if="log.type === 'updateAbuseReportNotificationRecipient'"> + <div :class="$style.diff"> + <CodeDiff :context="5" :hideHeader="true" :oldString="JSON5.stringify(log.info.before, null, '\t')" :newString="JSON5.stringify(log.info.after, null, '\t')" language="javascript" maxHeight="300px"/> + </div> + </template> <details> <summary>raw</summary> diff --git a/packages/frontend/src/pages/admin/roles.editor.vue b/packages/frontend/src/pages/admin/roles.editor.vue index 0bff6e39aa..8200244cd7 100644 --- a/packages/frontend/src/pages/admin/roles.editor.vue +++ b/packages/frontend/src/pages/admin/roles.editor.vue @@ -418,6 +418,26 @@ SPDX-License-Identifier: AGPL-3.0-only </div> </MkFolder> + <MkFolder v-if="matchQuery([i18n.ts._role._options.canUpdateBioMedia, 'canUpdateBioMedia'])"> + <template #label>{{ i18n.ts._role._options.canUpdateBioMedia }}</template> + <template #suffix> + <span v-if="role.policies.canUpdateBioMedia.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span> + <span v-else>{{ role.policies.canUpdateBioMedia.value ? i18n.ts.yes : i18n.ts.no }}</span> + <span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.canUpdateBioMedia)"></i></span> + </template> + <div class="_gaps"> + <MkSwitch v-model="role.policies.canUpdateBioMedia.useDefault" :readonly="readonly"> + <template #label>{{ i18n.ts._role.useBaseValue }}</template> + </MkSwitch> + <MkSwitch v-model="role.policies.canUpdateBioMedia.value" :disabled="role.policies.canUpdateBioMedia.useDefault" :readonly="readonly"> + <template #label>{{ i18n.ts.enable }}</template> + </MkSwitch> + <MkRange v-model="role.policies.canUpdateBioMedia.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''"> + <template #label>{{ i18n.ts._role.priority }}</template> + </MkRange> + </div> + </MkFolder> + <MkFolder v-if="matchQuery([i18n.ts._role._options.pinMax, 'pinLimit'])"> <template #label>{{ i18n.ts._role._options.pinMax }}</template> <template #suffix> diff --git a/packages/frontend/src/pages/admin/roles.vue b/packages/frontend/src/pages/admin/roles.vue index ffd7577689..0a8bd0e898 100644 --- a/packages/frontend/src/pages/admin/roles.vue +++ b/packages/frontend/src/pages/admin/roles.vue @@ -153,6 +153,14 @@ SPDX-License-Identifier: AGPL-3.0-only </MkSwitch> </MkFolder> + <MkFolder v-if="matchQuery([i18n.ts._role._options.canUpdateBioMedia, 'canUpdateBioMedia'])"> + <template #label>{{ i18n.ts._role._options.canUpdateBioMedia }}</template> + <template #suffix>{{ policies.canUpdateBioMedia ? i18n.ts.yes : i18n.ts.no }}</template> + <MkSwitch v-model="policies.canUpdateBioMedia"> + <template #label>{{ i18n.ts.enable }}</template> + </MkSwitch> + </MkFolder> + <MkFolder v-if="matchQuery([i18n.ts._role._options.pinMax, 'pinLimit'])"> <template #label>{{ i18n.ts._role._options.pinMax }}</template> <template #suffix>{{ policies.pinLimit }}</template> @@ -263,7 +271,7 @@ 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 { instance } from '@/instance.js'; +import { instance, fetchInstance } from '@/instance.js'; import MkFoldableSection from '@/components/MkFoldableSection.vue'; import { ROLE_POLICIES } from '@/const.js'; import { useRouter } from '@/router/supplier.js'; @@ -287,6 +295,7 @@ async function updateBaseRole() { await os.apiWithDialog('admin/roles/update-default-policies', { policies, }); + fetchInstance(true); } function create() { diff --git a/packages/frontend/src/pages/admin/system-webhook.item.vue b/packages/frontend/src/pages/admin/system-webhook.item.vue new file mode 100644 index 0000000000..0c07122af3 --- /dev/null +++ b/packages/frontend/src/pages/admin/system-webhook.item.vue @@ -0,0 +1,117 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<div :class="$style.main"> + <span :class="$style.icon"> + <i v-if="!entity.isActive" class="ti ti-player-pause"/> + <i v-else-if="entity.latestStatus === null" class="ti ti-circle"/> + <i + v-else-if="[200, 201, 204].includes(entity.latestStatus)" + class="ti ti-check" + :style="{ color: 'var(--success)' }" + /> + <i v-else class="ti ti-alert-triangle" :style="{ color: 'var(--error)' }"/> + </span> + <span :class="$style.text">{{ entity.name || entity.url }}</span> + <span :class="$style.suffix"> + <MkTime v-if="entity.latestSentAt" :time="entity.latestSentAt" style="margin-right: 8px"/> + <button :class="$style.suffixButton" @click="onEditClick"> + <i class="ti ti-settings"></i> + </button> + <button :class="$style.suffixButton" @click="onDeleteClick"> + <i class="ti ti-trash"></i> + </button> + </span> +</div> +</template> + +<script lang="ts" setup> +import { entities } from 'misskey-js'; +import { toRefs } from 'vue'; + +const emit = defineEmits<{ + (ev: 'edit', value: entities.SystemWebhook): void; + (ev: 'delete', value: entities.SystemWebhook): void; +}>(); + +const props = defineProps<{ + entity: entities.SystemWebhook; +}>(); + +const { entity } = toRefs(props); + +function onEditClick() { + emit('edit', entity.value); +} + +function onDeleteClick() { + emit('delete', entity.value); +} + +</script> + +<style module lang="scss"> +.main { + display: flex; + align-items: center; + width: 100%; + box-sizing: border-box; + padding: 10px 14px; + background: var(--buttonBg); + border: none; + border-radius: 6px; + font-size: 0.9em; + + &:hover { + text-decoration: none; + background: var(--buttonHoverBg); + } + + &.active { + color: var(--accent); + background: var(--buttonHoverBg); + } +} + +.icon { + margin-right: 0.75em; + flex-shrink: 0; + text-align: center; + color: var(--fgTransparentWeak); +} + +.text { + flex-shrink: 1; + white-space: normal; + padding-right: 12px; + text-align: center; +} + +.suffix { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gaps: 4px; + margin-left: auto; + margin-right: -8px; + opacity: 0.7; + white-space: nowrap; +} + +.suffixButton { + background: transparent; + border: none; + border-radius: 9999px; + margin-top: -8px; + margin-bottom: -8px; + padding: 8px; + + &:hover { + background: var(--buttonBg); + } +} +</style> diff --git a/packages/frontend/src/pages/admin/system-webhook.vue b/packages/frontend/src/pages/admin/system-webhook.vue new file mode 100644 index 0000000000..7a40eec944 --- /dev/null +++ b/packages/frontend/src/pages/admin/system-webhook.vue @@ -0,0 +1,96 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<MkStickyContainer> + <template #header> + <XHeader :actions="headerActions" :tabs="headerTabs"/> + </template> + + <MkSpacer :contentMax="900"> + <div class="_gaps_m"> + <MkButton :class="$style.linkButton" full @click="onCreateWebhookClicked"> + {{ i18n.ts._webhookSettings.createWebhook }} + </MkButton> + + <FormSection> + <div class="_gaps"> + <XItem v-for="item in webhooks" :key="item.id" :entity="item" @edit="onEditButtonClicked" @delete="onDeleteButtonClicked"/> + </div> + </FormSection> + </div> + </MkSpacer> +</MkStickyContainer> +</template> + +<script lang="ts" setup> +import { computed, onMounted, ref } from 'vue'; +import { entities } from 'misskey-js'; +import XItem from './system-webhook.item.vue'; +import FormSection from '@/components/form/section.vue'; +import { definePageMetadata } from '@/scripts/page-metadata.js'; +import { i18n } from '@/i18n.js'; +import XHeader from '@/pages/admin/_header_.vue'; +import MkButton from '@/components/MkButton.vue'; +import { misskeyApi } from '@/scripts/misskey-api.js'; +import { showSystemWebhookEditorDialog } from '@/components/MkSystemWebhookEditor.impl.js'; +import * as os from '@/os.js'; + +const webhooks = ref<entities.SystemWebhook[]>([]); + +const headerActions = computed(() => []); +const headerTabs = computed(() => []); + +async function onCreateWebhookClicked() { + await showSystemWebhookEditorDialog({ + mode: 'create', + }); + + await fetchWebhooks(); +} + +async function onEditButtonClicked(webhook: entities.SystemWebhook) { + await showSystemWebhookEditorDialog({ + mode: 'edit', + id: webhook.id, + }); + + await fetchWebhooks(); +} + +async function onDeleteButtonClicked(webhook: entities.SystemWebhook) { + const result = await os.confirm({ + type: 'warning', + title: i18n.ts._webhookSettings.deleteConfirm, + }); + if (!result.canceled) { + await misskeyApi('admin/system-webhook/delete', { + id: webhook.id, + }); + await fetchWebhooks(); + } +} + +async function fetchWebhooks() { + const result = await misskeyApi('admin/system-webhook/list', {}); + webhooks.value = result.sort((a, b) => a.id.localeCompare(b.id)); +} + +onMounted(async () => { + await fetchWebhooks(); +}); + +definePageMetadata(() => ({ + title: 'SystemWebhook', + icon: 'ti ti-webhook', +})); +</script> + +<style module lang="scss"> +.linkButton { + text-align: left; + padding: 10px 18px; +} +</style> diff --git a/packages/frontend/src/pages/announcement.vue b/packages/frontend/src/pages/announcement.vue index 85ae9062d4..802a6bf399 100644 --- a/packages/frontend/src/pages/announcement.vue +++ b/packages/frontend/src/pages/announcement.vue @@ -109,6 +109,15 @@ definePageMetadata(() => ({ </script> <style lang="scss" module> +.fadeEnterActive, +.fadeLeaveActive { + transition: opacity 0.125s ease; +} +.fadeEnterFrom, +.fadeLeaveTo { + opacity: 0; +} + .announcement { padding: 16px; } diff --git a/packages/frontend/src/pages/antenna-timeline.vue b/packages/frontend/src/pages/antenna-timeline.vue index 22e8fe8071..e947ec9ba5 100644 --- a/packages/frontend/src/pages/antenna-timeline.vue +++ b/packages/frontend/src/pages/antenna-timeline.vue @@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only <MkStickyContainer> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <MkSpacer :contentMax="800"> - <div ref="rootEl" v-hotkey.global="keymap"> + <div ref="rootEl"> <div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div> <div :class="$style.tl"> <MkTimeline @@ -44,9 +44,6 @@ const antenna = ref<Misskey.entities.Antenna | null>(null); const queue = ref(0); const rootEl = shallowRef<HTMLElement>(); const tlEl = shallowRef<InstanceType<typeof MkTimeline>>(); -const keymap = computed(() => ({ - 't': focus, -})); function queueUpdated(q) { queue.value = q; diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue index 76c36fda86..e922599642 100644 --- a/packages/frontend/src/pages/channel.vue +++ b/packages/frontend/src/pages/channel.vue @@ -93,7 +93,7 @@ import MkFoldableSection from '@/components/MkFoldableSection.vue'; import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; import { PageHeaderItem } from '@/types/page-header.js'; import { isSupportShare } from '@/scripts/navigator.js'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; import { miLocalStorage } from '@/local-storage.js'; import { useRouter } from '@/router/supplier.js'; import { deepMerge } from '@/scripts/merge.js'; diff --git a/packages/frontend/src/pages/clip.vue b/packages/frontend/src/pages/clip.vue index 428d60c4d9..506d906683 100644 --- a/packages/frontend/src/pages/clip.vue +++ b/packages/frontend/src/pages/clip.vue @@ -43,7 +43,7 @@ import { url } from '@/config.js'; import MkButton from '@/components/MkButton.vue'; import { clipsCache } from '@/cache.js'; import { isSupportShare } from '@/scripts/navigator.js'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; const props = defineProps<{ clipId: string, diff --git a/packages/frontend/src/pages/contact.vue b/packages/frontend/src/pages/contact.vue index bcdcf43275..1f2bee5a77 100644 --- a/packages/frontend/src/pages/contact.vue +++ b/packages/frontend/src/pages/contact.vue @@ -7,18 +7,26 @@ SPDX-License-Identifier: AGPL-3.0-only <MkStickyContainer> <template #header><MkPageHeader/></template> <MkSpacer :contentMax="600" :marginMin="20"> - <div class="_gaps"> - <MkKeyValue> - <template #key>{{ i18n.ts.inquiry }}</template> + <div class="_gaps_m"> + <MkKeyValue :copy="instance.maintainerName"> + <template #key>{{ i18n.ts.administrator }}</template> <template #value> - <MkLink :url="instance.inquiryUrl" target="_blank">{{ instance.inquiryUrl }}</MkLink> + <template v-if="instance.maintainerName">{{ instance.maintainerName }}</template> + <span v-else style="opacity: 0.7;">({{ i18n.ts.none }})</span> </template> </MkKeyValue> - - <MkKeyValue> - <template #key>{{ i18n.ts.email }}</template> + <MkKeyValue :copy="instance.maintainerEmail"> + <template #key>{{ i18n.ts.contact }}</template> + <template #value> + <template v-if="instance.maintainerEmail">{{ instance.maintainerEmail }}</template> + <span v-else style="opacity: 0.7;">({{ i18n.ts.none }})</span> + </template> + </MkKeyValue> + <MkKeyValue :copy="instance.inquiryUrl"> + <template #key>{{ i18n.ts.inquiry }}</template> <template #value> - <div>{{ instance.maintainerEmail }}</div> + <MkLink v-if="instance.inquiryUrl" :url="instance.inquiryUrl" target="_blank">{{ instance.inquiryUrl }}</MkLink> + <span v-else style="opacity: 0.7;">({{ i18n.ts.none }})</span> </template> </MkKeyValue> </div> @@ -28,8 +36,8 @@ SPDX-License-Identifier: AGPL-3.0-only <script lang="ts" setup> import { i18n } from '@/i18n.js'; -import { definePageMetadata } from '@/scripts/page-metadata.js'; import { instance } from '@/instance.js'; +import { definePageMetadata } from '@/scripts/page-metadata.js'; import MkKeyValue from '@/components/MkKeyValue.vue'; import MkLink from '@/components/MkLink.vue'; diff --git a/packages/frontend/src/pages/custom-emojis-manager.vue b/packages/frontend/src/pages/custom-emojis-manager.vue index 82d03231f7..8904096875 100644 --- a/packages/frontend/src/pages/custom-emojis-manager.vue +++ b/packages/frontend/src/pages/custom-emojis-manager.vue @@ -132,18 +132,19 @@ const toggleSelect = (emoji) => { }; const add = async (ev: MouseEvent) => { - os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), { }, { done: result => { if (result.created) { emojisPaginationComponent.value.prepend(result.created); } }, - }, 'closed'); + closed: () => dispose(), + }); }; const edit = (emoji) => { - os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), { emoji: emoji, }, { done: result => { @@ -156,7 +157,8 @@ const edit = (emoji) => { emojisPaginationComponent.value.removeItem(emoji.id); } }, - }, 'closed'); + closed: () => dispose(), + }); }; const importEmoji = (emoji) => { diff --git a/packages/frontend/src/pages/drive.file.info.vue b/packages/frontend/src/pages/drive.file.info.vue index 4749d7c981..4ed2a67678 100644 --- a/packages/frontend/src/pages/drive.file.info.vue +++ b/packages/frontend/src/pages/drive.file.info.vue @@ -37,11 +37,17 @@ SPDX-License-Identifier: AGPL-3.0-only </button> </div> </div> - <div> - <button class="_button" :class="$style.fileAltEditBtn" @click="describe()"> + <div class="_gaps_s"> + <button class="_button" :class="$style.kvEditBtn" @click="move()"> + <MkKeyValue> + <template #key>{{ i18n.ts.folder }}</template> + <template #value>{{ folderHierarchy.join(' > ') }}<i class="ti ti-pencil" :class="$style.kvEditIcon"></i></template> + </MkKeyValue> + </button> + <button class="_button" :class="$style.kvEditBtn" @click="describe()"> <MkKeyValue> <template #key>{{ i18n.ts.description }}</template> - <template #value>{{ file.comment ? file.comment : `(${i18n.ts.none})` }}<i class="ti ti-pencil" :class="$style.fileAltEditIcon"></i></template> + <template #value>{{ file.comment ? file.comment : `(${i18n.ts.none})` }}<i class="ti ti-pencil" :class="$style.kvEditIcon"></i></template> </MkKeyValue> </button> <MkKeyValue :class="$style.fileMetaDataChildren"> @@ -90,6 +96,18 @@ const props = defineProps<{ const fetching = ref(true); const file = ref<Misskey.entities.DriveFile>(); +const folderHierarchy = computed(() => { + if (!file.value) return [i18n.ts.drive]; + const folderNames = [i18n.ts.drive]; + + function get(folder: Misskey.entities.DriveFolder) { + if (folder.parent) get(folder.parent); + folderNames.push(folder.name); + } + + if (file.value.folder) get(file.value.folder); + return folderNames; +}); const isImage = computed(() => file.value?.type.startsWith('image/')); async function fetch() { @@ -122,6 +140,19 @@ function crop() { }); } +function move() { + if (!file.value) return; + + os.selectDriveFolder(false).then(folder => { + misskeyApi('drive/files/update', { + fileId: file.value.id, + folderId: folder[0] ? folder[0].id : null, + }).then(async () => { + await fetch(); + }); + }); +} + function toggleSensitive() { if (!file.value) return; @@ -160,7 +191,7 @@ function rename() { function describe() { if (!file.value) return; - os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), { default: file.value.comment ?? '', file: file.value, }, { @@ -172,7 +203,8 @@ function describe() { await fetch(); }); }, - }, 'closed'); + closed: () => dispose(), + }); } async function deleteFile() { @@ -233,6 +265,7 @@ onMounted(async () => { background-color: var(--accentedBg); color: var(--accent); text-decoration: none; + outline: none; } &.danger { @@ -280,14 +313,14 @@ onMounted(async () => { padding: .5rem 1rem; } -.fileAltEditBtn { +.kvEditBtn { text-align: start; display: block; width: 100%; padding: .5rem 1rem; border-radius: var(--radius); - .fileAltEditIcon { + .kvEditIcon { display: inline-block; color: transparent; visibility: hidden; @@ -298,7 +331,7 @@ onMounted(async () => { color: var(--accent); background-color: var(--accentedBg); - .fileAltEditIcon { + .kvEditIcon { color: var(--accent); visibility: visible; } diff --git a/packages/frontend/src/pages/drop-and-fusion.game.vue b/packages/frontend/src/pages/drop-and-fusion.game.vue index eba5b92154..0f0b7e1ea8 100644 --- a/packages/frontend/src/pages/drop-and-fusion.game.vue +++ b/packages/frontend/src/pages/drop-and-fusion.game.vue @@ -210,7 +210,7 @@ import { apiUrl } from '@/config.js'; import { $i } from '@/account.js'; import * as sound from '@/scripts/sound.js'; import MkRange from '@/components/MkRange.vue'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; type FrontendMonoDefinition = { id: string; @@ -1008,8 +1008,18 @@ function attachGameEvents() { const domX = rect.left + (x * viewScale); const domY = rect.top + (y * viewScale); const scoreUnit = getScoreUnit(props.gameMode); - os.popup(MkRippleEffect, { x: domX, y: domY }, {}, 'end'); - os.popup(MkPlusOneEffect, { x: domX, y: domY, value: scoreDelta + (scoreUnit === 'pt' ? '' : scoreUnit) }, {}, 'end'); + + { + const { dispose } = os.popup(MkRippleEffect, { x: domX, y: domY }, { + end: () => dispose(), + }); + } + + { + const { dispose } = os.popup(MkPlusOneEffect, { x: domX, y: domY, value: scoreDelta + (scoreUnit === 'pt' ? '' : scoreUnit) }, { + end: () => dispose(), + }); + } if (nextMono) { const def = monoDefinitions.value.find(x => x.id === nextMono.id)!; diff --git a/packages/frontend/src/pages/emoji-edit-dialog.vue b/packages/frontend/src/pages/emoji-edit-dialog.vue index 5805fb4589..c5f0dde878 100644 --- a/packages/frontend/src/pages/emoji-edit-dialog.vue +++ b/packages/frontend/src/pages/emoji-edit-dialog.vue @@ -15,8 +15,8 @@ SPDX-License-Identifier: AGPL-3.0-only <template v-if="emoji" #header>:{{ emoji.name }}:</template> <template v-else #header>New emoji</template> - <div> - <MkSpacer :marginMin="20" :marginMax="28"> + <div style="display: flex; flex-direction: column; min-height: 100%;"> + <MkSpacer :marginMin="20" :marginMax="28" style="flex-grow: 1;"> <div class="_gaps_m"> <div v-if="imgUrl != null" :class="$style.imgs"> <div style="background: #000;" :class="$style.imgContainer"> @@ -239,10 +239,12 @@ async function del() { .footer { position: sticky; + z-index: 10000; bottom: 0; left: 0; padding: 12px; border-top: solid 0.5px var(--divider); + background: var(--acrylicBg); -webkit-backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--blur, blur(15px)); } diff --git a/packages/frontend/src/pages/emojis.emoji.vue b/packages/frontend/src/pages/emojis.emoji.vue index 503d627d53..03a3b8f1c0 100644 --- a/packages/frontend/src/pages/emojis.emoji.vue +++ b/packages/frontend/src/pages/emojis.emoji.vue @@ -14,10 +14,10 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import * as os from '@/os.js'; import * as Misskey from 'misskey-js'; +import * as os from '@/os.js'; import { misskeyApiGet } from '@/scripts/misskey-api.js'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; import { i18n } from '@/i18n.js'; import MkCustomEmojiDetailedDialog from '@/components/MkCustomEmojiDetailedDialog.vue'; @@ -40,12 +40,12 @@ function menu(ev) { text: i18n.ts.info, icon: 'ti ti-info-circle', action: async () => { - os.popup(MkCustomEmojiDetailedDialog, { + const { dispose } = os.popup(MkCustomEmojiDetailedDialog, { emoji: await misskeyApiGet('emoji', { name: props.emoji.name, - }) + }), }, { - anchor: ev.target, + closed: () => dispose(), }); }, }], ev.currentTarget ?? ev.target); diff --git a/packages/frontend/src/pages/flash/flash-edit.vue b/packages/frontend/src/pages/flash/flash-edit.vue index 3445da26a2..0b9f4dfe58 100644 --- a/packages/frontend/src/pages/flash/flash-edit.vue +++ b/packages/frontend/src/pages/flash/flash-edit.vue @@ -37,6 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only <script lang="ts" setup> import { computed, ref } from 'vue'; import * as Misskey from 'misskey-js'; +import { AISCRIPT_VERSION } from '@syuilo/aiscript'; import MkButton from '@/components/MkButton.vue'; import * as os from '@/os.js'; import { misskeyApi } from '@/scripts/misskey-api.js'; @@ -48,7 +49,7 @@ import MkInput from '@/components/MkInput.vue'; import MkSelect from '@/components/MkSelect.vue'; import { useRouter } from '@/router/supplier.js'; -const PRESET_DEFAULT = `/// @ 0.18.0 +const PRESET_DEFAULT = `/// @ ${AISCRIPT_VERSION} var name = "" @@ -66,7 +67,7 @@ Ui:render([ ]) `; -const PRESET_OMIKUJI = `/// @ 0.18.0 +const PRESET_OMIKUJI = `/// @ ${AISCRIPT_VERSION} // ユーザーごとに日替わりのおみくじのプリセット // 選択肢 @@ -109,7 +110,7 @@ Ui:render([ ]) `; -const PRESET_SHUFFLE = `/// @ 0.18.0 +const PRESET_SHUFFLE = `/// @ ${AISCRIPT_VERSION} // 巻き戻し可能な文字シャッフルのプリセット let string = "ペペロンチーノ" @@ -188,7 +189,7 @@ var cursor = 0 do() `; -const PRESET_QUIZ = `/// @ 0.18.0 +const PRESET_QUIZ = `/// @ ${AISCRIPT_VERSION} let title = '地理クイズ' let qas = [{ @@ -301,7 +302,7 @@ qaEls.push(Ui:C:container({ Ui:render(qaEls) `; -const PRESET_TIMELINE = `/// @ 0.18.0 +const PRESET_TIMELINE = `/// @ ${AISCRIPT_VERSION} // APIリクエストを行いローカルタイムラインを表示するプリセット @fetch() { diff --git a/packages/frontend/src/pages/flash/flash.vue b/packages/frontend/src/pages/flash/flash.vue index 78bbb60f2a..b6d6b318c3 100644 --- a/packages/frontend/src/pages/flash/flash.vue +++ b/packages/frontend/src/pages/flash/flash.vue @@ -78,7 +78,8 @@ import MkCode from '@/components/MkCode.vue'; import { defaultStore } from '@/store.js'; import { $i } from '@/account.js'; import { isSupportShare } from '@/scripts/navigator.js'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; +import { pleaseLogin } from '@/scripts/please-login.js'; const props = defineProps<{ id: string; @@ -143,6 +144,7 @@ function shareWithNote() { function like() { if (!flash.value) return; + pleaseLogin(); os.apiWithDialog('flash/like', { flashId: flash.value.id, @@ -154,6 +156,7 @@ function like() { async function unlike() { if (!flash.value) return; + pleaseLogin(); const confirm = await os.confirm({ type: 'warning', diff --git a/packages/frontend/src/pages/follow.vue b/packages/frontend/src/pages/follow.vue deleted file mode 100644 index 247b0ac639..0000000000 --- a/packages/frontend/src/pages/follow.vue +++ /dev/null @@ -1,71 +0,0 @@ -<!-- -SPDX-FileCopyrightText: syuilo and misskey-project -SPDX-License-Identifier: AGPL-3.0-only ---> - -<template> -<div> -</div> -</template> - -<script lang="ts" setup> -import { } from 'vue'; -import * as Misskey from 'misskey-js'; -import * as os from '@/os.js'; -import { misskeyApi } from '@/scripts/misskey-api.js'; -import { i18n } from '@/i18n.js'; -import { defaultStore } from '@/store.js'; -import { mainRouter } from '@/router/main.js'; - -async function follow(user): Promise<void> { - const { canceled } = await os.confirm({ - type: 'question', - text: i18n.tsx.followConfirm({ name: user.name || user.username }), - }); - - if (canceled) { - window.close(); - return; - } - - os.apiWithDialog('following/create', { - userId: user.id, - withReplies: defaultStore.state.defaultWithReplies, - }); - user.withReplies = defaultStore.state.defaultWithReplies; -} - -const acct = new URL(location.href).searchParams.get('acct'); -if (acct == null) { - throw new Error('acct required'); -} - -let promise; - -if (acct.startsWith('https://')) { - promise = misskeyApi('ap/show', { - uri: acct, - }); - promise.then(res => { - if (res.type === 'User') { - follow(res.object); - } else if (res.type === 'Note') { - mainRouter.push(`/notes/${res.object.id}`); - } else { - os.alert({ - type: 'error', - text: 'Not a user', - }).then(() => { - window.close(); - }); - } - }); -} else { - promise = misskeyApi('users/show', Misskey.acct.parse(acct)); - promise.then(user => { - follow(user); - }); -} - -os.promiseDialog(promise, null, null, i18n.ts.fetchingAsApObject); -</script> diff --git a/packages/frontend/src/pages/gallery/post.vue b/packages/frontend/src/pages/gallery/post.vue index ab0305ca8d..6d5a7d5ac4 100644 --- a/packages/frontend/src/pages/gallery/post.vue +++ b/packages/frontend/src/pages/gallery/post.vue @@ -77,7 +77,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js'; import { defaultStore } from '@/store.js'; import { $i } from '@/account.js'; import { isSupportShare } from '@/scripts/navigator.js'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; import { useRouter } from '@/router/supplier.js'; const router = useRouter(); diff --git a/packages/frontend/src/pages/games.vue b/packages/frontend/src/pages/games.vue index afd6df1ad9..b52f4decaa 100644 --- a/packages/frontend/src/pages/games.vue +++ b/packages/frontend/src/pages/games.vue @@ -8,12 +8,12 @@ SPDX-License-Identifier: AGPL-3.0-only <template #header><MkPageHeader/></template> <MkSpacer :contentMax="800"> <div class="_gaps"> - <div class="_panel"> + <div class="_panel" :class="$style.link"> <MkA to="/bubble-game"> <img src="/client-assets/drop-and-fusion/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/> </MkA> </div> - <div class="_panel"> + <div class="_panel" :class="$style.link"> <MkA to="/reversi"> <img src="/client-assets/reversi/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/> </MkA> @@ -32,3 +32,10 @@ definePageMetadata(() => ({ icon: 'ti ti-device-gamepad', })); </script> + +<style module> +.link:focus-within { + outline: 2px solid var(--focus); + outline-offset: -2px; +} +</style> diff --git a/packages/frontend/src/pages/instance-info.vue b/packages/frontend/src/pages/instance-info.vue index a6bc3e7138..4ff26197d8 100644 --- a/packages/frontend/src/pages/instance-info.vue +++ b/packages/frontend/src/pages/instance-info.vue @@ -48,6 +48,7 @@ SPDX-License-Identifier: AGPL-3.0-only <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> + <MkSwitch v-model="isMediaSilenced" :disabled="!meta || !instance" @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> @@ -169,6 +170,7 @@ const suspensionState = ref<'none' | 'manuallySuspended' | 'goneSuspended' | 'au const isBlocked = ref(false); const isSilenced = ref(false); const isNSFW = ref(false); +const isMediaSilenced = ref(false); const faviconUrl = ref<string | null>(null); const moderationNote = ref(''); @@ -198,8 +200,9 @@ async function fetch(): Promise<void> { isBlocked.value = instance.value?.isBlocked ?? false; isSilenced.value = instance.value?.isSilenced ?? false; isNSFW.value = instance.value?.isNSFW ?? false; + isMediaSilenced.value = instance.value?.isMediaSilenced ?? false; faviconUrl.value = getProxiedImageUrlNullable(instance.value?.faviconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.value?.iconUrl, 'preview'); - moderationNote.value = instance.value?.moderationNote; + moderationNote.value = instance.value?.moderationNote ?? ''; } async function toggleBlock(): Promise<void> { @@ -221,6 +224,16 @@ async function toggleSilenced(): Promise<void> { }); } +async function toggleMediaSilenced(): Promise<void> { + 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), + }); +} + async function stopDelivery(): Promise<void> { if (!instance.value) throw new Error('No instance?'); suspensionState.value = 'manuallySuspended'; diff --git a/packages/frontend/src/pages/lookup.vue b/packages/frontend/src/pages/lookup.vue new file mode 100644 index 0000000000..3233953942 --- /dev/null +++ b/packages/frontend/src/pages/lookup.vue @@ -0,0 +1,97 @@ +<!-- +SPDX-FileCopyrightText: syuilo and other misskey contributors +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<MkStickyContainer> + <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> + <MkSpacer :contentMax="800"> + <div v-if="state === 'done'" class="_buttonsCenter"> + <MkButton @click="close">{{ i18n.ts.close }}</MkButton> + <MkButton @click="goToMisskey">{{ i18n.ts.goToMisskey }}</MkButton> + </div> + <div v-else class="_fullInfo"> + <MkLoading/> + </div> + </MkSpacer> +</MkStickyContainer> +</template> + +<script lang="ts" setup> +import { computed, ref } from 'vue'; +import * as Misskey from 'misskey-js'; +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 { mainRouter } from '@/router/main.js'; +import MkButton from '@/components/MkButton.vue'; + +const state = ref<'fetching' | 'done'>('fetching'); + +function fetch() { + const params = new URL(location.href).searchParams; + + // acctのほうはdeprecated + let uri = params.get('uri') ?? params.get('acct'); + if (uri == null) { + state.value = 'done'; + return; + } + + let promise: Promise<any>; + + if (uri.startsWith('https://')) { + promise = misskeyApi('ap/show', { + uri, + }); + promise.then(res => { + if (res.type === 'User') { + mainRouter.replace(res.object.host ? `/@${res.object.username}@${res.object.host}` : `/@${res.object.username}`); + } else if (res.type === 'Note') { + mainRouter.replace(`/notes/${res.object.id}`); + } else { + os.alert({ + type: 'error', + text: 'Not a user', + }); + } + }); + } else { + if (uri.startsWith('acct:')) { + uri = uri.slice(5); + } + promise = misskeyApi('users/show', Misskey.acct.parse(uri)); + promise.then(user => { + mainRouter.replace(user.host ? `/@${user.username}@${user.host}` : `/@${user.username}`); + }); + } + + os.promiseDialog(promise, null, null, i18n.ts.fetchingAsApObject); +} + +function close(): void { + window.close(); + + // 閉じなければ100ms後タイムラインに + window.setTimeout(() => { + location.href = '/'; + }, 100); +} + +function goToMisskey(): void { + location.href = '/'; +} + +fetch(); + +const headerActions = computed(() => []); + +const headerTabs = computed(() => []); + +definePageMetadata({ + title: i18n.ts.lookup, + icon: 'ti ti-world-search', +}); +</script> diff --git a/packages/frontend/src/pages/my-antennas/create.vue b/packages/frontend/src/pages/my-antennas/create.vue index 2d026d2fa9..2b8518747f 100644 --- a/packages/frontend/src/pages/my-antennas/create.vue +++ b/packages/frontend/src/pages/my-antennas/create.vue @@ -4,43 +4,33 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<div> - <XAntenna :antenna="draft" @created="onAntennaCreated"/> -</div> +<MkStickyContainer> + <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> + + <MkAntennaEditor @created="onAntennaCreated"/> +</MkStickyContainer> </template> <script lang="ts" setup> -import { ref } from 'vue'; -import XAntenna from './editor.vue'; +import { computed } from 'vue'; import { i18n } from '@/i18n.js'; import { definePageMetadata } from '@/scripts/page-metadata.js'; import { antennasCache } from '@/cache.js'; import { useRouter } from '@/router/supplier.js'; +import MkAntennaEditor from '@/components/MkAntennaEditor.vue'; const router = useRouter(); -const draft = ref({ - name: '', - src: 'all', - userListId: null, - users: [], - keywords: [], - excludeKeywords: [], - excludeBots: false, - withReplies: false, - caseSensitive: false, - localOnly: false, - withFile: false, - notify: false, -}); - function onAntennaCreated() { antennasCache.delete(); router.push('/my/antennas'); } +const headerActions = computed(() => []); +const headerTabs = computed(() => []); + definePageMetadata(() => ({ - title: i18n.ts.manageAntennas, + title: i18n.ts.createAntenna, icon: 'ti ti-antenna', })); </script> diff --git a/packages/frontend/src/pages/my-antennas/edit.vue b/packages/frontend/src/pages/my-antennas/edit.vue index 9471be8575..9f927cd1a0 100644 --- a/packages/frontend/src/pages/my-antennas/edit.vue +++ b/packages/frontend/src/pages/my-antennas/edit.vue @@ -4,15 +4,17 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<div class=""> - <XAntenna v-if="antenna" :antenna="antenna" @updated="onAntennaUpdated"/> -</div> +<MkStickyContainer> + <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> + + <MkAntennaEditor v-if="antenna" :antenna="antenna" @updated="onAntennaUpdated"/> +</MkStickyContainer> </template> <script lang="ts" setup> -import { ref } from 'vue'; +import { ref, computed } from 'vue'; import * as Misskey from 'misskey-js'; -import XAntenna from './editor.vue'; +import MkAntennaEditor from '@/components/MkAntennaEditor.vue'; import { misskeyApi } from '@/scripts/misskey-api.js'; import { i18n } from '@/i18n.js'; import { definePageMetadata } from '@/scripts/page-metadata.js'; @@ -36,8 +38,11 @@ misskeyApi('antennas/show', { antennaId: props.antennaId }).then((antennaRespons antenna.value = antennaResponse; }); +const headerActions = computed(() => []); +const headerTabs = computed(() => []); + definePageMetadata(() => ({ - title: i18n.ts.manageAntennas, + title: i18n.ts.editAntenna, icon: 'ti ti-antenna', })); </script> diff --git a/packages/frontend/src/pages/my-clips/index.vue b/packages/frontend/src/pages/my-clips/index.vue index 1a0d7177fc..ece998a7a5 100644 --- a/packages/frontend/src/pages/my-clips/index.vue +++ b/packages/frontend/src/pages/my-clips/index.vue @@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only <MkButton primary rounded class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton> <MkPagination v-slot="{ items }" ref="pagingComponent" :pagination="pagination" class="_gaps"> - <MkClipPreview v-for="item in items" :key="item.id" :clip="item"/> + <MkClipPreview v-for="item in items" :key="item.id" :clip="item" :noUserInfo="true"/> </MkPagination> </div> <div v-else-if="tab === 'favorites'" key="favorites" class="_gaps"> diff --git a/packages/frontend/src/pages/my-lists/list.vue b/packages/frontend/src/pages/my-lists/list.vue index 7492b099ea..a2ceb222fe 100644 --- a/packages/frontend/src/pages/my-lists/list.vue +++ b/packages/frontend/src/pages/my-lists/list.vue @@ -133,22 +133,25 @@ async function removeUser(item, ev) { } async function showMembershipMenu(item, ev) { + const withRepliesRef = ref(item.withReplies); os.popupMenu([{ - text: item.withReplies ? i18n.ts.hideRepliesToOthersInTimeline : i18n.ts.showRepliesToOthersInTimeline, - icon: item.withReplies ? 'ti ti-messages-off' : 'ti ti-messages', - action: async () => { - misskeyApi('users/lists/update-membership', { - listId: list.value.id, - userId: item.userId, - withReplies: !item.withReplies, - }).then(() => { - paginationEl.value.updateItem(item.id, (old) => ({ - ...old, - withReplies: !item.withReplies, - })); - }); - }, + type: 'switch', + text: i18n.ts.showRepliesToOthersInTimeline, + icon: 'ti ti-messages', + ref: withRepliesRef, }], ev.currentTarget ?? ev.target); + watch(withRepliesRef, withReplies => { + misskeyApi('users/lists/update-membership', { + listId: list.value!.id, + userId: item.userId, + withReplies, + }).then(() => { + paginationEl.value!.updateItem(item.id, (old) => ({ + ...old, + withReplies, + })); + }); + }); } async function deleteList() { diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue index 1e38f42890..7080802a4d 100644 --- a/packages/frontend/src/pages/page.vue +++ b/packages/frontend/src/pages/page.vue @@ -125,7 +125,7 @@ import { $i } from '@/account.js'; import { isSupportShare } from '@/scripts/navigator.js'; import { instance } from '@/instance.js'; import { getStaticImageUrl } from '@/scripts/media-proxy.js'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; const props = defineProps<{ pageName: string; @@ -286,6 +286,7 @@ definePageMetadata(() => ({ background-color: var(--accentedBg); color: var(--accent); text-decoration: none; + outline: none; } } diff --git a/packages/frontend/src/pages/preview.vue b/packages/frontend/src/pages/preview.vue new file mode 100644 index 0000000000..8e07b190aa --- /dev/null +++ b/packages/frontend/src/pages/preview.vue @@ -0,0 +1,26 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<div> + <MkSample/> +</div> +</template> + +<script lang="ts" setup> +import { computed } from 'vue'; +import MkSample from '@/components/MkPreview.vue'; +import { i18n } from '@/i18n.js'; +import { definePageMetadata } from '@/scripts/page-metadata.js'; + +const headerActions = computed(() => []); + +const headerTabs = computed(() => []); + +definePageMetadata(computed(() => ({ + title: i18n.ts.preview, + icon: 'ti ti-eye', +}))); +</script> diff --git a/packages/frontend/src/pages/reset-password.vue b/packages/frontend/src/pages/reset-password.vue index 6b67a9cc87..6d24029535 100644 --- a/packages/frontend/src/pages/reset-password.vue +++ b/packages/frontend/src/pages/reset-password.vue @@ -44,7 +44,9 @@ async function save() { onMounted(() => { if (props.token == null) { - os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {}, 'closed'); + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, { + closed: () => dispose(), + }); mainRouter.push('/'); } }); diff --git a/packages/frontend/src/pages/reversi/game.board.vue b/packages/frontend/src/pages/reversi/game.board.vue index 175ea62411..7d9cefa5c9 100644 --- a/packages/frontend/src/pages/reversi/game.board.vue +++ b/packages/frontend/src/pages/reversi/game.board.vue @@ -169,7 +169,7 @@ const props = defineProps<{ const showBoardLabels = ref<boolean>(false); const useAvatarAsStone = ref<boolean>(true); const autoplaying = ref<boolean>(false); -// eslint-disable-next-line vue/no-setup-props-destructure +// eslint-disable-next-line vue/no-setup-props-reactivity-loss const game = ref<Misskey.entities.ReversiGameDetailed & { logs: Reversi.Serializer.SerializedLog[] }>(deepClone(props.game)); const logPos = ref<number>(game.value.logs.length); const engine = shallowRef<Reversi.Game>(Reversi.Serializer.restoreGame({ diff --git a/packages/frontend/src/pages/reversi/game.vue b/packages/frontend/src/pages/reversi/game.vue index eadc51881c..97a793753d 100644 --- a/packages/frontend/src/pages/reversi/game.vue +++ b/packages/frontend/src/pages/reversi/game.vue @@ -20,6 +20,7 @@ import { useStream } from '@/stream.js'; import { signinRequired } from '@/account.js'; import { useRouter } from '@/router/supplier.js'; import * as os from '@/os.js'; +import { url } from '@/config.js'; import { i18n } from '@/i18n.js'; import { useInterval } from '@/scripts/use-interval.js'; @@ -44,7 +45,7 @@ function start(_game: Misskey.entities.ReversiGameDetailed) { if (shareWhenStart.value) { misskeyApi('notes/create', { - text: i18n.ts._reversi.iStartedAGame + '\n' + location.href, + text: `${i18n.ts._reversi.iStartedAGame}\n${url}/reversi/g/${props.gameId}`, visibility: 'home', }); } diff --git a/packages/frontend/src/pages/search.note.vue b/packages/frontend/src/pages/search.note.vue index e048b498f9..3eae84ce64 100644 --- a/packages/frontend/src/pages/search.note.vue +++ b/packages/frontend/src/pages/search.note.vue @@ -6,14 +6,22 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <div class="_gaps"> <div class="_gaps"> - <MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search" @enter="search"> + <MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search" @enter.prevent="search"> <template #prefix><i class="ti ti-search"></i></template> </MkInput> - <MkFolder> - <template #label>{{ i18n.ts.options }}</template> + <MkFoldableSection :expanded="true"> + <template #header>{{ i18n.ts.options }}</template> <div class="_gaps_m"> - <MkSwitch v-model="isLocalOnly">{{ i18n.ts.localOnly }}</MkSwitch> + <MkRadios v-model="hostSelect"> + <template #label>{{ i18n.ts.host }}</template> + <option value="all" default>{{ i18n.ts.all }}</option> + <option value="local">{{ i18n.ts.local }}</option> + <option v-if="noteSearchableScope === 'global'" value="specified">{{ i18n.ts.specifyHost }}</option> + </MkRadios> + <MkInput v-if="noteSearchableScope === 'global'" v-model="hostInput" :disabled="hostSelect !== 'specified'" :large="true" type="search"> + <template #prefix><i class="ti ti-server"></i></template> + </MkInput> <MkSwitch v-model="order">Sort by newest to oldest</MkSwitch> <MkSelect v-model="filetype" small> <template #label>File Type</template> @@ -25,18 +33,19 @@ SPDX-License-Identifier: AGPL-3.0-only <MkFolder :defaultOpen="true"> <template #label>{{ i18n.ts.specifyUser }}</template> - <template v-if="user" #suffix>@{{ user.username }}</template> + <template v-if="user" #suffix>@{{ user.username }}{{ user.host ? `@${user.host}` : "" }}</template> - <div style="text-align: center;" class="_gaps"> - <div v-if="user">@{{ user.username }}</div> - <div> - <MkButton v-if="user == null" primary rounded inline @click="selectUser">{{ i18n.ts.selectUser }}</MkButton> - <MkButton v-else danger rounded inline @click="user = null">{{ i18n.ts.remove }}</MkButton> + <div class="_gaps"> + <div :class="$style.userItem"> + <MkUserCardMini v-if="user" :class="$style.userCard" :user="user" :withChart="false"/> + <MkButton v-if="user == null && $i != null" transparent :class="$style.addMeButton" @click="selectSelf"><div :class="$style.addUserButtonInner"><span><i class="ti ti-plus"></i><i class="ti ti-user"></i></span><span>{{ i18n.ts.selectSelf }}</span></div></MkButton> + <MkButton v-if="user == null" transparent :class="$style.addUserButton" @click="selectUser"><div :class="$style.addUserButtonInner"><i class="ti ti-plus"></i><span>{{ i18n.ts.selectUser }}</span></div></MkButton> + <button class="_button" :class="$style.remove" :disabled="user == null" @click="removeUser"><i class="ti ti-x"></i></button> </div> </div> </MkFolder> </div> - </MkFolder> + </MkFoldableSection> <div> <MkButton large primary gradate rounded style="margin: 0 auto;" @click="search">{{ i18n.ts.search }}</MkButton> </div> @@ -50,7 +59,9 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { ref } from 'vue'; +import { computed, ref, toRef, watch } from 'vue'; +import type { UserDetailed } from 'misskey-js/entities.js'; +import type { Paging } from '@/components/MkPagination.vue'; import MkNotes from '@/components/MkNotes.vue'; import MkInput from '@/components/MkInput.vue'; import MkButton from '@/components/MkButton.vue'; @@ -62,45 +73,131 @@ import { misskeyApi } from '@/scripts/misskey-api.js'; import MkFoldableSection from '@/components/MkFoldableSection.vue'; import MkFolder from '@/components/MkFolder.vue'; import { useRouter } from '@/router/supplier.js'; +import MkUserCardMini from '@/components/MkUserCardMini.vue'; +import MkRadios from '@/components/MkRadios.vue'; +import { $i } from '@/account.js'; +import { instance } from '@/instance.js'; -const router = useRouter(); +const props = withDefaults(defineProps<{ + query?: string; + userId?: string; + username?: string; + host?: string | null; +}>(), { + query: '', + userId: undefined, + username: undefined, + host: '', +}); +const router = useRouter(); const key = ref(0); -const searchQuery = ref(''); -const searchOrigin = ref('combined'); -const notePagination = ref(); -const user = ref<any>(null); -const isLocalOnly = ref(false); const order = ref(false); const filetype = ref(null); +const noteSearchableScope = instance.noteSearchableScope ?? 'local'; + +const hostSelect = ref<'all' | 'local' | 'specified'>('all'); + +const setHostSelectWithInput = (after:string|undefined|null, before:string|undefined|null) => { + if (before === after) return; + if (after === '') hostSelect.value = 'all'; + else hostSelect.value = 'specified'; +}; + +setHostSelectWithInput(hostInput.value, undefined); + +watch(hostInput, setHostSelectWithInput); + +const searchHost = computed(() => { + if (hostSelect.value === 'local') return '.'; + if (hostSelect.value === 'specified') return hostInput.value; + return null; +}); + +if (props.userId != null) { + misskeyApi('users/show', { userId: props.userId }).then(_user => { + user.value = _user; + }); +} else if (props.username != null) { + misskeyApi('users/show', { + username: props.username, + ...(props.host != null && props.host !== '') ? { host: props.host } : {}, + }).then(_user => { + user.value = _user; + }); +} + function selectUser() { - os.selectUser({ includeSelf: true }).then(_user => { + os.selectUser({ includeSelf: true, localOnly: instance.noteSearchableScope === 'local' }).then(_user => { user.value = _user; + hostInput.value = _user.host ?? ''; }); } +function selectSelf() { + user.value = $i as UserDetailed | null; + hostInput.value = null; +} + +function removeUser() { + user.value = null; + hostInput.value = ''; +} + async function search() { const query = searchQuery.value.toString().trim(); if (query == null || query === '') return; - if (query.startsWith('http://') || query.startsWith('https://')) { - const promise = misskeyApi('ap/show', { - uri: query, + //#region AP lookup + if (query.startsWith('http://') || query.startsWith('https://') && !query.includes(' ')) { + const confirm = await os.confirm({ + type: 'info', + text: i18n.ts.lookupConfirm, }); + if (!confirm.canceled) { + const promise = misskeyApi('ap/show', { + uri: query, + }); + + os.promiseDialog(promise, null, null, i18n.ts.fetchingAsApObject); + + const res = await promise; - os.promiseDialog(promise, null, null, i18n.ts.fetchingAsApObject); + if (res.type === 'User') { + router.push(`/@${res.object.username}@${res.object.host}`); + } else if (res.type === 'Note') { + router.push(`/notes/${res.object.id}`); + } - const res = await promise; + return; + } + } + //#endregion - if (res.type === 'User') { - router.push(`/@${res.object.username}@${res.object.host}`); - } else if (res.type === 'Note') { - router.push(`/notes/${res.object.id}`); + if (query.length > 1 && !query.includes(' ')) { + if (query.startsWith('@')) { + const confirm = await os.confirm({ + type: 'info', + text: i18n.ts.lookupConfirm, + }); + if (!confirm.canceled) { + router.push(`/${query}`); + return; + } } - return; + if (query.startsWith('#')) { + const confirm = await os.confirm({ + type: 'info', + text: i18n.ts.openTagPageConfirm, + }); + if (!confirm.canceled) { + router.push(`/tags/${encodeURIComponent(query.substring(1))}`); + return; + } + } } notePagination.value = { @@ -109,13 +206,51 @@ async function search() { params: { query: searchQuery.value, userId: user.value ? user.value.id : null, + ...(searchHost.value ? { host: searchHost.value } : {}), order: order.value ? 'desc' : 'asc', filetype: filetype.value, }, }; - if (isLocalOnly.value) notePagination.value.params.host = '.'; - key.value++; } </script> +<style lang="scss" module> +.userItem { + display: flex; + justify-content: center; +} +.addMeButton { + border: 2px dashed var(--fgTransparent); + padding: 12px; + margin-right: 16px; +} +.addUserButton { + border: 2px dashed var(--fgTransparent); + padding: 12px; + flex-grow: 1; +} +.addUserButtonInner { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + min-height: 38px; +} +.userCard { + flex-grow: 1; +} +.remove { + width: 32px; + height: 32px; + align-self: center; + + & > i:before { + color: #ff2a2a; + } + + &:disabled { + opacity: 0; + } +} +</style> diff --git a/packages/frontend/src/pages/search.stories.impl.ts b/packages/frontend/src/pages/search.stories.impl.ts new file mode 100644 index 0000000000..0110a7ab8e --- /dev/null +++ b/packages/frontend/src/pages/search.stories.impl.ts @@ -0,0 +1,88 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { StoryObj } from '@storybook/vue3'; +import { HttpResponse, http } from 'msw'; +import search_ from './search.vue'; +import { userDetailed } from '@/../.storybook/fakes.js'; +import { commonHandlers } from '@/../.storybook/mocks.js'; + +const localUser = userDetailed('someuserid', 'miskist', null, 'Local Misskey User'); + +export const Default = { + render(args) { + return { + components: { + search_, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + }, + template: '<search_ v-bind="props" />', + }; + }, + args: { + ignoreNotesSearchAvailable: true, + }, + parameters: { + layout: 'fullscreen', + msw: { + handlers: [ + ...commonHandlers, + http.post('/api/users/show', () => { + return HttpResponse.json(userDetailed()); + }), + http.post('/api/users/search', () => { + return HttpResponse.json([userDetailed(), localUser]); + }), + ], + }, + }, +} satisfies StoryObj<typeof search_>; + +export const NoteSearchDisabled = { + ...Default, + args: {}, +} satisfies StoryObj<typeof search_>; + +export const WithUsernameLocal = { + ...Default, + + args: { + ...Default.args, + username: localUser.username, + host: localUser.host, + }, + parameters: { + layout: 'fullscreen', + msw: { + handlers: [ + ...commonHandlers, + http.post('/api/users/show', () => { + return HttpResponse.json(localUser); + }), + http.post('/api/users/search', () => { + return HttpResponse.json([userDetailed(), localUser]); + }), + ], + }, + }, +} satisfies StoryObj<typeof search_>; + +export const WithUserType = { + ...Default, + args: { + type: 'user', + }, +} satisfies StoryObj<typeof search_>; diff --git a/packages/frontend/src/pages/search.user.vue b/packages/frontend/src/pages/search.user.vue index daf4b64bde..a355c0eeaa 100644 --- a/packages/frontend/src/pages/search.user.vue +++ b/packages/frontend/src/pages/search.user.vue @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <div class="_gaps"> <div class="_gaps"> - <MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search" @enter="search"> + <MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search" @enter.prevent="search"> <template #prefix><i class="ti ti-search"></i></template> </MkInput> <MkRadios v-model="searchOrigin" @update:modelValue="search()"> @@ -25,7 +25,9 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { ref } from 'vue'; +import { ref, toRef } from 'vue'; +import type { Endpoints } from 'misskey-js'; +import type { Paging } from '@/components/MkPagination.vue'; import MkUserList from '@/components/MkUserList.vue'; import MkInput from '@/components/MkInput.vue'; import MkRadios from '@/components/MkRadios.vue'; @@ -36,34 +38,74 @@ import MkFoldableSection from '@/components/MkFoldableSection.vue'; import { misskeyApi } from '@/scripts/misskey-api.js'; import { useRouter } from '@/router/supplier.js'; +const props = withDefaults(defineProps<{ + query?: string, + origin?: Endpoints['users/search']['req']['origin'], +}>(), { + query: '', + origin: 'combined', +}); + const router = useRouter(); const key = ref(''); -const searchQuery = ref(''); -const searchOrigin = ref('combined'); -const userPagination = ref(); +const searchQuery = ref(toRef(props, 'query').value); +const searchOrigin = ref(toRef(props, 'origin').value); +const userPagination = ref<Paging>(); async function search() { const query = searchQuery.value.toString().trim(); if (query == null || query === '') return; - if (query.startsWith('http://') || query.startsWith('https://')) { - const promise = misskeyApi('ap/show', { - uri: query, + //#region AP lookup + if (query.startsWith('http://') || query.startsWith('https://') && !query.includes(' ')) { + const confirm = await os.confirm({ + type: 'info', + text: i18n.ts.lookupConfirm, }); + if (!confirm.canceled) { + const promise = misskeyApi('ap/show', { + uri: query, + }); + + os.promiseDialog(promise, null, null, i18n.ts.fetchingAsApObject); - os.promiseDialog(promise, null, null, i18n.ts.fetchingAsApObject); + const res = await promise; - const res = await promise; + if (res.type === 'User') { + router.push(`/@${res.object.username}@${res.object.host}`); + } else if (res.type === 'Note') { + router.push(`/notes/${res.object.id}`); + } - if (res.type === 'User') { - router.push(`/@${res.object.username}@${res.object.host}`); - } else if (res.type === 'Note') { - router.push(`/notes/${res.object.id}`); + return; } + } + //#endregion - return; + if (query.length > 1 && !query.includes(' ')) { + if (query.startsWith('@')) { + const confirm = await os.confirm({ + type: 'info', + text: i18n.ts.lookupConfirm, + }); + if (!confirm.canceled) { + router.push(`/${query}`); + return; + } + } + + if (query.startsWith('#')) { + const confirm = await os.confirm({ + type: 'info', + text: i18n.ts.openTagPageConfirm, + }); + if (!confirm.canceled) { + router.push(`/user-tags/${encodeURIComponent(query.substring(1))}`); + return; + } + } } if (query.match(/^@[a-z0-9_.-]+@[a-z0-9_.-]+$/i)) { diff --git a/packages/frontend/src/pages/search.vue b/packages/frontend/src/pages/search.vue index a3dcda77be..38d7548fa8 100644 --- a/packages/frontend/src/pages/search.vue +++ b/packages/frontend/src/pages/search.vue @@ -9,8 +9,8 @@ SPDX-License-Identifier: AGPL-3.0-only <MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs"> <MkSpacer v-if="tab === 'note'" key="note" :contentMax="800"> - <div v-if="notesSearchAvailable"> - <XNote/> + <div v-if="notesSearchAvailable || ignoreNotesSearchAvailable"> + <XNote v-bind="props"/> </div> <div v-else> <MkInfo warn>{{ i18n.ts.notesSearchNotAvailable }}</MkInfo> @@ -18,27 +18,43 @@ SPDX-License-Identifier: AGPL-3.0-only </MkSpacer> <MkSpacer v-else-if="tab === 'user'" key="user" :contentMax="800"> - <XUser/> + <XUser v-bind="props"/> </MkSpacer> </MkHorizontalSwipe> </MkStickyContainer> </template> <script lang="ts" setup> -import { computed, defineAsyncComponent, ref } from 'vue'; +import { computed, defineAsyncComponent, ref, toRef } from 'vue'; import { i18n } from '@/i18n.js'; import { definePageMetadata } from '@/scripts/page-metadata.js'; -import { $i } from '@/account.js'; -import { instance } from '@/instance.js'; +import { notesSearchAvailable } from '@/scripts/check-permissions.js'; import MkInfo from '@/components/MkInfo.vue'; import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; +const props = withDefaults(defineProps<{ + query?: string, + userId?: string, + username?: string, + host?: string | null, + type?: 'note' | 'user', + origin?: 'combined' | 'local' | 'remote', + // For storybook only + ignoreNotesSearchAvailable?: boolean, +}>(), { + query: '', + userId: undefined, + username: undefined, + host: undefined, + type: 'note', + origin: 'combined', + ignoreNotesSearchAvailable: false, +}); + const XNote = defineAsyncComponent(() => import('./search.note.vue')); const XUser = defineAsyncComponent(() => import('./search.user.vue')); -const tab = ref('note'); - -const notesSearchAvailable = (($i == null && instance.policies.canSearchNotes) || ($i != null && $i.policies.canSearchNotes)); +const tab = ref(toRef(props, 'type').value); const headerActions = computed(() => []); diff --git a/packages/frontend/src/pages/settings/2fa.vue b/packages/frontend/src/pages/settings/2fa.vue index b7d648c1a4..6a9a1e16e2 100644 --- a/packages/frontend/src/pages/settings/2fa.vue +++ b/packages/frontend/src/pages/settings/2fa.vue @@ -108,9 +108,11 @@ async function registerTOTP(): Promise<void> { token: auth.result.token, }); - os.popup(defineAsyncComponent(() => import('./2fa.qrdialog.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('./2fa.qrdialog.vue')), { twoFactorData, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); } async function unregisterTOTP(): Promise<void> { diff --git a/packages/frontend/src/pages/settings/accounts.vue b/packages/frontend/src/pages/settings/accounts.vue index 1182346de9..08c9261dcf 100644 --- a/packages/frontend/src/pages/settings/accounts.vue +++ b/packages/frontend/src/pages/settings/accounts.vue @@ -74,22 +74,24 @@ async function removeAccount(account) { } function addExistingAccount() { - os.popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, { done: async res => { await addAccounts(res.id, res.i); os.success(); init(); }, - }, 'closed'); + closed: () => dispose(), + }); } function createAccount() { - os.popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, { done: async res => { await addAccounts(res.id, res.i); switchAccountWithToken(res.i); }, - }, 'closed'); + closed: () => dispose(), + }); } async function switchAccount(account: any) { diff --git a/packages/frontend/src/pages/settings/api.vue b/packages/frontend/src/pages/settings/api.vue index d9596b4e45..b35d406a98 100644 --- a/packages/frontend/src/pages/settings/api.vue +++ b/packages/frontend/src/pages/settings/api.vue @@ -23,7 +23,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js'; const isDesktop = ref(window.innerWidth >= 1100); function generateToken() { - os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {}, { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {}, { done: async result => { const { name, permissions } = result; const { token } = await misskeyApi('miauth/gen-token', { @@ -38,7 +38,8 @@ function generateToken() { text: token, }); }, - }, 'closed'); + closed: () => dispose(), + }); } const headerActions = computed(() => []); diff --git a/packages/frontend/src/pages/settings/avatar-decoration.vue b/packages/frontend/src/pages/settings/avatar-decoration.vue index 3cc911c014..77229d3349 100644 --- a/packages/frontend/src/pages/settings/avatar-decoration.vue +++ b/packages/frontend/src/pages/settings/avatar-decoration.vue @@ -67,7 +67,7 @@ misskeyApi('get-avatar-decorations').then(_avatarDecorations => { }); function openDecoration(avatarDecoration, index?: number) { - os.popup(defineAsyncComponent(() => import('./avatar-decoration.dialog.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('./avatar-decoration.dialog.vue')), { decoration: avatarDecoration, usingIndex: index, }, { @@ -108,7 +108,8 @@ function openDecoration(avatarDecoration, index?: number) { }); $i.avatarDecorations = update; }, - }, 'closed'); + closed: () => dispose(), + }); } function detachAllDecorations() { diff --git a/packages/frontend/src/pages/settings/drive-cleaner.vue b/packages/frontend/src/pages/settings/drive-cleaner.vue index 0b0b932f46..3f7db1b779 100644 --- a/packages/frontend/src/pages/settings/drive-cleaner.vue +++ b/packages/frontend/src/pages/settings/drive-cleaner.vue @@ -48,7 +48,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script setup lang="ts"> -import { computed, ref, watch } from 'vue'; +import { computed, ref, watch, type StyleValue } from 'vue'; import tinycolor from 'tinycolor2'; import * as os from '@/os.js'; import { misskeyApi } from '@/scripts/misskey-api.js'; @@ -102,10 +102,10 @@ function fetchDriveInfo(): void { }); } -function genUsageBar(fsize: number): object { +function genUsageBar(fsize: number): StyleValue { return { width: `${fsize / usage.value * 100}%`, - background: tinycolor({ h: 180 - (fsize / usage.value * 180), s: 0.7, l: 0.5 }), + background: tinycolor({ h: 180 - (fsize / usage.value * 180), s: 0.7, l: 0.5 }).toHslString(), }; } diff --git a/packages/frontend/src/pages/settings/drive.vue b/packages/frontend/src/pages/settings/drive.vue index bcaa048de2..fa09637844 100644 --- a/packages/frontend/src/pages/settings/drive.vue +++ b/packages/frontend/src/pages/settings/drive.vue @@ -90,7 +90,7 @@ const meterStyle = computed(() => { h: 180 - (usage.value / capacity.value * 180), s: 0.7, l: 0.5, - }), + }).toHslString(), }; }); diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue index b48308b96f..47681e6cde 100644 --- a/packages/frontend/src/pages/settings/general.vue +++ b/packages/frontend/src/pages/settings/general.vue @@ -234,6 +234,7 @@ SPDX-License-Identifier: AGPL-3.0-only <MkSwitch v-model="disableStreamingTimeline">{{ i18n.ts.disableStreamingTimeline }}</MkSwitch> <MkSwitch v-model="enableHorizontalSwipe">{{ i18n.ts.enableHorizontalSwipe }}</MkSwitch> <MkSwitch v-model="alwaysConfirmFollow">{{ i18n.ts.alwaysConfirmFollow }}</MkSwitch> + <MkSwitch v-model="confirmWhenRevealingSensitiveMedia">{{ i18n.ts.confirmWhenRevealingSensitiveMedia }}</MkSwitch> </div> <MkSelect v-model="serverDisconnectedBehavior"> <template #label>{{ i18n.ts.whenServerDisconnected }}</template> @@ -241,6 +242,12 @@ SPDX-License-Identifier: AGPL-3.0-only <option value="quiet">{{ i18n.ts._serverDisconnectedBehavior.quiet }}</option> <option value="disabled">{{ i18n.ts._serverDisconnectedBehavior.disabled }}</option> </MkSelect> + <MkSelect v-model="contextMenu"> + <template #label>{{ i18n.ts._contextMenu.title }}</template> + <option value="app">{{ i18n.ts._contextMenu.app }}</option> + <option value="appWithShift">{{ i18n.ts._contextMenu.appWithShift }}</option> + <option value="native">{{ i18n.ts._contextMenu.native }}</option> + </MkSelect> <MkRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" easing> <template #label>{{ i18n.ts.numberOfPageCache }}</template> <template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template> @@ -426,6 +433,8 @@ const visibilityOnBoost = computed(defaultStore.makeGetterSetter('visibilityOnBo const enableHorizontalSwipe = computed(defaultStore.makeGetterSetter('enableHorizontalSwipe')); const useNativeUIForVideoAudioPlayer = computed(defaultStore.makeGetterSetter('useNativeUIForVideoAudioPlayer')); const alwaysConfirmFollow = computed(defaultStore.makeGetterSetter('alwaysConfirmFollow')); +const confirmWhenRevealingSensitiveMedia = computed(defaultStore.makeGetterSetter('confirmWhenRevealingSensitiveMedia')); +const contextMenu = computed(defaultStore.makeGetterSetter('contextMenu')); watch(lang, () => { miLocalStorage.setItem('lang', lang.value as string); @@ -485,6 +494,8 @@ watch([ showVisibilitySelectorOnBoost, visibilityOnBoost, alwaysConfirmFollow, + confirmWhenRevealingSensitiveMedia, + contextMenu, ], async () => { await reloadAsk(); }); diff --git a/packages/frontend/src/pages/settings/plugin.vue b/packages/frontend/src/pages/settings/plugin.vue index 9804454e66..3c3dcfe41e 100644 --- a/packages/frontend/src/pages/settings/plugin.vue +++ b/packages/frontend/src/pages/settings/plugin.vue @@ -82,7 +82,7 @@ import MkCode from '@/components/MkCode.vue'; import MkFolder from '@/components/MkFolder.vue'; import MkKeyValue from '@/components/MkKeyValue.vue'; import * as os from '@/os.js'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; import { ColdDeviceStorage } from '@/store.js'; import { unisonReload } from '@/scripts/unison-reload.js'; import { i18n } from '@/i18n.js'; diff --git a/packages/frontend/src/pages/settings/preferences-backups.vue b/packages/frontend/src/pages/settings/preferences-backups.vue index 00cd64dd9f..f9fd494ce9 100644 --- a/packages/frontend/src/pages/settings/preferences-backups.vue +++ b/packages/frontend/src/pages/settings/preferences-backups.vue @@ -118,8 +118,6 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [ 'sound_note', 'sound_noteMy', 'sound_notification', - 'sound_antenna', - 'sound_channel', ]; const coldDeviceStorageSaveKeys: (keyof typeof ColdDeviceStorage.default)[] = [ 'lightTheme', diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue index 4ffa367365..6cc19db127 100644 --- a/packages/frontend/src/pages/settings/profile.vue +++ b/packages/frontend/src/pages/settings/profile.vue @@ -481,6 +481,7 @@ definePageMetadata(() => ({ &:hover, &:focus { opacity: .7; } + &:active { cursor: pointer; } diff --git a/packages/frontend/src/pages/settings/sounds.sound.vue b/packages/frontend/src/pages/settings/sounds.sound.vue index 113abd708b..81478fede5 100644 --- a/packages/frontend/src/pages/settings/sounds.sound.vue +++ b/packages/frontend/src/pages/settings/sounds.sound.vue @@ -9,7 +9,13 @@ SPDX-License-Identifier: AGPL-3.0-only <template #label>{{ i18n.ts.sound }}</template> <option v-for="x in soundsTypes" :key="x ?? 'null'" :value="x">{{ getSoundTypeName(x) }}</option> </MkSelect> - <div v-if="type === '_driveFile_'" :class="$style.fileSelectorRoot"> + <div v-if="type === '_driveFile_' && driveFileError === true" :class="$style.fileSelectorRoot"> + <MkButton :class="$style.fileSelectorButton" inline rounded primary @click="selectSound">{{ i18n.ts.selectFile }}</MkButton> + <div :class="$style.fileErrorRoot"> + <MkCondensedLine>{{ i18n.ts._soundSettings.driveFileError }}</MkCondensedLine> + </div> + </div> + <div v-else-if="type === '_driveFile_'" :class="$style.fileSelectorRoot"> <MkButton :class="$style.fileSelectorButton" inline rounded primary @click="selectSound">{{ i18n.ts.selectFile }}</MkButton> <div :class="['_nowrap', !fileUrl && $style.fileNotSelected]">{{ friendlyFileName }}</div> </div> @@ -19,13 +25,13 @@ SPDX-License-Identifier: AGPL-3.0-only <div class="_buttons"> <MkButton inline @click="listen"><i class="ti ti-player-play"></i> {{ i18n.ts.listen }}</MkButton> - <MkButton inline primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton> + <MkButton inline primary :disabled="!hasChanged || driveFileError" @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton> </div> </div> </template> <script lang="ts" setup> -import { ref, computed } from 'vue'; +import { ref, computed, watch } from 'vue'; import type { SoundType } from '@/scripts/sound.js'; import MkSelect from '@/components/MkSelect.vue'; import MkButton from '@/components/MkButton.vue'; @@ -51,13 +57,18 @@ const type = ref<SoundType>(props.type); const fileId = ref(props.fileId); const fileUrl = ref(props.fileUrl); const fileName = ref<string>(''); +const driveFileError = ref(false); +const hasChanged = ref(false); const volume = ref(props.volume); if (type.value === '_driveFile_' && fileId.value) { - const apiRes = await misskeyApi('drive/files/show', { + await misskeyApi('drive/files/show', { fileId: fileId.value, + }).then((res) => { + fileName.value = res.name; + }).catch((res) => { + driveFileError.value = true; }); - fileName.value = apiRes.name; } function getSoundTypeName(f: SoundType): string { @@ -107,9 +118,21 @@ function selectSound(ev) { fileUrl.value = file.url; fileName.value = file.name; fileId.value = file.id; + driveFileError.value = false; + hasChanged.value = true; }); } +watch([type, volume], ([typeTo, volumeTo], [typeFrom, volumeFrom]) => { + if (typeFrom !== typeTo && typeTo !== '_driveFile_') { + fileUrl.value = undefined; + fileName.value = ''; + fileId.value = undefined; + driveFileError.value = false; + } + hasChanged.value = true; +}); + function listen() { if (type.value === '_driveFile_' && (!fileUrl.value || !fileId.value)) { os.alert({ @@ -131,6 +154,10 @@ function listen() { } function save() { + if (hasChanged.value === false || driveFileError.value === true) { + return; + } + if (type.value === '_driveFile_' && !fileUrl.value) { os.alert({ type: 'warning', @@ -163,6 +190,13 @@ function save() { gap: 8px; } +.fileErrorRoot { + flex-grow: 1; + min-width: 0; + font-weight: 700; + color: var(--error); +} + .fileSelectorButton { flex-shrink: 0; } diff --git a/packages/frontend/src/pages/settings/sounds.vue b/packages/frontend/src/pages/settings/sounds.vue index 090f0cf14c..9fcf564e55 100644 --- a/packages/frontend/src/pages/settings/sounds.vue +++ b/packages/frontend/src/pages/settings/sounds.vue @@ -21,8 +21,14 @@ SPDX-License-Identifier: AGPL-3.0-only <MkFolder v-for="type in operationTypes" :key="type"> <template #label>{{ i18n.ts._sfx[type] }}</template> <template #suffix>{{ getSoundTypeName(sounds[type].type) }}</template> - - <XSound :type="sounds[type].type" :volume="sounds[type].volume" :fileId="sounds[type].fileId" :fileUrl="sounds[type].fileUrl" @update="(res) => updated(type, res)"/> + <Suspense> + <template #default> + <XSound :type="sounds[type].type" :volume="sounds[type].volume" :fileId="sounds[type].fileId" :fileUrl="sounds[type].fileUrl" @update="(res) => updated(type, res)"/> + </template> + <template #fallback> + <MkLoading/> + </template> + </Suspense> </MkFolder> </div> </FormSection> @@ -54,8 +60,6 @@ const sounds = ref<Record<OperationType, Ref<SoundStore>>>({ note: defaultStore.reactiveState.sound_note, noteMy: defaultStore.reactiveState.sound_noteMy, notification: defaultStore.reactiveState.sound_notification, - antenna: defaultStore.reactiveState.sound_antenna, - channel: defaultStore.reactiveState.sound_channel, reaction: defaultStore.reactiveState.sound_reaction, }); diff --git a/packages/frontend/src/pages/settings/statusbar.statusbar.vue b/packages/frontend/src/pages/settings/statusbar.statusbar.vue index 92e389a288..67943524ef 100644 --- a/packages/frontend/src/pages/settings/statusbar.statusbar.vue +++ b/packages/frontend/src/pages/settings/statusbar.statusbar.vue @@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only <MkSwitch v-model="statusbar.props.shuffle"> <template #label>{{ i18n.ts.shuffle }}</template> </MkSwitch> - <MkInput v-model="statusbar.props.refreshIntervalSec" manualSave type="number"> + <MkInput v-model="statusbar.props.refreshIntervalSec" manualSave type="number" min="1"> <template #label>{{ i18n.ts.refreshInterval }}</template> </MkInput> <MkRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1"> @@ -48,7 +48,7 @@ SPDX-License-Identifier: AGPL-3.0-only </MkSwitch> </template> <template v-else-if="statusbar.type === 'federation'"> - <MkInput v-model="statusbar.props.refreshIntervalSec" manualSave type="number"> + <MkInput v-model="statusbar.props.refreshIntervalSec" manualSave type="number" min="1"> <template #label>{{ i18n.ts.refreshInterval }}</template> </MkInput> <MkRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1"> diff --git a/packages/frontend/src/pages/settings/theme.manage.vue b/packages/frontend/src/pages/settings/theme.manage.vue index 8a94d7388b..579ca6b20b 100644 --- a/packages/frontend/src/pages/settings/theme.manage.vue +++ b/packages/frontend/src/pages/settings/theme.manage.vue @@ -38,7 +38,7 @@ import MkSelect from '@/components/MkSelect.vue'; import MkInput from '@/components/MkInput.vue'; import MkButton from '@/components/MkButton.vue'; import { Theme, getBuiltinThemesRef } from '@/scripts/theme.js'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; import * as os from '@/os.js'; import { getThemes, removeTheme } from '@/theme-store.js'; import { i18n } from '@/i18n.js'; diff --git a/packages/frontend/src/pages/settings/theme.vue b/packages/frontend/src/pages/settings/theme.vue index eaa9b5b97e..ad07a6b539 100644 --- a/packages/frontend/src/pages/settings/theme.vue +++ b/packages/frontend/src/pages/settings/theme.vue @@ -213,12 +213,18 @@ definePageMetadata(() => ({ } } + .dn:focus-visible ~ .toggle { + outline: 2px solid var(--focus); + outline-offset: 2px; + } + .toggle { cursor: pointer; display: inline-block; position: relative; width: 90px; height: 50px; + margin: 4px; // focus用のアウトライン background-color: #83D8FF; border-radius: 90px - 6; transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important; diff --git a/packages/frontend/src/pages/settings/webhook.edit.vue b/packages/frontend/src/pages/settings/webhook.edit.vue index e9fb1e471e..058ef69c35 100644 --- a/packages/frontend/src/pages/settings/webhook.edit.vue +++ b/packages/frontend/src/pages/settings/webhook.edit.vue @@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only </MkInput> <FormSection> - <template #label>{{ i18n.ts._webhookSettings.events }}</template> + <template #label>{{ i18n.ts._webhookSettings.trigger }}</template> <div class="_gaps_s"> <MkSwitch v-model="event_follow">{{ i18n.ts._webhookSettings._events.follow }}</MkSwitch> diff --git a/packages/frontend/src/pages/settings/webhook.new.vue b/packages/frontend/src/pages/settings/webhook.new.vue index 5bf85e48f4..d62357caaf 100644 --- a/packages/frontend/src/pages/settings/webhook.new.vue +++ b/packages/frontend/src/pages/settings/webhook.new.vue @@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only </MkInput> <FormSection> - <template #label>{{ i18n.ts._webhookSettings.events }}</template> + <template #label>{{ i18n.ts._webhookSettings.trigger }}</template> <div class="_gaps_s"> <MkSwitch v-model="event_follow">{{ i18n.ts._webhookSettings._events.follow }}</MkSwitch> diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue index a24911e717..d93ceadf56 100644 --- a/packages/frontend/src/pages/timeline.vue +++ b/packages/frontend/src/pages/timeline.vue @@ -8,8 +8,8 @@ SPDX-License-Identifier: AGPL-3.0-only <template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" :displayMyAvatar="true"/></template> <MkSpacer :contentMax="800"> <MkHorizontalSwipe v-model:tab="src" :tabs="$i ? headerTabs : headerTabsWhenNotLogin"> - <div :key="src" ref="rootEl" v-hotkey.global="keymap"> - <MkInfo v-if="['home', 'local', 'social', 'global'].includes(src) && !defaultStore.reactiveState.timelineTutorials.value[src]" style="margin-bottom: var(--margin);" closable @close="closeTutorial()"> + <div :key="src" ref="rootEl"> + <MkInfo v-if="isBasicTimeline(src) && !defaultStore.reactiveState.timelineTutorials.value[src]" style="margin-bottom: var(--margin);" closable @close="closeTutorial()"> {{ i18n.ts._timelineDescription[src] }} </MkInfo> <MkPostForm v-if="defaultStore.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/> @@ -46,7 +46,6 @@ import * as os from '@/os.js'; import { misskeyApi } from '@/scripts/misskey-api.js'; import { defaultStore } from '@/store.js'; 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, favoritedChannelsCache } from '@/cache.js'; @@ -54,21 +53,15 @@ import { deviceKind } from '@/scripts/device-kind.js'; import { deepMerge } from '@/scripts/merge.js'; import { MenuItem } from '@/types/menu.js'; import { miLocalStorage } from '@/local-storage.js'; +import { availableBasicTimelines, hasWithReplies, isAvailableBasicTimeline, isBasicTimeline, basicTimelineIconClass } from '@/timelines.js'; provide('shouldOmitHeaderTitle', true); -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 keymap = { - 't': focus, -}; - const tlComponent = shallowRef<InstanceType<typeof MkTimeline>>(); const rootEl = shallowRef<HTMLElement>(); const queue = ref(0); -const srcWhenNotSignin = ref<'local' | 'global'>(isLocalTimelineAvailable ? 'local' : 'global'); +const srcWhenNotSignin = ref<'local' | 'global'>(isAvailableBasicTimeline('local') ? 'local' : 'global'); const src = computed<'home' | 'local' | 'social' | 'global' | 'bubble' | `list:${string}`>({ get: () => ($i ? defaultStore.reactiveState.tl.value.src : srcWhenNotSignin.value), set: (x) => saveSrc(x), @@ -79,7 +72,11 @@ const withRenotes = computed<boolean>({ }); // computed内での無限ループを防ぐためのフラグ -const localSocialTLFilterSwitchStore = ref<'withReplies' | 'onlyFiles' | false>('withReplies'); +const localSocialTLFilterSwitchStore = ref<'withReplies' | 'onlyFiles' | false>( + defaultStore.reactiveState.tl.value.filter.withReplies ? 'withReplies' : + defaultStore.reactiveState.tl.value.filter.onlyFiles ? 'onlyFiles' : + false, +); const withReplies = computed<boolean>({ get: () => { @@ -239,7 +236,7 @@ function focus(): void { } function closeTutorial(): void { - if (!['home', 'local', 'social', 'global'].includes(src.value)) return; + if (!isBasicTimeline(src.value)) return; const before = defaultStore.state.timelineTutorials; before[src.value] = true; defaultStore.set('timelineTutorials', before); @@ -255,7 +252,7 @@ const headerActions = computed(() => { type: 'switch', text: i18n.ts.showRenotes, ref: withRenotes, - }, src.value === 'local' || src.value === 'social' ? { + }, isBasicTimeline(src.value) && hasWithReplies(src.value) ? { type: 'switch', text: i18n.ts.showRepliesToOthersInTimeline, ref: withReplies, @@ -268,7 +265,7 @@ const headerActions = computed(() => { type: 'switch', text: i18n.ts.fileAttachedOnly, ref: onlyFiles, - disabled: src.value === 'local' || src.value === 'social' ? withReplies : false, + disabled: isBasicTimeline(src.value) && hasWithReplies(src.value) ? withReplies : false, }], ev.currentTarget ?? ev.target); }, }, @@ -290,32 +287,12 @@ const headerTabs = computed(() => [...(defaultStore.reactiveState.pinnedUserList title: l.name, icon: 'ti ti-star', iconOnly: true, -}))), { - key: 'home', - title: i18n.ts._timelines.home, - icon: 'ti ti-home', - iconOnly: true, -}, ...(isLocalTimelineAvailable ? [{ - key: 'local', - title: i18n.ts._timelines.local, - icon: 'ti ti-planet', - iconOnly: true, -}, { - key: 'social', - title: i18n.ts._timelines.social, - icon: 'ti ti-universe', +}))), ...availableBasicTimelines().map(tl => ({ + key: tl, + title: i18n.ts._timelines[tl], + icon: basicTimelineIconClass(tl), iconOnly: true, -}] : []), ...(isBubbleTimelineAvailable ? [{ - key: 'bubble', - title: 'Bubble', - icon: 'ph-drop ph-bold ph-lg', - iconOnly: true, -}] : []), ...(isGlobalTimelineAvailable ? [{ - key: 'global', - title: i18n.ts._timelines.global, - icon: 'ti ti-whirl', - iconOnly: true, -}] : []), { +})), { icon: 'ti ti-list', title: i18n.ts.lists, iconOnly: true, @@ -332,24 +309,16 @@ const headerTabs = computed(() => [...(defaultStore.reactiveState.pinnedUserList onClick: chooseChannel, }] as Tab[]); -const headerTabsWhenNotLogin = computed(() => [ - ...(isLocalTimelineAvailable ? [{ - key: 'local', - title: i18n.ts._timelines.local, - icon: 'ti ti-planet', - iconOnly: true, - }] : []), - ...(isGlobalTimelineAvailable ? [{ - key: 'global', - title: i18n.ts._timelines.global, - icon: 'ti ti-whirl', - iconOnly: true, - }] : []), -] as Tab[]); +const headerTabsWhenNotLogin = computed(() => [...availableBasicTimelines().map(tl => ({ + key: tl, + title: i18n.ts._timelines[tl], + icon: basicTimelineIconClass(tl), + iconOnly: true, +}))] as Tab[]); definePageMetadata(() => ({ title: i18n.ts.timeline, - icon: src.value === 'local' ? 'ti ti-planet' : src.value === 'social' ? 'ti ti-universe' : src.value === 'global' ? 'ti ti-whirl' : src.value === 'bubble' ? 'ph-drop ph-bold ph-lg' : 'ti ti-home', + icon: isBasicTimeline(src.value) ? basicTimelineIconClass(src.value) : 'ti ti-home', })); </script> diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue index 112394170f..2bf388b62a 100644 --- a/packages/frontend/src/pages/user/home.vue +++ b/packages/frontend/src/pages/user/home.vue @@ -31,9 +31,9 @@ SPDX-License-Identifier: AGPL-3.0-only </div> </div> <span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span> - <div v-if="$i" class="actions"> + <div class="actions"> <button class="menu _button" @click="menu"><i class="ti ti-dots"></i></button> - <MkFollowButton v-if="$i.id != user.id" v-model:user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/> + <MkFollowButton v-if="$i?.id != user.id" v-model:user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/> </div> </div> <MkAvatar class="avatar" :user="user" indicator/> @@ -94,7 +94,7 @@ SPDX-License-Identifier: AGPL-3.0-only <div v-if="user.fields.length > 0" class="fields"> <dl v-for="(field, i) in user.fields" :key="i" class="field"> <dt class="name"> - <Mfm :text="field.name" :plain="true" :colored="false"/> + <Mfm :text="field.name" :author="user" :plain="true" :colored="false"/> </dt> <dd class="value"> <Mfm :text="field.value" :author="user" :colored="false"/> @@ -181,6 +181,7 @@ import number from '@/filters/number.js'; import { userPage } from '@/filters/user.js'; import * as os from '@/os.js'; import { i18n } from '@/i18n.js'; +import { defaultStore } from '@/store.js'; import { $i, iAmModerator } from '@/account.js'; import { dateString } from '@/filters/date.js'; import { confetti } from '@/scripts/confetti.js'; @@ -492,11 +493,12 @@ onUnmounted(() => { > .name { display: block; - margin: 0; + margin: -10px; + padding: 10px; line-height: 32px; font-weight: bold; font-size: 1.8em; - text-shadow: 0 0 8px #000; + filter: drop-shadow(0 0 4px #000); } > .bottom { diff --git a/packages/frontend/src/pages/welcome.timeline.note.vue b/packages/frontend/src/pages/welcome.timeline.note.vue new file mode 100644 index 0000000000..252b1a2955 --- /dev/null +++ b/packages/frontend/src/pages/welcome.timeline.note.vue @@ -0,0 +1,109 @@ +<!-- +SPDX-FileCopyrightText: syuilo and misskey-project +SPDX-License-Identifier: AGPL-3.0-only +--> + +<template> +<div :key="note.id" :class="$style.note"> + <div class="_panel _gaps_s" :class="$style.content"> + <div v-if="note.cw != null" :class="$style.richcontent"> + <div><Mfm :text="note.cw" :author="note.user"/></div> + <MkCwButton v-model="showContent" :text="note.text" :renote="note.renote" :files="note.files" :poll="note.poll" style="margin: 4px 0;"/> + <div v-if="showContent"> + <MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA> + <Mfm v-if="note.text" :text="note.text" :isBlock="true" :author="note.user"/> + <MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA> + </div> + </div> + <div v-else ref="noteTextEl" :class="[$style.text, { [$style.collapsed]: shouldCollapse }]"> + <MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA> + <Mfm v-if="note.text" :text="note.text" :isBlock="true" :author="note.user"/> + <MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA> + </div> + <div v-if="note.files && note.files.length > 0" :class="$style.richcontent"> + <MkMediaList :mediaList="note.files.slice(0, 4)"/> + </div> + <div v-if="note.poll"> + <MkPoll :noteId="note.id" :poll="note.poll" :readOnly="true"/> + </div> + <div v-if="note.reactionCount > 0" :class="$style.reactions"> + <MkReactionsViewer :note="note" :maxNumber="16"/> + </div> + </div> +</div> +</template> + +<script lang="ts" setup> +import { ref, shallowRef, onUpdated, onMounted } from 'vue'; +import * as Misskey from 'misskey-js'; +import MkReactionsViewer from '@/components/MkReactionsViewer.vue'; +import MkMediaList from '@/components/MkMediaList.vue'; +import MkPoll from '@/components/MkPoll.vue'; +import MkCwButton from '@/components/MkCwButton.vue'; + +defineProps<{ + note: Misskey.entities.Note; +}>(); + +const noteTextEl = shallowRef<HTMLDivElement>(); +const shouldCollapse = ref(false); +const showContent = ref(false); + +function calcCollapse() { + if (noteTextEl.value) { + const height = noteTextEl.value.scrollHeight; + if (height > 200) { + shouldCollapse.value = true; + } + } +} + +onMounted(() => { + calcCollapse(); +}); + +onUpdated(() => { + calcCollapse(); +}); +</script> + +<style lang="scss" module> +.note { + margin-left: auto; +} + +.text { + position: relative; + max-height: 200px; + overflow: hidden; + + &.collapsed::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 64px; + background: linear-gradient(0deg, var(--panel), var(--X15)); + } +} + +.content { + padding: 16px; + margin: 0 0 0 auto; + max-width: max-content; + border-radius: var(--radius-md); +} + +.reactions { + box-sizing: border-box; + margin: 8px -16px -8px; + padding: 8px 16px 0; + width: calc(100% + 32px); + border-top: 1px solid var(--divider); +} + +.richcontent { + min-width: 250px; +} +</style> diff --git a/packages/frontend/src/pages/welcome.timeline.vue b/packages/frontend/src/pages/welcome.timeline.vue index 3e519c0910..045f424cda 100644 --- a/packages/frontend/src/pages/welcome.timeline.vue +++ b/packages/frontend/src/pages/welcome.timeline.vue @@ -4,24 +4,17 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<div :class="$style.root"> - <div ref="scrollEl" :class="[$style.scrollbox, { [$style.scroll]: isScrolling }]"> - <div v-for="note in notes" :key="note.id" :class="$style.note"> - <div class="_panel" :class="$style.content"> - <div> - <MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA> - <Mfm v-if="note.text" :text="note.text" :isBlock="true" :author="note.user"/> - <MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA> - </div> - <div v-if="note.files.length > 0" :class="$style.richcontent"> - <MkMediaList :mediaList="note.files"/> - </div> - <div v-if="note.poll"> - <MkPoll :noteId="note.id" :poll="note.poll" :readOnly="true"/> - </div> - </div> - <MkReactionsViewer ref="reactionsViewer" :note="note"/> - </div> +<div :class="$style.root" class="_gaps"> + <div + ref="notesMainContainerEl" + class="_gaps" + :class="[$style.scrollBoxMain, { [$style.scrollIntro]: (scrollState === 'intro'), [$style.scrollLoop]: (scrollState === 'loop') }]" + @animationend="changeScrollState" + > + <XNote v-for="note in notes" :key="`${note.id}_1`" :class="$style.note" :note="note"/> + </div> + <div v-if="isScrolling" class="_gaps" :class="[$style.scrollBoxSub, { [$style.scrollIntro]: (scrollState === 'intro'), [$style.scrollLoop]: (scrollState === 'loop') }]"> + <XNote v-for="note in notes" :key="`${note.id}_2`" :class="$style.note" :note="note"/> </div> </div> </template> @@ -29,43 +22,54 @@ SPDX-License-Identifier: AGPL-3.0-only <script lang="ts" setup> import * as Misskey from 'misskey-js'; import { onUpdated, ref, shallowRef } from 'vue'; -import MkReactionsViewer from '@/components/MkReactionsViewer.vue'; -import MkMediaList from '@/components/MkMediaList.vue'; -import MkPoll from '@/components/MkPoll.vue'; +import XNote from '@/pages/welcome.timeline.note.vue'; import { misskeyApiGet } from '@/scripts/misskey-api.js'; import { getScrollContainer } from '@/scripts/scroll.js'; const notes = ref<Misskey.entities.Note[]>([]); const isScrolling = ref(false); -const scrollEl = shallowRef<HTMLElement>(); +const scrollState = ref<null | 'intro' | 'loop'>(null); +const notesMainContainerEl = shallowRef<HTMLElement>(); misskeyApiGet('notes/featured').then(_notes => { notes.value = _notes.filter(n => n.cw == null); }); +function changeScrollState() { + if (scrollState.value !== 'loop') { + scrollState.value = 'loop'; + } +} + onUpdated(() => { - if (!scrollEl.value) return; - const container = getScrollContainer(scrollEl.value); + if (!notesMainContainerEl.value) return; + const container = getScrollContainer(notesMainContainerEl.value); const containerHeight = container ? container.clientHeight : window.innerHeight; - if (scrollEl.value.offsetHeight > containerHeight) { + if (notesMainContainerEl.value.offsetHeight > containerHeight) { + if (scrollState.value === null) { + scrollState.value = 'intro'; + } isScrolling.value = true; } }); </script> <style lang="scss" module> -@keyframes scroll { +@keyframes scrollIntro { 0% { transform: translate3d(0, 0, 0); } - 5% { - transform: translate3d(0, 0, 0); + 100% { + transform: translate3d(0, calc(calc(-100% - 128px) - var(--margin)), 0); } - 75% { - transform: translate3d(0, calc(-100% + 90vh), 0); +} + +@keyframes scrollConstant { + 0% { + transform: translate3d(0, -128px, 0); } - 90% { - transform: translate3d(0, calc(-100% + 90vh), 0); + 100% { + transform: translate3d(0, calc(calc(-100% - 128px) - var(--margin)), 0); } } @@ -73,24 +77,26 @@ onUpdated(() => { text-align: right; } -.scrollbox { - &.scroll { - animation: scroll 45s linear infinite; +.scrollBoxMain { + &.scrollIntro { + animation: scrollIntro 30s linear forwards; + } + &.scrollLoop { + animation: scrollConstant 30s linear infinite; } } -.note { - margin: 16px 0 16px auto; -} - -.content { - padding: 16px; - margin: 0 0 0 auto; - max-width: max-content; - border-radius: var(--radius-md); +.scrollBoxSub { + &.scrollIntro { + animation: scrollIntro 30s linear forwards; + } + &.scrollLoop { + animation: scrollConstant 30s linear infinite; + } } -.richcontent { - min-width: 250px; +.root:has(.note:hover) .scrollBoxMain, +.root:has(.note:hover) .scrollBoxSub { + animation-play-state: paused; } </style> diff --git a/packages/frontend/src/router/definition.ts b/packages/frontend/src/router/definition.ts index f18dac2a44..14110d1f9b 100644 --- a/packages/frontend/src/router/definition.ts +++ b/packages/frontend/src/router/definition.ts @@ -232,13 +232,26 @@ const routes: RouteDef[] = [{ component: page(() => import('@/pages/search.vue')), query: { q: 'query', + userId: 'userId', + username: 'username', + host: 'host', channel: 'channel', type: 'type', origin: 'origin', }, }, { + // Legacy Compatibility path: '/authorize-follow', - component: page(() => import('@/pages/follow.vue')), + redirect: '/lookup', + loginRequired: true, +}, { + // Mastodon Compatibility + path: '/authorize_interaction', + redirect: '/lookup', + loginRequired: true, +}, { + path: '/lookup', + component: page(() => import('@/pages/lookup.vue')), loginRequired: true, }, { path: '/share', @@ -252,6 +265,9 @@ const routes: RouteDef[] = [{ path: '/scratchpad', component: page(() => import('@/pages/scratchpad.vue')), }, { + path: '/preview', + component: page(() => import('@/pages/preview.vue')), +}, { path: '/auth/:token', component: page(() => import('@/pages/auth.vue')), }, { @@ -476,6 +492,14 @@ const routes: RouteDef[] = [{ name: 'approvals', component: page(() => import('@/pages/admin/approvals.vue')), }, { + path: '/abuse-report-notification-recipient', + name: 'abuse-report-notification-recipient', + component: page(() => import('@/pages/admin/abuse-report/notification-recipient.vue')), + }, { + path: '/system-webhook', + name: 'system-webhook', + component: page(() => import('@/pages/admin/system-webhook.vue')), + }, { path: '/', component: page(() => import('@/pages/_empty_.vue')), }], diff --git a/packages/frontend/src/scripts/array.ts b/packages/frontend/src/scripts/array.ts index b3d76e149f..f2feb29dfc 100644 --- a/packages/frontend/src/scripts/array.ts +++ b/packages/frontend/src/scripts/array.ts @@ -78,44 +78,6 @@ export function maximum(xs: number[]): number { } /** - * Splits an array based on the equivalence relation. - * The concatenation of the result is equal to the argument. - */ -export function groupBy<T>(f: EndoRelation<T>, xs: T[]): T[][] { - const groups = [] as T[][]; - for (const x of xs) { - const lastGroup = groups.at(-1); - if (lastGroup !== undefined && f(lastGroup[0], x)) { - lastGroup.push(x); - } else { - groups.push([x]); - } - } - return groups; -} - -/** - * Splits an array based on the equivalence relation induced by the function. - * The concatenation of the result is equal to the argument. - */ -export function groupOn<T, S>(f: (x: T) => S, xs: T[]): T[][] { - return groupBy((a, b) => f(a) === f(b), xs); -} - -export function groupByX<T>(collections: T[], keySelector: (x: T) => string) { - return collections.reduce((obj: Record<string, T[]>, item: T) => { - const key = keySelector(item); - if (typeof obj[key] === 'undefined') { - obj[key] = []; - } - - obj[key].push(item); - - return obj; - }, {}); -} - -/** * Compare two arrays by lexicographical order */ export function lessThan(xs: number[], ys: number[]): boolean { diff --git a/packages/frontend/src/scripts/check-permissions.ts b/packages/frontend/src/scripts/check-permissions.ts new file mode 100644 index 0000000000..ed86529d5b --- /dev/null +++ b/packages/frontend/src/scripts/check-permissions.ts @@ -0,0 +1,19 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { instance } from '@/instance.js'; +import { $i } from '@/account.js'; + +export const notesSearchAvailable = ( + // FIXME: instance.policies would be null in Vitest + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + ($i == null && instance.policies != null && instance.policies.canSearchNotes) || + ($i != null && $i.policies.canSearchNotes) || + false +) as boolean; + +export const canSearchNonLocalNotes = ( + instance.noteSearchableScope === 'global' +); diff --git a/packages/frontend/src/scripts/copy-to-clipboard.ts b/packages/frontend/src/scripts/copy-to-clipboard.ts index 216c0464b3..7e0bb25606 100644 --- a/packages/frontend/src/scripts/copy-to-clipboard.ts +++ b/packages/frontend/src/scripts/copy-to-clipboard.ts @@ -6,33 +6,6 @@ /** * Clipboardに値をコピー(TODO: 文字列以外も対応) */ -export default val => { - // 空div 生成 - const tmp = document.createElement('div'); - // 選択用のタグ生成 - const pre = document.createElement('pre'); - - // 親要素のCSSで user-select: none だとコピーできないので書き換える - pre.style.webkitUserSelect = 'auto'; - pre.style.userSelect = 'auto'; - - tmp.appendChild(pre).textContent = val; - - // 要素を画面外へ - const s = tmp.style; - s.position = 'fixed'; - s.right = '200%'; - - // body に追加 - document.body.appendChild(tmp); - // 要素を選択 - document.getSelection().selectAllChildren(tmp); - - // クリップボードにコピー - const result = document.execCommand('copy'); - - // 要素削除 - document.body.removeChild(tmp); - - return result; +export function copyToClipboard(input: string | null) { + if (input) navigator.clipboard.writeText(input); }; diff --git a/packages/frontend/src/scripts/focus-trap.ts b/packages/frontend/src/scripts/focus-trap.ts new file mode 100644 index 0000000000..a5df36f520 --- /dev/null +++ b/packages/frontend/src/scripts/focus-trap.ts @@ -0,0 +1,78 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ +import { getHTMLElementOrNull } from '@/scripts/get-dom-node-or-null.js'; + +const focusTrapElements = new Set<HTMLElement>(); +const ignoreElements = [ + 'script', + 'style', +]; + +function containsFocusTrappedElements(el: HTMLElement): boolean { + return Array.from(focusTrapElements).some((focusTrapElement) => { + return el.contains(focusTrapElement); + }); +} + +function releaseFocusTrap(el: HTMLElement): void { + focusTrapElements.delete(el); + if (el.inert === true) { + el.inert = false; + } + if (el.parentElement != null && el !== document.body) { + el.parentElement.childNodes.forEach((siblingNode) => { + const siblingEl = getHTMLElementOrNull(siblingNode); + if (!siblingEl) return; + if (siblingEl !== el && (focusTrapElements.has(siblingEl) || containsFocusTrappedElements(siblingEl) || focusTrapElements.size === 0)) { + siblingEl.inert = false; + } else if ( + focusTrapElements.size > 0 && + !containsFocusTrappedElements(siblingEl) && + !focusTrapElements.has(siblingEl) && + !ignoreElements.includes(siblingEl.tagName.toLowerCase()) + ) { + siblingEl.inert = true; + } else { + siblingEl.inert = false; + } + }); + releaseFocusTrap(el.parentElement); + } +} + +export function focusTrap(el: HTMLElement, hasInteractionWithOtherFocusTrappedEls: boolean, parent: true): void; +export function focusTrap(el: HTMLElement, hasInteractionWithOtherFocusTrappedEls?: boolean, parent?: false): { release: () => void; }; +export function focusTrap(el: HTMLElement, hasInteractionWithOtherFocusTrappedEls = false, parent = false): { release: () => void; } | void { + if (el.inert === true) { + el.inert = false; + } + if (el.parentElement != null && el !== document.body) { + el.parentElement.childNodes.forEach((siblingNode) => { + const siblingEl = getHTMLElementOrNull(siblingNode); + if (!siblingEl) return; + if ( + siblingEl !== el && + ( + hasInteractionWithOtherFocusTrappedEls === false || + (!focusTrapElements.has(siblingEl) && !containsFocusTrappedElements(siblingEl)) + ) && + !ignoreElements.includes(siblingEl.tagName.toLowerCase()) + ) { + siblingEl.inert = true; + } + }); + focusTrap(el.parentElement, hasInteractionWithOtherFocusTrappedEls, true); + } + + if (!parent) { + focusTrapElements.add(el); + + return { + release: () => { + releaseFocusTrap(el); + }, + }; + } +} diff --git a/packages/frontend/src/scripts/focus.ts b/packages/frontend/src/scripts/focus.ts index ea6ee61c88..eb2da5ad86 100644 --- a/packages/frontend/src/scripts/focus.ts +++ b/packages/frontend/src/scripts/focus.ts @@ -3,30 +3,78 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -export function focusPrev(el: Element | null, self = false, scroll = true) { - if (el == null) return; - if (!self) el = el.previousElementSibling; - if (el) { - if (el.hasAttribute('tabindex')) { - (el as HTMLElement).focus({ - preventScroll: !scroll, - }); - } else { - focusPrev(el.previousElementSibling, true); - } +import { getScrollPosition, getScrollContainer, getStickyBottom, getStickyTop } from '@/scripts/scroll.js'; +import { getElementOrNull, getNodeOrNull } from '@/scripts/get-dom-node-or-null.js'; + +type MaybeHTMLElement = EventTarget | Node | Element | HTMLElement; + +export const isFocusable = (input: MaybeHTMLElement | null | undefined): input is HTMLElement => { + if (input == null || !(input instanceof HTMLElement)) return false; + + if (input.tabIndex < 0) return false; + if ('disabled' in input && input.disabled === true) return false; + if ('readonly' in input && input.readonly === true) return false; + + if (!input.ownerDocument.contains(input)) return false; + + const style = window.getComputedStyle(input); + if (style.display === 'none') return false; + if (style.visibility === 'hidden') return false; + if (style.opacity === '0') return false; + if (style.pointerEvents === 'none') return false; + + return true; +}; + +export const focusPrev = (input: MaybeHTMLElement | null | undefined, self = false, scroll = true) => { + const element = self ? input : getElementOrNull(input)?.previousElementSibling; + if (element == null) return; + if (isFocusable(element)) { + focusOrScroll(element, scroll); + } else { + focusPrev(element, false, scroll); } -} +}; -export function focusNext(el: Element | null, self = false, scroll = true) { - if (el == null) return; - if (!self) el = el.nextElementSibling; - if (el) { - if (el.hasAttribute('tabindex')) { - (el as HTMLElement).focus({ - preventScroll: !scroll, - }); - } else { - focusPrev(el.nextElementSibling, true); +export const focusNext = (input: MaybeHTMLElement | null | undefined, self = false, scroll = true) => { + const element = self ? input : getElementOrNull(input)?.nextElementSibling; + if (element == null) return; + if (isFocusable(element)) { + focusOrScroll(element, scroll); + } else { + focusNext(element, false, scroll); + } +}; + +export const focusParent = (input: MaybeHTMLElement | null | undefined, self = false, scroll = true) => { + const element = self ? input : getNodeOrNull(input)?.parentElement; + if (element == null) return; + if (isFocusable(element)) { + focusOrScroll(element, scroll); + } else { + focusParent(element, false, scroll); + } +}; + +const focusOrScroll = (element: HTMLElement, scroll: boolean) => { + if (scroll) { + const scrollContainer = getScrollContainer(element) ?? document.documentElement; + const scrollContainerTop = getScrollPosition(scrollContainer); + const stickyTop = getStickyTop(element, scrollContainer); + const stickyBottom = getStickyBottom(element, scrollContainer); + const top = element.getBoundingClientRect().top; + const bottom = element.getBoundingClientRect().bottom; + + let scrollTo = scrollContainerTop; + if (top < stickyTop) { + scrollTo += top - stickyTop; + } else if (bottom > window.innerHeight - stickyBottom) { + scrollTo += bottom - window.innerHeight + stickyBottom; } + scrollContainer.scrollTo({ top: scrollTo, behavior: 'instant' }); + } + + if (document.activeElement !== element) { + element.focus({ preventScroll: true }); } -} +}; diff --git a/packages/frontend/src/scripts/get-dom-node-or-null.ts b/packages/frontend/src/scripts/get-dom-node-or-null.ts new file mode 100644 index 0000000000..fbf54675fd --- /dev/null +++ b/packages/frontend/src/scripts/get-dom-node-or-null.ts @@ -0,0 +1,19 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +export const getNodeOrNull = (input: unknown): Node | null => { + if (input instanceof Node) return input; + return null; +}; + +export const getElementOrNull = (input: unknown): Element | null => { + if (input instanceof Element) return input; + return null; +}; + +export const getHTMLElementOrNull = (input: unknown): HTMLElement | null => { + if (input instanceof HTMLElement) return input; + return null; +}; diff --git a/packages/frontend/src/scripts/get-drive-file-menu.ts b/packages/frontend/src/scripts/get-drive-file-menu.ts index 7aca5f83b2..108648d640 100644 --- a/packages/frontend/src/scripts/get-drive-file-menu.ts +++ b/packages/frontend/src/scripts/get-drive-file-menu.ts @@ -6,7 +6,7 @@ import * as Misskey from 'misskey-js'; import { defineAsyncComponent } from 'vue'; import { i18n } from '@/i18n.js'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; import * as os from '@/os.js'; import { misskeyApi } from '@/scripts/misskey-api.js'; import { MenuItem } from '@/types/menu.js'; @@ -27,7 +27,7 @@ function rename(file: Misskey.entities.DriveFile) { } function describe(file: Misskey.entities.DriveFile) { - os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), { default: file.comment ?? '', file: file, }, { @@ -37,7 +37,17 @@ function describe(file: Misskey.entities.DriveFile) { comment: caption.length === 0 ? null : caption, }); }, - }, 'closed'); + closed: () => dispose(), + }); +} + +function move(file: Misskey.entities.DriveFile) { + os.selectDriveFolder(false).then(folder => { + misskeyApi('drive/files/update', { + fileId: file.id, + folderId: folder[0] ? folder[0].id : null, + }); + }); } function toggleSensitive(file: Misskey.entities.DriveFile) { @@ -88,6 +98,10 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Miss icon: 'ti ti-forms', action: () => rename(file), }, { + text: i18n.ts.move, + icon: 'ti ti-folder-symlink', + action: () => move(file), + }, { text: file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive, icon: file.isSensitive ? 'ti ti-eye' : 'ti ti-eye-exclamation', action: () => toggleSensitive(file), diff --git a/packages/frontend/src/scripts/get-note-menu.ts b/packages/frontend/src/scripts/get-note-menu.ts index 433ddb1ff4..76a9400daa 100644 --- a/packages/frontend/src/scripts/get-note-menu.ts +++ b/packages/frontend/src/scripts/get-note-menu.ts @@ -11,7 +11,7 @@ import { i18n } from '@/i18n.js'; import { instance } from '@/instance.js'; import * as os from '@/os.js'; import { misskeyApi } from '@/scripts/misskey-api.js'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; import { url } from '@/config.js'; import { defaultStore, noteActions } from '@/store.js'; import { miLocalStorage } from '@/local-storage.js'; @@ -136,10 +136,12 @@ export function getAbuseNoteMenu(note: Misskey.entities.Note, text: string): Men let noteInfo = ''; if (note.url ?? note.uri != null) noteInfo = `Note: ${note.url ?? note.uri}\n`; noteInfo += `Local Note: ${localUrl}\n`; - os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), { user: note.user, initialComment: `${noteInfo}-----\n`, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); }, }; } @@ -564,7 +566,9 @@ export function getRenoteMenu(props: { const rect = el.getBoundingClientRect(); const x = rect.left + (el.offsetWidth / 2); const y = rect.top + (el.offsetHeight / 2); - os.popup(MkRippleEffect, { x, y }, {}, 'end'); + const { dispose } = os.popup(MkRippleEffect, { x, y }, { + end: () => dispose(), + }); } if (!props.mock) { @@ -600,7 +604,9 @@ export function getRenoteMenu(props: { const rect = el.getBoundingClientRect(); const x = rect.left + (el.offsetWidth / 2); const y = rect.top + (el.offsetHeight / 2); - os.popup(MkRippleEffect, { x, y }, {}, 'end'); + const { dispose } = os.popup(MkRippleEffect, { x, y }, { + end: () => dispose(), + }); } const configuredVisibility = defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility; @@ -649,7 +655,9 @@ export function getRenoteMenu(props: { const rect = el.getBoundingClientRect(); const x = rect.left + (el.offsetWidth / 2); const y = rect.top + (el.offsetHeight / 2); - os.popup(MkRippleEffect, { x, y }, {}, 'end'); + const { dispose } = os.popup(MkRippleEffect, { x, y }, { + end: () => dispose(), + }); } if (!props.mock) { diff --git a/packages/frontend/src/scripts/get-user-menu.ts b/packages/frontend/src/scripts/get-user-menu.ts index 3e031d232f..33f16a68aa 100644 --- a/packages/frontend/src/scripts/get-user-menu.ts +++ b/packages/frontend/src/scripts/get-user-menu.ts @@ -7,15 +7,17 @@ import { toUnicode } from 'punycode'; import { defineAsyncComponent, ref, watch } from 'vue'; import * as Misskey from 'misskey-js'; import { i18n } from '@/i18n.js'; -import copyToClipboard from '@/scripts/copy-to-clipboard.js'; +import { copyToClipboard } from '@/scripts/copy-to-clipboard.js'; import { host, url } from '@/config.js'; import * as os from '@/os.js'; import { misskeyApi } from '@/scripts/misskey-api.js'; import { defaultStore, userActions } from '@/store.js'; import { $i, iAmModerator } from '@/account.js'; +import { notesSearchAvailable, canSearchNonLocalNotes } from '@/scripts/check-permissions.js'; import { IRouter } from '@/nirax.js'; import { antennasCache, rolesCache, userListsCache } from '@/cache.js'; import { mainRouter } from '@/router/main.js'; +import { MenuItem } from '@/types/menu.js'; export function getUserMenu(user: Misskey.entities.UserDetailed, router: IRouter = mainRouter) { const meId = $i ? $i.id : null; @@ -81,15 +83,6 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: IRouter }); } - async function toggleWithReplies() { - os.apiWithDialog('following/update', { - userId: user.id, - withReplies: !user.withReplies, - }).then(() => { - user.withReplies = !user.withReplies; - }); - } - async function toggleNotify() { os.apiWithDialog('following/update', { userId: user.id, @@ -100,9 +93,11 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: IRouter } function reportAbuse() { - os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), { user: user, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); } async function getConfirmed(text: string): Promise<boolean> { @@ -152,13 +147,20 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: IRouter }); } - let menu = [{ + let menu: MenuItem[] = [{ icon: 'ti ti-at', text: i18n.ts.copyUsername, action: () => { copyToClipboard(`@${user.username}@${user.host ?? host}`); }, - }, ...(iAmModerator ? [{ + }, ...( notesSearchAvailable && (user.host == null || canSearchNonLocalNotes) ? [{ + icon: 'ti ti-search', + text: i18n.ts.searchThisUsersNotes, + action: () => { + router.push(`/search?username=${encodeURIComponent(user.username)}${user.host != null ? '&host=' + encodeURIComponent(user.host) : ''}`); + }, + }] : []) + , ...(iAmModerator ? [{ icon: 'ti ti-user-exclamation', text: i18n.ts.moderation, action: () => { @@ -184,7 +186,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: IRouter const canonical = user.host === null ? `@${user.username}` : `@${user.username}@${toUnicode(user.host)}`; copyToClipboard(`${url}/${canonical}`); }, - }, { + }, ...($i ? [{ icon: 'ti ti-mail', text: i18n.ts.sendMessage, action: () => { @@ -257,7 +259,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: IRouter }, })); }, - }] as any; + }] : [])] as any; if ($i && meId !== user.id) { if (iAmModerator) { @@ -304,15 +306,25 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: IRouter // フォローしたとしても user.isFollowing はリアルタイム更新されないので不便なため //if (user.isFollowing) { + const withRepliesRef = ref(user.withReplies); menu = menu.concat([{ - icon: user.withReplies ? 'ti ti-messages-off' : 'ti ti-messages', - text: user.withReplies ? i18n.ts.hideRepliesToOthersInTimeline : i18n.ts.showRepliesToOthersInTimeline, - action: toggleWithReplies, + type: 'switch', + icon: 'ti ti-messages', + text: i18n.ts.showRepliesToOthersInTimeline, + ref: withRepliesRef, }, { icon: user.notify === 'none' ? 'ti ti-bell' : 'ti ti-bell-off', text: user.notify === 'none' ? i18n.ts.notifyNotes : i18n.ts.unnotifyNotes, action: toggleNotify, }]); + watch(withRepliesRef, (withReplies) => { + misskeyApi('following/update', { + userId: user.id, + withReplies, + }).then(() => { + user.withReplies = withReplies; + }); + }); //} menu = menu.concat([{ type: 'divider' }, { diff --git a/packages/frontend/src/scripts/hotkey.ts b/packages/frontend/src/scripts/hotkey.ts index 0600bff893..04fb235694 100644 --- a/packages/frontend/src/scripts/hotkey.ts +++ b/packages/frontend/src/scripts/hotkey.ts @@ -2,94 +2,171 @@ * SPDX-FileCopyrightText: syuilo and misskey-project * SPDX-License-Identifier: AGPL-3.0-only */ +import { getHTMLElementOrNull } from "@/scripts/get-dom-node-or-null.js"; -import keyCode from './keycode.js'; +//#region types +export type Keymap = Record<string, CallbackFunction | CallbackObject>; -type Callback = (ev: KeyboardEvent) => void; +type CallbackFunction = (ev: KeyboardEvent) => unknown; -type Keymap = Record<string, Callback>; +type CallbackObject = { + callback: CallbackFunction; + allowRepeat?: boolean; +}; type Pattern = { which: string[]; - ctrl?: boolean; - shift?: boolean; - alt?: boolean; + ctrl: boolean; + alt: boolean; + shift: boolean; }; type Action = { patterns: Pattern[]; - callback: Callback; - allowRepeat: boolean; + callback: CallbackFunction; + options: Required<Omit<CallbackObject, 'callback'>>; }; +//#endregion -const parseKeymap = (keymap: Keymap) => Object.entries(keymap).map(([patterns, callback]): Action => { - const result = { - patterns: [], - callback, - allowRepeat: true, - } as Action; +//#region consts +const KEY_ALIASES = { + 'esc': 'Escape', + 'enter': 'Enter', + 'space': ' ', + 'up': 'ArrowUp', + 'down': 'ArrowDown', + 'left': 'ArrowLeft', + 'right': 'ArrowRight', + 'plus': ['+', ';'], +}; - if (patterns.match(/^\(.*\)$/) !== null) { - result.allowRepeat = false; - patterns = patterns.slice(1, -1); - } +const MODIFIER_KEYS = ['ctrl', 'alt', 'shift']; + +const IGNORE_ELEMENTS = ['input', 'textarea']; +//#endregion - result.patterns = patterns.split('|').map(part => { - const pattern = { - which: [], - ctrl: false, - alt: false, - shift: false, - } as Pattern; +//#region store +let latestHotkey: Pattern & { callback: CallbackFunction } | null = null; +//#endregion - const keys = part.trim().split('+').map(x => x.trim().toLowerCase()); - for (const key of keys) { - switch (key) { - case 'ctrl': pattern.ctrl = true; break; - case 'alt': pattern.alt = true; break; - case 'shift': pattern.shift = true; break; - default: pattern.which = keyCode(key).map(k => k.toLowerCase()); +//#region impl +export const makeHotkey = (keymap: Keymap) => { + const actions = parseKeymap(keymap); + return (ev: KeyboardEvent) => { + if ('pswp' in window && window.pswp != null) return; + if (document.activeElement != null) { + if (IGNORE_ELEMENTS.includes(document.activeElement.tagName.toLowerCase())) return; + if (getHTMLElementOrNull(document.activeElement)?.isContentEditable) return; + } + for (const action of actions) { + if (matchPatterns(ev, action)) { + ev.preventDefault(); + ev.stopPropagation(); + action.callback(ev); + storePattern(ev, action.callback); } } + }; +}; - return pattern; +const parseKeymap = (keymap: Keymap) => { + return Object.entries(keymap).map(([rawPatterns, rawCallback]) => { + const patterns = parsePatterns(rawPatterns); + const callback = parseCallback(rawCallback); + const options = parseOptions(rawCallback); + return { patterns, callback, options } as const satisfies Action; }); +}; - return result; -}); - -const ignoreElements = ['input', 'textarea']; +const parsePatterns = (rawPatterns: keyof Keymap) => { + return rawPatterns.split('|').map(part => { + const keys = part.split('+').map(trimLower); + const which = parseKeyCode(keys.findLast(x => !MODIFIER_KEYS.includes(x))); + const ctrl = keys.includes('ctrl'); + const alt = keys.includes('alt'); + const shift = keys.includes('shift'); + return { which, ctrl, alt, shift } as const satisfies Pattern; + }); +}; -function match(ev: KeyboardEvent, patterns: Action['patterns']): boolean { - const key = ev.key.toLowerCase(); - return patterns.some(pattern => pattern.which.includes(key) && - pattern.ctrl === ev.ctrlKey && - pattern.shift === ev.shiftKey && - pattern.alt === ev.altKey && - !ev.metaKey, - ); -} +const parseCallback = (rawCallback: Keymap[keyof Keymap]) => { + if (typeof rawCallback === 'object') { + return rawCallback.callback; + } + return rawCallback; +}; -export const makeHotkey = (keymap: Keymap) => { - const actions = parseKeymap(keymap); +const parseOptions = (rawCallback: Keymap[keyof Keymap]) => { + const defaultOptions = { + allowRepeat: false, + } as const satisfies Action['options']; + if (typeof rawCallback === 'object') { + const { callback, ...rawOptions } = rawCallback; + const options = { ...defaultOptions, ...rawOptions }; + return { ...options } as const satisfies Action['options']; + } + return { ...defaultOptions } as const satisfies Action['options']; +}; - return (ev: KeyboardEvent) => { - if (document.activeElement) { - if (ignoreElements.some(el => document.activeElement!.matches(el))) return; - if (document.activeElement.attributes['contenteditable']) return; +const matchPatterns = (ev: KeyboardEvent, action: Action) => { + const { patterns, options, callback } = action; + if (ev.repeat && !options.allowRepeat) return false; + const key = ev.key.toLowerCase(); + return patterns.some(({ which, ctrl, shift, alt }) => { + if ( + options.allowRepeat === false && + latestHotkey != null && + latestHotkey.which.includes(key) && + latestHotkey.ctrl === ctrl && + latestHotkey.alt === alt && + latestHotkey.shift === shift && + latestHotkey.callback === callback + ) { + return false; } + if (!which.includes(key)) return false; + if (ctrl !== (ev.ctrlKey || ev.metaKey)) return false; + if (alt !== ev.altKey) return false; + if (shift !== ev.shiftKey) return false; + return true; + }); +}; - for (const action of actions) { - const matched = match(ev, action.patterns); +let lastHotKeyStoreTimer: number | null = null; - if (matched) { - if (!action.allowRepeat && ev.repeat) return; +const storePattern = (ev: KeyboardEvent, callback: CallbackFunction) => { + if (lastHotKeyStoreTimer != null) { + clearTimeout(lastHotKeyStoreTimer); + } - ev.preventDefault(); - ev.stopPropagation(); - action.callback(ev); - break; - } - } + latestHotkey = { + which: [ev.key.toLowerCase()], + ctrl: ev.ctrlKey || ev.metaKey, + alt: ev.altKey, + shift: ev.shiftKey, + callback, }; + + lastHotKeyStoreTimer = window.setTimeout(() => { + latestHotkey = null; + }, 500); }; + +const parseKeyCode = (input?: string | null) => { + if (input == null) return []; + const raw = getValueByKey(KEY_ALIASES, input); + if (raw == null) return [input]; + if (typeof raw === 'string') return [trimLower(raw)]; + return raw.map(trimLower); +}; + +const getValueByKey = < + T extends Record<keyof any, unknown>, + K extends keyof T | keyof any, + R extends K extends keyof T ? T[K] : T[keyof T] | undefined, +>(obj: T, key: K) => { + return obj[key] as R; +}; + +const trimLower = (str: string) => str.trim().toLowerCase(); +//#endregion diff --git a/packages/frontend/src/scripts/install-plugin.ts b/packages/frontend/src/scripts/install-plugin.ts index 15b0cedc79..72ff8bd5ff 100644 --- a/packages/frontend/src/scripts/install-plugin.ts +++ b/packages/frontend/src/scripts/install-plugin.ts @@ -107,7 +107,7 @@ export async function installPlugin(code: string, meta?: AiScriptPluginMeta) { } const token = realMeta.permissions == null || realMeta.permissions.length === 0 ? null : await new Promise((res, rej) => { - os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), { title: i18n.ts.tokenRequested, information: i18n.ts.pluginTokenRequestedDescription, initialName: realMeta.name, @@ -122,7 +122,8 @@ export async function installPlugin(code: string, meta?: AiScriptPluginMeta) { }); res(token); }, - }, 'closed'); + closed: () => dispose(), + }); }); savePlugin({ diff --git a/packages/frontend/src/scripts/keycode.ts b/packages/frontend/src/scripts/keycode.ts deleted file mode 100644 index 7ffceafada..0000000000 --- a/packages/frontend/src/scripts/keycode.ts +++ /dev/null @@ -1,24 +0,0 @@ -/* - * SPDX-FileCopyrightText: syuilo and misskey-project - * SPDX-License-Identifier: AGPL-3.0-only - */ - -export default (input: string): string[] => { - if (Object.keys(aliases).some(a => a.toLowerCase() === input.toLowerCase())) { - const codes = aliases[input]; - return Array.isArray(codes) ? codes : [codes]; - } else { - return [input]; - } -}; - -export const aliases = { - 'esc': 'Escape', - 'enter': ['Enter', 'NumpadEnter'], - 'space': [' ', 'Spacebar'], - 'up': 'ArrowUp', - 'down': 'ArrowDown', - 'left': 'ArrowLeft', - 'right': 'ArrowRight', - 'plus': ['NumpadAdd', 'Semicolon'], -}; diff --git a/packages/frontend/src/scripts/lookup.ts b/packages/frontend/src/scripts/lookup.ts index db3a96b15c..e20b23f166 100644 --- a/packages/frontend/src/scripts/lookup.ts +++ b/packages/frontend/src/scripts/lookup.ts @@ -16,7 +16,7 @@ export async function lookup(router?: Router) { title: i18n.ts.lookup, }); const query = temp ? temp.trim() : ''; - if (canceled) return; + if (canceled || query.length <= 1) return; if (query.startsWith('@') && !query.includes(' ')) { _router.push(`/${query}`); diff --git a/packages/frontend/src/scripts/merge.ts b/packages/frontend/src/scripts/merge.ts index 4e39a0fa06..9794a300da 100644 --- a/packages/frontend/src/scripts/merge.ts +++ b/packages/frontend/src/scripts/merge.ts @@ -6,7 +6,7 @@ import { deepClone } from './clone.js'; import type { Cloneable } from './clone.js'; -type DeepPartial<T> = { +export type DeepPartial<T> = { [P in keyof T]?: T[P] extends Record<string | number | symbol, unknown> ? DeepPartial<T[P]> : T[P]; }; diff --git a/packages/frontend/src/scripts/mfm-function-picker.ts b/packages/frontend/src/scripts/mfm-function-picker.ts index 36de146c27..63acf9d3de 100644 --- a/packages/frontend/src/scripts/mfm-function-picker.ts +++ b/packages/frontend/src/scripts/mfm-function-picker.ts @@ -7,29 +7,24 @@ import { Ref, nextTick } from 'vue'; import * as os from '@/os.js'; import { i18n } from '@/i18n.js'; import { MFM_TAGS } from '@/const.js'; +import type { MenuItem } from '@/types/menu.js'; /** * MFMの装飾のリストを表示する */ -export function mfmFunctionPicker(src: any, textArea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref<string>) { - return new Promise((res, rej) => { - os.popupMenu([{ - text: i18n.ts.addMfmFunction, - type: 'label', - }, ...getFunctionList(textArea, textRef)], src); - }); +export function mfmFunctionPicker(src: HTMLElement | EventTarget | null, textArea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref<string>) { + os.popupMenu([{ + text: i18n.ts.addMfmFunction, + type: 'label', + }, ...getFunctionList(textArea, textRef)], src); } -function getFunctionList(textArea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref<string>) : object[] { - const ret: object[] = []; - MFM_TAGS.forEach(tag => { - ret.push({ - text: tag, - icon: 'ph-brackets-curly ph-bold ph-lg', - action: () => add(textArea, textRef, tag), - }); - }); - return ret; +function getFunctionList(textArea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref<string>): MenuItem[] { + return MFM_TAGS.map(tag => ({ + text: tag, + icon: 'ph-brackets-curly ph-bold ph-lg', + action: () => add(textArea, textRef, tag), + })); } function add(textArea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref<string>, type: string) { diff --git a/packages/frontend/src/scripts/player-url-transform.ts b/packages/frontend/src/scripts/player-url-transform.ts new file mode 100644 index 0000000000..53b2a9e441 --- /dev/null +++ b/packages/frontend/src/scripts/player-url-transform.ts @@ -0,0 +1,26 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ +import { hostname } from '@/config.js'; + +export function transformPlayerUrl(url: string): string { + const urlObj = new URL(url); + if (!['https:', 'http:'].includes(urlObj.protocol)) throw new Error('Invalid protocol'); + + const urlParams = new URLSearchParams(urlObj.search); + + if (urlObj.hostname === 'player.twitch.tv') { + // TwitchはCSPの制約あり + // https://dev.twitch.tv/docs/embed/video-and-clips/ + urlParams.set('parent', hostname); + urlParams.set('allowfullscreen', ''); + urlParams.set('autoplay', 'true'); + } else { + urlParams.set('autoplay', '1'); + urlParams.set('auto_play', '1'); + } + urlObj.search = urlParams.toString(); + + return urlObj.toString(); +} diff --git a/packages/frontend/src/scripts/please-login.ts b/packages/frontend/src/scripts/please-login.ts index 9e51272791..18f05bc7f4 100644 --- a/packages/frontend/src/scripts/please-login.ts +++ b/packages/frontend/src/scripts/please-login.ts @@ -8,19 +8,57 @@ import { $i } from '@/account.js'; import { i18n } from '@/i18n.js'; import { popup } from '@/os.js'; -export function pleaseLogin(path?: string) { +export type OpenOnRemoteOptions = { + /** + * 外部のMisskey Webで特定のパスを開く + */ + type: 'web'; + + /** + * 内部パス（例: `/settings`） + */ + path: string; +} | { + /** + * 外部のMisskey Webで照会する + */ + type: 'lookup'; + + /** + * 照会したいエンティティのURL + * + * （例: `https://misskey.example.com/notes/abcdexxxxyz`） + */ + url: string; +} | { + /** + * 外部のMisskeyでノートする + */ + type: 'share'; + + /** + * `/share` ページに渡すクエリストリング + * + * @see https://go.misskey-hub.net/spec/share/ + */ + params: Record<string, string>; +}; + +export function pleaseLogin(path?: string, openOnRemote?: OpenOnRemoteOptions) { if ($i) return; - popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), { + const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), { autoSet: true, - message: i18n.ts.signinRequired, + message: openOnRemote ? i18n.ts.signinOrContinueOnRemote : i18n.ts.signinRequired, + openOnRemote, }, { cancelled: () => { if (path) { window.location.href = path; } }, - }, 'closed'); + closed: () => dispose(), + }); throw new Error('signin required'); } diff --git a/packages/frontend/src/scripts/scroll.ts b/packages/frontend/src/scripts/scroll.ts index 8edb6fca05..f0274034b5 100644 --- a/packages/frontend/src/scripts/scroll.ts +++ b/packages/frontend/src/scripts/scroll.ts @@ -23,6 +23,14 @@ export function getStickyTop(el: HTMLElement, container: HTMLElement | null = nu return getStickyTop(el.parentElement, container, newTop); } +export function getStickyBottom(el: HTMLElement, container: HTMLElement | null = null, bottom = 0) { + if (!el.parentElement) return bottom; + const data = el.dataset.stickyContainerFooterHeight; + const newBottom = data ? Number(data) + bottom : bottom; + if (el === container) return newBottom; + return getStickyBottom(el.parentElement, container, newBottom); +} + export function getScrollPosition(el: HTMLElement | null): number { const container = getScrollContainer(el); return container == null ? window.scrollY : container.scrollTop; diff --git a/packages/frontend/src/scripts/sound.ts b/packages/frontend/src/scripts/sound.ts index fcd59510df..05f82fce7d 100644 --- a/packages/frontend/src/scripts/sound.ts +++ b/packages/frontend/src/scripts/sound.ts @@ -74,8 +74,6 @@ export const soundsTypes = [ export const operationTypes = [ 'noteMy', 'note', - 'antenna', - 'channel', 'notification', 'reaction', ] as const; @@ -126,10 +124,33 @@ export async function loadAudio(url: string, options?: { useCache?: boolean; }) */ export function playMisskeySfx(operationType: OperationType) { const sound = defaultStore.state[`sound_${operationType}`]; - if (sound.type == null || !canPlay || ('userActivation' in navigator && !navigator.userActivation.hasBeenActive)) return; + playMisskeySfxFile(sound).then((succeed) => { + if (!succeed && sound.type === '_driveFile_') { + // ドライブファイルが存在しない場合はデフォルトのサウンドを再生する + const soundName = defaultStore.def[`sound_${operationType}`].default.type as Exclude<SoundType, '_driveFile_'>; + if (_DEV_) console.log(`Failed to play sound: ${sound.fileUrl}, so play default sound: ${soundName}`); + playMisskeySfxFileInternal({ + type: soundName, + volume: sound.volume, + }); + } + }); +} + +/** + * サウンド設定形式で指定された音声を再生する + * @param soundStore サウンド設定 + */ +export async function playMisskeySfxFile(soundStore: SoundStore): Promise<boolean> { + // 連続して再生しない + if (!canPlay) return false; + // ユーザーアクティベーションが必要な場合はそれがない場合は再生しない + if ('userActivation' in navigator && !navigator.userActivation.hasBeenActive) return false; + // サウンドがない場合は再生しない + if (soundStore.type === null || soundStore.type === '_driveFile_' && !soundStore.fileUrl) return false; canPlay = false; - playMisskeySfxFile(sound).finally(() => { + return await playMisskeySfxFileInternal(soundStore).finally(() => { // ごく短時間に音が重複しないように setTimeout(() => { canPlay = true; @@ -137,23 +158,22 @@ export function playMisskeySfx(operationType: OperationType) { }); } -/** - * サウンド設定形式で指定された音声を再生する - * @param soundStore サウンド設定 - */ -export async function playMisskeySfxFile(soundStore: SoundStore) { +async function playMisskeySfxFileInternal(soundStore: SoundStore): Promise<boolean> { if (soundStore.type === null || (soundStore.type === '_driveFile_' && !soundStore.fileUrl)) { - return; + return false; } const masterVolume = defaultStore.state.sound_masterVolume; if (isMute() || masterVolume === 0 || soundStore.volume === 0) { - return; + return true; // ミュート時は成功として扱う } const url = soundStore.type === '_driveFile_' ? soundStore.fileUrl : `/client-assets/sounds/${soundStore.type}.mp3`; - const buffer = await loadAudio(url); - if (!buffer) return; + const buffer = await loadAudio(url).catch(() => { + return undefined; + }); + if (!buffer) return false; const volume = soundStore.volume * masterVolume; createSourceNode(buffer, { volume }).soundSource.start(); + return true; } export async function playUrl(url: string, opts: { diff --git a/packages/frontend/src/scripts/url.ts b/packages/frontend/src/scripts/url.ts index e3072b3b7d..5a8265af9e 100644 --- a/packages/frontend/src/scripts/url.ts +++ b/packages/frontend/src/scripts/url.ts @@ -21,3 +21,8 @@ export function query(obj: Record<string, any>): string { export function appendQuery(url: string, query: string): string { return `${url}${/\?/.test(url) ? url.endsWith('?') ? '' : '&' : '?'}${query}`; } + +export function extractDomain(url: string) { + const match = url.match(/^(?:https?:)?(?:\/\/)?(?:[^@\n]+@)?([^:\/\n]+)/im); + return match ? match[1] : null; +} diff --git a/packages/frontend/src/scripts/use-chart-tooltip.ts b/packages/frontend/src/scripts/use-chart-tooltip.ts index bed221a622..bba64fc6ee 100644 --- a/packages/frontend/src/scripts/use-chart-tooltip.ts +++ b/packages/frontend/src/scripts/use-chart-tooltip.ts @@ -17,20 +17,16 @@ export function useChartTooltip(opts: { position: 'top' | 'middle' } = { positio borderColor: string; text: string; }[] | null>(null); - let disposeTooltipComponent; - - os.popup(MkChartTooltip, { + const { dispose: disposeTooltipComponent } = os.popup(MkChartTooltip, { showing: tooltipShowing, x: tooltipX, y: tooltipY, title: tooltipTitle, series: tooltipSeries, - }, {}).then(({ dispose }) => { - disposeTooltipComponent = dispose; - }); + }, {}); onUnmounted(() => { - if (disposeTooltipComponent) disposeTooltipComponent(); + disposeTooltipComponent(); }); onDeactivated(() => { diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index 13f544e588..dda320dbac 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -520,6 +520,14 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: true, }, + confirmWhenRevealingSensitiveMedia: { + where: 'device', + default: false, + }, + contextMenu: { + where: 'device', + default: 'app' as 'app' | 'appWithShift' | 'native', + }, sound_masterVolume: { where: 'device', @@ -545,14 +553,6 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: { type: 'syuilo/n-ea', volume: 1 } as SoundStore, }, - sound_antenna: { - where: 'device', - default: { type: 'syuilo/triple', volume: 1 } as SoundStore, - }, - sound_channel: { - where: 'device', - default: { type: 'syuilo/square-pico', volume: 1 } as SoundStore, - }, sound_reaction: { where: 'device', default: { type: 'syuilo/bubble2', volume: 1 } as SoundStore, diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss index 37d1a3c557..62ba7a08d5 100644 --- a/packages/frontend/src/style.scss +++ b/packages/frontend/src/style.scss @@ -143,6 +143,10 @@ a { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; + &:focus-visible { + outline-offset: 2px; + } + &:hover { text-decoration: underline; } @@ -173,12 +177,21 @@ rt { white-space: initial; } +:focus-visible { + outline: var(--focus) solid 2px; + outline-offset: -2px; + + &:hover { + text-decoration: none; + } +} + .ph-bold { width: 1.28em; vertical-align: -12%; line-height: 1em; - &:before { + &::before { font-size: 128%; } } @@ -264,10 +277,6 @@ rt { text-decoration: none; } - &:focus-visible { - outline: none; - } - &:disabled { opacity: 0.5; cursor: default; @@ -304,13 +313,17 @@ rt { ._help { color: var(--accent); - cursor: help + cursor: help; } ._textButton { @extend ._button; color: var(--accent); + &:focus-visible { + outline-offset: 2px; + } + &:not(:disabled):hover { text-decoration: underline; } diff --git a/packages/frontend/src/timelines.ts b/packages/frontend/src/timelines.ts new file mode 100644 index 0000000000..5080ef4b96 --- /dev/null +++ b/packages/frontend/src/timelines.ts @@ -0,0 +1,61 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { $i } from '@/account.js'; +import { instance } from '@/instance.js'; + +export const basicTimelineTypes = [ + 'home', + 'local', + 'social', + 'bubble', + 'global', +] as const; + +export type BasicTimelineType = typeof basicTimelineTypes[number]; + +export function isBasicTimeline(timeline: string): timeline is BasicTimelineType { + return basicTimelineTypes.includes(timeline as BasicTimelineType); +} + +export function basicTimelineIconClass(timeline: BasicTimelineType): string { + switch (timeline) { + case 'home': + return 'ti ti-home'; + case 'local': + return 'ti ti-planet'; + case 'social': + return 'ti ti-universe'; + case 'bubble': + return 'ph-drop ph-bold ph-lg'; + case 'global': + return 'ti ti-whirl'; + } +} + +export function isAvailableBasicTimeline(timeline: BasicTimelineType | undefined | null): boolean { + switch (timeline) { + case 'home': + return $i != null; + case 'local': + return ($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable); + case 'social': + return $i != null && $i.policies.ltlAvailable; + case 'bubble': + return ($i == null && instance.policies.btlAvailable) || ($i != null && $i.policies.btlAvailable); + case 'global': + return ($i == null && instance.policies.gtlAvailable) || ($i != null && $i.policies.gtlAvailable); + default: + return false; + } +} + +export function availableBasicTimelines(): BasicTimelineType[] { + return basicTimelineTypes.filter(isAvailableBasicTimeline); +} + +export function hasWithReplies(timeline: BasicTimelineType | undefined | null): boolean { + return timeline === 'local' || timeline === 'social'; +} diff --git a/packages/frontend/src/ui/_common_/common.ts b/packages/frontend/src/ui/_common_/common.ts index c1f82f141f..0dcbf717c6 100644 --- a/packages/frontend/src/ui/_common_/common.ts +++ b/packages/frontend/src/ui/_common_/common.ts @@ -85,40 +85,42 @@ export function openInstanceMenu(ev: MouseEvent) { icon: 'ti ti-help-circle', to: '/contact', }, (instance.impressumUrl) ? { + type: 'a', text: i18n.ts.impressum, icon: 'ti ti-file-invoice', - action: () => { - window.open(instance.impressumUrl, '_blank', 'noopener'); - }, + href: instance.impressumUrl, + target: '_blank', } : undefined, (instance.tosUrl) ? { + type: 'a', text: i18n.ts.termsOfService, icon: 'ti ti-notebook', - action: () => { - window.open(instance.tosUrl, '_blank', 'noopener'); - }, + href: instance.tosUrl, + target: '_blank', } : undefined, (instance.privacyPolicyUrl) ? { + type: 'a', text: i18n.ts.privacyPolicy, icon: 'ti ti-shield-lock', - action: () => { - window.open(instance.privacyPolicyUrl, '_blank', 'noopener'); - }, + href: instance.privacyPolicyUrl, + target: '_blank', } : undefined, (instance.donationUrl) ? { + type: 'a', text: i18n.ts.donation, icon: 'ph-hand-coins ph-bold ph-lg', - action: () => { - window.open(instance.donationUrl, '_blank', 'noopener'); - }, - } : undefined, (!instance.impressumUrl && !instance.tosUrl && !instance.privacyPolicyUrl && !instance.donationUrl) ? undefined : { type: 'divider' }, { + href: instance.donationUrl, + target: '_blank', + }: undefined, (!instance.impressumUrl && !instance.tosUrl && !instance.privacyPolicyUrl && !instance.donationUrl) ? undefined : { type: 'divider' }, { + type: 'a', text: i18n.ts.document, icon: 'ti ti-bulb', - action: () => { - window.open('https://misskey-hub.net/docs/for-users/', '_blank', 'noopener'); - }, + href: 'https://misskey-hub.net/docs/for-users/', + target: '_blank', }, ($i) ? { text: i18n.ts._initialTutorial.launchTutorial, icon: 'ti ti-presentation', action: () => { - os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), {}, {}, 'closed'); + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), {}, { + closed: () => dispose(), + }); }, } : undefined, { type: 'link', diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue index 65b27a0cc2..442b6479dd 100644 --- a/packages/frontend/src/ui/_common_/common.vue +++ b/packages/frontend/src/ui/_common_/common.vue @@ -232,7 +232,7 @@ if ($i) { right: 15px; pointer-events: none; - &:before { + &::before { content: ""; display: block; width: 18px; diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue index 4439cb11aa..a3f9d6cf2c 100644 --- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue +++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue @@ -74,8 +74,9 @@ function openAccountMenu(ev: MouseEvent) { } function more() { - os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, { - }, 'closed'); + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, { + closed: () => dispose(), + }); } </script> @@ -138,7 +139,7 @@ function more() { font-weight: bold; text-align: left; - &:before { + &::before { content: ""; display: block; width: calc(100% - 38px); @@ -154,7 +155,7 @@ function more() { } &:hover, &.active { - &:before { + &::before { background: var(--accentLighten); } } @@ -225,7 +226,7 @@ function more() { } &:hover, &.active { - &:before { + &::before { content: ""; display: block; width: calc(100% - 24px); diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue index 99761a7052..1f1fd37def 100644 --- a/packages/frontend/src/ui/_common_/navbar.vue +++ b/packages/frontend/src/ui/_common_/navbar.vue @@ -99,10 +99,11 @@ function openAccountMenu(ev: MouseEvent) { } function more(ev: MouseEvent) { - os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), { src: ev.currentTarget ?? ev.target, }, { - }, 'closed'); + closed: () => dispose(), + }); } </script> @@ -165,6 +166,15 @@ function more(ev: MouseEvent) { display: block; text-align: center; width: 100%; + + &:focus-visible { + outline: none; + + > .instanceIcon { + outline: 2px solid var(--focus); + outline-offset: 2px; + } + } } .instanceIcon { @@ -191,7 +201,7 @@ function more(ev: MouseEvent) { font-weight: bold; text-align: left; - &:before { + &::before { content: ""; display: block; width: calc(100% - 38px); @@ -206,8 +216,17 @@ function more(ev: MouseEvent) { background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB)); } + &:focus-visible { + outline: none; + + &::before { + outline: 2px solid var(--fgOnAccent); + outline-offset: -4px; + } + } + &:hover, &.active { - &:before { + &::before { background: var(--accentLighten); } } @@ -233,6 +252,14 @@ function more(ev: MouseEvent) { text-align: left; box-sizing: border-box; overflow: clip; + + &:focus-visible { + outline: none; + + > .avatar { + box-shadow: 0 0 0 4px var(--focus); + } + } } .avatar { @@ -281,10 +308,19 @@ function more(ev: MouseEvent) { color: var(--navActive); } - &:hover, &.active { + &:focus-visible { + outline: none; + + &::before { + outline: 2px solid var(--focus); + outline-offset: -2px; + } + } + + &:hover, &.active, &:focus { color: var(--accent); - &:before { + &::before { content: ""; display: block; width: calc(100% - 34px); @@ -351,6 +387,15 @@ function more(ev: MouseEvent) { display: block; text-align: center; width: 100%; + + &:focus-visible { + outline: none; + + > .instanceIcon { + outline: 2px solid var(--focus); + outline-offset: 2px; + } + } } .instanceIcon { @@ -375,7 +420,7 @@ function more(ev: MouseEvent) { height: 52px; text-align: center; - &:before { + &::before { content: ""; display: block; position: absolute; @@ -390,8 +435,17 @@ function more(ev: MouseEvent) { background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB)); } + &:focus-visible { + outline: none; + + &::before { + outline: 2px solid var(--fgOnAccent); + outline-offset: -4px; + } + } + &:hover, &.active { - &:before { + &::before { background: var(--accentLighten); } } @@ -412,6 +466,14 @@ function more(ev: MouseEvent) { padding: 20px 0; width: 100%; overflow: clip; + + &:focus-visible { + outline: none; + + > .avatar { + box-shadow: 0 0 0 4px var(--focus); + } + } } .avatar { @@ -441,11 +503,20 @@ function more(ev: MouseEvent) { width: 100%; text-align: center; - &:hover, &.active { + &:focus-visible { + outline: none; + + &::before { + outline: 2px solid var(--focus); + outline-offset: -2px; + } + } + + &:hover, &.active, &:focus { text-decoration: none; color: var(--accent); - &:before { + &::before { content: ""; display: block; height: 100%; diff --git a/packages/frontend/src/ui/classic.header.vue b/packages/frontend/src/ui/classic.header.vue index ee5176b558..c03afd6cd6 100644 --- a/packages/frontend/src/ui/classic.header.vue +++ b/packages/frontend/src/ui/classic.header.vue @@ -71,11 +71,12 @@ const otherNavItemIndicated = computed<boolean>(() => { }); function more(ev: MouseEvent) { - os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), { src: ev.currentTarget ?? ev.target, anchor: { x: 'center', y: 'bottom' }, }, { - }, 'closed'); + closed: () => dispose(), + }); } function openAccountMenu(ev: MouseEvent) { diff --git a/packages/frontend/src/ui/classic.sidebar.vue b/packages/frontend/src/ui/classic.sidebar.vue index baec0dae00..d49df8e8ac 100644 --- a/packages/frontend/src/ui/classic.sidebar.vue +++ b/packages/frontend/src/ui/classic.sidebar.vue @@ -86,9 +86,11 @@ function calcViewState() { } function more(ev: MouseEvent) { - os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), { src: ev.currentTarget ?? ev.target, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); } function openAccountMenu(ev: MouseEvent) { diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue index 0690915799..44f1af5f8f 100644 --- a/packages/frontend/src/ui/deck.vue +++ b/packages/frontend/src/ui/deck.vue @@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only :ref="id" :key="id" :class="$style.column" - :column="columns.find(c => c.id === id)" + :column="columns.find(c => c.id === id)!" :isStacked="ids.length > 1" @headerWheel="onWheel" /> @@ -95,7 +95,8 @@ SPDX-License-Identifier: AGPL-3.0-only import { computed, defineAsyncComponent, ref, watch, shallowRef } from 'vue'; import { v4 as uuid } from 'uuid'; import XCommon from './_common_/common.vue'; -import { deckStore, addColumn as addColumnToStore, loadDeck, getProfiles, deleteProfile as deleteProfile_ } from './deck/deck-store.js'; +import { deckStore, columnTypes, addColumn as addColumnToStore, loadDeck, getProfiles, deleteProfile as deleteProfile_ } from './deck/deck-store.js'; +import type { ColumnType } from './deck/deck-store.js'; import XSidebar from '@/ui/_common_/navbar.vue'; import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue'; import MkButton from '@/components/MkButton.vue'; @@ -152,10 +153,12 @@ window.addEventListener('resize', () => { const snapScroll = deviceKind === 'smartphone' || deviceKind === 'tablet'; const drawerMenuShowing = ref(false); +/* const route = 'TODO'; watch(route, () => { drawerMenuShowing.value = false; }); +*/ const columns = deckStore.reactiveState.columns; const layout = deckStore.reactiveState.layout; @@ -174,32 +177,20 @@ function showSettings() { const columnsEl = shallowRef<HTMLElement>(); const addColumn = async (ev) => { - const columns = [ - 'main', - 'widgets', - 'notifications', - 'tl', - 'antenna', - 'list', - 'channel', - 'mentions', - 'direct', - 'roleTimeline', - ]; - const { canceled, result: column } = await os.select({ title: i18n.ts._deck.addColumn, - items: columns.map(column => ({ + items: columnTypes.map(column => ({ value: column, text: i18n.ts._deck._columns[column], })), }); - if (canceled) return; + if (canceled || column == null) return; addColumnToStore({ type: column, id: uuid(), name: i18n.ts._deck._columns[column], width: 330, + soundSetting: { type: null, volume: 1 }, }); }; @@ -211,7 +202,7 @@ const onContextmenu = (ev) => { }; function onWheel(ev: WheelEvent) { - if (ev.deltaX === 0) { + if (ev.deltaX === 0 && columnsEl.value != null) { columnsEl.value.scrollLeft += ev.deltaY; } } @@ -242,7 +233,7 @@ function changeProfile(ev: MouseEvent) { title: i18n.ts._deck.profile, minLength: 1, }); - if (canceled) return; + if (canceled || name == null) return; deckStore.set('profile', name); unisonReload(); diff --git a/packages/frontend/src/ui/deck/antenna-column.vue b/packages/frontend/src/ui/deck/antenna-column.vue index c3dc1e4fce..987bd4db55 100644 --- a/packages/frontend/src/ui/deck/antenna-column.vue +++ b/packages/frontend/src/ui/deck/antenna-column.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="() => timeline.reloadTimeline()"> +<XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="async () => { await timeline?.reloadTimeline() }"> <template #header> <i class="ti ti-antenna"></i><span style="margin-left: 8px;">{{ column.name }}</span> </template> @@ -14,7 +14,8 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { onMounted, ref, shallowRef, watch } from 'vue'; +import { onMounted, ref, shallowRef, watch, defineAsyncComponent } from 'vue'; +import type { entities as MisskeyEntities } from 'misskey-js'; import XColumn from './column.vue'; import { updateColumn, Column } from './deck-store.js'; import MkTimeline from '@/components/MkTimeline.vue'; @@ -22,6 +23,7 @@ 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 { antennasCache } from '@/cache.js'; import { SoundStore } from '@/store.js'; import { soundSettingsButton } from '@/ui/deck/tl-note-notification.js'; import * as sound from '@/scripts/sound.js'; @@ -46,14 +48,36 @@ watch(soundSetting, v => { async function setAntenna() { const antennas = await misskeyApi('antennas/list'); - const { canceled, result: antenna } = await os.select({ + const { canceled, result: antenna } = await os.select<MisskeyEntities.Antenna | '_CREATE_'>({ title: i18n.ts.selectAntenna, - items: antennas.map(x => ({ - value: x, text: x.name, - })), + items: [ + { value: '_CREATE_', text: i18n.ts.createNew }, + (antennas.length > 0 ? { + sectionTitle: i18n.ts.createdAntennas, + items: antennas.map(x => ({ + value: x, text: x.name, + })), + } : undefined), + ], default: props.column.antennaId, }); - if (canceled) return; + if (canceled || antenna == null) return; + + if (antenna === '_CREATE_') { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkAntennaEditorDialog.vue')), {}, { + created: (newAntenna: MisskeyEntities.Antenna) => { + antennasCache.delete(); + updateColumn(props.column.id, { + antennaId: newAntenna.id, + }); + }, + closed: () => { + dispose(); + }, + }); + return; + } + updateColumn(props.column.id, { antennaId: antenna.id, }); diff --git a/packages/frontend/src/ui/deck/channel-column.vue b/packages/frontend/src/ui/deck/channel-column.vue index 2d2c1b4332..518df7a6fc 100644 --- a/packages/frontend/src/ui/deck/channel-column.vue +++ b/packages/frontend/src/ui/deck/channel-column.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="() => timeline.reloadTimeline()"> +<XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="async () => { await timeline?.reloadTimeline() }"> <template #header> <i class="ti ti-device-tv"></i><span style="margin-left: 8px;">{{ column.name }}</span> </template> @@ -83,6 +83,7 @@ async function setChannel() { } async function post() { + if (props.column.channelId == null) return; if (!channel.value || channel.value.id !== props.column.channelId) { channel.value = await misskeyApi('channels/show', { channelId: props.column.channelId, diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue index 6f5d4dc9b5..5fed70fc90 100644 --- a/packages/frontend/src/ui/deck/column.vue +++ b/packages/frontend/src/ui/deck/column.vue @@ -271,7 +271,7 @@ function onDrop(ev) { border-radius: var(--radius); &.draghover { - &:after { + &::after { content: ""; display: block; position: absolute; @@ -285,7 +285,7 @@ function onDrop(ev) { } &.dragging { - &:after { + &::after { content: ""; display: block; position: absolute; diff --git a/packages/frontend/src/ui/deck/deck-store.ts b/packages/frontend/src/ui/deck/deck-store.ts index 1a4f7c5e17..eb587554b9 100644 --- a/packages/frontend/src/ui/deck/deck-store.ts +++ b/packages/frontend/src/ui/deck/deck-store.ts @@ -6,6 +6,7 @@ import { throttle } from 'throttle-debounce'; import { markRaw } from 'vue'; import { notificationTypes } from 'misskey-js'; +import type { BasicTimelineType } from '@/timelines.js'; import { Storage } from '@/pizzax.js'; import { misskeyApi } from '@/scripts/misskey-api.js'; import { deepClone } from '@/scripts/clone.js'; @@ -17,9 +18,24 @@ type ColumnWidget = { data: Record<string, any>; }; +export const columnTypes = [ + 'main', + 'widgets', + 'notifications', + 'tl', + 'antenna', + 'list', + 'channel', + 'mentions', + 'direct', + 'roleTimeline', +] as const; + +export type ColumnType = typeof columnTypes[number]; + export type Column = { id: string; - type: 'main' | 'widgets' | 'notifications' | 'tl' | 'antenna' | 'channel' | 'list' | 'mentions' | 'direct'; + type: ColumnType; name: string | null; width: number; widgets?: ColumnWidget[]; @@ -30,7 +46,7 @@ export type Column = { channelId?: string; roleId?: string; excludeTypes?: typeof notificationTypes[number][]; - tl?: 'home' | 'local' | 'social' | 'global' | 'bubble'; + tl?: BasicTimelineType; withRenotes?: boolean; withReplies?: boolean; onlyFiles?: boolean; @@ -265,7 +281,7 @@ export function removeColumnWidget(id: Column['id'], widget: ColumnWidget) { const columns = deepClone(deckStore.state.columns); const columnIndex = deckStore.state.columns.findIndex(c => c.id === id); const column = deepClone(deckStore.state.columns[columnIndex]); - if (column == null) return; + if (column == null || column.widgets == null) return; column.widgets = column.widgets.filter(w => w.id !== widget.id); columns[columnIndex] = column; deckStore.set('columns', columns); @@ -287,7 +303,7 @@ export function updateColumnWidget(id: Column['id'], widgetId: string, widgetDat const columns = deepClone(deckStore.state.columns); const columnIndex = deckStore.state.columns.findIndex(c => c.id === id); const column = deepClone(deckStore.state.columns[columnIndex]); - if (column == null) return; + if (column == null || column.widgets == null) return; column.widgets = column.widgets.map(w => w.id === widgetId ? { ...w, data: widgetData, diff --git a/packages/frontend/src/ui/deck/direct-column.vue b/packages/frontend/src/ui/deck/direct-column.vue index e011de0e3b..d12a18f760 100644 --- a/packages/frontend/src/ui/deck/direct-column.vue +++ b/packages/frontend/src/ui/deck/direct-column.vue @@ -34,7 +34,7 @@ const tlComponent = ref<InstanceType<typeof MkNotes>>(); function reloadTimeline() { return new Promise<void>((res) => { - tlComponent.value.pagingComponent?.reload().then(() => { + tlComponent.value?.pagingComponent?.reload().then(() => { res(); }); }); diff --git a/packages/frontend/src/ui/deck/list-column.vue b/packages/frontend/src/ui/deck/list-column.vue index eaa5997b35..a0e318f7eb 100644 --- a/packages/frontend/src/ui/deck/list-column.vue +++ b/packages/frontend/src/ui/deck/list-column.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="() => timeline.reloadTimeline()"> +<XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="async () => { await timeline?.reloadTimeline() }"> <template #header> <i class="ti ti-list"></i><span style="margin-left: 8px;">{{ column.name }}</span> </template> @@ -15,6 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only <script lang="ts" setup> import { watch, shallowRef, ref } from 'vue'; +import type { entities as MisskeyEntities } from 'misskey-js'; import XColumn from './column.vue'; import { updateColumn, Column } from './deck-store.js'; import MkTimeline from '@/components/MkTimeline.vue'; @@ -23,6 +24,7 @@ import { misskeyApi } from '@/scripts/misskey-api.js'; import { i18n } from '@/i18n.js'; import { MenuItem } from '@/types/menu.js'; import { SoundStore } from '@/store.js'; +import { userListsCache } from '@/cache.js'; import { soundSettingsButton } from '@/ui/deck/tl-note-notification.js'; import * as sound from '@/scripts/sound.js'; @@ -58,17 +60,38 @@ watch(soundSetting, v => { async function setList() { const lists = await misskeyApi('users/lists/list'); - const { canceled, result: list } = await os.select({ + const { canceled, result: list } = await os.select<MisskeyEntities.UserList | '_CREATE_'>({ title: i18n.ts.selectList, - items: lists.map(x => ({ - value: x, text: x.name, - })), + items: [ + { value: '_CREATE_', text: i18n.ts.createNew }, + (lists.length > 0 ? { + sectionTitle: i18n.ts.createdLists, + items: lists.map(x => ({ + value: x, text: x.name, + })), + } : undefined), + ], default: props.column.listId, }); - if (canceled) return; - updateColumn(props.column.id, { - listId: list.id, - }); + if (canceled || list == null) return; + + if (list === '_CREATE_') { + const { canceled, result: name } = await os.inputText({ + title: i18n.ts.enterListName, + }); + if (canceled || name == null || name === '') return; + + const res = await os.apiWithDialog('users/lists/create', { name: name }); + userListsCache.delete(); + + updateColumn(props.column.id, { + listId: res.id, + }); + } else { + updateColumn(props.column.id, { + listId: list.id, + }); + } } function editList() { diff --git a/packages/frontend/src/ui/deck/mentions-column.vue b/packages/frontend/src/ui/deck/mentions-column.vue index 81926dd7cb..7b25a55ec3 100644 --- a/packages/frontend/src/ui/deck/mentions-column.vue +++ b/packages/frontend/src/ui/deck/mentions-column.vue @@ -26,7 +26,7 @@ const tlComponent = ref<InstanceType<typeof MkNotes>>(); function reloadTimeline() { return new Promise<void>((res) => { - tlComponent.value.pagingComponent?.reload().then(() => { + tlComponent.value?.pagingComponent?.reload().then(() => { res(); }); }); diff --git a/packages/frontend/src/ui/deck/notifications-column.vue b/packages/frontend/src/ui/deck/notifications-column.vue index 451cc58791..19ccfc1f7c 100644 --- a/packages/frontend/src/ui/deck/notifications-column.vue +++ b/packages/frontend/src/ui/deck/notifications-column.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<XColumn :column="column" :isStacked="isStacked" :menu="menu" :refresher="() => notificationsComponent.reload()"> +<XColumn :column="column" :isStacked="isStacked" :menu="menu" :refresher="async () => { await notificationsComponent?.reload() }"> <template #header><i class="ti ti-bell" style="margin-right: 8px;"></i>{{ column.name }}</template> <XNotifications ref="notificationsComponent" :excludeTypes="props.column.excludeTypes"/> @@ -27,7 +27,7 @@ const props = defineProps<{ const notificationsComponent = shallowRef<InstanceType<typeof XNotifications>>(); function func() { - os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSelectWindow.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSelectWindow.vue')), { excludeTypes: props.column.excludeTypes, }, { done: async (res) => { @@ -36,7 +36,8 @@ function func() { excludeTypes: excludeTypes, }); }, - }, 'closed'); + closed: () => dispose(), + }); } const menu = [{ diff --git a/packages/frontend/src/ui/deck/role-timeline-column.vue b/packages/frontend/src/ui/deck/role-timeline-column.vue index 32ab7527b4..a375e9c574 100644 --- a/packages/frontend/src/ui/deck/role-timeline-column.vue +++ b/packages/frontend/src/ui/deck/role-timeline-column.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="() => timeline.reloadTimeline()"> +<XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="async () => { await timeline?.reloadTimeline() }"> <template #header> <i class="ti ti-badge"></i><span style="margin-left: 8px;">{{ column.name }}</span> </template> @@ -53,7 +53,7 @@ async function setRole() { })), default: props.column.roleId, }); - if (canceled) return; + if (canceled || role == null) return; updateColumn(props.column.id, { roleId: role.id, }); diff --git a/packages/frontend/src/ui/deck/tl-column.vue b/packages/frontend/src/ui/deck/tl-column.vue index 18eaaadf9f..17afa12551 100644 --- a/packages/frontend/src/ui/deck/tl-column.vue +++ b/packages/frontend/src/ui/deck/tl-column.vue @@ -4,17 +4,13 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="() => timeline.reloadTimeline()"> +<XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="async () => { await timeline?.reloadTimeline() }"> <template #header> - <i v-if="column.tl === 'home'" class="ti ti-home"></i> - <i v-else-if="column.tl === 'local'" class="ti ti-planet"></i> - <i v-else-if="column.tl === 'social'" class="ti ti-universe"></i> - <i v-else-if="column.tl === 'bubble'" class="ph-thumb-up ph-bold ph-lg"></i> - <i v-else-if="column.tl === 'global'" class="ti ti-whirl"></i> + <i v-if="column.tl != null" :class="basicTimelineIconClass(column.tl)"/> <span style="margin-left: 8px;">{{ column.name }}</span> </template> - <div v-if="(((column.tl === 'local' || column.tl === 'social') && !isLocalTimelineAvailable) || (column.tl === 'bubble' && !isBubbleTimelineAvailable) || (column.tl === 'global' && !isGlobalTimelineAvailable))" :class="$style.disabled"> + <div v-if="!isAvailableBasicTimeline(column.tl)" :class="$style.disabled"> <p :class="$style.disabledTitle"> <i class="ti ti-circle-minus"></i> {{ i18n.ts._disabledTimeline.title }} @@ -35,15 +31,15 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { onMounted, watch, ref, shallowRef } from 'vue'; +import { onMounted, watch, ref, shallowRef, computed } from 'vue'; import XColumn from './column.vue'; import { removeColumn, updateColumn, Column } from './deck-store.js'; +import type { MenuItem } from '@/types/menu.js'; import MkTimeline from '@/components/MkTimeline.vue'; import * as os from '@/os.js'; -import { $i } from '@/account.js'; import { i18n } from '@/i18n.js'; +import { hasWithReplies, isAvailableBasicTimeline, basicTimelineIconClass } from '@/timelines.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'; @@ -53,12 +49,8 @@ const props = defineProps<{ isStacked: boolean; }>(); -const disabled = ref(false); 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); @@ -89,11 +81,6 @@ watch(soundSetting, v => { onMounted(() => { if (props.column.tl == null) { setType(); - } else if ($i) { - disabled.value = ( - (!((instance.policies.ltlAvailable) || ($i.policies.ltlAvailable)) && ['local', 'social'].includes(props.column.tl)) || - (!((instance.policies.gtlAvailable) || ($i.policies.gtlAvailable)) && ['global'].includes(props.column.tl)) || - (!((instance.policies.btlAvailable) || ($i.policies.btlAvailable)) && ['bubble'].includes(props.column.tl))); } }); @@ -107,7 +94,7 @@ async function setType() { }, { value: 'social' as const, text: i18n.ts._timelines.social, }, { - value: 'bubble' as const, text: 'Bubble', + value: 'bubble' as const, text: i18n.ts._timelines.bubble, }, { value: 'global' as const, text: i18n.ts._timelines.global, }], @@ -118,8 +105,9 @@ async function setType() { } return; } + if (src == null) return; updateColumn(props.column.id, { - tl: src, + tl: src ?? undefined, }); } @@ -127,7 +115,7 @@ function onNote() { sound.playMisskeySfxFile(soundSetting.value); } -const menu: MenuItem[] = [{ +const menu = computed<MenuItem[]>(() => [{ icon: 'ti ti-pencil', text: i18n.ts.timeline, action: setType, @@ -139,7 +127,7 @@ const menu: MenuItem[] = [{ type: 'switch', text: i18n.ts.showRenotes, ref: withRenotes, -}, props.column.tl === 'local' || props.column.tl === 'social' ? { +}, hasWithReplies(props.column.tl) ? { type: 'switch', text: i18n.ts.showRepliesToOthersInTimeline, ref: withReplies, @@ -148,8 +136,8 @@ const menu: MenuItem[] = [{ type: 'switch', text: i18n.ts.fileAttachedOnly, ref: onlyFiles, - disabled: props.column.tl === 'local' || props.column.tl === 'social' ? withReplies : false, -}]; + disabled: hasWithReplies(props.column.tl) ? withReplies : false, +}]); </script> <style lang="scss" module> diff --git a/packages/frontend/src/ui/visitor.vue b/packages/frontend/src/ui/visitor.vue index 3a5dbeb186..ccc8d8fd97 100644 --- a/packages/frontend/src/ui/visitor.vue +++ b/packages/frontend/src/ui/visitor.vue @@ -124,15 +124,19 @@ const keymap = computed(() => { }); function signin() { - os.popup(XSigninDialog, { + const { dispose } = os.popup(XSigninDialog, { autoSet: true, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); } function signup() { - os.popup(XSignupDialog, { + const { dispose } = os.popup(XSignupDialog, { autoSet: true, - }, {}, 'closed'); + }, { + closed: () => dispose(), + }); } onMounted(() => { diff --git a/packages/frontend/src/widgets/WidgetCalendar.vue b/packages/frontend/src/widgets/WidgetCalendar.vue index 06b71311c4..19843f3949 100644 --- a/packages/frontend/src/widgets/WidgetCalendar.vue +++ b/packages/frontend/src/widgets/WidgetCalendar.vue @@ -121,7 +121,7 @@ defineExpose<WidgetComponentExpose>({ .root { padding: 16px 0; - &:after { + &::after { content: ""; display: block; clear: both; diff --git a/packages/frontend/src/widgets/WidgetInstanceInfo.vue b/packages/frontend/src/widgets/WidgetInstanceInfo.vue index 962521b25c..ce8b0dd602 100644 --- a/packages/frontend/src/widgets/WidgetInstanceInfo.vue +++ b/packages/frontend/src/widgets/WidgetInstanceInfo.vue @@ -81,16 +81,19 @@ defineExpose<WidgetComponentExpose>({ .body { text-overflow: ellipsis; overflow: clip; + margin-left: -10px; + padding: 10px; } .name { color: #fff; - filter: drop-shadow(0 0 4px #000); + filter: drop-shadow(0 0 4px #000) drop-shadow(0 0 0.1px rgba(0, 0, 0, 0.5)); font-weight: bold; } .host { color: #fff; - filter: drop-shadow(0 0 4px #000); + filter: drop-shadow(0 0 4px #000) drop-shadow(0 0 0.1px rgba(0, 0, 0, 0.5)); + } </style> diff --git a/packages/frontend/src/widgets/WidgetNotifications.vue b/packages/frontend/src/widgets/WidgetNotifications.vue index 4b3265dab7..773c078b49 100644 --- a/packages/frontend/src/widgets/WidgetNotifications.vue +++ b/packages/frontend/src/widgets/WidgetNotifications.vue @@ -54,7 +54,7 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name, ); const configureNotification = () => { - os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSelectWindow.vue')), { + const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSelectWindow.vue')), { excludeTypes: widgetProps.excludeTypes, }, { done: async (res) => { @@ -62,7 +62,8 @@ const configureNotification = () => { widgetProps.excludeTypes = excludeTypes; save(); }, - }, 'closed'); + closed: () => dispose(), + }); }; defineExpose<WidgetComponentExpose>({ diff --git a/packages/frontend/src/widgets/WidgetProfile.vue b/packages/frontend/src/widgets/WidgetProfile.vue index a5578d4de6..ae39098305 100644 --- a/packages/frontend/src/widgets/WidgetProfile.vue +++ b/packages/frontend/src/widgets/WidgetProfile.vue @@ -82,16 +82,19 @@ defineExpose<WidgetComponentExpose>({ .body { text-overflow: ellipsis; overflow: clip; + margin-left: -10px; + padding: 10px; } .name { color: #fff; - filter: drop-shadow(0 0 4px #000); + filter: drop-shadow(0 0 4px #000) drop-shadow(0 0 0.1px rgba(0, 0, 0, 0.5)); font-weight: bold; } .username { color: #fff; - filter: drop-shadow(0 0 4px #000); + filter: drop-shadow(0 0 4px #000) drop-shadow(0 0 0.1px rgba(0, 0, 0, 0.5)); + font-weight: normal; } </style> diff --git a/packages/frontend/src/widgets/WidgetTimeline.vue b/packages/frontend/src/widgets/WidgetTimeline.vue index 571b73311f..d02f9b8e22 100644 --- a/packages/frontend/src/widgets/WidgetTimeline.vue +++ b/packages/frontend/src/widgets/WidgetTimeline.vue @@ -6,11 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <MkContainer :showHeader="widgetProps.showHeader" :style="`height: ${widgetProps.height}px;`" :scrollable="true" data-cy-mkw-timeline class="mkw-timeline"> <template #icon> - <i v-if="widgetProps.src === 'home'" class="ti ti-home"></i> - <i v-else-if="widgetProps.src === 'local'" class="ti ti-planet"></i> - <i v-else-if="widgetProps.src === 'social'" class="ti ti-universe"></i> - <i v-else-if="widgetProps.src === 'bubble'" class="ph-drop ph-bold ph-lg"></i> - <i v-else-if="widgetProps.src === 'global'" class="ti ti-whirl"></i> + <i v-if="isBasicTimeline(widgetProps.src)" :class="basicTimelineIconClass(widgetProps.src)"></i> <i v-else-if="widgetProps.src === 'list'" class="ti ti-list"></i> <i v-else-if="widgetProps.src === 'antenna'" class="ti ti-antenna"></i> </template> @@ -21,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only </button> </template> - <div v-if="(((widgetProps.src === 'local' || widgetProps.src === 'social') && !isLocalTimelineAvailable) || (widgetProps.src === 'bubble' && !isBubbleTimelineAvailable) || (widgetProps.src === 'global' && !isGlobalTimelineAvailable))" :class="$style.disabled"> + <div v-if="isBasicTimeline(widgetProps.src) && !isAvailableBasicTimeline(widgetProps.src)" :class="$style.disabled"> <p :class="$style.disabledTitle"> <i class="ti ti-minus"></i> {{ i18n.ts._disabledTimeline.title }} @@ -43,13 +39,9 @@ import { misskeyApi } from '@/scripts/misskey-api.js'; import MkContainer from '@/components/MkContainer.vue'; import MkTimeline from '@/components/MkTimeline.vue'; import { i18n } from '@/i18n.js'; -import { $i } from '@/account.js'; -import { instance } from '@/instance.js'; +import { availableBasicTimelines, isAvailableBasicTimeline, isBasicTimeline, basicTimelineIconClass } from '@/timelines.js'; const name = 'timeline'; -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 widgetPropsDef = { showHeader: { @@ -117,27 +109,11 @@ const choose = async (ev) => { setSrc('list'); }, })); - os.popupMenu([{ - text: i18n.ts._timelines.home, - icon: 'ti ti-home', - action: () => { setSrc('home'); }, - }, { - text: i18n.ts._timelines.local, - icon: 'ti ti-planet', - action: () => { setSrc('local'); }, - }, { - text: i18n.ts._timelines.social, - icon: 'ti ti-universe', - action: () => { setSrc('social'); }, - }, { - text: 'Bubble', - icon: 'ph-drop ph-bold ph-lg', - action: () => { setSrc('bubble'); }, - }, { - text: i18n.ts._timelines.global, - icon: 'ti ti-whirl', - action: () => { setSrc('global'); }, - }, antennaItems.length > 0 ? { type: 'divider' } : undefined, ...antennaItems, listItems.length > 0 ? { type: 'divider' } : undefined, ...listItems], ev.currentTarget ?? ev.target).then(() => { + os.popupMenu([...availableBasicTimelines().map(tl => ({ + text: i18n.ts._timelines[tl], + icon: basicTimelineIconClass(tl), + action: () => { setSrc(tl); }, + })), antennaItems.length > 0 ? { type: 'divider' } : undefined, ...antennaItems, listItems.length > 0 ? { type: 'divider' } : undefined, ...listItems], ev.currentTarget ?? ev.target).then(() => { menuOpened.value = false; }); }; |