suggest all options if multiple regions are defined in the langmap

locales/en-US.yml

@@ -1156,6 +1156,7 @@ detectPostLanguage: "Automatically detect the language and show a translate butt
 vibrate: "Play vibrations"
 openServerInfo: "Show server information by clicking the server ticker on a post"
 iconSet: "Icon set"
+suggested: "Suggested"
 
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing

locales/ja-JP.yml

@@ -2003,3 +2003,4 @@ _iconSets:
   regular: "標準"
   fill: "塗りつぶし"
   duotone: "2色"
+suggested: "候補"

packages/client/src/components/MkPostForm.vue

@@ -703,6 +703,19 @@ function setVisibility() {
 	);
 }
 
+// example usage:
+// filterLangmapByKeyPrefix("zh") to take
+// "zh", "zh-cn", "zh-tw", "zh-hk", etc. out of the langmap
+function filterLangmapByKeyPrefix(
+	prefix: string,
+): { langKey: string; nativeName: string }[] {
+	return Object.keys(langmap)
+		.filter((key) => key.startsWith(prefix))
+		.map((key) => {
+			return { langKey: key, nativeName: langmap[key].nativeName };
+		});
+}
+
 function setLanguage() {
 	const actions: Array<MenuItem> = [];
 
@@ -711,19 +724,23 @@ function setLanguage() {
 		detectedLanguage !== "" &&
 		detectedLanguage != null &&
 		detectedLanguage !== language.value
-	)
+	) {
-		actions.push(
+		actions.push({
-			{
+			type: "label",
-				text: langmap[detectedLanguage].nativeName,
+			text: i18n.ts.suggested,
+		});
+		filterLangmapByKeyPrefix(detectedLanguage).forEach((v, i) => {
+			actions.push({
+				text: v.nativeName,
 				danger: false,
 				active: false,
-				icon: `${icon("ph-list-magnifying-glass")}`,
 				action: () => {
-					language.value = detectedLanguage;
+					language.value = v.langKey;
 				},
-			},
+			});
-			null,
+		});
-		);
+		actions.push(null);
+	}
 
 	if (language.value != null)
 		actions.push({