add translation completeness from pogen to the UI

2 files changed, 12 insertions, 8 deletions

diff --git a/packages/web-util/src/components/Header.tsx b/packages/web-util/src/components/Header.tsx
index a0587b2ae..e5662fc70 100644
--- a/packages/web-util/src/components/Header.tsx
+++ b/packages/web-util/src/components/Header.tsx
@@ -3,7 +3,7 @@ import { LangSelector, useTranslationContext } from "../index.browser.js";
 import { ComponentChildren, Fragment, VNode, h } from "preact";
 import logo from "../assets/logo-2021.svg";
 
-export function Header({ title, iconLinkURL, sites, supportedLangs, onLogout, children }:
+export function Header({ title, iconLinkURL, sites, onLogout, children }:
   { title: string, iconLinkURL: string, children?: ComponentChildren, onLogout: (() => void) | undefined, sites: Array<Array<string>>, supportedLangs: string[] }): VNode {
   const { i18n } = useTranslationContext();
   const [open, setOpen] = useState(false)
@@ -107,7 +107,7 @@ export function Header({ title, iconLinkURL, sites, supportedLangs, onLogout, ch
                           </li>
                           : undefined}
                         <li>
-                          <LangSelector supportedLangs={supportedLangs} />
+                          <LangSelector />
                         </li>
                         {/* CHILDREN */}
                         {children}
diff --git a/packages/web-util/src/components/LangSelector.tsx b/packages/web-util/src/components/LangSelector.tsx
index a8d910129..7deaa0cf4 100644
--- a/packages/web-util/src/components/LangSelector.tsx
+++ b/packages/web-util/src/components/LangSelector.tsx
@@ -43,9 +43,9 @@ function getLangName(s: keyof LangsNames | string): string {
   return String(s);
 }
 
-export function LangSelector({ supportedLangs }: { supportedLangs: string[] }): VNode {
+export function LangSelector({ }: {}): VNode {
   const [updatingLang, setUpdatingLang] = useState(false);
-  const { lang, changeLanguage } = useTranslationContext();
+  const { lang, changeLanguage, completness, supportedLang } = useTranslationContext();
   const [hidden, setHidden] = useState(true);
 
   useEffect(() => {
@@ -66,8 +66,9 @@ export function LangSelector({ supportedLangs }: { supportedLangs: string[] }):
     <div>
       <div class="relative mt-2">
         <button type="button" class="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
-          onClick={() => {
-            setHidden((h) => !h);
+          onClick={(e) => {
+            setHidden(!hidden);
+            e.stopPropagation()
           }}>
           <span class="flex items-center">
             <img alt="language" class="h-5 w-5 flex-shrink-0 rounded-full" src={langIcon} />
@@ -82,7 +83,7 @@ export function LangSelector({ supportedLangs }: { supportedLangs: string[] }):
 
         {!hidden &&
           <ul class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm" tabIndex={-1} role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-option-3">
-            {supportedLangs
+            {Object.keys(supportedLang)
               .filter((l) => l !== lang)
               .map((lang) => (
                 <li class="text-gray-900 hover:bg-indigo-600 hover:text-white cursor-pointer relative select-none py-2 pl-3 pr-9" role="option"
@@ -92,7 +93,10 @@ export function LangSelector({ supportedLangs }: { supportedLangs: string[] }):
                     setHidden(true)
                   }}
                 >
-                  <span class="font-normal block truncate">{getLangName(lang)}</span>
+                  <span class="font-normal truncate flex justify-between ">
+                    <span>{getLangName(lang)}</span>
+                    <span>{(completness as any)[lang]}%</span>
+                  </span>
 
                   <span class="text-indigo-600 absolute inset-y-0 right-0 flex items-center pr-4">
                     {/* <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">