From fec6e241b9640e5ddda2917ea87a59708321161d Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 12 Jun 2024 19:11:34 +0800
Subject: [PATCH] Allow old home widths to work

---
 .../patterns/LibraryCards/CardTypes.tsx       |  2 ++
 .../patterns/LibraryCards/LibraryListCard.tsx | 34 ++++++++++++-------
 .../templates/homeFeed/HomeFeedContainer.tsx  |  1 +
 packages/web/pages/home.tsx                   | 32 +++++++++++++++++
 4 files changed, 56 insertions(+), 13 deletions(-)
 create mode 100644 packages/web/pages/home.tsx

diff --git a/packages/web/components/patterns/LibraryCards/CardTypes.tsx b/packages/web/components/patterns/LibraryCards/CardTypes.tsx
index ab9d9dfcb..fbf713688 100644
--- a/packages/web/components/patterns/LibraryCards/CardTypes.tsx
+++ b/packages/web/components/patterns/LibraryCards/CardTypes.tsx
@@ -31,4 +31,6 @@ export type LinkedItemCardProps = {
 
   isHovered?: boolean
   isLoading?: boolean
+
+  legacyLayout?: boolean
 }
diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
index e988e8525..12b23f437 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
@@ -54,6 +54,26 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
 
   const { getReferenceProps, getFloatingProps } = useInteractions([hover])
 
+  const layoutWidths = props.legacyLayout
+    ? {
+        width: '100vw',
+        '@media (min-width: 768px)': {
+          width: `calc(100vw - ${LIBRARY_LEFT_MENU_WIDTH})`,
+        },
+        '@media (min-width: 930px)': {
+          width: '580px',
+        },
+        '@media (min-width: 1280px)': {
+          width: '890px',
+        },
+        '@media (min-width: 1600px)': {
+          width: '1200px',
+        },
+      }
+    : {
+        width: '100%',
+      }
+
   return (
     <VStack
       ref={refs.setReference}
@@ -68,22 +88,10 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
         borderStyle: 'none',
         borderBottom: 'none',
         borderRadius: '6px',
-        width: '100%',
-        // '@media (min-width: 768px)': {
-        //   width: `calc(100vw - ${LIBRARY_LEFT_MENU_WIDTH})`,
-        // },
-        // '@media (min-width: 930px)': {
-        //   width: '580px',
-        // },
-        // '@media (min-width: 1280px)': {
-        //   width: '890px',
-        // },
-        // '@media (min-width: 1600px)': {
-        //   width: '1200px',
-        // },
         '@media (max-width: 930px)': {
           borderRadius: '0px',
         },
+        ...layoutWidths,
       }}
       alignment="start"
       distribution="start"
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index e1ad0702d..86d458ccf 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -1331,6 +1331,7 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element {
         >
           {props.viewer && (
             <LinkedItemCard
+              legacyLayout={true}
               layout={props.layout}
               item={linkedItem.node}
               isLoading={linkedItem.isLoading}
diff --git a/packages/web/pages/home.tsx b/packages/web/pages/home.tsx
new file mode 100644
index 000000000..1935d846b
--- /dev/null
+++ b/packages/web/pages/home.tsx
@@ -0,0 +1,32 @@
+import { PrimaryLayout } from '../components/templates/PrimaryLayout'
+import { HomeFeedContainer } from '../components/templates/homeFeed/HomeFeedContainer'
+import { VStack } from './../components/elements/LayoutPrimitives'
+
+export default function Home(): JSX.Element {
+  return <LoadedContent />
+}
+
+function LoadedContent(): JSX.Element {
+  return (
+    <PrimaryLayout
+      pageMetaDataProps={{
+        title: 'Home - Omnivore',
+        path: '/home',
+      }}
+      pageTestId="home-page-tag"
+    >
+      <VStack
+        alignment="start"
+        distribution="center"
+        css={{
+          px: '70px',
+          backgroundColor: '$thLibraryBackground',
+          '@lgDown': { px: '20px' },
+          '@mdDown': { px: '10px' },
+        }}
+      >
+        <HomeFeedContainer />
+      </VStack>
+    </PrimaryLayout>
+  )
+}