-
Notifications
You must be signed in to change notification settings - Fork 340
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add beta features section to options
- Loading branch information
1 parent
7e5996a
commit babc89f
Showing
13 changed files
with
402 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
// > | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
126
src/beta-features/ui/containers/beta-features-settings/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
61
src/beta-features/ui/containers/beta-features-settings/logic.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
16
src/beta-features/ui/containers/beta-features-settings/types.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 } | ||
}> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
` |
Oops, something went wrong.