Merge branch 'misskey-dev:develop' into develop

CHANGELOG.md

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

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

@@ -4,11 +4,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkStickyContainer class="_pageScrollable">
+<div :class="[$style.root, reversed ? '_pageScrollableReversed' : '_pageScrollable']">
-	<template #header><MkPageHeader v-model:tab="tab" :actions="actions" :tabs="tabs"/></template>
+	<MkStickyContainer>
-	<slot></slot>
+		<template #header><MkPageHeader v-model:tab="tab" :actions="actions" :tabs="tabs"/></template>
-	<template #footer><slot name="footer"></slot></template>
+		<div :class="$style.body">
-</MkStickyContainer>
+			<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;