feat (client): big post button

docs/changelog.md

@@ -5,6 +5,8 @@
 - the "Hide NSFW media" config is now per device and per account
 - increase the max number of pinned posts from 5 to 15
 - change the second tab on the notifications page from "unread" to "reactions"
+- add ability to show a huge post button on the posting form
+	- joke feature, inspired by https://mstdn.poyo.me/@prime/110668364208741253
 
 # v20240216
 

locales/en-US.yml

@@ -1169,6 +1169,7 @@ replaceChatButtonWithAccountButton: "Replace chat button with account switch but
 replaceWidgetsButtonWithReloadButton: "Replace widgets button with reload button"
 searchEngine: "Search engine used in search bar MFM"
 postSearch: "Post search on this server"
+showBigPostButton: "Show a huge post button on the posting form" 
 
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing

locales/ja-JP.yml

@@ -2018,3 +2018,4 @@ replaceChatButtonWithAccountButton: "チャットのボタンをアカウント
 replaceWidgetsButtonWithReloadButton: "ウィジェットのボタンを再読み込みボタンに変更する"
 searchEngine: "検索のMFMで使用する検索エンジン"
 postSearch: "このサーバーの投稿検索"
+showBigPostButton: "投稿ボタンを巨大にする"

packages/client/src/components/MkPostForm.vue

@@ -75,6 +75,7 @@
 					<i :class="icon('ph-binoculars')"></i>
 				</button>
 				<button
+					v-if="!showBigPostButton"
 					class="submit _buttonGradate"
 					:disabled="!canPost"
 					data-cy-open-post-form-submit
@@ -237,6 +238,25 @@
 				>
 					<i :class="icon('ph-question')"></i>
 				</button>
+				<div v-if="showBigPostButton">
+					<button
+						class="submit bigPostButton"
+						:disabled="!canPost"
+						data-cy-open-post-form-submit
+						@click="post"
+					>
+						{{ submitText
+						}}<i
+							:class="
+								reply
+									? 'ph-arrow-u-up-left ph-bold ph-lg'
+									: renote
+										? 'ph-quotes ph-bold ph-lg'
+										: 'ph-paper-plane-tilt ph-bold ph-lg'
+							"
+						></i>
+					</button>
+				</div>
 			</footer>
 			<datalist id="hashtags">
 				<option
@@ -335,6 +355,8 @@ const hashtagsInputEl = ref<HTMLInputElement | null>(null);
 const visibilityButton = ref<HTMLElement | null>(null);
 const languageButton = ref<HTMLElement | undefined>();
 
+const showBigPostButton = defaultStore.state.showBigPostButton;
+
 const posting = ref(false);
 const text = ref(props.initialText ?? "");
 const files = ref(props.initialFiles ?? []);
@@ -1509,4 +1531,41 @@ onMounted(() => {
 		}
 	}
 }
+
+.bigPostButton {
+	appearance: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	display: block ruby;
+	padding: 3%;
+	margin: 0 auto;
+	border: none;
+	cursor: pointer;
+	color: inherit;
+	touch-action: manipulation;
+	-webkit-tap-highlight-color: transparent;
+	font-size: 3em;
+	font-family: inherit;
+	text-decoration: none;
+	width: 100%;
+	border-radius: 10px;
+	user-select: none;
+	-webkit-user-select: none;
+	-webkit-touch-callout: none;
+	color: var(--fgOnAccent);
+	background: linear-gradient(
+		90deg,
+		var(--buttonGradateA),
+		var(--buttonGradateB)
+	);
+
+	> .ph-lg {
+		vertical-align: -0.125em;
+		margin-left: 12px;
+	}
+}
+
+.bigPostButton:disabled {
+	opacity: 0.7;
+}
 </style>

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

@@ -279,6 +279,9 @@
 			<FormSwitch v-model="showFixedPostForm" class="_formBlock">{{
 				i18n.ts.showFixedPostForm
 			}}</FormSwitch>
+			<FormSwitch v-model="showBigPostButton" class="_formBlock">{{
+				i18n.ts.showBigPostButton
+			}}</FormSwitch>
 			<FormSwitch v-model="useEmojiCdn" class="_formBlock"
 				>{{ i18n.ts.useEmojiCdn
 				}}<template #caption>{{
@@ -490,6 +493,9 @@ const openServerInfo = computed(
 const iconSet = computed(defaultStore.makeGetterSetter("iconSet"));
 const useEmojiCdn = computed(defaultStore.makeGetterSetter("useEmojiCdn"));
 const searchURL = computed(defaultStore.makeGetterSetter("searchURL"));
+const showBigPostButton = computed(
+	defaultStore.makeGetterSetter("showBigPostButton"),
+);
 
 // This feature (along with injectPromo) is currently disabled
 // function onChangeInjectFeaturedNote(v) {

packages/client/src/store.ts

@@ -401,6 +401,10 @@ export const defaultStore = markRaw(
 			where: "device",
 			default: "https://duckduckgo.com/?q=",
 		},
+		showBigPostButton: {
+			where: "device",
+			default: false,
+		},
 	}),
 );