From a4f6575bb69e46f8415ab4aac6b1e6ca0ced2e9f Mon Sep 17 00:00:00 2001
From: sajjad isvand <sajjadzibaee102@gmail.com>
Date: Mon, 27 Jul 2026 03:22:44 +0330
Subject: [PATCH] feat: add new content indicator for wallpaper categories

---
 src/common/wallpaper.interface.ts                          | 1 +
 src/components/badges/new.badge.tsx                        | 2 +-
 .../components/category/category-folder.component.tsx      | 7 ++++++-
 .../tab/gallery/components/category/category-view.tsx      | 1 +
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/common/wallpaper.interface.ts b/src/common/wallpaper.interface.ts
index 3e293454..950d0b08 100644
--- a/src/common/wallpaper.interface.ts
+++ b/src/common/wallpaper.interface.ts
@@ -39,5 +39,6 @@ export interface Category {
 	slug: string
 	createdAt: string
 	updatedAt: string
+	hasNewContent: boolean
 	wallpapers?: Wallpaper[] // just last 4 wallpapers for preview (images only)
 }
diff --git a/src/components/badges/new.badge.tsx b/src/components/badges/new.badge.tsx
index 90e8c437..7ff24ffa 100644
--- a/src/components/badges/new.badge.tsx
+++ b/src/components/badges/new.badge.tsx
@@ -4,7 +4,7 @@ interface Prop {
 export function NewBadge({ className }: Prop) {
 	return (
 		<span
-			className={`absolute w-2 h-2 rounded-full ${className} bg-error animate-pulse`}
+			className={`absolute w-2 h-2 rounded-full ${className} bg-error animate-pulse ring-2 ring-error/20`}
 		></span>
 	)
 }
diff --git a/src/layouts/setting/tabs/wallpapers/tab/gallery/components/category/category-folder.component.tsx b/src/layouts/setting/tabs/wallpapers/tab/gallery/components/category/category-folder.component.tsx
index 86a6744b..bf2e9a42 100644
--- a/src/layouts/setting/tabs/wallpapers/tab/gallery/components/category/category-folder.component.tsx
+++ b/src/layouts/setting/tabs/wallpapers/tab/gallery/components/category/category-folder.component.tsx
@@ -1,9 +1,11 @@
+import { NewBadge } from '@/components/badges/new.badge'
 import { Icon } from '@/src/icons'
 
 interface CategoryFolderProps {
 	id: string
 	name: string
 	previewImages: any[]
+	hasNewContent: boolean
 	onSelect: (categoryId: string) => void
 }
 
@@ -12,12 +14,15 @@ export function CategoryFolder({
 	name,
 	previewImages,
 	onSelect,
+	hasNewContent,
 }: CategoryFolderProps) {
 	return (
 		<div
 			onClick={() => onSelect(id)}
-			className="flex flex-col h-32 px-2 py-1 transition-all border cursor-pointer rounded-2xl bg-content border-content max-h-32 hover:border-primary/20! active:scale-98"
+			className="flex flex-col h-32 px-2 py-1 transition-all border cursor-pointer rounded-2xl bg-content border-content max-h-32 hover:border-primary/20! active:scale-98 relative"
 		>
+			{hasNewContent ? <NewBadge className="top-2 left-2" /> : null}
+
 			<div className="flex items-center gap-2 mb-2">
 				<Icon name="folder" className="text-base-content/10" size={12} />
 				<p className="font-medium truncate text-muted">{name}</p>
diff --git a/src/layouts/setting/tabs/wallpapers/tab/gallery/components/category/category-view.tsx b/src/layouts/setting/tabs/wallpapers/tab/gallery/components/category/category-view.tsx
index d9fc9cdf..59820318 100644
--- a/src/layouts/setting/tabs/wallpapers/tab/gallery/components/category/category-view.tsx
+++ b/src/layouts/setting/tabs/wallpapers/tab/gallery/components/category/category-view.tsx
@@ -72,6 +72,7 @@ export function CategoryView({ onCategorySelect }: CategoryGridProps) {
 						id={category.id}
 						name={category.name}
 						previewImages={category.wallpapers || []}
+						hasNewContent={category.hasNewContent}
 						onSelect={() => onCategorySelect(category)}
 					/>
 				))}