Add recent colors section to brand panel

apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/color-panel/color-popover.tsx

@@ -5,6 +5,7 @@ import { toNormalCase, type Color } from '@onlook/utility';
 import { useEffect, useState } from 'react';
 import { ColorNameInput } from './color-name-input';
 import { DEFAULT_COLOR_NAME } from '@onlook/constants';
+import { useEditorEngine } from '@/components/store/editor';
 import { ColorPickerContent } from '../../../editor-bar/inputs/color-picker';
 
 export const ColorPopover = ({
@@ -26,9 +27,11 @@ export const ColorPopover = ({
 }) => {
     const [editedColor, setEditedColor] = useState<Color>(color);
     const [editedName, setEditedName] = useState<string>(brandColor);
+    const editorEngine = useEditorEngine();
 
     const handleColorChange = (newColor: Color) => {
         setEditedColor(newColor);
+        editorEngine.theme.addRecentColors(newColor.toHex());
     };
 
     const handleNameChange = (newName: string) => {

apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/index.tsx

@@ -20,6 +20,7 @@ const ColorSquare = ({ color }: ColorSquareProps) => (
 
 export const BrandTab = observer(() => {
     const editorEngine = useEditorEngine();
+    const recentColors = editorEngine.theme.recentColorList;
 
     useEffect(() => {
         editorEngine.font.scanFonts();
@@ -69,6 +70,18 @@ export const BrandTab = observer(() => {
                     </div>
                 </div>
 
+                <div className="flex flex-col gap-2 mt-4">
+                    <div className="flex justify-between items-center">
+                        <span className="text-sm">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
                     variant="ghost"
                     className="w-full h-10 text-sm text-muted-foreground hover:text-foreground bg-background-secondary hover:bg-background-secondary/70 rounded-lg border border-white/5"

apps/web/client/src/components/store/editor/theme/index.ts

@@ -1,5 +1,5 @@
 import type { ProjectManager } from '@/components/store/project/manager';
-import { DEFAULT_COLOR_NAME } from '@onlook/constants';
+import { DEFAULT_COLOR_NAME, RECENT_COLOR_STORAGE_KEY } from '@onlook/constants';
 import type {
     ClassReplacement,
     ColorUpdate,
@@ -47,12 +47,34 @@ export class ThemeManager {
     private defaultColors: Record<string, TailwindColor[]> = {};
     private configPath: string | null = null;
     private cssPath: string | null = null;
+    private recentColors: string[] = [];
+    private readonly MAX_RECENT_COLORS = 12;
 
     constructor(
         private editorEngine: EditorEngine,
         private projectManager: ProjectManager,
     ) {
         makeAutoObservable(this);
+        this.loadRecentColors();
+    }
+
+    private loadRecentColors() {
+        try {
+            const storedColors = localStorage.getItem(RECENT_COLOR_STORAGE_KEY);
+            if (storedColors) {
+                this.recentColors = JSON.parse(storedColors);
+            }
+        } catch (error) {
+            console.error('Error loading recent colors:', error);
+        }
+    }
+
+    private saveRecentColors() {
+        try {
+            localStorage.setItem(RECENT_COLOR_STORAGE_KEY, JSON.stringify(this.recentColors));
+        } catch (error) {
+            console.error('Error saving recent colors:', error);
+        }
     }
 
     async scanConfig() {
@@ -527,6 +549,8 @@ 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
 
@@ -577,6 +601,7 @@ export class ThemeManager {
             return;
         }
         try {
+            this.addRecentColors(newColor.toHex());
             await this.updateTailwindColorConfig(
                 `${colorFamily}-${index * 100}`,
                 newColor.toHex(),
@@ -1248,8 +1273,24 @@ export class ThemeManager {
         );
     }
 
+    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);
+        }
+
+        this.saveRecentColors();
+    }
+
+    get recentColorList() {
+        return this.recentColors;
+    }
+
     clear() {
         this.brandColors = {};
         this.defaultColors = {};
+        this.saveRecentColors();
     }
 }

packages/constants/src/editor.ts

@@ -70,3 +70,5 @@ export const DefaultSettings = {
 };
 
 export const DEFAULT_COLOR_NAME = 'DEFAULT';
+
+export const RECENT_COLOR_STORAGE_KEY = 'recent-colors';