chore: add Discord link

Author: sheepzh

README-zh.md

@@ -3,6 +3,7 @@
 [![codecov](https://codecov.io/gh/sheepzh/time-tracker-4-browser/branch/main/graph/badge.svg?token=S98QSBSKCR&style=flat-square)](https://codecov.io/gh/sheepzh/time-tracker-4-browser)
 [![](https://img.shields.io/badge/license-Anti%20996-blue)](https://github.com/996icu/996.ICU)
 [![](https://img.shields.io/github/v/release/sheepzh/time-tracker-4-browser)](https://github.com/sheepzh/time-tracker-4-browser/releases)
+[![Discord](https://img.shields.io/badge/discord-join-5865F2?logo=discord&logoColor=white)](https://discord.gg/yXCngD8pKS)
 
 <p>
   <a href="https://chromewebstore.google.com/detail/dkdhhcbjijekmneelocdllcldcpmekmm/reviews"><img src="https://developer.chrome.com/static/docs/webstore/branding/image/206x58-chrome-web-bcb82d15b2486.png" alt="Chrome Web Store" height="48"></a>
@@ -54,13 +55,25 @@
 	<img src="./doc/screenshot/app.png" width="100%">
 </div>
 
-## 贡献指南
+## 如何反馈
 
-如果你想参与到该项目的开源建设，可以考虑以下几种方式
+如果你在使用过程中遇到了问题，或有任何想法和建议，欢迎通过以下方式告诉我们：
 
 #### 提交 Issue
 
-如果您有一些好的想法，或者 bug 反馈，可以新建一条 [issue](https://github.com/sheepzh/time-tracker-4-browser/issues) 。作者会在第一时间进行回复。
+在 [GitHub Issues](https://github.com/sheepzh/time-tracker-4-browser/issues) 中描述你遇到的问题或功能建议，我们会尽快回复。
+
+#### 加入 Discord
+
+加入我们的 [Discord 社区](https://discord.gg/yXCngD8pKS)，与开发者和其他用户直接交流。
+
+#### 创建 Discussion
+
+在 [GitHub Discussions](https://github.com/sheepzh/time-tracker-4-browser/discussions) 中发起话题，适合分享使用经验或进行开放性讨论。
+
+## 贡献指南
+
+如果你想参与到该项目的开源建设，可以考虑以下几种方式
 
 #### 参与开发
 

README.md

@@ -3,6 +3,7 @@
 [![codecov](https://codecov.io/gh/sheepzh/time-tracker-4-browser/branch/main/graph/badge.svg?token=S98QSBSKCR&style=flat-square)](https://codecov.io/gh/sheepzh/time-tracker-4-browser)
 [![](https://img.shields.io/badge/license-Anti%20996-blue)](https://github.com/996icu/996.ICU)
 [![Crowdin](https://badges.crowdin.net/timer-chrome-edge-firefox/localized.svg)](https://crowdin.com/project/timer-chrome-edge-firefox)
+[![Discord](https://img.shields.io/badge/discord-join-5865F2?logo=discord&logoColor=white)](https://discord.gg/yXCngD8pKS)
 
 <p>
   <a href="https://chromewebstore.google.com/detail/dkdhhcbjijekmneelocdllcldcpmekmm/reviews"><img src="https://developer.chrome.com/static/docs/webstore/branding/image/206x58-chrome-web-bcb82d15b2486.png" alt="Available in the Chrome Web Store" height="48"></a>
@@ -53,15 +54,27 @@ Time Tracker is a browser extension to track the time you spent on all websites.
     <p>Page Blocking</p>
 </div>
 
-## Contribution
+## Feedback
 
-There are some things you can do to contribute to this software.
+If you encounter any issues or have suggestions during use, feel free to reach out through the following channels:
+
+#### 1. Submit an Issue
+
+Describe your problem or feature request in [GitHub Issues](https://github.com/sheepzh/time-tracker-4-browser/issues), and we'll get back to you as soon as possible.
+
+#### 2. Join Discord
 
-#### 1. Submit issues
+Join our [Discord community](https://discord.gg/yXCngD8pKS) to chat directly with the developer and other users.
 
-You can [submit one issue](https://github.com/sheepzh/time-tracker-4-browser/issues) to us if you have some suggestions, feature requests, or feedback of bugs. And we will reply it as soon as possible.
+#### 3. Create a Discussion
+
+Start a topic in [GitHub Discussions](https://github.com/sheepzh/time-tracker-4-browser/discussions) — great for sharing experiences or open-ended conversations.
+
+## Contribution
+
+There are some things you can do to contribute to this software.
 
-#### 2. Participate in development
+#### 1. Participate in development
 
 If you know how to develop browser extensions and are familiar with the project's technology stack (TypeScript + Vue3 + Element Plus + Echarts), you can also contribute code
 

src/i18n/message/popup/header-resource.json

@@ -1,6 +1,7 @@
 {
     "en": {
         "rating": "Submit rating",
+        "discord": "Join Discord",
         "showSiteName": "Display site name",
         "showTopN": "Display top {n}",
         "donutChart": "Displayed as donut charts"

src/i18n/message/popup/header.ts

@@ -9,6 +9,7 @@ import resource from './header-resource.json'
 
 export type HeaderMessage = {
     rating: string
+    discord: string
     donutChart: string
     showSiteName: string
     showTopN: string

src/pages/icons.tsx

@@ -14,6 +14,12 @@ export const GitHub: Icon = () => (
     </svg>
 )
 
+export const Discord: Icon = () => (
+    <svg viewBox="0 0 1280 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1049.062 139.672a3 3 0 0 0-1.528-1.4A970.13 970.13 0 0 0 808.162 64.06a3.632 3.632 0 0 0-3.846 1.82 674.922 674.922 0 0 0-29.8 61.2 895.696 895.696 0 0 0-268.852 0 619.082 619.082 0 0 0-30.27-61.2 3.78 3.78 0 0 0-3.848-1.82 967.378 967.378 0 0 0-239.376 74.214 3.424 3.424 0 0 0-1.576 1.352C78.136 367.302 36.372 589.38 56.86 808.708a4.032 4.032 0 0 0 1.53 2.75 975.332 975.332 0 0 0 293.65 148.378 3.8 3.8 0 0 0 4.126-1.352A696.4 696.4 0 0 0 416.24 860.8a3.72 3.72 0 0 0-2.038-5.176 642.346 642.346 0 0 1-91.736-43.706 3.77 3.77 0 0 1-0.37-6.252 502.094 502.094 0 0 0 18.218-14.274 3.638 3.638 0 0 1 3.8-0.512c192.458 87.834 400.82 87.834 591 0a3.624 3.624 0 0 1 3.848 0.466 469.066 469.066 0 0 0 18.264 14.32 3.768 3.768 0 0 1-0.324 6.252 602.814 602.814 0 0 1-91.78 43.66 3.75 3.75 0 0 0-2 5.222 782.11 782.11 0 0 0 60.028 97.63 3.728 3.728 0 0 0 4.126 1.4A972.096 972.096 0 0 0 1221.4 811.458a3.764 3.764 0 0 0 1.53-2.704c24.528-253.566-41.064-473.824-173.868-669.082zM444.982 675.16c-57.944 0-105.688-53.174-105.688-118.478s46.818-118.482 105.688-118.482c59.33 0 106.612 53.64 105.686 118.478 0 65.308-46.82 118.482-105.686 118.482z m390.76 0c-57.942 0-105.686-53.174-105.686-118.478s46.818-118.482 105.686-118.482c59.334 0 106.614 53.64 105.688 118.478 0 65.308-46.354 118.482-105.688 118.482z" />
+    </svg>
+)
+
 export const Heart: Icon = () => (
     <svg viewBox="0 0 1024 1024">
         <path d="M1000 248Q976.992 192 933.984 148.992 849.984 64 732.992 64q-64 0-121.504 28T512 171.008q-42.016-51.008-99.488-79.008T291.008 64Q174.016 64 90.016 150.016 47.008 193.024 24 249.024-0.992 308.032 0 371.04q0.992 68.992 28.992 130.496t79.008 104.512q4.992 4 8.992 8 14.016 12 112.992 102.016 208 191.008 256.992 235.008 11.008 8.992 24.992 8.992t24.992-8.992q32.992-30.016 180.992-164.992 158.016-144 196-179.008 52-43.008 80.992-104.992t28.992-132q0-64-24-122.016z" />

src/pages/popup/components/Header/MoreInfo.tsx

@@ -1,16 +1,19 @@
 import { createTab } from "@api/chrome/tab"
 import { Collection, MoreFilled } from '@element-plus/icons-vue'
 import Flex from '@pages/components/Flex'
-import { GitHub, Heart } from '@pages/icons'
+import { Discord, GitHub, Heart } from '@pages/icons'
 import { rateClicked } from '@pages/util/rate'
 import { getColor, type ColorVariant } from '@pages/util/style'
 import { t } from '@popup/locale'
-import { BUY_ME_A_COFFEE_PAGE, CHANGE_LOG_PAGE, DONATION_PAGE, REVIEW_PAGE, SOURCE_CODE_PAGE } from "@util/constant/url"
+import { CHANGE_LOG_PAGE, REVIEW_PAGE, SOURCE_CODE_PAGE } from "@util/constant/url"
 import { ElDropdown, ElDropdownItem, ElDropdownMenu, ElIcon } from "element-plus"
+import { createStringUnionGuard } from 'typescript-guard'
 import { defineComponent, type FunctionalComponent, type StyleValue } from "vue"
 import { type JSX } from 'vue/jsx-runtime'
 
-type Command = 'rate' | 'coffee' | 'donation' | 'github' | 'changelog'
+type Command = 'github' | 'changelog' | 'rate' | 'discord'
+
+const isCommand = createStringUnionGuard<Command>('github', 'changelog', 'rate', 'discord')
 
 type ItemLinkProps = {
     icon: JSX.Element
@@ -24,27 +27,23 @@ const ItemLink: FunctionalComponent<ItemLinkProps> = ({ icon, text, iconColor })
     </Flex>
 )
 
+const HANDLERS: Record<Command, NoArgCallback> = {
+    github: () => createTab(SOURCE_CODE_PAGE),
+    changelog: () => createTab(CHANGE_LOG_PAGE),
+    rate: () => {
+        rateClicked()
+        createTab(REVIEW_PAGE)
+    },
+    discord: () => createTab('https://discord.gg/yXCngD8pKS'),
+}
+
 const MoreInfo = defineComponent<{}>(() => {
-    const handleCmd = async (cmd: Command) => {
-        if (cmd === 'rate') {
-            rateClicked()
-            createTab(REVIEW_PAGE)
-        } else if (cmd === 'coffee') {
-            createTab(BUY_ME_A_COFFEE_PAGE)
-        } else if (cmd === 'github') {
-            createTab(SOURCE_CODE_PAGE)
-        } else if (cmd === 'changelog') {
-            createTab(CHANGE_LOG_PAGE)
-        } else if (cmd === 'donation') {
-            createTab(DONATION_PAGE)
-        }
-    }
 
     return () => (
         <ElDropdown
             size='small'
             trigger='click'
-            onCommand={handleCmd}
+            onCommand={val => isCommand(val) && HANDLERS[val]()}
             style={{ cursor: 'pointer' } satisfies StyleValue}
             v-slots={{
                 default: () => <ElIcon><MoreFilled /></ElIcon>,
@@ -56,7 +55,10 @@ const MoreInfo = defineComponent<{}>(() => {
                         <ElDropdownItem command={'changelog' satisfies Command}>
                             <ItemLink icon={<Collection />} text={t(msg => msg.base.changeLog)} />
                         </ElDropdownItem>
-                        <ElDropdownItem command={'rate' satisfies Command} divided>
+                        <ElDropdownItem command={'discord' satisfies Command} divided>
+                            <ItemLink icon={<Discord />} text={t(msg => msg.header.discord)} />
+                        </ElDropdownItem>
+                        <ElDropdownItem command={'rate' satisfies Command}>
                             <ItemLink icon={<Heart />} text={t(msg => msg.header.rating)} iconColor="danger" />
                         </ElDropdownItem>
                     </ElDropdownMenu>