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',