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/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)
+}