clean up the action bar a bit and add confirmation + shift to insta r…

…emove items
WorldBrain · Feb 27, 2024 · ea93f6b · ea93f6b
1 parent ef72ed6
commit ea93f6b
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 30 deletions.
diff --git a/external/@worldbrain/memex-common b/external/@worldbrain/memex-common
diff --git a/src/dashboard-refactor/index.tsx b/src/dashboard-refactor/index.tsx
@@ -1073,10 +1073,11 @@ export class DashboardContainer extends StatefulUIElement<
                             ].isCopyPasterShown,
                             event: event,
                         }),
-                    onTrashBtnClick: (day, pageId) => () =>
+                    onTrashBtnClick: (day, pageId) => (instaDelete) =>
                         this.processEvent('setDeletingPageArgs', {
                             day,
                             pageId,
+                            instaDelete,
                         }),
                     onShareBtnClick: (day, pageId) => () =>
                         this.processEvent('setPageShareMenuShown', {
@@ -1347,7 +1348,7 @@ export class DashboardContainer extends StatefulUIElement<
                             },
                         )
                     },
-                    onTrashBtnClick: (noteId, day, pageId) => () =>
+                    onTrashBtnClick: (noteId, day, pageId) => (instaDelete) =>
                         this.processEvent('setDeletingNoteArgs', {
                             noteId,
                             pageId,

diff --git a/src/dashboard-refactor/logic.ts b/src/dashboard-refactor/logic.ts
@@ -1573,10 +1573,61 @@ export class DashboardLogic extends UILogic<State, Events> {
 
     setDeletingPageArgs: EventHandler<'setDeletingPageArgs'> = async ({
         event,
+        previousState,
     }) => {
-        this.emitMutation({
-            modals: { deletingPageArgs: { $set: event } },
-        })
+        if (event.instaDelete) {
+            await executeUITask(
+                this,
+                (taskState) => ({
+                    searchResults: { pageDeleteState: { $set: taskState } },
+                }),
+                async () => {
+                    const resultsMutation: UIMutation<
+                        State['searchResults']
+                    > = {
+                        pageData: {
+                            byId: { $unset: [event.pageId] },
+                            allIds: {
+                                $set: previousState.searchResults.pageData.allIds.filter(
+                                    (id) => id !== event.pageId,
+                                ),
+                            },
+                        },
+                    }
+
+                    if (event.day === PAGE_SEARCH_DUMMY_DAY) {
+                        resultsMutation.results = {
+                            [event.day]: {
+                                pages: {
+                                    byId: { $unset: [event.pageId] },
+                                    allIds: {
+                                        $set: previousState.searchResults.results[
+                                            event.day
+                                        ].pages.allIds.filter(
+                                            (id) => id !== event.pageId,
+                                        ),
+                                    },
+                                },
+                            },
+                        }
+                    } else {
+                        resultsMutation.results = removeAllResultOccurrencesOfPage(
+                            previousState.searchResults.results,
+                            event.pageId,
+                        )
+                    }
+
+                    this.emitMutation({
+                        searchResults: resultsMutation,
+                    })
+                    await this.options.searchBG.delPages([event.pageId])
+                },
+            )
+        } else {
+            this.emitMutation({
+                modals: { deletingPageArgs: { $set: event } },
+            })
+        }
     }
 
     setPrivatizeNoteConfirmArgs: EventHandler<

diff --git a/src/dashboard-refactor/search-results/components/page-result.tsx b/src/dashboard-refactor/search-results/components/page-result.tsx
@@ -389,9 +389,21 @@ export default class PageResultView extends PureComponent<Props> {
         return (
             <TooltipBox
                 tooltipText={
-                    this.props.filteredbyListID === SPECIAL_LIST_IDS.INBOX
-                        ? 'Remove from Inbox'
-                        : 'Remove from Space'
+                    this.props.filteredbyListID === SPECIAL_LIST_IDS.INBOX ? (
+                        <span>
+                            Remove from Inbox
+                            <br />
+                            <strong>+ shift</strong> to remove without
+                            confirmation
+                        </span>
+                    ) : (
+                        <span>
+                            Remove from Space
+                            <br />
+                            <strong>+ shift</strong> to remove without
+                            confirmation
+                        </span>
+                    )
                 }
                 placement="bottom"
                 getPortalRoot={this.props.getRootElement}
@@ -400,7 +412,10 @@ export default class PageResultView extends PureComponent<Props> {
                     heightAndWidth="22px"
                     filePath={icons.removeX}
                     onClick={(event) => {
-                        {
+                        if (event.shiftKey) {
+                            this.props.onRemoveFromListBtnClick(event)
+                            this.setState({ confirmRemoveFromList: true })
+                        } else {
                             this.setState({ confirmRemoveFromList: true })
                             event.preventDefault()
                         }
@@ -730,6 +745,56 @@ export default class PageResultView extends PureComponent<Props> {
         ))
     }
 
+    private renderDeleteButton() {
+        return (
+            <TooltipBox
+                tooltipText={
+                    <span>
+                        Delete from Memex
+                        <br />
+                        <strong>+ shift</strong>to delete without confirmation
+                    </span>
+                }
+                placement="bottom"
+                getPortalRoot={this.props.getRootElement}
+            >
+                <Icon
+                    heightAndWidth="20px"
+                    filePath={icons.trash}
+                    onClick={(event) => {
+                        let instaDelete = false
+
+                        if (event.shiftKey) {
+                            instaDelete = true
+                        }
+                        this.props.onTrashBtnClick(instaDelete)
+                    }}
+                />
+            </TooltipBox>
+        )
+    }
+
+    private renderEditButton() {
+        return (
+            <TooltipBox
+                tooltipText={<span>Edit Title</span>}
+                placement="bottom"
+                getPortalRoot={this.props.getRootElement}
+            >
+                <Icon
+                    heightAndWidth="20px"
+                    filePath={icons.edit}
+                    onClick={() => {
+                        this.props.onEditTitleChange(
+                            this.props.normalizedUrl,
+                            this.props.fullTitle ?? this.props.normalizedUrl,
+                        )
+                    }}
+                />
+            </TooltipBox>
+        )
+    }
+
     render() {
         const hasTitle = this.props.fullTitle && this.props.fullTitle.length > 0
 
@@ -771,25 +836,9 @@ export default class PageResultView extends PureComponent<Props> {
                             <PageActionBox>
                                 {this.props.hoverState != null && (
                                     <ExtraButtonsActionBar>
-                                        {' '}
-                                        <Icon
-                                            heightAndWidth="20px"
-                                            filePath={icons.edit}
-                                            onClick={() => {
-                                                this.props.onEditTitleChange(
-                                                    this.props.normalizedUrl,
-                                                    this.props.fullTitle ??
-                                                        this.props
-                                                            .normalizedUrl,
-                                                )
-                                            }}
-                                        />
-                                        <Icon
-                                            heightAndWidth="20px"
-                                            filePath={icons.trash}
-                                            onClick={this.props.onTrashBtnClick}
-                                        />
+                                        {this.renderEditButton()}
                                         {this.renderVideoResizeButton()}
+                                        {this.renderDeleteButton()}
                                         {this.renderRemoveFromListBtn()}
                                     </ExtraButtonsActionBar>
                                 )}

diff --git a/src/dashboard-refactor/search-results/types.ts b/src/dashboard-refactor/search-results/types.ts
@@ -28,7 +28,7 @@ export interface CommonInteractionProps {
     onListPickerFooterBtnClick: React.MouseEventHandler
 
     onShareBtnClick: React.MouseEventHandler
-    onTrashBtnClick: React.MouseEventHandler
+    onTrashBtnClick: (instaDelete: boolean) => void
 }
 
 export type PageInteractionProps = Omit<

diff --git a/src/dashboard-refactor/types.ts b/src/dashboard-refactor/types.ts
@@ -182,7 +182,7 @@ export type DashboardModalsEvents = UIEvent<{
     setShowNoteShareOnboardingModal: { isShown: boolean }
 
     setDeletingListId: { listId: string }
-    setDeletingPageArgs: PageEventArgs
+    setDeletingPageArgs: PageEventArgs & { instaDelete: boolean }
     setDeletingNoteArgs: NoteDataEventArgs
     checkSharingAccess: null
     setSpaceSidebarWidth: { width: string }