feat: ability to replace widgets button with reload button on mobile (close #8)

README.md

@@ -6,6 +6,8 @@
 
 ## 主要な変更点
 
+- モバイル表示の下部のウィジェットボタンを再読み込みボタンに変更可能に
+  - スマートフォンでウィジェットは使わないけど再読み込みはたくさんする人はいそう
 - モバイル表示の下部のチャットボタンをアカウント切り替えボタンに変更可能に
   - これ無しで PWA で複数アカウントを使おうとすると腱鞘炎になる
 - ローカルタイムラインの位置をグローバルタイムラインの直前に移動

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

locales/ja-JP.yml

@@ -991,6 +991,7 @@ preventMisclick: "誤タップ防止"
 hideFollowButtons: "新規フォロワーの通知とユーザーページの ... の隣にあるフォローボタンを隠す"
 forMobile: "モバイル向け"
 replaceChatButtonWithAccountButton: "画面下部のチャットのボタンをアカウント切り替えボタンに変更する"
+replaceWidgetsButtonWithReloadButton: "画面下部のウィジェットのボタンを再読み込みボタンに変更する"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てられます。サーバーの負荷が少し増えます。"

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);

packages/client/src/store.ts

@@ -354,6 +354,10 @@ export const defaultStore = markRaw(
 			where: "device",
 			default: true,
 		},
+		replaceWidgetsButtonWithReloadButton: {
+			where: "device",
+			default: true,
+		},
 	}),
 );
 

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);