diff --git a/src/components/ThemeSelector.tsx b/src/components/ThemeSelector.tsx index 4ca9232e..0b6ed5dd 100644 --- a/src/components/ThemeSelector.tsx +++ b/src/components/ThemeSelector.tsx @@ -707,51 +707,57 @@ export function ThemeSelector({ builderOpen, onBuilderOpenChange, builderMode }: // Find the active item across all sections const allItems = [...builtinItems, ...presetItems, ...userThemeItems]; const activeItem = allItems.find((item) => item.isActive); + const activeKey = activeItem?.key; + + // Filter the active item out of My Themes and Presets so it only appears once + const filteredUserThemeItems = userThemeItems.filter((item) => item.key !== activeKey); + const filteredPresetItems = [...builtinItems, ...presetItems].filter((item) => item.key !== activeKey); const gridClass = 'grid grid-cols-2 sidebar:grid-cols-3 gap-3'; return (
- {/* ── Active Theme ── */} - {activeItem && ( -
-

- Active Theme -

-
- - {activeItem.preview} - -
-
- )} - - {/* ── My Themes ── */} - {userThemeItems.length > 0 && ( -
-

- My Themes -

-
- {userThemeItems.map((item) => ( + {/* ── Active Theme + My Themes (shared grid) ── */} + {(activeItem || filteredUserThemeItems.length > 0) && ( +
+ {/* Active Theme */} + {activeItem && ( + <> +

+ Active Theme +

- {item.preview} + {activeItem.preview} - ))} -
+ + )} + + {/* My Themes */} + {filteredUserThemeItems.length > 0 && ( + <> +

+ My Themes +

+ {filteredUserThemeItems.map((item) => ( + + {item.preview} + + ))} + + )}
)} @@ -761,7 +767,7 @@ export function ThemeSelector({ builderOpen, onBuilderOpenChange, builderMode }: Presets
- {[...builtinItems, ...presetItems].map((item) => ( + {filteredPresetItems.map((item) => (