From ae99ba5e6f3b22a8b24139c308f546e5d24b467b Mon Sep 17 00:00:00 2001
From: erfan-goodarzi <devgoodarzi@gmail.com>
Date: Wed, 16 Jul 2025 16:30:57 +0330
Subject: [PATCH 1/3] feat: add folder password input

---
 .../components/modal/add-bookmark.modal.tsx   | 23 +++++++++++++++++--
 src/layouts/bookmark/components/shared.tsx    |  1 +
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/layouts/bookmark/components/modal/add-bookmark.modal.tsx b/src/layouts/bookmark/components/modal/add-bookmark.modal.tsx
index b97fae4a..4dae5b72 100644
--- a/src/layouts/bookmark/components/modal/add-bookmark.modal.tsx
+++ b/src/layouts/bookmark/components/modal/add-bookmark.modal.tsx
@@ -42,6 +42,7 @@ export function AddBookmarkModal({
 		customBackground: '',
 		customTextColor: '',
 		sticker: '',
+		password: '',
 	})
 
 	const { fileInputRef, setIconLoadError, renderIconPreview, handleImageUpload } =
@@ -93,7 +94,11 @@ export function AddBookmarkModal({
 
 			if (type === 'FOLDER') {
 				//@ts-ignore
-				onAdd({ ...baseBookmark, onlineId: null } as Bookmark)
+				onAdd({
+					...baseBookmark,
+					onlineId: null,
+					password: formData.password,
+				} as Bookmark)
 			} else {
 				let newUrl = formData.url
 				if (!newUrl.startsWith('http://') && !newUrl.startsWith('https://')) {
@@ -186,7 +191,7 @@ export function AddBookmarkModal({
 						<TypeSelector type={type} setType={setType} />
 					</div>
 
-					<div className='py-2 h-[calc(100%-4rem)] overflow-auto'>
+					<div className="py-2 h-[calc(100%-2rem)] overflow-auto">
 						{' '}
 						<div className="mb-0.5 flex flex-col items-center gap-y-2.5">
 							{type === 'BOOKMARK' && (
@@ -222,6 +227,20 @@ export function AddBookmarkModal({
 								'mt-2 w-full px-4 py-3 text-right rounded-lg transition-all duration-200 '
 							}
 						/>
+						{type === 'FOLDER' && (
+							<div className="relative h-[50px]">
+								<TextInput
+									type="password"
+									name="password"
+									placeholder="رمز عبور (اختیاری)"
+									value={formData.password ?? ''}
+									onChange={(v) => updateFormData('password', v)}
+									className={
+										'mt-2 w-full px-4 py-3 text-right absolute rounded-lg transition-all duration-300'
+									}
+								/>
+							</div>
+						)}
 						<div className="relative h-[50px]">
 							{type === 'BOOKMARK' && (
 								<TextInput
diff --git a/src/layouts/bookmark/components/shared.tsx b/src/layouts/bookmark/components/shared.tsx
index db8fe21a..69bbfdfd 100644
--- a/src/layouts/bookmark/components/shared.tsx
+++ b/src/layouts/bookmark/components/shared.tsx
@@ -16,6 +16,7 @@ export interface BookmarkFormData {
 	customTextColor: string
 	sticker: string
 	touched?: boolean
+	password?: string
 }
 
 export function IconSourceSelector({

From 0f90729033839fecb03e1c5ca889de3dfbe7c04e Mon Sep 17 00:00:00 2001
From: erfan-goodarzi <devgoodarzi@gmail.com>
Date: Wed, 16 Jul 2025 16:31:38 +0330
Subject: [PATCH 2/3] feat: implement folder password modal

---
 src/layouts/bookmark/bookmarks.tsx            | 49 +++++++++----
 .../bookmark/components/bookmark-folder.tsx   | 15 +++-
 .../modal/folder-password.modal.tsx           | 71 +++++++++++++++++++
 src/layouts/bookmark/types/bookmark.types.ts  |  2 +
 4 files changed, 122 insertions(+), 15 deletions(-)
 create mode 100644 src/layouts/bookmark/components/modal/folder-password.modal.tsx

diff --git a/src/layouts/bookmark/bookmarks.tsx b/src/layouts/bookmark/bookmarks.tsx
index a5cbda15..16eb7601 100644
--- a/src/layouts/bookmark/bookmarks.tsx
+++ b/src/layouts/bookmark/bookmarks.tsx
@@ -10,6 +10,7 @@ import { AddBookmarkModal } from './components/modal/add-bookmark.modal'
 import { BookmarkContextMenu } from './components/modal/bookmark-context-menu'
 import { EditBookmarkModal } from './components/modal/edit-bookmark.modal'
 import type { Bookmark, FolderPathItem } from './types/bookmark.types'
+import { FolderPasswordModal } from './components/modal/folder-password.modal'
 
 export function BookmarksComponent() {
 	const {
@@ -23,19 +24,17 @@ export function BookmarksComponent() {
 
 	const [showAddBookmarkModal, setShowAddBookmarkModal] = useState(false)
 	const [showEditBookmarkModal, setShowEditBookmarkModal] = useState(false)
+	const [showFolderPasswordModal, setShowFolderPasswordModal] = useState(false)
 	const [bookmarkToEdit, setBookmarkToEdit] = useState<Bookmark | null>(null)
+	const [folderPassword, setFolderPassword] = useState('')
+	const [folderToOpen, setFolderToOpen] = useState<Bookmark | null>(null)
 
 	const [selectedBookmark, setSelectedBookmark] = useState<Bookmark | null>(null)
-
 	const [contextMenuPos, setContextMenuPos] = useState({ x: 0, y: 0 })
-
 	const [currentFolderId, setCurrentFolderId] = useState<string | null>(null)
-
 	const [folderPath, setFolderPath] = useState<FolderPathItem[]>([])
-
 	const [currentFolderIsManageable, setCurrentFolderIsManageable] =
 		useState<boolean>(true)
-
 	const [draggedBookmarkId, setDraggedBookmarkId] = useState<string | null>(null)
 	const [dragOverIndex, setDragOverIndex] = useState<number | null>(null)
 
@@ -92,6 +91,21 @@ export function BookmarksComponent() {
 		setShowEditBookmarkModal(true)
 		setSelectedBookmark(null)
 	}
+
+	const handleOpenFolder = (bookmark: Bookmark, e?: React.MouseEvent<any>) => {
+		if (e?.ctrlKey || e?.metaKey) {
+			openBookmarks(bookmark)
+		} else {
+			setCurrentFolderId(bookmark.id)
+			setFolderPath([
+				...folderPath,
+				{ id: bookmark.id, title: bookmark.title, password: bookmark.password },
+			])
+
+			setCurrentFolderIsManageable(isManageable(bookmark))
+		}
+	}
+
 	const handleBookmarkClick = (bookmark: Bookmark, e?: React.MouseEvent<any>) => {
 		if (e) {
 			e.preventDefault()
@@ -109,13 +123,12 @@ export function BookmarksComponent() {
 		}
 
 		if (bookmark.type === 'FOLDER') {
-			if (e?.ctrlKey || e?.metaKey) {
-				openBookmarks(bookmark)
+			setFolderPassword(bookmark.password ?? '')
+			if (bookmark.password) {
+				setFolderToOpen(bookmark)
+				setShowFolderPasswordModal(true)
 			} else {
-				setCurrentFolderId(bookmark.id)
-				setFolderPath([...folderPath, { id: bookmark.id, title: bookmark.title }])
-
-				setCurrentFolderIsManageable(isManageable(bookmark))
+				handleOpenFolder(bookmark, e)
 			}
 		} else {
 			if (e?.ctrlKey || e?.metaKey) {
@@ -283,7 +296,11 @@ export function BookmarksComponent() {
 					bookmark ? (
 						<div
 							key={i}
-							className={`transition-transform duration-200 ${dragOverIndex === i ? 'scale-110 border-2 border-blue-400 rounded-full' : 'rounded-full'}`}
+							className={`transition-transform duration-200 ${
+								dragOverIndex === i
+									? 'scale-110 border-2 border-blue-400 rounded-full'
+									: 'rounded-full'
+							}`}
 						>
 							<BookmarkItem
 								bookmark={bookmark}
@@ -329,6 +346,14 @@ export function BookmarksComponent() {
 			<div className="mt-2 flex justify-center w-full">
 				<FolderPath folderPath={folderPath} onNavigate={handleNavigate} />
 			</div>
+			<FolderPasswordModal
+				onConfirm={() => {
+					if (folderToOpen) handleOpenFolder(folderToOpen)
+				}}
+				folderPassword={folderPassword}
+				isOpen={showFolderPasswordModal}
+				onClose={() => setShowFolderPasswordModal(false)}
+			/>
 			<AddBookmarkModal
 				isOpen={showAddBookmarkModal}
 				onClose={() => setShowAddBookmarkModal(false)}
diff --git a/src/layouts/bookmark/components/bookmark-folder.tsx b/src/layouts/bookmark/components/bookmark-folder.tsx
index e139cc2f..db1e89dd 100644
--- a/src/layouts/bookmark/components/bookmark-folder.tsx
+++ b/src/layouts/bookmark/components/bookmark-folder.tsx
@@ -2,6 +2,7 @@ import { addOpacityToColor } from '@/common/color'
 import Tooltip from '@/components/toolTip'
 import { useState } from 'react'
 import { FaFolder, FaFolderOpen } from 'react-icons/fa'
+import { LuFolderLock } from 'react-icons/lu'
 import { SlOptions } from 'react-icons/sl'
 import type { Bookmark } from '../types/bookmark.types'
 import { RenderStickerPattern } from './bookmark/bookmark-sticker'
@@ -37,7 +38,11 @@ export function FolderBookmarkItem({
 	const displayIcon =
 		bookmark.customImage ||
 		(isHovered ? (
-			<FaFolderOpen className="w-6 h-6 text-blue-400" />
+			bookmark.password ? (
+				<LuFolderLock className="w-6 h-6 text-blue-400" />
+			) : (
+				<FaFolderOpen className="w-6 h-6 text-blue-400" />
+			)
 		) : (
 			<FaFolder className="w-6 h-6 text-blue-400" />
 		))
@@ -58,14 +63,18 @@ export function FolderBookmarkItem({
 			onDrop={onDrop}
 			className={`relative ${isDragging ? 'opacity-50' : ''}`}
 		>
-			<Tooltip content={bookmark.title} className='w-full lg:min-w-[5.4rem]'>
+			<Tooltip content={bookmark.title} className="w-full lg:min-w-[5.4rem]">
 				<button
 					onClick={onClick}
 					onAuxClick={onClick}
 					onMouseEnter={() => setIsHovered(true)}
 					onMouseLeave={() => setIsHovered(false)}
 					style={customStyles}
-					className={`relative flex flex-col items-center justify-center p-4 transition-all duration-300 cursor-pointer group rounded-2xl w-full h-16 md:h-[5.5rem] shadow-sm ${!bookmark.customBackground ? getFolderStyle() : 'border hover:border-blue-400/40'} transition-all ease-in-out duration-300`}
+					className={`relative flex flex-col items-center justify-center p-4 transition-all duration-300 cursor-pointer group rounded-2xl w-full h-16 md:h-[5.5rem] shadow-sm ${
+						!bookmark.customBackground
+							? getFolderStyle()
+							: 'border hover:border-blue-400/40'
+					} transition-all ease-in-out duration-300`}
 				>
 					{RenderStickerPattern(bookmark)}
 					<div className="absolute inset-0 overflow-hidden rounded-xl">
diff --git a/src/layouts/bookmark/components/modal/folder-password.modal.tsx b/src/layouts/bookmark/components/modal/folder-password.modal.tsx
new file mode 100644
index 00000000..68a07972
--- /dev/null
+++ b/src/layouts/bookmark/components/modal/folder-password.modal.tsx
@@ -0,0 +1,71 @@
+import { Button } from '@/components/button/button'
+import Modal from '@/components/modal'
+import { TextInput } from '@/components/text-input'
+
+interface FolderPasswordModalProps {
+	isOpen: boolean
+	onClose: () => void
+	onConfirm: () => void
+	folderPassword: string
+}
+
+export function FolderPasswordModal({
+	isOpen,
+	onClose,
+	onConfirm,
+	folderPassword,
+}: FolderPasswordModalProps) {
+	const [password, setPassword] = useState('')
+	const [errorMessage, setErrorMessage] = useState('')
+
+	const invalidPassword = 'رمز عبور اشتباه است. دوباره امتحان کنید'
+
+	return (
+		<Modal
+			direction="rtl"
+			title="ورود به پوشه"
+			isOpen={isOpen}
+			onClose={() => {
+				setPassword('')
+				setErrorMessage('')
+				onClose()
+			}}
+		>
+			<label htmlFor="password">رمز عبور پوشه را وارد کنید</label>
+			<div className="flex items-end gap-2 pb-[7px]">
+				<TextInput
+					type="password"
+					name="password"
+					id="password"
+					placeholder="رمز عبور"
+					value={password}
+					onChange={(v) => setPassword(v)}
+					className={`mt-2 w-full px-4 py-3 text-right rounded-lg transition-all duration-300 ${errorMessage && 'border-error'}`}
+				/>
+				<Button
+					size="md"
+					isPrimary={true}
+					disabled={!password}
+					onClick={() => {
+						if (folderPassword === password) {
+							onConfirm()
+							onClose()
+							setPassword('')
+							setErrorMessage('')
+						} else setErrorMessage(invalidPassword)
+					}}
+					className={
+						'btn btn-circle !w-fit px-4 border-none shadow-none disabled:text-gray-400 rounded-xl transition-colors duration-300 ease-in-out'
+					}
+				>
+					تأیید و ورود
+				</Button>
+			</div>
+			{errorMessage && (
+				<p className="text-error font-semibold text-[13px] font-[Vazir]">
+					{errorMessage}
+				</p>
+			)}
+		</Modal>
+	)
+}
diff --git a/src/layouts/bookmark/types/bookmark.types.ts b/src/layouts/bookmark/types/bookmark.types.ts
index ea5e5389..c96e83d4 100644
--- a/src/layouts/bookmark/types/bookmark.types.ts
+++ b/src/layouts/bookmark/types/bookmark.types.ts
@@ -15,9 +15,11 @@ export interface Bookmark {
 	customTextColor?: string
 	sticker?: string
 	order?: number
+	password?: string
 }
 
 export interface FolderPathItem {
 	id: string
 	title: string
+	password?: string;
 }

From 3f9ec0cba8f39d833d27c30917fb1219741523d6 Mon Sep 17 00:00:00 2001
From: erfan-goodarzi <devgoodarzi@gmail.com>
Date: Wed, 16 Jul 2025 16:32:05 +0330
Subject: [PATCH 3/3] feat: add pasword input to edit folder modal

---
 .../components/modal/edit-bookmark.modal.tsx   | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/layouts/bookmark/components/modal/edit-bookmark.modal.tsx b/src/layouts/bookmark/components/modal/edit-bookmark.modal.tsx
index d26e2f6e..dfb38174 100644
--- a/src/layouts/bookmark/components/modal/edit-bookmark.modal.tsx
+++ b/src/layouts/bookmark/components/modal/edit-bookmark.modal.tsx
@@ -35,6 +35,7 @@ export function EditBookmarkModal({
 		customTextColor: '',
 		sticker: '',
 		touched: false,
+		password: '',
 	})
 
 	const [iconSource, setIconSource] = useState<IconSourceType>('auto')
@@ -64,6 +65,7 @@ export function EditBookmarkModal({
 				customTextColor: bookmark.customTextColor || '',
 				sticker: bookmark.sticker || '',
 				touched: false,
+				password: bookmark.password,
 			})
 
 			setIconSource(bookmark.customImage ? 'upload' : 'auto')
@@ -101,6 +103,7 @@ export function EditBookmarkModal({
 				customBackground: formData.customBackground || undefined,
 				customTextColor: formData.customTextColor || undefined,
 				sticker: formData.sticker || undefined,
+				password: formData.password || undefined,
 			}
 
 			if (type === 'BOOKMARK') {
@@ -190,6 +193,21 @@ export function EditBookmarkModal({
 						}
 					/>
 
+					{type === 'FOLDER' && (
+						<div className="relative h-[50px]">
+							<TextInput
+								type="password"
+								name="password"
+								placeholder="رمز عبور (اختیاری)"
+								value={formData.password ?? ''}
+								onChange={(v) => updateFormData('password', v)}
+								className={
+									'mt-2 w-full px-4 py-3 text-right absolute rounded-lg transition-all duration-300'
+								}
+							/>
+						</div>
+					)}
+
 					<div className="relative h-[50px]">
 						{type === 'BOOKMARK' && (
 							<TextInput