greatly improve the highlighting tooltip UX

- prompt tempates
- More compact
-

src/common-ui/components/prompt-templates/index.tsx

@@ -441,7 +441,7 @@ const Header = styled.div`
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    padding: 15px 15px 0px 24px;
+    padding: 15px 15px 0px 15px;
     height: 30px;
     align-items: center;
 `
@@ -454,9 +454,9 @@ const ButtonBox = styled.div`
 `
 
 const SectionTitle = styled.div`
-    color: ${(props) => props.theme.colors.greyScale4};
-    font-size: 14px;
-    font-weight: 400;
+    color: ${(props) => props.theme.colors.white};
+    font-size: 16px;
+    font-weight: 600;
     flex: 1;
     white-space: nowrap;
 `
@@ -494,7 +494,7 @@ const Title = styled.div`
 `
 
 const ContentBlock = styled.div`
-    padding: 5px 15px 15px 15px;
+    padding: 5px;
     overflow: scroll;
     width: 100%;
     box-sizing: border-box;

src/content-scripts/content_script/global.ts

@@ -1171,6 +1171,7 @@ export async function main(
                 analyticsBG,
                 pageActivityIndicatorBG,
                 localStorageAPI: browser.storage.local,
+                syncSettingsBG: syncSettingsBG,
             })
             components.tooltip?.resolve()
         },

src/in-page-ui/tooltip/content_script/components/index.tsx

@@ -31,6 +31,12 @@ import {
     getRemoteEventEmitter,
 } from 'src/util/webextensionRPC'
 import { AnnotationPrivacyLevels } from '@worldbrain/memex-common/lib/annotations/types'
+import PromptTemplatesComponent from 'src/common-ui/components/prompt-templates'
+import { RemoteSyncSettingsInterface } from 'src/sync-settings/background/types'
+import {
+    SyncSettingsStore,
+    createSyncSettingsStore,
+} from 'src/sync-settings/util'
 
 interface TooltipRootProps {
     mount: InPageUIRootMount
@@ -42,6 +48,7 @@ interface TooltipRootProps {
     contentSharingBG: ContentSharingInterface
     authBG: AuthRemoteFunctionsInterface
     spacesBG: RemoteCollectionsInterface
+    syncSettingsBG: RemoteSyncSettingsInterface
     bgScriptsBG: RemoteBGScriptInterface<'caller'>
     pageActivityIndicatorBG: RemotePageActivityIndicatorInterface
     localStorageAPI: Storage.LocalStorageArea
@@ -56,6 +63,7 @@ interface TooltipRootState {
     showSpacePicker: boolean
     spaceSearchResults: any[]
     askAITabActive?: boolean
+    aiPrompt?: string
 }
 
 class TooltipRoot extends React.Component<TooltipRootProps, TooltipRootState> {
@@ -65,6 +73,7 @@ class TooltipRoot extends React.Component<TooltipRootProps, TooltipRootState> {
         showSpacePicker: false,
         spaceSearchResults: [],
         askAITabActive: false,
+        aiPrompt: null,
     }
     private summarisePageEvents: TypedRemoteEventEmitter<'pageSummary'>
 
@@ -141,18 +150,23 @@ class TooltipRoot extends React.Component<TooltipRootProps, TooltipRootState> {
         const annotation = this.props.annotationsCache.annotations.byId[
             annotationId
         ]
-        this.setState({ currentAnnotation: annotation })
+        this.setState({
+            currentAnnotation: annotation,
+            currentAnnotationLists: [],
+        })
     }
 
     selectSpaceForAnnotation = async (listId: number) => {
         const { currentAnnotation } = this.state
+
         if (!currentAnnotation) {
             return
         }
 
         const isListAlreadySelected = this.state.currentAnnotationLists.some(
             (currentList) => currentList.localId === listId,
         )
+
         if (isListAlreadySelected) {
             return
         }
@@ -167,7 +181,7 @@ class TooltipRoot extends React.Component<TooltipRootProps, TooltipRootState> {
 
         const existing = this.props.annotationsCache.annotations.byId[
             currentAnnotation.unifiedId
-        ].unifiedListIds
+        ]?.unifiedListIds
 
         const unifiedListId = newList.unifiedId
         const updatedUnifiedListIdLists: UnifiedList['unifiedId'][] = [
@@ -306,6 +320,20 @@ class TooltipRoot extends React.Component<TooltipRootProps, TooltipRootState> {
         }
     }
 
+    renderPromptTemplates = () => {
+        return (
+            <PromptTemplatesComponent
+                syncSettingsBG={this.props.syncSettingsBG}
+                getRootElement={this.props.getRootElement}
+                onTemplateSelect={(text: string) =>
+                    this.setState({
+                        aiPrompt: text,
+                    })
+                }
+            />
+        )
+    }
+
     renderSpacePicker = (buttonRef?) => {
         if (this.state.showSpacePicker) {
             const CollectionsPickerElement = (
@@ -351,6 +379,9 @@ class TooltipRoot extends React.Component<TooltipRootProps, TooltipRootState> {
                         offsetX={12}
                         offsetY={-10}
                         closeComponent={() => this.toggleSpacePicker(false)}
+                        blockedBackground
+                        blockedBackgroundTransparent
+                        instaClose
                     >
                         {CollectionsPickerElement}
                     </PopoutBox>
@@ -378,6 +409,7 @@ class TooltipRoot extends React.Component<TooltipRootProps, TooltipRootState> {
                         renderSpacePicker={(buttonRef) =>
                             this.renderSpacePicker(buttonRef)
                         }
+                        promptTemplates={this.renderPromptTemplates}
                         saveAnnotation={this.saveAnnotation}
                         getAnnotationData={this.getAnnotationData}
                         currentAnnotationLists={
@@ -394,6 +426,8 @@ class TooltipRoot extends React.Component<TooltipRootProps, TooltipRootState> {
                         spaceSearchResults={this.state.spaceSearchResults}
                         addNewSpaceViaWikiLinks={this.addNewSpaceViaWikiLinks}
                         isAskAIOpen={this.state.askAITabActive}
+                        showSpacePicker={this.state.showSpacePicker}
+                        aiPrompt={this.state.aiPrompt}
                     />
                 </ThemeProvider>
             </StyleSheetManager>
@@ -423,6 +457,7 @@ export function setupUIContainer(
                 localStorageAPI={props.localStorageAPI}
                 getRootElement={props.getRootElement}
                 inPageUI={props.inPageUI}
+                syncSettingsBG={props.syncSettingsBG}
             />,
             mount.rootElement,
         )

src/in-page-ui/tooltip/content_script/interactions.ts

@@ -196,6 +196,7 @@ export const insertTooltip = async (params: TooltipInsertDependencies) => {
             localStorageAPI: params.localStorageAPI,
             getRootElement: () => target,
             inPageUI: params.inPageUI,
+            syncSettingsBG: params.syncSettingsBG,
         },
     )
 

src/in-page-ui/tooltip/types.ts

@@ -10,6 +10,7 @@ import type { AnalyticsCoreInterface } from '@worldbrain/memex-common/lib/analyt
 import type { RemoteBGScriptInterface } from 'src/background-script/types'
 import type { Storage } from 'webextension-polyfill'
 import type { SharedInPageUIState } from '../shared-state/shared-in-page-ui-state'
+import { RemoteSyncSettingsInterface } from 'src/sync-settings/background/types'
 
 export interface TooltipDependencies extends AnnotationFunctions {
     inPageUI: SharedInPageUIState
@@ -23,4 +24,5 @@ export interface TooltipDependencies extends AnnotationFunctions {
     analyticsBG: AnalyticsCoreInterface
     pageActivityIndicatorBG: RemotePageActivityIndicatorInterface
     localStorageAPI: Storage.LocalStorageArea
+    syncSettingsBG: RemoteSyncSettingsInterface
 }