diff --git a/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsGeneralSection.tsx b/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsGeneralSection.tsx index 4bda86185d..5808d68200 100644 --- a/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsGeneralSection.tsx +++ b/packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsGeneralSection.tsx @@ -21,13 +21,22 @@ import useProfileForm from '../../../../hooks/useProfileForm'; import { FeedType } from '../../../../graphql/feed'; import { usePlusSubscription, useToastNotification } from '../../../../hooks'; import { Tooltip } from '../../../tooltip/Tooltip'; -import { Switch } from '../../../fields/Switch'; +import { Dropdown } from '../../../fields/Dropdown'; import { useSettingsContext } from '../../../../contexts/SettingsContext'; -import { SidebarSettingsFlags } from '../../../../graphql/settings'; +import { + HighlightsPlacement, + SidebarSettingsFlags, +} from '../../../../graphql/settings'; import { useLogContext } from '../../../../contexts/LogContext'; -import { LogEvent, Origin, TargetId } from '../../../../lib/log'; +import { LogEvent, Origin } from '../../../../lib/log'; import { labels } from '../../../../lib'; +const highlightsPlacementOptions = [ + { value: HighlightsPlacement.Default, label: 'Default' }, + { value: HighlightsPlacement.Pinned, label: 'Pin to top' }, + { value: HighlightsPlacement.Disabled, label: 'Disabled' }, +]; + export const FeedSettingsGeneralSection = (): ReactElement => { const { setData, data, feed, onDelete, editFeedSettings } = useContext( FeedSettingsEditContext, @@ -180,43 +189,44 @@ export const FeedSettingsGeneralSection = (): ReactElement => {
- Pin Happening Now to top + Happening Now placement - When Happening Now appears in your feed, show it in the first - position. Otherwise it's placed somewhere near the top. + Choose where the Happening Now card appears in your feed, or hide it + entirely.
- { - const newState = !(flags?.highlightsFirstEnabled ?? false); - await updateFlag( - SidebarSettingsFlags.HighlightsFirstEnabled, - newState, - ); + + option.value === + (flags?.highlightsPlacement ?? HighlightsPlacement.Default), + ), + 0, + )} + options={highlightsPlacementOptions.map((option) => option.label)} + onChange={async (_, index) => { + const next = highlightsPlacementOptions[index].value; + await updateFlag(SidebarSettingsFlags.Highlights, next); displayToast( - labels.feed.settings.globalPreferenceNotice.highlightsFirst, + labels.feed.settings.globalPreferenceNotice.highlightsPlacement, ); logEvent({ - event_name: LogEvent.ToggleHighlightsFirst, - target_id: newState ? TargetId.On : TargetId.Off, + event_name: LogEvent.SetHighlightsPlacement, + target_id: next, extra: JSON.stringify({ origin: Origin.Settings, }), }); }} - > - Pin Happening Now to first position - + />
{isCustomFeed && ( <> diff --git a/packages/shared/src/graphql/settings.ts b/packages/shared/src/graphql/settings.ts index 6daa930135..ccb1483c83 100644 --- a/packages/shared/src/graphql/settings.ts +++ b/packages/shared/src/graphql/settings.ts @@ -15,6 +15,12 @@ export enum CampaignCtaPlacement { ProfileMenu = 'profileMenu', } +export enum HighlightsPlacement { + Default = 'default', + Pinned = 'pinned', + Disabled = 'disabled', +} + export type NewTabMode = 'discover' | 'focus'; export type FocusScheduleWindow = { @@ -44,7 +50,7 @@ export type SettingsFlags = { sidebarResourcesExpanded: boolean; sidebarBookmarksExpanded: boolean; clickbaitShieldEnabled: boolean; - highlightsFirstEnabled?: boolean; + highlightsPlacement?: HighlightsPlacement; timezoneMismatchIgnore?: string; prompt?: Record; defaultWriteTab?: WriteFormTab; @@ -66,7 +72,8 @@ export enum SidebarSettingsFlags { ResourcesExpanded = 'sidebarResourcesExpanded', BookmarksExpanded = 'sidebarBookmarksExpanded', ClickbaitShieldEnabled = 'clickbaitShieldEnabled', - HighlightsFirstEnabled = 'highlightsFirstEnabled', + // Renamed to avoid shadowing the HighlightsPlacement enum above. + Highlights = 'highlightsPlacement', } export type RemoteSettings = { diff --git a/packages/shared/src/lib/labels.ts b/packages/shared/src/lib/labels.ts index a0af354b61..232fba5891 100644 --- a/packages/shared/src/lib/labels.ts +++ b/packages/shared/src/lib/labels.ts @@ -88,8 +88,8 @@ export const labels = { globalPreferenceNotice: { clickbaitShield: 'Clickbait shield has been applied for all feeds', contentLanguage: 'New language preferences set for all feeds', - highlightsFirst: - 'Happening Now pinning preference applied to all your feeds', + highlightsPlacement: + 'Happening Now placement preference applied to all your feeds', }, }, }, diff --git a/packages/shared/src/lib/log.ts b/packages/shared/src/lib/log.ts index 06227beaf0..513a93a640 100644 --- a/packages/shared/src/lib/log.ts +++ b/packages/shared/src/lib/log.ts @@ -339,7 +339,7 @@ export enum LogEvent { ToggleClickbaitShield = 'toggle clickbait shield', ClickbaitShieldTitle = 'clickbait shield title', // End Clickbait Shield - ToggleHighlightsFirst = 'toggle highlights first', + SetHighlightsPlacement = 'set highlights placement', InstallPWA = 'install pwa', // Start Share ShareProfile = 'share profile',