usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(frontend): rename pizzax fields

This commit is contained in:
syuilo 2025-03-10 10:51:54 +09:00
parent 16ad6b3f6c
commit 08f7e7d9b3
50 changed files with 243 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/lib/rollup-plugin-unwind-css-module-class-name.test.ts
View File

@ -74,7 +74,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
let fetching = ref(true);
let images = ref([]);
function thumbnail(image) {
return store.state.disableShowingAnimatedImages ? getStaticImageUrl(image.url) : image.thumbnailUrl;
return store.s.disableShowingAnimatedImages ? getStaticImageUrl(image.url) : image.thumbnailUrl;
}
onMounted(() => {
const image = [
@ -190,7 +190,7 @@ const index_photos = defineComponent({
let fetching = ref(true);
let images = ref([]);
function thumbnail(image) {
return store.state.disableShowingAnimatedImages ? getStaticImageUrl(image.url) : image.thumbnailUrl;
return store.s.disableShowingAnimatedImages ? getStaticImageUrl(image.url) : image.thumbnailUrl;
}
onMounted(() => {
const image = ["image/jpeg", "image/webp", "image/avif", "image/png", "image/gif", "image/apng", "image/vnd.mozilla.apng"];

12
packages/frontend/src/boot/common.ts
View File

@ -154,26 +154,26 @@ export async function common(createVue: () => App<Element>) {
//#endregion
// NOTE: この処理は必ずクライアント更新チェック処理より後に来ること(テーマ再構築のため)
watch(store.reactiveState.darkMode, (darkMode) => {
watch(store.r.darkMode, (darkMode) => {
applyTheme(darkMode
? (prefer.s.darkTheme ?? defaultDarkTheme)
: (prefer.s.lightTheme ?? defaultLightTheme),
);
}, { immediate: miLocalStorage.getItem('theme') == null });
document.documentElement.dataset.colorScheme = store.state.darkMode ? 'dark' : 'light';
document.documentElement.dataset.colorScheme = store.s.darkMode ? 'dark' : 'light';
const darkTheme = prefer.model('darkTheme');
const lightTheme = prefer.model('lightTheme');
watch(darkTheme, (theme) => {
if (store.state.darkMode) {
if (store.s.darkMode) {
applyTheme(theme ?? defaultDarkTheme);
}
});
watch(lightTheme, (theme) => {
if (!store.state.darkMode) {
if (!store.s.darkMode) {
applyTheme(theme ?? defaultLightTheme);
}
});
@ -190,9 +190,9 @@ export async function common(createVue: () => App<Element>) {
});
//#endregion
if (prefer.s.darkTheme && store.state.darkMode) {
if (prefer.s.darkTheme && store.s.darkMode) {
if (miLocalStorage.getItem('themeId') !== prefer.s.darkTheme.id) applyTheme(prefer.s.darkTheme);
} else if (prefer.s.lightTheme && !store.state.darkMode) {
} else if (prefer.s.lightTheme && !store.s.darkMode) {
if (miLocalStorage.getItem('themeId') !== prefer.s.lightTheme.id) applyTheme(prefer.s.lightTheme);
}

148
packages/frontend/src/boot/main-boot.ts
View File

@ -138,7 +138,7 @@ export async function mainBoot() {
store.loaded.then(async () => {
// prefereces migration
// TODO: そのうち消す
if (store.state.menu.length > 0) {
if (store.s.menu.length > 0) {
const themes = await misskeyApi('i/registry/get', { scope: ['client'], key: 'themes' }).catch(() => []);
if (themes.length > 0) {
prefer.set('themes', themes);
@ -152,84 +152,84 @@ export async function mainBoot() {
prefer.set('lightTheme', ColdDeviceStorage.get('lightTheme'));
prefer.set('darkTheme', ColdDeviceStorage.get('darkTheme'));
prefer.set('syncDeviceDarkMode', ColdDeviceStorage.get('syncDeviceDarkMode'));
prefer.set('overridedDeviceKind', store.state.overridedDeviceKind);
prefer.set('widgets', store.state.widgets);
prefer.set('keepCw', store.state.keepCw);
prefer.set('collapseRenotes', store.state.collapseRenotes);
prefer.set('rememberNoteVisibility', store.state.rememberNoteVisibility);
prefer.set('uploadFolder', store.state.uploadFolder);
prefer.set('keepOriginalUploading', store.state.keepOriginalUploading);
prefer.set('menu', store.state.menu);
prefer.set('statusbars', store.state.statusbars);
prefer.set('pinnedUserLists', store.state.pinnedUserLists);
prefer.set('serverDisconnectedBehavior', store.state.serverDisconnectedBehavior);
prefer.set('nsfw', store.state.nsfw);
prefer.set('highlightSensitiveMedia', store.state.highlightSensitiveMedia);
prefer.set('animation', store.state.animation);
prefer.set('animatedMfm', store.state.animatedMfm);
prefer.set('advancedMfm', store.state.advancedMfm);
prefer.set('showReactionsCount', store.state.showReactionsCount);
prefer.set('enableQuickAddMfmFunction', store.state.enableQuickAddMfmFunction);
prefer.set('loadRawImages', store.state.loadRawImages);
prefer.set('imageNewTab', store.state.imageNewTab);
prefer.set('disableShowingAnimatedImages', store.state.disableShowingAnimatedImages);
prefer.set('emojiStyle', store.state.emojiStyle);
prefer.set('menuStyle', store.state.menuStyle);
prefer.set('useBlurEffectForModal', store.state.useBlurEffectForModal);
prefer.set('useBlurEffect', store.state.useBlurEffect);
prefer.set('showFixedPostForm', store.state.showFixedPostForm);
prefer.set('showFixedPostFormInChannel', store.state.showFixedPostFormInChannel);
prefer.set('enableInfiniteScroll', store.state.enableInfiniteScroll);
prefer.set('useReactionPickerForContextMenu', store.state.useReactionPickerForContextMenu);
prefer.set('showGapBetweenNotesInTimeline', store.state.showGapBetweenNotesInTimeline);
prefer.set('instanceTicker', store.state.instanceTicker);
prefer.set('emojiPickerScale', store.state.emojiPickerScale);
prefer.set('emojiPickerWidth', store.state.emojiPickerWidth);
prefer.set('emojiPickerHeight', store.state.emojiPickerHeight);
prefer.set('emojiPickerStyle', store.state.emojiPickerStyle);
prefer.set('reportError', store.state.reportError);
prefer.set('squareAvatars', store.state.squareAvatars);
prefer.set('showAvatarDecorations', store.state.showAvatarDecorations);
prefer.set('numberOfPageCache', store.state.numberOfPageCache);
prefer.set('showNoteActionsOnlyHover', store.state.showNoteActionsOnlyHover);
prefer.set('showClipButtonInNoteFooter', store.state.showClipButtonInNoteFooter);
prefer.set('reactionsDisplaySize', store.state.reactionsDisplaySize);
prefer.set('limitWidthOfReaction', store.state.limitWidthOfReaction);
prefer.set('forceShowAds', store.state.forceShowAds);
prefer.set('aiChanMode', store.state.aiChanMode);
prefer.set('devMode', store.state.devMode);
prefer.set('mediaListWithOneImageAppearance', store.state.mediaListWithOneImageAppearance);
prefer.set('notificationPosition', store.state.notificationPosition);
prefer.set('notificationStackAxis', store.state.notificationStackAxis);
prefer.set('enableCondensedLine', store.state.enableCondensedLine);
prefer.set('keepScreenOn', store.state.keepScreenOn);
prefer.set('disableStreamingTimeline', store.state.disableStreamingTimeline);
prefer.set('useGroupedNotifications', store.state.useGroupedNotifications);
prefer.set('dataSaver', store.state.dataSaver);
prefer.set('enableSeasonalScreenEffect', store.state.enableSeasonalScreenEffect);
prefer.set('enableHorizontalSwipe', store.state.enableHorizontalSwipe);
prefer.set('useNativeUiForVideoAudioPlayer', store.state.useNativeUIForVideoAudioPlayer);
prefer.set('keepOriginalFilename', store.state.keepOriginalFilename);
prefer.set('alwaysConfirmFollow', store.state.alwaysConfirmFollow);
prefer.set('confirmWhenRevealingSensitiveMedia', store.state.confirmWhenRevealingSensitiveMedia);
prefer.set('contextMenu', store.state.contextMenu);
prefer.set('skipNoteRender', store.state.skipNoteRender);
prefer.set('showSoftWordMutedWord', store.state.showSoftWordMutedWord);
prefer.set('confirmOnReact', store.state.confirmOnReact);
prefer.set('sound.masterVolume', store.state.sound_masterVolume);
prefer.set('sound.notUseSound', store.state.sound_notUseSound);
prefer.set('sound.useSoundOnlyWhenActive', store.state.sound_useSoundOnlyWhenActive);
prefer.set('sound.on.note', store.state.sound_note as any);
prefer.set('sound.on.noteMy', store.state.sound_noteMy as any);
prefer.set('sound.on.notification', store.state.sound_notification as any);
prefer.set('sound.on.reaction', store.state.sound_reaction as any);
prefer.set('overridedDeviceKind', store.s.overridedDeviceKind);
prefer.set('widgets', store.s.widgets);
prefer.set('keepCw', store.s.keepCw);
prefer.set('collapseRenotes', store.s.collapseRenotes);
prefer.set('rememberNoteVisibility', store.s.rememberNoteVisibility);
prefer.set('uploadFolder', store.s.uploadFolder);
prefer.set('keepOriginalUploading', store.s.keepOriginalUploading);
prefer.set('menu', store.s.menu);
prefer.set('statusbars', store.s.statusbars);
prefer.set('pinnedUserLists', store.s.pinnedUserLists);
prefer.set('serverDisconnectedBehavior', store.s.serverDisconnectedBehavior);
prefer.set('nsfw', store.s.nsfw);
prefer.set('highlightSensitiveMedia', store.s.highlightSensitiveMedia);
prefer.set('animation', store.s.animation);
prefer.set('animatedMfm', store.s.animatedMfm);
prefer.set('advancedMfm', store.s.advancedMfm);
prefer.set('showReactionsCount', store.s.showReactionsCount);
prefer.set('enableQuickAddMfmFunction', store.s.enableQuickAddMfmFunction);
prefer.set('loadRawImages', store.s.loadRawImages);
prefer.set('imageNewTab', store.s.imageNewTab);
prefer.set('disableShowingAnimatedImages', store.s.disableShowingAnimatedImages);
prefer.set('emojiStyle', store.s.emojiStyle);
prefer.set('menuStyle', store.s.menuStyle);
prefer.set('useBlurEffectForModal', store.s.useBlurEffectForModal);
prefer.set('useBlurEffect', store.s.useBlurEffect);
prefer.set('showFixedPostForm', store.s.showFixedPostForm);
prefer.set('showFixedPostFormInChannel', store.s.showFixedPostFormInChannel);
prefer.set('enableInfiniteScroll', store.s.enableInfiniteScroll);
prefer.set('useReactionPickerForContextMenu', store.s.useReactionPickerForContextMenu);
prefer.set('showGapBetweenNotesInTimeline', store.s.showGapBetweenNotesInTimeline);
prefer.set('instanceTicker', store.s.instanceTicker);
prefer.set('emojiPickerScale', store.s.emojiPickerScale);
prefer.set('emojiPickerWidth', store.s.emojiPickerWidth);
prefer.set('emojiPickerHeight', store.s.emojiPickerHeight);
prefer.set('emojiPickerStyle', store.s.emojiPickerStyle);
prefer.set('reportError', store.s.reportError);
prefer.set('squareAvatars', store.s.squareAvatars);
prefer.set('showAvatarDecorations', store.s.showAvatarDecorations);
prefer.set('numberOfPageCache', store.s.numberOfPageCache);
prefer.set('showNoteActionsOnlyHover', store.s.showNoteActionsOnlyHover);
prefer.set('showClipButtonInNoteFooter', store.s.showClipButtonInNoteFooter);
prefer.set('reactionsDisplaySize', store.s.reactionsDisplaySize);
prefer.set('limitWidthOfReaction', store.s.limitWidthOfReaction);
prefer.set('forceShowAds', store.s.forceShowAds);
prefer.set('aiChanMode', store.s.aiChanMode);
prefer.set('devMode', store.s.devMode);
prefer.set('mediaListWithOneImageAppearance', store.s.mediaListWithOneImageAppearance);
prefer.set('notificationPosition', store.s.notificationPosition);
prefer.set('notificationStackAxis', store.s.notificationStackAxis);
prefer.set('enableCondensedLine', store.s.enableCondensedLine);
prefer.set('keepScreenOn', store.s.keepScreenOn);
prefer.set('disableStreamingTimeline', store.s.disableStreamingTimeline);
prefer.set('useGroupedNotifications', store.s.useGroupedNotifications);
prefer.set('dataSaver', store.s.dataSaver);
prefer.set('enableSeasonalScreenEffect', store.s.enableSeasonalScreenEffect);
prefer.set('enableHorizontalSwipe', store.s.enableHorizontalSwipe);
prefer.set('useNativeUiForVideoAudioPlayer', store.s.useNativeUIForVideoAudioPlayer);
prefer.set('keepOriginalFilename', store.s.keepOriginalFilename);
prefer.set('alwaysConfirmFollow', store.s.alwaysConfirmFollow);
prefer.set('confirmWhenRevealingSensitiveMedia', store.s.confirmWhenRevealingSensitiveMedia);
prefer.set('contextMenu', store.s.contextMenu);
prefer.set('skipNoteRender', store.s.skipNoteRender);
prefer.set('showSoftWordMutedWord', store.s.showSoftWordMutedWord);
prefer.set('confirmOnReact', store.s.confirmOnReact);
prefer.set('sound.masterVolume', store.s.sound_masterVolume);
prefer.set('sound.notUseSound', store.s.sound_notUseSound);
prefer.set('sound.useSoundOnlyWhenActive', store.s.sound_useSoundOnlyWhenActive);
prefer.set('sound.on.note', store.s.sound_note as any);
prefer.set('sound.on.noteMy', store.s.sound_noteMy as any);
prefer.set('sound.on.notification', store.s.sound_notification as any);
prefer.set('sound.on.reaction', store.s.sound_reaction as any);
store.set('deck.profile', deckStore.state.profile);
store.set('deck.columns', deckStore.state.columns);
store.set('deck.layout', deckStore.state.layout);
store.set('menu', []);
}
if (store.state.accountSetupWizard !== -1) {
if (store.s.accountSetupWizard !== -1) {
const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkUserSetupDialog.vue')), {}, {
closed: () => dispose(),
});
@ -502,7 +502,7 @@ export async function mainBoot() {
post();
},
'd': () => {
store.set('darkMode', !store.state.darkMode);
store.set('darkMode', !store.s.darkMode);
},
's': () => {
mainRouter.push('/search');

6
packages/frontend/src/components/MkAutocomplete.vue
View File

@ -73,7 +73,7 @@ const emojiDb = computed(() => {
url: char2path(x.char),
}));
for (const index of Object.values(store.state.additionalUnicodeEmojiIndexes)) {
for (const index of Object.values(store.s.additionalUnicodeEmojiIndexes)) {
for (const [emoji, keywords] of Object.entries(index)) {
for (const k of keywords) {
unicodeEmojiDB.push({
@ -155,7 +155,7 @@ function complete(type: string, value: any) {
emit('done', { type, value });
emit('closed');
if (type === 'emoji') {
let recents = store.state.recentlyUsedEmojis;
let recents = store.s.recentlyUsedEmojis;
recents = recents.filter((emoji: any) => emoji !== value);
recents.unshift(value);
store.set('recentlyUsedEmojis', recents.splice(0, 32));
@ -238,7 +238,7 @@ function exec() {
} else if (props.type === 'emoji') {
if (!props.q || props.q === '') {
// 最近使った絵文字をサジェスト
emojis.value = store.state.recentlyUsedEmojis.map(emoji => emojiDb.value.find(dbEmoji => dbEmoji.emoji === emoji)).filter(x => x) as EmojiDef[];
emojis.value = store.s.recentlyUsedEmojis.map(emoji => emojiDb.value.find(dbEmoji => dbEmoji.emoji === emoji)).filter(x => x) as EmojiDef[];
return;
}

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

@ -154,7 +154,7 @@ async function requestRender() {
captchaWidgetId.value = captcha.value.render(elem, {
sitekey: props.sitekey,
theme: store.state.darkMode ? 'dark' : 'light',
theme: store.s.darkMode ? 'dark' : 'light',
callback: callback,
'expired-callback': () => callback(undefined),
'error-callback': () => callback(undefined),

2
packages/frontend/src/components/MkChart.vue
View File

@ -161,7 +161,7 @@ const render = () => {
chartInstance.destroy();
}
const vLineColor = store.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const vLineColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const maxes = chartData.series.map((x, i) => Math.max(...x.data.map(d => d.y)));

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

@ -22,7 +22,7 @@ const props = defineProps<{
}>();
const highlighter = await getHighlighter();
const darkMode = store.reactiveState.darkMode;
const darkMode = store.r.darkMode;
const codeLang = ref<BundledLanguage | 'aiscript'>('js');
const [lightThemeName, darkThemeName] = await Promise.all([

10
packages/frontend/src/components/MkEmojiPicker.vue
View File

@ -166,7 +166,7 @@ const {
emojiPickerHeight,
} = prefer.r;
const recentlyUsedEmojis = store.reactiveState.recentlyUsedEmojis;
const recentlyUsedEmojis = store.r.recentlyUsedEmojis;
const recentlyUsedEmojisDef = computed(() => {
return recentlyUsedEmojis.value.map(getDef);
@ -319,7 +319,7 @@ watch(q, () => {
}
if (matches.size >= max) return matches;
for (const index of Object.values(store.state.additionalUnicodeEmojiIndexes)) {
for (const index of Object.values(store.s.additionalUnicodeEmojiIndexes)) {
for (const emoji of emojis) {
if (keywords.every(keyword => index[emoji.char].some(k => k.includes(keyword)))) {
matches.add(emoji);
@ -336,7 +336,7 @@ watch(q, () => {
}
if (matches.size >= max) return matches;
for (const index of Object.values(store.state.additionalUnicodeEmojiIndexes)) {
for (const index of Object.values(store.s.additionalUnicodeEmojiIndexes)) {
for (const emoji of emojis) {
if (index[emoji.char].some(k => k.startsWith(newQ))) {
matches.add(emoji);
@ -353,7 +353,7 @@ watch(q, () => {
}
if (matches.size >= max) return matches;
for (const index of Object.values(store.state.additionalUnicodeEmojiIndexes)) {
for (const index of Object.values(store.s.additionalUnicodeEmojiIndexes)) {
for (const emoji of emojis) {
if (index[emoji.char].some(k => k.includes(newQ))) {
matches.add(emoji);
@ -429,7 +429,7 @@ function chosen(emoji: string | Misskey.entities.EmojiSimple | UnicodeEmojiDef,
// 最近使った絵文字更新
if (!pinned.value?.includes(key)) {
let recents = store.state.recentlyUsedEmojis;
let recents = store.s.recentlyUsedEmojis;
recents = recents.filter((emoji) => emoji !== key);
recents.unshift(key);
store.set('recentlyUsedEmojis', recents.splice(0, 32));

4
packages/frontend/src/components/MkFollowButton.vue
View File

@ -121,11 +121,11 @@ async function onClick() {
} else {
await misskeyApi('following/create', {
userId: props.user.id,
withReplies: store.state.defaultWithReplies,
withReplies: store.s.defaultWithReplies,
});
emit('update:user', {
...props.user,
withReplies: store.state.defaultWithReplies,
withReplies: store.s.defaultWithReplies,
});
hasPendingFollowRequestFromYou.value = true;

2
packages/frontend/src/components/MkHeatmap.vue
View File

@ -106,7 +106,7 @@ async function renderChart() {
await nextTick();
const color = store.state.darkMode ? '#b4e900' : '#86b300';
const color = store.s.darkMode ? '#b4e900' : '#86b300';
// 視覚上の分かりやすさのため上から最も大きい3つの値の平均を最大値とする
const max = values.slice().sort((a, b) => b - a).slice(0, 3).reduce((a, b) => a + b, 0) / 3;

8
packages/frontend/src/components/MkPostForm.vue
View File

@ -176,18 +176,18 @@ const text = ref(props.initialText ?? '');
const files = ref(props.initialFiles ?? []);
const poll = ref<PollEditorModelValue | null>(null);
const useCw = ref<boolean>(!!props.initialCw);
const showPreview = ref(store.state.showPreview);
const showPreview = ref(store.s.showPreview);
watch(showPreview, () => store.set('showPreview', showPreview.value));
const showAddMfmFunction = ref(prefer.s.enableQuickAddMfmFunction);
watch(showAddMfmFunction, () => prefer.set('enableQuickAddMfmFunction', showAddMfmFunction.value));
const cw = ref<string | null>(props.initialCw ?? null);
const localOnly = ref(props.initialLocalOnly ?? (prefer.s.rememberNoteVisibility ? store.state.localOnly : prefer.s.defaultNoteLocalOnly));
const visibility = ref(props.initialVisibility ?? (prefer.s.rememberNoteVisibility ? store.state.visibility : prefer.s.defaultNoteVisibility));
const localOnly = ref(props.initialLocalOnly ?? (prefer.s.rememberNoteVisibility ? store.s.localOnly : prefer.s.defaultNoteLocalOnly));
const visibility = ref(props.initialVisibility ?? (prefer.s.rememberNoteVisibility ? store.s.visibility : prefer.s.defaultNoteVisibility));
const visibleUsers = ref<Misskey.entities.UserDetailed[]>([]);
if (props.initialVisibleUsers) {
props.initialVisibleUsers.forEach(u => pushVisibleUser(u));
}
const reactionAcceptance = ref(store.state.reactionAcceptance);
const reactionAcceptance = ref(store.s.reactionAcceptance);
const draghover = ref(false);
const quoteId = ref<string | null>(null);
const hasNotSpecifiedMentions = ref(false);

2
packages/frontend/src/components/MkRetentionHeatmap.vue
View File

@ -75,7 +75,7 @@ async function renderChart() {
await nextTick();
const color = store.state.darkMode ? '#b4e900' : '#86b300';
const color = store.s.darkMode ? '#b4e900' : '#86b300';
const getYYYYMMDD = (date: Date) => {
const y = date.getFullYear().toString().padStart(2, '0');

2
packages/frontend/src/components/MkRetentionLineChart.vue
View File

@ -42,7 +42,7 @@ const getDate = (ymd: string) => {
onMounted(async () => {
let raw = await misskeyApi('retention', { });
const vLineColor = store.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const vLineColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--MI_THEME-accent'));
const color = accent.toHex();

2
packages/frontend/src/components/MkUrlPreview.vue
View File

@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
sandbox="allow-popups allow-popups-to-escape-sandbox allow-scripts allow-same-origin"
scrolling="no"
:style="{ position: 'relative', width: '100%', height: `${tweetHeight}px`, border: 0 }"
:src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${store.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"
:src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${store.s.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"
></iframe>
</div>
<div :class="$style.action">

4
packages/frontend/src/components/MkUserSelectDialog.vue
View File

@ -128,7 +128,7 @@ async function ok() {
dialogEl.value?.close();
// 最近使ったユーザー更新
let recents = store.state.recentlyUsedUsers;
let recents = store.s.recentlyUsedUsers;
recents = recents.filter(x => x !== selected.value?.id);
recents.unshift(selected.value.id);
store.set('recentlyUsedUsers', recents.splice(0, 16));
@ -141,7 +141,7 @@ function cancel() {
onMounted(() => {
misskeyApi('users/show', {
userIds: store.state.recentlyUsedUsers,
userIds: store.s.recentlyUsedUsers,
}).then(foundUsers => {
let _users = foundUsers;
_users = _users.filter((u) => {

2
packages/frontend/src/components/MkUserSetupDialog.vue
View File

@ -149,7 +149,7 @@ const emit = defineEmits<{
const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
// eslint-disable-next-line vue/no-setup-props-reactivity-loss
const page = ref(store.state.accountSetupWizard);
const page = ref(store.s.accountSetupWizard);
watch(page, () => {
store.set('accountSetupWizard', page.value);

2
packages/frontend/src/components/MkVisitorDashboard.ActiveUsersChart.vue
View File

@ -59,7 +59,7 @@ async function renderChart() {
await nextTick();
const vLineColor = store.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const vLineColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const computedStyle = getComputedStyle(document.documentElement);
const accent = tinycolor(computedStyle.getPropertyValue('--MI_THEME-accent')).toHexString();

4
packages/frontend/src/components/global/MkAd.vue
View File

@ -67,7 +67,7 @@ const choseAd = (): Ad | null => {
return props.specify;
}
const allAds = instance.ads.map(ad => store.state.mutedAds.includes(ad.id) ? {
const allAds = instance.ads.map(ad => store.s.mutedAds.includes(ad.id) ? {
...ad,
ratio: 0,
} : ad);
@ -112,7 +112,7 @@ const shouldHide = ref(!prefer.s.forceShowAds && $i && $i.policies.canHideAds &&
function reduceFrequency(): void {
if (chosen.value == null) return;
if (store.state.mutedAds.includes(chosen.value.id)) return;
if (store.s.mutedAds.includes(chosen.value.id)) return;
store.push('mutedAds', chosen.value.id);
os.success();
chosen.value = choseAd();

2
packages/frontend/src/components/global/MkFooterSpacer.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="[$style.spacer, store.reactiveState.darkMode.value ? $style.dark : $style.light]"></div>
<div :class="[$style.spacer, store.r.darkMode.value ? $style.dark : $style.light]"></div>
</template>
<script lang="ts" setup>

92
packages/frontend/src/deck.ts
View File

@ -59,12 +59,12 @@ export const loadDeck = async () => {
try {
deck = await misskeyApi('i/registry/get', {
scope: ['client', 'deck', 'profiles'],
key: store.state['deck.profile'],
key: store.s['deck.profile'],
});
} catch (err) {
if (typeof err === 'object' && err != null && 'code' in err && err.code === 'NO_SUCH_KEY') {
// 後方互換性のため
if (store.state['deck.profile'] === 'default') {
if (store.s['deck.profile'] === 'default') {
saveDeck();
return;
}
@ -83,10 +83,10 @@ export const loadDeck = async () => {
export async function forceSaveDeck() {
await misskeyApi('i/registry/set', {
scope: ['client', 'deck', 'profiles'],
key: store.state['deck.profile'],
key: store.s['deck.profile'],
value: {
columns: store.reactiveState['deck.columns'].value,
layout: store.reactiveState['deck.layout'].value,
columns: store.r['deck.columns'].value,
layout: store.r['deck.layout'].value,
},
});
}
@ -117,19 +117,19 @@ export function addColumn(column: Column) {
}
export function removeColumn(id: Column['id']) {
store.set('deck.columns', store.state['deck.columns'].filter(c => c.id !== id));
store.set('deck.layout', store.state['deck.layout']
store.set('deck.columns', store.s['deck.columns'].filter(c => c.id !== id));
store.set('deck.layout', store.s['deck.layout']
.map(ids => ids.filter(_id => _id !== id))
.filter(ids => ids.length > 0));
saveDeck();
}
export function swapColumn(a: Column['id'], b: Column['id']) {
const aX = store.state['deck.layout'].findIndex(ids => ids.indexOf(a) !== -1);
const aY = store.state['deck.layout'][aX].findIndex(id => id === a);
const bX = store.state['deck.layout'].findIndex(ids => ids.indexOf(b) !== -1);
const bY = store.state['deck.layout'][bX].findIndex(id => id === b);
const layout = deepClone(store.state['deck.layout']);
const aX = store.s['deck.layout'].findIndex(ids => ids.indexOf(a) !== -1);
const aY = store.s['deck.layout'][aX].findIndex(id => id === a);
const bX = store.s['deck.layout'].findIndex(ids => ids.indexOf(b) !== -1);
const bY = store.s['deck.layout'][bX].findIndex(id => id === b);
const layout = deepClone(store.s['deck.layout']);
layout[aX][aY] = b;
layout[bX][bY] = a;
store.set('deck.layout', layout);
@ -137,12 +137,12 @@ export function swapColumn(a: Column['id'], b: Column['id']) {
}
export function swapLeftColumn(id: Column['id']) {
const layout = deepClone(store.state['deck.layout']);
store.state['deck.layout'].some((ids, i) => {
const layout = deepClone(store.s['deck.layout']);
store.s['deck.layout'].some((ids, i) => {
if (ids.includes(id)) {
const left = store.state['deck.layout'][i - 1];
const left = store.s['deck.layout'][i - 1];
if (left) {
layout[i - 1] = store.state['deck.layout'][i];
layout[i - 1] = store.s['deck.layout'][i];
layout[i] = left;
store.set('deck.layout', layout);
}
@ -154,12 +154,12 @@ export function swapLeftColumn(id: Column['id']) {
}
export function swapRightColumn(id: Column['id']) {
const layout = deepClone(store.state['deck.layout']);
store.state['deck.layout'].some((ids, i) => {
const layout = deepClone(store.s['deck.layout']);
store.s['deck.layout'].some((ids, i) => {
if (ids.includes(id)) {
const right = store.state['deck.layout'][i + 1];
const right = store.s['deck.layout'][i + 1];
if (right) {
layout[i + 1] = store.state['deck.layout'][i];
layout[i + 1] = store.s['deck.layout'][i];
layout[i] = right;
store.set('deck.layout', layout);
}
@ -171,9 +171,9 @@ export function swapRightColumn(id: Column['id']) {
}
export function swapUpColumn(id: Column['id']) {
const layout = deepClone(store.state['deck.layout']);
const idsIndex = store.state['deck.layout'].findIndex(ids => ids.includes(id));
const ids = deepClone(store.state['deck.layout'][idsIndex]);
const layout = deepClone(store.s['deck.layout']);
const idsIndex = store.s['deck.layout'].findIndex(ids => ids.includes(id));
const ids = deepClone(store.s['deck.layout'][idsIndex]);
ids.some((x, i) => {
if (x === id) {
const up = ids[i - 1];
@ -192,9 +192,9 @@ export function swapUpColumn(id: Column['id']) {
}
export function swapDownColumn(id: Column['id']) {
const layout = deepClone(store.state['deck.layout']);
const idsIndex = store.state['deck.layout'].findIndex(ids => ids.includes(id));
const ids = deepClone(store.state['deck.layout'][idsIndex]);
const layout = deepClone(store.s['deck.layout']);
const idsIndex = store.s['deck.layout'].findIndex(ids => ids.includes(id));
const ids = deepClone(store.s['deck.layout'][idsIndex]);
ids.some((x, i) => {
if (x === id) {
const down = ids[i + 1];
@ -213,8 +213,8 @@ export function swapDownColumn(id: Column['id']) {
}
export function stackLeftColumn(id: Column['id']) {
let layout = deepClone(store.state['deck.layout']);
const i = store.state['deck.layout'].findIndex(ids => ids.includes(id));
let layout = deepClone(store.s['deck.layout']);
const i = store.s['deck.layout'].findIndex(ids => ids.includes(id));
layout = layout.map(ids => ids.filter(_id => _id !== id));
layout[i - 1].push(id);
layout = layout.filter(ids => ids.length > 0);
@ -223,15 +223,15 @@ export function stackLeftColumn(id: Column['id']) {
}
export function popRightColumn(id: Column['id']) {
let layout = deepClone(store.state['deck.layout']);
const i = store.state['deck.layout'].findIndex(ids => ids.includes(id));
let layout = deepClone(store.s['deck.layout']);
const i = store.s['deck.layout'].findIndex(ids => ids.includes(id));
const affected = layout[i];
layout = layout.map(ids => ids.filter(_id => _id !== id));
layout.splice(i + 1, 0, [id]);
layout = layout.filter(ids => ids.length > 0);
store.set('deck.layout', layout);
const columns = deepClone(store.state['deck.columns']);
const columns = deepClone(store.s['deck.columns']);
for (const column of columns) {
if (affected.includes(column.id)) {
column.active = true;
@ -243,9 +243,9 @@ export function popRightColumn(id: Column['id']) {
}
export function addColumnWidget(id: Column['id'], widget: ColumnWidget) {
const columns = deepClone(store.state['deck.columns']);
const columnIndex = store.state['deck.columns'].findIndex(c => c.id === id);
const column = deepClone(store.state['deck.columns'][columnIndex]);
const columns = deepClone(store.s['deck.columns']);
const columnIndex = store.s['deck.columns'].findIndex(c => c.id === id);
const column = deepClone(store.s['deck.columns'][columnIndex]);
if (column == null) return;
if (column.widgets == null) column.widgets = [];
column.widgets.unshift(widget);
@ -255,9 +255,9 @@ export function addColumnWidget(id: Column['id'], widget: ColumnWidget) {
}
export function removeColumnWidget(id: Column['id'], widget: ColumnWidget) {
const columns = deepClone(store.state['deck.columns']);
const columnIndex = store.state['deck.columns'].findIndex(c => c.id === id);
const column = deepClone(store.state['deck.columns'][columnIndex]);
const columns = deepClone(store.s['deck.columns']);
const columnIndex = store.s['deck.columns'].findIndex(c => c.id === id);
const column = deepClone(store.s['deck.columns'][columnIndex]);
if (column == null) return;
if (column.widgets == null) column.widgets = [];
column.widgets = column.widgets.filter(w => w.id !== widget.id);
@ -267,9 +267,9 @@ export function removeColumnWidget(id: Column['id'], widget: ColumnWidget) {
}
export function setColumnWidgets(id: Column['id'], widgets: ColumnWidget[]) {
const columns = deepClone(store.state['deck.columns']);
const columnIndex = store.state['deck.columns'].findIndex(c => c.id === id);
const column = deepClone(store.state['deck.columns'][columnIndex]);
const columns = deepClone(store.s['deck.columns']);
const columnIndex = store.s['deck.columns'].findIndex(c => c.id === id);
const column = deepClone(store.s['deck.columns'][columnIndex]);
if (column == null) return;
column.widgets = widgets;
columns[columnIndex] = column;
@ -278,9 +278,9 @@ export function setColumnWidgets(id: Column['id'], widgets: ColumnWidget[]) {
}
export function updateColumnWidget(id: Column['id'], widgetId: string, widgetData: any) {
const columns = deepClone(store.state['deck.columns']);
const columnIndex = store.state['deck.columns'].findIndex(c => c.id === id);
const column = deepClone(store.state['deck.columns'][columnIndex]);
const columns = deepClone(store.s['deck.columns']);
const columnIndex = store.s['deck.columns'].findIndex(c => c.id === id);
const column = deepClone(store.s['deck.columns'][columnIndex]);
if (column == null) return;
if (column.widgets == null) column.widgets = [];
column.widgets = column.widgets.map(w => w.id === widgetId ? {
@ -293,9 +293,9 @@ export function updateColumnWidget(id: Column['id'], widgetId: string, widgetDat
}
export function updateColumn(id: Column['id'], column: Partial<Column>) {
const columns = deepClone(store.state['deck.columns']);
const columnIndex = store.state['deck.columns'].findIndex(c => c.id === id);
const currentColumn = deepClone(store.state['deck.columns'][columnIndex]);
const columns = deepClone(store.s['deck.columns']);
const columnIndex = store.s['deck.columns'].findIndex(c => c.id === id);
const currentColumn = deepClone(store.s['deck.columns'][columnIndex]);
if (currentColumn == null) return;
for (const [k, v] of Object.entries(column)) {
currentColumn[k] = v;

2
packages/frontend/src/pages/about-misskey.vue
View File

@ -406,7 +406,7 @@ const easterEggEngine = ref<{ stop: () => void } | null>(null);
const containerEl = shallowRef<HTMLElement>();
function iconLoaded() {
const emojis = store.state.reactions;
const emojis = store.s.reactions;
const containerWidth = containerEl.value.offsetWidth;
for (let i = 0; i < 32; i++) {
easterEggEmojis.value.push({

2
packages/frontend/src/pages/admin/abuses.vue
View File

@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton link to="/admin/abuse-report-notification-recipient" primary>{{ i18n.ts.notificationSetting }}</MkButton>
</div>
<MkInfo v-if="!store.reactiveState.abusesTutorial.value" closable @close="closeTutorial()">
<MkInfo v-if="!store.r.abusesTutorial.value" closable @close="closeTutorial()">
{{ i18n.ts._abuseUserReport.resolveTutorial }}
</MkInfo>

2
packages/frontend/src/pages/admin/overview.active-users.vue
View File

@ -54,7 +54,7 @@ async function renderChart() {
const raw = await misskeyApi('charts/active-users', { limit: chartLimit, span: 'day' });
const vLineColor = store.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const vLineColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const colorRead = '#3498db';
const colorWrite = '#2ecc71';

2
packages/frontend/src/pages/admin/overview.ap-requests.vue
View File

@ -68,7 +68,7 @@ onMounted(async () => {
const raw = await misskeyApi('charts/ap-request', { limit: chartLimit, span: 'day' });
const vLineColor = store.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const vLineColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const succColor = '#87e000';
const failColor = '#ff4400';

2
packages/frontend/src/pages/admin/overview.queue.chart.vue
View File

@ -67,7 +67,7 @@ const color =
'?' as never;
onMounted(() => {
const vLineColor = store.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const vLineColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
chartInstance = new Chart(chartEl.value, {
type: 'line',

2
packages/frontend/src/pages/admin/queue.chart.chart.vue
View File

@ -67,7 +67,7 @@ const color =
'?' as never;
onMounted(() => {
const vLineColor = store.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const vLineColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
chartInstance = new Chart(chartEl.value, {
type: 'line',

2
packages/frontend/src/pages/drop-and-fusion.game.vue
View File

@ -56,7 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div ref="containerEl" :class="[$style.gameContainer, { [$style.gameOver]: isGameOver && !replaying }]" @contextmenu.stop.prevent @click.stop.prevent="onClick" @touchmove.stop.prevent="onTouchmove" @touchend="onTouchend" @mousemove="onMousemove">
<img v-if="store.state.darkMode" src="/client-assets/drop-and-fusion/frame-dark.svg" :class="$style.mainFrameImg"/>
<img v-if="store.s.darkMode" src="/client-assets/drop-and-fusion/frame-dark.svg" :class="$style.mainFrameImg"/>
<img v-else src="/client-assets/drop-and-fusion/frame-light.svg" :class="$style.mainFrameImg"/>
<canvas ref="canvasEl" :class="$style.canvas"/>
<Transition

4
packages/frontend/src/pages/settings/emoji-picker.vue
View File

@ -154,8 +154,8 @@ import MkFolder from '@/components/MkFolder.vue';
import { prefer } from '@/preferences.js';
import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
const pinnedEmojisForReaction: Ref<string[]> = ref(deepClone(store.state.reactions));
const pinnedEmojis: Ref<string[]> = ref(deepClone(store.state.pinnedEmojis));
const pinnedEmojisForReaction: Ref<string[]> = ref(deepClone(store.s.reactions));
const pinnedEmojis: Ref<string[]> = ref(deepClone(store.s.pinnedEmojis));
const emojiPickerScale = prefer.model('emojiPickerScale');
const emojiPickerWidth = prefer.model('emojiPickerWidth');

2
packages/frontend/src/pages/settings/import-export.vue
View File

@ -159,7 +159,7 @@ import { store } from '@/store.js';
const excludeMutingUsers = ref(false);
const excludeInactiveUsers = ref(false);
const withReplies = ref(store.state.defaultWithReplies);
const withReplies = ref(store.s.defaultWithReplies);
const onExportSuccess = () => {
os.alert({

2
packages/frontend/src/pages/settings/index.vue
View File

@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="!narrow || currentPage?.route.name == null" class="nav">
<div class="baaadecd">
<MkInfo v-if="emailNotConfigured" warn class="info">{{ i18n.ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
<MkInfo v-if="!store.reactiveState.enablePreferencesAutoCloudBackup.value && store.reactiveState.showPreferencesAutoCloudBackupSuggestion.value" class="info">
<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>

8
packages/frontend/src/pages/settings/preferences.vue
View File

@ -337,8 +337,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label><SearchLabel>{{ i18n.ts.additionalEmojiDictionary }}</SearchLabel></template>
<div class="_buttons">
<template v-for="lang in emojiIndexLangs" :key="lang">
<MkButton v-if="store.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) }}{{ store.reactiveState.additionalUnicodeEmojiIndexes.value[lang] ? ` (${ i18n.ts.installed })` : '' }}</MkButton>
<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>
@ -449,7 +449,7 @@ function getEmojiIndexLangName(targetLang: typeof emojiIndexLangs[number]) {
function downloadEmojiIndex(lang: typeof emojiIndexLangs[number]) {
async function main() {
const currentIndexes = store.state.additionalUnicodeEmojiIndexes;
const currentIndexes = store.s.additionalUnicodeEmojiIndexes;
function download() {
switch (lang) {
@ -469,7 +469,7 @@ function downloadEmojiIndex(lang: typeof emojiIndexLangs[number]) {
function removeEmojiIndex(lang: string) {
async function main() {
const currentIndexes = store.state.additionalUnicodeEmojiIndexes;
const currentIndexes = store.s.additionalUnicodeEmojiIndexes;
delete currentIndexes[lang];
await store.set('additionalUnicodeEmojiIndexes', currentIndexes);
}

2
packages/frontend/src/pages/theme-editor.vue
View File

@ -200,7 +200,7 @@ async function saveAs() {
if (description.value) theme.value.desc = description.value;
await addTheme(theme.value);
applyTheme(theme.value);
if (store.state.darkMode) {
if (store.s.darkMode) {
prefer.set('darkTheme', theme.value);
} else {
prefer.set('lightTheme', theme.value);

24
packages/frontend/src/pages/timeline.vue
View File

@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSpacer :contentMax="800">
<MkHorizontalSwipe v-model:tab="src" :tabs="$i ? headerTabs : headerTabsWhenNotLogin">
<div :key="src" ref="rootEl">
<MkInfo v-if="isBasicTimeline(src) && !store.reactiveState.timelineTutorials.value[src]" style="margin-bottom: var(--MI-margin);" closable @close="closeTutorial()">
<MkInfo v-if="isBasicTimeline(src) && !store.r.timelineTutorials.value[src]" style="margin-bottom: var(--MI-margin);" closable @close="closeTutorial()">
{{ i18n.ts._timelineDescription[src] }}
</MkInfo>
<MkPostForm v-if="prefer.r.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--MI-margin);"/>
@ -67,18 +67,18 @@ type TimelinePageSrc = BasicTimelineType | `list:${string}`;
const queue = ref(0);
const srcWhenNotSignin = ref<'local' | 'global'>(isAvailableBasicTimeline('local') ? 'local' : 'global');
const src = computed<TimelinePageSrc>({
get: () => ($i ? store.reactiveState.tl.value.src : srcWhenNotSignin.value),
get: () => ($i ? store.r.tl.value.src : srcWhenNotSignin.value),
set: (x) => saveSrc(x),
});
const withRenotes = computed<boolean>({
get: () => store.reactiveState.tl.value.filter.withRenotes,
get: () => store.r.tl.value.filter.withRenotes,
set: (x) => saveTlFilter('withRenotes', x),
});
// computed内での無限ループを防ぐためのフラグ
const localSocialTLFilterSwitchStore = ref<'withReplies' | 'onlyFiles' | false>(
store.reactiveState.tl.value.filter.withReplies ? 'withReplies' :
store.reactiveState.tl.value.filter.onlyFiles ? 'onlyFiles' :
store.r.tl.value.filter.withReplies ? 'withReplies' :
store.r.tl.value.filter.onlyFiles ? 'onlyFiles' :
false,
);
@ -88,7 +88,7 @@ const withReplies = computed<boolean>({
if (['local', 'social'].includes(src.value) && localSocialTLFilterSwitchStore.value === 'onlyFiles') {
return false;
} else {
return store.reactiveState.tl.value.filter.withReplies;
return store.r.tl.value.filter.withReplies;
}
},
set: (x) => saveTlFilter('withReplies', x),
@ -98,7 +98,7 @@ const onlyFiles = computed<boolean>({
if (['local', 'social'].includes(src.value) && localSocialTLFilterSwitchStore.value === 'withReplies') {
return false;
} else {
return store.reactiveState.tl.value.filter.onlyFiles;
return store.r.tl.value.filter.onlyFiles;
}
},
set: (x) => saveTlFilter('onlyFiles', x),
@ -115,7 +115,7 @@ watch([withReplies, onlyFiles], ([withRepliesTo, onlyFilesTo]) => {
});
const withSensitive = computed<boolean>({
get: () => store.reactiveState.tl.value.filter.withSensitive,
get: () => store.r.tl.value.filter.withSensitive,
set: (x) => saveTlFilter('withSensitive', x),
});
@ -196,7 +196,7 @@ async function chooseChannel(ev: MouseEvent): Promise<void> {
}
function saveSrc(newSrc: TimelinePageSrc): void {
const out = deepMerge({ src: newSrc }, store.state.tl);
const out = deepMerge({ src: newSrc }, store.s.tl);
if (newSrc.startsWith('userList:')) {
const id = newSrc.substring('userList:'.length);
@ -209,9 +209,9 @@ function saveSrc(newSrc: TimelinePageSrc): void {
}
}
function saveTlFilter(key: keyof typeof store.state.tl.filter, newValue: boolean) {
function saveTlFilter(key: keyof typeof store.s.tl.filter, newValue: boolean) {
if (key !== 'withReplies' || $i) {
const out = deepMerge({ filter: { [key]: newValue } }, store.state.tl);
const out = deepMerge({ filter: { [key]: newValue } }, store.s.tl);
store.set('tl', out);
}
}
@ -231,7 +231,7 @@ function focus(): void {
function closeTutorial(): void {
if (!isBasicTimeline(src.value)) return;
const before = store.state.timelineTutorials;
const before = store.s.timelineTutorials;
before[src.value] = true;
store.set('timelineTutorials', before);
}

2
packages/frontend/src/pages/user/activity.following.vue
View File

@ -64,7 +64,7 @@ async function renderChart() {
const raw = await misskeyApi('charts/user/following', { userId: props.user.id, limit: chartLimit, span: 'day' });
const vLineColor = store.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const vLineColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const colorFollowLocal = '#008FFB';
const colorFollowRemote = '#008FFB88';

2
packages/frontend/src/pages/user/activity.notes.vue
View File

@ -64,7 +64,7 @@ async function renderChart() {
const raw = await misskeyApi('charts/user/notes', { userId: props.user.id, limit: chartLimit, span: 'day' });
const vLineColor = store.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const vLineColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const colorNormal = '#008FFB';
const colorReply = '#FEB019';

2
packages/frontend/src/pages/user/activity.pv.vue
View File

@ -64,7 +64,7 @@ async function renderChart() {
const raw = await misskeyApi('charts/user/pv', { userId: props.user.id, limit: chartLimit, span: 'day' });
const vLineColor = store.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const vLineColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const colorUser = '#3498db';
const colorVisitor = '#2ecc71';

45
packages/frontend/src/pizzax.ts
View File

@ -45,8 +45,15 @@ export class Storage<T extends StateDef> {
public readonly def: T;
// TODO: これが実装されたらreadonlyにしたい: https://github.com/microsoft/TypeScript/issues/37487
public readonly state: State<T>;
public readonly reactiveState: ReactiveState<T>;
/**
* static / state の略 (static が予約語のため)
*/
public readonly s: State<T>;
/**
* reactive の略
*/
public readonly r: ReactiveState<T>;
private pizzaxChannel: BroadcastChannel<PizzaxChannelMessage<T>>;
@ -70,12 +77,12 @@ export class Storage<T extends StateDef> {
this.pizzaxChannel = new BroadcastChannel(`pizzax::${key}`);
this.state = {} as State<T>;
this.reactiveState = {} as ReactiveState<T>;
this.s = {} as State<T>;
this.r = {} as ReactiveState<T>;
for (const [k, v] of Object.entries(def) as [keyof T, T[keyof T]['default']][]) {
this.state[k] = v.default;
this.reactiveState[k] = ref(v.default);
this.s[k] = v.default;
this.r[k] = ref(v.default);
}
this.ready = this.init();
@ -106,13 +113,13 @@ export class Storage<T extends StateDef> {
for (const [k, v] of Object.entries(this.def) as [keyof T, T[keyof T]['default']][]) {
if (v.where === 'device' && Object.prototype.hasOwnProperty.call(deviceState, k)) {
this.reactiveState[k].value = this.state[k] = this.mergeState<T[keyof T]['default']>(deviceState[k], v.default);
this.r[k].value = this.s[k] = this.mergeState<T[keyof T]['default']>(deviceState[k], v.default);
} else if (v.where === 'account' && $i && Object.prototype.hasOwnProperty.call(registryCache, k)) {
this.reactiveState[k].value = this.state[k] = this.mergeState<T[keyof T]['default']>(registryCache[k], v.default);
this.r[k].value = this.s[k] = this.mergeState<T[keyof T]['default']>(registryCache[k], v.default);
} else if (v.where === 'deviceAccount' && Object.prototype.hasOwnProperty.call(deviceAccountState, k)) {
this.reactiveState[k].value = this.state[k] = this.mergeState<T[keyof T]['default']>(deviceAccountState[k], v.default);
this.r[k].value = this.s[k] = this.mergeState<T[keyof T]['default']>(deviceAccountState[k], v.default);
} else {
this.reactiveState[k].value = this.state[k] = v.default;
this.r[k].value = this.s[k] = v.default;
}
}
@ -120,7 +127,7 @@ export class Storage<T extends StateDef> {
// アカウント変更すればunisonReloadが効くため、このreturnが発火することは
// まずないと思うけど一応弾いておく
if (where === 'deviceAccount' && !($i && userId !== $i.id)) return;
this.reactiveState[key].value = this.state[key] = value;
this.r[key].value = this.s[key] = value;
});
if ($i) {
@ -128,9 +135,9 @@ export class Storage<T extends StateDef> {
// streamingのuser storage updateイベントを監視して更新
connection.on('registryUpdated', ({ scope, key, value }: { scope?: string[], key: keyof T, value: T[typeof key]['default'] }) => {
if (!scope || scope.length !== 2 || scope[0] !== 'client' || scope[1] !== this.key || this.state[key] === value) return;
if (!scope || scope.length !== 2 || scope[0] !== 'client' || scope[1] !== this.key || this.s[key] === value) return;
this.reactiveState[key].value = this.state[key] = value;
this.r[key].value = this.s[key] = value;
this.addIdbSetJob(async () => {
const cache = await get(this.registryCacheKeyName);
@ -156,10 +163,10 @@ export class Storage<T extends StateDef> {
for (const [k, v] of Object.entries(this.def) as [keyof T, T[keyof T]['default']][]) {
if (v.where === 'account') {
if (Object.prototype.hasOwnProperty.call(kvs, k)) {
this.reactiveState[k].value = this.state[k] = (kvs as Partial<T>)[k];
this.r[k].value = this.s[k] = (kvs as Partial<T>)[k];
cache[k] = (kvs as Partial<T>)[k];
} else {
this.reactiveState[k].value = this.state[k] = v.default;
this.r[k].value = this.s[k] = v.default;
}
}
}
@ -179,7 +186,7 @@ export class Storage<T extends StateDef> {
// (JSON.parse(JSON.stringify(value))の代わり)
const rawValue = deepClone(value);
this.reactiveState[key].value = this.state[key] = rawValue;
this.r[key].value = this.s[key] = rawValue;
return this.addIdbSetJob(async () => {
switch (this.def[key].where) {
@ -224,7 +231,7 @@ export class Storage<T extends StateDef> {
}
public push<K extends keyof T>(key: K, value: ArrayElement<T[K]['default']>): void {
const currentState = this.state[key];
const currentState = this.s[key];
this.set(key, [...currentState, value]);
}
@ -246,9 +253,9 @@ export class Storage<T extends StateDef> {
get: () => R;
set: (value: R) => void;
} {
const valueRef = ref(this.state[key]);
const valueRef = ref(this.s[key]);
const stop = watch(this.reactiveState[key], val => {
const stop = watch(this.r[key], val => {
valueRef.value = val;
});

12
packages/frontend/src/plugin.ts
View File

@ -93,7 +93,7 @@ export async function parsePluginMeta(code: string): Promise<AiScriptPluginMeta>
export async function authorizePlugin(plugin: Plugin) {
if (plugin.permissions == null || plugin.permissions.length === 0) return;
if (Object.hasOwn(store.state.pluginTokens, plugin.installId)) return;
if (Object.hasOwn(store.s.pluginTokens, plugin.installId)) return;
const token = await new Promise<string>((res, rej) => {
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {
@ -116,7 +116,7 @@ export async function authorizePlugin(plugin: Plugin) {
});
store.set('pluginTokens', {
...store.state.pluginTokens,
...store.s.pluginTokens,
[plugin.installId]: token,
});
}
@ -155,11 +155,11 @@ export async function installPlugin(code: string, meta?: AiScriptPluginMeta) {
export async function uninstallPlugin(plugin: Plugin) {
abortPlugin(plugin);
prefer.set('plugins', prefer.s.plugins.filter(x => x.installId !== plugin.installId));
if (Object.hasOwn(store.state.pluginTokens, plugin.installId)) {
if (Object.hasOwn(store.s.pluginTokens, plugin.installId)) {
await os.apiWithDialog('i/revoke-token', {
token: store.state.pluginTokens[plugin.installId],
token: store.s.pluginTokens[plugin.installId],
});
const pluginTokens = { ...store.state.pluginTokens };
const pluginTokens = { ...store.s.pluginTokens };
delete pluginTokens[plugin.installId];
store.set('pluginTokens', pluginTokens);
}
@ -341,7 +341,7 @@ function createPluginEnv(opts: { plugin: Plugin; storageKey: string }): Record<s
}
const env: Record<string, values.Value> = {
...createAiScriptEnv({ ...opts, token: store.state.pluginTokens[id] }),
...createAiScriptEnv({ ...opts, token: store.s.pluginTokens[id] }),
'Plugin:register:post_form_action': values.FN_NATIVE(([title, handler]) => {
utils.assertString(title);

2
packages/frontend/src/preferences.ts
View File

@ -65,7 +65,7 @@ let latestBackupAt = 0;
window.setInterval(() => {
if ($i == null) return;
if (!store.state.enablePreferencesAutoCloudBackup) return;
if (!store.s.enablePreferencesAutoCloudBackup) return;
if (document.visibilityState !== 'visible') return; // 同期されていない古い値がバックアップされるのを防ぐ
if (profileManager.profile.modifiedAt <= latestBackupAt) return;

2
packages/frontend/src/preferences/store.ts
View File

@ -22,7 +22,7 @@ type StoreEvent<Data extends Record<string, any>> = {
export class Store<Data extends Record<string, any>> extends EventEmitter<StoreEvent<Data>> {
/**
* static の略 (static が予約語のため)
* static / state の略 (static が予約語のため)
*/
public s = {} as {
[K in keyof Data]: Data[K];

2
packages/frontend/src/preferences/utility.ts
View File

@ -21,7 +21,7 @@ function canAutoBackup() {
}
export function getPreferencesProfileMenu(): MenuItem[] {
const autoBackupEnabled = ref(store.state.enablePreferencesAutoCloudBackup);
const autoBackupEnabled = ref(store.s.enablePreferencesAutoCloudBackup);
watch(autoBackupEnabled, () => {
if (autoBackupEnabled.value) {

4
packages/frontend/src/ui/_common_/navbar.vue
View File

@ -105,7 +105,7 @@ const router = useRouter();
const forceIconOnly = ref(window.innerWidth <= 1279);
const iconOnly = computed(() => {
return forceIconOnly.value || (store.reactiveState.menuDisplay.value === 'sideIcon');
return forceIconOnly.value || (store.r.menuDisplay.value === 'sideIcon');
});
const menu = computed(() => prefer.s.menu);
@ -123,7 +123,7 @@ function calcViewState() {
window.addEventListener('resize', calcViewState);
watch(store.reactiveState.menuDisplay, () => {
watch(store.r.menuDisplay, () => {
calcViewState();
});

2
packages/frontend/src/ui/classic.sidebar.vue
View File

@ -100,7 +100,7 @@ function openAccountMenu(ev: MouseEvent) {
}, ev);
}
watch(store.reactiveState.menuDisplay, () => {
watch(store.r.menuDisplay, () => {
calcViewState();
});

4
packages/frontend/src/ui/classic.vue
View File

@ -75,7 +75,7 @@ const widgetsShowing = ref(false);
const fullView = ref(false);
const globalHeaderHeight = ref(0);
const wallpaper = miLocalStorage.getItem('wallpaper') != null;
const showMenuOnTop = computed(() => store.state.menuDisplay === 'top');
const showMenuOnTop = computed(() => store.s.menuDisplay === 'top');
const live2d = shallowRef<HTMLIFrameElement>();
const widgetsLeft = ref<HTMLElement>();
const widgetsRight = ref<HTMLElement>();
@ -97,7 +97,7 @@ provide('shouldHeaderThin', showMenuOnTop.value);
provide('forceSpacerMin', true);
function attachSticky(el: HTMLElement) {
const sticky = new StickySidebar(el, 0, store.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
const sticky = new StickySidebar(el, 0, store.s.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
window.addEventListener('scroll', () => {
sticky.calc(window.scrollY);
}, { passive: true });

18
packages/frontend/src/ui/deck.vue
View File

@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div :class="$style.sideMenu">
<div :class="$style.sideMenuTop">
<button v-tooltip.noDelay.left="`${i18n.ts._deck.profile}: ${store.state['deck.profile']}`" :class="$style.sideMenuButton" class="_button" @click="changeProfile"><i class="ti ti-caret-down"></i></button>
<button v-tooltip.noDelay.left="`${i18n.ts._deck.profile}: ${store.s['deck.profile']}`" :class="$style.sideMenuButton" class="_button" @click="changeProfile"><i class="ti ti-caret-down"></i></button>
<button v-tooltip.noDelay.left="i18n.ts._deck.deleteProfile" :class="$style.sideMenuButton" class="_button" @click="deleteProfile"><i class="ti ti-trash"></i></button>
</div>
<div :class="$style.sideMenuMiddle">
@ -137,7 +137,7 @@ const columnComponents = {
mainRouter.navHook = (path, flag): boolean => {
if (flag === 'forcePage') return false;
const noMainColumn = !store.state['deck.columns'].some(x => x.type === 'main');
const noMainColumn = !store.s['deck.columns'].some(x => x.type === 'main');
if (prefer.s['deck.navWindow'] || noMainColumn) {
os.pageWindow(path);
return true;
@ -160,8 +160,8 @@ watch(route, () => {
});
*/
const columns = store.reactiveState['deck.columns'];
const layout = store.reactiveState['deck.layout'];
const columns = store.r['deck.columns'];
const layout = store.r['deck.layout'];
const menuIndicated = computed(() => {
if ($i == null) return false;
for (const def in navbarItemDef) {
@ -214,12 +214,12 @@ loadDeck();
function changeProfile(ev: MouseEvent) {
let items: MenuItem[] = [{
text: store.state['deck.profile'],
text: store.s['deck.profile'],
active: true,
action: () => {},
}];
getProfiles().then(profiles => {
items.push(...(profiles.filter(k => k !== store.state['deck.profile']).map(k => ({
items.push(...(profiles.filter(k => k !== store.s['deck.profile']).map(k => ({
text: k,
action: () => {
store.set('deck.profile', k);
@ -252,17 +252,17 @@ function changeProfile(ev: MouseEvent) {
async function deleteProfile() {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.tsx.deleteAreYouSure({ x: store.state['deck.profile'] }),
text: i18n.tsx.deleteAreYouSure({ x: store.s['deck.profile'] }),
});
if (canceled) return;
os.promiseDialog((async () => {
if (store.state['deck.profile'] === 'default') {
if (store.s['deck.profile'] === 'default') {
await store.set('deck.columns', []);
await store.set('deck.layout', []);
await forceSaveDeck();
} else {
await deleteProfile_(store.state['deck.profile']);
await deleteProfile_(store.s['deck.profile']);
}
await store.set('deck.profile', 'default');
})(), () => {

2
packages/frontend/src/utility/emoji-picker.ts
View File

@ -25,7 +25,7 @@ class EmojiPicker {
}
public async init() {
const emojisRef = store.reactiveState.pinnedEmojis;
const emojisRef = store.r.pinnedEmojis;
await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
src: this.src,
pinnedEmojis: emojisRef,

4
packages/frontend/src/utility/get-note-menu.ts
View File

@ -608,8 +608,8 @@ export function getRenoteMenu(props: {
});
}
const configuredVisibility = prefer.s.rememberNoteVisibility ? store.state.visibility : prefer.s.defaultNoteVisibility;
const localOnly = prefer.s.rememberNoteVisibility ? store.state.localOnly : prefer.s.defaultNoteLocalOnly;
const configuredVisibility = prefer.s.rememberNoteVisibility ? store.s.visibility : prefer.s.defaultNoteVisibility;
const localOnly = prefer.s.rememberNoteVisibility ? store.s.localOnly : prefer.s.defaultNoteLocalOnly;
let visibility = appearNote.visibility;
visibility = smallerVisibility(visibility, configuredVisibility);

2
packages/frontend/src/utility/init-chart.ts
View File

@ -52,7 +52,7 @@ export function initChart() {
// フォントカラー
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--MI_THEME-fg');
Chart.defaults.borderColor = store.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
Chart.defaults.borderColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
Chart.defaults.animation = false;
}

2
packages/frontend/src/utility/reaction-picker.ts
View File

@ -21,7 +21,7 @@ class ReactionPicker {
}
public async init() {
const reactionsRef = store.reactiveState.reactions;
const reactionsRef = store.r.reactions;
await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
src: this.src,
pinnedEmojis: reactionsRef,

4
packages/frontend/src/widgets/WidgetMemo.vue
View File

@ -48,7 +48,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
emit,
);
const text = ref<string | null>(store.state.memo);
const text = ref<string | null>(store.s.memo);
const changed = ref(false);
let timeoutId;
@ -63,7 +63,7 @@ const onChange = () => {
timeoutId = window.setTimeout(saveMemo, 1000);
};
watch(() => store.reactiveState.memo, newText => {
watch(() => store.r.memo, newText => {
text.value = newText.value;
});