Merge branch 'feature/page-indicator' into develop

# Conflicts:
#	external/@worldbrain/memex-common
#	src/content-scripts/content_script/global.ts

package.json

@@ -16,6 +16,7 @@
         "watch:prod": "npm run build:clean && webpack --watch --env.prod",
         "watch:notif": "webpack --watch --env.notifs",
         "watch:clean": "npm run cache:clean && npm run watch:notif",
+        "watch:clean:mv2": "npm run cache:clean && npm run watch:notif:mv2",
         "cache:clean": "rimraf ./node_modules/.cache",
         "stats": "webpack --profile -1json > stats.json",
         "postgres:start": "yarn postgres stop; sudo docker run --name storex-test-postgres -p 127.0.0.1:5435:5432/tcp -e POSTGRES_PASSWORD=storex -d postgres",

src/background-mv3.ts

@@ -2,7 +2,6 @@ import browser from 'webextension-polyfill'
 import XMLHttpRequest from 'xhr-shim'
 import { getToken } from 'firebase/messaging'
 import { onBackgroundMessage, getMessaging } from 'firebase/messaging/sw'
-import { FCM_SYNC_TRIGGER_MSG } from '@worldbrain/memex-common/lib/personal-cloud/backend/constants'
 import {
     setupRpcConnection,
     setupRemoteFunctionsImplementations,
@@ -34,6 +33,8 @@ import type {
     DexieStorageBackend,
     IndexedDbImplementation,
 } from '@worldbrain/storex-backend-dexie'
+import type { PushMessagePayload } from '@worldbrain/memex-common/lib/push-messaging/types'
+import PushMessagingClient from './push-messaging/background'
 
 // This is here so the correct Service Worker `self` context is available. Maybe there's a better way to set this via tsconfig.
 declare var self: ServiceWorkerGlobalScope & {
@@ -129,11 +130,17 @@ async function main() {
     //  Doing this as all event listeners need to be set up synchronously, before any async logic happens. AND to avoid needing to update storex yet.
     ;(storageManager.backend as DexieStorageBackend)._onRegistryInitialized()
 
-    // Set up incoming FCM handling logic (same thing as SW `push` event)
-    onBackgroundMessage(getMessaging(), (payload) => {
-        if (payload.data?.type === FCM_SYNC_TRIGGER_MSG) {
-            backgroundModules.personalCloud.triggerSyncContinuation()
+    // Set up incoming FCM handling logic (`onBackgroundMessage` wraps the SW `push` event)
+    const pushMessagingClient = new PushMessagingClient({
+        bgModules: backgroundModules,
+    })
+    onBackgroundMessage(getMessaging(), async (message) => {
+        const payload = message.data as PushMessagePayload
+        if (payload == null) {
+            return
         }
+
+        await pushMessagingClient.handleIncomingMessage(payload)
     })
 
     await setupBackgroundModules(backgroundModules, storageManager)
@@ -163,6 +170,8 @@ async function main() {
         copyPaster: backgroundModules.copyPaster.remoteFunctions,
         contentSharing: backgroundModules.contentSharing.remoteFunctions,
         personalCloud: backgroundModules.personalCloud.remoteFunctions,
+        pageActivityIndicator:
+            backgroundModules.pageActivityIndicator.remoteFunctions,
         pdf: backgroundModules.pdfBg.remoteFunctions,
     })
     rpcManager.unpause()

src/background-script/index.ts

@@ -46,6 +46,7 @@ interface Dependencies {
     storageManager: Storex
     bgModules: Pick<
         BackgroundModules,
+        | 'pageActivityIndicator'
         | 'tabManagement'
         | 'notifications'
         | 'copyPaster'

src/background-script/quick-and-dirty-migrations/index.ts

@@ -30,7 +30,7 @@ export interface MigrationProps {
     localStorage: Storage.LocalStorageArea
     bgModules: Pick<
         BackgroundModules,
-        'readwise' | 'syncSettings' | 'personalCloud'
+        'readwise' | 'syncSettings' | 'personalCloud' | 'pageActivityIndicator'
     >
     localExtSettingStore: SettingStore<LocalExtensionSettings>
     syncSettingsStore: SyncSettingsStore<'extension'>
@@ -49,6 +49,16 @@ export const MIGRATION_PREFIX = '@QnDMigration-'
 // __IMPORTANT NOTE__
 
 export const migrations: Migrations = {
+    /*
+     * This exists to seed initial local followedList collection data based on remote data, for the
+     * release of the page-activity indicator feature. Future changes to this collection should be
+     * handled by cloud sync.
+     */
+    [MIGRATION_PREFIX + 'trigger-init-followed-list-pull-sync']: async ({
+        bgModules,
+    }) => {
+        await bgModules.pageActivityIndicator.syncFollowedLists()
+    },
     [MIGRATION_PREFIX + 'migrate-tags-to-spaces']: async ({
         bgModules: { personalCloud },
         syncSettingsStore,

src/background-script/setup.ts

@@ -98,6 +98,8 @@ import type { LocalExtensionSettings } from './types'
 import { normalizeUrl } from '@worldbrain/memex-url-utils/lib/normalize/utils'
 import { createSyncSettingsStore } from 'src/sync-settings/util'
 import DeprecatedStorageModules from './deprecated-storage-modules'
+import { PageActivityIndicatorBackground } from 'src/page-activity-indicator/background'
+import type { AutoPk } from '@worldbrain/memex-common/lib/storage/types'
 
 export interface BackgroundModules {
     auth: AuthBackground
@@ -106,6 +108,7 @@ export interface BackgroundModules {
     social: SocialBackground
     pdfBg: PDFBackground
     // connectivityChecker: ConnectivityCheckerBackground
+    pageActivityIndicator: PageActivityIndicatorBackground
     activityIndicator: ActivityIndicatorBackground
     directLinking: DirectLinkingBackground
     pages: PageIndexingBackground
@@ -334,6 +337,9 @@ export function createBackgroundModules(options: {
                 (await options.getServerStorage()).modules.users,
         })
 
+    const getCurrentUserId = async (): Promise<AutoPk | null> =>
+        (await auth.authService.getCurrentUser())?.id ?? null
+
     const activityStreams = new ActivityStreamsBackground({
         storageManager,
         callFirebaseFunction,
@@ -342,10 +348,7 @@ export function createBackgroundModules(options: {
     if (!options.userMessageService) {
         const userMessagesService = new FirebaseUserMessageService({
             firebase: getFirebase,
-            auth: {
-                getCurrentUserId: async () =>
-                    (await auth.authService.getCurrentUser())?.id,
-            },
+            auth: { getCurrentUserId },
         })
         options.userMessageService = userMessagesService
         userMessagesService.startListening({
@@ -412,6 +415,14 @@ export function createBackgroundModules(options: {
         prefix: 'personalCloud.',
     })
 
+    const pageActivityIndicator = new PageActivityIndicatorBackground({
+        fetch,
+        storageManager,
+        getCurrentUserId,
+        getServerStorage,
+        jobScheduler: jobScheduler.scheduler,
+    })
+
     const personalCloud: PersonalCloudBackground = new PersonalCloudBackground({
         storageManager,
         syncSettingsStore,
@@ -465,8 +476,7 @@ export function createBackgroundModules(options: {
         },
         settingStore: personalCloudSettingStore,
         localExtSettingStore,
-        getUserId: async () =>
-            (await auth.authService.getCurrentUser())?.id ?? null,
+        getUserId: getCurrentUserId,
         async *userIdChanges() {
             for await (const nextUser of authChanges(auth.authService)) {
                 yield nextUser
@@ -586,6 +596,7 @@ export function createBackgroundModules(options: {
             tabManagement,
             personalCloud,
             notifications,
+            pageActivityIndicator,
         },
     })
 
@@ -602,6 +613,7 @@ export function createBackgroundModules(options: {
         search,
         eventLog: new EventLogBackground({ storageManager }),
         activityIndicator,
+        pageActivityIndicator,
         customLists,
         tags,
         bookmarks,
@@ -755,6 +767,7 @@ export async function setupBackgroundModules(
     // await backgroundModules.pdfBg.setupRequestInterceptors()
     await backgroundModules.analytics.setup()
     await backgroundModules.jobScheduler.setup()
+    await backgroundModules.pageActivityIndicator.setup()
 
     // Ensure log-in state gotten from FB + trigger share queue processing, but don't wait for it
     await backgroundModules.auth.authService.refreshUserInfo()
@@ -767,6 +780,7 @@ export function getBackgroundStorageModules(
     __deprecatedModules: DeprecatedStorageModules,
 ): { [moduleName: string]: StorageModule } {
     return {
+        pageActivityIndicator: backgroundModules.pageActivityIndicator.storage,
         pageFetchBacklog: __deprecatedModules.pageFetchBacklogStorage,
         annotations: backgroundModules.directLinking.annotationStorage,
         readwiseAction: __deprecatedModules.readwiseActionQueueStorage,

src/background.ts

@@ -202,6 +202,8 @@ export async function main() {
         featuresBeta: backgroundModules.featuresBeta,
         tags: backgroundModules.tags.remoteFunctions,
         collections: backgroundModules.customLists.remoteFunctions,
+        pageActivityIndicator:
+            backgroundModules.pageActivityIndicator.remoteFunctions,
         readablePageArchives: backgroundModules.readable.remoteFunctions,
         copyPaster: backgroundModules.copyPaster.remoteFunctions,
         contentSharing: backgroundModules.contentSharing.remoteFunctions,

src/common-ui/components/design-library/icons.tsx

@@ -1,5 +1,6 @@
 import browser from 'webextension-polyfill'
 
+export const logoNoText = browser.runtime.getURL('/img/memexLogo.svg')
 export const logoSmall = browser.runtime.getURL(
     '/img/worldbrain-logo-narrow-bw-48.png',
 )

src/content-scripts/content_script/global.ts

@@ -43,10 +43,11 @@ import { getUnderlyingResourceUrl, isFullUrlPDF } from 'src/util/uri-utils'
 import { copyPaster, subscription } from 'src/util/remote-functions-background'
 import { ContentLocatorFormat } from '../../../external/@worldbrain/memex-common/ts/personal-cloud/storage/types'
 import { setupPdfViewerListeners } from './pdf-detection'
-import { RemoteCollectionsInterface } from 'src/custom-lists/background/types'
+import type { RemoteCollectionsInterface } from 'src/custom-lists/background/types'
 import type { RemoteBGScriptInterface } from 'src/background-script/types'
 import { createSyncSettingsStore } from 'src/sync-settings/util'
 import { checkPageBlacklisted } from 'src/blacklist/utils'
+import type { RemotePageActivityIndicatorInterface } from 'src/page-activity-indicator/background/types'
 // import { maybeRenderTutorial } from 'src/in-page-ui/guided-tutorial/content-script'
 
 // Content Scripts are separate bundles of javascript code that can be loaded
@@ -93,6 +94,9 @@ export async function main(
     const annotationsBG = runInBackground<AnnotationInterface<'caller'>>()
     const tagsBG = runInBackground<RemoteTagsInterface>()
     const collectionsBG = runInBackground<RemoteCollectionsInterface>()
+    const pageActivityIndicatorBG = runInBackground<
+        RemotePageActivityIndicatorInterface
+    >()
     const remoteFunctionRegistry = new RemoteFunctionRegistry()
     const annotationsManager = new AnnotationsManager()
     const toolbarNotifications = new ToolbarNotifications()
@@ -130,8 +134,8 @@ export async function main(
             delete components[component]
         },
     })
-    const pageUrl = await pageInfo.getPageUrl()
-    const loadAnnotationsPromise = annotationsCache.load(pageUrl)
+    const fullPageUrl = await pageInfo.getPageUrl()
+    const loadAnnotationsPromise = annotationsCache.load(fullPageUrl)
 
     const annotationFunctionsParams = {
         inPageUI,
@@ -344,15 +348,22 @@ export async function main(
         }
     }
 
-    const isPageBlacklisted = await checkPageBlacklisted(pageUrl)
-    const isSidebarEnabled = await sidebarUtils.getSidebarState()
+    const isPageBlacklisted = await checkPageBlacklisted(fullPageUrl)
+    const isSidebarEnabled =
+        (await sidebarUtils.getSidebarState()) &&
+        (pageInfo.isPdf ? isPdfViewerRunning : true)
+    const pageActivityStatus = await pageActivityIndicatorBG.getPageActivityStatus(
+        fullPageUrl,
+    )
 
     if (
-        isSidebarEnabled &&
-        !isPageBlacklisted &&
-        (pageInfo.isPdf ? isPdfViewerRunning : true)
+        (isSidebarEnabled && !isPageBlacklisted) ||
+        pageActivityStatus === 'has-annotations'
     ) {
-        await inPageUI.loadComponent('ribbon')
+        await inPageUI.loadComponent('ribbon', {
+            keepRibbonHidden: !isSidebarEnabled,
+            showPageActivityIndicator: pageActivityStatus === 'has-annotations',
+        })
     }
 
     return inPageUI

src/content-scripts/content_script/ribbon.ts

@@ -1,10 +1,11 @@
 import browser from 'webextension-polyfill'
 
 import { IGNORE_CLICK_OUTSIDE_CLASS } from '../constants'
-import { ContentScriptRegistry, RibbonScriptMain } from './types'
+import type { ContentScriptRegistry, RibbonScriptMain } from './types'
 import { setupRibbonUI, destroyRibbonUI } from 'src/in-page-ui/ribbon/react'
 import { createInPageUI, destroyInPageUI } from 'src/in-page-ui/utils'
 import { setSidebarState, getSidebarState } from 'src/sidebar-overlay/utils'
+import type { ShouldSetUpOptions } from 'src/in-page-ui/shared-state/types'
 
 export const main: RibbonScriptMain = async (options) => {
     const cssFile = browser.runtime.getURL(`/content_script_ribbon.css`)
@@ -18,20 +19,23 @@ export const main: RibbonScriptMain = async (options) => {
     }
     createMount()
 
-    options.inPageUI.events.on('componentShouldSetUp', ({ component }) => {
-        if (component === 'ribbon') {
-            setUp()
-        }
-    })
+    options.inPageUI.events.on(
+        'componentShouldSetUp',
+        ({ component, options }) => {
+            if (component === 'ribbon') {
+                setUp(options)
+            }
+        },
+    )
     options.inPageUI.events.on('componentShouldDestroy', ({ component }) => {
         if (component === 'ribbon') {
             destroy()
         }
     })
 
-    const setUp = async () => {
+    const setUp = async (setUpOptions: ShouldSetUpOptions = {}) => {
         createMount()
-        setupRibbonUI(mount.rootElement, {
+        setupRibbonUI(mount, {
             containerDependencies: {
                 ...options,
                 currentTab: (await browser.tabs?.getCurrent()) ?? {
@@ -42,6 +46,7 @@ export const main: RibbonScriptMain = async (options) => {
                 getSidebarEnabled: getSidebarState,
             },
             inPageUI: options.inPageUI,
+            setUpOptions,
         })
     }
 

src/content-scripts/content_script/sidebar.ts

@@ -6,7 +6,8 @@ import {
     destroyInPageSidebarUI,
 } from 'src/sidebar/annotations-sidebar/index'
 import browser from 'webextension-polyfill'
-import { InPageUIRootMount } from 'src/in-page-ui/types'
+import type { InPageUIRootMount } from 'src/in-page-ui/types'
+import type { ShouldSetUpOptions } from 'src/in-page-ui/shared-state/types'
 
 export const main: SidebarScriptMain = async (dependencies) => {
     const cssFile = browser.runtime.getURL(`/content_script_sidebar.css`)
@@ -24,7 +25,7 @@ export const main: SidebarScriptMain = async (dependencies) => {
         'componentShouldSetUp',
         ({ component, options }) => {
             if (component === 'sidebar') {
-                setUp({ showOnLoad: options.showSidebarOnLoad })
+                setUp(options)
             }
         },
     )
@@ -37,12 +38,12 @@ export const main: SidebarScriptMain = async (dependencies) => {
         },
     )
 
-    const setUp = async (options: { showOnLoad?: boolean } = {}) => {
+    const setUp = async (options: ShouldSetUpOptions = {}) => {
         createMount()
         setupInPageSidebarUI(mount, {
             ...dependencies,
             pageUrl: await dependencies.getPageUrl(),
-            initialState: options.showOnLoad ? 'visible' : 'hidden',
+            initialState: options.showSidebarOnLoad ? 'visible' : 'hidden',
         })
     }