From fa3dee922282d1db0556be4154750fb811dc345d Mon Sep 17 00:00:00 2001
From: sim1222 <kousuke11236124@gmail.com>
Date: Fri, 17 Jun 2022 01:46:10 +0900
Subject: [PATCH] =?UTF-8?q?=E3=81=84=E3=81=A3=E3=81=B1=E3=81=84=E5=A4=89?=
 =?UTF-8?q?=E3=81=88=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                             |   4 +
 locales/ja-NY.yml                             |   4 +
 packages/client/src/components/ui/window.vue  |   2 +
 .../client/src/pages/timeline.tutorial.vue    | 119 +++++++++++++++++-
 packages/client/src/style.scss                |   2 -
 5 files changed, 123 insertions(+), 8 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index c99429cf4..22a6ed826 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1153,6 +1153,10 @@ _tutorial:
   step7_1: "これで、Misskeyの基本的な使い方の説明は終わりました。お疲れ様でした。"
   step7_2: "もっとMisskeyについて知りたいときは、{help}を見てみてください。"
   step7_3: "では、Misskeyをお楽しみください🚀"
+  step8_1: "さいごに"
+  step8_2: "このインスタンスではガラス風デザインを標準で採用しています。"
+  step8_3: "端末によってはパフォーマンスが低下する場合があります。"
+  step8_4: "その場合は設定よりブラーを使用しないように設定＋テーマをNoGlassにしてください。"
 
 _2fa:
   alreadyRegistered: "既に設定は完了しています。"
diff --git a/locales/ja-NY.yml b/locales/ja-NY.yml
index 41be997b4..fa1762624 100644
--- a/locales/ja-NY.yml
+++ b/locales/ja-NY.yml
@@ -1179,6 +1179,10 @@ _tutorial:
   step7_1: "これで、Misskeyの基本的にゃ使い方の説明は終わりました。お疲れ様でした。"
   step7_2: "もっとMisskeyについて知りたいときは、{help}を見てみてください。"
   step7_3: "では、Misskeyをお楽しみください🚀"
+  step8_1: "さいごに"
+  step8_2: "このインスタンスではガラス風デザインを標準で採用しています。"
+  step8_3: "端末によってはパフォーマンスが低下する場合があります。"
+  step8_4: "その場合は設定よりブラーを使用しないように設定＋テーマをNoGlassにしてください。"
 
 _2fa:
   alreadyRegistered: "既に設定は完了しているにゃ。"
diff --git a/packages/client/src/components/ui/window.vue b/packages/client/src/components/ui/window.vue
index 2066cf579..879a0922c 100644
--- a/packages/client/src/components/ui/window.vue
+++ b/packages/client/src/components/ui/window.vue
@@ -379,6 +379,8 @@ export default defineComponent({
 	position: fixed;
 	top: 0;
 	left: 0;
+	backdrop-filter: var(--blur, blur(8px));
+	-webkit-backdrop-filter: var(--blur, blur(8px));
 
 	> .body {
 		overflow: hidden;
diff --git a/packages/client/src/pages/timeline.tutorial.vue b/packages/client/src/pages/timeline.tutorial.vue
index 432d28c60..5147083c4 100644
--- a/packages/client/src/pages/timeline.tutorial.vue
+++ b/packages/client/src/pages/timeline.tutorial.vue
@@ -48,32 +48,139 @@
 		</I18n>
 		<div>{{ $ts._tutorial.step7_3 }}</div>
 	</div>
-
+	<div v-else-if="tutorial === 7" class="_content">
+		<div>{{ $ts._tutorial.step8_1 }}</div>
+		<div>{{ $ts._tutorial.step8_2 }}</div>
+		<div>{{ $ts._tutorial.step8_3 }}</div>
+		<div>{{ $ts._tutorial.step8_4 }}</div>
+		<FormSwitch v-model="useBlurEffect" class="_formBlock">{{ i18n.ts.useBlurEffect }}</FormSwitch>
+		<FormSwitch v-model="useBlurEffectForModal" class="_formBlock">{{ i18n.ts.useBlurEffectForModal }}</FormSwitch>
+		<template v-if="darkMode">
+			<FormSelect v-model="darkThemeId" class="_formBlock">
+				<template #label>{{ $ts.themeForDarkMode }}</template>
+				<template #prefix><i class="fas fa-moon"></i></template>
+				<optgroup :label="$ts.darkThemes">
+					<option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
+				</optgroup>
+				<optgroup :label="$ts.lightThemes">
+					<option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
+				</optgroup>
+			</FormSelect>
+			<FormSelect v-model="lightThemeId" class="_formBlock">
+				<template #label>{{ $ts.themeForLightMode }}</template>
+				<template #prefix><i class="fas fa-sun"></i></template>
+				<optgroup :label="$ts.lightThemes">
+					<option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
+				</optgroup>
+				<optgroup :label="$ts.darkThemes">
+					<option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
+				</optgroup>
+			</FormSelect>
+		</template>
+		<template v-else>
+			<FormSelect v-model="lightThemeId" class="_formBlock">
+				<template #label>{{ $ts.themeForLightMode }}</template>
+				<template #prefix><i class="fas fa-sun"></i></template>
+				<optgroup :label="$ts.lightThemes">
+					<option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
+				</optgroup>
+				<optgroup :label="$ts.darkThemes">
+					<option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
+				</optgroup>
+			</FormSelect>
+			<FormSelect v-model="darkThemeId" class="_formBlock">
+				<template #label>{{ $ts.themeForDarkMode }}</template>
+				<template #prefix><i class="fas fa-moon"></i></template>
+				<optgroup :label="$ts.darkThemes">
+					<option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
+				</optgroup>
+				<optgroup :label="$ts.lightThemes">
+					<option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
+				</optgroup>
+			</FormSelect>
+		</template>
+	</div>
 	<div class="_footer navigation">
 		<div class="step">
 			<button class="arrow _button" :disabled="tutorial === 0" @click="tutorial--">
 				<i class="fas fa-chevron-left"></i>
 			</button>
-			<span>{{ tutorial + 1 }} / 7</span>
-			<button class="arrow _button" :disabled="tutorial === 6" @click="tutorial++">
+			<span>{{ tutorial + 1 }} / 8</span>
+			<button class="arrow _button" :disabled="tutorial === 7" @click="tutorial++">
 				<i class="fas fa-chevron-right"></i>
 			</button>
 		</div>
-		<MkButton v-if="tutorial === 6" class="ok" primary @click="tutorial = -1"><i class="fas fa-check"></i> {{ $ts.gotIt }}</MkButton>
+		<MkButton v-if="tutorial === 7" class="ok" primary @click="tutorial = -1"><i class="fas fa-check"></i> {{ $ts.gotIt }}</MkButton>
 		<MkButton v-else class="ok" primary @click="tutorial++"><i class="fas fa-check"></i> {{ $ts.next }}</MkButton>
 	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, onActivated, ref, watch } from 'vue';
 import MkButton from '@/components/ui/button.vue';
-import { defaultStore } from '@/store';
+import { defaultStore, ColdDeviceStorage } from '@/store';
+import { i18n } from '@/i18n';
+import FormSwitch from '@/components/form/switch.vue';
+import FormSelect from '@/components/form/select.vue';
+import { fetchThemes, getThemes } from '@/theme-store';
+import { getBuiltinThemesRef } from '@/scripts/theme';
+import { uniqueBy } from '@/scripts/array';
+import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
 
 const tutorial = computed({
 	get() { return defaultStore.reactiveState.tutorial.value || 0; },
 	set(value) { defaultStore.set('tutorial', value); }
 });
+
+const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal'));
+const useBlurEffect = computed(defaultStore.makeGetterSetter('useBlurEffect'));
+
+const installedThemes = ref(getThemes());
+const builtinThemes = getBuiltinThemesRef();
+const instanceThemes = [];
+
+const themes = computed(() => uniqueBy([...instanceThemes, ...builtinThemes.value, ...installedThemes.value], theme => theme.id));
+const darkThemes = computed(() => themes.value.filter(t => t.base === 'dark' || t.kind === 'dark'));
+const lightThemes = computed(() => themes.value.filter(t => t.base === 'light' || t.kind === 'light'));
+const darkTheme = ColdDeviceStorage.ref('darkTheme');
+const darkThemeId = computed({
+	get() {
+		return darkTheme.value.id;
+	},
+	set(id) {
+		ColdDeviceStorage.set('darkTheme', themes.value.find(x => x.id === id));
+	}
+});
+const lightTheme = ColdDeviceStorage.ref('lightTheme');
+const lightThemeId = computed({
+	get() {
+		return lightTheme.value.id;
+	},
+	set(id) {
+		ColdDeviceStorage.set('lightTheme', themes.value.find(x => x.id === id));
+	}
+});
+
+const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
+const syncDeviceDarkMode = computed(ColdDeviceStorage.makeGetterSetter('syncDeviceDarkMode'));
+
+watch(syncDeviceDarkMode, () => {
+	if (syncDeviceDarkMode.value) {
+		defaultStore.set('darkMode', isDeviceDarkmode());
+	}
+});
+
+onActivated(() => {
+	fetchThemes().then(() => {
+		installedThemes.value = getThemes();
+	});
+});
+
+fetchThemes().then(() => {
+	installedThemes.value = getThemes();
+});
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index ce307874e..fddb5c7d1 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -344,8 +344,6 @@ hr {
 	background: var(--panel);
 	border-radius: var(--radius);
 	contain: content;
-	backdrop-filter: var(--blur, blur(8px));
-	-webkit-backdrop-filter: var(--blur, blur(8px));
 }
 
 ._popup {