From 9e64c2cccf0570bd6f662c91760f9e8c196a412d Mon Sep 17 00:00:00 2001
From: KevIsDev <zennerd404@gmail.com>
Date: Mon, 2 Jun 2025 11:12:33 +0100
Subject: [PATCH] feat: add frosted glass feature option

- Add 'Frosted Glass' to design features list in design-scheme.ts
- Implement visual styling for frosted glass feature in ColorSchemeDialog
- Adjust sidebar button margin in Workbench for better spacing
---
 app/components/ui/ColorSchemeDialog.tsx       | 14 ++++++++++++++
 app/components/workbench/Workbench.client.tsx |  4 ++--
 app/types/design-scheme.ts                    |  1 +
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/components/ui/ColorSchemeDialog.tsx b/app/components/ui/ColorSchemeDialog.tsx
index 58d181dc..674edc57 100644
--- a/app/components/ui/ColorSchemeDialog.tsx
+++ b/app/components/ui/ColorSchemeDialog.tsx
@@ -241,6 +241,20 @@ export const ColorSchemeDialog: React.FC<ColorSchemeDialogProps> = ({ setDesignS
                         />
                       </div>
                     )}
+                    {f.key === 'frosted-glass' && (
+                      <div className="relative">
+                        <div
+                          className={`w-6 h-6 rounded-lg transition-all duration-200 backdrop-blur-sm bg-white/20 border border-white/30 ${
+                            isSelected ? 'opacity-90' : 'opacity-70'
+                          }`}
+                        />
+                        <div
+                          className={`absolute inset-0 w-6 h-6 rounded-lg transition-all duration-200 backdrop-blur-md bg-gradient-to-br from-white/10 to-transparent ${
+                            isSelected ? 'opacity-60' : 'opacity-40'
+                          }`}
+                        />
+                      </div>
+                    )}
                   </div>
 
                   <div className="text-center">
diff --git a/app/components/workbench/Workbench.client.tsx b/app/components/workbench/Workbench.client.tsx
index 429f87d6..084611d6 100644
--- a/app/components/workbench/Workbench.client.tsx
+++ b/app/components/workbench/Workbench.client.tsx
@@ -388,8 +388,8 @@ export const Workbench = memo(
               <div className="h-full flex flex-col bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor shadow-sm rounded-lg overflow-hidden">
                 <div className="flex items-center px-3 py-2 border-b border-bolt-elements-borderColor gap-1.5">
                   <button
-                    className={`${showChat ? 'i-ph:sidebar-simple-fill' : 'i-ph:sidebar-simple'} text-lg text-bolt-elements-textSecondary`}
-                    disabled={!canHideChat || isSmallViewport} // expand button is disabled on mobile as it's not needed
+                    className={`${showChat ? 'i-ph:sidebar-simple-fill' : 'i-ph:sidebar-simple'} text-lg text-bolt-elements-textSecondary mr-1`}
+                    disabled={!canHideChat || isSmallViewport}
                     onClick={() => {
                       if (canHideChat) {
                         chatStore.setKey('showChat', !showChat);
diff --git a/app/types/design-scheme.ts b/app/types/design-scheme.ts
index a37ba97a..2f9587cd 100644
--- a/app/types/design-scheme.ts
+++ b/app/types/design-scheme.ts
@@ -81,6 +81,7 @@ export const designFeatures = [
   { key: 'border', label: 'Subtle Border' },
   { key: 'gradient', label: 'Gradient Accent' },
   { key: 'shadow', label: 'Soft Shadow' },
+  { key: 'frosted-glass', label: 'Frosted Glass' },
 ];
 
 export const designFonts = [