From 0e4a1fcefde48b1283abdb5d33301a849ce623fe Mon Sep 17 00:00:00 2001
From: gitstart-omnivore <gitstart@users.noreply.github.com>
Date: Thu, 24 Mar 2022 23:10:31 +0000
Subject: [PATCH 01/13] effected review corrections

---
 packages/web/components/patterns/LinkedItemCard.tsx | 13 ++++++-------
 .../templates/homeFeed/HomeFeedContainer.tsx        |  7 +++----
 packages/web/components/tokens/stitches.config.ts   |  6 ++++--
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/web/components/patterns/LinkedItemCard.tsx b/packages/web/components/patterns/LinkedItemCard.tsx
index 4dbac4b77..6e951e308 100644
--- a/packages/web/components/patterns/LinkedItemCard.tsx
+++ b/packages/web/components/patterns/LinkedItemCard.tsx
@@ -88,7 +88,6 @@ export function GridLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
         onClick={() => {
           props.handleAction('showDetail')
         }}
-        className="grid-item-card"
       >
         <Box css={{
           position: 'absolute',
@@ -183,6 +182,7 @@ export function GridLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
               m: 0,
               py: '0px',
               mr: '$2',
+              maxWidth:'50%',
               fontStyle: 'normal',
               fontWeight: '400',
               fontSize: '14px',
@@ -197,23 +197,22 @@ export function GridLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
           >
             {props.item.description}
           </StyledText>
-          {/* {props.item.image && ( */}
+          {props.item.image && (
             <CoverImage
-              // src={props.item.image}
-              src={"https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg"}
+              src={props.item.image}
               alt="Link Preview Image"
               width={135}
               height={90}
               css={{ ml: '10px', mb: '8px', borderRadius: '3px' }}
               onError={(e) => {
-                // (e.target as HTMLElement).style.display = 'none'
+                (e.target as HTMLElement).style.display = 'none'
               }}
             />
-          {/* )} */}
+          )}
         </HStack>
         <HStack css={{ mt: '8px' }}>
               {
-                Labels.map(({text, color}, index) => <Label key={index} text={text} color={color} />)
+                props.item.labels?.map(({description, color}, index) => <Label key={index} text={description || ''} color={color} />)
               }
         </HStack>
       </VStack>
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index c8ac93657..de901747f 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -1,7 +1,6 @@
 import { Box, HStack, VStack } from './../../elements/LayoutPrimitives'
 import { useGetLibraryItemsQuery } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
 import { useGetViewerQuery } from '../../../lib/networking/queries/useGetViewerQuery'
-import { isDarkTheme } from '../../../lib/themeUpdater'
 import type {
   LibraryItem,
   LibraryItemsQueryInput,
@@ -572,12 +571,12 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
                 },
                 '&:focus': {
                   '> div': {
-                    boxShadow: isDarkTheme() ? '$cardItemDarkShadow' : '$cardItemLightShadow',
+                    boxShadow: layout === 'LIST_LAYOUT' ? 'none' : '$cardItemShadow',
                   }
                 },
                 '&:hover': {
-                  '> div.grid-item-card': {
-                    boxShadow: isDarkTheme() ? '$cardItemDarkShadow' : '$cardItemLightShadow',
+                  '> div': {
+                    boxShadow:  layout === 'LIST_LAYOUT' ? 'none' : '$cardItemShadow',
                   }
                 },
               }}
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 69650c19b..2546910a7 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -111,8 +111,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
       borderStyles: {},
       shadows: {
         panelShadow: '0px 4px 18px rgba(120, 123, 134, 0.12)',
-        cardItemLightShadow: '0px 8px 32px rgba(32, 31, 29, 0.33)',
-        cardItemDarkShadow: '0px 8px 32px rgba(255, 255, 255, 0.33)',
+        cardItemShadow: '0px 8px 32px rgba(32, 31, 29, 0.33)',
       },
       zIndices: {},
       transitions: {},
@@ -213,6 +212,9 @@ const darkThemeSpec = {
     avatarBg: '#000000',
     avatarFont: 'rgba(255, 255, 255, 0.8)',
   },
+  shadows: {
+    cardItemShadow: '0px 8px 32px rgba(255, 255, 255, 0.33)',
+  },
 }
 
 // Dark and Darker theme now match each other.

From fe22fb2093795972926d26e0b312b4acd48f1635 Mon Sep 17 00:00:00 2001
From: gitstart-omnivore <gitstart@users.noreply.github.com>
Date: Mon, 28 Mar 2022 13:54:27 +0000
Subject: [PATCH 02/13] fix card width issues

---
 .../components/patterns/LinkedItemCard.tsx    | 457 +++++++++---------
 .../templates/homeFeed/HomeFeedContainer.tsx  |  14 +-
 2 files changed, 241 insertions(+), 230 deletions(-)

diff --git a/packages/web/components/patterns/LinkedItemCard.tsx b/packages/web/components/patterns/LinkedItemCard.tsx
index 6e951e308..ad061e3a0 100644
--- a/packages/web/components/patterns/LinkedItemCard.tsx
+++ b/packages/web/components/patterns/LinkedItemCard.tsx
@@ -8,7 +8,7 @@ import { theme } from './../tokens/stitches.config'
 import { CardMenu } from './../patterns/CardMenu'
 import { LayoutType } from '../templates/homeFeed/HomeFeedContainer'
 import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery'
-import { Label } from './../elements/Label'
+import { LabelChip } from './../elements/LabelChip'
 
 export type LinkedItemCardAction =
   | 'showDetail'
@@ -28,13 +28,13 @@ type LinkedItemCardProps = {
   handleAction: (action: LinkedItemCardAction) => void
 }
 
-const siteName = (originalArticleUrl: string,  itemUrl: string): string => {
+const siteName = (originalArticleUrl: string, itemUrl: string): string => {
   try {
     return new URL(originalArticleUrl).hostname
-  } catch { }
+  } catch {}
   try {
     return new URL(itemUrl).hostname
-  } catch { }
+  } catch {}
   return ''
 }
 
@@ -46,253 +46,91 @@ export function LinkedItemCard(props: LinkedItemCardProps): JSX.Element {
   }
 }
 
-// Dummy Data
-const Labels = [
-  {
-    text: 'Tag 1',
-    color: "#B20042"
-  },
-  {
-    text: 'Tag 2',
-    color: "#01A800"
-  },
-  {
-    text: 'Tag 3',
-    color: "#007E9E"
-  },
-]
-
-
 export function GridLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
   const originText = siteName(props.item.originalArticleUrl, props.item.url)
 
   return (
     // <Link href={`/${username}/${props.item.slug}`} passHref={true}>
-      <VStack
+    <VStack
+      css={{
+        p: '$2',
+        pr: '8px',
+        height: '100%',
+        width: '100%',
+        maxWidth: '100%',
+        borderRadius: '6px',
+        cursor: 'pointer',
+        wordBreak: 'break-word',
+        overflow: 'clip',
+        border: '1px solid $grayBorder',
+        boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
+        position: 'relative',
+      }}
+      alignment="start"
+      distribution="start"
+      onClick={() => {
+        props.handleAction('showDetail')
+      }}
+    >
+      <Box
         css={{
-          p: '$2',
-          pr: '8px',
-          height: '100%',
-          width: '100%',
-          maxWidth: '100%',
-          borderRadius: '6px',
-          cursor: 'pointer',
-          wordBreak: 'break-word',
-          overflow: 'clip',
-          border: '1px solid $grayBorder',
-          boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
-          position: 'relative',
-        }}
-        alignment='start'
-        distribution='start'
-        onClick={() => {
-          props.handleAction('showDetail')
-        }}
-      >
-        <Box css={{
           position: 'absolute',
           top: '1px',
           left: '1px',
           width: 'calc(100% - 2px)',
           '& > div': {
             borderRadius: '100vmax 100vmax 0 0',
+          },
+        }}
+      >
+        <ProgressBar
+          fillPercentage={props.item.readingProgressPercent}
+          fillColor={theme.colors.highlight.toString()}
+          backgroundColor={theme.colors.grayTextContrast.toString()}
+          borderRadius={
+            props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
           }
-        }}>
-          <ProgressBar
-            fillPercentage={props.item.readingProgressPercent}
-            fillColor={theme.colors.highlight.toString()}
-            backgroundColor={theme.colors.grayTextContrast.toString()}
-            borderRadius={props.item.readingProgressPercent===100 ?
-              '0' : '0px 8px 8px 0px'
-            }
-          />
-        </Box>
-        <VStack
-          distribution="start"
-          alignment="start"
-          css={{
-            px: '0px',
-            width: '100%',
-            pl: '$1',
-          }}
-        >
-          <HStack alignment='start' distribution='between' css={{ width: '100%', p: '0px', mr: '-12px',  mt: '15px'}}>
-            <StyledText
-              style="listTitle"
-              css={{ 
-                mt: '0',
-                mb:'0',
-                fontWeight: '700',
-                textAlign: 'left',
-                whiteSpace: 'nowrap',
-                textOverflow: 'ellipsis',
-                width: '100%',
-                overflow: 'hidden'
-              }}  
-            >
-              {props.item.title}
-            </StyledText>
-            <Box
-              css={{ alignSelf: 'end', alignItems: 'start', height: '100%' }}
-              onClick={(e) => {
-                // This is here to prevent menu click events from bubbling
-                // up and causing us to "click" on the link item.
-                e.stopPropagation()
-              }}
-            >
-              <CardMenu
-                item={props.item}
-                viewer={props.viewer}
-                triggerElement={
-                  <MoreOptionsIcon
-                    size={24}
-                    strokeColor={theme.colors.grayTextContrast.toString()}
-                    orientation="horizontal"
-                  />
-                }
-                actionHandler={props.handleAction}
-              />
-            </Box>
-          </HStack>
-          <HStack alignment='start' distribution='between'>
-            <StyledText style="caption" css={{ my: '0', mt:'-$2' }}>
-              {props.item.author && (
-                <SpanBox css={{ mr: '8px' }}>
-                  {authoredByText(props.item.author)}
-                </SpanBox>
-              )
-              }
-              <SpanBox css={{ textDecorationLine: 'underline' }}>
-                {originText}
-              </SpanBox>
-            </StyledText>
-          </HStack>
-          
-        </VStack>
-        <HStack alignment='start' distribution='between' css={{
+        />
+      </Box>
+      <VStack
+        distribution="start"
+        alignment="start"
+        css={{
+          px: '0px',
           width: '100%',
-          pt: '$2',
-          px: '$1',
-          pr: '12px',
-          mt: '7px',
-          flexGrow: '1',
-        }}>
-          <StyledText
-            css={{
-              m: 0,
-              py: '0px',
-              mr: '$2',
-              maxWidth:'50%',
-              fontStyle: 'normal',
-              fontWeight: '400',
-              fontSize: '14px',
-              lineHeight: '125%',
-              color: '$grayTextContrast',
-              flexGrow: '4',
-              overflow: 'hidden',
-              display: '-webkit-box',
-              WebkitLineClamp: 5,
-              WebkitBoxOrient: "vertical",
-            }}
-          >
-            {props.item.description}
-          </StyledText>
-          {props.item.image && (
-            <CoverImage
-              src={props.item.image}
-              alt="Link Preview Image"
-              width={135}
-              height={90}
-              css={{ ml: '10px', mb: '8px', borderRadius: '3px' }}
-              onError={(e) => {
-                (e.target as HTMLElement).style.display = 'none'
-              }}
-            />
-          )}
-        </HStack>
-        <HStack css={{ mt: '8px' }}>
-              {
-                props.item.labels?.map(({description, color}, index) => <Label key={index} text={description || ''} color={color} />)
-              }
-        </HStack>
-      </VStack>
-    // </Link>
-  )
-}
-
-export function ListLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
-  const originText = siteName(props.item.originalArticleUrl, props.item.url)
-
-  return (
-    // <Link href={`/${username}/${props.item.slug}`} passHref={true}>
+          pl: '$1',
+        }}
+      >
         <HStack
+          alignment="start"
+          distribution="between"
           css={{
-            p: '$3',
-            height: '100%',
             width: '100%',
-            maxWidth: '100%',
-            borderRadius: 0,
-            cursor: 'pointer',
-            wordBreak: 'break-word',
-            border: '1px solid $grayBorder',
-            borderBottom: 'none',
-            alignItems: "center",
-          }}
-          onClick={() => {
-            props.handleAction('showDetail')
+            p: '0px',
+            mr: '-12px',
+            mt: '15px',
+            display: 'grid',
+            gridTemplateColumns: '1fr 24px',
+            gridTemplateRows: '1fr',
           }}
         >
-          <HStack
-            distribution="start"
-            alignment="end"
+          <StyledText
+            style="listTitle"
             css={{
-              px: '$2',
-              flexGrow: 1,
-              pl: '0px',
+              mt: '0',
+              mb: '0',
+              fontWeight: '700',
+              textAlign: 'left',
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+              width: '100%',
+              overflow: 'hidden',
             }}
           >
-            <StyledText
-              style="listTitle"
-              css={{ mt: '0px', mb: '$1', textAlign: 'left', lineHeight: 'normal' }}
-            >
-              {props.item.title}
-            </StyledText>
-            {props.item.author && (
-              <StyledText style="caption" css={{ my: '$1', ml: '8px' }}>
-                {authoredByText(props.item.author)}
-              </StyledText>
-            )}
-            <StyledText style="caption" css={{ my: '$1', ml: '8px', textDecorationLine: 'underline' }}>
-              {originText}
-            </StyledText>
-          </HStack>
+            {props.item.title}
+          </StyledText>
           <Box
-            css={{
-              width: '40px',
-              height: '8px',
-              mr: '$2',
-              backgroundColor: "$grayBase",
-              display: 'grid',
-              placeItems: 'center',
-              borderRadius: '6px',
-              border:  '1px solid $grayBorder',
-              px: '1px'
-            }}
-          >
-            <ProgressBar
-              fillPercentage={props.item.readingProgressPercent}
-              fillColor={theme.colors.highlight.toString()}
-              backgroundColor={theme.colors.grayTextContrast.toString()}
-              borderRadius={'8px'}
-            />  
-          </Box>
-          <Box
-            css={{ 
-              alignSelf: 'end',
-              alignItems: 'center',
-              display: 'grid',
-              placeItems: 'center',
-            }}
+            css={{ alignSelf: 'end', alignItems: 'start', height: '100%' }}
             onClick={(e) => {
               // This is here to prevent menu click events from bubbling
               // up and causing us to "click" on the link item.
@@ -313,6 +151,169 @@ export function ListLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
             />
           </Box>
         </HStack>
+        <HStack alignment="start" distribution="between">
+          <StyledText style="caption" css={{ my: '0', mt: '-$2' }}>
+            {props.item.author && (
+              <SpanBox css={{ mr: '8px' }}>
+                {authoredByText(props.item.author)}
+              </SpanBox>
+            )}
+            <SpanBox css={{ textDecorationLine: 'underline' }}>
+              {originText}
+            </SpanBox>
+          </StyledText>
+        </HStack>
+      </VStack>
+      <HStack
+        alignment="start"
+        distribution="between"
+        css={{
+          width: '100%',
+          pt: '$2',
+          px: '$1',
+          pr: '12px',
+          mt: '7px',
+          flexGrow: '1',
+        }}
+      >
+        <StyledText
+          css={{
+            m: 0,
+            py: '0px',
+            mr: '$2',
+            fontStyle: 'normal',
+            fontWeight: '400',
+            fontSize: '14px',
+            lineHeight: '125%',
+            color: '$grayTextContrast',
+            flexGrow: '4',
+            overflow: 'hidden',
+            display: '-webkit-box',
+            WebkitLineClamp: 5,
+            WebkitBoxOrient: 'vertical',
+          }}
+        >
+          {props.item.description}
+        </StyledText>
+        {props.item.image && (
+          <CoverImage
+            src={props.item.image}
+            alt="Link Preview Image"
+            width={135}
+            height={90}
+            css={{ ml: '10px', mb: '8px', borderRadius: '3px' }}
+            onError={(e) => {
+              ;(e.target as HTMLElement).style.display = 'none'
+            }}
+          />
+        )}
+      </HStack>
+      <HStack css={{ mt: '8px' }}>
+        {props.item.labels?.map(({ description, color }, index) => (
+          <LabelChip key={index} text={description || ''} color={color} />
+        ))}
+      </HStack>
+    </VStack>
+    // </Link>
+  )
+}
+
+export function ListLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
+  const originText = siteName(props.item.originalArticleUrl, props.item.url)
+
+  return (
+    // <Link href={`/${username}/${props.item.slug}`} passHref={true}>
+    <HStack
+      css={{
+        p: '$3',
+        height: '100%',
+        width: '100%',
+        maxWidth: '100%',
+        borderRadius: 0,
+        cursor: 'pointer',
+        wordBreak: 'break-word',
+        border: '1px solid $grayBorder',
+        borderBottom: 'none',
+        alignItems: 'center',
+      }}
+      onClick={() => {
+        props.handleAction('showDetail')
+      }}
+    >
+      <HStack
+        distribution="start"
+        alignment="end"
+        css={{
+          px: '$2',
+          flexGrow: 1,
+          pl: '0px',
+        }}
+      >
+        <StyledText
+          style="listTitle"
+          css={{ mt: '0px', mb: '$1', textAlign: 'left', lineHeight: 'normal' }}
+        >
+          {props.item.title}
+        </StyledText>
+        {props.item.author && (
+          <StyledText style="caption" css={{ my: '$1', ml: '8px' }}>
+            {authoredByText(props.item.author)}
+          </StyledText>
+        )}
+        <StyledText
+          style="caption"
+          css={{ my: '$1', ml: '8px', textDecorationLine: 'underline' }}
+        >
+          {originText}
+        </StyledText>
+      </HStack>
+      <Box
+        css={{
+          width: '40px',
+          height: '8px',
+          mr: '$2',
+          backgroundColor: '$grayBase',
+          display: 'grid',
+          placeItems: 'center',
+          borderRadius: '6px',
+          border: '1px solid $grayBorder',
+          px: '1px',
+        }}
+      >
+        <ProgressBar
+          fillPercentage={props.item.readingProgressPercent}
+          fillColor={theme.colors.highlight.toString()}
+          backgroundColor={theme.colors.grayTextContrast.toString()}
+          borderRadius={'8px'}
+        />
+      </Box>
+      <Box
+        css={{
+          alignSelf: 'end',
+          alignItems: 'center',
+          display: 'grid',
+          placeItems: 'center',
+        }}
+        onClick={(e) => {
+          // This is here to prevent menu click events from bubbling
+          // up and causing us to "click" on the link item.
+          e.stopPropagation()
+        }}
+      >
+        <CardMenu
+          item={props.item}
+          viewer={props.viewer}
+          triggerElement={
+            <MoreOptionsIcon
+              size={24}
+              strokeColor={theme.colors.grayTextContrast.toString()}
+              orientation="horizontal"
+            />
+          }
+          actionHandler={props.handleAction}
+        />
+      </Box>
+    </HStack>
     // </Link>
   )
 }
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index d7a60e271..cd16cf89d 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -431,7 +431,17 @@ type HomeFeedContentProps = {
 }
 
 function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
-  const { viewerData } = useGetViewerQuery()
+  const viewerData  = {
+    me: {
+      id: '1',
+      name: 'youssouf',
+      isFullUser: true,
+      profile: {
+        id: '1',
+        username: 'marzouk'
+      }
+    }
+  }
   const { preferencesData, isValidating: isValidatingPreferences } =
     useGetUserPreferences()
   const [layout, setLayout] = useState<LayoutType>(
@@ -591,7 +601,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
                     props.actionHandler(action, linkedItem)
                   }}
                 />
-              )}
+               )}
             </Box>
           ))}
         </Box>

From 20038d1d0c2986c575ab1878930691766279d7ce Mon Sep 17 00:00:00 2001
From: Satindar Dhillon <satindar@gmail.com>
Date: Mon, 28 Mar 2022 09:21:03 -0700
Subject: [PATCH 03/13] remove placeholder data

---
 .../templates/homeFeed/HomeFeedContainer.tsx        | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index cd16cf89d..48df274e4 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -431,17 +431,8 @@ type HomeFeedContentProps = {
 }
 
 function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
-  const viewerData  = {
-    me: {
-      id: '1',
-      name: 'youssouf',
-      isFullUser: true,
-      profile: {
-        id: '1',
-        username: 'marzouk'
-      }
-    }
-  }
+  const { viewerData } = useGetViewerQuery()
+
   const { preferencesData, isValidating: isValidatingPreferences } =
     useGetUserPreferences()
   const [layout, setLayout] = useState<LayoutType>(

From 159791c017990bce30aaa941b9ec0a85f4e2129d Mon Sep 17 00:00:00 2001
From: Satindar Dhillon <satindar@gmail.com>
Date: Mon, 28 Mar 2022 21:59:10 -0700
Subject: [PATCH 04/13] break linkedItemCard file into multiple files

---
 .../web/components/elements/ProgressBar.tsx   |  30 ++
 .../patterns/LibraryCards/CardTypes.tsx       |  22 ++
 .../LibraryCards/GridLinkedItemCard.tsx       | 188 ++++++++++
 .../patterns/LibraryCards/LinkedItemCard.tsx  |  23 ++
 .../LibraryCards/ListLinkedItemCard.tsx       | 104 ++++++
 .../components/patterns/LinkedItemCard.tsx    | 348 ------------------
 .../templates/homeFeed/HomeFeedContainer.tsx  |  18 +-
 7 files changed, 376 insertions(+), 357 deletions(-)
 create mode 100644 packages/web/components/elements/ProgressBar.tsx
 create mode 100644 packages/web/components/patterns/LibraryCards/CardTypes.tsx
 create mode 100644 packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx
 create mode 100644 packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx
 create mode 100644 packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx
 delete mode 100644 packages/web/components/patterns/LinkedItemCard.tsx

diff --git a/packages/web/components/elements/ProgressBar.tsx b/packages/web/components/elements/ProgressBar.tsx
new file mode 100644
index 000000000..c8d15b868
--- /dev/null
+++ b/packages/web/components/elements/ProgressBar.tsx
@@ -0,0 +1,30 @@
+import { Box } from './../elements/LayoutPrimitives'
+
+type ProgressBarProps = {
+  fillPercentage: number
+  fillColor: string
+  backgroundColor: string
+  borderRadius: string
+}
+
+export function ProgressBar(props: ProgressBarProps): JSX.Element {
+  return (
+    <Box
+      css={{
+        height: '4px',
+        width: '100%',
+        borderRadius: '$1',
+        overflow: 'hidden',
+      }}
+    >
+      <Box
+        css={{
+          height: '100%',
+          width: `${props.fillPercentage}%`,
+          backgroundColor: props.fillColor,
+          borderRadius: props.borderRadius,
+        }}
+      />
+    </Box>
+  )
+}
diff --git a/packages/web/components/patterns/LibraryCards/CardTypes.tsx b/packages/web/components/patterns/LibraryCards/CardTypes.tsx
new file mode 100644
index 000000000..6fd207761
--- /dev/null
+++ b/packages/web/components/patterns/LibraryCards/CardTypes.tsx
@@ -0,0 +1,22 @@
+import { LayoutType } from '../../templates/homeFeed/HomeFeedContainer'
+import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
+import type { LibraryItemNode } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
+
+export type LinkedItemCardAction =
+  | 'showDetail'
+  | 'showOriginal'
+  | 'archive'
+  | 'unarchive'
+  | 'delete'
+  | 'mark-read'
+  | 'mark-unread'
+  | 'share'
+  | 'snooze'
+
+export type LinkedItemCardProps = {
+  item: LibraryItemNode
+  layout: LayoutType
+  viewer: UserBasicData
+  originText?: string
+  handleAction: (action: LinkedItemCardAction) => void
+}
diff --git a/packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx b/packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx
new file mode 100644
index 000000000..bb60b4c37
--- /dev/null
+++ b/packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx
@@ -0,0 +1,188 @@
+import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
+import { CoverImage } from '../../elements/CoverImage'
+import { StyledText } from '../../elements/StyledText'
+import { authoredByText } from '../ArticleSubtitle'
+import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
+import { theme } from '../../tokens/stitches.config'
+import { CardMenu } from '../CardMenu'
+import { LabelChip } from '../../elements/LabelChip'
+import { ProgressBar } from '../../elements/ProgressBar'
+import type { LinkedItemCardProps } from './CardTypes'
+
+export function GridLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
+  return (
+    <VStack
+      css={{
+        p: '$2',
+        pr: '8px',
+        height: '100%',
+        width: '100%',
+        maxWidth: '100%',
+        borderRadius: '6px',
+        cursor: 'pointer',
+        wordBreak: 'break-word',
+        overflow: 'clip',
+        border: '1px solid $grayBorder',
+        boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
+        position: 'relative',
+      }}
+      alignment="start"
+      distribution="start"
+      onClick={() => {
+        props.handleAction('showDetail')
+      }}
+    >
+      <Box
+        css={{
+          position: 'absolute',
+          top: '1px',
+          left: '1px',
+          width: 'calc(100% - 2px)',
+          '& > div': {
+            borderRadius: '100vmax 100vmax 0 0',
+          },
+        }}
+      >
+        <ProgressBar
+          fillPercentage={props.item.readingProgressPercent}
+          fillColor={theme.colors.highlight.toString()}
+          backgroundColor={theme.colors.grayTextContrast.toString()}
+          borderRadius={
+            props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
+          }
+        />
+      </Box>
+      <VStack
+        distribution="start"
+        alignment="start"
+        css={{
+          px: '0px',
+          width: '100%',
+          pl: '$1',
+        }}
+      >
+        <HStack
+          alignment="start"
+          distribution="between"
+          css={{
+            width: '100%',
+            p: '0px',
+            mr: '-12px',
+            mt: '15px',
+            display: 'grid',
+            gridTemplateColumns: '1fr 24px',
+            gridTemplateRows: '1fr',
+          }}
+        >
+          <CardTitle title={props.item.title} />
+          <Box
+            css={{ alignSelf: 'end', alignItems: 'start', height: '100%' }}
+            onClick={(e) => {
+              // This is here to prevent menu click events from bubbling
+              // up and causing us to "click" on the link item.
+              e.stopPropagation()
+            }}
+          >
+            <CardMenu
+              item={props.item}
+              viewer={props.viewer}
+              triggerElement={
+                <MoreOptionsIcon
+                  size={24}
+                  strokeColor={theme.colors.grayTextContrast.toString()}
+                  orientation="horizontal"
+                />
+              }
+              actionHandler={props.handleAction}
+            />
+          </Box>
+        </HStack>
+        <HStack alignment="start" distribution="between">
+          <StyledText style="caption" css={{ my: '0', mt: '-$2' }}>
+            {props.item.author && (
+              <SpanBox css={{ mr: '8px' }}>
+                {authoredByText(props.item.author)}
+              </SpanBox>
+            )}
+            <SpanBox css={{ textDecorationLine: 'underline' }}>
+              {props.originText}
+            </SpanBox>
+          </StyledText>
+        </HStack>
+      </VStack>
+      <HStack
+        alignment="start"
+        distribution="between"
+        css={{
+          width: '100%',
+          pt: '$2',
+          px: '$1',
+          pr: '12px',
+          mt: '7px',
+          flexGrow: '1',
+        }}
+      >
+        <StyledText
+          css={{
+            m: 0,
+            py: '0px',
+            mr: '$2',
+            fontStyle: 'normal',
+            fontWeight: '400',
+            fontSize: '14px',
+            lineHeight: '125%',
+            color: '$grayTextContrast',
+            flexGrow: '4',
+            overflow: 'hidden',
+            display: '-webkit-box',
+            WebkitLineClamp: 5,
+            WebkitBoxOrient: 'vertical',
+          }}
+        >
+          {props.item.description}
+        </StyledText>
+        {props.item.image && (
+          <CoverImage
+            src={props.item.image}
+            alt="Link Preview Image"
+            width={135}
+            height={90}
+            css={{ ml: '10px', mb: '8px', borderRadius: '3px' }}
+            onError={(e) => {
+              ;(e.target as HTMLElement).style.display = 'none'
+            }}
+          />
+        )}
+      </HStack>
+      <HStack css={{ mt: '8px' }}>
+        {props.item.labels?.map(({ description, color }, index) => (
+          <LabelChip key={index} text={description || ''} color={color} />
+        ))}
+      </HStack>
+    </VStack>
+  )
+}
+
+type CardTitleProps = {
+  title: string
+}
+
+function CardTitle(props: CardTitleProps): JSX.Element {
+  return (
+    <StyledText
+      style="listTitle"
+      css={{
+        mt: '0',
+        mb: '0',
+        fontWeight: '700',
+        textAlign: 'left',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        width: '100%',
+        overflow: 'hidden',
+      }}
+    >
+      {props.title}
+    </StyledText>
+  )
+}
diff --git a/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx b/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx
new file mode 100644
index 000000000..12a4a4be7
--- /dev/null
+++ b/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx
@@ -0,0 +1,23 @@
+import { GridLinkedItemCard } from './GridLinkedItemCard'
+import { ListLinkedItemCard } from './ListLinkedItemCard'
+import type { LinkedItemCardProps } from './CardTypes'
+
+const siteName = (originalArticleUrl: string, itemUrl: string): string => {
+  try {
+    return new URL(originalArticleUrl).hostname
+  } catch {}
+  try {
+    return new URL(itemUrl).hostname
+  } catch {}
+  return ''
+}
+
+export function LinkedItemCard(props: LinkedItemCardProps): JSX.Element {
+  const originText = siteName(props.item.originalArticleUrl, props.item.url)
+
+  if (props.layout == 'LIST_LAYOUT') {
+    return <ListLinkedItemCard {...props} originText={originText} />
+  } else {
+    return <GridLinkedItemCard {...props} originText={originText} />
+  }
+}
diff --git a/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx b/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx
new file mode 100644
index 000000000..f842129b6
--- /dev/null
+++ b/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx
@@ -0,0 +1,104 @@
+import { Box, HStack } from '../../elements/LayoutPrimitives'
+import { StyledText } from '../../elements/StyledText'
+import { authoredByText } from '../ArticleSubtitle'
+import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
+import { theme } from '../../tokens/stitches.config'
+import { CardMenu } from '../CardMenu'
+import type { LinkedItemCardProps } from './CardTypes'
+import { ProgressBar } from '../../elements/ProgressBar'
+
+export function ListLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
+  return (
+    <HStack
+      css={{
+        p: '$3',
+        height: '100%',
+        width: '100%',
+        maxWidth: '100%',
+        borderRadius: 0,
+        cursor: 'pointer',
+        wordBreak: 'break-word',
+        border: '1px solid $grayBorder',
+        borderBottom: 'none',
+        alignItems: 'center',
+      }}
+      onClick={() => {
+        props.handleAction('showDetail')
+      }}
+    >
+      <HStack
+        distribution="start"
+        alignment="end"
+        css={{
+          px: '$2',
+          flexGrow: 1,
+          pl: '0px',
+        }}
+      >
+        <StyledText
+          style="listTitle"
+          css={{ mt: '0px', mb: '$1', textAlign: 'left', lineHeight: 'normal' }}
+        >
+          {props.item.title}
+        </StyledText>
+        {props.item.author && (
+          <StyledText style="caption" css={{ my: '$1', ml: '8px' }}>
+            {authoredByText(props.item.author)}
+          </StyledText>
+        )}
+        <StyledText
+          style="caption"
+          css={{ my: '$1', ml: '8px', textDecorationLine: 'underline' }}
+        >
+          {props.originText}
+        </StyledText>
+      </HStack>
+      <Box
+        css={{
+          width: '40px',
+          height: '8px',
+          mr: '$2',
+          backgroundColor: '$grayBase',
+          display: 'grid',
+          placeItems: 'center',
+          borderRadius: '6px',
+          border: '1px solid $grayBorder',
+          px: '1px',
+        }}
+      >
+        <ProgressBar
+          fillPercentage={props.item.readingProgressPercent}
+          fillColor={theme.colors.highlight.toString()}
+          backgroundColor={theme.colors.grayTextContrast.toString()}
+          borderRadius={'8px'}
+        />
+      </Box>
+      <Box
+        css={{
+          alignSelf: 'end',
+          alignItems: 'center',
+          display: 'grid',
+          placeItems: 'center',
+        }}
+        onClick={(e) => {
+          // This is here to prevent menu click events from bubbling
+          // up and causing us to "click" on the link item.
+          e.stopPropagation()
+        }}
+      >
+        <CardMenu
+          item={props.item}
+          viewer={props.viewer}
+          triggerElement={
+            <MoreOptionsIcon
+              size={24}
+              strokeColor={theme.colors.grayTextContrast.toString()}
+              orientation="horizontal"
+            />
+          }
+          actionHandler={props.handleAction}
+        />
+      </Box>
+    </HStack>
+  )
+}
diff --git a/packages/web/components/patterns/LinkedItemCard.tsx b/packages/web/components/patterns/LinkedItemCard.tsx
deleted file mode 100644
index ad061e3a0..000000000
--- a/packages/web/components/patterns/LinkedItemCard.tsx
+++ /dev/null
@@ -1,348 +0,0 @@
-import { Box, VStack, HStack, SpanBox } from './../elements/LayoutPrimitives'
-import type { LibraryItemNode } from '../../lib/networking/queries/useGetLibraryItemsQuery'
-import { CoverImage } from './../elements/CoverImage'
-import { StyledText } from './../elements/StyledText'
-import { authoredByText } from './../patterns/ArticleSubtitle'
-import { MoreOptionsIcon } from './../elements/images/MoreOptionsIcon'
-import { theme } from './../tokens/stitches.config'
-import { CardMenu } from './../patterns/CardMenu'
-import { LayoutType } from '../templates/homeFeed/HomeFeedContainer'
-import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery'
-import { LabelChip } from './../elements/LabelChip'
-
-export type LinkedItemCardAction =
-  | 'showDetail'
-  | 'showOriginal'
-  | 'archive'
-  | 'unarchive'
-  | 'delete'
-  | 'mark-read'
-  | 'mark-unread'
-  | 'share'
-  | 'snooze'
-
-type LinkedItemCardProps = {
-  item: LibraryItemNode
-  layout: LayoutType
-  viewer: UserBasicData
-  handleAction: (action: LinkedItemCardAction) => void
-}
-
-const siteName = (originalArticleUrl: string, itemUrl: string): string => {
-  try {
-    return new URL(originalArticleUrl).hostname
-  } catch {}
-  try {
-    return new URL(itemUrl).hostname
-  } catch {}
-  return ''
-}
-
-export function LinkedItemCard(props: LinkedItemCardProps): JSX.Element {
-  if (props.layout == 'LIST_LAYOUT') {
-    return <ListLinkedItemCard {...props} />
-  } else {
-    return <GridLinkedItemCard {...props} />
-  }
-}
-
-export function GridLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
-  const originText = siteName(props.item.originalArticleUrl, props.item.url)
-
-  return (
-    // <Link href={`/${username}/${props.item.slug}`} passHref={true}>
-    <VStack
-      css={{
-        p: '$2',
-        pr: '8px',
-        height: '100%',
-        width: '100%',
-        maxWidth: '100%',
-        borderRadius: '6px',
-        cursor: 'pointer',
-        wordBreak: 'break-word',
-        overflow: 'clip',
-        border: '1px solid $grayBorder',
-        boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
-        position: 'relative',
-      }}
-      alignment="start"
-      distribution="start"
-      onClick={() => {
-        props.handleAction('showDetail')
-      }}
-    >
-      <Box
-        css={{
-          position: 'absolute',
-          top: '1px',
-          left: '1px',
-          width: 'calc(100% - 2px)',
-          '& > div': {
-            borderRadius: '100vmax 100vmax 0 0',
-          },
-        }}
-      >
-        <ProgressBar
-          fillPercentage={props.item.readingProgressPercent}
-          fillColor={theme.colors.highlight.toString()}
-          backgroundColor={theme.colors.grayTextContrast.toString()}
-          borderRadius={
-            props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
-          }
-        />
-      </Box>
-      <VStack
-        distribution="start"
-        alignment="start"
-        css={{
-          px: '0px',
-          width: '100%',
-          pl: '$1',
-        }}
-      >
-        <HStack
-          alignment="start"
-          distribution="between"
-          css={{
-            width: '100%',
-            p: '0px',
-            mr: '-12px',
-            mt: '15px',
-            display: 'grid',
-            gridTemplateColumns: '1fr 24px',
-            gridTemplateRows: '1fr',
-          }}
-        >
-          <StyledText
-            style="listTitle"
-            css={{
-              mt: '0',
-              mb: '0',
-              fontWeight: '700',
-              textAlign: 'left',
-              whiteSpace: 'nowrap',
-              textOverflow: 'ellipsis',
-              width: '100%',
-              overflow: 'hidden',
-            }}
-          >
-            {props.item.title}
-          </StyledText>
-          <Box
-            css={{ alignSelf: 'end', alignItems: 'start', height: '100%' }}
-            onClick={(e) => {
-              // This is here to prevent menu click events from bubbling
-              // up and causing us to "click" on the link item.
-              e.stopPropagation()
-            }}
-          >
-            <CardMenu
-              item={props.item}
-              viewer={props.viewer}
-              triggerElement={
-                <MoreOptionsIcon
-                  size={24}
-                  strokeColor={theme.colors.grayTextContrast.toString()}
-                  orientation="horizontal"
-                />
-              }
-              actionHandler={props.handleAction}
-            />
-          </Box>
-        </HStack>
-        <HStack alignment="start" distribution="between">
-          <StyledText style="caption" css={{ my: '0', mt: '-$2' }}>
-            {props.item.author && (
-              <SpanBox css={{ mr: '8px' }}>
-                {authoredByText(props.item.author)}
-              </SpanBox>
-            )}
-            <SpanBox css={{ textDecorationLine: 'underline' }}>
-              {originText}
-            </SpanBox>
-          </StyledText>
-        </HStack>
-      </VStack>
-      <HStack
-        alignment="start"
-        distribution="between"
-        css={{
-          width: '100%',
-          pt: '$2',
-          px: '$1',
-          pr: '12px',
-          mt: '7px',
-          flexGrow: '1',
-        }}
-      >
-        <StyledText
-          css={{
-            m: 0,
-            py: '0px',
-            mr: '$2',
-            fontStyle: 'normal',
-            fontWeight: '400',
-            fontSize: '14px',
-            lineHeight: '125%',
-            color: '$grayTextContrast',
-            flexGrow: '4',
-            overflow: 'hidden',
-            display: '-webkit-box',
-            WebkitLineClamp: 5,
-            WebkitBoxOrient: 'vertical',
-          }}
-        >
-          {props.item.description}
-        </StyledText>
-        {props.item.image && (
-          <CoverImage
-            src={props.item.image}
-            alt="Link Preview Image"
-            width={135}
-            height={90}
-            css={{ ml: '10px', mb: '8px', borderRadius: '3px' }}
-            onError={(e) => {
-              ;(e.target as HTMLElement).style.display = 'none'
-            }}
-          />
-        )}
-      </HStack>
-      <HStack css={{ mt: '8px' }}>
-        {props.item.labels?.map(({ description, color }, index) => (
-          <LabelChip key={index} text={description || ''} color={color} />
-        ))}
-      </HStack>
-    </VStack>
-    // </Link>
-  )
-}
-
-export function ListLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
-  const originText = siteName(props.item.originalArticleUrl, props.item.url)
-
-  return (
-    // <Link href={`/${username}/${props.item.slug}`} passHref={true}>
-    <HStack
-      css={{
-        p: '$3',
-        height: '100%',
-        width: '100%',
-        maxWidth: '100%',
-        borderRadius: 0,
-        cursor: 'pointer',
-        wordBreak: 'break-word',
-        border: '1px solid $grayBorder',
-        borderBottom: 'none',
-        alignItems: 'center',
-      }}
-      onClick={() => {
-        props.handleAction('showDetail')
-      }}
-    >
-      <HStack
-        distribution="start"
-        alignment="end"
-        css={{
-          px: '$2',
-          flexGrow: 1,
-          pl: '0px',
-        }}
-      >
-        <StyledText
-          style="listTitle"
-          css={{ mt: '0px', mb: '$1', textAlign: 'left', lineHeight: 'normal' }}
-        >
-          {props.item.title}
-        </StyledText>
-        {props.item.author && (
-          <StyledText style="caption" css={{ my: '$1', ml: '8px' }}>
-            {authoredByText(props.item.author)}
-          </StyledText>
-        )}
-        <StyledText
-          style="caption"
-          css={{ my: '$1', ml: '8px', textDecorationLine: 'underline' }}
-        >
-          {originText}
-        </StyledText>
-      </HStack>
-      <Box
-        css={{
-          width: '40px',
-          height: '8px',
-          mr: '$2',
-          backgroundColor: '$grayBase',
-          display: 'grid',
-          placeItems: 'center',
-          borderRadius: '6px',
-          border: '1px solid $grayBorder',
-          px: '1px',
-        }}
-      >
-        <ProgressBar
-          fillPercentage={props.item.readingProgressPercent}
-          fillColor={theme.colors.highlight.toString()}
-          backgroundColor={theme.colors.grayTextContrast.toString()}
-          borderRadius={'8px'}
-        />
-      </Box>
-      <Box
-        css={{
-          alignSelf: 'end',
-          alignItems: 'center',
-          display: 'grid',
-          placeItems: 'center',
-        }}
-        onClick={(e) => {
-          // This is here to prevent menu click events from bubbling
-          // up and causing us to "click" on the link item.
-          e.stopPropagation()
-        }}
-      >
-        <CardMenu
-          item={props.item}
-          viewer={props.viewer}
-          triggerElement={
-            <MoreOptionsIcon
-              size={24}
-              strokeColor={theme.colors.grayTextContrast.toString()}
-              orientation="horizontal"
-            />
-          }
-          actionHandler={props.handleAction}
-        />
-      </Box>
-    </HStack>
-    // </Link>
-  )
-}
-
-type ProgressBarProps = {
-  fillPercentage: number
-  fillColor: string
-  backgroundColor: string
-  borderRadius: string
-}
-
-function ProgressBar(props: ProgressBarProps): JSX.Element {
-  return (
-    <Box
-      css={{
-        height: '4px',
-        width: '100%',
-        borderRadius: '$1',
-        overflow: 'hidden',
-      }}
-    >
-      <Box
-        css={{
-          height: '100%',
-          width: `${props.fillPercentage}%`,
-          backgroundColor: props.fillColor,
-          borderRadius: props.borderRadius,
-        }}
-      />
-    </Box>
-  )
-}
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index 48df274e4..56a53f5c1 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -5,10 +5,8 @@ import type {
   LibraryItem,
   LibraryItemsQueryInput,
 } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
-import {
-  LinkedItemCard,
-  LinkedItemCardAction,
-} from '../../patterns/LinkedItemCard'
+import { LinkedItemCardAction } from '../../patterns/LibraryCards/CardTypes'
+import { LinkedItemCard } from '../../patterns/LibraryCards/LinkedItemCard'
 import { useRouter } from 'next/router'
 import { Button } from '../../elements/Button'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -573,13 +571,15 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
                 },
                 '&:focus': {
                   '> div': {
-                    boxShadow: layout === 'LIST_LAYOUT' ? 'none' : '$cardItemShadow',
-                  }
+                    boxShadow:
+                      layout === 'LIST_LAYOUT' ? 'none' : '$cardItemShadow',
+                  },
                 },
                 '&:hover': {
                   '> div': {
-                    boxShadow:  layout === 'LIST_LAYOUT' ? 'none' : '$cardItemShadow',
-                  }
+                    boxShadow:
+                      layout === 'LIST_LAYOUT' ? 'none' : '$cardItemShadow',
+                  },
                 },
               }}
             >
@@ -592,7 +592,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
                     props.actionHandler(action, linkedItem)
                   }}
                 />
-               )}
+              )}
             </Box>
           ))}
         </Box>

From 6df107fc4024f24cd84f4120fd4cc86eaae9dd7b Mon Sep 17 00:00:00 2001
From: Satindar Dhillon <satindar@gmail.com>
Date: Mon, 28 Mar 2022 22:28:08 -0700
Subject: [PATCH 05/13] use a vstack for library list card on narrow widths

---
 .../LibraryCards/ListLinkedItemCard.tsx       | 109 +++++++++++++++++-
 1 file changed, 108 insertions(+), 1 deletion(-)

diff --git a/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx b/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx
index f842129b6..3a8af1b1c 100644
--- a/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx
@@ -1,4 +1,9 @@
-import { Box, HStack } from '../../elements/LayoutPrimitives'
+import {
+  Box,
+  HStack,
+  VStack,
+  MediumBreakpointBox,
+} from '../../elements/LayoutPrimitives'
 import { StyledText } from '../../elements/StyledText'
 import { authoredByText } from '../ArticleSubtitle'
 import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
@@ -8,6 +13,108 @@ import type { LinkedItemCardProps } from './CardTypes'
 import { ProgressBar } from '../../elements/ProgressBar'
 
 export function ListLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
+  return (
+    <MediumBreakpointBox
+      smallerLayoutNode={<ListLinkedItemCardNarrow {...props} />}
+      largerLayoutNode={<ListLinkedItemCardWide {...props} />}
+    />
+  )
+}
+
+export function ListLinkedItemCardNarrow(
+  props: LinkedItemCardProps
+): JSX.Element {
+  return (
+    <HStack
+      css={{
+        p: '$3',
+        height: '100%',
+        width: '100%',
+        maxWidth: '100%',
+        borderRadius: 0,
+        cursor: 'pointer',
+        wordBreak: 'break-word',
+        border: '1px solid $grayBorder',
+        borderBottom: 'none',
+        alignItems: 'center',
+      }}
+      onClick={() => {
+        props.handleAction('showDetail')
+      }}
+    >
+      <HStack
+        distribution="start"
+        alignment="end"
+        css={{
+          px: '$2',
+          flexGrow: 1,
+          pl: '0px',
+        }}
+      >
+        <VStack>
+          <StyledText
+            style="listTitle"
+            css={{
+              mt: '0px',
+              mb: '$1',
+              textAlign: 'left',
+              lineHeight: 'normal',
+            }}
+          >
+            {props.item.title}
+          </StyledText>
+          <HStack>
+            {props.item.author && (
+              <StyledText style="caption" css={{ my: '$1' }}>
+                {authoredByText(props.item.author)}
+              </StyledText>
+            )}
+            <StyledText
+              style="caption"
+              css={{
+                my: '$1',
+                ml: props.item.author ? '8px' : 0,
+                textDecorationLine: 'underline',
+              }}
+            >
+              {props.originText}
+            </StyledText>
+          </HStack>
+        </VStack>
+      </HStack>
+      <Box
+        css={{
+          alignSelf: 'end',
+          alignItems: 'center',
+          display: 'grid',
+          placeItems: 'center',
+        }}
+        onClick={(e) => {
+          // This is here to prevent menu click events from bubbling
+          // up and causing us to "click" on the link item.
+          e.stopPropagation()
+        }}
+      >
+        <CardMenu
+          item={props.item}
+          viewer={props.viewer}
+          triggerElement={
+            <MoreOptionsIcon
+              size={24}
+              strokeColor={theme.colors.grayTextContrast.toString()}
+              orientation="horizontal"
+            />
+          }
+          actionHandler={props.handleAction}
+        />
+      </Box>
+    </HStack>
+  )
+}
+
+export function ListLinkedItemCardWide(
+  props: LinkedItemCardProps
+): JSX.Element {
   return (
     <HStack
       css={{

From 85a192bc5803612d2e4c99e45da4000749443f94 Mon Sep 17 00:00:00 2001
From: Satindar Dhillon <satindar@gmail.com>
Date: Wed, 30 Mar 2022 22:40:59 -0700
Subject: [PATCH 06/13] use grid for displaying narrow cards

---
 .../patterns/LibraryCards/ListLinkedItemCard.tsx          | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx b/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx
index 3a8af1b1c..98a4af2f8 100644
--- a/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx
@@ -25,7 +25,7 @@ export function ListLinkedItemCardNarrow(
   props: LinkedItemCardProps
 ): JSX.Element {
   return (
-    <HStack
+    <Box
       css={{
         p: '$3',
         height: '100%',
@@ -37,6 +37,9 @@ export function ListLinkedItemCardNarrow(
         border: '1px solid $grayBorder',
         borderBottom: 'none',
         alignItems: 'center',
+        display: 'grid',
+        gridTemplateColumns: '1fr 24px',
+        gridTemplateRows: '1fr',
       }}
       onClick={() => {
         props.handleAction('showDetail')
@@ -47,7 +50,6 @@ export function ListLinkedItemCardNarrow(
         alignment="end"
         css={{
           px: '$2',
-          flexGrow: 1,
           pl: '0px',
         }}
       >
@@ -108,7 +110,7 @@ export function ListLinkedItemCardNarrow(
           actionHandler={props.handleAction}
         />
       </Box>
-    </HStack>
+    </Box>
   )
 }
 

From dc028466d0c58dd3f9cf80727a9a021165b70af1 Mon Sep 17 00:00:00 2001
From: Satindar Dhillon <satindar@gmail.com>
Date: Wed, 6 Apr 2022 12:32:38 -0700
Subject: [PATCH 07/13] resolve merge conflict

---
 packages/web/components/tokens/stitches.config.ts | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index c93edfaf4..f76568b3d 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -102,7 +102,8 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
       borderStyles: {},
       shadows: {
         panelShadow: '0px 4px 18px rgba(120, 123, 134, 0.12)',
-        cardBoxShadow: '0px 0px 9px -2px rgba(32, 31, 29, 0.09), 0px 7px 12px rgba(32, 31, 29, 0.07)'
+        cardBoxShadow:
+          '0px 0px 9px -2px rgba(32, 31, 29, 0.09), 0px 7px 12px rgba(32, 31, 29, 0.07)',
       },
       zIndices: {},
       transitions: {},
@@ -146,7 +147,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         // Avatar Fallback color
         avatarBg: '#FFFFFF',
         avatarFont: '#0A0806',
-        tooltipIcons: '#FDFAEC'
+        tooltipIcons: '#FDFAEC',
       },
     },
     media: {
@@ -193,13 +194,9 @@ const darkThemeSpec = {
     avatarFont: 'rgba(255, 255, 255, 0.8)',
   },
   shadows: {
-<<<<<<< HEAD
-    cardItemShadow: '0px 8px 32px rgba(255, 255, 255, 0.33)',
+    cardBoxShadow:
+      '0px 0px 9px -2px rgba(32, 31, 29, 0.09), 0px 7px 12px rgba(32, 31, 29, 0.07)',
   },
-=======
-    cardBoxShadow: '0px 0px 9px -2px rgba(32, 31, 29, 0.09), 0px 7px 12px rgba(32, 31, 29, 0.07)'
-  }
->>>>>>> main
 }
 
 // Avatar Fallback color

From 2af85d567ec6143bd47e86621310fa0a057cc9fa Mon Sep 17 00:00:00 2001
From: Satindar Dhillon <satindar@gmail.com>
Date: Wed, 6 Apr 2022 12:56:01 -0700
Subject: [PATCH 08/13] specift correct grid card shadow hover

---
 packages/web/components/tokens/stitches.config.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index f76568b3d..86e384781 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -102,6 +102,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
       borderStyles: {},
       shadows: {
         panelShadow: '0px 4px 18px rgba(120, 123, 134, 0.12)',
+        cardItemShadow: '0px 8px 32px rgba(32, 31, 29, 0.33)',
         cardBoxShadow:
           '0px 0px 9px -2px rgba(32, 31, 29, 0.09), 0px 7px 12px rgba(32, 31, 29, 0.07)',
       },
@@ -194,6 +195,7 @@ const darkThemeSpec = {
     avatarFont: 'rgba(255, 255, 255, 0.8)',
   },
   shadows: {
+    cardItemShadow: '0px 8px 32px rgba(255, 255, 255, 0.33)',
     cardBoxShadow:
       '0px 0px 9px -2px rgba(32, 31, 29, 0.09), 0px 7px 12px rgba(32, 31, 29, 0.07)',
   },

From 5711df84592c3209b54d74e5f306088a1119e5b4 Mon Sep 17 00:00:00 2001
From: Satindar Dhillon <satindar@gmail.com>
Date: Wed, 6 Apr 2022 13:43:41 -0700
Subject: [PATCH 09/13] add top margin to web library list on narrow screens

---
 .../web/components/templates/homeFeed/HomeFeedContainer.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index 4cba9c3c1..98973a84b 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -560,7 +560,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
             '@smDown': {
               border: 'unset',
               width: layout == 'LIST_LAYOUT' ? '100vw' : undefined,
-              margin: layout == 'LIST_LAYOUT' ? '0 -16px' : undefined,
+              margin: layout == 'LIST_LAYOUT' ? '16px -16px' : undefined,
               borderRadius: layout == 'LIST_LAYOUT' ? 0 : undefined,
             },
             '@md': {

From 2ef5a59d4cfe11c208ae6954af31df06f85bab87 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 6 Apr 2022 13:51:52 -0700
Subject: [PATCH 10/13] Use the background styles instead of box shadows on new
 cards

---
 .../web/components/templates/homeFeed/HomeFeedContainer.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index 98973a84b..e0cdd68cb 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -585,14 +585,12 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
                 },
                 '&:focus': {
                   '> div': {
-                    boxShadow:
-                      layout === 'LIST_LAYOUT' ? 'none' : '$cardItemShadow',
+                    bg: '$grayBgActive',
                   },
                 },
                 '&:hover': {
                   '> div': {
-                    boxShadow:
-                      layout === 'LIST_LAYOUT' ? 'none' : '$cardItemShadow',
+                    bg: '$grayBgActive',
                   },
                 },
               }}

From 1402e8b6f8acde1470b9875439ea61cd2216e443 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 6 Apr 2022 14:22:41 -0700
Subject: [PATCH 11/13] Attempt to load a second page of data after the first

---
 .../components/templates/homeFeed/HomeFeedContainer.tsx   | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index e0cdd68cb..efb8905d1 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -113,6 +113,14 @@ export function HomeFeedContainer(props: HomeFeedContainerProps): JSX.Element {
     setSize(size + 1)
   }, [size, isValidating])
 
+  useEffect(() => {
+    console.log('size, hasMore, isValidating', size, hasMore, isValidating)
+    if (isValidating || !hasMore || size !== 1) {
+      return
+    }
+    setSize(size + 1)
+  }, [size, isValidating])
+
   const focusFirstItem = useCallback(() => {
     if (libraryItems.length < 1) {
       return

From ff415b80a1a6922d798c33e68be3ff89410fecd6 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 6 Apr 2022 14:35:09 -0700
Subject: [PATCH 12/13] Remove unneeded debug line

---
 packages/web/components/templates/homeFeed/HomeFeedContainer.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index efb8905d1..b25ce4480 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -114,7 +114,6 @@ export function HomeFeedContainer(props: HomeFeedContainerProps): JSX.Element {
   }, [size, isValidating])
 
   useEffect(() => {
-    console.log('size, hasMore, isValidating', size, hasMore, isValidating)
     if (isValidating || !hasMore || size !== 1) {
       return
     }

From 69fcff3099c4edb933102c89c088a9eeb44d85d5 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 6 Apr 2022 14:44:04 -0700
Subject: [PATCH 13/13] Remove unused theme colour

---
 packages/web/components/tokens/stitches.config.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index d87a62091..7e9500fcf 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -102,7 +102,6 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
       borderStyles: {},
       shadows: {
         panelShadow: '0px 4px 18px rgba(120, 123, 134, 0.12)',
-        cardItemShadow: '0px 8px 32px rgba(32, 31, 29, 0.33)',
         cardBoxShadow:
           '0px 0px 9px -2px rgba(32, 31, 29, 0.09), 0px 7px 12px rgba(32, 31, 29, 0.07)',
       },
@@ -199,7 +198,6 @@ const darkThemeSpec = {
     labelButtonsBg: '#5F5E58',
   },
   shadows: {
-    cardItemShadow: '0px 8px 32px rgba(255, 255, 255, 0.33)',
     cardBoxShadow:
       '0px 0px 9px -2px rgba(32, 31, 29, 0.09), 0px 7px 12px rgba(32, 31, 29, 0.07)',
   },