feat: add emoticon conversion feature for text and HTML inputs

src/app/features/settings/emojis-stickers/EmojisStickers.tsx

@@ -1,17 +1,22 @@
 import React, { useState } from 'react';
-import { Box, Text, IconButton, Icon, Icons, Scroll } from 'folds';
+import { Box, Text, IconButton, Icon, Icons, Scroll, config, Switch } from 'folds';
 import { Page, PageContent, PageHeader } from '../../../components/page';
+import { SequenceCard } from '../../../components/sequence-card';
 import { GlobalPacks } from './GlobalPacks';
 import { UserPack } from './UserPack';
 import { TelegramImport } from './TelegramImport';
 import { ImagePack } from '../../../plugins/custom-emoji';
 import { ImagePackView } from '../../../components/image-pack-view';
+import { useSetting } from '../../../state/hooks/settings';
+import { settingsAtom } from '../../../state/settings';
+import { SettingTile } from '../../../components/setting-tile';
 
 type EmojisStickersProps = {
   requestClose: () => void;
 };
 export function EmojisStickers({ requestClose }: EmojisStickersProps) {
   const [imagePack, setImagePack] = useState<ImagePack>();
+  const [autoConvertEmoticons, setAutoConvertEmoticons] = useSetting(settingsAtom, 'autoConvertEmoticons');
 
   const handleImagePackViewClose = () => {
     setImagePack(undefined);
@@ -41,6 +46,22 @@ export function EmojisStickers({ requestClose }: EmojisStickersProps) {
         <Scroll hideTrack visibility="Hover">
           <PageContent>
             <Box direction="Column" gap="700">
+              <Box direction="Column" gap="100">
+                <Text size="L400">Options</Text>
+                <SequenceCard variant="SurfaceVariant" direction="Column">
+                  <SettingTile
+                    title="Auto-convert Text Emoticons"
+                    description="Automatically convert text emoticons like :) :D :( to emoji when sending messages."
+                    after={
+                      <Switch
+                        variant="Primary"
+                        value={autoConvertEmoticons}
+                        onChange={setAutoConvertEmoticons}
+                      />
+                    }
+                  />
+                </SequenceCard>
+              </Box>
               <UserPack onViewPack={setImagePack} />
               <GlobalPacks onViewPack={setImagePack} />
               <TelegramImport onViewPack={setImagePack} />