Add translate dialog for users with other languages

frontend/src/components/Egg/Egg.module.scss

@@ -5,11 +5,15 @@
   outline: none;
   width: 100%;
   height: 100%;
-  display: flex;
+  display: none;
   align-items: center;
   justify-content: center;
   overflow: visible;
 
+  &[open] {
+    display: flex;
+  }
+
   &::backdrop {
     background: rgba(0,0,0,.6);
   }

frontend/src/components/TranslateDialog/TranslateDialog.module.scss

@@ -1,9 +1,7 @@
-import { styled } from 'goober'
-
-export const Wrapper = styled('div')`
+.popup {
   position: fixed;
-  top: 20px;
-  left: 20px;
+  bottom: 20px;
+  right: 20px;
   background-color: var(--background);
   border: 1px solid var(--surface);
   z-index: 900;
@@ -28,9 +26,9 @@ export const Wrapper = styled('div')`
   @media (max-width: 400px) {
     display: block;
   }
-`
+}
 
-export const ButtonWrapper = styled('div')`
+.buttons {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -44,4 +42,4 @@ export const ButtonWrapper = styled('div')`
     margin: 20px 0 0;
     white-space: normal;
   }
-`
+}

frontend/src/components/TranslateDialog/TranslateDialog.tsx

@@ -1,32 +1,52 @@
-import { Button } from '/src/components'
+'use client'
 
-import { useTranslateStore } from '/src/stores'
+import { useEffect, useState } from 'react'
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
 
-import {
-  Wrapper,
-  ButtonWrapper,
-} from './TranslateDialog.styles'
+import Button from '/src/components/Button/Button'
+import { languages } from '/src/i18n/options'
+import { useStore } from '/src/stores'
+
+import styles from './TranslateDialog.module.scss'
+
+interface TranslateStore {
+  translateDialogDismissed: boolean
+  dismissDialog: () => void
+}
+
+const useTranslateStore = create<TranslateStore>()(persist(
+  set => ({
+    translateDialogDismissed: false,
+    dismissDialog: () => set({ translateDialogDismissed: true }),
+  }),
+  { name: 'crabfit-translate' },
+))
 
 const TranslateDialog = () => {
-  const navigatorLang = useTranslateStore(state => state.navigatorLang)
-  const setDialogDismissed = useTranslateStore(state => state.setDialogDismissed)
+  const [isSupported, setIsSupported] = useState(true)
+  const store = useStore(useTranslateStore, state => state)
 
-  return (
-    <Wrapper>
-      <div>
-        <h2>Translate Crab Fit</h2>
-        <p>Crab Fit hasn't been translated to your language yet.</p>
-      </div>
-      <ButtonWrapper>
-        <Button
-          target="_blank"
-          rel="noreferrer noopener"
-          href={`https://docs.google.com/forms/d/e/1FAIpQLSd5bcs8LTP_8Ydrh2e4iMlZft5x81qSfAxekuuQET27A2mBhA/viewform?usp=pp_url&entry.1530835706=__other_option__&entry.1530835706.other_option_response=${encodeURIComponent(navigatorLang)}`}
-        >Help translate!</Button>
-        <Button secondary onClick={() => setDialogDismissed(true)}>Close</Button>
-      </ButtonWrapper>
-    </Wrapper>
-  )
+  // Check if current language has translations
+  useEffect(() => {
+    setIsSupported((languages as readonly string[]).includes(navigator.language.substring(0, 2)))
+  }, [])
+
+  return (store?.translateDialogDismissed === false && !isSupported) ? <div className={styles.popup}>
+    <div>
+      <h2>Translate Crab Fit</h2>
+      <p>Crab Fit hasn't been translated to your language yet.</p>
+    </div>
+
+    <div className={styles.buttons}>
+      <Button
+        target="_blank"
+        rel="noreferrer noopener"
+        href={`https://docs.google.com/forms/d/e/1FAIpQLSd5bcs8LTP_8Ydrh2e4iMlZft5x81qSfAxekuuQET27A2mBhA/viewform?usp=pp_url&entry.1530835706=__other_option__&entry.1530835706.other_option_response=${encodeURIComponent(navigator.language)}`}
+      >Help translate!</Button>
+      <Button isSecondary onClick={() => store.dismissDialog()}>Close</Button>
+    </div>
+  </div> : null
 }
 
 export default TranslateDialog