style: react component prop readonly

web/src/components/tools/antsword-tab.tsx

@@ -12,7 +12,7 @@ import { UrlPatternFormField } from "./urlpattern-field";
 export function AntSwordTabContent({
   form,
   shellTypes,
-}: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>

web/src/components/tools/behinder-tab.tsx

@@ -12,7 +12,7 @@ import { UrlPatternFormField } from "./urlpattern-field";
 export function BehinderTabContent({
   form,
   shellTypes,
-}: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>

web/src/components/tools/classname-field.tsx

@@ -4,7 +4,7 @@ import { FormSchema } from "@/types/schema.ts";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-export function OptionalClassFormField({ form }: { form: UseFormReturn<FormSchema> }) {
+export function OptionalClassFormField({ form }: Readonly<{ form: UseFormReturn<FormSchema> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>

web/src/components/tools/command-tab.tsx

@@ -12,7 +12,7 @@ import { UrlPatternFormField } from "./urlpattern-field";
 export function CommandTabContent({
   form,
   shellTypes,
-}: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>

web/src/components/tools/godzilla-tab.tsx

@@ -12,7 +12,7 @@ import { UrlPatternFormField } from "./urlpattern-field";
 export function GodzillaTabContent({
   form,
   shellTypes,
-}: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>

web/src/components/tools/neoreg-tab.tsx

@@ -9,7 +9,10 @@ import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 import { UrlPatternFormField } from "./urlpattern-field";
 
-export function NeoRegTabContent({ form, shellTypes }: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+export function NeoRegTabContent({
+  form,
+  shellTypes,
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>

web/src/components/tools/shelltype-field.tsx

@@ -8,7 +8,7 @@ import { useTranslation } from "react-i18next";
 export function ShellTypeFormField({
   form,
   shellTypes,
-}: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>
@@ -24,8 +24,8 @@ export function ShellTypeFormField({
                   <SelectValue placeholder={t("placeholders.select")} />
                 </SelectTrigger>
               </FormControl>
-              <SelectContent key={shellTypes.join(",")}>
-                {shellTypes.length ? (
+              <SelectContent key={shellTypes?.join(",")}>
+                {shellTypes?.length ? (
                   shellTypes.map((v) => (
                     <SelectItem key={v} value={v}>
                       {v}

web/src/components/tools/suo5-tab.tsx

@@ -9,7 +9,10 @@ import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 import { UrlPatternFormField } from "./urlpattern-field";
 
-export function Suo5TabContent({ form, shellTypes }: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+export function Suo5TabContent({
+  form,
+  shellTypes,
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>

web/src/components/tools/urlpattern-field.tsx

@@ -5,7 +5,7 @@ import { FormSchema } from "@/types/schema.ts";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-export function UrlPatternFormField({ form }: { form: UseFormReturn<FormSchema> }) {
+export function UrlPatternFormField({ form }: Readonly<{ form: UseFormReturn<FormSchema> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>