style: fmt code

web/app/components/memshell/tabs/antsword-tab.tsx

@@ -1,10 +1,13 @@
+import type { MemShellFormSchema } from "@/types/schema";
+
 import { Controller, type UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+
 import { Card, CardContent } from "@/components/ui/card";
 import { Field, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import { TabsContent } from "@/components/ui/tabs";
-import type { MemShellFormSchema } from "@/types/schema";
+
 import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 
@@ -19,7 +22,7 @@ export function AntSwordTabContent({
   return (
     <TabsContent value="AntSword">
       <Card>
-        <CardContent className="space-y-2 mt-4">
+        <CardContent className="mt-4 space-y-2">
           <ShellTypeFormField form={form} shellTypes={shellTypes} />
           <Controller
             control={form.control}
@@ -29,24 +32,18 @@ export function AntSwordTabContent({
                 <FieldLabel>
                   {t("shellToolConfig.antSword.pass")} {t("common:optional")}
                 </FieldLabel>
-                <Input
-                  {...field}
-                  placeholder={t("common:placeholders.input")}
-                />
+                <Input {...field} placeholder={t("common:placeholders.input")} />
               </Field>
             )}
           />
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+          <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
             <Controller
               control={form.control}
               name="headerName"
               render={({ field }) => (
                 <Field className="gap-1">
                   <FieldLabel>{t("common:headerName")}</FieldLabel>
-                  <Input
-                    {...field}
-                    placeholder={t("common:placeholders.input")}
-                  />
+                  <Input {...field} placeholder={t("common:placeholders.input")} />
                 </Field>
               )}
             />
@@ -58,10 +55,7 @@ export function AntSwordTabContent({
                   <FieldLabel>
                     {t("common:headerValue")} {t("common:optional")}
                   </FieldLabel>
-                  <Input
-                    {...field}
-                    placeholder={t("common:placeholders.input")}
-                  />
+                  <Input {...field} placeholder={t("common:placeholders.input")} />
                 </Field>
               )}
             />

web/app/components/memshell/tabs/behinder-tab.tsx

@@ -1,10 +1,13 @@
+import type { MemShellFormSchema } from "@/types/schema";
+
 import { Controller, type UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+
 import { Card, CardContent } from "@/components/ui/card";
 import { Field, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import { TabsContent } from "@/components/ui/tabs";
-import type { MemShellFormSchema } from "@/types/schema";
+
 import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 
@@ -19,7 +22,7 @@ export function BehinderTabContent({
   return (
     <TabsContent value="Behinder">
       <Card>
-        <CardContent className="space-y-2 mt-4">
+        <CardContent className="mt-4 space-y-2">
           <ShellTypeFormField form={form} shellTypes={shellTypes} />
           <Controller
             control={form.control}
@@ -29,24 +32,18 @@ export function BehinderTabContent({
                 <FieldLabel>
                   {t("shellToolConfig.behinder.pass")} {t("common:optional")}
                 </FieldLabel>
-                <Input
-                  {...field}
-                  placeholder={t("common:placeholders.input")}
-                />
+                <Input {...field} placeholder={t("common:placeholders.input")} />
               </Field>
             )}
           />
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+          <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
             <Controller
               control={form.control}
               name="headerName"
               render={({ field }) => (
                 <Field className="gap-1">
                   <FieldLabel>{t("common:headerName")}</FieldLabel>
-                  <Input
-                    {...field}
-                    placeholder={t("common:placeholders.input")}
-                  />
+                  <Input {...field} placeholder={t("common:placeholders.input")} />
                 </Field>
               )}
             />
@@ -58,10 +55,7 @@ export function BehinderTabContent({
                   <FieldLabel>
                     {t("common:headerValue")} {t("common:optional")}
                   </FieldLabel>
-                  <Input
-                    {...field}
-                    placeholder={t("common:placeholders.input")}
-                  />
+                  <Input {...field} placeholder={t("common:placeholders.input")} />
                 </Field>
               )}
             />

web/app/components/memshell/tabs/classname-field.tsx

@@ -1,11 +1,13 @@
+import type { MemShellFormSchema } from "@/types/schema";
+
 import { Shuffle } from "lucide-react";
 import { Fragment, useEffect, useState } from "react";
 import { Controller, type UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+
 import { Field, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
-import type { MemShellFormSchema } from "@/types/schema";
 
 export function OptionalClassFormField({
   form,
@@ -16,12 +18,8 @@ export function OptionalClassFormField({
   const [useRandomClassName, setUseRandomClassName] = useState(
     () => !(initialShellClassName?.trim() || initialInjectorClassName?.trim()),
   );
-  const [savedShellClassName, setSavedShellClassName] = useState(
-    initialShellClassName,
-  );
-  const [savedInjectorClassName, setSavedInjectorClassName] = useState(
-    initialInjectorClassName,
-  );
+  const [savedShellClassName, setSavedShellClassName] = useState(initialShellClassName);
+  const [savedInjectorClassName, setSavedInjectorClassName] = useState(initialInjectorClassName);
   const shellClassName = form.watch("shellClassName");
   const injectorClassName = form.watch("injectorClassName");
 
@@ -38,10 +36,7 @@ export function OptionalClassFormField({
   }, [injectorClassName, useRandomClassName]);
 
   useEffect(() => {
-    if (
-      useRandomClassName &&
-      (shellClassName?.trim() || injectorClassName?.trim())
-    ) {
+    if (useRandomClassName && (shellClassName?.trim() || injectorClassName?.trim())) {
       setUseRandomClassName(false);
     }
   }, [injectorClassName, shellClassName, useRandomClassName]);
@@ -61,7 +56,7 @@ export function OptionalClassFormField({
 
   return (
     <Fragment>
-      <div className="pt-2 flex items-center justify-between gap-3">
+      <div className="flex items-center justify-between gap-3 pt-2">
         <div className="flex items-center gap-2 text-sm font-medium">
           <Shuffle className="h-4 w-4" />
           <span>{t("mainConfig.randomClassName")}</span>
@@ -82,11 +77,7 @@ export function OptionalClassFormField({
               <FieldLabel htmlFor="shellClassName">
                 {t("mainConfig.shellClassName")} {t("common:optional")}
               </FieldLabel>
-              <Input
-                id="shellClassName"
-                {...field}
-                placeholder={t("common:placeholders.input")}
-              />
+              <Input id="shellClassName" {...field} placeholder={t("common:placeholders.input")} />
             </Field>
           )}
         />
@@ -100,11 +91,7 @@ export function OptionalClassFormField({
               <FieldLabel htmlFor="injectClassName">
                 {t("mainConfig.injectorClassName")} {t("common:optional")}
               </FieldLabel>
-              <Input
-                id="injectClassName"
-                {...field}
-                placeholder={t("common:placeholders.input")}
-              />
+              <Input id="injectClassName" {...field} placeholder={t("common:placeholders.input")} />
             </Field>
           )}
         />

web/app/components/memshell/tabs/command-tab.tsx

@@ -1,14 +1,13 @@
+import type { MemShellFormSchema } from "@/types/schema";
+
 import { useQuery } from "@tanstack/react-query";
 import { ChevronDown, ChevronRight, InfoIcon } from "lucide-react";
 import { useState } from "react";
 import { Controller, type UseFormReturn, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+
 import { Card, CardContent } from "@/components/ui/card";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { Field, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import {
@@ -19,13 +18,9 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { TabsContent } from "@/components/ui/tabs";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { env } from "@/config";
-import type { MemShellFormSchema } from "@/types/schema";
+
 import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 
@@ -60,43 +55,36 @@ export function CommandTabContent({
   return (
     <TabsContent value="Command">
       <Card>
-        <CardContent className="space-y-2 mt-4">
+        <CardContent className="mt-4 space-y-2">
           <ShellTypeFormField form={form} shellTypes={shellTypes} />
           {server !== "Dubbo" && (
             <Controller
               control={form.control}
               name="commandParamName"
               render={({ field }) => (
-                <Field
-                  className="gap-1"
-                  hidden={shellType.includes("WebSocket")}
-                >
+                <Field className="gap-1" hidden={shellType.includes("WebSocket")}>
                   <div className="flex items-center gap-1">
                     <FieldLabel>
                       {t("common:paramName")} {t("common:optional")}
                     </FieldLabel>
                     <Tooltip>
                       <TooltipTrigger>
-                        <InfoIcon className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
+                        <InfoIcon className="h-3.5 w-3.5 cursor-help text-muted-foreground" />
                       </TooltipTrigger>
                       <TooltipContent>
                         <p>{t("common:paramName.description")}</p>
                       </TooltipContent>
                     </Tooltip>
                   </div>
-                  <Input
-                    {...field}
-                    placeholder={t("common:placeholders.input")}
-                  />
+                  <Input {...field} placeholder={t("common:placeholders.input")} />
                 </Field>
               )}
             />
           )}
           <div
-            className="grid grid-cols-1 md:grid-cols-2 gap-2"
+            className="grid grid-cols-1 gap-2 md:grid-cols-2"
             hidden={
-              shellType !== "BypassNginxWebSocket" &&
-              shellType !== "BypassNginxJakartaWebSocket"
+              shellType !== "BypassNginxWebSocket" && shellType !== "BypassNginxJakartaWebSocket"
             }
           >
             <Controller
@@ -105,10 +93,7 @@ export function CommandTabContent({
               render={({ field }) => (
                 <Field className="gap-1">
                   <FieldLabel>{t("common:headerName")}</FieldLabel>
-                  <Input
-                    {...field}
-                    placeholder={t("common:placeholders.input")}
-                  />
+                  <Input {...field} placeholder={t("common:placeholders.input")} />
                 </Field>
               )}
             />
@@ -120,16 +105,13 @@ export function CommandTabContent({
                   <FieldLabel>
                     {t("common:headerValue")} {t("common:optional")}
                   </FieldLabel>
-                  <Input
-                    {...field}
-                    placeholder={t("common:placeholders.input")}
-                  />
+                  <Input {...field} placeholder={t("common:placeholders.input")} />
                 </Field>
               )}
             />
           </div>
           <Collapsible open={isAdvancedOpen} onOpenChange={setIsAdvancedOpen}>
-            <CollapsibleTrigger className="flex items-center gap-2 w-full py-2 text-sm font-medium hover:underline">
+            <CollapsibleTrigger className="flex w-full items-center gap-2 py-2 text-sm font-medium hover:underline">
               {isAdvancedOpen ? (
                 <ChevronDown className="h-4 w-4" />
               ) : (
@@ -138,22 +120,16 @@ export function CommandTabContent({
               {t("common:advancedConfig")}
             </CollapsibleTrigger>
             <CollapsibleContent className="space-y-2 pt-2">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
                 <Controller
                   control={form.control}
                   name="encryptor"
                   render={({ field }) => (
                     <Field className="gap-1">
                       <FieldLabel>{t("common:encryptor")}</FieldLabel>
-                      <Select
-                        onValueChange={field.onChange}
-                        value={field.value}
-                        defaultValue="RAW"
-                      >
+                      <Select onValueChange={field.onChange} value={field.value} defaultValue="RAW">
                         <SelectTrigger>
-                          <SelectValue
-                            data-placeholder={t("common:placeholders.select")}
-                          />
+                          <SelectValue data-placeholder={t("common:placeholders.select")} />
                         </SelectTrigger>
                         <SelectContent>
                           {data?.encryptors?.map((v) => (
@@ -178,9 +154,7 @@ export function CommandTabContent({
                         defaultValue="RuntimeExec"
                       >
                         <SelectTrigger>
-                          <SelectValue
-                            data-placeholder={t("common:placeholders.select")}
-                          />
+                          <SelectValue data-placeholder={t("common:placeholders.select")} />
                         </SelectTrigger>
                         <SelectContent>
                           {data?.implementationClasses?.map((v) => (
@@ -202,11 +176,8 @@ export function CommandTabContent({
                     <FieldLabel>
                       {t("common:commandTemplate")} {t("common:optional")}
                     </FieldLabel>
-                    <Input
-                      {...field}
-                      placeholder={t("common:commandTemplate.placeholder")}
-                    />
-                    <p className="text-xs text-muted-foreground mt-1">
+                    <Input {...field} placeholder={t("common:commandTemplate.placeholder")} />
+                    <p className="mt-1 text-xs text-muted-foreground">
                       {t("common:commandTemplate.description")}
                     </p>
                   </Field>

web/app/components/memshell/tabs/custom-tab.tsx

@@ -1,7 +1,10 @@
+import type { MemShellFormSchema } from "@/types/schema";
+
 import { useEffect, useRef, useState } from "react";
 import { Controller, type UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
+
 import { Card, CardContent } from "@/components/ui/card";
 import { Field, FieldError, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
@@ -10,7 +13,7 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { TabsContent } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import { env } from "@/config";
-import type { MemShellFormSchema } from "@/types/schema";
+
 import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 
@@ -85,7 +88,7 @@ export default function CustomTabContent({
   return (
     <TabsContent value="Custom">
       <Card>
-        <CardContent className="space-y-2 mt-4">
+        <CardContent className="mt-4 space-y-2">
           <ShellTypeFormField form={form} shellTypes={shellTypes} />
           <Controller
             control={form.control}
@@ -120,9 +123,7 @@ export default function CustomTabContent({
                             const reader = new FileReader();
                             reader.onload = (event) => {
                               const base64String =
-                                (event.target?.result as string)?.split(
-                                  ",",
-                                )[1] || "";
+                                (event.target?.result as string)?.split(",")[1] || "";
                               field.onChange(base64String);
                             };
                             reader.readAsDataURL(file);

web/app/components/memshell/tabs/godzilla-tab.tsx

@@ -1,10 +1,13 @@
+import type { MemShellFormSchema } from "@/types/schema";
+
 import { Controller, type UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+
 import { Card, CardContent } from "@/components/ui/card";
 import { Field, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import { TabsContent } from "@/components/ui/tabs";
-import type { MemShellFormSchema } from "@/types/schema";
+
 import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 
@@ -19,9 +22,9 @@ export function GodzillaTabContent({
   return (
     <TabsContent value="Godzilla">
       <Card>
-        <CardContent className="flex flex-col gap-2 mt-4">
+        <CardContent className="mt-4 flex flex-col gap-2">
           <ShellTypeFormField form={form} shellTypes={shellTypes} />
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+          <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
             <Controller
               control={form.control}
               name="godzillaPass"
@@ -30,10 +33,7 @@ export function GodzillaTabContent({
                   <FieldLabel>
                     {t("shellToolConfig.godzilla.pass")} {t("common:optional")}
                   </FieldLabel>
-                  <Input
-                    {...field}
-                    placeholder={t("common:placeholders.input")}
-                  />
+                  <Input {...field} placeholder={t("common:placeholders.input")} />
                 </Field>
               )}
             />
@@ -45,10 +45,7 @@ export function GodzillaTabContent({
                   <FieldLabel>
                     {t("shellToolConfig.godzilla.key")} {t("common:optional")}
                   </FieldLabel>
-                  <Input
-                    {...field}
-                    placeholder={t("common:placeholders.input")}
-                  />
+                  <Input {...field} placeholder={t("common:placeholders.input")} />
                 </Field>
               )}
             />
@@ -58,10 +55,7 @@ export function GodzillaTabContent({
               render={({ field }) => (
                 <Field className="gap-1">
                   <FieldLabel>{t("common:headerName")}</FieldLabel>
-                  <Input
-                    {...field}
-                    placeholder={t("common:placeholders.input")}
-                  />
+                  <Input {...field} placeholder={t("common:placeholders.input")} />
                 </Field>
               )}
             />
@@ -73,10 +67,7 @@ export function GodzillaTabContent({
                   <FieldLabel>
                     {t("common:headerValue")} {t("common:optional")}
                   </FieldLabel>
-                  <Input
-                    {...field}
-                    placeholder={t("common:placeholders.input")}
-                  />
+                  <Input {...field} placeholder={t("common:placeholders.input")} />
                 </Field>
               )}
             />

web/app/components/memshell/tabs/neoreg-tab.tsx

@@ -1,10 +1,13 @@
+import type { MemShellFormSchema } from "@/types/schema";
+
 import { Controller, type UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+
 import { Card, CardContent } from "@/components/ui/card";
 import { Field, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import { TabsContent } from "@/components/ui/tabs";
-import type { MemShellFormSchema } from "@/types/schema";
+
 import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 
@@ -19,19 +22,16 @@ export function NeoRegTabContent({
   return (
     <TabsContent value="NeoreGeorg">
       <Card>
-        <CardContent className="space-y-2 mt-4">
+        <CardContent className="mt-4 space-y-2">
           <ShellTypeFormField form={form} shellTypes={shellTypes} />
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+          <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
             <Controller
               control={form.control}
               name="headerName"
               render={({ field }) => (
                 <Field className="gap-1">
                   <FieldLabel>{t("common:headerName")}</FieldLabel>
-                  <Input
-                    {...field}
-                    placeholder={t("common:placeholders.input")}
-                  />
+                  <Input {...field} placeholder={t("common:placeholders.input")} />
                 </Field>
               )}
             />
@@ -43,10 +43,7 @@ export function NeoRegTabContent({
                   <FieldLabel>
                     {t("common:headerValue")} {t("common:optional")}
                   </FieldLabel>
-                  <Input
-                    {...field}
-                    placeholder={t("common:placeholders.input")}
-                  />
+                  <Input {...field} placeholder={t("common:placeholders.input")} />
                 </Field>
               )}
             />

web/app/components/memshell/tabs/proxy-tab.tsx

@@ -1,10 +1,13 @@
+import type { MemShellFormSchema } from "@/types/schema";
+
 import { Controller, type UseFormReturn, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+
 import { Card, CardContent } from "@/components/ui/card";
 import { Field, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import { TabsContent } from "@/components/ui/tabs";
-import type { MemShellFormSchema } from "@/types/schema";
+
 import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 
@@ -23,13 +26,12 @@ export function ProxyTabContent({
   return (
     <TabsContent value="Proxy">
       <Card>
-        <CardContent className="space-y-2 mt-4">
+        <CardContent className="mt-4 space-y-2">
           <ShellTypeFormField form={form} shellTypes={shellTypes} />
           <div
-            className="grid grid-cols-1 md:grid-cols-2 gap-2"
+            className="grid grid-cols-1 gap-2 md:grid-cols-2"
             hidden={
-              shellType !== "BypassNginxWebSocket" &&
-              shellType !== "BypassNginxJakartaWebSocket"
+              shellType !== "BypassNginxWebSocket" && shellType !== "BypassNginxJakartaWebSocket"
             }
           >
             <Controller
@@ -38,10 +40,7 @@ export function ProxyTabContent({
               render={({ field }) => (
                 <Field className="gap-1">
                   <FieldLabel>{t("common:headerName")}</FieldLabel>
-                  <Input
-                    {...field}
-                    placeholder={t("common:placeholders.input")}
-                  />
+                  <Input {...field} placeholder={t("common:placeholders.input")} />
                 </Field>
               )}
             />
@@ -53,10 +52,7 @@ export function ProxyTabContent({
                   <FieldLabel>
                     {t("common:headerValue")} {t("common:optional")}
                   </FieldLabel>
-                  <Input
-                    {...field}
-                    placeholder={t("common:placeholders.input")}
-                  />
+                  <Input {...field} placeholder={t("common:placeholders.input")} />
                 </Field>
               )}
             />

web/app/components/memshell/tabs/shelltype-field.tsx

@@ -1,5 +1,8 @@
+import type { MemShellFormSchema } from "@/types/schema";
+
 import { Controller, type UseFormReturn, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+
 import { Field, FieldError, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import {
@@ -10,7 +13,6 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { cn, notNeedUrlPattern } from "@/lib/utils";
-import type { MemShellFormSchema } from "@/types/schema";
 
 export function ShellTypeFormField({
   form,
@@ -23,7 +25,7 @@ export function ShellTypeFormField({
   const shellType = useWatch({ control: form.control, name: "shellType" });
   const needUrlPattern = !notNeedUrlPattern(shellType);
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+    <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
       <Controller
         control={form.control}
         name="shellType"
@@ -38,9 +40,7 @@ export function ShellTypeFormField({
               value={field.value}
             >
               <SelectTrigger>
-                <SelectValue
-                  data-placeholder={t("common:placeholders.select")}
-                />
+                <SelectValue data-placeholder={t("common:placeholders.select")} />
               </SelectTrigger>
               <SelectContent key={shellTypes?.join(",")}>
                 {shellTypes?.length ? (
@@ -50,9 +50,7 @@ export function ShellTypeFormField({
                     </SelectItem>
                   ))
                 ) : (
-                  <SelectItem value=" ">
-                    {t("tips.shellToolNotSelected")}
-                  </SelectItem>
+                  <SelectItem value=" ">{t("tips.shellToolNotSelected")}</SelectItem>
                 )}
               </SelectContent>
             </Select>

web/app/components/memshell/tabs/suo5-tab.tsx

@@ -1,10 +1,13 @@
+import type { MemShellFormSchema } from "@/types/schema";
+
 import { Controller, type UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+
 import { Card, CardContent } from "@/components/ui/card";
 import { Field, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import { TabsContent } from "@/components/ui/tabs";
-import type { MemShellFormSchema } from "@/types/schema";
+
 import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 
@@ -21,19 +24,16 @@ export function Suo5TabContent({
   return (
     <TabsContent value={tabValue}>
       <Card>
-        <CardContent className="space-y-2 mt-4">
+        <CardContent className="mt-4 space-y-2">
           <ShellTypeFormField form={form} shellTypes={shellTypes} />
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+          <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
             <Controller
               control={form.control}
               name="headerName"
               render={({ field }) => (
                 <Field className="gap-1">
                   <FieldLabel>{t("common:headerName")}</FieldLabel>
-                  <Input
-                    {...field}
-                    placeholder={t("common:placeholders.input")}
-                  />
+                  <Input {...field} placeholder={t("common:placeholders.input")} />
                 </Field>
               )}
             />
@@ -45,10 +45,7 @@ export function Suo5TabContent({
                   <FieldLabel>
                     {t("common:headerValue")} {t("common:optional")}
                   </FieldLabel>
-                  <Input
-                    {...field}
-                    placeholder={t("common:placeholders.input")}
-                  />
+                  <Input {...field} placeholder={t("common:placeholders.input")} />
                 </Field>
               )}
             />