From 4295decfa9869599386499e405e2e30ba2796a80 Mon Sep 17 00:00:00 2001
From: Konv Suu <2583695112@qq.com>
Date: Mon, 17 Feb 2025 12:23:44 +0800
Subject: [PATCH] feat(profile): enhance email management and avatar fallback
 for better mobile support (#2776)

---
 apps/renderer/src/modules/profile/email-management.tsx     | 7 ++++++-
 apps/renderer/src/modules/profile/profile-setting-form.tsx | 3 ++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/renderer/src/modules/profile/email-management.tsx b/apps/renderer/src/modules/profile/email-management.tsx
index 582ff93f9..aeb4188ee 100644
--- a/apps/renderer/src/modules/profile/email-management.tsx
+++ b/apps/renderer/src/modules/profile/email-management.tsx
@@ -1,3 +1,4 @@
+import { useMobile } from "@follow/components/hooks/useMobile.js"
 import { Button } from "@follow/components/ui/button/index.js"
 import {
   Form,
@@ -29,6 +30,7 @@ const formSchema = z.object({
 
 export function EmailManagement() {
   const user = useWhoami()
+  const isMobile = useMobile()
   const { t } = useTranslation("settings")
 
   const verifyEmailMutation = useMutation({
@@ -73,7 +75,10 @@ export function EmailManagement() {
         {user?.email && (
           <CopyButton
             value={user.email}
-            className="size-5 p-1 opacity-0 duration-300 group-hover:opacity-100"
+            className={cn(
+              "size-5 p-1 duration-300",
+              !isMobile && "opacity-0 group-hover:opacity-100",
+            )}
           />
         )}
       </p>
diff --git a/apps/renderer/src/modules/profile/profile-setting-form.tsx b/apps/renderer/src/modules/profile/profile-setting-form.tsx
index 03c679189..9d59a5557 100644
--- a/apps/renderer/src/modules/profile/profile-setting-form.tsx
+++ b/apps/renderer/src/modules/profile/profile-setting-form.tsx
@@ -1,4 +1,4 @@
-import { Avatar, AvatarImage } from "@follow/components/ui/avatar/index.jsx"
+import { Avatar, AvatarFallback, AvatarImage } from "@follow/components/ui/avatar/index.jsx"
 import { Button } from "@follow/components/ui/button/index.js"
 import {
   Form,
@@ -116,6 +116,7 @@ export const ProfileSettingForm = ({
                     {field.value && (
                       <Avatar className="size-9">
                         <AvatarImage src={field.value} />
+                        <AvatarFallback>{user?.name[0] || ""}</AvatarFallback>
                       </Avatar>
                     )}
                   </div>