feat: déplace le choix de la langue dans une liste dédiée

front/src/components/Header.jsx

@@ -7,7 +7,9 @@ import logoContent from '/images/logo.svg?inline'
 import { useActiveWorkspace } from '../hooks/workspace.js'
 
 import styles from './header.module.scss'
+import LanguagesMenu from './header/LanguagesMenu.jsx'
 import UserMenu from './header/UserMenu.jsx'
+import LanguagesIcon from './header/LanguagesIcon.jsx'
 
 function Header () {
   const activeWorkspace = useActiveWorkspace()
@@ -40,6 +42,7 @@ function Header () {
                   <LifeBuoy size={16}/>
                   Documentation
                 </a>
+                <LanguagesMenu/>
               </nav>
             </>
           }

front/src/components/UserInfos.jsx

@@ -85,15 +85,15 @@ export default function UserInfos () {
             value={institution}
             onChange={(e) => setInstitution(etv(e))}
           />
-          <Field  label="Zotero"className={styles.zotero}>
+          <Field label="Zotero">
             <>
-              {zoteroToken && <span>Linked with <code>{zoteroToken}</code> account.</span>}
-              {!zoteroToken && <span>No linked account.</span>}
-              {zoteroToken && (
+              {zoteroToken && <div className={styles.zotero}>
+                <div>Linked with <code>{zoteroToken}</code> account.</div>
                 <Button title="Unlink this Zotero account" onClick={unlinkZoteroAccount}>
                   Unlink
                 </Button>
-              )}
+              </div>}
+              {!zoteroToken && <span>No linked account.</span>}
             </>
           </Field>
           <div className={formStyles.footer}>

front/src/components/credentials.module.scss

@@ -24,11 +24,10 @@
 }
 
 .zotero {
-  > form {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: flex-start;
 }
 
 .info {

front/src/components/header.module.scss

@@ -54,6 +54,15 @@
   content: "\2197";
 }
 
+.languagesMenu {
+  display: flex;
+  font-weight: normal;
+  gap: 0.35em;
+  align-items: center;
+  font-size: 0.9rem;
+  text-decoration: none;
+}
+
 .secondaryNav {
   padding-left: 2em;
   height: 100%;

front/src/components/header/LanguagesIcon.jsx

@@ -0,0 +1,29 @@
+import clsx from 'clsx'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export default function LanguagesIcon ({className, height = 24, width = 24}) {
+  return <svg xmlns="http://www.w3.org/2000/svg"
+              width={width}
+              height={height}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2" 
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className={clsx("lucide", "lucide-languages", className)}>
+    <path d="m5 8 6 6"/>
+    <path d="m4 14 6-6 2-3"/>
+    <path d="M2 5h12"/>
+    <path d="M7 2h1"/>
+    <path d="m22 22-5-10-5 10"/>
+    <path d="M14 18h6"/>
+  </svg>
+}
+
+LanguagesIcon.propTypes = {
+  className: PropTypes.string,
+  height: PropTypes.number,
+  width: PropTypes.number,
+}

front/src/components/header/LanguagesMenu.jsx

@@ -0,0 +1,46 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import useComponentVisible from '../../hooks/componentVisible.js'
+import i18n from '../../i18n.js'
+import LanguagesIcon from './LanguagesIcon.jsx'
+import styles from './LanguagesMenu.module.scss'
+
+export default function LanguagesMenu () {
+  const { t } = useTranslation()
+  const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false)
+
+  const [language, setLanguage] = useState(i18n.language)
+
+  useEffect(() => {
+    setLanguage(i18n.language)
+  }, [i18n.language])
+
+  const handleLanguageChange = useCallback(async (value) => {
+    await i18n.changeLanguage(value)
+    setLanguage(value)
+  }, [])
+
+  useEffect(() => {
+    setIsComponentVisible(false)
+  }, [])
+
+  return (
+    <div ref={ref} className={styles.container}>
+      <div className={styles.languagesMenuLink} onClick={() => setIsComponentVisible(!isComponentVisible)}>
+        <LanguagesIcon width={20} height={20}/>
+      </div>
+      {isComponentVisible && <div className={styles.menu}>
+        <div>
+          <ul className={styles.languages}>
+            <li onClick={() => handleLanguageChange('en')}
+                className={language === 'en' ? styles.activeStyle : ''} title="English">English
+            </li>
+            <li onClick={() => handleLanguageChange('fr')}
+                className={language === 'fr' ? styles.activeStyle : ''} title="Français">Français
+            </li>
+          </ul>
+        </div>
+      </div>}
+    </div>
+  )
+}

front/src/components/header/LanguagesMenu.module.scss

@@ -0,0 +1,54 @@
+.container {
+  display: flex;
+  gap: 2em;
+  position: relative;
+}
+
+.languagesMenuLink {
+  display: flex;
+  cursor: pointer;
+  gap: 0.5em;
+  align-items: center;
+}
+
+.languages {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75em;
+  font-size: 0.9em;
+  justify-content: space-around;
+}
+
+.languages > li {
+  border-bottom: 2px solid transparent;
+  padding: 0.25em 0.5em;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+/* hack: do not change container size when changing font weight */
+/* https://stackoverflow.com/questions/5687035/css-bolding-some-text-without-changing-its-containers-size */
+.languages > li::after {
+  display: block;
+  content: attr(title);
+  font-weight: bold;
+  height: 1px;
+  color: transparent;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.languages > li.activeStyle {
+  border-bottom-color: #eee;
+  font-weight: 600;
+}
+
+.menu {
+  position: absolute;
+  top: 66px;
+  right: -0.5rem;
+  background-color: #202020;
+  padding: 1rem 1.75rem;
+  z-index: 99;
+}

front/src/components/header/UserMenu.jsx

@@ -5,13 +5,11 @@ import { Link } from 'react-router-dom'
 import { Layers, LogOut, User } from 'react-feather'
 
 import useComponentVisible from '../../hooks/componentVisible'
-import LanguageSelect from '../LanguageSelect.jsx'
 import styles from './UserMenu.module.scss'
 import Button from '../Button.jsx'
 import WorkspaceMenuItem from '../workspace/WorkspaceMenuItem.jsx'
 import UserMenuLink from './UserMenuLink.jsx'
 
-
 export default function UserMenu () {
   const { t } = useTranslation()
   const dispatch = useDispatch()
@@ -54,9 +52,6 @@ export default function UserMenu () {
               <LogOut size={22}/>
             </Button>
           </div>
-          <div className={styles.languageBlock}>
-            <LanguageSelect/>
-          </div>
         </div>
       </div>}
     </div>

front/src/components/header/UserMenu.module.scss

@@ -31,9 +31,10 @@
 }
 
 .footer {
-  margin-top: 1.5em;
-  padding-top: 0.75em;
   border-top: 1px solid #606060;
+  background-color: #303030;
+  margin: 1.5em -1.25em -1.25em;
+  padding: 0.75em 1.25em 1.25em;
 }
 
 .container {