Skip to content

Commit

Permalink
add beta features section to options
Browse files Browse the repository at this point in the history
  • Loading branch information
blackforestboi committed Jun 10, 2024
1 parent 7e5996a commit babc89f
Show file tree
Hide file tree
Showing 13 changed files with 402 additions and 11 deletions.
1 change: 1 addition & 0 deletions src/background-script/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ interface Dependencies {
| 'customLists'
| 'personalCloud'
| 'readwise'
| 'betaFeatures'
| 'syncSettings'
| 'summarizeBG'
| 'auth'
Expand Down
8 changes: 8 additions & 0 deletions src/background-script/setup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ import {
DB_DATA_LOSS_CHECK_ALARM_NAME,
checkDataLoss,
} from './db-data-loss-check'
import { BetaFeaturesBackground } from 'src/beta-features/background'

export interface BackgroundModules {
analyticsBG: AnalyticsCoreInterface
Expand Down Expand Up @@ -147,6 +148,7 @@ export interface BackgroundModules {
contentConversations: ContentConversationsBackground
tabManagement: TabManagementBackground
readwise: ReadwiseBackground
betaFeatures: BetaFeaturesBackground
activityStreams: ActivityStreamsBackground
// userMessages: UserMessageService
personalCloud: PersonalCloudBackground
Expand Down Expand Up @@ -459,6 +461,10 @@ export function createBackgroundModules(options: {
),
})

const betaFeatures = new BetaFeaturesBackground({
settingsStore: syncSettingsStore,
})

const localExtSettingStore = new BrowserSettingsStore<
LocalExtensionSettings
>(options.browserAPIs.storage.local, {
Expand Down Expand Up @@ -593,6 +599,7 @@ export function createBackgroundModules(options: {
analyticsBG,
bgModules: {
readwise,
betaFeatures,
copyPaster,
customLists,
syncSettings,
Expand Down Expand Up @@ -628,6 +635,7 @@ export function createBackgroundModules(options: {
bookmarks,
tabManagement,
readwise,
betaFeatures,
syncSettings,
backupModule: new backup.BackupBackgroundModule({
storageManager,
Expand Down
21 changes: 21 additions & 0 deletions src/beta-features/background/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { BetaFeatureInterface } from './types/remote-interface'
import { registerRemoteFunctions } from 'src/util/webextensionRPC'
import { SyncSettingsStoreInterface } from 'src/sync-settings/types'

export class BetaFeaturesBackground {
remoteFunctions: BetaFeatureInterface<'provider'>

constructor(
private options: {
settingsStore: SyncSettingsStoreInterface
},
) {
this.remoteFunctions = {
// validateAPIKey: remoteFunctionWithoutExtraArgs(this.validateAPIKey),
}
}

setupRemoteFunctions() {
registerRemoteFunctions(this.remoteFunctions)
}
}
14 changes: 14 additions & 0 deletions src/beta-features/background/types/remote-interface.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import type { ReadwiseAPIResponse } from '@worldbrain/memex-common/lib/readwise-integration/api/types'
import type {
RemoteFunctionRole,
RemoteFunctionWithoutExtraArgs,
} from 'src/util/webextensionRPC'
import type { Annotation } from 'src/annotations/types'

export interface BetaFeatureInterface<Role extends RemoteFunctionRole> {
// validateAPIKey: RemoteFunctionWithoutExtraArgs<
// Role,
// { key: string },
// ReadwiseAPIResponse
// >
}
4 changes: 4 additions & 0 deletions src/beta-features/background/types/settings.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export interface ReadwiseSettings {
apiKey?: string
onlyHighlightsSetting?: boolean
}
126 changes: 126 additions & 0 deletions src/beta-features/ui/containers/beta-features-settings/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
import React from 'react'
import styled from 'styled-components'

import { StatefulUIElement } from 'src/util/ui-logic'
import BetaFeaturesSettingsLogic from './logic'
import {
BetaFeaturesSettingsDependencies,
BetaFeaturesSettingsEvent,
BetaFeaturesSettingsState,
} from './types'
import { PrimaryAction } from '@worldbrain/memex-common/lib/common-ui/components/PrimaryAction'
import { connect } from 'react-redux'
import { show } from 'src/overview/modals/actions'
import { withCurrentUser } from 'src/authentication/components/AuthConnector'
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'

const BetaFeaturesData = [
{
id: 'imageOverlay',
title: 'Image Hover Buttons',
description:
'Display an overlay on every image to either save it or analyze it with AI.',
moreInfo:
'https://links.memex.garden/assets/beta-features/image-hover-buttons',
},
]

export interface Props
extends Omit<BetaFeaturesSettingsDependencies, 'syncSettingsBG'> {}

export default class BetaFeaturesSettings extends StatefulUIElement<
Props,
BetaFeaturesSettingsState,
BetaFeaturesSettingsEvent
> {
constructor(props: Props) {
super(
props,
new BetaFeaturesSettingsLogic({
...props,
syncSettingsBG: runInBackground(),
}),
)
}

render() {
return (
<SettingSection
icon={'stars'}
title={'Beta Features'}
description={
'These features are still in development and may not be fully stable. Use at your own risk.'
}
>
{BetaFeaturesData.map((feature) => (
<Row>
<LeftSide>
<Title>{feature.title}</Title>
<Description>{feature.description}</Description>
</LeftSide>
<RightSide>
<PrimaryAction
label="More Info"
onClick={() => {}}
type="tertiary"
size={'medium'}
/>
<PrimaryAction
label={
this.state.betaFeaturesSetting[feature.id]
? 'Deactivate'
: 'Activate'
}
onClick={async () => {
this.processEvent('activateFeature', {
feature: feature.id,
})
}}
type="primary"
size={'medium'}
/>
</RightSide>
</Row>
))}
</SettingSection>
)
}
}

const Row = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
grid-gap: 20px;
margin-bottom: 30px;
`

const LeftSide = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
grid-gap: 10px;
`

const Title = styled.div`
color: ${(props) => props.theme.colors.greyScale7};
font-size: 18px;
font-weight: 600;
`

const Description = styled.div`
color: ${(props) => props.theme.colors.greyScale5};
font-size: 14px;
font-weight: 300;
`

const RightSide = styled.div`
display: flex;
justify-content: center;
align-items: center;
grid-gap: 10px;
`
61 changes: 61 additions & 0 deletions src/beta-features/ui/containers/beta-features-settings/logic.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import { UILogic, UIEventHandler } from 'ui-logic-core'
import {
BetaFeaturesSettingsState,
BetaFeaturesSettingsEvent,
BetaFeaturesSettingsDependencies,
} from './types'
import { loadInitial, executeUITask } from 'src/util/ui-logic'
import { runInBackground } from 'src/util/webextensionRPC'
import { SyncSettingsStoreInterface } from 'src/sync-settings/types'

export const INITIAL_STATE: BetaFeaturesSettingsState = {
betaFeaturesSetting: null,
}

type EventHandler<
EventName extends keyof BetaFeaturesSettingsEvent
> = UIEventHandler<
BetaFeaturesSettingsState,
BetaFeaturesSettingsEvent,
EventName
>

export default class BetaFeaturesSettingsLogic extends UILogic<
BetaFeaturesSettingsState,
BetaFeaturesSettingsEvent
> {
private syncSettingsBG = runInBackground<SyncSettingsStoreInterface>()

constructor(protected dependencies: BetaFeaturesSettingsDependencies) {
super()
}

getInitialState(): BetaFeaturesSettingsState {
return {
...INITIAL_STATE,
}
}

init = async () => {
// await loadInitial<BetaFeaturesSettingsState>(this, async () => {})
}

activateFeature: EventHandler<'activateFeature'> = async ({
event,
previousState,
}) => {
let betaFeaturesSetting = previousState.betaFeaturesSetting
const feature = event.feature
const previousValue = betaFeaturesSetting[feature]

await this.dependencies.syncSettingsBG.extension.set('betaFeatures', {
[feature]: !previousValue,
})

betaFeaturesSetting[feature] = true

this.emitMutation({
betaFeaturesSetting: { $set: betaFeaturesSetting },
})
}
}
16 changes: 16 additions & 0 deletions src/beta-features/ui/containers/beta-features-settings/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { UIEvent } from 'ui-logic-core'
import { SyncSettingsStoreInterface } from 'src/sync-settings/types'

export interface BetaFeaturesSettingsState {
betaFeaturesSetting: {
[feature: string]: boolean
} | null
}

export interface BetaFeaturesSettingsDependencies {
syncSettingsBG: SyncSettingsStoreInterface
}

export type BetaFeaturesSettingsEvent = UIEvent<{
activateFeature: { feature: string }
}>
87 changes: 87 additions & 0 deletions src/options/betaFeatures/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import { PrimaryAction } from '@worldbrain/memex-common/lib/common-ui/components/PrimaryAction'
import SettingSection from '@worldbrain/memex-common/lib/common-ui/components/setting-section'
import React from 'react'
import styled from 'styled-components'

export class BetaFeatures extends React.Component {
render() {
return (
<SettingSection
icon={'stars'}
title={'Beta Features'}
description={
'These features are still in development and may not be fully stable. Use at your own risk.'
}
>
{BetaFeaturesData.map((feature) => (
<Row>
<LeftSide>
<Title>{feature.title}</Title>
<Description>{feature.description}</Description>
</LeftSide>
<RightSide>
<PrimaryAction
label="More Info"
onClick={() => {}}
type="tertiary"
size={'medium'}
/>
<PrimaryAction
label="Activate"
onClick={() => {}}
type="primary"
size={'medium'}
/>
</RightSide>
</Row>
))}
</SettingSection>
)
}
}

const BetaFeaturesData = [
{
id: 'imageOverlay',
title: 'Image Hover Buttons',
description:
'Display an overlay on every image to either save it or analyze it with AI.',
moreInfo:
'https://links.memex.garden/assets/beta-features/image-hover-buttons',
},
]

const Row = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
grid-gap: 20px;
margin-bottom: 30px;
`

const LeftSide = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
grid-gap: 10px;
`

const Title = styled.div`
color: ${(props) => props.theme.colors.greyScale7};
font-size: 18px;
font-weight: 600;
`

const Description = styled.div`
color: ${(props) => props.theme.colors.greyScale5};
font-size: 14px;
font-weight: 300;
`

const RightSide = styled.div`
display: flex;
justify-content: center;
align-items: center;
grid-gap: 10px;
`
Loading

0 comments on commit babc89f

Please sign in to comment.