feat: language selector updates

chaibuilder · Oct 22, 2024 · c89db8e · c89db8e
1 parent af7de0c
commit c89db8e
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -2,15 +2,18 @@
 <html class="darks" lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link href="https://ik.imagekit.io/n0uvizrukm2/chaibuilder_com/favicon-32x32_8n9AUpFnH.png" rel="icon" type="image/svg+xml" />
+    <link
+      href="https://ik.imagekit.io/n0uvizrukm2/chaibuilder_com/favicon-32x32_8n9AUpFnH.png"
+      rel="icon"
+      type="image/svg+xml" />
     <meta content="width=device-width, initial-scale=1.0" name="viewport" />
     <title>Chai Builder</title>
     <style>
-      .jotai-devtools-trigger-button{
+      .jotai-devtools-trigger-button {
         right: 3px !important;
         left: auto !important;
       }
-      </style>
+    </style>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "author": "Suraj Air",
   "license": "BSD-3-Clause",
   "homepage": "https://chaibuilder.com",
-  "version": "1.2.104",
+  "version": "1.2.105",
   "type": "module",
   "repository": {
     "type": "git",

diff --git a/src/core/components/canvas/topbar/LanguageSelector.tsx b/src/core/components/canvas/topbar/LanguageSelector.tsx
@@ -1,55 +1,59 @@
 import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../../../ui";
-import { GlobeIcon } from "@radix-ui/react-icons";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { useLanguages } from "../../../hooks";
 import { isEmpty, map, uniq, forEach, get } from "lodash-es";
 import { useMemo } from "react";
 import { LANGUAGES } from "../../../constants/LANGUAGES";
+import { FaLanguage, FaStar } from "react-icons/fa6";
+import { mergeClasses } from "../../../main";
 
 export const LanguageSelector: React.FC = () => {
   const { fallbackLang, languages, selectedLang, setSelectedLang } = useLanguages();
   const currentLang = selectedLang?.length > 0 ? selectedLang : fallbackLang;
 
   const langOptions = useMemo(() => {
     const options = [];
-    forEach(uniq([...languages, fallbackLang]), (key) => {
+    forEach(uniq([fallbackLang, ...languages]), (key) => {
       const value = get(LANGUAGES, key);
       if (value) options.push({ key, value, default: key === fallbackLang });
     });
     return options;
   }, [fallbackLang, languages]);
 
-  if (isEmpty(languages)) {
+  if (isEmpty(languages) && currentLang === "en") {
+    return null;
+  }
+
+  if (isEmpty(languages) && currentLang !== "en") {
     return (
-      <div className="flex items-center gap-x-1 text-sm">
-        <GlobeIcon className="h-4 w-4" />
+      <div className="flex items-center gap-x-1 text-sm text-blue-500 hover:text-blue-600">
+        <FaLanguage className="h-4 w-4" />
         {get(LANGUAGES, currentLang)}
-        {currentLang === fallbackLang && (
-          <span className="h-full pl-1 text-[10px] leading-4 text-green-400">Default</span>
-        )}
       </div>
     );
   }
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button size="sm" variant="outline" className="flex items-center gap-x-1 text-blue-500 hover:text-blue-600">
-          <GlobeIcon className="h-4 w-4" />
-          <div className="flex items-end">
+        <Button size="sm" variant="ghost" className="flex items-center gap-x-1 text-blue-500 hover:text-blue-600">
+          <FaLanguage className="h-4 w-4" />
+          <div className="flex items-center space-x-2">
             <div> {get(LANGUAGES, currentLang)}</div>
-            {currentLang === fallbackLang && (
-              <span className="h-full pl-1 text-[10px] leading-4 text-gray-400">Default</span>
-            )}
+            <ChevronDownIcon className="h-4 w-4" />
           </div>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent>
+      <DropdownMenuContent className="border-border">
         {map(langOptions, (option) => (
-          <DropdownMenuItem className="flex cursor-pointer items-end" onClick={() => setSelectedLang(option.key)}>
-            <div>{option.value}</div>
-            {option.key === fallbackLang && (
-              <span className="h-full pl-1 text-[10px] leading-4 text-green-400">Default</span>
+          <DropdownMenuItem
+            className={mergeClasses(
+              "flex cursor-pointer items-center text-sm",
+              option.key === currentLang && "!bg-blue-500 text-white hover:!text-white",
             )}
+            onClick={() => setSelectedLang(option.key)}>
+            <div>{option.value}</div>
+            {option.key === fallbackLang ? <FaStar className="ml-2 h-4 w-4 text-yellow-400" /> : null}
           </DropdownMenuItem>
         ))}
       </DropdownMenuContent>