From 5b0dd48b45da989b8140ac0653b7372d0d0d2117 Mon Sep 17 00:00:00 2001
From: naskya <m@naskya.net>
Date: Thu, 20 Jul 2023 09:35:30 +0000
Subject: [PATCH] feat: ability to replace widgets button with reload button on
 mobile (close #8)

---
 README.md                                      |  2 ++
 locales/en-US.yml                              |  1 +
 locales/ja-JP.yml                              |  1 +
 packages/client/src/pages/settings/general.vue | 11 +++++++++++
 packages/client/src/store.ts                   |  4 ++++
 packages/client/src/ui/universal.vue           | 14 ++++++++++++++
 6 files changed, 33 insertions(+)

diff --git a/README.md b/README.md
index 4775c6af4..c172067c4 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,8 @@
 
 ## 主要な変更点
 
+- モバイル表示の下部のウィジェットボタンを再読み込みボタンに変更可能に
+  - スマートフォンでウィジェットは使わないけど再読み込みはたくさんする人はいそう
 - モバイル表示の下部のチャットボタンをアカウント切り替えボタンに変更可能に
   - これ無しで PWA で複数アカウントを使おうとすると腱鞘炎になる
 - ローカルタイムラインの位置をグローバルタイムラインの直前に移動
diff --git a/locales/en-US.yml b/locales/en-US.yml
index afc4809e0..93549b8eb 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -1131,6 +1131,7 @@ preventMisclick: "Accidental click prevention"
 hideFollowButtons: "Hide follow buttons in notifications and user pages"
 forMobile: "Mobile"
 replaceChatButtonWithAccountButton: "Replace chat button at the bottom with account switch button"
+replaceWidgetsButtonWithReloadButton: "Replace widgets button at the bottom with reload button"
 
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 37156d044..3dfa84f19 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -991,6 +991,7 @@ preventMisclick: "誤タップ防止"
 hideFollowButtons: "新規フォロワーの通知とユーザーページの ... の隣にあるフォローボタンを隠す"
 forMobile: "モバイル向け"
 replaceChatButtonWithAccountButton: "画面下部のチャットのボタンをアカウント切り替えボタンに変更する"
+replaceWidgetsButtonWithReloadButton: "画面下部のウィジェットのボタンを再読み込みボタンに変更する"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てられます。サーバーの負荷が少し増えます。"
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index 4a6a4ca80..e3a25ddfc 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -248,6 +248,14 @@
 					i18n.ts.originalFeature
 				}}</span></FormSwitch
 			>
+			<FormSwitch
+				v-model="replaceWidgetsButtonWithReloadButton"
+				class="_formBlock"
+				>{{ i18n.ts.replaceWidgetsButtonWithReloadButton
+				}}<span class="_beta">{{
+					i18n.ts.originalFeature
+				}}</span></FormSwitch
+			>
 		</FormSection>
 
 		<FormRange
@@ -394,6 +402,9 @@ const hideFollowButtons = computed(
 const replaceChatButtonWithAccountButton = computed(
 	defaultStore.makeGetterSetter("replaceChatButtonWithAccountButton"),
 );
+const replaceWidgetsButtonWithReloadButton = computed(
+	defaultStore.makeGetterSetter("replaceWidgetsButtonWithReloadButton"),
+);
 
 watch(swipeOnDesktop, () => {
 	defaultStore.set("swipeOnMobile", true);
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index 2d19bcadc..67b5bde65 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -354,6 +354,10 @@ export const defaultStore = markRaw(
 			where: "device",
 			default: true,
 		},
+		replaceWidgetsButtonWithReloadButton: {
+			where: "device",
+			default: true,
+		},
 	}),
 );
 
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index a744082e5..6c5a42c68 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -121,6 +121,17 @@
 				</div>
 			</button>
 			<button
+				v-if="useReloadButton"
+				:aria-label="i18n.t('reload')"
+				class="button widget _button"
+				@click="reload"
+			>
+				<div class="button-wrapper">
+					<i class="ph-arrows-clockwise ph-bold ph-lg"></i>
+				</div>
+			</button>
+			<button
+				v-else
 				:aria-label="i18n.t('_deck._columns.widgets')"
 				class="button widget _button"
 				@click="widgetsShowing = true"
@@ -232,6 +243,9 @@ const openAccountMenu = (ev: MouseEvent) => {
 	);
 };
 
+const useReloadButton = defaultStore.state.replaceWidgetsButtonWithReloadButton;
+const reload = () => { window.location.reload(); }
+
 const buttonAnimIndex = ref(0);
 const drawerMenuShowing = ref(false);