feat: custom feed plus

packages/extension/src/newtab/MainFeedPage.tsx

@@ -19,6 +19,7 @@ import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext';
 import { useFeedLayout } from '@dailydotdev/shared/src/hooks';
 import { useDndContext } from '@dailydotdev/shared/src/contexts/DndContext';
 import { FeedLayoutProvider } from '@dailydotdev/shared/src/contexts/FeedContext';
+import useCustomDefaultFeed from '@dailydotdev/shared/src/hooks/feed/useCustomDefaultFeed';
 import ShortcutLinks from './ShortcutLinks/ShortcutLinks';
 import DndBanner from './DndBanner';
 import { CompanionPopupButton } from '../companion/CompanionPopupButton';
@@ -51,6 +52,7 @@ export default function MainFeedPage({
   const { shouldUseListFeedLayout } = useFeedLayout({ feedRelated: false });
   useCompanionSettings();
   const { isActive: isDndActive, showDnd, setShowDnd } = useDndContext();
+  const { isCustomDefaultFeed } = useCustomDefaultFeed();
 
   const onNavTabClick = useCallback(
     (tab: string): void => {
@@ -73,6 +75,11 @@ export default function MainFeedPage({
       return '/search';
     }
 
+    // default page when user selected custom default feed
+    if (isCustomDefaultFeed && feedName === 'default') {
+      return '/';
+    }
+
     const feed = getFeedName(feedName, {
       hasUser: !!user,
       hasFiltered: !alerts?.filter,

packages/shared/src/components/CustomFeedEmptyScreen.tsx

@@ -0,0 +1,41 @@
+import React, { ReactElement } from 'react';
+import { useRouter } from 'next/router';
+import {
+  EmptyScreenButton,
+  EmptyScreenContainer,
+  EmptyScreenDescription,
+  EmptyScreenIcon,
+  EmptyScreenTitle,
+} from './EmptyScreen';
+import { HashtagIcon } from './icons';
+import { PageContainer } from './utilities';
+import { ButtonSize } from './buttons/common';
+import { webappUrl } from '../lib/constants';
+
+export const CustomFeedEmptyScreen = (): ReactElement => {
+  const router = useRouter();
+
+  return (
+    <PageContainer className="mx-auto">
+      <EmptyScreenContainer>
+        <HashtagIcon
+          className={EmptyScreenIcon.className}
+          style={EmptyScreenIcon.style}
+        />
+        <EmptyScreenTitle>Let&apos;s set up your feed!</EmptyScreenTitle>
+        <EmptyScreenDescription>
+          Start by configuring your feed settings to tailor content to your
+          interests. Add tags, filters, and sources to make it truly yours.
+        </EmptyScreenDescription>
+        <EmptyScreenButton
+          onClick={() => {
+            router.push(`${webappUrl}feeds/${router.query.slugOrId}/edit`);
+          }}
+          size={ButtonSize.Large}
+        >
+          Set up feed
+        </EmptyScreenButton>
+      </EmptyScreenContainer>
+    </PageContainer>
+  );
+};

packages/shared/src/components/CustomFeedOptionsMenu.tsx

@@ -0,0 +1,103 @@
+import React, { type ReactElement } from 'react';
+import classNames from 'classnames';
+import { ContextMenuIds } from '../hooks/constants';
+import type { MenuItemProps } from './fields/ContextMenu';
+import ContextMenu from './fields/ContextMenu';
+import { HashtagIcon, MenuIcon as DotsIcon, ShareIcon } from './icons';
+import { MenuIcon } from './MenuIcon';
+import useContextMenu from '../hooks/useContextMenu';
+import { Button, ButtonSize, ButtonVariant } from './buttons/Button';
+import {
+  useShareOrCopyLink,
+  type UseShareOrCopyLinkProps,
+} from '../hooks/useShareOrCopyLink';
+import { useFeeds, usePlusSubscription } from '../hooks';
+import { LazyModal } from './modals/common/types';
+import { useLazyModal } from '../hooks/useLazyModal';
+
+type CustomFeedOptionsMenuProps = {
+  onCreateNewFeed?: () => void;
+  onAdd: (feedId: string) => void;
+  onUndo?: (feedId: string) => void;
+  className?: string;
+  shareProps: UseShareOrCopyLinkProps;
+};
+
+const CustomFeedOptionsMenu = ({
+  className,
+  shareProps,
+  onAdd,
+  onUndo,
+  onCreateNewFeed,
+}: CustomFeedOptionsMenuProps): ReactElement => {
+  const { showPlusSubscription, isPlus } = usePlusSubscription();
+  const { openModal } = useLazyModal();
+  const [, onShareOrCopyLink] = useShareOrCopyLink(shareProps);
+  const { isOpen, onMenuClick } = useContextMenu({
+    id: ContextMenuIds.CustomFeedContext,
+  });
+  const { feeds } = useFeeds();
+
+  const handleOpenModal = () => {
+    if (!isPlus) {
+      return openModal({
+        type: LazyModal.AdvancedCustomFeedSoon,
+      });
+    }
+    if (feeds?.edges?.length > 0) {
+      return openModal({
+        type: LazyModal.AddToCustomFeed,
+        props: {
+          onAdd,
+          onUndo,
+          onCreateNewFeed,
+        },
+      });
+    }
+    return onCreateNewFeed();
+  };
+
+  const options: MenuItemProps[] = [
+    {
+      icon: <MenuIcon Icon={ShareIcon} />,
+      label: 'Share',
+      action: () => onShareOrCopyLink(),
+    },
+    {
+      icon: <MenuIcon Icon={HashtagIcon} />,
+      label: 'Add to custom feed',
+      action: handleOpenModal,
+    },
+  ];
+
+  if (!showPlusSubscription) {
+    return (
+      <Button
+        variant={ButtonVariant.Float}
+        size={ButtonSize.Small}
+        icon={<ShareIcon />}
+        onClick={() => onShareOrCopyLink()}
+      />
+    );
+  }
+
+  return (
+    <>
+      <Button
+        className={classNames('!px-1.5', className)}
+        onClick={onMenuClick}
+        size={ButtonSize.Small}
+        variant={ButtonVariant.Float}
+        icon={<DotsIcon />}
+      />
+      <ContextMenu
+        disableBoundariesCheck
+        id={ContextMenuIds.CustomFeedContext}
+        options={options}
+        isOpen={isOpen}
+      />
+    </>
+  );
+};
+
+export default CustomFeedOptionsMenu;

packages/shared/src/components/FeedEmptyScreen.tsx

@@ -8,16 +8,14 @@ import {
   EmptyScreenTitle,
 } from './EmptyScreen';
 import { FilterIcon } from './icons';
-import { PageContainer, SharedFeedPage } from './utilities';
+import { PageContainer } from './utilities';
 import { ButtonSize } from './buttons/common';
-import { useLazyModal } from '../hooks/useLazyModal';
-import { LazyModal } from './modals/common/types';
-import { getFeedName } from '../lib/feed';
 import { webappUrl } from '../lib/constants';
+import { useAuthContext } from '../contexts/AuthContext';
 
 function FeedEmptyScreen(): ReactElement {
-  const { openModal } = useLazyModal();
   const router = useRouter();
+  const { user } = useAuthContext();
 
   return (
     <PageContainer className="mx-auto">
@@ -33,13 +31,7 @@ function FeedEmptyScreen(): ReactElement {
         </EmptyScreenDescription>
         <EmptyScreenButton
           onClick={() => {
-            const feedName = getFeedName(router.pathname);
-
-            if (feedName === SharedFeedPage.Custom && router.query?.slugOrId) {
-              router.replace(`${webappUrl}feeds/${router.query.slugOrId}/edit`);
-            } else {
-              openModal({ type: LazyModal.FeedFilters });
-            }
+            router.push(`${webappUrl}feeds/${user.id}/edit`);
           }}
           size={ButtonSize.Large}
         >

packages/shared/src/components/MainFeedLayout.tsx

@@ -21,7 +21,6 @@ import {
   FOLLOWING_FEED_QUERY,
   MOST_DISCUSSED_FEED_QUERY,
   MOST_UPVOTED_FEED_QUERY,
-  PREVIEW_FEED_QUERY,
   SEARCH_POSTS_QUERY,
 } from '../graphql/feed';
 import { generateQueryKey, OtherFeedPage, RequestKey } from '../lib/query';
@@ -55,6 +54,7 @@ import { Origin } from '../lib/log';
 import { ExploreTabs, tabToUrl, urlToTab } from './header';
 import { QueryStateKeys, useQueryState } from '../hooks/utils/useQueryState';
 import { useSearchResultsLayout } from '../hooks/search/useSearchResultsLayout';
+import useCustomDefaultFeed from '../hooks/feed/useCustomDefaultFeed';
 
 const FeedExploreHeader = dynamic(
   () =>
@@ -81,6 +81,12 @@ const FollowingFeedEmptyScreen = dynamic(
     ),
 );
 
+const CustomFeedEmptyScreen = dynamic(() =>
+  import(
+    /* webpackChunkName: "customFeedEmptyScreen" */ './CustomFeedEmptyScreen'
+  ).then((mod) => mod.CustomFeedEmptyScreen),
+);
+
 type FeedQueryProps = {
   query: string;
   queryIfLogged?: string;
@@ -119,9 +125,11 @@ const propsByFeed: Record<SharedFeedPage & OtherFeedPage, FeedQueryProps> = {
   },
   [SharedFeedPage.Custom]: {
     query: CUSTOM_FEED_QUERY,
+    emptyScreen: <CustomFeedEmptyScreen />,
   },
   [SharedFeedPage.CustomForm]: {
-    query: PREVIEW_FEED_QUERY,
+    query: CUSTOM_FEED_QUERY,
+    emptyScreen: <CustomFeedEmptyScreen />,
   },
   [OtherFeedPage.Following]: {
     query: FOLLOWING_FEED_QUERY,
@@ -190,6 +198,7 @@ export default function MainFeedLayout({
     hasFiltered: !alerts?.filter,
     hasUser: !!user,
   });
+  const { isCustomDefaultFeed, defaultFeedId } = useCustomDefaultFeed();
   const isLaptop = useViewSize(ViewSize.Laptop);
   const feedVersion = useFeature(feature.feedVersion);
   const {
@@ -224,14 +233,21 @@ export default function MainFeedLayout({
           feedId: router.query?.slugOrId as string,
         },
       },
+      [SharedFeedPage.CustomForm]: {
+        queryIfLogged: FEED_QUERY,
+        variables: {
+          feedId: (router.query?.slugOrId as string) || user?.id,
+        },
+      },
     };
 
     return {
       query: getQueryBasedOnLogin(
         tokenRefreshed,
         user,
-        propsByFeed[feedName].query,
-        propsByFeed[feedName].queryIfLogged,
+        dynamicPropsByFeed[feedName]?.query || propsByFeed[feedName].query,
+        dynamicPropsByFeed[feedName]?.queryIfLogged ||
+          propsByFeed[feedName].queryIfLogged,
       ),
       variables: {
         ...propsByFeed[feedName].variables,
@@ -272,6 +288,29 @@ export default function MainFeedLayout({
       return null;
     }
 
+    if (feedNameProp === 'default' && isCustomDefaultFeed) {
+      return {
+        feedName: SharedFeedPage.Custom,
+        feedQueryKey: generateQueryKey(
+          SharedFeedPage.Custom,
+          user,
+          defaultFeedId,
+        ),
+        query: CUSTOM_FEED_QUERY,
+        variables: {
+          feedId: user.defaultFeedId,
+          feedName: SharedFeedPage.Custom,
+        },
+        emptyScreen: propsByFeed[feedName].emptyScreen || <FeedEmptyScreen />,
+        actionButtons: feedWithActions && (
+          <SearchControlHeader
+            algoState={[selectedAlgo, setSelectedAlgo]}
+            feedName={feedName}
+          />
+        ),
+      };
+    }
+
     if (isSearchOn && searchQuery) {
       const searchVersion = getFeatureValue(feature.searchVersion);
       return {
@@ -362,6 +401,9 @@ export default function MainFeedLayout({
     selectedPeriod,
     setSelectedAlgo,
     router.pathname,
+    isCustomDefaultFeed,
+    feedNameProp,
+    defaultFeedId,
   ]);
 
   useEffect(() => {

packages/shared/src/components/PostOptionsMenu.tsx

@@ -114,19 +114,28 @@ export default function PostOptionsMenu({
   const { post: loadedPost } = usePostById({
     id: initialPost?.id,
   });
+  const feedContextData = useActiveFeedContext();
+  const { queryKey: feedQueryKey, logOpts } = feedContextData;
+  const isCustomFeed = feedQueryKey?.[0] === 'custom';
+  const customFeedId = isCustomFeed ? (feedQueryKey?.[2] as string) : undefined;
   const post = loadedPost ?? initialPost;
   const { showPlusSubscription, isPlus } = usePlusSubscription();
   const { feedSettings, advancedSettings, checkSettingsEnabledState } =
-    useFeedSettings({ enabled: isPostOptionsOpen });
-  const { onUpdateSettings } = useAdvancedSettings({ enabled: false });
+    useFeedSettings({
+      enabled: isPostOptionsOpen,
+      feedId: customFeedId,
+    });
+  const { onUpdateSettings } = useAdvancedSettings({
+    enabled: false,
+    feedId: customFeedId,
+  });
   const { logEvent } = useContext(LogContext);
   const { hidePost, unhidePost } = useReportPost();
   const { openSharePost } = useSharePost(origin);
   const { follow, unfollow } = useContentPreference();
 
   const { openModal } = useLazyModal();
-  const feedContextData = useActiveFeedContext();
-  const { queryKey: feedQueryKey, logOpts } = feedContextData;
+
   const {
     onBlockSource,
     onBlockTags,
@@ -137,16 +146,19 @@ export default function PostOptionsMenu({
     origin: Origin.PostContextMenu,
     postId: post?.id,
     shouldInvalidateQueries: false,
+    feedId: customFeedId,
   });
-
   const isSourceBlocked = useMemo(() => {
     return !!feedSettings?.excludeSources?.some(
       (excludedSource) => excludedSource.id === post?.source?.id,
     );
   }, [feedSettings?.excludeSources, post?.source?.id]);
 
   const shouldShowSubscribe =
-    isLoggedIn && !isSourceBlocked && post?.source?.type === SourceType.Machine;
+    isLoggedIn &&
+    !isSourceBlocked &&
+    post?.source?.type === SourceType.Machine &&
+    !isCustomFeed;
 
   const sourceSubscribe = useSourceActionsNotify({
     source: shouldShowSubscribe ? post?.source : undefined,
@@ -487,6 +499,9 @@ export default function PostOptionsMenu({
   post?.tags?.forEach((tag) => {
     if (tag.length) {
       const isBlocked = feedSettings?.blockedTags?.includes(tag);
+      if (isBlocked && isCustomFeed) {
+        return;
+      }
       postOptions.push({
         icon: <MenuIcon Icon={isBlocked ? PlusIcon : BlockIcon} />,
         label: isBlocked ? `Follow #${tag}` : `Not interested in #${tag}`,

packages/shared/src/components/SharedByUserBanner.tsx

@@ -53,7 +53,7 @@ export const SharedByUserBanner = ({
       </Typography>
       <FollowButton
         className="ml-auto"
-        userId={userid}
+        entityId={userid}
         type={ContentPreferenceType.User}
         entityName={`@${user.username}`}
         status={contentPreference?.status}