Merge branch 'hotfix/3.19.37'

package.json

@@ -1,6 +1,6 @@
 {
     "name": "worldbrain-extension",
-    "version": "3.19.35",
+    "version": "3.19.37",
     "homepage": "https://memex.garden",
     "repository": "https://github.com/WorldBrain/Memex",
     "scripts": {

src/content-scripts/content_script/global.ts

@@ -97,7 +97,6 @@ import { HIGHLIGHT_COLORS_DEFAULT } from '@worldbrain/memex-common/lib/common-ui
 import { PKMSyncBackgroundModule } from 'src/pkm-integrations/background'
 import { injectTelegramCustomUI } from './injectionUtils/telegram'
 import { renderSpacesBar } from './injectionUtils/utils'
-import { getTimestampedNoteWithAIsummaryForYoutubeNotes } from './injectionUtils/youtube'
 import {
     injectTwitterProfileUI,
     trackTwitterMessageList,
@@ -113,7 +112,6 @@ import type { InPageUIComponent } from 'src/in-page-ui/shared-state/types'
 import type { RemoteCopyPasterInterface } from 'src/copy-paster/background/types'
 import type { HighlightColor } from '@worldbrain/memex-common/lib/common-ui/components/highlightColorPicker/types'
 import type { InPageUIInterface } from 'src/in-page-ui/background/types'
-import type { Storage } from 'webextension-polyfill'
 import type { PseudoSelection } from '@worldbrain/memex-common/lib/in-page-ui/types'
 import {
     cloneSelectionAsPseudoObject,
@@ -125,6 +123,7 @@ import {
 } from '@worldbrain/memex-common/lib/subscriptions/constants'
 import type { RemoteSearchInterface } from 'src/search/background/types'
 import * as anchoring from '@worldbrain/memex-common/lib/annotations'
+import type { TaskState } from 'ui-logic-core/lib/types'
 
 // Content Scripts are separate bundles of javascript code that can be loaded
 // on demand by the browser, as needed. This main function manages the initialisation
@@ -578,7 +577,17 @@ export async function main(
             quality: 100,
         })
 
+    let highlightCreateState: TaskState = 'pristine'
+    // Block nav away from current page while highlight being created
+    window.addEventListener('beforeunload', (e) => {
+        let shouldBlockUnload = highlightCreateState === 'running'
+        if (shouldBlockUnload) {
+            e.preventDefault()
+        }
+    })
+
     const annotationsFunctions = {
+        // TODO: Simplify and move this logic away from here
         createHighlight: (
             analyticsEvent?: AnalyticsEvent<'Highlights'>,
         ) => async (
@@ -589,6 +598,7 @@ export async function main(
             highlightColorSetting?: HighlightColor,
             preventHideTooltip?: boolean,
         ) => {
+            highlightCreateState = 'running'
             let anchor: Anchor
             let quote: string
 
@@ -603,6 +613,7 @@ export async function main(
                 anchor = { quote, descriptor }
             }
             if (quote?.length === 0 && !drawRectangle) {
+                highlightCreateState = 'success'
                 return
             }
 
@@ -618,7 +629,7 @@ export async function main(
                 sidebarEvents.emit('showPowerUpModal', {
                     limitReachedNotif: 'Bookmarks',
                 })
-
+                highlightCreateState = 'error'
                 return
             }
 
@@ -647,6 +658,7 @@ export async function main(
                     screenshotGrabResult == null ||
                     screenshotGrabResult.anchor == null
                 ) {
+                    highlightCreateState = 'success'
                     return
                 }
 
@@ -722,8 +734,10 @@ export async function main(
                 }
             }
 
+            highlightCreateState = 'success'
             return annotationId
         },
+        // TODO: Simplify and move this logic away from here
         createAnnotation: (
             analyticsEvent?: AnalyticsEvent<'Annotations'>,
         ) => async (
@@ -734,8 +748,10 @@ export async function main(
             commentText?: string,
             highlightColorSetting?: HighlightColor,
         ) => {
+            highlightCreateState = 'running'
             const selectionEmpty = !selection?.toString().length
             if (selectionEmpty) {
+                highlightCreateState = 'success'
                 return
             }
 
@@ -761,6 +777,7 @@ export async function main(
                 sidebarEvents.emit('showPowerUpModal', {
                     limitReachedNotif: 'Bookmarks',
                 })
+                highlightCreateState = 'error'
                 return
             }
 
@@ -787,6 +804,7 @@ export async function main(
                     screenshotGrabResult == null ||
                     screenshotGrabResult.anchor == null
                 ) {
+                    highlightCreateState = 'success'
                     return
                 }
 
@@ -868,6 +886,7 @@ export async function main(
                     )
                 }
             }
+            highlightCreateState = 'success'
         },
         askAI: () => (
             highlightedText: string,

src/dashboard-refactor/index.tsx

@@ -2389,11 +2389,15 @@ const ListSidebarContent = styled(Rnd)<{
         `}
     ${(props) =>
         props.peeking &&
-        css`
+        css<any>`
             position: absolute
             height: max-content;
-            background-color: ${(props) => props.theme.colors.greyScale1}98;
-            backdrop-filter: blur(30px);
+            background-color: ${(props) =>
+                props.inPageMode
+                    ? props.theme.colors.greyScale1
+                    : props.theme.colors.greyScale1 + '98'};
+            backdrop-filter: ${(props) =>
+                props.inPageMode ? 'unset' : 'blur(30px)'};
             //box-shadow: rgb(16 30 115 / 3%) 4px 0px 16px;
             margin-top: 50px;
             margin-bottom: 9px;

src/in-page-ui/ribbon/react/containers/ribbon/index.tsx

@@ -36,7 +36,7 @@ export default class RibbonContainer extends StatefulUIElement<
 > {
     private ribbonRef = React.createRef<Ribbon>()
 
-    constructor(props) {
+    constructor(props: RibbonContainerProps) {
         super(
             props,
             new RibbonContainerLogic({
@@ -48,6 +48,15 @@ export default class RibbonContainer extends StatefulUIElement<
                     this.ribbonRef?.current?.focusCreateForm(),
             }),
         )
+
+        props.events.on('bookmarkPage', () =>
+            this.processEvent('toggleBookmark', null),
+        )
+        props.events.on('openSpacePickerInRibbon', () =>
+            this.processEvent('setShowListsPicker', { value: true }),
+        )
+        props.inPageUI.events.on('ribbonAction', this.handleExternalAction)
+        window.addEventListener('beforeunload', this.handleBeforeUnload)
     }
 
     private get normalizedPageUrl(): string | null {
@@ -56,24 +65,13 @@ export default class RibbonContainer extends StatefulUIElement<
             : null
     }
 
-    async componentDidMount() {
-        await super.componentDidMount()
-        this.props.inPageUI.events.on('ribbonAction', this.handleExternalAction)
-
-        this.props.events.on('bookmarkPage', () =>
-            this.processEvent('toggleBookmark', null),
-        )
-        this.props.events.on('openSpacePickerInRibbon', () =>
-            this.processEvent('setShowListsPicker', { value: true }),
-        )
-    }
-
     async componentWillUnmount() {
-        await super.componentWillUnmount()
         this.props.inPageUI.events.removeListener(
             'ribbonAction',
             this.handleExternalAction,
         )
+        window.removeEventListener('beforeunload', this.handleBeforeUnload)
+        await super.componentWillUnmount()
     }
 
     componentDidUpdate(prevProps: RibbonContainerProps) {
@@ -90,6 +88,14 @@ export default class RibbonContainer extends StatefulUIElement<
         }
     }
 
+    // Block user nav away when some write RPC op is occurring
+    private handleBeforeUnload = (e: BeforeUnloadEvent) => {
+        let shouldBlockUnload = this.state.bookmark.loadState === 'running'
+        if (shouldBlockUnload) {
+            e.preventDefault()
+        }
+    }
+
     private whichFeed = () => {
         if (process.env.NODE_ENV === 'production') {
             return 'https://memex.social/feed'

src/personal-cloud/background/backend/translation-layer/index.test.ts

@@ -472,7 +472,7 @@ async function setup(options?: {
         ) => {
             const clientSchemaVersion =
                 downloadOptions?.clientSchemaVersion ??
-                STORAGE_VERSIONS[37].version
+                STORAGE_VERSIONS[38].version
             const { batch } = await downloadClientUpdates({
                 getNow,
                 startTime: 0,

src/personal-cloud/background/index.tests.ts

@@ -391,7 +391,7 @@ export async function setupSyncBackgroundTest(
             storageManager: serverStorage.manager,
             storageModules: serverStorage.modules,
             getSqlStorageMananager,
-            clientSchemaVersion: STORAGE_VERSIONS[37].version,
+            clientSchemaVersion: STORAGE_VERSIONS[38].version,
             services: {
                 activityStreams: services.activityStreams,
                 pushMessaging: pushMessagingService,

src/sidebar/annotations-sidebar/containers/AnnotationsSidebarContainer.tsx

@@ -120,18 +120,35 @@ export class AnnotationsSidebarContainer<
         )
 
         window['_getState'] = () => ({ ...this.state })
-        this.listenToWindowChanges()
+
+        window.addEventListener('beforeunload', this.handleBeforeUnload)
+        window.addEventListener('resize', this.handleWindowResize)
     }
 
-    listenToWindowChanges() {
-        window.addEventListener('resize', () => {
-            if (this.state.isWidthLocked) {
-                this.processEvent('adjustSidebarWidth', {
-                    newWidth: this.state.sidebarWidth,
-                    isWidthLocked: true,
-                })
-            }
-        })
+    async componentWillUnmount(): Promise<void> {
+        window.removeEventListener('beforeunload', this.handleBeforeUnload)
+        window.removeEventListener('resize', this.handleWindowResize)
+        await super.componentWillUnmount()
+    }
+
+    private handleWindowResize = async () => {
+        if (this.state.isWidthLocked) {
+            await this.processEvent('adjustSidebarWidth', {
+                newWidth: this.state.sidebarWidth,
+                isWidthLocked: true,
+            })
+        }
+    }
+
+    // Block user nav away when some write RPC op is occurring
+    private handleBeforeUnload = (e: BeforeUnloadEvent) => {
+        let shouldBlockUnload =
+            this.state.noteEditState === 'running' ||
+            this.state.noteCreateState === 'running' ||
+            this.state.noteColorUpdateState === 'running'
+        if (shouldBlockUnload) {
+            e.preventDefault()
+        }
     }
 
     private getListDetailsById: ListDetailsGetter = (listId) => {