style(web): format code

web/src/components/code-viewer.tsx

@@ -1,14 +1,20 @@
-import type {VariantProps} from "class-variance-authority";
-import {Check, Copy} from "lucide-react";
-import {type HTMLProps, type ReactNode, useCallback, useEffect, useState} from "react";
-import {CopyToClipboard} from "react-copy-to-clipboard";
-import {useTranslation} from "react-i18next";
-import {PrismLight as SyntaxHighlighter} from "react-syntax-highlighter";
+import type { VariantProps } from "class-variance-authority";
+import { Check, Copy } from "lucide-react";
+import {
+  type HTMLProps,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import { useTranslation } from "react-i18next";
+import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
 import java from "react-syntax-highlighter/dist/esm/languages/prism/java";
-import {materialDark} from "react-syntax-highlighter/dist/esm/styles/prism";
-import {toast} from "sonner";
-import {Button, type buttonVariants} from "@/components/ui/button";
-import {cn} from "@/lib/utils";
+import { materialDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { toast } from "sonner";
+import { Button, type buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 SyntaxHighlighter.registerLanguage("java", java);
 interface CopyButtonProps extends React.ComponentProps<"button"> {
@@ -16,7 +22,9 @@ interface CopyButtonProps extends React.ComponentProps<"button"> {
   src?: string;
 }
 
-export function CopyButton({ value }: Readonly<CopyButtonProps & VariantProps<typeof buttonVariants>>) {
+export function CopyButton({
+  value,
+}: Readonly<CopyButtonProps & VariantProps<typeof buttonVariants>>) {
   const [hasCopied, setHasCopied] = useState(false);
   const { t } = useTranslation();
 
@@ -60,12 +68,18 @@ export default function CodeViewer({
   showLineNumbers = true,
   wrapLongLines = true,
 }: Readonly<CodeViewerProps>) {
-  const lineProps: lineTagPropsFunction | HTMLProps<HTMLElement> | undefined = wrapLongLines
-    ? { style: { overflowWrap: "break-word", whiteSpace: "pre-wrap" } }
-    : undefined;
+  const lineProps: lineTagPropsFunction | HTMLProps<HTMLElement> | undefined =
+    wrapLongLines
+      ? { style: { overflowWrap: "break-word", whiteSpace: "pre-wrap" } }
+      : undefined;
   return (
     <div className="rounded-lg border">
-      <div className={cn("flex items-center border-b p-2 justify-end", header && "justify-between")}>
+      <div
+        className={cn(
+          "flex items-center border-b p-2 justify-end",
+          header && "justify-between",
+        )}
+      >
         {header}
         <div className="flex items-center gap-2">
           {button}

web/src/components/copyable-field.tsx

@@ -12,7 +12,11 @@ interface CopyableFieldProps {
   text?: string;
 }
 
-export function CopyableField({ label, value, text }: Readonly<CopyableFieldProps>) {
+export function CopyableField({
+  label,
+  value,
+  text,
+}: Readonly<CopyableFieldProps>) {
   const [hasCopied, setHasCopied] = useState(false);
   const { t } = useTranslation();
 
@@ -40,8 +44,18 @@ export function CopyableField({ label, value, text }: Readonly<CopyableFieldProp
         <Label className="text-sm text-muted-foreground">{label}：</Label>
         {value && (
           <CopyToClipboard text={value} onCopy={handleCopy}>
-            <Button variant="ghost" size="icon" type="button" className="h-8 w-8" disabled={hasCopied}>
-              {hasCopied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+            <Button
+              variant="ghost"
+              size="icon"
+              type="button"
+              className="h-8 w-8"
+              disabled={hasCopied}
+            >
+              {hasCopied ? (
+                <Check className="h-4 w-4" />
+              ) : (
+                <Copy className="h-4 w-4" />
+              )}
             </Button>
           </CopyToClipboard>
         )}

web/src/components/magicui/line-shadow-text.tsx

@@ -1,7 +1,9 @@
-import {type MotionProps, motion } from "motion/react";
-import {cn} from "@/lib/utils";
+import { type MotionProps, motion } from "motion/react";
+import { cn } from "@/lib/utils";
 
-interface LineShadowTextProps extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps>, MotionProps {
+interface LineShadowTextProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps>,
+    MotionProps {
   shadowColor?: string;
   as?: React.ElementType;
 }

web/src/components/magicui/rainbow-button.tsx

@@ -1,7 +1,7 @@
-import {Slot} from "@radix-ui/react-slot";
-import {cva, type VariantProps} from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 import React from "react";
-import {cn} from "@/lib/utils";
+import { cn } from "@/lib/utils";
 
 const rainbowButtonVariants = cva(
   cn(

web/src/components/memshell/main-config-card.tsx

@@ -1,41 +1,56 @@
 import {
-    ArrowUpRightIcon,
-    AxeIcon,
-    CommandIcon,
-    NetworkIcon,
-    ServerIcon,
-    ShieldOffIcon,
-    SwordIcon,
-    WaypointsIcon,
-    ZapIcon,
+  ArrowUpRightIcon,
+  AxeIcon,
+  CommandIcon,
+  NetworkIcon,
+  ServerIcon,
+  ShieldOffIcon,
+  SwordIcon,
+  WaypointsIcon,
+  ZapIcon,
 } from "lucide-react";
-import {type JSX, useCallback, useEffect, useId, useState} from "react";
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {AntSwordTabContent} from "@/components/memshell/tabs/antsword-tab";
-import {BehinderTabContent} from "@/components/memshell/tabs/behinder-tab";
-import {CommandTabContent} from "@/components/memshell/tabs/command-tab";
+import { type JSX, useCallback, useEffect, useState } from "react";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { AntSwordTabContent } from "@/components/memshell/tabs/antsword-tab";
+import { BehinderTabContent } from "@/components/memshell/tabs/behinder-tab";
+import { CommandTabContent } from "@/components/memshell/tabs/command-tab";
 import CustomTabContent from "@/components/memshell/tabs/custom-tab";
-import {GodzillaTabContent} from "@/components/memshell/tabs/godzilla-tab";
-import {NeoRegTabContent} from "@/components/memshell/tabs/neoreg-tab";
-import {Suo5TabContent} from "@/components/memshell/tabs/suo5-tab";
-import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card.tsx";
+import { GodzillaTabContent } from "@/components/memshell/tabs/godzilla-tab";
+import { NeoRegTabContent } from "@/components/memshell/tabs/neoreg-tab";
+import { Suo5TabContent } from "@/components/memshell/tabs/suo5-tab";
 import {
-    FormControl,
-    FormDescription,
-    FormField,
-    FormFieldItem,
-    FormFieldLabel,
-    FormItem,
-    FormLabel,
-    FormMessage,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card.tsx";
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormFieldItem,
+  FormFieldLabel,
+  FormItem,
+  FormLabel,
+  FormMessage,
 } from "@/components/ui/form.tsx";
-import {Label} from "@/components/ui/label.tsx";
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select.tsx";
-import {Switch} from "@/components/ui/switch.tsx";
-import {Tabs, TabsList, TabsTrigger} from "@/components/ui/tabs";
-import {type MainConfig, type ServerConfig, ShellToolType} from "@/types/memshell";
-import type {MemShellFormSchema} from "@/types/schema.ts";
+import { Label } from "@/components/ui/label.tsx";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select.tsx";
+import { Switch } from "@/components/ui/switch.tsx";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  type MainConfig,
+  type ServerConfig,
+  ShellToolType,
+} from "@/types/memshell";
+import type { MemShellFormSchema } from "@/types/schema.ts";
 
 const shellToolIcons: Record<ShellToolType, JSX.Element> = {
   [ShellToolType.Behinder]: <ShieldOffIcon className="h-4 w-4" />,
@@ -79,7 +94,9 @@ export default function MainConfigCard({
   const shellTool = form.watch("shellTool");
   const { t } = useTranslation();
 
-  const [serverVersionOptions, setServerVersionOptions] = useState(defaultServerVersionOptions);
+  const [serverVersionOptions, setServerVersionOptions] = useState(
+    defaultServerVersionOptions,
+  );
 
   // 处理一下 shellTypes 由于 server 或 shellTool 变更时无法正常为 form.shellType 赋值的问题
   useEffect(() => {
@@ -95,7 +112,10 @@ export default function MainConfigCard({
         setShellToolMap(newShellToolMap);
 
         const newShellTools = Object.keys(newShellToolMap);
-        setShellTools([...newShellTools.map((tool) => tool as ShellToolType), ShellToolType.Custom]);
+        setShellTools([
+          ...newShellTools.map((tool) => tool as ShellToolType),
+          ShellToolType.Custom,
+        ]);
 
         const currentShellTool = form.getValues("shellTool");
 
@@ -233,10 +253,6 @@ export default function MainConfigCard({
     [form, servers, shellToolMap],
   );
 
-  const debugId = useId();
-  const bypassId = useId();
-  const shrinkId = useId();
-
   return (
     <FormProvider {...form}>
       <Card>

web/src/components/memshell/package-config-card.tsx

@@ -1,12 +1,22 @@
-import {PackageIcon} from "lucide-react";
-import {useEffect, useState} from "react";
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card.tsx";
-import {FormControl, FormField, FormItem, FormLabel} from "@/components/ui/form.tsx";
-import {RadioGroup, RadioGroupItem} from "@/components/ui/radio-group.tsx";
-import type {PackerConfig} from "@/types/memshell";
-import type {MemShellFormSchema} from "@/types/schema.ts";
+import { PackageIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card.tsx";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form.tsx";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group.tsx";
+import type { PackerConfig } from "@/types/memshell";
+import type { MemShellFormSchema } from "@/types/schema.ts";
 
 type Option = {
   name: string;
@@ -49,7 +59,10 @@ export default function PackageConfigCard({
 
     setOptions(mappedOptions);
     const currentValue = form.getValues("packingMethod");
-    if (filteredOptions.length > 0 && (!currentValue || !filteredOptions.includes(currentValue))) {
+    if (
+      filteredOptions.length > 0 &&
+      (!currentValue || !filteredOptions.includes(currentValue))
+    ) {
       form.setValue("packingMethod", filteredOptions[0]);
     }
   }, [form, packerConfig, server, shellType, t]);
@@ -78,7 +91,10 @@ export default function PackageConfigCard({
                       className="grid grid-cols-2 md:grid-cols-3"
                     >
                       {options.map(({ name, value }) => (
-                        <FormItem key={value} className="flex items-center space-x-3 space-y-0">
+                        <FormItem
+                          key={value}
+                          className="flex items-center space-x-3 space-y-0"
+                        >
                           <FormControl>
                             <RadioGroupItem value={value} id={value} />
                           </FormControl>
@@ -96,7 +112,9 @@ export default function PackageConfigCard({
         ) : (
           <div className="flex items-center justify-center p-4 space-x-2">
             <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-            <span className="text-sm text-muted-foreground">{t("loading")}</span>
+            <span className="text-sm text-muted-foreground">
+              {t("loading")}
+            </span>
           </div>
         )}
       </CardContent>

web/src/components/memshell/quick-usage.tsx

@@ -1,6 +1,11 @@
 import { ScrollTextIcon } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card.tsx";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card.tsx";
 
 export function QuickUsage() {
   const { t } = useTranslation();

web/src/components/memshell/results/agent.tsx

@@ -1,10 +1,10 @@
-import {ScrollTextIcon} from "lucide-react";
-import {useTranslation} from "react-i18next";
-import {Button} from "@/components/ui/button";
-import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
-import {Separator} from "@/components/ui/separator";
-import {downloadBytes, formatBytes} from "@/lib/utils";
-import type {MemShellResult} from "@/types/memshell";
+import { ScrollTextIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { downloadBytes, formatBytes } from "@/lib/utils";
+import type { MemShellResult } from "@/types/memshell";
 
 export function AgentResult({
   packMethod,

web/src/components/memshell/results/basic-info.tsx

@@ -1,20 +1,20 @@
-import {FileTextIcon} from "lucide-react";
-import {useTranslation} from "react-i18next";
-import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
-import {Separator} from "@/components/ui/separator";
-import {shouldHidden} from "@/lib/utils";
+import { FileTextIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { shouldHidden } from "@/lib/utils";
 import {
-    type AntSwordShellToolConfig,
-    type BehinderShellToolConfig,
-    type CommandShellToolConfig,
-    type GodzillaShellToolConfig,
-    type MemShellResult,
-    type NeoreGeorgShellToolConfig,
-    ShellToolType,
-    type Suo5ShellToolConfig,
+  type AntSwordShellToolConfig,
+  type BehinderShellToolConfig,
+  type CommandShellToolConfig,
+  type GodzillaShellToolConfig,
+  type MemShellResult,
+  type NeoreGeorgShellToolConfig,
+  ShellToolType,
+  type Suo5ShellToolConfig,
 } from "@/types/memshell";
-import {CopyableField} from "../../copyable-field";
-import {FeedbackAlert} from "./feedback-alert";
+import { CopyableField } from "../../copyable-field";
+import { FeedbackAlert } from "./feedback-alert";
 
 export function BasicInfo({ generateResult }: Readonly<{ generateResult?: MemShellResult }>) {
   const { t } = useTranslation();

web/src/components/memshell/results/jar-result.tsx

@@ -1,7 +1,7 @@
-import {useTranslation} from "react-i18next";
-import {Button} from "@/components/ui/button";
-import {downloadBytes} from "@/lib/utils";
-import type {MemShellResult} from "@/types/memshell";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import { downloadBytes } from "@/lib/utils";
+import type { MemShellResult } from "@/types/memshell";
 
 export function JarResult({
   packResult,

web/src/components/memshell/results/multi-packer.tsx

@@ -1,7 +1,14 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import CodeViewer from "@/components/code-viewer";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
 export function MultiPackResult({
   allPackResults,
   packMethod,
@@ -30,7 +37,9 @@ export function MultiPackResult({
           <Select
             onValueChange={(value) => {
               setSelectedMethod(value);
-              setPackResult(allPackResults?.[value as keyof typeof allPackResults] ?? "");
+              setPackResult(
+                allPackResults?.[value as keyof typeof allPackResults] ?? "",
+              );
             }}
             value={selectedMethod}
           >

web/src/components/memshell/results/result-component.tsx

@@ -1,9 +1,9 @@
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
 import CodeViewer from "@/components/code-viewer";
-import type {MemShellResult} from "@/types/memshell";
-import {AgentResult} from "./agent";
-import {JarResult} from "./jar-result";
-import {MultiPackResult} from "./multi-packer";
+import type { MemShellResult } from "@/types/memshell";
+import { AgentResult } from "./agent";
+import { JarResult } from "./jar-result";
+import { MultiPackResult } from "./multi-packer";
 
 export function ResultComponent({
   packResult,
@@ -19,16 +19,32 @@ export function ResultComponent({
   const showCode = packMethod === "JSP";
   const isAgent = packMethod.startsWith("Agent");
   const isJar = packMethod === "Jar";
-  const { t } =  useTranslation();
+  const { t } = useTranslation();
   if (allPackResults) {
-    return <MultiPackResult allPackResults={allPackResults} packMethod={packMethod} />;
+    return (
+      <MultiPackResult
+        allPackResults={allPackResults}
+        packMethod={packMethod}
+      />
+    );
   }
 
   if (isAgent) {
-    return <AgentResult packMethod={packMethod} packResult={packResult ?? ""} generateResult={generateResult} />;
+    return (
+      <AgentResult
+        packMethod={packMethod}
+        packResult={packResult ?? ""}
+        generateResult={generateResult}
+      />
+    );
   }
   if (isJar) {
-    return <JarResult packResult={packResult ?? ""} generateResult={generateResult} />;
+    return (
+      <JarResult
+        packResult={packResult ?? ""}
+        generateResult={generateResult}
+      />
+    );
   }
   if (!isAgent && !isJar) {
     return (

web/src/components/memshell/shell-result.tsx

@@ -1,15 +1,20 @@
-import {DownloadIcon} from "lucide-react";
-import {useTranslation} from "react-i18next";
-import {toast} from "sonner";
+import { DownloadIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 
-import {QuickUsage} from "@/components/memshell/quick-usage";
-import {Button} from "@/components/ui/button.tsx";
-import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs.tsx";
-import {downloadBytes} from "@/lib/utils.ts";
-import type {MemShellResult} from "@/types/memshell";
+import { QuickUsage } from "@/components/memshell/quick-usage";
+import { Button } from "@/components/ui/button.tsx";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs.tsx";
+import { downloadBytes } from "@/lib/utils.ts";
+import type { MemShellResult } from "@/types/memshell";
 import CodeViewer from "../code-viewer";
-import {BasicInfo} from "./results/basic-info";
-import {ResultComponent} from "./results/result-component";
+import { BasicInfo } from "./results/basic-info";
+import { ResultComponent } from "./results/result-component";
 
 export default function ShellResult({
   packResult,

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

@@ -1,13 +1,18 @@
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {Card, CardContent} from "@/components/ui/card";
-import {FormControl, FormField, FormFieldItem, FormFieldLabel} from "@/components/ui/form";
-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";
-import {UrlPatternFormField} from "./urlpattern-field";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  FormControl,
+  FormField,
+  FormFieldItem,
+  FormFieldLabel,
+} from "@/components/ui/form";
+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";
+import { UrlPatternFormField } from "./urlpattern-field";
 
 export function AntSwordTabContent({
   form,

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

@@ -1,13 +1,13 @@
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {Card, CardContent} from "@/components/ui/card";
-import {FormField, FormFieldItem, FormFieldLabel} from "@/components/ui/form";
-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";
-import {UrlPatternFormField} from "./urlpattern-field";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "@/components/ui/card";
+import { FormField, FormFieldItem, FormFieldLabel } from "@/components/ui/form";
+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";
+import { UrlPatternFormField } from "./urlpattern-field";
 
 export function BehinderTabContent({
   form,

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

@@ -1,11 +1,15 @@
-import {ChevronDown, ChevronUp, Settings} from "lucide-react";
-import {Fragment, useId, useState} from "react";
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {Button} from "@/components/ui/button";
-import {FormField, FormFieldItem, FormFieldLabel} from "@/components/ui/form.tsx";
-import {Input} from "@/components/ui/input.tsx";
-import type {MemShellFormSchema} from "@/types/schema.ts";
+import { ChevronDown, ChevronUp, Settings } from "lucide-react";
+import { Fragment, useState } from "react";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import {
+  FormField,
+  FormFieldItem,
+  FormFieldLabel,
+} from "@/components/ui/form.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import type { MemShellFormSchema } from "@/types/schema.ts";
 
 export function OptionalClassFormField({ form }: Readonly<{ form: UseFormReturn<MemShellFormSchema> }>) {
   const { t } = useTranslation();

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

@@ -1,16 +1,27 @@
-import {useQuery} from "@tanstack/react-query";
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {Card, CardContent} from "@/components/ui/card";
-import {FormControl, FormField, FormFieldItem, FormFieldLabel} from "@/components/ui/form";
-import {Input} from "@/components/ui/input";
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
-import {TabsContent} from "@/components/ui/tabs";
-import {env} from "@/config";
-import type {MemShellFormSchema} from "@/types/schema";
-import {OptionalClassFormField} from "./classname-field";
-import {ShellTypeFormField} from "./shelltype-field";
-import {UrlPatternFormField} from "./urlpattern-field";
+import { useQuery } from "@tanstack/react-query";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  FormControl,
+  FormField,
+  FormFieldItem,
+  FormFieldLabel,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { TabsContent } from "@/components/ui/tabs";
+import { env } from "@/config";
+import type { MemShellFormSchema } from "@/types/schema";
+import { OptionalClassFormField } from "./classname-field";
+import { ShellTypeFormField } from "./shelltype-field";
+import { UrlPatternFormField } from "./urlpattern-field";
 
 export function CommandTabContent({
   form,

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

@@ -1,17 +1,23 @@
-import {t} from "i18next";
-import {useId, useState} from "react";
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {Card, CardContent} from "@/components/ui/card";
-import {FormControl, FormField, FormFieldItem, FormFieldLabel, FormMessage} from "@/components/ui/form";
-import {Input} from "@/components/ui/input";
-import {Label} from "@/components/ui/label";
-import {RadioGroup, RadioGroupItem} from "@/components/ui/radio-group";
-import {TabsContent} from "@/components/ui/tabs";
-import {Textarea} from "@/components/ui/textarea";
-import type {MemShellFormSchema} from "@/types/schema";
-import {OptionalClassFormField} from "./classname-field";
-import {ShellTypeFormField} from "./shelltype-field";
-import {UrlPatternFormField} from "./urlpattern-field";
+import { useState } from "react";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  FormControl,
+  FormField,
+  FormFieldItem,
+  FormFieldLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { TabsContent } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import type { MemShellFormSchema } from "@/types/schema";
+import { OptionalClassFormField } from "./classname-field";
+import { ShellTypeFormField } from "./shelltype-field";
+import { UrlPatternFormField } from "./urlpattern-field";
 
 export default function CustomTabContent({
   form,

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

@@ -1,13 +1,13 @@
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {Card, CardContent} from "@/components/ui/card";
-import {FormField, FormFieldItem, FormFieldLabel} from "@/components/ui/form";
-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";
-import {UrlPatternFormField} from "./urlpattern-field";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "@/components/ui/card";
+import { FormField, FormFieldItem, FormFieldLabel } from "@/components/ui/form";
+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";
+import { UrlPatternFormField } from "./urlpattern-field";
 
 export function GodzillaTabContent({
   form,

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

@@ -1,13 +1,13 @@
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {Card, CardContent} from "@/components/ui/card";
-import {FormField, FormFieldItem, FormFieldLabel} from "@/components/ui/form";
-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";
-import {UrlPatternFormField} from "./urlpattern-field";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "@/components/ui/card";
+import { FormField, FormFieldItem, FormFieldLabel } from "@/components/ui/form";
+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";
+import { UrlPatternFormField } from "./urlpattern-field";
 
 export function NeoRegTabContent({
   form,

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

@@ -1,8 +1,19 @@
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {FormControl, FormField, FormFieldItem, FormFieldLabel} from "@/components/ui/form.tsx";
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select.tsx";
-import type {MemShellFormSchema} from "@/types/schema.ts";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import {
+  FormControl,
+  FormField,
+  FormFieldItem,
+  FormFieldLabel,
+} from "@/components/ui/form.tsx";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select.tsx";
+import type { MemShellFormSchema } from "@/types/schema.ts";
 
 export function ShellTypeFormField({
   form,

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

@@ -1,13 +1,13 @@
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {Card, CardContent} from "@/components/ui/card";
-import {FormField, FormFieldItem, FormFieldLabel} from "@/components/ui/form";
-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";
-import {UrlPatternFormField} from "./urlpattern-field";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "@/components/ui/card";
+import { FormField, FormFieldItem, FormFieldLabel } from "@/components/ui/form";
+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";
+import { UrlPatternFormField } from "./urlpattern-field";
 
 export function Suo5TabContent({
   form,

web/src/components/memshell/tabs/urlpattern-field.tsx

@@ -1,9 +1,14 @@
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {FormField, FormFieldItem, FormFieldLabel, FormMessage} from "@/components/ui/form.tsx";
-import {Input} from "@/components/ui/input.tsx";
-import {shouldHidden} from "@/lib/utils";
-import type {MemShellFormSchema} from "@/types/schema.ts";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import {
+  FormField,
+  FormFieldItem,
+  FormFieldLabel,
+  FormMessage,
+} from "@/components/ui/form.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { shouldHidden } from "@/lib/utils";
+import type { MemShellFormSchema } from "@/types/schema.ts";
 
 export function UrlPatternFormField({ form }: Readonly<{ form: UseFormReturn<MemShellFormSchema> }>) {
   const { t } = useTranslation();

web/src/components/mode-toggle.tsx

@@ -22,9 +22,15 @@ export function ModeToggle() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );

web/src/components/modile-nav.tsx

@@ -1,7 +1,11 @@
 import React from "react";
 import { NavLink } from "react-router";
 import { Button } from "@/components/ui/button";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 
 export function MobileNav({
@@ -40,7 +44,9 @@ export function MobileNav({
             </div>
             <span className="sr-only">Toggle Menu</span>
           </div>
-          <span className="flex h-8 items-center text-lg leading-none font-medium">Menu</span>
+          <span className="flex h-8 items-center text-lg leading-none font-medium">
+            Menu
+          </span>
         </Button>
       </PopoverTrigger>
       <PopoverContent
@@ -52,13 +58,19 @@ export function MobileNav({
       >
         <div className="flex flex-col gap-12 overflow-auto px-6 py-6">
           <div className="flex flex-col gap-4">
-            <div className="text-muted-foreground text-sm font-medium">Menu</div>
+            <div className="text-muted-foreground text-sm font-medium">
+              Menu
+            </div>
             <div className="flex flex-col gap-3">
               <MobileLink href="/" onOpenChange={setOpen}>
                 Home
               </MobileLink>
               {items.map((item) => (
-                <MobileLink key={item.href} href={item.href} onOpenChange={setOpen}>
+                <MobileLink
+                  key={item.href}
+                  href={item.href}
+                  onOpenChange={setOpen}
+                >
                   {item.label}
                 </MobileLink>
               ))}

web/src/components/tailwind-indicator.tsx

@@ -2,7 +2,9 @@ export function TailwindIndicator() {
   return (
     <div className="fixed bottom-1 right-1 z-50 flex size-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
       <div className="block sm:hidden">xs</div>
-      <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">sm</div>
+      <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">
+        sm
+      </div>
       <div className="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</div>
       <div className="hidden lg:block xl:hidden 2xl:hidden">lg</div>
       <div className="hidden xl:block 2xl:hidden">xl</div>

web/src/components/theme-provider.tsx

@@ -26,7 +26,9 @@ export function ThemeProvider({
   storageKey = "vite-ui-theme",
   ...props
 }: Readonly<ThemeProviderProps>) {
-  const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme);
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
+  );
 
   useEffect(() => {
     const root = window.document.documentElement;
@@ -35,7 +37,10 @@ export function ThemeProvider({
 
     root.removeAttribute(mode);
     if (theme === "system") {
-      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
 
       root.classList.add(systemTheme);
       root.setAttribute(mode, systemTheme);
@@ -66,7 +71,8 @@ export function ThemeProvider({
 export const useTheme = () => {
   const context = useContext(ThemeProviderContext);
 
-  if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider");
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
 
   return context;
 };