feat: config use emojiorigin

8 files changed, 53 insertions, 5 deletions

diff --git a/src/components/Config.tsx b/src/components/Config.tsx
index 12d5141..7d078e2 100644
--- a/src/components/Config.tsx
+++ b/src/components/Config.tsx
@@ -9,7 +9,12 @@ import Select from '~/components/shared/Select';
 import { ClashGeneralConfig, DispatchFn, State } from '~/store/types';
 import { ClashAPIConfig } from '~/types';
 
-import { getClashAPIConfig, getLatencyTestUrl, getSelectedChartStyleIndex } from '../store/app';
+import {
+  getClashAPIConfig,
+  getLatencyTestUrl,
+  getSelectedChartStyleIndex,
+  getUseEmojiFont,
+} from '../store/app';
 import {
   fetchConfigs,
   flushFakeIPPool,
@@ -78,6 +83,7 @@ const mapState = (s: State) => ({
 const mapState2 = (s: State) => ({
   selectedChartStyleIndex: getSelectedChartStyleIndex(s),
   latencyTestUrl: getLatencyTestUrl(s),
+  useEmojiFont: getUseEmojiFont(s),
   apiConfig: getClashAPIConfig(s),
 });
 
@@ -96,6 +102,7 @@ type ConfigImplProps = {
   configs: ClashGeneralConfig;
   selectedChartStyleIndex: number;
   latencyTestUrl: string;
+  useEmojiFont: boolean;
   apiConfig: ClashAPIConfig;
 };
 
@@ -114,6 +121,7 @@ function ConfigImpl({
   configs,
   selectedChartStyleIndex,
   latencyTestUrl,
+  useEmojiFont,
   apiConfig,
 }: ConfigImplProps) {
   const { t, i18n } = useTranslation();
@@ -262,7 +270,11 @@ function ConfigImpl({
         <div>
           <div className={s0.label}>Mode</div>
           <Select
-            options={configState['mode-list'] ? configState['mode-list'].map(value => [value, value]) : modeOptions}
+            options={
+              configState['mode-list']
+                ? configState['mode-list'].map((value) => [value, value])
+                : modeOptions
+            }
             selected={configState['mode-list'] ? configState.mode : configState.mode.toLowerCase()}
             onChange={(e) => handleInputOnChange({ name: 'mode', value: e.target.value })}
           />
@@ -432,6 +444,17 @@ function ConfigImpl({
         </div>
 
         <div>
+          <div className={s0.label}>{t('use_emoji_font')}</div>
+          <div className={s0.wrapSwitch}>
+            <Switch
+              name="useEmojiFont"
+              checked={useEmojiFont}
+              onChange={(value: boolean) => updateAppConfig('useEmojiFont', value)}
+            />
+          </div>
+        </div>
+
+        <div>
           <div className={s0.label}>{t('chart_style')}</div>
           <Selection2
             OptionComponent={TrafficChartSample}
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index 9d6107f..b7ac010 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -52,6 +52,7 @@ export const data = {
   enable_tun_device: 'Enable TUN Device',
   allow_lan: 'Allow LAN',
   tls_sniffing: 'Sniffer',
+  use_emoji_font: 'Use Emoji Font',
   c_host: 'Host',
   c_sni: 'Sniff Host',
   c_process: 'Process',
diff --git a/src/i18n/vi.ts b/src/i18n/vi.ts
index b7fea2b..cf4d7ac 100644
--- a/src/i18n/vi.ts
+++ b/src/i18n/vi.ts
@@ -52,6 +52,7 @@ export const data = {
   enable_tun_device: 'Bật thiết bị TUN',
   allow_lan: 'Cho phép LAN',
   tls_sniffing: 'Bộ giám sát gói tin Sniffer',
+  use_emoji_font: 'Sử dụng Phông chữ Emoji',
   c_host: 'Máy chủ',
   c_sni: 'Phát hiện máy chủ Sniff ',
   c_process: 'Quá trình',
diff --git a/src/i18n/zh-cn.ts b/src/i18n/zh-cn.ts
index 1c0c21b..96bac90 100644
--- a/src/i18n/zh-cn.ts
+++ b/src/i18n/zh-cn.ts
@@ -51,6 +51,7 @@ export const data = {
   enable_tun_device: '开启 TUN 转发',
   allow_lan: '允许局域网连接',
   tls_sniffing: 'SNI 嗅探',
+  use_emoji_font: '使用 Emoji 字体',
   c_host: '域名',
   c_sni: '嗅探域名',
   c_process: '进程',
diff --git a/src/i18n/zh-tw.ts b/src/i18n/zh-tw.ts
index 72e2b75..fe99eea 100644
--- a/src/i18n/zh-tw.ts
+++ b/src/i18n/zh-tw.ts
@@ -51,6 +51,7 @@ export const data = {
   enable_tun_device: '開啟 TUN 轉發',
   allow_lan: '允許區域網路連接',
   tls_sniffing: 'SNI 嗅探',
+  use_emoji_font: '使用 Emoji 字體',
   c_host: '網域名稱',
   c_sni: '嗅探網域名稱',
   c_process: '處理程序',
diff --git a/src/store/app.ts b/src/store/app.ts
index d154a6c..3628540 100644
--- a/src/store/app.ts
+++ b/src/store/app.ts
@@ -14,6 +14,7 @@ export const getClashAPIConfigs = (s: State) => s.app.clashAPIConfigs;
 export const getTheme = (s: State) => s.app.theme;
 export const getSelectedChartStyleIndex = (s: State) => s.app.selectedChartStyleIndex;
 export const getLatencyTestUrl = (s: State) => s.app.latencyTestUrl;
+export const getUseEmojiFont = (s: State) => s.app.useEmojiFont;
 export const getCollapsibleIsOpen = (s: State) => s.app.collapsibleIsOpen;
 export const getProxySortBy = (s: State) => s.app.proxySortBy;
 export const getHideUnavailableProxies = (s: State) => s.app.hideUnavailableProxies;
@@ -105,6 +106,14 @@ function setTheme(theme: ThemeType = 'light') {
   }
 }
 
+function setEmojiFont(useEmojiFont: boolean) {
+  if (useEmojiFont) {
+    rootEl.setAttribute('data-emoji-font', 'enabled');
+  } else {
+    rootEl.setAttribute('data-emoji-font', 'disabled');
+  }
+}
+
 export function switchTheme(nextTheme = 'auto') {
   return (dispatch: DispatchFn, getState: GetStateFn) => {
     const currentTheme = getTheme(getState());
@@ -134,7 +143,10 @@ export function updateAppConfig(name: string, value: unknown) {
     dispatch('appUpdateAppConfig', (s) => {
       s.app[name] = value;
     });
-    // side effect
+    // side effect for emoji font
+    if (name === 'useEmojiFont') {
+      setEmojiFont(value as boolean);
+    }
     saveState(getState().app);
   };
 }
@@ -162,6 +174,7 @@ const defaultState: StateApp = {
   latencyTestUrl: 'https://www.gstatic.com/generate_204',
   selectedChartStyleIndex: 0,
   theme: 'dark',
+  useEmojiFont: true,
 
   // type { [string]: boolean }
   collapsibleIsOpen: {},
@@ -213,7 +226,8 @@ export function initialState() {
   if (query.theme === 'dark' || query.theme === 'light') {
     s.theme = query.theme;
   }
-  // set initial theme
+  // set initial theme and emoji font
   setTheme(s.theme);
+  setEmojiFont(s.useEmojiFont);
   return s;
 }
diff --git a/src/store/types.ts b/src/store/types.ts
index 3340c74..1e641ab 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -8,6 +8,7 @@ export type StateApp = {
   latencyTestUrl: string;
   selectedChartStyleIndex: number;
   theme: string;
+  useEmojiFont: boolean;
 
   collapsibleIsOpen: Record<string, boolean>;
   proxySortBy: string;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 1cba4b4..d9b5f35 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -64,7 +64,9 @@
 :root {
   --font-mono: 'Roboto Mono', Menlo, monospace;
   // prettier-ignore
-  --font-normal: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",  "Source Han Sans", "PingFang SC", "Microsoft YaHei" , "微软雅黑", Arial,"Twemoji Mozilla", "_Twemoji Mozilla","Segoe UI Emoji", "Segoe UI Symbol";
+  --font-normal: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  // prettier-ignore
+  --font-with-emoji: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",  "Source Han Sans", "PingFang SC", "Microsoft YaHei" , "微软雅黑", Arial,"Twemoji Mozilla", "_Twemoji Mozilla","Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 body {
@@ -96,6 +98,10 @@ body {
   padding: 0;
 }
 
+:root[data-emoji-font='enabled'] body {
+  font-family: var(--font-with-emoji);
+}
+
 @mixin dark {
   --color-background: #202020;
   --color-background2: rgba(32, 32, 32, 0.3);