- added settings page and function

- add Role Ring for avatar and display role for user nav
This commit is contained in:
2026-01-06 21:37:53 +07:00
parent 8146565d2c
commit a4e96fe045
64 changed files with 2828 additions and 726 deletions

View File

@@ -1,36 +1,37 @@
import NotFound from '@/components/NotFound'
import { Toaster } from '@/components/ui/sonner'
import { sessionQueryOptions } from '@/hooks/use-session'
import { setSSRLanguage } from '@/lib/i18n'
import NotFound from '@/components/NotFound';
import { Toaster } from '@/components/ui/sonner';
import { setSSRLanguage } from '@/lib/i18n';
import { sessionQueries } from '@/service/queries';
import {
CheckIcon,
InfoIcon,
WarningIcon,
WarningOctagonIcon,
} from '@phosphor-icons/react'
import { TanStackDevtools } from '@tanstack/react-devtools'
import type { QueryClient } from '@tanstack/react-query'
} from '@phosphor-icons/react';
import { TanStackDevtools } from '@tanstack/react-devtools';
import type { QueryClient } from '@tanstack/react-query';
import {
HeadContent,
Scripts,
createRootRouteWithContext,
} from '@tanstack/react-router'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
import React from 'react'
import { useTranslation } from 'react-i18next'
import TanStackQueryDevtools from '../integrations/tanstack-query/devtools'
import appCss from '../styles.css?url'
} from '@tanstack/react-router';
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
import React from 'react';
import { useTranslation } from 'react-i18next';
import TanStackQueryDevtools from '../integrations/tanstack-query/devtools';
import appCss from '../styles.css?url';
interface MyRouterContext {
queryClient: QueryClient
queryClient: QueryClient;
}
export const Route = createRootRouteWithContext<MyRouterContext>()({
beforeLoad: async ({ context }) => {
const userSession =
await context.queryClient.ensureQueryData(sessionQueryOptions)
await setSSRLanguage()
return { userSession }
const userSession = await context.queryClient.fetchQuery(
sessionQueries.user(),
);
await setSSRLanguage();
return { userSession };
},
head: () => ({
meta: [
@@ -57,10 +58,10 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
}),
shellComponent: RootDocument,
notFoundComponent: () => <NotFound />,
})
});
function RootDocument({ children }: { children: React.ReactNode }) {
const { i18n } = useTranslation()
const { i18n } = useTranslation();
return (
<html lang={i18n.language}>
@@ -70,6 +71,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
<body>
{children}
<Toaster
richColors
visibleToasts={5}
position={'top-right'}
offset={{ top: 60, right: 10 }}
@@ -106,5 +108,5 @@ function RootDocument({ children }: { children: React.ReactNode }) {
<Scripts />
</body>
</html>
)
);
}