Merge branch 'release/3.1.0' into develop

WorldBrain · Jan 1, 2022 · 52a016a · 52a016a
2 parents b7139c0 + 19ef79b
commit 52a016a
Show file tree

Hide file tree

Showing 89 changed files with 2,648 additions and 666 deletions.
diff --git a/external/@worldbrain/storex b/external/@worldbrain/storex
diff --git a/img/arrow-up.svg b/img/arrow-up.svg
diff --git a/img/compress-alt.svg b/img/compress-alt.svg
diff --git a/img/doubleArrow.svg b/img/doubleArrow.svg
diff --git a/img/expand-alt.svg b/img/expand-alt.svg
diff --git a/img/thumbtack.svg b/img/thumbtack.svg
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "worldbrain-extension",
-    "version": "3.0.11",
+    "version": "3.1.0",
     "homepage": "https://worldbrain.io",
     "repository": "https://github.com/WorldBrain/Memex",
     "scripts": {
@@ -121,6 +121,7 @@
         "react-markdown": "^5.0.0",
         "react-onclickoutside": "^6.7.1",
         "react-redux": "^5.0.7",
+        "react-rnd": "^10.3.5",
         "react-router": "^3.2.1",
         "react-shadow-dom-retarget-events": "^1.0.8",
         "react-string-replace": "^0.4.4",

diff --git a/src/annotations/annotation-save-logic.ts b/src/annotations/annotation-save-logic.ts
@@ -56,6 +56,7 @@ export async function createAnnotation({
             await copyToClipboard(getNoteShareUrl({ remoteAnnotationId }))
         }
     }
+
     return {
         remoteAnnotationLink: shareOpts?.shouldShare
             ? getNoteShareUrl({ remoteAnnotationId })
@@ -68,7 +69,13 @@ export async function createAnnotation({
                     pageUrl: annotationData.fullPageUrl,
                     selector: annotationData.selector,
                     title: annotationData.pageTitle,
-                    comment: annotationData.comment,
+                    comment: annotationData.comment
+                        .replace(/\\\[/g, '[')
+                        .replace(/\\\]/g, ']')
+                        .replace(/\\\(/g, '(')
+                        .replace(/\\\)/g, ')')
+                        .replace(/\    \n/g, '')
+                        .replace(/\*   /g, ' * '),
                     body: annotationData.body,
                 },
                 { skipPageIndexing },
@@ -123,7 +130,13 @@ export async function updateAnnotation({
         savePromise: (async () => {
             await annotationsBG.editAnnotation(
                 annotationData.localId,
-                annotationData.comment,
+                annotationData.comment
+                    .replace(/\\\[/g, '[')
+                    .replace(/\\\]/g, ']')
+                    .replace(/\\\(/g, '(')
+                    .replace(/\\\)/g, ')')
+                    .replace(/\    \n/g, '')
+                    .replace(/\*   /g, ' * '),
             )
 
             await Promise.all([

diff --git a/src/annotations/components/AnnotationCreate.tsx b/src/annotations/components/AnnotationCreate.tsx
@@ -291,6 +291,7 @@ export class AnnotationCreate extends React.Component<Props, State>
                                     : 'initial'
                             }
                             height="430px"
+                            overflow="scroll"
                         >
                             <QuickTutorial
                                 markdownHelpOnTop={true}

diff --git a/src/annotations/components/AnnotationEdit.tsx b/src/annotations/components/AnnotationEdit.tsx
@@ -76,6 +76,7 @@ class AnnotationEdit extends React.Component<Props> {
                     }
                     markdownContent={this.props.comment}
                     onKeyDown={this.handleInputKeyDown}
+                    placeholder={`Add Note. Click on ( ? ) for formatting help.`}
                 />
             </EditorContainer>
         )

diff --git a/src/annotations/components/AnnotationEditable.tsx b/src/annotations/components/AnnotationEditable.tsx
@@ -462,7 +462,7 @@ export default class AnnotationEditable extends React.Component<Props> {
 
         return (
             <ThemeProvider theme={this.theme}>
-                <Margin top="10px">
+                <Margin top="5px">
                     <ItemBox
                         firstDivProps={{
                             id: this.props.url,
@@ -542,6 +542,7 @@ export default class AnnotationEditable extends React.Component<Props> {
                                     : 'initial'
                             }
                             height="430px"
+                            overflow="scroll"
                         >
                             <QuickTutorial
                                 markdownHelpOnTop={true}
@@ -787,9 +788,11 @@ const ContentContainer = styled.div`
 const DeleteConfirmStyled = styled.span`
     box-sizing: border-box;
     font-weight: 800;
-    font-size: 15px;
+    font-size: 14px;
     color: #000;
-    margin-right: 5px;
+    margin-right: 10px;
+    width: 100%;
+    text-align: right;
 `
 
 const CancelBtnStyled = styled.button`
@@ -849,6 +852,7 @@ const ActionBtnStyled = styled.button`
 const DeletionBox = styled.div`
     display: flex;
     justify-content: space-between;
+    align-items: center;
     border-top: 1px solid #f0f0f0;
     padding: 5px;
 }

diff --git a/src/annotations/components/save-btn.tsx b/src/annotations/components/save-btn.tsx
@@ -66,7 +66,7 @@ export default class AnnotationSaveBtn extends React.PureComponent<
                 </SaveBtnText>
                 <SaveBtnArrow horizontal="1px">
                     <DropdownMenuBtn
-                        btnChildren={<Icon icon="triangle" height="8px" />}
+                        btnChildren={<Icon icon="triangle" height="12px" />}
                         isOpen={this.state.isPrivacyLevelShown}
                         toggleOpen={() =>
                             this.setState((state) => ({

diff --git a/src/background-script/quick-and-dirty-migrations.ts b/src/background-script/quick-and-dirty-migrations.ts
@@ -366,7 +366,7 @@ export const migrations: Migrations = {
     'reseed-collections-suggestion-cache': async ({ localStorage, db }) => {
         const cacheStorageKey = 'custom-lists_suggestions'
 
-        const listEntries = await db.table('customLists').limit(10).toArray()
+        const listEntries = await db.table('customLists').limit(1000).toArray()
         const newCache: string[] = listEntries.map((entry) => entry.name)
 
         await localStorage.set({ [cacheStorageKey]: newCache })

diff --git a/src/background-script/setup.ts b/src/background-script/setup.ts
@@ -100,6 +100,7 @@ import type { ReadwiseSettings } from 'src/readwise-integration/background/types
 import type { LocalExtensionSettings } from './types'
 import { normalizeUrl } from '@worldbrain/memex-url-utils/lib/normalize/utils'
 import { createSyncSettingsStore } from 'src/sync-settings/util'
+import { runCloudIntegrationSideEffects } from 'src/personal-cloud/background/integration-side-effects'
 
 export interface BackgroundModules {
     auth: AuthBackground
@@ -224,7 +225,6 @@ export function createBackgroundModules(options: {
         createInboxEntry,
         tabManagement,
         getNow,
-        generateServerId,
     })
     tabManagement.events.on('tabRemoved', (event) => {
         pages.handleTabClose(event)
@@ -539,7 +539,7 @@ export function createBackgroundModules(options: {
                     : options.storageManager
 
             // WARNING: Keep in mind this skips all storage middleware
-            await updateOrCreate({
+            const { opPerformed } = await updateOrCreate({
                 ...params,
                 storageManager: incomingStorageManager,
                 executeOperation: (...args: any[]) => {
@@ -576,7 +576,12 @@ export function createBackgroundModules(options: {
                     { text: processed },
                 )
             }
+
+            return { opPerformed }
         },
+        runIntegrationSideEffects: runCloudIntegrationSideEffects({
+            customLists,
+        }),
         getServerStorageManager,
     })
     options.services.contentSharing.preKeyGeneration = async (params) => {

diff --git a/src/common-ui/GenericPicker/components/EntryResultsList.tsx b/src/common-ui/GenericPicker/components/EntryResultsList.tsx
@@ -9,6 +9,7 @@ interface Props {
     renderEntryRow: (list: DisplayEntry, index: number) => ReactNode
     emptyView?: ReactNode
     id: string
+    query?: string
 }
 
 export default class EntryResultsList extends React.Component<Props> {
@@ -23,6 +24,9 @@ export default class EntryResultsList extends React.Component<Props> {
     render = () => {
         return (
             <StyledContainer id={this.props.id}>
+                {this.props.query === '' && (
+                    <RecentItemsNotif>Recently used</RecentItemsNotif>
+                )}
                 {/*<FilterHelp>
                     Select lists to include
                     <Check size={18} /> or exclude
@@ -35,6 +39,12 @@ export default class EntryResultsList extends React.Component<Props> {
     }
 }
 
+const RecentItemsNotif = styled.div`
+    padding: 5px 10px;
+    font-size: 12px;
+    color: ${(props) => props.theme.colors.subText};
+`
+
 const StyledContainer = styled.div`
     overflow-y: auto;
     max-height: 280px;

diff --git a/src/common-ui/GenericPicker/logic.ts b/src/common-ui/GenericPicker/logic.ts
@@ -90,11 +90,7 @@ export default abstract class GenericPickerLogic<
     }
 
     getInitialState(): State {
-        return {
-            ...INITIAL_STATE,
-            selectedEntries: [],
-            displayEntries: [],
-        } as State
+        return INITIAL_STATE as State
     }
 
     async init() {
@@ -263,7 +259,7 @@ export default abstract class GenericPickerLogic<
         displayEntries: DisplayEntry[],
         term: string,
     ) => {
-        if (this._isTermInEntryList(list, term)) {
+        if (list.includes(term)) {
             this.emitMutation({
                 $apply: (state) => ({
                     ...state,
@@ -315,18 +311,6 @@ export default abstract class GenericPickerLogic<
             })
     }
 
-    /**
-     * Loops through a list of entries and exits if a match is found
-     */
-    _isTermInEntryList = (entryList: string[], term: string) => {
-        for (const entry of entryList) {
-            if (entry === term) {
-                return true
-            }
-        }
-        return false
-    }
-
     _queryInitialSuggestions = (term) =>
         this.defaultEntries.filter((entry) => entry.name.includes(term))
 

diff --git a/src/common-ui/components/design-library/HoverBox.tsx b/src/common-ui/components/design-library/HoverBox.tsx
@@ -10,10 +10,12 @@ export interface Props {
     withRelativeContainer?: boolean
     position?: string
     height?: string
+    overflow?: string
 }
 
 export class HoverBox extends React.Component<Props> {
     render() {
+        console.log(this.props.overflow)
         if (!this.props.withRelativeContainer) {
             return (
                 <HoverBoxDiv {...this.props}>{this.props.children}</HoverBoxDiv>
@@ -28,14 +30,15 @@ export class HoverBox extends React.Component<Props> {
     }
 }
 
-export const HoverBoxContainer = styled.div`
+export const HoverBoxContainer = styled.div<Props>`
     position: relative;
+    overflow: ${(props) => (props.overflow ? props.overflow : 'visible')};
 `
 
 export const HoverBoxDiv = styled.div<Props>`
     box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
         rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
-    overflow: visible;
+    overflow: ${(props) => (props.overflow ? props.overflow : 'visible')};;
     position: ${(props) => (props.position ? props.position : 'absolute')};;
     border-radius: 3px;
     width: ${(props) => (props.width ? props.width : '300px')};

diff --git a/src/common-ui/components/design-library/icons.tsx b/src/common-ui/components/design-library/icons.tsx
@@ -10,6 +10,7 @@ export const settings = browser.extension.getURL('/img/settings.svg')
 
 export const check = browser.runtime.getURL('/img/check.svg')
 export const checkRound = browser.runtime.getURL('/img/checkRound.svg')
+export const highlighterFull = browser.runtime.getURL('/img/highlightOn.svg')
 export const alertRound = browser.runtime.getURL('/img/alertRound.svg')
 export const close = browser.runtime.getURL('/img/close.svg')
 export const tagFull = browser.runtime.getURL('/img/tag_full.svg')
@@ -23,6 +24,8 @@ export const helpIcon = browser.runtime.getURL('/img/help.svg')
 export const searchIcon = browser.runtime.getURL('/img/search.svg')
 export const commentAdd = browser.runtime.getURL('/img/comment_add.svg')
 export const commentEdit = browser.runtime.getURL('/img/comment_edit.svg')
+export const compress = browser.runtime.getURL('/img/compress-alt.svg')
+export const expand = browser.runtime.getURL('/img/expand-alt.svg')
 export const commentEditFull = browser.runtime.getURL(
     '/img/comment_edit_full.svg',
 )
@@ -39,10 +42,12 @@ export const plus = browser.runtime.getURL('/img/plus.svg')
 export const dots = browser.runtime.getURL('/img/3dots.svg')
 export const trash = browser.runtime.getURL('/img/trash.svg')
 export const goTo = browser.runtime.getURL('/img/open.svg')
+export const openSidebar = browser.runtime.getURL('/img/openSidebar.svg')
 export const copy = browser.runtime.getURL('/img/copy.svg')
 export const edit = browser.runtime.getURL('/img/edit.svg')
 export const remove = browser.runtime.getURL('/img/remove.svg')
 export const removeX = browser.runtime.getURL('/img/removeX.svg')
+export const pin = browser.runtime.getURL('/img/thumbtack.svg')
 export const share = browser.runtime.getURL('/img/share.svg')
 export const shareWhite = browser.runtime.getURL('/img/shareWhite.svg')
 export const shareEmpty = browser.runtime.getURL('/img/shareEmpty.svg')
@@ -53,6 +58,9 @@ export const shared = browser.runtime.getURL('/img/shared.svg')
 export const sharedProtected = browser.runtime.getURL(
     '/img/sharedprotected.svg',
 )
+
+export const arrowUp = browser.runtime.getURL('/img/arrow-up.svg')
+
 export const saveIcon = browser.runtime.getURL('/img/saveIcon.svg')
 export const addPeople = browser.runtime.getURL('/img/addPeople.svg')
 

diff --git a/src/common-ui/components/design-library/theme.ts b/src/common-ui/components/design-library/theme.ts
@@ -57,7 +57,7 @@ export const theme: Theme = {
         smallText: '12px',
     },
     zIndices: {
-        overlay: 50,
+        overlay: 5000,
     },
     icons: {
         copy: icons.copy,

diff --git a/src/common-ui/components/dropdown-menu-btn.tsx b/src/common-ui/components/dropdown-menu-btn.tsx
@@ -257,7 +257,6 @@ const MenuBtn = styled.div<{ isOpen: boolean }>`
 
 const Menu = styled.ul`
     position: absolute;
-    ${({ theme }) => `left: ${theme.leftMenuOffset ?? 0};`}
     width: max-content;
     list-style: none;
     padding: 5px 0;
@@ -271,4 +270,6 @@ const Menu = styled.ul`
     margin-top: 5px;
     flex-direction: column;
     top: 25px;
+    left: -65px;
+    z-index: 1000;
 `