some fixes

6 files changed, 37 insertions, 15 deletions

diff --git a/src/client/components/global/emoji.vue b/src/client/components/global/emoji.vue
index 5a715fe09a..c072b8431b 100644
--- a/src/client/components/global/emoji.vue
+++ b/src/client/components/global/emoji.vue
@@ -1,6 +1,6 @@
 <template>
-<img v-if="customEmoji" class="mk-emoji custom" :class="{ normal, noStyle }" :src="url" :alt="alt" :title="alt"/>
-<img v-else-if="char && !useOsNativeEmojis" class="mk-emoji" :src="url" :alt="alt" :title="alt"/>
+<img v-if="customEmoji" class="mk-emoji custom" :class="{ normal, noStyle }" :src="url" :alt="alt" :title="alt" decoding="async"/>
+<img v-else-if="char && !useOsNativeEmojis" class="mk-emoji" :src="url" :alt="alt" :title="alt" decoding="async"/>
 <span v-else-if="char && useOsNativeEmojis">{{ char }}</span>
 <span v-else>{{ emoji }}</span>
 </template>
diff --git a/src/client/pages/settings/theme.vue b/src/client/pages/settings/theme.vue
index d83e243081..dd7911ce34 100644
--- a/src/client/pages/settings/theme.vue
+++ b/src/client/pages/settings/theme.vue
@@ -21,9 +21,9 @@
 
 	<FormGroup>
 		<div class="rfqxtzch _formItem _formPanel">
-			<div class="darkMode" :class="{ disabled: syncDeviceDarkMode }">
+			<div class="darkMode">
 				<div class="toggleWrapper">
-					<input type="checkbox" class="dn" id="dn" v-model="darkMode" :disabled="syncDeviceDarkMode"/>
+					<input type="checkbox" class="dn" id="dn" v-model="darkMode"/>
 					<label for="dn" class="toggle">
 						<span class="before">{{ $ts.light }}</span>
 						<span class="after">{{ $ts.dark }}</span>
@@ -99,7 +99,7 @@ export default defineComponent({
 		const lightThemes = computed(() => themes.value.filter(t => t.base == 'light' || t.kind == 'light'));
 		const darkTheme = computed(ColdDeviceStorage.makeGetterSetter('darkTheme'));
 		const lightTheme = computed(ColdDeviceStorage.makeGetterSetter('lightTheme'));
-		const darkMode = defaultStore.reactiveState.darkMode;
+		const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
 		const syncDeviceDarkMode = computed(ColdDeviceStorage.makeGetterSetter('syncDeviceDarkMode'));
 		const wallpaper = ref(localStorage.getItem('wallpaper'));
 
diff --git a/src/client/pizzax.ts b/src/client/pizzax.ts
index 02a1bf8bdc..127f543003 100644
--- a/src/client/pizzax.ts
+++ b/src/client/pizzax.ts
@@ -1,4 +1,4 @@
-import { Ref, ref, watch } from 'vue';
+import { onUnmounted, Ref, ref, watch } from 'vue';
 import { $i } from './account';
 import { api } from './os';
 
@@ -104,8 +104,16 @@ export class Storage<T extends StateDef> {
 	 * 主にvue場で設定コントロールのmodelとして使う用
 	 */
 	public makeGetterSetter<K extends keyof T>(key: K, getter?: (v: T[K]) => unknown, setter?: (v: unknown) => T[K]) {
-		// TODO: VueのcustomRef使うと良い感じになるかも
 		const valueRef = ref(this.state[key]);
+
+		const stop = watch(this.reactiveState[key], val => {
+			valueRef.value = val;
+		});
+		onUnmounted(() => {
+			stop();
+		});
+
+		// TODO: VueのcustomRef使うと良い感じになるかも
 		return {
 			get: () => {
 				if (getter) {
diff --git a/src/client/ui/deck.vue b/src/client/ui/deck.vue
index fb40871a7d..d7d4944295 100644
--- a/src/client/ui/deck.vue
+++ b/src/client/ui/deck.vue
@@ -104,10 +104,6 @@ export default defineComponent({
 			this.$refs.nav.show();
 		},
 
-		help() {
-			this.$router.push('/docs/keyboard-shortcut');
-		},
-
 		post() {
 			os.post();
 		},
diff --git a/src/client/ui/deck/column.vue b/src/client/ui/deck/column.vue
index 4e9d9426e6..2614eecf93 100644
--- a/src/client/ui/deck/column.vue
+++ b/src/client/ui/deck/column.vue
@@ -316,8 +316,15 @@ export default defineComponent({
 	}
 
 	&.paged {
-		> div {
-			background: var(--bg);
+		background: var(--bg) !important;
+		
+		> header {
+			background: transparent;
+			box-shadow: none;
+
+			> button {
+				color: var(--fg);
+			}
 		}
 	}
 
diff --git a/src/client/ui/deck/deck-store.ts b/src/client/ui/deck/deck-store.ts
index 9bdb6c20ed..3d2e1873d3 100644
--- a/src/client/ui/deck/deck-store.ts
+++ b/src/client/ui/deck/deck-store.ts
@@ -1,3 +1,4 @@
+import { i18n } from '@/i18n';
 import { markRaw } from 'vue';
 import { Storage } from '../../pizzax';
 
@@ -22,11 +23,21 @@ function copy<T>(x: T): T {
 export const deckStore = markRaw(new Storage('deck', {
 	columns: {
 		where: 'deviceAccount',
-		default: [] as Column[]
+		default: [{
+			id: 'a',
+			type: 'main',
+			name: i18n.locale._deck._columns.main,
+			width: 350,
+		}, {
+			id: 'b',
+			type: 'notifications',
+			name: i18n.locale._deck._columns.notifications,
+			width: 330,
+		}] as Column[]
 	},
 	layout: {
 		where: 'deviceAccount',
-		default: [] as Column['id'][][]
+		default: [['a'], ['b']] as Column['id'][][]
 	},
 	columnAlign: {
 		where: 'deviceAccount',