add Turkish lang + style updates

beszel/site/src/components/mode-toggle.tsx

@@ -4,10 +4,29 @@ import { Button } from "@/components/ui/button"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import { useTheme } from "@/components/theme-provider"
 import { useTranslation } from "react-i18next"
+import { cn } from "@/lib/utils"
 
 export function ModeToggle() {
 	const { t } = useTranslation()
-	const { setTheme } = useTheme()
+	const { theme, setTheme } = useTheme()
+
+	const options = [
+		{
+			theme: "light",
+			Icon: SunIcon,
+			label: t("themes.light"),
+		},
+		{
+			theme: "dark",
+			Icon: MoonStarIcon,
+			label: t("themes.dark"),
+		},
+		{
+			theme: "system",
+			Icon: LaptopIcon,
+			label: t("themes.system"),
+		},
+	]
 
 	return (
 		<DropdownMenu>
@@ -19,18 +38,19 @@ export function ModeToggle() {
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent>
-				<DropdownMenuItem onClick={() => setTheme("light")}>
-					<SunIcon className="mr-2.5 h-4 w-4" />
-					{t("themes.light")}
-				</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setTheme("dark")}>
-					<MoonStarIcon className="mr-2.5 h-4 w-4" />
-					{t("themes.dark")}
-				</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setTheme("system")}>
-					<LaptopIcon className="mr-2.5 h-4 w-4" />
-					{t("themes.system")}
-				</DropdownMenuItem>
+				{options.map((opt) => {
+					const selected = opt.theme === theme
+					return (
+						<DropdownMenuItem
+							key={opt.theme}
+							className={cn("px-2.5", selected ? "font-semibold" : "")}
+							onClick={() => setTheme(opt.theme as "dark" | "light" | "system")}
+						>
+							<opt.Icon className={cn("me-2 h-4 w-4 opacity-80", selected && "opacity-100")} />
+							{opt.label}
+						</DropdownMenuItem>
+					)
+				})}
 			</DropdownMenuContent>
 		</DropdownMenu>
 	)