Chore shortcuts UI

packages/extension/src/newtab/ShortcutLinks/ShortcutLinks.tsx

@@ -6,82 +6,32 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { PlusIcon } from '@dailydotdev/shared/src/components/icons';
 import SettingsContext from '@dailydotdev/shared/src/contexts/SettingsContext';
-import {
-  Button,
-  ButtonIconPosition,
-  ButtonVariant,
-} from '@dailydotdev/shared/src/components/buttons/Button';
+
 import LogContext from '@dailydotdev/shared/src/contexts/LogContext';
 import {
   LogEvent,
   ShortcutsSourceType,
   TargetType,
 } from '@dailydotdev/shared/src/lib/log';
-import { useToastNotification } from '@dailydotdev/shared/src/hooks';
-import { feature } from '@dailydotdev/shared/src/lib/featureManagement';
 import useContextMenu from '@dailydotdev/shared/src/hooks/useContextMenu';
 import { ContextMenu } from '@dailydotdev/shared/src/hooks/constants';
-import { useFeature } from '@dailydotdev/shared/src/components/GrowthBookProvider';
-import { ShortcutsUIExperiment } from '@dailydotdev/shared/src/lib/featureValues';
-import { useShortcuts } from '@dailydotdev/shared/src/hooks/utils';
 import CustomLinksModal from './ShortcutLinksModal';
 import MostVisitedSitesModal from '../MostVisitedSitesModal';
-import { CustomLinks } from '../CustomLinks';
 import useShortcutLinks from './useShortcutLinks';
 import ShortcutOptionsMenu from './ShortcutOptionsMenu';
-import { ShortcutLinksUIV1 } from './experiments/ShortcutLinksUIV1';
+import { ShortcutLinksUI } from './ShortcutLinksUI';
 
 interface ShortcutLinksProps {
   shouldUseListFeedLayout: boolean;
 }
 
-type ShortcutLinksControlProps = {
-  className?: string;
-  onLinkClick: () => void;
-  onOptionsOpen: () => void;
-  shortcutLinks: string[];
-};
-
-function ShortcutLinksUIControl(props: ShortcutLinksControlProps) {
-  const { shortcutLinks, onLinkClick, onOptionsOpen, className } = props;
-  return (
-    <>
-      {shortcutLinks?.length ? (
-        <CustomLinks
-          links={shortcutLinks}
-          className={className}
-          onOptions={onOptionsOpen}
-          onLinkClick={onLinkClick}
-        />
-      ) : (
-        <Button
-          className={className}
-          variant={ButtonVariant.Tertiary}
-          icon={<PlusIcon />}
-          iconPosition={ButtonIconPosition.Right}
-          onClick={onOptionsOpen}
-        >
-          Add shortcuts
-        </Button>
-      )}
-    </>
-  );
-}
-
 export default function ShortcutLinks({
   shouldUseListFeedLayout,
 }: ShortcutLinksProps): ReactElement {
-  const className = !shouldUseListFeedLayout
-    ? 'ml-auto'
-    : 'mt-4 w-fit mx-4 laptop:mx-0';
-  const shortcutsUIFeature = useFeature(feature.shortcutsUI);
-  const isShortcutsUIV1 = shortcutsUIFeature === ShortcutsUIExperiment.V1;
   const { showTopSites, toggleShowTopSites } = useContext(SettingsContext);
   const [showModal, setShowModal] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
-  const { displayToast } = useToastNotification();
   const { logEvent } = useContext(LogContext);
   const {
     askTopSitesPermission,
@@ -104,7 +54,6 @@ export default function ShortcutLinks({
   const loggedInitialRef = useRef(false);
   const loggedRef = useRef(false);
 
-  const { isShortcutsV1 } = useShortcuts();
   const { onMenuClick, isOpen } = useContextMenu({
     id: ContextMenu.ShortcutContext,
   });
@@ -117,9 +66,7 @@ export default function ShortcutLinks({
           event_name: LogEvent.Impression,
           target_type: TargetType.Shortcuts,
           extra: JSON.stringify({
-            source: isShortcutsV1
-              ? ShortcutsSourceType.Placeholder
-              : ShortcutsSourceType.Button,
+            source: ShortcutsSourceType.Placeholder,
           }),
         });
       }
@@ -138,13 +85,7 @@ export default function ShortcutLinks({
       target_type: TargetType.Shortcuts,
       extra: JSON.stringify({ source: shortcutSource }),
     });
-  }, [
-    logEvent,
-    showTopSites,
-    shortcutSource,
-    hasCheckedPermission,
-    isShortcutsV1,
-  ]);
+  }, [logEvent, showTopSites, shortcutSource, hasCheckedPermission]);
 
   const onOptionsOpen = () => {
     setShowOptions(true);
@@ -155,16 +96,6 @@ export default function ShortcutLinks({
     });
   };
 
-  const onV1Hide = () => {
-    if (!isShortcutsUIV1) {
-      displayToast(
-        'Get your shortcuts back by turning it on from the customize options on the sidebar',
-      );
-    }
-
-    toggleShowTopSites();
-  };
-
   if (!showTopSites) {
     return <></>;
   }
@@ -197,30 +128,18 @@ export default function ShortcutLinks({
 
   return (
     <>
-      {isShortcutsV1 ? (
-        <ShortcutLinksUIV1
-          {...{
-            onLinkClick,
-            onMenuClick,
-            onOptionsOpen,
-            onV1Hide,
-            shortcutLinks,
-            shouldUseListFeedLayout,
-            showTopSites,
-            toggleShowTopSites,
-            hasCheckedPermission,
-          }}
-        />
-      ) : (
-        <ShortcutLinksUIControl
-          {...{
-            shortcutLinks,
-            onLinkClick,
-            onOptionsOpen,
-            className,
-          }}
-        />
-      )}
+      <ShortcutLinksUI
+        {...{
+          onLinkClick,
+          onMenuClick,
+          onOptionsOpen,
+          shortcutLinks,
+          shouldUseListFeedLayout,
+          showTopSites,
+          toggleShowTopSites,
+          hasCheckedPermission,
+        }}
+      />
 
       {showModal && (
         <MostVisitedSitesModal
@@ -257,7 +176,7 @@ export default function ShortcutLinks({
       )}
       <ShortcutOptionsMenu
         isOpen={isOpen}
-        onHide={onV1Hide}
+        onHide={toggleShowTopSites}
         onManage={onOptionsOpen}
       />
     </>

packages/extension/src/newtab/ShortcutLinks/experiments/ShortcutLinksUIV1.tsx → packages/extension/src/newtab/ShortcutLinks/ShortcutLinksUI.tsx

@@ -34,7 +34,6 @@ type ShortcutLinksV1Props = {
   onLinkClick: () => void;
   onMenuClick: MouseEventHandler<Element>;
   onOptionsOpen: () => void;
-  onV1Hide: () => void;
   shortcutLinks: string[];
   shouldUseListFeedLayout: boolean;
   showTopSites: boolean;
@@ -75,7 +74,7 @@ function ShortCutV1Placeholder({
   );
 }
 
-function ShortcutV1Item({
+function ShortcutItem({
   url,
   onLinkClick,
 }: {
@@ -117,16 +116,15 @@ function ShortcutUIItemPlaceholder({ children }: PropsWithChildren) {
   );
 }
 
-export function ShortcutLinksUIV1(props: ShortcutLinksV1Props): ReactElement {
+export function ShortcutLinksUI(props: ShortcutLinksV1Props): ReactElement {
   const {
     onLinkClick,
     onMenuClick,
     onOptionsOpen,
-    onV1Hide,
+    toggleShowTopSites,
     shortcutLinks,
     shouldUseListFeedLayout,
     showTopSites,
-    toggleShowTopSites,
     hasCheckedPermission,
   } = props;
 
@@ -203,7 +201,7 @@ export function ShortcutLinksUIV1(props: ShortcutLinksV1Props): ReactElement {
       {shortcutLinks?.length ? (
         <>
           {shortcutLinks.map((url) => (
-            <ShortcutV1Item key={url} url={url} onLinkClick={onLinkClick} />
+            <ShortcutItem key={url} url={url} onLinkClick={onLinkClick} />
           ))}
           <Button
             variant={ButtonVariant.Tertiary}
@@ -222,7 +220,7 @@ export function ShortcutLinksUIV1(props: ShortcutLinksV1Props): ReactElement {
           ))}
           <Button
             variant={ButtonVariant.Tertiary}
-            onClick={onV1Hide}
+            onClick={toggleShowTopSites}
             size={ButtonSize.Small}
             icon={<ClearIcon secondary />}
             className="mt-2"

packages/shared/src/components/feeds/FeedContainer.tsx

@@ -25,7 +25,7 @@ import { useActiveFeedNameContext } from '../../contexts';
 import { SharedFeedPage } from '../utilities';
 import { useFeedName } from '../../hooks/feed/useFeedName';
 import { OtherFeedPage } from '../../lib/query';
-import { useShortcuts } from '../../hooks/utils';
+import { isExtension } from '../../lib/func';
 
 export interface FeedContainerProps {
   children: ReactNode;
@@ -140,7 +140,6 @@ export const FeedContainer = ({
   isHorizontal,
   feedContainerRef,
 }: FeedContainerProps): ReactElement => {
-  const { isShortcutsV1 } = useShortcuts();
   const currentSettings = useContext(FeedContext);
   const { subject } = useToastNotification();
   const { spaciness, loadedSettings } = useContext(SettingsContext);
@@ -219,7 +218,7 @@ export const FeedContainer = ({
             <span
               className={classNames(
                 'flex flex-1 items-center',
-                isShortcutsV1 ? 'flex-col-reverse' : 'flex-row',
+                isExtension ? 'flex-col-reverse' : 'flex-row',
               )}
             >
               {!!actionButtons && (
@@ -230,7 +229,6 @@ export const FeedContainer = ({
               {shortcuts}
             </span>
           )}
-          {shouldUseListFeedLayout && !isShortcutsV1 && shortcuts}
           <ConditionalWrapper
             condition={shouldUseListFeedLayout}
             wrapper={(child) => (
@@ -252,7 +250,7 @@ export const FeedContainer = ({
                 >
                   {actionButtons || null}
                 </ConditionalWrapper>
-                {isShortcutsV1 && shortcuts}
+                {isExtension && shortcuts}
                 {child}
               </div>
             )}

packages/shared/src/components/filters/MyFeedHeading.tsx

@@ -7,20 +7,12 @@ import {
   ButtonSize,
   ButtonVariant,
 } from '../buttons/Button';
-import {
-  useActions,
-  useConditionalFeature,
-  useFeedLayout,
-  useViewSize,
-  ViewSize,
-} from '../../hooks';
-import { feature } from '../../lib/featureManagement';
+import { useActions, useFeedLayout, useViewSize, ViewSize } from '../../hooks';
 import { getFeedName } from '../../lib/feed';
 import { useFeedName } from '../../hooks/feed/useFeedName';
 import { checkIsExtension } from '../../lib/func';
 import { ActionType } from '../../graphql/actions';
 import { useSettingsContext } from '../../contexts/SettingsContext';
-import { ShortcutsUIExperiment } from '../../lib/featureValues';
 import { FeedSettingsButton } from '../feeds/FeedSettingsButton';
 
 interface MyFeedHeadingProps {
@@ -39,11 +31,6 @@ function MyFeedHeading({
   const isLaptop = useViewSize(ViewSize.Laptop);
   const feedName = getFeedName(router.pathname);
   const { isCustomFeed } = useFeedName({ feedName });
-  const { value: shortcutsUIFeature } = useConditionalFeature({
-    feature: feature.shortcutsUI,
-    shouldEvaluate: isExtension,
-  });
-  const isShortcutsUIV1 = shortcutsUIFeature === ShortcutsUIExperiment.V1;
   let feedFiltersLabel = 'Feed settings';
 
   if (isCustomFeed) {
@@ -66,8 +53,7 @@ function MyFeedHeading({
       </FeedSettingsButton>
       {isExtension &&
         checkHasCompleted(ActionType.FirstShortcutsSession) &&
-        !showTopSites &&
-        isShortcutsUIV1 && (
+        !showTopSites && (
           <Button
             size={ButtonSize.Medium}
             variant={isLaptop ? ButtonVariant.Float : ButtonVariant.Tertiary}

packages/shared/src/components/layout/common.tsx

@@ -18,15 +18,13 @@ import { IconSize } from '../Icon';
 import { RankingAlgorithm } from '../../graphql/feed';
 import SettingsContext from '../../contexts/SettingsContext';
 import { useFeedName } from '../../hooks/feed/useFeedName';
-import { useConditionalFeature, useViewSize, ViewSize } from '../../hooks';
+import { useViewSize, ViewSize } from '../../hooks';
 import ConditionalWrapper from '../ConditionalWrapper';
 import { ReadingStreakButton } from '../streak/ReadingStreakButton';
 import { useReadingStreak } from '../../hooks/streaks';
 import { AllFeedPages } from '../../lib/query';
 import { webappUrl } from '../../lib/constants';
-import { feature } from '../../lib/featureManagement';
 import { checkIsExtension } from '../../lib/func';
-import { ShortcutsUIExperiment } from '../../lib/featureValues';
 import { QueryStateKeys, useQueryState } from '../../hooks/utils/useQueryState';
 
 type State<T> = [T, Dispatch<SetStateAction<T>>];
@@ -72,11 +70,6 @@ export const SearchControlHeader = ({
   const isLaptop = useViewSize(ViewSize.Laptop);
   const isMobile = useViewSize(ViewSize.MobileL);
   const { streak, isLoading, isStreaksEnabled } = useReadingStreak();
-  const { value: shortcutsUIFeature } = useConditionalFeature({
-    feature: feature.shortcutsUI,
-    shouldEvaluate: isExtension,
-  });
-  const isShortcutsUIV1 = shortcutsUIFeature === ShortcutsUIExperiment.V1;
 
   if (isMobile) {
     return null;
@@ -146,15 +139,13 @@ export const SearchControlHeader = ({
               'flex w-full items-center justify-between tablet:mb-2 tablet:p-4',
             )}
           >
-            {isShortcutsUIV1 && wrapperChildren}
+            {isExtension && wrapperChildren}
 
             <div className="flex-0">
               {isStreaksEnabled && (
                 <ReadingStreakButton streak={streak} isLoading={isLoading} />
               )}
             </div>
-
-            {!isShortcutsUIV1 && wrapperChildren}
           </div>
         );
       }}

packages/shared/src/hooks/utils/index.ts

@@ -1,3 +1,2 @@
 export * from './usePagination';
 export * from './useThemedAsset';
-export * from './useShortcuts';