fix sign out, theme switch, auth provider icons

src/app/(drift)/(auth)/components/index.tsx

@@ -6,7 +6,7 @@ import Link from "../../../components/link"
 import { signIn } from "next-auth/react"
 import Input from "@components/input"
 import Button from "@components/button"
-import { Key } from "react-feather"
+import { GitHub, Key, User } from "react-feather"
 import { useToasts } from "@components/toasts"
 import { useRouter } from "next/navigation"
 import Note from "@components/note"
@@ -146,7 +146,7 @@ function Auth({
 											style={{
 												color: "var(--fg)"
 											}}
-											iconLeft={<Key />}
+											iconLeft={getProviderIcon(provider.id)}
 											onClick={(e) => {
 												e.preventDefault()
 												signIn(provider.id, {
@@ -186,3 +186,14 @@ function Auth({
 }
 
 export default Auth
+
+const getProviderIcon = (provider: string) => {
+	switch (provider) {
+		case "github":
+			return <GitHub />
+		case "keycloak": 
+			return <Key />
+		default:
+			return <User />
+	}
+}

src/app/components/badges/created-ago-badge/index.tsx

@@ -7,7 +7,7 @@ import { useMemo, useState, useEffect } from "react"
 import Badge from "../badge"
 
 const CreatedAgoBadge = ({ createdAt }: { createdAt: string | Date }) => {
-	const createdDate = useMemo(() => new Date(createdAt), [createdAt])
+	const createdDate = new Date(createdAt)
 	const [time, setTimeAgo] = useState(timeAgo(createdDate))
 
 	const { setToast } = useToasts()

src/app/components/badges/expiration-badge/index.tsx

@@ -36,16 +36,11 @@ const ExpirationBadge = ({
 		}
 	}, [expirationDate])
 
-	const isExpired = useMemo(() => {
-		if (!expirationDate) {
-			return false
-		}
-		return expirationDate < new Date()
-	}, [expirationDate])
-
 	if (!expirationDate) {
 		return null
 	}
+	
+	const isExpired = expirationDate < new Date()
 
 	return (
 		<Badge type={isExpired ? "error" : "warning"}>

src/app/components/header/buttons.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useSelectedLayoutSegment } from "next/navigation"
+import { useSelectedLayoutSegment, useSelectedLayoutSegments } from "next/navigation"
 import FadeIn from "@components/fade-in"
 import { setDriftTheme } from "src/app/lib/set-theme"
 import {
@@ -40,27 +40,23 @@ type Tab = {
 
 export function HeaderButtons({
 	isAuthenticated,
-	theme
+	theme: initialTheme
 }: {
 	isAuthenticated: boolean
 	theme: string
 }) {
 	const { isAdmin, userId } = useSessionSWR()
-
+	const { resolvedTheme } = useTheme();
-	return (
+	return getButtons({
-		<>
-			{getButtons({
 				isAuthenticated,
-				theme,
+				theme: resolvedTheme ? resolvedTheme : initialTheme,
 				isAdmin,
 				userId
-			})}
+			})
-		</>
-	)
 }
 
 function NavButton(tab: Tab) {
-	const segment = useSelectedLayoutSegment()
+	const segment = useSelectedLayoutSegments().slice(-1)[0]
 	const isActive = segment === tab.value.toLowerCase()
 	const activeStyle = isActive ? styles.active : undefined
 	if (tab.onClick) {

src/app/lib/set-theme.ts

@@ -1,8 +1,9 @@
 import { THEME_COOKIE } from "@lib/constants"
 import { Cookies } from "react-cookie"
 
+const cookies = new Cookies()
+
 export function setDriftTheme(theme: string, setter: (theme: string) => void) {
 	setter(theme)
-	const cookies = new Cookies()
 	cookies.set(THEME_COOKIE, theme, { path: "/" })
 }

src/lib/server/auth.ts

@@ -36,6 +36,7 @@ const credentialsOptions = () => {
 
 	return options
 }
+
 const providers = () => {
 	const providers = []
 
@@ -71,15 +72,16 @@ const providers = () => {
 			}
 		})
 		const originalKeycloakProfile = keycloak.profile
-		;(keycloak.profile = async (profile, tokens) => {
+		keycloak.profile = async (profile, tokens) => {
 			const originalProfile = await originalKeycloakProfile(profile, tokens)
 			const newProfile: User & { displayName?: string | null } = {
 				...originalProfile,
 				displayName: originalProfile.name ?? null
 			}
 			return newProfile
-		}),
+		}
-			providers.push(keycloak)
+
+		providers.push(keycloak)
 	}
 
 	if (isCredentialEnabled()) {