Added recent used colors in the brand panel

apps/studio/src/lib/editor/engine/theme/index.ts

@@ -21,6 +21,8 @@ export class ThemeManager {
     private defaultColors: Record<string, ColorItem[]> = {};
     private configPath: string | null = null;
     private cssPath: string | null = null;
+    private recentColors: string[] = [];
+    private readonly MAX_RECENT_COLORS = 12;
 
     constructor(
         private editorEngine: EditorEngine,
@@ -361,6 +363,7 @@ export class ThemeManager {
 
             const originalKey = this.brandColors[originalGroupName]?.[index]?.originalKey || '';
 
+            this.addRecentColors(newColor.toHex());
             // If is selected element, update the color in real-time
             // Base on the class name, find the styles to update
 
@@ -379,7 +382,7 @@ export class ThemeManager {
                 this.scanConfig();
 
                 // Force a theme refresh for all frames
-                await this.editorEngine.webviews.reloadWebviews();
+                this.editorEngine.webviews.reloadWebviews();
             }
         } catch (error) {
             console.error('Error updating color:', error);
@@ -418,6 +421,8 @@ export class ThemeManager {
         }
 
         try {
+            this.addRecentColors(newColor.toHex());
+
             await invokeMainChannel(MainChannels.UPDATE_TAILWIND_CONFIG, {
                 projectRoot,
                 originalKey: `${colorFamily}-${index * 100}`,
@@ -506,6 +511,10 @@ export class ThemeManager {
         return this.cssPath;
     }
 
+    get recentColorList() {
+        return this.recentColors;
+    }
+
     getColorByName(colorName: string): string | undefined {
         const [groupName, shadeName] = colorName.split('-');
 
@@ -535,6 +544,15 @@ export class ThemeManager {
         return undefined;
     }
 
+    addRecentColors(color: string) {
+        this.recentColors = this.recentColors.filter((c) => c !== color);
+        this.recentColors.unshift(color);
+
+        if (this.recentColors.length > this.MAX_RECENT_COLORS) {
+            this.recentColors = this.recentColors.slice(0, this.MAX_RECENT_COLORS);
+        }
+    }
+
     dispose() {
         this.brandColors = {};
         this.defaultColors = {};

apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/ColorBrandPicker.tsx

@@ -125,6 +125,7 @@ export const BrandPopoverPicker = memo(
 
         const handleColorSelect = (color: ColorItem) => {
             onChangeEnd?.(color);
+            editorEngine.theme.addRecentColors(color.lightColor);
         };
 
         useEffect(() => {

apps/studio/src/routes/editor/LayersPanel/BrandTab/index.tsx

@@ -28,6 +28,7 @@ const FontVariant = ({ name, isActive = false }: FontVariantProps) => (
 
 const BrandTab = observer(() => {
     const editorEngine = useEditorEngine();
+    const recentColors = editorEngine.theme.recentColorList;
 
     // Sample colors for the brand palette
     const brandColors = [
@@ -71,6 +72,16 @@ const BrandTab = observer(() => {
                             <ColorSquare key={`brand-color-${index}`} color={color} />
                         ))}
                     </div>
+
+                    <div className="flex justify-between items-center">
+                        <span className="text-base font-normal">Recent Colors</span>
+                    </div>
+
+                    <div className="grid grid-cols-6 gap-1">
+                        {recentColors.map((color, index) => (
+                            <ColorSquare key={`recent-color-${index}`} color={color} />
+                        ))}
+                    </div>
                 </div>
 
                 <Button