feat: big post button (close #72)

README.md

@@ -24,6 +24,8 @@
 
 ## 細かい変更点
 
+- 投稿ボタンを巨大にできるように
+  - https://mstdn.poyo.me/@prime/110668364208741253 を真似しました
 - アンテナにフォロー中のユーザーのホーム投稿も表示する
   - フォロー中のユーザーの投稿は見たいから
 - 猫のアカウントはアイコンを常に丸く表示する

locales/en-US.yml

@@ -1144,6 +1144,7 @@ inputNotMatch: "Input does not match"
 detectPostLanguage: "Automatically detect the language and show a translate button for non-English posts"
 languageForTranslation: "Language used for post translation"
 addRe: "Add \"re:\" at the beginning of comment in reply to a post with a content warning"
+showBigPostButton: "Show a bigger post button in the posting form"
 
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing

locales/ja-JP.yml

@@ -997,6 +997,7 @@ replaceWidgetsButtonWithReloadButton: "画面下部のウィジェットのボ
 addRe: "閲覧注意の投稿への返信で、注釈の先頭に\"re:\"を追加する"
 detectPostLanguage: "投稿の言語を自動検出し、外国語の投稿に翻訳ボタンを表示する"
 languageForTranslation: "投稿翻訳に使用する言語"
+showBigPostButton: "投稿ボタンを巨大にする"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てられます。サーバーの負荷が少し増えます。"

packages/client/src/components/MkPostForm.vue

@@ -60,6 +60,7 @@
 					<i class="ph-binoculars ph-bold ph-lg"></i>
 				</button>
 				<button
+					v-if="!showBigPostButton"
 					class="submit _buttonGradate"
 					:disabled="!canPost"
 					data-cy-open-post-form-submit
@@ -220,6 +221,25 @@
 				>
 					<i class="ph-question ph-bold ph-lg"></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
@@ -307,6 +327,8 @@ const cwInputEl = $ref<HTMLInputElement | null>(null);
 const hashtagsInputEl = $ref<HTMLInputElement | null>(null);
 const visibilityButton = $ref<HTMLElement | null>(null);
 
+const showBigPostButton = defaultStore.state.showBigPostButton;
+
 let posting = $ref(false);
 let text = $ref(props.initialText ?? "");
 let files = $ref(props.initialFiles ?? []);
@@ -1340,4 +1362,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

@@ -225,6 +225,12 @@
 			<FormSwitch v-model="showFixedPostForm" class="_formBlock">{{
 				i18n.ts.showFixedPostForm
 			}}</FormSwitch>
+			<FormSwitch v-model="showBigPostButton" class="_formBlock"
+				>{{ i18n.ts.showBigPostButton
+				}}<span class="_beta">{{
+					i18n.ts.originalFeature
+				}}</span></FormSwitch
+			>
 			<FormSwitch
 				v-if="$i?.isAdmin"
 				v-model="showAdminUpdates"
@@ -432,6 +438,9 @@ const addRe = computed(defaultStore.makeGetterSetter("addRe"));
 const detectPostLanguage = computed(
 	defaultStore.makeGetterSetter("detectPostLanguage"),
 );
+const showBigPostButton = computed(
+	defaultStore.makeGetterSetter("showBigPostButton"),
+);
 
 watch(swipeOnDesktop, () => {
 	defaultStore.set("swipeOnMobile", true);

packages/client/src/store.ts

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