feat: add admin url

Signed-off-by: Innei <[email protected]>

src/components/layout/header/internal/UserAuth.tsx

@@ -4,6 +4,7 @@ import { AnimatePresence } from 'framer-motion'
 import Image from 'next/image'
 import { Fragment } from 'react'
 
+import { getAdminUrl } from '~/atoms'
 import { useIsLogged } from '~/atoms/hooks'
 import { useSessionReader } from '~/atoms/hooks/reader'
 import { UserArrowLeftIcon } from '~/components/icons/user-arrow-left'
@@ -117,7 +118,20 @@ export function UserAuth() {
                       <i className="icon-[mingcute--dashboard-3-line] size-4" />
                     }
                   >
-                    Dashboard
+                    轻管理
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => {
+                      const adminUrl = getAdminUrl()
+                      if (adminUrl) {
+                        window.open(adminUrl, '_blank')
+                      }
+                    }}
+                    icon={
+                      <i className="icon-[mingcute--dashboard-2-line] size-4" />
+                    }
+                  >
+                    控制台
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
                 </Fragment>

src/components/ui/dropdown-menu/index.tsx

@@ -68,7 +68,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       'data-[state=open]:bg-neutral/30 focus:bg-neutral/30',
       inset && 'pl-8',
       'focus-within:!outline-transparent',
@@ -112,7 +112,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-base-300/50', className)}
+    className={cn('-mx-1 my-1 h-px bg-neutral/50', className)}
     {...props}
   />
 ))

src/providers/root/auth-session-provider.ts

@@ -1,9 +1,12 @@
 import { simpleCamelcaseKeys } from '@mx-space/api-client'
-import { useSession } from 'next-auth/react'
+import { useQuery } from '@tanstack/react-query'
+import { nanoid } from 'nanoid'
+import type { AdapterUser } from 'next-auth/adapters'
 import { useEffect } from 'react'
 
 import { isLoggedAtom } from '~/atoms'
 import { setSessionReader } from '~/atoms/hooks/reader'
+import { apiClient } from '~/lib/request'
 import { jotaiStore } from '~/lib/store'
 import type { SessionReader } from '~/models/session'
 
@@ -12,13 +15,22 @@ declare module 'next-auth' {
 }
 
 export const AuthSessionProvider: Component = ({ children }) => {
-  const session = useSession()
+  const { data: session } = useQuery({
+    queryKey: ['session'],
+    refetchOnMount: 'always',
+    queryFn: () =>
+      apiClient.proxy.auth.session.get<AdapterUser>({
+        params: {
+          r: nanoid(),
+        },
+      }),
+  })
 
   useEffect(() => {
-    if (!session.data) return
-    const transformedData = simpleCamelcaseKeys(session.data)
+    if (!session) return
+    const transformedData = simpleCamelcaseKeys(session)
     setSessionReader(transformedData)
     if (transformedData.isOwner) jotaiStore.set(isLoggedAtom, true)
-  }, [session.data])
+  }, [session])
   return children
 }

src/providers/root/debug-provider.tsx

@@ -6,15 +6,13 @@ import { Suspense } from 'react'
 
 export const DebugProvider = ({
   children,
-}: PropsWithChildren): ReactElement => {
-  return (
-    <>
-      <Suspense>
-        <div data-hide-print>
-          <ReactQueryDevtools buttonPosition="bottom-left" />
-        </div>
-      </Suspense>
-      {children}
-    </>
-  )
-}
+}: PropsWithChildren): ReactElement => (
+  <>
+    <Suspense>
+      <div data-hide-print className="hidden md:contents">
+        <ReactQueryDevtools buttonPosition="top-left" />
+      </div>
+    </Suspense>
+    {children}
+  </>
+)