From 25548d7c3fec78e2a8193640f4326a75ad88b39e Mon Sep 17 00:00:00 2001
From: Aylong <alexanderkitsa@gmail.com>
Date: Thu, 18 Apr 2024 17:59:15 +0300
Subject: [PATCH 1/3] =?UTF-8?q?=D0=AD=D1=82=D0=BE=20=D0=BF=D0=B8=D0=B7?=
 =?UTF-8?q?=D0=B4=D0=B5=D1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../interfaces/PreferencesMenu/VoicePage.tsx  | 112 +++++++++++-------
 1 file changed, 70 insertions(+), 42 deletions(-)

diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/VoicePage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/VoicePage.tsx
index b9175b91e6759..849a3325e323f 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/VoicePage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/VoicePage.tsx
@@ -2,14 +2,13 @@ import { useState } from 'react';
 
 import { useBackend } from '../../backend';
 import {
-  BlockQuote,
-  Box,
   Button,
   Dropdown,
   Icon,
   Input,
   LabeledList,
   Section,
+  Stack,
   Table,
 } from '../../components';
 import { PreferencesMenuData } from './data';
@@ -20,6 +19,7 @@ const donatorTiers = {
   2: 'Tier II',
   3: 'Tier III',
   4: 'Tier IV',
+  5: 'Tier V',
 };
 
 const gendersIcons = {
@@ -69,9 +69,16 @@ const getCheckboxGroup = (
 export const VoicePage = (props) => {
   const { act, data } = useBackend<PreferencesMenuData>();
 
-  const { providers, seeds, phrases, tts_seed } = data;
+  const {
+    providers,
+    seeds,
+    tts_seed,
+    phrases,
+    // donator_level,
+    // character_gender,
+  } = data;
 
-  const donator_level = 5;
+  const donator_level = 5; // Remove after tiers implementation
 
   const categories = seeds
     .map((seed) => seed.category)
@@ -82,6 +89,7 @@ export const VoicePage = (props) => {
   const donatorLevels = seeds
     .map((seed) => seed.donator_level)
     .filter((level, i, a) => a.indexOf(level) === i)
+    .sort((a, b) => a - b)
     .map((level) => donatorTiers[level]);
 
   const [selectedProviders, setSelectedProviders] = useState(providers);
@@ -117,8 +125,8 @@ export const VoicePage = (props) => {
   let phrasesSelect = (
     <Dropdown
       options={phrases}
-      selected={selectedPhrase.replace(/(.{25})..+/, '$1...')}
-      width="220px"
+      selected={selectedPhrase.replace(/(.{60})..+/, '$1...')}
+      width="445px"
       onSelected={(value) => setSelectedPhrase(value)}
     />
   );
@@ -126,7 +134,7 @@ export const VoicePage = (props) => {
   let searchBar = (
     <Input
       placeholder="Название..."
-      fluid
+      width="100%"
       onInput={(e, value) => setSearchtext(value)}
     />
   );
@@ -167,18 +175,16 @@ export const VoicePage = (props) => {
               donator_level < seed.donator_level &&
               'Требуется более высокий уровень подписки'
             }
-            tooltipPosition="right"
-            textAlign="left"
-            onClick={() => act('select_voice', { seed: seed.name })}
+            onClick={() => act('select', { seed: seed.name })}
           />
         </Table.Cell>
         <Table.Cell collapsing textAlign="center">
           <Button
             fluid
             icon="music"
+            color={tts_seed === seed.name ? 'green' : 'transparent'}
             content=""
             tooltip="Прослушать пример"
-            color="transparent"
             onClick={() =>
               act('listen', { seed: seed.name, phrase: selectedPhrase })
             }
@@ -229,36 +235,58 @@ export const VoicePage = (props) => {
   });
 
   return (
-    <>
-      <Section title="Фильтры">
-        <LabeledList>
-          <LabeledList.Item label="Провайдеры">
-            {providerCheckboxes}
-          </LabeledList.Item>
-          <LabeledList.Item label="Пол">{genderesCheckboxes}</LabeledList.Item>
-          <LabeledList.Item label="Категории">
-            {categoriesCheckboxes}
-          </LabeledList.Item>
-          <LabeledList.Item label="Уровень подписки">
-            {donatorLevelsCheckboxes}
-          </LabeledList.Item>
-          <LabeledList.Item label="Фраза">{phrasesSelect}</LabeledList.Item>
-          <LabeledList.Item label="Поиск">{searchBar}</LabeledList.Item>
-        </LabeledList>
-      </Section>
-      <Section title={`Голоса (${availableSeeds.length}/${seeds.length})`}>
-        <Table>{seedsRow}</Table>
-      </Section>
-      <Section>
-        <BlockQuote>
-          <Box>
-            {`Для поддержания и развития сообщества в условиях растущих расходов часть голосов пришлось сделать доступными только за материальную поддержку сообщества.`}
-          </Box>
-          <Box mt={2} italic>
-            {`Подробнее об этом можно узнать в нашем Discord-сообществе.`}
-          </Box>
-        </BlockQuote>
-      </Section>
-    </>
+    <Stack fill vertical>
+      <Stack.Item>
+        <Section fill title="Фильтры">
+          <LabeledList>
+            <LabeledList.Item label="Провайдеры">
+              {providerCheckboxes}
+            </LabeledList.Item>
+            <LabeledList.Item label="Пол">
+              {genderesCheckboxes}
+            </LabeledList.Item>
+            <LabeledList.Item label="Уровень подписки">
+              {donatorLevelsCheckboxes}
+            </LabeledList.Item>
+            <LabeledList.Item label="Фраза">{phrasesSelect}</LabeledList.Item>
+            <LabeledList.Item label="Поиск">{searchBar}</LabeledList.Item>
+          </LabeledList>
+        </Section>
+      </Stack.Item>
+      <Stack.Item height={'150px'}>
+        <Section
+          fill
+          scrollable
+          title="Категории"
+          buttons={
+            <>
+              <Button
+                icon="times"
+                content="Убрать всё"
+                disabled={selectedCategories.length === 0}
+                onClick={() => setSelectedCategories([])}
+              />
+              <Button
+                icon="check"
+                content="Выбрать всё"
+                disabled={selectedCategories.length === categories.length}
+                onClick={() => setSelectedCategories(categories)}
+              />
+            </>
+          }
+        >
+          {categoriesCheckboxes}
+        </Section>
+      </Stack.Item>
+      <Stack.Item height={'295px'}>
+        <Section
+          fill
+          scrollable
+          title={`Голоса (${availableSeeds.length}/${seeds.length})`}
+        >
+          <Table>{seedsRow}</Table>
+        </Section>
+      </Stack.Item>
+    </Stack>
   );
 };

From 2f2ca156f047fe57032d3d28c3e26290a8b00238 Mon Sep 17 00:00:00 2001
From: Aylong <alexanderkitsa@gmail.com>
Date: Thu, 18 Apr 2024 18:40:03 +0300
Subject: [PATCH 2/3] =?UTF-8?q?=D0=AD=D1=82=D0=BE=20=D1=83=D0=B6=D0=B5=20?=
 =?UTF-8?q?=D0=BD=D0=B5=20=D1=82=D0=B0=D0=BA=D0=BE=D0=B9=20=D1=83=D0=B6=20?=
 =?UTF-8?q?=D0=B8=20=D0=BF=D0=B8=D0=B7=D0=B4=D0=B5=D1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CharacterPreferenceWindow.tsx             |   4 +-
 .../interfaces/PreferencesMenu/VoicePage.tsx  | 126 ++++++++++--------
 2 files changed, 75 insertions(+), 55 deletions(-)

diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferenceWindow.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferenceWindow.tsx
index bde56f429d63c..c8936780eed67 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferenceWindow.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferenceWindow.tsx
@@ -88,7 +88,7 @@ export const CharacterPreferenceWindow = (props) => {
 
   return (
     <Window title="Character Preferences" width={920} height={770}>
-      <Window.Content scrollable>
+      <Window.Content scrollable style={{ overflowY: 'auto' }}>
         <Stack vertical fill>
           <Stack.Item>
             <CharacterProfiles
@@ -173,7 +173,7 @@ export const CharacterPreferenceWindow = (props) => {
 
           <Stack.Divider />
 
-          <Stack.Item>{pageContents}</Stack.Item>
+          <Stack.Item grow>{pageContents}</Stack.Item>
         </Stack>
       </Window.Content>
     </Window>
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/VoicePage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/VoicePage.tsx
index 849a3325e323f..7f62658556510 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/VoicePage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/VoicePage.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 
 import { useBackend } from '../../backend';
 import {
+  BlockQuote,
   Button,
   Dropdown,
   Icon,
@@ -14,7 +15,7 @@ import {
 import { PreferencesMenuData } from './data';
 
 const donatorTiers = {
-  0: 'Бесплатные',
+  0: 'Free',
   1: 'Tier I',
   2: 'Tier II',
   3: 'Tier III',
@@ -126,7 +127,6 @@ export const VoicePage = (props) => {
     <Dropdown
       options={phrases}
       selected={selectedPhrase.replace(/(.{60})..+/, '$1...')}
-      width="445px"
       onSelected={(value) => setSelectedPhrase(value)}
     />
   );
@@ -192,6 +192,7 @@ export const VoicePage = (props) => {
         </Table.Cell>
         <Table.Cell
           bold
+          collapsing
           textColor={
             seed.donator_level > 0 && tts_seed !== seed.name
               ? 'orange'
@@ -201,7 +202,6 @@ export const VoicePage = (props) => {
           {seed.name}
         </Table.Cell>
         <Table.Cell
-          collapsing
           opacity={tts_seed === seed.name ? 0.5 : 0.25}
           textAlign="left"
         >
@@ -235,57 +235,77 @@ export const VoicePage = (props) => {
   });
 
   return (
-    <Stack fill vertical>
-      <Stack.Item>
-        <Section fill title="Фильтры">
-          <LabeledList>
-            <LabeledList.Item label="Провайдеры">
-              {providerCheckboxes}
-            </LabeledList.Item>
-            <LabeledList.Item label="Пол">
-              {genderesCheckboxes}
-            </LabeledList.Item>
-            <LabeledList.Item label="Уровень подписки">
-              {donatorLevelsCheckboxes}
-            </LabeledList.Item>
-            <LabeledList.Item label="Фраза">{phrasesSelect}</LabeledList.Item>
-            <LabeledList.Item label="Поиск">{searchBar}</LabeledList.Item>
-          </LabeledList>
-        </Section>
-      </Stack.Item>
-      <Stack.Item height={'150px'}>
-        <Section
-          fill
-          scrollable
-          title="Категории"
-          buttons={
-            <>
-              <Button
-                icon="times"
-                content="Убрать всё"
-                disabled={selectedCategories.length === 0}
-                onClick={() => setSelectedCategories([])}
-              />
-              <Button
-                icon="check"
-                content="Выбрать всё"
-                disabled={selectedCategories.length === categories.length}
-                onClick={() => setSelectedCategories(categories)}
-              />
-            </>
-          }
-        >
-          {categoriesCheckboxes}
-        </Section>
+    <Stack fill>
+      <Stack.Item basis={'40%'}>
+        <Stack fill vertical>
+          <Stack.Item>
+            <Section title="Фильтры">
+              <LabeledList>
+                <LabeledList.Item label="Провайдеры">
+                  {providerCheckboxes}
+                </LabeledList.Item>
+                <LabeledList.Item label="Пол">
+                  {genderesCheckboxes}
+                </LabeledList.Item>
+                <LabeledList.Item label="Тир">
+                  {donatorLevelsCheckboxes}
+                </LabeledList.Item>
+                <LabeledList.Item label="Фраза">
+                  {phrasesSelect}
+                </LabeledList.Item>
+                <LabeledList.Item label="Поиск">{searchBar}</LabeledList.Item>
+              </LabeledList>
+            </Section>
+          </Stack.Item>
+          <Stack.Item grow>
+            <Section
+              fill
+              scrollable
+              title="Категории"
+              buttons={
+                <>
+                  <Button
+                    icon="times"
+                    content="Убрать всё"
+                    disabled={selectedCategories.length === 0}
+                    onClick={() => setSelectedCategories([])}
+                  />
+                  <Button
+                    icon="check"
+                    content="Выбрать всё"
+                    disabled={selectedCategories.length === categories.length}
+                    onClick={() => setSelectedCategories(categories)}
+                  />
+                </>
+              }
+            >
+              {categoriesCheckboxes}
+            </Section>
+          </Stack.Item>
+          <Stack.Item>
+            <Section>
+              <BlockQuote>
+                <Stack.Item>
+                  {`Для поддержания и развития сообщества в условиях растущих расходов часть голосов пришлось сделать доступными только за материальную поддержку сообщества.`}
+                </Stack.Item>
+                <Stack.Item mt={1} italic>
+                  {`Подробнее об этом можно узнать в нашем Discord-сообществе.`}
+                </Stack.Item>
+              </BlockQuote>
+            </Section>
+          </Stack.Item>
+        </Stack>
       </Stack.Item>
-      <Stack.Item height={'295px'}>
-        <Section
-          fill
-          scrollable
-          title={`Голоса (${availableSeeds.length}/${seeds.length})`}
-        >
-          <Table>{seedsRow}</Table>
-        </Section>
+      <Stack.Item grow>
+        <Stack fill vertical>
+          <Section
+            fill
+            scrollable
+            title={`Голоса (${availableSeeds.length}/${seeds.length})`}
+          >
+            <Table>{seedsRow}</Table>
+          </Section>
+        </Stack>
       </Stack.Item>
     </Stack>
   );

From 7cfcc59906a665fe43dd4d986eaf6a707acca131 Mon Sep 17 00:00:00 2001
From: Aylong <alexanderkitsa@gmail.com>
Date: Thu, 18 Apr 2024 18:46:52 +0300
Subject: [PATCH 3/3] fix quirks page

---
 tgui/packages/tgui/interfaces/PreferencesMenu/QuirksPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/QuirksPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/QuirksPage.tsx
index c145b7eb3db34..3b81944754168 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/QuirksPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/QuirksPage.tsx
@@ -391,7 +391,7 @@ export function QuirksPage(props) {
         };
 
         return (
-          <Stack align="center" fill>
+          <Stack fill>
             <Stack.Item basis="50%">
               <Stack vertical fill align="center">
                 <Stack.Item>
@@ -450,7 +450,7 @@ export function QuirksPage(props) {
               </Stack>
             </Stack.Item>
 
-            <Stack.Item>
+            <Stack.Item align="center">
               <Icon name="exchange-alt" size={1.5} ml={2} mr={2} />
             </Stack.Item>