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

merge upstream

Browse source
This commit is contained in:
Hazelnoot 2025-03-25 16:14:53 -04:00
commit d8908ef2d8
1065 changed files with 32953 additions and 20092 deletions
Download patch file Download diff file Expand all files Collapse all files

15
packages/frontend/src/pages/settings/2fa.qrdialog.vue
View file

@ -106,7 +106,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { shallowRef, ref } from 'vue';
import { hostname, port } from '@@/js/config';
import { useTemplateRef, ref } from 'vue';
import MkButton from '@/components/MkButton.vue';
import MkModalWindow from '@/components/MkModalWindow.vue';
import MkKeyValue from '@/components/MkKeyValue.vue';
@ -116,10 +117,10 @@ import * as os from '@/os.js';
import MkFolder from '@/components/MkFolder.vue';
import MkInfo from '@/components/MkInfo.vue';
import MkLink from '@/components/MkLink.vue';
import { confetti } from '@/scripts/confetti.js';
import { signinRequired } from '@/account.js';
import { confetti } from '@/utility/confetti.js';
import { ensureSignin } from '@/i.js';
const $i = signinRequired();
const $i = ensureSignin();
defineProps<{
twoFactorData: {
@ -132,7 +133,7 @@ const emit = defineEmits<{
(ev: 'closed'): void;
}>();
const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
const dialog = useTemplateRef('dialog');
const page = ref(0);
const token = ref<string | number | null>(null);
const backupCodes = ref<string[]>();
@ -159,9 +160,9 @@ async function tokenDone() {
function downloadBackupCodes() {
if (backupCodes.value !== undefined) {
const txtBlob = new Blob([backupCodes.value.join('\n')], { type: 'text/plain' });
const dummya = document.createElement('a');
const dummya = window.document.createElement('a');
dummya.href = URL.createObjectURL(txtBlob);
dummya.download = `${$i.username}-2fa-backup-codes.txt`;
dummya.download = `${$i.username}@${hostname}` + (port !== '' ? `_${port}` : '') + '-2fa-backup-codes.txt';
dummya.click();
}
}

133
packages/frontend/src/pages/settings/2fa.vue
View file

@ -4,74 +4,82 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<FormSection :first="first">
<template #label>{{ i18n.ts['2fa'] }}</template>
<SearchMarker markerId="2fa" :keywords="['2fa']">
<FormSection :first="first">
<template #label><SearchLabel>{{ i18n.ts['2fa'] }}</SearchLabel></template>
<div v-if="$i" class="_gaps_s">
<MkInfo v-if="$i.twoFactorEnabled && $i.twoFactorBackupCodesStock === 'partial'" warn>
{{ i18n.ts._2fa.backupCodeUsedWarning }}
</MkInfo>
<MkInfo v-if="$i.twoFactorEnabled && $i.twoFactorBackupCodesStock === 'none'" warn>
{{ i18n.ts._2fa.backupCodesExhaustedWarning }}
</MkInfo>
<div v-if="$i" class="_gaps_s">
<MkInfo v-if="$i.twoFactorEnabled && $i.twoFactorBackupCodesStock === 'partial'" warn>
{{ i18n.ts._2fa.backupCodeUsedWarning }}
</MkInfo>
<MkInfo v-if="$i.twoFactorEnabled && $i.twoFactorBackupCodesStock === 'none'" warn>
{{ i18n.ts._2fa.backupCodesExhaustedWarning }}
</MkInfo>
<MkFolder :defaultOpen="true">
<template #icon><i class="ti ti-shield-lock"></i></template>
<template #label>{{ i18n.ts.totp }}</template>
<template #caption>{{ i18n.ts.totpDescription }}</template>
<template #suffix><i v-if="$i.twoFactorEnabled" class="ti ti-check" style="color: var(--MI_THEME-success)"></i></template>
<SearchMarker :keywords="['totp', 'app']">
<MkFolder :defaultOpen="true">
<template #icon><i class="ti ti-shield-lock"></i></template>
<template #label><SearchLabel>{{ i18n.ts.totp }}</SearchLabel></template>
<template #caption><SearchKeyword>{{ i18n.ts.totpDescription }}</SearchKeyword></template>
<template #suffix><i v-if="$i.twoFactorEnabled" class="ti ti-check" style="color: var(--MI_THEME-success)"></i></template>
<div v-if="$i.twoFactorEnabled" class="_gaps_s">
<div v-text="i18n.ts._2fa.alreadyRegistered"/>
<template v-if="$i.securityKeysList.length > 0">
<MkButton @click="renewTOTP">{{ i18n.ts._2fa.renewTOTP }}</MkButton>
<MkInfo>{{ i18n.ts._2fa.whyTOTPOnlyRenew }}</MkInfo>
</template>
<MkButton v-else danger @click="unregisterTOTP">{{ i18n.ts.unregister }}</MkButton>
</div>
<div v-if="$i.twoFactorEnabled" class="_gaps_s">
<div v-text="i18n.ts._2fa.alreadyRegistered"/>
<template v-if="$i.securityKeysList.length > 0">
<MkButton @click="renewTOTP">{{ i18n.ts._2fa.renewTOTP }}</MkButton>
<MkInfo>{{ i18n.ts._2fa.whyTOTPOnlyRenew }}</MkInfo>
</template>
<MkButton v-else danger @click="unregisterTOTP">{{ i18n.ts.unregister }}</MkButton>
</div>
<div v-else-if="!$i.twoFactorEnabled" class="_gaps_s">
<MkButton primary gradate @click="registerTOTP">{{ i18n.ts._2fa.registerTOTP }}</MkButton>
<MkLink url="https://misskey-hub.net/docs/for-users/stepped-guides/how-to-enable-2fa/" target="_blank"><i class="ti ti-help-circle"></i> {{ i18n.ts.learnMore }}</MkLink>
</div>
</MkFolder>
<div v-else-if="!$i.twoFactorEnabled" class="_gaps_s">
<MkButton primary gradate @click="registerTOTP">{{ i18n.ts._2fa.registerTOTP }}</MkButton>
<MkLink url="https://misskey-hub.net/docs/for-users/stepped-guides/how-to-enable-2fa/" target="_blank"><i class="ti ti-help-circle"></i> {{ i18n.ts.learnMore }}</MkLink>
</div>
</MkFolder>
</SearchMarker>
<MkFolder>
<template #icon><i class="ti ti-key"></i></template>
<template #label>{{ i18n.ts.securityKeyAndPasskey }}</template>
<div class="_gaps_s">
<MkInfo>
{{ i18n.ts._2fa.securityKeyInfo }}
</MkInfo>
<SearchMarker :keywords="['security', 'key', 'passkey']">
<MkFolder>
<template #icon><i class="ti ti-key"></i></template>
<template #label><SearchLabel>{{ i18n.ts.securityKeyAndPasskey }}</SearchLabel></template>
<div class="_gaps_s">
<MkInfo>
{{ i18n.ts._2fa.securityKeyInfo }}
</MkInfo>
<MkInfo v-if="!webAuthnSupported()" warn>
{{ i18n.ts._2fa.securityKeyNotSupported }}
</MkInfo>
<MkInfo v-if="!webAuthnSupported()" warn>
{{ i18n.ts._2fa.securityKeyNotSupported }}
</MkInfo>
<MkInfo v-else-if="webAuthnSupported() && !$i.twoFactorEnabled" warn>
{{ i18n.ts._2fa.registerTOTPBeforeKey }}
</MkInfo>
<MkInfo v-else-if="webAuthnSupported() && !$i.twoFactorEnabled" warn>
{{ i18n.ts._2fa.registerTOTPBeforeKey }}
</MkInfo>
<template v-else>
<MkButton primary @click="addSecurityKey">{{ i18n.ts._2fa.registerSecurityKey }}</MkButton>
<MkFolder v-for="key in $i.securityKeysList" :key="key.id">
<template #label>{{ key.name }}</template>
<template #suffix><I18n :src="i18n.ts.lastUsedAt"><template #t><MkTime :time="key.lastUsed"/></template></I18n></template>
<div class="_buttons">
<MkButton @click="renameKey(key)"><i class="ti ti-forms"></i> {{ i18n.ts.rename }}</MkButton>
<MkButton danger @click="unregisterKey(key)"><i class="ti ti-trash"></i> {{ i18n.ts.unregister }}</MkButton>
</div>
</MkFolder>
</template>
</div>
</MkFolder>
<template v-else>
<MkButton primary @click="addSecurityKey">{{ i18n.ts._2fa.registerSecurityKey }}</MkButton>
<MkFolder v-for="key in $i.securityKeysList" :key="key.id">
<template #label>{{ key.name }}</template>
<template #suffix><I18n :src="i18n.ts.lastUsedAt"><template #t><MkTime :time="key.lastUsed"/></template></I18n></template>
<div class="_buttons">
<MkButton @click="renameKey(key)"><i class="ti ti-forms"></i> {{ i18n.ts.rename }}</MkButton>
<MkButton danger @click="unregisterKey(key)"><i class="ti ti-trash"></i> {{ i18n.ts.unregister }}</MkButton>
</div>
</MkFolder>
</template>
</div>
</MkFolder>
</SearchMarker>
<MkSwitch :disabled="!$i.twoFactorEnabled || $i.securityKeysList.length === 0" :modelValue="usePasswordLessLogin" @update:modelValue="v => updatePasswordLessLogin(v)">
<template #label>{{ i18n.ts.passwordLessLogin }}</template>
<template #caption>{{ i18n.ts.passwordLessLoginDescription }}</template>
</MkSwitch>
</div>
</FormSection>
<SearchMarker :keywords="['password', 'less', 'key', 'passkey', 'login', 'signin']">
<MkSwitch :disabled="!$i.twoFactorEnabled || $i.securityKeysList.length === 0" :modelValue="usePasswordLessLogin" @update:modelValue="v => updatePasswordLessLogin(v)">
<template #label><SearchLabel>{{ i18n.ts.passwordLessLogin }}</SearchLabel></template>
<template #caption><SearchKeyword>{{ i18n.ts.passwordLessLoginDescription }}</SearchKeyword></template>
</MkSwitch>
</SearchMarker>
</div>
</FormSection>
</SearchMarker>
</template>
<script lang="ts" setup>
@ -84,10 +92,11 @@ import FormSection from '@/components/form/section.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkLink from '@/components/MkLink.vue';
import * as os from '@/os.js';
import { signinRequired, updateAccountPartial } from '@/account.js';
import { ensureSignin } from '@/i.js';
import { i18n } from '@/i18n.js';
import { updateCurrentAccountPartial } from '@/accounts.js';
const $i = signinRequired();
const $i = ensureSignin();
// メモ: 各エンドポイントはmeUpdatedを発行するため、refreshAccountは不要
@ -123,7 +132,7 @@ async function unregisterTOTP(): Promise<void> {
password: auth.result.password,
token: auth.result.token,
}).then(res => {
updateAccountPartial({
updateCurrentAccountPartial({
twoFactorEnabled: false,
});
}).catch(error => {

173
packages/frontend/src/pages/settings/accessibility.vue Normal file
View file

@ -0,0 +1,173 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<SearchMarker path="/settings/accessibility" :label="i18n.ts.accessibility" :keywords="['accessibility']" icon="ti ti-accessible">
<div class="_gaps_m">
<MkFeatureBanner icon="/client-assets/mens_room_3d.png" color="#0011ff">
<SearchKeyword>{{ i18n.ts._settings.accessibilityBanner }}</SearchKeyword>
</MkFeatureBanner>
<div class="_gaps_s">
<SearchMarker :keywords="['animation', 'motion', 'reduce']">
<MkPreferenceContainer k="animation">
<MkSwitch v-model="reduceAnimation">
<template #label><SearchLabel>{{ i18n.ts.reduceUiAnimation }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['disable', 'animation', 'image', 'photo', 'picture', 'media', 'thumbnail', 'gif']">
<MkPreferenceContainer k="disableShowingAnimatedImages">
<MkSwitch v-model="disableShowingAnimatedImages">
<template #label><SearchLabel>{{ i18n.ts.disableShowingAnimatedImages }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['mfm', 'enable', 'show', 'animated']">
<MkPreferenceContainer k="animatedMfm">
<MkSwitch v-model="animatedMfm">
<template #label><SearchLabel>{{ i18n.ts.enableAnimatedMfm }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['swipe', 'horizontal', 'tab']">
<MkPreferenceContainer k="enableHorizontalSwipe">
<MkSwitch v-model="enableHorizontalSwipe">
<template #label><SearchLabel>{{ i18n.ts.enableHorizontalSwipe }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['keep', 'screen', 'display', 'on']">
<MkPreferenceContainer k="keepScreenOn">
<MkSwitch v-model="keepScreenOn">
<template #label><SearchLabel>{{ i18n.ts.keepScreenOn }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['native', 'system', 'video', 'audio', 'player', 'media']">
<MkPreferenceContainer k="useNativeUiForVideoAudioPlayer">
<MkSwitch v-model="useNativeUiForVideoAudioPlayer">
<template #label><SearchLabel>{{ i18n.ts.useNativeUIForVideoAudioPlayer }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['text', 'selectable']">
<MkPreferenceContainer k="makeEveryTextElementsSelectable">
<MkSwitch v-model="makeEveryTextElementsSelectable">
<template #label><SearchLabel>{{ i18n.ts._settings.makeEveryTextElementsSelectable }}</SearchLabel></template>
<template #caption>{{ i18n.ts._settings.makeEveryTextElementsSelectable_description }}</template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
</div>
<SearchMarker :keywords="['menu', 'style', 'popup', 'drawer']">
<MkPreferenceContainer k="menuStyle">
<MkSelect v-model="menuStyle">
<template #label><SearchLabel>{{ i18n.ts.menuStyle }}</SearchLabel></template>
<option value="auto">{{ i18n.ts.auto }}</option>
<option value="popup">{{ i18n.ts.popup }}</option>
<option value="drawer">{{ i18n.ts.drawer }}</option>
</MkSelect>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['contextmenu', 'system', 'native']">
<MkPreferenceContainer k="contextMenu">
<MkSelect v-model="contextMenu">
<template #label><SearchLabel>{{ i18n.ts._contextMenu.title }}</SearchLabel></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>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['font', 'size']">
<MkRadios v-model="fontSize">
<template #label><SearchLabel>{{ i18n.ts.fontSize }}</SearchLabel></template>
<option :value="null"><span style="font-size: 14px;">Aa</span></option>
<option value="1"><span style="font-size: 15px;">Aa</span></option>
<option value="2"><span style="font-size: 16px;">Aa</span></option>
<option value="3"><span style="font-size: 17px;">Aa</span></option>
</MkRadios>
</SearchMarker>
<SearchMarker :keywords="['font', 'system', 'native']">
<MkSwitch v-model="useSystemFont">
<template #label><SearchLabel>{{ i18n.ts.useSystemFont }}</SearchLabel></template>
</MkSwitch>
</SearchMarker>
</div>
</SearchMarker>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkSelect from '@/components/MkSelect.vue';
import { prefer } from '@/preferences.js';
import { reloadAsk } from '@/utility/reload-ask.js';
import { i18n } from '@/i18n.js';
import { definePage } from '@/page.js';
import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
import { miLocalStorage } from '@/local-storage.js';
import MkRadios from '@/components/MkRadios.vue';
const reduceAnimation = prefer.model('animation', v => !v, v => !v);
const animatedMfm = prefer.model('animatedMfm');
const disableShowingAnimatedImages = prefer.model('disableShowingAnimatedImages');
const keepScreenOn = prefer.model('keepScreenOn');
const enableHorizontalSwipe = prefer.model('enableHorizontalSwipe');
const useNativeUiForVideoAudioPlayer = prefer.model('useNativeUiForVideoAudioPlayer');
const contextMenu = prefer.model('contextMenu');
const menuStyle = prefer.model('menuStyle');
const makeEveryTextElementsSelectable = prefer.model('makeEveryTextElementsSelectable');
const fontSize = ref(miLocalStorage.getItem('fontSize'));
const useSystemFont = ref(miLocalStorage.getItem('useSystemFont') != null);
watch(fontSize, () => {
if (fontSize.value == null) {
miLocalStorage.removeItem('fontSize');
} else {
miLocalStorage.setItem('fontSize', fontSize.value);
}
});
watch(useSystemFont, () => {
if (useSystemFont.value) {
miLocalStorage.setItem('useSystemFont', 't');
} else {
miLocalStorage.removeItem('useSystemFont');
}
});
watch([
keepScreenOn,
contextMenu,
fontSize,
useSystemFont,
makeEveryTextElementsSelectable,
], async () => {
await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
});
const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePage(() => ({
title: i18n.ts.accessibility,
icon: 'ti ti-accessible',
}));
</script>

277
packages/frontend/src/pages/settings/account-data.vue Normal file
View file

@ -0,0 +1,277 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<SearchMarker path="/settings/account-data" :label="i18n.ts._settings.accountData" :keywords="['import', 'export', 'data', 'archive']" icon="ti ti-package">
<div class="_gaps_m">
<MkFeatureBanner icon="/client-assets/package_3d.png" color="#ff9100">
<SearchKeyword>{{ i18n.ts._settings.accountDataBanner }}</SearchKeyword>
</MkFeatureBanner>
<div class="_gaps_s">
<SearchMarker :keywords="['notes']">
<MkFolder>
<template #icon><i class="ti ti-pencil"></i></template>
<template #label><SearchLabel>{{ i18n.ts._exportOrImport.allNotes }}</SearchLabel></template>
<MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportNotes()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['favorite', 'notes']">
<MkFolder>
<template #icon><i class="ti ti-star"></i></template>
<template #label><SearchLabel>{{ i18n.ts._exportOrImport.favoritedNotes }}</SearchLabel></template>
<MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportFavorites()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['clip', 'notes']">
<MkFolder>
<template #icon><i class="ti ti-star"></i></template>
<template #label><SearchLabel>{{ i18n.ts._exportOrImport.clips }}</SearchLabel></template>
<MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportClips()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['following', 'users']">
<MkFolder>
<template #icon><i class="ti ti-users"></i></template>
<template #label><SearchLabel>{{ i18n.ts._exportOrImport.followingList }}</SearchLabel></template>
<div class="_gaps_s">
<MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<div class="_gaps_s">
<MkSwitch v-model="excludeMutingUsers">
{{ i18n.ts._exportOrImport.excludeMutingUsers }}
</MkSwitch>
<MkSwitch v-model="excludeInactiveUsers">
{{ i18n.ts._exportOrImport.excludeInactiveUsers }}
</MkSwitch>
<MkButton primary :class="$style.button" inline @click="exportFollowing()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</div>
</MkFolder>
<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportFollowing" :defaultOpen="true">
<template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></template>
<MkSwitch v-model="withReplies">
{{ i18n.ts._exportOrImport.withReplies }}
</MkSwitch>
<MkButton primary :class="$style.button" inline @click="importFollowing($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
</MkFolder>
</div>
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['user', 'lists']">
<MkFolder>
<template #icon><i class="ti ti-users"></i></template>
<template #label><SearchLabel>{{ i18n.ts._exportOrImport.userLists }}</SearchLabel></template>
<div class="_gaps_s">
<MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportUserLists()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportUserLists" :defaultOpen="true">
<template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></template>
<MkButton primary :class="$style.button" inline @click="importUserLists($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
</MkFolder>
</div>
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['mute', 'users']">
<MkFolder>
<template #icon><i class="ti ti-user-off"></i></template>
<template #label><SearchLabel>{{ i18n.ts._exportOrImport.muteList }}</SearchLabel></template>
<div class="_gaps_s">
<MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportMuting()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportMuting" :defaultOpen="true">
<template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></template>
<MkButton primary :class="$style.button" inline @click="importMuting($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
</MkFolder>
</div>
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['block', 'users']">
<MkFolder>
<template #icon><i class="ti ti-user-off"></i></template>
<template #label><SearchLabel>{{ i18n.ts._exportOrImport.blockingList }}</SearchLabel></template>
<div class="_gaps_s">
<MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportBlocking()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportBlocking" :defaultOpen="true">
<template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></template>
<MkButton primary :class="$style.button" inline @click="importBlocking($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
</MkFolder>
</div>
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['antennas']">
<MkFolder>
<template #icon><i class="ti ti-antenna"></i></template>
<template #label><SearchLabel>{{ i18n.ts.antennas }}</SearchLabel></template>
<div class="_gaps_s">
<MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportAntennas()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportAntennas" :defaultOpen="true">
<template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></template>
<MkButton primary :class="$style.button" inline @click="importAntennas($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
</MkFolder>
</div>
</MkFolder>
</SearchMarker>
</div>
</div>
</SearchMarker>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import MkButton from '@/components/MkButton.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { selectFile } from '@/utility/select-file.js';
import { i18n } from '@/i18n.js';
import { definePage } from '@/page.js';
import { $i } from '@/i.js';
import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
import { prefer } from '@/preferences.js';
const excludeMutingUsers = ref(false);
const excludeInactiveUsers = ref(false);
const withReplies = ref(prefer.s.defaultFollowWithReplies);
const onExportSuccess = () => {
os.alert({
type: 'info',
text: i18n.ts.exportRequested,
});
};
const onImportSuccess = () => {
os.alert({
type: 'info',
text: i18n.ts.importRequested,
});
};
const onError = (ev) => {
os.alert({
type: 'error',
text: ev.message,
});
};
const exportNotes = () => {
misskeyApi('i/export-notes', {}).then(onExportSuccess).catch(onError);
};
const exportFavorites = () => {
misskeyApi('i/export-favorites', {}).then(onExportSuccess).catch(onError);
};
const exportClips = () => {
misskeyApi('i/export-clips', {}).then(onExportSuccess).catch(onError);
};
const exportFollowing = () => {
misskeyApi('i/export-following', {
excludeMuting: excludeMutingUsers.value,
excludeInactive: excludeInactiveUsers.value,
})
.then(onExportSuccess).catch(onError);
};
const exportBlocking = () => {
misskeyApi('i/export-blocking', {}).then(onExportSuccess).catch(onError);
};
const exportUserLists = () => {
misskeyApi('i/export-user-lists', {}).then(onExportSuccess).catch(onError);
};
const exportMuting = () => {
misskeyApi('i/export-mute', {}).then(onExportSuccess).catch(onError);
};
const exportAntennas = () => {
misskeyApi('i/export-antennas', {}).then(onExportSuccess).catch(onError);
};
const importFollowing = async (ev) => {
const file = await selectFile(ev.currentTarget ?? ev.target);
misskeyApi('i/import-following', {
fileId: file.id,
withReplies: withReplies.value,
}).then(onImportSuccess).catch(onError);
};
const importUserLists = async (ev) => {
const file = await selectFile(ev.currentTarget ?? ev.target);
misskeyApi('i/import-user-lists', { fileId: file.id }).then(onImportSuccess).catch(onError);
};
const importMuting = async (ev) => {
const file = await selectFile(ev.currentTarget ?? ev.target);
misskeyApi('i/import-muting', { fileId: file.id }).then(onImportSuccess).catch(onError);
};
const importBlocking = async (ev) => {
const file = await selectFile(ev.currentTarget ?? ev.target);
misskeyApi('i/import-blocking', { fileId: file.id }).then(onImportSuccess).catch(onError);
};
const importAntennas = async (ev) => {
const file = await selectFile(ev.currentTarget ?? ev.target);
misskeyApi('i/import-antennas', { fileId: file.id }).then(onImportSuccess).catch(onError);
};
const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePage(() => ({
title: i18n.ts._settings.accountData,
icon: 'ti ti-package',
}));
</script>
<style module>
.button {
margin-right: 16px;
}
</style>

110
packages/frontend/src/pages/settings/accounts.vue
View file

@ -4,80 +4,50 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="">
<FormSuspense :p="init">
<div class="_gaps">
<div class="_buttons">
<MkButton primary @click="addAccount"><i class="ti ti-plus"></i> {{ i18n.ts.addAccount }}</MkButton>
<MkButton @click="init"><i class="ti ti-refresh"></i> {{ i18n.ts.reloadAccountsList }}</MkButton>
</div>
<template v-for="[id, user] in accounts">
<MkUserCardMini v-if="user != null" :key="user.id" :user="user" :class="$style.user" @click.prevent="menu(user, $event)"/>
<button v-else v-panel class="_button" :class="$style.unknownUser" @click="menu(id, $event)">
<div :class="$style.unknownUserAvatarMock"><i class="ti ti-user-question"></i></div>
<div>
<div :class="$style.unknownUserTitle">{{ i18n.ts.unknown }}</div>
<div :class="$style.unknownUserSub">ID: <span class="_monospace">{{ id }}</span></div>
</div>
</button>
</template>
<SearchMarker path="/settings/accounts" :label="i18n.ts.accounts" :keywords="['accounts']" icon="ti ti-users">
<div class="_gaps">
<div class="_buttons">
<MkButton primary @click="addAccount"><i class="ti ti-plus"></i> {{ i18n.ts.addAccount }}</MkButton>
<!--<MkButton @click="refreshAllAccounts"><i class="ti ti-refresh"></i></MkButton>-->
</div>
</FormSuspense>
</div>
<MkUserCardMini v-for="x in accounts" :key="x[0] + x[1].id" :user="x[1]" :class="$style.user" @click.prevent="menu(x[0], x[1], $event)"/>
</div>
</SearchMarker>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import type * as Misskey from 'misskey-js';
import FormSuspense from '@/components/form/suspense.vue';
import * as Misskey from 'misskey-js';
import type { MenuItem } from '@/types/menu.js';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { getAccounts, removeAccount as _removeAccount, login, $i, getAccountWithSigninDialog, getAccountWithSignupDialog } from '@/account.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { $i } from '@/i.js';
import { switchAccount, removeAccount, login, getAccountWithSigninDialog, getAccountWithSignupDialog } from '@/accounts.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { definePage } from '@/page.js';
import MkUserCardMini from '@/components/MkUserCardMini.vue';
import { MenuItem } from '@/types/menu';
import { prefer } from '@/preferences.js';
const storedAccounts = ref<{ id: string, token: string }[] | null>(null);
const accounts = ref(new Map<string, Misskey.entities.UserDetailed | null>());
const accounts = prefer.r.accounts;
const init = async () => {
getAccounts().then(accounts => {
storedAccounts.value = accounts.filter(x => x.id !== $i!.id);
function refreshAllAccounts() {
// TODO
}
return misskeyApi('users/show', {
userIds: storedAccounts.value.map(x => x.id),
});
}).then(response => {
if (storedAccounts.value == null) return;
accounts.value = new Map(storedAccounts.value.map(x => [x.id, response.find((y: Misskey.entities.UserDetailed) => y.id === x.id) ?? null]));
});
};
function menu(account: Misskey.entities.UserDetailed | string, ev: MouseEvent) {
function menu(host: string, account: Misskey.entities.UserDetailed, ev: MouseEvent) {
let menu: MenuItem[];
if (typeof account === 'string') {
menu = [{
text: i18n.ts.logout,
icon: 'ti ti-trash',
danger: true,
action: () => removeAccount(account),
}];
} else {
menu = [{
text: i18n.ts.switch,
icon: 'ti ti-switch-horizontal',
action: () => switchAccount(account.id),
}, {
text: i18n.ts.logout,
icon: 'ti ti-trash',
danger: true,
action: () => removeAccount(account.id),
}];
}
menu = [{
text: i18n.ts.switch,
icon: 'ti ti-switch-horizontal',
action: () => switchAccount(host, account.id),
}, {
text: i18n.ts.remove,
icon: 'ti ti-trash',
action: () => removeAccount(host, account.id),
}];
os.popupMenu(menu, ev.currentTarget ?? ev.target);
}
@ -92,16 +62,10 @@ function addAccount(ev: MouseEvent) {
}], ev.currentTarget ?? ev.target);
}
async function removeAccount(id: string) {
await _removeAccount(id);
accounts.value.delete(id);
}
function addExistingAccount() {
getAccountWithSigninDialog().then((res) => {
if (res != null) {
os.success();
init();
}
});
}
@ -109,26 +73,16 @@ function addExistingAccount() {
function createAccount() {
getAccountWithSignupDialog().then((res) => {
if (res != null) {
switchAccountWithToken(res.token);
login(res.token);
}
});
}
async function switchAccount(id: string) {
const fetchedAccounts = await getAccounts();
const token = fetchedAccounts.find(x => x.id === id)!.token;
switchAccountWithToken(token);
}
function switchAccountWithToken(token: string) {
login(token);
}
const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts.accounts,
icon: 'ti ti-users',
}));

53
packages/frontend/src/pages/settings/api.vue
View file

@ -1,53 +0,0 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps_m">
<MkButton primary @click="generateToken">{{ i18n.ts.generateAccessToken }}</MkButton>
<FormLink to="/settings/apps">{{ i18n.ts.manageAccessTokens }}</FormLink>
<FormLink to="/api-console" :behavior="isDesktop ? 'window' : null">API console</FormLink>
</div>
</template>
<script lang="ts" setup>
import { defineAsyncComponent, ref, computed } from 'vue';
import FormLink from '@/components/form/link.vue';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
const isDesktop = ref(window.innerWidth >= 1100);
function generateToken() {
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {}, {
done: async result => {
const { name, permissions } = result;
const { token } = await misskeyApi('miauth/gen-token', {
session: null,
name: name,
permission: permissions,
});
os.alert({
type: 'success',
title: i18n.ts.token,
text: token,
});
},
closed: () => dispose(),
});
}
const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
title: 'API',
icon: 'ti ti-api',
}));
</script>

8
packages/frontend/src/pages/settings/apps.vue
View file

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<FormPagination ref="list" :pagination="pagination">
<template #empty>
<div class="_fullinfo">
<img :src="infoImageUrl" class="_ghost"/>
<img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.nothing }}</div>
</div>
</template>
@ -57,9 +57,9 @@ SPDX-License-Identifier: AGPL-3.0-only
import { ref, computed } from 'vue';
import * as Misskey from 'misskey-js';
import FormPagination from '@/components/MkPagination.vue';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { definePage } from '@/page.js';
import MkKeyValue from '@/components/MkKeyValue.vue';
import MkButton from '@/components/MkButton.vue';
import MkFolder from '@/components/MkFolder.vue';
@ -86,7 +86,7 @@ const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts.installedApps,
icon: 'ti ti-plug',
}));

4
packages/frontend/src/pages/settings/avatar-decoration.decoration.vue
View file

@ -16,9 +16,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { computed } from 'vue';
import { signinRequired } from '@/account.js';
import { ensureSignin } from '@/i.js';
const $i = signinRequired();
const $i = ensureSignin();
const props = defineProps<{
active?: boolean;

8
packages/frontend/src/pages/settings/avatar-decoration.dialog.vue
View file

@ -48,15 +48,15 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { shallowRef, ref, computed } from 'vue';
import { useTemplateRef, ref, computed } from 'vue';
import MkButton from '@/components/MkButton.vue';
import MkModalWindow from '@/components/MkModalWindow.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import { i18n } from '@/i18n.js';
import MkRange from '@/components/MkRange.vue';
import { signinRequired } from '@/account.js';
import { ensureSignin } from '@/i.js';
const $i = signinRequired();
const $i = ensureSignin();
const props = defineProps<{
usingIndex: number | null;
@ -87,7 +87,7 @@ const emit = defineEmits<{
(ev: 'detach'): void;
}>();
const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
const dialog = useTemplateRef('dialog');
const exceeded = computed(() => ($i.policies.avatarDecorationLimit - $i.avatarDecorations.length) <= 0);
const locked = computed(() => props.decoration.roleIdsThatCanBeUsedThisDecoration.length > 0 && !$i.roles.some(r => props.decoration.roleIdsThatCanBeUsedThisDecoration.includes(r.id)));
const angle = ref((props.usingIndex != null ? $i.avatarDecorations[props.usingIndex].angle : null) ?? 0);

70
packages/frontend/src/pages/settings/avatar-decoration.vue
View file

@ -4,45 +4,47 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div>
<div v-if="!loading" class="_gaps">
<MkInfo>{{ i18n.tsx._profile.avatarDecorationMax({ max: $i.policies.avatarDecorationLimit }) }} ({{ i18n.tsx.remainingN({ n: $i.policies.avatarDecorationLimit - $i.avatarDecorations.length }) }})</MkInfo>
<SearchMarker path="/settings/avatar-decoration" :label="i18n.ts.avatarDecorations" :keywords="['avatar', 'icon', 'decoration']" icon="ti ti-sparkles">
<div>
<div v-if="!loading" class="_gaps">
<MkInfo>{{ i18n.tsx._profile.avatarDecorationMax({ max: $i.policies.avatarDecorationLimit }) }} ({{ i18n.tsx.remainingN({ n: $i.policies.avatarDecorationLimit - $i.avatarDecorations.length }) }})</MkInfo>
<MkAvatar :class="$style.avatar" :user="$i" forceShowDecoration/>
<MkAvatar :class="$style.avatar" :user="$i" forceShowDecoration/>
<div v-if="$i.avatarDecorations.length > 0" v-panel :class="$style.current" class="_gaps_s">
<div>{{ i18n.ts.inUse }}</div>
<div v-if="$i.avatarDecorations.length > 0" v-panel :class="$style.current" class="_gaps_s">
<div>{{ i18n.ts.inUse }}</div>
<div :class="$style.decorations">
<XDecoration
v-for="(avatarDecoration, i) in $i.avatarDecorations"
:decoration="avatarDecorations.find(d => d.id === avatarDecoration.id)"
:angle="avatarDecoration.angle"
:flipH="avatarDecoration.flipH"
:offsetX="avatarDecoration.offsetX"
:offsetY="avatarDecoration.offsetY"
:showBelow="avatarDecoration.showBelow"
:active="true"
@click="openDecoration(avatarDecoration, i)"
/>
</div>
<MkButton danger @click="detachAllDecorations">{{ i18n.ts.detachAll }}</MkButton>
</div>
<div :class="$style.decorations">
<XDecoration
v-for="(avatarDecoration, i) in $i.avatarDecorations"
:decoration="avatarDecorations.find(d => d.id === avatarDecoration.id)"
:angle="avatarDecoration.angle"
:flipH="avatarDecoration.flipH"
:offsetX="avatarDecoration.offsetX"
:offsetY="avatarDecoration.offsetY"
:showBelow="avatarDecoration.showBelow"
:active="true"
@click="openDecoration(avatarDecoration, i)"
v-for="avatarDecoration in avatarDecorations"
:key="avatarDecoration.id"
:decoration="avatarDecoration"
@click="openDecoration(avatarDecoration)"
/>
</div>
<MkButton danger @click="detachAllDecorations">{{ i18n.ts.detachAll }}</MkButton>
</div>
<div :class="$style.decorations">
<XDecoration
v-for="avatarDecoration in avatarDecorations"
:key="avatarDecoration.id"
:decoration="avatarDecoration"
@click="openDecoration(avatarDecoration)"
/>
<div v-else>
<MkLoading/>
</div>
</div>
<div v-else>
<MkLoading/>
</div>
</div>
</SearchMarker>
</template>
<script lang="ts" setup>
@ -51,13 +53,13 @@ import * as Misskey from 'misskey-js';
import XDecoration from './avatar-decoration.decoration.vue';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { i18n } from '@/i18n.js';
import { signinRequired } from '@/account.js';
import { ensureSignin } from '@/i.js';
import MkInfo from '@/components/MkInfo.vue';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { definePage } from '@/page.js';
const $i = signinRequired();
const $i = ensureSignin();
const loading = ref(true);
const avatarDecorations = ref<Misskey.entities.GetAvatarDecorationsResponse>([]);
@ -132,7 +134,7 @@ const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts.avatarDecorations,
icon: 'ti ti-sparkles',
}));

112
packages/frontend/src/pages/settings/connect.vue Normal file
View file

@ -0,0 +1,112 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<SearchMarker path="/settings/connect" :label="i18n.ts._settings.serviceConnection" :keywords="['app', 'service', 'connect', 'webhook', 'api', 'token']" icon="ti ti-link">
<div class="_gaps_m">
<MkFeatureBanner icon="/client-assets/link_3d.png" color="#ff0088">
<SearchKeyword>{{ i18n.ts._settings.serviceConnectionBanner }}</SearchKeyword>
</MkFeatureBanner>
<SearchMarker :keywords="['api', 'app', 'token', 'accessToken']">
<FormSection>
<template #label><i class="ti ti-api"></i> <SearchLabel>{{ i18n.ts._settings.api }}</SearchLabel></template>
<div class="_gaps_m">
<MkButton primary @click="generateToken">{{ i18n.ts.generateAccessToken }}</MkButton>
<FormLink to="/settings/apps">{{ i18n.ts.manageAccessTokens }}</FormLink>
<FormLink to="/api-console" :behavior="isDesktop ? 'window' : null">API console</FormLink>
</div>
</FormSection>
</SearchMarker>
<SearchMarker :keywords="['webhook']">
<FormSection>
<template #label><i class="ti ti-webhook"></i> <SearchLabel>{{ i18n.ts._settings.webhook }}</SearchLabel></template>
<div class="_gaps_m">
<FormLink :to="`/settings/webhook/new`">
{{ i18n.ts._webhookSettings.createWebhook }}
</FormLink>
<MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts.manage }}</template>
<MkPagination :pagination="pagination">
<template #default="{items}">
<div class="_gaps">
<FormLink v-for="webhook in items" :key="webhook.id" :to="`/settings/webhook/edit/${webhook.id}`">
<template #icon>
<i v-if="webhook.active === false" class="ti ti-player-pause"></i>
<i v-else-if="webhook.latestStatus === null" class="ti ti-circle"></i>
<i v-else-if="[200, 201, 204].includes(webhook.latestStatus)" class="ti ti-check" :style="{ color: 'var(--MI_THEME-success)' }"></i>
<i v-else class="ti ti-alert-triangle" :style="{ color: 'var(--MI_THEME-error)' }"></i>
</template>
{{ webhook.name || webhook.url }}
<template #suffix>
<MkTime v-if="webhook.latestSentAt" :time="webhook.latestSentAt"></MkTime>
</template>
</FormLink>
</div>
</template>
</MkPagination>
</MkFolder>
</div>
</FormSection>
</SearchMarker>
</div>
</SearchMarker>
</template>
<script lang="ts" setup>
import { computed, ref, defineAsyncComponent } from 'vue';
import MkPagination from '@/components/MkPagination.vue';
import FormSection from '@/components/form/section.vue';
import FormLink from '@/components/form/link.vue';
import { definePage } from '@/page.js';
import { i18n } from '@/i18n.js';
import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import MkButton from '@/components/MkButton.vue';
import MkFolder from '@/components/MkFolder.vue';
const isDesktop = ref(window.innerWidth >= 1100);
const pagination = {
endpoint: 'i/webhooks/list' as const,
limit: 100,
noPaging: true,
};
function generateToken() {
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {}, {
done: async result => {
const { name, permissions } = result;
const { token } = await misskeyApi('miauth/gen-token', {
session: null,
name: name,
permission: permissions,
});
os.alert({
type: 'success',
title: i18n.ts.token,
text: token,
});
},
closed: () => dispose(),
});
}
const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePage(() => ({
title: i18n.ts._settings.serviceConnection,
icon: 'ti ti-link',
}));
</script>

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

@ -18,9 +18,9 @@ import { ref, watch, computed } from 'vue';
import MkCodeEditor from '@/components/MkCodeEditor.vue';
import FormInfo from '@/components/MkInfo.vue';
import * as os from '@/os.js';
import { unisonReload } from '@/scripts/unison-reload.js';
import { unisonReload } from '@/utility/unison-reload.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { definePage } from '@/page.js';
import { miLocalStorage } from '@/local-storage.js';
const localCustomCss = ref(miLocalStorage.getItem('customCss') ?? '');
@ -45,7 +45,7 @@ const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts.customCss,
icon: 'ti ti-code',
}));

81
packages/frontend/src/pages/settings/deck.vue
View file

@ -4,39 +4,84 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps_m">
<MkSwitch v-model="useSimpleUiForNonRootPages">{{ i18n.ts._deck.useSimpleUiForNonRootPages }}</MkSwitch>
<SearchMarker path="/settings/deck" :label="i18n.ts.deck" :keywords="['deck', 'ui']" icon="ti ti-columns">
<div class="_gaps_m">
<SearchMarker :keywords="['sync', 'profiles', 'devices']">
<MkSwitch :modelValue="profilesSyncEnabled" @update:modelValue="changeProfilesSyncEnabled">
<template #label><SearchLabel>{{ i18n.ts._deck.enableSyncBetweenDevicesForProfiles }}</SearchLabel></template>
</MkSwitch>
</SearchMarker>
<MkSwitch v-model="navWindow">{{ i18n.ts.defaultNavigationBehaviour }}: {{ i18n.ts.openInWindow }}</MkSwitch>
<SearchMarker :keywords="['ui', 'root', 'page']">
<MkPreferenceContainer k="deck.useSimpleUiForNonRootPages">
<MkSwitch v-model="useSimpleUiForNonRootPages">
<template #label><SearchLabel>{{ i18n.ts._deck.useSimpleUiForNonRootPages }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<MkSwitch v-model="alwaysShowMainColumn">{{ i18n.ts._deck.alwaysShowMainColumn }}</MkSwitch>
<SearchMarker :keywords="['default', 'navigation', 'behaviour', 'window']">
<MkPreferenceContainer k="deck.navWindow">
<MkSwitch v-model="navWindow">
<template #label><SearchLabel>{{ i18n.ts.defaultNavigationBehaviour }}</SearchLabel>: {{ i18n.ts.openInWindow }}</template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<MkRadios v-model="columnAlign">
<template #label>{{ i18n.ts._deck.columnAlign }}</template>
<option value="left">{{ i18n.ts.left }}</option>
<option value="center">{{ i18n.ts.center }}</option>
</MkRadios>
</div>
<SearchMarker :keywords="['always', 'show', 'main', 'column']">
<MkPreferenceContainer k="deck.alwaysShowMainColumn">
<MkSwitch v-model="alwaysShowMainColumn">
<template #label><SearchLabel>{{ i18n.ts._deck.alwaysShowMainColumn }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['column', 'align']">
<MkPreferenceContainer k="deck.columnAlign">
<MkRadios v-model="columnAlign">
<template #label><SearchLabel>{{ i18n.ts._deck.columnAlign }}</SearchLabel></template>
<option value="left">{{ i18n.ts.left }}</option>
<option value="center">{{ i18n.ts.center }}</option>
</MkRadios>
</MkPreferenceContainer>
</SearchMarker>
</div>
</SearchMarker>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { computed, ref } from 'vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkRadios from '@/components/MkRadios.vue';
import { deckStore } from '@/ui/deck/deck-store.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { definePage } from '@/page.js';
import { prefer } from '@/preferences.js';
import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
const navWindow = computed(deckStore.makeGetterSetter('navWindow'));
const useSimpleUiForNonRootPages = computed(deckStore.makeGetterSetter('useSimpleUiForNonRootPages'));
const alwaysShowMainColumn = computed(deckStore.makeGetterSetter('alwaysShowMainColumn'));
const columnAlign = computed(deckStore.makeGetterSetter('columnAlign'));
const navWindow = prefer.model('deck.navWindow');
const useSimpleUiForNonRootPages = prefer.model('deck.useSimpleUiForNonRootPages');
const alwaysShowMainColumn = prefer.model('deck.alwaysShowMainColumn');
const columnAlign = prefer.model('deck.columnAlign');
const profilesSyncEnabled = ref(prefer.isSyncEnabled('deck.profiles'));
function changeProfilesSyncEnabled(value: boolean) {
if (value) {
prefer.enableSync('deck.profiles').then((res) => {
if (res == null) return;
if (res.enabled) profilesSyncEnabled.value = true;
});
} else {
prefer.disableSync('deck.profiles');
profilesSyncEnabled.value = false;
}
}
const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts.deck,
icon: 'ti ti-columns',
}));

12
packages/frontend/src/pages/settings/drive-cleaner.vue
View file

@ -48,19 +48,21 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script setup lang="ts">
import { computed, ref, shallowRef, watch, type StyleValue } from 'vue';
import { computed, ref, shallowRef, watch } from 'vue';
import type { StyleValue } from 'vue';
import tinycolor from 'tinycolor2';
import * as Misskey from 'misskey-js';
import type { MenuItem } from '@/types/menu.js';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import MkPagination from '@/components/MkPagination.vue';
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
import { i18n } from '@/i18n.js';
import bytes from '@/filters/bytes.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { definePage } from '@/page.js';
import MkSelect from '@/components/MkSelect.vue';
import { copyToClipboard } from '@/scripts/copy-to-clipboard.js';
import { getDriveFileMenu } from '@/utility/get-drive-file-menu.js';
import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
const paginationComponent = shallowRef<InstanceType<typeof MkPagination>>();
@ -162,7 +164,7 @@ function onContextMenu(ev: MouseEvent, file): void {
os.contextMenu(getDriveFileMenu(file), ev);
}
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts.drivecleaner,
icon: 'ti ti-trash',
}));

150
packages/frontend/src/pages/settings/drive.vue
View file

@ -4,56 +4,82 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps_m">
<FormSection v-if="!fetching" first>
<template #label>{{ i18n.ts.usageAmount }}</template>
<SearchMarker path="/settings/drive" :label="i18n.ts.drive" :keywords="['drive']" icon="ti ti-cloud">
<div class="_gaps_m">
<MkFeatureBanner icon="/client-assets/cloud_3d.png" color="#0059ff">
<SearchKeyword>{{ i18n.ts._settings.driveBanner }}</SearchKeyword>
</MkFeatureBanner>
<div class="_gaps_m">
<div>
<div :class="$style.meter"><div :class="$style.meterValue" :style="meterStyle"></div></div>
<SearchMarker :keywords="['capacity', 'usage']">
<FormSection first>
<template #label><SearchLabel>{{ i18n.ts.usageAmount }}</SearchLabel></template>
<div v-if="!fetching" class="_gaps_m">
<div>
<div :class="$style.meter"><div :class="$style.meterValue" :style="meterStyle"></div></div>
</div>
<FormSplit>
<MkKeyValue>
<template #key>{{ i18n.ts.capacity }}</template>
<template #value>{{ bytes(capacity, 1) }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.inUse }}</template>
<template #value>{{ bytes(usage, 1) }}</template>
</MkKeyValue>
</FormSplit>
</div>
</FormSection>
</SearchMarker>
<SearchMarker :keywords="['statistics', 'usage']">
<FormSection>
<template #label><SearchLabel>{{ i18n.ts.statistics }}</SearchLabel></template>
<MkChart src="per-user-drive" :args="{ user: $i }" span="day" :limit="7 * 5" :bar="true" :stacked="true" :detailed="false" :aspectRatio="6"/>
</FormSection>
</SearchMarker>
<FormSection>
<div class="_gaps_m">
<SearchMarker :keywords="['default', 'upload', 'folder']">
<FormLink to="" @click="chooseUploadFolder()">
<SearchLabel>{{ i18n.ts.uploadFolder }}</SearchLabel>
<template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template>
<template #suffixIcon><i class="ti ti-folder"></i></template>
</FormLink>
</SearchMarker>
<FormLink to="/settings/drive/cleaner">
{{ i18n.ts.drivecleaner }}
</FormLink>
<SearchMarker :keywords="['keep', 'original', 'raw', 'upload']">
<MkPreferenceContainer k="keepOriginalUploading">
<MkSwitch v-model="keepOriginalUploading">
<template #label><SearchLabel>{{ i18n.ts.keepOriginalUploading }}</SearchLabel></template>
<template #caption><SearchKeyword>{{ i18n.ts.keepOriginalUploadingDescription }}</SearchKeyword></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['keep', 'original', 'filename']">
<MkPreferenceContainer k="keepOriginalFilename">
<MkSwitch v-model="keepOriginalFilename">
<template #label><SearchLabel>{{ i18n.ts.keepOriginalFilename }}</SearchLabel></template>
<template #caption><SearchKeyword>{{ i18n.ts.keepOriginalFilenameDescription }}</SearchKeyword></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['always', 'default', 'mark', 'nsfw', 'sensitive', 'media', 'file']">
<MkSwitch v-model="defaultSensitive" @update:modelValue="saveProfile()">
<template #label><SearchLabel>{{ i18n.ts.alwaysMarkSensitive }}</SearchLabel></template>
</MkSwitch>
</SearchMarker>
</div>
<FormSplit>
<MkKeyValue>
<template #key>{{ i18n.ts.capacity }}</template>
<template #value>{{ bytes(capacity, 1) }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.inUse }}</template>
<template #value>{{ bytes(usage, 1) }}</template>
</MkKeyValue>
</FormSplit>
</div>
</FormSection>
<FormSection>
<template #label>{{ i18n.ts.statistics }}</template>
<MkChart src="per-user-drive" :args="{ user: $i }" span="day" :limit="7 * 5" :bar="true" :stacked="true" :detailed="false" :aspectRatio="6"/>
</FormSection>
<FormSection>
<div class="_gaps_m">
<FormLink to="" @click="chooseUploadFolder()">
{{ i18n.ts.uploadFolder }}
<template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template>
<template #suffixIcon><i class="ti ti-folder"></i></template>
</FormLink>
<FormLink to="/settings/drive/cleaner">
{{ i18n.ts.drivecleaner }}
</FormLink>
<MkSwitch v-model="keepOriginalUploading">
<template #label>{{ i18n.ts.keepOriginalUploading }}</template>
<template #caption>{{ i18n.ts.keepOriginalUploadingDescription }}</template>
</MkSwitch>
<MkSwitch v-model="keepOriginalFilename">
<template #label>{{ i18n.ts.keepOriginalFilename }}</template>
<template #caption>{{ i18n.ts.keepOriginalFilenameDescription }}</template>
</MkSwitch>
<MkSwitch v-model="defaultSensitive" @update:modelValue="saveProfile()">
<template #label>{{ i18n.ts.alwaysMarkSensitive }}</template>
</MkSwitch>
</div>
</FormSection>
</div>
</FormSection>
</div>
</SearchMarker>
</template>
<script lang="ts" setup>
@ -66,15 +92,17 @@ import FormSection from '@/components/form/section.vue';
import MkKeyValue from '@/components/MkKeyValue.vue';
import FormSplit from '@/components/form/split.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import bytes from '@/filters/bytes.js';
import { defaultStore } from '@/store.js';
import MkChart from '@/components/MkChart.vue';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { signinRequired } from '@/account.js';
import { definePage } from '@/page.js';
import { ensureSignin } from '@/i.js';
import { prefer } from '@/preferences.js';
import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
const $i = signinRequired();
const $i = ensureSignin();
const fetching = ref(true);
const usage = ref<number | null>(null);
@ -94,8 +122,8 @@ const meterStyle = computed(() => {
};
});
const keepOriginalUploading = computed(defaultStore.makeGetterSetter('keepOriginalUploading'));
const keepOriginalFilename = computed(defaultStore.makeGetterSetter('keepOriginalFilename'));
const keepOriginalUploading = prefer.model('keepOriginalUploading');
const keepOriginalFilename = prefer.model('keepOriginalFilename');
misskeyApi('drive').then(info => {
capacity.value = info.capacity;
@ -103,9 +131,9 @@ misskeyApi('drive').then(info => {
fetching.value = false;
});
if (defaultStore.state.uploadFolder) {
if (prefer.s.uploadFolder) {
misskeyApi('drive/folders/show', {
folderId: defaultStore.state.uploadFolder,
folderId: prefer.s.uploadFolder,
}).then(response => {
uploadFolder.value = response;
});
@ -113,11 +141,11 @@ if (defaultStore.state.uploadFolder) {
function chooseUploadFolder() {
os.selectDriveFolder(false).then(async folder => {
defaultStore.set('uploadFolder', folder[0] ? folder[0].id : null);
prefer.commit('uploadFolder', folder[0] ? folder[0].id : null);
os.success();
if (defaultStore.state.uploadFolder) {
if (prefer.s.uploadFolder) {
uploadFolder.value = await misskeyApi('drive/folders/show', {
folderId: defaultStore.state.uploadFolder,
folderId: prefer.s.uploadFolder,
});
} else {
uploadFolder.value = null;
@ -142,7 +170,7 @@ const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts.drive,
icon: 'ti ti-cloud',
}));

59
packages/frontend/src/pages/settings/email.vue
View file

@ -4,25 +4,37 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div v-if="instance.enableEmail" class="_gaps_m">
<FormSection first>
<template #label>{{ i18n.ts.emailAddress }}</template>
<MkInput v-model="emailAddress" type="email" manualSave>
<template #prefix><i class="ti ti-mail"></i></template>
<template v-if="$i.email && !$i.emailVerified" #caption>{{ i18n.ts.verificationEmailSent }}</template>
<template v-else-if="emailAddress === $i.email && $i.emailVerified" #caption><i class="ti ti-check" style="color: var(--MI_THEME-success);"></i> {{ i18n.ts.emailVerified }}</template>
</MkInput>
</FormSection>
<SearchMarker path="/settings/email" :label="i18n.ts.email" :keywords="['email']" icon="ti ti-mail">
<div class="_gaps_m">
<MkInfo v-if="!instance.enableEmail">{{ i18n.ts.emailNotSupported }}</MkInfo>
<FormSection>
<MkSwitch :modelValue="$i.receiveAnnouncementEmail" @update:modelValue="onChangeReceiveAnnouncementEmail">
{{ i18n.ts.receiveAnnouncementFromInstance }}
</MkSwitch>
</FormSection>
</div>
<div v-if="!instance.enableEmail" class="_gaps_m">
<MkInfo>{{ i18n.ts.emailNotSupported }}</MkInfo>
</div>
<MkDisableSection :disabled="!instance.enableEmail">
<div class="_gaps_m">
<SearchMarker :keywords="['email', 'address']">
<FormSection first>
<template #label><SearchLabel>{{ i18n.ts.emailAddress }}</SearchLabel></template>
<MkInput v-model="emailAddress" type="email" manualSave>
<template #prefix><i class="ti ti-mail"></i></template>
<template v-if="$i.email && !$i.emailVerified" #caption>{{ i18n.ts.verificationEmailSent }}</template>
<template v-else-if="emailAddress === $i.email && $i.emailVerified" #caption><i class="ti ti-check" style="color: var(--MI_THEME-success);"></i> {{ i18n.ts.emailVerified }}</template>
</MkInput>
</FormSection>
</SearchMarker>
<FormSection>
<SearchMarker :keywords="['announcement', 'email']">
<MkSwitch :modelValue="$i.receiveAnnouncementEmail" @update:modelValue="onChangeReceiveAnnouncementEmail">
<template #label><SearchLabel>{{ i18n.ts.receiveAnnouncementFromInstance }}</SearchLabel></template>
</MkSwitch>
</SearchMarker>
</FormSection>
</div>
</MkDisableSection>
</div>
<div v-if="!instance.enableEmail" class="_gaps_m">
<MkInfo>{{ i18n.ts.emailNotSupported }}</MkInfo>
</div>
</SearchMarker>
</template>
<script lang="ts" setup>
@ -31,14 +43,15 @@ import FormSection from '@/components/form/section.vue';
import MkInfo from '@/components/MkInfo.vue';
import MkInput from '@/components/MkInput.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkDisableSection from '@/components/MkDisableSection.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { signinRequired } from '@/account.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { ensureSignin } from '@/i.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { definePage } from '@/page.js';
import { instance } from '@/instance.js';
const $i = signinRequired();
const $i = ensureSignin();
const emailAddress = ref($i.email);
@ -69,7 +82,7 @@ const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts.email,
icon: 'ti ti-mail',
}));

166
packages/frontend/src/pages/settings/emoji-palette.palette.vue Normal file
View file

@ -0,0 +1,166 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkFolder :defaultOpen="true">
<template #icon><i class="ti ti-palette"></i></template>
<template #label>{{ palette.name === '' ? '(' + i18n.ts.noName + ')' : palette.name }}</template>
<template #footer>
<div class="_buttons">
<MkButton @click="rename"><i class="ti ti-pencil"></i> {{ i18n.ts.rename }}</MkButton>
<MkButton @click="copy"><i class="ti ti-copy"></i> {{ i18n.ts.copy }}</MkButton>
<MkButton danger @click="paste"><i class="ti ti-clipboard"></i> {{ i18n.ts.paste }}</MkButton>
<MkButton danger iconOnly style="margin-left: auto;" @click="del"><i class="ti ti-trash"></i></MkButton>
</div>
</template>
<div>
<div v-panel style="border-radius: 6px;">
<Sortable
v-model="emojis"
:class="$style.emojis"
:itemKey="item => item"
:animation="150"
:delay="100"
:delayOnTouchOnly="true"
:group="{ name: 'SortableEmojiPalettes' }"
>
<template #item="{element}">
<button class="_button" :class="$style.emojisItem" @click="remove(element, $event)">
<MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true" :fallbackToImage="true"/>
<MkEmoji v-else :emoji="element" :normal="true"/>
</button>
</template>
<template #footer>
<button class="_button" :class="$style.emojisAdd" @click="pick">
<i class="ti ti-plus"></i>
</button>
</template>
</Sortable>
</div>
<div :class="$style.editorCaption">{{ i18n.ts.reactionSettingDescription2 }}</div>
</div>
</MkFolder>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import Sortable from 'vuedraggable';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
import { deepClone } from '@/utility/clone.js';
import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
import MkEmoji from '@/components/global/MkEmoji.vue';
import MkFolder from '@/components/MkFolder.vue';
import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
const props = defineProps<{
palette: {
id: string;
name: string;
emojis: string[];
};
}>();
const emit = defineEmits<{
(ev: 'updateEmojis', emojis: string[]): void,
(ev: 'updateName', name: string): void,
(ev: 'del'): void,
}>();
const emojis = ref<string[]>(deepClone(props.palette.emojis));
watch(emojis, () => {
emit('updateEmojis', emojis.value);
}, { deep: true });
function remove(reaction: string, ev: MouseEvent) {
os.popupMenu([{
text: i18n.ts.remove,
action: () => {
emojis.value = emojis.value.filter(x => x !== reaction);
},
}], getHTMLElement(ev));
}
function pick(ev: MouseEvent) {
os.pickEmoji(getHTMLElement(ev), {
showPinned: false,
}).then(it => {
const emoji = it;
if (!emojis.value.includes(emoji)) {
emojis.value.push(emoji);
}
});
}
function getHTMLElement(ev: MouseEvent): HTMLElement {
const target = ev.currentTarget ?? ev.target;
return target as HTMLElement;
}
function rename() {
os.inputText({
title: i18n.ts.rename,
default: props.palette.name,
}).then(({ canceled, result: name }) => {
if (canceled) return;
if (name != null) {
emit('updateName', name);
}
});
}
function copy() {
copyToClipboard(emojis.value.join(' '));
}
function paste() {
// TODO: validate
navigator.clipboard.readText().then(text => {
emojis.value = text.split(' ');
});
}
function del(ev: MouseEvent) {
os.popupMenu([{
text: i18n.ts.delete,
action: () => {
emit('del');
},
}], ev.currentTarget ?? ev.target);
}
</script>
<style lang="scss" module>
.tab {
margin: calc(var(--MI-margin) / 2) 0;
padding: calc(var(--MI-margin) / 2) 0;
background: var(--MI_THEME-bg);
}
.emojis {
padding: 12px;
font-size: 1.1em;
}
.emojisItem {
display: inline-block;
padding: 8px;
cursor: move;
}
.emojisAdd {
display: inline-block;
padding: 8px;
}
.editorCaption {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--MI_THEME-fgTransparentWeak);
}
</style>

251
packages/frontend/src/pages/settings/emoji-palette.vue Normal file
View file

@ -0,0 +1,251 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<SearchMarker path="/settings/emoji-palette" :label="i18n.ts.emojiPalette" :keywords="['emoji', 'palette']" icon="ti ti-mood-happy">
<div class="_gaps_m">
<FormSection first>
<template #label>{{ i18n.ts._emojiPalette.palettes }}</template>
<div class="_gaps_s">
<XPalette
v-for="palette in prefer.r.emojiPalettes.value"
:key="palette.id"
:palette="palette"
@updateEmojis="emojis => updatePaletteEmojis(palette.id, emojis)"
@updateName="name => updatePaletteName(palette.id, name)"
@del="delPalette(palette.id)"
/>
<MkButton primary rounded style="margin: auto;" @click="addPalette"><i class="ti ti-plus"></i></MkButton>
</div>
</FormSection>
<FormSection>
<div class="_gaps_m">
<SearchMarker :keywords="['sync', 'palettes', 'devices']">
<MkSwitch :modelValue="palettesSyncEnabled" @update:modelValue="changePalettesSyncEnabled">
<template #label><SearchLabel>{{ i18n.ts._emojiPalette.enableSyncBetweenDevicesForPalettes }}</SearchLabel></template>
</MkSwitch>
</SearchMarker>
</div>
</FormSection>
<FormSection>
<div class="_gaps_m">
<SearchMarker :keywords="['main', 'palette']">
<MkPreferenceContainer k="emojiPaletteForMain">
<MkSelect v-model="emojiPaletteForMain">
<template #label><SearchLabel>{{ i18n.ts._emojiPalette.paletteForMain }}</SearchLabel></template>
<option key="-" :value="null">({{ i18n.ts.auto }})</option>
<option v-for="palette in prefer.r.emojiPalettes.value" :key="palette.id" :value="palette.id">{{ palette.name === '' ? '(' + i18n.ts.noName + ')' : palette.name }}</option>
</MkSelect>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['reaction', 'palette']">
<MkPreferenceContainer k="emojiPaletteForReaction">
<MkSelect v-model="emojiPaletteForReaction">
<template #label><SearchLabel>{{ i18n.ts._emojiPalette.paletteForReaction }}</SearchLabel></template>
<option key="-" :value="null">({{ i18n.ts.auto }})</option>
<option v-for="palette in prefer.r.emojiPalettes.value" :key="palette.id" :value="palette.id">{{ palette.name === '' ? '(' + i18n.ts.noName + ')' : palette.name }}</option>
</MkSelect>
</MkPreferenceContainer>
</SearchMarker>
</div>
</FormSection>
<SearchMarker :keywords="['emoji', 'picker', 'display']">
<FormSection>
<template #label><SearchLabel>{{ i18n.ts.emojiPickerDisplay }}</SearchLabel></template>
<div class="_gaps_m">
<SearchMarker :keywords="['emoji', 'picker', 'scale', 'size']">
<MkPreferenceContainer k="emojiPickerScale">
<MkRadios v-model="emojiPickerScale">
<template #label><SearchLabel>{{ i18n.ts.size }}</SearchLabel></template>
<option :value="1">{{ i18n.ts.small }}</option>
<option :value="2">{{ i18n.ts.medium }}</option>
<option :value="3">{{ i18n.ts.large }}</option>
</MkRadios>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['emoji', 'picker', 'width', 'column', 'size']">
<MkPreferenceContainer k="emojiPickerWidth">
<MkRadios v-model="emojiPickerWidth">
<template #label><SearchLabel>{{ i18n.ts.numberOfColumn }}</SearchLabel></template>
<option :value="1">5</option>
<option :value="2">6</option>
<option :value="3">7</option>
<option :value="4">8</option>
<option :value="5">9</option>
</MkRadios>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['emoji', 'picker', 'height', 'size']">
<MkPreferenceContainer k="emojiPickerHeight">
<MkRadios v-model="emojiPickerHeight">
<template #label><SearchLabel>{{ i18n.ts.height }}</SearchLabel></template>
<option :value="1">{{ i18n.ts.small }}</option>
<option :value="2">{{ i18n.ts.medium }}</option>
<option :value="3">{{ i18n.ts.large }}</option>
<option :value="4">{{ i18n.ts.large }}+</option>
</MkRadios>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['emoji', 'picker', 'style']">
<MkPreferenceContainer k="emojiPickerStyle">
<MkSelect v-model="emojiPickerStyle">
<template #label><SearchLabel>{{ i18n.ts.style }}</SearchLabel></template>
<template #caption>{{ i18n.ts.needReloadToApply }}</template>
<option value="auto">{{ i18n.ts.auto }}</option>
<option value="popup">{{ i18n.ts.popup }}</option>
<option value="drawer">{{ i18n.ts.drawer }}</option>
</MkSelect>
</MkPreferenceContainer>
</SearchMarker>
<MkButton @click="previewPicker"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
</div>
</FormSection>
</SearchMarker>
</div>
</SearchMarker>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import { v4 as uuid } from 'uuid';
import XPalette from './emoji-palette.palette.vue';
import MkRadios from '@/components/MkRadios.vue';
import MkButton from '@/components/MkButton.vue';
import FormSection from '@/components/form/section.vue';
import MkSelect from '@/components/MkSelect.vue';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
import { definePage } from '@/page.js';
import MkFolder from '@/components/MkFolder.vue';
import { prefer } from '@/preferences.js';
import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import { emojiPicker } from '@/utility/emoji-picker.js';
const emojiPaletteForReaction = prefer.model('emojiPaletteForReaction');
const emojiPaletteForMain = prefer.model('emojiPaletteForMain');
const emojiPickerScale = prefer.model('emojiPickerScale');
const emojiPickerWidth = prefer.model('emojiPickerWidth');
const emojiPickerHeight = prefer.model('emojiPickerHeight');
const emojiPickerStyle = prefer.model('emojiPickerStyle');
const palettesSyncEnabled = ref(prefer.isSyncEnabled('emojiPalettes'));
function changePalettesSyncEnabled(value: boolean) {
if (value) {
prefer.enableSync('emojiPalettes').then((res) => {
if (res == null) return;
if (res.enabled) palettesSyncEnabled.value = true;
});
} else {
prefer.disableSync('emojiPalettes');
palettesSyncEnabled.value = false;
}
}
function addPalette() {
prefer.commit('emojiPalettes', [
...prefer.s.emojiPalettes,
{
id: uuid(),
name: '',
emojis: [],
},
]);
}
function updatePaletteEmojis(id: string, emojis: string[]) {
prefer.commit('emojiPalettes', prefer.s.emojiPalettes.map(palette => {
if (palette.id === id) {
return {
...palette,
emojis,
};
} else {
return palette;
}
}));
}
function updatePaletteName(id: string, name: string) {
prefer.commit('emojiPalettes', prefer.s.emojiPalettes.map(palette => {
if (palette.id === id) {
return {
...palette,
name,
};
} else {
return palette;
}
}));
}
function delPalette(id: string) {
if (prefer.s.emojiPalettes.length === 1) {
addPalette();
}
prefer.commit('emojiPalettes', prefer.s.emojiPalettes.filter(palette => palette.id !== id));
if (prefer.s.emojiPaletteForMain === id) {
prefer.commit('emojiPaletteForMain', null);
}
if (prefer.s.emojiPaletteForReaction === id) {
prefer.commit('emojiPaletteForReaction', null);
}
}
function getHTMLElement(ev: MouseEvent): HTMLElement {
const target = ev.currentTarget ?? ev.target;
return target as HTMLElement;
}
function previewPicker(ev: MouseEvent) {
emojiPicker.show(getHTMLElement(ev));
}
definePage(() => ({
title: i18n.ts.emojiPalette,
icon: 'ti ti-mood-happy',
}));
</script>
<style lang="scss" module>
.tab {
margin: calc(var(--MI-margin) / 2) 0;
padding: calc(var(--MI-margin) / 2) 0;
background: var(--MI_THEME-bg);
}
.emojis {
padding: 12px;
font-size: 1.1em;
}
.emojisItem {
display: inline-block;
padding: 8px;
cursor: move;
}
.emojisAdd {
display: inline-block;
padding: 8px;
}
.editorCaption {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--MI_THEME-fgTransparentWeak);
}
</style>

316
packages/frontend/src/pages/settings/emoji-picker.vue
View file

@ -1,316 +0,0 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps_m">
<MkFolder :defaultOpen="true">
<template #icon><i class="ti ti-pin"></i></template>
<template #label>{{ i18n.ts.pinned }} ({{ i18n.ts.reaction }})</template>
<template #caption>{{ i18n.ts.pinnedEmojisForReactionSettingDescription }}</template>
<div class="_gaps">
<div>
<div v-panel style="border-radius: var(--MI-radius-sm);">
<Sortable
v-model="pinnedEmojisForReaction"
:class="$style.emojis"
:itemKey="item => item"
:animation="150"
:delay="100"
:delayOnTouchOnly="true"
>
<template #item="{element}">
<button class="_button" :class="$style.emojisItem" @click="removeReaction(element, $event)">
<MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true" :fallbackToImage="true"/>
<MkEmoji v-else :emoji="element" :normal="true"/>
</button>
</template>
<template #footer>
<button class="_button" :class="$style.emojisAdd" @click="chooseReaction">
<i class="ti ti-plus"></i>
</button>
</template>
</Sortable>
</div>
<div :class="$style.editorCaption">{{ i18n.ts.reactionSettingDescription2 }}</div>
</div>
<div class="_buttons">
<MkButton inline @click="previewReaction"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
<MkButton inline danger @click="setDefaultReaction"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
<MkButton inline danger @click="overwriteFromPinnedEmojis"><i class="ti ti-copy"></i> {{ i18n.ts.overwriteFromPinnedEmojis }}</MkButton>
</div>
</div>
</MkFolder>
<MkFolder>
<template #icon><i class="ti ti-pin"></i></template>
<template #label>{{ i18n.ts.pinned }} ({{ i18n.ts.general }})</template>
<template #caption>{{ i18n.ts.pinnedEmojisSettingDescription }}</template>
<div class="_gaps">
<div>
<div v-panel style="border-radius: var(--MI-radius-sm);">
<Sortable
v-model="pinnedEmojis"
:class="$style.emojis"
:itemKey="item => item"
:animation="150"
:delay="100"
:delayOnTouchOnly="true"
>
<template #item="{element}">
<button class="_button" :class="$style.emojisItem" @click="removeEmoji(element, $event)">
<MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true" :fallbackToImage="true"/>
<MkEmoji v-else :emoji="element" :normal="true"/>
</button>
</template>
<template #footer>
<button class="_button" :class="$style.emojisAdd" @click="chooseEmoji">
<i class="ti ti-plus"></i>
</button>
</template>
</Sortable>
</div>
<div :class="$style.editorCaption">{{ i18n.ts.reactionSettingDescription2 }}</div>
</div>
<div class="_buttons">
<MkButton inline @click="previewEmoji"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
<MkButton inline danger @click="setDefaultEmoji"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
<MkButton inline danger @click="overwriteFromPinnedEmojisForReaction"><i class="ti ti-copy"></i> {{ i18n.ts.overwriteFromPinnedEmojisForReaction }}</MkButton>
</div>
</div>
</MkFolder>
<FromSlot>
<template #label>{{ i18n.ts.defaultLike }}</template>
<MkCustomEmoji v-if="like && like.startsWith(':')" style="max-height: 3em; font-size: 1.1em;" :useOriginalSize="false" :name="like" :normal="true" :noStyle="true"/>
<MkEmoji v-else-if="like && !like.startsWith(':')" :emoji="like" style="max-height: 3em; font-size: 1.1em;" :normal="true" :noStyle="true"/>
<span v-else-if="!like">{{ i18n.ts.notSet }}</span>
<div class="_buttons" style="padding-top: 8px;">
<MkButton rounded :small="true" inline @click="chooseNewLike"><i class="ph-smiley ph-bold ph-lg"></i> Change</MkButton>
<MkButton rounded :small="true" inline @click="resetLike"><i class="ph-arrow-clockwise ph-bold ph-lg"></i> Reset</MkButton>
</div>
</FromSlot>
<FormSection>
<template #label>{{ i18n.ts.emojiPickerDisplay }}</template>
<div class="_gaps_m">
<MkRadios v-model="emojiPickerScale">
<template #label>{{ i18n.ts.size }}</template>
<option :value="1">{{ i18n.ts.small }}</option>
<option :value="2">{{ i18n.ts.medium }}</option>
<option :value="3">{{ i18n.ts.large }}</option>
</MkRadios>
<MkRadios v-model="emojiPickerWidth">
<template #label>{{ i18n.ts.numberOfColumn }}</template>
<option :value="1">5</option>
<option :value="2">6</option>
<option :value="3">7</option>
<option :value="4">8</option>
<option :value="5">9</option>
</MkRadios>
<MkRadios v-model="emojiPickerHeight">
<template #label>{{ i18n.ts.height }}</template>
<option :value="1">{{ i18n.ts.small }}</option>
<option :value="2">{{ i18n.ts.medium }}</option>
<option :value="3">{{ i18n.ts.large }}</option>
<option :value="4">{{ i18n.ts.large }}+</option>
</MkRadios>
<MkSelect v-model="emojiPickerStyle">
<template #label>{{ i18n.ts.style }}</template>
<template #caption>{{ i18n.ts.needReloadToApply }}</template>
<option value="auto">{{ i18n.ts.auto }}</option>
<option value="popup">{{ i18n.ts.popup }}</option>
<option value="drawer">{{ i18n.ts.drawer }}</option>
</MkSelect>
</div>
</FormSection>
</div>
</template>
<script lang="ts" setup>
import { computed, ref, Ref, watch } from 'vue';
import Sortable from 'vuedraggable';
import MkRadios from '@/components/MkRadios.vue';
import MkButton from '@/components/MkButton.vue';
import FormSection from '@/components/form/section.vue';
import FromSlot from '@/components/form/slot.vue';
import MkSelect from '@/components/MkSelect.vue';
import * as os from '@/os.js';
import { defaultStore } from '@/store.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { deepClone } from '@/scripts/clone.js';
import { reactionPicker } from '@/scripts/reaction-picker.js';
import { emojiPicker } from '@/scripts/emoji-picker.js';
import { unisonReload } from '@/scripts/unison-reload.js';
import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
import MkEmoji from '@/components/global/MkEmoji.vue';
import MkFolder from '@/components/MkFolder.vue';
const pinnedEmojisForReaction: Ref<string[]> = ref(deepClone(defaultStore.state.reactions));
const pinnedEmojis: Ref<string[]> = ref(deepClone(defaultStore.state.pinnedEmojis));
const emojiPickerScale = computed(defaultStore.makeGetterSetter('emojiPickerScale'));
const emojiPickerWidth = computed(defaultStore.makeGetterSetter('emojiPickerWidth'));
const emojiPickerHeight = computed(defaultStore.makeGetterSetter('emojiPickerHeight'));
const emojiPickerStyle = computed(defaultStore.makeGetterSetter('emojiPickerStyle'));
const removeReaction = (reaction: string, ev: MouseEvent) => remove(pinnedEmojisForReaction, reaction, ev);
const chooseReaction = (ev: MouseEvent) => pickEmoji(pinnedEmojisForReaction, ev);
const setDefaultReaction = () => setDefault(pinnedEmojisForReaction);
const like = computed(defaultStore.makeGetterSetter('like'));
const removeEmoji = (reaction: string, ev: MouseEvent) => remove(pinnedEmojis, reaction, ev);
const chooseEmoji = (ev: MouseEvent) => pickEmoji(pinnedEmojis, ev);
const setDefaultEmoji = () => setDefault(pinnedEmojis);
function previewReaction(ev: MouseEvent) {
reactionPicker.show(getHTMLElement(ev), null);
}
function previewEmoji(ev: MouseEvent) {
emojiPicker.show(getHTMLElement(ev));
}
async function overwriteFromPinnedEmojis() {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.ts.overwriteContentConfirm,
});
if (canceled) {
return;
}
pinnedEmojisForReaction.value = [...pinnedEmojis.value];
}
async function overwriteFromPinnedEmojisForReaction() {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.ts.overwriteContentConfirm,
});
if (canceled) {
return;
}
pinnedEmojis.value = [...pinnedEmojisForReaction.value];
}
function remove(itemsRef: Ref<string[]>, reaction: string, ev: MouseEvent) {
os.popupMenu([{
text: i18n.ts.remove,
action: () => {
itemsRef.value = itemsRef.value.filter(x => x !== reaction);
},
}], getHTMLElement(ev));
}
async function setDefault(itemsRef: Ref<string[]>) {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.ts.resetAreYouSure,
});
if (canceled) return;
itemsRef.value = deepClone(defaultStore.def.reactions.default);
}
async function pickEmoji(itemsRef: Ref<string[]>, ev: MouseEvent) {
os.pickEmoji(getHTMLElement(ev), {
showPinned: false,
}).then(it => {
const emoji = it;
if (!itemsRef.value.includes(emoji)) {
itemsRef.value.push(emoji);
}
});
}
async function reloadAsk() {
const { canceled } = await os.confirm({
type: 'info',
text: i18n.ts.reloadToApplySetting,
});
if (canceled) return;
unisonReload();
}
function chooseNewLike(ev: MouseEvent) {
os.pickEmoji(getHTMLElement(ev), {
showPinned: false,
}).then(async emoji => {
defaultStore.set('like', emoji as string);
await reloadAsk();
});
}
async function resetLike() {
defaultStore.set('like', null);
await reloadAsk();
}
function getHTMLElement(ev: MouseEvent): HTMLElement {
const target = ev.currentTarget ?? ev.target;
return target as HTMLElement;
}
watch(pinnedEmojisForReaction, () => {
defaultStore.set('reactions', pinnedEmojisForReaction.value);
}, {
deep: true,
});
watch(pinnedEmojis, () => {
defaultStore.set('pinnedEmojis', pinnedEmojis.value);
}, {
deep: true,
});
definePageMetadata(() => ({
title: i18n.ts.emojiPicker,
icon: 'ti ti-mood-happy',
}));
</script>
<style lang="scss" module>
.tab {
margin: calc(var(--MI-margin) / 2) 0;
padding: calc(var(--MI-margin) / 2) 0;
background: var(--MI_THEME-bg);
}
.emojis {
padding: 12px;
font-size: 1.1em;
}
.emojisItem {
display: inline-block;
padding: 8px;
cursor: move;
}
.emojisAdd {
display: inline-block;
padding: 8px;
}
.editorCaption {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--MI_THEME-fgTransparentWeak);
}
</style>

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

@ -1,623 +0,0 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps_m">
<MkSelect v-model="lang">
<template #label>{{ i18n.ts.uiLanguage }}</template>
<option v-for="x in langs" :key="x[0]" :value="x[0]">{{ x[1] }}</option>
<template #caption>
<I18n :src="i18n.ts.i18nInfo" tag="span">
<template #link>
<MkLink url="https://crowdin.com/project/misskey">Crowdin</MkLink>
</template>
</I18n>
</template>
</MkSelect>
<MkRadios v-model="overridedDeviceKind">
<template #label>{{ i18n.ts.overridedDeviceKind }}</template>
<option :value="null">{{ i18n.ts.auto }}</option>
<option value="smartphone"><i class="ti ti-device-mobile"/> {{ i18n.ts.smartphone }}</option>
<option value="tablet"><i class="ti ti-device-tablet"/> {{ i18n.ts.tablet }}</option>
<option value="desktop"><i class="ti ti-device-desktop"/> {{ i18n.ts.desktop }}</option>
</MkRadios>
<FormSection>
<div class="_gaps_s">
<MkSwitch v-model="showFixedPostForm">{{ i18n.ts.showFixedPostForm }}</MkSwitch>
<MkSwitch v-model="showFixedPostFormInChannel">{{ i18n.ts.showFixedPostFormInChannel }}</MkSwitch>
<MkFolder>
<template #label>{{ i18n.ts.pinnedList }}</template>
<!-- 複数ピン止め管理できるようにしたいけどめんどいので一旦ひとつのみ -->
<MkButton v-if="defaultStore.reactiveState.pinnedUserLists.value.length === 0" @click="setPinnedList()">{{ i18n.ts.add }}</MkButton>
<MkButton v-else danger @click="removePinnedList()"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
</MkFolder>
</div>
</FormSection>
<FormSection>
<template #label>{{ i18n.ts.displayOfNote }}</template>
<div class="_gaps_m">
<div class="_gaps_s">
<MkSwitch v-model="collapseRenotes">
<template #label>{{ i18n.ts.collapseRenotes }}</template>
<template #caption>{{ i18n.ts.collapseRenotesDescription }}</template>
</MkSwitch>
<MkSwitch v-model="collapseNotesRepliedTo">{{ i18n.ts.collapseNotesRepliedTo }}</MkSwitch>
<MkSwitch v-model="collapseFiles">{{ i18n.ts.collapseFiles }}</MkSwitch>
<MkSwitch v-model="uncollapseCW">{{ i18n.ts.uncollapseCW }}</MkSwitch>
<MkSwitch v-model="expandLongNote">{{ i18n.ts.expandLongNote }}</MkSwitch>
<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
<MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</MkSwitch>
<MkSwitch v-model="autoloadConversation">{{ i18n.ts.autoloadConversation }}</MkSwitch>
<MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</MkSwitch>
<MkSwitch v-if="advancedMfm" v-model="animatedMfm">{{ i18n.ts.enableAnimatedMfm }}</MkSwitch>
<MkSwitch v-if="advancedMfm" v-model="enableQuickAddMfmFunction">{{ i18n.ts.enableQuickAddMfmFunction }}</MkSwitch>
<MkSwitch v-model="showReactionsCount">{{ i18n.ts.showReactionsCount }}</MkSwitch>
<MkSwitch v-model="showGapBetweenNotesInTimeline">{{ i18n.ts.showGapBetweenNotesInTimeline }}</MkSwitch>
<MkSwitch v-model="loadRawImages">{{ i18n.ts.loadRawImages }}</MkSwitch>
<MkSwitch v-model="showTickerOnReplies">{{ i18n.ts.showTickerOnReplies }}</MkSwitch>
<MkSwitch v-model="disableCatSpeak">{{ i18n.ts.disableCatSpeak }}</MkSwitch>
<MkSelect v-model="searchEngine" placeholder="Other">
<template #label>{{ i18n.ts.searchEngine }}</template>
<option
v-for="[key, value] in Object.entries(searchEngineMap)" :key="key" :value="key"
>
{{ value }}
</option>
<!-- If the user is on Other and enters a domain add this one so that the dropdown doesnt go blank -->
<option v-if="useCustomSearchEngine" :value="searchEngine">
{{ i18n.ts.searchEngineOther }}
</option>
<!-- If one of the other options is selected show this as a blank other -->
<option v-if="!useCustomSearchEngine" value="">{{ i18n.ts.searchEngineOther }}</option>
</MkSelect>
<div v-if="useCustomSearchEngine">
<MkInput v-model="searchEngine" :max="300" :manualSave="true">
<template #label>{{ i18n.ts.searchEngineCusomURI }}</template>
<template #caption>{{ i18n.ts.searchEngineCustomURIDescription }}</template>
</MkInput>
</div>
<MkRadios v-model="reactionsDisplaySize">
<template #label>{{ i18n.ts.reactionsDisplaySize }}</template>
<option value="small">{{ i18n.ts.small }}</option>
<option value="medium">{{ i18n.ts.medium }}</option>
<option value="large">{{ i18n.ts.large }}</option>
</MkRadios>
<MkRadios v-model="noteDesign">
<template #label>Note Design</template>
<option value="sharkey"><i class="sk-icons sk-shark sk-icons-lg" style="top: 2px;position: relative;"></i> Sharkey</option>
<option value="misskey"><i class="sk-icons sk-misskey sk-icons-lg" style="top: 2px;position: relative;"></i> Misskey</option>
</MkRadios>
<MkSwitch v-model="limitWidthOfReaction">{{ i18n.ts.limitWidthOfReaction }}</MkSwitch>
</div>
<MkSelect v-if="instance.federation !== 'none'" v-model="instanceTicker">
<template #label>{{ i18n.ts.instanceTicker }}</template>
<option value="none">{{ i18n.ts._instanceTicker.none }}</option>
<option value="remote">{{ i18n.ts._instanceTicker.remote }}</option>
<option value="always">{{ i18n.ts._instanceTicker.always }}</option>
</MkSelect>
<MkSelect v-model="nsfw">
<template #label>{{ i18n.ts.displayOfSensitiveMedia }}</template>
<option value="respect">{{ i18n.ts._displayOfSensitiveMedia.respect }}</option>
<option value="ignore">{{ i18n.ts._displayOfSensitiveMedia.ignore }}</option>
<option value="force">{{ i18n.ts._displayOfSensitiveMedia.force }}</option>
</MkSelect>
<MkRadios v-model="mediaListWithOneImageAppearance">
<template #label>{{ i18n.ts.mediaListWithOneImageAppearance }}</template>
<option value="expand">{{ i18n.ts.default }}</option>
<option value="16_9">{{ i18n.tsx.limitTo({ x: '16:9' }) }}</option>
<option value="1_1">{{ i18n.tsx.limitTo({ x: '1:1' }) }}</option>
<option value="2_3">{{ i18n.tsx.limitTo({ x: '2:3' }) }}</option>
</MkRadios>
<MkRange v-model="numberOfReplies" :min="2" :max="20" :step="1" easing>
<template #label>{{ i18n.ts.numberOfReplies }}</template>
<template #caption>{{ i18n.ts.numberOfRepliesDescription }}</template>
</MkRange>
</div>
</FormSection>
<FormSection>
<template #label>{{ i18n.ts.notificationDisplay }}</template>
<div class="_gaps_m">
<MkSwitch v-model="useGroupedNotifications">{{ i18n.ts.useGroupedNotifications }}</MkSwitch>
<MkSwitch v-model="enableFaviconNotificationDot">
{{ i18n.ts.enableFaviconNotificationDot }}
<template #caption>
<I18n :src="i18n.ts.notificationDotNotWorkingAdvice" tag="span">
<template #link>
<MkLink url="https://docs.joinsharkey.org/docs/install/faqs/#ive-enabled-the-notification-dot-but-it-doesnt-show">{{ i18n.ts._mfm.link }}</MkLink>
</template>
</I18n>
</template>
</MkSwitch>
<MkButton @click="testNotificationDot">{{ i18n.ts.verifyNotificationDotWorkingButton }}</MkButton>
<MkRadios v-model="notificationPosition">
<template #label>{{ i18n.ts.position }}</template>
<option value="leftTop"><i class="ti ti-align-box-left-top"></i> {{ i18n.ts.leftTop }}</option>
<option value="rightTop"><i class="ti ti-align-box-right-top"></i> {{ i18n.ts.rightTop }}</option>
<option value="leftBottom"><i class="ti ti-align-box-left-bottom"></i> {{ i18n.ts.leftBottom }}</option>
<option value="rightBottom"><i class="ti ti-align-box-right-bottom"></i> {{ i18n.ts.rightBottom }}</option>
</MkRadios>
<MkRadios v-model="notificationStackAxis">
<template #label>{{ i18n.ts.stackAxis }}</template>
<option value="vertical"><i class="ti ti-carousel-vertical"></i> {{ i18n.ts.vertical }}</option>
<option value="horizontal"><i class="ti ti-carousel-horizontal"></i> {{ i18n.ts.horizontal }}</option>
</MkRadios>
<MkSwitch v-model="notificationClickable">{{ i18n.ts.allowClickingNotifications }}</MkSwitch>
<MkButton @click="testNotification">{{ i18n.ts._notification.checkNotificationBehavior }}</MkButton>
</div>
</FormSection>
<FormSection>
<template #label>{{ i18n.ts.appearance }}</template>
<div class="_gaps_m">
<div class="_gaps_s">
<MkSwitch v-model="reduceAnimation">{{ i18n.ts.reduceUiAnimation }}</MkSwitch>
<MkSwitch v-model="useBlurEffect">{{ i18n.ts.useBlurEffect }}</MkSwitch>
<MkSwitch v-model="useBlurEffectForModal">{{ i18n.ts.useBlurEffectForModal }}</MkSwitch>
<MkSwitch v-model="disableShowingAnimatedImages">{{ i18n.ts.disableShowingAnimatedImages }}</MkSwitch>
<MkSwitch v-model="highlightSensitiveMedia">{{ i18n.ts.highlightSensitiveMedia }}</MkSwitch>
<MkSwitch v-model="squareAvatars">{{ i18n.ts.squareAvatars }}</MkSwitch>
<MkSwitch v-model="showAvatarDecorations">{{ i18n.ts.showAvatarDecorations }}</MkSwitch>
<MkSwitch v-model="useSystemFont">{{ i18n.ts.useSystemFont }}</MkSwitch>
<MkSwitch v-model="forceShowAds">{{ i18n.ts.forceShowAds }}</MkSwitch>
<MkSwitch v-model="oneko">{{ i18n.ts.oneko }}</MkSwitch>
<MkSwitch v-model="enableSeasonalScreenEffect">{{ i18n.ts.seasonalScreenEffect }}</MkSwitch>
<MkSwitch v-model="useNativeUIForVideoAudioPlayer">{{ i18n.ts.useNativeUIForVideoAudioPlayer }}</MkSwitch>
</div>
<MkSelect v-model="menuStyle">
<template #label>{{ i18n.ts.menuStyle }}</template>
<option value="auto">{{ i18n.ts.auto }}</option>
<option value="popup">{{ i18n.ts.popup }}</option>
<option value="drawer">{{ i18n.ts.drawer }}</option>
</MkSelect>
<div>
<MkRadios v-model="emojiStyle">
<template #label>{{ i18n.ts.emojiStyle }}</template>
<option value="native">{{ i18n.ts.native }}</option>
<option value="fluentEmoji">Fluent Emoji</option>
<option value="twemoji">Twemoji</option>
<option value="tossface">Tossface</option>
</MkRadios>
<div style="margin: 8px 0 0 0; font-size: 1.5em;"><Mfm :key="emojiStyle" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
</div>
<MkRadios v-model="fontSize">
<template #label>{{ i18n.ts.fontSize }}</template>
<option :value="null"><span style="font-size: 14px;">Aa</span></option>
<option value="1"><span style="font-size: 15px;">Aa</span></option>
<option value="2"><span style="font-size: 16px;">Aa</span></option>
<option value="3"><span style="font-size: 17px;">Aa</span></option>
</MkRadios>
<MkRadios v-model="cornerRadius">
<template #label>{{ i18n.ts.cornerRadius }}</template>
<option :value="null"><i class="sk-icons sk-shark sk-icons-lg" style="top: 2px;position: relative;"></i> Sharkey</option>
<option value="misskey"><i class="sk-icons sk-misskey sk-icons-lg" style="top: 2px;position: relative;"></i> Misskey</option>
</MkRadios>
</div>
</FormSection>
<FormSection>
<template #label>{{ i18n.ts.behavior }}</template>
<div class="_gaps_m">
<div class="_gaps_s">
<MkSwitch v-model="warnMissingAltText">{{ i18n.ts.warnForMissingAltText }}</MkSwitch>
<MkSwitch v-model="imageNewTab">{{ i18n.ts.openImageInNewTab }}</MkSwitch>
<MkSwitch v-model="useReactionPickerForContextMenu">{{ i18n.ts.useReactionPickerForContextMenu }}</MkSwitch>
<MkSwitch v-model="enableInfiniteScroll">{{ i18n.ts.enableInfiniteScroll }}</MkSwitch>
<MkSwitch v-model="keepScreenOn">{{ i18n.ts.keepScreenOn }}</MkSwitch>
<MkSwitch v-model="clickToOpen">{{ i18n.ts.clickToOpen }}</MkSwitch>
<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>
<MkSwitch v-model="warnExternalUrl">{{ i18n.ts.warnExternalUrl }}</MkSwitch>
</div>
<MkSelect v-model="serverDisconnectedBehavior">
<template #label>{{ i18n.ts.whenServerDisconnected }}</template>
<option value="dialog">{{ i18n.ts._serverDisconnectedBehavior.dialog }}</option>
<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>
</MkRange>
<MkFolder>
<template #label>{{ i18n.ts.boostSettings }}</template>
<div class="_gaps_m">
<MkSwitch v-model="showVisibilitySelectorOnBoost">
{{ i18n.ts.showVisibilitySelectorOnBoost }}
<template #caption>{{ i18n.ts.showVisibilitySelectorOnBoostDescription }}</template>
</MkSwitch>
<MkSelect v-model="visibilityOnBoost">
<template #label>{{ i18n.ts.visibilityOnBoost }}</template>
<option value="public">{{ i18n.ts._visibility['public'] }}</option>
<option value="home">{{ i18n.ts._visibility['home'] }}</option>
<option value="followers">{{ i18n.ts._visibility['followers'] }}</option>
</MkSelect>
</div>
</MkFolder>
<MkFolder>
<template #label>{{ i18n.ts.dataSaver }}</template>
<div class="_gaps_m">
<MkInfo>{{ i18n.ts.reloadRequiredToApplySettings }}</MkInfo>
<div class="_buttons">
<MkButton inline @click="enableAllDataSaver">{{ i18n.ts.enableAll }}</MkButton>
<MkButton inline @click="disableAllDataSaver">{{ i18n.ts.disableAll }}</MkButton>
</div>
<div class="_gaps_m">
<MkSwitch v-model="dataSaver.media">
{{ i18n.ts._dataSaver._media.title }}
<template #caption>{{ i18n.ts._dataSaver._media.description }}</template>
</MkSwitch>
<MkSwitch v-model="dataSaver.avatar">
{{ i18n.ts._dataSaver._avatar.title }}
<template #caption>{{ i18n.ts._dataSaver._avatar.description }}</template>
</MkSwitch>
<MkSwitch v-model="dataSaver.urlPreview">
{{ i18n.ts._dataSaver._urlPreview.title }}
<template #caption>{{ i18n.ts._dataSaver._urlPreview.description }}</template>
</MkSwitch>
<MkSwitch v-model="dataSaver.code">
{{ i18n.ts._dataSaver._code.title }}
<template #caption>{{ i18n.ts._dataSaver._code.description }}</template>
</MkSwitch>
</div>
</div>
</MkFolder>
</div>
</FormSection>
<FormSection>
<template #label>{{ i18n.ts.other }}</template>
<div class="_gaps">
<MkRadios v-model="hemisphere">
<template #label>{{ i18n.ts.hemisphere }}</template>
<option value="N">{{ i18n.ts._hemisphere.N }}</option>
<option value="S">{{ i18n.ts._hemisphere.S }}</option>
<template #caption>{{ i18n.ts._hemisphere.caption }}</template>
</MkRadios>
<MkFolder>
<template #label>{{ i18n.ts.additionalEmojiDictionary }}</template>
<div class="_buttons">
<template v-for="lang in emojiIndexLangs" :key="lang">
<MkButton v-if="defaultStore.reactiveState.additionalUnicodeEmojiIndexes.value[lang]" danger @click="removeEmojiIndex(lang)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }} ({{ getEmojiIndexLangName(lang) }})</MkButton>
<MkButton v-else @click="downloadEmojiIndex(lang)"><i class="ti ti-download"></i> {{ getEmojiIndexLangName(lang) }}{{ defaultStore.reactiveState.additionalUnicodeEmojiIndexes.value[lang] ? ` (${ i18n.ts.installed })` : '' }}</MkButton>
</template>
</div>
</MkFolder>
<FormLink to="/settings/deck">{{ i18n.ts.deck }}</FormLink>
<FormLink to="/settings/custom-css"><template #icon><i class="ti ti-code"></i></template>{{ i18n.ts.customCss }}</FormLink>
</div>
</FormSection>
</div>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import * as Misskey from 'misskey-js';
import { langs } from '@@/js/config.js';
import MkSwitch from '@/components/MkSwitch.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkRadios from '@/components/MkRadios.vue';
import MkInput from '@/components/MkInput.vue';
import MkRange from '@/components/MkRange.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkButton from '@/components/MkButton.vue';
import FormSection from '@/components/form/section.vue';
import FormLink from '@/components/form/link.vue';
import MkLink from '@/components/MkLink.vue';
import MkInfo from '@/components/MkInfo.vue';
import { searchEngineMap } from '@/scripts/search-engine-map.js';
import { defaultStore } from '@/store.js';
import * as os from '@/os.js';
import { instance } from '@/instance.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { reloadAsk } from '@/scripts/reload-ask.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { miLocalStorage } from '@/local-storage.js';
import { globalEvents } from '@/events.js';
import { claimAchievement } from '@/scripts/achievements.js';
import { worksOnInstance } from '@/scripts/favicon-dot.js';
const lang = ref(miLocalStorage.getItem('lang'));
const fontSize = ref(miLocalStorage.getItem('fontSize'));
const cornerRadius = ref(miLocalStorage.getItem('cornerRadius'));
const useSystemFont = ref(miLocalStorage.getItem('useSystemFont') != null);
const dataSaver = ref(defaultStore.state.dataSaver);
const hemisphere = computed(defaultStore.makeGetterSetter('hemisphere'));
const overridedDeviceKind = computed(defaultStore.makeGetterSetter('overridedDeviceKind'));
const serverDisconnectedBehavior = computed(defaultStore.makeGetterSetter('serverDisconnectedBehavior'));
const showNoteActionsOnlyHover = computed(defaultStore.makeGetterSetter('showNoteActionsOnlyHover'));
const showClipButtonInNoteFooter = computed(defaultStore.makeGetterSetter('showClipButtonInNoteFooter'));
const reactionsDisplaySize = computed(defaultStore.makeGetterSetter('reactionsDisplaySize'));
const limitWidthOfReaction = computed(defaultStore.makeGetterSetter('limitWidthOfReaction'));
const collapseRenotes = computed(defaultStore.makeGetterSetter('collapseRenotes'));
const collapseNotesRepliedTo = computed(defaultStore.makeGetterSetter('collapseNotesRepliedTo'));
const clickToOpen = computed(defaultStore.makeGetterSetter('clickToOpen'));
const collapseFiles = computed(defaultStore.makeGetterSetter('collapseFiles'));
const autoloadConversation = computed(defaultStore.makeGetterSetter('autoloadConversation'));
const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v => !v, v => !v));
const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal'));
const useBlurEffect = computed(defaultStore.makeGetterSetter('useBlurEffect'));
const showGapBetweenNotesInTimeline = computed(defaultStore.makeGetterSetter('showGapBetweenNotesInTimeline'));
const animatedMfm = computed(defaultStore.makeGetterSetter('animatedMfm'));
const advancedMfm = computed(defaultStore.makeGetterSetter('advancedMfm'));
const showReactionsCount = computed(defaultStore.makeGetterSetter('showReactionsCount'));
const enableQuickAddMfmFunction = computed(defaultStore.makeGetterSetter('enableQuickAddMfmFunction'));
const emojiStyle = computed(defaultStore.makeGetterSetter('emojiStyle'));
const menuStyle = computed(defaultStore.makeGetterSetter('menuStyle'));
const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages'));
const forceShowAds = computed(defaultStore.makeGetterSetter('forceShowAds'));
const oneko = computed(defaultStore.makeGetterSetter('oneko'));
const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages'));
const disableCatSpeak = computed(defaultStore.makeGetterSetter('disableCatSpeak'));
const highlightSensitiveMedia = computed(defaultStore.makeGetterSetter('highlightSensitiveMedia'));
const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab'));
const enableFaviconNotificationDot = computed(defaultStore.makeGetterSetter('enableFaviconNotificationDot'));
const warnMissingAltText = computed(defaultStore.makeGetterSetter('warnMissingAltText'));
const nsfw = computed(defaultStore.makeGetterSetter('nsfw'));
const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostForm'));
const showFixedPostFormInChannel = computed(defaultStore.makeGetterSetter('showFixedPostFormInChannel'));
const numberOfPageCache = computed(defaultStore.makeGetterSetter('numberOfPageCache'));
const numberOfReplies = computed(defaultStore.makeGetterSetter('numberOfReplies'));
const instanceTicker = computed(defaultStore.makeGetterSetter('instanceTicker'));
const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfiniteScroll'));
const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu'));
const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars'));
const showAvatarDecorations = computed(defaultStore.makeGetterSetter('showAvatarDecorations'));
const mediaListWithOneImageAppearance = computed(defaultStore.makeGetterSetter('mediaListWithOneImageAppearance'));
const notificationPosition = computed(defaultStore.makeGetterSetter('notificationPosition'));
const notificationStackAxis = computed(defaultStore.makeGetterSetter('notificationStackAxis'));
const notificationClickable = computed(defaultStore.makeGetterSetter('notificationClickable'));
const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn'));
const disableStreamingTimeline = computed(defaultStore.makeGetterSetter('disableStreamingTimeline'));
const useGroupedNotifications = computed(defaultStore.makeGetterSetter('useGroupedNotifications'));
const showTickerOnReplies = computed(defaultStore.makeGetterSetter('showTickerOnReplies'));
const searchEngine = computed(defaultStore.makeGetterSetter('searchEngine'));
const noteDesign = computed(defaultStore.makeGetterSetter('noteDesign'));
const uncollapseCW = computed(defaultStore.makeGetterSetter('uncollapseCW'));
const expandLongNote = computed(defaultStore.makeGetterSetter('expandLongNote'));
const enableSeasonalScreenEffect = computed(defaultStore.makeGetterSetter('enableSeasonalScreenEffect'));
const showVisibilitySelectorOnBoost = computed(defaultStore.makeGetterSetter('showVisibilitySelectorOnBoost'));
const visibilityOnBoost = computed(defaultStore.makeGetterSetter('visibilityOnBoost'));
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'));
const warnExternalUrl = computed(defaultStore.makeGetterSetter('warnExternalUrl'));
watch(lang, () => {
miLocalStorage.setItem('lang', lang.value as string);
miLocalStorage.removeItem('locale');
miLocalStorage.removeItem('localeVersion');
});
watch(fontSize, () => {
if (fontSize.value == null) {
miLocalStorage.removeItem('fontSize');
} else {
miLocalStorage.setItem('fontSize', fontSize.value);
}
});
watch(cornerRadius, () => {
if (cornerRadius.value == null) {
miLocalStorage.removeItem('cornerRadius');
} else {
miLocalStorage.setItem('cornerRadius', cornerRadius.value);
}
});
watch(useSystemFont, () => {
if (useSystemFont.value) {
miLocalStorage.setItem('useSystemFont', 't');
} else {
miLocalStorage.removeItem('useSystemFont');
}
});
watch(noteDesign, async (newval) => {
if (noteDesign.value === newval) {
await reloadAsk({});
}
});
watch([
hemisphere,
lang,
fontSize,
cornerRadius,
useSystemFont,
enableInfiniteScroll,
squareAvatars,
showNoteActionsOnlyHover,
showGapBetweenNotesInTimeline,
instanceTicker,
overridedDeviceKind,
mediaListWithOneImageAppearance,
reactionsDisplaySize,
limitWidthOfReaction,
highlightSensitiveMedia,
keepScreenOn,
disableStreamingTimeline,
enableSeasonalScreenEffect,
showVisibilitySelectorOnBoost,
visibilityOnBoost,
alwaysConfirmFollow,
confirmWhenRevealingSensitiveMedia,
contextMenu,
warnExternalUrl,
], async () => {
await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
});
const emojiIndexLangs = ['en-US', 'ja-JP', 'ja-JP_hira'] as const;
function getEmojiIndexLangName(targetLang: typeof emojiIndexLangs[number]) {
if (langs.find(x => x[0] === targetLang)) {
return langs.find(x => x[0] === targetLang)![1];
} else {
// 絵文字辞書限定の言語定義
switch (targetLang) {
case 'ja-JP_hira': return 'ひらがな';
default: return targetLang;
}
}
}
function downloadEmojiIndex(lang: typeof emojiIndexLangs[number]) {
async function main() {
const currentIndexes = defaultStore.state.additionalUnicodeEmojiIndexes;
function download() {
switch (lang) {
case 'en-US': return import('../../unicode-emoji-indexes/en-US.json').then(x => x.default);
case 'ja-JP': return import('../../unicode-emoji-indexes/ja-JP.json').then(x => x.default);
case 'ja-JP_hira': return import('../../unicode-emoji-indexes/ja-JP_hira.json').then(x => x.default);
default: throw new Error('unrecognized lang: ' + lang);
}
}
currentIndexes[lang] = await download();
await defaultStore.set('additionalUnicodeEmojiIndexes', currentIndexes);
}
os.promiseDialog(main());
}
function removeEmojiIndex(lang: string) {
async function main() {
const currentIndexes = defaultStore.state.additionalUnicodeEmojiIndexes;
delete currentIndexes[lang];
await defaultStore.set('additionalUnicodeEmojiIndexes', currentIndexes);
}
os.promiseDialog(main());
}
async function setPinnedList() {
const lists = await misskeyApi('users/lists/list');
const { canceled, result: list } = await os.select({
title: i18n.ts.selectList,
items: lists.map(x => ({
value: x, text: x.name,
})),
});
if (canceled) return;
defaultStore.set('pinnedUserLists', [list]);
}
function removePinnedList() {
defaultStore.set('pinnedUserLists', []);
}
let smashCount = 0;
let smashTimer: number | null = null;
function testNotification(): void {
const notification: Misskey.entities.Notification = {
id: Math.random().toString(),
createdAt: new Date().toUTCString(),
isRead: false,
type: 'test',
};
globalEvents.emit('clientNotification', notification);
// セルフ通知破壊 実績関連
smashCount++;
if (smashCount >= 10) {
claimAchievement('smashTestNotificationButton');
smashCount = 0;
}
if (smashTimer) {
clearTimeout(smashTimer);
}
smashTimer = window.setTimeout(() => {
smashCount = 0;
}, 300);
}
async function testNotificationDot() {
const success = await worksOnInstance();
if (success) {
os.toast(i18n.ts.notificationDotWorking);
} else {
os.toast(i18n.ts.notificationDotNotWorking);
}
}
function enableAllDataSaver() {
const g = { ...defaultStore.state.dataSaver };
Object.keys(g).forEach((key) => { g[key] = true; });
dataSaver.value = g;
}
function disableAllDataSaver() {
const g = { ...defaultStore.state.dataSaver };
Object.keys(g).forEach((key) => { g[key] = false; });
dataSaver.value = g;
}
watch(dataSaver, (to) => {
defaultStore.set('dataSaver', to);
}, {
deep: true,
});
const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
title: i18n.ts.general,
icon: 'ti ti-adjustments',
}));
const useCustomSearchEngine = computed(() => !Object.keys(searchEngineMap).includes(searchEngine.value));
</script>

263
packages/frontend/src/pages/settings/import-export.vue
View file

@ -1,263 +0,0 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps_m">
<FormSection first>
<template #label><i class="ti ti-pencil"></i> {{ i18n.ts._exportOrImport.allNotes }}</template>
<div class="_gaps_s">
<MkFolder>
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportNotes()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
<MkFolder v-if="$i && $i.policies.canImportNotes">
<template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ph-upload ph-bold ph-lg"></i></template>
<MkRadios v-model="noteType" style="padding-bottom: 8px;" small>
<template #label>Origin</template>
<option value="Misskey">Misskey/Firefish</option>
<option value="Mastodon">Mastodon/Pleroma/Akkoma</option>
<option value="Twitter">Twitter</option>
<option value="Instagram">Instagram</option>
<option value="Facebook">Facebook</option>
</MkRadios>
<MkButton primary :class="$style.button" inline @click="importNotes($event)"><i class="ph-upload ph-bold ph-lg"></i> {{ i18n.ts.import }}</MkButton>
</MkFolder>
</div>
</FormSection>
<FormSection>
<template #label><i class="ti ti-star"></i> {{ i18n.ts._exportOrImport.favoritedNotes }}</template>
<MkFolder>
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportFavorites()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
</FormSection>
<FormSection>
<template #label><i class="ph-paperclip ph-bold ph-lg"></i> {{ i18n.ts._exportOrImport.clips }}</template>
<MkFolder>
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportClips()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
</FormSection>
<FormSection>
<template #label><i class="ti ti-users"></i> {{ i18n.ts._exportOrImport.followingList }}</template>
<div class="_gaps_s">
<MkFolder>
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<div class="_gaps_s">
<MkSwitch v-model="excludeMutingUsers">
{{ i18n.ts._exportOrImport.excludeMutingUsers }}
</MkSwitch>
<MkSwitch v-model="excludeInactiveUsers">
{{ i18n.ts._exportOrImport.excludeInactiveUsers }}
</MkSwitch>
<MkButton primary :class="$style.button" inline @click="exportFollowing()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</div>
</MkFolder>
<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportFollowing">
<template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></template>
<MkSwitch v-model="withReplies">
{{ i18n.ts._exportOrImport.withReplies }}
</MkSwitch>
<MkButton primary :class="$style.button" inline @click="importFollowing($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
</MkFolder>
</div>
</FormSection>
<FormSection>
<template #label><i class="ti ti-users"></i> {{ i18n.ts._exportOrImport.userLists }}</template>
<div class="_gaps_s">
<MkFolder>
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportUserLists()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportUserLists">
<template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></template>
<MkButton primary :class="$style.button" inline @click="importUserLists($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
</MkFolder>
</div>
</FormSection>
<FormSection>
<template #label><i class="ti ti-user-off"></i> {{ i18n.ts._exportOrImport.muteList }}</template>
<div class="_gaps_s">
<MkFolder>
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportMuting()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportMuting">
<template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></template>
<MkButton primary :class="$style.button" inline @click="importMuting($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
</MkFolder>
</div>
</FormSection>
<FormSection>
<template #label><i class="ti ti-user-off"></i> {{ i18n.ts._exportOrImport.blockingList }}</template>
<div class="_gaps_s">
<MkFolder>
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportBlocking()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportBlocking">
<template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></template>
<MkButton primary :class="$style.button" inline @click="importBlocking($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
</MkFolder>
</div>
</FormSection>
<FormSection>
<template #label><i class="ti ti-antenna"></i> {{ i18n.ts.antennas }}</template>
<div class="_gaps_s">
<MkFolder>
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportAntennas()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportAntennas">
<template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></template>
<MkButton primary :class="$style.button" inline @click="importAntennas($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
</MkFolder>
</div>
</FormSection>
</div>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import MkButton from '@/components/MkButton.vue';
import FormSection from '@/components/form/section.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkRadios from '@/components/MkRadios.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { selectFile } from '@/scripts/select-file.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { $i } from '@/account.js';
import { defaultStore } from '@/store.js';
const excludeMutingUsers = ref(false);
const excludeInactiveUsers = ref(false);
const noteType = ref(null);
const withReplies = ref(defaultStore.state.defaultWithReplies);
const onExportSuccess = () => {
os.alert({
type: 'info',
text: i18n.ts.exportRequested,
});
};
const onImportSuccess = () => {
os.alert({
type: 'info',
text: i18n.ts.importRequested,
});
};
const onError = (ev) => {
os.alert({
type: 'error',
text: ev.message,
});
};
const exportNotes = () => {
misskeyApi('i/export-notes', {}).then(onExportSuccess).catch(onError);
};
const exportFavorites = () => {
misskeyApi('i/export-favorites', {}).then(onExportSuccess).catch(onError);
};
const exportClips = () => {
misskeyApi('i/export-clips', {}).then(onExportSuccess).catch(onError);
};
const exportFollowing = () => {
misskeyApi('i/export-following', {
excludeMuting: excludeMutingUsers.value,
excludeInactive: excludeInactiveUsers.value,
})
.then(onExportSuccess).catch(onError);
};
const exportBlocking = () => {
misskeyApi('i/export-blocking', {}).then(onExportSuccess).catch(onError);
};
const exportUserLists = () => {
misskeyApi('i/export-user-lists', {}).then(onExportSuccess).catch(onError);
};
const exportMuting = () => {
misskeyApi('i/export-mute', {}).then(onExportSuccess).catch(onError);
};
const exportAntennas = () => {
misskeyApi('i/export-antennas', {}).then(onExportSuccess).catch(onError);
};
const importFollowing = async (ev) => {
const file = await selectFile(ev.currentTarget ?? ev.target);
misskeyApi('i/import-following', {
fileId: file.id,
withReplies: withReplies.value,
}).then(onImportSuccess).catch(onError);
};
const importNotes = async (ev) => {
const file = await selectFile(ev.currentTarget ?? ev.target);
misskeyApi('i/import-notes', {
fileId: file.id,
type: noteType.value,
}).then(onImportSuccess).catch(onError);
};
const importUserLists = async (ev) => {
const file = await selectFile(ev.currentTarget ?? ev.target);
misskeyApi('i/import-user-lists', { fileId: file.id }).then(onImportSuccess).catch(onError);
};
const importMuting = async (ev) => {
const file = await selectFile(ev.currentTarget ?? ev.target);
misskeyApi('i/import-muting', { fileId: file.id }).then(onImportSuccess).catch(onError);
};
const importBlocking = async (ev) => {
const file = await selectFile(ev.currentTarget ?? ev.target);
misskeyApi('i/import-blocking', { fileId: file.id }).then(onImportSuccess).catch(onError);
};
const importAntennas = async (ev) => {
const file = await selectFile(ev.currentTarget ?? ev.target);
misskeyApi('i/import-antennas', { fileId: file.id }).then(onImportSuccess).catch(onError);
};
const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
title: i18n.ts.importAndExport,
icon: 'ti ti-package',
}));
</script>
<style module>
.button {
margin-right: 16px;
}
</style>

148
packages/frontend/src/pages/settings/index.vue
View file

@ -4,39 +4,50 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<PageWithHeader :tabs="headerTabs" :actions="headerActions">
<MkSpacer :contentMax="900" :marginMin="20" :marginMax="32">
<div ref="el" class="vvcocwet" :class="{ wide: !narrow }">
<div class="body">
<div v-if="!narrow || currentPage?.route.name == null" class="nav">
<div class="baaadecd">
<div class="_gaps_s">
<MkInfo v-if="emailNotConfigured" warn class="info">{{ i18n.ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
<MkSuperMenu :def="menuDef" :grid="narrow"></MkSuperMenu>
<MkInfo v-if="!store.r.enablePreferencesAutoCloudBackup.value && store.r.showPreferencesAutoCloudBackupSuggestion.value" class="info">
<div>{{ i18n.ts._preferencesBackup.autoPreferencesBackupIsNotEnabledForThisDevice }}</div>
<div><button class="_textButton" @click="enableAutoBackup">{{ i18n.ts.enable }}</button> | <button class="_textButton" @click="skipAutoBackup">{{ i18n.ts.skip }}</button></div>
</MkInfo>
<MkSuperMenu :def="menuDef" :grid="narrow" :searchIndex="SETTING_INDEX"></MkSuperMenu>
</div>
</div>
<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
<div class="bkzroven" style="container-type: inline-size;">
<RouterView nested/>
<div style="container-type: inline-size;">
<NestedRouterView/>
</div>
</div>
</div>
</div>
</MkSpacer>
</MkStickyContainer>
</PageWithHeader>
</template>
<script setup lang="ts">
import { computed, onActivated, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
import { computed, onActivated, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
import type { PageMetadata } from '@/page.js';
import type { SuperMenuDef } from '@/components/MkSuperMenu.vue';
import { i18n } from '@/i18n.js';
import MkInfo from '@/components/MkInfo.vue';
import MkSuperMenu from '@/components/MkSuperMenu.vue';
import { signout, $i } from '@/account.js';
import { clearCache } from '@/scripts/clear-cache.js';
import { $i } from '@/i.js';
import { clearCache } from '@/utility/clear-cache.js';
import { instance } from '@/instance.js';
import { PageMetadata, definePageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
import { definePage, provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
import * as os from '@/os.js';
import { useRouter } from '@/router/supplier.js';
import { useRouter } from '@/router.js';
import { searchIndexes } from '@/utility/autogen/settings-search-index.js';
import { enableAutoBackup, getPreferencesProfileMenu } from '@/preferences/utility.js';
import { store } from '@/store.js';
import { signout } from '@/signout.js';
const SETTING_INDEX = searchIndexes; // TODO: lazy load
const indexInfo = {
title: i18n.ts.settings,
@ -44,7 +55,7 @@ const indexInfo = {
hideHeader: true,
};
const INFO = ref<PageMetadata>(indexInfo);
const el = shallowRef<HTMLElement | null>(null);
const el = useTemplateRef('el');
const childInfo = ref<null | PageMetadata>(null);
const router = useRouter();
@ -59,8 +70,11 @@ const ro = new ResizeObserver((entries, observer) => {
narrow.value = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
});
const menuDef = computed(() => [{
title: i18n.ts.basicSettings,
function skipAutoBackup() {
store.set('showPreferencesAutoCloudBackupSuggestion', false);
}
const menuDef = computed<SuperMenuDef[]>(() => [{
items: [{
icon: 'ti ti-user',
text: i18n.ts.profile,
@ -71,16 +85,6 @@ const menuDef = computed(() => [{
text: i18n.ts.privacy,
to: '/settings/privacy',
active: currentPage.value?.route.name === 'privacy',
}, {
icon: 'ti ti-mood-happy',
text: i18n.ts.emojiPicker,
to: '/settings/emoji-picker',
active: currentPage.value?.route.name === 'emojiPicker',
}, {
icon: 'ti ti-cloud',
text: i18n.ts.drive,
to: '/settings/drive',
active: currentPage.value?.route.name === 'drive',
}, {
icon: 'ti ti-bell',
text: i18n.ts.notifications,
@ -98,32 +102,31 @@ const menuDef = computed(() => [{
active: currentPage.value?.route.name === 'security',
}],
}, {
title: i18n.ts.clientSettings,
items: [{
icon: 'ti ti-adjustments',
text: i18n.ts.general,
to: '/settings/general',
active: currentPage.value?.route.name === 'general',
text: i18n.ts.preferences,
to: '/settings/preferences',
active: currentPage.value?.route.name === 'preferences',
}, {
icon: 'ti ti-palette',
text: i18n.ts.theme,
to: '/settings/theme',
active: currentPage.value?.route.name === 'theme',
}, {
icon: 'ti ti-menu-2',
text: i18n.ts.navbar,
to: '/settings/navbar',
active: currentPage.value?.route.name === 'navbar',
}, {
icon: 'ti ti-equal-double',
text: i18n.ts.statusbar,
to: '/settings/statusbar',
active: currentPage.value?.route.name === 'statusbar',
icon: 'ti ti-mood-happy',
text: i18n.ts.emojiPalette,
to: '/settings/emoji-palette',
active: currentPage.value?.route.name === 'emoji-palette',
}, {
icon: 'ti ti-music',
text: i18n.ts.sounds,
to: '/settings/sounds',
active: currentPage.value?.route.name === 'sounds',
}, {
icon: 'ti ti-accessible',
text: i18n.ts.accessibility,
to: '/settings/accessibility',
active: currentPage.value?.route.name === 'accessibility',
}, {
icon: 'ti ti-plug',
text: i18n.ts.plugins,
@ -131,37 +134,26 @@ const menuDef = computed(() => [{
active: currentPage.value?.route.name === 'plugin',
}],
}, {
title: i18n.ts.otherSettings,
items: [{
icon: 'ti ti-badges',
text: i18n.ts.roles,
to: '/settings/roles',
active: currentPage.value?.route.name === 'roles',
icon: 'ti ti-cloud',
text: i18n.ts.drive,
to: '/settings/drive',
active: currentPage.value?.route.name === 'drive',
}, {
icon: 'ti ti-ban',
text: i18n.ts.muteAndBlock,
to: '/settings/mute-block',
active: currentPage.value?.route.name === 'mute-block',
}, {
icon: 'ti ti-api',
text: 'API',
to: '/settings/api',
active: currentPage.value?.route.name === 'api',
}, {
icon: 'ti ti-webhook',
text: 'Webhook',
to: '/settings/webhook',
active: currentPage.value?.route.name === 'webhook',
icon: 'ti ti-link',
text: i18n.ts._settings.serviceConnection,
to: '/settings/connect',
active: currentPage.value?.route.name === 'connect',
}, {
icon: 'ti ti-package',
text: i18n.ts.importAndExport,
to: '/settings/import-export',
active: currentPage.value?.route.name === 'import-export',
}, {
icon: 'ti ti-plane',
text: `${i18n.ts.accountMigration}`,
to: '/settings/migration',
active: currentPage.value?.route.name === 'migration',
text: i18n.ts._settings.accountData,
to: '/settings/account-data',
active: currentPage.value?.route.name === 'account-data',
}, {
icon: 'ti ti-dots',
text: i18n.ts.other,
@ -170,10 +162,12 @@ const menuDef = computed(() => [{
}],
}, {
items: [{
icon: 'ti ti-device-floppy',
text: i18n.ts.preferencesBackups,
to: '/settings/preferences-backups',
active: currentPage.value?.route.name === 'preferences-backups',
type: 'button',
icon: 'ti ti-settings-2',
text: i18n.ts.preferencesProfile,
action: async (ev: MouseEvent) => {
os.popupMenu(getPreferencesProfileMenu(), ev.currentTarget ?? ev.target);
},
}, {
type: 'button',
icon: 'ti ti-trash',
@ -242,37 +236,13 @@ const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => INFO.value);
definePage(() => INFO.value);
// w 890
// h 700
</script>
<style lang="scss" scoped>
.vvcocwet {
> .body {
> .nav {
.baaadecd {
> .info {
margin: 16px 0;
}
> .accounts {
> .avatar {
display: block;
width: 50px;
height: 50px;
margin: 8px auto 16px auto;
}
}
}
}
> .main {
.bkzroven {
}
}
}
&.wide {
> .body {
display: flex;

14
packages/frontend/src/pages/settings/migration.vue
View file

@ -66,13 +66,12 @@ import MkButton from '@/components/MkButton.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkUserInfo from '@/components/MkUserInfo.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { signinRequired } from '@/account.js';
import { unisonReload } from '@/scripts/unison-reload.js';
import { ensureSignin } from '@/i.js';
import { unisonReload } from '@/utility/unison-reload.js';
const $i = signinRequired();
const $i = ensureSignin();
const moveToAccount = ref('');
const movedTo = ref<Misskey.entities.UserDetailed>();
@ -120,11 +119,6 @@ async function save(): Promise<void> {
}
init();
definePageMetadata(() => ({
title: i18n.ts.accountMigration,
icon: 'ti ti-plane',
}));
</script>
<style lang="scss">

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

@ -19,11 +19,11 @@ import { ref, watch } from 'vue';
import MkTextarea from '@/components/MkTextarea.vue';
import MkInfo from '@/components/MkInfo.vue';
import MkButton from '@/components/MkButton.vue';
import { signinRequired } from '@/account.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { ensureSignin } from '@/i.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { i18n } from '@/i18n.js';
const $i = signinRequired();
const $i = ensureSignin();
const instanceMutes = ref($i.mutedInstances.join('\n'));
const changed = ref(false);

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

@ -4,132 +4,177 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps_m">
<MkFolder>
<template #icon><i class="ph-envelope ph-bold ph-lg"></i></template>
<template #label>{{ i18n.ts.wordMute }}</template>
<SearchMarker path="/settings/mute-block" :label="i18n.ts.muteAndBlock" icon="ti ti-ban" :keywords="['mute', 'block']">
<div class="_gaps_m">
<MkFeatureBanner icon="/client-assets/prohibited_3d.png" color="#ff2600">
<SearchKeyword>{{ i18n.ts._settings.muteAndBlockBanner }}</SearchKeyword>
</MkFeatureBanner>
<div class="_gaps_m">
<MkInfo>{{ i18n.ts.wordMuteDescription }}</MkInfo>
<MkSwitch v-model="showSoftWordMutedWord">{{ i18n.ts.showMutedWord }}</MkSwitch>
<XWordMute :muted="$i.mutedWords" @save="saveMutedWords"/>
<div class="_gaps_s">
<SearchMarker
:label="i18n.ts.wordMute"
:keywords="['note', 'word', 'soft', 'mute', 'hide']"
>
<MkFolder>
<template #icon><i class="ph-envelope ph-bold ph-lg"></i></template>
<template #label>{{ i18n.ts.wordMute }}</template>
<div class="_gaps_m">
<MkInfo>{{ i18n.ts.wordMuteDescription }}</MkInfo>
<SearchMarker
:label="i18n.ts.showMutedWord"
:keywords="['show']"
>
<MkSwitch v-model="showSoftWordMutedWord">{{ i18n.ts.showMutedWord }}</MkSwitch>
</SearchMarker>
<XWordMute :muted="$i.mutedWords" @save="saveMutedWords"/>
</div>
</MkFolder>
</SearchMarker>
<SearchMarker
:label="i18n.ts.hardWordMute"
:keywords="['note', 'word', 'hard', 'mute', 'hide']"
>
<MkFolder>
<template #icon><i class="ph-x-square ph-bold ph-lg"></i></template>
<template #label>{{ i18n.ts.hardWordMute }}</template>
<div class="_gaps_m">
<MkInfo>{{ i18n.ts.hardWordMuteDescription }}</MkInfo>
<XWordMute :muted="$i.hardMutedWords" @save="saveHardMutedWords"/>
</div>
</MkFolder>
</SearchMarker>
<SearchMarker
:label="i18n.ts.instanceMute"
:keywords="['note', 'server', 'instance', 'host', 'federation', 'mute', 'hide']"
>
<MkFolder v-if="instance.federation !== 'none'">
<template #icon><i class="ti ti-planet-off"></i></template>
<template #label>{{ i18n.ts.instanceMute }}</template>
<XInstanceMute/>
</MkFolder>
</SearchMarker>
<SearchMarker
:label="`${i18n.ts.mutedUsers} (${ i18n.ts.renote })`"
:keywords="['renote', 'mute', 'hide', 'user']"
>
<MkFolder>
<template #icon><i class="ti ti-repeat-off"></i></template>
<template #label>{{ i18n.ts.mutedUsers }} ({{ i18n.ts.renote }})</template>
<MkPagination :pagination="renoteMutingPagination">
<template #empty>
<div class="_fullinfo">
<img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.noUsers }}</div>
</div>
</template>
<template #default="{ items }">
<div class="_gaps_s">
<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedRenoteMuteItems.includes(item.id) }]">
<div :class="$style.userItemMain">
<MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)">
<MkUserCardMini :user="item.mutee"/>
</MkA>
<button class="_button" :class="$style.userToggle" @click="toggleRenoteMuteItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
<button class="_button" :class="$style.remove" @click="unrenoteMute(item.mutee, $event)"><i class="ti ti-x"></i></button>
</div>
<div v-if="expandedRenoteMuteItems.includes(item.id)" :class="$style.userItemSub">
<div>Muted at: <MkTime :time="item.createdAt" mode="detail"/></div>
</div>
</div>
</div>
</template>
</MkPagination>
</MkFolder>
</SearchMarker>
<SearchMarker
:label="i18n.ts.mutedUsers"
:keywords="['note', 'mute', 'hide', 'user']"
>
<MkFolder>
<template #icon><i class="ti ti-eye-off"></i></template>
<template #label>{{ i18n.ts.mutedUsers }}</template>
<MkPagination :pagination="mutingPagination">
<template #empty>
<div class="_fullinfo">
<img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.noUsers }}</div>
</div>
</template>
<template #default="{ items }">
<div class="_gaps_s">
<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedMuteItems.includes(item.id) }]">
<div :class="$style.userItemMain">
<MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)">
<MkUserCardMini :user="item.mutee"/>
</MkA>
<button class="_button" :class="$style.userToggle" @click="toggleMuteItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
<button class="_button" :class="$style.remove" @click="unmute(item.mutee, $event)"><i class="ti ti-x"></i></button>
</div>
<div v-if="expandedMuteItems.includes(item.id)" :class="$style.userItemSub">
<div>Muted at: <MkTime :time="item.createdAt" mode="detail"/></div>
<div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div>
<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
</div>
</div>
</div>
</template>
</MkPagination>
</MkFolder>
</SearchMarker>
<SearchMarker
:label="i18n.ts.blockedUsers"
:keywords="['block', 'user']"
>
<MkFolder>
<template #icon><i class="ti ti-ban"></i></template>
<template #label>{{ i18n.ts.blockedUsers }}</template>
<MkPagination :pagination="blockingPagination">
<template #empty>
<div class="_fullinfo">
<img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.noUsers }}</div>
</div>
</template>
<template #default="{ items }">
<div class="_gaps_s">
<div v-for="item in items" :key="item.blockee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedBlockItems.includes(item.id) }]">
<div :class="$style.userItemMain">
<MkA :class="$style.userItemMainBody" :to="userPage(item.blockee)">
<MkUserCardMini :user="item.blockee"/>
</MkA>
<button class="_button" :class="$style.userToggle" @click="toggleBlockItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
<button class="_button" :class="$style.remove" @click="unblock(item.blockee, $event)"><i class="ti ti-x"></i></button>
</div>
<div v-if="expandedBlockItems.includes(item.id)" :class="$style.userItemSub">
<div>Blocked at: <MkTime :time="item.createdAt" mode="detail"/></div>
<div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div>
<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
</div>
</div>
</div>
</template>
</MkPagination>
</MkFolder>
</SearchMarker>
</div>
</MkFolder>
<MkFolder>
<template #icon><i class="ph-x-square ph-bold ph-lg"></i></template>
<template #label>{{ i18n.ts.hardWordMute }}</template>
<div class="_gaps_m">
<MkInfo>{{ i18n.ts.hardWordMuteDescription }}</MkInfo>
<XWordMute :muted="$i.hardMutedWords" @save="saveHardMutedWords"/>
</div>
</MkFolder>
<MkFolder v-if="instance.federation !== 'none'">
<template #icon><i class="ti ti-planet-off"></i></template>
<template #label>{{ i18n.ts.instanceMute }}</template>
<XInstanceMute/>
</MkFolder>
<MkFolder>
<template #icon><i class="ti ti-repeat-off"></i></template>
<template #label>{{ i18n.ts.mutedUsers }} ({{ i18n.ts.renote }})</template>
<MkPagination :pagination="renoteMutingPagination">
<template #empty>
<div class="_fullinfo">
<img :src="infoImageUrl" class="_ghost"/>
<div>{{ i18n.ts.noUsers }}</div>
</div>
</template>
<template #default="{ items }">
<div class="_gaps_s">
<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedRenoteMuteItems.includes(item.id) }]">
<div :class="$style.userItemMain">
<MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)">
<MkUserCardMini :user="item.mutee"/>
</MkA>
<button class="_button" :class="$style.userToggle" @click="toggleRenoteMuteItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
<button class="_button" :class="$style.remove" @click="unrenoteMute(item.mutee, $event)"><i class="ti ti-x"></i></button>
</div>
<div v-if="expandedRenoteMuteItems.includes(item.id)" :class="$style.userItemSub">
<div>Muted at: <MkTime :time="item.createdAt" mode="detail"/></div>
</div>
</div>
</div>
</template>
</MkPagination>
</MkFolder>
<MkFolder>
<template #icon><i class="ti ti-eye-off"></i></template>
<template #label>{{ i18n.ts.mutedUsers }}</template>
<MkPagination :pagination="mutingPagination">
<template #empty>
<div class="_fullinfo">
<img :src="infoImageUrl" class="_ghost"/>
<div>{{ i18n.ts.noUsers }}</div>
</div>
</template>
<template #default="{ items }">
<div class="_gaps_s">
<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedMuteItems.includes(item.id) }]">
<div :class="$style.userItemMain">
<MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)">
<MkUserCardMini :user="item.mutee"/>
</MkA>
<button class="_button" :class="$style.userToggle" @click="toggleMuteItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
<button class="_button" :class="$style.remove" @click="unmute(item.mutee, $event)"><i class="ti ti-x"></i></button>
</div>
<div v-if="expandedMuteItems.includes(item.id)" :class="$style.userItemSub">
<div>Muted at: <MkTime :time="item.createdAt" mode="detail"/></div>
<div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div>
<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
</div>
</div>
</div>
</template>
</MkPagination>
</MkFolder>
<MkFolder>
<template #icon><i class="ti ti-ban"></i></template>
<template #label>{{ i18n.ts.blockedUsers }}</template>
<MkPagination :pagination="blockingPagination">
<template #empty>
<div class="_fullinfo">
<img :src="infoImageUrl" class="_ghost"/>
<div>{{ i18n.ts.noUsers }}</div>
</div>
</template>
<template #default="{ items }">
<div class="_gaps_s">
<div v-for="item in items" :key="item.blockee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedBlockItems.includes(item.id) }]">
<div :class="$style.userItemMain">
<MkA :class="$style.userItemMainBody" :to="userPage(item.blockee)">
<MkUserCardMini :user="item.blockee"/>
</MkA>
<button class="_button" :class="$style.userToggle" @click="toggleBlockItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
<button class="_button" :class="$style.remove" @click="unblock(item.blockee, $event)"><i class="ti ti-x"></i></button>
</div>
<div v-if="expandedBlockItems.includes(item.id)" :class="$style.userItemSub">
<div>Blocked at: <MkTime :time="item.createdAt" mode="detail"/></div>
<div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div>
<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
</div>
</div>
</div>
</template>
</MkPagination>
</MkFolder>
</div>
</div>
</SearchMarker>
</template>
<script lang="ts" setup>
@ -139,18 +184,19 @@ import XWordMute from './mute-block.word-mute.vue';
import MkPagination from '@/components/MkPagination.vue';
import { userPage } from '@/filters/user.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { definePage } from '@/page.js';
import MkUserCardMini from '@/components/MkUserCardMini.vue';
import * as os from '@/os.js';
import { instance, infoImageUrl } from '@/instance.js';
import { signinRequired } from '@/account.js';
import { ensureSignin } from '@/i.js';
import MkInfo from '@/components/MkInfo.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import { defaultStore } from '@/store';
import { reloadAsk } from '@/scripts/reload-ask.js';
import { reloadAsk } from '@/utility/reload-ask.js';
import { prefer } from '@/preferences.js';
import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
const $i = signinRequired();
const $i = ensureSignin();
const renoteMutingPagination = {
endpoint: 'renote-mute/list' as const,
@ -171,7 +217,7 @@ const expandedRenoteMuteItems = ref([]);
const expandedMuteItems = ref([]);
const expandedBlockItems = ref([]);
const showSoftWordMutedWord = computed(defaultStore.makeGetterSetter('showSoftWordMutedWord'));
const showSoftWordMutedWord = prefer.model('showSoftWordMutedWord');
watch([
showSoftWordMutedWord,
@ -248,7 +294,7 @@ const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts.muteAndBlock,
icon: 'ti ti-ban',
}));

20
packages/frontend/src/pages/settings/navbar.vue
View file

@ -53,22 +53,24 @@ import FormSlot from '@/components/form/slot.vue';
import MkContainer from '@/components/MkContainer.vue';
import * as os from '@/os.js';
import { navbarItemDef } from '@/navbar.js';
import { defaultStore } from '@/store.js';
import { reloadAsk } from '@/scripts/reload-ask.js';
import { store } from '@/store.js';
import { reloadAsk } from '@/utility/reload-ask.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { definePage } from '@/page.js';
import { prefer } from '@/preferences.js';
import { PREF_DEF } from '@/preferences/def.js';
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
const items = ref(defaultStore.state.menu.map(x => ({
const items = ref(prefer.s.menu.map(x => ({
id: Math.random().toString(),
type: x,
})));
const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
const menuDisplay = computed(store.makeGetterSetter('menuDisplay'));
async function addItem() {
const menu = Object.keys(navbarItemDef).filter(k => !defaultStore.state.menu.includes(k));
const menu = Object.keys(navbarItemDef).filter(k => !prefer.s.menu.includes(k));
const { canceled, result: item } = await os.select({
title: i18n.ts.addItem,
items: [...menu.map(k => ({
@ -89,12 +91,12 @@ function removeItem(index: number) {
}
async function save() {
defaultStore.set('menu', items.value.map(x => x.type));
prefer.commit('menu', items.value.map(x => x.type));
await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
}
function reset() {
items.value = defaultStore.def.menu.default.map(x => ({
items.value = PREF_DEF.menu.default.map(x => ({
id: Math.random().toString(),
type: x,
}));
@ -104,7 +106,7 @@ const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts.navbar,
icon: 'ti ti-list',
}));

31
packages/frontend/src/pages/settings/notifications.vue
View file

@ -5,6 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div class="_gaps_m">
<MkFeatureBanner icon="/client-assets/bell_3d.png" color="#ffff00">
<SearchKeyword>{{ i18n.ts._settings.notificationsBanner }}</SearchKeyword>
</MkFeatureBanner>
<FormSection first>
<template #label>{{ i18n.ts.notificationRecieveConfig }}</template>
<div class="_gaps_s">
@ -34,7 +38,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<FormSection>
<div class="_gaps_m">
<FormLink @click="readAllNotifications">{{ i18n.ts.markAsReadAllNotifications }}</FormLink>
<FormLink @click="readAllUnreadNotes">{{ i18n.ts.markAsReadAllUnreadNotes }}</FormLink>
</div>
</FormSection>
<FormSection>
@ -62,35 +65,33 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { shallowRef, computed } from 'vue';
import XNotificationConfig, { type NotificationConfig } from './notifications.notification-config.vue';
import { useTemplateRef, computed } from 'vue';
import { notificationTypes } from '@@/js/const.js';
import XNotificationConfig from './notifications.notification-config.vue';
import type { NotificationConfig } from './notifications.notification-config.vue';
import FormLink from '@/components/form/link.vue';
import FormSection from '@/components/form/section.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import * as os from '@/os.js';
import { signinRequired } from '@/account.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { ensureSignin } from '@/i.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { definePage } from '@/page.js';
import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
import { notificationTypes } from '@@/js/const.js';
import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
const $i = signinRequired();
const $i = ensureSignin();
const nonConfigurableNotificationTypes = ['note', 'roleAssigned', 'followRequestAccepted', 'test', 'exportCompleted'] satisfies (typeof notificationTypes[number])[] as string[];
const onlyOnOrOffNotificationTypes = ['app', 'achievementEarned', 'login', 'scheduledNoteFailed', 'scheduledNotePosted'] satisfies (typeof notificationTypes[number])[] as string[];
const onlyOnOrOffNotificationTypes = ['app', 'achievementEarned', 'login', 'createToken', 'scheduledNoteFailed', 'scheduledNotePosted'] satisfies (typeof notificationTypes[number])[] as string[];
const allowButton = shallowRef<InstanceType<typeof MkPushNotificationAllowButton>>();
const allowButton = useTemplateRef('allowButton');
const pushRegistrationInServer = computed(() => allowButton.value?.pushRegistrationInServer);
const sendReadMessage = computed(() => pushRegistrationInServer.value?.sendReadMessage || false);
const userLists = await misskeyApi('users/lists/list');
async function readAllUnreadNotes() {
await os.apiWithDialog('i/read-all-unread-notes');
}
async function readAllNotifications() {
await os.apiWithDialog('notifications/mark-all-as-read');
}
@ -137,7 +138,7 @@ const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts.notifications,
icon: 'ti ti-bell',
}));

241
packages/frontend/src/pages/settings/other.vue
View file

@ -4,124 +4,180 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps_m">
<!--
<MkSwitch v-model="$i.injectFeaturedNote" @update:model-value="onChangeInjectFeaturedNote">
<template #label>{{ i18n.ts.showFeaturedNotesInTimeline }}</template>
</MkSwitch>
-->
<SearchMarker path="/settings/other" :label="i18n.ts.other" :keywords="['other']" icon="ti ti-dots">
<div class="_gaps_m">
<!--
<MkSwitch v-model="$i.injectFeaturedNote" @update:model-value="onChangeInjectFeaturedNote">
<template #label>{{ i18n.ts.showFeaturedNotesInTimeline }}</template>
</MkSwitch>
-->
<!--
<MkSwitch v-model="reportError">{{ i18n.ts.sendErrorReports }}<template #caption>{{ i18n.ts.sendErrorReportsDescription }}</template></MkSwitch>
-->
<!--
<MkSwitch v-model="reportError">{{ i18n.ts.sendErrorReports }}<template #caption>{{ i18n.ts.sendErrorReportsDescription }}</template></MkSwitch>
-->
<FormSection first>
<div class="_gaps_s">
<MkFolder>
<template #icon><i class="ti ti-info-circle"></i></template>
<template #label>{{ i18n.ts.accountInfo }}</template>
<SearchMarker :keywords="['account', 'info']">
<MkFolder>
<template #icon><i class="ti ti-info-circle"></i></template>
<template #label><SearchLabel>{{ i18n.ts.accountInfo }}</SearchLabel></template>
<div class="_gaps_m">
<MkKeyValue>
<template #key>ID</template>
<template #value><span class="_monospace">{{ $i.id }}</span></template>
</MkKeyValue>
<div class="_gaps_m">
<MkKeyValue>
<template #key>ID</template>
<template #value><span class="_monospace">{{ $i.id }}</span></template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.registeredDate }}</template>
<template #value><MkTime :time="$i.createdAt" mode="detail"/></template>
</MkKeyValue>
</div>
</MkFolder>
<MkKeyValue>
<template #key>{{ i18n.ts.registeredDate }}</template>
<template #value><MkTime :time="$i.createdAt" mode="detail"/></template>
</MkKeyValue>
<MkFolder>
<template #icon><i class="ph-database ph-bold ph-lg"></i></template>
<template #label>{{ i18n.ts._dataRequest.title }}</template>
<MkFolder>
<template #icon><i class="ti ti-badges"></i></template>
<template #label><SearchLabel>{{ i18n.ts._role.policies }}</SearchLabel></template>
<div class="_gaps_m">
<FormInfo warn>{{ i18n.ts._dataRequest.warn }}</FormInfo>
<FormInfo>{{ i18n.ts._dataRequest.text }}</FormInfo>
<MkButton primary @click="exportData">{{ i18n.ts._dataRequest.button }}</MkButton>
</div>
</MkFolder>
<div class="_gaps_s">
<div v-for="policy in Object.keys($i.policies)" :key="policy">
{{ policy }} ... {{ $i.policies[policy] }}
</div>
</div>
</MkFolder>
</div>
</MkFolder>
</SearchMarker>
<MkFolder>
<template #icon><i class="ti ti-alert-triangle"></i></template>
<template #label>{{ i18n.ts.closeAccount }}</template>
<SearchMarker :keywords="['roles']">
<MkFolder>
<template #icon><i class="ti ti-badges"></i></template>
<template #label><SearchLabel>{{ i18n.ts.rolesAssignedToMe }}</SearchLabel></template>
<div class="_gaps_m">
<FormInfo warn>{{ i18n.ts._accountDelete.mayTakeTime }}</FormInfo>
<FormInfo>{{ i18n.ts._accountDelete.sendEmail }}</FormInfo>
<MkButton v-if="!$i.isDeleted" danger @click="deleteAccount">{{ i18n.ts._accountDelete.requestAccountDelete }}</MkButton>
<MkButton v-else disabled>{{ i18n.ts._accountDelete.inProgress }}</MkButton>
</div>
</MkFolder>
<MkRolePreview v-for="role in $i.roles" :key="role.id" :role="role" :forModeration="false"/>
</MkFolder>
</SearchMarker>
<MkFolder>
<template #icon><i class="ti ti-flask"></i></template>
<template #label>{{ i18n.ts.experimentalFeatures }}</template>
<SearchMarker :keywords="['account', 'move', 'migration']">
<MkFolder>
<template #icon><i class="ti ti-plane"></i></template>
<template #label><SearchLabel>{{ i18n.ts.accountMigration }}</SearchLabel></template>
<div class="_gaps_m">
<MkSwitch v-model="enableCondensedLine">
<template #label>Enable condensed line</template>
</MkSwitch>
<MkSwitch v-model="skipNoteRender">
<template #label>Enable note render skipping</template>
</MkSwitch>
</div>
</MkFolder>
<XMigration/>
</MkFolder>
</SearchMarker>
<MkFolder>
<template #icon><i class="ti ti-code"></i></template>
<template #label>{{ i18n.ts.developer }}</template>
<SearchMarker :keywords="['account', 'export', 'data']">
<MkFolder>
<template #icon><i class="ph-database ph-bold ph-lg"></i></template>
<template #label>{{ i18n.ts._dataRequest.title }}</template>
<div class="_gaps_m">
<MkSwitch v-model="devMode">
<template #label>{{ i18n.ts.devMode }}</template>
</MkSwitch>
</div>
</MkFolder>
<div class="_gaps_m">
<FormInfo warn>{{ i18n.ts._dataRequest.warn }}</FormInfo>
<FormInfo>{{ i18n.ts._dataRequest.text }}</FormInfo>
<MkButton primary @click="exportData">{{ i18n.ts._dataRequest.button }}</MkButton>
</div>
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['account', 'close', 'delete']">
<MkFolder>
<template #icon><i class="ti ti-alert-triangle"></i></template>
<template #label><SearchLabel>{{ i18n.ts.closeAccount }}</SearchLabel></template>
<div class="_gaps_m">
<FormInfo warn>{{ i18n.ts._accountDelete.mayTakeTime }}</FormInfo>
<FormInfo>{{ i18n.ts._accountDelete.sendEmail }}</FormInfo>
<MkButton v-if="!$i.isDeleted" danger @click="deleteAccount"><SearchKeyword>{{ i18n.ts._accountDelete.requestAccountDelete }}</SearchKeyword></MkButton>
<MkButton v-else disabled>{{ i18n.ts._accountDelete.inProgress }}</MkButton>
</div>
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['experimental', 'feature', 'flags']">
<MkFolder>
<template #icon><i class="ti ti-flask"></i></template>
<template #label><SearchLabel>{{ i18n.ts.experimentalFeatures }}</SearchLabel></template>
<div class="_gaps_m">
<MkSwitch v-model="enableCondensedLine">
<template #label>Enable condensed line</template>
</MkSwitch>
<MkSwitch v-model="skipNoteRender">
<template #label>Enable note render skipping</template>
</MkSwitch>
<MkSwitch v-model="stackingRouterView">
<template #label>Enable stacking router view</template>
</MkSwitch>
</div>
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['developer', 'mode', 'debug']">
<MkFolder>
<template #icon><i class="ti ti-code"></i></template>
<template #label><SearchLabel>{{ i18n.ts.developer }}</SearchLabel></template>
<div class="_gaps_m">
<MkSwitch v-model="devMode">
<template #label>{{ i18n.ts.devMode }}</template>
</MkSwitch>
</div>
</MkFolder>
</SearchMarker>
</div>
</FormSection>
<FormSection>
<hr>
<FormLink to="/registry"><template #icon><i class="ti ti-adjustments"></i></template>{{ i18n.ts.registry }}</FormLink>
</FormSection>
<FormSection>
<div class="_gaps_s">
<MkSwitch v-model="defaultWithReplies">{{ i18n.ts.withRepliesByDefaultForNewlyFollowed }}</MkSwitch>
<MkButton danger @click="updateRepliesAll(true)"><i class="ph-chats ph-bold ph-lg"></i> {{ i18n.ts.showRepliesToOthersInTimelineAll }}</MkButton>
<MkButton danger @click="updateRepliesAll(false)"><i class="ph-chat ph-bold ph-lg"></i> {{ i18n.ts.hideRepliesToOthersInTimelineAll }}</MkButton>
</div>
</FormSection>
</div>
<hr>
<FormSection>
<div class="_gaps_s">
<MkSwitch v-model="defaultWithReplies">{{ i18n.ts.withRepliesByDefaultForNewlyFollowed }}</MkSwitch>
<MkButton danger @click="updateRepliesAll(true)"><i class="ph-chats ph-bold ph-lg"></i> {{ i18n.ts.showRepliesToOthersInTimelineAll }}</MkButton>
<MkButton danger @click="updateRepliesAll(false)"><i class="ph-chat ph-bold ph-lg"></i> {{ i18n.ts.hideRepliesToOthersInTimelineAll }}</MkButton>
</div>
</FormSection>
<hr>
<FormSlot>
<MkButton danger @click="migrate"><i class="ti ti-refresh"></i> {{ i18n.ts.migrateOldSettings }}</MkButton>
<template #caption>{{ i18n.ts.migrateOldSettings_description }}</template>
</FormSlot>
</div>
</SearchMarker>
</template>
<script lang="ts" setup>
import { computed, watch } from 'vue';
import XMigration from './migration.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import FormLink from '@/components/form/link.vue';
import MkFolder from '@/components/MkFolder.vue';
import FormInfo from '@/components/MkInfo.vue';
import MkKeyValue from '@/components/MkKeyValue.vue';
import MkButton from '@/components/MkButton.vue';
import FormSlot from '@/components/form/slot.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { defaultStore } from '@/store.js';
import { signout, signinRequired } from '@/account.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { ensureSignin } from '@/i.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { reloadAsk } from '@/scripts/reload-ask.js';
import { definePage } from '@/page.js';
import { reloadAsk } from '@/utility/reload-ask.js';
import FormSection from '@/components/form/section.vue';
import { prefer } from '@/preferences.js';
import MkRolePreview from '@/components/MkRolePreview.vue';
import { signout } from '@/signout.js';
import { migrateOldSettings } from '@/pref-migrate.js';
const $i = signinRequired();
const $i = ensureSignin();
const reportError = computed(defaultStore.makeGetterSetter('reportError'));
const enableCondensedLine = computed(defaultStore.makeGetterSetter('enableCondensedLine'));
const skipNoteRender = computed(defaultStore.makeGetterSetter('skipNoteRender'));
const devMode = computed(defaultStore.makeGetterSetter('devMode'));
const defaultWithReplies = computed(defaultStore.makeGetterSetter('defaultWithReplies'));
const reportError = prefer.model('reportError');
const enableCondensedLine = prefer.model('enableCondensedLine');
const skipNoteRender = prefer.model('skipNoteRender');
const devMode = prefer.model('devMode');
const stackingRouterView = prefer.model('experimental.stackingRouterView');
watch(skipNoteRender, async () => {
await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
@ -151,14 +207,9 @@ async function deleteAccount() {
await signout();
}
async function updateRepliesAll(withReplies: boolean) {
const { canceled } = await os.confirm({
type: 'warning',
text: withReplies ? i18n.ts.confirmShowRepliesAll : i18n.ts.confirmHideRepliesAll,
});
if (canceled) return;
misskeyApi('following/update-all', { withReplies });
function migrate() {
os.waiting();
migrateOldSettings();
}
const exportData = () => {
@ -185,7 +236,7 @@ const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts.other,
icon: 'ti ti-dots',
}));

16
packages/frontend/src/pages/settings/plugin.install.vue
View file

@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkCodeEditor>
<div>
<MkButton :disabled="code == null" primary inline @click="install"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
<MkButton :disabled="code == null || code.trim() === ''" primary inline @click="install"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
</div>
</div>
</template>
@ -23,11 +23,12 @@ import MkCodeEditor from '@/components/MkCodeEditor.vue';
import MkButton from '@/components/MkButton.vue';
import FormInfo from '@/components/MkInfo.vue';
import * as os from '@/os.js';
import { installPlugin } from '@/scripts/install-plugin.js';
import { unisonReload } from '@/scripts/unison-reload.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { definePage } from '@/page.js';
import { installPlugin } from '@/plugin.js';
import { useRouter } from '@/router.js';
const router = useRouter();
const code = ref<string | null>(null);
async function install() {
@ -36,10 +37,9 @@ async function install() {
try {
await installPlugin(code.value);
os.success();
code.value = null;
nextTick(() => {
unisonReload();
});
router.push('/settings/plugin');
} catch (err) {
os.alert({
type: 'error',
@ -53,7 +53,7 @@ const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts._plugin.install,
icon: 'ti ti-download',
}));

209
packages/frontend/src/pages/settings/plugin.vue
View file

@ -4,76 +4,97 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps_m">
<FormLink to="/settings/plugin/install"><template #icon><i class="ti ti-download"></i></template>{{ i18n.ts._plugin.install }}</FormLink>
<SearchMarker path="/settings/plugin" :label="i18n.ts.plugins" :keywords="['plugin', 'addon', 'extension']" icon="ti ti-plug">
<div class="_gaps_m">
<MkFeatureBanner icon="/client-assets/electric_plug_3d.png" color="#ffbb00">
<SearchKeyword>{{ i18n.ts._settings.pluginBanner }}</SearchKeyword>
</MkFeatureBanner>
<FormSection>
<template #label>{{ i18n.ts.manage }}</template>
<div class="_gaps_s">
<div v-for="plugin in plugins" :key="plugin.id" class="_panel _gaps_m" style="padding: 20px;">
<div class="_gaps_s">
<span style="display: flex; align-items: center;"><b>{{ plugin.name }}</b><span style="margin-left: auto;">v{{ plugin.version }}</span></span>
<MkSwitch :modelValue="plugin.active" @update:modelValue="changeActive(plugin, $event)">{{ i18n.ts.makeActive }}</MkSwitch>
</div>
<FormLink to="/settings/plugin/install"><template #icon><i class="ti ti-download"></i></template>{{ i18n.ts._plugin.install }}</FormLink>
<div class="_gaps_s">
<MkKeyValue>
<template #key>{{ i18n.ts.author }}</template>
<template #value>{{ plugin.author }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.description }}</template>
<template #value>{{ plugin.description }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.permission }}</template>
<template #value>
<ul style="margin-top: 0; margin-bottom: 0;">
<li v-for="permission in plugin.permissions" :key="permission">{{ i18n.ts._permissions[permission] }}</li>
<li v-if="!plugin.permissions || plugin.permissions.length === 0">{{ i18n.ts.none }}</li>
</ul>
</template>
</MkKeyValue>
</div>
<div class="_buttons">
<MkButton v-if="plugin.config" inline @click="config(plugin)"><i class="ti ti-settings"></i> {{ i18n.ts.settings }}</MkButton>
<MkButton inline danger @click="uninstall(plugin)"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</MkButton>
</div>
<MkFolder>
<template #icon><i class="ti ti-terminal-2"></i></template>
<template #label>{{ i18n.ts._plugin.viewLog }}</template>
<div class="_gaps_s">
<FormSection>
<template #label>{{ i18n.ts.manage }}</template>
<div class="_gaps_s">
<MkFolder v-for="plugin in plugins" :key="plugin.installId">
<template #icon><i class="ti ti-plug"></i></template>
<template #suffix>
<i v-if="plugin.active" class="ti ti-player-play" style="color: var(--MI_THEME-success);"></i>
<i v-else class="ti ti-player-pause" style="opacity: 0.7;"></i>
</template>
<template #label>
<div :style="plugin.active ? '' : 'opacity: 0.7;'">
{{ plugin.name }}
<span style="margin-left: 1em; opacity: 0.7;">v{{ plugin.version }}</span>
</div>
</template>
<template #caption>
{{ plugin.description }}
</template>
<template #footer>
<div class="_buttons">
<MkButton inline @click="copy(pluginLogs.get(plugin.id)?.join('\n'))"><i class="ti ti-copy"></i> {{ i18n.ts.copy }}</MkButton>
<MkButton :disabled="!plugin.active" @click="reload(plugin)"><i class="ti ti-refresh"></i> {{ i18n.ts.reload }}</MkButton>
<MkButton danger @click="uninstall(plugin)"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</MkButton>
<MkButton v-if="plugin.config" style="margin-left: auto;" @click="config(plugin)"><i class="ti ti-settings"></i> {{ i18n.ts.settings }}</MkButton>
</div>
</template>
<div class="_gaps_m">
<div class="_gaps_s">
<MkSwitch :modelValue="plugin.active" @update:modelValue="changeActive(plugin, $event)">{{ i18n.ts.makeActive }}</MkSwitch>
</div>
<MkCode :code="pluginLogs.get(plugin.id)?.join('\n') ?? ''"/>
</div>
</MkFolder>
<MkFolder>
<template #icon><i class="ti ti-code"></i></template>
<template #label>{{ i18n.ts._plugin.viewSource }}</template>
<div class="_gaps_s">
<div class="_buttons">
<MkButton inline @click="copy(plugin.src)"><i class="ti ti-copy"></i> {{ i18n.ts.copy }}</MkButton>
<div class="_gaps_s">
<MkKeyValue>
<template #key>{{ i18n.ts.author }}</template>
<template #value>{{ plugin.author }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.description }}</template>
<template #value>{{ plugin.description }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.permission }}</template>
<template #value>
<ul style="margin-top: 0; margin-bottom: 0;">
<li v-for="permission in plugin.permissions" :key="permission">{{ i18n.ts._permissions[permission] }}</li>
<li v-if="!plugin.permissions || plugin.permissions.length === 0">{{ i18n.ts.none }}</li>
</ul>
</template>
</MkKeyValue>
</div>
<MkCode :code="plugin.src ?? ''" lang="is"/>
<div class="_gaps_s">
<MkFolder>
<template #icon><i class="ti ti-terminal-2"></i></template>
<template #label>{{ i18n.ts.logs }}</template>
<div>
<div v-for="log in pluginLogs.get(plugin.installId)" :class="[$style.log, { [$style.isSystemLog]: log.isSystem }]">
<div class="_monospace">{{ timeToHhMmSs(log.at) }} {{ log.message }}</div>
</div>
</div>
</MkFolder>
<MkFolder :withSpacer="false">
<template #icon><i class="ti ti-code"></i></template>
<template #label>{{ i18n.ts._plugin.viewSource }}</template>
<div class="_gaps_s">
<MkCode :code="plugin.src ?? ''" lang="ais"/>
</div>
</MkFolder>
</div>
</div>
</MkFolder>
</div>
</div>
</FormSection>
</div>
</FormSection>
</div>
</SearchMarker>
</template>
<script lang="ts" setup>
import { nextTick, ref, computed } from 'vue';
import type { Plugin } from '@/plugin.js';
import FormLink from '@/components/form/link.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import FormSection from '@/components/form/section.vue';
@ -81,66 +102,58 @@ import MkButton from '@/components/MkButton.vue';
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 { ColdDeviceStorage } from '@/store.js';
import { unisonReload } from '@/scripts/unison-reload.js';
import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { pluginLogs } from '@/plugin.js';
import { definePage } from '@/page.js';
import { changePluginActive, configPlugin, pluginLogs, uninstallPlugin, reloadPlugin } from '@/plugin.js';
import { prefer } from '@/preferences.js';
import * as os from '@/os.js';
const plugins = ref(ColdDeviceStorage.get('plugins'));
const plugins = prefer.r.plugins;
async function uninstall(plugin) {
ColdDeviceStorage.set('plugins', plugins.value.filter(x => x.id !== plugin.id));
await os.apiWithDialog('i/revoke-token', {
token: plugin.token,
async function uninstall(plugin: Plugin) {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.tsx.removeAreYouSure({ x: plugin.name }),
});
nextTick(() => {
unisonReload();
});
}
if (canceled) return;
await uninstallPlugin(plugin);
function copy(text) {
copyToClipboard(text ?? '');
os.success();
}
// TODO: この処理をstore側にactionとして移動し、設定画面を開くAiScriptAPIを実装できるようにする
async function config(plugin) {
const config = plugin.config;
for (const key in plugin.configData) {
config[key].default = plugin.configData[key];
}
const { canceled, result } = await os.form(plugin.name, config);
if (canceled) return;
const coldPlugins = ColdDeviceStorage.get('plugins');
coldPlugins.find(p => p.id === plugin.id)!.configData = result;
ColdDeviceStorage.set('plugins', coldPlugins);
nextTick(() => {
location.reload();
});
function reload(plugin: Plugin) {
reloadPlugin(plugin);
}
function changeActive(plugin, active) {
const coldPlugins = ColdDeviceStorage.get('plugins');
coldPlugins.find(p => p.id === plugin.id)!.active = active;
ColdDeviceStorage.set('plugins', coldPlugins);
async function config(plugin: Plugin) {
await configPlugin(plugin);
}
nextTick(() => {
location.reload();
});
function changeActive(plugin: Plugin, active: boolean) {
changePluginActive(plugin, active);
}
function timeToHhMmSs(unixtime: number) {
return new Date(unixtime).toTimeString().split(' ')[0];
}
const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts.plugins,
icon: 'ti ti-plug',
}));
</script>
<style module>
.log {
}
.isSystemLog {
opacity: 0.5;
}
</style>

489
packages/frontend/src/pages/settings/preferences-backups.vue
View file

@ -1,489 +0,0 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps_m">
<div :class="$style.buttons">
<MkButton inline primary @click="saveNew">{{ i18n.ts._preferencesBackups.saveNew }}</MkButton>
<MkButton inline @click="loadFile">{{ i18n.ts._preferencesBackups.loadFile }}</MkButton>
</div>
<FormSection>
<template #label>{{ i18n.ts._preferencesBackups.list }}</template>
<template v-if="profiles && Object.keys(profiles).length > 0">
<div class="_gaps_s">
<div
v-for="(profile, id) in profiles"
:key="id"
class="_panel"
:class="$style.profile"
@click="$event => menu($event, id)"
@contextmenu.prevent.stop="$event => menu($event, id)"
>
<div :class="$style.profileName">{{ profile.name }}</div>
<div :class="$style.profileTime">{{ i18n.tsx._preferencesBackups.createdAt({ date: (new Date(profile.createdAt)).toLocaleDateString(), time: (new Date(profile.createdAt)).toLocaleTimeString() }) }}</div>
<div v-if="profile.updatedAt" :class="$style.profileTime">{{ i18n.tsx._preferencesBackups.updatedAt({ date: (new Date(profile.updatedAt)).toLocaleDateString(), time: (new Date(profile.updatedAt)).toLocaleTimeString() }) }}</div>
</div>
</div>
</template>
<div v-else-if="profiles">
<MkInfo>{{ i18n.ts._preferencesBackups.noBackups }}</MkInfo>
</div>
<MkLoading v-else/>
</FormSection>
</div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { v4 as uuid } from 'uuid';
import { version, host } from '@@/js/config.js';
import FormSection from '@/components/form/section.vue';
import MkButton from '@/components/MkButton.vue';
import MkInfo from '@/components/MkInfo.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { ColdDeviceStorage, defaultStore } from '@/store.js';
import { unisonReload } from '@/scripts/unison-reload.js';
import { useStream } from '@/stream.js';
import { $i } from '@/account.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { miLocalStorage } from '@/local-storage.js';
const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
'collapseRenotes',
'collapseNotesRepliedTo',
'menu',
'visibility',
'localOnly',
'statusbars',
'widgets',
'tl',
'pinnedUserLists',
'overridedDeviceKind',
'serverDisconnectedBehavior',
'nsfw',
'highlightSensitiveMedia',
'animation',
'animatedMfm',
'advancedMfm',
'showReactionsCount',
'loadRawImages',
'warnMissingAltText',
'enableFaviconNotificationDot',
'imageNewTab',
'dataSaver',
'disableCatSpeak',
'disableShowingAnimatedImages',
'emojiStyle',
'menuStyle',
'useBlurEffectForModal',
'useBlurEffect',
'showFixedPostForm',
'showFixedPostFormInChannel',
'enableInfiniteScroll',
'useReactionPickerForContextMenu',
'showGapBetweenNotesInTimeline',
'instanceTicker',
'emojiPickerScale',
'emojiPickerWidth',
'emojiPickerHeight',
'emojiPickerStyle',
'defaultSideView',
'menuDisplay',
'reportError',
'squareAvatars',
'showAvatarDecorations',
'numberOfPageCache',
'showNoteActionsOnlyHover',
'showClipButtonInNoteFooter',
'reactionsDisplaySize',
'forceShowAds',
'oneko',
'numberOfReplies',
'aiChanMode',
'devMode',
'mediaListWithOneImageAppearance',
'notificationPosition',
'notificationStackAxis',
'keepScreenOn',
'defaultWithReplies',
'disableStreamingTimeline',
'useGroupedNotifications',
'sound_masterVolume',
'sound_note',
'sound_noteMy',
'sound_notification',
];
const coldDeviceStorageSaveKeys: (keyof typeof ColdDeviceStorage.default)[] = [
'lightTheme',
'darkTheme',
'syncDeviceDarkMode',
'plugins',
];
const scope = ['clientPreferencesProfiles'];
const profileProps = ['name', 'createdAt', 'updatedAt', 'misskeyVersion', 'settings', 'host'];
type Profile = {
name: string;
createdAt: string;
updatedAt: string | null;
misskeyVersion: string;
host: string;
settings: {
hot: Record<keyof typeof defaultStoreSaveKeys, unknown>;
cold: Record<keyof typeof coldDeviceStorageSaveKeys, unknown>;
fontSize: string | null;
lang: string | null;
cornerRadius: string | null;
useSystemFont: 't' | null;
wallpaper: string | null;
};
};
const connection = $i && useStream().useChannel('main');
const profiles = ref<Record<string, Profile> | null>(null);
misskeyApi('i/registry/get-all', { scope })
.then(res => {
profiles.value = res || {};
});
function isObject(value: unknown): value is Record<string, unknown> {
return value != null && typeof value === 'object' && !Array.isArray(value);
}
function validate(profile: any): void {
if (!isObject(profile)) throw new Error('not an object');
// Check if unnecessary properties exist
if (Object.keys(profile).some(key => !profileProps.includes(key))) throw new Error('Unnecessary properties exist');
if (!profile.name) throw new Error('Missing required prop: name');
if (!profile.misskeyVersion) throw new Error('Missing required prop: misskeyVersion');
// Check if createdAt and updatedAt is Date
// https://zenn.dev/lollipop_onl/articles/eoz-judge-js-invalid-date
if (!profile.createdAt || Number.isNaN(new Date(profile.createdAt as any).getTime())) throw new Error('createdAt is falsy or not Date');
if (profile.updatedAt) {
if (Number.isNaN(new Date(profile.updatedAt as any).getTime())) {
throw new Error('updatedAt is not Date');
}
} else if (profile.updatedAt !== null) {
throw new Error('updatedAt is not null');
}
if (!profile.settings) throw new Error('Missing required prop: settings');
if (!isObject(profile.settings)) throw new Error('Invalid prop: settings');
}
function getSettings(): Profile['settings'] {
const hot = {} as Record<keyof typeof defaultStoreSaveKeys, unknown>;
for (const key of defaultStoreSaveKeys) {
hot[key] = defaultStore.state[key];
}
const cold = {} as Record<keyof typeof coldDeviceStorageSaveKeys, unknown>;
for (const key of coldDeviceStorageSaveKeys) {
cold[key] = ColdDeviceStorage.get(key);
}
return {
hot,
cold,
fontSize: miLocalStorage.getItem('fontSize'),
lang: miLocalStorage.getItem('lang'),
cornerRadius: miLocalStorage.getItem('cornerRadius'),
useSystemFont: miLocalStorage.getItem('useSystemFont') as 't' | null,
wallpaper: miLocalStorage.getItem('wallpaper'),
};
}
async function saveNew(): Promise<void> {
if (!profiles.value) return;
const { canceled, result: name } = await os.inputText({
title: i18n.ts._preferencesBackups.inputName,
default: '',
});
if (canceled) return;
if (Object.values(profiles.value).some(x => x.name === name)) {
return os.alert({
title: i18n.ts._preferencesBackups.cannotSave,
text: i18n.tsx._preferencesBackups.nameAlreadyExists({ name }),
});
}
const id = uuid();
const profile: Profile = {
name,
createdAt: (new Date()).toISOString(),
updatedAt: null,
misskeyVersion: version,
host,
settings: getSettings(),
};
await os.apiWithDialog('i/registry/set', { scope, key: id, value: profile });
}
function loadFile(): void {
const input = document.createElement('input');
input.type = 'file';
input.multiple = false;
input.onchange = async () => {
if (!profiles.value) return;
if (!input.files || input.files.length === 0) return;
const file = input.files[0];
if (file.type !== 'application/json') {
return os.alert({
type: 'error',
title: i18n.ts._preferencesBackups.cannotLoad,
text: i18n.ts._preferencesBackups.invalidFile,
});
}
let profile: Profile;
try {
profile = JSON.parse(await file.text()) as unknown as Profile;
validate(profile);
} catch (err) {
return os.alert({
type: 'error',
title: i18n.ts._preferencesBackups.cannotLoad,
text: (err as any)?.message ?? '',
});
}
const id = uuid();
await os.apiWithDialog('i/registry/set', { scope, key: id, value: profile });
// 一応廃棄
(window as any).__misskey_input_ref__ = null;
};
// https://qiita.com/fukasawah/items/b9dc732d95d99551013d
// iOS Safari で正常に動かす為のおまじない
(window as any).__misskey_input_ref__ = input;
input.click();
}
async function applyProfile(id: string): Promise<void> {
if (!profiles.value) return;
const profile = profiles.value[id];
const { canceled: cancel1 } = await os.confirm({
type: 'warning',
title: i18n.ts._preferencesBackups.apply,
text: i18n.tsx._preferencesBackups.applyConfirm({ name: profile.name }),
});
if (cancel1) return;
// TODO: バージョン or ホストが違ったらさらに警告を表示
const settings = profile.settings;
// defaultStore
for (const key of defaultStoreSaveKeys) {
if (settings.hot[key] !== undefined) {
defaultStore.set(key, settings.hot[key]);
}
}
// coldDeviceStorage
for (const key of coldDeviceStorageSaveKeys) {
if (settings.cold[key] !== undefined) {
ColdDeviceStorage.set(key, settings.cold[key]);
}
}
// fontSize
if (settings.fontSize) {
miLocalStorage.setItem('fontSize', settings.fontSize);
} else {
miLocalStorage.removeItem('fontSize');
}
// lang
if (settings.lang) {
miLocalStorage.setItem('lang', settings.lang);
} else {
miLocalStorage.removeItem('lang');
}
// cornerRadius
if (settings.cornerRadius) {
miLocalStorage.setItem('cornerRadius', settings.cornerRadius);
} else {
miLocalStorage.removeItem('cornerRadius');
}
// useSystemFont
if (settings.useSystemFont) {
miLocalStorage.setItem('useSystemFont', settings.useSystemFont);
} else {
miLocalStorage.removeItem('useSystemFont');
}
// wallpaper
if (settings.wallpaper != null) {
miLocalStorage.setItem('wallpaper', settings.wallpaper);
} else {
miLocalStorage.removeItem('wallpaper');
}
const { canceled: cancel2 } = await os.confirm({
type: 'info',
text: i18n.ts.reloadToApplySetting,
});
if (cancel2) return;
unisonReload();
}
async function deleteProfile(id: string): Promise<void> {
if (!profiles.value) return;
const { canceled } = await os.confirm({
type: 'info',
title: i18n.ts.delete,
text: i18n.tsx.deleteAreYouSure({ x: profiles.value[id].name }),
});
if (canceled) return;
await os.apiWithDialog('i/registry/remove', { scope, key: id });
delete profiles.value[id];
}
async function save(id: string): Promise<void> {
if (!profiles.value) return;
const { name, createdAt } = profiles.value[id];
const { canceled } = await os.confirm({
type: 'info',
title: i18n.ts._preferencesBackups.save,
text: i18n.tsx._preferencesBackups.saveConfirm({ name }),
});
if (canceled) return;
const profile: Profile = {
name,
createdAt,
updatedAt: (new Date()).toISOString(),
misskeyVersion: version,
host,
settings: getSettings(),
};
await os.apiWithDialog('i/registry/set', { scope, key: id, value: profile });
}
async function rename(id: string): Promise<void> {
if (!profiles.value) return;
const { canceled: cancel1, result: name } = await os.inputText({
title: i18n.ts._preferencesBackups.inputName,
default: '',
});
if (cancel1 || profiles.value[id].name === name) return;
if (Object.values(profiles.value).some(x => x.name === name)) {
return os.alert({
title: i18n.ts._preferencesBackups.cannotSave,
text: i18n.tsx._preferencesBackups.nameAlreadyExists({ name }),
});
}
const registry = Object.assign({}, { ...profiles.value[id] });
const { canceled: cancel2 } = await os.confirm({
type: 'info',
title: i18n.ts.rename,
text: i18n.tsx._preferencesBackups.renameConfirm({ old: registry.name, new: name }),
});
if (cancel2) return;
registry.name = name;
await os.apiWithDialog('i/registry/set', { scope, key: id, value: registry });
}
function menu(ev: MouseEvent, profileId: string) {
if (!profiles.value) return;
return os.popupMenu([{
text: i18n.ts._preferencesBackups.apply,
icon: 'ti ti-check',
action: () => applyProfile(profileId),
}, {
type: 'a',
text: i18n.ts.download,
icon: 'ti ti-download',
href: URL.createObjectURL(new Blob([JSON.stringify(profiles.value[profileId], null, 2)], { type: 'application/json' })),
download: `${profiles.value[profileId].name}.json`,
}, { type: 'divider' }, {
text: i18n.ts.rename,
icon: 'ti ti-forms',
action: () => rename(profileId),
}, {
text: i18n.ts._preferencesBackups.save,
icon: 'ti ti-device-floppy',
action: () => save(profileId),
}, { type: 'divider' }, {
text: i18n.ts.delete,
icon: 'ti ti-trash',
action: () => deleteProfile(profileId),
danger: true,
}], (ev.currentTarget ?? ev.target ?? undefined) as unknown as HTMLElement | undefined);
}
onMounted(() => {
// streamingのuser storage updateイベントを監視して更新
connection?.on('registryUpdated', ({ scope: recievedScope, key, value }) => {
if (!recievedScope || recievedScope.length !== scope.length || recievedScope[0] !== scope[0]) return;
if (!profiles.value) return;
profiles.value[key] = value;
});
});
onUnmounted(() => {
connection?.off('registryUpdated');
});
definePageMetadata(() => ({
title: i18n.ts.preferencesBackups,
icon: 'ti ti-device-floppy',
}));
</script>
<style lang="scss" module>
.buttons {
display: flex;
gap: var(--MI-margin);
flex-wrap: wrap;
}
.profile {
padding: 20px;
cursor: pointer;
&Name {
font-weight: 700;
}
&Time {
font-size: .85em;
opacity: .7;
}
}
</style>

756
packages/frontend/src/pages/settings/preferences.vue Normal file
View file

@ -0,0 +1,756 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<SearchMarker path="/settings/preferences" :label="i18n.ts.preferences" :keywords="['general', 'preferences']" icon="ti ti-adjustments">
<div class="_gaps_m">
<MkFeatureBanner icon="/client-assets/gear_3d.png" color="#00ff9d">
<SearchKeyword>{{ i18n.ts._settings.preferencesBanner }}</SearchKeyword>
</MkFeatureBanner>
<div class="_gaps_s">
<SearchMarker :keywords="['general']">
<MkFolder>
<template #label><SearchLabel>{{ i18n.ts.general }}</SearchLabel></template>
<div class="_gaps_m">
<SearchMarker :keywords="['language']">
<MkSelect v-model="lang">
<template #label><SearchLabel>{{ i18n.ts.uiLanguage }}</SearchLabel></template>
<option v-for="x in langs" :key="x[0]" :value="x[0]">{{ x[1] }}</option>
<template #caption>
<I18n :src="i18n.ts.i18nInfo" tag="span">
<template #link>
<MkLink url="https://crowdin.com/project/misskey">Crowdin</MkLink>
</template>
</I18n>
</template>
</MkSelect>
</SearchMarker>
<SearchMarker :keywords="['device', 'type', 'kind', 'smartphone', 'tablet', 'desktop']">
<MkRadios v-model="overridedDeviceKind">
<template #label><SearchLabel>{{ i18n.ts.overridedDeviceKind }}</SearchLabel></template>
<option :value="null">{{ i18n.ts.auto }}</option>
<option value="smartphone"><i class="ti ti-device-mobile"/> {{ i18n.ts.smartphone }}</option>
<option value="tablet"><i class="ti ti-device-tablet"/> {{ i18n.ts.tablet }}</option>
<option value="desktop"><i class="ti ti-device-desktop"/> {{ i18n.ts.desktop }}</option>
</MkRadios>
</SearchMarker>
<div class="_gaps_s">
<SearchMarker :keywords="['blur']">
<MkPreferenceContainer k="useBlurEffect">
<MkSwitch v-model="useBlurEffect">
<template #label><SearchLabel>{{ i18n.ts.useBlurEffect }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['blur', 'modal']">
<MkPreferenceContainer k="useBlurEffectForModal">
<MkSwitch v-model="useBlurEffectForModal">
<template #label><SearchLabel>{{ i18n.ts.useBlurEffectForModal }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['avatar', 'icon', 'decoration', 'show']">
<MkPreferenceContainer k="showAvatarDecorations">
<MkSwitch v-model="showAvatarDecorations">
<template #label><SearchLabel>{{ i18n.ts.showAvatarDecorations }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['follow', 'confirm', 'always']">
<MkPreferenceContainer k="alwaysConfirmFollow">
<MkSwitch v-model="alwaysConfirmFollow">
<template #label><SearchLabel>{{ i18n.ts.alwaysConfirmFollow }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['highlight', 'sensitive', 'nsfw', 'image', 'photo', 'picture', 'media', 'thumbnail']">
<MkPreferenceContainer k="highlightSensitiveMedia">
<MkSwitch v-model="highlightSensitiveMedia">
<template #label><SearchLabel>{{ i18n.ts.highlightSensitiveMedia }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['sensitive', 'nsfw', 'media', 'image', 'photo', 'picture', 'attachment', 'confirm']">
<MkPreferenceContainer k="confirmWhenRevealingSensitiveMedia">
<MkSwitch v-model="confirmWhenRevealingSensitiveMedia">
<template #label><SearchLabel>{{ i18n.ts.confirmWhenRevealingSensitiveMedia }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['mfm', 'enable', 'show', 'advanced']">
<MkPreferenceContainer k="advancedMfm">
<MkSwitch v-model="advancedMfm">
<template #label><SearchLabel>{{ i18n.ts.enableAdvancedMfm }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['auto', 'load', 'auto', 'more', 'scroll']">
<MkPreferenceContainer k="enableInfiniteScroll">
<MkSwitch v-model="enableInfiniteScroll">
<template #label><SearchLabel>{{ i18n.ts.enableInfiniteScroll }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
</div>
<SearchMarker :keywords="['emoji', 'style', 'native', 'system', 'fluent', 'twemoji']">
<MkPreferenceContainer k="emojiStyle">
<div>
<MkRadios v-model="emojiStyle">
<template #label><SearchLabel>{{ i18n.ts.emojiStyle }}</SearchLabel></template>
<option value="native">{{ i18n.ts.native }}</option>
<option value="fluentEmoji">Fluent Emoji</option>
<option value="twemoji">Twemoji</option>
</MkRadios>
<div style="margin: 8px 0 0 0; font-size: 1.5em;"><Mfm :key="emojiStyle" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
</div>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['pinned', 'list']">
<MkFolder>
<template #label><SearchLabel>{{ i18n.ts.pinnedList }}</SearchLabel></template>
<!-- 複数ピン止め管理できるようにしたいけどめんどいので一旦ひとつのみ -->
<MkButton v-if="prefer.r.pinnedUserLists.value.length === 0" @click="setPinnedList()">{{ i18n.ts.add }}</MkButton>
<MkButton v-else danger @click="removePinnedList()"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
</MkFolder>
</SearchMarker>
</div>
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['timeline', 'note']">
<MkFolder>
<template #label><SearchLabel>{{ i18n.ts._settings.timelineAndNote }}</SearchLabel></template>
<div class="_gaps_m">
<div class="_gaps_s">
<SearchMarker :keywords="['post', 'form', 'timeline']">
<MkPreferenceContainer k="showFixedPostForm">
<MkSwitch v-model="showFixedPostForm">
<template #label><SearchLabel>{{ i18n.ts.showFixedPostForm }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['post', 'form', 'timeline', 'channel']">
<MkPreferenceContainer k="showFixedPostFormInChannel">
<MkSwitch v-model="showFixedPostFormInChannel">
<template #label><SearchLabel>{{ i18n.ts.showFixedPostFormInChannel }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['renote']">
<MkPreferenceContainer k="collapseRenotes">
<MkSwitch v-model="collapseRenotes">
<template #label><SearchLabel>{{ i18n.ts.collapseRenotes }}</SearchLabel></template>
<template #caption><SearchKeyword>{{ i18n.ts.collapseRenotesDescription }}</SearchKeyword></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['note', 'timeline', 'gap']">
<MkPreferenceContainer k="showGapBetweenNotesInTimeline">
<MkSwitch v-model="showGapBetweenNotesInTimeline">
<template #label><SearchLabel>{{ i18n.ts.showGapBetweenNotesInTimeline }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['disable', 'streaming', 'timeline']">
<MkPreferenceContainer k="disableStreamingTimeline">
<MkSwitch v-model="disableStreamingTimeline">
<template #label><SearchLabel>{{ i18n.ts.disableStreamingTimeline }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
</div>
<hr>
<div class="_gaps_m">
<div class="_gaps_s">
<SearchMarker :keywords="['hover', 'show', 'footer', 'action']">
<MkPreferenceContainer k="showNoteActionsOnlyHover">
<MkSwitch v-model="showNoteActionsOnlyHover">
<template #label><SearchLabel>{{ i18n.ts.showNoteActionsOnlyHover }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['footer', 'action', 'clip', 'show']">
<MkPreferenceContainer k="showClipButtonInNoteFooter">
<MkSwitch v-model="showClipButtonInNoteFooter">
<template #label><SearchLabel>{{ i18n.ts.showClipButtonInNoteFooter }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['reaction', 'count', 'show']">
<MkPreferenceContainer k="showReactionsCount">
<MkSwitch v-model="showReactionsCount">
<template #label><SearchLabel>{{ i18n.ts.showReactionsCount }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['reaction', 'confirm']">
<MkPreferenceContainer k="confirmOnReact">
<MkSwitch v-model="confirmOnReact">
<template #label><SearchLabel>{{ i18n.ts.confirmOnReact }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['image', 'photo', 'picture', 'media', 'thumbnail', 'quality', 'raw', 'attachment']">
<MkPreferenceContainer k="loadRawImages">
<MkSwitch v-model="loadRawImages">
<template #label><SearchLabel>{{ i18n.ts.loadRawImages }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['reaction', 'picker', 'contextmenu', 'open']">
<MkPreferenceContainer k="useReactionPickerForContextMenu">
<MkSwitch v-model="useReactionPickerForContextMenu">
<template #label><SearchLabel>{{ i18n.ts.useReactionPickerForContextMenu }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
</div>
<SearchMarker :keywords="['reaction', 'size', 'scale', 'display']">
<MkPreferenceContainer k="reactionsDisplaySize">
<MkRadios v-model="reactionsDisplaySize">
<template #label><SearchLabel>{{ i18n.ts.reactionsDisplaySize }}</SearchLabel></template>
<option value="small">{{ i18n.ts.small }}</option>
<option value="medium">{{ i18n.ts.medium }}</option>
<option value="large">{{ i18n.ts.large }}</option>
</MkRadios>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['reaction', 'size', 'scale', 'display', 'width', 'limit']">
<MkPreferenceContainer k="limitWidthOfReaction">
<MkSwitch v-model="limitWidthOfReaction">
<template #label><SearchLabel>{{ i18n.ts.limitWidthOfReaction }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['attachment', 'image', 'photo', 'picture', 'media', 'thumbnail', 'list', 'size', 'height']">
<MkPreferenceContainer k="mediaListWithOneImageAppearance">
<MkRadios v-model="mediaListWithOneImageAppearance">
<template #label><SearchLabel>{{ i18n.ts.mediaListWithOneImageAppearance }}</SearchLabel></template>
<option value="expand">{{ i18n.ts.default }}</option>
<option value="16_9">{{ i18n.tsx.limitTo({ x: '16:9' }) }}</option>
<option value="1_1">{{ i18n.tsx.limitTo({ x: '1:1' }) }}</option>
<option value="2_3">{{ i18n.tsx.limitTo({ x: '2:3' }) }}</option>
</MkRadios>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['ticker', 'information', 'label', 'instance', 'server', 'host', 'federation']">
<MkPreferenceContainer k="instanceTicker">
<MkSelect v-if="instance.federation !== 'none'" v-model="instanceTicker">
<template #label><SearchLabel>{{ i18n.ts.instanceTicker }}</SearchLabel></template>
<option value="none">{{ i18n.ts._instanceTicker.none }}</option>
<option value="remote">{{ i18n.ts._instanceTicker.remote }}</option>
<option value="always">{{ i18n.ts._instanceTicker.always }}</option>
</MkSelect>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['attachment', 'image', 'photo', 'picture', 'media', 'thumbnail', 'nsfw', 'sensitive', 'display', 'show', 'hide', 'visibility']">
<MkPreferenceContainer k="nsfw">
<MkSelect v-model="nsfw">
<template #label><SearchLabel>{{ i18n.ts.displayOfSensitiveMedia }}</SearchLabel></template>
<option value="respect">{{ i18n.ts._displayOfSensitiveMedia.respect }}</option>
<option value="ignore">{{ i18n.ts._displayOfSensitiveMedia.ignore }}</option>
<option value="force">{{ i18n.ts._displayOfSensitiveMedia.force }}</option>
</MkSelect>
</MkPreferenceContainer>
</SearchMarker>
</div>
</div>
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['post', 'form']">
<MkFolder>
<template #label><SearchLabel>{{ i18n.ts.postForm }}</SearchLabel></template>
<div class="_gaps_m">
<div class="_gaps_s">
<SearchMarker :keywords="['remember', 'keep', 'note', 'cw']">
<MkPreferenceContainer k="keepCw">
<MkSwitch v-model="keepCw">
<template #label><SearchLabel>{{ i18n.ts.keepCw }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['remember', 'keep', 'note', 'visibility']">
<MkPreferenceContainer k="rememberNoteVisibility">
<MkSwitch v-model="rememberNoteVisibility">
<template #label><SearchLabel>{{ i18n.ts.rememberNoteVisibility }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['mfm', 'enable', 'show', 'advanced', 'picker', 'form', 'function', 'fn']">
<MkPreferenceContainer k="enableQuickAddMfmFunction">
<MkSwitch v-model="enableQuickAddMfmFunction">
<template #label><SearchLabel>{{ i18n.ts.enableQuickAddMfmFunction }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
</div>
<SearchMarker :keywords="['default', 'note', 'visibility']">
<MkDisableSection :disabled="rememberNoteVisibility">
<MkFolder>
<template #label><SearchLabel>{{ i18n.ts.defaultNoteVisibility }}</SearchLabel></template>
<template v-if="defaultNoteVisibility === 'public'" #suffix>{{ i18n.ts._visibility.public }}</template>
<template v-else-if="defaultNoteVisibility === 'home'" #suffix>{{ i18n.ts._visibility.home }}</template>
<template v-else-if="defaultNoteVisibility === 'followers'" #suffix>{{ i18n.ts._visibility.followers }}</template>
<template v-else-if="defaultNoteVisibility === 'specified'" #suffix>{{ i18n.ts._visibility.specified }}</template>
<div class="_gaps_m">
<MkPreferenceContainer k="defaultNoteVisibility">
<MkSelect v-model="defaultNoteVisibility">
<option value="public">{{ i18n.ts._visibility.public }}</option>
<option value="home">{{ i18n.ts._visibility.home }}</option>
<option value="followers">{{ i18n.ts._visibility.followers }}</option>
<option value="specified">{{ i18n.ts._visibility.specified }}</option>
</MkSelect>
</MkPreferenceContainer>
<MkPreferenceContainer k="defaultNoteLocalOnly">
<MkSwitch v-model="defaultNoteLocalOnly">{{ i18n.ts._visibility.disableFederation }}</MkSwitch>
</MkPreferenceContainer>
</div>
</MkFolder>
</MkDisableSection>
</SearchMarker>
</div>
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['notification']">
<MkFolder>
<template #label><SearchLabel>{{ i18n.ts.notifications }}</SearchLabel></template>
<div class="_gaps_m">
<SearchMarker :keywords="['group']">
<MkPreferenceContainer k="useGroupedNotifications">
<MkSwitch v-model="useGroupedNotifications">
<template #label><SearchLabel>{{ i18n.ts.useGroupedNotifications }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['position']">
<MkPreferenceContainer k="notificationPosition">
<MkRadios v-model="notificationPosition">
<template #label><SearchLabel>{{ i18n.ts.position }}</SearchLabel></template>
<option value="leftTop"><i class="ti ti-align-box-left-top"></i> {{ i18n.ts.leftTop }}</option>
<option value="rightTop"><i class="ti ti-align-box-right-top"></i> {{ i18n.ts.rightTop }}</option>
<option value="leftBottom"><i class="ti ti-align-box-left-bottom"></i> {{ i18n.ts.leftBottom }}</option>
<option value="rightBottom"><i class="ti ti-align-box-right-bottom"></i> {{ i18n.ts.rightBottom }}</option>
</MkRadios>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['stack', 'axis', 'direction']">
<MkPreferenceContainer k="notificationStackAxis">
<MkRadios v-model="notificationStackAxis">
<template #label><SearchLabel>{{ i18n.ts.stackAxis }}</SearchLabel></template>
<option value="vertical"><i class="ti ti-carousel-vertical"></i> {{ i18n.ts.vertical }}</option>
<option value="horizontal"><i class="ti ti-carousel-horizontal"></i> {{ i18n.ts.horizontal }}</option>
</MkRadios>
</MkPreferenceContainer>
</SearchMarker>
<MkButton @click="testNotification">{{ i18n.ts._notification.checkNotificationBehavior }}</MkButton>
</div>
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['datasaver']">
<MkFolder>
<template #label><SearchLabel>{{ i18n.ts.dataSaver }}</SearchLabel></template>
<div class="_gaps_m">
<MkInfo>{{ i18n.ts.reloadRequiredToApplySettings }}</MkInfo>
<div class="_buttons">
<MkButton inline @click="enableAllDataSaver">{{ i18n.ts.enableAll }}</MkButton>
<MkButton inline @click="disableAllDataSaver">{{ i18n.ts.disableAll }}</MkButton>
</div>
<div class="_gaps_m">
<MkSwitch v-model="dataSaver.media">
{{ i18n.ts._dataSaver._media.title }}
<template #caption>{{ i18n.ts._dataSaver._media.description }}</template>
</MkSwitch>
<MkSwitch v-model="dataSaver.avatar">
{{ i18n.ts._dataSaver._avatar.title }}
<template #caption>{{ i18n.ts._dataSaver._avatar.description }}</template>
</MkSwitch>
<MkSwitch v-model="dataSaver.urlPreview">
{{ i18n.ts._dataSaver._urlPreview.title }}
<template #caption>{{ i18n.ts._dataSaver._urlPreview.description }}</template>
</MkSwitch>
<MkSwitch v-model="dataSaver.code">
{{ i18n.ts._dataSaver._code.title }}
<template #caption>{{ i18n.ts._dataSaver._code.description }}</template>
</MkSwitch>
</div>
</div>
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['other']">
<MkFolder>
<template #label><SearchLabel>{{ i18n.ts.other }}</SearchLabel></template>
<div class="_gaps_m">
<div class="_gaps_s">
<SearchMarker :keywords="['avatar', 'icon', 'square']">
<MkPreferenceContainer k="squareAvatars">
<MkSwitch v-model="squareAvatars">
<template #label><SearchLabel>{{ i18n.ts.squareAvatars }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['effect', 'show']">
<MkPreferenceContainer k="enableSeasonalScreenEffect">
<MkSwitch v-model="enableSeasonalScreenEffect">
<template #label><SearchLabel>{{ i18n.ts.seasonalScreenEffect }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['image', 'photo', 'picture', 'media', 'thumbnail', 'new', 'tab']">
<MkPreferenceContainer k="imageNewTab">
<MkSwitch v-model="imageNewTab">
<template #label><SearchLabel>{{ i18n.ts.openImageInNewTab }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['follow', 'replies']">
<MkPreferenceContainer k="defaultFollowWithReplies">
<MkSwitch v-model="defaultFollowWithReplies">
<template #label><SearchLabel>{{ i18n.ts.withRepliesByDefaultForNewlyFollowed }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
</div>
<SearchMarker :keywords="['server', 'disconnect', 'reconnect', 'reload', 'streaming']">
<MkPreferenceContainer k="serverDisconnectedBehavior">
<MkSelect v-model="serverDisconnectedBehavior">
<template #label><SearchLabel>{{ i18n.ts.whenServerDisconnected }}</SearchLabel></template>
<option value="reload">{{ i18n.ts._serverDisconnectedBehavior.reload }}</option>
<option value="dialog">{{ i18n.ts._serverDisconnectedBehavior.dialog }}</option>
<option value="quiet">{{ i18n.ts._serverDisconnectedBehavior.quiet }}</option>
</MkSelect>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['cache', 'page']">
<MkPreferenceContainer k="numberOfPageCache">
<MkRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" easing>
<template #label><SearchLabel>{{ i18n.ts.numberOfPageCache }}</SearchLabel></template>
<template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template>
</MkRange>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['ad', 'show']">
<MkPreferenceContainer k="forceShowAds">
<MkSwitch v-model="forceShowAds">
<template #label><SearchLabel>{{ i18n.ts.forceShowAds }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker>
<MkPreferenceContainer k="hemisphere">
<MkRadios v-model="hemisphere">
<template #label><SearchLabel>{{ i18n.ts.hemisphere }}</SearchLabel></template>
<option value="N">{{ i18n.ts._hemisphere.N }}</option>
<option value="S">{{ i18n.ts._hemisphere.S }}</option>
<template #caption>{{ i18n.ts._hemisphere.caption }}</template>
</MkRadios>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['emoji', 'dictionary', 'additional', 'extra']">
<MkFolder>
<template #label><SearchLabel>{{ i18n.ts.additionalEmojiDictionary }}</SearchLabel></template>
<div class="_buttons">
<template v-for="lang in emojiIndexLangs" :key="lang">
<MkButton v-if="store.r.additionalUnicodeEmojiIndexes.value[lang]" danger @click="removeEmojiIndex(lang)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }} ({{ getEmojiIndexLangName(lang) }})</MkButton>
<MkButton v-else @click="downloadEmojiIndex(lang)"><i class="ti ti-download"></i> {{ getEmojiIndexLangName(lang) }}{{ store.r.additionalUnicodeEmojiIndexes.value[lang] ? ` (${ i18n.ts.installed })` : '' }}</MkButton>
</template>
</div>
</MkFolder>
</SearchMarker>
</div>
</MkFolder>
</SearchMarker>
</div>
<hr>
<div class="_gaps_s">
<FormLink to="/settings/navbar"><template #icon><i class="ti ti-list"></i></template>{{ i18n.ts.navbar }}</FormLink>
<FormLink to="/settings/statusbar"><template #icon><i class="ti ti-list"></i></template>{{ i18n.ts.statusbar }}</FormLink>
<FormLink to="/settings/deck"><template #icon><i class="ti ti-columns"></i></template>{{ i18n.ts.deck }}</FormLink>
<FormLink to="/settings/custom-css"><template #icon><i class="ti ti-code"></i></template>{{ i18n.ts.customCss }}</FormLink>
</div>
</div>
</SearchMarker>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import { langs } from '@@/js/config.js';
import * as Misskey from 'misskey-js';
import MkSwitch from '@/components/MkSwitch.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkRadios from '@/components/MkRadios.vue';
import MkRange from '@/components/MkRange.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkButton from '@/components/MkButton.vue';
import FormSection from '@/components/form/section.vue';
import FormLink from '@/components/form/link.vue';
import MkLink from '@/components/MkLink.vue';
import MkInfo from '@/components/MkInfo.vue';
import { store } from '@/store.js';
import * as os from '@/os.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { reloadAsk } from '@/utility/reload-ask.js';
import { i18n } from '@/i18n.js';
import { definePage } from '@/page.js';
import { miLocalStorage } from '@/local-storage.js';
import { prefer } from '@/preferences.js';
import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
import { globalEvents } from '@/events.js';
import { claimAchievement } from '@/utility/achievements.js';
import { instance } from '@/instance.js';
const lang = ref(miLocalStorage.getItem('lang'));
const dataSaver = ref(prefer.s.dataSaver);
const overridedDeviceKind = prefer.model('overridedDeviceKind');
const keepCw = prefer.model('keepCw');
const serverDisconnectedBehavior = prefer.model('serverDisconnectedBehavior');
const hemisphere = prefer.model('hemisphere');
const showNoteActionsOnlyHover = prefer.model('showNoteActionsOnlyHover');
const showClipButtonInNoteFooter = prefer.model('showClipButtonInNoteFooter');
const collapseRenotes = prefer.model('collapseRenotes');
const advancedMfm = prefer.model('advancedMfm');
const showReactionsCount = prefer.model('showReactionsCount');
const enableQuickAddMfmFunction = prefer.model('enableQuickAddMfmFunction');
const forceShowAds = prefer.model('forceShowAds');
const loadRawImages = prefer.model('loadRawImages');
const imageNewTab = prefer.model('imageNewTab');
const showFixedPostForm = prefer.model('showFixedPostForm');
const showFixedPostFormInChannel = prefer.model('showFixedPostFormInChannel');
const numberOfPageCache = prefer.model('numberOfPageCache');
const enableInfiniteScroll = prefer.model('enableInfiniteScroll');
const useReactionPickerForContextMenu = prefer.model('useReactionPickerForContextMenu');
const disableStreamingTimeline = prefer.model('disableStreamingTimeline');
const useGroupedNotifications = prefer.model('useGroupedNotifications');
const alwaysConfirmFollow = prefer.model('alwaysConfirmFollow');
const confirmWhenRevealingSensitiveMedia = prefer.model('confirmWhenRevealingSensitiveMedia');
const confirmOnReact = prefer.model('confirmOnReact');
const defaultNoteVisibility = prefer.model('defaultNoteVisibility');
const defaultNoteLocalOnly = prefer.model('defaultNoteLocalOnly');
const rememberNoteVisibility = prefer.model('rememberNoteVisibility');
const showGapBetweenNotesInTimeline = prefer.model('showGapBetweenNotesInTimeline');
const notificationPosition = prefer.model('notificationPosition');
const notificationStackAxis = prefer.model('notificationStackAxis');
const instanceTicker = prefer.model('instanceTicker');
const highlightSensitiveMedia = prefer.model('highlightSensitiveMedia');
const mediaListWithOneImageAppearance = prefer.model('mediaListWithOneImageAppearance');
const reactionsDisplaySize = prefer.model('reactionsDisplaySize');
const limitWidthOfReaction = prefer.model('limitWidthOfReaction');
const squareAvatars = prefer.model('squareAvatars');
const enableSeasonalScreenEffect = prefer.model('enableSeasonalScreenEffect');
const showAvatarDecorations = prefer.model('showAvatarDecorations');
const nsfw = prefer.model('nsfw');
const emojiStyle = prefer.model('emojiStyle');
const useBlurEffectForModal = prefer.model('useBlurEffectForModal');
const useBlurEffect = prefer.model('useBlurEffect');
const defaultFollowWithReplies = prefer.model('defaultFollowWithReplies');
watch(lang, () => {
miLocalStorage.setItem('lang', lang.value as string);
miLocalStorage.removeItem('locale');
miLocalStorage.removeItem('localeVersion');
});
watch([
hemisphere,
lang,
enableInfiniteScroll,
showNoteActionsOnlyHover,
overridedDeviceKind,
disableStreamingTimeline,
alwaysConfirmFollow,
confirmWhenRevealingSensitiveMedia,
showGapBetweenNotesInTimeline,
mediaListWithOneImageAppearance,
reactionsDisplaySize,
limitWidthOfReaction,
mediaListWithOneImageAppearance,
reactionsDisplaySize,
limitWidthOfReaction,
instanceTicker,
squareAvatars,
highlightSensitiveMedia,
enableSeasonalScreenEffect,
], async () => {
await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
});
const emojiIndexLangs = ['en-US', 'ja-JP', 'ja-JP_hira'] as const;
function getEmojiIndexLangName(targetLang: typeof emojiIndexLangs[number]) {
if (langs.find(x => x[0] === targetLang)) {
return langs.find(x => x[0] === targetLang)![1];
} else {
// 絵文字辞書限定の言語定義
switch (targetLang) {
case 'ja-JP_hira': return 'ひらがな';
default: return targetLang;
}
}
}
function downloadEmojiIndex(lang: typeof emojiIndexLangs[number]) {
async function main() {
const currentIndexes = store.s.additionalUnicodeEmojiIndexes;
function download() {
switch (lang) {
case 'en-US': return import('../../unicode-emoji-indexes/en-US.json').then(x => x.default);
case 'ja-JP': return import('../../unicode-emoji-indexes/ja-JP.json').then(x => x.default);
case 'ja-JP_hira': return import('../../unicode-emoji-indexes/ja-JP_hira.json').then(x => x.default);
default: throw new Error('unrecognized lang: ' + lang);
}
}
currentIndexes[lang] = await download();
await store.set('additionalUnicodeEmojiIndexes', currentIndexes);
}
os.promiseDialog(main());
}
function removeEmojiIndex(lang: string) {
async function main() {
const currentIndexes = store.s.additionalUnicodeEmojiIndexes;
delete currentIndexes[lang];
await store.set('additionalUnicodeEmojiIndexes', currentIndexes);
}
os.promiseDialog(main());
}
async function setPinnedList() {
const lists = await misskeyApi('users/lists/list');
const { canceled, result: list } = await os.select({
title: i18n.ts.selectList,
items: lists.map(x => ({
value: x, text: x.name,
})),
});
if (canceled) return;
if (list == null) return;
prefer.commit('pinnedUserLists', [list]);
}
function removePinnedList() {
prefer.commit('pinnedUserLists', []);
}
function enableAllDataSaver() {
const g = { ...prefer.s.dataSaver };
Object.keys(g).forEach((key) => { g[key] = true; });
dataSaver.value = g;
}
function disableAllDataSaver() {
const g = { ...prefer.s.dataSaver };
Object.keys(g).forEach((key) => { g[key] = false; });
dataSaver.value = g;
}
watch(dataSaver, (to) => {
prefer.commit('dataSaver', to);
}, {
deep: true,
});
let smashCount = 0;
let smashTimer: number | null = null;
function testNotification(): void {
const notification: Misskey.entities.Notification = {
id: Math.random().toString(),
createdAt: new Date().toUTCString(),
isRead: false,
type: 'test',
};
globalEvents.emit('clientNotification', notification);
// セルフ通知破壊 実績関連
smashCount++;
if (smashCount >= 10) {
claimAchievement('smashTestNotificationButton');
smashCount = 0;
}
if (smashTimer) {
clearTimeout(smashTimer);
}
smashTimer = window.setTimeout(() => {
smashCount = 0;
}, 300);
}
const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePage(() => ({
title: i18n.ts.general,
icon: 'ti ti-adjustments',
}));
</script>

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

@ -4,190 +4,263 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps_m">
<MkSwitch v-model="isLocked" @update:modelValue="save()">{{ i18n.ts.makeFollowManuallyApprove }}<template #caption>{{ i18n.ts.lockedAccountInfo }}</template></MkSwitch>
<MkSwitch v-if="isLocked" v-model="autoAcceptFollowed" @update:modelValue="save()">{{ i18n.ts.autoAcceptFollowed }}</MkSwitch>
<SearchMarker path="/settings/privacy" :label="i18n.ts.privacy" :keywords="['privacy']" icon="ti ti-lock-open">
<div class="_gaps_m">
<MkFeatureBanner icon="/client-assets/unlocked_3d.png" color="#aeff00">
<SearchKeyword>{{ i18n.ts._settings.privacyBanner }}</SearchKeyword>
</MkFeatureBanner>
<MkSwitch v-model="publicReactions" @update:modelValue="save()">
{{ i18n.ts.makeReactionsPublic }}
<template #caption>{{ i18n.ts.makeReactionsPublicDescription }}</template>
</MkSwitch>
<MkSelect v-model="followingVisibility" @update:modelValue="save()">
<template #label>{{ i18n.ts.followingVisibility }}</template>
<option value="public">{{ i18n.ts._ffVisibility.public }}</option>
<option value="followers">{{ i18n.ts._ffVisibility.followers }}</option>
<option value="private">{{ i18n.ts._ffVisibility.private }}</option>
</MkSelect>
<MkSelect v-model="followersVisibility" @update:modelValue="save()">
<template #label>{{ i18n.ts.followersVisibility }}</template>
<option value="public">{{ i18n.ts._ffVisibility.public }}</option>
<option value="followers">{{ i18n.ts._ffVisibility.followers }}</option>
<option value="private">{{ i18n.ts._ffVisibility.private }}</option>
</MkSelect>
<MkSwitch v-model="hideOnlineStatus" @update:modelValue="save()">
{{ i18n.ts.hideOnlineStatus }}
<template #caption>{{ i18n.ts.hideOnlineStatusDescription }}</template>
</MkSwitch>
<MkSwitch v-model="noCrawle" @update:modelValue="save()">
{{ i18n.ts.noCrawle }}
<template #caption>{{ i18n.ts.noCrawleDescription }}</template>
</MkSwitch>
<MkSwitch v-model="noindex" @update:modelValue="save()">
{{ i18n.ts.makeIndexable }}
<template #caption>{{ i18n.ts.makeIndexableDescription }}</template>
</MkSwitch>
<MkSwitch v-model="isExplorable" @update:modelValue="save()">
{{ i18n.ts.makeExplorable }}
<template #caption>{{ i18n.ts.makeExplorableDescription }}</template>
</MkSwitch>
<MkSwitch v-model="enableRss" @update:modelValue="save()">
{{ i18n.ts.enableRss }}
<template #caption>{{ i18n.ts.enableRssDescription }}</template>
</MkSwitch>
<FormSection>
<template #label>{{ i18n.ts.lockdown }}<span class="_beta">{{ i18n.ts.beta }}</span></template>
<div class="_gaps_m">
<MkSwitch :modelValue="requireSigninToViewContents" @update:modelValue="update_requireSigninToViewContents">
{{ i18n.ts._accountSettings.requireSigninToViewContents }}
<template #caption>
<div>{{ i18n.ts._accountSettings.requireSigninToViewContentsDescription1 }}</div>
<div><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i> {{ i18n.ts._accountSettings.requireSigninToViewContentsDescription2 }}</div>
<div v-if="instance.federation !== 'none'"><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i> {{ i18n.ts._accountSettings.requireSigninToViewContentsDescription3 }}</div>
</template>
<SearchMarker :keywords="['follow', 'lock']">
<MkSwitch v-model="isLocked" @update:modelValue="save()">
<template #label><SearchLabel>{{ i18n.ts.makeFollowManuallyApprove }}</SearchLabel></template>
<template #caption><SearchKeyword>{{ i18n.ts.lockedAccountInfo }}</SearchKeyword></template>
</MkSwitch>
</SearchMarker>
<FormSlot>
<template #label>{{ i18n.ts._accountSettings.makeNotesFollowersOnlyBefore }}</template>
<MkDisableSection :disabled="!isLocked">
<SearchMarker :keywords="['follow', 'auto', 'accept']">
<MkSwitch v-model="autoAcceptFollowed" @update:modelValue="save()">
<template #label><SearchLabel>{{ i18n.ts.autoAcceptFollowed }}</SearchLabel></template>
</MkSwitch>
</SearchMarker>
</MkDisableSection>
<div class="_gaps_s">
<MkSelect :modelValue="makeNotesFollowersOnlyBefore_type" @update:modelValue="makeNotesFollowersOnlyBefore = $event === 'relative' ? -604800 : $event === 'absolute' ? Math.floor(Date.now() / 1000) : null">
<option :value="null">{{ i18n.ts.none }}</option>
<option value="relative">{{ i18n.ts._accountSettings.notesHavePassedSpecifiedPeriod }}</option>
<option value="absolute">{{ i18n.ts._accountSettings.notesOlderThanSpecifiedDateAndTime }}</option>
</MkSelect>
<SearchMarker :keywords="['reaction', 'public']">
<MkSwitch v-model="publicReactions" @update:modelValue="save()">
<template #label><SearchLabel>{{ i18n.ts.makeReactionsPublic }}</SearchLabel></template>
<template #caption><SearchKeyword>{{ i18n.ts.makeReactionsPublicDescription }}</SearchKeyword></template>
</MkSwitch>
</SearchMarker>
<MkSelect v-if="makeNotesFollowersOnlyBefore_type === 'relative'" v-model="makeNotesFollowersOnlyBefore">
<option :value="-3600">{{ i18n.ts.oneHour }}</option>
<option :value="-86400">{{ i18n.ts.oneDay }}</option>
<option :value="-259200">{{ i18n.ts.threeDays }}</option>
<option :value="-604800">{{ i18n.ts.oneWeek }}</option>
<option :value="-2592000">{{ i18n.ts.oneMonth }}</option>
<option :value="-7776000">{{ i18n.ts.threeMonths }}</option>
<option :value="-31104000">{{ i18n.ts.oneYear }}</option>
</MkSelect>
<SearchMarker :keywords="['following', 'visibility']">
<MkSelect v-model="followingVisibility" @update:modelValue="save()">
<template #label><SearchLabel>{{ i18n.ts.followingVisibility }}</SearchLabel></template>
<option value="public">{{ i18n.ts._ffVisibility.public }}</option>
<option value="followers">{{ i18n.ts._ffVisibility.followers }}</option>
<option value="private">{{ i18n.ts._ffVisibility.private }}</option>
</MkSelect>
</SearchMarker>
<MkInput
v-if="makeNotesFollowersOnlyBefore_type === 'absolute'"
:modelValue="formatDateTimeString(new Date(makeNotesFollowersOnlyBefore * 1000), 'yyyy-MM-dd')"
type="date"
:manualSave="true"
@update:modelValue="makeNotesFollowersOnlyBefore = Math.floor(new Date($event).getTime() / 1000)"
>
</MkInput>
</div>
<SearchMarker :keywords="['follower', 'visibility']">
<MkSelect v-model="followersVisibility" @update:modelValue="save()">
<template #label><SearchLabel>{{ i18n.ts.followersVisibility }}</SearchLabel></template>
<option value="public">{{ i18n.ts._ffVisibility.public }}</option>
<option value="followers">{{ i18n.ts._ffVisibility.followers }}</option>
<option value="private">{{ i18n.ts._ffVisibility.private }}</option>
</MkSelect>
</SearchMarker>
<template #caption>
<div>{{ i18n.ts._accountSettings.makeNotesFollowersOnlyBeforeDescription }}</div>
<div v-if="instance.federation !== 'none'"><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i> {{ i18n.ts._accountSettings.mayNotEffectForFederatedNotes }}</div>
</template>
</FormSlot>
<SearchMarker :keywords="['online', 'status']">
<MkSwitch v-model="hideOnlineStatus" @update:modelValue="save()">
<template #label><SearchLabel>{{ i18n.ts.hideOnlineStatus }}</SearchLabel></template>
<template #caption><SearchKeyword>{{ i18n.ts.hideOnlineStatusDescription }}</SearchKeyword></template>
</MkSwitch>
</SearchMarker>
<FormSlot>
<template #label>{{ i18n.ts._accountSettings.makeNotesHiddenBefore }}</template>
<SearchMarker :keywords="['crawle', 'index', 'search']">
<MkSwitch v-model="noCrawle" @update:modelValue="save()">
<template #label><SearchLabel>{{ i18n.ts.noCrawle }}</SearchLabel></template>
<template #caption><SearchKeyword>{{ i18n.ts.noCrawleDescription }}</SearchKeyword></template>
</MkSwitch>
</SearchMarker>
<div class="_gaps_s">
<MkSelect :modelValue="makeNotesHiddenBefore_type" @update:modelValue="makeNotesHiddenBefore = $event === 'relative' ? -604800 : $event === 'absolute' ? Math.floor(Date.now() / 1000) : null">
<option :value="null">{{ i18n.ts.none }}</option>
<option value="relative">{{ i18n.ts._accountSettings.notesHavePassedSpecifiedPeriod }}</option>
<option value="absolute">{{ i18n.ts._accountSettings.notesOlderThanSpecifiedDateAndTime }}</option>
</MkSelect>
<SearchMarker :keywords="['index', 'search']">
<MkSwitch v-model="noindex" @update:modelValue="save()">
{{ i18n.ts.makeIndexable }}
<template #caption>{{ i18n.ts.makeIndexableDescription }}</template>
</MkSwitch>
</SearchMarker>
<MkSelect v-if="makeNotesHiddenBefore_type === 'relative'" v-model="makeNotesHiddenBefore">
<option :value="-3600">{{ i18n.ts.oneHour }}</option>
<option :value="-86400">{{ i18n.ts.oneDay }}</option>
<option :value="-259200">{{ i18n.ts.threeDays }}</option>
<option :value="-604800">{{ i18n.ts.oneWeek }}</option>
<option :value="-2592000">{{ i18n.ts.oneMonth }}</option>
<option :value="-7776000">{{ i18n.ts.threeMonths }}</option>
<option :value="-31104000">{{ i18n.ts.oneYear }}</option>
</MkSelect>
<SearchMarker :keywords="['explore']">
<MkSwitch v-model="isExplorable" @update:modelValue="save()">
<template #label><SearchLabel>{{ i18n.ts.makeExplorable }}</SearchLabel></template>
<template #caption><SearchKeyword>{{ i18n.ts.makeExplorableDescription }}</SearchKeyword></template>
</MkSwitch>
</SearchMarker>
<MkInput
v-if="makeNotesHiddenBefore_type === 'absolute'"
:modelValue="formatDateTimeString(new Date(makeNotesHiddenBefore * 1000), 'yyyy-MM-dd')"
type="date"
:manualSave="true"
@update:modelValue="makeNotesHiddenBefore = Math.floor(new Date($event).getTime() / 1000)"
>
</MkInput>
</div>
<SearchMarker :keywords="['rss', 'feed']">
<MkSwitch v-model="enableRss" @update:modelValue="save()">
{{ i18n.ts.enableRss }}
<template #caption>{{ i18n.ts.enableRssDescription }}</template>
</MkSwitch>
</SearchMarker>
<template #caption>
<div>{{ i18n.ts._accountSettings.makeNotesHiddenBeforeDescription }}</div>
<div v-if="instance.federation !== 'none'"><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i> {{ i18n.ts._accountSettings.mayNotEffectForFederatedNotes }}</div>
</template>
</FormSlot>
<SearchMarker :keywords="['crawle', 'ai']">
<MkSwitch v-model="preventAiLearning" @update:modelValue="save()">
<template #label><SearchLabel>{{ i18n.ts.preventAiLearning }}</SearchLabel></template>
<template #caption><SearchKeyword>{{ i18n.ts.preventAiLearningDescription }}</SearchKeyword></template>
</MkSwitch>
</SearchMarker>
<MkFolder v-if="instance.federation !== 'none'">
<template #label>{{ i18n.ts.authorizedFetchSection }}</template>
<template #suffix>{{ computedAllowUnsignedFetch !== 'always' ? i18n.ts.enabled : i18n.ts.disabled }}</template>
<FormSection>
<SearchMarker :keywords="['chat']">
<MkSelect v-model="chatScope" @update:modelValue="save()">
<template #label><SearchLabel>{{ i18n.ts._chat.chatAllowedUsers }}</SearchLabel></template>
<option value="everyone">{{ i18n.ts._chat._chatAllowedUsers.everyone }}</option>
<option value="followers">{{ i18n.ts._chat._chatAllowedUsers.followers }}</option>
<option value="following">{{ i18n.ts._chat._chatAllowedUsers.following }}</option>
<option value="mutual">{{ i18n.ts._chat._chatAllowedUsers.mutual }}</option>
<option value="none">{{ i18n.ts._chat._chatAllowedUsers.none }}</option>
<template #caption>{{ i18n.ts._chat.chatAllowedUsers_note }}</template>
</MkSelect>
</SearchMarker>
</FormSection>
<MkRadios v-model="allowUnsignedFetch" @update:modelValue="save()">
<template #label>{{ i18n.ts.authorizedFetchLabel }}</template>
<template #caption>{{ i18n.ts.authorizedFetchDescription }}</template>
<option value="never">{{ i18n.ts._authorizedFetchValue.never }} - {{ i18n.ts._authorizedFetchValueDescription.never }}</option>
<option value="always">{{ i18n.ts._authorizedFetchValue.always }} - {{ i18n.ts._authorizedFetchValueDescription.always }}</option>
<option value="essential">{{ i18n.ts._authorizedFetchValue.essential }} - {{ i18n.ts._authorizedFetchValueDescription.essential }}</option>
<option value="staff">{{ i18n.ts._authorizedFetchValue.staff }} - {{ i18n.tsx._authorizedFetchValueDescription.staff({ value: i18n.ts._authorizedFetchValue[instance.allowUnsignedFetch] }) }}</option>
</MkRadios>
</MkFolder>
</div>
</FormSection>
<FormSection>
<div class="_gaps_m">
<MkSwitch v-model="rememberNoteVisibility" @update:modelValue="save()">{{ i18n.ts.rememberNoteVisibility }}</MkSwitch>
<MkFolder v-if="!rememberNoteVisibility">
<template #label>{{ i18n.ts.defaultNoteVisibility }}</template>
<template v-if="defaultNoteVisibility === 'public'" #suffix>{{ i18n.ts._visibility.public }}</template>
<template v-else-if="defaultNoteVisibility === 'home'" #suffix>{{ i18n.ts._visibility.home }}</template>
<template v-else-if="defaultNoteVisibility === 'followers'" #suffix>{{ i18n.ts._visibility.followers }}</template>
<template v-else-if="defaultNoteVisibility === 'specified'" #suffix>{{ i18n.ts._visibility.specified }}</template>
<SearchMarker :keywords="['lockdown']">
<FormSection>
<template #label><SearchLabel>{{ i18n.ts.lockdown }}</SearchLabel><span class="_beta">{{ i18n.ts.beta }}</span></template>
<div class="_gaps_m">
<MkSelect v-model="defaultNoteVisibility">
<option value="public">{{ i18n.ts._visibility.public }}</option>
<option value="home">{{ i18n.ts._visibility.home }}</option>
<option value="followers">{{ i18n.ts._visibility.followers }}</option>
<option value="specified">{{ i18n.ts._visibility.specified }}</option>
</MkSelect>
<MkSwitch v-model="defaultNoteLocalOnly">{{ i18n.ts._visibility.disableFederation }}</MkSwitch>
<SearchMarker :keywords="['login', 'signin']">
<MkSwitch :modelValue="requireSigninToViewContents" @update:modelValue="update_requireSigninToViewContents">
<template #label><SearchLabel>{{ i18n.ts._accountSettings.requireSigninToViewContents }}</SearchLabel></template>
<template #caption>
<div>{{ i18n.ts._accountSettings.requireSigninToViewContentsDescription1 }}</div>
<div><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i> {{ i18n.ts._accountSettings.requireSigninToViewContentsDescription2 }}</div>
</template>
</MkSwitch>
</SearchMarker>
<SearchMarker :keywords="['follower']">
<FormSlot>
<template #label><SearchLabel>{{ i18n.ts._accountSettings.makeNotesFollowersOnlyBefore }}</SearchLabel></template>
<div class="_gaps_s">
<MkSelect :modelValue="makeNotesFollowersOnlyBefore_type" @update:modelValue="makeNotesFollowersOnlyBefore = $event === 'relative' ? -604800 : $event === 'absolute' ? Math.floor(Date.now() / 1000) : null">
<option :value="null">{{ i18n.ts.none }}</option>
<option value="relative">{{ i18n.ts._accountSettings.notesHavePassedSpecifiedPeriod }}</option>
<option value="absolute">{{ i18n.ts._accountSettings.notesOlderThanSpecifiedDateAndTime }}</option>
</MkSelect>
<MkSelect v-if="makeNotesFollowersOnlyBefore_type === 'relative'" v-model="makeNotesFollowersOnlyBefore">
<option :value="-3600">{{ i18n.ts.oneHour }}</option>
<option :value="-86400">{{ i18n.ts.oneDay }}</option>
<option :value="-259200">{{ i18n.ts.threeDays }}</option>
<option :value="-604800">{{ i18n.ts.oneWeek }}</option>
<option :value="-2592000">{{ i18n.ts.oneMonth }}</option>
<option :value="-7776000">{{ i18n.ts.threeMonths }}</option>
<option :value="-31104000">{{ i18n.ts.oneYear }}</option>
</MkSelect>
<MkInput
v-if="makeNotesFollowersOnlyBefore_type === 'absolute'"
:modelValue="formatDateTimeString(new Date(makeNotesFollowersOnlyBefore * 1000), 'yyyy-MM-dd')"
type="date"
:manualSave="true"
@update:modelValue="makeNotesFollowersOnlyBefore = Math.floor(new Date($event).getTime() / 1000)"
>
</MkInput>
</div>
<template #caption>
<div><SearchKeyword>{{ i18n.ts._accountSettings.makeNotesFollowersOnlyBeforeDescription }}</SearchKeyword></div>
</template>
</FormSlot>
</SearchMarker>
<SearchMarker :keywords="['hidden']">
<FormSlot>
<template #label><SearchLabel>{{ i18n.ts._accountSettings.makeNotesHiddenBefore }}</SearchLabel></template>
<div class="_gaps_s">
<MkSelect :modelValue="makeNotesHiddenBefore_type" @update:modelValue="makeNotesHiddenBefore = $event === 'relative' ? -604800 : $event === 'absolute' ? Math.floor(Date.now() / 1000) : null">
<option :value="null">{{ i18n.ts.none }}</option>
<option value="relative">{{ i18n.ts._accountSettings.notesHavePassedSpecifiedPeriod }}</option>
<option value="absolute">{{ i18n.ts._accountSettings.notesOlderThanSpecifiedDateAndTime }}</option>
</MkSelect>
<MkSelect v-if="makeNotesHiddenBefore_type === 'relative'" v-model="makeNotesHiddenBefore">
<option :value="-3600">{{ i18n.ts.oneHour }}</option>
<option :value="-86400">{{ i18n.ts.oneDay }}</option>
<option :value="-259200">{{ i18n.ts.threeDays }}</option>
<option :value="-604800">{{ i18n.ts.oneWeek }}</option>
<option :value="-2592000">{{ i18n.ts.oneMonth }}</option>
<option :value="-7776000">{{ i18n.ts.threeMonths }}</option>
<option :value="-31104000">{{ i18n.ts.oneYear }}</option>
</MkSelect>
<MkInput
v-if="makeNotesHiddenBefore_type === 'absolute'"
:modelValue="formatDateTimeString(new Date(makeNotesHiddenBefore * 1000), 'yyyy-MM-dd')"
type="date"
:manualSave="true"
@update:modelValue="makeNotesHiddenBefore = Math.floor(new Date($event).getTime() / 1000)"
>
</MkInput>
</div>
<template #caption>
<div><SearchKeyword>{{ i18n.ts._accountSettings.makeNotesHiddenBeforeDescription }}</SearchKeyword></div>
<div v-if="instance.federation !== 'none'"><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i> {{ i18n.ts._accountSettings.mayNotEffectForFederatedNotes }}</div>
</template>
</FormSlot>
</SearchMarker>
<SearchMarker :keywords="['federate', 'auth', 'fetch']">
<MkFolder v-if="instance.federation !== 'none'">
<template #label>{{ i18n.ts.authorizedFetchSection }}</template>
<template #suffix>{{ computedAllowUnsignedFetch !== 'always' ? i18n.ts.enabled : i18n.ts.disabled }}</template>
<MkRadios v-model="allowUnsignedFetch" @update:modelValue="save()">
<template #label>{{ i18n.ts.authorizedFetchLabel }}</template>
<template #caption>{{ i18n.ts.authorizedFetchDescription }}</template>
<option value="never">{{ i18n.ts._authorizedFetchValue.never }} - {{ i18n.ts._authorizedFetchValueDescription.never }}</option>
<option value="always">{{ i18n.ts._authorizedFetchValue.always }} - {{ i18n.ts._authorizedFetchValueDescription.always }}</option>
<option value="essential">{{ i18n.ts._authorizedFetchValue.essential }} - {{ i18n.ts._authorizedFetchValueDescription.essential }}</option>
<option value="staff">{{ i18n.ts._authorizedFetchValue.staff }} - {{ i18n.tsx._authorizedFetchValueDescription.staff({ value: i18n.ts._authorizedFetchValue[instance.allowUnsignedFetch] }) }}</option>
</MkRadios>
</MkFolder>
</SearchMarker>
<SearchMarker :keywords="['note', 'visib']">
<div class="_gaps_m">
<MkSwitch v-model="rememberNoteVisibility" @update:modelValue="save()">{{ i18n.ts.rememberNoteVisibility }}</MkSwitch>
<MkFolder v-if="!rememberNoteVisibility">
<template #label>{{ i18n.ts.defaultNoteVisibility }}</template>
<template v-if="defaultNoteVisibility === 'public'" #suffix>{{ i18n.ts._visibility.public }}</template>
<template v-else-if="defaultNoteVisibility === 'home'" #suffix>{{ i18n.ts._visibility.home }}</template>
<template v-else-if="defaultNoteVisibility === 'followers'" #suffix>{{ i18n.ts._visibility.followers }}</template>
<template v-else-if="defaultNoteVisibility === 'specified'" #suffix>{{ i18n.ts._visibility.specified }}</template>
<div class="_gaps_m">
<MkSelect v-model="defaultNoteVisibility">
<option value="public">{{ i18n.ts._visibility.public }}</option>
<option value="home">{{ i18n.ts._visibility.home }}</option>
<option value="followers">{{ i18n.ts._visibility.followers }}</option>
<option value="specified">{{ i18n.ts._visibility.specified }}</option>
</MkSelect>
<MkSwitch v-model="defaultNoteLocalOnly">{{ i18n.ts._visibility.disableFederation }}</MkSwitch>
</div>
</MkFolder>
</div>
</SearchMarker>
<SearchMarker :keywords="['keep', 'cw', 'content', 'warning']">
<div class="_gaps_m">
<MkSwitch v-model="keepCw" @update:modelValue="save()">{{ i18n.ts.keepCw }}</MkSwitch>
<MkInput v-model="defaultCW" type="text" manualSave @update:modelValue="save()">
<template #label>{{ i18n.ts.defaultCW }}</template>
<template #caption>{{ i18n.ts.defaultCWDescription }}</template>
</MkInput>
<MkSelect v-model="defaultCWPriority" :disabled="!defaultCW || !keepCw" @update:modelValue="save()">
<template #label>{{ i18n.ts.defaultCWPriority }}</template>
<template #caption>{{ i18n.ts.defaultCWPriorityDescription }}</template>
<option value="default">{{ i18n.ts._defaultCWPriority.default }}</option>
<option value="parent">{{ i18n.ts._defaultCWPriority.parent }}</option>
<option value="parentDefault">{{ i18n.ts._defaultCWPriority.parentDefault }}</option>
<option value="defaultParent">{{ i18n.ts._defaultCWPriority.defaultParent }}</option>
</MkSelect>
</div>
</SearchMarker>
<MkInfo warn>{{ i18n.ts._accountSettings.mayNotEffectSomeSituations }}</MkInfo>
</div>
</MkFolder>
<MkSwitch v-model="keepCw" @update:modelValue="save()">{{ i18n.ts.keepCw }}</MkSwitch>
<MkInput v-model="defaultCW" type="text" manualSave @update:modelValue="save()">
<template #label>{{ i18n.ts.defaultCW }}</template>
<template #caption>{{ i18n.ts.defaultCWDescription }}</template>
</MkInput>
<MkSelect v-model="defaultCWPriority" :disabled="!defaultCW || !keepCw" @update:modelValue="save()">
<template #label>{{ i18n.ts.defaultCWPriority }}</template>
<template #caption>{{ i18n.ts.defaultCWPriorityDescription }}</template>
<option value="default">{{ i18n.ts._defaultCWPriority.default }}</option>
<option value="parent">{{ i18n.ts._defaultCWPriority.parent }}</option>
<option value="parentDefault">{{ i18n.ts._defaultCWPriority.parentDefault }}</option>
<option value="defaultParent">{{ i18n.ts._defaultCWPriority.defaultParent }}</option>
</MkSelect>
</div>
</FormSection>
</div>
</FormSection>
</SearchMarker>
</div>
</SearchMarker>
</template>
<script lang="ts" setup>
@ -196,19 +269,21 @@ import MkSwitch from '@/components/MkSwitch.vue';
import MkSelect from '@/components/MkSelect.vue';
import FormSection from '@/components/form/section.vue';
import MkFolder from '@/components/MkFolder.vue';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { defaultStore } from '@/store.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { i18n } from '@/i18n.js';
import { instance } from '@/instance.js';
import { signinRequired } from '@/account.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { ensureSignin } from '@/i.js';
import { definePage } from '@/page.js';
import FormSlot from '@/components/form/slot.vue';
import { formatDateTimeString } from '@/scripts/format-time-string.js';
import { formatDateTimeString } from '@/utility/format-time-string.js';
import MkInput from '@/components/MkInput.vue';
import * as os from '@/os.js';
import MkDisableSection from '@/components/MkDisableSection.vue';
import MkInfo from '@/components/MkInfo.vue';
import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
import MkRadios from '@/components/MkRadios.vue';
const $i = signinRequired();
const $i = ensureSignin();
const isLocked = ref($i.isLocked);
const autoAcceptFollowed = ref($i.autoAcceptFollowed);
@ -223,6 +298,7 @@ const hideOnlineStatus = ref($i.hideOnlineStatus);
const publicReactions = ref($i.publicReactions);
const followingVisibility = ref($i.followingVisibility);
const followersVisibility = ref($i.followersVisibility);
const chatScope = ref($i.chatScope);
const defaultCW = ref($i.defaultCW);
const defaultCWPriority = ref($i.defaultCWPriority);
const allowUnsignedFetch = ref($i.allowUnsignedFetch);
@ -290,6 +366,7 @@ function save() {
publicReactions: !!publicReactions.value,
followingVisibility: followingVisibility.value,
followersVisibility: followersVisibility.value,
chatScope: chatScope.value,
defaultCWPriority: defaultCWPriority.value,
defaultCW: defaultCW.value,
allowUnsignedFetch: allowUnsignedFetch.value,
@ -300,7 +377,7 @@ const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts.privacy,
icon: 'ti ti-lock-open',
}));

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

@ -4,122 +4,168 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps_m">
<div class="_panel">
<div :class="$style.banner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
<MkButton primary rounded :class="$style.bannerEdit" @click="changeOrRemoveBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
<MkButton primary rounded :class="$style.backgroundEdit" @click="changeOrRemoveBackground">{{ i18n.ts._profile.changeBackground }}</MkButton>
</div>
<div :class="$style.avatarContainer">
<MkAvatar :class="$style.avatar" :user="$i" forceShowDecoration @click="changeOrRemoveAvatar"/>
<div class="_buttonsCenter">
<MkButton primary rounded @click="changeOrRemoveAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
<MkButton primary rounded link to="/settings/avatar-decoration">{{ i18n.ts.decorate }} <i class="ti ti-sparkles"></i></MkButton>
<SearchMarker path="/settings/profile" :label="i18n.ts.profile" :keywords="['profile']" icon="ti ti-user">
<div class="_gaps_m">
<div class="_panel">
<div :class="$style.banner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
<div :class="$style.bannerEdit">
<SearchMarker :keywords="['banner', 'change', 'remove']">
<MkButton primary rounded @click="changeOrRemoveBanner">{{ <SearchLabel>{{ i18n.ts._profile.changeBanner }}</SearchLabel> }}</MkButton>
</SearchMarker>
</div>
<div :class="$style.backgroundEdit">
<SearchMarker :keywords="['background', 'change', 'remove']">
<MkButton primary rounded @click="changeOrRemoveBackground">{{ <SearchLabel>{{ i18n.ts._profile.changeBackground }}</SearchLabel> }}</MkButton>
</SearchMarker>
</div>
</div>
<div :class="$style.avatarContainer">
<MkAvatar :class="$style.avatar" :user="$i" forceShowDecoration @click="changeOrRemoveAvatar"/>
<div class="_buttonsCenter">
<SearchMarker :keywords="['avatar', 'icon', 'change']">
<MkButton primary rounded @click="changeOrRemoveAvatar"><SearchLabel>{{ i18n.ts._profile.changeAvatar }}</SearchLabel></MkButton>
</SearchMarker>
<MkButton primary rounded link to="/settings/avatar-decoration">{{ i18n.ts.decorate }} <i class="ti ti-sparkles"></i></MkButton>
</div>
</div>
</div>
</div>
<MkInput v-model="profile.name" :max="30" manualSave :mfmAutocomplete="['emoji']">
<template #label>{{ i18n.ts._profile.name }}</template>
</MkInput>
<SearchMarker :keywords="['name']">
<MkInput v-model="profile.name" :max="30" manualSave :mfmAutocomplete="['emoji']">
<template #label><SearchLabel>{{ i18n.ts._profile.name }}</SearchLabel></template>
</MkInput>
</SearchMarker>
<MkTextarea v-model="profile.description" :max="500" tall manualSave mfmAutocomplete :mfmPreview="true">
<template #label>{{ i18n.ts._profile.description }}</template>
<template #caption>{{ i18n.ts._profile.youCanIncludeHashtags }}</template>
</MkTextarea>
<SearchMarker :keywords="['description', 'bio']">
<MkTextarea v-model="profile.description" :max="500" tall manualSave mfmAutocomplete :mfmPreview="true">
<template #label><SearchLabel>{{ i18n.ts._profile.description }}</SearchLabel></template>
<template #caption>{{ i18n.ts._profile.youCanIncludeHashtags }}</template>
</MkTextarea>
</SearchMarker>
<MkInput v-model="profile.location" manualSave>
<template #label>{{ i18n.ts.location }}</template>
<template #prefix><i class="ti ti-map-pin"></i></template>
</MkInput>
<SearchMarker :keywords="['location', 'locale']">
<MkInput v-model="profile.location" manualSave>
<template #label><SearchLabel>{{ i18n.ts.location }}</SearchLabel></template>
<template #prefix><i class="ti ti-map-pin"></i></template>
</MkInput>
</SearchMarker>
<MkInput v-model="profile.birthday" :max="setMaxBirthDate()" type="date" manualSave>
<template #label>{{ i18n.ts.birthday }}</template>
<template #prefix><i class="ti ti-cake"></i></template>
</MkInput>
<SearchMarker :keywords="['birthday', 'birthdate', 'age']">
<MkInput v-model="profile.birthday" type="date" manualSave>
<template #label><SearchLabel>{{ i18n.ts.birthday }}</SearchLabel></template>
<template #prefix><i class="ti ti-cake"></i></template>
</MkInput>
</SearchMarker>
<MkInput v-model="profile.listenbrainz" manualSave>
<template #label>{{ i18n.ts._profile.listenbrainz }}</template>
<template #prefix><i class="ph-headphones ph-bold ph-lg"></i></template>
</MkInput>
<SearchMarker :keywords="['listenbrain', 'music']">
<MkInput v-model="profile.listenbrainz" manualSave>
<template #label><SearchLabel>{{ i18n.ts._profile.listenbrainz }}</SearchLabel></template>
<template #prefix><i class="ph-headphones ph-bold ph-lg"></i></template>
</MkInput>
</SearchMarker>
<MkSelect v-model="profile.lang">
<template #label>{{ i18n.ts.language }}</template>
<option v-for="x in Object.keys(langmap)" :key="x" :value="x">{{ langmap[x].nativeName }}</option>
</MkSelect>
<SearchMarker :keywords="['language', 'locale']">
<MkSelect v-model="profile.lang">
<template #label><SearchLabel>{{ i18n.ts.language }}</SearchLabel></template>
<option v-for="x in Object.keys(langmap)" :key="x" :value="x">{{ langmap[x].nativeName }}</option>
</MkSelect>
</SearchMarker>
<FormSlot>
<MkFolder>
<template #icon><i class="ti ti-list"></i></template>
<template #label>{{ i18n.ts._profile.metadataEdit }}</template>
<template #footer>
<div class="_buttons">
<MkButton primary @click="saveFields"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
<MkButton :disabled="fields.length >= 16" @click="addField"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
<MkButton v-if="!fieldEditMode" :disabled="fields.length <= 1" danger @click="fieldEditMode = !fieldEditMode"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
<MkButton v-else @click="fieldEditMode = !fieldEditMode"><i class="ti ti-arrows-sort"></i> {{ i18n.ts.rearrange }}</MkButton>
</div>
</template>
<div :class="$style.metadataRoot" class="_gaps_s">
<MkInfo>{{ i18n.ts._profile.verifiedLinkDescription }}</MkInfo>
<Sortable
v-model="fields"
class="_gaps_s"
itemKey="id"
:animation="150"
:handle="'.' + $style.dragItemHandle"
@start="e => e.item.classList.add('active')"
@end="e => e.item.classList.remove('active')"
>
<template #item="{element, index}">
<div v-panel :class="$style.fieldDragItem">
<button v-if="!fieldEditMode" class="_button" :class="$style.dragItemHandle" tabindex="-1"><i class="ti ti-menu"></i></button>
<button v-if="fieldEditMode" :disabled="fields.length <= 1" class="_button" :class="$style.dragItemRemove" @click="deleteField(index)"><i class="ti ti-x"></i></button>
<div :class="$style.dragItemForm">
<FormSplit :minWidth="200">
<MkInput v-model="element.name" small :placeholder="i18n.ts._profile.metadataLabel">
</MkInput>
<MkInput v-model="element.value" small :placeholder="i18n.ts._profile.metadataContent">
</MkInput>
</FormSplit>
</div>
<SearchMarker :keywords="['metadata']">
<FormSlot>
<MkFolder>
<template #icon><i class="ti ti-list"></i></template>
<template #label><SearchLabel>{{ i18n.ts._profile.metadataEdit }}</SearchLabel></template>
<template #footer>
<div class="_buttons">
<MkButton primary @click="saveFields"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
<MkButton :disabled="fields.length >= 16" @click="addField"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
<MkButton v-if="!fieldEditMode" :disabled="fields.length <= 1" danger @click="fieldEditMode = !fieldEditMode"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
<MkButton v-else @click="fieldEditMode = !fieldEditMode"><i class="ti ti-arrows-sort"></i> {{ i18n.ts.rearrange }}</MkButton>
</div>
</template>
</Sortable>
</div>
</MkFolder>
<template #caption>{{ i18n.ts._profile.metadataDescription }}</template>
</FormSlot>
<MkInput v-model="profile.followedMessage" :max="200" manualSave :mfmPreview="false">
<template #label>{{ i18n.ts._profile.followedMessage }}<span class="_beta">{{ i18n.ts.beta }}</span></template>
<template #caption>
<div>{{ i18n.ts._profile.followedMessageDescription }}</div>
<div>{{ i18n.ts._profile.followedMessageDescriptionForLockedAccount }}</div>
</template>
</MkInput>
<div :class="$style.metadataRoot" class="_gaps_s">
<MkInfo>{{ i18n.ts._profile.verifiedLinkDescription }}</MkInfo>
<MkSelect v-model="reactionAcceptance">
<template #label>{{ i18n.ts.reactionAcceptance }}</template>
<option :value="null">{{ i18n.ts.all }}</option>
<option value="likeOnlyForRemote">{{ i18n.ts.likeOnlyForRemote }}</option>
<option value="nonSensitiveOnly">{{ i18n.ts.nonSensitiveOnly }}</option>
<option value="nonSensitiveOnlyForLocalLikeOnlyForRemote">{{ i18n.ts.nonSensitiveOnlyForLocalLikeOnlyForRemote }}</option>
<option value="likeOnly">{{ i18n.ts.likeOnly }}</option>
</MkSelect>
<Sortable
v-model="fields"
class="_gaps_s"
itemKey="id"
:animation="150"
:handle="'.' + $style.dragItemHandle"
@start="e => e.item.classList.add('active')"
@end="e => e.item.classList.remove('active')"
>
<template #item="{element, index}">
<div v-panel :class="$style.fieldDragItem">
<button v-if="!fieldEditMode" class="_button" :class="$style.dragItemHandle" tabindex="-1"><i class="ti ti-menu"></i></button>
<button v-if="fieldEditMode" :disabled="fields.length <= 1" class="_button" :class="$style.dragItemRemove" @click="deleteField(index)"><i class="ti ti-x"></i></button>
<div :class="$style.dragItemForm">
<FormSplit :minWidth="200">
<MkInput v-model="element.name" small :placeholder="i18n.ts._profile.metadataLabel">
</MkInput>
<MkInput v-model="element.value" small :placeholder="i18n.ts._profile.metadataContent">
</MkInput>
</FormSplit>
</div>
</div>
</template>
</Sortable>
</div>
</MkFolder>
<template #caption>{{ i18n.ts._profile.metadataDescription }}</template>
</FormSlot>
</SearchMarker>
<MkFolder>
<template #label>{{ i18n.ts.advancedSettings }}</template>
<SearchMarker :keywords="['follow', 'message']">
<MkInput v-model="profile.followedMessage" :max="200" manualSave :mfmPreview="false">
<template #label><SearchLabel>{{ i18n.ts._profile.followedMessage }}</SearchLabel><span class="_beta">{{ i18n.ts.beta }}</span></template>
<template #caption>
<div><SearchKeyword>{{ i18n.ts._profile.followedMessageDescription }}</SearchKeyword></div>
<div>{{ i18n.ts._profile.followedMessageDescriptionForLockedAccount }}</div>
</template>
</MkInput>
</SearchMarker>
<div class="_gaps_m">
<MkSwitch v-model="profile.isCat">{{ i18n.ts.flagAsCat }}<template #caption>{{ i18n.ts.flagAsCatDescription }}</template></MkSwitch>
<MkSwitch v-if="profile.isCat" v-model="profile.speakAsCat">{{ i18n.ts.flagSpeakAsCat }}<template #caption>{{ i18n.ts.flagSpeakAsCatDescription }}</template></MkSwitch>
<MkSwitch v-model="profile.isBot">{{ i18n.ts.flagAsBot }}<template #caption>{{ i18n.ts.flagAsBotDescription }}</template></MkSwitch>
</div>
</MkFolder>
</div>
<SearchMarker :keywords="['reaction']">
<MkSelect v-model="reactionAcceptance">
<template #label><SearchLabel>{{ i18n.ts.reactionAcceptance }}</SearchLabel></template>
<option :value="null">{{ i18n.ts.all }}</option>
<option value="likeOnlyForRemote">{{ i18n.ts.likeOnlyForRemote }}</option>
<option value="nonSensitiveOnly">{{ i18n.ts.nonSensitiveOnly }}</option>
<option value="nonSensitiveOnlyForLocalLikeOnlyForRemote">{{ i18n.ts.nonSensitiveOnlyForLocalLikeOnlyForRemote }}</option>
<option value="likeOnly">{{ i18n.ts.likeOnly }}</option>
</MkSelect>
</SearchMarker>
<SearchMarker>
<MkFolder>
<template #label><SearchLabel>{{ i18n.ts.advancedSettings }}</SearchLabel></template>
<div class="_gaps_m">
<SearchMarker :keywords="['cat']">
<MkSwitch v-model="profile.isCat">
<template #label><SearchLabel>{{ i18n.ts.flagAsCat }}</SearchLabel></template>
<template #caption>{{ i18n.ts.flagAsCatDescription }}</template>
</MkSwitch>
<MkSwitch v-if="profile.isCat" v-model="profile.speakAsCat">
<template #label><SearchLabel>{{ i18n.ts.flagSpeakAsCat }}</SearchLabel></template>
<template #caption>{{ i18n.ts.flagSpeakAsCatDescription }}</template>
</MkSwitch>
</SearchMarker>
<SearchMarker :keywords="['bot']">
<MkSwitch v-model="profile.isBot">
<template #label><SearchLabel>{{ i18n.ts.flagAsBot }}</SearchLabel></template>
<template #caption>{{ i18n.ts.flagAsBotDescription }}</template>
</MkSwitch>
</SearchMarker>
</div>
</MkFolder>
</SearchMarker>
</div>
</SearchMarker>
</template>
<script lang="ts" setup>
@ -131,23 +177,22 @@ import MkSelect from '@/components/MkSelect.vue';
import FormSplit from '@/components/form/split.vue';
import MkFolder from '@/components/MkFolder.vue';
import FormSlot from '@/components/form/slot.vue';
import { selectFile } from '@/scripts/select-file.js';
import { selectFile } from '@/utility/select-file.js';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
import { signinRequired } from '@/account.js';
import { langmap } from '@/scripts/langmap.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { claimAchievement } from '@/scripts/achievements.js';
import { defaultStore } from '@/store.js';
import { globalEvents } from '@/events.js';
import { ensureSignin } from '@/i.js';
import { langmap } from '@/utility/langmap.js';
import { definePage } from '@/page.js';
import { claimAchievement } from '@/utility/achievements.js';
import { store } from '@/store.js';
import MkInfo from '@/components/MkInfo.vue';
import MkTextarea from '@/components/MkTextarea.vue';
const $i = signinRequired();
const $i = ensureSignin();
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
const reactionAcceptance = computed(defaultStore.makeGetterSetter('reactionAcceptance'));
const reactionAcceptance = computed(store.makeGetterSetter('reactionAcceptance'));
const now = new Date();
@ -203,7 +248,6 @@ function saveFields() {
os.apiWithDialog('i/update', {
fields: fields.value.filter(field => field.name !== '' && field.value !== '').map(field => ({ name: field.name, value: field.value })),
});
globalEvents.emit('requestClearPageCache');
}
function save() {
@ -238,7 +282,6 @@ function save() {
text: i18n.ts.yourNameContainsProhibitedWordsDescription,
},
});
globalEvents.emit('requestClearPageCache');
claimAchievement('profileFilled');
if (profile.name === 'syuilo' || profile.name === 'しゅいろ') {
claimAchievement('setNameToSyuilo');
@ -270,6 +313,7 @@ function changeAvatar(ev) {
});
$i.avatarId = i.avatarId;
$i.avatarUrl = i.avatarUrl;
claimAchievement('profileFilled');
globalEvents.emit('requestClearPageCache');
});
}
@ -296,7 +340,6 @@ function changeBanner(ev) {
});
$i.bannerId = i.bannerId;
$i.bannerUrl = i.bannerUrl;
globalEvents.emit('requestClearPageCache');
});
}
@ -396,7 +439,7 @@ const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts.profile,
icon: 'ti ti-user',
}));

48
packages/frontend/src/pages/settings/roles.vue
View file

@ -1,48 +0,0 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps_m">
<FormSection first>
<template #label>{{ i18n.ts.rolesAssignedToMe }}</template>
<div class="_gaps_s">
<MkRolePreview v-for="role in $i.roles" :key="role.id" :role="role" :forModeration="false"/>
</div>
</FormSection>
<FormSection>
<template #label>{{ i18n.ts._role.policies }}</template>
<div class="_gaps_s">
<div v-for="policy in Object.keys($i.policies)" :key="policy">
{{ policy }} ... {{ $i.policies[policy] }}
</div>
</div>
</FormSection>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import FormSection from '@/components/form/section.vue';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
import { signinRequired } from '@/account.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import MkRolePreview from '@/components/MkRolePreview.vue';
const $i = signinRequired();
const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
title: i18n.ts.roles,
icon: 'ti ti-badges',
}));
</script>
<style lang="scss" module>
</style>

78
packages/frontend/src/pages/settings/security.vue
View file

@ -4,39 +4,52 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps_m">
<FormSection first>
<template #label>{{ i18n.ts.password }}</template>
<MkButton primary @click="change()">{{ i18n.ts.changePassword }}</MkButton>
</FormSection>
<SearchMarker path="/settings/security" :label="i18n.ts.security" :keywords="['security']" icon="ti ti-lock" :inlining="['2fa']">
<div class="_gaps_m">
<MkFeatureBanner icon="/client-assets/locked_with_key_3d.png" color="#ffbf00">
<SearchKeyword>{{ i18n.ts._settings.securityBanner }}</SearchKeyword>
</MkFeatureBanner>
<X2fa/>
<SearchMarker :keywords="['password']">
<FormSection first>
<template #label><SearchLabel>{{ i18n.ts.password }}</SearchLabel></template>
<FormSection>
<template #label>{{ i18n.ts.signinHistory }}</template>
<MkPagination :pagination="pagination" disableAutoLoad>
<template #default="{items}">
<div>
<div v-for="item in items" :key="item.id" v-panel class="timnmucd">
<header>
<i v-if="item.success" class="ti ti-check icon succ"></i>
<i v-else class="ti ti-circle-x icon fail"></i>
<code class="ip _monospace">{{ item.ip }}</code>
<MkTime :time="item.createdAt" class="time"/>
</header>
<SearchMarker>
<MkButton primary @click="change()">
<SearchLabel>{{ i18n.ts.changePassword }}</SearchLabel>
</MkButton>
</SearchMarker>
</FormSection>
</SearchMarker>
<X2fa/>
<FormSection>
<template #label>{{ i18n.ts.signinHistory }}</template>
<MkPagination :pagination="pagination" disableAutoLoad>
<template #default="{items}">
<div>
<div v-for="item in items" :key="item.id" v-panel class="timnmucd">
<header>
<i v-if="item.success" class="ti ti-check icon succ"></i>
<i v-else class="ti ti-circle-x icon fail"></i>
<code class="ip _monospace">{{ item.ip }}</code>
<MkTime :time="item.createdAt" class="time"/>
</header>
</div>
</div>
</div>
</template>
</MkPagination>
</FormSection>
</template>
</MkPagination>
</FormSection>
<FormSection>
<FormSlot>
<MkButton danger @click="regenerateToken"><i class="ti ti-refresh"></i> {{ i18n.ts.regenerateLoginToken }}</MkButton>
<template #caption>{{ i18n.ts.regenerateLoginTokenDescription }}</template>
</FormSlot>
</FormSection>
</div>
<FormSection>
<FormSlot>
<MkButton danger @click="regenerateToken"><i class="ti ti-refresh"></i> {{ i18n.ts.regenerateLoginToken }}</MkButton>
<template #caption>{{ i18n.ts.regenerateLoginTokenDescription }}</template>
</FormSlot>
</FormSection>
</div>
</SearchMarker>
</template>
<script lang="ts" setup>
@ -47,9 +60,10 @@ import FormSlot from '@/components/form/slot.vue';
import MkButton from '@/components/MkButton.vue';
import MkPagination from '@/components/MkPagination.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { definePage } from '@/page.js';
import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
const pagination = {
endpoint: 'i/signin-history' as const,
@ -103,7 +117,7 @@ const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts.security,
icon: 'ti ti-lock',
}));

8
packages/frontend/src/pages/settings/sounds.sound.vue
View file

@ -32,15 +32,15 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import type { SoundType } from '@/scripts/sound.js';
import type { SoundType } from '@/utility/sound.js';
import MkSelect from '@/components/MkSelect.vue';
import MkButton from '@/components/MkButton.vue';
import MkRange from '@/components/MkRange.vue';
import { i18n } from '@/i18n.js';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { playMisskeySfxFile, soundsTypes, getSoundDuration } from '@/scripts/sound.js';
import { selectFile } from '@/scripts/select-file.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { playMisskeySfxFile, soundsTypes, getSoundDuration } from '@/utility/sound.js';
import { selectFile } from '@/utility/select-file.js';
const props = defineProps<{
type: SoundType;

117
packages/frontend/src/pages/settings/sounds.vue
View file

@ -4,63 +4,88 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps_m">
<MkSwitch v-model="notUseSound">
<template #label>{{ i18n.ts.notUseSound }}</template>
</MkSwitch>
<MkSwitch v-model="useSoundOnlyWhenActive">
<template #label>{{ i18n.ts.useSoundOnlyWhenActive }}</template>
</MkSwitch>
<MkRange v-model="masterVolume" :min="0" :max="1" :step="0.05" :textConverter="(v) => `${Math.floor(v * 100)}%`">
<template #label>{{ i18n.ts.masterVolume }}</template>
</MkRange>
<SearchMarker path="/settings/sounds" :label="i18n.ts.sounds" :keywords="['sounds']" icon="ti ti-music">
<div class="_gaps_m">
<MkFeatureBanner icon="/client-assets/speaker_high_volume_3d.png" color="#ff006f">
<SearchKeyword>{{ i18n.ts._settings.soundsBanner }}</SearchKeyword>
</MkFeatureBanner>
<FormSection>
<template #label>{{ i18n.ts.sounds }}</template>
<div class="_gaps_s">
<MkFolder v-for="type in operationTypes" :key="type">
<template #label>{{ i18n.ts._sfx[type] }}</template>
<template #suffix>{{ getSoundTypeName(sounds[type].type) }}</template>
<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>
<SearchMarker :keywords="['mute']">
<MkPreferenceContainer k="sound.notUseSound">
<MkSwitch v-model="notUseSound">
<template #label><SearchLabel>{{ i18n.ts.notUseSound }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<MkButton danger @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
</div>
<SearchMarker :keywords="['active', 'mute']">
<MkPreferenceContainer k="sound.useSoundOnlyWhenActive">
<MkSwitch v-model="useSoundOnlyWhenActive">
<template #label><SearchLabel>{{ i18n.ts.useSoundOnlyWhenActive }}</SearchLabel></template>
</MkSwitch>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['volume', 'master']">
<MkPreferenceContainer k="sound.masterVolume">
<MkRange v-model="masterVolume" :min="0" :max="1" :step="0.05" :textConverter="(v) => `${Math.floor(v * 100)}%`">
<template #label><SearchLabel>{{ i18n.ts.masterVolume }}</SearchLabel></template>
</MkRange>
</MkPreferenceContainer>
</SearchMarker>
<FormSection>
<template #label>{{ i18n.ts.sounds }}</template>
<div class="_gaps_s">
<MkFolder v-for="type in operationTypes" :key="type">
<template #label>{{ i18n.ts._sfx[type] }}</template>
<template #suffix>{{ getSoundTypeName(sounds[type].type) }}</template>
<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>
<MkButton danger @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
</div>
</SearchMarker>
</template>
<script lang="ts" setup>
import { Ref, computed, ref } from 'vue';
import { computed, ref } from 'vue';
import XSound from './sounds.sound.vue';
import type { SoundType, OperationType } from '@/scripts/sound.js';
import type { SoundStore } from '@/store.js';
import type { Ref } from 'vue';
import type { SoundType, OperationType } from '@/utility/sound.js';
import type { SoundStore } from '@/preferences/def.js';
import { prefer } from '@/preferences.js';
import MkRange from '@/components/MkRange.vue';
import MkButton from '@/components/MkButton.vue';
import FormSection from '@/components/form/section.vue';
import MkFolder from '@/components/MkFolder.vue';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { operationTypes } from '@/scripts/sound.js';
import { defaultStore } from '@/store.js';
import { definePage } from '@/page.js';
import { operationTypes } from '@/utility/sound.js';
import MkSwitch from '@/components/MkSwitch.vue';
import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
import { PREF_DEF } from '@/preferences/def.js';
import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
const notUseSound = computed(defaultStore.makeGetterSetter('sound_notUseSound'));
const useSoundOnlyWhenActive = computed(defaultStore.makeGetterSetter('sound_useSoundOnlyWhenActive'));
const masterVolume = computed(defaultStore.makeGetterSetter('sound_masterVolume'));
const notUseSound = prefer.model('sound.notUseSound');
const useSoundOnlyWhenActive = prefer.model('sound.useSoundOnlyWhenActive');
const masterVolume = prefer.model('sound.masterVolume');
const sounds = ref<Record<OperationType, Ref<SoundStore>>>({
note: defaultStore.reactiveState.sound_note,
noteMy: defaultStore.reactiveState.sound_noteMy,
notification: defaultStore.reactiveState.sound_notification,
reaction: defaultStore.reactiveState.sound_reaction,
note: prefer.r['sound.on.note'],
noteMy: prefer.r['sound.on.noteMy'],
notification: prefer.r['sound.on.notification'],
reaction: prefer.r['sound.on.reaction'],
chatMessage: prefer.r['sound.on.chatMessage'],
});
function getSoundTypeName(f: SoundType): string {
@ -82,14 +107,14 @@ async function updated(type: keyof typeof sounds.value, sound) {
volume: sound.volume,
};
defaultStore.set(`sound_${type}`, v);
prefer.commit(`sound.on.${type}`, v);
sounds.value[type] = v;
}
function reset() {
for (const sound of Object.keys(sounds.value) as Array<keyof typeof sounds.value>) {
const v = defaultStore.def[`sound_${sound}`].default;
defaultStore.set(`sound_${sound}`, v);
const v = PREF_DEF[`sound.on.${sound}`].default;
prefer.commit(`sound.on.${sound}`, v);
sounds.value[sound] = v;
}
}
@ -98,7 +123,7 @@ const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts.sounds,
icon: 'ti ti-music',
}));

14
packages/frontend/src/pages/settings/statusbar.statusbar.vue
View file

@ -94,17 +94,17 @@ import MkSwitch from '@/components/MkSwitch.vue';
import MkRadios from '@/components/MkRadios.vue';
import MkButton from '@/components/MkButton.vue';
import MkRange from '@/components/MkRange.vue';
import { defaultStore } from '@/store.js';
import { i18n } from '@/i18n.js';
import { instance } from '@/instance.js';
import { deepClone } from '@/scripts/clone.js';
import { deepClone } from '@/utility/clone.js';
import { prefer } from '@/preferences.js';
const props = defineProps<{
_id: string;
userLists: Misskey.entities.UserList[] | null;
}>();
const statusbar = reactive(deepClone(defaultStore.state.statusbars.find(x => x.id === props._id)));
const statusbar = reactive(deepClone(prefer.s.statusbars.find(x => x.id === props._id)));
watch(() => statusbar.type, () => {
if (statusbar.type === 'rss') {
@ -134,13 +134,13 @@ watch(() => statusbar.type, () => {
watch(statusbar, save);
async function save() {
const i = defaultStore.state.statusbars.findIndex(x => x.id === props._id);
const statusbars = deepClone(defaultStore.state.statusbars);
const i = prefer.s.statusbars.findIndex(x => x.id === props._id);
const statusbars = deepClone(prefer.s.statusbars);
statusbars[i] = deepClone(statusbar);
defaultStore.set('statusbars', statusbars);
prefer.commit('statusbars', statusbars);
}
function del() {
defaultStore.set('statusbars', defaultStore.state.statusbars.filter(x => x.id !== props._id));
prefer.commit('statusbars', prefer.s.statusbars.filter(x => x.id !== props._id));
}
</script>

14
packages/frontend/src/pages/settings/statusbar.vue
View file

@ -21,12 +21,12 @@ import { v4 as uuid } from 'uuid';
import XStatusbar from './statusbar.statusbar.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkButton from '@/components/MkButton.vue';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { defaultStore } from '@/store.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { definePage } from '@/page.js';
import { prefer } from '@/preferences.js';
const statusbars = defaultStore.reactiveState.statusbars;
const statusbars = prefer.r.statusbars;
const userLists = ref<Misskey.entities.UserList[] | null>(null);
@ -37,20 +37,20 @@ onMounted(() => {
});
async function add() {
defaultStore.push('statusbars', {
prefer.commit('statusbars', [...statusbars.value, {
id: uuid(),
type: null,
black: false,
size: 'medium',
props: {},
});
}]);
}
const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts.statusbar,
icon: 'ti ti-list',
}));

14
packages/frontend/src/pages/settings/theme.install.vue
View file

@ -10,8 +10,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkCodeEditor>
<div class="_buttons">
<MkButton :disabled="installThemeCode == null" inline @click="() => previewTheme(installThemeCode)"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
<MkButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
<MkButton :disabled="installThemeCode == null || installThemeCode.trim() === ''" inline @click="() => previewTheme(installThemeCode)"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
<MkButton :disabled="installThemeCode == null || installThemeCode.trim() === ''" primary inline @click="() => install(installThemeCode)"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
</div>
</div>
</template>
@ -20,11 +20,13 @@ SPDX-License-Identifier: AGPL-3.0-only
import { ref, computed } from 'vue';
import MkCodeEditor from '@/components/MkCodeEditor.vue';
import MkButton from '@/components/MkButton.vue';
import { parseThemeCode, previewTheme, installTheme } from '@/scripts/install-theme.js';
import { parseThemeCode, previewTheme, installTheme } from '@/theme.js';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { definePage } from '@/page.js';
import { useRouter } from '@/router.js';
const router = useRouter();
const installThemeCode = ref<string | null>(null);
async function install(code: string): Promise<void> {
@ -35,6 +37,8 @@ async function install(code: string): Promise<void> {
type: 'success',
text: i18n.tsx._theme.installed({ name: theme.name }),
});
installThemeCode.value = null;
router.push('/settings/theme');
} catch (err) {
switch (err.message.toLowerCase()) {
case 'this theme is already installed':
@ -59,7 +63,7 @@ const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts._theme.install,
icon: 'ti ti-download',
}));

10
packages/frontend/src/pages/settings/theme.manage.vue
View file

@ -33,16 +33,17 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { computed, ref } from 'vue';
import JSON5 from 'json5';
import type { Theme } from '@/theme.js';
import MkTextarea from '@/components/MkTextarea.vue';
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 { getBuiltinThemesRef } from '@/theme.js';
import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
import * as os from '@/os.js';
import { getThemes, removeTheme } from '@/theme-store.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { definePage } from '@/page.js';
const installedThemes = ref(getThemes());
const builtinThemes = getBuiltinThemesRef();
@ -62,7 +63,6 @@ const selectedThemeCode = computed(() => {
function copyThemeCode() {
copyToClipboard(selectedThemeCode.value);
os.success();
}
function uninstall() {
@ -76,7 +76,7 @@ const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts._theme.manage,
icon: 'ti ti-tool',
}));

368
packages/frontend/src/pages/settings/theme.vue
View file

@ -4,137 +4,271 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps_m rsljpzjq">
<div v-adaptive-border class="rfqxtzch _panel">
<div class="toggle">
<div class="toggleWrapper">
<input id="dn" v-model="darkMode" type="checkbox" class="dn"/>
<label for="dn" class="toggle">
<span class="before">{{ i18n.ts.light }}</span>
<span class="after">{{ i18n.ts.dark }}</span>
<span class="toggle__handler">
<span class="crater crater--1"></span>
<span class="crater crater--2"></span>
<span class="crater crater--3"></span>
</span>
<span class="star star--1"></span>
<span class="star star--2"></span>
<span class="star star--3"></span>
<span class="star star--4"></span>
<span class="star star--5"></span>
<span class="star star--6"></span>
</label>
<SearchMarker path="/settings/theme" :label="i18n.ts.theme" :keywords="['theme']" icon="ti ti-palette">
<div class="_gaps_m">
<div v-adaptive-border class="rfqxtzch _panel">
<div class="toggle">
<div class="toggleWrapper">
<input id="dn" v-model="darkMode" type="checkbox" class="dn"/>
<label for="dn" class="toggle">
<span class="before">{{ i18n.ts.light }}</span>
<span class="after">{{ i18n.ts.dark }}</span>
<span class="toggle__handler">
<span class="crater crater--1"></span>
<span class="crater crater--2"></span>
<span class="crater crater--3"></span>
</span>
<span class="star star--1"></span>
<span class="star star--2"></span>
<span class="star star--3"></span>
<span class="star star--4"></span>
<span class="star star--5"></span>
<span class="star star--6"></span>
</label>
</div>
</div>
<div class="sync">
<SearchMarker :keywords="['sync', 'device', 'dark', 'light', 'mode']">
<MkSwitch v-model="syncDeviceDarkMode">
<template #label><SearchLabel>{{ i18n.ts.syncDeviceDarkMode }}</SearchLabel></template>
</MkSwitch>
</SearchMarker>
</div>
</div>
<div class="sync">
<MkSwitch v-model="syncDeviceDarkMode">{{ i18n.ts.syncDeviceDarkMode }}</MkSwitch>
<div class="_gaps">
<template v-if="!darkMode">
<SearchMarker :keywords="['light', 'theme']">
<MkFolder :defaultOpen="true" :max-height="500">
<template #icon><i class="ti ti-sun"></i></template>
<template #label><SearchLabel>{{ i18n.ts.themeForLightMode }}</SearchLabel></template>
<template #caption>{{ lightThemeName }}</template>
<div class="_gaps_m">
<FormSection v-if="instanceLightTheme != null" first>
<template #label>{{ i18n.ts._theme.instanceTheme }}</template>
<div :class="$style.themeSelect">
<div :class="$style.themeItemOuter">
<input
:id="`themeRadio_${instanceLightTheme.id}`"
v-model="lightThemeId"
type="radio"
name="lightTheme"
:class="$style.themeRadio"
:value="instanceLightTheme.id"
/>
<label :for="`themeRadio_${instanceLightTheme.id}`" :class="$style.themeItemRoot" class="_button">
<MkThemePreview :theme="instanceLightTheme" :class="$style.themeItemPreview"/>
<div :class="$style.themeItemCaption">{{ instanceLightTheme.name }}</div>
</label>
</div>
</div>
</FormSection>
<FormSection v-if="installedLightThemes.length > 0" :first="instanceLightTheme == null">
<template #label>{{ i18n.ts._theme.installedThemes }}</template>
<div :class="$style.themeSelect">
<div v-for="theme in installedLightThemes" :class="$style.themeItemOuter">
<input
:id="`themeRadio_${theme.id}`"
v-model="lightThemeId"
type="radio"
name="lightTheme"
:class="$style.themeRadio"
:value="theme.id"
/>
<label :for="`themeRadio_${theme.id}`" :class="$style.themeItemRoot" class="_button">
<MkThemePreview :theme="theme" :class="$style.themeItemPreview"/>
<div :class="$style.themeItemCaption">{{ theme.name }}</div>
</label>
</div>
</div>
</FormSection>
<FormSection :first="installedLightThemes.length === 0 && instanceLightTheme == null">
<template #label>{{ i18n.ts._theme.builtinThemes }}</template>
<div :class="$style.themeSelect">
<div v-for="theme in builtinLightThemes" :class="$style.themeItemOuter">
<input
:id="`themeRadio_${theme.id}`"
v-model="lightThemeId"
type="radio"
name="lightTheme"
:class="$style.themeRadio"
:value="theme.id"
/>
<label :for="`themeRadio_${theme.id}`" :class="$style.themeItemRoot" class="_button">
<MkThemePreview :theme="theme" :class="$style.themeItemPreview"/>
<div :class="$style.themeItemCaption">{{ theme.name }}</div>
</label>
</div>
</div>
</FormSection>
</div>
</MkFolder>
</SearchMarker>
</template>
<template v-else>
<SearchMarker :keywords="['dark', 'theme']">
<MkFolder :defaultOpen="true" :max-height="500">
<template #icon><i class="ti ti-moon"></i></template>
<template #label><SearchLabel>{{ i18n.ts.themeForDarkMode }}</SearchLabel></template>
<template #caption>{{ darkThemeName }}</template>
<div class="_gaps_m">
<FormSection v-if="instanceDarkTheme != null" first>
<template #label>{{ i18n.ts._theme.instanceTheme }}</template>
<div :class="$style.themeSelect">
<div :class="$style.themeItemOuter">
<input
:id="`themeRadio_${instanceDarkTheme.id}`"
v-model="darkThemeId"
type="radio"
name="darkTheme"
:class="$style.themeRadio"
:value="instanceDarkTheme.id"
/>
<label :for="`themeRadio_${instanceDarkTheme.id}`" :class="$style.themeItemRoot" class="_button">
<MkThemePreview :theme="instanceDarkTheme" :class="$style.themeItemPreview"/>
<div :class="$style.themeItemCaption">{{ instanceDarkTheme.name }}</div>
</label>
</div>
</div>
</FormSection>
<FormSection v-if="installedDarkThemes.length > 0" :first="instanceDarkTheme == null">
<template #label>{{ i18n.ts._theme.installedThemes }}</template>
<div :class="$style.themeSelect">
<div v-for="theme in installedDarkThemes" :class="$style.themeItemOuter">
<input
:id="`themeRadio_${theme.id}`"
v-model="darkThemeId"
type="radio"
name="darkTheme"
:class="$style.themeRadio"
:value="theme.id"
/>
<label :for="`themeRadio_${theme.id}`" :class="$style.themeItemRoot" class="_button">
<MkThemePreview :theme="theme" :class="$style.themeItemPreview"/>
<div :class="$style.themeItemCaption">{{ theme.name }}</div>
</label>
</div>
</div>
</FormSection>
<FormSection :first="installedDarkThemes.length === 0 && instanceDarkTheme == null">
<template #label>{{ i18n.ts._theme.builtinThemes }}</template>
<div :class="$style.themeSelect">
<div v-for="theme in builtinDarkThemes" :class="$style.themeItemOuter">
<input
:id="`themeRadio_${theme.id}`"
v-model="darkThemeId"
type="radio"
name="darkTheme"
:class="$style.themeRadio"
:value="theme.id"
/>
<label :for="`themeRadio_${theme.id}`" :class="$style.themeItemRoot" class="_button">
<MkThemePreview :theme="theme" :class="$style.themeItemPreview"/>
<div :class="$style.themeItemCaption">{{ theme.name }}</div>
</label>
</div>
</div>
</FormSection>
</div>
</MkFolder>
</SearchMarker>
</template>
</div>
<FormSection>
<div class="_formLinksGrid">
<FormLink to="/settings/theme/manage"><template #icon><i class="ti ti-tool"></i></template>{{ i18n.ts._theme.manage }}<template #suffix>{{ themesCount }}</template></FormLink>
<FormLink to="https://assets.misskey.io/theme/list" external><template #icon><i class="ti ti-world"></i></template>{{ i18n.ts._theme.explore }}</FormLink>
<FormLink to="/settings/theme/install"><template #icon><i class="ti ti-download"></i></template>{{ i18n.ts._theme.install }}</FormLink>
<FormLink to="/theme-editor"><template #icon><i class="ti ti-paint"></i></template>{{ i18n.ts._theme.make }}</FormLink>
</div>
</FormSection>
<SearchMarker :keywords="['wallpaper']">
<MkButton v-if="wallpaper == null" @click="setWallpaper"><SearchLabel>{{ i18n.ts.setWallpaper }}</SearchLabel></MkButton>
<MkButton v-else @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</MkButton>
</SearchMarker>
</div>
<div class="selects">
<MkSelect v-model="lightThemeId" large class="select">
<template #label>{{ i18n.ts.themeForLightMode }}</template>
<template #prefix><i class="ti ti-sun"></i></template>
<option v-if="instanceLightTheme" :key="'instance:' + instanceLightTheme.id" :value="instanceLightTheme.id">{{ instanceLightTheme.name }}</option>
<optgroup v-if="installedLightThemes.length > 0" :label="i18n.ts._theme.installedThemes">
<option v-for="x in installedLightThemes" :key="'installed:' + x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
<optgroup :label="i18n.ts._theme.builtinThemes">
<option v-for="x in builtinLightThemes" :key="'builtin:' + x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
</MkSelect>
<MkSelect v-model="darkThemeId" large class="select">
<template #label>{{ i18n.ts.themeForDarkMode }}</template>
<template #prefix><i class="ti ti-moon"></i></template>
<option v-if="instanceDarkTheme" :key="'instance:' + instanceDarkTheme.id" :value="instanceDarkTheme.id">{{ instanceDarkTheme.name }}</option>
<optgroup v-if="installedDarkThemes.length > 0" :label="i18n.ts._theme.installedThemes">
<option v-for="x in installedDarkThemes" :key="'installed:' + x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
<optgroup :label="i18n.ts._theme.builtinThemes">
<option v-for="x in builtinDarkThemes" :key="'builtin:' + x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
</MkSelect>
</div>
<FormSection>
<div class="_formLinksGrid">
<FormLink to="/settings/theme/manage"><template #icon><i class="ti ti-tool"></i></template>{{ i18n.ts._theme.manage }}<template #suffix>{{ themesCount }}</template></FormLink>
<FormLink to="https://assets.misskey.io/theme/list" external><template #icon><i class="ti ti-world"></i></template>{{ i18n.ts._theme.explore }}</FormLink>
<FormLink to="/settings/theme/install"><template #icon><i class="ti ti-download"></i></template>{{ i18n.ts._theme.install }}</FormLink>
<FormLink to="/theme-editor"><template #icon><i class="ti ti-paint"></i></template>{{ i18n.ts._theme.make }}</FormLink>
</div>
</FormSection>
<MkButton v-if="wallpaper == null" @click="setWallpaper">{{ i18n.ts.setWallpaper }}</MkButton>
<MkButton v-else @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</MkButton>
</div>
</SearchMarker>
</template>
<script lang="ts" setup>
import { computed, onActivated, ref, watch } from 'vue';
import JSON5 from 'json5';
import defaultLightTheme from '@@/themes/l-light.json5';
import defaultDarkTheme from '@@/themes/d-green-lime.json5';
import type { Theme } from '@/theme.js';
import MkSwitch from '@/components/MkSwitch.vue';
import MkSelect from '@/components/MkSelect.vue';
import FormSection from '@/components/form/section.vue';
import FormLink from '@/components/form/link.vue';
import MkButton from '@/components/MkButton.vue';
import { getBuiltinThemesRef } from '@/scripts/theme.js';
import { selectFile } from '@/scripts/select-file.js';
import { isDeviceDarkmode } from '@/scripts/is-device-darkmode.js';
import { ColdDeviceStorage, defaultStore } from '@/store.js';
import MkFolder from '@/components/MkFolder.vue';
import MkThemePreview from '@/components/MkThemePreview.vue';
import { getBuiltinThemesRef } from '@/theme.js';
import { selectFile } from '@/utility/select-file.js';
import { isDeviceDarkmode } from '@/utility/is-device-darkmode.js';
import { store } from '@/store.js';
import { i18n } from '@/i18n.js';
import { instance } from '@/instance.js';
import { uniqueBy } from '@/scripts/array.js';
import { fetchThemes, getThemes } from '@/theme-store.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { uniqueBy } from '@/utility/array.js';
import { getThemes } from '@/theme-store.js';
import { definePage } from '@/page.js';
import { miLocalStorage } from '@/local-storage.js';
import { reloadAsk } from '@/scripts/reload-ask.js';
import * as os from '@/os.js';
import { reloadAsk } from '@/utility/reload-ask.js';
import { prefer } from '@/preferences.js';
const installedThemes = ref(getThemes());
const builtinThemes = getBuiltinThemesRef();
const instanceDarkTheme = computed(() => instance.defaultDarkTheme ? JSON5.parse(instance.defaultDarkTheme) : null);
const instanceDarkTheme = computed<Theme | null>(() => instance.defaultDarkTheme ? JSON5.parse(instance.defaultDarkTheme) : null);
const installedDarkThemes = computed(() => installedThemes.value.filter(t => t.base === 'dark' || t.kind === 'dark'));
const builtinDarkThemes = computed(() => builtinThemes.value.filter(t => t.base === 'dark' || t.kind === 'dark'));
const instanceLightTheme = computed(() => instance.defaultLightTheme ? JSON5.parse(instance.defaultLightTheme) : null);
const instanceLightTheme = computed<Theme | null>(() => instance.defaultLightTheme ? JSON5.parse(instance.defaultLightTheme) : null);
const installedLightThemes = computed(() => installedThemes.value.filter(t => t.base === 'light' || t.kind === 'light'));
const builtinLightThemes = computed(() => builtinThemes.value.filter(t => t.base === 'light' || t.kind === 'light'));
const themes = computed(() => uniqueBy([instanceDarkTheme.value, instanceLightTheme.value, ...builtinThemes.value, ...installedThemes.value].filter(x => x != null), theme => theme.id));
const darkTheme = ColdDeviceStorage.ref('darkTheme');
const darkTheme = prefer.r.darkTheme;
const darkThemeName = computed(() => darkTheme.value?.name ?? defaultDarkTheme.name);
const darkThemeId = computed({
get() {
return darkTheme.value.id;
return darkTheme.value ? darkTheme.value.id : defaultDarkTheme.id;
},
set(id) {
const t = themes.value.find(x => x.id === id);
if (t) { // テーマエディタでテーマを作成したときなどは、themesに反映されないため undefined になる
ColdDeviceStorage.set('darkTheme', t);
prefer.commit('darkTheme', t);
}
},
});
const lightTheme = ColdDeviceStorage.ref('lightTheme');
const lightTheme = prefer.r.lightTheme;
const lightThemeName = computed(() => lightTheme.value?.name ?? defaultLightTheme.name);
const lightThemeId = computed({
get() {
return lightTheme.value.id;
return lightTheme.value ? lightTheme.value.id : defaultLightTheme.id;
},
set(id) {
const t = themes.value.find(x => x.id === id);
if (t) { // テーマエディタでテーマを作成したときなどは、themesに反映されないため undefined になる
ColdDeviceStorage.set('lightTheme', t);
prefer.commit('lightTheme', t);
}
},
});
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
const syncDeviceDarkMode = computed(ColdDeviceStorage.makeGetterSetter('syncDeviceDarkMode'));
const darkMode = computed(store.makeGetterSetter('darkMode'));
const syncDeviceDarkMode = prefer.model('syncDeviceDarkMode');
const wallpaper = ref(miLocalStorage.getItem('wallpaper'));
const themesCount = installedThemes.value.length;
watch(syncDeviceDarkMode, () => {
if (syncDeviceDarkMode.value) {
defaultStore.set('darkMode', isDeviceDarkmode());
store.set('darkMode', isDeviceDarkmode());
}
});
@ -148,12 +282,6 @@ watch(wallpaper, async () => {
});
onActivated(() => {
fetchThemes().then(() => {
installedThemes.value = getThemes();
});
});
fetchThemes().then(() => {
installedThemes.value = getThemes();
});
@ -167,12 +295,63 @@ const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: i18n.ts.theme,
icon: 'ti ti-palette',
}));
</script>
<style module>
.themeSelect {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--MI-margin);
}
.themeItemOuter {
position: relative;
}
.themeRadio {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
.themeItemRoot {
position: relative;
display: block;
overflow: clip;
box-sizing: border-box;
border: 2px solid var(--MI_THEME-divider);
border-radius: var(--MI-radius);
}
.themeRadio:focus-visible + .themeItemRoot {
outline: 2px solid var(--MI_THEME-focus);
outline-offset: 2px;
}
.themeRadio:checked + .themeItemRoot {
border-color: var(--MI_THEME-accent);
}
.themeItemPreview {
display: block;
width: calc(100% + 2px);
height: auto;
margin-left: -1px;
border-bottom: 1px solid var(--MI_THEME-divider);
}
.themeItemCaption {
box-sizing: border-box;
padding: 8px 12px;
text-align: center;
font-size: 80%;
}
</style>
<style lang="scss" scoped>
.rfqxtzch {
border-radius: var(--MI-radius-sm);
@ -408,17 +587,4 @@ definePageMetadata(() => ({
border-top: solid 0.5px var(--MI_THEME-divider);
}
}
.rsljpzjq {
> .selects {
display: flex;
gap: 1.5em var(--MI-margin);
flex-wrap: wrap;
> .select {
flex: 1;
min-width: 280px;
}
}
}
</style>

8
packages/frontend/src/pages/settings/webhook.edit.vue
View file

@ -76,10 +76,10 @@ import FormSection from '@/components/form/section.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { useRouter } from '@/router/supplier.js';
import { definePage } from '@/page.js';
import { useRouter } from '@/router.js';
const router = useRouter();
@ -155,7 +155,7 @@ const headerActions = computed(() => []);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: 'Edit webhook',
icon: 'ti ti-webhook',
}));

4
packages/frontend/src/pages/settings/webhook.new.vue
View file

@ -46,7 +46,7 @@ import MkSwitch from '@/components/MkSwitch.vue';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { definePage } from '@/page.js';
const name = ref('');
const url = ref('');
@ -82,7 +82,7 @@ const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
definePage(() => ({
title: 'Create new webhook',
icon: 'ti ti-webhook',
}));

57
packages/frontend/src/pages/settings/webhook.vue
View file

@ -1,57 +0,0 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="_gaps_m">
<FormLink :to="`/settings/webhook/new`">
{{ i18n.ts._webhookSettings.createWebhook }}
</FormLink>
<FormSection>
<MkPagination :pagination="pagination">
<template #default="{items}">
<div class="_gaps">
<FormLink v-for="webhook in items" :key="webhook.id" :to="`/settings/webhook/edit/${webhook.id}`">
<template #icon>
<i v-if="webhook.active === false" class="ti ti-player-pause"></i>
<i v-else-if="webhook.latestStatus === null" class="ti ti-circle"></i>
<i v-else-if="[200, 201, 204].includes(webhook.latestStatus)" class="ti ti-check" :style="{ color: 'var(--MI_THEME-success)' }"></i>
<i v-else class="ti ti-alert-triangle" :style="{ color: 'var(--MI_THEME-error)' }"></i>
</template>
{{ webhook.name || webhook.url }}
<template #suffix>
<MkTime v-if="webhook.latestSentAt" :time="webhook.latestSentAt"></MkTime>
</template>
</FormLink>
</div>
</template>
</MkPagination>
</FormSection>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import MkPagination from '@/components/MkPagination.vue';
import FormSection from '@/components/form/section.vue';
import FormLink from '@/components/form/link.vue';
import { definePageMetadata } from '@/scripts/page-metadata.js';
import { i18n } from '@/i18n.js';
const pagination = {
endpoint: 'i/webhooks/list' as const,
limit: 100,
noPaging: true,
};
const headerActions = computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata(() => ({
title: 'Webhook',
icon: 'ti ti-webhook',
}));
</script>