feat: add social link

Signed-off-by: Innei <i@innei.in>

src/main/tipc.ts

@@ -194,7 +194,7 @@ export const router = {
 
       nativeTheme.themeSource = systemColorMode === input ? "system" : input
     }),
-  setMacOSBadge: t.procedure.input<number>().action(async ({ input }) => {
+  setDockBadge: t.procedure.input<number>().action(async ({ input }) => {
     if (app.dock) {
       if (input === 0) {
         app.dock.setBadge("")

src/renderer/src/constants/social.ts

@@ -0,0 +1,19 @@
+import { repository } from "@pkg"
+
+export const SocialMediaLinks = [
+  {
+    icon: "i-mgc-github-cute-fi",
+    label: "GitHub",
+    url: repository.url,
+  },
+  {
+    icon: "i-mgc-discord-cute-fi",
+    label: "Discord",
+    url: "https://discord.gg/b7hC2qcE",
+  },
+  {
+    icon: "i-mgc-social-x-cute-re",
+    label: "X",
+    url: "https://x.com/follow_app_",
+  },
+]

src/renderer/src/modules/settings/modal/layout.tsx

@@ -51,7 +51,7 @@ export function SettingModalLayout(
         scale: 0.96,
       }}
       className={cn(
-        "relative flex h-[500px] max-h-[80vh] w-[660px] max-w-full flex-col overflow-hidden rounded-xl border border-border",
+        "relative flex h-[500px] max-h-[80vh] w-[calc(170px+55ch)] max-w-full flex-col overflow-hidden rounded-xl border border-border",
         !overlay && "shadow-perfect",
       )}
       onContextMenu={preventDefault}

src/renderer/src/modules/settings/tabs/about.tsx

@@ -1,6 +1,8 @@
 import { license, repository } from "@pkg"
 import { Logo } from "@renderer/components/icons/logo"
-import { StyledButton } from "@renderer/components/ui/button"
+import { Button, StyledButton } from "@renderer/components/ui/button"
+import { Divider } from "@renderer/components/ui/divider"
+import { SocialMediaLinks } from "@renderer/constants/social"
 
 export const SettingAbout = () => (
   <div>
@@ -33,7 +35,7 @@ export const SettingAbout = () => (
         </div>
       </div>
 
-      <p className="mt-3 text-balance text-sm">
+      <p className="mt-6 text-balance text-sm">
         {APP_NAME}
         {" "}
         is a free and open-source project. It is licensed under the
@@ -48,19 +50,47 @@ export const SettingAbout = () => (
         {" "}
         (
         {GIT_COMMIT_SHA.slice(0, 7).toUpperCase()}
-        )
+        ) currently early
+        in development. If you have any feedback or suggestions, please feel
+        free to
         {" "}
-        currently early in development. If you have any feedback or
-        suggestions, please feel free to
-        {" "}
-        <a className="inline-flex cursor-pointer items-center gap-1 hover:underline" href={`${repository.url}/issues/new`} target="_blank">
+        <a
+          className="inline-flex cursor-pointer items-center gap-1 hover:underline"
+          href={`${repository.url}/issues/new`}
+          target="_blank"
+        >
           open an issue
           {" "}
           <i className="i-mgc-external-link-cute-re" />
         </a>
         {" "}
         on the GitHub.
       </p>
+
+      <Divider className="scale-x-50" />
+
+      <h2 className="text-base font-semibold">
+        {/* 社区与资讯 */}
+        Social Media
+      </h2>
+      <div className="mt-2 flex flex-wrap gap-2">
+
+        {SocialMediaLinks.map((link) => (
+          <Button
+            as="a"
+            key={link.url}
+            variant="outline"
+            className="flex flex-1 cursor-pointer items-center gap-2"
+            // @ts-expect-error
+            href={link.url}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <i className={link.icon} />
+            {link.label}
+          </Button>
+        ))}
+      </div>
     </section>
   </div>
 )

src/renderer/src/providers/ui-setting-sync.tsx

@@ -15,11 +15,11 @@ const useUISettingSync = () => {
   useEffect(() => {
     if (setting.showDockBadge) {
       return feedUnreadActions.subscribeUnreadCount(
-        (count) => tipcClient?.setMacOSBadge(count),
+        (count) => tipcClient?.setDockBadge(count),
         true,
       )
     } else {
-      tipcClient?.setMacOSBadge(0)
+      tipcClient?.setDockBadge(0)
     }
     return
   }, [setting.showDockBadge])