Feat/cn helper

.github/workflows/pull.yml

@@ -24,6 +24,9 @@ jobs:
       - name: Install dependencies
         run: bun install
 
+      - name: Generate WXT types
+        run: bunx wxt prepare
+
       - name: Build files
         run: bun compile
 

.github/workflows/push.yml

@@ -21,6 +21,9 @@ jobs:
       - name: Install dependencies
         run: bun install
 
+      - name: Generate WXT types
+        run: bunx wxt prepare
+
       - name: Build files
         run: bun compile
 

.gitignore

@@ -31,4 +31,5 @@ dev
 local_output
 diff.txt
 
-docs/*
+docs/*
+.claude

package.json

@@ -26,6 +26,8 @@
     "axios": "1.18.0",
     "canvas-confetti": "1.9.4",
     "chart.js": "4.5.1",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
     "framer-motion": "12.40.0",
     "jalali-moment": "3.3.11",
     "moment": "2.30.1",

src/common/utils/cn.ts

@@ -0,0 +1,36 @@
+import { type ClassValue, clsx } from 'clsx'
+import { extendTailwindMerge } from 'tailwind-merge'
+
+const twMerge = extendTailwindMerge<'wg-backdrop'>({
+	extend: {
+		classGroups: {
+			'wg-backdrop': ['bg-glass'],
+
+			'bg-color': ['bg-widget', 'bg-content', 'bg-raised'],
+			'text-color': ['text-strong', 'text-content', 'text-muted', 'text-subtle'],
+			'border-color': ['border-content', 'border-strong'],
+
+			rounded: ['rounded-widget', 'rounded-card'],
+			shadow: ['elevation-sm', 'elevation', 'elevation-lg'],
+			transition: ['transition-ui'],
+			'outline-style': ['focus-ring'],
+			z: [
+				'z-base',
+				'z-raised',
+				'z-sticky',
+				'z-drag',
+				'z-nav',
+				'z-backdrop',
+				'z-sheet',
+				'z-modal',
+				'z-popover',
+				'z-toast',
+				'z-pet',
+			],
+		},
+	},
+})
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs))
+}

src/common/utils/translate-error.ts

@@ -114,6 +114,7 @@ const errorTranslations: Record<string, string> = {
 	FOLDER_STRUCTURE_TOO_DEEP: 'FOLDER_STRUCTURE_TOO_DEEP',
 	BULK_IMPORT_LIMIT_EXCEEDED: `تعداد آیتم درون‌ریزی بیش‌از حد هست`,
 	NO_VALID_ITEMS_TO_IMPORT: 'هیچ آیتم معتبری برای درون‌ریزی وجود نداره',
+	BIRTHDATE_CANNOT_BE_CHANGED: 'به تازگی تاریخ تولدت رو عوض کردی!',
 }
 
 const validationTranslations: Record<string, string> = {

src/components/auth/auth-required-modal.tsx

@@ -1,6 +1,6 @@
 import { callEvent } from '@/common/utils/call-event'
-import Modal from '@/components/modal'
-import { Button } from '../button/button'
+import { Modal } from '@/components/ui'
+import { Button } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface AuthRequiredModalProps {
@@ -35,7 +35,7 @@ export function AuthRequiredModal({
 			closeOnBackdropClick={true}
 		>
 			<div className="flex flex-col items-center justify-between w-full text-center h-62">
-				<div className="relative flex items-center justify-center w-16 h-16 mt-8 rounded-full bg-blue-500/10">
+				<div className="relative flex items-center justify-center w-16 h-16 mt-8 rounded-full bg-primary/10">
 					<div
 						className="absolute inset-0 rounded-full bg-primary/5 animate-ping"
 						style={{ animationDuration: '2s' }}
@@ -52,15 +52,16 @@ export function AuthRequiredModal({
 					<Button
 						onClick={triggerAccountTabDisplay}
 						size="md"
-						isPrimary={true}
+						variant="primary"
 						className={`flex-1 border-none rounded-2xl text-xs w-full`}
 					>
 						{loginButtonText}
 					</Button>
 					<Button
 						onClick={onClose}
 						size="md"
-						className="w-32 border border-content text-content hover:bg-base-300/50 rounded-2xl"
+						variant="outline"
+						className="w-32 rounded-2xl"
 					>
 						{cancelButtonText}
 					</Button>

src/components/auth/require-auth.tsx

@@ -2,7 +2,7 @@ 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'
-import { Button } from '../button/button'
+import { Button } from '@/components/ui'
 
 interface RequireAuthProps {
 	children: ReactNode
@@ -49,8 +49,8 @@ export const RequireAuth = ({ children, fallback, mode = 'block' }: RequireAuthP
 						<Button
 							onClick={handleAuthClick}
 							size="sm"
-							isPrimary={true}
-							className="btn mt-2 !w-fit px-6 border-none shadow-none text-white rounded-3xl transition-colors duration-300 ease-in-out"
+							variant="primary"
+							className="mt-2 w-fit px-6 border-none shadow-none rounded-3xl"
 						>
 							ورود به حساب
 						</Button>
@@ -76,8 +76,8 @@ export const RequireAuth = ({ children, fallback, mode = 'block' }: RequireAuthP
 				<Button
 					onClick={handleAuthClick}
 					size="sm"
-					isPrimary={true}
-					className="btn mt-2 !w-fit px-6 border-none shadow-none text-white rounded-3xl transition-colors duration-300 ease-in-out"
+					variant="primary"
+					className="mt-2 w-fit px-6 border-none shadow-none rounded-3xl"
 				>
 					ورود به حساب
 				</Button>

src/components/auth/require-verification.tsx

@@ -2,7 +2,7 @@ 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'
-import { Button } from '../button/button'
+import { Button } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface RequireVerificationProps {

src/components/blur-mode/blur-mode.button.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react'
 import { useGeneralSetting } from '@/context/general-setting.context'
-import Tooltip from '../tool-tip'
+import { Tooltip } from '@/components/ui'
 import { Icon } from '@/src/icons'
-import { ConfirmationModal } from '../modal/confirmation-modal'
+import { ConfirmationModal } from '@/components/ui'
 import Analytics from '@/analytics'
 
 export function BlurModeButton() {

src/components/extension-installed-modal.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react'
 import keepItImage from '@/assets/images/keep-it.png'
-import { Button } from './button/button'
-import Checkbox from './checkbox'
-import Modal from './modal'
+import { Button } from './ui'
+import { Checkbox } from '@/components/ui'
+import { Modal } from '@/components/ui'
 import { Icon } from '../icons'
 
 interface ExtensionInstalledModalProps {
@@ -72,7 +72,7 @@ const StepOne = ({ onGetStarted }: StepOneProps) => {
 				size="md"
 				onClick={onGetStarted}
 				className="w-full text-base font-light shadow-sm rounded-2xl shadow-primary outline-none!"
-				isPrimary={true}
+				variant="primary"
 			>
 				شروع کنید
 			</Button>
@@ -158,14 +158,16 @@ const StepFirefoxConsent = ({ onGetStarted }: StepFirefoxConsentProps) => {
 				<Button
 					onClick={handleDecline}
 					size="md"
-					className="flex items-center justify-center w-40 btn btn-error rounded-xl"
+					variant="danger"
+					className="flex items-center justify-center w-40 rounded-xl"
 				>
 					🚫 حذف افزونه
 				</Button>
 				<Button
 					onClick={handleConfirm}
 					size="md"
-					className="w-40 btn btn-success rounded-xl"
+					variant="success"
+					className="w-40 rounded-xl"
 				>
 					✅ تأیید و ادامه
 				</Button>