From eaf17604902430d63e30fb3e4e133e24bae883b5 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Fri, 14 Apr 2023 09:43:15 -0230
Subject: [PATCH 1/3] Add ChildItem component

---
 packages/ui/src/components/Command/APIKeys.tsx        | 10 +++++-----
 packages/ui/src/components/Command/SearchOnlyItem.tsx |  5 -----
 packages/ui/src/components/Command/ThemeOptions.tsx   | 10 +++++-----
 3 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/packages/ui/src/components/Command/APIKeys.tsx b/packages/ui/src/components/Command/APIKeys.tsx
index 2b51148d29d..7fa58ffc988 100644
--- a/packages/ui/src/components/Command/APIKeys.tsx
+++ b/packages/ui/src/components/Command/APIKeys.tsx
@@ -1,9 +1,9 @@
 import { CommandGroup } from 'cmdk-supabase'
 import { useCommandMenu } from './CommandMenuProvider'
-import SearchOnlyItem from './SearchOnlyItem'
 import { Badge } from '../Badge'
 import { CommandItem } from './Command.utils'
 import { IconAlertCircle } from './../Icon/icons/IconAlertCircle'
+import ChildItem from './ChildItem'
 
 const APIKeys = ({ isSubItem = false }) => {
   const { setIsOpen, project } = useCommandMenu()
@@ -21,7 +21,7 @@ const APIKeys = ({ isSubItem = false }) => {
   return (
     <CommandGroup>
       {apiKeys?.anon !== undefined && (
-        <SearchOnlyItem
+        <ChildItem
           isSubItem={isSubItem}
           onSelect={() => {
             copyToClipboard(apiKeys?.anon ?? '')
@@ -31,10 +31,10 @@ const APIKeys = ({ isSubItem = false }) => {
         >
           <p>Copy anonymous key</p>
           <Badge color="gray">Public</Badge>
-        </SearchOnlyItem>
+        </ChildItem>
       )}
       {apiKeys?.service !== undefined && (
-        <SearchOnlyItem
+        <ChildItem
           isSubItem={isSubItem}
           onSelect={() => {
             copyToClipboard(apiKeys?.service ?? '')
@@ -44,7 +44,7 @@ const APIKeys = ({ isSubItem = false }) => {
         >
           <p>Copy service key</p>
           <Badge color="red">Secret</Badge>
-        </SearchOnlyItem>
+        </ChildItem>
       )}
       {apiKeys?.anon === undefined && apiKeys?.service === undefined && (
         <CommandItem type="link" className="items-start">
diff --git a/packages/ui/src/components/Command/SearchOnlyItem.tsx b/packages/ui/src/components/Command/SearchOnlyItem.tsx
index 82cd3d16314..f6c13c8e6c6 100644
--- a/packages/ui/src/components/Command/SearchOnlyItem.tsx
+++ b/packages/ui/src/components/Command/SearchOnlyItem.tsx
@@ -1,10 +1,5 @@
-import { useCommandState } from 'cmdk-supabase'
 import { CommandItem } from './Command.utils'
 
 export default function SearchOnlyItem({ children, isSubItem, ...props }: any) {
-  const search = useCommandState((state) => state.search)
-  // if search is empty & items is marked as a subItem, don't show it
-  // ie: only show these items in search results, not top level
-  if (!search && isSubItem) return null
   return <CommandItem {...props}>{children}</CommandItem>
 }
diff --git a/packages/ui/src/components/Command/ThemeOptions.tsx b/packages/ui/src/components/Command/ThemeOptions.tsx
index 1e20213bd70..8732bdf2bdd 100644
--- a/packages/ui/src/components/Command/ThemeOptions.tsx
+++ b/packages/ui/src/components/Command/ThemeOptions.tsx
@@ -1,12 +1,12 @@
 import { CommandGroup } from 'cmdk-supabase'
 import { useCommandMenu } from './CommandMenuProvider'
-import SearchOnlyItem from './SearchOnlyItem'
+import ChildItem from './ChildItem'
 
 const ThemeOptions = ({ isSubItem = false }) => {
   const { setIsOpen, actions } = useCommandMenu()
   return (
     <CommandGroup>
-      <SearchOnlyItem
+      <ChildItem
         isSubItem={isSubItem}
         onSelect={() => {
           actions.toggleTheme(true)
@@ -14,8 +14,8 @@ const ThemeOptions = ({ isSubItem = false }) => {
         }}
       >
         Change Theme to dark
-      </SearchOnlyItem>
-      <SearchOnlyItem
+      </ChildItem>
+      <ChildItem
         isSubItem={isSubItem}
         onSelect={() => {
           actions.toggleTheme(false)
@@ -23,7 +23,7 @@ const ThemeOptions = ({ isSubItem = false }) => {
         }}
       >
         Change Theme to light
-      </SearchOnlyItem>
+      </ChildItem>
     </CommandGroup>
   )
 }

From ab1653835f40a6fe41d732561ef9c9002d53216c Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Fri, 14 Apr 2023 09:47:03 -0230
Subject: [PATCH 2/3] Add child item

---
 packages/ui/src/components/Command/ChildItem.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 packages/ui/src/components/Command/ChildItem.tsx

diff --git a/packages/ui/src/components/Command/ChildItem.tsx b/packages/ui/src/components/Command/ChildItem.tsx
new file mode 100644
index 00000000000..58627565bd7
--- /dev/null
+++ b/packages/ui/src/components/Command/ChildItem.tsx
@@ -0,0 +1,11 @@
+import { useCommandState } from 'cmdk-supabase'
+import { CommandItem } from './Command.utils'
+import React from 'react'
+
+export default function ChildItem({ children, isSubItem, ...props }: any) {
+  const search = useCommandState((state) => state.search)
+  // if search is empty & items is marked as a subItem, don't show it
+  // ie: only show these items in search results, not top level
+  if (!search && isSubItem) return null
+  return <CommandItem {...props}>{children}</CommandItem>
+}

From b314a91b22246e611bed232eaa6f618d883f3997 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Fri, 14 Apr 2023 09:47:24 -0230
Subject: [PATCH 3/3] Remove import

---
 packages/ui/src/components/Command/SearchableStudioItems.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ui/src/components/Command/SearchableStudioItems.tsx b/packages/ui/src/components/Command/SearchableStudioItems.tsx
index 0c6e4432fa8..9073944bf08 100644
--- a/packages/ui/src/components/Command/SearchableStudioItems.tsx
+++ b/packages/ui/src/components/Command/SearchableStudioItems.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { CommandGroup } from './Command.utils'
 import SearchOnlyItem from './SearchOnlyItem'
 import { useRouter } from 'next/router'