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/hooks/useAuth.tsx

@@ -1,51 +1,55 @@
-import { createContext, useContext, useEffect, useMemo } from "react";
-import { useNavigate } from "react-router-dom";
-import { useMainStore } from "./useMainStore";
-import { AuthContextProps } from "@/types";
-import { getProfile, login as loginRequest } from "@/api/user";
-import { toast } from "sonner";
+import { getProfile, login as loginRequest } from "@/api/user"
+import { AuthContextProps } from "@/types"
+import { createContext, useContext, useEffect, useMemo } from "react"
+import { useNavigate } from "react-router-dom"
+import { toast } from "sonner"
+
+import { useMainStore } from "./useMainStore"
 
 const AuthContext = createContext<AuthContextProps>({
     profile: undefined,
-    login: () => { },
-    logout: () => { },
-});
+    login: () => {},
+    logout: () => {},
+})
 
-export const AuthProvider = ({ children }: {
-    children: React.ReactNode;
-}) => {
-    const profile = useMainStore(store => store.profile)
-    const setProfile = useMainStore(store => store.setProfile)
+export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+    const profile = useMainStore((store) => store.profile)
+    const setProfile = useMainStore((store) => store.setProfile)
 
     useEffect(() => {
-        (async () => {
+        ;(async () => {
             try {
-                const user = await getProfile();
-                setProfile(user);
-            } catch (error) {
-                setProfile(undefined);
+                const user = await getProfile()
+                setProfile(user)
+            } catch (error: any) {
+                setProfile(undefined)
+                console.log("Error fetching profile", error)
             }
-        })();
+        })()
     }, [])
 
-    const navigate = useNavigate();
+    const navigate = useNavigate()
 
     const login = async (username: string, password: string) => {
         try {
-            await loginRequest(username, password);
-            const user = await getProfile();
-            setProfile(user);
-            navigate("/dashboard");
+            await loginRequest(username, password)
+            const user = await getProfile()
+            setProfile(user)
+            navigate("/dashboard")
         } catch (error: any) {
-            toast(error.message);
+            toast(error.message)
         }
-    };
+    }
 
     const logout = () => {
-        document.cookie.split(";").forEach(function (c) { document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); });
-        setProfile(undefined);
-        navigate("/dashboard/login", { replace: true });
-    };
+        document.cookie.split(";").forEach(function (c) {
+            document.cookie = c
+                .replace(/^ +/, "")
+                .replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/")
+        })
+        setProfile(undefined)
+        navigate("/dashboard/login", { replace: true })
+    }
 
     const value = useMemo(
         () => ({
@@ -53,11 +57,11 @@ export const AuthProvider = ({ children }: {
             login,
             logout,
         }),
-        [profile]
-    );
-    return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
-};
+        [profile],
+    )
+    return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
+}
 
 export const useAuth = () => {
-    return useContext(AuthContext);
-};
+    return useContext(AuthContext)
+}

src/hooks/useMainStore.ts

@@ -1,15 +1,15 @@
-import { MainStore } from '@/types'
-import { create } from 'zustand'
-import { persist, createJSONStorage } from 'zustand/middleware'
+import { MainStore } from "@/types"
+import { create } from "zustand"
+import { createJSONStorage, persist } from "zustand/middleware"
 
-export const useMainStore = create<MainStore, [['zustand/persist', MainStore]]>(
+export const useMainStore = create<MainStore, [["zustand/persist", MainStore]]>(
     persist(
         (set, get) => ({
             profile: get()?.profile,
-            setProfile: profile => set({ profile }),
+            setProfile: (profile) => set({ profile }),
         }),
         {
-            name: 'mainStore',
+            name: "mainStore",
             storage: createJSONStorage(() => localStorage),
         },
     ),

src/hooks/useMediaQuery.tsx

@@ -1,19 +1,19 @@
 import * as React from "react"
 
 export function useMediaQuery(query: string) {
-  const [value, setValue] = React.useState(false)
+    const [value, setValue] = React.useState(false)
 
-  React.useEffect(() => {
-    function onChange(event: MediaQueryListEvent) {
-      setValue(event.matches)
-    }
+    React.useEffect(() => {
+        function onChange(event: MediaQueryListEvent) {
+            setValue(event.matches)
+        }
 
-    const result = matchMedia(query)
-    result.addEventListener("change", onChange)
-    setValue(result.matches)
+        const result = matchMedia(query)
+        result.addEventListener("change", onChange)
+        setValue(result.matches)
 
-    return () => result.removeEventListener("change", onChange)
-  }, [query])
+        return () => result.removeEventListener("change", onChange)
+    }, [query])
 
-  return value
+    return value
 }

src/hooks/useNotfication.tsx

@@ -1,56 +1,71 @@
-import { createContext, useContext, useEffect, useMemo } from "react"
-import { useNotificationStore } from "./useNotificationStore"
-import { getNotificationGroups } from "@/api/notification-group"
 import { getNotification } from "@/api/notification"
+import { getNotificationGroups } from "@/api/notification-group"
 import { NotificationContextProps } from "@/types"
+import { createContext, useContext, useEffect, useMemo } from "react"
 import { useLocation } from "react-router-dom"
+import { toast } from "sonner"
 
-const NotificationContext = createContext<NotificationContextProps>({});
+import { useNotificationStore } from "./useNotificationStore"
+
+const NotificationContext = createContext<NotificationContextProps>({})
 
 interface NotificationProviderProps {
-    children: React.ReactNode;
-    withNotifier?: boolean;
-    withNotifierGroup?: boolean;
+    children: React.ReactNode
+    withNotifier?: boolean
+    withNotifierGroup?: boolean
 }
 
-export const NotificationProvider: React.FC<NotificationProviderProps> = ({ children, withNotifier, withNotifierGroup }) => {
-    const notifierGroup = useNotificationStore(store => store.notifierGroup);
-    const setNotifierGroup = useNotificationStore(store => store.setNotifierGroup);
+export const NotificationProvider: React.FC<NotificationProviderProps> = ({
+    children,
+    withNotifier,
+    withNotifierGroup,
+}) => {
+    const notifierGroup = useNotificationStore((store) => store.notifierGroup)
+    const setNotifierGroup = useNotificationStore((store) => store.setNotifierGroup)
 
-    const notifiers = useNotificationStore(store => store.notifiers);
-    const setNotifier = useNotificationStore(store => store.setNotifier);
+    const notifiers = useNotificationStore((store) => store.notifiers)
+    const setNotifier = useNotificationStore((store) => store.setNotifier)
 
-    const location = useLocation();
+    const location = useLocation()
 
     useEffect(() => {
         if (withNotifierGroup)
             (async () => {
                 try {
-                    const ng = await getNotificationGroups();
-                    setNotifierGroup(ng);
-                } catch (error) {
-                    setNotifierGroup(undefined);
+                    const ng = await getNotificationGroups()
+                    setNotifierGroup(ng)
+                } catch (error: any) {
+                    toast("NotificationProvider Error", {
+                        description: error.message,
+                    })
+                    setNotifierGroup(undefined)
                 }
-            })();
+            })()
         if (withNotifier)
             (async () => {
                 try {
-                    const n = await getNotification();
-                    const nData = n.map(({ id, name }) => ({ id, name }));
-                    setNotifier(nData);
-                } catch (error) {
-                    setNotifier(undefined);
+                    const n = await getNotification()
+                    const nData = n.map(({ id, name }) => ({ id, name }))
+                    setNotifier(nData)
+                } catch (error: any) {
+                    toast("NotificationProvider Error", {
+                        description: error.message,
+                    })
+                    setNotifier(undefined)
                 }
-            })();
+            })()
     }, [location.pathname])
 
-    const value: NotificationContextProps = useMemo(() => ({
-        notifiers: notifiers,
-        notifierGroup: notifierGroup,
-    }), [notifiers, notifierGroup]);
-    return <NotificationContext.Provider value={value}>{children}</NotificationContext.Provider>;
+    const value: NotificationContextProps = useMemo(
+        () => ({
+            notifiers: notifiers,
+            notifierGroup: notifierGroup,
+        }),
+        [notifiers, notifierGroup],
+    )
+    return <NotificationContext.Provider value={value}>{children}</NotificationContext.Provider>
 }
 
 export const useNotification = () => {
-    return useContext(NotificationContext);
-};
+    return useContext(NotificationContext)
+}

src/hooks/useNotificationStore.ts

@@ -1,17 +1,20 @@
-import { NotificationStore } from '@/types'
-import { create } from 'zustand'
-import { persist, createJSONStorage } from 'zustand/middleware'
+import { NotificationStore } from "@/types"
+import { create } from "zustand"
+import { createJSONStorage, persist } from "zustand/middleware"
 
-export const useNotificationStore = create<NotificationStore, [['zustand/persist', NotificationStore]]>(
+export const useNotificationStore = create<
+    NotificationStore,
+    [["zustand/persist", NotificationStore]]
+>(
     persist(
         (set, get) => ({
             notifiers: get()?.notifiers,
             notifierGroup: get()?.notifierGroup,
-            setNotifier: notifiers => set({ notifiers }),
-            setNotifierGroup: notifierGroup => set({ notifierGroup }),
+            setNotifier: (notifiers) => set({ notifiers }),
+            setNotifierGroup: (notifierGroup) => set({ notifierGroup }),
         }),
         {
-            name: 'notificationStore',
+            name: "notificationStore",
             storage: createJSONStorage(() => localStorage),
         },
     ),

src/hooks/useServer.tsx

@@ -1,56 +1,71 @@
-import { createContext, useContext, useEffect, useMemo } from "react"
-import { useServerStore } from "./useServerStore"
-import { getServerGroups } from "@/api/server-group"
 import { getServers } from "@/api/server"
+import { getServerGroups } from "@/api/server-group"
 import { ServerContextProps } from "@/types"
+import { createContext, useContext, useEffect, useMemo } from "react"
 import { useLocation } from "react-router-dom"
+import { toast } from "sonner"
 
-const ServerContext = createContext<ServerContextProps>({});
+import { useServerStore } from "./useServerStore"
+
+const ServerContext = createContext<ServerContextProps>({})
 
 interface ServerProviderProps {
-    children: React.ReactNode;
-    withServer?: boolean;
-    withServerGroup?: boolean;
+    children: React.ReactNode
+    withServer?: boolean
+    withServerGroup?: boolean
 }
 
-export const ServerProvider: React.FC<ServerProviderProps> = ({ children, withServer, withServerGroup }) => {
-    const serverGroup = useServerStore(store => store.serverGroup);
-    const setServerGroup = useServerStore(store => store.setServerGroup);
+export const ServerProvider: React.FC<ServerProviderProps> = ({
+    children,
+    withServer,
+    withServerGroup,
+}) => {
+    const serverGroup = useServerStore((store) => store.serverGroup)
+    const setServerGroup = useServerStore((store) => store.setServerGroup)
 
-    const server = useServerStore(store => store.server);
-    const setServer = useServerStore(store => store.setServer);
+    const server = useServerStore((store) => store.server)
+    const setServer = useServerStore((store) => store.setServer)
 
-    const location = useLocation();
+    const location = useLocation()
 
     useEffect(() => {
         if (withServerGroup)
             (async () => {
                 try {
-                    const sg = await getServerGroups();
-                    setServerGroup(sg);
-                } catch (error) {
-                    setServerGroup(undefined);
+                    const sg = await getServerGroups()
+                    setServerGroup(sg)
+                } catch (error: any) {
+                    toast("ServerProvider Error", {
+                        description: error.message,
+                    })
+                    setServerGroup(undefined)
                 }
-            })();
+            })()
         if (withServer)
             (async () => {
                 try {
-                    const s = await getServers();
-                    const serverData = s.map(({ id, name }) => ({ id, name }));
-                    setServer(serverData);
-                } catch (error) {
-                    setServer(undefined);
+                    const s = await getServers()
+                    const serverData = s.map(({ id, name }) => ({ id, name }))
+                    setServer(serverData)
+                } catch (error: any) {
+                    toast("ServerProvider Error", {
+                        description: error.message,
+                    })
+                    setServer(undefined)
                 }
-            })();
+            })()
     }, [location.pathname])
 
-    const value: ServerContextProps = useMemo(() => ({
-        servers: server,
-        serverGroups: serverGroup,
-    }), [server, serverGroup]);
-    return <ServerContext.Provider value={value}>{children}</ServerContext.Provider>;
+    const value: ServerContextProps = useMemo(
+        () => ({
+            servers: server,
+            serverGroups: serverGroup,
+        }),
+        [server, serverGroup],
+    )
+    return <ServerContext.Provider value={value}>{children}</ServerContext.Provider>
 }
 
 export const useServer = () => {
-    return useContext(ServerContext);
-};
+    return useContext(ServerContext)
+}

src/hooks/useServerStore.ts

@@ -1,17 +1,17 @@
-import { ServerStore } from '@/types'
-import { create } from 'zustand'
-import { persist, createJSONStorage } from 'zustand/middleware'
+import { ServerStore } from "@/types"
+import { create } from "zustand"
+import { createJSONStorage, persist } from "zustand/middleware"
 
-export const useServerStore = create<ServerStore, [['zustand/persist', ServerStore]]>(
+export const useServerStore = create<ServerStore, [["zustand/persist", ServerStore]]>(
     persist(
         (set, get) => ({
             server: get()?.server,
             serverGroup: get()?.serverGroup,
-            setServer: server => set({ server }),
-            setServerGroup: serverGroup => set({ serverGroup }),
+            setServer: (server) => set({ server }),
+            setServerGroup: (serverGroup) => set({ serverGroup }),
         }),
         {
-            name: 'serverStore',
+            name: "serverStore",
             storage: createJSONStorage(() => localStorage),
         },
     ),

src/hooks/useSetting.tsx

@@ -1,11 +1,8 @@
-import { swrFetcher } from "@/api/api";
-import { ModelSettingResponse } from "@/types";
-import useSWR from "swr";
+import { swrFetcher } from "@/api/api"
+import { ModelSettingResponse } from "@/types"
+import useSWR from "swr"
 
 export default function useSetting() {
-    const { data } = useSWR<ModelSettingResponse>(
-        "/api/v1/setting",
-        swrFetcher
-    );
-    return data;
+    const { data } = useSWR<ModelSettingResponse>("/api/v1/setting", swrFetcher)
+    return data
 }

src/hooks/useTerminal.ts

@@ -1,23 +1,23 @@
-import { createTerminal } from "@/api/terminal";
-import { ModelCreateTerminalResponse } from "@/types";
-import { useState, useEffect } from "react";
+import { createTerminal } from "@/api/terminal"
+import { ModelCreateTerminalResponse } from "@/types"
+import { useEffect, useState } from "react"
 
 export default function useTerminal(serverId?: number) {
-    const [terminal, setTerminal] = useState<ModelCreateTerminalResponse | null>(null);
+    const [terminal, setTerminal] = useState<ModelCreateTerminalResponse | null>(null)
 
     async function fetchTerminal() {
         try {
-            const response = await createTerminal(serverId!);
-            setTerminal(response);
+            const response = await createTerminal(serverId!)
+            setTerminal(response)
         } catch (error) {
-            console.error("Failed to fetch terminal:", error);
+            console.error("Failed to fetch terminal:", error)
         }
     }
 
     useEffect(() => {
-        if (!serverId) return;
-        fetchTerminal();
-    }, [serverId]);
+        if (!serverId) return
+        fetchTerminal()
+    }, [serverId])
 
-    return terminal;
+    return terminal
 }