From 1d9a4f68f472def57c259290cfacb7b7d238e490 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <github-bf215181b5140522137b3d4f6b73544a@desu.email>
Date: Thu, 19 May 2022 13:28:08 +0200
Subject: Refactor pleaseLogin to show a sign-in dialog (#8630)

* refactor(client): refactor pleaseLogin to show a sign-in dialog

* Apply review suggestions from @Johann150

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 packages/client/src/scripts/please-login.ts | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

(limited to 'packages/client/src/scripts')

diff --git a/packages/client/src/scripts/please-login.ts b/packages/client/src/scripts/please-login.ts
index aeaafa124b..e21a6d2ed3 100644
--- a/packages/client/src/scripts/please-login.ts
+++ b/packages/client/src/scripts/please-login.ts
@@ -1,14 +1,21 @@
+import { defineAsyncComponent } from 'vue';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
-import { alert } from '@/os';
+import { popup } from '@/os';
 
-export function pleaseLogin() {
+export function pleaseLogin(path?: string) {
 	if ($i) return;
 
-	alert({
-		title: i18n.ts.signinRequired,
-		text: null
-	});
+	popup(defineAsyncComponent(() => import('@/components/signin-dialog.vue')), {
+		autoSet: true,
+		message: i18n.ts.signinRequired
+	}, {
+		cancelled: () => {
+			if (path) {
+				window.location.href = path;
+			}
+		},
+	}, 'closed');
 
 	throw new Error('signin required');
 }
-- 
cgit v1.2.3-freya


From 4a50c49211654758d391b39d78fe4d171afc1f19 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 28 May 2022 21:59:23 +0900
Subject: Fix theme import (#8749)

---
 packages/client/@types/theme.d.ts                  |  8 ++--
 .../client/src/pages/settings/theme.manage.vue     | 11 ++---
 packages/client/src/pages/settings/theme.vue       |  5 ++-
 packages/client/src/pages/theme-editor.vue         |  4 +-
 packages/client/src/scripts/theme.ts               | 51 +++++++++++++---------
 5 files changed, 47 insertions(+), 32 deletions(-)

(limited to 'packages/client/src/scripts')

diff --git a/packages/client/@types/theme.d.ts b/packages/client/@types/theme.d.ts
index b8b906b82e..67f724a9aa 100644
--- a/packages/client/@types/theme.d.ts
+++ b/packages/client/@types/theme.d.ts
@@ -1,5 +1,7 @@
-import { Theme } from '../src/scripts/theme';
-
 declare module '@/themes/*.json5' {
-	export = Theme;
+	import { Theme } from "@/scripts/theme";
+
+	const theme: Theme;
+
+	export default theme;
 }
diff --git a/packages/client/src/pages/settings/theme.manage.vue b/packages/client/src/pages/settings/theme.manage.vue
index 7da439f9c0..94b2d24455 100644
--- a/packages/client/src/pages/settings/theme.manage.vue
+++ b/packages/client/src/pages/settings/theme.manage.vue
@@ -10,13 +10,13 @@
 		</optgroup>
 	</FormSelect>
 	<template v-if="selectedTheme">
-		<FormInput readonly :modelValue="selectedTheme.author" class="_formBlock">
+		<FormInput readonly :model-value="selectedTheme.author" class="_formBlock">
 			<template #label>{{ i18n.ts.author }}</template>
 		</FormInput>
-		<FormTextarea v-if="selectedTheme.desc" readonly :modelValue="selectedTheme.desc" class="_formBlock">
+		<FormTextarea v-if="selectedTheme.desc" readonly :model-value="selectedTheme.desc" class="_formBlock">
 			<template #label>{{ i18n.ts._theme.description }}</template>
 		</FormTextarea>
-		<FormTextarea readonly tall :modelValue="selectedThemeCode" class="_formBlock">
+		<FormTextarea readonly tall :model-value="selectedThemeCode" class="_formBlock">
 			<template #label>{{ i18n.ts._theme.code }}</template>
 			<template #caption><button class="_textButton" @click="copyThemeCode()">{{ i18n.ts.copy }}</button></template>
 		</FormTextarea>
@@ -32,7 +32,7 @@ import FormTextarea from '@/components/form/textarea.vue';
 import FormSelect from '@/components/form/select.vue';
 import FormInput from '@/components/form/input.vue';
 import FormButton from '@/components/ui/button.vue';
-import { Theme, builtinThemes } from '@/scripts/theme';
+import { Theme, getBuiltinThemesRef } from '@/scripts/theme';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import * as os from '@/os';
 import { getThemes, removeTheme } from '@/theme-store';
@@ -40,9 +40,10 @@ import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
 
 const installedThemes = ref(getThemes());
+const builtinThemes = getBuiltinThemesRef();
 const selectedThemeId = ref(null);
 
-const themes = computed(() => builtinThemes.concat(installedThemes.value));
+const themes = computed(() => [ ...installedThemes.value, ...builtinThemes.value ]);
 
 const selectedTheme = computed(() => {
 	if (selectedThemeId.value == null) return null;
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 64b384bdcd..b32aa237fe 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -93,7 +93,7 @@ import FormSelect from '@/components/form/select.vue';
 import FormSection from '@/components/form/section.vue';
 import FormLink from '@/components/form/link.vue';
 import FormButton from '@/components/ui/button.vue';
-import { builtinThemes } from '@/scripts/theme';
+import { getBuiltinThemesRef } from '@/scripts/theme';
 import { selectFile } from '@/scripts/select-file';
 import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
 import { ColdDeviceStorage } from '@/store';
@@ -105,12 +105,13 @@ import { fetchThemes, getThemes } from '@/theme-store';
 import * as symbols from '@/symbols';
 
 const installedThemes = ref(getThemes());
+const builtinThemes = getBuiltinThemesRef();
 const instanceThemes = [];
 
 if (instance.defaultLightTheme != null) instanceThemes.push(JSON5.parse(instance.defaultLightTheme));
 if (instance.defaultDarkTheme != null) instanceThemes.push(JSON5.parse(instance.defaultDarkTheme));
 
-const themes = computed(() => uniqueBy(instanceThemes.concat(builtinThemes.concat(installedThemes.value)), theme => theme.id));
+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');
diff --git a/packages/client/src/pages/theme-editor.vue b/packages/client/src/pages/theme-editor.vue
index 4250673d91..2ee530597c 100644
--- a/packages/client/src/pages/theme-editor.vue
+++ b/packages/client/src/pages/theme-editor.vue
@@ -75,7 +75,9 @@ import FormButton from '@/components/ui/button.vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormFolder from '@/components/form/folder.vue';
 
-import { Theme, applyTheme, darkTheme, lightTheme } from '@/scripts/theme';
+import { Theme, applyTheme } from '@/scripts/theme';
+import lightTheme from '@/themes/_light.json5';
+import darkTheme from '@/themes/_dark.json5';
 import { host } from '@/config';
 import * as os from '@/os';
 import { ColdDeviceStorage, defaultStore } from '@/store';
diff --git a/packages/client/src/scripts/theme.ts b/packages/client/src/scripts/theme.ts
index b61b1684a8..e2b272405a 100644
--- a/packages/client/src/scripts/theme.ts
+++ b/packages/client/src/scripts/theme.ts
@@ -1,3 +1,4 @@
+import { ref } from 'vue';
 import { globalEvents } from '@/events';
 import tinycolor from 'tinycolor2';
 
@@ -10,30 +11,38 @@ export type Theme = {
 	props: Record<string, string>;
 };
 
-export const lightTheme: Theme = await import('@/themes/_light.json5');
-export const darkTheme: Theme = await import('@/themes/_dark.json5');
+import lightTheme from '@/themes/_light.json5';
+import darkTheme from '@/themes/_dark.json5';
 
 export const themeProps = Object.keys(lightTheme.props).filter(key => !key.startsWith('X'));
 
-export const builtinThemes = [
-	await import('@/themes/l-light.json5'),
-	await import('@/themes/l-coffee.json5'),
-	await import('@/themes/l-apricot.json5'),
-	await import('@/themes/l-rainy.json5'),
-	await import('@/themes/l-vivid.json5'),
-	await import('@/themes/l-cherry.json5'),
-	await import('@/themes/l-sushi.json5'),
-
-	await import('@/themes/d-dark.json5'),
-	await import('@/themes/d-persimmon.json5'),
-	await import('@/themes/d-astro.json5'),
-	await import('@/themes/d-future.json5'),
-	await import('@/themes/d-botanical.json5'),
-	await import('@/themes/d-cherry.json5'),
-	await import('@/themes/d-ice.json5'),
-	await import('@/themes/d-pumpkin.json5'),
-	await import('@/themes/d-black.json5'),
-] as Theme[];
+export const getBuiltinThemes = () => Promise.all(
+	[
+		'l-light',
+		'l-coffee',
+		'l-apricot',
+		'l-rainy',
+		'l-vivid',
+		'l-cherry',
+		'l-sushi',
+
+		'd-dark',
+		'd-persimmon',
+		'd-astro',
+		'd-future',
+		'd-botanical',
+		'd-cherry',
+		'd-ice',
+		'd-pumpkin',
+		'd-black',
+	].map(name => import(`../themes/${name}.json5`).then(({ default: _default }): Theme => _default))
+);
+
+export const getBuiltinThemesRef = () => {
+	const builtinThemes = ref<Theme[]>([]);
+	getBuiltinThemes().then(themes => builtinThemes.value = themes);
+	return builtinThemes;
+}
 
 let timeout = null;
 
-- 
cgit v1.2.3-freya


From d2784030ec898e0b4e391f2eb840646f72cd7d6b Mon Sep 17 00:00:00 2001
From: futchitwo <74236683+futchitwo@users.noreply.github.com>
Date: Sun, 29 May 2022 19:21:36 +0900
Subject: fix(client): fix popout url (#8494)

---
 packages/client/src/pages/theme-editor.vue | 2 +-
 packages/client/src/scripts/popout.ts      | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

(limited to 'packages/client/src/scripts')

diff --git a/packages/client/src/pages/theme-editor.vue b/packages/client/src/pages/theme-editor.vue
index 2ee530597c..b7b537cead 100644
--- a/packages/client/src/pages/theme-editor.vue
+++ b/packages/client/src/pages/theme-editor.vue
@@ -126,7 +126,7 @@ let changed = $ref(false);
 useLeaveGuard($$(changed));
 
 function showPreview() {
-	os.pageWindow('preview');
+	os.pageWindow('/preview');
 }
 
 function setBgColor(color: typeof bgColors[number]) {
diff --git a/packages/client/src/scripts/popout.ts b/packages/client/src/scripts/popout.ts
index b8286a2a76..580031d0a3 100644
--- a/packages/client/src/scripts/popout.ts
+++ b/packages/client/src/scripts/popout.ts
@@ -1,8 +1,9 @@
 import * as config from '@/config';
+import { appendQuery } from './url';
 
 export function popout(path: string, w?: HTMLElement) {
-	let url = path.startsWith('http://') || path.startsWith('https://') ? path : config.url + "/" + path;
-	url += '?zen';
+	let url = path.startsWith('http://') || path.startsWith('https://') ? path : config.url + path;
+	url = appendQuery(url, 'zen');
 	if (w) {
 		const position = w.getBoundingClientRect();
 		const width = parseInt(getComputedStyle(w, '').width, 10);
-- 
cgit v1.2.3-freya