feat: add new content indicator for wallpaper categories

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)
 }

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>
 	)
 }

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>

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)}
 					/>
 				))}