@catalystsoftware/ui 1.0.14 → 1.0.16

package/dist/components/catalyst-ui/tools/snippets.tsx

@@ -0,0 +1,844 @@
+import { ClientOnly, } from "~/utils/client-only";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Save, X, } from "lucide-react";
+import { handleEditorDidMount as baseHandleEditorDidMount, renderEditor as baseRenderEditor, FieldContent, FieldGroup, FieldSeparator, FieldSet, MonacoToolbar, DEFAULT_PREF, loadEditorSettings, autoSaveSettings, } from "~/components/catalyst-ui";
+import { Field, FieldLabel, FieldDescription, FieldError, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Input, Switch, Button, cn, useToasted, useDS, LoadingPage, SpinnerV4, } from "~/components/catalyst-ui";
+import { DEVSTACK_URL } from "~/components/shared";
+import axios from 'axios';
+
+export default function SnippetsEditor() {
+    return (
+        <ClientOnly>{() => <MonacoEditor />}</ClientOnly>
+    );
+}
+
+export function MonacoEditor() {
+    const { toast } = useToasted();
+    const [code, setCode] = useState("Start coding...");
+    const { setOpen, open } = useDS();
+    const [es, setEs] = useState(() => loadEditorSettings());
+    const [theme, setTheme] = useState(DEFAULT_PREF.theme);
+    const [isFullscreen, setIsFullscreen] = useState(DEFAULT_PREF.isFullscreen);
+	const [editorRenameTab, setEditorRenameTab] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+    const [lastSaved, setLastSaved] = useState(null);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const customDarkTheme = {
+        base: "vs-dark",
+        inherit: true,
+        rules: [],
+        colors: {
+            "editor.background": "#020817",
+        },
+    };
+    const [activeTabId, setActiveTabId] = useState(1);
+    const [nextTabId, setNextTabId] = useState(2);
+    const [isClient, setIsClient] = useState(false);
+    const [autoSaveEnabled, setAutoSaveEnabled] = useState(true);
+    const [folders, setFolders] = useState([]);
+    const [isEditing, setIsEditing] = useState(null);
+    const [hasEditedScope, setHasEditedScope] = useState(false);
+    const [replaceSpaces, setReplaceSpaces] = useState(true);
+    const [snippets, setSnippets] = useState([]);
+    const [isVisible, setIsVisible] = useState(true);
+    const [isWordWrapEnabled, setIsWordWrapEnabled] = useState(false);
+    const [isStickyScrollEnabled, setIsStickyScrollEnabled] = useState(false);
+    const [isWhitespaceRendered, setIsWhitespaceRendered] = useState(false);
+    const [areIndentGuidesRendered, setAreIndentGuidesRendered] = useState(true);
+    const [error, setError] = useState({
+        label: null,
+        prefix: null,
+        description: null,
+        scope: null,
+        body: null,
+        folder: null,
+    });
+    const [tabs, setTabs] = useState([
+        {
+            id: 1,
+            name: "main.tsx",
+            content: code,
+            language: "typescript",
+            isDirty: false,
+            isActive: true,
+
+            label: '',
+            prefix: '',
+            description: '',
+            scope: 'typescript, typescriptreact',
+            folder: '',
+            global: true,
+            projectId: '',
+
+        },
+    ]);
+    const activeTab = tabs.find((tab) => tab.id === activeTabId);
+
+    useEffect(() => {
+        handleEditorChange(code);
+    }, [code]);
+
+    useEffect(() => {
+        if (!isClient) return;
+     async function initializeApp() {
+    const response = await fetch(DEVSTACK_URL + "/api/snippets-data");
+    const data = await response.json();
+
+    // Extract snippets from the nested structure
+    const extractSnippets = (items) => {
+        let allSnippets = [];
+
+        for (const item of items) {
+            if (item.type === 'snippet') {
+                allSnippets.push({
+                    id: item.label,
+                    label: item.label,
+                    prefix: item.prefix,
+                    description: item.description || '',
+                    body: Array.isArray(item.body) ? item.body.join('\n') : item.body || '',
+                    scope: item.scope || '',
+                    global: item.global || false,
+                    projectId: item.projectId || '',
+                });
+            } else if (item.type === 'folder' && item.items) {
+                // Recursively extract snippets from folders
+                allSnippets = [...allSnippets, ...extractSnippets(item.items)];
+            }
+        }
+
+        return allSnippets;
+    };
+
+    // The data IS the object with "SNIPPETS" label and items array
+    // You need to access data.items directly
+    const snippetsArray = data.items ? extractSnippets(data.items) : [];
+    setSnippets(snippetsArray);
+    setIsEditing(false);
+}
+initializeApp();
+        const savedTabs = [];
+        let index = 1;
+
+        // Check localStorage for all saved tabs
+        while (true) {
+            const savedContent = localStorage.getItem(`catalyst-snippets-66-${index}`);
+            const savedName = localStorage.getItem(`catalyst-snippets-66-${index}-name`);
+            const savedLanguage = localStorage.getItem(`catalyst-snippets-66-${index}-language`);
+
+            if (!savedContent) break;
+
+            savedTabs.push({
+                id: index,
+                name: savedName || `new-snippet-${index}.tsx`,
+                content: savedContent,
+                language: savedLanguage || "typscript",
+                isDirty: false,
+                isActive: index === 1,
+                            label: '',
+            prefix: '',
+            description: '',
+            scope: 'typescript, typescriptreact',
+            folder: '',
+            global: true,
+            projectId: '',
+            });
+
+            index++;
+        }
+
+        if (savedTabs.length > 0) {
+            setTabs(savedTabs);
+            setNextTabId(index);
+            setCode(savedTabs[0].content);
+        }
+        console.log(tabs,'tabs',snippets,'snippets',activeTab, 'activeTab')
+    }, [isClient]);
+
+    useEffect(() => {
+        if (!activeTab) return;
+        setCode(activeTab.content);
+    }, [activeTabId]);
+
+    const autoSave = useCallback(
+        async (tabId, content) => {
+            const tab = tabs.find((t) => t.id === tabId);
+            if (!tab?.isDirty || !autoSaveEnabled) return;
+
+            setIsSaving(true);
+            try {
+                localStorage.setItem(`catalyst-snippets-66-${tabId}`, content);
+                localStorage.setItem(`catalyst-snippets-66-${tabId}-name`, tab.name);
+                localStorage.setItem(`catalyst-snippets-66-${tabId}-language`, tab.language);
+                setTabs((prev) => prev.map((t) => (t.id === tabId ? {
+                    ...t,
+                    isDirty: false,
+                    name: activeTab?.label.length > 0 ? `${activeTab?.label}.${getFileExtension(t.language)}` : t.name,
+                } : t)));
+                setLastSaved(new Date());
+            } catch (error) {
+                console.error("Save failed:", error);
+            } finally {
+                setIsSaving(false);
+            }
+        },
+        [tabs, autoSaveEnabled, activeTab?.label]
+    );
+
+
+	const setSetState = (setting, value) => {
+		setEs(prev => ({
+			...prev,
+			[setting]: typeof value === 'function' ? value(prev[setting]) : value
+		}))
+	}
+
+	const setNestedSetting = (path, value) => {
+		const keys = path.split('.');
+		setEs(prev => {
+			const newState = { ...prev };
+			let current = newState;
+
+			for (let i = 0; i < keys.length - 1; i++) {
+				current[keys[i]] = { ...current[keys[i]] };
+				current = current[keys[i]];
+			}
+
+			current[keys[keys.length - 1]] = value;
+			return newState;
+		});
+	};
+
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const editorRef = useRef(null);
+    const saveTimeoutRef = useRef(null);
+
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+
+    // Debounced auto-save
+    useEffect(() => {
+        if (activeTab?.isDirty && autoSaveEnabled) {
+            clearTimeout(saveTimeoutRef.current);
+            saveTimeoutRef.current = setTimeout(() => {
+                autoSave(activeTabId, activeTab.content);
+            }, 2000);
+        }
+
+        return () => clearTimeout(saveTimeoutRef.current);
+    }, [activeTab?.content, activeTab?.isDirty, activeTabId, autoSave, autoSaveEnabled]);
+
+    const renameTab = (tabId, newName) => {
+        setTabs((prev) => prev.map((tab) => (tab.id === tabId ? { ...tab, name: newName, isDirty: true } : tab)));
+    };
+
+    const getFileExtension = (language) => {
+        const extensions = {
+            javascript: "js",
+            typescript: "ts",
+            html: "html",
+            css: "css",
+            scss: "scss",
+            json: "json",
+            python: "py",
+            sql: "sql",
+            yaml: "yml",
+            xml: "xml",
+            java: "java",
+            csharp: "cs",
+            cpp: "cpp",
+            php: "php",
+            rust: "rs",
+            go: "go",
+            shell: "sh",
+            markdown: "md",
+        };
+        return extensions[language] || "txt";
+    };
+
+    const createNewTab = useCallback(
+        async (language = "typescript") => {
+            setIsEditing(true)
+            const clipboardText = await navigator.clipboard.readText();
+
+            const newTab = {
+                id: nextTabId,
+                name: `untitled-${nextTabId}.${getFileExtension(language)}`,
+                content: clipboardText ? clipboardText : '',
+                language,
+                isDirty: false,
+                isActive: true,
+                label: '',
+                prefix: '',
+                description: '',
+                scope: 'jsx / tsx',
+                folder: '',
+                global: false
+            };
+
+            setTabs((prev) => prev.map((tab) => ({ ...tab, isActive: false })));
+            setTabs((prev) => [...prev, newTab]);
+            setActiveTabId(nextTabId);
+            setNextTabId((prev) => prev + 1);
+
+            const extractFolders = (items) => {
+                let folders = [];
+
+                for (const item of items) {
+                    if (item.type === 'folder') {
+                        folders.push({
+                            label: item.label,
+                            expanded: item.expanded || false,
+                            global: item.global || false,
+                            hidden: item.hidden || false,
+                            icon: item.icon || null,
+                            projectId: item.projectId || '',
+                        });
+
+                        if (item.items) {
+                            folders = [...folders, ...extractFolders(item.items)];
+                        }
+                    }
+                }
+
+                return folders;
+            };
+            const response = await fetch(DEVSTACK_URL + "/api/cmd/config/get");
+            const data = await response.json();
+            const allFolders = extractFolders(data.categories);
+            setFolders(allFolders);
+        },
+        [nextTabId]
+    );
+
+    const handleSnippetSelect = useCallback(
+        (language = "typescript", snippet) => {
+            setIsEditing(true);
+            if (editorRef.current) { editorRef.current.setValue(snippet.body || ''); }
+            setCode(snippet.body || '');
+
+            const newTab = {
+                id: nextTabId,
+                name: `${snippet.label}.${getFileExtension(language)}`,
+                content: snippet.body || '',
+                language,
+                isDirty: false,
+                isActive: true,
+                label: snippet.label || '',
+                prefix: snippet.prefix || '',
+                description: snippet.description || '',
+                scope: snippet.scope || 'typescript,typescriptreact',
+                folder: '',
+                global: snippet.global || false,
+                projectId: snippet.projectId || '',
+            };
+
+            setTabs((prev) => prev.map((tab) => ({ ...tab, isActive: false })));
+            setTabs((prev) => [...prev, newTab]);
+            setActiveTabId(nextTabId);
+            setNextTabId((prev) => prev + 1);
+        },
+        [nextTabId]
+    );
+
+    const closeTab = useCallback(
+        (tabId) => {
+            if (tabs.length === 1) return;
+
+            setTabs((prev) => {
+                const newTabs = prev.filter((tab) => tab.id !== tabId);
+                if (tabId === activeTabId) {
+                    const nextTab = newTabs[0] || newTabs[newTabs.length - 1];
+                    setActiveTabId(nextTab?.id || 1);
+                }
+                return newTabs;
+            });
+        },
+        [tabs.length, activeTabId]
+    );
+
+    const handleDelete = useCallback(
+        async (tabId) => {
+            if (tabs.length === 1) return;
+
+            setTabs((prev) => {
+                const newTabs = prev.filter((tab) => tab.id !== tabId);
+                if (tabId === activeTabId) {
+                    const nextTab = newTabs[0] || newTabs[newTabs.length - 1];
+                    setActiveTabId(nextTab?.id || 1);
+                }
+                return newTabs;
+            });
+
+            // Use label instead of id for deletion
+            await axios.post(DEVSTACK_URL + `/api/snippets/${activeTab?.label}/delete`);
+
+
+            closeTab(activeTabId);
+            setIsEditing(false);
+        },
+        [tabs.length, activeTabId, activeTab?.label]
+    );
+
+    const duplicateTab = (tabId) => {
+		const tab = tabs.find((t) => t.id === tabId);
+		if (!tab) return;
+
+		const newTab = {
+			...tab,
+			id: nextTabId,
+			name: `copy-of-${tab.name}`,
+			isDirty: true,
+		};
+		setTabs((prev) => [...prev, newTab]);
+		setActiveTabId(nextTabId);
+		setNextTabId((prev) => prev + 1);
+	};
+    const handleManualSave = useCallback(async () => {
+        setIsSubmitting(true);
+        if (!validateForm()) { setIsSubmitting(false); return; }
+        if (activeTab?.isDirty) { clearTimeout(saveTimeoutRef.current); autoSave(activeTabId, activeTab.content); }
+
+        try {
+            const snippetBody = activeTab?.content?.trim() || '';
+
+            const noSpace = activeTab?.label && activeTab?.label.length > 3
+                ? activeTab?.label.toLowerCase().replace(/[\s.,/]+/g, '_')
+                : '';
+
+            let snippetData;
+            if (replaceSpaces === true) {
+                snippetData = {
+                    label: isEditing ? activeTab.label : noSpace,
+                    prefix: noSpace,
+                    description: activeTab.description.trim(),
+                    scope: activeTab.scope.trim() || 'typescript,typescriptreact',
+                    body: activeTab.content.trim().split('\n'),
+                    target: activeTab.global ? 'global' : 'workspace',
+                    editingSnippet: isEditing,
+                };
+            } else {
+                snippetData = {
+                    label: isEditing ? activeTab.label : activeTab.label.trim(),
+                    prefix: activeTab.prefix.trim(),
+                    description: activeTab.description.trim(),
+                    scope: activeTab.scope.trim() || 'typescript,typescriptreact',
+                    body: activeTab.content.trim().split('\n'),
+                    target: activeTab.global ? 'global' : 'workspace',
+                    editingSnippet: isEditing,
+                };
+            }
+
+            await axios.post(DEVSTACK_URL + `/api/snippets/save`, snippetData);
+
+            // Update folder structure if needed
+            if (!activeTab?.folder || typeof activeTab?.folder !== 'string') {
+                setError(prev => ({
+                    ...prev,
+                    folder: 'Folder is required',
+                }));
+                setIsSubmitting(false);
+                return;
+            }
+
+            const response = await fetch(DEVSTACK_URL + "/api/cmd/config/get");
+            const currentConfig = await response.json();
+
+            const updatedConfig = addNewItem(currentConfig, activeTab?.folder, {
+                label: snippetData.label,
+                type: 'snippet',
+                prefix: snippetData.prefix,
+                description: snippetData.description,
+                scope: snippetData.scope,
+                body: snippetData.body,
+                global: activeTab?.global || false,
+            });
+
+            await axios.post(DEVSTACK_URL + `/api/cmd/config/save`, updatedConfig);
+
+            toast.success("Success", "Snippet saved successfully!");
+            setIsSubmitting(false);
+        } catch (error) {
+            console.error('Error saving snippet:', error);
+            toast.error("Error", "Failed to save snippet");
+            setIsSubmitting(false);
+        }
+    }, [activeTab, activeTabId, autoSave, replaceSpaces, isEditing]);
+
+
+    const handleEditorDidMount = (editor, monaco) => {
+        baseHandleEditorDidMount(editor, monaco, {
+            setCode,
+            editorRef,
+            customDarkTheme,
+            handleManualSave,
+            renameTab,
+            setSetState,
+            createNewTab,
+            closeTab,
+            activeTabId,
+            setOpen
+        });
+    };
+
+    const renderEditor = () => {
+        return baseRenderEditor({
+            isClient,
+            activeTab,
+            theme,
+            handleEditorChange,
+            handleEditorDidMount,
+            es,
+            LoadingComponent: LoadingPage,
+            SpinnerComponent: <SpinnerV4 title='Loading...' subtitle='Please wait while your editor loads the content.' size='sm' />
+        });
+    };
+    const TabComponent = ({ tab, isActive, onClose, onSelect }) => (
+        <div
+            className={`flex items-center px-3 py-2 border-r border-border cursor-pointer transition-colors ${isActive ? "bg-background text-foreground border-b-2 border-primary" : "bg-muted text-muted-foreground hover:bg-background hover:text-foreground"
+                }`}
+            onClick={() => onSelect(tab.id)}
+        >
+            <span className="text-sm truncate max-w-32">{tab.name}</span>
+            {tab.isDirty && <span className="ml-1 text-destructive">●</span>}
+            <button
+                onClick={(e) => {
+                    e.stopPropagation();
+                    onClose(tab.id);
+                }}
+                className="ml-2 p-1 rounded hover:bg-destructive/20 hover:text-destructive"
+            >
+                <X className="h-3 w-3" />
+            </button>
+        </div>
+    );
+
+    const closeAllTabs = () => {
+        // Note: You may want to add a prompt here to warn about unsaved changes.
+        setTabs([]);
+        createNewTab();
+        handleManualSave()
+    };
+
+    useEffect(() => {
+        // Reset visibility when lastSaved changes
+        setIsVisible(true);
+
+        // Set a timer to hide the status after 5 seconds
+        const timer = setTimeout(() => {
+            setIsVisible(false);
+        }, 5000);
+
+        // Cleanup function: Clear the timeout if the component unmounts or lastSaved changes
+        return () => clearTimeout(timer);
+    }, [lastSaved]);
+
+
+    const handleEditorChange = (value) => {
+        setTabs((prev) => prev.map((tab) => (tab.id === activeTabId ? { ...tab, content: value || "", isDirty: true } : tab)));
+        setCode(value);
+    };
+
+    const handleChange = useCallback((field, value) => {
+        // Handle both event objects and direct values
+        const actualValue = value?.target ? value.target.value : value;
+
+        setTabs(prev => prev.map(tab =>
+            tab.id === activeTabId
+                ? { ...tab, [field]: actualValue, isDirty: true }
+                : tab
+        ));
+
+        // Clear error when user starts typing
+        if (error[field]) {
+            setError(prev => ({
+                ...prev,
+                [field]: null
+            }));
+        }
+    }, [error, activeTabId]);
+
+    const addNewItem = (config, targetFolder, activeTab) => {
+        const createItem = () => {
+            const { label, path, type, ...additionalProps } = activeTab;
+
+            const baseItem = {
+                label,
+                type
+            };
+            // For other items (commands, urls, etc.)
+            return {
+                ...baseItem,
+                path: path || "",
+                hidden: additionalProps.hidden ?? false,
+                ...additionalProps // spread any other props from activeTab
+            };
+        };
+
+        const newItem = createItem();
+
+        const findAndAdd = (items) => {
+            return items.map(item => {
+                // If this is the target folder, add the new item to its items array
+                if (item.label === targetFolder && item.type === 'folder') {
+                    return {
+                        ...item,
+                        items: [...(item.items || []), newItem]
+                    };
+                }
+
+                // If this item has nested items, recursively search them
+                if (item.items && item.items.length > 0) {
+                    return {
+                        ...item,
+                        items: findAndAdd(item.items)
+                    };
+                }
+
+                // Return the item unchanged if it's not the target and has no nested items
+                return item;
+            });
+        };
+
+        return {
+            ...config,
+            categories: findAndAdd(config.categories)
+        };
+    };
+    const validateForm = () => {
+        const label = activeTab.label?.trim() || '';
+        const prefix = activeTab.prefix?.trim() || '';
+        const body = activeTab?.content?.trim() || '';
+
+        if (!label) {
+            setError(prev => ({ ...prev, label: 'Label is required' }));
+            return false;
+        } else if (label.length < 4) {
+            setError(prev => ({ ...prev, label: 'Label needs to be at least 4 chars in length' }));
+            return false;
+        } else if (!prefix && replaceSpaces === false) {
+            setError(prev => ({ ...prev, prefix: 'Prefix is required' }));
+            return false;
+        } else if (!body) {
+            setError(prev => ({ ...prev, body: 'Snippet body is required' }));
+            return false;
+        } else {
+            setError({ label: null, prefix: null, description: null, scope: null, body: null, folder: null });
+            return true;
+        }
+    };
+
+    	const onOpen = async (e: React.ChangeEvent<HTMLInputElement>) => {
+		try {
+			const file = e.target.files?.[0];
+			if (!file) return;
+			const contents = await file.text();
+
+			setCode(contents);
+		} catch (error) {
+			console.error("Error loading PDF:", error);
+		}
+	};
+
+    return (
+        <div className="h-[90vh] flex flex-col bg-background border-2 border-border rounded-[10px] shadow-lg !overflow-hidden  z-75 ">
+            <MonacoToolbar
+                createNewTab={createNewTab}
+                closeTab={closeTab}
+                closeAllTabs={closeAllTabs}
+                activeTab={activeTab}
+                handleManualSave={handleManualSave}
+                code={code}
+                setTabs={setTabs}
+                editorRef={editorRef}
+                activeTabId={activeTabId}
+                isWhitespaceRendered={isWhitespaceRendered}
+                setIsWhitespaceRendered={setIsWhitespaceRendered}
+                areIndentGuidesRendered={areIndentGuidesRendered}
+                setAreIndentGuidesRendered={setAreIndentGuidesRendered}
+                isStickyScrollEnabled={isStickyScrollEnabled}
+                setIsStickyScrollEnabled={setIsStickyScrollEnabled}
+                isWordWrapEnabled={isWordWrapEnabled}
+                setIsWordWrapEnabled={setIsWordWrapEnabled}
+                toast={toast}
+                isFullscreen={isFullscreen}
+                setIsFullscreen={setIsFullscreen}
+                tabs={tabs}
+                lastSaved={lastSaved}
+                isVisible={isVisible}
+                fileInputRef={fileInputRef}
+                es={es}
+                setSetState={setSetState}
+                duplicateTab={duplicateTab}
+                onOpen={onOpen}
+                setEditorRenameTab={setEditorRenameTab}
+				setNestedSetting={setNestedSetting}
+                parent='snippet'
+                isEditing={isEditing}
+            />
+            <div className="flex border-b border-border bg-background overflow-x-auto">
+                {tabs.map((tab) => (
+                    <TabComponent key={tab.id} tab={tab} isActive={tab.id === activeTabId} onClose={closeTab} onSelect={setActiveTabId} />
+                ))}
+            </div>
+            <div className='grid grid-cols-5' >
+                {isEditing === true ? (
+                    <>
+                        {/* form inputs */}
+                        <div className='flex flex-col gap-3 items-center p-6'>
+                            <FieldSet>
+                                <FieldGroup>
+                                    <Field className="w-full max-w-sm">
+                                        <FieldLabel>Label</FieldLabel>
+                                        <Input value={activeTab?.label} onChange={(e) => handleChange('label', e)} placeholder="calendar with event slots" />
+                                        {error.label && <FieldError>{error.label}</FieldError>}
+                                    </Field>
+
+                                    <Field className="w-full max-w-sm">
+                                        <FieldLabel>Prefix</FieldLabel>
+                                        <Input value={activeTab?.prefix} onChange={(e) => handleChange('prefix', e)} placeholder="calendar_with_event_slots" />
+                                        <FieldDescription>To trigger the snippet</FieldDescription>
+                                        {error.prefix && <FieldError>{error.prefix}</FieldError>}
+                                    </Field>
+
+                                    <Field className="w-full max-w-sm">
+                                        <FieldLabel>Description</FieldLabel>
+                                        <Input value={activeTab?.description} onChange={(e) => handleChange('description', e)} placeholder="Full calendar component with slots on right side to select event" />
+                                    </Field>
+
+                                    <Field className="w-full max-w-sm">
+                                        <FieldLabel>Scope</FieldLabel>
+                                        <Input
+                                            value={hasEditedScope ? activeTab?.scope : (activeTab?.scope || "jsx / tsx")}
+                                            onChange={(e) => {
+                                                handleChange('scope', e);
+                                                setHasEditedScope(true);
+                                            }}
+                                            onFocus={(e) => {
+                                                if (hasEditedScope === false) {
+                                                    handleChange('scope', '');
+                                                }
+                                            }}
+                                            onBlur={(e) => {
+                                                if (e.target.value === '' && !hasEditedScope) {
+                                                    handleChange('scope', 'jsx / tsx');
+                                                }
+                                            }}
+                                        />
+                                    </Field>
+
+                                    <Field className="w-full max-w-sm">
+                                        <FieldLabel>Location</FieldLabel>
+                                        <Select value={activeTab?.folder} onValueChange={(value) => handleChange('folder', value)}>
+                                            <SelectTrigger size="sm" className="justify-start capitalize shadow-none *:data-[slot=select-value]:w-12 *:data-[slot=select-value]:capitalize focus:outline-none relative z-10 prose prose-lg font-sans text-white/95 leading-relaxed w-full">
+                                                <SelectValue placeholder="Select a folder" />
+                                            </SelectTrigger>
+                                            <SelectContent align="end">
+                                                <SelectGroup>
+                                                    <SelectItem value='root' className="capitalize data-[state=checked]:opacity-50">Root</SelectItem>
+                                                    {folders.map((item, index) => {
+                                                        return (
+                                                            <SelectItem key={index} value={item.label}>
+                                                                <p>{item.label}</p>
+                                                                <p className='text-muted-foreground'>{item.description}</p>
+
+                                                            </SelectItem>
+                                                        );
+                                                    })}
+                                                </SelectGroup>
+                                            </SelectContent>
+                                        </Select>
+                                        {error.folder && <FieldError>{error.folder}</FieldError>}
+                                        <Button
+                                            type="button"
+                                            onClick={handleManualSave}
+                                            disabled={isSubmitting}
+                                            className="w-full mt-2"
+                                        >
+                                            <Save className="h-4 w-4 mr-2" />
+                                            {isSubmitting ? 'Saving...' : 'Save'}
+                                        </Button>
+
+                                    </Field>
+                                    <FieldSeparator />
+
+                                    <Field orientation="horizontal">
+                                        <FieldContent>
+                                            <FieldLabel htmlFor="tinting">Auto Prefix</FieldLabel>
+                                            <FieldDescription>
+                                                Replace Spaces w/ Underscores - label & prefix
+                                            </FieldDescription>
+                                        </FieldContent>
+                                        <Switch checked={replaceSpaces} onCheckedChange={(checked) => { setReplaceSpaces(checked); }} />
+                                    </Field>
+
+                                    <Field orientation="horizontal">
+                                        <FieldContent>
+                                            <FieldLabel htmlFor="tinting">Global</FieldLabel>
+                                            <FieldDescription>
+                                                Whether setting the snippet to global or workspace
+                                            </FieldDescription>
+                                        </FieldContent>
+                                        <Switch checked={activeTab?.global} onCheckedChange={(e) => { handleChange('global', e) }} />
+                                    </Field>
+
+                                </FieldGroup>
+                            </FieldSet>
+                        </div>
+                    </>
+                ) : (<>
+                    {/* Search Section 
+                      <Command className='rounded-none h-full'>
+                        <CommandInput />
+                        <CommandList maxHeight='max-h-none'>
+                            <CommandEmpty>No results found.</CommandEmpty>
+                            <CommandGroup heading="Snippets">
+                                {snippets.map((snippet, index) => {
+                                    return (
+                                        <CommandItem key={index} onSelect={() => handleSnippetSelect('typescript', snippet)}>
+                                            {snippet.label}
+                                        </CommandItem>
+                                    );
+                                })}
+                            </CommandGroup>
+                        </CommandList>
+                    </Command>*/}
+
+                    <Command className='rounded-none h-full'>
+                        <CommandInput />
+                        <div className="relative">
+                            {/* Top fade gradient - always visible */}
+                            <div className="absolute top-0 left-0 right-0 h-4 bg-gradient-to-b from-background to-transparent z-10 pointer-events-none" />
+
+                            <CommandList
+                                maxHeight=''
+                                className="overflow-y-auto scrollbar-thin"
+                            >
+                                <CommandEmpty>No results found.</CommandEmpty>
+                                <CommandGroup heading="Snippets">
+                                    {snippets.map((snippet, index) => (
+                                        <CommandItem
+                                            key={index}
+                                            onSelect={() => handleSnippetSelect('typescript', snippet)}
+                                            className={cn(activeTab.label === snippet.label ? 'border-primary' : null)}
+                                        >
+                                            {snippet.label}
+                                        </CommandItem>
+                                    ))}
+                                </CommandGroup>
+                            </CommandList>
+
+                            {/* Bottom fade gradient - always visible */}
+                            <div className="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-t from-background to-transparent z-10 pointer-events-none" />
+                        </div>
+                    </Command>
+                </>)
+                }
+                <div className="flex-1 flex min-h-0 col-span-4">
+                    <div className="flex-1">{renderEditor()}</div>
+                </div>
+            </div >
+        </div >
+    );
+}
+