From 25a1a5f7ddb1c8d077dcc63548887a2048840b13 Mon Sep 17 00:00:00 2001
From: Shak <sanshakurt@gmail.com>
Date: Wed, 10 Dec 2025 12:56:35 +0330
Subject: [PATCH 1/3] refactor: add children prop to TabManager for additional
 tab buttons

---
 src/components/tab-manager.tsx | 54 +++++++++++++++++++++-------------
 1 file changed, 33 insertions(+), 21 deletions(-)

diff --git a/src/components/tab-manager.tsx b/src/components/tab-manager.tsx
index 09d34295..610353d7 100644
--- a/src/components/tab-manager.tsx
+++ b/src/components/tab-manager.tsx
@@ -17,6 +17,7 @@ interface TabManagerProps {
 	onTabChange?: (tabValue: string) => void
 	direction?: 'rtl' | 'ltr'
 	tabPosition?: 'top' | 'side'
+	children?: ReactNode // for additional tab buttons at the end of aside (just pass the actual buttons)
 }
 
 export const TabManager = ({
@@ -27,6 +28,7 @@ export const TabManager = ({
 	direction = 'rtl',
 	tabOwner,
 	tabPosition,
+	children,
 }: TabManagerProps) => {
 	const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.value || '')
 	const contentRef = useRef<HTMLDivElement>(null)
@@ -69,28 +71,38 @@ export const TabManager = ({
 			? 'shrink-0 md:overflow-y-auto w-full'
 			: 'md:flex-col md:w-48 shrink-0 md:overflow-y-auto'
 	return (
-		<div dir={direction} className={`flex ${headClass}  overflow-hidden`}>
-			<div
-				className={`flex w-full gap-2 p-2 overflow-x-auto rounded-lg ${contentClass}`}
-			>
-				{tabs.map(({ label, value, icon, isNew }) => (
-					<button
-						key={value}
-						onClick={() => handleTabChange(value)}
-						className={`relative flex items-center gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] ${getTabButtonStyle(activeTab === value)}`}
-					>
-						<span
-							className={`relative ${getTabIconStyle(activeTab === value)}`}
+		<div dir={direction} className={`flex ${headClass}   overflow-hidden`}>
+			<aside className="md:h-full flex justify-between flex-col  overflow-hidden">
+				<div
+					className={`flex w-full gap-2 p-2 overflow-x-auto rounded-lg ${contentClass}`}
+				>
+					{tabs.map(({ label, value, icon, isNew }) => (
+						<button
+							key={value}
+							onClick={() => handleTabChange(value)}
+							className={`relative flex items-center gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] ${getTabButtonStyle(activeTab === value)}`}
 						>
-							{icon}
-							{isNew && (
-								<span className="absolute left-0 z-30 w-2 h-2 duration-200 rounded-full -bottom-1 bg-error animate-ping"></span>
-							)}
-						</span>
-						<span className="text-sm">{label}</span>
-					</button>
-				))}
-			</div>{' '}
+							<span
+								className={`relative ${getTabIconStyle(activeTab === value)}`}
+							>
+								{icon}
+								{isNew && (
+									<span className="absolute left-0 z-30 w-2 h-2 duration-200 rounded-full -bottom-1 bg-error animate-ping"></span>
+								)}
+							</span>
+							<span className="text-sm">{label}</span>
+						</button>
+					))}
+					{children}
+				</div>
+				<div
+					aria-label="bottom tab buttons container"
+					className={`md:flex w-full gap-2 p-2 overflow-x-auto rounded-lg ${contentClass} hidden`}
+				>
+					{children}
+				</div>
+			</aside>
+
 			<div
 				className="relative flex-1 overflow-x-hidden overflow-y-auto rounded-lg"
 				ref={contentRef}

From d2d054cc447b01a22f91571cdf2c4566583aff1b Mon Sep 17 00:00:00 2001
From: Shak <sanshakurt@gmail.com>
Date: Wed, 10 Dec 2025 12:56:43 +0330
Subject: [PATCH 2/3] refactor: adjust button layout in SettingModal for
 improved whitespace management

---
 src/layouts/setting/setting-modal.tsx | 32 ++++++++++++++-------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/layouts/setting/setting-modal.tsx b/src/layouts/setting/setting-modal.tsx
index 541dd6ce..85c8068d 100644
--- a/src/layouts/setting/setting-modal.tsx
+++ b/src/layouts/setting/setting-modal.tsx
@@ -96,22 +96,24 @@ export const SettingModal = ({ isOpen, onClose, selectedTab }: SettingModalProps
 				defaultTab="general"
 				selectedTab={selectedTab}
 				direction="rtl"
-			/>
-			<button
-				className={`relative  items-center hidden md:flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
-				onClick={() => openWidgetSettings()}
-			>
-				<TbApps size={20} className="text-muted" />
-				<span className="text-sm font-light">مدیریت ویجت ها</span>
-				<span className="absolute w-2 h-2 rounded-full right-4 top-2 bg-error animate-pulse"></span>
-			</button>
-			<button
-				className={`relative  items-center hidden md:flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
-				onClick={() => setUpdateModalOpen(true)}
 			>
-				<VscMegaphone size={20} />
-				<span className="text-sm font-light">تغییرات اخیر</span>
-			</button>
+				<button
+					className={`relative  items-center  flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
+					onClick={() => openWidgetSettings()}
+				>
+					<TbApps size={20} className="text-muted" />
+					<span className="text-sm font-light">مدیریت ویجت ها</span>
+					<span className="absolute w-2 h-2 rounded-full right-4 top-2 bg-error animate-pulse"></span>
+				</button>
+				<button
+					className={`relative  items-center flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
+					onClick={() => setUpdateModalOpen(true)}
+				>
+					<VscMegaphone size={20} />
+					<span className="text-sm font-light">تغییرات اخیر</span>
+				</button>
+			</TabManager>
+
 			<UpdateReleaseNotesModal
 				isOpen={isUpdateModalOpen}
 				onClose={() => setUpdateModalOpen(false)}

From 2eb2a6307fa881eb25aa5bba0c40f58d0bcb663e Mon Sep 17 00:00:00 2001
From: sajjad isvand <sajjadzibaee102@gmail.com>
Date: Wed, 10 Dec 2025 15:57:36 +0330
Subject: [PATCH 3/3] refactor: improve button layout and whitespace management
 in TabManager and modals

---
 src/components/tab-manager.tsx                | 44 +++++++++----------
 src/layouts/setting/setting-modal.tsx         | 32 +++++++-------
 .../widget-settings-modal.tsx                 | 19 ++++----
 3 files changed, 47 insertions(+), 48 deletions(-)

diff --git a/src/components/tab-manager.tsx b/src/components/tab-manager.tsx
index 610353d7..aa146e1c 100644
--- a/src/components/tab-manager.tsx
+++ b/src/components/tab-manager.tsx
@@ -72,33 +72,29 @@ export const TabManager = ({
 			: 'md:flex-col md:w-48 shrink-0 md:overflow-y-auto'
 	return (
 		<div dir={direction} className={`flex ${headClass}   overflow-hidden`}>
-			<aside className="md:h-full flex justify-between flex-col  overflow-hidden">
+			<aside className="flex flex-row justify-between overflow-hidden sm:flex-col md:h-full">
 				<div
-					className={`flex w-full gap-2 p-2 overflow-x-auto rounded-lg ${contentClass}`}
+					className={`flex  w-full md:h-full justify-between overflow-x-auto rounded-lg ${contentClass}`}
 				>
-					{tabs.map(({ label, value, icon, isNew }) => (
-						<button
-							key={value}
-							onClick={() => handleTabChange(value)}
-							className={`relative flex items-center gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] ${getTabButtonStyle(activeTab === value)}`}
-						>
-							<span
-								className={`relative ${getTabIconStyle(activeTab === value)}`}
+					<div className="flex flex-row sm:flex-col sm:gap-2">
+						{tabs.map(({ label, value, icon, isNew }) => (
+							<button
+								key={value}
+								onClick={() => handleTabChange(value)}
+								className={`relative flex items-center gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] ${getTabButtonStyle(activeTab === value)}`}
 							>
-								{icon}
-								{isNew && (
-									<span className="absolute left-0 z-30 w-2 h-2 duration-200 rounded-full -bottom-1 bg-error animate-ping"></span>
-								)}
-							</span>
-							<span className="text-sm">{label}</span>
-						</button>
-					))}
-					{children}
-				</div>
-				<div
-					aria-label="bottom tab buttons container"
-					className={`md:flex w-full gap-2 p-2 overflow-x-auto rounded-lg ${contentClass} hidden`}
-				>
+								<span
+									className={`relative ${getTabIconStyle(activeTab === value)}`}
+								>
+									{icon}
+									{isNew && (
+										<span className="absolute left-0 z-30 w-2 h-2 duration-200 rounded-full -bottom-1 bg-error animate-ping"></span>
+									)}
+								</span>
+								<span className="text-sm">{label}</span>
+							</button>
+						))}
+					</div>
 					{children}
 				</div>
 			</aside>
diff --git a/src/layouts/setting/setting-modal.tsx b/src/layouts/setting/setting-modal.tsx
index 85c8068d..5f1a0721 100644
--- a/src/layouts/setting/setting-modal.tsx
+++ b/src/layouts/setting/setting-modal.tsx
@@ -97,21 +97,23 @@ export const SettingModal = ({ isOpen, onClose, selectedTab }: SettingModalProps
 				selectedTab={selectedTab}
 				direction="rtl"
 			>
-				<button
-					className={`relative  items-center  flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
-					onClick={() => openWidgetSettings()}
-				>
-					<TbApps size={20} className="text-muted" />
-					<span className="text-sm font-light">مدیریت ویجت ها</span>
-					<span className="absolute w-2 h-2 rounded-full right-4 top-2 bg-error animate-pulse"></span>
-				</button>
-				<button
-					className={`relative  items-center flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
-					onClick={() => setUpdateModalOpen(true)}
-				>
-					<VscMegaphone size={20} />
-					<span className="text-sm font-light">تغییرات اخیر</span>
-				</button>
+				<div className="flex flex-row gap-1 sm:flex-col">
+					<button
+						className={`relative items-center  flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
+						onClick={() => openWidgetSettings()}
+					>
+						<TbApps size={20} className="text-muted" />
+						<span className="text-sm font-light">مدیریت ویجت ها</span>
+						<span className="absolute w-2 h-2 rounded-full right-4 top-2 bg-error animate-pulse"></span>
+					</button>
+					<button
+						className={`relative  items-center flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
+						onClick={() => setUpdateModalOpen(true)}
+					>
+						<VscMegaphone size={20} />
+						<span className="text-sm font-light">تغییرات اخیر</span>
+					</button>
+				</div>
 			</TabManager>
 
 			<UpdateReleaseNotesModal
diff --git a/src/layouts/widgets-settings/widget-settings-modal.tsx b/src/layouts/widgets-settings/widget-settings-modal.tsx
index 3492804d..6453be6a 100644
--- a/src/layouts/widgets-settings/widget-settings-modal.tsx
+++ b/src/layouts/widgets-settings/widget-settings-modal.tsx
@@ -89,16 +89,17 @@ export function WidgetSettingsModal({
 				tabOwner="widgets-settings"
 				defaultTab={selectedTab || WidgetTabKeys.widget_management}
 				direction="rtl"
-			/>
-			<button
-				className={`relative  items-center hidden md:flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
-				onClick={() => {
-					onClickSettings()
-				}}
 			>
-				<VscSettings size={20} className="text-muted" />
-				<span className="text-sm font-light">تنظیمات</span>
-			</button>
+				<button
+					className={`relative  items-center flex gap-3 px-4 py-3 rounded-full transition-all duration-200 ease-in-out justify-start cursor-pointer whitespace-nowrap active:scale-[0.98] text-muted hover:bg-base-300 w-42`}
+					onClick={() => {
+						onClickSettings()
+					}}
+				>
+					<VscSettings size={20} className="text-muted" />
+					<span className="text-sm font-light">تنظیمات</span>
+				</button>
+			</TabManager>
 		</Modal>
 	)
 }