From dc27ba6f036c15ff94aaa76b3a6928e97c934fe7 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 24 Jun 2023 12:58:26 +0900
Subject: enhance(frontend): improve ux of deck scroll

Resolve #11007
---
 packages/frontend/src/ui/deck/column.vue | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'packages/frontend/src/ui/deck')

diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index c8d6744a37..f6c5c8de46 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -12,6 +12,7 @@
 		@dragstart="onDragstart"
 		@dragend="onDragend"
 		@contextmenu.prevent.stop="onContextmenu"
+		@wheel="emit('headerWheel', $event)"
 	>
 		<svg viewBox="0 0 256 128" :class="$style.tabShape">
 			<g transform="matrix(6.2431,0,0,6.2431,-677.417,-29.3839)">
@@ -56,6 +57,10 @@ const props = withDefaults(defineProps<{
 	naked: false,
 });
 
+const emit = defineEmits<{
+	(ev: 'headerWheel', ctx: WheelEvent): void;
+}>();
+
 let body = $shallowRef<HTMLDivElement | null>();
 
 let dragging = $ref(false);
-- 
cgit v1.2.3-freya


From 1ab9f096c36da6fcb552a289cdf6e658b434445f Mon Sep 17 00:00:00 2001
From: anatawa12 <anatawa12@icloud.com>
Date: Wed, 5 Jul 2023 13:04:27 +0900
Subject: feat(frontend): deck
 UIのカラムからアンテナ、リストの編集画面を開けるように (#11104)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: add edit antenna button onto deck column

* feat: add edit list button onto deck column

* docs(changelog): add deck UIのカラムのメニューからアンテナとリストの編集画面を開けるようになりました
---
 CHANGELOG.md                                     |  1 +
 locales/index.d.ts                               |  2 ++
 locales/ja-JP.yml                                |  2 ++
 packages/frontend/src/ui/deck/antenna-column.vue | 21 ++++++++++++++++-----
 packages/frontend/src/ui/deck/list-column.vue    | 21 ++++++++++++++++-----
 5 files changed, 37 insertions(+), 10 deletions(-)

(limited to 'packages/frontend/src/ui/deck')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c8fd80063d..c80c21d048 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@
 ### Client
 - Fix: サーバーメトリクスが90度傾いている
 - Fix: sparkle内にリンクを入れるとクリック不能になる問題の修正
+- deck UIのカラムのメニューからアンテナとリストの編集画面を開けるようになりました
 
 ### Server
 - JSON.parse の回数を削減することで、ストリーミングのパフォーマンスを向上しました
diff --git a/locales/index.d.ts b/locales/index.d.ts
index af6b803278..dea00d783f 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -139,8 +139,10 @@ export interface Locale {
     "suspendConfirm": string;
     "unsuspendConfirm": string;
     "selectList": string;
+    "editList": string;
     "selectChannel": string;
     "selectAntenna": string;
+    "editAntenna": string;
     "selectWidget": string;
     "editWidgets": string;
     "editWidgetsExit": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index e7202bfbb5..d9d227a0b6 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -136,8 +136,10 @@ unblockConfirm: "ブロック解除しますか？"
 suspendConfirm: "凍結しますか？"
 unsuspendConfirm: "解凍しますか？"
 selectList: "リストを選択"
+editList: "リストを編集"
 selectChannel: "チャンネルを選択"
 selectAntenna: "アンテナを選択"
+editAntenna: "アンテナを編集"
 selectWidget: "ウィジェットを選択"
 editWidgets: "ウィジェットを編集"
 editWidgetsExit: "編集を終了"
diff --git a/packages/frontend/src/ui/deck/antenna-column.vue b/packages/frontend/src/ui/deck/antenna-column.vue
index d21a9cc580..a1ca32724f 100644
--- a/packages/frontend/src/ui/deck/antenna-column.vue
+++ b/packages/frontend/src/ui/deck/antenna-column.vue
@@ -44,11 +44,22 @@ async function setAntenna() {
 	});
 }
 
-const menu = [{
-	icon: 'ti ti-pencil',
-	text: i18n.ts.selectAntenna,
-	action: setAntenna,
-}];
+function editAntenna() {
+	os.pageWindow('my/antennas/' + props.column.antennaId);
+}
+
+const menu = [
+	{
+		icon: 'ti ti-pencil',
+		text: i18n.ts.selectAntenna,
+		action: setAntenna,
+	},
+	{
+		icon: 'ti ti-settings',
+		text: i18n.ts.editAntenna,
+		action: editAntenna,
+	},
+];
 
 /*
 function focus() {
diff --git a/packages/frontend/src/ui/deck/list-column.vue b/packages/frontend/src/ui/deck/list-column.vue
index f36dc6151c..3d6256c4fd 100644
--- a/packages/frontend/src/ui/deck/list-column.vue
+++ b/packages/frontend/src/ui/deck/list-column.vue
@@ -42,9 +42,20 @@ async function setList() {
 	});
 }
 
-const menu = [{
-	icon: 'ti ti-pencil',
-	text: i18n.ts.selectList,
-	action: setList,
-}];
+function editList() {
+	os.pageWindow('my/lists/' + props.column.listId);
+}
+
+const menu = [
+	{
+		icon: 'ti ti-pencil',
+		text: i18n.ts.selectList,
+		action: setList,
+	},
+	{
+		icon: 'ti ti-settings',
+		text: i18n.ts.editList,
+		action: editList,
+	},
+];
 </script>
-- 
cgit v1.2.3-freya


From 15683370f0379360c475a9ad77bb802c43f6d181 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 8 Jul 2023 15:30:36 +0900
Subject: fix(frontend): ページ遷移でスクロール位置が保持されない問題を修正
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix #11068
---
 CHANGELOG.md                                      |  9 +++---
 packages/frontend/src/components/MkPageWindow.vue | 10 +++++--
 packages/frontend/src/nirax.ts                    | 36 ++++++++++++++++++-----
 packages/frontend/src/router.ts                   | 31 +------------------
 packages/frontend/src/ui/deck/main-column.vue     | 11 +++++--
 packages/frontend/src/ui/universal.vue            |  3 ++
 6 files changed, 53 insertions(+), 47 deletions(-)

(limited to 'packages/frontend/src/ui/deck')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9b2e54ea47..905c2ea2de 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,15 +19,16 @@
 - サーバーのマシン情報の公開を無効にしてパフォーマンスを向上させることができるようになりました
 
 ### Client
-- Fix: サーバーメトリクスが90度傾いている
-- Fix: 非ログイン時にクレデンシャルが必要なページに行くとエラーが出る問題を修正
-- Fix: sparkle内にリンクを入れるとクリック不能になる問題の修正
-- Fix: ZenUIでポップアップの表示位置がおかしい問題を修正
 - deck UIのカラムのメニューからアンテナとリストの編集画面を開けるように
 - ドライブファイルのメニューで画像をクロップできるように
 - 画像を動画と同様に簡単に隠せるように
 - オリジナル画像を保持せずにアップロードする場合webpでアップロードされるように(Safari以外)
 - 見たことのあるRenoteを省略して表示をオンのときに自分のnoteのrenoteを省略するように
+- Fix: サーバーメトリクスが90度傾いている
+- Fix: 非ログイン時にクレデンシャルが必要なページに行くとエラーが出る問題を修正
+- Fix: sparkle内にリンクを入れるとクリック不能になる問題の修正
+- Fix: ZenUIでポップアップの表示位置がおかしい問題を修正
+- Fix: ページ遷移でスクロール位置が保持されない問題を修正
 
 ### Server
 - JSON.parse の回数を削減することで、ストリーミングのパフォーマンスを向上しました
diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue
index 08de5622f5..6318a9fd70 100644
--- a/packages/frontend/src/components/MkPageWindow.vue
+++ b/packages/frontend/src/components/MkPageWindow.vue
@@ -17,14 +17,14 @@
 		</template>
 	</template>
 
-	<div :class="$style.root" style="container-type: inline-size;">
+	<div ref="contents" :class="$style.root" style="container-type: inline-size;">
 		<RouterView :key="reloadCount" :router="router"/>
 	</div>
 </MkWindow>
 </template>
 
 <script lang="ts" setup>
-import { ComputedRef, onMounted, onUnmounted, provide } from 'vue';
+import { ComputedRef, onMounted, onUnmounted, provide, shallowRef } from 'vue';
 import RouterView from '@/components/global/RouterView.vue';
 import MkWindow from '@/components/MkWindow.vue';
 import { popout as _popout } from '@/scripts/popout';
@@ -32,11 +32,12 @@ import copyToClipboard from '@/scripts/copy-to-clipboard';
 import { url } from '@/config';
 import { mainRouter, routes, page } from '@/router';
 import { $i } from '@/account';
-import { Router } from '@/nirax';
+import { Router, useScrollPositionManager } from '@/nirax';
 import { i18n } from '@/i18n';
 import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
 import { openingWindowsCount } from '@/os';
 import { claimAchievement } from '@/scripts/achievements';
+import { getScrollContainer } from '@/scripts/scroll';
 
 const props = defineProps<{
 	initialPath: string;
@@ -48,6 +49,7 @@ defineEmits<{
 
 const router = new Router(routes, props.initialPath, !!$i, page(() => import('@/pages/not-found.vue')));
 
+const contents = shallowRef<HTMLElement>();
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 let windowEl = $shallowRef<InstanceType<typeof MkWindow>>();
 const history = $ref<{ path: string; key: any; }[]>([{
@@ -139,6 +141,8 @@ function popout() {
 	windowEl.close();
 }
 
+useScrollPositionManager(() => getScrollContainer(contents.value), router);
+
 onMounted(() => {
 	openingWindowsCount.value++;
 	if (openingWindowsCount.value >= 3) {
diff --git a/packages/frontend/src/nirax.ts b/packages/frontend/src/nirax.ts
index 3fa6bd55e2..3a03444de2 100644
--- a/packages/frontend/src/nirax.ts
+++ b/packages/frontend/src/nirax.ts
@@ -1,7 +1,7 @@
 // NIRAX --- A lightweight router
 
 import { EventEmitter } from 'eventemitter3';
-import { Component, shallowRef, ShallowRef } from 'vue';
+import { Component, onMounted, shallowRef, ShallowRef } from 'vue';
 import { safeURIDecode } from '@/scripts/safe-uri-decode';
 
 type RouteDef = {
@@ -267,13 +267,33 @@ export class Router extends EventEmitter<{
 		});
 	}
 
-	public replace(path: string, key?: string | null, emitEvent = true) {
+	public replace(path: string, key?: string | null) {
 		this.navigate(path, key);
-		if (emitEvent) {
-			this.emit('replace', {
-				path,
-				key: this.currentKey,
-			});
-		}
 	}
 }
+
+export function useScrollPositionManager(getScrollContainer: () => HTMLElement, router: Router) {
+	const scrollPosStore = new Map<string, number>();
+
+	onMounted(() => {
+		const scrollContainer = getScrollContainer();
+
+		scrollContainer.addEventListener('scroll', () => {
+			scrollPosStore.set(router.getCurrentKey(), scrollContainer.scrollTop);
+		}, { passive: true });
+
+		router.addListener('change', ctx => {
+			const scrollPos = scrollPosStore.get(ctx.key) ?? 0;
+			scrollContainer.scroll({ top: scrollPos, behavior: 'instant' });
+			if (scrollPos !== 0) {
+				window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
+					scrollContainer.scroll({ top: scrollPos, behavior: 'instant' });
+				}, 100);
+			}
+		});
+
+		router.addListener('same', () => {
+			scrollContainer.scroll({ top: 0, behavior: 'smooth' });
+		});
+	});
+}
diff --git a/packages/frontend/src/router.ts b/packages/frontend/src/router.ts
index 8540d4320f..873b372e0a 100644
--- a/packages/frontend/src/router.ts
+++ b/packages/frontend/src/router.ts
@@ -509,41 +509,12 @@ export const mainRouter = new Router(routes, location.pathname + location.search
 
 window.history.replaceState({ key: mainRouter.getCurrentKey() }, '', location.href);
 
-// TODO: このファイルでスクロール位置も管理する設計だとdeckに対応できないのでなんとかする
-// スクロール位置取得+スクロール位置設定関数をprovideする感じでも良いかも
-
-const scrollPosStore = new Map<string, number>();
-
-window.setInterval(() => {
-	scrollPosStore.set(window.history.state?.key, window.scrollY);
-}, 1000);
-
 mainRouter.addListener('push', ctx => {
 	window.history.pushState({ key: ctx.key }, '', ctx.path);
-	const scrollPos = scrollPosStore.get(ctx.key) ?? 0;
-	window.scroll({ top: scrollPos, behavior: 'instant' });
-	if (scrollPos !== 0) {
-		window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
-			window.scroll({ top: scrollPos, behavior: 'instant' });
-		}, 100);
-	}
-});
-
-mainRouter.addListener('replace', ctx => {
-	window.history.replaceState({ key: ctx.key }, '', ctx.path);
-});
-
-mainRouter.addListener('same', () => {
-	window.scroll({ top: 0, behavior: 'smooth' });
 });
 
 window.addEventListener('popstate', (event) => {
-	mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);
-	const scrollPos = scrollPosStore.get(event.state?.key) ?? 0;
-	window.scroll({ top: scrollPos, behavior: 'instant' });
-	window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
-		window.scroll({ top: scrollPos, behavior: 'instant' });
-	}, 100);
+	mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key);
 });
 
 export function useRouter(): Router {
diff --git a/packages/frontend/src/ui/deck/main-column.vue b/packages/frontend/src/ui/deck/main-column.vue
index 169fac70a2..0413307955 100644
--- a/packages/frontend/src/ui/deck/main-column.vue
+++ b/packages/frontend/src/ui/deck/main-column.vue
@@ -7,24 +7,29 @@
 		</template>
 	</template>
 
-	<RouterView @contextmenu.stop="onContextmenu"/>
+	<div ref="contents">
+		<RouterView @contextmenu.stop="onContextmenu"/>
+	</div>
 </XColumn>
 </template>
 
 <script lang="ts" setup>
-import { ComputedRef, provide } from 'vue';
+import { ComputedRef, provide, shallowRef } from 'vue';
 import XColumn from './column.vue';
 import { deckStore, Column } from '@/ui/deck/deck-store';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { mainRouter } from '@/router';
 import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
+import { useScrollPositionManager } from '@/nirax';
+import { getScrollContainer } from '@/scripts/scroll';
 
 defineProps<{
 	column: Column;
 	isStacked: boolean;
 }>();
 
+const contents = shallowRef<HTMLElement>();
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 
 provide('router', mainRouter);
@@ -61,4 +66,6 @@ function onContextmenu(ev: MouseEvent) {
 		},
 	}], ev);
 }
+
+useScrollPositionManager(() => getScrollContainer(contents.value), mainRouter);
 </script>
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index 8abb20300f..9ae43c39d3 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -95,6 +95,7 @@ import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
 import { miLocalStorage } from '@/local-storage';
 import { CURRENT_STICKY_BOTTOM } from '@/const';
+import { useScrollPositionManager } from '@/nirax';
 
 const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
 const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
@@ -213,6 +214,8 @@ watch($$(navFooter), () => {
 }, {
 	immediate: true,
 });
+
+useScrollPositionManager(() => contents.value.rootEl, mainRouter);
 </script>
 
 <style>
-- 
cgit v1.2.3-freya


From be595ebd628fcdce93fc8e55a6fc7f2796c41c16 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 17 Jul 2023 08:11:17 +0900
Subject: enhance(client):
 Deckで非ルートページにアクセスした際に簡易UIで表示しない設定を追加
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  | 1 +
 locales/index.d.ts                            | 1 +
 locales/ja-JP.yml                             | 1 +
 packages/frontend/src/boot/main-boot.ts       | 3 ++-
 packages/frontend/src/pages/settings/deck.vue | 3 +++
 packages/frontend/src/ui/deck/deck-store.ts   | 4 ++++
 6 files changed, 12 insertions(+), 1 deletion(-)

(limited to 'packages/frontend/src/ui/deck')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 66fa589197..8a57b5ee11 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -36,6 +36,7 @@
 - フォローやお気に入り登録をしていないチャンネルを開く時は概要ページを開くように
 - 画面ビューワをタップした場合、マウスクリックと同様に画像ビューワを閉じるように
 - オフライン時の画面にリロードボタンを追加
+- Deckで非ルートページにアクセスした際に簡易UIで表示しない設定を追加
 - Fix: サーバーメトリクスが90度傾いている
 - Fix: 非ログイン時にクレデンシャルが必要なページに行くとエラーが出る問題を修正
 - Fix: sparkle内にリンクを入れるとクリック不能になる問題の修正
diff --git a/locales/index.d.ts b/locales/index.d.ts
index 082cde078e..66b24890f4 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -2135,6 +2135,7 @@ export interface Locale {
         "introduction": string;
         "introduction2": string;
         "widgetsIntroduction": string;
+        "useSimpleUiForNonRootPages": string;
         "_columns": {
             "main": string;
             "widgets": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index ceff2a7cff..5f728e0e84 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2050,6 +2050,7 @@ _deck:
   introduction: "カラムを組み合わせて自分だけのインターフェイスを作りましょう！"
   introduction2: "画面の右にある + を押して、いつでもカラムを追加できます。"
   widgetsIntroduction: "カラムのメニューから、「ウィジェットの編集」を選択してウィジェットを追加してください"
+  useSimpleUiForNonRootPages: "非ルートページは簡易UIで表示"
 
   _columns:
     main: "メイン"
diff --git a/packages/frontend/src/boot/main-boot.ts b/packages/frontend/src/boot/main-boot.ts
index d2db5e98be..0a351cd6e3 100644
--- a/packages/frontend/src/boot/main-boot.ts
+++ b/packages/frontend/src/boot/main-boot.ts
@@ -13,10 +13,11 @@ import { miLocalStorage } from '@/local-storage';
 import { claimAchievement, claimedAchievements } from '@/scripts/achievements';
 import { mainRouter } from '@/router';
 import { initializeSw } from '@/scripts/initialize-sw';
+import { deckStore } from '@/ui/deck/deck-store';
 
 export async function mainBoot() {
 	const { isClientUpdated } = await common(() => createApp(
-		new URLSearchParams(window.location.search).has('zen') || (ui === 'deck' && location.pathname !== '/') ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
+		new URLSearchParams(window.location.search).has('zen') || (ui === 'deck' && deckStore.state.useSimpleUiForNonRootPages && location.pathname !== '/') ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
 		!$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) :
 		ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) :
 		ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
diff --git a/packages/frontend/src/pages/settings/deck.vue b/packages/frontend/src/pages/settings/deck.vue
index bc0179b3aa..481959fd08 100644
--- a/packages/frontend/src/pages/settings/deck.vue
+++ b/packages/frontend/src/pages/settings/deck.vue
@@ -1,5 +1,7 @@
 <template>
 <div class="_gaps_m">
+	<MkSwitch v-model="useSimpleUiForNonRootPages">{{ i18n.ts._deck.useSimpleUiForNonRootPages }}</MkSwitch>
+
 	<MkSwitch v-model="navWindow">{{ i18n.ts.defaultNavigationBehaviour }}: {{ i18n.ts.openInWindow }}</MkSwitch>
 
 	<MkSwitch v-model="alwaysShowMainColumn">{{ i18n.ts._deck.alwaysShowMainColumn }}</MkSwitch>
@@ -21,6 +23,7 @@ import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
 const navWindow = computed(deckStore.makeGetterSetter('navWindow'));
+const useSimpleUiForNonRootPages = computed(deckStore.makeGetterSetter('useSimpleUiForNonRootPages'));
 const alwaysShowMainColumn = computed(deckStore.makeGetterSetter('alwaysShowMainColumn'));
 const columnAlign = computed(deckStore.makeGetterSetter('columnAlign'));
 
diff --git a/packages/frontend/src/ui/deck/deck-store.ts b/packages/frontend/src/ui/deck/deck-store.ts
index a6784e9849..4601207858 100644
--- a/packages/frontend/src/ui/deck/deck-store.ts
+++ b/packages/frontend/src/ui/deck/deck-store.ts
@@ -52,6 +52,10 @@ export const deckStore = markRaw(new Storage('deck', {
 		where: 'deviceAccount',
 		default: true,
 	},
+	useSimpleUiForNonRootPages: {
+		where: 'deviceAccount',
+		default: true,
+	},
 }));
 
 export const loadDeck = async () => {
-- 
cgit v1.2.3-freya