Refactor/bookmark type selector

src/icons/packs/default.tsx

@@ -73,6 +73,7 @@ import {
 	TbNotebook,
 	TbArrowsRightLeft,
 	TbCloudUpload,
+	TbBookmark,
 } from 'react-icons/tb'
 import {
 	MdDragIndicator,
@@ -89,6 +90,7 @@ import {
 	MdSearch,
 } from 'react-icons/md'
 import {
+	HiBookmark,
 	HiHome,
 	HiOutlineBookmark,
 	HiOutlineCurrencyBangladeshi,
@@ -250,4 +252,8 @@ export const defaultIcons = {
 	advanced_ui: LuLayers,
 	simple_ui: LuLayoutTemplate,
 	arrowRightLeft: TbArrowsRightLeft,
+	bookmark: HiBookmark,
 } satisfies IconMap
+
+
+

src/icons/types.ts

@@ -129,4 +129,5 @@ export type IconName =
 	| 'advanced_ui'
 	| 'simple_ui'
 	| 'arrowRightLeft'
+	| 'bookmark'
 export type IconMap = Record<IconName, IconType>

src/layouts/bookmark/components/bookmark-icon.picker.tsx

@@ -71,7 +71,7 @@ export function BookmarkIconPicker({ value, url, onChange }: Props) {
 				}}
 				onDragLeave={() => setIsDragging(false)}
 				onDrop={handleDrop}
-				className={`relative w-12 h-12 flex items-center justify-center cursor-pointer border-2 rounded-xl transition
+				className={`relative w-12 h-10 flex items-center justify-center cursor-pointer border-2 rounded-xl transition
 					${isDragging ? 'border-blue-400' : 'border-base-300'}
 				`}
 			>

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

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Button } from '@/components/button/button'
 import Modal from '@/components/modal'
 import { TextInput } from '@/components/text-input'
@@ -181,45 +181,41 @@ export function AddBookmarkModal({
 				<div className="mt-1 overflow-hidden">
 					<TypeSelector type={type} setType={setType} />
 
-					<div className="py-2 overflow-auto">
-						<div
-							className={`mb-0.5 flex flex-row  w-full items-center gap-y-2.5 justify-center
-							`}
-						>
-							<BookmarkIconPicker
-								onChange={(value) => updateFormData('icon', value)}
-								value={formData.icon}
-								url={formData.url}
-							/>
-						</div>
+					<div className="flex items-center gap-2 mt-2">
 						<TextInput
 							type="text"
 							name="title"
 							placeholder={type === 'FOLDER' ? 'نام پوشه' : 'عنوان بوکمارک'}
 							value={formData.title}
 							onChange={(v) => updateFormData('title', v)}
 							className={
-								'mt-2 w-full px-4 py-3 text-right rounded-lg transition-all duration-200 '
+								'w-full px-4 py-3 text-right rounded-lg transition-all duration-200 '
 							}
 						/>
-						<div className="relative h-12.5">
-							{type === 'BOOKMARK' && (
-								<TextInput
-									type="text"
-									name="url"
-									placeholder="آدرس لینک"
-									value={formData.url || ''}
-									onChange={(v) => handleUrlChange(v)}
-									className={
-										'mt-2 w-full px-4 py-3 text-right absolute rounded-lg transition-all duration-300'
-									}
-								/>
-							)}
-						</div>
+
+						<BookmarkIconPicker
+							onChange={(value) => updateFormData('icon', value)}
+							value={formData.icon}
+							url={formData.url}
+						/>
+					</div>
+					<div className="relative h-12.5">
 						{type === 'BOOKMARK' && (
-							<BookmarkSuggestions onSelect={handleSuggestionSelect} />
+							<TextInput
+								type="text"
+								name="url"
+								placeholder="آدرس لینک"
+								value={formData.url || ''}
+								onChange={(v) => handleUrlChange(v)}
+								className={
+									'mt-2 w-full px-4 py-3 text-right absolute rounded-lg transition-all duration-300'
+								}
+							/>
 						)}
 					</div>
+					{type === 'BOOKMARK' && (
+						<BookmarkSuggestions onSelect={handleSuggestionSelect} />
+					)}
 
 					<AdvancedModal
 						bookmark={formData}

src/layouts/bookmark/components/shared.tsx

@@ -1,5 +1,5 @@
+import { ItemSelector } from '@/components/item-selector'
 import type { BookmarkType } from '../types/bookmark.types'
-import { TabNavigation } from '@/components/tab-navigation'
 import { Icon } from '@/src/icons'
 
 export type IconSourceType = 'auto' | 'upload' | 'url'
@@ -12,25 +12,36 @@ export function TypeSelector({
 	setType: (type: BookmarkType) => void
 }) {
 	return (
-		<TabNavigation<BookmarkType>
-			className="w-full! border-none! h-12"
-			tabMode="simple"
-			size="medium"
-			tabs={[
-				{
-					id: 'BOOKMARK',
-					label: 'بوکمارک',
-					icon: <Icon name="outlineBookmark" size={14} />,
-				},
-				{
-					id: 'FOLDER',
-					label: 'پوشه',
-					icon: <Icon name="outlineFolder" size={14} />,
-				},
-			]}
-			activeTab={type}
-			onTabClick={(tab) => setType(tab)}
-		/>
+		<div className="grid grid-cols-2 gap-2">
+			<ItemSelector
+				isActive={type === 'BOOKMARK'}
+				onClick={() => setType('BOOKMARK')}
+				label={
+					<div
+						className={`flex items-center gap-1 ${type === 'BOOKMARK' ? 'text-primary' : 'text-muted'}`}
+					>
+						<Icon name="bookmark" />
+						بوکمارک
+					</div>
+				}
+				className="p-2! h-14!"
+				description={'ذخیره یک لینک یا وب‌سایت'}
+			/>
+			<ItemSelector
+				isActive={type === 'FOLDER'}
+				onClick={() => setType('FOLDER')}
+				label={
+					<div
+						className={`flex items-center gap-1 ${type === 'FOLDER' ? 'text-primary' : 'text-muted'}`}
+					>
+						<Icon name="folder" />
+						پوشه
+					</div>
+				}
+				className="p-2! h-14!"
+				description={'دسته‌بندی و مرتب‌سازی بوکمارک‌ها'}
+			/>
+		</div>
 	)
 }
 

src/layouts/setting/tabs/account/components/modals/add-phone.modal.tsx

@@ -119,7 +119,7 @@ export function AddPhoneModal(prop: AddPhoneProp) {
 							disabled={isPending || step === 'enter-otp'}
 							className="w-full py-2.5! md:py-3.5!"
 							autoComplete="on"
-							direction="ltr"
+							direction={phone ? 'auto' : 'rtl'}
 						/>
 						<InputTextError message={error.phone} />
 					</div>