Feat/import browser bookmarks

src/components/auth/AuthRequiredModal.tsx

@@ -18,7 +18,7 @@ export function AuthRequiredModal({
 	title = 'ورود به حساب کاربری',
 	message = 'برای دسترسی به این بخش یا انجام این عملیات، ابتدا وارد حساب کاربری خود شوید.',
 	loginButtonText = 'ورود به حساب',
-	cancelButtonText = 'بعداً',
+	cancelButtonText = 'بعدا',
 }: AuthRequiredModalProps) {
 	function triggerAccountTabDisplay() {
 		onClose()

src/components/auth/require-auth.tsx

@@ -1,4 +1,4 @@
-import { Motion as motion } from "@/common/motion";
+import { Motion as motion } from '@/common/motion'
 import type { ReactNode } from 'react'
 import { callEvent } from '@/common/utils/call-event'
 import { useAuth } from '@/context/auth.context'
@@ -44,7 +44,7 @@ export const RequireAuth = ({ children, fallback, mode = 'block' }: RequireAuthP
 							نیاز ورود به حساب کاربری
 						</h3>
 						<p className={'text-xs text-content text-center'}>
-							برای دسترسی به این بخش، لطفاً وارد حساب کاربری خود شوید.
+							برای دسترسی به این بخش، لطفا وارد حساب کاربری خود شوید.
 						</p>
 						<Button
 							onClick={handleAuthClick}
@@ -71,7 +71,7 @@ export const RequireAuth = ({ children, fallback, mode = 'block' }: RequireAuthP
 			>
 				<h3 className="mb-2 text-xl font-semibold">نیاز ورود به حساب کاربری</h3>
 				<p className={'text-xs mb-4 text-content text-center'}>
-					برای دسترسی به این بخش، لطفاً وارد حساب کاربری خود شوید.
+					برای دسترسی به این بخش، لطفا وارد حساب کاربری خود شوید.
 				</p>
 				<Button
 					onClick={handleAuthClick}

src/components/auth/require-verification.tsx

@@ -1,4 +1,4 @@
-import { Motion as motion } from "@/common/motion";
+import { Motion as motion } from '@/common/motion'
 import type { ReactNode } from 'react'
 import { callEvent } from '@/common/utils/call-event'
 import { useAuth } from '@/context/auth.context'
@@ -46,7 +46,7 @@ export const RequireVerification = ({
 						<Icon name="verifyUser" size={20} className="text-success/80" />
 						<h3 className="text-lg font-semibold">نیاز به تأیید حساب</h3>
 						<p className={'text-xs text-content text-center'}>
-							برای دسترسی به این بخش، لطفاً حساب کاربری خود را تأیید کنید.
+							برای دسترسی به این بخش، لطفا حساب کاربری خود را تأیید کنید.
 						</p>
 					</div>
 				</div>
@@ -65,7 +65,7 @@ export const RequireVerification = ({
 			>
 				<h3 className="mb-2 text-xl font-semibold">نیاز به تأیید حساب</h3>
 				<p className={'text-xs mb-4 text-content text-center'}>
-					برای دسترسی به این بخش، لطفاً حساب کاربری خود را تأیید کنید.
+					برای دسترسی به این بخش، لطفا حساب کاربری خود را تأیید کنید.
 				</p>
 				<Button onClick={handleVerificationClick} size="sm">
 					تأیید حساب

src/components/extension-installed-modal.tsx

@@ -111,7 +111,7 @@ const StepFirefoxConsent = ({ onGetStarted }: StepFirefoxConsentProps) => {
 				{' '}
 				Privacy Notice (حریم خصوصی)
 			</h3>
-			<p className="mb-2 font-semibold">لطفاً انتخاب کنید چه داده‌هایی ارسال شوند:</p>
+			<p className="mb-2 font-semibold">لطفا انتخاب کنید چه داده‌هایی ارسال شوند:</p>
 
 			<div className="w-full px-2">
 				<ul className="w-full h-32 p-2 mb-2 space-y-1 overflow-y-auto text-xs list-disc list-inside border border-content rounded-2xl">

src/components/updater/updater.tsx

@@ -168,7 +168,7 @@ export function UpdateChecker() {
 					{updateInfo.force && (
 						<div className="p-3 border rounded-lg bg-error/10 border-error/20">
 							<p className="text-sm text-center text-error">
-								⚠️ این به‌روزرسانی اجباری است و باید حتماً نصب شود
+								⚠️ این به‌روزرسانی اجباری است و باید حتما نصب شود
 							</p>
 						</div>
 					)}
@@ -199,7 +199,7 @@ export function UpdateChecker() {
 								onClick={() => setShowModal(false)}
 								rounded="xl"
 							>
-								بعداً
+								بعدا
 							</Button>
 						)}
 					</div>

src/components/welcome-wizard.tsx

@@ -91,7 +91,7 @@ export const WelcomeWizard = ({ isOpen, onClose }: WelcomeWizardProps) => {
 			selectedInterests.length === 0 ||
 			!selectedReferralSource
 		) {
-			showToast('لطفاً تمام مراحل را تکمیل کنید.', 'error')
+			showToast('لطفا تمام مراحل را تکمیل کنید.', 'error')
 			return
 		}
 
@@ -104,7 +104,7 @@ export const WelcomeWizard = ({ isOpen, onClose }: WelcomeWizardProps) => {
 			})
 		)
 		if (err) {
-			showToast('خطا در ثبت اطلاعات. لطفاً دوباره تلاش کنید.', 'error')
+			showToast('خطا در ثبت اطلاعات. لطفا دوباره تلاش کنید.', 'error')
 			Analytics.event('welcome_wizard_completion_failed')
 			return
 		}
@@ -276,7 +276,7 @@ export const WelcomeWizard = ({ isOpen, onClose }: WelcomeWizardProps) => {
 									مرحله ۴: از کجا شنیدی؟
 								</h2>
 								<p className="text-sm font-medium leading-loose opacity-70 text-balance">
-									لطفاً بگو از کجا با ویجتیفای آشنا شدی.
+									لطفا بگو از کجا با ویجتیفای آشنا شدی.
 								</p>
 							</div>
 

src/layouts/bookmark/bookmark-grid.tsx

@@ -169,7 +169,6 @@ export function BookmarkGrid({
 			document.removeEventListener('click', handleClickOutside)
 		}
 	}, [])
-	// todo:  padding: 0px 8px;
 
 	return (
 		<div

src/layouts/bookmark/bookmarks.tsx

@@ -10,6 +10,7 @@ import { useState } from 'react'
 import Analytics from '@/analytics'
 import { FolderHeader } from './components/folder-header'
 import { AddBookmarkModal } from './components/modal/add-bookmark.modal'
+import { ImportBrowserBookmarksModal } from './components/modal/import-browser-bookmarks.modal'
 import type { Bookmark, FolderPathItem } from './types/bookmark.types'
 import { BookmarkGrid } from './bookmark-grid'
 import { useBookmarkStore } from './context/bookmark.context'
@@ -30,6 +31,7 @@ export function BookmarksList() {
 	const { isAuthenticated } = useAuth()
 
 	const [showAddBookmarkModal, setShowAddBookmarkModal] = useState(false)
+	const [showImportBookmarksModal, setShowImportBookmarksModal] = useState(false)
 	const { mutateAsync: updateOrder } = useUpdateBookmarkOrder()
 	const [folderPath, setFolderPath] = useState<FolderPathItem[]>([])
 
@@ -143,12 +145,12 @@ export function BookmarksList() {
 		}
 
 		const bookmarkCount = currentFolderItems.length
-		const minBookmarks = 10
-		const needsFillers = bookmarkCount < minBookmarks
-		const fillersCount = needsFillers ? minBookmarks - bookmarkCount : 0
+		const maxBookmarks = 10
+		const needsFillers = bookmarkCount < maxBookmarks
+		const fillersCount = needsFillers ? maxBookmarks - bookmarkCount : 0
 		const folderItems = [...currentFolderItems, ...new Array(fillersCount).fill(null)]
 
-		if (folderItems.length > minBookmarks) {
+		if (bookmarkCount >= maxBookmarks) {
 			folderItems.push(null)
 		}
 		return folderItems
@@ -206,9 +208,20 @@ export function BookmarksList() {
 							addBookmark(bookmark, () => setShowAddBookmarkModal(false))
 						}
 						parentId={currentFolderId}
+						onOpenImport={() => {
+							setShowAddBookmarkModal(false)
+							setShowImportBookmarksModal(true)
+						}}
 					/>
 				)
 			)}
+			{showImportBookmarksModal && (
+				<ImportBrowserBookmarksModal
+					isOpen={showImportBookmarksModal}
+					onClose={() => setShowImportBookmarksModal(false)}
+					parentId={currentFolderId}
+				/>
+			)}
 		</>
 	)
 }

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

@@ -23,13 +23,13 @@ export function BookmarkSuggestions({ onSelect }: BookmarkSuggestionsProps) {
 						<div
 							key={index}
 							onClick={() => onSelect(suggestion)}
-							className="p-2 flex flex-col items-center gap-y-0.5 text-center transition-colors duration-200 bg-content hover:!bg-base-300/75 border border-base-300/40 rounded-xl cursor-pointer"
+							className="p-1 flex flex-col items-center justify-center text-center transition-colors duration-200 bg-content hover:!bg-base-300/75 h-12 border border-base-300/40 rounded-xl cursor-pointer"
 						>
-							<div className="flex items-center justify-center flex-shrink-0 w-6 h-6 mb-1">
+							<div className="flex items-center justify-center flex-shrink-0 w-5 h-5 mb-1">
 								<img
 									src={suggestion.icon || ''}
 									alt={suggestion.title}
-									className="object-contain w-6 h-6 rounded-md"
+									className="object-contain w-5 h-5 rounded-md"
 									onError={(e) => {
 										const target = e.target as HTMLImageElement
 										target.style.display = 'none'

src/layouts/bookmark/components/modal/add-bookmark.modal.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { Button } from '@/components/button/button'
 import Modal from '@/components/modal'
 import { TextInput } from '@/components/text-input'
+import { Icon } from '@/src/icons'
 import type { BookmarkType } from '../../types/bookmark.types'
 import { BookmarkSuggestions } from '../bookmark-suggestions'
 import { ShowAdvancedButton, TypeSelector } from '../shared'
@@ -14,6 +15,7 @@ interface AddBookmarkModalProps {
 	onClose: () => void
 	onAdd: (bookmark: BookmarkCreateFormFields) => void
 	parentId: string | null
+	onOpenImport?: () => void
 }
 
 export interface BookmarkCreateFormFields {
@@ -50,6 +52,7 @@ export function AddBookmarkModal({
 	onClose,
 	onAdd,
 	parentId = null,
+	onOpenImport,
 }: AddBookmarkModalProps) {
 	const [type, setType] = useState<BookmarkType>('BOOKMARK')
 	const [showAdvanced, setShowAdvanced] = useState(false)
@@ -180,7 +183,16 @@ export function AddBookmarkModal({
 			>
 				<div className="mt-1 overflow-hidden">
 					<TypeSelector type={type} setType={setType} />
-
+					{onOpenImport && (
+						<button
+							type="button"
+							onClick={onOpenImport}
+							className="flex items-center justify-center w-fit mx-auto px-3 gap-1.5 mt-2 py-1.5 text-[11px] font-medium transition-colors rounded-xl cursor-pointer hover:text-primary text-base-content/80 bg-base-200 hover:bg-primary/10"
+						>
+							<Icon name="download" size={12} />
+							درون‌ریزی از بوکمارک‌های مرورگر
+						</button>
+					)}
 					<div className="flex items-center gap-2 mt-2">
 						<TextInput
 							type="text"
@@ -235,9 +247,7 @@ export function AddBookmarkModal({
 						<Button
 							onClick={onCloseHandler}
 							size="md"
-							className={
-								'btn btn-circle !bg-base-300 hover:!bg-error/10 text-muted hover:!text-error px-10 border-none shadow-none rounded-xl transition-colors duration-300 ease-in-out'
-							}
+							className="w-20 transition-colors duration-300 ease-in-out border-none shadow-none btn bg-base-300 hover:bg-error/10 text-base-content/80 hover:text-error rounded-2xl"
 						>
 							لغو
 						</Button>
@@ -252,7 +262,7 @@ export function AddBookmarkModal({
 							isPrimary={true}
 							loading={isAdding}
 							className={
-								'btn btn-circle !w-fit px-8 border-none shadow-none text-secondary rounded-xl transition-colors duration-300 ease-in-out'
+								'btn w-28 border-none shadow-none text-secondary rounded-2xl transition-colors duration-300 ease-in-out'
 							}
 						>
 							ذخیره

src/layouts/bookmark/components/modal/edit-bookmark.modal.tsx

@@ -154,10 +154,10 @@ export function EditBookmarkModal({
 			size="md"
 			title={`ویرایش ${type === 'FOLDER' ? 'پوشه' : 'بوکمارک'}`}
 			direction="rtl"
-			className="!overflow-y-hidden"
+			className="overflow-y-hidden!"
 			closeOnBackdropClick={false}
 		>
-			<div className="flex flex-col justify-between gap-2 overflow-y-auto h-[23rem]">
+			<div className="flex flex-col justify-between gap-2 overflow-y-auto h-92">
 				<div className="flex flex-col gap-2">
 					<div className="flex flex-col items-center gap-2">
 						<div className="relative flex flex-col items-center">
@@ -189,7 +189,7 @@ export function EditBookmarkModal({
 						}
 					/>
 
-					<div className="relative h-[50px]">
+					<div className="relative h-12.5">
 						{type === 'BOOKMARK' && (
 							<TextInput
 								name="url"
@@ -216,9 +216,7 @@ export function EditBookmarkModal({
 							onClick={onClose}
 							size="md"
 							disabled={isUpdating}
-							className={
-								'btn btn-circle !bg-base-300 hover:!bg-error/10 text-muted hover:!text-error px-10 border-none shadow-none !rounded-2xl transition-colors duration-300 ease-in-out'
-							}
+							className="w-20 transition-colors duration-300 ease-in-out border-none shadow-none btn bg-base-300 hover:bg-error/10 text-base-content/80 hover:text-error rounded-2xl"
 						>
 							لغو
 						</Button>
@@ -232,9 +230,7 @@ export function EditBookmarkModal({
 							size="md"
 							isPrimary={true}
 							loading={isUpdating}
-							className={
-								'btn btn-circle !w-fit px-8 border-none shadow-none text-secondary !rounded-2xl transition-colors duration-300 ease-in-out'
-							}
+							className="transition-colors duration-300 ease-in-out border-none shadow-none btn w-28 text-secondary rounded-2xl"
 						>
 							ذخیره
 						</Button>