From b96c789ef7506d65a3136888a76d8ad29cbfc292 Mon Sep 17 00:00:00 2001 From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com> Date: Sun, 17 May 2026 12:07:15 +0600 Subject: [PATCH 01/10] Align tool editors with svg-line-draw style sidebars --- components/view/background-snippets/index.tsx | 13 +++++++++++-- components/view/mesh-gradient/index.tsx | 3 ++- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/components/view/background-snippets/index.tsx b/components/view/background-snippets/index.tsx index d582e61..e90fe3f 100644 --- a/components/view/background-snippets/index.tsx +++ b/components/view/background-snippets/index.tsx @@ -2,12 +2,13 @@ import { useState } from "react"; +import { Button } from "@/components/ui/button"; import { ScrollArea } from "@/components/ui/scroll-area"; import { Switch } from "@/components/ui/switch"; import { useMediaQuery } from "@/components/ui/use-media-query"; import { useGradientStops } from "@/hooks/use-gradient-stops"; import { cn } from "@/lib/utils"; -import { ChevronsDown } from "lucide-react"; +import { Bookmark, ChevronsDown, PanelsTopLeft, Settings2 } from "lucide-react"; import { CodeDisplay } from "./code-output/code-display"; import { getFullCode } from "./code-output/code-generator"; import { ColorPickerPopover } from "./color-pickers/color-picker-popover"; @@ -62,6 +63,7 @@ export default function BackgroundPatternGenerator() { const [activePresetId, setActivePresetId] = useState( undefined, ); + const [activeSidebarTab, setActiveSidebarTab] = useState<"presets" | "settings" | "saved">("settings"); const [gradientPositionX, setGradientPositionX] = useState(30); const [gradientPositionY, setGradientPositionY] = useState(10); @@ -281,7 +283,14 @@ export default function BackgroundPatternGenerator() { {!isMobile && (
-
+
+ {[{ key: "presets", icon: PanelsTopLeft }, { key: "settings", icon: Settings2 }, { key: "saved", icon: Bookmark }].map(({ key, icon: Icon }) => ( + + ))} +
+ {activeSidebarTab === "settings" &&
(defaultSettings); const [selectedExample, setSelectedExample] = useState(""); + const [activeSidebarTab, setActiveSidebarTab] = useState<"presets" | "settings" | "saved">("presets"); const updateSettings = ( newSettings: Partial, ): void => { From e8c0dc6fc971e98a4505dd32fa7630c6e4e778ad Mon Sep 17 00:00:00 2001 From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com> Date: Sun, 17 May 2026 12:10:29 +0600 Subject: [PATCH 02/10] Fix background snippets sidebar JSX parse error --- components/view/background-snippets/index.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/components/view/background-snippets/index.tsx b/components/view/background-snippets/index.tsx index e90fe3f..5ca1e5c 100644 --- a/components/view/background-snippets/index.tsx +++ b/components/view/background-snippets/index.tsx @@ -347,8 +347,8 @@ export default function BackgroundPatternGenerator() { maskFade={maskFade} setMaskFade={setMaskFade} /> -
-
+
} + {activeSidebarTab === "settings" &&
-
+
} + {activeSidebarTab === "presets" && ( + + )} + {activeSidebarTab === "saved" && ( +

+ Saved snippets will appear here after save support is added. +

+ )} {/*
*/} From 4e9f1240920a881ac5fb38c0e670b7ccc162595f Mon Sep 17 00:00:00 2001 From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com> Date: Sun, 17 May 2026 12:17:30 +0600 Subject: [PATCH 03/10] Remove mesh gradient top hero and playground shell sidebar --- app/(tools)/mesh-gradients/page.tsx | 16 ++----------- components/view/mesh-gradient/index.tsx | 30 +------------------------ 2 files changed, 3 insertions(+), 43 deletions(-) diff --git a/app/(tools)/mesh-gradients/page.tsx b/app/(tools)/mesh-gradients/page.tsx index 34f9496..b040391 100644 --- a/app/(tools)/mesh-gradients/page.tsx +++ b/app/(tools)/mesh-gradients/page.tsx @@ -2,7 +2,6 @@ import { ShaderGradientGenerator } from "@/components/view/mesh-gradient"; import { siteConfig } from "@/lib/utils"; import type { Metadata } from "next"; import React from "react"; -import { ToolPlaygroundShell } from "@/components/common/tool-playground-shell"; export const metadata: Metadata = { title: "Mesh-Gradient Generator", description: @@ -52,18 +51,7 @@ export const metadata: Metadata = { }; function page() { - return ( - - - - ); + return ; } -export default page; \ No newline at end of file +export default page; diff --git a/components/view/mesh-gradient/index.tsx b/components/view/mesh-gradient/index.tsx index de6b745..9e9429a 100644 --- a/components/view/mesh-gradient/index.tsx +++ b/components/view/mesh-gradient/index.tsx @@ -2,7 +2,6 @@ import { Button } from "@/components/ui/button"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; -import { Switch } from "@/components/ui/switch"; import { useMediaQuery } from "@/components/ui/use-media-query"; import { cn } from "@/lib/utils"; import type { @@ -15,7 +14,6 @@ import type { } from "@/types/shader-gradient"; import { ShaderGradientCanvas } from "@shadergradient/react"; import { ShaderGradient } from "@shadergradient/react"; -import { Bookmark, ChevronsDown, PanelsTopLeft, Settings2 } from "lucide-react"; import { type JSX, Suspense, useState } from "react"; import { ControlPanel } from "./control-panel"; import { CopyCode } from "./copy-code"; @@ -256,12 +254,11 @@ const allControls: ControlSections = { export function ShaderGradientGenerator(): JSX.Element { const isMobile = useMediaQuery("(max-width:1024px)"); - const [viewAll, setViewAll] = useState(false); + const [viewAll] = useState(false); const [settings, setSettings] = useState(defaultSettings); const [selectedExample, setSelectedExample] = useState(""); - const [activeSidebarTab, setActiveSidebarTab] = useState<"presets" | "settings" | "saved">("presets"); const updateSettings = ( newSettings: Partial, ): void => { @@ -270,31 +267,6 @@ export function ShaderGradientGenerator(): JSX.Element { return ( <> - -
Date: Sun, 17 May 2026 12:34:42 +0600 Subject: [PATCH 04/10] Remove playground shell and sidebar tabs from background and color pages --- app/(tools)/background-snippets/page.tsx | 16 ++------- app/(tools)/color-lab/page.tsx | 34 ++----------------- components/view/background-snippets/index.tsx | 30 +++------------- 3 files changed, 10 insertions(+), 70 deletions(-) diff --git a/app/(tools)/background-snippets/page.tsx b/app/(tools)/background-snippets/page.tsx index 077a53c..87e8e61 100644 --- a/app/(tools)/background-snippets/page.tsx +++ b/app/(tools)/background-snippets/page.tsx @@ -2,7 +2,6 @@ import BackgroundSnippetsGenerator from "@/components/view/background-snippets"; import { siteConfig } from "@/lib/utils"; import type { Metadata } from "next"; import React from "react"; -import { ToolPlaygroundShell } from "@/components/common/tool-playground-shell"; export const metadata: Metadata = { title: "Background Snippets Generator", description: @@ -57,18 +56,7 @@ export const metadata: Metadata = { }, }; function page() { - return ( - - - - ); + return ; } -export default page; \ No newline at end of file +export default page; diff --git a/app/(tools)/color-lab/page.tsx b/app/(tools)/color-lab/page.tsx index 0a7e766..3a75e95 100644 --- a/app/(tools)/color-lab/page.tsx +++ b/app/(tools)/color-lab/page.tsx @@ -1,9 +1,7 @@ -import ClipPathGenerator from "@/components/view/clip-path"; import ColorConverter from "@/components/view/colors"; import { siteConfig } from "@/lib/utils"; import type { Metadata } from "next"; -import React, { Suspense } from "react"; -import { ToolPlaygroundShell } from "@/components/common/tool-playground-shell"; +import React from "react"; export const metadata: Metadata = { title: "Color Lab – Generate Color Palettes, Convert Codes & Build Shadcn Themes", @@ -69,34 +67,8 @@ export const metadata: Metadata = { creator: "@naymur_dev", }, }; -const PageLoading = () => { - return ( - <> -
-
- {Array.from({ length: 18 }).map((_, index) => ( -
- ))} -
- - ); -}; function page() { - return ( - - - - ); + return ; } -export default page; \ No newline at end of file +export default page; diff --git a/components/view/background-snippets/index.tsx b/components/view/background-snippets/index.tsx index 5ca1e5c..d582e61 100644 --- a/components/view/background-snippets/index.tsx +++ b/components/view/background-snippets/index.tsx @@ -2,13 +2,12 @@ import { useState } from "react"; -import { Button } from "@/components/ui/button"; import { ScrollArea } from "@/components/ui/scroll-area"; import { Switch } from "@/components/ui/switch"; import { useMediaQuery } from "@/components/ui/use-media-query"; import { useGradientStops } from "@/hooks/use-gradient-stops"; import { cn } from "@/lib/utils"; -import { Bookmark, ChevronsDown, PanelsTopLeft, Settings2 } from "lucide-react"; +import { ChevronsDown } from "lucide-react"; import { CodeDisplay } from "./code-output/code-display"; import { getFullCode } from "./code-output/code-generator"; import { ColorPickerPopover } from "./color-pickers/color-picker-popover"; @@ -63,7 +62,6 @@ export default function BackgroundPatternGenerator() { const [activePresetId, setActivePresetId] = useState( undefined, ); - const [activeSidebarTab, setActiveSidebarTab] = useState<"presets" | "settings" | "saved">("settings"); const [gradientPositionX, setGradientPositionX] = useState(30); const [gradientPositionY, setGradientPositionY] = useState(10); @@ -283,14 +281,7 @@ export default function BackgroundPatternGenerator() { {!isMobile && (
-
- {[{ key: "presets", icon: PanelsTopLeft }, { key: "settings", icon: Settings2 }, { key: "saved", icon: Bookmark }].map(({ key, icon: Icon }) => ( - - ))} -
- {activeSidebarTab === "settings" &&
+
-
} - {activeSidebarTab === "settings" &&
+
+
-
} - {activeSidebarTab === "presets" && ( - - )} - {activeSidebarTab === "saved" && ( -

- Saved snippets will appear here after save support is added. -

- )} +
{/*
*/} From 462c92632b5ce281a9b36c5515d7a8619bbcdea4 Mon Sep 17 00:00:00 2001 From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com> Date: Sun, 17 May 2026 12:48:52 +0600 Subject: [PATCH 05/10] Remove top example/hero sections from gradient, background, and color tools --- components/view/background-snippets/index.tsx | 57 +------------------ components/view/colors/index.tsx | 26 +-------- components/view/mesh-gradient/index.tsx | 42 -------------- 3 files changed, 3 insertions(+), 122 deletions(-) diff --git a/components/view/background-snippets/index.tsx b/components/view/background-snippets/index.tsx index d582e61..8db7932 100644 --- a/components/view/background-snippets/index.tsx +++ b/components/view/background-snippets/index.tsx @@ -3,24 +3,20 @@ import { useState } from "react"; import { ScrollArea } from "@/components/ui/scroll-area"; -import { Switch } from "@/components/ui/switch"; import { useMediaQuery } from "@/components/ui/use-media-query"; import { useGradientStops } from "@/hooks/use-gradient-stops"; -import { cn } from "@/lib/utils"; -import { ChevronsDown } from "lucide-react"; import { CodeDisplay } from "./code-output/code-display"; import { getFullCode } from "./code-output/code-generator"; import { ColorPickerPopover } from "./color-pickers/color-picker-popover"; import { GradientControls } from "./gradient-controls/gradient-controls"; import { MaskControls } from "./mask-controls/mask-controls"; import { PatternControls } from "./pattern-controls/pattern-controls"; -import { type IPreset, presets } from "./preset/data"; -import { PresetCard, PresetGallery } from "./preset/preset-gallery"; +import type { IPreset } from "./preset/data"; +import { PresetGallery } from "./preset/preset-gallery"; import { BackgroundPreview } from "./preview/background-preview"; export default function BackgroundPatternGenerator() { const isMobile = useMediaQuery("(max-width:1024px)"); - const [viewAll, setViewAll] = useState(false); const [patternType, setPatternType] = useState("grid"); const [bgColor, setBgColor] = useState("#000000"); @@ -220,55 +216,6 @@ export default function BackgroundPatternGenerator() { return ( <> - - -
- {!viewAll && ( -
- )} - {(viewAll ? presets : presets.slice(0, 10)).map((preset) => ( - - ))} -
{isMobile && (

Please use a desktop/laptop to view the Editor. diff --git a/components/view/colors/index.tsx b/components/view/colors/index.tsx index ff4451b..eefa46e 100644 --- a/components/view/colors/index.tsx +++ b/components/view/colors/index.tsx @@ -29,7 +29,7 @@ import { parseRgba, rgbToHex, } from "@/lib/color-utils"; -import { ChevronsDown, Pipette } from "lucide-react"; +import { Pipette } from "lucide-react"; import { useState } from "react"; import { AllColorFormats } from "./all-color-formats"; import { ColorPaletteSection } from "./color-palette-section"; @@ -301,30 +301,6 @@ export default function ColorConverter() { return ( <>

-
diff --git a/components/view/mesh-gradient/index.tsx b/components/view/mesh-gradient/index.tsx index 9e9429a..69db94f 100644 --- a/components/view/mesh-gradient/index.tsx +++ b/components/view/mesh-gradient/index.tsx @@ -254,8 +254,6 @@ const allControls: ControlSections = { export function ShaderGradientGenerator(): JSX.Element { const isMobile = useMediaQuery("(max-width:1024px)"); - const [viewAll] = useState(false); - const [settings, setSettings] = useState(defaultSettings); const [selectedExample, setSelectedExample] = useState(""); @@ -267,46 +265,6 @@ export function ShaderGradientGenerator(): JSX.Element { return ( <> -
- {!viewAll && ( -
- )} - - {(viewAll ? ExampleGradients : ExampleGradients.slice(0, 10)).map( - (mesh) => ( -
{ - setSelectedExample(mesh.id); - setSettings(mesh?.settings); - }} - onKeyDown={(e) => { - if (e.key === "Enter") { - setSelectedExample(mesh.id); - setSettings(mesh?.settings); - } - }} - > -
- {mesh?.settings?.grain === "on" && ( -
- )} -
-
- ), - )} -
{isMobile && (

Please use a desktop/laptop to view the Editor. From 39698c6161d0e4d7589924d157e8461d3a3f2443 Mon Sep 17 00:00:00 2001 From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com> Date: Sun, 17 May 2026 16:20:54 +0600 Subject: [PATCH 06/10] Adopt svg-line-draw style sidebar layout for mesh gradients and color lab --- components/view/colors/index.tsx | 31 +++++++++++-- components/view/mesh-gradient/index.tsx | 62 ++++++++++++++++--------- 2 files changed, 65 insertions(+), 28 deletions(-) diff --git a/components/view/colors/index.tsx b/components/view/colors/index.tsx index eefa46e..dd97d3b 100644 --- a/components/view/colors/index.tsx +++ b/components/view/colors/index.tsx @@ -30,6 +30,10 @@ import { rgbToHex, } from "@/lib/color-utils"; import { Pipette } from "lucide-react"; +import { Bookmark, PanelsTopLeft, Settings2 } from "lucide-react"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { cn } from "@/lib/utils"; +import { usePathname, useRouter } from "next/navigation"; import { useState } from "react"; import { AllColorFormats } from "./all-color-formats"; import { ColorPaletteSection } from "./color-palette-section"; @@ -40,6 +44,10 @@ import { ThemeGenerator } from "./theme-generator"; export default function ColorConverter() { const [showPalette, setShowPalette] = useState(true); // Show palette by default + const [activeSidebarTab, setActiveSidebarTab] = useState<"presets" | "settings" | "saved">("settings"); + const [isSidebarExpanded, setIsSidebarExpanded] = useState(true); + const pathname = usePathname(); + const router = useRouter(); const { hexValue, @@ -300,9 +308,21 @@ export default function ColorConverter() { return ( <> -

-
-
+
+
+
+
{[{ key: "presets", label: "Presets", icon: PanelsTopLeft }, { key: "settings", label: "Settings", icon: Settings2 }, { key: "saved", label: "Saved", icon: Bookmark }].map((item)=>)}
+ +
+ +
+
{/* Main Color Picker */}
+
+ {/* Theme Generator Section */} +
- {/* Theme Generator Section */} -
diff --git a/components/view/mesh-gradient/index.tsx b/components/view/mesh-gradient/index.tsx index 69db94f..d970dd8 100644 --- a/components/view/mesh-gradient/index.tsx +++ b/components/view/mesh-gradient/index.tsx @@ -2,6 +2,7 @@ import { Button } from "@/components/ui/button"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { useMediaQuery } from "@/components/ui/use-media-query"; import { cn } from "@/lib/utils"; import type { @@ -14,6 +15,8 @@ import type { } from "@/types/shader-gradient"; import { ShaderGradientCanvas } from "@shadergradient/react"; import { ShaderGradient } from "@shadergradient/react"; +import { Bookmark, PanelsTopLeft, Settings2 } from "lucide-react"; +import { usePathname, useRouter } from "next/navigation"; import { type JSX, Suspense, useState } from "react"; import { ControlPanel } from "./control-panel"; import { CopyCode } from "./copy-code"; @@ -257,6 +260,10 @@ export function ShaderGradientGenerator(): JSX.Element { const [settings, setSettings] = useState(defaultSettings); const [selectedExample, setSelectedExample] = useState(""); + const [activeSidebarTab, setActiveSidebarTab] = useState<"presets" | "settings" | "saved">("settings"); + const [isSidebarExpanded, setIsSidebarExpanded] = useState(true); + const pathname = usePathname(); + const router = useRouter(); const updateSettings = ( newSettings: Partial, ): void => { @@ -271,35 +278,43 @@ export function ShaderGradientGenerator(): JSX.Element {

)} -
- {/* Left Column: Control Panel */} - {!isMobile && ( -
- - +
+ {!isMobile &&
+
+ {[{ key: "presets", label: "Presets", icon: PanelsTopLeft }, { key: "settings", label: "Settings", icon: Settings2 }, { key: "saved", label: "Saved", icon: Bookmark }].map((item) => ( + + ))} +
+ +
} + {!isMobile && - )} + />} + {activeSidebarTab === "presets" &&
{ExampleGradients.map((example)=>)}
} + {activeSidebarTab === "saved" &&

Saved gradients will appear here.

} + +
} {/* Middle Column: Gradient Preview */} -
+
+
@@ -384,8 +399,9 @@ export function ShaderGradientGenerator(): JSX.Element {
+
+
-
- + ); } From 102eea81d5e85b535f36105594754dde949d2008 Mon Sep 17 00:00:00 2001 From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com> Date: Sun, 17 May 2026 16:32:36 +0600 Subject: [PATCH 07/10] Move mesh presets into sidebar and add svg-style sidebar layout to background snippets --- components/view/background-snippets/index.tsx | 47 ++++++++------- components/view/mesh-gradient/index.tsx | 60 ++++++++----------- 2 files changed, 51 insertions(+), 56 deletions(-) diff --git a/components/view/background-snippets/index.tsx b/components/view/background-snippets/index.tsx index 8db7932..3ed6f6e 100644 --- a/components/view/background-snippets/index.tsx +++ b/components/view/background-snippets/index.tsx @@ -2,9 +2,14 @@ import { useState } from "react"; +import { Button } from "@/components/ui/button"; import { ScrollArea } from "@/components/ui/scroll-area"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { useMediaQuery } from "@/components/ui/use-media-query"; import { useGradientStops } from "@/hooks/use-gradient-stops"; +import { cn } from "@/lib/utils"; +import { Bookmark, PanelsTopLeft, Settings2 } from "lucide-react"; +import { usePathname, useRouter } from "next/navigation"; import { CodeDisplay } from "./code-output/code-display"; import { getFullCode } from "./code-output/code-generator"; import { ColorPickerPopover } from "./color-pickers/color-picker-popover"; @@ -17,6 +22,10 @@ import { BackgroundPreview } from "./preview/background-preview"; export default function BackgroundPatternGenerator() { const isMobile = useMediaQuery("(max-width:1024px)"); + const [activeSidebarTab, setActiveSidebarTab] = useState<"presets" | "settings" | "saved">("settings"); + const [isSidebarExpanded, setIsSidebarExpanded] = useState(true); + const pathname = usePathname(); + const router = useRouter(); const [patternType, setPatternType] = useState("grid"); const [bgColor, setBgColor] = useState("#000000"); @@ -221,14 +230,15 @@ export default function BackgroundPatternGenerator() { Please use a desktop/laptop to view the Editor.

)} -
- {!isMobile && ( - +
+
+ {!isMobile &&
+
{[{ key: "presets", label: "Presets", icon: PanelsTopLeft }, { key: "settings", label: "Settings", icon: Settings2 }, { key: "saved", label: "Saved", icon: Bookmark }].map((item)=>)}
+ +
} + {!isMobile &&
-
+ {activeSidebarTab === "settings" &&
-
-
+
} + {activeSidebarTab === "settings" &&
-
- {/*
- -
*/} +
} + {activeSidebarTab === "presets" && } + {activeSidebarTab === "saved" &&

Saved snippets will appear here.

}
- - )} + } -
+
-
- -
+
diff --git a/components/view/mesh-gradient/index.tsx b/components/view/mesh-gradient/index.tsx index d970dd8..a4c8bcd 100644 --- a/components/view/mesh-gradient/index.tsx +++ b/components/view/mesh-gradient/index.tsx @@ -1,7 +1,7 @@ "use client"; import { Button } from "@/components/ui/button"; -import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; +import { ScrollArea } from "@/components/ui/scroll-area"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { useMediaQuery } from "@/components/ui/use-media-query"; import { cn } from "@/lib/utils"; @@ -307,7 +307,31 @@ export function ShaderGradientGenerator(): JSX.Element { camera: "bg-main border 2xl:p-4 p-2 rounded-lg", }} />} - {activeSidebarTab === "presets" &&
{ExampleGradients.map((example)=>)}
} + {activeSidebarTab === "presets" && ( +
+ {ExampleGradients.map((example) => ( + + ))} +
+ )} {activeSidebarTab === "saved" &&

Saved gradients will appear here.

}
} @@ -367,38 +391,6 @@ export function ShaderGradientGenerator(): JSX.Element {
- -
- {ExampleGradients.map((example, _index) => ( - - ))} -
- -
From ba5e7673c20d267f3fe06db10bd83f1e5a20ea72 Mon Sep 17 00:00:00 2001 From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com> Date: Sun, 17 May 2026 19:00:20 +0600 Subject: [PATCH 08/10] Align background snippets sidebar footer with svg-line-draw pattern --- components/view/background-snippets/index.tsx | 24 +++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/components/view/background-snippets/index.tsx b/components/view/background-snippets/index.tsx index 3ed6f6e..f2bebe2 100644 --- a/components/view/background-snippets/index.tsx +++ b/components/view/background-snippets/index.tsx @@ -6,9 +6,10 @@ import { Button } from "@/components/ui/button"; import { ScrollArea } from "@/components/ui/scroll-area"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { useMediaQuery } from "@/components/ui/use-media-query"; +import ThemeSwitch from "@/components/theme-switcher"; import { useGradientStops } from "@/hooks/use-gradient-stops"; import { cn } from "@/lib/utils"; -import { Bookmark, PanelsTopLeft, Settings2 } from "lucide-react"; +import { Bookmark, PanelsTopLeft, Settings2, SidebarClose, SidebarOpen } from "lucide-react"; import { usePathname, useRouter } from "next/navigation"; import { CodeDisplay } from "./code-output/code-display"; import { getFullCode } from "./code-output/code-generator"; @@ -234,7 +235,26 @@ export default function BackgroundPatternGenerator() {
{!isMobile &&
{[{ key: "presets", label: "Presets", icon: PanelsTopLeft }, { key: "settings", label: "Settings", icon: Settings2 }, { key: "saved", label: "Saved", icon: Bookmark }].map((item)=>)}
- +
+ + + +
} {!isMobile &&
From 9b32bf32c456c2c457d100569509fbff842f5e10 Mon Sep 17 00:00:00 2001 From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com> Date: Sun, 17 May 2026 19:05:16 +0600 Subject: [PATCH 09/10] Remove background snippets top mobile header notice --- components/view/background-snippets/index.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/components/view/background-snippets/index.tsx b/components/view/background-snippets/index.tsx index f2bebe2..452dce3 100644 --- a/components/view/background-snippets/index.tsx +++ b/components/view/background-snippets/index.tsx @@ -226,11 +226,6 @@ export default function BackgroundPatternGenerator() { return ( <> - {isMobile && ( -

- Please use a desktop/laptop to view the Editor. -

- )}
{!isMobile &&
From a5e252fff25929fe604ed316267a1ef7bf8904c3 Mon Sep 17 00:00:00 2001 From: Naymur Rahman <66328660+naymurdev@users.noreply.github.com> Date: Sun, 17 May 2026 19:20:14 +0600 Subject: [PATCH 10/10] Hide global tools header on mesh, background snippets, and color lab pages --- app/(tools)/layout.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/(tools)/layout.tsx b/app/(tools)/layout.tsx index 97e13ae..d9cd48f 100644 --- a/app/(tools)/layout.tsx +++ b/app/(tools)/layout.tsx @@ -9,7 +9,10 @@ function Toolslayout({ children }: { children: React.ReactNode }) { const isFullPlayground = pathname === "/svg-line-draw" || pathname === "/shadows" || - pathname === "/clip-paths"; + pathname === "/clip-paths" || + pathname === "/mesh-gradients" || + pathname === "/background-snippets" || + pathname === "/color-lab"; return (