enhance UI components and user greeting functionality

src/common/utils/getFirstname.ts

@@ -0,0 +1,5 @@
+export function GetUserFirstName(name: string): string {
+	if (!name) return ''
+
+	return name.trim().split(/\s+/)[0] ?? ''
+}

src/layouts/navbar/navbar.layout.tsx

@@ -17,6 +17,7 @@ import { SyncAccount } from './sync'
 import { getCurrentDate } from '../widgets/calendar/utils'
 import { useBirthdayConfetti } from '@/hooks/useBirthdayConfetti'
 import { Icon } from '@/src/icons'
+import { GetUserFirstName } from '@/common/utils/getFirstname'
 
 const WIDGETIFY_URLS = {
 	website: 'https://widgetify.ir',
@@ -159,7 +160,7 @@ export function NavbarLayout(): JSX.Element {
 				className={`fixed z-60 -translate-x-1/2 left-1/2 w-full px-2 md:px-4 lg:px-4 max-w-[1080px] transition-all ease-[cubic-bezier(0.23,1,0.32,1)] 
 					${
 						isVisible
-							? 'bottom-1 opacity-100 scale-100'
+							? 'bottom-2 opacity-100 scale-100'
 							: '-bottom-32 opacity-0 scale-95 pointer-events-none'
 					}`}
 			>
@@ -220,9 +221,9 @@ export function NavbarLayout(): JSX.Element {
 
 function getUserLabel(user: UserProfile | null) {
 	if (!user) return 'ویجتیفای'
-
+	const firstName = GetUserFirstName(user.name)
 	if (user.isBirthdayToday) {
-		return `🎂  تولدت مبارک ${user.name}`
+		return `🎂  تولدت مبارک ${firstName}`
 	}
 
 	const hour = getCurrentDate(user.timeZone).hours()
@@ -237,5 +238,5 @@ function getUserLabel(user: UserProfile | null) {
 		greeting = 'عصر بخیر'
 	}
 
-	return `${greeting} ${user.name}`
+	return `${greeting} ${firstName}`
 }

src/layouts/simplify/wigipad-simplify.tsx

@@ -29,15 +29,15 @@ export function SimplifyYadkar() {
 			</div>
 
 			<div className="col-span-2 px-1 mt-1">
-				<div className="overflow-y-auto scrollbar-none max-h-36 min-h-36">
+				<div className="overflow-y-auto max-h-36 min-h-36 pl-0.5">
 					<div className="pb-8">
 						{fetchedData?.wigiPad?.map((notification, index) => (
 							<RenderWigiPadItem
 								key={`wigipad-item-${index}`}
 								notification={notification}
 							/>
 						))}
-						<NotificationCenter />
+						<NotificationCenter hasBorder={false} />
 					</div>
 				</div>
 			</div>

src/layouts/widgetify-card/daily-mood.tsx

@@ -2,6 +2,7 @@ import Analytics from '@/analytics'
 import { moodOptions } from '@/common/constant/moods'
 import { autoFormatErrorToast, showToast } from '@/common/toast'
 import { callEvent } from '@/common/utils/call-event'
+import { GetUserFirstName } from '@/common/utils/getFirstname'
 import { useAuth } from '@/context/auth.context'
 import { useDate } from '@/context/date.context'
 import { safeAwait } from '@/services/api'
@@ -13,7 +14,10 @@ import { Icon } from '@/src/icons'
 import { useIsMutating, useQueryClient } from '@tanstack/react-query'
 import type { AxiosError } from 'axios'
 
-export function DailyMoodNotification() {
+interface Prop {
+	className: string
+}
+export function DailyMoodNotification({ className }: Prop) {
 	const queryClient = useQueryClient()
 	const { user } = useAuth()
 	const { today } = useDate()
@@ -72,13 +76,13 @@ export function DailyMoodNotification() {
 
 	return (
 		<div
-			className="flex w-full h-20 gap-2 px-2 py-1 transition-all duration-300 border rounded-xl border-base-300/70"
+			className={`flex w-full h-20 gap-2 px-2 py-1 transition-all duration-300 border rounded-xl border-base-300/70 ${className}`}
 			id="notificationMood "
 		>
 			<div className="flex-1 min-w-0 ">
 				<div className="flex items-center justify-between">
 					<h4 className="text-[10px] font-medium truncate text-content">
-						{user?.name}، امروز حالت چطوره؟
+						{GetUserFirstName(user?.name || '')}، امروز حالت چطوره؟
 					</h4>
 					<button
 						type="button"
@@ -101,7 +105,7 @@ export function DailyMoodNotification() {
 								onClick={() =>
 									!isAdding && handleMoodChange(option.value)
 								}
-								className={`p-1.5 w-full shadow-sm rounded-xl transition-all cursor-pointer ${
+								className={`p-1.5 w-full shadow-xs rounded-xl transition-all cursor-pointer ${
 									mood === option.value
 										? `bg-${option.colorClass} text-${option.colorClass}-content scale-105`
 										: `bg-base-300 hover:bg-base-300/70 opacity-80 hover:opacity-100 hover:scale-95`

src/layouts/widgetify-card/notification-center/components/notification-item.tsx

@@ -7,6 +7,7 @@ import { Icon } from '@/src/icons'
 interface NotificationItemProps {
 	onClose(e: any, id: string): any
 	notification: NotificationItem
+	className?: string
 }
 
 interface Prop {
@@ -103,7 +104,7 @@ export function NotificationCardItem(prop: NotificationItemProps) {
 			target={target}
 			type={type}
 			goTo={goTo}
-			className={`flex gap-2 p-2 transition-all duration-300 border rounded-2xl ${!isText && 'hover:scale-[0.99] hover:bg-base-300  items-center active:scale-[0.99]'} ${link && 'cursor-pointer'}   border-base-300/70 group relative`}
+			className={`flex gap-2 p-2 transition-all duration-300 border rounded-2xl ${!isText && 'hover:scale-[0.99] hover:bg-base-300  items-center active:scale-[0.99]'} ${link && 'cursor-pointer'}   border-base-300/70 group relative ${prop.className || ''}`}
 		>
 			{icon && (
 				<div className="shrink-0 self-start mt-0.5">

src/layouts/widgetify-card/notification-center/notification-center.tsx

@@ -14,7 +14,10 @@ import { ProfileProgressNotification } from '../profile-progress'
 import { safeAwait } from '@/services/api'
 
 const localIds = ['notificationMood', 'update_profile']
-export function NotificationCenter() {
+interface Prop {
+	hasBorder?: boolean
+}
+export function NotificationCenter({ hasBorder }: Prop = { hasBorder: true }) {
 	const { user, isAuthenticated, isLoadingUser, profilePercentage } = useAuth()
 	const { data: fetchedNotifications, dataUpdatedAt } = useGetNotifications()
 	const { mutateAsync: notifyAsSeen } = useNotifyAsSeen()
@@ -43,7 +46,11 @@ export function NotificationCenter() {
 			if (user?.hasTodayMood === false && !user?.inCache) {
 				addToNodes({
 					id: 'notificationMood',
-					node: <DailyMoodNotification />,
+					node: (
+						<DailyMoodNotification
+							className={`${hasBorder ? '' : 'border-none!'}`}
+						/>
+					),
 				})
 			}
 
@@ -54,15 +61,19 @@ export function NotificationCenter() {
 			) {
 				addToNodes({
 					id: 'update_profile',
-					node: <ProfileProgressNotification />,
+					node: (
+						<ProfileProgressNotification
+							className={`${hasBorder ? '' : 'border-none!'}`}
+						/>
+					),
 				})
 			} else {
 				try {
 					document.getElementById('update_profile')?.remove()
 				} catch {}
 			}
 		}
-	}, [isAuthenticated, user])
+	}, [isAuthenticated, user, hasBorder])
 
 	useEffect(() => {
 		const addEvent = listenEvent(
@@ -142,6 +153,7 @@ export function NotificationCenter() {
 			{notifications?.map((item, index) => (
 				<NotificationCardItem
 					notification={item}
+					className={`${hasBorder ? '' : 'border-none!'}`}
 					key={`no-${index}`}
 					onClose={(e) => onClose(e, item.id || '', item.ttl)}
 				/>

src/layouts/widgetify-card/profile-progress.tsx

@@ -3,7 +3,10 @@ import { callEvent } from '@/common/utils/call-event'
 import { useAuth } from '@/context/auth.context'
 import { Icon } from '@/src/icons'
 
-export function ProfileProgressNotification() {
+interface Prop {
+	className: string
+}
+export function ProfileProgressNotification({ className }: Prop) {
 	const { profilePercentage } = useAuth()
 	const onRemoveNotif = () => {
 		callEvent('remove_from_notifications', { id: 'update_profile', ttl: 240 })
@@ -17,7 +20,7 @@ export function ProfileProgressNotification() {
 
 	return (
 		<div
-			className="flex w-full gap-2 px-2 py-1 transition-all duration-300 border cursor-pointer rounded-xl  border-base-300/70 hover:scale-[0.99] active:scale-[0.99]"
+			className={`flex w-full gap-2 px-2 py-1 transition-all duration-300 border cursor-pointer rounded-xl  border-base-300/70 hover:scale-[0.99] active:scale-[0.99] ${className}`}
 			id="update_profile"
 			onClick={() => onClick()}
 		>

src/layouts/widgetify-card/widgetify.layout.tsx

@@ -17,7 +17,7 @@ export const WidgetifyLayout = () => {
 					<div
 						className={`flex flex-col flex-1 w-full gap-1 overflow-y-auto scrollbar-none pb-2`}
 					>
-						<NotificationCenter />
+						<NotificationCenter hasBorder />
 					</div>
 				</div>
 			</div>

src/layouts/widgets/wigiPad/info-panel/components/ann-item.tsx

@@ -116,14 +116,14 @@ export function RenderWigiPadItem({ notification }: NotificationItemProps) {
 								className="object-contain w-5 h-5 rounded "
 							/>
 						) : (
-							<span>{notification.icon}</span>
+							<span className="text-[11px]">{notification.icon}</span>
 						)}
 					</div>
 				)}
 
 				<div className="flex-1 min-w-0">
 					<div
-						className="text-xs font-semibold leading-tight line-clamp-1 text-base-content/90"
+						className="text-[11px] font-semibold leading-tight line-clamp-1 text-base-content/90"
 						style={titleStyle}
 					>
 						{notification.title}

src/layouts/widgets/wigiPad/wigiPad.layout.tsx

@@ -14,7 +14,7 @@ export function WigiPadWidget() {
 				<ClockDisplay />
 			</div>
 			<div className="col-span-2 px-1 mt-1">
-				<div className="flex flex-col overflow-y-auto  gap-y-0.5 scrollbar-none h-28 max-h-28 pb-4">
+				<div className="flex flex-col overflow-y-auto  gap-y-0.5 pl-0.5 h-28 max-h-28 pb-4">
 					{fetchedData?.wigiPad.map((notification, index) => (
 						<RenderWigiPadItem key={index} notification={notification} />
 					))}