({
resolver: zodResolver(displayFormSchema),
defaultValues,
@@ -65,7 +64,7 @@ export function DisplayForm() {
function onSubmit(data: DisplayFormValues) {
toast({
- title: t("settings.display"),
+ title: t("sections.display.title"),
description: (
{JSON.stringify(data, null, 2)}
@@ -85,7 +84,7 @@ export function DisplayForm() {
Sidebar
- {t("settings.display.sidebar_description")}
+ {t("sections.display.sidebar.description")}
{items.map((item) => (
@@ -111,7 +110,7 @@ export function DisplayForm() {
/>
- {item.label}
+ {t(item.label)}
)}
@@ -121,7 +120,7 @@ export function DisplayForm() {
)}
/>
-
+
)
diff --git a/src/pages/(admin)/(with-layout)/settings/components/notifications-form.tsx b/src/pages/(admin)/(with-layout)/settings/components/notifications-form.tsx
index db2aaa9..ad98571 100644
--- a/src/pages/(admin)/(with-layout)/settings/components/notifications-form.tsx
+++ b/src/pages/(admin)/(with-layout)/settings/components/notifications-form.tsx
@@ -32,7 +32,7 @@ const defaultValues: Partial = {
security_emails: true,
}
export function NotificationsForm() {
- const { t } = useTranslation()
+ const { t } = useTranslation(["settings"])
const form = useForm({
resolver: zodResolver(notificationsFormSchema),
defaultValues,
@@ -57,7 +57,7 @@ export function NotificationsForm() {
name="type"
render={({ field }) => (
- {t("settings.notifications.notify_me_about")}
+ {t("sections.notifications.preferences.notify_about")}
- {t("settings.notifications.all_new_messages")}
+ {t("sections.notifications.preferences.options.all_messages")}
@@ -77,7 +77,7 @@ export function NotificationsForm() {
- {t("settings.notifications.direct_messages_and_mentions")}
+ {t("sections.notifications.preferences.options.direct_messages")}
@@ -85,7 +85,7 @@ export function NotificationsForm() {
- {t("settings.notifications.nothing")}
+ {t("sections.notifications.preferences.options.nothing")}
@@ -96,7 +96,7 @@ export function NotificationsForm() {
/>
- {t("settings.notifications.email_notifications")}
+ {t("sections.notifications.email_settings.title")}
- {t("settings.notifications.communication_emails")}
+ {t("sections.notifications.email_settings.communication")}
- {t("settings.notifications.communication_emails_description")}
+ {t("sections.notifications.update_notifications_description")}
@@ -128,10 +128,10 @@ export function NotificationsForm() {
- {t("settings.notifications.marketing_emails")}
+ {t("sections.notifications.email_settings.marketing")}
- {t("settings.notifications.marketing_emails_description")}
+ {t("sections.notifications.update_notifications_description_2")}
@@ -150,10 +150,10 @@ export function NotificationsForm() {
- {t("settings.notifications.social_emails")}
+ {t("sections.notifications.email_settings.social")}
- {t("settings.notifications.social_emails_description")}
+ {t("sections.notifications.update_notifications_description_3")}
@@ -172,10 +172,10 @@ export function NotificationsForm() {
- {t("settings.notifications.security_emails")}
+ {t("sections.notifications.email_settings.security")}
- {t("settings.notifications.security_emails_description")}
+ {t("sections.notifications.update_notifications_description")}
@@ -204,22 +204,19 @@ export function NotificationsForm() {
- {t("settings.notifications.use_different_settings_for_my_mobile_devices")}
+ {t("sections.notifications.mobile_settings.use_different")}
- {t("settings.notifications.use_different_settings_for_my_mobile_devices_description")}
+ {t("sections.notifications.mobile_settings.description")}
{" "}
- {t("settings.notifications.mobile_settings_page")}
- {" "}
- {t("settings.notifications.page")}
- .
+ {t("sections.notifications.mobile_settings.page")}
)}
/>
diff --git a/src/pages/(admin)/(with-layout)/settings/components/profile-form.tsx b/src/pages/(admin)/(with-layout)/settings/components/profile-form.tsx
index 48b9dbc..75055bf 100644
--- a/src/pages/(admin)/(with-layout)/settings/components/profile-form.tsx
+++ b/src/pages/(admin)/(with-layout)/settings/components/profile-form.tsx
@@ -36,12 +36,14 @@ const profileFormSchema = z.object({
})
.max(30, {
message: "Username must not be longer than 30 characters.",
- }).default(""),
+ })
+ .default(""),
email: z
.string({
required_error: "Please select an email to display.",
})
- .email().default(""),
+ .email()
+ .default(""),
bio: z.string().max(160).min(4).default(""),
urls: z
.array(
@@ -49,7 +51,8 @@ const profileFormSchema = z.object({
value: z.string().url({ message: "Please enter a valid URL." }),
}),
)
- .optional().default([]),
+ .optional()
+ .default([]),
})
const defaultValues: Partial = {
username: "",
@@ -60,7 +63,7 @@ const defaultValues: Partial = {
type ProfileFormValues = z.infer
export function ProfileForm() {
- const { t } = useTranslation()
+ const { t } = useTranslation(["settings"])
const user = useUser()
const form = useForm({
@@ -102,12 +105,12 @@ export function ProfileForm() {
name="username"
render={({ field }) => (
- {t("settings.profile.username")}
+ {t("sections.profile.username")}
- {t("settings.profile.username_description")}
+ {t("sections.profile.username_description")}
@@ -118,11 +121,11 @@ export function ProfileForm() {
name="email"
render={({ field }) => (
- {t("settings.profile.email")}
+ {t("sections.profile.email")}
- {t("settings.profile.email_options_description")}
+ {t("sections.profile.email_options_description")}
{" "}
- {t("settings.profile.email_options")}
+ {t("sections.profile.email_options")}
.
@@ -146,16 +149,16 @@ export function ProfileForm() {
name="bio"
render={({ field }) => (
- {t("settings.profile.bio")}
+ {t("sections.profile.bio")}
- {t("settings.profile.bio_description")}
+ {t("sections.profile.bio_description")}
@@ -170,10 +173,10 @@ export function ProfileForm() {
render={({ field }) => (
- {t("settings.profile.urls")}
+ {t("sections.profile.urls")}
- {t("settings.profile.urls_description")}
+ {t("sections.profile.urls_description")}
@@ -190,10 +193,10 @@ export function ProfileForm() {
className="mt-2"
onClick={() => append({ value: "" })}
>
- {t("settings.profile.add_url")}
+ {t("sections.profile.add_url")}
-
+
)
diff --git a/src/pages/(admin)/(with-layout)/settings/display.tsx b/src/pages/(admin)/(with-layout)/settings/display.tsx
index d4d222a..433689d 100644
--- a/src/pages/(admin)/(with-layout)/settings/display.tsx
+++ b/src/pages/(admin)/(with-layout)/settings/display.tsx
@@ -5,13 +5,13 @@ import { Separator } from "@/components/ui/separator"
import { DisplayForm } from "./components/display-form"
export function Component() {
- const { t } = useTranslation()
+ const { t } = useTranslation("settings")
return (
-
{t("settings.nav.display")}
+
{t("nav.display")}
- {t("settings.display_description")}
+ {t("sections.display.description")}
diff --git a/src/pages/(admin)/(with-layout)/settings/layout.tsx b/src/pages/(admin)/(with-layout)/settings/layout.tsx
index b71cfe2..de7bc7f 100644
--- a/src/pages/(admin)/(with-layout)/settings/layout.tsx
+++ b/src/pages/(admin)/(with-layout)/settings/layout.tsx
@@ -4,31 +4,31 @@ import { Outlet } from "react-router-dom"
import { SidebarNav } from "./components/sidebar-nav"
export function Component() {
- const { t } = useTranslation()
+ const { t } = useTranslation("settings")
const sidebarNavItems = [
{
- title: t("settings.nav.profile"),
+ title: t("nav.profile"),
href: "/settings/profile",
},
{
- title: t("settings.nav.account"),
+ title: t("nav.account"),
href: "/settings/account",
},
{
- title: t("settings.nav.appearance"),
+ title: t("nav.appearance"),
href: "/settings/appearance",
},
{
- title: t("settings.nav.notifications"),
+ title: t("nav.notifications"),
href: "/settings/notifications",
},
{
- title: t("settings.nav.display"),
+ title: t("nav.display"),
href: "/settings/display",
},
{
- title: t("settings.nav.theme"),
+ title: t("nav.theme"),
href: "/settings/theme",
},
]
diff --git a/src/pages/(admin)/(with-layout)/settings/notifications.tsx b/src/pages/(admin)/(with-layout)/settings/notifications.tsx
index c36f5dd..6a0ba4f 100644
--- a/src/pages/(admin)/(with-layout)/settings/notifications.tsx
+++ b/src/pages/(admin)/(with-layout)/settings/notifications.tsx
@@ -5,13 +5,13 @@ import { Separator } from "@/components/ui/separator"
import { NotificationsForm } from "./components/notifications-form"
export function Component() {
- const { t } = useTranslation()
+ const { t } = useTranslation(["settings", "common"])
return (
-
{t("settings.nav.notifications")}
+
{t("nav.notifications")}
- {t("settings.notifications.description")}
+ {t("sections.notifications.description")}
diff --git a/src/pages/(admin)/(with-layout)/settings/profile.tsx b/src/pages/(admin)/(with-layout)/settings/profile.tsx
index 2ba87df..7541ad4 100644
--- a/src/pages/(admin)/(with-layout)/settings/profile.tsx
+++ b/src/pages/(admin)/(with-layout)/settings/profile.tsx
@@ -5,13 +5,13 @@ import { Separator } from "@/components/ui/separator"
import { ProfileForm } from "./components/profile-form"
export function Component() {
- const { t } = useTranslation()
+ const { t } = useTranslation(["settings"])
return (
-
{t("settings.profile.title")}
+
{t("sections.profile.title")}
- {t("settings.profile.description")}
+ {t("sections.profile.description")}
diff --git a/src/pages/(admin)/layout.tsx b/src/pages/(admin)/layout.tsx
index 4800fd2..7eb1429 100644
--- a/src/pages/(admin)/layout.tsx
+++ b/src/pages/(admin)/layout.tsx
@@ -1,21 +1,16 @@
-import { useAtom } from "jotai"
-import { useRef } from "react"
-import type { ImperativePanelHandle } from "react-resizable-panels"
import { Outlet, redirect } from "react-router-dom"
-import { isCollapsedAtom, layoutAtom } from "@/atoms/resizable-panels"
-import { Header } from "@/components/layout/header"
-import { Sidebar } from "@/components/layout/sidebar"
-import {
- ResizableHandle,
- ResizablePanel,
- ResizablePanelGroup,
-} from "@/components/ui/resizable"
+import { AppSidebar } from "@/components/app-sidebar"
+import { NavBreadcrumb } from "@/components/nav-breadcrumb"
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
-import { DEFAULT_LAYOUT, NAV_COLLAPSED_SIZE } from "@/constants"
+import { Separator } from "@/components/ui/separator"
+import {
+ SidebarInset,
+ SidebarProvider,
+ SidebarTrigger,
+} from "@/components/ui/sidebar"
import { queryUser } from "@/hooks/query/use-user"
import { queryClient } from "@/lib/query-client"
-import { cn } from "@/lib/utils"
export const loader = async () => {
const userData = await queryClient.ensureQueryData(queryUser())
@@ -26,60 +21,27 @@ export const loader = async () => {
}
export function Component() {
- const [layout, setLayout] = useAtom(layoutAtom)
- const [isCollapsed, setIsCollapsed] = useAtom(isCollapsedAtom)
- const defaultLayout = layout ? JSON.parse(layout) : DEFAULT_LAYOUT
- const ref = useRef
(null)
- const handleNavCollapse = () => {
- setIsCollapsed((pre) => !pre)
- const panel = ref.current
- if (panel) {
- panel?.isCollapsed() ? panel?.expand() : panel?.collapse()
- }
- }
return (
-
-
{
- setLayout(JSON.stringify(sizes))
- }}
- className="h-full items-stretch transition-all duration-300"
- >
- {
- setIsCollapsed(true)
- }}
- onResize={() => {
- setIsCollapsed(false)
- }}
- className={cn(
- "hidden h-dvh !max-w-[330px] lg:block",
- isCollapsed &&
- "min-w-[50px] transition-all duration-300",
- )}
- >
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
- {t("login.acme_inc")}
+ {t("company.name")}
- {t("login.intro.quote")}
-
+ {t("company.testimonial.quote")}
+
@@ -85,7 +85,7 @@ export function Component() {
interface UserAuthFormProps extends React.HTMLAttributes
{ }
function UserAuthForm({ className, ...props }: UserAuthFormProps) {
- const { t } = useTranslation()
+ const { t } = useTranslation(["auth", "common", "errors"])
const loginMutation = useUserLoginMutation()
const navigate = useNavigate()
@@ -112,7 +112,7 @@ function UserAuthForm({ className, ...props }: UserAuthFormProps) {
},
error: (error) => {
const errorMessage = getFetchErrorMessage(error)
- return t(`error.${errorMessage}` as never)
+ return t(errorMessage)
},
})
}
@@ -193,7 +193,7 @@ function UserAuthForm({ className, ...props }: UserAuthFormProps) {
type="button"
disabled={loginMutation.isPending}
>
- {t("login.github")}
+ {t("social_login.github")}
)
diff --git a/src/providers/root-providers.tsx b/src/providers/root-providers.tsx
index cd21140..6053147 100644
--- a/src/providers/root-providers.tsx
+++ b/src/providers/root-providers.tsx
@@ -29,6 +29,7 @@ export const RootProviders: FC = ({ children }) => (
+
{children}
diff --git a/src/styles/index.css b/src/styles/index.css
index fd51c95..da9573e 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -29,6 +29,14 @@
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
+ --sidebar-background: 0 0% 98%;
+ --sidebar-foreground: 240 5.3% 26.1%;
+ --sidebar-primary: 240 5.9% 10%;
+ --sidebar-primary-foreground: 0 0% 98%;
+ --sidebar-accent: 240 4.8% 95.9%;
+ --sidebar-accent-foreground: 240 5.9% 10%;
+ --sidebar-border: 220 13% 91%;
+ --sidebar-ring: 217.2 91.2% 59.8%;
}
.dark {
@@ -56,6 +64,14 @@
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
+ --sidebar-background: 240 5.9% 10%;
+ --sidebar-foreground: 240 4.8% 95.9%;
+ --sidebar-primary: 224.3 76.3% 48%;
+ --sidebar-primary-foreground: 0 0% 100%;
+ --sidebar-accent: 240 3.7% 15.9%;
+ --sidebar-accent-foreground: 240 4.8% 95.9%;
+ --sidebar-border: 240 3.7% 15.9%;
+ --sidebar-ring: 217.2 91.2% 59.8%;
}
}
diff --git a/src/types/i18next.d.ts b/src/types/i18next.d.ts
new file mode 100644
index 0000000..1f8f140
--- /dev/null
+++ b/src/types/i18next.d.ts
@@ -0,0 +1,14 @@
+import type { resources } from "@/i18n"
+
+declare module "i18next" {
+ interface CustomTypeOptions {
+ defaultNS: "common"
+ resources: {
+ common: typeof resources.en.common
+ auth: typeof resources.en.auth
+ forms: typeof resources.en.forms
+ settings: typeof resources.en.settings
+ navigation: typeof resources.en.navigation
+ }
+ }
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6bd2cab..3b12490 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -54,6 +54,16 @@ export default {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
+ sidebar: {
+ "DEFAULT": "hsl(var(--sidebar-background))",
+ "foreground": "hsl(var(--sidebar-foreground))",
+ "primary": "hsl(var(--sidebar-primary))",
+ "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+ "accent": "hsl(var(--sidebar-accent))",
+ "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+ "border": "hsl(var(--sidebar-border))",
+ "ring": "hsl(var(--sidebar-ring))",
+ },
},
borderRadius: {
lg: "var(--radius)",
@@ -62,28 +72,58 @@ export default {
},
keyframes: {
"accordion-down": {
- from: { height: "0" },
- to: { height: "var(--radix-accordion-content-height)" },
+ from: {
+ height: "0",
+ },
+ to: {
+ height: "var(--radix-accordion-content-height)",
+ },
},
"accordion-up": {
- from: { height: "var(--radix-accordion-content-height)" },
- to: { height: "0" },
+ from: {
+ height: "var(--radix-accordion-content-height)",
+ },
+ to: {
+ height: "0",
+ },
},
"caret-blink": {
- "0%,70%,100%": { opacity: "1" },
- "20%,50%": { opacity: "0" },
+ "0%,70%,100%": {
+ opacity: "1",
+ },
+ "20%,50%": {
+ opacity: "0",
+ },
},
"roll-reveal": {
- from: { transform: "rotate(12deg) scale(0)", opacity: "0" },
- to: { transform: "rotate(0deg) scale(1)", opacity: "1" },
+ from: {
+ transform: "rotate(12deg) scale(0)",
+ opacity: "0",
+ },
+ to: {
+ transform: "rotate(0deg) scale(1)",
+ opacity: "1",
+ },
},
"slide-left": {
- from: { transform: "translateX(20px)", opacity: "0" },
- to: { transform: "translateX(0px)", opacity: "1" },
+ from: {
+ transform: "translateX(20px)",
+ opacity: "0",
+ },
+ to: {
+ transform: "translateX(0px)",
+ opacity: "1",
+ },
},
"slide-top": {
- from: { transform: "translateY(20px)", opacity: "0" },
- to: { transform: "translateY(0px)", opacity: "1" },
+ from: {
+ transform: "translateY(20px)",
+ opacity: "0",
+ },
+ to: {
+ transform: "translateY(0px)",
+ opacity: "1",
+ },
},
},
animation: {
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 2ce0688..f8fb44a 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -28,7 +28,6 @@
"@/*": ["./src/*"],
"@env": ["./env.ts"],
"@pkg": ["./package.json"],
-
"@/ui/*": ["./src/components/ui/*"]
}
},
-
-
-## Join our WeChat group
-
-