From 6542b7a5ad11489dc971ccf45aba42301348912e Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 16 May 2025 05:33:33 +0000 Subject: [PATCH] Add recent colors section to brand panel Co-Authored-By: kiet@onlook.dev --- .../brand-tab/color-panel/color-popover.tsx | 3 + .../left-panel/brand-tab/index.tsx | 13 + .../components/store/editor/theme/index.ts | 43 ++- apps/web/preload/dist/index.js | 286 +++++++++--------- bun.lockb | Bin 0 -> 675672 bytes packages/constants/src/editor.ts | 2 + 6 files changed, 203 insertions(+), 144 deletions(-) create mode 100755 bun.lockb diff --git a/apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/color-panel/color-popover.tsx b/apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/color-panel/color-popover.tsx index 320c89521c..f494c19f0d 100644 --- a/apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/color-panel/color-popover.tsx +++ b/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); const [editedName, setEditedName] = useState(brandColor); + const editorEngine = useEditorEngine(); const handleColorChange = (newColor: Color) => { setEditedColor(newColor); + editorEngine.theme.addRecentColors(newColor.toHex()); }; const handleNameChange = (newName: string) => { diff --git a/apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/index.tsx b/apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/index.tsx index 83e03a682e..2fc7ef5df7 100644 --- a/apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/index.tsx +++ b/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(() => { +
+
+ Recent Colors +
+ +
+ {recentColors.map((color, index) => ( + + ))} +
+
+