mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-11-01 07:35:57 +09:00
Code

refactor(client): typed localStorage

Browse Source
This commit is contained in:
syuilo 2023-01-07 10:13:02 +09:00
parent a42b03c154
commit 91503405b4
25 changed files with 157 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/frontend/src/account.ts
View File

@ -6,12 +6,13 @@ import { del, get, set } from '@/scripts/idb-proxy';
import { apiUrl } from '@/config';
import { waiting, api, popup, popupMenu, success, alert } from '@/os';
import { unisonReload, reloadChannel } from '@/scripts/unison-reload';
import { miLocalStorage } from './local-storage';
// TODO: 他のタブと永続化されたstateを同期
type Account = misskey.entities.MeDetailed;
const accountData = localStorage.getItem('account');
const accountData = miLocalStorage.getItem('account');
// TODO: 外部からはreadonlyに
export const $i = accountData ? reactive(JSON.parse(accountData) as Account) : null;
@ -21,7 +22,7 @@ export const iAmAdmin = $i != null && $i.isAdmin;
export async function signout() {
waiting();
localStorage.removeItem('account');
miLocalStorage.removeItem('account');
await removeAccount($i.id);
@ -119,7 +120,7 @@ export function updateAccount(accountData) {
for (const [key, value] of Object.entries(accountData)) {
$i[key] = value;
}
localStorage.setItem('account', JSON.stringify($i));
miLocalStorage.setItem('account', JSON.stringify($i));
}
export function refreshAccount() {
@ -130,7 +131,7 @@ export async function login(token: Account['token'], redirect?: string) {
waiting();
if (_DEV_) console.log('logging as token ', token);
const me = await fetchAccount(token);
localStorage.setItem('account', JSON.stringify(me));
miLocalStorage.setItem('account', JSON.stringify(me));
document.cookie = `token=${token}; path=/; max-age=31536000`; // bull dashboardの認証とかで使う
await addAccount(me.id, token);

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

@ -46,6 +46,7 @@ import { defaultStore } from '@/store';
import { emojilist } from '@/scripts/emojilist';
import { instance } from '@/instance';
import { i18n } from '@/i18n';
import { miLocalStorage } from '@/local-storage';
type EmojiDef = {
emoji: string;
@ -208,7 +209,7 @@ function exec() {
}
} else if (props.type === 'hashtag') {
if (!props.q || props.q === '') {
hashtags.value = JSON.parse(localStorage.getItem('hashtags') || '[]');
hashtags.value = JSON.parse(miLocalStorage.getItem('hashtags') || '[]');
fetching.value = false;
} else {
const cacheKey = `autocomplete:hashtag:${props.q}`;

7
packages/frontend/src/components/MkFolder.vue
View File

@ -25,8 +25,9 @@
<script lang="ts">
import { defineComponent } from 'vue';
import tinycolor from 'tinycolor2';
import { miLocalStorage } from '@/local-storage';
const localStoragePrefix = 'ui:folder:';
const miLocalStoragePrefix = 'ui:folder:' as const;
export default defineComponent({
props: {
@ -44,13 +45,13 @@ export default defineComponent({
data() {
return {
bg: null,
showBody: (this.persistKey && localStorage.getItem(localStoragePrefix + this.persistKey)) ? localStorage.getItem(localStoragePrefix + this.persistKey) === 't' : this.expanded,
showBody: (this.persistKey && miLocalStorage.getItem(`${miLocalStoragePrefix}${this.persistKey}`)) ? (miLocalStorage.getItem(`${miLocalStoragePrefix}${this.persistKey}`) === 't') : this.expanded,
};
},
watch: {
showBody() {
if (this.persistKey) {
localStorage.setItem(localStoragePrefix + this.persistKey, this.showBody ? 't' : 'f');
miLocalStorage.setItem(`${miLocalStoragePrefix}${this.persistKey}`, this.showBody ? 't' : 'f');
}
},
},

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

@ -98,6 +98,7 @@ import { $i, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account'
import { uploadFile } from '@/scripts/upload';
import { deepClone } from '@/scripts/clone';
import MkRippleEffect from '@/components/MkRippleEffect.vue';
import { miLocalStorage } from '@/local-storage';
const modal = inject('modal');
@ -156,7 +157,7 @@ let autocomplete = $ref(null);
let draghover = $ref(false);
let quoteId = $ref(null);
let hasNotSpecifiedMentions = $ref(false);
let recentHashtags = $ref(JSON.parse(localStorage.getItem('hashtags') || '[]'));
let recentHashtags = $ref(JSON.parse(miLocalStorage.getItem('hashtags') || '[]'));
let imeText = $ref('');
const typing = throttle(3000, () => {
@ -543,7 +544,7 @@ function onDrop(ev): void {
}
function saveDraft() {
const draftData = JSON.parse(localStorage.getItem('drafts') || '{}');
const draftData = JSON.parse(miLocalStorage.getItem('drafts') || '{}');
draftData[draftKey] = {
updatedAt: new Date(),
@ -558,15 +559,15 @@ function saveDraft() {
},
};
localStorage.setItem('drafts', JSON.stringify(draftData));
miLocalStorage.setItem('drafts', JSON.stringify(draftData));
}
function deleteDraft() {
const draftData = JSON.parse(localStorage.getItem('drafts') ?? '{}');
const draftData = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}');
delete draftData[draftKey];
localStorage.setItem('drafts', JSON.stringify(draftData));
miLocalStorage.setItem('drafts', JSON.stringify(draftData));
}
async function post(ev?: MouseEvent) {
@ -622,8 +623,8 @@ async function post(ev?: MouseEvent) {
emit('posted');
if (postData.text && postData.text !== '') {
const hashtags_ = mfm.parse(postData.text).filter(x => x.type === 'hashtag').map(x => x.props.hashtag);
const history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[];
localStorage.setItem('hashtags', JSON.stringify(unique(hashtags_.concat(history))));
const history = JSON.parse(miLocalStorage.getItem('hashtags') || '[]') as string[];
miLocalStorage.setItem('hashtags', JSON.stringify(unique(hashtags_.concat(history))));
}
posting = false;
postAccount = null;
@ -698,7 +699,7 @@ onMounted(() => {
nextTick(() => {
// 書きかけの投稿を復元
if (!props.instant && !props.mention && !props.specified) {
const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[draftKey];
const draft = JSON.parse(miLocalStorage.getItem('drafts') || '{}')[draftKey];
if (draft) {
text = draft.data.text;
useCw = draft.data.useCw;

10
packages/frontend/src/config.ts
View File

@ -1,3 +1,5 @@
import { miLocalStorage } from "./local-storage";
const address = new URL(location.href);
const siteName = (document.querySelector('meta[property="og:site_name"]') as HTMLMetaElement)?.content;
@ -6,10 +8,10 @@ export const hostname = address.hostname;
export const url = address.origin;
export const apiUrl = url + '/api';
export const wsUrl = url.replace('http://', 'ws://').replace('https://', 'wss://') + '/streaming';
export const lang = localStorage.getItem('lang');
export const lang = miLocalStorage.getItem('lang');
export const langs = _LANGS_;
export const locale = JSON.parse(localStorage.getItem('locale'));
export const locale = JSON.parse(miLocalStorage.getItem('locale'));
export const version = _VERSION_;
export const instanceName = siteName === 'Misskey' ? host : siteName;
export const ui = localStorage.getItem('ui');
export const debug = localStorage.getItem('debug') === 'true';
export const ui = miLocalStorage.getItem('ui');
export const debug = miLocalStorage.getItem('debug') === 'true';

24
packages/frontend/src/init.ts
View File

@ -9,9 +9,12 @@ import '@/style.scss';
//#region account indexedDB migration
import { set } from '@/scripts/idb-proxy';
if (localStorage.getItem('accounts') != null) {
set('accounts', JSON.parse(localStorage.getItem('accounts')));
localStorage.removeItem('accounts');
{
const accounts = miLocalStorage.getItem('accounts');
if (accounts) {
set('accounts', JSON.parse(accounts));
miLocalStorage.removeItem('accounts');
}
}
//#endregion
@ -40,6 +43,7 @@ import { reloadChannel } from '@/scripts/unison-reload';
import { reactionPicker } from '@/scripts/reaction-picker';
import { getUrlWithoutLoginId } from '@/scripts/login-id';
import { getAccountFromId } from '@/scripts/get-account-from-id';
import { miLocalStorage } from './local-storage';
(async () => {
console.info(`Misskey v${version}`);
@ -154,7 +158,7 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
const fetchInstanceMetaPromise = fetchInstance();
fetchInstanceMetaPromise.then(() => {
localStorage.setItem('v', instance.version);
miLocalStorage.setItem('v', instance.version);
// Init service worker
initializeSw();
@ -223,12 +227,12 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
}
// クライアントが更新されたか？
const lastVersion = localStorage.getItem('lastVersion');
const lastVersion = miLocalStorage.getItem('lastVersion');
if (lastVersion !== version) {
localStorage.setItem('lastVersion', version);
miLocalStorage.setItem('lastVersion', version);
// テーマリビルドするため
localStorage.removeItem('theme');
miLocalStorage.removeItem('theme');
try { // 変なバージョン文字列来るとcompareVersionsでエラーになるため
if (lastVersion != null && compareVersions(version, lastVersion) === 1) {
@ -244,7 +248,7 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
// NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため)
watch(defaultStore.reactiveState.darkMode, (darkMode) => {
applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme'));
}, { immediate: localStorage.theme == null });
}, { immediate: miLocalStorage.getItem('theme') == null });
const darkTheme = computed(ColdDeviceStorage.makeGetterSetter('darkTheme'));
const lightTheme = computed(ColdDeviceStorage.makeGetterSetter('lightTheme'));
@ -341,7 +345,7 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
});
}
const lastUsed = localStorage.getItem('lastUsed');
const lastUsed = miLocalStorage.getItem('lastUsed');
if (lastUsed) {
const lastUsedDate = parseInt(lastUsed, 10);
// 二時間以上前なら
@ -351,7 +355,7 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
}));
}
}
localStorage.setItem('lastUsed', Date.now().toString());
miLocalStorage.setItem('lastUsed', Date.now().toString());
if ('Notification' in window) {
// 許可を得ていなかったらリクエスト

5
packages/frontend/src/instance.ts
View File

@ -1,10 +1,11 @@
import { computed, reactive } from 'vue';
import * as Misskey from 'misskey-js';
import { api } from './os';
import { miLocalStorage } from './local-storage';
// TODO: 他のタブと永続化されたstateを同期
const instanceData = localStorage.getItem('instance');
const instanceData = miLocalStorage.getItem('instance');
// TODO: instanceをリアクティブにするかは再考の余地あり
@ -21,7 +22,7 @@ export async function fetchInstance() {
instance[k] = v;
}
localStorage.setItem('instance', JSON.stringify(instance));
miLocalStorage.setItem('instance', JSON.stringify(instance));
}
export const emojiCategories = computed(() => {

31
packages/frontend/src/local-storage.ts Normal file
View File

@ -0,0 +1,31 @@
type Keys =
'v' |
'lastVersion' |
'instance' |
'account' |
'accounts' |
'lastUsed' |
'lang' |
'drafts' |
'hashtags' |
'wallpaper' |
'theme' |
'colorSchema' |
'useSystemFont' |
'fontSize' |
'ui' |
'locale' |
'theme' |
'customCss' |
'message_drafts' |
'scratchpad' |
`miux:${string}` |
`ui:folder:${string}` |
`themes:${string}` |
`aiscript:${string}`;
export const miLocalStorage = {
getItem: (key: Keys) => window.localStorage.getItem(key),
setItem: (key: Keys, value: string) => window.localStorage.setItem(key, value),
removeItem: (key: Keys) => window.localStorage.removeItem(key),
};

7
packages/frontend/src/navbar.ts
View File

@ -5,6 +5,7 @@ import * as os from '@/os';
import { i18n } from '@/i18n';
import { ui } from '@/config';
import { unisonReload } from '@/scripts/unison-reload';
import { miLocalStorage } from './local-storage';
export const navbarItemDef = reactive({
notifications: {
@ -110,21 +111,21 @@ export const navbarItemDef = reactive({
text: i18n.ts.default,
active: ui === 'default' || ui === null,
action: () => {
localStorage.setItem('ui', 'default');
miLocalStorage.setItem('ui', 'default');
unisonReload();
},
}, {
text: i18n.ts.deck,
active: ui === 'deck',
action: () => {
localStorage.setItem('ui', 'deck');
miLocalStorage.setItem('ui', 'deck');
unisonReload();
},
}, {
text: i18n.ts.classic,
active: ui === 'classic',
action: () => {
localStorage.setItem('ui', 'classic');
miLocalStorage.setItem('ui', 'classic');
unisonReload();
},
}], ev.currentTarget ?? ev.target);

3
packages/frontend/src/pages/_error_.vue
View File

@ -26,6 +26,7 @@ import * as os from '@/os';
import { unisonReload } from '@/scripts/unison-reload';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
import { miLocalStorage } from '@/local-storage';
const props = withDefaults(defineProps<{
error?: Error;
@ -42,7 +43,7 @@ os.api('meta', {
loaded = true;
serverIsDead = false;
meta = res;
localStorage.setItem('v', res.version);
miLocalStorage.setItem('v', res.version);
}, () => {
loaded = true;
serverIsDead = true;

11
packages/frontend/src/pages/messaging/messaging-room.form.vue
View File

@ -40,6 +40,7 @@ import { defaultStore } from '@/store';
import { i18n } from '@/i18n';
//import { Autocomplete } from '@/scripts/autocomplete';
import { uploadFile } from '@/scripts/upload';
import { miLocalStorage } from '@/local-storage';
const props = defineProps<{
user?: Misskey.entities.UserDetailed | null;
@ -188,7 +189,7 @@ function clear() {
}
function saveDraft() {
const drafts = JSON.parse(localStorage.getItem('message_drafts') || '{}');
const drafts = JSON.parse(miLocalStorage.getItem('message_drafts') || '{}');
drafts[draftKey] = {
updatedAt: new Date(),
@ -199,15 +200,15 @@ function saveDraft() {
},
};
localStorage.setItem('message_drafts', JSON.stringify(drafts));
miLocalStorage.setItem('message_drafts', JSON.stringify(drafts));
}
function deleteDraft() {
const drafts = JSON.parse(localStorage.getItem('message_drafts') || '{}');
const drafts = JSON.parse(miLocalStorage.getItem('message_drafts') || '{}');
delete drafts[draftKey];
localStorage.setItem('message_drafts', JSON.stringify(drafts));
miLocalStorage.setItem('message_drafts', JSON.stringify(drafts));
}
async function insertEmoji(ev: MouseEvent) {
@ -222,7 +223,7 @@ onMounted(() => {
//new Autocomplete(textEl, this, { model: 'text' });
// 書きかけの投稿を復元
const draft = JSON.parse(localStorage.getItem('message_drafts') || '{}')[draftKey];
const draft = JSON.parse(miLocalStorage.getItem('message_drafts') || '{}')[draftKey];
if (draft) {
text = draft.data.text;
file = draft.data.file;

5
packages/frontend/src/pages/scratchpad.vue
View File

@ -46,6 +46,7 @@ import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
import { AsUiComponent, AsUiRoot, patch, registerAsUiLib, render } from '@/scripts/aiscript/ui';
import MkAsUi from '@/components/MkAsUi.vue';
import { miLocalStorage } from '@/local-storage';
const parser = new Parser();
let aiscript: Interpreter;
@ -55,13 +56,13 @@ const root = ref<AsUiRoot>();
let components: Ref<AsUiComponent>[] = [];
let uiKey = $ref(0);
const saved = localStorage.getItem('scratchpad');
const saved = miLocalStorage.getItem('scratchpad');
if (saved) {
code.value = saved;
}
watch(code, () => {
localStorage.setItem('scratchpad', code.value);
miLocalStorage.setItem('scratchpad', code.value);
});
async function run() {

5
packages/frontend/src/pages/settings/custom-css.vue
View File

@ -16,11 +16,12 @@ import * as os from '@/os';
import { unisonReload } from '@/scripts/unison-reload';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
import { miLocalStorage } from '@/local-storage';
const localCustomCss = ref(localStorage.getItem('customCss') ?? '');
const localCustomCss = ref(miLocalStorage.getItem('customCss') ?? '');
async function apply() {
localStorage.setItem('customCss', localCustomCss.value);
miLocalStorage.setItem('customCss', localCustomCss.value);
const { canceled } = await os.confirm({
type: 'info',

19
packages/frontend/src/pages/settings/general.vue
View File

@ -120,10 +120,11 @@ import * as os from '@/os';
import { unisonReload } from '@/scripts/unison-reload';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
import { miLocalStorage } from '@/local-storage';
const lang = ref(localStorage.getItem('lang'));
const fontSize = ref(localStorage.getItem('fontSize'));
const useSystemFont = ref(localStorage.getItem('useSystemFont') != null);
const lang = ref(miLocalStorage.getItem('lang'));
const fontSize = ref(miLocalStorage.getItem('fontSize'));
const useSystemFont = ref(miLocalStorage.getItem('useSystemFont') != null);
async function reloadAsk() {
const { canceled } = await os.confirm({
@ -157,23 +158,23 @@ const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars'));
const aiChanMode = computed(defaultStore.makeGetterSetter('aiChanMode'));
watch(lang, () => {
localStorage.setItem('lang', lang.value as string);
localStorage.removeItem('locale');
miLocalStorage.setItem('lang', lang.value as string);
miLocalStorage.removeItem('locale');
});
watch(fontSize, () => {
if (fontSize.value == null) {
localStorage.removeItem('fontSize');
miLocalStorage.removeItem('fontSize');
} else {
localStorage.setItem('fontSize', fontSize.value);
miLocalStorage.setItem('fontSize', fontSize.value);
}
});
watch(useSystemFont, () => {
if (useSystemFont.value) {
localStorage.setItem('useSystemFont', 't');
miLocalStorage.setItem('useSystemFont', 't');
} else {
localStorage.removeItem('useSystemFont');
miLocalStorage.removeItem('useSystemFont');
}
});

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

@ -33,6 +33,7 @@ import { instance } from '@/instance';
import { useRouter } from '@/router';
import { definePageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
import * as os from '@/os';
import { miLocalStorage } from '@/local-storage';
const indexInfo = {
title: i18n.ts.settings,
@ -180,8 +181,8 @@ const menuDef = computed(() => [{
icon: 'ti ti-trash',
text: i18n.ts.clearCache,
action: () => {
localStorage.removeItem('locale');
localStorage.removeItem('theme');
miLocalStorage.removeItem('locale');
miLocalStorage.removeItem('theme');
unisonReload();
},
}, {

19
packages/frontend/src/pages/settings/preferences-backups.vue
View File

@ -45,6 +45,7 @@ import { $i } from '@/account';
import { i18n } from '@/i18n';
import { version, host } from '@/config';
import { definePageMetadata } from '@/scripts/page-metadata';
import { miLocalStorage } from '@/local-storage';
const { t, ts } = i18n;
useCssModule();
@ -170,9 +171,9 @@ function getSettings(): Profile['settings'] {
return {
hot,
cold,
fontSize: localStorage.getItem('fontSize'),
useSystemFont: localStorage.getItem('useSystemFont') as 't' | null,
wallpaper: localStorage.getItem('wallpaper'),
fontSize: miLocalStorage.getItem('fontSize'),
useSystemFont: miLocalStorage.getItem('useSystemFont') as 't' | null,
wallpaper: miLocalStorage.getItem('wallpaper'),
};
}
@ -279,23 +280,23 @@ async function applyProfile(id: string): Promise<void> {
// fontSize
if (settings.fontSize) {
localStorage.setItem('fontSize', settings.fontSize);
miLocalStorage.setItem('fontSize', settings.fontSize);
} else {
localStorage.removeItem('fontSize');
miLocalStorage.removeItem('fontSize');
}
// useSystemFont
if (settings.useSystemFont) {
localStorage.setItem('useSystemFont', settings.useSystemFont);
miLocalStorage.setItem('useSystemFont', settings.useSystemFont);
} else {
localStorage.removeItem('useSystemFont');
miLocalStorage.removeItem('useSystemFont');
}
// wallpaper
if (settings.wallpaper != null) {
localStorage.setItem('wallpaper', settings.wallpaper);
miLocalStorage.setItem('wallpaper', settings.wallpaper);
} else {
localStorage.removeItem('wallpaper');
miLocalStorage.removeItem('wallpaper');
}
const { canceled: cancel2 } = await os.confirm({

7
packages/frontend/src/pages/settings/theme.vue
View File

@ -82,6 +82,7 @@ import { instance } from '@/instance';
import { uniqueBy } from '@/scripts/array';
import { fetchThemes, getThemes } from '@/theme-store';
import { definePageMetadata } from '@/scripts/page-metadata';
import { miLocalStorage } from '@/local-storage';
const installedThemes = ref(getThemes());
const builtinThemes = getBuiltinThemesRef();
@ -120,7 +121,7 @@ const lightThemeId = computed({
});
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
const syncDeviceDarkMode = computed(ColdDeviceStorage.makeGetterSetter('syncDeviceDarkMode'));
const wallpaper = ref(localStorage.getItem('wallpaper'));
const wallpaper = ref(miLocalStorage.getItem('wallpaper'));
const themesCount = installedThemes.value.length;
watch(syncDeviceDarkMode, () => {
@ -131,9 +132,9 @@ watch(syncDeviceDarkMode, () => {
watch(wallpaper, () => {
if (wallpaper.value == null) {
localStorage.removeItem('wallpaper');
miLocalStorage.removeItem('wallpaper');
} else {
localStorage.setItem('wallpaper', wallpaper.value);
miLocalStorage.setItem('wallpaper', wallpaper.value);
}
location.reload();
});

5
packages/frontend/src/scripts/aiscript/api.ts
View File

@ -1,6 +1,7 @@
import { utils, values } from '@syuilo/aiscript';
import * as os from '@/os';
import { $i } from '@/account';
import { miLocalStorage } from '@/local-storage';
export function createAiScriptEnv(opts) {
let apiRequests = 0;
@ -32,12 +33,12 @@ export function createAiScriptEnv(opts) {
}),
'Mk:save': values.FN_NATIVE(([key, value]) => {
utils.assertString(key);
localStorage.setItem('aiscript:' + opts.storageKey + ':' + key.value, JSON.stringify(utils.valToJs(value)));
miLocalStorage.setItem(`aiscript:${opts.storageKey}:${key.value}`, JSON.stringify(utils.valToJs(value)));
return values.NULL;
}),
'Mk:load': values.FN_NATIVE(([key]) => {
utils.assertString(key);
return utils.jsToVal(JSON.parse(localStorage.getItem('aiscript:' + opts.storageKey + ':' + key.value)));
return utils.jsToVal(JSON.parse(miLocalStorage.getItem(`aiscript:${opts.storageKey}:${key.value}`)));
}),
};
}

3
packages/frontend/src/scripts/get-note-menu.ts
View File

@ -9,6 +9,7 @@ import copyToClipboard from '@/scripts/copy-to-clipboard';
import { url } from '@/config';
import { noteActions } from '@/store';
import { notePage } from '@/filters/note';
import { miLocalStorage } from '@/local-storage';
export function getNoteMenu(props: {
note: misskey.entities.Note;
@ -181,7 +182,7 @@ export function getNoteMenu(props: {
props.translating.value = true;
const res = await os.api('notes/translate', {
noteId: appearNote.id,
targetLang: localStorage.getItem('lang') || navigator.language,
targetLang: miLocalStorage.getItem('lang') || navigator.language,
});
props.translating.value = false;
props.translation.value = res;

6
packages/frontend/src/scripts/idb-proxy.ts
View File

@ -22,15 +22,15 @@ if (idbAvailable) {
export async function get(key: string) {
if (idbAvailable) return iget(key);
return JSON.parse(localStorage.getItem(fallbackName(key)));
return JSON.parse(window.localStorage.getItem(fallbackName(key)));
}
export async function set(key: string, val: any) {
if (idbAvailable) return iset(key, val);
return localStorage.setItem(fallbackName(key), JSON.stringify(val));
return window.localStorage.setItem(fallbackName(key), JSON.stringify(val));
}
export async function del(key: string) {
if (idbAvailable) return idel(key);
return localStorage.removeItem(fallbackName(key));
return window.localStorage.removeItem(fallbackName(key));
}

5
packages/frontend/src/scripts/theme.ts
View File

@ -14,6 +14,7 @@ export type Theme = {
import lightTheme from '@/themes/_light.json5';
import darkTheme from '@/themes/_dark.json5';
import { deepClone } from './clone';
import { miLocalStorage } from '@/local-storage';
export const themeProps = Object.keys(lightTheme.props).filter(key => !key.startsWith('X'));
@ -84,8 +85,8 @@ export function applyTheme(theme: Theme, persist = true) {
document.documentElement.style.setProperty('color-schema', colorSchema);
if (persist) {
localStorage.setItem('theme', JSON.stringify(props));
localStorage.setItem('colorSchema', colorSchema);
miLocalStorage.setItem('theme', JSON.stringify(props));
miLocalStorage.setItem('colorSchema', colorSchema);
}
// 色計算など再度行えるようにクライアント全体に通知

17
packages/frontend/src/store.ts
View File

@ -86,6 +86,14 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'account',
default: [] as string[],
},
latestDonateDialogShowAt: {
where: 'account',
default: null,
},
neverShowDonateDialog: {
where: 'account',
default: false,
},
menu: {
where: 'deviceAccount',
@ -274,7 +282,7 @@ export const defaultStore = markRaw(new Storage('base', {
// TODO: 他のタブと永続化されたstateを同期
const PREFIX = 'miux:';
const PREFIX = 'miux:' as const;
type Plugin = {
id: string;
@ -296,6 +304,7 @@ interface Watcher {
import lightTheme from '@/themes/l-light.json5';
import darkTheme from '@/themes/d-green-lime.json5';
import { Note, UserDetailed } from 'misskey-js/built/entities';
import { miLocalStorage } from './local-storage';
export class ColdDeviceStorage {
public static default = {
@ -320,7 +329,7 @@ export class ColdDeviceStorage {
// TODO: indexedDBにする
// ただしその際はnullチェックではなくキー存在チェックにしないとダメ
// (indexedDBはnullを保存できるため、ユーザーが意図してnullを格納した可能性がある)
const value = localStorage.getItem(PREFIX + key);
const value = miLocalStorage.getItem(`${PREFIX}${key}`);
if (value == null) {
return ColdDeviceStorage.default[key];
} else {
@ -330,14 +339,14 @@ export class ColdDeviceStorage {
public static set<T extends keyof typeof ColdDeviceStorage.default>(key: T, value: typeof ColdDeviceStorage.default[T]): void {
// 呼び出し側のバグ等で undefined が来ることがある
// undefined を文字列として localStorage に入れると参照する際の JSON.parse でコケて不具合の元になるため無視
// undefined を文字列として miLocalStorage に入れると参照する際の JSON.parse でコケて不具合の元になるため無視
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (value === undefined) {
console.error(`attempt to store undefined value for key '${key}'`);
return;
}
localStorage.setItem(PREFIX + key, JSON.stringify(value));
miLocalStorage.setItem(`${PREFIX}${key}`, JSON.stringify(value));
for (const watcher of this.watchers) {
if (watcher.key === key) watcher.callback(value);

14
packages/frontend/src/theme-store.ts
View File

@ -1,11 +1,13 @@
import { api } from '@/os';
import { $i } from '@/account';
import { Theme } from './scripts/theme';
import { miLocalStorage } from './local-storage';
const lsCacheKey = $i ? `themes:${$i.id}` : '';
const lsCacheKey = $i ? `themes:${$i.id}` as const : null;
export function getThemes(): Theme[] {
return JSON.parse(localStorage.getItem(lsCacheKey) || '[]');
if ($i == null) return [];
return JSON.parse(miLocalStorage.getItem(lsCacheKey!) || '[]');
}
export async function fetchThemes(): Promise<void> {
@ -13,7 +15,7 @@ export async function fetchThemes(): Promise<void> {
try {
const themes = await api('i/registry/get', { scope: ['client'], key: 'themes' });
localStorage.setItem(lsCacheKey, JSON.stringify(themes));
miLocalStorage.setItem(lsCacheKey!, JSON.stringify(themes));
} catch (err) {
if (err.code === 'NO_SUCH_KEY') return;
throw err;
@ -21,14 +23,16 @@ export async function fetchThemes(): Promise<void> {
}
export async function addTheme(theme: Theme): Promise<void> {
if ($i == null) return;
await fetchThemes();
const themes = getThemes().concat(theme);
await api('i/registry/set', { scope: ['client'], key: 'themes', value: themes });
localStorage.setItem(lsCacheKey, JSON.stringify(themes));
miLocalStorage.setItem(lsCacheKey!, JSON.stringify(themes));
}
export async function removeTheme(theme: Theme): Promise<void> {
if ($i == null) return;
const themes = getThemes().filter(t => t.id !== theme.id);
await api('i/registry/set', { scope: ['client'], key: 'themes', value: themes });
localStorage.setItem(lsCacheKey, JSON.stringify(themes));
miLocalStorage.setItem(lsCacheKey!, JSON.stringify(themes));
}

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

@ -51,6 +51,7 @@ import { mainRouter } from '@/router';
import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
import { defaultStore } from '@/store';
import { i18n } from '@/i18n';
import { miLocalStorage } from '@/local-storage';
const XHeaderMenu = defineAsyncComponent(() => import('./classic.header.vue'));
const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
@ -62,7 +63,7 @@ let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
let widgetsShowing = $ref(false);
let fullView = $ref(false);
let globalHeaderHeight = $ref(0);
const wallpaper = localStorage.getItem('wallpaper') != null;
const wallpaper = miLocalStorage.getItem('wallpaper') != null;
const showMenuOnTop = $computed(() => defaultStore.state.menuDisplay === 'top');
let live2d = $shallowRef<HTMLIFrameElement>();
let widgetsLeft = $ref();
@ -123,7 +124,7 @@ function onAiClick(ev) {
}
if (window.innerWidth < 1024) {
localStorage.setItem('ui', 'default');
miLocalStorage.setItem('ui', 'default');
location.reload();
}

3
packages/frontend/src/ui/universal.vue
View File

@ -71,6 +71,7 @@ import { Router } from '@/nirax';
import { mainRouter } from '@/router';
import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
import { deviceKind } from '@/scripts/device-kind';
import { miLocalStorage } from '@/local-storage';
const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
@ -170,7 +171,7 @@ function top() {
window.scroll({ top: 0, behavior: 'smooth' });
}
const wallpaper = localStorage.getItem('wallpaper') != null;
const wallpaper = miLocalStorage.getItem('wallpaper') != null;
</script>
<style lang="scss" scoped>