feat(mobile): add discord link in setting (#13789)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Added a new Discord community link in the mobile settings Others
section with an animated "Hot" badge

* **Localization**
* Added multilingual support for the new Discord link across all
supported languages

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/mobile/dialogs/setting/others/index.css.ts

@@ -0,0 +1,49 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { keyframes, style } from '@vanilla-extract/css';
+
+const shineAnimation = keyframes({
+  '0%': {
+    backgroundPosition: 'calc(var(--shine-size) * -1) 0, 0 0',
+  },
+  '100%': {
+    backgroundPosition: 'calc(100% + var(--shine-size)) 0, 0 0',
+  },
+});
+export const hotTag = style({
+  background: cssVarV2('chip/tag/red'),
+  padding: '0px 8px',
+  borderRadius: 20,
+  lineHeight: '20px',
+  fontSize: 12,
+  fontWeight: 500,
+  color: 'white',
+  position: 'relative',
+  overflow: 'hidden',
+
+  border: '0.5px solid red',
+  boxShadow: '0px 2px 3px rgba(0,0,0,0.1), 0px 0px 3px rgba(255,0,0, 0.5)',
+
+  vars: {
+    '--shine-size': '100px',
+    '--shine-color': 'rgba(255,255,255,0.5)',
+  },
+
+  selectors: {
+    '&::after': {
+      content: "''",
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      pointerEvents: 'none',
+      width: '100%',
+      height: '100%',
+      // animate a shine effect
+      animation: `${shineAnimation} 3.6s infinite`,
+
+      backgroundImage: `linear-gradient(90deg, transparent 0%, var(--shine-color) 50%, transparent 100%)`,
+      backgroundRepeat: 'no-repeat, no-repeat',
+      backgroundSize: '100% 100%',
+      backgroundPosition: 'calc(var(--shine-size) * -1) 0, 0 0',
+    },
+  },
+});

packages/frontend/core/src/mobile/dialogs/setting/others/index.tsx

@@ -3,12 +3,22 @@ import { useI18n } from '@affine/i18n';
 import { SettingGroup } from '../group';
 import { RowLayout } from '../row.layout';
 import { DeleteAccount } from './delete-account';
+import { hotTag } from './index.css';
 
 export const OthersGroup = () => {
   const t = useI18n();
 
   return (
     <SettingGroup title={t['com.affine.mobile.setting.others.title']()}>
+      <RowLayout
+        label={
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            {t['com.affine.mobile.setting.others.discord']()}
+            <div className={hotTag}>Hot</div>
+          </div>
+        }
+        href="https://discord.com/invite/whd5mjYqVw"
+      />
       <RowLayout
         label={t['com.affine.mobile.setting.others.github']()}
         href="https://github.com/toeverything/AFFiNE"

packages/frontend/i18n/src/i18n.gen.ts

@@ -2771,6 +2771,10 @@ export function useAFFiNEI18N(): {
       * `Star us on GitHub`
       */
     ["com.affine.mobile.setting.others.github"](): string;
+    /**
+      * `Discord Group`
+      */
+    ["com.affine.mobile.setting.others.discord"](): string;
     /**
       * `Privacy`
       */

packages/frontend/i18n/src/resources/en.json

@@ -691,6 +691,7 @@
   "com.affine.mobile.setting.appearance.title": "Appearance",
   "com.affine.mobile.setting.header-title": "Settings",
   "com.affine.mobile.setting.others.github": "Star us on GitHub",
+  "com.affine.mobile.setting.others.discord": "Discord Group",
   "com.affine.mobile.setting.others.privacy": "Privacy",
   "com.affine.mobile.setting.others.terms": "Terms of use",
   "com.affine.mobile.setting.others.title": "Privacy & others",