From 654f31bc833b459cc3e519e138380ac8d0581833 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Wed, 1 Feb 2023 10:45:32 -0800
Subject: [PATCH] fix: show mfm cheat sheet as popup instead of new window

---
 .../src/components/MkCheatSheetDialog.vue     | 80 +++++++++++++++++++
 packages/client/src/components/MkPostForm.vue |  4 +-
 packages/client/src/components/MkUpdated.vue  |  5 +-
 3 files changed, 86 insertions(+), 3 deletions(-)
 create mode 100644 packages/client/src/components/MkCheatSheetDialog.vue

diff --git a/packages/client/src/components/MkCheatSheetDialog.vue b/packages/client/src/components/MkCheatSheetDialog.vue
new file mode 100644
index 0000000000..35be9d3367
--- /dev/null
+++ b/packages/client/src/components/MkCheatSheetDialog.vue
@@ -0,0 +1,80 @@
+<template>
+<XModalWindow
+	ref="dialog"
+	:width="600"
+	@close="dialog?.close()"
+	@closed="$emit('closed')"
+>
+	<template #header>{{ i18n.ts._tutorial.title }}</template>
+
+	<div class="_monolithic_">
+		<div class="_section">
+			<XCheatSheet/>
+		</div>
+	</div>
+</XModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import XCheatSheet from '@/pages/mfm-cheat-sheet.vue';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+import { $i } from '@/account';
+import { instance } from '@/instance';
+
+const isLocalTimelineAvailable =
+	!instance.disableLocalTimeline ||
+	($i != null && ($i.isModerator || $i.isAdmin));
+const isRecommendedTimelineAvailable =
+	!instance.disableRecommendedTimeline ||
+	($i != null && ($i.isModerator || $i.isAdmin));
+const isGlobalTimelineAvailable =
+	!instance.disableGlobalTimeline ||
+	($i != null && ($i.isModerator || $i.isAdmin));
+
+let timelines = ['home'];
+
+if (isLocalTimelineAvailable) {
+	timelines.push('local');
+}
+if (isRecommendedTimelineAvailable) {
+	timelines.push('recommended');
+}
+if (isLocalTimelineAvailable) {
+	timelines.push('social');
+}
+if (isGlobalTimelineAvailable) {
+	timelines.push('global');
+}
+
+const emit = defineEmits<{
+	(ev: 'done'): void;
+	(ev: 'closed'): void;
+}>();
+
+const dialog = $ref<InstanceType<typeof XModalWindow>>();
+
+const tutorial = computed({
+	get() { return defaultStore.reactiveState.tutorial.value || 0; },
+	set(value) { defaultStore.set('tutorial', value); },
+});
+
+function close(res) {
+	tutorial.value = -1;
+	dialog.close();
+}
+</script>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.2s ease-in-out;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+
+</style>
+
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index ace079b250..34418f6fc3 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -91,7 +91,7 @@ import { instance } from '@/instance';
 import { $i, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account';
 import { uploadFile } from '@/scripts/upload';
 import { deepClone } from '@/scripts/clone';
-import MfmCheatSheet from '@/pages/mfm-cheat-sheet.vue';
+import XCheatSheet from '@/components/MkCheatSheetDialog.vue';
 
 const modal = inject('modal');
 
@@ -627,7 +627,7 @@ async function insertEmoji(ev: MouseEvent) {
 }
 
 async function openCheatSheet(ev: MouseEvent) {
-  window.open(url + '/mfm-cheat-sheet', '_blank');
+  os.popup(XCheatSheet, {}, {}, 'closed');
 }
 
 function showActions(ev) {
diff --git a/packages/client/src/components/MkUpdated.vue b/packages/client/src/components/MkUpdated.vue
index 83e3d7ddcb..9926103817 100644
--- a/packages/client/src/components/MkUpdated.vue
+++ b/packages/client/src/components/MkUpdated.vue
@@ -28,9 +28,12 @@ let newRelease = false;
 let data;
 os.api('release').then(res => {
 	data = res;
-	console.log(data);
 	newRelease = (version === data?.version);
 });
+console.log(`Version: ${version}`)
+console.log(`Data version: ${data.version}`)
+console.log(newRelease)
+console.log(data);
 
 </script>