From d998db65d882134d7023681a0499e8cd2b07cdcf Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 3 Mar 2023 10:48:47 +0800
Subject: [PATCH] Add list/grid switcher to the dropdown in compact

---
 .../components/templates/PrimaryDropdown.tsx  | 32 +++++++++++++++----
 .../templates/homeFeed/LibraryHeader.tsx      |  6 +++-
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/packages/web/components/templates/PrimaryDropdown.tsx b/packages/web/components/templates/PrimaryDropdown.tsx
index 136e632a4..81bae0cda 100644
--- a/packages/web/components/templates/PrimaryDropdown.tsx
+++ b/packages/web/components/templates/PrimaryDropdown.tsx
@@ -6,14 +6,19 @@ import { currentThemeName, updateTheme } from '../../lib/themeUpdater'
 import { AvatarDropdown } from '../elements/AvatarDropdown'
 import { Button } from '../elements/Button'
 import { Dropdown, DropdownOption } from '../elements/DropdownElements'
-import { HStack, VStack } from '../elements/LayoutPrimitives'
+import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
+import { Separator } from '../elements/Separator'
 import { StyledText } from '../elements/StyledText'
 import { DropdownMenu } from '../patterns/DropdownMenu'
 import { ThemeId } from '../tokens/stitches.config'
+import { LayoutType } from './homeFeed/HomeFeedContainer'
 
 type PrimaryDropdownProps = {
   children?: ReactNode
   showThemeSection: boolean
+
+  layout?: LayoutType
+  updateLayout?: (layout: LayoutType) => void
 }
 
 export type HeaderDropdownAction =
@@ -32,12 +37,6 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
   const { viewerData } = useGetViewerQuery()
   const router = useRouter()
 
-  const [currentTheme, setCurrentTheme] = useState(currentThemeName())
-
-  const isDark = useMemo(() => {
-    return currentTheme === 'Dark' || currentTheme === 'Darker'
-  }, [currentTheme])
-
   const headerDropdownActionHandler = useCallback(
     (action: HeaderDropdownAction) => {
       switch (action) {
@@ -86,6 +85,25 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
           <ThemeSection />
         </VStack>
       )}
+      {props.layout == 'LIST_LAYOUT' && (
+        <DropdownOption
+          onSelect={() =>
+            props.updateLayout && props.updateLayout('GRID_LAYOUT')
+          }
+          title="Switch to Grid"
+        />
+      )}
+      {props.layout == 'GRID_LAYOUT' && (
+        <>
+          <DropdownOption
+            onSelect={() =>
+              props.updateLayout && props.updateLayout('LIST_LAYOUT')
+            }
+            title="Switch to List"
+          />
+          <Box css={{ height: '10px' }}></Box>
+        </>
+      )}
       <DropdownOption
         onSelect={() => headerDropdownActionHandler('navigate-to-install')}
         title="Install"
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index 4dfc3fbfa..997cee47a 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -423,7 +423,11 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
             color={theme.colors.graySolid.toString()}
           />
         </Button>
-        <PrimaryDropdown showThemeSection={true} />
+        <PrimaryDropdown
+          showThemeSection={true}
+          layout={props.layout}
+          updateLayout={props.updateLayout}
+        />
       </HStack>
     </>
   )