feat(ssr): optimize ssr header

apps/desktop/layer/renderer/src/modules/settings/tabs/about.tsx

@@ -2,6 +2,7 @@ import { Logo } from "@follow/components/icons/logo.jsx"
 import { Button } from "@follow/components/ui/button/index.js"
 import { styledButtonVariant } from "@follow/components/ui/button/variants.js"
 import { Divider } from "@follow/components/ui/divider/index.js"
+import { SocialMediaLinks } from "@follow/constants"
 import { MODE, ModeEnum } from "@follow/shared/constants"
 import { getCurrentEnvironment } from "@follow/utils/environment"
 import PKG, { repository } from "@pkg"
@@ -9,7 +10,6 @@ import { useQuery } from "@tanstack/react-query"
 import { Trans, useTranslation } from "react-i18next"
 
 import { CopyButton } from "~/components/ui/button/CopyButton"
-import { SocialMediaLinks } from "~/constants/social"
 import { tipcClient } from "~/lib/client"
 import { getNewIssueUrl } from "~/lib/issues"
 

apps/mobile/src/modules/settings/routes/About.tsx

@@ -30,7 +30,7 @@ const links = [
   {
     title: "X",
     icon: SocialXCuteReIcon,
-    url: "https://x.com/follow_app_",
+    url: "https://x.com/intent/follow?screen_name=follow_app_",
     iconBackgroundColor: "#000000",
     iconColor: "#FFFFFF",
   },

apps/ssr/client/components/layout/header/index.tsx

@@ -2,8 +2,7 @@ import { siteConfig } from "@client/configs"
 import { openInFollowApp } from "@client/lib/helper"
 import { Folo } from "@follow/components/icons/folo.js"
 import { Logo } from "@follow/components/icons/logo.jsx"
-import { Button } from "@follow/components/ui/button/index.jsx"
-import { Kbd } from "@follow/components/ui/kbd/Kbd.jsx"
+import { SocialMediaLinks } from "@follow/constants"
 import { cn } from "@follow/utils/utils"
 import type { MotionValue } from "motion/react"
 import { useMotionValueEvent, useScroll } from "motion/react"
@@ -78,30 +77,18 @@ export const Header = () => {
               <Folo className="size-10" />
             </a>
           </div>
-          <div className="flex items-center gap-4">
-            <Button
-              className="flex size-9 rounded-full border-neutral-300 bg-transparent hover:border-zinc-400 md:w-auto md:px-2 dark:border-neutral-700 dark:hover:border-zinc-600"
-              variant="outline"
-            >
+          <div className="flex flex-wrap items-center gap-6 text-2xl">
+            {SocialMediaLinks.map((link) => (
               <a
-                href={siteConfig.repoUrl}
-                className="flex items-center gap-2"
+                href={link.url}
+                key={link.url}
                 target="_blank"
-                rel="noopener noreferrer"
+                rel="noreferrer"
+                className="flex items-center"
               >
-                <span className="i-simple-icons-github size-4" />
-                <span className="hidden md:inline">Star on GitHub</span>
+                <i className={link.icon} style={{ color: link.color }} />
               </a>
-            </Button>
-            <Button
-              buttonClassName="hidden lg:block cursor-pointer !text-accent-content"
-              onClick={handleToApp}
-            >
-              Open app
-              <Kbd className="!leading-0 !dark:bg-zinc-200 kbd-xs ml-2 size-5 scale-[0.85] rounded-sm !border-transparent !bg-zinc-50 !font-mono text-black">
-                L
-              </Kbd>
-            </Button>
+            ))}
           </div>
         </nav>
       </Container>

apps/ssr/client/pages/(main)/share/feeds/[id]/index.tsx

@@ -99,6 +99,7 @@ export function Component() {
                   fallbackUrl: `/timeline/view-${view}/${id}/pending`,
                 })
               }}
+              size="lg"
             >
               <FollowIcon className="mr-2 size-3" />
               {isSubscribed

apps/ssr/client/pages/(main)/share/lists/[id]/index.tsx

@@ -100,6 +100,7 @@ export function Component() {
                   onClick={() => {
                     handleOpenInFollowApp()
                   }}
+                  size="lg"
                 >
                   <FollowIcon className="mr-2 size-3" />
                   {isSubscribed

packages/internal/constants/src/index.ts

@@ -2,4 +2,5 @@ export * from "./app"
 export * from "./auth-providers"
 export * from "./enums"
 export * from "./rsshub"
+export * from "./social"
 export * from "./tabs"

packages/internal/constants/src/social.ts

@@ -1,19 +1,20 @@
-import { repository } from "@pkg"
-
 export const SocialMediaLinks = [
   {
     icon: "i-mgc-github-cute-fi",
     label: "GitHub",
-    url: repository.url,
+    url: "https://github.com/RSSNext/Folo",
+    color: "#000000",
   },
   {
     icon: "i-mgc-discord-cute-fi",
     label: "Discord",
     url: "https://discord.gg/followapp",
+    color: "#5865F2",
   },
   {
     icon: "i-mgc-social-x-cute-re",
     label: "X",
-    url: "https://x.com/follow_app_",
+    url: "https://x.com/intent/follow?screen_name=follow_app_",
+    color: "#000000",
   },
 ]