feat: add select dictionary variant feature

src/app/popup/Popup.tsx

@@ -1,3 +1,4 @@
+import { SelectDictionaryList } from '@features/dictionary/SelectDictionaryVariant'
 import { SelectLanguages } from '@features/language/SelectLanguages'
 
 import { LANGUAGES } from '@entities/language'
@@ -7,6 +8,7 @@ import { Toasts } from '@shared/ui/Toast'
 export const Popup = () => {
   return (
     <main>
+      <SelectDictionaryList />
       <SelectLanguages languages={LANGUAGES} />
       <Toasts />
     </main>

src/features/dictionary/SelectDictionaryVariant/index.ts

@@ -0,0 +1 @@
+export * from './ui'

src/features/dictionary/SelectDictionaryVariant/ui/SelectDictionaryList.tsx

@@ -0,0 +1,72 @@
+import { useStore } from '@nanostores/preact'
+
+import { NoSelectedLanguages } from '@features/language/SelectLanguages'
+
+import { DictionaryCard, dictionaryStore } from '@entities/dictionary'
+import { languageStore } from '@entities/language'
+
+import { Tab, TabPanel, Tabs, TabsList, a11yProps } from '@shared/ui/Tabs'
+
+import { SelectDictionaryVariant } from './SelectDictionaryVariant'
+import styles from './styles.module.scss'
+
+export const SelectDictionaryList = () => {
+  const dictionaries = useStore(dictionaryStore.$dictionaries)
+  const languages = useStore(languageStore.$languages)
+
+  return (
+    <>
+      {languages.length ? (
+        <>
+          <Tabs>
+            <TabsList arrows={true}>
+              {languages.map((language) => (
+                <Tab
+                  value={language.value}
+                  {...a11yProps('language_navigation', language.value)}
+                >
+                  {language.label}
+                </Tab>
+              ))}
+            </TabsList>
+            {languages.map((language) => {
+              return (
+                <TabPanel
+                  {...a11yProps('language_navigation', language.value)}
+                  value={language.value}
+                >
+                  <ul className={styles.dictionaries}>
+                    {dictionaries[language.value].dictionaries.map(
+                      (dictionary) => {
+                        if ('variants' in dictionary) {
+                          return (
+                            <li>
+                              <SelectDictionaryVariant
+                                key={dictionary.id}
+                                dictionary={dictionary}
+                              />
+                            </li>
+                          )
+                        } else {
+                          return (
+                            <DictionaryCard
+                              key={dictionary.id}
+                              url={dictionary.url}
+                              name={dictionary.name}
+                            />
+                          )
+                        }
+                      },
+                    )}
+                  </ul>
+                </TabPanel>
+              )
+            })}
+          </Tabs>
+        </>
+      ) : (
+        <NoSelectedLanguages />
+      )}
+    </>
+  )
+}

src/features/dictionary/SelectDictionaryVariant/ui/SelectDictionaryVariant.tsx

@@ -1,4 +1,8 @@
-import { DictionaryCard, IDictionaryWithVariants } from '@entities/dictionary'
+import {
+  DictionaryCard,
+  IDictionaryWithVariants,
+  dictionaryStore,
+} from '@entities/dictionary'
 
 import { Button } from '@shared/ui/Button'
 
@@ -21,7 +25,13 @@ export const SelectDictionaryVariant = ({ dictionary }: GroupProps) => {
             actions={
               <Button
                 disabled={isActive}
-                onClick={() => console.log('select variant')}
+                onClick={() =>
+                  dictionaryStore.selectVariant(
+                    'en',
+                    dictionary.id,
+                    variant.value,
+                  )
+                }
               >
                 {isActive
                   ? `${variant.label} version is used`

src/features/dictionary/SelectDictionaryVariant/ui/index.ts

@@ -0,0 +1 @@
+export { SelectDictionaryList } from './SelectDictionaryList'

src/features/dictionary/SelectDictionaryVariant/ui/styles.module.scss

@@ -1,3 +1,9 @@
+.dictionaries {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
 .variants {
   display: grid;
   grid-template-columns: 1fr 1fr;