From f6f2611b920d029b6d48eb61acc462416f5cb255 Mon Sep 17 00:00:00 2001
From: ReaJason <reajason1225@gmail.com>
Date: Sat, 1 Mar 2025 23:10:38 +0800
Subject: [PATCH] chore: enhance phone ui

---
 web/src/components/main-config-card.tsx       |  2 +-
 web/src/components/results/agent.tsx          |  2 +-
 web/src/components/results/basic-info.tsx     |  2 +-
 web/src/components/results/feedback-alert.tsx |  4 ++--
 web/src/components/results/multi-packer.tsx   |  2 +-
 web/src/components/tools/antsword-tab.tsx     |  2 +-
 web/src/components/tools/behinder-tab.tsx     |  2 +-
 web/src/components/tools/command-tab.tsx      |  2 +-
 web/src/components/tools/godzilla-tab.tsx     |  2 +-
 web/src/components/tools/neoreg-tab.tsx       |  2 +-
 web/src/components/tools/suo5-tab.tsx         |  2 +-
 web/src/icon.tsx                              | 16 ++++++++++++++++
 web/src/routes/__root.tsx                     | 18 ++++--------------
 web/tsconfig.app.tsbuildinfo                  |  2 +-
 14 files changed, 33 insertions(+), 27 deletions(-)
 create mode 100644 web/src/icon.tsx

diff --git a/web/src/components/main-config-card.tsx b/web/src/components/main-config-card.tsx
index 72d7403a..890b75e0 100644
--- a/web/src/components/main-config-card.tsx
+++ b/web/src/components/main-config-card.tsx
@@ -235,7 +235,7 @@ export function MainConfigCard({
               )}
             />
           </div>
-          <div className="flex gap-4 mt-4">
+          <div className="flex gap-4 mt-4 flex-col sm:flex-row">
             <FormField
               control={form.control}
               name="debug"
diff --git a/web/src/components/results/agent.tsx b/web/src/components/results/agent.tsx
index c014bd0e..6a43fd40 100644
--- a/web/src/components/results/agent.tsx
+++ b/web/src/components/results/agent.tsx
@@ -1,10 +1,10 @@
 import { downloadBytes } from "@/lib/utils";
 import { GenerateResult } from "@/types/shell";
-import { Separator } from "../ui/separator";
 import { ScrollTextIcon } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { Button } from "../ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { Separator } from "../ui/separator";
 
 export function AgentResult({ packResult, generateResult }: { packResult: string; generateResult?: GenerateResult }) {
   const { t } = useTranslation();
diff --git a/web/src/components/results/basic-info.tsx b/web/src/components/results/basic-info.tsx
index b100ceed..f2c79fd6 100644
--- a/web/src/components/results/basic-info.tsx
+++ b/web/src/components/results/basic-info.tsx
@@ -13,8 +13,8 @@ import { useTranslation } from "react-i18next";
 import { Fragment } from "react/jsx-runtime";
 import { CopyableField } from "../copyable-field";
 import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
-import { FeedbackAlert } from "./feedback-alert";
 import { Separator } from "../ui/separator";
+import { FeedbackAlert } from "./feedback-alert";
 
 export function BasicInfo({ generateResult }: { generateResult?: GenerateResult }) {
   const { t } = useTranslation();
diff --git a/web/src/components/results/feedback-alert.tsx b/web/src/components/results/feedback-alert.tsx
index e70a14af..018c8dbc 100644
--- a/web/src/components/results/feedback-alert.tsx
+++ b/web/src/components/results/feedback-alert.tsx
@@ -1,3 +1,5 @@
+import { CircleHelpIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -7,8 +9,6 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "../ui/alert-dialog";
-import { CircleHelpIcon } from "lucide-react";
-import { useTranslation } from "react-i18next";
 import { AlertDialogFooter, AlertDialogHeader } from "../ui/alert-dialog";
 import { Button } from "../ui/button";
 
diff --git a/web/src/components/results/multi-packer.tsx b/web/src/components/results/multi-packer.tsx
index 49bf7774..e25e4854 100644
--- a/web/src/components/results/multi-packer.tsx
+++ b/web/src/components/results/multi-packer.tsx
@@ -1,8 +1,8 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { TFunction } from "i18next";
 import { useEffect, useState } from "react";
 import { Fragment } from "react/jsx-runtime";
 import { CodeViewer } from "../code-viewer";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 
 export function MultiPackResult({
   allPackResults,
diff --git a/web/src/components/tools/antsword-tab.tsx b/web/src/components/tools/antsword-tab.tsx
index 89e477f0..f1b63998 100644
--- a/web/src/components/tools/antsword-tab.tsx
+++ b/web/src/components/tools/antsword-tab.tsx
@@ -1,10 +1,10 @@
 import { FormSchema } from "@/types/schema";
-import { TabsContent } from "../ui/tabs";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "../ui/card";
 import { FormField, FormItem, FormLabel } from "../ui/form";
 import { Input } from "../ui/input";
+import { TabsContent } from "../ui/tabs";
 import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 import { UrlPatternFormField } from "./urlpattern-field";
diff --git a/web/src/components/tools/behinder-tab.tsx b/web/src/components/tools/behinder-tab.tsx
index 8d58cddf..a8e35fca 100644
--- a/web/src/components/tools/behinder-tab.tsx
+++ b/web/src/components/tools/behinder-tab.tsx
@@ -1,10 +1,10 @@
 import { FormSchema } from "@/types/schema";
-import { TabsContent } from "../ui/tabs";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "../ui/card";
 import { FormField, FormItem, FormLabel } from "../ui/form";
 import { Input } from "../ui/input";
+import { TabsContent } from "../ui/tabs";
 import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 import { UrlPatternFormField } from "./urlpattern-field";
diff --git a/web/src/components/tools/command-tab.tsx b/web/src/components/tools/command-tab.tsx
index 9835ddf8..ad0d4055 100644
--- a/web/src/components/tools/command-tab.tsx
+++ b/web/src/components/tools/command-tab.tsx
@@ -1,10 +1,10 @@
 import { FormSchema } from "@/types/schema";
-import { TabsContent } from "../ui/tabs";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "../ui/card";
 import { FormControl, FormField, FormItem, FormLabel } from "../ui/form";
 import { Input } from "../ui/input";
+import { TabsContent } from "../ui/tabs";
 import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 import { UrlPatternFormField } from "./urlpattern-field";
diff --git a/web/src/components/tools/godzilla-tab.tsx b/web/src/components/tools/godzilla-tab.tsx
index a6bd670c..892dcbb6 100644
--- a/web/src/components/tools/godzilla-tab.tsx
+++ b/web/src/components/tools/godzilla-tab.tsx
@@ -1,10 +1,10 @@
 import { FormSchema } from "@/types/schema";
-import { TabsContent } from "../ui/tabs";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "../ui/card";
 import { FormField, FormItem, FormLabel } from "../ui/form";
 import { Input } from "../ui/input";
+import { TabsContent } from "../ui/tabs";
 import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 import { UrlPatternFormField } from "./urlpattern-field";
diff --git a/web/src/components/tools/neoreg-tab.tsx b/web/src/components/tools/neoreg-tab.tsx
index 29a2c2a2..77a3a3a0 100644
--- a/web/src/components/tools/neoreg-tab.tsx
+++ b/web/src/components/tools/neoreg-tab.tsx
@@ -1,10 +1,10 @@
 import { FormSchema } from "@/types/schema";
-import { TabsContent } from "../ui/tabs";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "../ui/card";
 import { FormField, FormItem, FormLabel } from "../ui/form";
 import { Input } from "../ui/input";
+import { TabsContent } from "../ui/tabs";
 import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 import { UrlPatternFormField } from "./urlpattern-field";
diff --git a/web/src/components/tools/suo5-tab.tsx b/web/src/components/tools/suo5-tab.tsx
index 5cb7a202..e1ab7462 100644
--- a/web/src/components/tools/suo5-tab.tsx
+++ b/web/src/components/tools/suo5-tab.tsx
@@ -1,10 +1,10 @@
 import { FormSchema } from "@/types/schema";
-import { TabsContent } from "../ui/tabs";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "../ui/card";
 import { FormField, FormItem, FormLabel } from "../ui/form";
 import { Input } from "../ui/input";
+import { TabsContent } from "../ui/tabs";
 import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 import { UrlPatternFormField } from "./urlpattern-field";
diff --git a/web/src/icon.tsx b/web/src/icon.tsx
new file mode 100644
index 00000000..5df08224
--- /dev/null
+++ b/web/src/icon.tsx
@@ -0,0 +1,16 @@
+export function GitHubIcon() {
+  return (
+    <svg
+      height="32"
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      version="1.1"
+      width="32"
+      data-view-component="true"
+      className="octicon octicon-mark-github v-align-middle"
+      fill="currentColor"
+    >
+      <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z" />
+    </svg>
+  );
+}
diff --git a/web/src/routes/__root.tsx b/web/src/routes/__root.tsx
index 63a5ca70..00b336b0 100644
--- a/web/src/routes/__root.tsx
+++ b/web/src/routes/__root.tsx
@@ -4,6 +4,7 @@ import { ThemeProvider } from "@/components/theme-provider.tsx";
 import { Button } from "@/components/ui/button.tsx";
 import { Toaster } from "@/components/ui/sonner";
 import VersionBadge from "@/components/version-badge";
+import { GitHubIcon } from "@/icon";
 import { Outlet, createRootRoute } from "@tanstack/react-router";
 
 export const Route = createRootRoute({
@@ -16,9 +17,9 @@ function RootComponent() {
       <Toaster />
       <div className="flex flex-col h-screen">
         <header className="sticky top-0 z-50 border-b bg-background px-2 sm:px-4 py-2 sm:py-3">
-          <div className="flex items-center justify-between">
+          <div className="flex flex-col sm:flex-row items-center justify-between gap-2 sm:gap-0">
             <div className="flex items-center">
-              <h2 className="text-base sm:text-lg font-semibold truncate">MemShellParty - JavaWeb</h2>
+              <h2 className="text-base sm:text-lg font-semibold text-center">MemShellParty - JavaWeb</h2>
             </div>
             <div className="flex items-center gap-0.5 sm:gap-1">
               <VersionBadge />
@@ -29,18 +30,7 @@ function RootComponent() {
                 className="size-8"
                 onClick={() => window.open("https://github.com/ReaJason/MemShellParty")}
               >
-                <svg
-                  height="32"
-                  aria-hidden="true"
-                  viewBox="0 0 24 24"
-                  version="1.1"
-                  width="32"
-                  data-view-component="true"
-                  className="octicon octicon-mark-github v-align-middle"
-                  fill="currentColor"
-                >
-                  <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z" />
-                </svg>
+                <GitHubIcon />
               </Button>
               <ModeToggle />
             </div>
diff --git a/web/tsconfig.app.tsbuildinfo b/web/tsconfig.app.tsbuildinfo
index 1eea5ad0..3f6fc715 100644
--- a/web/tsconfig.app.tsbuildinfo
+++ b/web/tsconfig.app.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/config.ts","./src/main.tsx","./src/routetree.gen.ts","./src/components/code-viewer.tsx","./src/components/copyable-field.tsx","./src/components/language-switcher.tsx","./src/components/main-config-card.tsx","./src/components/mode-toggle.tsx","./src/components/package-config-card.tsx","./src/components/quick-usage.tsx","./src/components/shell-result.tsx","./src/components/tailwind-indicator.tsx","./src/components/theme-provider.tsx","./src/components/version-badge.tsx","./src/components/tips/jre-tip.tsx","./src/components/tips/url-pattern-tip.tsx","./src/components/ui/alert-dialog.tsx","./src/components/ui/alert.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/checkbox.tsx","./src/components/ui/dropdown-menu.tsx","./src/components/ui/form.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/radio-group.tsx","./src/components/ui/select.tsx","./src/components/ui/separator.tsx","./src/components/ui/sonner.tsx","./src/components/ui/switch.tsx","./src/components/ui/tabs.tsx","./src/components/ui/textarea.tsx","./src/components/ui/tooltip.tsx","./src/i18n/i18n.ts","./src/i18n/translations.ts","./src/lib/utils.ts","./src/routes/__root.tsx","./src/routes/index.tsx","./src/types/schema.ts","./src/types/shell.ts","./src/utils/transformer.ts"],"version":"5.7.3"}
\ No newline at end of file
+{"root":["./src/config.ts","./src/main.tsx","./src/routetree.gen.ts","./src/components/code-viewer.tsx","./src/components/copyable-field.tsx","./src/components/language-switcher.tsx","./src/components/main-config-card.tsx","./src/components/mode-toggle.tsx","./src/components/package-config-card.tsx","./src/components/quick-usage.tsx","./src/components/shell-result.tsx","./src/components/tailwind-indicator.tsx","./src/components/theme-provider.tsx","./src/components/version-badge.tsx","./src/components/results/agent.tsx","./src/components/results/basic-info.tsx","./src/components/results/feedback-alert.tsx","./src/components/results/jar-result.tsx","./src/components/results/multi-packer.tsx","./src/components/results/result-component.tsx","./src/components/tips/jre-tip.tsx","./src/components/tips/url-pattern-tip.tsx","./src/components/tools/antsword-tab.tsx","./src/components/tools/behinder-tab.tsx","./src/components/tools/classname-field.tsx","./src/components/tools/command-tab.tsx","./src/components/tools/godzilla-tab.tsx","./src/components/tools/neoreg-tab.tsx","./src/components/tools/shelltype-field.tsx","./src/components/tools/suo5-tab.tsx","./src/components/tools/urlpattern-field.tsx","./src/components/ui/alert-dialog.tsx","./src/components/ui/alert.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/checkbox.tsx","./src/components/ui/dropdown-menu.tsx","./src/components/ui/form.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/radio-group.tsx","./src/components/ui/select.tsx","./src/components/ui/separator.tsx","./src/components/ui/sonner.tsx","./src/components/ui/switch.tsx","./src/components/ui/tabs.tsx","./src/components/ui/textarea.tsx","./src/components/ui/tooltip.tsx","./src/i18n/i18n.ts","./src/i18n/translations.ts","./src/lib/utils.ts","./src/routes/__root.tsx","./src/routes/index.tsx","./src/types/schema.ts","./src/types/shell.ts","./src/utils/transformer.ts"],"version":"5.7.3"}
\ No newline at end of file