feat: make available string values collapsible

Resolves #3

Author: YDX-2147483647

src/components/ui/FunctionParameters.tsx

@@ -62,12 +62,32 @@ export const FunctionParameters: FC<FunctionParametersProps> = ({
 						<HtmlContent html={param.details} />
 					</div>
 
+					{param.default && (
+						<p class="mt-3 text-sm">
+							<span class="font-medium">
+								<Translation translationKey="defaultValue" />
+							</span>{" "}
+							<span class="text-gray-700">
+								<HtmlContent html={param.default} />
+							</span>
+						</p>
+					)}
+
+					{/* Put all collapsible blocks after non-collapsible blocks. */}
+
 					{param.strings.length > 0 && (
-						<div class="mt-3">
-							<h5 class="text-sm font-medium text-gray-700 mb-2">
+						<details
+							class="my-4 folding-example group"
+							// The list of strings can be very long. For example, `page.paper` has 100+ possibilities.
+							open={param.strings.length <= 5}
+						>
+							<summary class="flex items-center gap-1 text-sm font-medium text-blue-600 cursor-pointer hover:text-blue-800">
+								<div class="w-4 h-4 text-gray-400 transform transition-transform duration-200 group-open:rotate-90">
+									<ChevronRightIcon />
+								</div>
 								<Translation translationKey="stringValues" />
-							</h5>
-							<ul class="type-args space-y-2 pl-4">
+							</summary>
+							<ul class="type-args space-y-2">
 								{param.strings.map((string) => (
 									<li key={string.string}>
 										<div class="break-box">
@@ -81,22 +101,11 @@ export const FunctionParameters: FC<FunctionParametersProps> = ({
 									</li>
 								))}
 							</ul>
-						</div>
-					)}
-
-					{param.default && (
-						<p class="mt-3 text-sm">
-							<span class="font-medium">
-								<Translation translationKey="defaultValue" />
-							</span>{" "}
-							<span class="text-gray-700">
-								<HtmlContent html={param.default} />
-							</span>
-						</p>
+						</details>
 					)}
 
 					{param.example && (
-						<details class="mt-4 folding-example group">
+						<details class="my-4 folding-example group">
 							<summary class="flex items-center gap-1 text-sm font-medium text-blue-600 cursor-pointer hover:text-blue-800">
 								<div class="w-4 h-4 text-gray-400 transform transition-transform duration-200 group-open:rotate-90">
 									<ChevronRightIcon />

src/translation/en-US.tsx

@@ -54,7 +54,7 @@ export const Translation: TranslationComponent = (props) => {
 		case "defaultValue":
 			return <Fragment>Default value:</Fragment>;
 		case "stringValues":
-			return <Fragment>Available string values:</Fragment>;
+			return <Fragment>Available string values</Fragment>;
 		case "showExample":
 			return <Fragment>Show example</Fragment>;
 		case "tableOfContents":

src/translation/ja-JP.tsx

@@ -59,7 +59,7 @@ export const Translation: TranslationComponent = (props) => {
 		case "defaultValue":
 			return <Fragment>デフォルト値：</Fragment>;
 		case "stringValues":
-			return <Fragment>使用可能な文字列値：</Fragment>;
+			return <Fragment>使用可能な文字列値</Fragment>;
 		case "showExample":
 			return <Fragment>例を表示</Fragment>;
 		case "tableOfContents":