diff --git a/packages/client/src/pages/theme-editor.vue b/packages/client/src/pages/theme-editor.vue
index c4917e2270..80b8c7806c 100644
--- a/packages/client/src/pages/theme-editor.vue
+++ b/packages/client/src/pages/theme-editor.vue
@@ -2,7 +2,7 @@
<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
<div class="cwepdizn _formRoot">
<FormFolder :default-open="true" class="_formBlock">
- <template #label>{{ $ts.backgroundColor }}</template>
+ <template #label>{{ i18n.locale.backgroundColor }}</template>
<div class="cwepdizn-colors">
<div class="row">
<button v-for="color in bgColors.filter(x => x.kind === 'light')" :key="color.color" class="color _button" :class="{ active: theme.props.bg === color.color }" @click="setBgColor(color)">
@@ -18,7 +18,7 @@
</FormFolder>
<FormFolder :default-open="true" class="_formBlock">
- <template #label>{{ $ts.accentColor }}</template>
+ <template #label>{{ i18n.locale.accentColor }}</template>
<div class="cwepdizn-colors">
<div class="row">
<button v-for="color in accentColors" :key="color" class="color rounded _button" :class="{ active: theme.props.accent === color }" @click="setAccentColor(color)">
@@ -29,7 +29,7 @@
</FormFolder>
<FormFolder :default-open="true" class="_formBlock">
- <template #label>{{ $ts.textColor }}</template>
+ <template #label>{{ i18n.locale.textColor }}</template>
<div class="cwepdizn-colors">
<div class="row">
<button v-for="color in fgColors" :key="color" class="color char _button" :class="{ active: (theme.props.fg === color.forLight) || (theme.props.fg === color.forDark) }" @click="setFgColor(color)">
@@ -41,22 +41,22 @@
<FormFolder :default-open="false" class="_formBlock">
<template #icon><i class="fas fa-code"></i></template>
- <template #label>{{ $ts.editCode }}</template>
+ <template #label>{{ i18n.locale.editCode }}</template>
<div class="_formRoot">
<FormTextarea v-model="themeCode" tall class="_formBlock">
- <template #label>{{ $ts._theme.code }}</template>
+ <template #label>{{ i18n.locale._theme.code }}</template>
</FormTextarea>
- <FormButton primary class="_formBlock" @click="applyThemeCode">{{ $ts.apply }}</FormButton>
+ <FormButton primary class="_formBlock" @click="applyThemeCode">{{ i18n.locale.apply }}</FormButton>
</div>
</FormFolder>
<FormFolder :default-open="false" class="_formBlock">
- <template #label>{{ $ts.addDescription }}</template>
+ <template #label>{{ i18n.locale.addDescription }}</template>
<div class="_formRoot">
<FormTextarea v-model="description">
- <template #label>{{ $ts._theme.description }}</template>
+ <template #label>{{ i18n.locale._theme.description }}</template>
</FormTextarea>
</div>
</FormFolder>
@@ -64,8 +64,8 @@
</MkSpacer>
</template>
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { watch } from 'vue';
import { toUnicode } from 'punycode/';
import * as tinycolor from 'tinycolor2';
import { v4 as uuid} from 'uuid';
@@ -78,181 +78,147 @@ import FormFolder from '@/components/form/folder.vue';
import { Theme, applyTheme, darkTheme, lightTheme } from '@/scripts/theme';
import { host } from '@/config';
import * as os from '@/os';
-import { ColdDeviceStorage } from '@/store';
+import { ColdDeviceStorage, defaultStore } from '@/store';
import { addTheme } from '@/theme-store';
import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
+import { useLeaveGuard } from '@/scripts/use-leave-guard';
-export default defineComponent({
- components: {
- FormButton,
- FormTextarea,
- FormFolder,
- },
+const bgColors = [
+ { color: '#f5f5f5', kind: 'light', forPreview: '#f5f5f5' },
+ { color: '#f0eee9', kind: 'light', forPreview: '#f3e2b9' },
+ { color: '#e9eff0', kind: 'light', forPreview: '#bfe3e8' },
+ { color: '#f0e9ee', kind: 'light', forPreview: '#f1d1e8' },
+ { color: '#dce2e0', kind: 'light', forPreview: '#a4dccc' },
+ { color: '#e2e0dc', kind: 'light', forPreview: '#d8c7a5' },
+ { color: '#d5dbe0', kind: 'light', forPreview: '#b0cae0' },
+ { color: '#dad5d5', kind: 'light', forPreview: '#d6afaf' },
+ { color: '#2b2b2b', kind: 'dark', forPreview: '#444444' },
+ { color: '#362e29', kind: 'dark', forPreview: '#735c4d' },
+ { color: '#303629', kind: 'dark', forPreview: '#506d2f' },
+ { color: '#293436', kind: 'dark', forPreview: '#258192' },
+ { color: '#2e2936', kind: 'dark', forPreview: '#504069' },
+ { color: '#252722', kind: 'dark', forPreview: '#3c462f' },
+ { color: '#212525', kind: 'dark', forPreview: '#303e3e' },
+ { color: '#191919', kind: 'dark', forPreview: '#272727' },
+] as const;
+const accentColors = ['#e36749', '#f29924', '#98c934', '#34c9a9', '#34a1c9', '#606df7', '#8d34c9', '#e84d83'];
+const fgColors = [
+ { color: 'none', forLight: '#5f5f5f', forDark: '#dadada', forPreview: null },
+ { color: 'red', forLight: '#7f6666', forDark: '#e4d1d1', forPreview: '#ca4343' },
+ { color: 'yellow', forLight: '#736955', forDark: '#e0d5c0', forPreview: '#d49923' },
+ { color: 'green', forLight: '#586d5b', forDark: '#d1e4d4', forPreview: '#4cbd5c' },
+ { color: 'cyan', forLight: '#5d7475', forDark: '#d1e3e4', forPreview: '#2abdc3' },
+ { color: 'blue', forLight: '#676880', forDark: '#d1d2e4', forPreview: '#7275d8' },
+ { color: 'pink', forLight: '#84667d', forDark: '#e4d1e0', forPreview: '#b12390' },
+];
- async beforeRouteLeave(to, from) {
- if (this.changed && !(await this.leaveConfirm())) {
- return false;
- }
- },
+const theme = $ref<Partial<Theme>>({
+ base: 'light',
+ props: lightTheme.props,
+});
+let description = $ref<string | null>(null);
+let themeCode = $ref<string | null>(null);
+let changed = $ref(false);
- data() {
- return {
- [symbols.PAGE_INFO]: {
- title: this.$ts.themeEditor,
- icon: 'fas fa-palette',
- bg: 'var(--bg)',
- actions: [{
- asFullButton: true,
- icon: 'fas fa-eye',
- text: this.$ts.preview,
- handler: this.showPreview,
- }, {
- asFullButton: true,
- icon: 'fas fa-check',
- text: this.$ts.saveAs,
- handler: this.saveAs,
- }],
- },
- theme: {
- base: 'light',
- props: lightTheme.props
- } as Theme,
- description: null,
- themeCode: null,
- bgColors: [
- { color: '#f5f5f5', kind: 'light', forPreview: '#f5f5f5' },
- { color: '#f0eee9', kind: 'light', forPreview: '#f3e2b9' },
- { color: '#e9eff0', kind: 'light', forPreview: '#bfe3e8' },
- { color: '#f0e9ee', kind: 'light', forPreview: '#f1d1e8' },
- { color: '#dce2e0', kind: 'light', forPreview: '#a4dccc' },
- { color: '#e2e0dc', kind: 'light', forPreview: '#d8c7a5' },
- { color: '#d5dbe0', kind: 'light', forPreview: '#b0cae0' },
- { color: '#dad5d5', kind: 'light', forPreview: '#d6afaf' },
- { color: '#2b2b2b', kind: 'dark', forPreview: '#444444' },
- { color: '#362e29', kind: 'dark', forPreview: '#735c4d' },
- { color: '#303629', kind: 'dark', forPreview: '#506d2f' },
- { color: '#293436', kind: 'dark', forPreview: '#258192' },
- { color: '#2e2936', kind: 'dark', forPreview: '#504069' },
- { color: '#252722', kind: 'dark', forPreview: '#3c462f' },
- { color: '#212525', kind: 'dark', forPreview: '#303e3e' },
- { color: '#191919', kind: 'dark', forPreview: '#272727' },
- ],
- accentColors: ['#e36749', '#f29924', '#98c934', '#34c9a9', '#34a1c9', '#606df7', '#8d34c9', '#e84d83'],
- fgColors: [
- { color: 'none', forLight: '#5f5f5f', forDark: '#dadada', forPreview: null },
- { color: 'red', forLight: '#7f6666', forDark: '#e4d1d1', forPreview: '#ca4343' },
- { color: 'yellow', forLight: '#736955', forDark: '#e0d5c0', forPreview: '#d49923' },
- { color: 'green', forLight: '#586d5b', forDark: '#d1e4d4', forPreview: '#4cbd5c' },
- { color: 'cyan', forLight: '#5d7475', forDark: '#d1e3e4', forPreview: '#2abdc3' },
- { color: 'blue', forLight: '#676880', forDark: '#d1d2e4', forPreview: '#7275d8' },
- { color: 'pink', forLight: '#84667d', forDark: '#e4d1e0', forPreview: '#b12390' },
- ],
- changed: false,
- }
- },
+useLeaveGuard($$(changed));
- created() {
- this.$watch('theme', this.apply, { deep: true });
- window.addEventListener('beforeunload', this.beforeunload);
- },
+function showPreview() {
+ os.pageWindow('preview');
+}
- beforeUnmount() {
- window.removeEventListener('beforeunload', this.beforeunload);
- },
-
- methods: {
- beforeunload(e: BeforeUnloadEvent) {
- if (this.changed) {
- e.preventDefault();
- e.returnValue = '';
- }
- },
-
- async leaveConfirm(): Promise<boolean> {
- const { canceled } = await os.confirm({
- type: 'warning',
- text: this.$ts.leaveConfirm,
- });
- return !canceled;
- },
-
- showPreview() {
- os.pageWindow('preview');
- },
-
- setBgColor(color) {
- if (this.theme.base != color.kind) {
- const base = color.kind === 'dark' ? darkTheme : lightTheme;
- for (const prop of Object.keys(base.props)) {
- if (prop === 'accent') continue;
- if (prop === 'fg') continue;
- this.theme.props[prop] = base.props[prop];
- }
- }
- this.theme.base = color.kind;
- this.theme.props.bg = color.color;
-
- if (this.theme.props.fg) {
- const matchedFgColor = this.fgColors.find(x => [tinycolor(x.forLight).toRgbString(), tinycolor(x.forDark).toRgbString()].includes(tinycolor(this.theme.props.fg).toRgbString()));
- if (matchedFgColor) this.setFgColor(matchedFgColor);
- }
- },
-
- setAccentColor(color) {
- this.theme.props.accent = color;
- },
-
- setFgColor(color) {
- this.theme.props.fg = this.theme.base === 'light' ? color.forLight : color.forDark;
- },
-
- apply() {
- this.themeCode = JSON5.stringify(this.theme, null, '\t');
- applyTheme(this.theme, false);
- this.changed = true;
- },
-
- applyThemeCode() {
- let parsed;
-
- try {
- parsed = JSON5.parse(this.themeCode);
- } catch (e) {
- os.alert({
- type: 'error',
- text: this.$ts._theme.invalid
- });
- return;
- }
-
- this.theme = parsed;
- },
-
- async saveAs() {
- const { canceled, result: name } = await os.inputText({
- title: this.$ts.name,
- allowEmpty: false
- });
- if (canceled) return;
-
- this.theme.id = uuid();
- this.theme.name = name;
- this.theme.author = `@${this.$i.username}@${toUnicode(host)}`;
- if (this.description) this.theme.desc = this.description;
- addTheme(this.theme);
- applyTheme(this.theme);
- if (this.$store.state.darkMode) {
- ColdDeviceStorage.set('darkTheme', this.theme);
- } else {
- ColdDeviceStorage.set('lightTheme', this.theme);
- }
- this.changed = false;
- os.alert({
- type: 'success',
- text: this.$t('_theme.installed', { name: this.theme.name })
- });
+function setBgColor(color: typeof bgColors[number]) {
+ if (theme.base != color.kind) {
+ const base = color.kind === 'dark' ? darkTheme : lightTheme;
+ for (const prop of Object.keys(base.props)) {
+ if (prop === 'accent') continue;
+ if (prop === 'fg') continue;
+ theme.props[prop] = base.props[prop];
}
}
+ theme.base = color.kind;
+ theme.props.bg = color.color;
+
+ if (theme.props.fg) {
+ const matchedFgColor = fgColors.find(x => [tinycolor(x.forLight).toRgbString(), tinycolor(x.forDark).toRgbString()].includes(tinycolor(theme.props.fg).toRgbString()));
+ if (matchedFgColor) setFgColor(matchedFgColor);
+ }
+}
+
+function setAccentColor(color) {
+ theme.props.accent = color;
+}
+
+function setFgColor(color) {
+ theme.props.fg = theme.base === 'light' ? color.forLight : color.forDark;
+}
+
+function apply() {
+ themeCode = JSON5.stringify(theme, null, '\t');
+ applyTheme(theme, false);
+ changed = true;
+}
+
+function applyThemeCode() {
+ let parsed;
+
+ try {
+ parsed = JSON5.parse(themeCode);
+ } catch (err) {
+ os.alert({
+ type: 'error',
+ text: i18n.locale._theme.invalid,
+ });
+ return;
+ }
+
+ theme = parsed;
+}
+
+async function saveAs() {
+ const { canceled, result: name } = await os.inputText({
+ title: i18n.locale.name,
+ allowEmpty: false,
+ });
+ if (canceled) return;
+
+ theme.id = uuid();
+ theme.name = name;
+ theme.author = `@${$i.username}@${toUnicode(host)}`;
+ if (description) theme.desc = description;
+ addTheme(theme);
+ applyTheme(theme);
+ if (defaultStore.state.darkMode) {
+ ColdDeviceStorage.set('darkTheme', theme);
+ } else {
+ ColdDeviceStorage.set('lightTheme', theme);
+ }
+ changed = false;
+ os.alert({
+ type: 'success',
+ text: i18n.t('_theme.installed', { name: theme.name }),
+ });
+}
+
+watch($$(theme), apply, { deep: true });
+
+defineExpose({
+ [symbols.PAGE_INFO]: {
+ title: i18n.locale.themeEditor,
+ icon: 'fas fa-palette',
+ bg: 'var(--bg)',
+ actions: [{
+ asFullButton: true,
+ icon: 'fas fa-eye',
+ text: i18n.locale.preview,
+ handler: showPreview,
+ }, {
+ asFullButton: true,
+ icon: 'fas fa-check',
+ text: i18n.locale.saveAs,
+ handler: saveAs,
+ }],
+ },
});
</script>
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 216b3c34ea..ecd1ae6257 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -1,6 +1,6 @@
<template>
<MkSpacer :content-max="800">
- <div v-hotkey.global="keymap" class="cmuxhskf">
+ <div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
@@ -17,163 +17,139 @@
</MkSpacer>
</template>
-<script lang="ts">
-import { defineComponent, defineAsyncComponent, computed } from 'vue';
+<script lang="ts" setup>
+import { defineAsyncComponent, computed, watch } from 'vue';
import XTimeline from '@/components/timeline.vue';
import XPostForm from '@/components/post-form.vue';
import { scroll } from '@/scripts/scroll';
import * as os from '@/os';
import * as symbols from '@/symbols';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+import { instance } from '@/instance';
+import { $i } from '@/account';
-export default defineComponent({
- name: 'timeline',
+const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue'));
- components: {
- XTimeline,
- XTutorial: defineAsyncComponent(() => import('./timeline.tutorial.vue')),
- XPostForm,
- },
+const isLocalTimelineAvailable = !instance.disableLocalTimeline || ($i != null && ($i.isModerator || $i.isAdmin));
+const isGlobalTimelineAvailable = !instance.disableGlobalTimeline || ($i != null && ($i.isModerator || $i.isAdmin));
+const keymap = {
+ 't': focus,
+};
- data() {
- return {
- src: 'home',
- queue: 0,
- [symbols.PAGE_INFO]: computed(() => ({
- title: this.$ts.timeline,
- icon: this.src === 'local' ? 'fas fa-comments' : this.src === 'social' ? 'fas fa-share-alt' : this.src === 'global' ? 'fas fa-globe' : 'fas fa-home',
- bg: 'var(--bg)',
- actions: [{
- icon: 'fas fa-list-ul',
- text: this.$ts.lists,
- handler: this.chooseList
- }, {
- icon: 'fas fa-satellite',
- text: this.$ts.antennas,
- handler: this.chooseAntenna
- }, {
- icon: 'fas fa-satellite-dish',
- text: this.$ts.channel,
- handler: this.chooseChannel
- }, {
- icon: 'fas fa-calendar-alt',
- text: this.$ts.jumpToSpecifiedDate,
- handler: this.timetravel
- }],
- tabs: [{
- active: this.src === 'home',
- title: this.$ts._timelines.home,
- icon: 'fas fa-home',
- iconOnly: true,
- onClick: () => { this.src = 'home'; this.saveSrc(); },
- }, ...(this.isLocalTimelineAvailable ? [{
- active: this.src === 'local',
- title: this.$ts._timelines.local,
- icon: 'fas fa-comments',
- iconOnly: true,
- onClick: () => { this.src = 'local'; this.saveSrc(); },
- }, {
- active: this.src === 'social',
- title: this.$ts._timelines.social,
- icon: 'fas fa-share-alt',
- iconOnly: true,
- onClick: () => { this.src = 'social'; this.saveSrc(); },
- }] : []), ...(this.isGlobalTimelineAvailable ? [{
- active: this.src === 'global',
- title: this.$ts._timelines.global,
- icon: 'fas fa-globe',
- iconOnly: true,
- onClick: () => { this.src = 'global'; this.saveSrc(); },
- }] : [])],
- })),
- };
- },
+const tlComponent = $ref<InstanceType<typeof XTimeline>>();
+const rootEl = $ref<HTMLElement>();
- computed: {
- keymap(): any {
- return {
- 't': this.focus
- };
- },
+let src = $ref<'home' | 'local' | 'social' | 'global'>(defaultStore.state.tl.src);
+let queue = $ref(0);
- isLocalTimelineAvailable(): boolean {
- return !this.$instance.disableLocalTimeline || this.$i.isModerator || this.$i.isAdmin;
- },
+function queueUpdated(q: number): void {
+ queue = q;
+}
- isGlobalTimelineAvailable(): boolean {
- return !this.$instance.disableGlobalTimeline || this.$i.isModerator || this.$i.isAdmin;
- },
- },
+function top(): void {
+ scroll(rootEl, { top: 0 });
+}
- watch: {
- src() {
- this.showNav = false;
- },
- },
+async function chooseList(ev: MouseEvent): Promise<void> {
+ const lists = await os.api('users/lists/list');
+ const items = lists.map(list => ({
+ type: 'link',
+ text: list.name,
+ to: `/timeline/list/${list.id}`,
+ }));
+ os.popupMenu(items, ev.currentTarget || ev.target);
+}
- created() {
- this.src = this.$store.state.tl.src;
- },
+async function chooseAntenna(ev: MouseEvent): Promise<void> {
+ const antennas = await os.api('antennas/list');
+ const items = antennas.map(antenna => ({
+ type: 'link',
+ text: antenna.name,
+ indicate: antenna.hasUnreadNote,
+ to: `/timeline/antenna/${antenna.id}`,
+ }));
+ os.popupMenu(items, ev.currentTarget || ev.target);
+}
- methods: {
- queueUpdated(q) {
- this.queue = q;
- },
+async function chooseChannel(ev: MouseEvent): Promise<void> {
+ const channels = await os.api('channels/followed');
+ const items = channels.map(channel => ({
+ type: 'link',
+ text: channel.name,
+ indicate: channel.hasUnreadNote,
+ to: `/channels/${channel.id}`,
+ }));
+ os.popupMenu(items, ev.currentTarget || ev.target);
+}
- top() {
- scroll(this.$el, { top: 0 });
- },
+function saveSrc(): void {
+ defaultStore.set('tl', {
+ src: src,
+ });
+}
- async chooseList(ev) {
- const lists = await os.api('users/lists/list');
- const items = lists.map(list => ({
- type: 'link',
- text: list.name,
- to: `/timeline/list/${list.id}`
- }));
- os.popupMenu(items, ev.currentTarget || ev.target);
- },
+async function timetravel(): Promise<void> {
+ const { canceled, result: date } = await os.inputDate({
+ title: i18n.locale.date,
+ });
+ if (canceled) return;
- async chooseAntenna(ev) {
- const antennas = await os.api('antennas/list');
- const items = antennas.map(antenna => ({
- type: 'link',
- text: antenna.name,
- indicate: antenna.hasUnreadNote,
- to: `/timeline/antenna/${antenna.id}`
- }));
- os.popupMenu(items, ev.currentTarget || ev.target);
- },
+ tlComponent.timetravel(date);
+}
- async chooseChannel(ev) {
- const channels = await os.api('channels/followed');
- const items = channels.map(channel => ({
- type: 'link',
- text: channel.name,
- indicate: channel.hasUnreadNote,
- to: `/channels/${channel.id}`
- }));
- os.popupMenu(items, ev.currentTarget || ev.target);
- },
+function focus(): void {
+ tlComponent.focus();
+}
- saveSrc() {
- this.$store.set('tl', {
- src: this.src,
- });
- },
-
- async timetravel() {
- const { canceled, result: date } = await os.inputDate({
- title: this.$ts.date,
- });
- if (canceled) return;
-
- this.$refs.tl.timetravel(date);
- },
-
- focus() {
- (this.$refs.tl as any).focus();
- }
- }
+defineExpose({
+ [symbols.PAGE_INFO]: computed(() => ({
+ title: i18n.locale.timeline,
+ icon: src === 'local' ? 'fas fa-comments' : src === 'social' ? 'fas fa-share-alt' : src === 'global' ? 'fas fa-globe' : 'fas fa-home',
+ bg: 'var(--bg)',
+ actions: [{
+ icon: 'fas fa-list-ul',
+ text: i18n.locale.lists,
+ handler: chooseList,
+ }, {
+ icon: 'fas fa-satellite',
+ text: i18n.locale.antennas,
+ handler: chooseAntenna,
+ }, {
+ icon: 'fas fa-satellite-dish',
+ text: i18n.locale.channel,
+ handler: chooseChannel,
+ }, {
+ icon: 'fas fa-calendar-alt',
+ text: i18n.locale.jumpToSpecifiedDate,
+ handler: timetravel,
+ }],
+ tabs: [{
+ active: src === 'home',
+ title: i18n.locale._timelines.home,
+ icon: 'fas fa-home',
+ iconOnly: true,
+ onClick: () => { src = 'home'; saveSrc(); },
+ }, ...(isLocalTimelineAvailable ? [{
+ active: src === 'local',
+ title: i18n.locale._timelines.local,
+ icon: 'fas fa-comments',
+ iconOnly: true,
+ onClick: () => { src = 'local'; saveSrc(); },
+ }, {
+ active: src === 'social',
+ title: i18n.locale._timelines.social,
+ icon: 'fas fa-share-alt',
+ iconOnly: true,
+ onClick: () => { src = 'social'; saveSrc(); },
+ }] : []), ...(isGlobalTimelineAvailable ? [{
+ active: src === 'global',
+ title: i18n.locale._timelines.global,
+ icon: 'fas fa-globe',
+ iconOnly: true,
+ onClick: () => { src = 'global'; saveSrc(); },
+ }] : [])],
+ })),
});
</script>
diff --git a/packages/client/src/scripts/use-leave-guard.ts b/packages/client/src/scripts/use-leave-guard.ts
new file mode 100644
index 0000000000..21899af59a
--- /dev/null
+++ b/packages/client/src/scripts/use-leave-guard.ts
@@ -0,0 +1,34 @@
+import { inject, onUnmounted, Ref } from 'vue';
+import { i18n } from '@/i18n';
+import * as os from '@/os';
+
+export function useLeaveGuard(enabled: Ref<boolean>) {
+ const setLeaveGuard = inject('setLeaveGuard');
+
+ if (setLeaveGuard) {
+ setLeaveGuard(async () => {
+ if (!enabled.value) return false;
+
+ const { canceled } = await os.confirm({
+ type: 'warning',
+ text: i18n.locale.leaveConfirm,
+ });
+
+ return canceled;
+ });
+ }
+
+ /*
+ function onBeforeLeave(ev: BeforeUnloadEvent) {
+ if (enabled.value) {
+ ev.preventDefault();
+ ev.returnValue = '';
+ }
+ }
+
+ window.addEventListener('beforeunload', onBeforeLeave);
+ onUnmounted(() => {
+ window.removeEventListener('beforeunload', onBeforeLeave);
+ });
+ */
+}
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index a57e8ec62b..cd358d29d0 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -97,7 +97,7 @@ export const defaultStore = markRaw(new Storage('base', {
tl: {
where: 'deviceAccount',
default: {
- src: 'home',
+ src: 'home' as 'home' | 'local' | 'social' | 'global',
arg: null
}
},