add beta feature flags

src/background-script/setup.ts

@@ -461,9 +461,7 @@ export function createBackgroundModules(options: {
             ),
     })
 
-    const betaFeatures = new BetaFeaturesBackground({
-        settingsStore: syncSettingsStore,
-    })
+    const betaFeatures = null
 
     const localExtSettingStore = new BrowserSettingsStore<
         LocalExtensionSettings

src/beta-features/ui/containers/beta-features-settings/index.tsx

@@ -16,10 +16,11 @@ import { runInBackground } from 'src/util/webextensionRPC'
 import { AuthContextInterface } from 'src/authentication/background/types'
 import SettingSection from '@worldbrain/memex-common/lib/common-ui/components/setting-section'
 import { SyncSettingsStoreInterface } from 'src/sync-settings/types'
+import { SyncSettingsByFeature } from 'src/sync-settings/background/types'
 
 const BetaFeaturesData = [
     {
-        id: 'imageOverlay',
+        id: 'imageOverlay' as keyof SyncSettingsByFeature['betaFeatures'],
         title: 'Image Hover Buttons',
         description:
             'Display an overlay on every image to either save it or analyze it with AI.',
@@ -79,7 +80,11 @@ export default class BetaFeaturesSettings extends StatefulUIElement<
                                         feature: feature.id,
                                     })
                                 }}
-                                type="primary"
+                                type={
+                                    this.state.betaFeaturesSetting[feature.id]
+                                        ? 'primary'
+                                        : 'secondary'
+                                }
                                 size={'medium'}
                             />
                         </RightSide>

src/beta-features/ui/containers/beta-features-settings/logic.ts

@@ -7,9 +7,13 @@ import {
 import { loadInitial, executeUITask } from 'src/util/ui-logic'
 import { runInBackground } from 'src/util/webextensionRPC'
 import { SyncSettingsStoreInterface } from 'src/sync-settings/types'
+import {
+    SyncSettingsStore,
+    createSyncSettingsStore,
+} from 'src/sync-settings/util'
 
 export const INITIAL_STATE: BetaFeaturesSettingsState = {
-    betaFeaturesSetting: null,
+    betaFeaturesSetting: {},
 }
 
 type EventHandler<
@@ -24,10 +28,14 @@ export default class BetaFeaturesSettingsLogic extends UILogic<
     BetaFeaturesSettingsState,
     BetaFeaturesSettingsEvent
 > {
-    private syncSettingsBG = runInBackground<SyncSettingsStoreInterface>()
+    syncSettings: SyncSettingsStore<'betaFeatures'>
 
     constructor(protected dependencies: BetaFeaturesSettingsDependencies) {
         super()
+
+        this.syncSettings = createSyncSettingsStore({
+            syncSettingsBG: dependencies.syncSettingsBG,
+        })
     }
 
     getInitialState(): BetaFeaturesSettingsState {
@@ -37,7 +45,18 @@ export default class BetaFeaturesSettingsLogic extends UILogic<
     }
 
     init = async () => {
-        // await loadInitial<BetaFeaturesSettingsState>(this, async () => {})
+        // Load feature settings
+        const imageOverlaySetting = await this.syncSettings.betaFeatures.get(
+            'imageOverlay',
+        )
+
+        let betaFeaturesSetting = {
+            imageOverlay: imageOverlaySetting,
+        }
+
+        this.emitMutation({
+            betaFeaturesSetting: { $set: betaFeaturesSetting },
+        })
     }
 
     activateFeature: EventHandler<'activateFeature'> = async ({
@@ -47,12 +66,9 @@ export default class BetaFeaturesSettingsLogic extends UILogic<
         let betaFeaturesSetting = previousState.betaFeaturesSetting
         const feature = event.feature
         const previousValue = betaFeaturesSetting[feature]
+        betaFeaturesSetting[feature] = !previousValue
 
-        await this.dependencies.syncSettingsBG.extension.set('betaFeatures', {
-            [feature]: !previousValue,
-        })
-
-        betaFeaturesSetting[feature] = true
+        await this.syncSettings.betaFeatures.set(feature, !previousValue)
 
         this.emitMutation({
             betaFeaturesSetting: { $set: betaFeaturesSetting },

src/beta-features/ui/containers/beta-features-settings/types.ts

@@ -1,5 +1,8 @@
 import { UIEvent } from 'ui-logic-core'
-import { SyncSettingsStoreInterface } from 'src/sync-settings/types'
+import {
+    RemoteSyncSettingsInterface,
+    SyncSettingsByFeature,
+} from 'src/sync-settings/background/types'
 
 export interface BetaFeaturesSettingsState {
     betaFeaturesSetting: {
@@ -8,9 +11,9 @@ export interface BetaFeaturesSettingsState {
 }
 
 export interface BetaFeaturesSettingsDependencies {
-    syncSettingsBG: SyncSettingsStoreInterface
+    syncSettingsBG: RemoteSyncSettingsInterface
 }
 
 export type BetaFeaturesSettingsEvent = UIEvent<{
-    activateFeature: { feature: string }
+    activateFeature: { feature: keyof SyncSettingsByFeature['betaFeatures'] }
 }>

src/search-injection/img-action-buttons.tsx

@@ -29,13 +29,14 @@ import { TooltipBox } from '@worldbrain/memex-common/lib/common-ui/components/to
 interface RootProps {
     rootEl: HTMLElement
     syncSettingsBG: RemoteSyncSettingsInterface
-    syncSettings: SyncSettingsStore<'extension'>
+    syncSettings: SyncSettingsStore<'betaFeatures'>
     annotationsFunctions: any
     browserAPIs: Browser
     contentScriptsBG: ContentScriptsInterface<'caller'>
     imageUrl: string
     imageData: string
     removeElement: () => void
+    disableImageInjection: () => void
 }
 
 interface RootState {
@@ -66,7 +67,14 @@ class Root extends React.Component<RootProps, RootState> {
                     <ParentContainer ref={this.parentContainerRef}>
                         <TooltipBox
                             getPortalRoot={() => this.props.rootEl}
-                            tooltipText="Remove for this page session"
+                            tooltipText={
+                                <span>
+                                    Remove for this page session
+                                    <br /> <strong>Shift</strong>Click to
+                                    disable completely. <br /> Reenable via Beta
+                                    Features Settings
+                                </span>
+                            }
                             placement="bottom"
                         >
                             <PrimaryAction
@@ -76,7 +84,12 @@ class Root extends React.Component<RootProps, RootState> {
                                 onClick={async (event) => {
                                     event.stopPropagation()
                                     event.preventDefault()
-                                    this.props.removeElement()
+
+                                    if (event.shiftKey) {
+                                        this.props.disableImageInjection()
+                                    } else {
+                                        this.props.removeElement()
+                                    }
                                 }}
                                 padding={'0 5px'}
                                 iconColor={'white'}
@@ -132,23 +145,23 @@ class Root extends React.Component<RootProps, RootState> {
 }
 
 export const handleRenderImgActionButtons = async (
-    syncSettings: SyncSettingsStore<'extension'>,
+    syncSettings: SyncSettingsStore<'betaFeatures'>,
     syncSettingsBG: RemoteSyncSettingsInterface,
     annotationsFunctions: any,
     browserAPIs: Browser,
     imageElements: HTMLCollectionOf<HTMLImageElement>,
     contentScriptsBG: ContentScriptsInterface<'caller'>,
 ) => {
-    const betaFeatures = await syncSettings.extension.get('betaFeatures')
+    const betaFeatureSetting = await syncSettings.betaFeatures.get(
+        'imageOverlay',
+    )
     let imageInjectionEnabled = null
-    if (betaFeatures != null) {
-        imageInjectionEnabled = betaFeatures.imageInjection
+    if (betaFeatureSetting != null) {
+        imageInjectionEnabled = betaFeatureSetting
     }
 
     if (imageInjectionEnabled == null) {
-        await syncSettings.extension.set('betaFeatures', {
-            imageInjection: false,
-        })
+        await syncSettings.betaFeatures.set('imageOverlay', false)
     }
 
     if (!imageInjectionEnabled) {
@@ -284,6 +297,14 @@ export const handleRenderImgActionButtons = async (
                                     ReactDOM.unmountComponentAtNode(target)
                                     shouldShow = false
                                 }}
+                                disableImageInjection={async () => {
+                                    ReactDOM.unmountComponentAtNode(target)
+                                    await syncSettings.betaFeatures.set(
+                                        'imageOverlay',
+                                        false,
+                                    )
+                                    shouldShow = false
+                                }}
                             />
                         </RootPosContainer>,
                         target,

src/sync-settings/background/constants.ts

@@ -15,6 +15,7 @@ export const FEATURE_PREFIX = {
     READWISE: 'readwise.',
     OPENAI: 'openAI.',
     HIGHLIGHT_COLORS: 'highlightColors.',
+    BETA_FEATURES: '@BetaFeatures-',
 }
 
 export const SETTING_NAMES: SyncSettingNames = {
@@ -41,7 +42,9 @@ export const SETTING_NAMES: SyncSettingNames = {
         shouldAutoCreateNoteLink:
             FEATURE_PREFIX.EXTENSION + 'shouldAutoCreateNoteLink',
         shouldAutoAddSpaces: FEATURE_PREFIX.EXTENSION + 'shouldAutoAddSpaces',
-        betaFeatures: FEATURE_PREFIX.EXTENSION + 'betaFeatures',
+    },
+    betaFeatures: {
+        imageOverlay: FEATURE_PREFIX.BETA_FEATURES + 'imageOverlay',
     },
     pdfIntegration: {
         shouldAutoOpen: FEATURE_PREFIX.PDF_INTEGRATION + 'should_auto_open',

src/sync-settings/background/types.ts

@@ -75,12 +75,12 @@ export interface SyncSettingsByFeature {
             askAIShortcut: string
             sharePageShortcut: string
         }
-        betaFeatures: {
-            [key: string]: boolean
-        }
         shouldAutoCreateNoteLink: boolean
         shouldAutoAddSpaces: boolean
     }
+    betaFeatures: {
+        imageOverlay: boolean
+    }
     readwise: {
         apiKey: string
     }

src/sync-settings/types.ts

@@ -12,4 +12,5 @@ export interface SyncSettingsStoreInterface {
     activityIndicator: SettingStore<SyncSettingsByFeature['activityIndicator']>
     openAI: SettingStore<SyncSettingsByFeature['openAI']>
     highlightColors: SettingStore<SyncSettingsByFeature['highlightColors']>
+    betaFeatures: SettingStore<SyncSettingsByFeature['betaFeatures']>
 }

src/sync-settings/util.ts

@@ -44,4 +44,7 @@ export const createSyncSettingsStore = <
         highlightColors: new BrowserSettingsStore(args.syncSettingsBG, {
             prefix: FEATURE_PREFIX.HIGHLIGHT_COLORS,
         }),
+        betaFeatures: new BrowserSettingsStore(args.syncSettingsBG, {
+            prefix: FEATURE_PREFIX.BETA_FEATURES,
+        }),
     } as SyncSettingsStoreInterface)