Merge branch 'develop' into chat

CHANGELOG.md

@@ -6,10 +6,19 @@
 
 ### Client
 - Feat: 設定の管理が強化されました
-  - 自動でバックアップされるように
+  - 全てのクライアント設定がエクスポート(バックアップ)/インポート対象に含まれるようになりました
+    - クライアントに追加されたすべてのアカウント情報も含まれるようになりました
+  - 自動で設定データをサーバーにバックアップできるように
+    - 設定→設定のプロファイル→自動バックアップ で有効にできます
+    - 新しいデバイスからログインしたり、ブラウザから設定データが消えてしまったときに自動で復元されます(復元をスキップすることも可能)
   - 任意の設定項目をデバイス間で同期できるように
+    - 設定項目の「...」メニュー→「デバイス間で同期」
+  - 任意の設定項目を初期値にリセットできるように
   - アカウントごとに設定値が分離される設定とそうでないクライアント設定が混在していた(かつ分離するかどうかを設定不可だった)のを、基本的に一律でクライアント全体に適用されるようにし、個別でアカウントごとに異なる設定を行えるように
     - 設定項目の「...」メニュー→「アカウントで上書き」をオンにすることで、設定値をそのアカウントでだけ適用するようにできます
+  - ログアウトすると設定データもブラウザから消去されるようになりプライバシーが向上しました
+    - 再度ログインすればサーバーのバックアップから設定データを復元可能です
+  - エクスポートした設定データを他のサーバーでインポートして適用することが可能になりました
 - Feat: 画面を重ねて表示するオプションを実装(実験的)
 - Enhance: プラグインの管理が強化されました
   - インストール/アンインストール/設定の変更時にリロード不要になりました

packages/frontend/src/components/global/PageWithHeader.vue

@@ -4,11 +4,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkStickyContainer class="_pageScrollable">
-	<template #header><MkPageHeader v-model:tab="tab" :actions="actions" :tabs="tabs"/></template>
-	<slot></slot>
-	<template #footer><slot name="footer"></slot></template>
-</MkStickyContainer>
+<div :class="[$style.root, reversed ? '_pageScrollableReversed' : '_pageScrollable']">
+	<MkStickyContainer>
+		<template #header><MkPageHeader v-model:tab="tab" :actions="actions" :tabs="tabs"/></template>
+		<div :class="$style.body">
+			<slot></slot>
+		</div>
+		<template #footer><slot name="footer"></slot></template>
+	</MkStickyContainer>
+</div>
 </template>
 
 <script lang="ts" setup>
@@ -21,6 +25,7 @@ const props = withDefaults(defineProps<{
 	thin?: boolean;
 	hideTitle?: boolean;
 	displayMyAvatar?: boolean;
+	reversed?: boolean;
 }>(), {
 	tabs: () => ([] as Tab[]),
 });
@@ -29,5 +34,11 @@ const tab = defineModel<string>('tab');
 </script>
 
 <style lang="scss" module>
+.root {
 
+}
+
+.body {
+	min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
+}
 </style>

packages/frontend/src/pages/channel.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs">
-	<MkSpacer :contentMax="700" :class="$style.main">
+	<MkSpacer :contentMax="700">
 		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 			<div v-if="channel && tab === 'overview'" class="_gaps">
 				<div class="_panel" :class="$style.bannerContainer">
@@ -270,10 +270,6 @@ definePage(() => ({
 </script>
 
 <style lang="scss" module>
-.main {
-	min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
-}
-
 .footer {
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));

packages/frontend/src/pages/list.vue

@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</p>
 		</div>
 	</MkSpacer>
-	<MkSpacer v-else-if="list" :contentMax="700" :class="$style.main">
+	<MkSpacer v-else-if="list" :contentMax="700">
 		<div v-if="list" class="members _margin">
 			<div :class="$style.member_text">{{ i18n.ts.members }}</div>
 			<div class="_gaps_s">
@@ -106,10 +106,6 @@ definePage(() => ({
 }));
 </script>
 <style lang="scss" module>
-.main {
-	min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
-}
-
 .userItem {
 	display: flex;
 }

packages/frontend/src/pages/my-lists/list.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <PageWithHeader :actions="headerActions" :tabs="headerTabs">
-	<MkSpacer :contentMax="700" :class="$style.main">
+	<MkSpacer :contentMax="700">
 		<div v-if="list" class="_gaps">
 			<MkFolder>
 				<template #label>{{ i18n.ts.settings }}</template>
@@ -197,10 +197,6 @@ definePage(() => ({
 </script>
 
 <style lang="scss" module>
-.main {
-	min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
-}
-
 .userItem {
 	display: flex;
 }

packages/frontend/src/style.scss

@@ -184,6 +184,15 @@ rt {
 	overscroll-behavior: contain;
 }
 
+._pageScrollableReversed {
+	height: 100%;
+	overflow: auto;
+	overflow-y: scroll;
+	overscroll-behavior: contain;
+	display: flex;
+	flex-direction: column-reverse;
+}
+
 ._indicatorCircle {
 	display: inline-block;
 	width: 1em;