Support moving bookmark by drag and drop (#142)

* Support moving bookmark by drag and drop

* Implement drop

* Ignore non-bookmark event

* [WIP] Use drop target

* WIP

* refactor: extract viewmodel

* Reorder bookmarks

* Fix styles on drag

* Fix dragEnd when drag across folder

* Use dragEnter for better performance

* Use data-drag to prevent hover

* Improve moving style

* Set url data

* refactor: toggle by data-drag-active

* refactor: extract <BookmarkDragDrop>

* Hover style

* refactor: move drag related styles to <BookmarkDragDrop>

* refactor: remove unused css class

* Improve behavior

Author: int128

src/Bookmarks/component.css

@@ -36,6 +36,24 @@
   position: relative; /* for .BookmarkEditButton */
 }
 
+/* when a bookmark is moved to another folder, "From" should be hidden */
+.Bookmark__DragDrop__From:not(.Bookmark__DragDrop__To) .Bookmark {
+  visibility: hidden;
+}
+
+/* when a bookmark is moved to another folder but not hovered, "To" should be placeholder */
+.Bookmark__DragDrop__To:not(.Bookmark__DragDrop__Hover) {
+  outline: var(--palette-1) dotted 2px;
+}
+
+.Bookmark__DragDrop__To:not(.Bookmark__DragDrop__Hover) .Bookmark {
+  visibility: hidden;
+}
+
+.Bookmark__DragDrop__Hover {
+  outline: var(--palette-1) solid 2px;
+}
+
 .BookmarkButton {
   display: grid;
   grid-template-columns: var(--size-icon) auto;
@@ -48,7 +66,7 @@
   background-color: var(--palette-3);
 }
 
-.BookmarkButton:hover {
+.BookmarkButton:not([data-drag-active]):hover {
   background-color: var(--palette-2);
   box-shadow: 0 0 calc(var(--size-folder-item-gap) * 3) var(--palette-01);
 }
@@ -91,6 +109,10 @@
   text-align: center;
 }
 
+.BookmarkEditButton[data-drag-active] {
+  display: none;
+}
+
 .BookmarkEditButton {
   visibility: hidden;
   opacity: 0;

src/Bookmarks/component.tsx

@@ -1,7 +1,8 @@
 import './component.css'
-import { Bookmark, BookmarkFolder, FolderCollapse, filterBookmarks } from './model'
-import React, { FC, PropsWithChildren, useState } from 'react'
-import { useBookmarkFolders, useFolderCollapse } from './repository'
+import { Bookmark, BookmarkFolder, FolderCollapse, Position, filterBookmarks } from './model'
+import { BookmarkWithDragProps, Drag, reorderBookmarks } from './viewmodel'
+import React, { Dispatch, FC, PropsWithChildren, useState } from 'react'
+import { moveBookmark, useBookmarkFolders, useFolderCollapse } from './repository'
 import BookmarkEditorComponent from '../BookmarkEditor/component'
 import { EditingBookmark } from '../BookmarkEditor/model'
 import Link from '../Link/component'
@@ -37,12 +38,13 @@ type BookmarkFoldersComponentProps = {
 const BookmarkFoldersComponent: FC<BookmarkFoldersComponentProps> = ({ bookmarkFolders, shortcutMap, search }) => {
   const [toggles] = useToggles()
   const [folderCollapse, setFolderCollapse] = useFolderCollapse()
+  const [drag, setDrag] = useState<Drag>()
   return (
     <div className="BookmarkFolders">
       {bookmarkFolders.map((f, i) => (
         <BookmarkFolderIndent key={i} depth={toggles.indent ? f.depth : 0}>
           <BookmarkFolderCollapse folder={f} folderCollapse={folderCollapse} setFolderCollapse={setFolderCollapse}>
-            <BookmarkFolderItems folder={f} shortcutMap={shortcutMap} search={search} />
+            <BookmarkFolderItems folder={f} shortcutMap={shortcutMap} search={search} drag={drag} setDrag={setDrag} />
           </BookmarkFolderCollapse>
         </BookmarkFolderIndent>
       ))}
@@ -111,31 +113,109 @@ type BookmarkFolderItemsProps = {
   folder: BookmarkFolder
   shortcutMap: ShortcutMap
   search: string
+  drag: Drag | undefined
+  setDrag: Dispatch<Drag | undefined>
 }
 
-const BookmarkFolderItems: FC<BookmarkFolderItemsProps> = ({ folder, shortcutMap, search }) => {
-  const bookmarks = filterBookmarks(folder.bookmarks, search)
+const BookmarkFolderItems: FC<BookmarkFolderItemsProps> = ({ folder, shortcutMap, search, drag, setDrag }) => {
+  const bookmarks = reorderBookmarks(drag, folder.id, filterBookmarks(folder.bookmarks, search))
   return (
     <>
-      {bookmarks.map((b) => (
-        <BookmarkComponent key={b.id} bookmark={b} shortcutMap={shortcutMap} />
+      {bookmarks.map((b, index) => (
+        <BookmarkDragDrop
+          key={b.id}
+          bookmark={b}
+          position={{ folderID: folder.id, index }}
+          drag={drag}
+          setDrag={setDrag}
+        >
+          <BookmarkComponent bookmark={b} shortcutMap={shortcutMap} dragActive={drag ? true : undefined} />
+        </BookmarkDragDrop>
       ))}
     </>
   )
 }
 
+const classNameOfMap = (classNameMap: { [className: string]: boolean | undefined }) =>
+  Object.entries(classNameMap)
+    .filter(([, enabled]) => enabled === true)
+    .map(([className]) => className)
+    .join(' ')
+
+type BookmarkDragDropProps = {
+  bookmark: BookmarkWithDragProps
+  position: Position
+  drag: Drag | undefined
+  setDrag: Dispatch<Drag | undefined>
+} & PropsWithChildren
+
+const BookmarkDragDrop: FC<BookmarkDragDropProps> = ({ bookmark, position, drag, setDrag, children }) => {
+  return (
+    <div
+      className={classNameOfMap({
+        Bookmark__DragDrop__From: bookmark.dragFrom,
+        Bookmark__DragDrop__To: bookmark.dragTo,
+        Bookmark__DragDrop__Hover: bookmark.hover,
+      })}
+      onDragStart={(e) => {
+        setDrag(Drag.start(bookmark, position))
+        e.dataTransfer.effectAllowed = 'move'
+        e.dataTransfer.setData('text/plain', bookmark.url)
+      }}
+      onDragOver={(e) => {
+        if (drag) {
+          e.preventDefault()
+        }
+      }}
+      onDragEnter={(e) => {
+        if (drag) {
+          e.preventDefault()
+          setDrag(drag.enterTo(position))
+        }
+      }}
+      onDragLeave={(e) => {
+        // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget
+        const exitedFrom = e.target
+        const enteredTo = e.relatedTarget
+        if (
+          drag &&
+          exitedFrom instanceof HTMLElement &&
+          exitedFrom.classList.contains('BookmarkButton') &&
+          enteredTo instanceof HTMLElement &&
+          enteredTo.classList.contains('BookmarkFolder')
+        ) {
+          setDrag(drag.leave())
+        }
+      }}
+      onDragEnd={() => {
+        setDrag(undefined)
+      }}
+      onDrop={(e) => {
+        e.preventDefault()
+        if (drag) {
+          moveBookmark(drag.bookmark, drag.calculateDestination()).catch(console.error)
+          setDrag(undefined)
+        }
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
 type BookmarkComponentProps = {
   bookmark: Bookmark
   shortcutMap: ShortcutMap
+  dragActive: true | undefined
 }
 
-const BookmarkComponent: FC<BookmarkComponentProps> = ({ bookmark, shortcutMap }) => {
+const BookmarkComponent: FC<BookmarkComponentProps> = ({ bookmark, shortcutMap, dragActive }) => {
   const [editingBookmark, setEditingBookmark] = useState<EditingBookmark>()
   const shortcutKey = shortcutMap.getByBookmarkID(bookmark.id)
   return (
     <div className="Bookmark">
       <Link href={bookmark.url}>
-        <div className="BookmarkButton">
+        <div className="BookmarkButton" data-drag-active={dragActive} draggable>
           <div className="BookmarkButton__Title">{bookmark.title}</div>
           <img className="BookmarkButton__Icon" alt="" src={faviconImage(bookmark.url)} />
           {shortcutKey ? <div className="BookmarkButton__Badge">{shortcutKey}</div> : null}
@@ -144,6 +224,7 @@ const BookmarkComponent: FC<BookmarkComponentProps> = ({ bookmark, shortcutMap }
       <a
         href="#Edit"
         className="BookmarkEditButton"
+        data-drag-active={dragActive}
         onClick={(e) => {
           setEditingBookmark(new EditingBookmark(bookmark, shortcutKey))
           e.preventDefault()

src/Bookmarks/model.ts

@@ -26,6 +26,11 @@ export const filterBookmarks = (bookmarks: readonly Bookmark[], search: string):
   )
 }
 
+export type Position = {
+  readonly folderID: BookmarkFolderID
+  readonly index: number
+}
+
 export class FolderCollapse {
   private readonly collapsedIDs: ReadonlySet<BookmarkFolderID>
 

src/Bookmarks/repository.ts

@@ -1,4 +1,4 @@
-import { Bookmark, BookmarkFolder, BookmarkFolderID, FolderCollapse } from './model'
+import { Bookmark, BookmarkFolder, BookmarkFolderID, FolderCollapse, Position } from './model'
 import { useEffect, useState } from 'react'
 import { useChromeStorage } from '../infrastructure/chromeStorage'
 
@@ -73,6 +73,10 @@ export const removeBookmark = async (bookmark: Bookmark) => {
   await chrome.bookmarks.remove(bookmark.id)
 }
 
+export const moveBookmark = async (bookmark: Bookmark, position: Position) => {
+  await chrome.bookmarks.move(bookmark.id, { parentId: position.folderID, index: position.index })
+}
+
 export const useFolderCollapse = (): readonly [FolderCollapse, (newSet: FolderCollapse) => void] => {
   const [ids, setIDs] = useChromeStorage<readonly BookmarkFolderID[]>({
     areaName: 'sync',

src/Bookmarks/viewmodel.ts

@@ -0,0 +1,75 @@
+import { Bookmark, BookmarkFolderID, Position } from './model'
+
+export class Drag {
+  readonly bookmark: Bookmark
+  readonly from: Position
+  readonly to: Position
+  readonly hover: boolean
+
+  private constructor(bookmark: Bookmark, from: Position, to: Position, hover: boolean) {
+    this.bookmark = bookmark
+    this.from = from
+    this.to = to
+    this.hover = hover
+  }
+
+  static start(bookmark: Bookmark, from: Position) {
+    return new Drag(bookmark, from, from, true)
+  }
+
+  enterTo(to: Position) {
+    return new Drag(this.bookmark, this.from, to, true)
+  }
+
+  leave() {
+    return new Drag(this.bookmark, this.from, this.to, false)
+  }
+
+  calculateDestination(): Position {
+    // https://stackoverflow.com/questions/13264060/chrome-bookmarks-api-using-move-to-reorder-bookmarks-in-the-same-folder
+    if (this.from.folderID === this.to.folderID && this.from.index < this.to.index) {
+      return { ...this.to, index: this.to.index + 1 }
+    }
+    return this.to
+  }
+}
+
+export type BookmarkWithDragProps = Bookmark & {
+  readonly dragFrom?: true
+  readonly dragTo?: true
+  readonly hover?: true
+}
+
+export const reorderBookmarks = (
+  drag: Drag | undefined,
+  folderID: BookmarkFolderID,
+  bookmarks: readonly Bookmark[]
+): readonly BookmarkWithDragProps[] => {
+  if (!drag) {
+    return bookmarks
+  }
+
+  if (folderID === drag.from.folderID && drag.from.folderID === drag.to.folderID) {
+    // move the bookmark in the folder
+    const r: BookmarkWithDragProps[] = [...bookmarks]
+    r.splice(drag.from.index, 1)
+    r.splice(drag.to.index, 0, { ...drag.bookmark, dragFrom: true, dragTo: true, hover: drag.hover || undefined })
+    return r
+  }
+
+  // when move across the folder, keep the element to receive the dragEnd event
+  if (folderID === drag.from.folderID) {
+    const r: BookmarkWithDragProps[] = [...bookmarks]
+    r.splice(drag.from.index, 1)
+    r.push({ ...drag.bookmark, dragFrom: true })
+    return r
+  }
+
+  if (folderID === drag.to.folderID) {
+    const r: BookmarkWithDragProps[] = [...bookmarks]
+    r.splice(drag.to.index, 0, { ...drag.bookmark, dragTo: true, hover: drag.hover || undefined })
+    return r
+  }
+
+  return bookmarks
+}