From 461b063cffc506151f56de8eb92225d1953f1acc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Mon, 6 Jul 2026 00:10:34 +0400
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20regrouper=20les=20langues=20par=20c?=
 =?UTF-8?q?ontinent,=20Afrique=20en=20t=C3=AAte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/teks/teks.js | 92 +++++++++++++++++++++++++++++++----------
 1 file changed, 70 insertions(+), 22 deletions(-)

diff --git a/components/teks/teks.js b/components/teks/teks.js
index 635bfac..f3eecae 100644
--- a/components/teks/teks.js
+++ b/components/teks/teks.js
@@ -88,15 +88,34 @@ const LANG_NAMES = {
   pt: 'Português', ja: '日本語', ko: '한국어',
 }
 
+const CONTINENTS = ['Afrique', 'Asie', 'Europe']
+
 const TRAD_FIELDS = [
-  {field: 'japonais', title: '日本語'},
-  {field: 'coreen', title: '한국어'},
-  {field: 'anglais', title: 'English'},
-  {field: 'francais', title: 'Français'},
-  {field: 'espagnol', title: 'Español'},
-  {field: 'allemand', title: 'Deutsch'},
-  {field: 'italien', title: 'Italiano'},
-  {field: 'portugais', title: 'Português'},
+  // Afrique — langues vedettes en premier
+  {field: 'yoruba', title: 'Yorùbá', continent: 'Afrique'},
+  {field: 'lingala', title: 'Lingála', continent: 'Afrique'},
+  {field: 'wolof', title: 'Wolof', continent: 'Afrique'},
+  {field: 'swahili', title: 'Kiswahili', continent: 'Afrique'},
+  {field: 'hausa', title: 'Hausa', continent: 'Afrique'},
+  {field: 'arabe', title: 'العربية', continent: 'Afrique'},
+  {field: 'oromo', title: 'Oromoo', continent: 'Afrique'},
+  {field: 'igbo', title: 'Igbo', continent: 'Afrique'},
+  {field: 'zoulou', title: 'isiZulu', continent: 'Afrique'},
+  {field: 'malgache', title: 'Malagasy', continent: 'Afrique'},
+  {field: 'xhosa', title: 'isiXhosa', continent: 'Afrique'},
+  {field: 'tswana', title: 'Setswana', continent: 'Afrique'},
+  {field: 'tsonga', title: 'Xitsonga', continent: 'Afrique'},
+  {field: 'sesotho', title: 'Sesotho', continent: 'Afrique'},
+  // Asie
+  {field: 'japonais', title: '日本語', continent: 'Asie'},
+  {field: 'coreen', title: '한국어', continent: 'Asie'},
+  // Europe
+  {field: 'anglais', title: 'English', continent: 'Europe'},
+  {field: 'francais', title: 'Français', continent: 'Europe'},
+  {field: 'espagnol', title: 'Español', continent: 'Europe'},
+  {field: 'allemand', title: 'Deutsch', continent: 'Europe'},
+  {field: 'italien', title: 'Italiano', continent: 'Europe'},
+  {field: 'portugais', title: 'Português', continent: 'Europe'},
 ]
 
 const langToArray = parole => {
@@ -106,10 +125,13 @@ const langToArray = parole => {
 
   return TRAD_FIELDS
     .filter(({field}) => parole.traductions[field])
-    .map(({field, title}) => ({field, title, lang: parole.traductions[field]}))
+    .map(({field, title, continent}) => ({field, title, continent, lang: parole.traductions[field]}))
 }
 
 const BROWSER_LANG_TO_FIELD = {
+  yo: 'yoruba', ln: 'lingala', wo: 'wolof', sw: 'swahili', ha: 'hausa',
+  ar: 'arabe', om: 'oromo', ig: 'igbo', zu: 'zoulou', mg: 'malgache',
+  xh: 'xhosa', tn: 'tswana', ts: 'tsonga', st: 'sesotho',
   ja: 'japonais', ko: 'coreen', en: 'anglais', fr: 'francais',
   es: 'espagnol', de: 'allemand', it: 'italien', pt: 'portugais',
 }
@@ -123,7 +145,6 @@ export default function Teks({parole}) {
   const coverFmt = formatKuveti(parole.couverture)
   const [tab, setTab] = useState(0)
   const [, setCurrentTrack] = useCurrentTrack()
-  const options = ['Transcription', ...langArray.map(({title}) => title)]
 
   useEffect(() => {
     const isBrowser = () => typeof window !== 'undefined'
@@ -247,18 +268,45 @@ export default function Teks({parole}) {
         )}
       </Box>
       <Box sx={{maxWidth: 700, margin: '0 auto'}} className={classes.gridText}>
-        <Box sx={{display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 1, borderBottom: 1, borderColor: 'divider', mb: 2, pb: 2}}>
-          {options.map((label, index) => (
-            <Chip
-              key={label}
-              clickable
-              color='primary'
-              label={label}
-              sx={{fontWeight: tab === index ? 600 : 400}}
-              variant={tab === index ? 'filled' : 'outlined'}
-              onClick={() => setTab(index)}
-            />
-          ))}
+        <Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1.5, borderBottom: 1, borderColor: 'divider', mb: 2, pb: 2}}>
+          <Chip
+            clickable
+            color='primary'
+            label='Transcription'
+            sx={{fontWeight: tab === 0 ? 600 : 400}}
+            variant={tab === 0 ? 'filled' : 'outlined'}
+            onClick={() => setTab(0)}
+          />
+          {CONTINENTS.map(continent => {
+            const items = langArray
+              .map((item, index) => ({...item, index}))
+              .filter(item => item.continent === continent)
+
+            if (items.length === 0) {
+              return null
+            }
+
+            return (
+              <Box key={continent} sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.5}}>
+                <Typography variant='caption' color='text.secondary' sx={{textTransform: 'uppercase', letterSpacing: 1}}>
+                  {continent}
+                </Typography>
+                <Box sx={{display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 1}}>
+                  {items.map(({title, index}) => (
+                    <Chip
+                      key={title}
+                      clickable
+                      color='primary'
+                      label={title}
+                      sx={{fontWeight: tab === index + 1 ? 600 : 400}}
+                      variant={tab === index + 1 ? 'filled' : 'outlined'}
+                      onClick={() => setTab(index + 1)}
+                    />
+                  ))}
+                </Box>
+              </Box>
+            )
+          })}
         </Box>
         {tab === 0 && (
           <>

From 6804e3626fb9c42861ed831d9f9fe7027d9d94ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Mon, 6 Jul 2026 00:18:34 +0400
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20remplacer=20les=20puces=20par=20un?=
 =?UTF-8?q?=20select=20group=C3=A9=20par=20continent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/teks/teks.js | 103 +++++++++++++++++++++++-----------------
 1 file changed, 59 insertions(+), 44 deletions(-)

diff --git a/components/teks/teks.js b/components/teks/teks.js
index f3eecae..6fb7190 100644
--- a/components/teks/teks.js
+++ b/components/teks/teks.js
@@ -3,7 +3,10 @@
 import {useEffect, useState} from 'react'
 import PropTypes from 'prop-types'
 import Box from '@mui/material/Box'
-import Chip from '@mui/material/Chip'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
+import ListSubheader from '@mui/material/ListSubheader'
+import FormControl from '@mui/material/FormControl'
 import Typography from '@mui/material/Typography'
 import Tooltip from '@mui/material/Tooltip'
 import {useMediaQuery} from '@mui/material'
@@ -12,6 +15,8 @@ import slugify from 'slugify'
 
 import {styled} from '@mui/material/styles'
 import ExplicitIcon from '@mui/icons-material/Explicit'
+import TranslateIcon from '@mui/icons-material/Translate'
+import StarIcon from '@mui/icons-material/Star'
 
 import Image from 'next/image'
 
@@ -92,11 +97,11 @@ const CONTINENTS = ['Afrique', 'Asie', 'Europe']
 
 const TRAD_FIELDS = [
   // Afrique — langues vedettes en premier
-  {field: 'yoruba', title: 'Yorùbá', continent: 'Afrique'},
-  {field: 'lingala', title: 'Lingála', continent: 'Afrique'},
-  {field: 'wolof', title: 'Wolof', continent: 'Afrique'},
-  {field: 'swahili', title: 'Kiswahili', continent: 'Afrique'},
-  {field: 'hausa', title: 'Hausa', continent: 'Afrique'},
+  {field: 'yoruba', title: 'Yorùbá', continent: 'Afrique', vedette: true},
+  {field: 'lingala', title: 'Lingála', continent: 'Afrique', vedette: true},
+  {field: 'wolof', title: 'Wolof', continent: 'Afrique', vedette: true},
+  {field: 'swahili', title: 'Kiswahili', continent: 'Afrique', vedette: true},
+  {field: 'hausa', title: 'Hausa', continent: 'Afrique', vedette: true},
   {field: 'arabe', title: 'العربية', continent: 'Afrique'},
   {field: 'oromo', title: 'Oromoo', continent: 'Afrique'},
   {field: 'igbo', title: 'Igbo', continent: 'Afrique'},
@@ -125,7 +130,7 @@ const langToArray = parole => {
 
   return TRAD_FIELDS
     .filter(({field}) => parole.traductions[field])
-    .map(({field, title, continent}) => ({field, title, continent, lang: parole.traductions[field]}))
+    .map(({field, title, continent, vedette}) => ({field, title, continent, vedette, lang: parole.traductions[field]}))
 }
 
 const BROWSER_LANG_TO_FIELD = {
@@ -268,45 +273,55 @@ export default function Teks({parole}) {
         )}
       </Box>
       <Box sx={{maxWidth: 700, margin: '0 auto'}} className={classes.gridText}>
-        <Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1.5, borderBottom: 1, borderColor: 'divider', mb: 2, pb: 2}}>
-          <Chip
-            clickable
-            color='primary'
-            label='Transcription'
-            sx={{fontWeight: tab === 0 ? 600 : 400}}
-            variant={tab === 0 ? 'filled' : 'outlined'}
-            onClick={() => setTab(0)}
-          />
-          {CONTINENTS.map(continent => {
-            const items = langArray
-              .map((item, index) => ({...item, index}))
-              .filter(item => item.continent === continent)
+        <Box sx={{display: 'flex', justifyContent: 'center', borderBottom: 1, borderColor: 'divider', mb: 2, pb: 2}}>
+          <FormControl size='small' sx={{minWidth: 240, width: isMobile ? '100%' : 'auto'}}>
+            <Select
+              value={tab}
+              MenuProps={{PaperProps: {sx: {maxHeight: 420}}}}
+              renderValue={value => {
+                const label = value === 0 ? 'Transcription' : langArray[value - 1]?.title
+                return (
+                  <Box sx={{display: 'flex', alignItems: 'center', gap: 1}}>
+                    <TranslateIcon fontSize='small' color='primary' />
+                    {label}
+                  </Box>
+                )
+              }}
+              onChange={event => setTab(event.target.value)}
+            >
+              <MenuItem value={0}>Transcription</MenuItem>
+              {CONTINENTS.flatMap(continent => {
+                const items = langArray
+                  .map((item, index) => ({...item, index}))
+                  .filter(item => item.continent === continent)
 
-            if (items.length === 0) {
-              return null
-            }
+                if (items.length === 0) {
+                  return []
+                }
 
-            return (
-              <Box key={continent} sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.5}}>
-                <Typography variant='caption' color='text.secondary' sx={{textTransform: 'uppercase', letterSpacing: 1}}>
-                  {continent}
-                </Typography>
-                <Box sx={{display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 1}}>
-                  {items.map(({title, index}) => (
-                    <Chip
-                      key={title}
-                      clickable
-                      color='primary'
-                      label={title}
-                      sx={{fontWeight: tab === index + 1 ? 600 : 400}}
-                      variant={tab === index + 1 ? 'filled' : 'outlined'}
-                      onClick={() => setTab(index + 1)}
-                    />
-                  ))}
-                </Box>
-              </Box>
-            )
-          })}
+                return [
+                  <ListSubheader
+                    key={`entet-${continent}`}
+                    sx={{
+                      fontWeight: 700,
+                      textTransform: 'uppercase',
+                      letterSpacing: 1,
+                      color: 'primary.main',
+                      lineHeight: '2.5em'
+                    }}
+                  >
+                    {continent}
+                  </ListSubheader>,
+                  ...items.map(({title, index, vedette}) => (
+                    <MenuItem key={title} value={index + 1} sx={{display: 'flex', gap: 0.75}}>
+                      {vedette && <StarIcon fontSize='inherit' color='primary' />}
+                      {title}
+                    </MenuItem>
+                  ))
+                ]
+              })}
+            </Select>
+          </FormControl>
         </Box>
         {tab === 0 && (
           <>

From 5936de59ff866325a8bcc2da0147b2fe8c1358f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Mon, 6 Jul 2026 02:01:44 +0400
Subject: [PATCH 3/3] fix: mettre en valeur l'option Transcription dans le
 select

---
 components/teks/teks.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/teks/teks.js b/components/teks/teks.js
index 6fb7190..770c7ea 100644
--- a/components/teks/teks.js
+++ b/components/teks/teks.js
@@ -6,6 +6,7 @@ import Box from '@mui/material/Box'
 import Select from '@mui/material/Select'
 import MenuItem from '@mui/material/MenuItem'
 import ListSubheader from '@mui/material/ListSubheader'
+import Divider from '@mui/material/Divider'
 import FormControl from '@mui/material/FormControl'
 import Typography from '@mui/material/Typography'
 import Tooltip from '@mui/material/Tooltip'
@@ -17,6 +18,7 @@ import {styled} from '@mui/material/styles'
 import ExplicitIcon from '@mui/icons-material/Explicit'
 import TranslateIcon from '@mui/icons-material/Translate'
 import StarIcon from '@mui/icons-material/Star'
+import ArticleIcon from '@mui/icons-material/Article'
 
 import Image from 'next/image'
 
@@ -280,16 +282,21 @@ export default function Teks({parole}) {
               MenuProps={{PaperProps: {sx: {maxHeight: 420}}}}
               renderValue={value => {
                 const label = value === 0 ? 'Transcription' : langArray[value - 1]?.title
+                const Icon = value === 0 ? ArticleIcon : TranslateIcon
                 return (
-                  <Box sx={{display: 'flex', alignItems: 'center', gap: 1}}>
-                    <TranslateIcon fontSize='small' color='primary' />
+                  <Box sx={{display: 'flex', alignItems: 'center', gap: 1, fontWeight: value === 0 ? 700 : 400}}>
+                    <Icon fontSize='small' color='primary' />
                     {label}
                   </Box>
                 )
               }}
               onChange={event => setTab(event.target.value)}
             >
-              <MenuItem value={0}>Transcription</MenuItem>
+              <MenuItem value={0} sx={{display: 'flex', gap: 0.75, fontWeight: 700}}>
+                <ArticleIcon fontSize='inherit' color='primary' />
+                Transcription
+              </MenuItem>
+              <Divider />
               {CONTINENTS.flatMap(continent => {
                 const items = langArray
                   .map((item, index) => ({...item, index}))