Dashboard Redesign (#48)

* feat: add user_template setting

* style: header

* style: page padding

* style: header

* feat: header now time

* style: login page

* feat: nav indicator

* style: button inset shadow

* style: footer text size

* feat: header show login_ip

* fix: error toast

* fix: frontend_templates setting

* fix: lint

* feat: pr auto format

* chore: auto-fix linting and formatting issues

---------

Co-authored-by: hamster1963 <hamster1963@users.noreply.github.com>

src/components/server-group.tsx

@@ -1,3 +1,4 @@
+import { createServerGroup, updateServerGroup } from "@/api/server-group"
 import { Button } from "@/components/ui/button"
 import {
     Dialog,
@@ -9,7 +10,6 @@ import {
     DialogTitle,
     DialogTrigger,
 } from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
 import {
     Form,
     FormControl,
@@ -18,76 +18,76 @@ import {
     FormLabel,
     FormMessage,
 } from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
 import { ScrollArea } from "@/components/ui/scroll-area"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { ModelServerGroupResponseItem } from "@/types"
-import { useState } from "react"
-import { KeyedMutator } from "swr"
 import { IconButton } from "@/components/xui/icon-button"
-import { createServerGroup, updateServerGroup } from "@/api/server-group"
 import { MultiSelect } from "@/components/xui/multi-select"
 import { useServer } from "@/hooks/useServer"
-
-import { useTranslation } from "react-i18next";
+import { ModelServerGroupResponseItem } from "@/types"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useState } from "react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { KeyedMutator } from "swr"
+import { z } from "zod"
 
 interface ServerGroupCardProps {
-    data?: ModelServerGroupResponseItem;
-    mutate: KeyedMutator<ModelServerGroupResponseItem[]>;
+    data?: ModelServerGroupResponseItem
+    mutate: KeyedMutator<ModelServerGroupResponseItem[]>
 }
 
 const serverGroupFormSchema = z.object({
     name: z.string().min(1),
     servers: z.array(z.number()),
-});
+})
 
 export const ServerGroupCard: React.FC<ServerGroupCardProps> = ({ data, mutate }) => {
-    const { t } = useTranslation();
+    const { t } = useTranslation()
     const form = useForm<z.infer<typeof serverGroupFormSchema>>({
         resolver: zodResolver(serverGroupFormSchema),
-        defaultValues: data ? {
-            name: data.group.name,
-            servers: data.servers,
-        } : {
-            name: "",
-            servers: [],
-        },
+        defaultValues: data
+            ? {
+                  name: data.group.name,
+                  servers: data.servers,
+              }
+            : {
+                  name: "",
+                  servers: [],
+              },
         resetOptions: {
             keepDefaultValues: false,
-        }
+        },
     })
 
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] = useState(false)
 
     const onSubmit = async (values: z.infer<typeof serverGroupFormSchema>) => {
-        data?.group.id ? await updateServerGroup(data.group.id, values) : await createServerGroup(values);
-        setOpen(false);
-        await mutate();
-        form.reset();
+        data?.group.id
+            ? await updateServerGroup(data.group.id, values)
+            : await createServerGroup(values)
+        setOpen(false)
+        await mutate()
+        form.reset()
     }
 
-    const { servers } = useServer();
-    const serverList = servers?.map(s => ({
+    const { servers } = useServer()
+    const serverList = servers?.map((s) => ({
         value: `${s.id}`,
         label: s.name,
-    })) || [{ value: "", label: "" }];
+    })) || [{ value: "", label: "" }]
 
     return (
         <Dialog open={open} onOpenChange={setOpen}>
             <DialogTrigger asChild>
-                {data
-                    ?
-                    <IconButton variant="outline" icon="edit" />
-                    :
-                    <IconButton icon="plus" />
-                }
+                {data ? <IconButton variant="outline" icon="edit" /> : <IconButton icon="plus" />}
             </DialogTrigger>
             <DialogContent className="sm:max-w-xl">
                 <ScrollArea className="max-h-[calc(100dvh-5rem)] p-3">
                     <div className="items-center mx-1">
                         <DialogHeader>
-                            <DialogTitle>{data? t("EditServerGroup"):t("CreateServerGroup")}</DialogTitle>
+                            <DialogTitle>
+                                {data ? t("EditServerGroup") : t("CreateServerGroup")}
+                            </DialogTitle>
                             <DialogDescription />
                         </DialogHeader>
                         <Form {...form}>
@@ -99,10 +99,7 @@ export const ServerGroupCard: React.FC<ServerGroupCardProps> = ({ data, mutate }
                                         <FormItem>
                                             <FormLabel>{t("Name")}</FormLabel>
                                             <FormControl>
-                                                <Input
-                                                    placeholder="Group Name"
-                                                    {...field}
-                                                />
+                                                <Input placeholder="Group Name" {...field} />
                                             </FormControl>
                                             <FormMessage />
                                         </FormItem>
@@ -117,9 +114,9 @@ export const ServerGroupCard: React.FC<ServerGroupCardProps> = ({ data, mutate }
                                             <FormControl>
                                                 <MultiSelect
                                                     options={serverList}
-                                                    onValueChange={e => {
-                                                        const arr = e.map(Number);
-                                                        field.onChange(arr);
+                                                    onValueChange={(e) => {
+                                                        const arr = e.map(Number)
+                                                        field.onChange(arr)
                                                     }}
                                                     defaultValue={field.value?.map(String)}
                                                 />
@@ -134,7 +131,9 @@ export const ServerGroupCard: React.FC<ServerGroupCardProps> = ({ data, mutate }
                                             {t("Close")}
                                         </Button>
                                     </DialogClose>
-                                    <Button type="submit" className="my-2">{t("Confirm")}</Button>
+                                    <Button type="submit" className="my-2">
+                                        {t("Confirm")}
+                                    </Button>
                                 </DialogFooter>
                             </form>
                         </Form>