natty
/
magnetar
1
0
Fork 0
Code Issues 4 Pull Requests 1 Packages Projects Releases Wiki Activity

Frontend: Removed the update check

This commit is contained in:
Natty 2023-07-23 14:19:12 +02:00
parent 39f9ecd8d3
commit 40c471ff56
Signed by: natty
GPG Key ID: BF6CB659ADEE60EC
8 changed files with 1977 additions and 2058 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
fe_calckey/frontend/calckey-js/etc/calckey-js.api.md
View File

@ -2034,10 +2034,6 @@ export type Endpoints = {
req: NoParams;
res: ServerInfo;
};
"latest-version": {
req: NoParams;
res: TODO;
};
"sw/register": {
req: TODO;
res: TODO;

4
fe_calckey/frontend/calckey-js/markdown/calckey-js.endpoints.md
View File

@ -1698,10 +1698,6 @@ export declare type Endpoints = {
req: NoParams;
res: ServerInfo;
};
"latest-version": {
req: NoParams;
res: TODO;
};
"sw/register": {
req: TODO;
res: TODO;

18
fe_calckey/frontend/calckey-js/src/api.types.ts
View File

@ -5,7 +5,6 @@ import {
App,
AuthSession,
Blocking,
Channel,
Clip,
DateString,
DetailedInstanceMetadata,
@ -17,24 +16,23 @@ import {
FollowRequest,
GalleryPost,
Instance,
InstanceMetadata,
LiteInstanceMetadata,
MeDetailed,
MessagingMessage,
Note,
NoteFavorite,
NoteReaction,
Notification,
OriginType,
Page,
ServerInfo,
Signin,
Stats,
User,
UserDetailed,
UserGroup,
UserList,
UserSorting,
Notification,
NoteReaction,
Signin,
MessagingMessage,
} from "./entities";
type TODO = Record<string, any> | null;
@ -758,10 +756,7 @@ export type Endpoints = {
$cases: [
[{ detail: true }, DetailedInstanceMetadata],
[{ detail: false }, LiteInstanceMetadata],
[
{ detail: boolean },
LiteInstanceMetadata | DetailedInstanceMetadata,
],
[{ detail: boolean }, LiteInstanceMetadata | DetailedInstanceMetadata]
];
$default: LiteInstanceMetadata;
};
@ -977,9 +972,6 @@ export type Endpoints = {
// server-info
"server-info": { req: NoParams; res: ServerInfo };
// ck specific
"latest-version": { req: NoParams; res: TODO };
// sw
"sw/register": { req: TODO; res: TODO };

737
fe_calckey/frontend/client/src/pages/admin/index.vue
View File

@ -1,93 +1,70 @@
<template>
<div ref="el" class="hiyeyicy" :class="{ wide: !narrow }">
<div v-if="!narrow || currentPage?.route.name == null" class="nav">
<MkSpacer :content-max="700" :margin-min="16">
<div class="lxpfedzu">
<div class="banner">
<img
:src="$instance.iconUrl || '/favicon.ico'"
alt=""
class="icon"
/>
</div>
<div ref="el" class="hiyeyicy" :class="{ wide: !narrow }">
<div v-if="!narrow || currentPage?.route.name == null" class="nav">
<MkSpacer :content-max="700" :margin-min="16">
<div class="lxpfedzu">
<div class="banner">
<img
:src="$instance.iconUrl || '/favicon.ico'"
alt=""
class="icon"
/>
</div>
<MkInfo
v-if="thereIsUnresolvedAbuseReport"
warn
class="info"
>{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }}
<MkA to="/admin/abuses" class="_link">{{
i18n.ts.check
}}</MkA></MkInfo
>
<MkInfo v-if="noMaintainerInformation" warn class="info"
>{{ i18n.ts.noMaintainerInformationWarning }}
<MkA to="/admin/settings" class="_link">{{
i18n.ts.configure
}}</MkA></MkInfo
>
<MkInfo v-if="noBotProtection" warn class="info"
>{{ i18n.ts.noBotProtectionWarning }}
<MkA to="/admin/security" class="_link">{{
i18n.ts.configure
}}</MkA></MkInfo
>
<MkInfo v-if="noEmailServer" warn class="info"
>{{ i18n.ts.noEmailServerWarning }}
<MkA to="/admin/email-settings" class="_link">{{
i18n.ts.configure
}}</MkA></MkInfo
>
<MkInfo v-if="updateAvailable" warn class="info"
>{{ i18n.ts.updateAvailable }}
<a
href="https://codeberg.org/calckey/calckey/releases"
target="_bank"
class="_link"
>{{ i18n.ts.check }}</a
></MkInfo
>
<MkInfo
v-if="thereIsUnresolvedAbuseReport"
warn
class="info"
>{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }}
<MkA to="/admin/abuses" class="_link">{{
i18n.ts.check
}}</MkA></MkInfo
>
<MkInfo v-if="noMaintainerInformation" warn class="info"
>{{ i18n.ts.noMaintainerInformationWarning }}
<MkA to="/admin/settings" class="_link">{{
i18n.ts.configure
}}</MkA></MkInfo
>
<MkInfo v-if="noBotProtection" warn class="info"
>{{ i18n.ts.noBotProtectionWarning }}
<MkA to="/admin/security" class="_link">{{
i18n.ts.configure
}}</MkA></MkInfo
>
<MkInfo v-if="noEmailServer" warn class="info"
>{{ i18n.ts.noEmailServerWarning }}
<MkA to="/admin/email-settings" class="_link">{{
i18n.ts.configure
}}</MkA></MkInfo
>
<MkSuperMenu :def="menuDef" :grid="narrow"></MkSuperMenu>
</div>
</MkSpacer>
</div>
<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
<RouterView />
</div>
</div>
<MkSuperMenu :def="menuDef" :grid="narrow"></MkSuperMenu>
</div>
</MkSpacer>
</div>
<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
<RouterView />
</div>
</div>
</template>
<script lang="ts" setup>
import {
defineAsyncComponent,
inject,
nextTick,
onMounted,
onUnmounted,
onActivated,
provide,
watch,
ref,
} from "vue";
import { onActivated, onMounted, onUnmounted, provide, ref, watch } from "vue";
import { i18n } from "@/i18n";
import MkSuperMenu from "@/components/MkSuperMenu.vue";
import MkInfo from "@/components/MkInfo.vue";
import { scroll } from "@/scripts/scroll";
import { instance } from "@/instance";
import { version } from "@/config";
import { $i } from "@/account";
import * as os from "@/os";
import { lookupUser } from "@/scripts/lookup-user";
import { lookupFile } from "@/scripts/lookup-file";
import { lookupInstance } from "@/scripts/lookup-instance";
import { indexPosts } from "@/scripts/index-posts";
import { defaultStore } from "@/store";
import { useRouter } from "@/router";
import {
definePageMetadata,
provideMetadataReceiver,
setPageMetadata,
definePageMetadata,
provideMetadataReceiver,
} from "@/scripts/page-metadata";
const isEmpty = (x: string | null) => x == null || x === "";
@ -95,9 +72,9 @@ const el = ref<HTMLElement | null>(null);
const router = useRouter();
const indexInfo = {
title: i18n.ts.controlPanel,
icon: "ph-gear-six ph-bold ph-lg",
hideHeader: true,
title: i18n.ts.controlPanel,
icon: "ph-gear-six ph-bold ph-lg",
hideHeader: true,
};
provide("shouldOmitHeaderTitle", false);
@ -108,326 +85,312 @@ let narrow = $ref(false);
let view = $ref(null);
let pageProps = $ref({});
let noMaintainerInformation =
isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
let noBotProtection =
!instance.disableRegistration &&
!instance.enableHcaptcha &&
!instance.enableRecaptcha;
!instance.disableRegistration &&
!instance.enableHcaptcha &&
!instance.enableRecaptcha;
let noEmailServer = !instance.enableEmail;
let thereIsUnresolvedAbuseReport = $ref(false);
let updateAvailable = $ref(false);
let currentPage = $computed(() => router.currentRef.value.child);
os.api("admin/abuse-user-reports", {
state: "unresolved",
limit: 1,
state: "unresolved",
limit: 1,
}).then((reports) => {
if (reports?.length > 0) thereIsUnresolvedAbuseReport = true;
if (reports?.length > 0) thereIsUnresolvedAbuseReport = true;
});
if (defaultStore.state.showAdminUpdates) {
os.api("latest-version").then((res) => {
const cleanRes = parseInt(res?.tag_name.replace(/[^0-9]/g, ""));
const cleanVersion = parseInt(version.replace(/[^0-9]/g, ""));
if (cleanRes > cleanVersion) {
updateAvailable = true;
}
});
}
const NARROW_THRESHOLD = 600;
const ro = new ResizeObserver((entries, observer) => {
if (entries.length === 0) return;
narrow = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
if (entries.length === 0) return;
narrow = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
});
const menuDef = $computed(() => [
{
title: i18n.ts.quickAction,
items: [
{
type: "button",
icon: "ph-magnifying-glass ph-bold ph-lg",
text: i18n.ts.lookup,
action: lookup,
},
...(instance.disableRegistration
? [
{
type: "button",
icon: "ph-user-plus ph-bold ph-lg",
text: i18n.ts.invite,
action: invite,
},
]
: []),
...($i.isAdmin
? [
{
type: "button",
icon: "ph-list-magnifying-glass ph-bold ph-lg",
text: i18n.ts.indexPosts,
action: indexPosts,
},
]
: []),
],
},
{
title: i18n.ts.administration,
items: [
{
icon: "ph-gauge ph-bold ph-lg",
text: i18n.ts.dashboard,
to: "/admin/overview",
active: currentPage?.route.name === "overview",
},
{
icon: "ph-users ph-bold ph-lg",
text: i18n.ts.users,
to: "/admin/users",
active: currentPage?.route.name === "users",
},
{
icon: "ph-smiley ph-bold ph-lg",
text: i18n.ts.customEmojis,
to: "/admin/emojis",
active: currentPage?.route.name === "emojis",
},
{
icon: "ph-planet ph-bold ph-lg",
text: i18n.ts.federation,
to: "/admin/federation",
active: currentPage?.route.name === "federation",
},
{
icon: "ph-queue ph-bold ph-lg",
text: i18n.ts.jobQueue,
to: "/admin/queue",
active: currentPage?.route.name === "queue",
},
{
icon: "ph-cloud ph-bold ph-lg",
text: i18n.ts.files,
to: "/admin/files",
active: currentPage?.route.name === "files",
},
{
icon: "ph-megaphone-simple ph-bold ph-lg",
text: i18n.ts.announcements,
to: "/admin/announcements",
active: currentPage?.route.name === "announcements",
},
{
icon: "ph-money ph-bold ph-lg",
text: i18n.ts.ads,
to: "/admin/ads",
active: currentPage?.route.name === "ads",
},
{
icon: "ph-warning-circle ph-bold ph-lg",
text: i18n.ts.abuseReports,
to: "/admin/abuses",
active: currentPage?.route.name === "abuses",
},
],
},
...($i?.isAdmin
? [
{
title: i18n.ts.settings,
items: [
{
icon: "ph-gear-six ph-bold ph-lg",
text: i18n.ts.general,
to: "/admin/settings",
active: currentPage?.route.name === "settings",
},
{
icon: "ph-envelope-simple-open ph-bold ph-lg",
text: i18n.ts.emailServer,
to: "/admin/email-settings",
active:
currentPage?.route.name === "email-settings",
},
{
icon: "ph-cloud ph-bold ph-lg",
text: i18n.ts.objectStorage,
to: "/admin/object-storage",
active:
currentPage?.route.name === "object-storage",
},
{
icon: "ph-lock ph-bold ph-lg",
text: i18n.ts.security,
to: "/admin/security",
active: currentPage?.route.name === "security",
},
{
icon: "ph-flow-arrow ph-bold ph-lg",
text: i18n.ts.relays,
to: "/admin/relays",
active: currentPage?.route.name === "relays",
},
{
icon: "ph-plug ph-bold ph-lg",
text: i18n.ts.integration,
to: "/admin/integrations",
active: currentPage?.route.name === "integrations",
},
{
icon: "ph-prohibit ph-bold ph-lg",
text: i18n.ts.instanceBlocking,
to: "/admin/instance-block",
active:
currentPage?.route.name === "instance-block",
},
{
icon: "ph-hash ph-bold ph-lg",
text: i18n.ts.hiddenTags,
to: "/admin/hashtags",
active: currentPage?.route.name === "hashtags",
},
{
icon: "ph-ghost ph-bold ph-lg",
text: i18n.ts.proxyAccount,
to: "/admin/proxy-account",
active: currentPage?.route.name === "proxy-account",
},
{
icon: "ph-database ph-bold ph-lg",
text: i18n.ts.database,
to: "/admin/database",
active: currentPage?.route.name === "database",
},
{
icon: "ph-flask ph-bold ph-lg",
text: i18n.ts._experiments.title,
to: "/admin/experiments",
active: currentPage?.route.name === "experiments",
},
],
},
]
: []),
{
title: i18n.ts.quickAction,
items: [
{
type: "button",
icon: "ph-magnifying-glass ph-bold ph-lg",
text: i18n.ts.lookup,
action: lookup,
},
...(instance.disableRegistration
? [
{
type: "button",
icon: "ph-user-plus ph-bold ph-lg",
text: i18n.ts.invite,
action: invite,
},
]
: []),
...($i.isAdmin
? [
{
type: "button",
icon: "ph-list-magnifying-glass ph-bold ph-lg",
text: i18n.ts.indexPosts,
action: indexPosts,
},
]
: []),
],
},
{
title: i18n.ts.administration,
items: [
{
icon: "ph-gauge ph-bold ph-lg",
text: i18n.ts.dashboard,
to: "/admin/overview",
active: currentPage?.route.name === "overview",
},
{
icon: "ph-users ph-bold ph-lg",
text: i18n.ts.users,
to: "/admin/users",
active: currentPage?.route.name === "users",
},
{
icon: "ph-smiley ph-bold ph-lg",
text: i18n.ts.customEmojis,
to: "/admin/emojis",
active: currentPage?.route.name === "emojis",
},
{
icon: "ph-planet ph-bold ph-lg",
text: i18n.ts.federation,
to: "/admin/federation",
active: currentPage?.route.name === "federation",
},
{
icon: "ph-queue ph-bold ph-lg",
text: i18n.ts.jobQueue,
to: "/admin/queue",
active: currentPage?.route.name === "queue",
},
{
icon: "ph-cloud ph-bold ph-lg",
text: i18n.ts.files,
to: "/admin/files",
active: currentPage?.route.name === "files",
},
{
icon: "ph-megaphone-simple ph-bold ph-lg",
text: i18n.ts.announcements,
to: "/admin/announcements",
active: currentPage?.route.name === "announcements",
},
{
icon: "ph-money ph-bold ph-lg",
text: i18n.ts.ads,
to: "/admin/ads",
active: currentPage?.route.name === "ads",
},
{
icon: "ph-warning-circle ph-bold ph-lg",
text: i18n.ts.abuseReports,
to: "/admin/abuses",
active: currentPage?.route.name === "abuses",
},
],
},
...($i?.isAdmin
? [
{
title: i18n.ts.settings,
items: [
{
icon: "ph-gear-six ph-bold ph-lg",
text: i18n.ts.general,
to: "/admin/settings",
active: currentPage?.route.name === "settings",
},
{
icon: "ph-envelope-simple-open ph-bold ph-lg",
text: i18n.ts.emailServer,
to: "/admin/email-settings",
active: currentPage?.route.name === "email-settings",
},
{
icon: "ph-cloud ph-bold ph-lg",
text: i18n.ts.objectStorage,
to: "/admin/object-storage",
active: currentPage?.route.name === "object-storage",
},
{
icon: "ph-lock ph-bold ph-lg",
text: i18n.ts.security,
to: "/admin/security",
active: currentPage?.route.name === "security",
},
{
icon: "ph-flow-arrow ph-bold ph-lg",
text: i18n.ts.relays,
to: "/admin/relays",
active: currentPage?.route.name === "relays",
},
{
icon: "ph-plug ph-bold ph-lg",
text: i18n.ts.integration,
to: "/admin/integrations",
active: currentPage?.route.name === "integrations",
},
{
icon: "ph-prohibit ph-bold ph-lg",
text: i18n.ts.instanceBlocking,
to: "/admin/instance-block",
active: currentPage?.route.name === "instance-block",
},
{
icon: "ph-hash ph-bold ph-lg",
text: i18n.ts.hiddenTags,
to: "/admin/hashtags",
active: currentPage?.route.name === "hashtags",
},
{
icon: "ph-ghost ph-bold ph-lg",
text: i18n.ts.proxyAccount,
to: "/admin/proxy-account",
active: currentPage?.route.name === "proxy-account",
},
{
icon: "ph-database ph-bold ph-lg",
text: i18n.ts.database,
to: "/admin/database",
active: currentPage?.route.name === "database",
},
{
icon: "ph-flask ph-bold ph-lg",
text: i18n.ts._experiments.title,
to: "/admin/experiments",
active: currentPage?.route.name === "experiments",
},
],
},
]
: []),
]);
watch(narrow, () => {
if (currentPage?.route.name == null && !narrow) {
router.push("/admin/overview");
}
if (currentPage?.route.name == null && !narrow) {
router.push("/admin/overview");
}
});
onMounted(() => {
ro.observe(el.value);
ro.observe(el.value);
narrow = el.value.offsetWidth < NARROW_THRESHOLD;
if (currentPage?.route.name == null && !narrow) {
router.push("/admin/overview");
}
narrow = el.value.offsetWidth < NARROW_THRESHOLD;
if (currentPage?.route.name == null && !narrow) {
router.push("/admin/overview");
}
});
onActivated(() => {
narrow = el.value.offsetWidth < NARROW_THRESHOLD;
narrow = el.value.offsetWidth < NARROW_THRESHOLD;
if (!narrow && currentPage?.route.name == null) {
router.replace("/admin/overview");
}
if (!narrow && currentPage?.route.name == null) {
router.replace("/admin/overview");
}
});
onUnmounted(() => {
ro.disconnect();
ro.disconnect();
});
watch(router.currentRef, (to) => {
if (to.route.path === "/admin" && to.child?.route.name == null && !narrow) {
router.replace("/admin/overview");
}
if (to.route.path === "/admin" && to.child?.route.name == null && !narrow) {
router.replace("/admin/overview");
}
});
provideMetadataReceiver((info) => {
if (info == null) {
childInfo = null;
} else {
childInfo = info;
}
if (info == null) {
childInfo = null;
} else {
childInfo = info;
}
});
const invite = () => {
os.api("admin/invite")
.then((x) => {
os.alert({
type: "info",
text: x.code,
});
})
.catch((err) => {
os.alert({
type: "error",
text: err,
});
});
os.api("admin/invite")
.then((x) => {
os.alert({
type: "info",
text: x.code,
});
})
.catch((err) => {
os.alert({
type: "error",
text: err,
});
});
};
async function lookupNote() {
const { canceled, result: q } = await os.inputText({
title: i18n.ts.noteId,
});
if (canceled) return;
const { canceled, result: q } = await os.inputText({
title: i18n.ts.noteId,
});
if (canceled) return;
os.api(
"notes/show",
q.startsWith("http://") || q.startsWith("https://")
? { url: q.trim() }
: { noteId: q.trim() }
)
.then((note) => {
os.pageWindow(`/notes/${note.id}`);
})
.catch((err) => {
if (err.code === "NO_SUCH_NOTE") {
os.alert({
type: "error",
text: i18n.ts.notFound,
});
}
});
os.api(
"notes/show",
q.startsWith("http://") || q.startsWith("https://")
? { url: q.trim() }
: { noteId: q.trim() }
)
.then((note) => {
os.pageWindow(`/notes/${note.id}`);
})
.catch((err) => {
if (err.code === "NO_SUCH_NOTE") {
os.alert({
type: "error",
text: i18n.ts.notFound,
});
}
});
}
const lookup = (ev) => {
os.popupMenu(
[
{
text: i18n.ts.user,
icon: "ph-user ph-bold ph-lg",
action: () => {
lookupUser();
},
},
{
text: i18n.ts.note,
icon: "ph-pencil ph-bold ph-lg",
action: () => {
lookupNote();
},
},
{
text: i18n.ts.file,
icon: "ph-cloud ph-bold ph-lg",
action: () => {
lookupFile();
},
},
{
text: i18n.ts.instance,
icon: "ph-planet ph-bold ph-lg",
action: () => {
lookupInstance();
},
},
],
ev.currentTarget ?? ev.target
);
os.popupMenu(
[
{
text: i18n.ts.user,
icon: "ph-user ph-bold ph-lg",
action: () => {
lookupUser();
},
},
{
text: i18n.ts.note,
icon: "ph-pencil ph-bold ph-lg",
action: () => {
lookupNote();
},
},
{
text: i18n.ts.file,
icon: "ph-cloud ph-bold ph-lg",
action: () => {
lookupFile();
},
},
{
text: i18n.ts.instance,
icon: "ph-planet ph-bold ph-lg",
action: () => {
lookupInstance();
},
},
],
ev.currentTarget ?? ev.target
);
};
const headerActions = $computed(() => []);
@ -437,51 +400,51 @@ const headerTabs = $computed(() => []);
definePageMetadata(INFO);
defineExpose({
header: {
title: i18n.ts.controlPanel,
},
header: {
title: i18n.ts.controlPanel,
},
});
</script>
<style lang="scss" scoped>
.hiyeyicy {
&.wide {
display: flex;
margin: 0 auto;
height: 100%;
&.wide {
display: flex;
margin: 0 auto;
height: 100%;
> .nav {
width: 32%;
max-width: 280px;
box-sizing: border-box;
border-right: solid 0.5px var(--divider);
overflow: auto;
height: 100%;
}
> .nav {
width: 32%;
max-width: 280px;
box-sizing: border-box;
border-right: solid 0.5px var(--divider);
overflow: auto;
height: 100%;
}
> .main {
flex: 1;
min-width: 0;
}
}
> .main {
flex: 1;
min-width: 0;
}
}
> .nav {
.lxpfedzu {
> .info {
margin: 16px 0;
}
> .nav {
.lxpfedzu {
> .info {
margin: 16px 0;
}
> .banner {
margin: 16px;
> .banner {
margin: 16px;
> .icon {
display: block;
margin: auto;
height: 42px;
border-radius: 8px;
}
}
}
}
> .icon {
display: block;
margin: auto;
height: 42px;
border-radius: 8px;
}
}
}
}
}
</style>

565
fe_calckey/frontend/client/src/pages/settings/general.vue
View File

@ -1,136 +1,136 @@
<template>
<div class="_formRoot">
<FormSelect v-model="lang" class="_formBlock">
<template #label>{{ i18n.ts.uiLanguage }}</template>
<option v-for="x in langs" :key="x[0]" :value="x[0]">
{{ x[1] }}
</option>
<template #caption>
<I18n :src="i18n.ts.i18nInfo" tag="span">
<template #link>
<MkLink url="https://hosted.weblate.org/engage/calckey/"
>Weblate</MkLink
>
</template>
</I18n>
</template>
</FormSelect>
<div class="_formRoot">
<FormSelect v-model="lang" class="_formBlock">
<template #label>{{ i18n.ts.uiLanguage }}</template>
<option v-for="x in langs" :key="x[0]" :value="x[0]">
{{ x[1] }}
</option>
<template #caption>
<I18n :src="i18n.ts.i18nInfo" tag="span">
<template #link>
<MkLink url="https://hosted.weblate.org/engage/calckey/"
>Weblate</MkLink
>
</template>
</I18n>
</template>
</FormSelect>
<FormRadios v-model="overridedDeviceKind" class="_formBlock">
<template #label>{{ i18n.ts.overridedDeviceKind }}</template>
<option :value="null">{{ i18n.ts.auto }}</option>
<option value="smartphone">
<i class="ph-device-mobile ph-bold ph-lg" />
{{ i18n.ts.smartphone }}
</option>
<option value="tablet">
<i class="ph-device-tablet ph-bold ph-lg" />
{{ i18n.ts.tablet }}
</option>
<option value="desktop">
<i class="ph-desktop ph-bold ph-lg" /> {{ i18n.ts.desktop }}
</option>
</FormRadios>
<FormRadios v-model="overridedDeviceKind" class="_formBlock">
<template #label>{{ i18n.ts.overridedDeviceKind }}</template>
<option :value="null">{{ i18n.ts.auto }}</option>
<option value="smartphone">
<i class="ph-device-mobile ph-bold ph-lg" />
{{ i18n.ts.smartphone }}
</option>
<option value="tablet">
<i class="ph-device-tablet ph-bold ph-lg" />
{{ i18n.ts.tablet }}
</option>
<option value="desktop">
<i class="ph-desktop ph-bold ph-lg" /> {{ i18n.ts.desktop }}
</option>
</FormRadios>
<FormSection>
<template #label>{{ i18n.ts.behavior }}</template>
<FormSwitch v-model="imageNewTab" class="_formBlock">{{
i18n.ts.openImageInNewTab
}}</FormSwitch>
<FormSwitch v-model="enableInfiniteScroll" class="_formBlock">{{
i18n.ts.enableInfiniteScroll
}}</FormSwitch>
<FormSwitch
v-model="useReactionPickerForContextMenu"
class="_formBlock"
>{{ i18n.ts.useReactionPickerForContextMenu }}</FormSwitch
>
<FormSwitch v-model="swipeOnDesktop" class="_formBlock">{{
i18n.ts.swipeOnDesktop
}}</FormSwitch>
<FormSwitch v-model="enterSendsMessage" class="_formBlock">{{
i18n.ts.enterSendsMessage
}}</FormSwitch>
<FormSwitch v-model="disablePagesScript" class="_formBlock">{{
i18n.ts.disablePagesScript
}}</FormSwitch>
<FormSwitch v-model="showTimelineReplies" class="_formBlock"
>{{ i18n.ts.flagShowTimelineReplies
}}<template #caption
>{{ i18n.ts.flagShowTimelineRepliesDescription }}
{{ i18n.ts.reflectMayTakeTime }}</template
></FormSwitch
>
<FormSection>
<template #label>{{ i18n.ts.behavior }}</template>
<FormSwitch v-model="imageNewTab" class="_formBlock">{{
i18n.ts.openImageInNewTab
}}</FormSwitch>
<FormSwitch v-model="enableInfiniteScroll" class="_formBlock">{{
i18n.ts.enableInfiniteScroll
}}</FormSwitch>
<FormSwitch
v-model="useReactionPickerForContextMenu"
class="_formBlock"
>{{ i18n.ts.useReactionPickerForContextMenu }}</FormSwitch
>
<FormSwitch v-model="swipeOnDesktop" class="_formBlock">{{
i18n.ts.swipeOnDesktop
}}</FormSwitch>
<FormSwitch v-model="enterSendsMessage" class="_formBlock">{{
i18n.ts.enterSendsMessage
}}</FormSwitch>
<FormSwitch v-model="disablePagesScript" class="_formBlock">{{
i18n.ts.disablePagesScript
}}</FormSwitch>
<FormSwitch v-model="showTimelineReplies" class="_formBlock"
>{{ i18n.ts.flagShowTimelineReplies
}}<template #caption
>{{ i18n.ts.flagShowTimelineRepliesDescription }}
{{ i18n.ts.reflectMayTakeTime }}</template
></FormSwitch
>
<FormSelect v-model="serverDisconnectedBehavior" class="_formBlock">
<template #label>{{ i18n.ts.whenServerDisconnected }}</template>
<option value="reload">
{{ i18n.ts._serverDisconnectedBehavior.reload }}
</option>
<option value="dialog">
{{ i18n.ts._serverDisconnectedBehavior.dialog }}
</option>
<option value="quiet">
{{ i18n.ts._serverDisconnectedBehavior.quiet }}
</option>
<option value="nothing">
{{ i18n.ts._serverDisconnectedBehavior.nothing }}
</option>
</FormSelect>
</FormSection>
<FormSelect v-model="serverDisconnectedBehavior" class="_formBlock">
<template #label>{{ i18n.ts.whenServerDisconnected }}</template>
<option value="reload">
{{ i18n.ts._serverDisconnectedBehavior.reload }}
</option>
<option value="dialog">
{{ i18n.ts._serverDisconnectedBehavior.dialog }}
</option>
<option value="quiet">
{{ i18n.ts._serverDisconnectedBehavior.quiet }}
</option>
<option value="nothing">
{{ i18n.ts._serverDisconnectedBehavior.nothing }}
</option>
</FormSelect>
</FormSection>
<FormSection>
<template #label>{{ i18n.ts.accessibility }}</template>
<FormSwitch v-model="expandOnNoteClick" class="_formBlock"
>{{ i18n.ts.expandOnNoteClick
}}<template #caption>{{
i18n.ts.expandOnNoteClickDesc
}}</template>
</FormSwitch>
<FormSwitch v-model="advancedMfm" class="_formBlock">
{{ i18n.ts._mfm.advanced
}}<template #caption>{{
i18n.ts._mfm.advancedDescription
}}</template>
</FormSwitch>
<FormSwitch v-model="autoplayMfm" class="_formBlock">
{{ i18n.ts._mfm.alwaysPlay }}
<template #caption>
<i
class="ph-warning ph-bold ph-lg"
style="color: var(--warn)"
></i>
{{ i18n.ts._mfm.warn }}
</template>
</FormSwitch>
<FormSwitch v-model="reduceAnimation" class="_formBlock">{{
i18n.ts.reduceUiAnimation
}}</FormSwitch>
<FormSwitch
v-model="disableShowingAnimatedImages"
class="_formBlock"
>{{ i18n.ts.disableShowingAnimatedImages }}</FormSwitch
>
<FormRadios v-model="fontSize" class="_formBlock">
<template #label>{{ i18n.ts.fontSize }}</template>
<option :value="null">
<span style="font-size: 14px">14</span>
</option>
<option value="15">
<span style="font-size: 15px">15</span>
</option>
<option value="16">
<span style="font-size: 16px">16</span>
</option>
<option value="17">
<span style="font-size: 17px">17</span>
</option>
<option value="18">
<span style="font-size: 18px">18</span>
</option>
</FormRadios>
<FormSection>
<template #label>{{ i18n.ts.accessibility }}</template>
<FormSwitch v-model="expandOnNoteClick" class="_formBlock"
>{{ i18n.ts.expandOnNoteClick
}}<template #caption>{{
i18n.ts.expandOnNoteClickDesc
}}</template>
</FormSwitch>
<FormSwitch v-model="advancedMfm" class="_formBlock">
{{ i18n.ts._mfm.advanced
}}<template #caption>{{
i18n.ts._mfm.advancedDescription
}}</template>
</FormSwitch>
<FormSwitch v-model="autoplayMfm" class="_formBlock">
{{ i18n.ts._mfm.alwaysPlay }}
<template #caption>
<i
class="ph-warning ph-bold ph-lg"
style="color: var(--warn)"
></i>
{{ i18n.ts._mfm.warn }}
</template>
</FormSwitch>
<FormSwitch v-model="reduceAnimation" class="_formBlock">{{
i18n.ts.reduceUiAnimation
}}</FormSwitch>
<FormSwitch
v-model="disableShowingAnimatedImages"
class="_formBlock"
>{{ i18n.ts.disableShowingAnimatedImages }}</FormSwitch
>
<FormRadios v-model="fontSize" class="_formBlock">
<template #label>{{ i18n.ts.fontSize }}</template>
<option :value="null">
<span style="font-size: 14px">14</span>
</option>
<option value="15">
<span style="font-size: 15px">15</span>
</option>
<option value="16">
<span style="font-size: 16px">16</span>
</option>
<option value="17">
<span style="font-size: 17px">17</span>
</option>
<option value="18">
<span style="font-size: 18px">18</span>
</option>
</FormRadios>
<!-- <FormRange
<!-- <FormRange
v-model="fontSize"
:min="12"
:max="18"
@ -142,104 +142,97 @@
>
<template #label>{{ i18n.ts.fontSize }}</template>
</FormRange> -->
</FormSection>
</FormSection>
<FormSection>
<template #label>{{ i18n.ts.appearance }}</template>
<FormSwitch v-model="showAds" class="_formBlock">{{
i18n.ts.showAds
}}</FormSwitch>
<FormSwitch v-model="useBlurEffect" class="_formBlock">{{
i18n.ts.useBlurEffect
}}</FormSwitch>
<FormSwitch v-model="useBlurEffectForModal" class="_formBlock">{{
i18n.ts.useBlurEffectForModal
}}</FormSwitch>
<FormSwitch
v-model="showGapBetweenNotesInTimeline"
class="_formBlock"
>{{ i18n.ts.showGapBetweenNotesInTimeline }}</FormSwitch
>
<FormSwitch v-model="loadRawImages" class="_formBlock">{{
i18n.ts.loadRawImages
}}</FormSwitch>
<FormSwitch v-model="squareAvatars" class="_formBlock">{{
i18n.ts.squareAvatars
}}</FormSwitch>
<FormSwitch v-model="seperateRenoteQuote" class="_formBlock">{{
i18n.ts.seperateRenoteQuote
}}</FormSwitch>
<FormSwitch v-model="useSystemFont" class="_formBlock">{{
i18n.ts.useSystemFont
}}</FormSwitch>
<FormSwitch v-model="useOsNativeEmojis" class="_formBlock">
{{ i18n.ts.useOsNativeEmojis }}
<div>
<Mfm :key="useOsNativeEmojis" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪" />
</div>
</FormSwitch>
<FormSwitch v-model="disableDrawer" class="_formBlock">{{
i18n.ts.disableDrawer
}}</FormSwitch>
<FormSwitch v-model="showUpdates" class="_formBlock">{{
i18n.ts.showUpdates
}}</FormSwitch>
<FormSwitch v-model="showFixedPostForm" class="_formBlock">{{
i18n.ts.showFixedPostForm
}}</FormSwitch>
<FormSwitch
v-if="$i?.isAdmin"
v-model="showAdminUpdates"
class="_formBlock"
>{{ i18n.ts.showAdminUpdates }}</FormSwitch
>
<FormSelect v-model="instanceTicker" class="_formBlock">
<template #label>{{ i18n.ts.instanceTicker }}</template>
<option value="none">{{ i18n.ts._instanceTicker.none }}</option>
<option value="remote">
{{ i18n.ts._instanceTicker.remote }}
</option>
<option value="always">
{{ i18n.ts._instanceTicker.always }}
</option>
</FormSelect>
<FormSection>
<template #label>{{ i18n.ts.appearance }}</template>
<FormSwitch v-model="showAds" class="_formBlock">{{
i18n.ts.showAds
}}</FormSwitch>
<FormSwitch v-model="useBlurEffect" class="_formBlock">{{
i18n.ts.useBlurEffect
}}</FormSwitch>
<FormSwitch v-model="useBlurEffectForModal" class="_formBlock">{{
i18n.ts.useBlurEffectForModal
}}</FormSwitch>
<FormSwitch
v-model="showGapBetweenNotesInTimeline"
class="_formBlock"
>{{ i18n.ts.showGapBetweenNotesInTimeline }}</FormSwitch
>
<FormSwitch v-model="loadRawImages" class="_formBlock">{{
i18n.ts.loadRawImages
}}</FormSwitch>
<FormSwitch v-model="squareAvatars" class="_formBlock">{{
i18n.ts.squareAvatars
}}</FormSwitch>
<FormSwitch v-model="seperateRenoteQuote" class="_formBlock">{{
i18n.ts.seperateRenoteQuote
}}</FormSwitch>
<FormSwitch v-model="useSystemFont" class="_formBlock">{{
i18n.ts.useSystemFont
}}</FormSwitch>
<FormSwitch v-model="useOsNativeEmojis" class="_formBlock">
{{ i18n.ts.useOsNativeEmojis }}
<div>
<Mfm :key="useOsNativeEmojis" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪" />
</div>
</FormSwitch>
<FormSwitch v-model="disableDrawer" class="_formBlock">{{
i18n.ts.disableDrawer
}}</FormSwitch>
<FormSwitch v-model="showUpdates" class="_formBlock">{{
i18n.ts.showUpdates
}}</FormSwitch>
<FormSwitch v-model="showFixedPostForm" class="_formBlock">{{
i18n.ts.showFixedPostForm
}}</FormSwitch>
<FormSelect v-model="instanceTicker" class="_formBlock">
<template #label>{{ i18n.ts.instanceTicker }}</template>
<option value="none">{{ i18n.ts._instanceTicker.none }}</option>
<option value="remote">
{{ i18n.ts._instanceTicker.remote }}
</option>
<option value="always">
{{ i18n.ts._instanceTicker.always }}
</option>
</FormSelect>
<FormSelect v-model="nsfw" class="_formBlock">
<template #label>{{ i18n.ts.nsfw }}</template>
<option value="respect">{{ i18n.ts._nsfw.respect }}</option>
<option value="ignore">{{ i18n.ts._nsfw.ignore }}</option>
<option value="force">{{ i18n.ts._nsfw.force }}</option>
</FormSelect>
</FormSection>
<FormSelect v-model="nsfw" class="_formBlock">
<template #label>{{ i18n.ts.nsfw }}</template>
<option value="respect">{{ i18n.ts._nsfw.respect }}</option>
<option value="ignore">{{ i18n.ts._nsfw.ignore }}</option>
<option value="force">{{ i18n.ts._nsfw.force }}</option>
</FormSelect>
</FormSection>
<FormRange
v-model="numberOfPageCache"
:min="1"
:max="10"
:step="1"
easing
class="_formBlock"
>
<template #label>{{ i18n.ts.numberOfPageCache }}</template>
<template #caption>{{
i18n.ts.numberOfPageCacheDescription
}}</template>
</FormRange>
<FormRange
v-model="numberOfPageCache"
:min="1"
:max="10"
:step="1"
easing
class="_formBlock"
>
<template #label>{{ i18n.ts.numberOfPageCache }}</template>
<template #caption>{{
i18n.ts.numberOfPageCacheDescription
}}</template>
</FormRange>
<FormLink to="/settings/deck" class="_formBlock">{{
i18n.ts.deck
}}</FormLink>
<FormLink to="/settings/deck" class="_formBlock">{{
i18n.ts.deck
}}</FormLink>
<FormLink to="/settings/custom-katex-macro" class="_formBlock"
><template #icon><i class="ph-radical ph-bold ph-lg"></i></template
>{{ i18n.ts.customKaTeXMacro }}</FormLink
>
</div>
<FormLink to="/settings/custom-katex-macro" class="_formBlock"
><template #icon><i class="ph-radical ph-bold ph-lg"></i></template
>{{ i18n.ts.customKaTeXMacro }}</FormLink
>
</div>
</template>
<script lang="ts" setup>
import { reactive, computed, ref, watch } from "vue";
import { $i } from "@/account";
import { computed, ref, watch } from "vue";
import FormSwitch from "@/components/form/switch.vue";
import FormSelect from "@/components/form/select.vue";
import FormRadios from "@/components/form/radios.vue";
@ -259,136 +252,132 @@ const fontSize = ref(localStorage.getItem("fontSize"));
const useSystemFont = ref(localStorage.getItem("useSystemFont") != null);
async function reloadAsk() {
const { canceled } = await os.confirm({
type: "info",
text: i18n.ts.reloadToApplySetting,
});
if (canceled) return;
const { canceled } = await os.confirm({
type: "info",
text: i18n.ts.reloadToApplySetting,
});
if (canceled) return;
unisonReload();
unisonReload();
}
const overridedDeviceKind = computed(
defaultStore.makeGetterSetter("overridedDeviceKind")
defaultStore.makeGetterSetter("overridedDeviceKind")
);
const serverDisconnectedBehavior = computed(
defaultStore.makeGetterSetter("serverDisconnectedBehavior")
defaultStore.makeGetterSetter("serverDisconnectedBehavior")
);
const reduceAnimation = computed(
defaultStore.makeGetterSetter(
"animation",
(v) => !v,
(v) => !v
)
defaultStore.makeGetterSetter(
"animation",
(v) => !v,
(v) => !v
)
);
const useBlurEffectForModal = computed(
defaultStore.makeGetterSetter("useBlurEffectForModal")
defaultStore.makeGetterSetter("useBlurEffectForModal")
);
const useBlurEffect = computed(defaultStore.makeGetterSetter("useBlurEffect"));
const showGapBetweenNotesInTimeline = computed(
defaultStore.makeGetterSetter("showGapBetweenNotesInTimeline")
defaultStore.makeGetterSetter("showGapBetweenNotesInTimeline")
);
const showAds = computed(defaultStore.makeGetterSetter("showAds"));
const advancedMfm = computed(defaultStore.makeGetterSetter("advancedMfm"));
const autoplayMfm = computed(
defaultStore.makeGetterSetter(
"animatedMfm",
(v) => !v,
(v) => !v
)
defaultStore.makeGetterSetter(
"animatedMfm",
(v) => !v,
(v) => !v
)
);
const useOsNativeEmojis = computed(
defaultStore.makeGetterSetter("useOsNativeEmojis")
defaultStore.makeGetterSetter("useOsNativeEmojis")
);
const disableDrawer = computed(defaultStore.makeGetterSetter("disableDrawer"));
const disableShowingAnimatedImages = computed(
defaultStore.makeGetterSetter("disableShowingAnimatedImages")
defaultStore.makeGetterSetter("disableShowingAnimatedImages")
);
const loadRawImages = computed(defaultStore.makeGetterSetter("loadRawImages"));
const imageNewTab = computed(defaultStore.makeGetterSetter("imageNewTab"));
const nsfw = computed(defaultStore.makeGetterSetter("nsfw"));
const disablePagesScript = computed(
defaultStore.makeGetterSetter("disablePagesScript")
defaultStore.makeGetterSetter("disablePagesScript")
);
const expandOnNoteClick = computed(
defaultStore.makeGetterSetter("expandOnNoteClick")
defaultStore.makeGetterSetter("expandOnNoteClick")
);
const showFixedPostForm = computed(
defaultStore.makeGetterSetter("showFixedPostForm")
defaultStore.makeGetterSetter("showFixedPostForm")
);
const numberOfPageCache = computed(
defaultStore.makeGetterSetter("numberOfPageCache")
defaultStore.makeGetterSetter("numberOfPageCache")
);
const instanceTicker = computed(
defaultStore.makeGetterSetter("instanceTicker")
defaultStore.makeGetterSetter("instanceTicker")
);
const enableInfiniteScroll = computed(
defaultStore.makeGetterSetter("enableInfiniteScroll")
defaultStore.makeGetterSetter("enableInfiniteScroll")
);
const enterSendsMessage = computed(
defaultStore.makeGetterSetter("enterSendsMessage")
defaultStore.makeGetterSetter("enterSendsMessage")
);
const useReactionPickerForContextMenu = computed(
defaultStore.makeGetterSetter("useReactionPickerForContextMenu")
defaultStore.makeGetterSetter("useReactionPickerForContextMenu")
);
const seperateRenoteQuote = computed(
defaultStore.makeGetterSetter("seperateRenoteQuote")
defaultStore.makeGetterSetter("seperateRenoteQuote")
);
const squareAvatars = computed(defaultStore.makeGetterSetter("squareAvatars"));
const showUpdates = computed(defaultStore.makeGetterSetter("showUpdates"));
const swipeOnDesktop = computed(
defaultStore.makeGetterSetter("swipeOnDesktop")
);
const showAdminUpdates = computed(
defaultStore.makeGetterSetter("showAdminUpdates")
defaultStore.makeGetterSetter("swipeOnDesktop")
);
const showTimelineReplies = computed(
defaultStore.makeGetterSetter("showTimelineReplies")
defaultStore.makeGetterSetter("showTimelineReplies")
);
watch(lang, () => {
localStorage.setItem("lang", lang.value as string);
localStorage.removeItem("locale");
localStorage.setItem("lang", lang.value as string);
localStorage.removeItem("locale");
});
watch(fontSize, () => {
if (fontSize.value == null) {
localStorage.removeItem("fontSize");
} else {
localStorage.setItem("fontSize", fontSize.value);
}
if (fontSize.value == null) {
localStorage.removeItem("fontSize");
} else {
localStorage.setItem("fontSize", fontSize.value);
}
});
watch(useSystemFont, () => {
if (useSystemFont.value) {
localStorage.setItem("useSystemFont", "t");
} else {
localStorage.removeItem("useSystemFont");
}
if (useSystemFont.value) {
localStorage.setItem("useSystemFont", "t");
} else {
localStorage.removeItem("useSystemFont");
}
});
watch(
[
lang,
fontSize,
useSystemFont,
enableInfiniteScroll,
squareAvatars,
showGapBetweenNotesInTimeline,
instanceTicker,
overridedDeviceKind,
showAds,
showUpdates,
swipeOnDesktop,
seperateRenoteQuote,
showAdminUpdates,
advancedMfm,
autoplayMfm,
expandOnNoteClick,
],
async () => {
await reloadAsk();
}
[
lang,
fontSize,
useSystemFont,
enableInfiniteScroll,
squareAvatars,
showGapBetweenNotesInTimeline,
instanceTicker,
overridedDeviceKind,
showAds,
showUpdates,
swipeOnDesktop,
seperateRenoteQuote,
advancedMfm,
autoplayMfm,
expandOnNoteClick,
],
async () => {
await reloadAsk();
}
);
const headerActions = $computed(() => []);
@ -396,7 +385,7 @@ const headerActions = $computed(() => []);
const headerTabs = $computed(() => []);
definePageMetadata({
title: i18n.ts.general,
icon: "ph-gear-six ph-bold ph-lg",
title: i18n.ts.general,
icon: "ph-gear-six ph-bold ph-lg",
});
</script>

816
fe_calckey/frontend/client/src/pages/settings/preferences-backups.vue
View File

@ -1,58 +1,58 @@
<template>
<div class="_formRoot">
<div :class="$style.buttons">
<MkButton inline primary @click="saveNew">{{
ts._preferencesBackups.saveNew
}}</MkButton>
<MkButton inline @click="loadFile">{{
ts._preferencesBackups.loadFile
}}</MkButton>
</div>
<div class="_formRoot">
<div :class="$style.buttons">
<MkButton inline primary @click="saveNew">{{
ts._preferencesBackups.saveNew
}}</MkButton>
<MkButton inline @click="loadFile">{{
ts._preferencesBackups.loadFile
}}</MkButton>
</div>
<FormSection>
<template #label>{{ ts._preferencesBackups.list }}</template>
<template v-if="profiles && Object.keys(profiles).length > 0">
<div
v-for="(profile, id) in profiles"
:key="id"
class="_formBlock _panel"
:class="$style.profile"
@click="($event) => menu($event, id)"
@contextmenu.prevent.stop="($event) => menu($event, id)"
>
<div :class="$style.profileName">{{ profile.name }}</div>
<div :class="$style.profileTime">
{{
t("_preferencesBackups.createdAt", {
date: new Date(
profile.createdAt
).toLocaleDateString(),
time: new Date(
profile.createdAt
).toLocaleTimeString(),
})
}}
</div>
<div v-if="profile.updatedAt" :class="$style.profileTime">
{{
t("_preferencesBackups.updatedAt", {
date: new Date(
profile.updatedAt
).toLocaleDateString(),
time: new Date(
profile.updatedAt
).toLocaleTimeString(),
})
}}
</div>
</div>
</template>
<div v-else-if="profiles">
<MkInfo>{{ ts._preferencesBackups.noBackups }}</MkInfo>
</div>
<MkLoading v-else />
</FormSection>
</div>
<FormSection>
<template #label>{{ ts._preferencesBackups.list }}</template>
<template v-if="profiles && Object.keys(profiles).length > 0">
<div
v-for="(profile, id) in profiles"
:key="id"
class="_formBlock _panel"
:class="$style.profile"
@click="($event) => menu($event, id)"
@contextmenu.prevent.stop="($event) => menu($event, id)"
>
<div :class="$style.profileName">{{ profile.name }}</div>
<div :class="$style.profileTime">
{{
t("_preferencesBackups.createdAt", {
date: new Date(
profile.createdAt
).toLocaleDateString(),
time: new Date(
profile.createdAt
).toLocaleTimeString(),
})
}}
</div>
<div v-if="profile.updatedAt" :class="$style.profileTime">
{{
t("_preferencesBackups.updatedAt", {
date: new Date(
profile.updatedAt
).toLocaleDateString(),
time: new Date(
profile.updatedAt
).toLocaleTimeString(),
})
}}
</div>
</div>
</template>
<div v-else-if="profiles">
<MkInfo>{{ ts._preferencesBackups.noBackups }}</MkInfo>
</div>
<MkLoading v-else />
</FormSection>
</div>
</template>
<script lang="ts" setup>
@ -67,95 +67,95 @@ import { unisonReload } from "@/scripts/unison-reload";
import { stream } from "@/stream";
import { $i } from "@/account";
import { i18n } from "@/i18n";
import { version, host } from "@/config";
import { host, version } from "@/config";
import { definePageMetadata } from "@/scripts/page-metadata";
const { t, ts } = i18n;
useCssModule();
const defaultStoreSaveKeys: (keyof (typeof defaultStore)["state"])[] = [
"menu",
"visibility",
"localOnly",
"statusbars",
"widgets",
"tl",
"overridedDeviceKind",
"serverDisconnectedBehavior",
"nsfw",
"showAds",
"animation",
"animatedMfm",
"loadRawImages",
"imageNewTab",
"disableShowingAnimatedImages",
"disablePagesScript",
"enterSendsMessage",
"useOsNativeEmojis",
"disableDrawer",
"useBlurEffectForModal",
"useBlurEffect",
"showFixedPostForm",
"enableInfiniteScroll",
"useReactionPickerForContextMenu",
"showGapBetweenNotesInTimeline",
"instanceTicker",
"reactionPickerSize",
"reactionPickerWidth",
"reactionPickerHeight",
"reactionPickerUseDrawerForMobile",
"defaultSideView",
"menuDisplay",
"reportError",
"squareAvatars",
"numberOfPageCache",
"showUpdates",
"swipeOnDesktop",
"showAdminUpdates",
"enableCustomKaTeXMacro",
"enableEmojiReactions",
"showEmojisInReactionNotifications",
"showTimelineReplies",
"menu",
"visibility",
"localOnly",
"statusbars",
"widgets",
"tl",
"overridedDeviceKind",
"serverDisconnectedBehavior",
"nsfw",
"showAds",
"animation",
"animatedMfm",
"loadRawImages",
"imageNewTab",
"disableShowingAnimatedImages",
"disablePagesScript",
"enterSendsMessage",
"useOsNativeEmojis",
"disableDrawer",
"useBlurEffectForModal",
"useBlurEffect",
"showFixedPostForm",
"enableInfiniteScroll",
"useReactionPickerForContextMenu",
"showGapBetweenNotesInTimeline",
"instanceTicker",
"reactionPickerSize",
"reactionPickerWidth",
"reactionPickerHeight",
"reactionPickerUseDrawerForMobile",
"defaultSideView",
"menuDisplay",
"reportError",
"squareAvatars",
"numberOfPageCache",
"showUpdates",
"swipeOnDesktop",
"enableCustomKaTeXMacro",
"enableEmojiReactions",
"showEmojisInReactionNotifications",
"showTimelineReplies",
];
const coldDeviceStorageSaveKeys: (keyof typeof ColdDeviceStorage.default)[] = [
"lightTheme",
"darkTheme",
"syncDeviceDarkMode",
"plugins",
"mediaVolume",
"sound_masterVolume",
"sound_note",
"sound_noteMy",
"sound_notification",
"sound_chat",
"sound_chatBg",
"sound_antenna",
"sound_channel",
"lightTheme",
"darkTheme",
"syncDeviceDarkMode",
"plugins",
"mediaVolume",
"sound_masterVolume",
"sound_note",
"sound_noteMy",
"sound_notification",
"sound_chat",
"sound_chatBg",
"sound_antenna",
"sound_channel",
];
const scope = ["clientPreferencesProfiles"];
const profileProps = [
"name",
"createdAt",
"updatedAt",
"misskeyVersion",
"settings",
"name",
"createdAt",
"updatedAt",
"misskeyVersion",
"settings",
];
type Profile = {
name: string;
createdAt: string;
updatedAt: string | null;
misskeyVersion: string;
host: string;
settings: {
hot: Record<keyof typeof defaultStoreSaveKeys, unknown>;
cold: Record<keyof typeof coldDeviceStorageSaveKeys, unknown>;
fontSize: string | null;
useSystemFont: "t" | null;
wallpaper: string | null;
};
name: string;
createdAt: string;
updatedAt: string | null;
misskeyVersion: string;
host: string;
settings: {
hot: Record<keyof typeof defaultStoreSaveKeys, unknown>;
cold: Record<keyof typeof coldDeviceStorageSaveKeys, unknown>;
fontSize: string | null;
useSystemFont: "t" | null;
wallpaper: string | null;
};
};
const connection = $i && stream.useChannel("main");
@ -163,375 +163,375 @@ const connection = $i && stream.useChannel("main");
let profiles = $ref<Record<string, Profile> | null>(null);
os.api("i/registry/get-all", { scope }).then((res) => {
profiles = res || {};
profiles = res || {};
});
function isObject(value: unknown): value is Record<string, unknown> {
return value != null && typeof value === "object" && !Array.isArray(value);
return value != null && typeof value === "object" && !Array.isArray(value);
}
function validate(profile: unknown): void {
if (!isObject(profile)) throw new Error("not an object");
if (!isObject(profile)) throw new Error("not an object");
// Check if unnecessary properties exist
if (
Object.keys(profile).some(
(key) => !profileProps.includes(key) && key !== "host"
)
)
throw new Error("Unnecessary properties exist");
// Check if unnecessary properties exist
if (
Object.keys(profile).some(
(key) => !profileProps.includes(key) && key !== "host"
)
)
throw new Error("Unnecessary properties exist");
if (!profile.name) throw new Error("Missing required prop: name");
if (!profile.misskeyVersion)
throw new Error("Missing required prop: misskeyVersion");
if (!profile.name) throw new Error("Missing required prop: name");
if (!profile.misskeyVersion)
throw new Error("Missing required prop: misskeyVersion");
// Check if createdAt and updatedAt is Date
// https://zenn.dev/lollipop_onl/articles/eoz-judge-js-invalid-date
if (
!profile.createdAt ||
Number.isNaN(new Date(profile.createdAt).getTime())
)
throw new Error("createdAt is falsy or not Date");
if (profile.updatedAt) {
if (Number.isNaN(new Date(profile.updatedAt).getTime())) {
throw new Error("updatedAt is not Date");
}
} else if (profile.updatedAt !== null) {
throw new Error("updatedAt is not null");
}
// Check if createdAt and updatedAt is Date
// https://zenn.dev/lollipop_onl/articles/eoz-judge-js-invalid-date
if (
!profile.createdAt ||
Number.isNaN(new Date(profile.createdAt).getTime())
)
throw new Error("createdAt is falsy or not Date");
if (profile.updatedAt) {
if (Number.isNaN(new Date(profile.updatedAt).getTime())) {
throw new Error("updatedAt is not Date");
}
} else if (profile.updatedAt !== null) {
throw new Error("updatedAt is not null");
}
if (!profile.settings) throw new Error("Missing required prop: settings");
if (!isObject(profile.settings)) throw new Error("Invalid prop: settings");
if (!profile.settings) throw new Error("Missing required prop: settings");
if (!isObject(profile.settings)) throw new Error("Invalid prop: settings");
}
function getSettings(): Profile["settings"] {
const hot = {} as Record<keyof typeof defaultStoreSaveKeys, unknown>;
for (const key of defaultStoreSaveKeys) {
hot[key] = defaultStore.state[key];
}
const hot = {} as Record<keyof typeof defaultStoreSaveKeys, unknown>;
for (const key of defaultStoreSaveKeys) {
hot[key] = defaultStore.state[key];
}
const cold = {} as Record<keyof typeof coldDeviceStorageSaveKeys, unknown>;
for (const key of coldDeviceStorageSaveKeys) {
cold[key] = ColdDeviceStorage.get(key);
}
const cold = {} as Record<keyof typeof coldDeviceStorageSaveKeys, unknown>;
for (const key of coldDeviceStorageSaveKeys) {
cold[key] = ColdDeviceStorage.get(key);
}
return {
hot,
cold,
fontSize: localStorage.getItem("fontSize"),
useSystemFont: localStorage.getItem("useSystemFont") as "t" | null,
wallpaper: localStorage.getItem("wallpaper"),
};
return {
hot,
cold,
fontSize: localStorage.getItem("fontSize"),
useSystemFont: localStorage.getItem("useSystemFont") as "t" | null,
wallpaper: localStorage.getItem("wallpaper"),
};
}
async function saveNew(): Promise<void> {
if (!profiles) return;
if (!profiles) return;
const { canceled, result: name } = await os.inputText({
title: ts._preferencesBackups.inputName,
});
if (canceled) return;
const { canceled, result: name } = await os.inputText({
title: ts._preferencesBackups.inputName,
});
if (canceled) return;
if (Object.values(profiles).some((x) => x.name === name)) {
return os.alert({
title: ts._preferencesBackups.cannotSave,
text: t("_preferencesBackups.nameAlreadyExists", { name }),
});
}
if (Object.values(profiles).some((x) => x.name === name)) {
return os.alert({
title: ts._preferencesBackups.cannotSave,
text: t("_preferencesBackups.nameAlreadyExists", { name }),
});
}
const id = uuid();
const profile: Profile = {
name,
createdAt: new Date().toISOString(),
updatedAt: null,
misskeyVersion: version,
host,
settings: getSettings(),
};
await os.apiWithDialog("i/registry/set", {
scope,
key: id,
value: profile,
});
const id = uuid();
const profile: Profile = {
name,
createdAt: new Date().toISOString(),
updatedAt: null,
misskeyVersion: version,
host,
settings: getSettings(),
};
await os.apiWithDialog("i/registry/set", {
scope,
key: id,
value: profile,
});
}
function loadFile(): void {
const input = document.createElement("input");
input.type = "file";
input.multiple = false;
input.onchange = async () => {
if (!profiles) return;
if (!input.files || input.files.length === 0) return;
const input = document.createElement("input");
input.type = "file";
input.multiple = false;
input.onchange = async () => {
if (!profiles) return;
if (!input.files || input.files.length === 0) return;
const file = input.files[0];
const file = input.files[0];
if (file.type !== "application/json") {
return os.alert({
type: "error",
title: ts._preferencesBackups.cannotLoad,
text: ts._preferencesBackups.invalidFile,
});
}
if (file.type !== "application/json") {
return os.alert({
type: "error",
title: ts._preferencesBackups.cannotLoad,
text: ts._preferencesBackups.invalidFile,
});
}
let profile: Profile;
try {
profile = JSON.parse(await file.text()) as unknown as Profile;
validate(profile);
} catch (err) {
return os.alert({
type: "error",
title: ts._preferencesBackups.cannotLoad,
text: err?.message,
});
}
let profile: Profile;
try {
profile = JSON.parse(await file.text()) as unknown as Profile;
validate(profile);
} catch (err) {
return os.alert({
type: "error",
title: ts._preferencesBackups.cannotLoad,
text: err?.message,
});
}
const id = uuid();
await os.apiWithDialog("i/registry/set", {
scope,
key: id,
value: profile,
});
const id = uuid();
await os.apiWithDialog("i/registry/set", {
scope,
key: id,
value: profile,
});
// 一応廃棄
(window as any).__misskey_input_ref__ = null;
};
// 一応廃棄
(window as any).__misskey_input_ref__ = null;
};
// https://qiita.com/fukasawah/items/b9dc732d95d99551013d
// iOS Safari で正常に動かす為のおまじない
(window as any).__misskey_input_ref__ = input;
// https://qiita.com/fukasawah/items/b9dc732d95d99551013d
// iOS Safari で正常に動かす為のおまじない
(window as any).__misskey_input_ref__ = input;
input.click();
input.click();
}
async function applyProfile(id: string): Promise<void> {
if (!profiles) return;
if (!profiles) return;
const profile = profiles[id];
const profile = profiles[id];
const { canceled: cancel1 } = await os.confirm({
type: "warning",
title: ts._preferencesBackups.apply,
text: t("_preferencesBackups.applyConfirm", { name: profile.name }),
});
if (cancel1) return;
const { canceled: cancel1 } = await os.confirm({
type: "warning",
title: ts._preferencesBackups.apply,
text: t("_preferencesBackups.applyConfirm", { name: profile.name }),
});
if (cancel1) return;
// TODO: バージョン or ホストが違ったらさらに警告を表示
// TODO: バージョン or ホストが違ったらさらに警告を表示
const settings = profile.settings;
const settings = profile.settings;
// defaultStore
for (const key of defaultStoreSaveKeys) {
if (settings.hot[key] !== undefined) {
defaultStore.set(key, settings.hot[key]);
}
}
// defaultStore
for (const key of defaultStoreSaveKeys) {
if (settings.hot[key] !== undefined) {
defaultStore.set(key, settings.hot[key]);
}
}
// coldDeviceStorage
for (const key of coldDeviceStorageSaveKeys) {
if (settings.cold[key] !== undefined) {
ColdDeviceStorage.set(key, settings.cold[key]);
}
}
// coldDeviceStorage
for (const key of coldDeviceStorageSaveKeys) {
if (settings.cold[key] !== undefined) {
ColdDeviceStorage.set(key, settings.cold[key]);
}
}
// fontSize
if (settings.fontSize) {
localStorage.setItem("fontSize", settings.fontSize);
} else {
localStorage.removeItem("fontSize");
}
// fontSize
if (settings.fontSize) {
localStorage.setItem("fontSize", settings.fontSize);
} else {
localStorage.removeItem("fontSize");
}
// useSystemFont
if (settings.useSystemFont) {
localStorage.setItem("useSystemFont", settings.useSystemFont);
} else {
localStorage.removeItem("useSystemFont");
}
// useSystemFont
if (settings.useSystemFont) {
localStorage.setItem("useSystemFont", settings.useSystemFont);
} else {
localStorage.removeItem("useSystemFont");
}
// wallpaper
if (settings.wallpaper != null) {
localStorage.setItem("wallpaper", settings.wallpaper);
} else {
localStorage.removeItem("wallpaper");
}
// wallpaper
if (settings.wallpaper != null) {
localStorage.setItem("wallpaper", settings.wallpaper);
} else {
localStorage.removeItem("wallpaper");
}
const { canceled: cancel2 } = await os.confirm({
type: "info",
text: ts.reloadToApplySetting,
});
if (cancel2) return;
const { canceled: cancel2 } = await os.confirm({
type: "info",
text: ts.reloadToApplySetting,
});
if (cancel2) return;
unisonReload();
unisonReload();
}
async function deleteProfile(id: string): Promise<void> {
if (!profiles) return;
if (!profiles) return;
const { canceled } = await os.confirm({
type: "info",
title: ts.delete,
text: t("deleteAreYouSure", { x: profiles[id].name }),
});
if (canceled) return;
const { canceled } = await os.confirm({
type: "info",
title: ts.delete,
text: t("deleteAreYouSure", { x: profiles[id].name }),
});
if (canceled) return;
await os.apiWithDialog("i/registry/remove", { scope, key: id });
delete profiles[id];
await os.apiWithDialog("i/registry/remove", { scope, key: id });
delete profiles[id];
}
async function save(id: string): Promise<void> {
if (!profiles) return;
if (!profiles) return;
const { name, createdAt } = profiles[id];
const { name, createdAt } = profiles[id];
const { canceled } = await os.confirm({
type: "info",
title: ts._preferencesBackups.save,
text: t("_preferencesBackups.saveConfirm", { name }),
});
if (canceled) return;
const { canceled } = await os.confirm({
type: "info",
title: ts._preferencesBackups.save,
text: t("_preferencesBackups.saveConfirm", { name }),
});
if (canceled) return;
const profile: Profile = {
name,
createdAt,
updatedAt: new Date().toISOString(),
misskeyVersion: version,
host,
settings: getSettings(),
};
await os.apiWithDialog("i/registry/set", {
scope,
key: id,
value: profile,
});
const profile: Profile = {
name,
createdAt,
updatedAt: new Date().toISOString(),
misskeyVersion: version,
host,
settings: getSettings(),
};
await os.apiWithDialog("i/registry/set", {
scope,
key: id,
value: profile,
});
}
async function rename(id: string): Promise<void> {
if (!profiles) return;
if (!profiles) return;
const { canceled: cancel1, result: name } = await os.inputText({
title: ts._preferencesBackups.inputName,
});
if (cancel1 || profiles[id].name === name) return;
const { canceled: cancel1, result: name } = await os.inputText({
title: ts._preferencesBackups.inputName,
});
if (cancel1 || profiles[id].name === name) return;
if (Object.values(profiles).some((x) => x.name === name)) {
return os.alert({
title: ts._preferencesBackups.cannotSave,
text: t("_preferencesBackups.nameAlreadyExists", { name }),
});
}
if (Object.values(profiles).some((x) => x.name === name)) {
return os.alert({
title: ts._preferencesBackups.cannotSave,
text: t("_preferencesBackups.nameAlreadyExists", { name }),
});
}
const registry = Object.assign({}, { ...profiles[id] });
const registry = Object.assign({}, { ...profiles[id] });
const { canceled: cancel2 } = await os.confirm({
type: "info",
title: ts._preferencesBackups.rename,
text: t("_preferencesBackups.renameConfirm", {
old: registry.name,
new: name,
}),
});
if (cancel2) return;
const { canceled: cancel2 } = await os.confirm({
type: "info",
title: ts._preferencesBackups.rename,
text: t("_preferencesBackups.renameConfirm", {
old: registry.name,
new: name,
}),
});
if (cancel2) return;
registry.name = name;
await os.apiWithDialog("i/registry/set", {
scope,
key: id,
value: registry,
});
registry.name = name;
await os.apiWithDialog("i/registry/set", {
scope,
key: id,
value: registry,
});
}
function menu(ev: MouseEvent, profileId: string) {
if (!profiles) return;
if (!profiles) return;
return os.popupMenu(
[
{
text: ts._preferencesBackups.apply,
icon: "ph-caret-circle-down ph-bold ph-lg",
action: () => applyProfile(profileId),
},
{
type: "a",
text: ts.download,
icon: "ph-download-simple ph-bold ph-lg",
href: URL.createObjectURL(
new Blob([JSON.stringify(profiles[profileId], null, 2)], {
type: "application/json",
})
),
download: `${profiles[profileId].name}.json`,
},
null,
{
text: ts.rename,
icon: "ph-cursor-text ph-bold ph-lg",
action: () => rename(profileId),
},
{
text: ts._preferencesBackups.save,
icon: "ph-floppy-disk ph-bold ph-lg",
action: () => save(profileId),
},
null,
{
text: ts._preferencesBackups.delete,
icon: "ph-trash ph-bold ph-lg",
action: () => deleteProfile(profileId),
danger: true,
},
],
ev.currentTarget ?? ev.target
);
return os.popupMenu(
[
{
text: ts._preferencesBackups.apply,
icon: "ph-caret-circle-down ph-bold ph-lg",
action: () => applyProfile(profileId),
},
{
type: "a",
text: ts.download,
icon: "ph-download-simple ph-bold ph-lg",
href: URL.createObjectURL(
new Blob([JSON.stringify(profiles[profileId], null, 2)], {
type: "application/json",
})
),
download: `${profiles[profileId].name}.json`,
},
null,
{
text: ts.rename,
icon: "ph-cursor-text ph-bold ph-lg",
action: () => rename(profileId),
},
{
text: ts._preferencesBackups.save,
icon: "ph-floppy-disk ph-bold ph-lg",
action: () => save(profileId),
},
null,
{
text: ts._preferencesBackups.delete,
icon: "ph-trash ph-bold ph-lg",
action: () => deleteProfile(profileId),
danger: true,
},
],
ev.currentTarget ?? ev.target
);
}
onMounted(() => {
// streamingのuser storage updateイベントを監視して更新
connection?.on(
"registryUpdated",
({ scope: recievedScope, key, value }) => {
if (
!recievedScope ||
recievedScope.length !== scope.length ||
recievedScope[0] !== scope[0]
)
return;
if (!profiles) return;
// streamingのuser storage updateイベントを監視して更新
connection?.on(
"registryUpdated",
({ scope: recievedScope, key, value }) => {
if (
!recievedScope ||
recievedScope.length !== scope.length ||
recievedScope[0] !== scope[0]
)
return;
if (!profiles) return;
profiles[key] = value;
}
);
profiles[key] = value;
}
);
});
onUnmounted(() => {
connection?.off("registryUpdated");
connection?.off("registryUpdated");
});
definePageMetadata(
computed(() => ({
title: ts.preferencesBackups,
icon: "ph-floppy-disk ph-bold ph-lg",
bg: "var(--bg)",
}))
computed(() => ({
title: ts.preferencesBackups,
icon: "ph-floppy-disk ph-bold ph-lg",
bg: "var(--bg)",
}))
);
</script>
<style lang="scss" module>
.buttons {
display: flex;
gap: var(--margin);
flex-wrap: wrap;
display: flex;
gap: var(--margin);
flex-wrap: wrap;
}
.profile {
padding: 20px;
cursor: pointer;
padding: 20px;
cursor: pointer;
&Name {
font-weight: 700;
}
&Name {
font-weight: 700;
}
&Time {
font-size: 0.85em;
opacity: 0.7;
}
&Time {
font-size: 0.85em;
opacity: 0.7;
}
}
</style>

824
fe_calckey/frontend/client/src/store.ts
View File

@ -1,6 +1,10 @@
import { markRaw, ref } from "vue";
import { Storage } from "./pizzax";
import { Theme } from "./scripts/theme";
/**
* 常にメモリにロードしておく必要がないような設定情報を保管するストレージ(非リアクティブ)
*/
import lightTheme from "@/themes/l-rosepinedawn.json5";
import darkTheme from "@/themes/d-rosepine.json5";
export const postFormActions = [];
export const userActions = [];
@ -9,334 +13,330 @@ export const noteViewInterruptors = [];
export const notePostInterruptors = [];
const menuOptions = [
"notifications",
"followRequests",
"explore",
"favorites",
"search",
"notifications",
"followRequests",
"explore",
"favorites",
"search",
];
// TODO: それぞれいちいちwhereとかdefaultというキーを付けなきゃいけないの冗長なのでなんとかする(ただ型定義が面倒になりそう)
// あと、現行の定義の仕方なら「whereが何であるかに関わらずキー名の重複不可」という制約を付けられるメリットもあるからそのメリットを引き継ぐ方法も考えないといけない
export const defaultStore = markRaw(
new Storage("base", {
tutorial: {
where: "account",
default: 0,
},
tlHomeHintClosed: {
where: "device",
default: false,
},
tlLocalHintClosed: {
where: "device",
default: false,
},
tlRecommendedHintClosed: {
where: "device",
default: false,
},
tlSocialHintClosed: {
where: "device",
default: false,
},
tlGlobalHintClosed: {
where: "device",
default: false,
},
keepCw: {
where: "account",
default: true,
},
showFullAcct: {
where: "account",
default: false,
},
rememberNoteVisibility: {
where: "account",
default: false,
},
defaultNoteVisibility: {
where: "account",
default: "public",
},
defaultNoteLocalOnly: {
where: "account",
default: false,
},
uploadFolder: {
where: "account",
default: null as string | null,
},
pastedFileName: {
where: "account",
default: "yyyy-MM-dd HH-mm-ss [{{number}}]",
},
keepOriginalUploading: {
where: "account",
default: false,
},
memo: {
where: "account",
default: null,
},
reactions: {
where: "account",
default: [
"⭐",
"❤️",
"😆",
"🤔",
"😮",
"🎉",
"💢",
"😥",
"😇",
"🦋",
"🦊",
],
},
mutedWords: {
where: "account",
default: [],
},
mutedAds: {
where: "account",
default: [] as string[],
},
showAds: {
where: "account",
default: true,
},
menu: {
where: "deviceAccount",
default: menuOptions,
},
visibility: {
where: "deviceAccount",
default: "public" as "public" | "home" | "followers" | "specified",
},
localOnly: {
where: "deviceAccount",
default: false,
},
statusbars: {
where: "deviceAccount",
default: [] as {
name: string;
id: string;
type: string;
size: "verySmall" | "small" | "medium" | "large" | "veryLarge";
black: boolean;
props: Record<string, any>;
}[],
},
widgets: {
where: "deviceAccount",
default: [] as {
name: string;
id: string;
place: string | null;
data: Record<string, any>;
}[],
},
tl: {
where: "deviceAccount",
default: {
src: "home" as "home" | "local" | "social" | "global",
arg: null,
},
},
new Storage("base", {
tutorial: {
where: "account",
default: 0,
},
tlHomeHintClosed: {
where: "device",
default: false,
},
tlLocalHintClosed: {
where: "device",
default: false,
},
tlRecommendedHintClosed: {
where: "device",
default: false,
},
tlSocialHintClosed: {
where: "device",
default: false,
},
tlGlobalHintClosed: {
where: "device",
default: false,
},
keepCw: {
where: "account",
default: true,
},
showFullAcct: {
where: "account",
default: false,
},
rememberNoteVisibility: {
where: "account",
default: false,
},
defaultNoteVisibility: {
where: "account",
default: "public",
},
defaultNoteLocalOnly: {
where: "account",
default: false,
},
uploadFolder: {
where: "account",
default: null as string | null,
},
pastedFileName: {
where: "account",
default: "yyyy-MM-dd HH-mm-ss [{{number}}]",
},
keepOriginalUploading: {
where: "account",
default: false,
},
memo: {
where: "account",
default: null,
},
reactions: {
where: "account",
default: [
"⭐",
"❤️",
"😆",
"🤔",
"😮",
"🎉",
"💢",
"😥",
"😇",
"🦋",
"🦊",
],
},
mutedWords: {
where: "account",
default: [],
},
mutedAds: {
where: "account",
default: [] as string[],
},
showAds: {
where: "account",
default: true,
},
menu: {
where: "deviceAccount",
default: menuOptions,
},
visibility: {
where: "deviceAccount",
default: "public" as "public" | "home" | "followers" | "specified",
},
localOnly: {
where: "deviceAccount",
default: false,
},
statusbars: {
where: "deviceAccount",
default: [] as {
name: string;
id: string;
type: string;
size: "verySmall" | "small" | "medium" | "large" | "veryLarge";
black: boolean;
props: Record<string, any>;
}[],
},
widgets: {
where: "deviceAccount",
default: [] as {
name: string;
id: string;
place: string | null;
data: Record<string, any>;
}[],
},
tl: {
where: "deviceAccount",
default: {
src: "home" as "home" | "local" | "social" | "global",
arg: null,
},
},
overridedDeviceKind: {
where: "device",
default: null as null | "smartphone" | "tablet" | "desktop",
},
serverDisconnectedBehavior: {
where: "device",
default: "nothing" as "nothing" | "quiet" | "reload" | "dialog",
},
seperateRenoteQuote: {
where: "device",
default: true,
},
expandOnNoteClick: {
where: "device",
default: true,
},
nsfw: {
where: "device",
default: "respect" as "respect" | "force" | "ignore",
},
animation: {
where: "device",
default: true,
},
advancedMfm: {
where: "device",
default: true,
},
animatedMfm: {
where: "device",
default: true,
},
animatedMfmWarnShown: {
where: "device",
default: false,
},
loadRawImages: {
where: "device",
default: false,
},
imageNewTab: {
where: "device",
default: false,
},
disableShowingAnimatedImages: {
where: "device",
default: false,
},
disablePagesScript: {
where: "device",
default: false,
},
useOsNativeEmojis: {
where: "device",
default: false,
},
disableDrawer: {
where: "device",
default: false,
},
useBlurEffectForModal: {
where: "device",
default: true,
},
useBlurEffect: {
where: "device",
default: true,
},
showFixedPostForm: {
where: "device",
default: false,
},
enableInfiniteScroll: {
where: "device",
default: true,
},
useReactionPickerForContextMenu: {
where: "device",
default: false,
},
showGapBetweenNotesInTimeline: {
where: "device",
default: true,
},
darkMode: {
where: "device",
default: false,
},
instanceTicker: {
where: "device",
default: "remote" as "none" | "remote" | "always",
},
reactionPickerSkinTone: {
where: "account",
default: 1,
},
reactionPickerSize: {
where: "device",
default: 3,
},
reactionPickerWidth: {
where: "device",
default: 3,
},
reactionPickerHeight: {
where: "device",
default: 3,
},
reactionPickerUseDrawerForMobile: {
where: "device",
default: true,
},
recentlyUsedEmojis: {
where: "device",
default: [] as string[],
},
recentlyUsedUsers: {
where: "device",
default: [] as string[],
},
defaultSideView: {
where: "device",
default: false,
},
menuDisplay: {
where: "device",
default: "sideFull" as "sideFull" | "sideIcon" | "top",
},
reportError: {
where: "device",
default: false,
},
squareAvatars: {
where: "device",
default: true,
},
postFormWithHashtags: {
where: "device",
default: false,
},
postFormHashtags: {
where: "device",
default: "",
},
themeInitial: {
where: "device",
default: true,
},
numberOfPageCache: {
where: "device",
default: 5,
},
enterSendsMessage: {
where: "device",
default: true,
},
showUpdates: {
where: "device",
default: true,
},
swipeOnDesktop: {
where: "device",
default: false,
},
showAdminUpdates: {
where: "account",
default: true,
},
woozyMode: {
where: "device",
default: false,
},
enableCustomKaTeXMacro: {
where: "device",
default: false,
},
enableEmojiReactions: {
where: "account",
default: true,
},
showEmojisInReactionNotifications: {
where: "account",
default: true,
},
showTimelineReplies: {
where: "device",
default: true,
},
}),
overridedDeviceKind: {
where: "device",
default: null as null | "smartphone" | "tablet" | "desktop",
},
serverDisconnectedBehavior: {
where: "device",
default: "nothing" as "nothing" | "quiet" | "reload" | "dialog",
},
seperateRenoteQuote: {
where: "device",
default: true,
},
expandOnNoteClick: {
where: "device",
default: true,
},
nsfw: {
where: "device",
default: "respect" as "respect" | "force" | "ignore",
},
animation: {
where: "device",
default: true,
},
advancedMfm: {
where: "device",
default: true,
},
animatedMfm: {
where: "device",
default: true,
},
animatedMfmWarnShown: {
where: "device",
default: false,
},
loadRawImages: {
where: "device",
default: false,
},
imageNewTab: {
where: "device",
default: false,
},
disableShowingAnimatedImages: {
where: "device",
default: false,
},
disablePagesScript: {
where: "device",
default: false,
},
useOsNativeEmojis: {
where: "device",
default: false,
},
disableDrawer: {
where: "device",
default: false,
},
useBlurEffectForModal: {
where: "device",
default: true,
},
useBlurEffect: {
where: "device",
default: true,
},
showFixedPostForm: {
where: "device",
default: false,
},
enableInfiniteScroll: {
where: "device",
default: true,
},
useReactionPickerForContextMenu: {
where: "device",
default: false,
},
showGapBetweenNotesInTimeline: {
where: "device",
default: true,
},
darkMode: {
where: "device",
default: false,
},
instanceTicker: {
where: "device",
default: "remote" as "none" | "remote" | "always",
},
reactionPickerSkinTone: {
where: "account",
default: 1,
},
reactionPickerSize: {
where: "device",
default: 3,
},
reactionPickerWidth: {
where: "device",
default: 3,
},
reactionPickerHeight: {
where: "device",
default: 3,
},
reactionPickerUseDrawerForMobile: {
where: "device",
default: true,
},
recentlyUsedEmojis: {
where: "device",
default: [] as string[],
},
recentlyUsedUsers: {
where: "device",
default: [] as string[],
},
defaultSideView: {
where: "device",
default: false,
},
menuDisplay: {
where: "device",
default: "sideFull" as "sideFull" | "sideIcon" | "top",
},
reportError: {
where: "device",
default: false,
},
squareAvatars: {
where: "device",
default: true,
},
postFormWithHashtags: {
where: "device",
default: false,
},
postFormHashtags: {
where: "device",
default: "",
},
themeInitial: {
where: "device",
default: true,
},
numberOfPageCache: {
where: "device",
default: 5,
},
enterSendsMessage: {
where: "device",
default: true,
},
showUpdates: {
where: "device",
default: true,
},
swipeOnDesktop: {
where: "device",
default: false,
},
woozyMode: {
where: "device",
default: false,
},
enableCustomKaTeXMacro: {
where: "device",
default: false,
},
enableEmojiReactions: {
where: "account",
default: true,
},
showEmojisInReactionNotifications: {
where: "account",
default: true,
},
showTimelineReplies: {
where: "device",
default: true,
},
})
);
// TODO: 他のタブと永続化されたstateを同期
@ -344,110 +344,106 @@ export const defaultStore = markRaw(
const PREFIX = "miux:";
type Plugin = {
id: string;
name: string;
active: boolean;
configData: Record<string, any>;
token: string;
ast: any[];
id: string;
name: string;
active: boolean;
configData: Record<string, any>;
token: string;
ast: any[];
};
/**
* 常にメモリにロードしておく必要がないような設定情報を保管するストレージ(非リアクティブ)
*/
import lightTheme from "@/themes/l-rosepinedawn.json5";
import darkTheme from "@/themes/d-rosepine.json5";
export class ColdDeviceStorage {
public static default = {
lightTheme,
darkTheme,
syncDeviceDarkMode: true,
plugins: [] as Plugin[],
mediaVolume: 0.5,
sound_masterVolume: 0.3,
sound_note: { type: "none", volume: 0 },
sound_noteMy: { type: "syuilo/up", volume: 1 },
sound_notification: { type: "syuilo/pope2", volume: 1 },
sound_chat: { type: "syuilo/pope1", volume: 1 },
sound_chatBg: { type: "syuilo/waon", volume: 1 },
sound_antenna: { type: "syuilo/triple", volume: 1 },
sound_channel: { type: "syuilo/square-pico", volume: 1 },
};
public static default = {
lightTheme,
darkTheme,
syncDeviceDarkMode: true,
plugins: [] as Plugin[],
mediaVolume: 0.5,
sound_masterVolume: 0.3,
sound_note: { type: "none", volume: 0 },
sound_noteMy: { type: "syuilo/up", volume: 1 },
sound_notification: { type: "syuilo/pope2", volume: 1 },
sound_chat: { type: "syuilo/pope1", volume: 1 },
sound_chatBg: { type: "syuilo/waon", volume: 1 },
sound_antenna: { type: "syuilo/triple", volume: 1 },
sound_channel: { type: "syuilo/square-pico", volume: 1 },
};
public static watchers = [];
public static watchers = [];
public static get<T extends keyof typeof ColdDeviceStorage.default>(
key: T,
): typeof ColdDeviceStorage.default[T] {
// TODO: indexedDBにする
// ただしその際はnullチェックではなくキー存在チェックにしないとダメ
// (indexedDBはnullを保存できるため、ユーザーが意図してnullを格納した可能性がある)
const value = localStorage.getItem(PREFIX + key);
if (value == null) {
return ColdDeviceStorage.default[key];
} else {
return JSON.parse(value);
}
}
public static get<T extends keyof typeof ColdDeviceStorage.default>(
key: T
): (typeof ColdDeviceStorage.default)[T] {
// TODO: indexedDBにする
// ただしその際はnullチェックではなくキー存在チェックにしないとダメ
// (indexedDBはnullを保存できるため、ユーザーが意図してnullを格納した可能性がある)
const value = localStorage.getItem(PREFIX + key);
if (value == null) {
return ColdDeviceStorage.default[key];
} else {
return JSON.parse(value);
}
}
public static set<T extends keyof typeof ColdDeviceStorage.default>(
key: T,
value: typeof ColdDeviceStorage.default[T],
): void {
// 呼び出し側のバグ等で undefined が来ることがある
// undefined を文字列として localStorage に入れると参照する際の JSON.parse でコケて不具合の元になるため無視
if (value === undefined) {
console.error(`attempt to store undefined value for key '${key}'`);
return;
}
public static set<T extends keyof typeof ColdDeviceStorage.default>(
key: T,
value: (typeof ColdDeviceStorage.default)[T]
): void {
// 呼び出し側のバグ等で undefined が来ることがある
// undefined を文字列として localStorage に入れると参照する際の JSON.parse でコケて不具合の元になるため無視
if (value === undefined) {
console.error(`attempt to store undefined value for key '${key}'`);
return;
}
localStorage.setItem(PREFIX + key, JSON.stringify(value));
localStorage.setItem(PREFIX + key, JSON.stringify(value));
for (const watcher of this.watchers) {
if (watcher.key === key) watcher.callback(value);
}
}
for (const watcher of this.watchers) {
if (watcher.key === key) watcher.callback(value);
}
}
public static watch(key, callback) {
this.watchers.push({ key, callback });
}
public static watch(key, callback) {
this.watchers.push({ key, callback });
}
// TODO: VueのcustomRef使うと良い感じになるかも
public static ref<T extends keyof typeof ColdDeviceStorage.default>(key: T) {
const v = ColdDeviceStorage.get(key);
const r = ref(v);
// TODO: このままではwatcherがリークするので開放する方法を考える
this.watch(key, (v) => {
r.value = v;
});
return r;
}
// TODO: VueのcustomRef使うと良い感じになるかも
public static ref<T extends keyof typeof ColdDeviceStorage.default>(
key: T
) {
const v = ColdDeviceStorage.get(key);
const r = ref(v);
// TODO: このままではwatcherがリークするので開放する方法を考える
this.watch(key, (v) => {
r.value = v;
});
return r;
}
/**
* 特定のキーの、簡易的なgetter/setterを作ります
* 主にvue場で設定コントロールのmodelとして使う用
*/
public static makeGetterSetter<
K extends keyof typeof ColdDeviceStorage.default,
>(key: K) {
// TODO: VueのcustomRef使うと良い感じになるかも
const valueRef = ColdDeviceStorage.ref(key);
return {
get: () => {
return valueRef.value;
},
set: (value: unknown) => {
const val = value;
ColdDeviceStorage.set(key, val);
},
};
}
/**
* 特定のキーの、簡易的なgetter/setterを作ります
* 主にvue場で設定コントロールのmodelとして使う用
*/
public static makeGetterSetter<
K extends keyof typeof ColdDeviceStorage.default
>(key: K) {
// TODO: VueのcustomRef使うと良い感じになるかも
const valueRef = ColdDeviceStorage.ref(key);
return {
get: () => {
return valueRef.value;
},
set: (value: unknown) => {
const val = value;
ColdDeviceStorage.set(key, val);
},
};
}
}
// このファイルに書きたくないけどここに書かないと何故かVeturが認識しない
declare module "@vue/runtime-core" {
interface ComponentCustomProperties {
$store: typeof defaultStore;
}
interface ComponentCustomProperties {
$store: typeof defaultStore;
}
}

1067
fe_calckey/frontend/client/src/ui/_common_/navbar.vue
View File

File diff suppressed because it is too large Load Diff