Merge pull request #3596 from omnivore-app/fix/web-layout-fixes

Small layout fixes for mobile
omnivore-app · Feb 29, 2024 · a743775 · a743775
2 parents 81d0648 + 34ee75c
commit a743775
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 26 deletions.
diff --git a/packages/api/src/jobs/ai-summarize.ts b/packages/api/src/jobs/ai-summarize.ts
@@ -7,6 +7,7 @@ import { libraryItemRepository } from '../repository/library_item'
 import { htmlToMarkdown } from '../utils/parser'
 import { AISummary } from '../entity/AISummary'
 import { LibraryItemState } from '../entity/library_item'
+import { getAISummary } from '../services/ai-summaries'
 
 export interface AISummarizeJobData {
   userId: string
@@ -35,6 +36,19 @@ export const aiSummarize = async (jobData: AISummarizeJobData) => {
       return
     }
 
+    const existingSummary = await getAISummary({
+      userId: jobData.userId,
+      idx: 'latest',
+      libraryItemId: jobData.libraryItemId,
+    })
+
+    if (existingSummary) {
+      logger.info(
+        `Library item already has a summary: ${jobData.libraryItemId}`
+      )
+      return
+    }
+
     const llm = new ChatOpenAI({
       configuration: {
         apiKey: process.env.OPENAI_API_KEY,

diff --git a/packages/web/components/elements/FormElements.tsx b/packages/web/components/elements/FormElements.tsx
@@ -41,6 +41,9 @@ export const FormInput = styled('input', {
   '&:focus': {
     outline: 'none',
   },
+  '@mdDown': {
+    pl: '5px',
+  },
 })
 
 export const FormLabel = styled('label', {

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -74,9 +74,11 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
         overflow: 'hidden',
         cursor: 'pointer',
         '@media (max-width: 930px)': {
-          // m: '15px',
           width: 'calc(100% - 30px)',
         },
+        '@mdDown': {
+          width: '100%',
+        },
       }}
       alignment="start"
       distribution="start"

diff --git a/packages/web/components/templates/homeFeed/FetchItemsError.tsx b/packages/web/components/templates/homeFeed/FetchItemsError.tsx
@@ -1,4 +1,4 @@
-import { VStack } from '../../elements/LayoutPrimitives'
+import { Box, SpanBox, VStack } from '../../elements/LayoutPrimitives'
 import { StyledText } from '../../elements/StyledText'
 import { ErrorSlothIcon } from '../../elements/icons/ErrorSlothIcon'
 import { DEFAULT_HEADER_HEIGHT } from './HeaderSpacer'
@@ -13,6 +13,7 @@ export const FetchItemsError = (): JSX.Element => {
         width: '100%',
         height: '100%',
         pb: '100px',
+        px: '30px',
         minHeight: `calc(100vh - ${DEFAULT_HEADER_HEIGHT})`,
       }}
     >
@@ -30,16 +31,15 @@ export const FetchItemsError = (): JSX.Element => {
       >
         Something has gone wrong.
       </StyledText>
-      <StyledText
+      <SpanBox
         css={{
-          display: 'flex',
           marginBlockStart: '0px',
           marginBlockEnd: '0px',
           fontSize: '15px',
           lineHeight: '125%',
           fontFamily: '$inter',
           color: '$thTextSubtle2',
-          whiteSpace: 'nowrap',
+          textAlign: 'center',
         }}
       >
         We have encountered unexpected problems.{' '}
@@ -50,7 +50,7 @@ export const FetchItemsError = (): JSX.Element => {
         >
           Get help
         </a>
-      </StyledText>
+      </SpanBox>
     </VStack>
   )
 }
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -49,7 +49,6 @@ export const headerControlWidths = (
   return {
     width: '95%',
     '@mdDown': {
-      padding: '15px',
       width: '100%',
     },
     '@media (min-width: 930px)': {
@@ -135,18 +134,26 @@ function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
 }
 
 const HeaderControls = (props: LibraryHeaderProps): JSX.Element => {
+  const [searchBoxFocused, setSearchBoxFocused] = useState(false)
+
   return (
     <>
-      <SpanBox
-        css={{
-          display: 'none',
-          '@mdDown': { display: 'flex' },
-        }}
-      >
-        <MenuHeaderButton {...props} />
-      </SpanBox>
+      {!searchBoxFocused && (
+        <SpanBox
+          css={{
+            display: 'none',
+            '@mdDown': { display: 'flex' },
+          }}
+        >
+          <MenuHeaderButton {...props} />
+        </SpanBox>
+      )}
 
-      <SearchBox {...props} />
+      <SearchBox
+        {...props}
+        searchBoxFocused={searchBoxFocused}
+        setSearchBoxFocused={setSearchBoxFocused}
+      />
 
       <SpanBox css={{ display: 'flex', ml: 'auto', gap: '10px' }}>
         {userHasFeature(props.viewer, 'ai-summaries') && (
@@ -243,9 +250,13 @@ export function MenuHeaderButton(props: MenuHeaderButtonProps): JSX.Element {
   )
 }
 
-export function SearchBox(props: LibraryHeaderProps): JSX.Element {
+type SearchBoxProps = LibraryHeaderProps & {
+  searchBoxFocused: boolean
+  setSearchBoxFocused: (show: boolean) => void
+}
+
+export function SearchBox(props: SearchBoxProps): JSX.Element {
   const inputRef = useRef<HTMLInputElement | null>(null)
-  const [focused, setFocused] = useState(false)
   const [searchTerm, setSearchTerm] = useState(props.searchTerm ?? '')
 
   useEffect(() => {
@@ -272,7 +283,7 @@ export function SearchBox(props: LibraryHeaderProps): JSX.Element {
         maxWidth: '521px',
         bg: '$thLibrarySearchbox',
         borderRadius: '6px',
-        boxShadow: focused
+        boxShadow: props.searchBoxFocused
           ? 'none'
           : '0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);',
       }}
@@ -306,7 +317,7 @@ export function SearchBox(props: LibraryHeaderProps): JSX.Element {
           alignment="center"
           distribution="start"
           css={{
-            border: focused
+            border: props.searchBoxFocused
               ? '2px solid $searchActiveOutline'
               : '2px solid transparent',
             borderTopRightRadius: '6px',
@@ -331,10 +342,10 @@ export function SearchBox(props: LibraryHeaderProps): JSX.Element {
               placeholder="Search keywords or labels"
               onFocus={(event) => {
                 event.target.select()
-                setFocused(true)
+                props.setSearchBoxFocused(true)
               }}
               onBlur={() => {
-                setFocused(false)
+                props.setSearchBoxFocused(false)
               }}
               onChange={(event) => {
                 setSearchTerm(event.target.value)

diff --git a/packages/web/components/templates/homeFeed/MultiSelectControls.tsx b/packages/web/components/templates/homeFeed/MultiSelectControls.tsx
@@ -21,7 +21,6 @@ export const MultiSelectControls = (props: LibraryHeaderProps): JSX.Element => {
   const [hoverColor, setHoverColor] = useState<string>(
     theme.colors.thTextContrast2.toString()
   )
-  const compact = false
 
   return (
     <Box
@@ -45,7 +44,7 @@ export const MultiSelectControls = (props: LibraryHeaderProps): JSX.Element => {
         css={{
           width: '100%',
           height: '100%',
-          pr: compact ? '5px' : '10px',
+          pr: '10px',
         }}
         onClick={(e) => {
           e.preventDefault()
@@ -81,17 +80,37 @@ export const MultiSelectControls = (props: LibraryHeaderProps): JSX.Element => {
             border: '2px solid transparent',
             width: '100%',
             height: '100%',
+            '@mdDown': {
+              pl: '5px',
+            },
           }}
         >
           <SpanBox
             css={{
+              display: 'flex',
               fontSize: '14px',
               fontFamily: '$display',
               marginRight: 'auto',
+              '@mdDown': {
+                display: 'none',
+              },
             }}
           >
             {props.numItemsSelected} items selected
           </SpanBox>
+          <SpanBox
+            css={{
+              display: 'none',
+              fontSize: '14px',
+              fontFamily: '$display',
+              marginRight: 'auto',
+              '@mdDown': {
+                display: 'flex',
+              },
+            }}
+          >
+            {props.numItemsSelected} items
+          </SpanBox>
           <ArchiveButton {...props} />
           <AddLabelsButton setShowLabelsModal={setShowLabelsModal} />
           <RemoveItemsButton setShowConfirmDelete={setShowConfirmDelete} />

diff --git a/packages/web/components/templates/homeFeed/TLDRLayout.tsx b/packages/web/components/templates/homeFeed/TLDRLayout.tsx
@@ -58,11 +58,14 @@ export function TLDRLayout(props: TLDRLayoutProps): JSX.Element {
         {props.isValidating && props.items.length == 0 && <TopBarProgress />}
 
         {props.items.map((item) => {
-          const source = siteName(
+          const sourceName = siteName(
             item.node.originalArticleUrl,
             item.node.url,
             item.node.siteName
           )
+          const source =
+            sourceName == item.node.author ? undefined : item.node.author
+
           return (
             <VStack key={`tldr-${item.node.id}`} css={{ gap: '10px' }}>
               <HStack
@@ -96,6 +99,12 @@ export function TLDRLayout(props: TLDRLayoutProps): JSX.Element {
                       display: 'flex',
                       fontFamily: '$inter',
                       fontSize: '16px',
+                      maxWidth: '150px',
+                      maxLines: '1',
+                      textOverflow: 'ellipsis',
+                      '@mdDown': {
+                        fontSize: '12px',
+                      },
                     }}
                   >
                     {item.node.siteName}
@@ -104,9 +113,14 @@ export function TLDRLayout(props: TLDRLayoutProps): JSX.Element {
                 {source && item.node.author && (
                   <SpanBox
                     css={{
+                      maxLines: '1',
                       display: 'flex',
                       fontFamily: '$inter',
-                      fontSize: '16px',
+                      maxWidth: '150px',
+                      textOverflow: 'ellipsis',
+                      '@mdDown': {
+                        fontSize: '12px',
+                      },
                     }}
                   >
                     •
@@ -118,6 +132,12 @@ export function TLDRLayout(props: TLDRLayoutProps): JSX.Element {
                       display: 'flex',
                       fontFamily: '$inter',
                       fontSize: '16px',
+                      maxWidth: '120px',
+                      maxLines: '1',
+                      textOverflow: 'ellipsis',
+                      '@mdDown': {
+                        fontSize: '12px',
+                      },
                     }}
                   >
                     {item.node.author}
@@ -145,6 +165,7 @@ export function TLDRLayout(props: TLDRLayoutProps): JSX.Element {
                       fontFamily: '$inter',
                       fontWeight: '700',
                       fontSize: '20px',
+                      wordBreak: 'break-all',
                       textDecoration: 'underline',
                       a: {
                         color: '$thTLDRText',