Fix/bookmark title width

src/context/appearance.context.tsx

@@ -1,7 +1,7 @@
 import type React from 'react'
 import { createContext, useContext, useEffect, useState } from 'react'
 import Analytics from '@/analytics'
-import { getFromStorage, setToStorage } from '@/common/storage'
+import { getMultipleFromStorage, setToStorage } from '@/common/storage'
 import { useChangeFont, useChangeUI } from '@/services/hooks/extension/updateSetting.hook'
 import { useAuth } from './auth.context'
 import { safeAwait } from '@/services/api'
@@ -47,12 +47,16 @@ export function AppearanceProvider({ children }: { children: React.ReactNode })
 
 	useEffect(() => {
 		async function loadSettings() {
-			const storedSettings = await getFromStorage('appearance')
-			if (storedSettings) {
+			const { appearance, browserTitle } = await getMultipleFromStorage([
+				'appearance',
+				'browserTitle',
+			])
+			if (appearance) {
 				setSettings({
 					...DEFAULT_SETTINGS,
-					...storedSettings,
+					...appearance,
 				})
+				if (browserTitle) document.title = browserTitle.template
 			}
 
 			setIsInitialized(true)
@@ -70,11 +74,17 @@ export function AppearanceProvider({ children }: { children: React.ReactNode })
 			updateSetting('ui', newUI)
 		})
 
+		const eventForTitle = listenEvent('browser_title_change', (newTitle) => {
+			document.title = newTitle.template
+			if (newTitle.sync) setToStorage('browserTitle', newTitle)
+		})
+
 		loadSettings()
 
 		return () => {
 			eventForFont()
 			eventForUI()
+			eventForTitle()
 		}
 	}, [])
 

src/context/theme.context.tsx

@@ -46,14 +46,8 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
 			themeChangeHandler(newTheme, sync)
 		})
 
-		const eventForTitle = listenEvent('browser_title_change', (newTitle) => {
-			document.title = newTitle.template
-			if (newTitle.sync) setToStorage('browserTitle', newTitle)
-		})
-
 		return () => {
 			event()
-			eventForTitle()
 		}
 	}, [])
 

src/layouts/bookmark/components/bookmark/bookmark-title.tsx

@@ -7,7 +7,7 @@ export function BookmarkTitle({
 	customTextColor?: string
 }) {
 	return (
-		<div className="w-full px-1 text-center truncate" dir="auto">
+		<div className="px-1 text-center truncate w-22 max-w-22" dir="auto">
 			<span
 				style={{ color: customTextColor || undefined, zIndex: 10 }}
 				className={`text-[.65rem] sm:text-[.7rem] md:text-[.75rem] font-medium transition-colors duration-300 opacity-85 block truncate ${!customTextColor && 'text-content'} group-hover:opacity-100`}

src/layouts/navbar/sync.tsx

@@ -40,16 +40,11 @@ async function getAll() {
 		}>('/extension/@me/sync')
 
 		const { wallpaper, theme, browserTitle, font, ui } = response.data
-		const store = await getMultipleFromStorage([
-			'wallpaper',
-			'theme',
-			'browserTitle',
-			'appearance',
-		])
+		const store = await getMultipleFromStorage(['wallpaper', 'theme', 'appearance'])
 
 		await Promise.all([
 			processWallpaper(wallpaper, store?.wallpaper),
-			processBrowserTitle(browserTitle, store?.browserTitle),
+			processBrowserTitle(browserTitle),
 		])
 
 		processFont(font, store?.appearance)
@@ -80,33 +75,19 @@ async function processWallpaper(
 	} catch {}
 }
 
-async function processBrowserTitle(
-	browserTitle: UserInventoryItem | null,
-	browserTitleStore: { id: string; template: string; name: string } | undefined
-) {
+async function processBrowserTitle(browserTitle: UserInventoryItem | null) {
 	try {
-		if (!browserTitle) return
-		if (browserTitleStore) {
-			if (
-				browserTitleStore.id !== browserTitle.id ||
-				browserTitleStore.template !== browserTitle.value ||
-				browserTitleStore.name !== browserTitle.name
-			) {
-				document.title = browserTitle.value
-				await setToStorage('browserTitle', {
-					id: browserTitle.id,
-					name: browserTitle.name || 'بدون نام',
-					template: browserTitle.value,
-				})
-			}
-		} else {
-			document.title = browserTitle.value
-			await setToStorage('browserTitle', {
-				id: browserTitle.id,
-				name: browserTitle.name || 'بدون نام',
-				template: browserTitle.value,
-			})
-		}
+		if (!browserTitle) return console.log('not found title')
+
+		if (browserTitle.value === document.title) return
+
+		await setToStorage('browserTitle', {
+			id: browserTitle.id,
+			name: browserTitle.name || 'بدون نام',
+			template: browserTitle.value,
+		})
+
+		document.title = browserTitle.value
 	} catch {}
 }
 

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

@@ -103,7 +103,7 @@ export function NotificationCardItem(prop: NotificationItemProps) {
 			target={target}
 			type={type}
 			goTo={goTo}
-			className={`flex gap-2 p-2 transition-all duration-300 border rounded-xl ${!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`}
 		>
 			{icon && (
 				<div className="shrink-0 self-start mt-0.5">