From b1afba191ea473edd123247b442ecfa36b574acf Mon Sep 17 00:00:00 2001 From: Milo Schwartz Date: Sun, 22 Dec 2024 20:16:52 -0500 Subject: [PATCH] add theme switcher and improve org switcher --- server/routers/external.ts | 10 +- .../[orgId]/settings/components/Header.tsx | 103 ++++++++++++++---- src/app/[orgId]/settings/layout.tsx | 21 ---- src/app/layout.tsx | 21 ++++ 4 files changed, 106 insertions(+), 49 deletions(-) diff --git a/server/routers/external.ts b/server/routers/external.ts index e504f23..ecc2bb1 100644 --- a/server/routers/external.ts +++ b/server/routers/external.ts @@ -448,11 +448,11 @@ authRouter.post( verifySessionMiddleware, auth.requestEmailVerificationCode ); -authRouter.post( - "/change-password", - verifySessionUserMiddleware, - auth.changePassword -); +// authRouter.post( +// "/change-password", +// verifySessionUserMiddleware, +// auth.changePassword +// ); authRouter.post("/reset-password/request", auth.requestPasswordReset); authRouter.post("/reset-password/", auth.resetPassword); diff --git a/src/app/[orgId]/settings/components/Header.tsx b/src/app/[orgId]/settings/components/Header.tsx index 9cc7a2f..e114943 100644 --- a/src/app/[orgId]/settings/components/Header.tsx +++ b/src/app/[orgId]/settings/components/Header.tsx @@ -10,6 +10,7 @@ import { CommandInput, CommandItem, CommandList, + CommandSeparator } from "@app/components/ui/command"; import { DropdownMenu, @@ -18,12 +19,12 @@ import { DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, - DropdownMenuTrigger, + DropdownMenuTrigger } from "@app/components/ui/dropdown-menu"; import { Popover, PopoverContent, - PopoverTrigger, + PopoverTrigger } from "@app/components/ui/popover"; import { Select, @@ -31,13 +32,23 @@ import { SelectGroup, SelectItem, SelectTrigger, - SelectValue, + SelectValue } from "@app/components/ui/select"; import { useEnvContext } from "@app/hooks/useEnvContext"; import { useToast } from "@app/hooks/useToast"; import { cn, formatAxiosError } from "@app/lib/utils"; import { ListOrgsResponse } from "@server/routers/org"; -import { Check, ChevronsUpDown, Plus } from "lucide-react"; +import { + Check, + ChevronsUpDown, + Laptop, + LogOut, + Moon, + Plus, + Sun, + User +} from "lucide-react"; +import { useTheme } from "next-themes"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { useState } from "react"; @@ -51,8 +62,12 @@ type HeaderProps = { export default function Header({ email, orgId, name, orgs }: HeaderProps) { const { toast } = useToast(); + const { setTheme, theme } = useTheme(); const [open, setOpen] = useState(false); + const [userTheme, setUserTheme] = useState<"light" | "dark" | "system">( + theme as "light" | "dark" | "system" + ); const router = useRouter(); @@ -72,7 +87,7 @@ export default function Header({ email, orgId, name, orgs }: HeaderProps) { console.error("Error logging out", e); toast({ title: "Error logging out", - description: formatAxiosError(e, "Error logging out"), + description: formatAxiosError(e, "Error logging out") }); }) .then(() => { @@ -80,6 +95,11 @@ export default function Header({ email, orgId, name, orgs }: HeaderProps) { }); } + function handleThemeChange(theme: "light" | "dark" | "system") { + setUserTheme(theme); + setTheme(theme); + } + return ( <>
@@ -104,22 +124,54 @@ export default function Header({ email, orgId, name, orgs }: HeaderProps) { >
- {name && ( -

- {name} -

- )} -

+

+ Signed in as +

+

{email}

- - - Logout - - + + + User Settings + + + Theme + {(["light", "dark", "system"] as const).map( + (themeOption) => ( + + handleThemeChange(themeOption) + } + > + {themeOption === "light" && ( + + )} + {themeOption === "dark" && ( + + )} + {themeOption === "system" && ( + + )} + + {themeOption} + + {userTheme === themeOption && ( + + + + )} + + ) + )} + + logout()}> + + Log out + @@ -163,7 +215,7 @@ export default function Header({ email, orgId, name, orgs }: HeaderProps) { {orgId ? orgs.find( (org) => - org.orgId === orgId, + org.orgId === orgId )?.name : "Select organization..."} @@ -176,25 +228,30 @@ export default function Header({ email, orgId, name, orgs }: HeaderProps) { - No organization found. + No organizations found. - + { router.push("/setup"); }} > - + New Organization + + + + + {orgs.map((org) => ( { router.push( - `/${org.orgId}/settings`, + `/${org.orgId}/settings` ); }} > @@ -203,7 +260,7 @@ export default function Header({ email, orgId, name, orgs }: HeaderProps) { "mr-2 h-4 w-4", orgId === org.orgId ? "opacity-100" - : "opacity-0", + : "opacity-0" )} /> {org.name} diff --git a/src/app/[orgId]/settings/layout.tsx b/src/app/[orgId]/settings/layout.tsx index 23e7285..eae156d 100644 --- a/src/app/[orgId]/settings/layout.tsx +++ b/src/app/[orgId]/settings/layout.tsx @@ -110,27 +110,6 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
{children}
- - ); } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3aae641..ad937aa 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -38,6 +38,27 @@ export default async function RootLayout({ }} > {children} + +