Fix some bugs regarding scrolling, fix some UI Issues, and correct the name of Non-feed Filter.

packages/api/src/resolvers/filters/index.ts

@@ -253,7 +253,7 @@ export const updateFilterResolver = authorized<
       }
     }
 
-    if (input.position && filter.position != input.position) {
+    if (!isNil(input.position) && filter.position != input.position) {
       await updatePosition(uid, filter, input.position)
     }
 
@@ -328,9 +328,8 @@ export const moveFilterResolver = authorized<
       return { filter }
     }
 
-    const oldPosition = filter.position
     // if afterFilterId is not provided, move to the top
-    let newPosition = 1
+    let newPosition = 0
     if (afterFilterId) {
       const afterFilter = await getRepository(Filter).findOne({
         where: { id: afterFilterId },
@@ -348,35 +347,7 @@ export const moveFilterResolver = authorized<
       }
       newPosition = afterFilter.position
     }
-    const moveUp = newPosition < oldPosition
-
-    // move filter to the new position
-    const updated = await AppDataSource.transaction(async (t) => {
-      await setClaims(t, uid)
-
-      // update the position of the other filters
-      const updated = await t.getRepository(Filter).update(
-        {
-          user: { id: uid },
-          position: Between(
-            Math.min(newPosition, oldPosition),
-            Math.max(newPosition, oldPosition)
-          ),
-        },
-        {
-          position: () => `position + ${moveUp ? 1 : -1}`,
-        }
-      )
-      if (!updated.affected) {
-        return null
-      }
-
-      // update the position of the filter
-      return t.getRepository(Filter).save({
-        ...filter,
-        position: newPosition,
-      })
-    })
+    const updated = await updatePosition(uid, filter, newPosition)
 
     if (!updated) {
       return {

packages/api/src/services/create_user.ts

@@ -108,7 +108,7 @@ const createDefaultFiltersForUser =
     const defaultFilters = [
       { name: 'Inbox', filter: 'in:inbox' },
       { name: 'Continue Reading', filter: 'in:inbox sort:read-desc is:unread' },
-      { name: 'Read Later', filter: 'in:library' },
+      { name: 'Non-Feed Items', filter: 'in:library' },
       { name: 'Highlights', filter: 'has:highlights mode:highlights' },
       { name: 'Unlabelled', filter: 'no:label' },
       { name: 'Archived', filter: 'in:archive' },

packages/db/migrations/0119.do.add_defaults_to_filters.sql

@@ -37,7 +37,7 @@ FROM omnivore.user
 ON CONFLICT DO NOTHING;
 
 INSERT INTO omnivore.filters (user_id, category, name,  filter, position, default_filter)
-SELECT id, 'Search', 'Read Later', 'in:library', 2, true
+SELECT id, 'Search', 'Non-Feed Items', 'in:library', 2, true
 FROM omnivore.user
 ON CONFLICT DO NOTHING;
 

packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx

@@ -120,8 +120,6 @@ function SavedSearches(props: LibraryFilterMenuProps): JSX.Element {
 
   return (
     <MenuPanel title="Saved Searches"
-               editTitle="Edit Saved Searches"
-               editFunc={() => window.location.href = '/settings/saved-searches' }
                collapsed={collapsed}
                setCollapsed={setCollapsed}
     >
@@ -133,6 +131,11 @@ function SavedSearches(props: LibraryFilterMenuProps): JSX.Element {
           {...props}
         />
       ))}
+      {!collapsed && (
+      <EditButton
+        title="Edit Saved Searches"
+        destination="/settings/saved-searches"
+      />)}
 
       <Box css={{ height: '10px' }}></Box>
     </MenuPanel>

packages/web/pages/settings/saved-searches.tsx

@@ -238,7 +238,7 @@ export default function SavedSearchesPage(): JSX.Element {
   }
 
   async function updatePositionOnMouseUp(y: number): Promise<string | undefined> {
-    const idx = Math.floor(((y - 25) - TOP_SETTINGS_PANEL) / HEIGHT_SETTING_CARD)
+    const idx = Math.floor(((y + window.scrollY - 25) - TOP_SETTINGS_PANEL) / HEIGHT_SETTING_CARD)
     const correctedIdx = Math.min(Math.max(idx, 0), sortedSavedSearch?.length - 1)
     const currentElement = sortedSavedSearch?.find(({ id }) => id == draggedElementId);
     const moveUp = correctedIdx < currentElement?.position
@@ -425,7 +425,7 @@ export default function SavedSearchesPage(): JSX.Element {
                 setDraggedElementId,
                 onEditPress,
                 setDraggedElementPosition,
-                isSwappedCard: draggedElementId != savedSearch.id && (draggedElementPosition?.y + HEIGHT_SETTING_CARD)> positionY && draggedElementPosition?.y + HEIGHT_SETTING_CARD < positionY + HEIGHT_SETTING_CARD,
+                isSwappedCard: draggedElementId != savedSearch.id && (draggedElementPosition?.y + window.scrollY + HEIGHT_SETTING_CARD)> positionY && draggedElementPosition?.y + window.scrollY + HEIGHT_SETTING_CARD < positionY + HEIGHT_SETTING_CARD,
                 updatePositionOnMouseUp
               }
               if (editingId == savedSearch.id) {
@@ -581,16 +581,18 @@ function GenericTableCard(
   }
 
   const onMouseUp = async (e: MouseEvent) => {
-    const updatePosition = updatePositionOnMouseUp(e.clientY)
-    setDraggedElementId(null);
-    setStyle(DEFAULT_STYLE);
-    setDraggedElementPosition(null);
-    await updatePosition;
+    if (draggedElementId != null && draggedElementId == savedSearch?.id) {
+      const updatePosition = updatePositionOnMouseUp(e.clientY)
+      setDraggedElementId(null);
+      setStyle(DEFAULT_STYLE);
+      setDraggedElementPosition(null);
+      await updatePosition;
+    }
   }
 
   const onMouseMove = (e: MouseEvent) => {
     if (draggedElementId != null && draggedElementId == savedSearch?.id) {
-      setStyle({ position: "absolute", top: `${e.clientY - 25}px`, left: `${e.clientX - 25}px`, maxWidth: '865px' });
+      setStyle({ position: "absolute", top: `${e.clientY - 25 + window.scrollY}px`, left: `${e.clientX - 25 + window.scrollX}px`, maxWidth: '865px' });
       setDraggedElementPosition({ y: e.clientY - 25, x: e.clientX - 25});
     }
   }
@@ -625,11 +627,12 @@ function GenericTableCard(
     >
 
       <TableCardBox
+        onMouseUp={onMouseUp}
         css={{
           display: 'grid',
           width: '100%',
           gridGap: '$1',
-          gridTemplateColumns: '1fr 2fr',
+          gridTemplateColumns: '4% 3% 80% 1fr 1fr 1fr 1fr',
           height: editingId == savedSearch?.id ? '120px' : '56px',
           '.showHidden': {
             display: 'none',
@@ -655,7 +658,7 @@ function GenericTableCard(
                   padding: '0 5px',
               }}
           >
-          <ArrowsDownUp size={28} style={{  cursor: 'grab' }} onMouseDown={onMouseDown} onMouseUp={onMouseUp} />
+          <ArrowsDownUp size={28} style={{  cursor: 'grab' }} onMouseDown={onMouseDown} />
       </HStack>
         <HStack
             distribution="start"
@@ -803,9 +806,10 @@ function GenericTableCard(
               <Button
                 style="ctaDarkYellow"
                 css={{ my: '0px', mr: '$1' }}
+                disabled={!nameInputText && !queryInputText}
                 onClick={() => (savedSearch ? handleEdit() : createSavedSearch())}
               >
-                Save
+                Saved
               </Button>
             </>
           ) : (
@@ -905,6 +909,7 @@ function MobileEditCard(props: EditCardProps) {
           <Button
             style="ctaDarkYellow"
             css={{ mr: '$1' }}
+            disabled={!nameInputText && !queryInputText}
             onClick={() => (savedSearch ? handleEdit() : createSavedSearch())}
           >
             Save
@@ -986,6 +991,7 @@ function DesktopEditCard(props: EditCardProps) {
             <Button
               style="ctaDarkYellow"
               css={{}}
+              disabled={!nameInputText && !queryInputText}
               onClick={() => (savedSearch ? handleEdit() : createSavedSearch())}
             >
               Save