feat (client): ability to replace widgets button with reload button on mobile

locales/en-US.yml

@@ -1166,6 +1166,7 @@ preventMisclick: "Accidental click prevention"
 hideFollowButtons: "Hide follow buttons in a misclickable position"
 forMobile: "Mobile"
 replaceChatButtonWithAccountButton: "Replace chat button with account switch button"
+replaceWidgetsButtonWithReloadButton: "Replace widgets button with reload button"
 
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing

locales/ja-JP.yml

@@ -2015,3 +2015,4 @@ preventMisclick: "誤タップ防止"
 hideFollowButtons: "誤タップしやすい位置にあるフォローボタンを隠す"
 forMobile: "携帯端末向け"
 replaceChatButtonWithAccountButton: "チャットのボタンをアカウント切り替えボタンに変更する"
+replaceWidgetsButtonWithReloadButton: "ウィジェットのボタンを再読み込みボタンに変更する"

packages/client/src/pages/settings/general.vue

@@ -298,6 +298,11 @@
 				class="_formBlock"
 				>{{ i18n.ts.replaceChatButtonWithAccountButton }}</FormSwitch
 			>
+			<FormSwitch
+				v-model="replaceWidgetsButtonWithReloadButton"
+				class="_formBlock"
+				>{{ i18n.ts.replaceWidgetsButtonWithReloadButton }}</FormSwitch
+			>
 		</FormSection>
 
 		<FormRange
@@ -454,6 +459,9 @@ const hideFollowButtons = computed(
 const replaceChatButtonWithAccountButton = computed(
 	defaultStore.makeGetterSetter("replaceChatButtonWithAccountButton"),
 );
+const replaceWidgetsButtonWithReloadButton = computed(
+	defaultStore.makeGetterSetter("replaceWidgetsButtonWithReloadButton"),
+);
 const detectPostLanguage = computed(
 	defaultStore.makeGetterSetter("detectPostLanguage"),
 );

packages/client/src/store.ts

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

packages/client/src/ui/universal.vue

@@ -130,6 +130,17 @@
 				</div>
 			</button>
 			<button
+				v-if="replaceWidgetsButtonWithReloadButton"
+				:aria-label="i18n.ts.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
 				v-vibrate="5"
 				:aria-label="i18n.t('_deck._columns.widgets')"
 				class="button widget _button"
@@ -247,6 +258,12 @@ const openAccountMenu = (ev: MouseEvent) => {
 	);
 };
 
+const replaceWidgetsButtonWithReloadButton =
+	defaultStore.state.replaceWidgetsButtonWithReloadButton;
+const reload = () => {
+	window.location.reload();
+};
+
 const buttonAnimIndex = ref(0);
 const drawerMenuShowing = ref(false);