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/xui/icon-button.tsx

@@ -1,79 +1,84 @@
+import { Button, ButtonProps } from "@/components/ui/button"
 import {
-    Plus,
-    Edit2,
-    Trash2,
-    Terminal,
+    Check,
     CircleArrowUp,
     Clipboard,
-    Check,
-    FolderClosed,
-    Play,
     Download,
-    Upload,
+    Edit2,
+    FolderClosed,
     Menu,
+    Play,
+    Plus,
+    Terminal,
+    Trash2,
+    Upload,
 } from "lucide-react"
-import { Button, ButtonProps } from "@/components/ui/button"
-import { forwardRef } from "react";
+import { forwardRef } from "react"
 
 export interface IconButtonProps extends ButtonProps {
     icon:
-    "clipboard" |
-    "check" |
-    "edit" |
-    "trash" |
-    "plus" |
-    "terminal" |
-    "update" |
-    "folder-closed" |
-    "play" |
-    "download" |
-    "upload" |
-    "menu";
+        | "clipboard"
+        | "check"
+        | "edit"
+        | "trash"
+        | "plus"
+        | "terminal"
+        | "update"
+        | "folder-closed"
+        | "play"
+        | "download"
+        | "upload"
+        | "menu"
 }
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
     return (
-        <Button {...props} ref={ref} size="icon">
+        <Button
+            className="rounded-lg shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]"
+            {...props}
+            ref={ref}
+            size="icon"
+        >
             {(() => {
                 switch (props.icon) {
                     case "clipboard": {
-                        return <Clipboard />;
+                        return <Clipboard />
                     }
                     case "check": {
-                        return <Check />;
+                        return <Check />
                     }
                     case "edit": {
-                        return <Edit2 />;
+                        return <Edit2 />
                     }
                     case "trash": {
-                        return <Trash2 />;
+                        return <Trash2 />
                     }
                     case "plus": {
-                        return <Plus />;
+                        return <Plus />
                     }
                     case "terminal": {
-                        return <Terminal />;
+                        return <Terminal />
                     }
                     case "update": {
-                        return <CircleArrowUp />;
+                        return <CircleArrowUp />
                     }
                     case "folder-closed": {
-                        return <FolderClosed />;
+                        return <FolderClosed />
                     }
                     case "play": {
-                        return <Play />;
+                        return <Play />
                     }
                     case "download": {
-                        return <Download />;
+                        return <Download />
                     }
                     case "upload": {
-                        return <Upload />;
+                        return <Upload />
                     }
                     case "menu": {
-                        return <Menu />;
+                        return <Menu />
                     }
                 }
             })()}
         </Button>
-    );
+    )
 })