feat: integrate Folo icon across various components

Innei · Innei · commit c254486e4176 · 2025-04-19T20:11:47.000+08:00
- Replaced instances of APP_NAME with the new Folo icon in PoweredByFooter, FeedColumnMobile, LoginModalContent, SettingModalLayout, TimelineColumnHeader, and Layout components.
- Added Folo icon component to the project.
- Updated localization to include a new entry for copying the logo text SVG.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/src/renderer/src/components/common/PoweredByFooter.tsx b/apps/desktop/src/renderer/src/components/common/PoweredByFooter.tsx
@@ -1,3 +1,4 @@
+import { Folo } from "@follow/components/icons/folo.js"
 import { Logo } from "@follow/components/icons/logo.jsx"
 import { cn } from "@follow/utils/utils"
 import pkg from "@pkg"
@@ -12,7 +13,7 @@ export const PoweredByFooter: Component = ({ className }) => (
       target="_blank"
       rel="noreferrer"
     >
-      {APP_NAME}
+      <Folo className="size-6" />
     </a>
   </footer>
 )
diff --git a/apps/desktop/src/renderer/src/modules/app-layout/feed-column/mobile.tsx b/apps/desktop/src/renderer/src/modules/app-layout/feed-column/mobile.tsx
@@ -1,3 +1,4 @@
+import { Folo } from "@follow/components/icons/folo.js"
 import { Logo } from "@follow/components/icons/logo.js"
 import { ActionButton } from "@follow/components/ui/button/index.js"
 import { views } from "@follow/constants"
@@ -31,7 +32,8 @@ export function FeedColumnMobile({ asWidget }: { asWidget?: boolean }) {
       <div className="mt-4 flex items-center justify-between pl-6 pr-2">
         <span className="inline-flex items-center gap-3 text-lg font-bold">
           <Logo className="size-8 shrink-0" />
-          {APP_NAME}
+
+          <Folo className="size-9" />
         </span>
         <div className="center inline-flex">
           <Link to="/discover" tabIndex={-1}>
diff --git a/apps/desktop/src/renderer/src/modules/auth/LoginModalContent.tsx b/apps/desktop/src/renderer/src/modules/auth/LoginModalContent.tsx
@@ -1,4 +1,5 @@
 import { useMobile } from "@follow/components/hooks/useMobile.js"
+import { Folo } from "@follow/components/icons/folo.js"
 import { Logo } from "@follow/components/icons/logo.js"
 import { MotionButtonBase } from "@follow/components/ui/button/index.js"
 import { Divider } from "@follow/components/ui/divider/Divider.js"
@@ -46,10 +47,9 @@ export const LoginModalContent = (props: LoginModalContentProps) => {
       <div className="-mt-8 mb-4 flex items-center justify-center">
         <Logo className="size-14" />
       </div>
-      <div className="mb-4 mt-6 text-center">
-        <span className="text-2xl">
-          {t("signin.sign_in_to")} <b>{APP_NAME}</b>
-        </span>
+      <div className="mb-4 mt-6 flex items-center justify-center text-center">
+        <span className="text-2xl">{t("signin.sign_in_to")}</span>
+        <Folo className="ml-2 size-10" />
       </div>
 
       <LoginWithPassword runtime={runtime} />
diff --git a/apps/desktop/src/renderer/src/modules/settings/modal/layout.tsx b/apps/desktop/src/renderer/src/modules/settings/modal/layout.tsx
@@ -1,3 +1,4 @@
+import { Folo } from "@follow/components/icons/folo.js"
 import { Logo } from "@follow/components/icons/logo.jsx"
 import { LetsIconsResizeDownRightLight } from "@follow/components/icons/resize.jsx"
 import { IN_ELECTRON } from "@follow/shared/constants"
@@ -125,7 +126,8 @@ export function SettingModalLayout(
               <div className="bg-theme-modal-background-opaque flex min-h-0 min-w-44 max-w-[20ch] flex-col rounded-l-xl border-r px-2 py-6">
                 <div className="font-default mb-4 flex h-8 items-center gap-2 px-2 font-bold">
                   <Logo className="mr-1 size-6" />
-                  {APP_NAME}
+
+                  <Folo className="size-8" />
                 </div>
                 <nav className="flex grow flex-col">
                   <SidebarItems />
diff --git a/apps/desktop/src/renderer/src/modules/timeline-column/TimelineColumnHeader.tsx b/apps/desktop/src/renderer/src/modules/timeline-column/TimelineColumnHeader.tsx
@@ -1,7 +1,7 @@
+import { Folo } from "@follow/components/icons/folo.js"
 import { Logo } from "@follow/components/icons/logo.jsx"
 import { MdiMeditation } from "@follow/components/icons/Meditation.js"
 import { ActionButton } from "@follow/components/ui/button/index.js"
-import { Popover, PopoverContent, PopoverTrigger } from "@follow/components/ui/popover/index.jsx"
 import { stopPropagation } from "@follow/utils/dom"
 import { cn } from "@follow/utils/utils"
 import { m } from "motion/react"
@@ -16,6 +16,12 @@ import { setAppSearchOpen } from "~/atoms/app"
 import { useGeneralSettingKey } from "~/atoms/settings/general"
 import { useIsZenMode, useSetZenMode } from "~/atoms/settings/ui"
 import { setTimelineColumnShow, useTimelineColumnShow } from "~/atoms/sidebar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu/dropdown-menu"
 import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
 import { useRouteParamsSelector } from "~/hooks/biz/useRouteParams"
 import { useI18n } from "~/hooks/common"
@@ -60,7 +66,7 @@ export const TimelineColumnHeader = memo(() => {
             }}
           >
             <Logo className="mr-1 size-6" />
-            {APP_NAME}
+            <Folo className="size-8" />
           </div>
         </LogoContextMenu>
       )}
@@ -137,48 +143,38 @@ const LogoContextMenu: FC<PropsWithChildren> = ({ children }) => {
     },
   })
 
+  const logoTextRef = useRef<SVGSVGElement>(null)
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild {...contextMenuProps}>
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild {...contextMenuProps}>
         {children}
-      </PopoverTrigger>
-      <PopoverContent align="start" className="!p-1">
-        <button
-          type="button"
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem
           onClick={() => {
             navigator.clipboard.writeText(logoRef.current?.outerHTML || "")
             setOpen(false)
             toast.success(t.common("app.copied_to_clipboard"))
           }}
-          className={cn(
-            "cursor-menu relative flex select-none items-center rounded-sm px-1 py-0.5 text-sm outline-none",
-            "hover:bg-theme-item-hover focus-within:outline-transparent dark:hover:bg-neutral-800",
-            "text-foreground/80 gap-2 [&_svg]:size-3",
-          )}
         >
-          <Logo ref={logoRef} />
+          <Logo ref={logoRef} className="hidden" />
           <span>{t("app.copy_logo_svg")}</span>
-        </button>
-      </PopoverContent>
-    </Popover>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => {
+            navigator.clipboard.writeText(logoTextRef.current?.outerHTML || "")
+            setOpen(false)
+            toast.success(t.common("app.copied_to_clipboard"))
+          }}
+        >
+          <Folo ref={logoTextRef} className="hidden" />
+          <span>{t("app.copy_logo_text_svg")}</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
-// const SearchActionButton = () => {
-//   const canSearch = useGeneralSettingKey("dataPersist")
-//   const { t } = useTranslation()
-//   if (!canSearch) return null
-//   return (
-//     <ActionButton
-//       shortcut="Meta+K"
-//       tooltip={t("words.search")}
-//       onClick={() => setAppSearchOpen(true)}
-//     >
-//       <i className="i-mgc-search-2-cute-re size-5 text-theme-vibrancyFg" />
-//     </ActionButton>
-//   )
-// }
-
 const SearchTrigger = () => {
   const canSearch = useGeneralSettingKey("dataPersist")
 
diff --git a/apps/desktop/src/renderer/src/pages/settings/layout.tsx b/apps/desktop/src/renderer/src/pages/settings/layout.tsx
@@ -1,3 +1,4 @@
+import { Folo } from "@follow/components/icons/folo.js"
 import { Logo } from "@follow/components/icons/logo.jsx"
 import { ELECTRON_BUILD, IN_ELECTRON } from "@follow/shared/constants"
 import { preventDefault } from "@follow/utils/dom"
@@ -32,7 +33,8 @@ function Layout() {
 
           <div className="center my-3 flex">
             <Logo className="size-6" />
-            <span className="ml-2 font-semibold">{APP_NAME}</span>
+
+            <Folo className="ml-2 size-8" />
           </div>
         </WindowUnderBlur>
         <div className="bg-theme-background h-screen flex-1 overflow-y-auto p-8 pt-0">
diff --git a/apps/mobile/app.config.ts b/apps/mobile/app.config.ts
@@ -41,6 +41,11 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   userInterfaceStyle: "automatic",
   newArchEnabled: true,
   ios: {
+    icon: {
+      dark: "./assets/images/ios-dark.png",
+      light: iconPath,
+      tinted: "./assets/images/ios-tinted.png",
+    },
     supportsTablet: true,
     bundleIdentifier: "is.follow",
     usesAppleSignIn: true,
@@ -172,7 +177,4 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
       },
     ],
   ],
-  experiments: {
-    typedRoutes: true,
-  },
 })
diff --git a/apps/ssr/client/components/layout/header/index.tsx b/apps/ssr/client/components/layout/header/index.tsx
@@ -1,5 +1,6 @@
 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"
@@ -73,7 +74,8 @@ export const Header = () => {
           <div className="flex items-center md:gap-x-12">
             <a className="flex items-center gap-4" href="/">
               <Logo className="h-8 w-auto" />
-              <p className="font-default text-xl font-semibold">{APP_NAME}</p>
+              {/* <p className="font-default text-xl font-semibold">{APP_NAME}</p> */}
+              <Folo className="size-10" />
             </a>
           </div>
           <div className="flex items-center gap-4">
diff --git a/locales/app/en.json b/locales/app/en.json
@@ -29,6 +29,7 @@
   "ai_daily.tooltip.content": "Here is news selected by AI from your timeline (<From /> - <To />) that may be important to you.",
   "ai_daily.tooltip.update_schedule": "Update daily at 8 AM and 8 PM.",
   "app.copy_logo_svg": "Copy Logo SVG",
+  "app.copy_logo_text_svg": "Copy Logo Text SVG",
   "app.toggle_sidebar": "Toggle Sidebar",
   "beta_access": "Beta Access",
   "boost.boost_feed": "Boost Feed",
diff --git a/packages/components/src/common/PoweredByFooter.tsx b/packages/components/src/common/PoweredByFooter.tsx
@@ -1,5 +1,6 @@
 import { cn } from "@follow/utils/utils"
 
+import { Folo } from "../icons/folo"
 import { Logo } from "../icons/logo"
 
 export const PoweredByFooter: Component = ({ className }) => (
@@ -12,7 +13,7 @@ export const PoweredByFooter: Component = ({ className }) => (
       target="_blank"
       rel="noreferrer"
     >
-      {APP_NAME}
+      <Folo className="size-8" />
     </a>
   </footer>
 )
diff --git a/packages/components/src/icons/folo.tsx b/packages/components/src/icons/folo.tsx
@@ -0,0 +1,30 @@
+import { forwardRef } from "react"
+
+export const Folo = forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>((props, ref) => (
+  <svg
+    {...props}
+    ref={ref}
+    width="115"
+    height="50"
+    viewBox="0 0 115 50"
+    fill="none"
+    xmlns="https://www.w3.org/2000/svg"
+  >
+    <path
+      d="M97.4813 49.2552C87.5432 49.2552 80.678 42.0631 80.678 31.9288C80.678 21.6637 87.4778 14.4062 97.4813 14.4062C107.55 14.4062 114.35 21.6637 114.35 31.9288C114.35 42.0631 107.485 49.2552 97.4813 49.2552ZM97.4813 42.1939C102.843 42.1939 106.112 37.944 106.112 31.8634C106.112 25.7174 102.843 21.4676 97.4813 21.4676C92.1199 21.4676 88.9816 25.7174 88.9816 31.8634C88.9816 37.944 92.1199 42.1939 97.4813 42.1939Z"
+      fill="currentColor"
+    />
+    <path
+      d="M72.7289 48.6667C70.1136 48.6667 68.6752 46.9668 68.6752 44.0899V5.38342C68.6752 2.50658 70.1136 0.806641 72.7289 0.806641C75.3442 0.806641 76.7826 2.50658 76.7826 5.38342V44.0899C76.7826 46.9668 75.4096 48.6667 72.7289 48.6667Z"
+      fill="currentColor"
+    />
+    <path
+      d="M47.8314 49.2552C37.8932 49.2552 31.0281 42.0631 31.0281 31.9288C31.0281 21.6637 37.8279 14.4062 47.8314 14.4062C57.9003 14.4062 64.7001 21.6637 64.7001 31.9288C64.7001 42.0631 57.8349 49.2552 47.8314 49.2552ZM47.8314 42.1939C53.1928 42.1939 56.4619 37.944 56.4619 31.8634C56.4619 25.7174 53.1928 21.4676 47.8314 21.4676C42.47 21.4676 39.3317 25.7174 39.3317 31.8634C39.3317 37.944 42.47 42.1939 47.8314 42.1939Z"
+      fill="currentColor"
+    />
+    <path
+      d="M5.10235 48.6669C2.42166 48.6669 0.852478 46.967 0.852478 43.9594V7.21438C0.852478 4.20678 2.55243 2.50684 5.62541 2.50684H26.1555C28.967 2.50684 30.5362 3.87987 30.5362 6.23365C30.5362 8.58742 28.967 9.89507 26.1555 9.89507H9.35221V20.9447H24.7825C27.594 20.9447 29.1631 22.187 29.1631 24.5408C29.1631 26.9599 27.594 28.2022 24.7825 28.2022H9.35221V43.9594C9.35221 46.967 7.84842 48.6669 5.10235 48.6669Z"
+      fill="currentColor"
+    />
+  </svg>
+))

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import { Folo } from "@follow/components/icons/folo.js"`
`1`	`2`	`import { Logo } from "@follow/components/icons/logo.jsx"`
`2`	`3`	`import { cn } from "@follow/utils/utils"`
`3`	`4`	`import pkg from "@pkg"`
`@@ -12,7 +13,7 @@ export const PoweredByFooter: Component = ({ className }) => (`
`12`	`13`	`target="_blank"`
`13`	`14`	`rel="noreferrer"`
`14`	`15`	`>`
`15`		`- {APP_NAME}`
	`16`	`+ <Folo className="size-6" />`
`16`	`17`	`</a>`
`17`	`18`	`</footer>`
`18`	`19`	`)`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`import { cn } from "@follow/utils/utils"`
`2`	`2`
	`3`	`+import { Folo } from "../icons/folo"`
`3`	`4`	`import { Logo } from "../icons/logo"`
`4`	`5`
`5`	`6`	`export const PoweredByFooter: Component = ({ className }) => (`
`@@ -12,7 +13,7 @@ export const PoweredByFooter: Component = ({ className }) => (`
`12`	`13`	`target="_blank"`
`13`	`14`	`rel="noreferrer"`
`14`	`15`	`>`
`15`		`- {APP_NAME}`
	`16`	`+ <Folo className="size-8" />`
`16`	`17`	`</a>`
`17`	`18`	`</footer>`
`18`	`19`	`)`