feat: improve breadcrumbs functionality

package.json

@@ -53,6 +53,7 @@
     "is-binary": "^0.1.0",
     "is-ipfs": "^1.0.3",
     "it-all": "^1.0.2",
+    "it-first": "^1.0.2",
     "it-last": "^1.0.2",
     "it-map": "^1.0.2",
     "milliseconds": "^1.0.3",
@@ -68,8 +69,8 @@
     "react-copy-to-clipboard": "^5.0.2",
     "react-country-flag": "^1.1.0",
     "react-debounce-render": "^5.0.0",
-    "react-dnd": "^10.0.2",
-    "react-dnd-html5-backend": "^10.0.2",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
     "react-dom": "^16.13.1",
     "react-faux-dom": "^4.5.0",
     "react-helmet": "^5.2.1",

public/locales/en/files.json

@@ -91,7 +91,10 @@
     },
     "step2": {
       "title": "Breadcrumbs",
-      "paragraph1": "The current work directory, you can navigate through the folder hierarchy by clicking on them."
+      "paragraph1": "These breadcrumbs display the path to your current directory. You can…",
+      "bullet1": "Click an individual breadcrumb to go to that directory",
+      "bullet2": "Right-click a breadcrumb to get the actions menu for that directory",
+      "bullet3": "Drag files onto a breadcrumb to move or import them"
     },
     "step3": {
       "title": "Add files",

public/locales/en/notify.json

@@ -4,7 +4,7 @@
   "ipfsApiRequestFailed": "Could not connect. Please check if your daemon is running.",
   "windowIpfsRequestFailed": "IPFS request failed. Please check your IPFS Companion settings.",
   "ipfsIsBack": "Normal IPFS service has resumed. Enjoy!",
-  "folderExists": "A folder with that name already exists. Please choose another.",
+  "folderExists": "An item with that name already exists. Please choose another.",
   "filesFetchFailed": "Failed to get those files. Please check the path and try again.",
   "filesRenameFailed": "Failed to rename the files. Please try again.",
   "filesMakeDirFailed": "Failed to create directory. Please try again.",

src/bundles/ipfs-provider.js

@@ -3,6 +3,7 @@
 import multiaddr from 'multiaddr'
 import HttpClient from 'ipfs-http-client'
 import { getIpfs, providers } from 'ipfs-provider'
+import first from 'it-first'
 import last from 'it-last'
 
 /**
@@ -169,9 +170,12 @@ const writeSetting = (id, value) => {
 /**
  * @typedef {Object} IPFSAPI
  * @property {(callback?:Function) => Promise<void>} stop
+ * @property {Object} files
+ * @property {(path:string) => Promise<Object>} files.stat
+ * @property {Object} pin
+ * @property {(options:Object) => Iterator} pin.ls
  */
-
-/** @type {IPFSAPI|void} */
+/** @type {IPFSAPI|null} */
 let ipfs = null
 
 /**
@@ -232,6 +236,17 @@ const bundle = {
 
   doDismissIpfsInvalidAddress: () => (store) => {
     store.dispatch({ type: 'IPFS_API_ADDRESS_INVALID_DISMISS' })
+  },
+
+  doGetPathInfo: (path) => async () => {
+    return await ipfs.files.stat(path)
+  },
+
+  doCheckIfPinned: (cid) => async () => {
+    try {
+      const value = await first(ipfs.pin.ls({ paths: [cid] }))
+      return !!value
+    } catch (_) { return false }
   }
 }
 

src/files/FilesPage.js

@@ -225,7 +225,7 @@ class FilesPage extends React.Component {
           translateX={contextMenu.translateX}
           translateY={contextMenu.translateY}
           handleClick={this.handleContextMenu}
-          isUpperDir={contextMenu.file && contextMenu.file.name === '..'}
+          isDirectory={contextMenu.file && contextMenu.file.type === 'directory'}
           isMfs={filesPathInfo ? filesPathInfo.isMfs : false}
           isUnknown={!!(contextMenu.file && contextMenu.file.type === 'unknown')}
           pinned={contextMenu.file && contextMenu.file.pinned}
@@ -246,6 +246,7 @@ class FilesPage extends React.Component {
           files={files}
           onNavigate={this.props.doFilesNavigateTo}
           onAddFiles={this.onAddFiles}
+          onMove={this.props.doFilesMove}
           onAddByPath={(files) => this.showModal(ADD_BY_PATH, files)}
           onNewFolder={(files) => this.showModal(NEW_FOLDER, files)}
           onCliTutorMode={() => this.showModal(CLI_TUTOR_MODE)}

src/files/breadcrumbs/Breadcrumbs.css

@@ -0,0 +1,23 @@
+.BreadcrumbsButton::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -4px;
+    height: 2px;
+    background: currentColor;
+    transition: opacity 0.2s ease-in-out;
+    opacity: 0;
+}
+
+.BreadcrumbsButton.white::after {
+    background: inherit;
+}
+
+.BreadcrumbsButton.dragging::after {
+    opacity: 1;
+}
+
+.BreadcrumbsButton.no-events {
+    pointer-events: none;
+}