preview style works in sql editor

apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx

@@ -124,7 +124,7 @@ export const SQLEditorMenu = ({ onViewOngoingQueries }: SQLEditorMenuProps) => {
           </DropdownMenu>
         </div>
 
-        <div className="px-2">
+        {/* <div className="px-2">
           <InnerSideMenuItem
             title="Templates"
             isActive={router.asPath === `/project/${ref}/sql/templates`}
@@ -139,7 +139,7 @@ export const SQLEditorMenu = ({ onViewOngoingQueries }: SQLEditorMenuProps) => {
           >
             Quickstarts
           </InnerSideMenuItem>
-        </div>
+        </div> */}
 
         <SQLEditorNavV2 searchText={searchText} />
       </div>

apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx

@@ -57,6 +57,7 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) =>
   const { ref: projectRef, id } = useParams()
   const snapV2 = useSqlEditorV2StateSnapshot()
   const [sort] = useLocalStorage<'name' | 'inserted_at'>('sql-editor-sort', 'inserted_at')
+  const tabStore = getTabsStore(projectRef)
 
   const [mountedId, setMountedId] = useState(false)
   const [showMoveModal, setShowMoveModal] = useState(false)
@@ -338,7 +339,6 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) =>
 
   return (
     <>
-      <InnerSideMenuSeparator />
       {((numProjectSnippets === 0 && searchText.length === 0) || numProjectSnippets > 0) && (
         <>
           <InnerSideMenuCollapsible
@@ -364,10 +364,17 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) =>
                     const isOpened = Object.values(tabs.tabsMap).some(
                       (tab) => tab.metadata?.sqlId === element.metadata?.id
                     )
+                    const tabId = createTabId('sql', {
+                      id: element?.metadata?.id as unknown as Snippet['id'],
+                    })
+                    const isPreview = tabStore.previewTabId === tabId
+                    const isActive = !isPreview && element.metadata?.id === id
                     return (
                       <SQLEditorTreeViewItem
                         {...props}
-                        isOpened={isOpened}
+                        isOpened={isOpened && !isPreview}
+                        isSelected={isActive}
+                        isPreview={isPreview}
                         element={element}
                         onSelectDelete={() => {
                           setShowDeleteModal(true)
@@ -435,10 +442,17 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) =>
                     const isOpened = Object.values(tabs.tabsMap).some(
                       (tab) => tab.metadata?.sqlId === element.metadata?.id
                     )
+                    const tabId = createTabId('sql', {
+                      id: element?.metadata?.id as unknown as Snippet['id'],
+                    })
+                    const isPreview = tabStore.previewTabId === tabId
+                    const isActive = !isPreview && element.metadata?.id === id
                     return (
                       <SQLEditorTreeViewItem
                         {...props}
-                        isOpened={isOpened}
+                        isOpened={isOpened && !isPreview}
+                        isSelected={!isPreview && isOpened}
+                        isPreview={isPreview}
                         element={element}
                         onSelectDelete={() => {
                           setShowDeleteModal(true)
@@ -528,13 +542,20 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) =>
                 const isOpened = Object.values(tabs.tabsMap).some(
                   (tab) => tab.metadata?.sqlId === element.metadata?.id
                 )
+                const tabId = createTabId('sql', {
+                  id: element?.metadata?.id as unknown as Snippet['id'],
+                })
+                const isPreview = tabStore.previewTabId === tabId
+                const isActive = !isPreview && element.metadata?.id === id
 
                 return (
                   <SQLEditorTreeViewItem
                     {...props}
                     element={element}
                     isMultiSelected={selectedSnippets.length > 1}
-                    isOpened={isOpened}
+                    isOpened={isOpened && !isPreview}
+                    isSelected={isActive}
+                    isPreview={isPreview}
                     status={props.isBranch ? snapV2.folders[element.id].status : 'idle'}
                     onMultiSelect={onMultiSelect}
                     onSelectCreate={() => {

apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx

@@ -104,7 +104,8 @@ export const SQLEditorTreeViewItem = ({
             level={level}
             isExpanded={isExpanded}
             isBranch={isBranch}
-            isSelected={isSelected || id === element.id}
+            isSelected={isSelected}
+            isPreview={props.isPreview}
             isEditing={isEditing}
             isLoading={isFetching || isSaving}
             onEditSubmit={(value) => {

packages/ui/src/components/TreeView/TreeView.tsx

@@ -25,7 +25,7 @@ export const TreeViewItemVariant = cva(
         false: '',
       },
       isPreview: {
-        true: 'bg-control',
+        true: 'bg-control text-foreground',
         false: '',
       },
     },
@@ -41,6 +41,8 @@ const TreeViewItem = forwardRef<
     isExpanded?: boolean
     /** Specifies if the item is opened somewhere */
     isOpened?: boolean
+    /** Specifies if the item is a preview */
+    isPreview?: boolean
     /** Specifies if the item is a branch */
     isBranch?: boolean
     /** The padding for each level of the item */
@@ -69,6 +71,7 @@ const TreeViewItem = forwardRef<
       isOpened = false,
       isBranch = false,
       isSelected = false,
+      isPreview = false,
       isLoading = false,
       xPadding = 16,
       name = '',
@@ -119,7 +122,7 @@ const TreeViewItem = forwardRef<
         aria-selected={isSelected}
         aria-expanded={!isEditing && isExpanded}
         {...props}
-        className={cn(TreeViewItemVariant({ isSelected, isOpened }))}
+        className={cn(TreeViewItemVariant({ isSelected, isOpened, isPreview }))}
         style={{
           paddingLeft:
             level === 1 && !isBranch