Add shadow to widget

Fixes sajjadmrx#18

Add shadow to the widget similar to MacOS widgets.

* **src/arzChand/app.arzChand.tsx**
  - Add `boxShadow` property to the main container's style to apply a shadow to the entire widget.

* **src/setting/pages/arzChand/arzChand.setting.tsx**
  - Add a `Checkbox` component for enabling/disabling the shadow.
  - Update the `setSettingValue` function to handle the new shadow setting.
  - Update the `applyChanges` function to include the new shadow setting.

* **src/arzChand/component/currency.component.tsx**
  - Add state variables for `isTransparent` and `shadow`.
  - Add a `MutationObserver` to update `isTransparent` state based on body class changes.
  - Add an event listener for `updated-setting` to update the `shadow` state.
  - Apply the shadow setting to the currency items using inline styles.

src/arzChand/app.arzChand.tsx

@@ -103,7 +103,7 @@ function App() {
 
 	return (
 		<div className="moveable h-screen w-screen overflow-hidden">
-			<div className="h-full">
+			<div className="h-full" style={{ boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)' }}>
 				<div className="flex flex-col p-2 h-full  items-center">
 					<div
 						className="flex flex-col items-center w-full px-2  h-64 overflow-y-scroll 

src/arzChand/component/currency.component.tsx

@@ -6,6 +6,13 @@ interface Prop {
 }
 export function CurrencyComponent({ currency }: Prop) {
 	const [imgColor, setImgColor] = useState('')
+	const [isTransparent, setIsTransparent] = useState<boolean>(
+		document.body.classList.contains('transparent-active'),
+	)
+	const [shadow, setShadow] = useState<boolean>(
+		window.store.get('arzChand').shadow,
+	)
+
 	useEffect(() => {
 		function fetchColor() {
 			if (currency?.icon) {
@@ -17,13 +24,33 @@ export function CurrencyComponent({ currency }: Prop) {
 
 		fetchColor()
 
+		const observer = new MutationObserver(() => {
+			setIsTransparent(document.body.classList.contains('transparent-active'))
+		})
+
+		observer.observe(document.body, {
+			attributes: true,
+			attributeFilter: ['class'],
+		})
+
+		window.ipcRenderer.on('updated-setting', () => {
+			const arzChandSetting = window.store.get('arzChand')
+			setShadow(arzChandSetting.shadow)
+		})
+
 		return () => {
 			fetchColor()
+			observer.disconnect()
 		}
 	}, [currency?.icon])
 
 	return (
-		<div className="flex flex-row items-center  justify-around  w-full flex-wrap gap-2">
+		<div
+			className="flex flex-row items-center justify-around w-full flex-wrap gap-2"
+			style={{
+				boxShadow: shadow ? '0 4px 8px rgba(0, 0, 0, 0.2)' : 'none',
+			}}
+		>
 			<div className="flex-1 flex flex-row gap-1 w-52 justify items-end truncate ">
 				<div className="text-[.9rem] flex flex-col text-gray-600 text-gray-trasnparent  dark:text-[#eee] truncate">
 					<div className="flex-1 flex flex-row w-52 items-center justify-end mt-1 p-2 rounded-full truncate ">

src/setting/pages/arzChand/arzChand.setting.tsx

@@ -40,7 +40,7 @@ export function ArzChandSetting() {
 			window.ipcRenderer.send('toggle-transparent', widgetKey.ArzChand)
 		}
 
-		if (!['borderRadius'].includes(key)) {
+		if (!['borderRadius', 'shadow'].includes(key)) {
 			sendEvent({
 				name: `setting_${key}`,
 				value: value,
@@ -50,7 +50,7 @@ export function ArzChandSetting() {
 
 		if (key === 'enable') {
 			window.ipcRenderer.send('toggle-enable', widgetKey.ArzChand)
-		} else if (!['transparentStatus', 'borderRadius'].includes(key)) {
+		} else if (!['transparentStatus', 'borderRadius', 'shadow'].includes(key)) {
 			window.ipcRenderer.send('updated-setting', widgetKey.ArzChand)
 		}
 	}
@@ -64,6 +64,7 @@ export function ArzChandSetting() {
 			bounds: window.store.get(widgetKey.ArzChand).bounds,
 			currencies: setting.currencies,
 			borderRadius: setting.borderRadius,
+			shadow: setting.shadow,
 		})
 	}
 
@@ -154,6 +155,28 @@ export function ArzChandSetting() {
 								className: 'flex',
 							}}
 						/>
+						<Checkbox
+							ripple={true}
+							defaultChecked={setting.shadow}
+							onClick={() =>
+								setSettingValue('shadow', !setting.shadow)
+							}
+							label={
+								<div>
+									<Typography
+										variant={'h5'}
+										color="blue-gray"
+										className="dark:text-[#c7c7c7] text-gray-600 text-[13px] font-[Vazir]"
+									>
+										سایه{' '}
+										<span className="font-light">(افزودن سایه به ویجت)</span>
+									</Typography>
+								</div>
+							}
+							containerProps={{
+								className: 'flex',
+							}}
+						/>
 					</div>
 					<div className="flex flex-col justify-between w-full ">
 						<label